Hướng dẫn xây dựng Website bằng CSS

 www.ohisee.com
 Mục đích – Demo quá trình xây 
dựng 1 trang web từ ban đầu đến 
 khi hoàn chỉnh
 www.ohisee.com
 Step 0: Trang web chưa có style 
 (CSS)
 Ban đầu,ta chia trang web thành 1 số vùng như: jump links, header, nội dung 
 (chứa 1 số thành phần cơ bản như tiêu đề, list, blockquote và site...), một 
 menu dọc và một số nội dung cơ bản bên cạnh trang gọi là “sidebar”và phần 
 footer là phần cuối trang, thường chứa thông tin về bản quyền. Sau đó chúng 
 ta nhập nội dung vào. Đây là 1 trang “trần truồng” (naked site) vì nó chưa được 
 thêm CSS.
Demo: 
 www.ohisee.com
Xây dựng website bằng CSS
 Người thuyết trình: Đặng Minh Tuấn
 www.ohisee.com
 jumplink
header
 navmenu
 content
 footer
 www.ohisee.com
Cấu trúc HTML của trang 
 web
 www.ohisee.com
Trang web ban đầu chỉ có nội 
 dung, chưa có CSS
 www.ohisee.com
Sau đó các phần sẽ được dịch 
 chuyển và trang trí bằng CSS
 Ta sẽ thông qua 20 bước để làm việc này
 www.ohisee.com
 Step 1: Xác định font chữ dùng 
 cho trang web
 Cơ bản trang web nhìn vẫn như cũ, vì ta sẽ dùng font Arial mặc định của đa số 
 trình duyệt
Demo: 
 www.ohisee.com
 Step 2: Căn lề giữa trang web
Đầu tiên ta căn lề giữa trang web
 Bao quanh nội dung web bằng 1 thẻ div (ví dụ div id=“wrapper”). Sau đó ta thiết lập chiều 
 rộng của div và cho nó thuộc tính margin left và right là auto:
 #wrapper { 
 width : 760px; Demo: 
 margin : auto;
 } 
 www.ohisee.com
 Step 3: Thềm lề cho trang, và 
 điều chỉnh phần footer
 Ta cho chữ lệch vào bên trái bằng cách tạo lề trang. Và ta định dạng lại phần 
 footer của trang 
 Thiết lập lề bằng cách đưa vào các giá trị margin và padding của 
 #content, #sidebar, #footer (riêng #footer thì nên đưa thêm clear:both 
 vào để tránh sau này cái footer bị nổi lên trên – nếu không đưa vào thì 
 1 lát sau sẽ thấy hậu quả ngay)
Demo: 
 www.ohisee.com
Step 4: Đặt chiều rộng cho các 
vùng trên web để chuẩn bị cho 
 bước tiếp theo
 Bằng cách dùng thuộc tính width: xxx px (với xxx là số px 
 bạn cần). Chú ý là tổng width các khối phải nhỏ hơn khối 
 (div) chứa nó.
 Demo: 
 www.ohisee.com
 Step 5: Cho các vùng chuyển 
 động sang trái và phải
 Đưa vào #content thuộc tính float: left; còn đưa vào 
 #sidebar thuộc tính float: right; để 2 phần nổi sang 2 
 bên.
Demo: 
 www.ohisee.com
 Step 6: Thêm chiều cao cho các 
 vùng
 Đưa chiều cao vào các vùng bằng thuộc tính height. 
 Ví dụ cho vào header bằng lệnh CSS như sau:
 #header { height : 130px; }
Demo: 
 www.ohisee.com
Step 7: Trang trí cho các liên kết
Thêm thuộc tính color cho thẻ a bằng lệnh
a {color: xxx;} với xxx là mã màu (như red, #ccc)
Còn muốn khi di chuột qua link sẽ đổi màu chữ, ta dùng
a:hover {color: xxx;}
Còn muốn mất gạch chân thẻ a ta dùng:
text-decoration : none; 
 Demo: 
 www.ohisee.com
 Step 8: Thêm màu nền
 Thêm màu nền vào header, sidebar và footer bằng lệnh:
 Background-color: xxx; (với xxx là mã màu bạn muốn)
Demo: 
 www.ohisee.com
 Step 9: Trang trí phần tiêu đề 
 chính
Màu chữ của header hiện không nổi bật lắm, ta thay bằng màu 
khác nổi bật hơn:
#header h1 a { 
display : block;
width : 740px; 
color : #eecc11;
 Demo: 
} 
 www.ohisee.com
 Step 10: Trang trí jump link
 Đặt lại chiều rộng cho #jumplink và đặt các thẻ li trong 
 jumplink là display:inline để các link đang nằm theo chiều 
 dọc chuyển qua chiều ngang.
 ul#jumplink li {
 display: inline;
 }
Demo: 
 www.ohisee.com
 Step 11: Trang trí menu chính
 Phần menu chính còn quá mờ, ta cần làm nó nổi bật hơn, đẹp 
 hơn bằng cách cho các link trong menu hiển thị thành dạng 
 khối qua lệnh display: block, và đặt chiều rộng, chiều cao cho 
 nó, sửa lại background-color và color cho đep;
 ul#navmenu a { display : block; width : 190px;} 
