Chào mừng các bạn
-((`(`vŽ)--*** MasterSpy *** --(`vŽ)`))- - Tạo một CSS layout từ một bản thiết kế (Phần 1 đến 8)
ღLONELYღ
  Home
  => Cách tạo một trang web cho riêng mình !
  => Một số địa chỉ trang web hay dành cho bạn, ....cho tôi !
  => 5 bước cơ bản để diệt tận gốc Spyware
  => 10 điều “lính mới” nên biết
  => 10 bước để lập kế hoạch cho nghề nghiệp tương lai của bạn
  => 15 LỜI KHUYÊN HỌC TIẾNG ANH
  => 21 kho lưu dữ liệu miễn phí trên Internet
  => PHƯƠNG PHÁP XỬ LÝ LOGIC VỊ TỪ
  => 50 cuốn sách văn học cần đọc
  => Những bài học từ Adam Khoo
  => Dùng Admodify.net để quản trị và phục hồi Exchange 2003
  => Cuộc đời của Albert Einstein
  => Cảnh giác với hacker và keylogger!
  => Phần mềm miễn phí giúp bảo vệ computer khi online
  => Học thi - cần ăn uống hợp lý
  => Hacker “oánh” mỗi PC chỉ mất 39 giây
  => Xác định nguyên nhân máy tính tự khởi động !
  => Diệt virus Autorun
  => Bấm dây mạng !
  => Bảo vệ mắt khi sử dụng máy tính !
  => Blog ra đời như thế nào?
  => Bài tập Pascal kiểu bản ghi !
  => Hướng dẫn ôn tập lập trình Pascal căn bản !
  => Cách Diệt Virus
  => Cách gỡ bỏ thủ công Symantec Antivirus an toàn (Phần I)
  => Tổng hợp các lệnh ngoài DOS
  => Cài HIREN BOOTCD vào ổ cứng để cứu hộ
  => Cài windows media player 11 ( không cần active window)
  => Cấu hình mạng ADSL cho người dùng tại nhà
  => Thiết Lập Sevice trong windows XP (giúp máy chạy nhanh hơn)
  => Giới Thiệu Centos
  => Chẩn đoán lỗi của màn hình !
  => Chọn DNS truy cập mạng !
  => Kinh nghiệm phòng chống virus, spyware
  => Trắc nghiệm nghiệp vụ kế toán bằng tiếng Anh !
  => Hướng dẫn chụp hình bằng webcam
  => Tổng Hợp Code Dùng Trong Việc Tạo BLOG
  => Công dụng của các dịch vụ trong Windows
  => Sử dụng Popcap game mãi mãi !
  => Cử nhân CNTT không làm CNTT
  => Tìm hiểu DNS.Các bước thiết lập khi mới đăng ký tên miền
  => Làm DNS server online
  => Nội dung định nghĩa về vật chất của Lê Nin
  => Đọc và ... suy nghĩ !
  => Đôi điều về bảo mật hệ thống mạng trong công ty!
  => Khắc phục lỗi 999 Error của Yahoo
  => Chuyển dữ liệu của ổ C từ FAT32 thành NTFS
  => Gỡ password CMOS bằng cách nào?
  => Phần I: Cơ bản về lỗi "màn hình xanh" trong Windows
  => Tổng quan về Group Policy - từ đơn giản đến phức tạp !
  => Gửi nhiều file qua Yahoo Mail
  => Từ XP cài Hacao Linux 2.16 Pro (file ISO) vào đĩa cứng (LiveCD)
  => Chịu thuế và không chịu thuế
  => Hội thảo qua mạng với NetMeeting
  => HOST Free
  => Hướng dẫn download trên megaupload
  => KGB nén File từ 450MB còn 1.43MB rất tiện chia sẻ file trên mạng
  => Khắc phục rớt mạng liên tục
  => Kiến trúc Oracle
  => Thành công trên giảng đường đại học
  => Kỹ thuật Photoshop cơ bản !
  => Kinh nghiệm học tiếng ANH
  => KInh nghiệm học TOÁN CAO CẤP
  => Đôi điều về quá trình làm luận văn (Phần 2)
  => Làm theme cho Blog 360
  => Chia sẻ những điều học được từ cách làm việc theo nhóm
  => Vạch kế hoạch cho tương lai
  => Các Lệnh Cơ Bản trong LINUX
  => Lịch sử các nước ĐẾ QUỐC
  => Lịch sử Việt Nam
  => Links những trang web hay
  => Tạo mail server online bằng IP Động
  => Tự làm giao diện cho Yahoo Mash!
  => Mấy điểm cần tránh
  => Hỏi về IPHONE
  => Máy tính không khởi động từ ổ đĩa cứng!...?
  => MIÊU TẢ SẢN PHẨM MÁY IN hp1320
  => Phá Deep Freeze - Cướp lấy password!!!
  => Những "tuyệt chiêu" chọn mua laptop cũ
  => NHỮNG NGUYÊN TẮC CƠ BẢN CỦA BÁO CHÍ
  => Tìm hiểu nhân của hệ điều hành Linux
  => Sửa lỗi NTLDR is missing
  => Ổ cứng chóng hỏng vì... điều hòa nhiệt độ
  => Những phím tắt thông dụng trong Photoshop 7.0
  => Phím tắt trong WORDS
  => Bí mật của PHỤ NỮ
  => Hướng dẫn post hình lên mạng, và 1 số website để upload hình
  => Chương trình quản lý số điện thoại !
  => Quản lý các mạng Windows dùng script - Phần 2: Hoàn chỉnh script -
  => Cấu hình cho máy in N2500
  => Xóa nick của mình trong Friend List của người khác
  => Rollback Rx Pro:
  => User và pass của một số router
  => Giải pháp sao lưu trực tuyến miễn phí (Phần cuối)
  => Vài điều về Scanner
  => Chọn hệ điều hành của bạn
  => Làm server online tận dụng đường truyền ADSL
  => Thuật toán - Cấu trúc dữ liệu
  => So sánh Oracle và SQL Server ?
  => Cấu hình các công nghệ bảo vệ mạng Windows XP SP2 trên một máy tính
  => Tổng quan về tiết kiệm điện khi sử dụng máy tính !
  => Phần IV: Xử lý sự cố phần cứng
  => CÁC VẤN ĐỀ VỀ SỨC KHỎE PHỤ NỮ
  => Sử dụng phím tắt với Internet Explorer 7
  => SỰ PHÁT TRIỂN CỦA SINH VẬT
  => Nguồn gốc máng cỏ giáng sinh
  => Sưu tầm câu đố !
  => SVCHOST
  => Phòng chống virus cho mạng máy tính doanh nghiệp: kinh nghiệm thực tế
  => Các lệnh căn bản trong ngôn ngữ html
  => Sức mạnh của card đồ họa !
  => Cách tải Nhạc nét
  => Triết học và tâm sự của các nhà giáo
  => Phát triển chiều cao
  => Tăng tốc toàn bộ máy tính bằng tay
  => Tăng tốc WinXP
  => Chống mất cắp cho laptop với Laptop Alarm
  => Tạo file ghost!
  => Tạo một CSS layout từ một bản thiết kế (Phần 1 đến 8)
  => Tạo nick ảo trong Yahoo Messenger
  => Tết Đoan Ngọ bắt đầu từ giữa trưa
  => Thói quen tốt: Nghĩ vậy mà không phải vậy
  => Thomas Edison & những phát minh vĩ đại -
  => Windows Vista: các thủ thuật nhỏ khi sử dụng
  => Thủ thuật Blog 360
  => Thủ thuật Internet Explorer 7
  => Thủ thuật tăng tốc cho Windows
  => Thủ thuật Visual basic
  => Thủ thuật Yahoo! Messenger
  => Yahoo Messenger
  => Khám phá mạng xã hội Yahoo! Mash
  => Mẹo tìm kiếm
  => Tìm kiếm trong Excel
  => Tóc hợp khuôn mặt
  => Tokyo - Một chuyến đi
  => Mười quy luật then chốt về Bảo mật
  => Tổng hợp tất cả các kỹ thuật vượt tường lửa
  => Trang trí USB
  => Thuật toán - Cấu trúc dữ liệu CRC (Cyclic Redundancy Check)
  => Các Tuyệt kỹ khiến phái nữ phải ngã lòng
  => CÁCH UP ẢNH QUA HOST TẠI DIỄN ĐÀN
  => Quản lý danh sách bạn chat trong Yahoo! Messenger
  => Error Doctor 2007
  => TuneUp Utilities® 2007
  => Bộ gõ tiếng Việt: Unikey
  => Hướng dẫn viết bài
  => Tường lửa mới trong Windows Vista và Windows Server Longhorn
  => Web 2.0 không chỉ là công nghệ
  => Các website hữu ích về du học bậc sau đại học tại Hoa Kỳ
  => Wi-fi và an toàn thông tin
  => Thuật toán - Cấu trúc dữ liệu So khớp chuỗi với các ký tự wildcard
  => Xóa địa chỉ và homepage
  => USB không cho ghi
  => Yêu cầu của Quản trị mạng
  => Cách Add Feed trong Blog 360
  => Cách tạo theme trong suốt
  => Đề cương KT-Chính Trị
  Contact
  Guestbook
  Story
  Kiếm tiền thật dễ dàng

