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 h2 và p 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/)
|
