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

Website còn gọi là trang web, trang mạng, là một tập hợp trang web, thường chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của Internet. Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP. Website có thể được xây dựng từ các tệp tin HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (website động). Trình duyệt web là một phần mềm ứng dụng cho phép người sử dụng xem và tương tác với các văn bản, hình ảnh, đoạn phim, nhạc,...
Nội dung trích xuất từ tài liệu:
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: 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 { width : 760px; Demo: http://dangminhtuan.googlepages.com/web02.html 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 l ...