Biển xanh ... cát trắng

 

Content of the new pag
Tạo một CSS layout từ một bản thiết kế (Phần 1 đến
 
Người post bài: Administrator   
ThegioiIT.vn xin được chuyển đến bạn đọc loạt bài rất hay của anh Vũ Quang Cường về CSS. Các bạn yêu thích thiết kế web hãy chú ý đón đọc lọat tutorials này nhé !
Trong bài viết này tôi (Cuongvq) sẽ chia ra làm nhiều phần để các bạn dễ hình dung và có thể hiểu được một cách chân thực nhất về bản chất của một website và cách chúng ta style chúng theo ý muốn của designer.
Nếu trước đây các bạn chưa bao giờ sử dụng hay chưa từng biết đến CSS thì tôi nghĩ bạn nên đọc các định nghĩa về CSS tại W3C. Tôi sẽ không dịch những bài viết từ W3C ra tiếng Việt vì tôi nghĩ việc đọc và hiểu các tài nguyên kiến thức trên internet là điều bắt buộc bạn phải tự trang bị.
Bây giờ xin trở lại vấn đề chính là làm thế nào để style được một layout hoàn chỉnh. Với một số Công ty, công việc thiết kế một website được chia làm nhiều công đọan và sẽ do nhiều người hay nhiều nhóm người chia ra phụ trách từng công đọan. Tạm bỏ qua yếu tố khách hàng, ta có thể thấy yếu tố tạo nên sự thành công của của một website chính là giao diện của trang web, đó chính là bộ mặt và là nơi phô diễn tất cả những thành phần trong một trang web. Cho dù đó là một website về thương mại điện tử, một website trưng bày sản phẩm của Công ty hay một website của một cộng đồng... thì yếu tố "nhan sắc" cũng được đặt lên hàng đầu. Bạn nên nhớ răng mắt người chỉ mất 0.2 giây để có thể nhận biết được màu sắc và bố cục của một trang web có ấn tượng không? có thu hút không?.
01 Dựng bố cục, phác họa ý tưởng ban đầu bằng những mảng hình khối, xác định tông màu chủ đạo và các màu link, hilite ...
 
Bước này bạn sẽ bố cục các thành phần của site, màu sắc sử dụng và ảnh minh họa hay họa tiết trang trí. Bản thiết kế được dựng trên Photoshop (bạn có thể tùy ý sử dụng các phần mềm như Illustrator hay Firework...)
Ngoài ra 1 điều rất quan trọng là bạn phải xác định sẽ xây dựng website dựa trên ngôn ngữ nào. Trong bài viết này chúng ta đi sâu vào khâu thiết kế nên phần lập trình web bằng các ngôn ngữ sẽ bàn tới sau. Theo xu hướng hiện nay thế giới websie chuyên nghiệp đang dần đi theo hướng có tổ chức và quy chuẩn nhất định, việc sử dụng Div để thay thế cho Table hiện nay gần như là điều bắt buộc bởi những lợi thế của Div & CSS đã khắc phục được những hạn chế của Table trong việc xây dựng website.
Các thành phần chính của một website
1.            Main Navigation - Menu chủ đạo Tùy từng bố cục ta có thể đặt menu này dạng nằm ngang hoặc nằm dọc. Trong thiết kế này ta chọn kiểu nằm ngang với kích thước: Width: 760px Height: 50px
2.            HeaderNơi đặt những thành tố quan trọng như banner, tên Công ty, Logo ... Trong thiết kế này ta chọn kiểu nằm ngang với kích thước: Width: 760px Height: 150px
3.            Content - Nội dung Nội dung chính của website được trình bày tại đây. Kích thước: Width: 480px Height: Tùy ý, tự co dãn theo phần nội dung.
4.            Right Col - Cột bên phảiTùy từng bố cục của bạn là 3 cột hay 2 cột. Phần này chứ những thông tin mang tính chất nổi bật, hiển thị ở dạng tin ngắn. Kích thước: Width: 280px Height: Tùy ý, tự co dãn theo phần nội dung.
5.            FooterNơi chứa đựng những thông tin về Copyright, các điều khoản sử dụng hay một menu nhỏ gọn. Kích thước: Width: 760px Height: 66px.
Như vậy là ta đã có được bộ khung cơ bản của một website. Công đọan này các bạn có thể phải làm lại nhiều lần để có được bố cục về tỷ lệ giữa các thành phần sao cho hợp lý nhất, phù hợp với nội dung website. Phần 2 chúng ta sẽ bắt đầu dựng 1 file Html cho layout, trong phần này bạn sẽ sử dụng một số kiến thức cơ bản về Html để có thể tạo những thành phần cấu thành 1 website hoàn chỉnh.
02 Cấu trúc này bao gồm 2 thư mục con là CSS chứa file tenfile.css và thư mục images chứa ảnh. Ngoài cùng là 1 file index.html
Copy đọan code này và save ở dạng file html
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
Bây giờ bạn đã có thể mở file index.html trong thư mục gốc chứa các file của website bằng web browser. Tuy nhiên đó sẽ là trang trắng, không có nội dung. Phần tiếp theo chúng ta sẽ bắt đầu thêm các thành phần để phân vùng các thành phần chính theo thiết kế ban đầu.
03 Chèn thẻ Div vào giữa body và đặt cho nó id="page-container" . Nội dung thẻ Div là dòng chữ "Hello World"
<body>
<div id="page-container">
Hello world.
</div>
</body>
Tạo một file mới, đặt tên master.css và save trong thư mục css. Trong file này ta bắt đầu gán cho thẻ Div id="page-container" định dạng CSS. Lưu ý khi ta dùng ID, có nghĩa là duy nhất cái div đấy tồn tại và có định dạng CSS cho div ID thì phải bắt đầu bằng dấu "#". Còn trong trường hợp đặt thẻ div thuộc 1 class thì trong css sẽ bắt đầu bằng dấu "." ví dụ: .page-container {}
 #page-container {
}
Bây giờ ta bắt đầu dùng các thuộc tính của CSS để style cho thẻ div
 #page-container {
