1


THIẾT KẾ WEB
one page
frontpage 2003



BÀI 44 NGÀY 9.10.2010 ÚT BỈNH SOẠN

1. Download Chương Trình FRONTPAGE 2003: Download Chương Trình FrontPage 2003, cài
đặt dễ dàng, đã chèn thuốc vào sẵn, dung lượng 175,32 MB tại:
2. Download File thực tập: File.doc có tên GHOST, dung lượng 588 KB, download tại:
Sau khi Download xong File thực tập này bạn đặt tại Desktop.
3. Chọn Thiết Kế Web MỘT TRANG: Nhấp Shortcut FrontPage 2003 tại Desktop > Hiện ra giao
diện chương trình, nhấp Menu File > Nhấp New > Qua Phải trong cột New, trong Mục New Web
site nhấp chọn One page Web site (Thiết Kế Web có 1 Trang) > Hiện ra Bảng Web Site
Templates, nhấp One page Web Site > Nhấp OK > Hiện ra giao diện của One Page Web Site.
4. Folder List – Index.htm và Nút Design: Nếu chưa hiện ra Cột Folder List, bạn vào menu View,
chọn Folder List hoặc nhấp phím Alt+F1, cột Folder List sẽ hiện ra để bạn tiện quản lý Files >
Nhấp Index.htm > Khung Thiết Kế hiện ra bên Phải trống hoàn toàn đồng thời phía trên có Tab
Index.htm và ở dười đang có nút Design màu vàng để bạn sẵn sàng thiết kế.

2

5. Tab Web Site: Bạn nhấp Tab Web Site, hiện ra nội dung của nó gồm: 2 Folder _private – Images
và Trang Chính là: index.htm. Khi bạn vào bất cứ một trang Web nào Trang đầu tiên sẽ mở là
Trang này. Trang này còn gọi là Trang Chủ (Home Page). Vì bạn chọn Thiết kế Web có 1 Trang
thôi nên chì có 2 Folder này và 1 Trang Chính. Sau này bạn cò thể bổ sung thêm nhiều Trang
vào Trang Web này > Nhấp Tab index.htm để mở lại Trang Chủ








