4/16/2010
1
CÔNGCӨ
THIӂTKӂWEB

PHҤM THӂ BҦO

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 ĺu vͳi tên
Index. Htm và ĺ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.
16/04/2010
13
ThiӃt kӃ Web bҵng Microsoft Front Page
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.