Lab 08. THIẾT KẾ LAYOUT WEBSITE THÀNH ĐOÁN TP
Transcript of Lab 08. THIẾT KẾ LAYOUT WEBSITE THÀNH ĐOÁN TP
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 1
Lab 08.
THIẾT KẾ LAYOUT WEBSITE THÀNH ĐOÁN TP.HCM
Mục tiêu:
- Kết hợp ngôn ngữ HTML & CSS xây dựng hoàn chỉnh Layout Web. - Chủ đề: Website Thành đoàn TP.HCM
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 2
Bước 1 Thiết kế Bố cục chung và header (Banner và Menu)
Index.htm
Kết quả chứa có css:
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 3
Style.css
Kết quả:
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 4
Bước 2. Nội dung nhóm tin vùng trái
Index.htm
Kết quả chưa có CSS:
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 5
Style.css
Kết quả:
Bước 3: Vùng nội dung bên trái phần tin khác
Index.htm
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 6
Style.css
Kết quả:
Bước 4: Nhân bản vùng tin bên trái
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 7
Kết quả:
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 8
Bước 5: Vùng nội dung tin tiêu biểu bên phải
Index.html
Style.html
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 9
Kết quả:
Nhân bản vùng tin tiêu biều bên phải:
Kết quả::
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 10
Bước 6: Phần quảng cáo bên phải:
Index.html
Style.css
Kết quả:
Bước 7: Phần chân trang:
Index.html
Bài Tập Thực Hành Thiết Kế Web Với Ngôn Ngữ Html, Css, Javascript
http://www.thayphet.net 11
Style.css
Style.css
---Hết---