Hướng dẫn xây dựng website bằng 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. Step 3: Thềm lề cho trang, và điều chỉnh phần footer Step 4: Đặt chiều rộng cho các vùng trên web để chuẩn bị cho bước tiếp theo Step 5: Cho các vùng chuyển động sang trái và phải

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 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 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; margin : auto; } Demo: http://dangminhtuan.googlepages.com/web02.html 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 . 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. 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