xay dung web tu bat dau den hoan chinh bang 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: http://dangminhtuan.googlepages.com/web00.html

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.comjumplink

header

content

navmenu

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



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;

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)



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ó.



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.



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; }



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;



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)



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;

}



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;}



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;}



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;}



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; }



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.



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



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);}



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);}



www.ohisee.com

Step 19: Thêm hình nền vào các phần để hoàn thiện trang



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;

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-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;

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeatx

Thì nó sẽ nhân ảnh nền theo chiều ngang

Còn

background : #000033 url(link-to-your-image.xxx) repeat-y;

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeaty

Thì nó sẽ nhân ảnh nền theo chiều dọc

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeat

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeatx

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeaty

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)http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeat_no-repeat

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeat_no-repeat

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-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:

<link href=“your-name.css" rel="stylesheet" type="text/css" media="all" />

www.ohisee.com

Questions & Answers

Reference:http://www.w3schools.com/css/css_reference.aspHỏi - Đáp:http://ohisee.com/?p=73

xay dung web tu bat dau den hoan chinh bang css

Technology