background: red;
width: 760px;
margin: 0;
}
Với những thuộc tính trên, ta có thể thấy dễ dàng thẻ div được CSS quy định background màu đỏ. rộng 760px và khoảng cách của cái div đấy tới các div thành phần khác = 0px. Bây giờ bạn có thể thấy trên web browser dòng chữ Hello World trên nền màu đỏ rộng 760px. Tuy nhiên nó sẽ bị cách mép trên cùng của trình duyệt một khoảng 8px. Vì vậy ta phải quy định cho thẻ body thuộc tính margin: 0 cho thẻ body.
 html, body {
margin: 0;
padding: 0;
}
Giờ nó đã trở về gốc tọc độ 0:0 tính theo góc trên cùng bên trái trình duyệt. Tương tự như vậy ta bắt đầu thêm các div khác chứa nội dung của các thành phần còn lại. Bỏ dòng chữ "Hello World" đi và thay vào
 <div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
Bây giờ sản phẩm của chúng ta sẽ có kết quả như thế này. Phần tiếp theo ta sẽ đặt thuộc tính CSS cho từng cái Div để chúng nằm đúng vị trí như thiết kế ban đầu. Tất nhiên là ta sẽ cho nằm đúng vị trí chính xác 100% theo như thiết kế.
Div page-container
04Trong phần này ta bắt đầu gán các thuộc tính của CSS cho từng div để có được những thông số cơ bản như màu nền, chiều cao, float ...
 #header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
