4/16/2010
1
CÔNG CỤ THIẾT KẾ WEB
PHẠM THẾ BẢO [email protected]
1. MicroSoft Frontpage (MicroSoft Publisher)
2. DreamWaver 8
16/04/2010
1
Thiết kế Web bằng Microsoft Front Page
I. TỔNG QUAN MICROSOFT FRONT PAGE :
1. Công dụng Ứng dụng trong bộ Microsoft Office dùng để thiết kế các trang Web hay các bộ Web.
2. Tập tin Tập tin chương trình FRONTPG.Exe Tập tin lưu trữ có kiểu *.Htm
3. Khởi động Start Programs Microsoft FrontPage
16/04/2010
2
Thiết kế Web bằng Microsoft Front Page
4. Giao diện
Chế độ thiết kế
Vùng thiết kế trang Web
Thiết kế Web bằng Microsoft Front Page
a. Chế độ thiết kế : - Design : Chế độ thiết kế mặc định. Các trang thiết kế như 1 trang văn bản sọan thảo Word. - Split : Hiển thị trang thiết kế thành 2 phần. Nội dung Design và nội dung bằng HTML. - Code : Hiển thị trang Web bằng ngôn ngữ HTML. - Preview : Xem kết quả thiết kế khi duyệt Web.
16/04/2010
3
Thiết kế Web bằng Microsoft Front Page
b. Vùng thiết kế : Như 1 trang văn bản sọan thảo Word, cho phép nhập nội dung trực tiếp hay chèn các đối tượng Table, WordArt.
Thiết kế Web bằng Microsoft Front Page
1. Tạo mới bộ Web : - B1 : Khởi động Front Page
Chọn File New
- B2 : Chọn Empty Web Site hay One Page Web Site
- B3 : Trong cửa sổ Web Sites Chọn Empty Web Site hay One Page Web Site.
- B4 : Chỉ định thư mục chứa bộ Web Ok
Add to current Web Mặc định thư mục Web hiện hành.
II. THAO TÁC THIẾT KẾ :
16/04/2010
4
Thiết kế Web bằng Microsoft Front Page
Thành phần bộ Web : - Folders : Thành phần chi tiết trong thư mục bộ Web. Thư mục gốc chứa tòan bộ Web Rood Folder. - Reports : Các thông tin báo biểu liên quan đến Web site. - Navigation : Cấu trúc liên kết di chuyển trong bộ Web. - Hyperlinks : Thông tin liên kết trên Web Site. - Tasks : Thông tin về quản lý Web Site.
_Private : Lưu trữ các thông tin WebSite .
Images : Lưu trữ các hình ảnh
Trang 1 của bộ Web phải lưu với tên Index. Htm và lưu ở thư mục gốc bộ Web
Thiết kế Web bằng Microsoft Front Page
2. Tạo mới 1 trang Web : - B1: New Blank Page. - B2 : Thiết kế. - B3 : Lưu trang Web vào bộ Web.
3. Lưu thiết kế Web : - File Save : Lưu trang đang chọn thiết kế. - File Save All : Lưu tòan bộ các trang đang được hiển thị
trong thiết kế.
4. Đóng thiết kế Web : - File Close : Đóng trang đang chọn thiết kế. - File Close Site : Đóng tòan bộ các trang đang được hiển thị
trong thiết kế và đóng bộ Web.
16/04/2010
5
Thiết kế Web bằng Microsoft Front Page
5. Mở thiết kế Web : - File Open : Mở trang Web. - File Open Site : Mở bộ Web.
6. Nhúng 1 thành phần vào bộ Web : - File Import … - Chọn lọai thành phần nhúng vào bộ Web Add File : 1 Trang Web Add Folder : 1 Thư mục Web hay hình ảnh, trang .. From Web : 1 Bộ Web từ 1 địa chỉ Website. - Ok
Thiết kế Web bằng Microsoft Front Page
7. Duyệt trang Web : - File Preview in Browser (F12) - Chọn cửa sổ duyệt Web.
16/04/2010
6
Thiết kế Web bằng Microsoft Front Page
III. ĐỐI TƯỢNG THIẾT KẾ :
1. Nội dung trang Web : - Dữ liệu nhập trực tiếp trên Trang như Word. - Trên Web không chia cột, Drop Cap được như Word. Để
thực hiện chia nội dung thành cột Dùng Table.
2. Chèn Bullets and Numbering: - Chọn khối nội dung Click chọn biểu tượng Bullets hay
Numbering trên thanh công cụ Formatting.
3. Chèn đối tượng đồ họa : - Sử dụng thanh công cụ đồ họa ( Drawing )
Thiết kế Web bằng Microsoft Front Page
4. Chèn đối tượng hiệu ứng : a. Chữ chạy : - Chọn vị trí cần chèn. - Insert Web Component … - Chọn Dynamic Effects
Marquee Finish. - Nhập nội dung. - Tùy chọn hiệu ứng và thời
gian Ok
Direction : Hướng hiệu ứng. Speed : Tốc độ. Behavior : Hiệu ứng. Repeat : Số lần lặp. Background : Màu nền.
16/04/2010
7
Thiết kế Web bằng Microsoft Front Page
4. Chèn đối tượng hiệu ứng (tt): b. Nút lệnh : - Chọn vị trí cần chèn. - Insert Web Component … - Chọn Dynamic Effects
Interactive Button Finish. - Nhập nội dung trên nút lệnh
(Text). - Đường dẫn liên kết trang hay
BookMark (Link) Ok
Thiết kế Web bằng Microsoft Front Page
5. Trang thư viện ảnh : - Insert Web Component … - Chọn Photo Gallery - Chọn mẫu thư viện Finish. - Khai báo hình và nội dung hình
(Add) Ok
16/04/2010
8
Thiết kế Web bằng Microsoft Front Page
6. Chèn đường kẻ ngang: - Chọn vị trí Insert Horizontal Line. - Để định dạng đường Line Chọn Line Right Mouse
Horizontal Line Properties.
7. Chèn Table: - Chọn vị trí Table Insert - Có thể sử dụng công cụ DrawTable để vẽ Table. ( Table
Draw Table). - Hoặc sử dụng các dạng mẫu chuẩn của FrontPage ( Table
Layout Table and Cells )
Thiết kế Web bằng Microsoft Front Page
II. ĐỊNH DẠNG :
1. Trang Web: a. Nền ( BackGround). - Format Background. Thẻ General : Tiêu đề, âm thanh nền.. Thẻ Formatting : Ảnh nền, màu nền…
16/04/2010
9
Thiết kế Web bằng Microsoft Front Page
1. Trang Web (tt): b. Chuyển cảnh khi sang trang - Format Page Transition… - Chọn hiệu ứng Event : Sự kiện. Transition Effect: Hiệu ứng. Duration : Thời gian.
Thiết kế Web bằng Microsoft Front Page
2. Nội dung : a. Ký tự : - Format Font.
b. Đọan : - Format Paragraph.
c. Màu nền và viền khung đọan : - Format Border and Shading.
d. Bullets and Numbering : - Format Bullets and Numbering.
Picture Bullets : Dùng ảnh Plain Bullets : Ký tự symbol Numbers : Số
16/04/2010
10
Thiết kế Web bằng Microsoft Front Page
3. Table: a. Chèn Table : - Table Insert Table. - Khai báo : Size : Dòng cột. Layout : Thể hiện nội
dung và Table. Specify width : độ
rộng Table. Border : Viền khung. Background : Màu nền
và hình ảnh nền.
Thiết kế Web bằng Microsoft Front Page
3. Table: b. Chèn dòng, cột, tiêu đề : - Table Insert Rows or Columns. - Table Insert Cell. - Table Insert Caption.
c. Xóa , trộn, chia ô : - Table Delete Cells. - Table Merge Cells. - Table Split Cell ( Split Table).
d. Thuộc tính Table : - Table Table Properties.
16/04/2010
11
Thiết kế Web bằng Microsoft Front Page
4. Picture: a. Định dạng hình so với văn bản : - Chọn hình. - Format Position. - Chọn cách thể hiện Ok
b. Định dạng hình : - Sử dụng thanh công cụ Picture. - View Toolbars Picture.
Thiết kế Web bằng Microsoft Front Page
IV. LIÊN KẾT :
1. Đối tượng liên kết :
a. Liên kết nội : - Liên kết BookMark. - Liên kết Trang trong bộ Web.
b. Liên kết ngọai : - Liên kết đến địa chỉ 1 Web Site khác. • Đối tượng dùng làm liên kết có thể là Chuổi ký tự, hình ảnh , Nút lệnh hay khu vực chỉ định trên hình (Hostpot).
16/04/2010
12
Thiết kế Web bằng Microsoft Front Page
2. Tạo điểm dừng ( BookMark ) :
- Chọn vị trí cần đánh dấu BookMark. - Insert BookMark. - Đặt tên BookMark - Ok
Tên BookMark
Biểu tượng BookMark
Thiết kế Web bằng Microsoft Front Page
3. Tạo liên kết nội :
- Chọn nội dung hay hình, nút lệnh.
- Insert Hyperlink. - Khai báo liên kết nội : • BookMark • Page Htm - Target Frame : Cửa sổ mở liên kết.