cÔng cỤ thiẾt kẾ web - math.hcmus.edu.vnptbao/tkw/05.pdf · microsoft frontpage (microsoft...

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


4. Giao diện

Chế độ thiết kế

Vùng thiết kế trang Web


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


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.


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


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


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


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


7. Duyệt trang Web : - File Preview in Browser (F12) - Chọn cửa sổ duyệt Web.

16/04/2010

6


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 )


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


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


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


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 )


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


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.


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


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.


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


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.


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


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


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.

16/04/2010

13


3. Tạo liên kết ngoại :

- Chọn nội dung hay hình, nút lệnh. - Insert Hyperlink. - Khai báo địa chỉ Web liên kết. Target Frame : Cửa sổ mở liên kết.

cÔng cỤ thiẾt kẾ web - math.hcmus.edu.vnptbao/tkw/05.pdf · microsoft frontpage (microsoft...

Documents