www.ohisee.com Mục đích – Demo q trình xây dựng trang web từ ban đầu đến hoàn chỉnh www.ohisee.com Step 0: Trang web chưa có style (CSS) Ban đầu,ta chia trang web thành số vùng như: jump links, header, nội dung (chứa số thành phần tiêu đề, list, blockquote site ), menu dọc số nội dung bên cạnh trang gọi “sidebar”và phần footer phần cuối trang, thường chứa thơng tin quyền Sau nhập nội dung vào Đây trang “trần truồng” (naked site) chưa thêm CSS Demo: http://dangminhtuan.googlepages.com/web00.html www.ohisee.com Xây dựng website 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 trang web www.ohisee.com Trang web ban đầu có nội dung, chưa có CSS www.ohisee.com Sau phần dịch chuyển trang trí CSS Ta thông qua 20 bước để làm việc www.ohisee.com Step 1: Xác định font chữ dùng cho trang web Cơ trang web nhìn cũ, ta dùng font Arial mặc định đa số trình duyệt Demo: http://dangminhtuan.googlepages.com/web01.html www.ohisee.com Step 2: Căn lề trang web Đầu tiên ta lề trang web Bao quanh nội dung web thẻ div (ví dụ div id=“wrapper”) Sau ta thiết lập chiều rộng div cho thuộc tính margin left right auto: #wrapper { width : 760px; margin : auto; } Demo: http://dangminhtuan.googlepages.com/web02.html www.ohisee.com Step 3: Thềm lề cho trang, điều chỉnh phần footer Ta cho chữ lệch vào bên trái cách tạo lề trang Và ta định dạng lại phần footer trang Thiết lập lề cách đưa vào giá trị margin padding #content, #sidebar, #footer (riêng #footer nên đưa thêm clear:both vào để tránh sau footer bị lên – khơng đưa vào lát sau thấy hậu ngay) Demo: http://dangminhtuan.googlepages.com/web03.html www.ohisee.com Step 12: Trang trí link text sidebar Phần chữ sidebar chưa nổi, ta cần làm đẹp, làm lên cách đặt lại màu cho link sidebar sau #sidebar a { color : #ccc;} Demo: http://dangminhtuan.googlepages.com/web12.html www.ohisee.com Step 13: Trang trí List Text footer Phần chữ footer chưa nổi, ta cần làm đẹp, làm lên cách đặt lại màu cho link footer sau #footer a {color : #ddd;} Ta cần làm cho list footer dàn hàng ngang ul#footnav li { display : inline;} Demo: http://dangminhtuan.googlepages.com/web13.html www.ohisee.com Step 14: Trang trí phần đường dẫn Căn lề đường dẫn sang phải, đặt font chữ cho nhỏ lại sau: p#navbar { font-size : 0.8em; float : right; } Demo: http://dangminhtuan.googlepages.com/web14.html www.ohisee.com Step 15: Trang trí phần nội dung phần heading sidebar Tìm thẻ cần định dạng đặt lại màu sắc (color), biên (margin), lề (padding), hay chí (background) cho đẹp Demo: http://dangminhtuan.googlepages.com/web15.html www.ohisee.com Step 16: Trang trí phần trích dẫn phần tác giả Thẻ blockquote thường dùng để thể đoạn trích, thẻ site thường dùng để thể tác giả đoạn trích Đây cách làm semantic (làm web phù hợp với Search Engine) thẻ định dạng thẻ khác, khơng có khó Ví dụ ta thêm border vào bên trái blockquote sau: blockquote {border-left : xxx yyy zzz;} với xxx kích thước tính theo px, yyy dạng border, zzz mã màu border Demo: http://dangminhtuan.googlepages.com/web16.html www.ohisee.com Step 17: Trang trí List nội dung Ví dụ ta chuyển dấu trịn trước list thành hình vng lệnh sau: ul { list-style-type : square;} Hoặc chí thêm ảnh trước list lệnh: ul {list-style-image: url(link-to-your-image.xxx);} Demo: http://dangminhtuan.googlepages.com/web17.html www.ohisee.com Step 18: Thêm màu cho toàn trang Nếu ta thấy màu trắng đơn điệu ta thay màu khác body {background-color : xxx;} với xxx màu bạn muốn Thậm chí đặt hình đẹp (nên to chút, web 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: http://dangminhtuan.googlepages.com/web18.html www.ohisee.com Step 19: Thêm hình vào phần để hồn thiện trang Demo: http://dangminhtuan.googlepages.com/web19.html www.ohisee.com Đưa ảnh vào header 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ì nhân lên theo chiều ngang 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ì nhân ảnh 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ì nhân ảnh 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) http://www.w3schools.com/css/tryit.asp?filename=trycss_backgroundrepeat_no-repeat www.ohisee.com www.ohisee.com Làm phần bóng mờ bên 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 ảnh nhỏ kích thước 760x10px nhân lên thành ảnh dài, kích thước: 760x(10*k) với k không giới hạn, ảnh 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 file riêng Cuối ta tối ưu trang web cách tách tất CSS file riêng : your-name.css, link từ web tới file CSS lệnh: