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