Công cụ thiết kế web

Tài liệu này dành cho sinh viên, giáo viên khối ngành công nghệ thông tin tham khảo và có những bài học bổ ích hơn, bổ trợ cho việc tìm kiếm tài liệu, giáo án, giáo trình, bài giảng các môn học khối ngành công nghệ thông tin

Trang 1

THIӂTKӂWEB

PHҤM THӂ BҦO ptbao@hcmus.edu.vn

1 MicroSoft Frontpage

(MicroSoft Publisher)

2 DreamWaver 8

Trang 2

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

Trang 3

ThiӃt kӃ Web bҵng Microsoft Front Page

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

Trang 4

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ӑnFileÆ New

- B2 : Chӑn ÆEmpty Web Site

hay One Page Web Site

- B3 : Trong cӱa sәWeb Sites Æ

ChӑnEmpty 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ӂ :

Trang 5

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

Trang 6

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

Trang 7

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 :

- 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

Trang 8

4 Chèn ÿӕi tѭӧng hiӋu ӭng (tt):

b.Nút l Ӌnh :

- Chӑn vӏ trí cҫn chèn

- 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 :

- 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

Trang 9

6 Chèn ÿѭӡng kҿ ngang:

- Chӑn vӏ trí ÆInsertÆHorizontal Line

-ĈӇ ÿӏnh dҥng ÿѭӡngLineÆ ChӑnLineÆ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…

Trang 10

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ӕ

Trang 11

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

Trang 12

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)

Trang 13

2 Tҥo ÿiӇm dӯng ( BookMark ) :

- Chӑn vӏ trí cҫn ÿánh dҩu BookMark

-InsertÆBookMark

-Ĉһt 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

Trang 14

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

Định dạng
Số trang	14
Dung lượng	550,67 KB