Sau khi đưa thông số CSS như trên vào, ta có đựoc màu nền của các thẻ
Background Color
 #sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
Thuộc tính float: right; Gán vị trí của Div khi hiển thị nằm bên phải (canh lề phải)
Bây giờ ta sẽ đưa nội dung ví dụ vào trong content để xem nó hiển thị thế nào. Copy đọan code dưới đây vào giữa thẻ div content
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam gravida enim ut risus. 
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Maecenas in lectus.Donec in sapien in nibh rutrum gravida. 
Sed ut mauris. Fusce malesuada enim vitae lacus 
euismod vulputate. Nullam rhoncus mauris ac metus.
Maecenas vulputate aliquam odio. 
Duis scelerisque justo a pede. Nam augue lorem, semper at, 
porta eget, placerat eget, 
purus. Suspendisse mattis nunc vestibulum ligula. In hac 
habitasse platea dictumst.
</div>
Ta có được kết quả như sau. Nhưng có vấn đề xảy ra là phần chữ nằm tràn cả sang phần diện tích của Sidebar A mà lúc trước ta đã gán float: right;
Phần text tràn sang
 
05Ở phần trước chúng ta đã đưa nội cung vào content và bị vấn đề là phần text bị tràn qua cột bên phải . Sau đây ta sẽ tìm hiểu nguyên nhân tại sao và làm thể nào để fix nó.
Nguyên nhân ở đây là ta mới chỉ quy định cho div content kích thước chiều ngang. Đến đây ta làm một phép tính đơn giản 760px chiều rộng của toàn bộ div page-container - đi 280px chiều rộng của div Sidebar, như vậy còn 480px. Ta cũng đã thiết lập chiều rộng của div container là 480px, như vậy bây giờ ta chỉ cần đặt thuộc tính margin để div container nằm cách đường biên phải 1 khoảng 280px
Bây giờ ta đưa đọan code margin-right: 280px vào CSS của div Content
 #content {
margin-right: 280px;
background: green;
}
Và đưa thêm nội dung ví dụ vào trong div Sidebar
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam gravida enim ut risus. 
Praesent sapien purus, ultrices a, varius ac, suscipit 
ut, enim. Maecenas in lectus. 
Donec in sapien in nibh rutrum gravida. 
</div>
Đến đây phần content đã giải quyết xong, tuy nhiên do phần nội dung của Sidebar nhiều hơn nên nó sẽ dài hơn content, nhưng footer lại ăn theo content nên phần nội dung của sidebar lại đè lên footer.
Footer không nằm dưới
Để giải quyết cái bug này, ta dùng thuộc tính clear: both; để xóa đi phần không gian mà content thiếu gây tình trạng footer bị đẩy lên.
 #footer {
clear: both;
background: orange;
height: 66px;
}
Clear
Lưu ý: đây cũng là một trường hợp thường xuyên gặp khi dùng div. Vì vậy các bạn nên tìm hiểu kỹ phần này để khắc phục trong những trường hợp tương tự.
 
06 Phần này chúng ta sẽ đưa vào layout một số thành phần chính, tiêu biểu và có ở hầu hết các website
·                Navigation Links
·                Heading
·                Content
·                Footer infomation
Chúng ta sẽ bắt đầu bằng việc tạo 1 class tên là hidden. Bạn nên đặt class này ở phần đầu của file Css, sau thẻ body.
   .hidden {
display: none;
}
Sau khi bạn tạo một class là hidden trong file css. Chúng ta bắt đầu đưa vào nội dung của từng thành phần trong website. Ta sẽ bắt đầu từ trên với phần Header
Phần tiêu đề chúng ta có nhiều kích thước quy định cho phần chữ của tiêu đề, được đặt từ h1 (lớn nhất) cho tới h6. Trong ví dụ này ta dùng h1 làm tiêu đề của trang, ta mở file index.html ra và thêm đọan code sau vào giữa 2 thẻ header
<div id="header">
<h1>Enlighten Designs</h1>
</div>
Sau khi ta có được dòng chữ trên header. Ta có thể thấy vị trí của nó hiện nay không hiển thị giống nhau trên mỗi trình duyệt. Vì vậy trong file Css ta quy định vị trí của nó với div header là bằng 0, để đưa về gốc tọa độ nằm trên cùng bên trái.
   h1 {
margin: 0;
padding: 0;
}
Bây giờ ta sẽ đưa nội dung trong phần footer. Phần này bao gồm 1 menu nằm ngang, text và các đường link. Thêm đọan code này vào file html, nằm giữ thẻ footer nhé
<div id="main-nav">
<dl class="hidden">
<dt id="about"><a href="#">About</a></dt>
<dt id="services"><a href="#">Services</a></dt>
<dt id="portfolio"><a href="#">Portfolio</a></dt>
<dt id="contact"><a href="#">Contact Us</a></dt>
</dl>
</div>
Copyright © Enlighten Designs
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a>
and <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
Đến đây ta đã có thêm phần text ở header và footer. Tuy nhiên hiện nay vẫn chưa có style nên chỉ đơn thuần là text mà thôi
Footer content
Tiếp theo ta sẽ đặt style của thẻ h2 và thẻ p trong file Css. Nên nhớ style của chúng chỉ có giá trị trong content thôi nhé.
#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}
 