Demo: 
 www.ohisee.com
 Step 12: Trang trí link và text ở 
 sidebar
 Phần chữ ở sidebar cũng chưa nổi, ta cần làm đẹp, làm nổi 
 nó lên hơn nữa bằng cách đặt lại màu cho link trong sidebar 
 như sau.
 #sidebar a { color : #ccc;} 
Demo: 
 www.ohisee.com
Step 13: Trang trí List và Text ở 
 footer
Phần chữ ở footer cũng chưa nổi, ta cần làm đẹp, làm nổi nó 
lên hơn nữa bằng cách đặt lại màu cho link trong footer như 
sau.
#footer a {color : #ddd;} 
Ta cũng cần làm cho list ở footer dàn hàng ngang
ul#footnav li { display : inline;} 
 Demo: 
 www.ohisee.com
 Step 14: Trang trí phần đường 
 dẫn
 Căn lề đường dẫn sang phải, và đặt font chữ 
 cho nhỏ lại như sau:
 p#navbar { font-size : 0.8em; float : right; }
Demo: 
 www.ohisee.com
 Step 15: Trang trí phần nội dung 
 và phần heading của sidebar
 Tìm các thẻ cần định dạng rồi đặt lại màu sắc 
 (color), biên (margin), lề (padding), hay thậm chí 
 cả nền (background) cho đẹp.
Demo: 
 www.ohisee.com
Step 16: Trang trí phần trích dẫn 
 và phần tác giả
Thẻ blockquote thường được dùng để thể hiện 1 đoạn trích, thẻ site thường 
được dùng để thể hiện tác giả của đoạn trích đấy. Đây là cách làm semantic 
(làm web phù hợp với các Search Engine). 2 thẻ này cũng định dạng như các 
thẻ khác, không có gì khó cả. Ví dụ ta thêm border vào bên trái blockquote 
như sau:
blockquote {border-left : xxx yyy zzz;} với xxx là kích thước tính theo px, yyy là 
dạng border, còn zzz là mã màu của border
 Demo: 
 www.ohisee.com
Step 17: Trang trí List trong nội 
 dung chính
 Ví dụ ta có thể chuyển dấu tròn trước list thành hình 
 vuông bằng lệnh sau:
 ul { list-style-type : square;} 
 Hoặc thậm chí thêm ảnh trước list bằng lệnh:
 ul {list-style-image: url(link-to-your-image.xxx);} 
 Demo: 
 www.ohisee.com
Step 18: Thêm màu nền cho toàn 
 trang
 Nếu ta thấy màu nền trắng quá đơn điệu ta có thể thay bằng màu khác
 body {background-color : xxx;} với xxx là màu bạn muốn
 Thậm chí đặt 1 hình nền đẹp (nên to 1 chút, nhưng như thế web sẽ tải xuống 
 nặng hơn, làm người dùng chờ lâu hơn)
 body {background-image : url(link-to-your-image.xxx);}
 Demo: 
 www.ohisee.com
Step 19: Thêm hình nền vào các 
 phần để hoàn thiện trang
 Demo: 
 www.ohisee.com
Đưa ảnh vào header như sau:
 www.ohisee.com
Kiến thức bổ sung:
Nếu ta để:
background : #000033 url(link-to-your-image.xxx);
Hoặc:
background : #000033 url(link-to-your-image.xxx) repeat;
Thì nó sẽ nhân lên theo cả 2 chiều ngang và dọc
Còn để:
background : #000033 url(link-to-your-image.xxx) repeat-x;
Thì nó sẽ nhân ảnh nền theo chiều ngang
Còn
background : #000033 url(link-to-your-image.xxx) repeat-y;
Thì nó sẽ nhân ảnh nền theo chiều dọc
 www.ohisee.com
#header { 
background : #000033 url(link-to-your-image.xxx) no-repeat;
} 
Ta phải cho no-repeat vào để chống lại việc ảnh bị nhân lên làm nhiều lần 
(như lát gạch hoa)
repeat_no-repeat
www.ohisee.com
 www.ohisee.com
Làm phần bóng mờ 2 bên như sau:
#wrapper { 
background : #fff url(link-to-your-image.xxx) repeat-y;
}
Lệnh repeat-y làm cho ảnh lặp lại theo chiều dọc, khiến cho 1 ảnh nhỏ kích 
thước 760x10px có thể nhân lên thành 1 ảnh rất dài, kích thước:
760x(10*k) với k không giới hạn, ảnh sẽ luôn dài xuống phù hợp với kích thước 
div. 
Phần ảnh ở footer ta làm tương tự phần ở header
 www.ohisee.com
Final: Chuyển CSS thành một file 
 riêng
Cuối cùng ta tối ưu trang web bằng cách tách tất cả CSS ra 1 file riêng là : 
your-name.css, rồi link từ web tới file CSS đó bằng lệnh:
 www.ohisee.com
 Questions & Answers
Reference:
Hỏi - Đáp: