Bài giảng Thiết kế Web: Công cụ thiết kế Web - Phạm Thế Bảo

Bài giảng Thiết kế Web - Công cụ thiết kế Web giới thiệu 2 công cụ hỗ trợ thiết kế web, đó là: MicroSoft Frontpage (MicroSoft Publisher) và DreamWaver 8. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.

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