Xem mẫu
- 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: http://dangminhtuan.googlepages.com/web00.html
- 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: http://dangminhtuan.googlepages.com/web01.html
- 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 {
Demo: http://dangminhtuan.googlepages.com/web02.html
width : 760px;
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: http://dangminhtuan.googlepages.com/web03.html
- 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: http://dangminhtuan.googlepages.com/web04.html
- 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: http://dangminhtuan.googlepages.com/web05.html
- 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: http://dangminhtuan.googlepages.com/web06.html
- 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: http://dangminhtuan.googlepages.com/web07.html
- 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: http://dangminhtuan.googlepages.com/web08.html
- 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: http://dangminhtuan.googlepages.com/web09.html
}
- 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: http://dangminhtuan.googlepages.com/web10.html
- 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: http://dangminhtuan.googlepages.com/web11.html
- 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: http://dangminhtuan.googlepages.com/web12.html
- 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: http://dangminhtuan.googlepages.com/web13.html
nguon tai.lieu . vn
