Hướng dẫn thực hiện trang About của website Asean Hotel

HƯỚNG DẪN GIẢI CHO TRANG ABOUT A. YÊU CẦU: 1. Tạo tệp tin ABOUT.html a. Appearance: b. Title/Encoding 2. Tạo bảng biểu: a. Width: Autostretch ( chọn Ok để lưu space.gif vào thư mục images) b. Height: 125 c. Bg: #C0C0C0 d. CellPad,CellSpace: 0px. 3. Tạo các ô – Thiết kế banner: logo, thực đơn – Thiết lập các trạng thái liên kết. a. Links: i. Link font: arial ii. Size: 9 iii. Link color: #fffffff – Rollover links: #fffff00 b. Underline style: Show underline only on rollover 4. Tạo bảng con, thiết kế bờ lề trái – Thiết kế phần nội dung – Tạo Swap images và liên kết điểm dừng. B. THỰC HIỆN: Bước 1: tạo 1 bảng biểu theo các thông số như trên Bước 2: Tạo logo – tạo thanh thực đơn: - Tạo logo: Chọn Layout Cell -> chọn h/ả: Asean_logo.gif - Tạo chữ: About Us: Chọn Layout Cell -> chọn h/ả: header_about.gif -> kẻ 1 Layout Cell nữa xuống bên dưới Layout Cell header_about.gif -> chọn h/ả: red_line.gif. - Kẻ 1 ô Layout Cell tiếp; Height: 45; Bg: màu trắng - Thiết kế các nút bấm: About, Guesrooms, Conference Asean Travel…(Chú ý: nút About đặt Link: about.html, các nút còn lại Link: #). - Tạo các đường biên (đường biên dọc phân cách ở thanh thực đơn): Click chuột vào ô Guesrooms -> chọn sang cửa sổ Code tìm đoạn code sau và viết thêm đoạn code có phần chữ đậm vào đúng vị trí:
GUESSROMS
. Giải thích đoạn code đậm trên như sau: Dùng thuộc tính Style, giá trị là border-left để định đường biên là màu vàng(#FFFF00). Áp dụng đoạn code trên cho các ô tiếp theo trên thanh thực đơn. Bước 3: - Tạo một bảng biểu mới (Layout Table). - Tạo 1 ô Layout Cell bên trái:  Bg: #C0C0C0  Đặt các h/ả: -> nhấp Shift Enter -> nhấp Shift Enter -> bấm Enter (mục đích để xuống 1 hàng).  Đưa các hình ảnh tượng trưng vào đúng theo mẫu của trang About.html. - Tạo 1 ô Layout Cell bên phải: Copy nội dung bên tệp nội dung vào ô này -> Đặt Bg: #C0C0C0 -> Vào cửa sổ code tìm đến đoạn code sau: ksjdskdjs Kjdksjdks jdkjskdj sldfjdfreioruieureioruieorjekjdjfksfjdkjfaiesire urieuroei
; viết phần chữ đậm vào đúng vị trí như trên -> đặt là Autostrech (tự động co dãn theo đúng kích thước của Table) . - Đặt các điểm liên kết bằng h/ả vào đúng vị trí như hình mẫu: h/ả Location of Hotel | Description of Hotel | Hotel contact details - Tạo chữ đậm và tạo dạng danh sách cho văn bản theo đúng mẫu. - Tạo liên kết cho E-mail và Website:  Bôi đen E-mail -> Link: mailto:asean@hn.vnn.vn  Bôi đen Website -> Link: http://www.aseanhotel.com - Tạo các Swap images cho các nút như đã thực hành trang Index.html. - Tạo các liên kết điểm dừng cho các nút sau: Đưa con trỏ đến nơi cần đặt điểm dừng rồi -> thực hiện: Chọn Insert -> Named Anchor/ Anchor name: location/ Ok Chọn Insert -> Named Anchor/ Anchor name: description/ Ok Chọn Insert -> Named Anchor/ Anchor name: profile/ Ok - Chọn -> Link: #profile. - Chọn -> Link: #description - Chọn -> Link: #location Bước 4: - Tạo một bảng biểu. - Kẻ 1 ô Layout Cell:  Bg: #B40000  Chèn h/ả: asean hotel bottom… vào ô  Kẻ 1 ô Layout Cell bên phải ô chèn h/ả gotop.gif vào.  Click vào h/ả -> Link: #top  Click vào h/ả -> Link: index.html - Kẻ 1 ô Layout Cell để chèn thông tin như hình vào.

Post a Comment