6. Tắt chức năng tự động kiểm tra chính tả và kiểm tra ngữ pháp của các chương
trình trong bộ Office: Bạn thấy có những vạch đỏ dưới các ký tự làm bạn khó chịu, bạn
có thể tắt các vạch đỏ đó bằng cách vào: Menu Tools > Pages Options > Tab General >
Bỏ Hide Spelling errors và bỏ Check spelling as you type.(Xem:

7. Tạo Bố Cục Trang: Nhấp Nút Insert Table > Chọn 2 by 2 Table > Trong Khung Thiết kế hiện ra 2
Ô trên và 2 Ô dưới > Rê nới rộng 2 Ô dưới và Merge 2 Ô trên lại để tạo Banner dán ở đây > Thu
hẹp Ô trên để làm Tựa Trang Web và thu hẹp Ô bên Trái để làm Cột chứa các Links Liên kết.














8. Table AutoFormat: Để định dạng nhanh 1 Bảng từ các Bảng có sẵn với nhiều định dạng khác
nhau gọi là Auto Format. Tính năng này giúp các bạn thiết kế Trang Web nhanh chóng hơn và
3

đẹp mắt hơn. Bạn thực hiện như sau: Đặt con trỏ vào 1 bảng cần Auto Table > Vào Menu
Table > cHJỌN Table AutoFormat > Hiện ra HT Table AutoFormat, tùy theo chủ đề thiết kế
bạn chọn 1 Kiểu trong Khung Formats > Hiện ra nội dung tương ứng trong Khung Prview >
Nhấp Nút OK.









9. Copy-Paste và xem văn bản: Copy File GHOST tại Desktop và Paste vào Khung Thiết kế >
Nhấp Phải Tab index.htm > Chọn Save > Nhấp Phím F12 để xem bằng Trình Duyệt.. Bạn xem
như thế nào sau này đưa lên Trình Duyệt Internet Explorer sẽ hiện ra như vậy > Close.
CHÚ Ý: Nếu bạn xem trong Trình Duyệt FireFox có thể bị sai lệch văn bản và Hình Minh
Họa nhưng nếu xem bằng IE thì sẽ hoàn toàn không sai lệch vị trí.
10. Tạo Trang thứ 2: Nhấp Nút New Page trong Cột Folder List để tạo Trang Thứ 2 > Hiện ra File
new_page_1.htm trong Folder List > Nhấp đúp lên File này > Hiện ra Trang trống và Tab

new_page_1.htm để bạn bắt đầu nhập liệu. Để định dạng nhanh và cho các Trang sắp tạo đều
có cấu hình đồng bộ với Trang index,htm, bạn thực hiện như sau:
Copy Trang index.htm > Dán vào Trang thứ 2 là new_page_1.htm > Xóa nội dung .
Dán nội dung mới vào Trang này > Chỉnh lại văn bản và Hình Minh Họa vào đúng vị trí
nếu có lệch vị trí.
Nhấp Phải Tab new_page_1.htm > Chọn Save > Nhấp Phím F12.> Close > Đóng
Chương Trình lại .
Mở lại Chương trình > Menu File > Open Site > Nhấp đúp lên mysite1 để nó hiện ra
trong Look in > Nhấp Nút Open














4



10.Tạo Trang thứ 2: Nhấp Nút New Page trong Cột Folder List để tạo Trang Thứ 3 > Hiện ra
File new_page_2.htm trong Folder List > Nhấp đúp lên File này > Hiện ra Trang trống và
Tab new_page_2.htm để bạn bắt đầu nhập liệu. Để định dạng nhanh và cho các Trang sắp

tạo đều có cấu hình đồng bộ với Trang index,htm, bạn thực hiện như sau:
Copy Trang index.htm > Dán vào Trang thứ 2 là new_page_2.htm > Xóa nội dung.
Dán nội dung mới vào Trang này > Chỉnh lại văn bản và Hình Minh Họa vào đúng
vị trí nếu có lệch vị trí.
Nhấp Phải Tab new_page_2.htm > Chọn Save > Nhấp Phím F12.> Close > Đóng
Chương Trình lại .

11. My Web Sites: FrontPage 2003 tạo Folder Web lưu mặc định tại My Documents\ My Web
Sites và tự động đặt tên là mysite1, nhấp lên Folder này > Hiện ra 3 Trang mà bạn vừa thiết
kế xong, đó là : index.htm – new_page_1.htm và new_pasge_2.htm cùng 3 Folder khác
chứa Hình ảnh cho từng Trang và 1 Folder _private > Bạn có thể nhấp lên từng File để xem
nội dung. Nội dung Trang Web hiển thị đúng nhất là xem trong Trình Duyệt Ievì cùng một
Hảng Microsoft.










12. THIẾT KẾ BANNER: Banner là mặt tiền của Trang Web nên rất quan trọng. Nó thu hút
Người Xem vào đây để xem hết Trang web của bạn. Nếu không đẹp khiến họ nản và bỏ
đi . Bạn có thể xem các hướng dẫn rất chi tiết gồm nhiều bài viết của Út Bỉnh về chủ đề
Thiết Kế Banner tại:
Xem kích thước Banner hiện có: Nhấp Phải lên Khung Banner > Chọn Tab
Properties, bạn đã thấy kích cở là 100X522 pixels. Bạn mở Photoshop > Ctrl+N,
chọn 522 X 100.

Sau khi thiết kế xong và lưu tại Desktop, bạn mở Trang index.htm > Nhấp con trỏ tại
Khung Banner > Chọn Menu Insert > Chọn Picture > From File > Đến Desktop và nhấp
lên Banner > Nhấp Nút Insert > Banner đã hiện ra trong Khung > Bạn rê chỉnh lại >
Nhấp Phím F12 > Hiện ra Bảng Save Embedded Files để xác nhận lưu trong Folder
imges > Nhấp OK.
5











Bạn chèn banner cho các Trang Web còn lại theo các bước hướng dẫn trên.
13. THIẾT KẾ CỘT LINKS LIÊN KẾT ;
Bạn chỉ cần thiết kế Cột Links Liên Kết này tại Trang index.htm, sau đó tạo liên kết cho từng Link
> Sau khi hoàn tất bạn Copy Cột này dán vào 2 Trang còn lại > Nhấp thử từng liên kết của từng
Trang để kiềm tra tính Liên kết Siêu văn bản Hyperlink.
Tạo Table để nhập văn bản Links liên kết: Khi bạn nhấp con trỏ vào Cột Trái, nó chỉ
nằm lưng chừng ở giữa mà không nằm được trên đỉnh cột mặc dù bạn nhấp Phím Mủi
Tên chỉ Lên. Muốn tạo Table tại đỉnh cột này bạn phỉa tạo 1 Lớp LAYER trước, sau đó tạo
Table nằm trong Lớp Layer này. Nhấp Nút Insert Layer tạo 1 Lớp Layer tại Đỉnh Cột Liên
Kết > Nhấp Nút Table tạo 3 Hàng và nhập văn bản vào sau đó định dạng lại chúng
Tạo Liên Kết cho TRANG CHỦ: Bôi đen TRANG CHỦ > Nhấp Phải lên > Chọn
Hyperlink.











Ra Bảng Insert Hyperlink, nhấp index > Nhấp nút Ok.