07 Bây giờ ta sẽ đi sâu vào phần Style cho nội dung (content). Trong phần này chủ yếu là định hình font chữ, khổ chữ, khoảng cách (padding, margin...)
Trong file Css thành phần body được định nghĩa riêng và thường được đặt trên đầu để trình duyệt có thể tìm và định hình ngay.
 body {
font-size: 12px;
color: #666666;
background: #ffffff;
}
Để trình bày nội dung cho đẹp, ta định dạng cho h2p sẽ cách dòng chữ bên dưới 1 khoảng 15px
   #content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
Để style phần nội dung của cột Sidebar, ta thêm vào cho nó 1 class.
 <div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nullam gravida enim ut risus. 
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. 
Maecenas in lectus. 
Donec in sapien in nibh rutrum gravida. Sed ut mauris. 
Fusce malesuada enim vitae lacus 
euismod vulputate. Nullam rhoncus mauris ac metus. 
</div>
</div>
Để style đọan nội dung của Sidebar ta thêm đọan code sau vào file css
#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
line-height: 18px;
}
#content .padding {
padding: 25px;
}
Tiêu đề ở dạng ảnh
Bây giờ ta sẽ tạo 2 tiêu đề là About và Contact. Ta có thể làm trên Photoshop rồi save thành ảnh. (Sở dĩ ta phải làm vậy vì muốn sử dụng đặc tính smooth trong PS để tiêu đề không bị răng cưa.) Sử dụng cách này cũng khá thuận lợi, nó giúp bạn chủ động hơn trong việc sử dụng font chữ. Nhưng nếu là website bạn làm cho khách hàng thì nên giải thích và hướng dẫn chi tiết để họ có thể tự thay đổi những ảnh này. Bây giờ ta sẽ thêm vào trong file html một đọan code để nó có thể load hình ảnh. Lưu ý, tất cả ảnh sẽ được lưu trong thư mục images trong thư mục chưa toàn bộ các file.
<h2><img src="images/headings/about.gif" 
width="54" height="14" alt="About" /></h2>
<h2><img src="images/headings/contact.gif" 
width="98" height="14" alt="Contact Us" /></h2>
Nào bây giờ ta hãy xem sản phẩm của chúng ta như thế nào rồi. Phần tới chúng ta sẽ bắt đầu làm phần Header. Đây là phần quan trọng đóng vai trò quan trọng trong website, nó quyết định phong cách, nội dung cũng như tạo ấn tượng ban đầu cho người xem.
 
Trông tàm tạm rồi đấy
08 Ở phần trước chúng ta đã có được phần nội dung của cột bên phải và đưa phần nội dung đó nằm ở vị trí mình muốn. Trong phần này chúng ta sẽ bắt đầu làm đến phần Header. Đây có thể coi là phần quan trọng tạo nên phong cách của cả website. Nếu làm tốt phần này thì giao diện của website nhìn sẽ rất bắt mắt.
Trước tiên ta tách phần logo và phần header thành 2 bức ảnh khác nhau.
Một phần của header
Và logo được cắt riêng.
Logo





Để đưa logo vào ta thêm đọan code sau vào file Html
   <div id="header">
<h1><img src="images/general/logo_enlighten.gif" 
width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
</div>
Sau đó là ảnh của header được load làm background của div Header
 #header {
height: 150px;
background: url(../images/headers/about.jpg) #db6d16;
}
 
Logo được đưa vào cùng ảnh Header
Bây giờ ta sẽ thấy vị trí của logo nằm ở gốc tọa độ trên cùng bên trái. Nhưng ta lại muốn đưa logo vào vị trí mà ta đã định trước là nămg trong ô màu đen trên header. Vì vậy ta dùng Css để điều chỉnh vị trí của logo. Vì thế ta sửa 1 chút trong file Css
h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}
Logo ở vị trí ta muốn
Bây giờ giao diện trông đã giống hệt với thiết kế ban đầu, phần tới ta sẽ làm đến Footer và hệ thống menu.
(nguồn: http://www.graphiclancer.com/)
 
e
Today, there have been 12 visitors (42 hits) on this page!
=> Do you also want a homepage for free? Then click here! <=
Đến với thành phố biển Vũng Tàu