Macromedia Dreamweaver

สอการเรยนการสอนวชาการสรางเวบไซต

2204-2009

1

นางสาวสชาดา จงจงประเสรฐครอตราจาง

วทยาลยเทคนคสงหบรแหงท 2

Dreamweaverความหมายและประโยชนของ Dream weaver 8 Macromedia Dreamweaver เปน

โปรแกรมสำาหรบออกแบบและพฒนาเวบไซต ทไดรบความนยมอยางมากในปจจบน เนองดวยสามารถใชงานไดงาย มเครองมอใหใชงานมากมาย ซงสามารถพฒนาเวบไดอยางรวดเรว และงายดาย นอกจากโปรแกรม Macromedia Dreamweaver จะออกแบบมาใหใชสรางเวบอยางงายดายแลว ยงเพมคณสมบตตาง ๆ ทมประสทธภาพ และเออประโยชนสำาหรบผทำาเวบอยางเตมท ไมวาจะเปนระบบการจดการเกยวกบ Site และการจดเกบไฟล นอกจากนยงมระบบชวยจดการเกยวกบการ Upload ไฟลไปยงเซรฟเวอรอกดวย

Dreamweaverลกษณะของ Macromedia Dreamweaver 8การสราง เวบเพจ  ดวยโปรแกรม Macromedia

Dreamweaver 8  ลกษณะของการใชงาน ของโปรแกรม กจะคลายๆ กบโปรแกรม Word Processor  ทเราสามารถพมพ ใสตาราง แทรกรปภาพ แตสำาหรบการใชงานจรงๆ แลว มนกไมเหมอนกน เชน เวลาทจะมการเวนวรรคขอความ ซงถาเปน Word Processor นนเวลาทเราจะเวนวรรคขอความ โดยกด Spacebar ทแปนพมพไดเลย ไมวาจะเวนวรรคกตวอกษรกได  แตสำาหรบ การสราง เวบเพจ  ดวยโปรแกรม Macromedia Dreamweaver 8  แลวไมสามารถทจะทำาแบบนนได เพราะ โปรแกรม Macromedia Dreamweaver 8  การเวนวรรคในเอกสารนน ตองปฏบต ตามกฎของ ภาษา HTML คอ จะสามารถเวนวรรคไดเพยงแค 1 ชองไฟหรอ 1 ตวอกษรเทานน

Dreamweaverจดเดนของโปรแกรม  Macromedia Dreamweaver 81. โปรแกรมจะทำาการแปลงรหสใหเปนภาษา

HTML โดยอตโนมตดงนน ผใชทไมมความร ดานนกสามารถทำาได

2. มแถบเครองมอ หรอแถบคำาสง ทใชในการควบคมการทำางาน แบงออกเปนหมวดหมจง ชวยในการทำางานทดขน และรวดเรวยงขน

3.สนบสนนเวบเพจทเปนภาษาไทยไดด 4. มคณสมบตทสามารถจดการกบ รปภาพ

เคลอนไหว โดยไมตองอาศย Plugin 5. สามารถเรยกใชตารางจากภายนอก โดยการอม

พอรทจาก Text File 6. เปนโปรแกรมทสามารถสนบสนนการใชงาน

CSS (Cadcading Style Sheet) 7. มความสามารถในการทำา Drop Down

Menu  รวมไปถงการทำาใหรปภาพ เปลยนเมอนำาเมาสไปช เปนตน

Dreamweaver การสราง Web Page

CODE HTML

เขยน Code เอง

ใชโปรแกรม สำาเรจรป(WYSIWYG*)*What you see is what you get.

May 1, 2023 5

Dreamweaver การสราง Web Page

โปรแกรมทใชสำาหรบการสราง Web Page แบบ WYSIWYGMicrosoft FrontPageMacromedia DreamweaverNetObjects Fusion

6

Dreamweaverขนตอนการพฒนาเวบวางแผนการสรางเวบไซต กำาหนดหวขอและ

เนอหาทจะนำาเสนอทำาเวบอะไรดนะ

เรา?

ทำาเวบสวนตวดกวา

7

Dreamweaverแลวตองเตรยมอะไรบางละ

เตรยมขอมลเกยวกบตวเองทจะนำาเสนอประวตสวนตว,หนาทการงาน,ผลงาน,งานอดเรก,ความภาคภมใจ

เตรยมภาพประกอบเวบ (ถกลขสทธนะจะ)เตรยมเพลงประจำาตวมาดวยดไหมนา

8

Dreamweaverสรางผงความสมพนธของขอมลแบบรากตนไม

9

Dreamweaverกำาหนดชอไฟลของเอกสารเวบ 1 หนา/1 ไฟล

10

Dreamweaverการออกแบบเวบในประเภทตางๆ

แบบเชงเสน

แบบรากตนไม แบบผสม11

Dreamweaverคำาแนะนำาในการตงชอ File และ Folder ชอและนามสกลของไฟล ตลอดจน Folder ตางๆ ควรใชอกษรภาษาองกฤษตวพมพเลก หรอผสมกบตวเลข 0-9 หรอเครองมอขดลบ - /ขดลาง _

12

Dreamweaverแผนผงการดแลเวบเพจ

สรางเวบเพจ

ปรบปรง

Upload

13

Dreamweaverทำาความรจกกบ DreamweaverDreamweaver เปนโปรแกรม

ประเภท Web Design ซงมคณสมบต ในการใชงานในแบบ

WYSIWYG (What You See Is What You Get)

14

DreamweaverWhat version? โปรแกรม Dreamweaver ออกมาได

หลากหลาย version แลว จนถงวนนVersion 8.0

15

Dreamweaverทำาความรจกกบสวนประกอบท สำาคญของโปรแกรม1. สวนของ Stage

2. สวนของหนาตางPanel

3. สวนของ Insert 4. สวนของ

Properties

12

3

4

16

Dreamweaver สวนประกอบทสำาคญใน Dreamweaver 8Documents toolbar ตวเลอกกลม Insert

HTML Code Inspector

Insert Palette

Window Size (กำาหนดขนาดพนทใชงาน)

Properties Inspector

Panel Group

Files Panel

17

DreamweaverDreamweaver เปนโปรแกรมออกแบบ

Web page ทใชเทคนค WYSIWYG (วสสวก What You See Is What You Get) ทำาใหสามารถออกแบบและสรางWeb page ไดอยางดายสวนประกอบทสำาคญMenu bar เปนทเกบคำาสง

Insert Palette ใชแทรก Tag ตางๆ ลงใน Web page ซง Tag ตางๆจะถกแบงเปนกลม

สามารถเลอกกลมไดทงแบบ Menuหรอแบบ Tabs

18

DreamweaverสวนประกอบทสำาคญDocument Toolbar แถบเครองมอเอกสาร

เปนทเกบของ Tool ทใชบอยๆ

ใส TITLE ของ Web page

Preview ใน Browser หรอ กด F12

Show Design View แสดเฉพาะหนาออกแบบ(เหมอนจรง) Show Code and Design แสดงคำาสงทง HTML และ PHP และ หนาออกแบบShow Code View แสดงคำาสงทง HTML และ PHP

19

DreamweaverสวนประกอบทสำาคญProperties Inspector

ใชกำาหนดคณสมบตของ object หรอ tag ทกำาลงเลอกขณะนน

การซอน/ แสดง Window ตาง เลอกใน เมน Window

20

DreamweaverสวนประกอบเพมเตมRulersGridsGuides

21

Dreamweaverตงคาภาษาไทยใน Dreamweaver

กอนสรางเวบเสมอนะ Edit/Preferences... Ctrl+U

Step 1 Step 2

++เราจะสรางเวบภาษาไทย+++ 22

Dreamweaverเรมตนสรางเวบแลวนะ กอนอนจะเรมตนสรางเวบตองรจก การ

สราง Site งานกนกอนนะ

23

Dreamweaverการสราง Site

Web Site ประกอบดวย Web page หลายๆหนา และแตละหนาอาจประกอบดวยไฟลทเกยวของเปนจำานวนมาก เชน ไฟลรปภาพ, ไฟลเสยง ฯลฯ

ดงนนเพอความเปนระเบยบ ควรจะสราง Site หรอ ตำาแหนงเกบไฟลของ Web page ทจะสราง เพอจดเกบ Web page และไฟลทเกยวของใหเปนระเบยบ และงายตอการ Upload ขน Server

ดงนนกอนการสราง Web page ใดๆ ควรทำาการสราง Site ขนกอน(ถงแม Web Site จะประกอบดวย Web page เพยงไฟลเดยว)

24

Dreamweaver สราง Folder เพอเกบขอมล Web Site

ขนตอนการสราง Site

แลวสง Next

คำาสง Site – New Site

25

Dreamweaverการสราง Site งาน Menu Site/New

Siteตงชอไซตสราง Folder เกบ File เวบ

เสรจแลวก OK เลยนะคะ

26

Dreamweaverจะไดหนาตางดงน

Siteของฉน

27

Dreamweaverสรางไฟลตามทไดเตรยมไวตอนตน

Click ขวาตามภาพ New Fileเพอสรางไฟลทตองการจะไดไฟลนามสกล .html หรอ .htm

28

Dreamweaverเรมสราง File และ Folder

File และ Folder

แบบ A แบบ B29

Dreamweaverมารจก Local Info ฝ งการทำางานของเรา Remote Info ฝ งการทำางานของ

Host

Local InfoRemote Info 30

Dreamweaverเปดดเวบเพจในแตละหนามาด

31

Dreamweaverเรมตนทำางานทละหนาเปนตนแบบจะงายทสด

32

Dreamweaverอยาลมพมพ Title ดวยนะ

F12 ดเลย

นไง Title

มประโยชนตอการ Search Engine นะจะบอกให 33

Dreamweaverการออกแบบเวบเพจดวย Layout Mode

Layout Mode

34

Dreamweaverจะออกเวบเพจดวย Layout Modeเลอกขนาดเวบทตองการขนาดอะไรดนะ640x??? pixel800x???? pixel Popular 1

1024x??? pixelFree Size Popular 2

35

Dreamweaverประเดนสำาคญของภาพกราฟกสำาหรบงานเวบ ใชความความละเอยดของภาพ

(Resolution) 72 dpi ใชโหมด RGB ในการสรางงาน ตองคำานงถง Screen Area ของจอภาพ

ดงน o640 x 480 pixelo 800 x 600 pixel o1024 x 768 pixel

36

Dreamweaverมารจกชอเครองมอใน Layout Mode

ตวควบคม Layout Mode

Layout Table

Draw Layout

CellInsert Row

Above

Insert Row Below

Insert Column to the left

Insert Column to the Right

37

Dreamweaverมาเรมวาดโครงเวบกนดกวา

38

Dreamweaverมาเรมวาดโครงเวบท 800x1000 pixel

1000800

39

Dreamweaverเลอกจดตำาแหนงหนาเวบ Center or Left

40

Dreamweaverตวอยาง การวาด Cells in Tables

41

Dreamweaverคามาตรฐานในการตกแตงเวบ

1 .มาตรฐานแบบอกษร

2. มาตรฐานขนาดอกษร

3. มาตรฐานสอกษร4. มาตรฐานพนหลง5. มาตรฐานรปภาพ

พนหลง6. มาตรฐานระยะขอบ

ของเวบ

Pic2.

42

Dreamweaverคามาตรฐานในการสรางลงค

1 .มาตรฐานแบบอกษรในการลงค

2. มาตรฐานขนาดอกษรในการลงค

3. มาตรฐานสอกษรในการลงค Link Color Visited links Rollover links Active links

4. มาตรฐานเสนในการลงค43

Dreamweaver การกำาหนด Fixed Font Font หรอ ตวอกษร เปนสงจำาเปนในการจดทำา

เวบเพจ เพราะเปนสญลกษณในการสอความหมายขอความ ความคด ขาวสารตาง ๆ ในบทความนเราเลยมาแนะนำาการกำาหนดคา FONT

วธการทำา1 .ใหทำาการพมพขอความทตองการลงบนหนา

webpage 2. จากนนใหทำาการ ระบายสขอความ เพอเลอก

ขอความนน 3. เมอเราเลอกขอความทตองการไดแลว ใหไปทหนาตาง Properties เพอกำาหนดคาของ FONT ตาง ดงรป

44

DreamweaverProperties ของ Font Format - สามารถกำาหนด

ลกษณะของตวอกษร วา เปน Paragraph หรอเปน

Heading หวขอของขอความ

Default Font - เราสามารถเลอกแบบของตวอกษรไดทชองน

Size เราสามารถกำาหนดขนาดของตวอกษรไดทชองน

Text Color - ตรงตว คอ เราสามารถกำาหนดของสตกอกษรไดโดยการ Click เลอกสทตองการ

Bold- ทำาตวอกษรใหหนา Italic - ทำาตวอกษรให

เอยง Align -ใชจดรปแบบของ

ขอความ Link - ใชในการกำาหนด

Link Unordered List -

กำาหนด List หวขอแบบมสญลกษณนำาหนา

Ordered List- กำาหนดList หวขอแบบมตวเลขนำาหนา

Text Oundext & Test Indent - กำาหนดการเยอง

ของยอหนา

45

DreamweaverExample Heading 1-6Heading1

Heading2Heading3Heading4

Heading5Heading6

Preformatted46

รปภาพกบเวบเพจImage for Webpages

47

DreamweaverImage

การทำา Webpages แนนอนสงหนงทจะขาด ไมไดนอกจากตวหนงสอแลว รปภาพกเปนสง

จำาเปน การจะนำาไฟลรปภาพตาง ๆ เขามาใช งานภายใน Webpages เราควรจะมขอคำานง

ถงอย 3 ประการดวยกน คอ1 .ประเภทของไฟลรปภาพ ไฟลรปภาพนน เรา

ควรจะใชเปนนามสกล *.gif *.jpg จงจะเหมาะสมกบงานบน website

2. ความจของไฟลรปภาพ (ไมใชขนาดของรปภาพ) ควรมการ Optimize กอนการนำามาใชงาน

3. ควรมการใชงานรปภาพเทาทจำาเปน อยาใสใหมากเกนไป---- 3 ประการนใหเราพจารณาตามความเหมาะสมกบงานเรา -----

48

Dreamweaverกราฟกไฟลสำาหรบอนเทอรเนต ไฟลสกล GIF (Graphics Interlace

File) ไฟลสกล JPG (Joint Photographer's

Experts Group) ไฟลสกล PNG (Portable Network

Graphics)

49

Dreamweaverไฟลสกล GIF (Graphics Interlace File) จดเดนของไฟลประเภทนคอ

o มขนาดไฟลตำา o สามารถทำาพนของภาพใหเปนพนแบบโปรงใสได

(Transparent) o มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปส

ละเอยดในระบบ Interlace o มโปรแกรมสนบการสรางจำานวนมาก o เรยกดไดกบ Graphics Browser ทกตว o ความสามารถดานการนำาเสนอแบบภาพเคลอนไหว

(Gif Animation) จดดอยของไฟล

o แสดงสไดเพยง 256 ส

50

Dreamweaverไฟลสกล GIF (Graphics Interlace File) เปนไฟลกราฟกมาตรฐานททำางานบนอนเทอรเนต มกจะใชเมอ oตองการไฟลทมขนาดเลก oจำานวนสและความละเอยดของภาพไมสงมากนกo ตองการพนแบบโปรงใส oตองการแสดงผลแบบโครงรางกอน แลวคอย

แสดงผลแบบละเอยด oตองการนำาเสนอภาพแบบภาพเคลอนไหว

51

Dreamweaverไฟลสกล JPG (Joint Photographer’s Experts Group) จดเดนคอ

oสนบสนนสไดถงตามคา True Color ถง 24 bit colors สามารถกำาหนดคาการบบไฟลไดตามทตองการ (compress files) มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยดในระบบ Progressive มโปรแกรมสนบสนนการสรางจำานวนมาก เรยกดไดกบ Graphics Browser ทกตว

จดดอยคอ oทำาใหพนของรปโปรงใสไมได

52

Dreamweaverไฟลสกล PNG (Portable Network Graphics) จดเดนคอ

oสนบสนนสไดถงตามคา True color (16 bit, 32 bit หรอ 64 bit)

oสามารถกำาหนดคาการบบไฟลไดตามทตองการ oมระบบแสดงผลแบบหยาบและคอยๆ ขยายไปส

ละเอยด (Interlace) oสามารถทำาพนโปรงใสได

จดดอยคอ o ไมสนบสนนกบ Graphic Browser รนเกา

สนบสนนเฉพาะ IE 4 และ Netscape 4 ความละเอยดของภาพและจำานวนสขนอยกบ Video Card

53

Dreamweaverพกเซล (Pixel) 1 .คำาผสมของคำาวา Picture กบคำาวา

Element 2. หนวยพนฐานของภาพ 3. เทยบไดกบ "จดภาพ" 1 จด4. แตละพกเซลเปรยบไดกบสเหลยมเลกๆ ท

บรรจคาส โดยถกกำาหนดตำาแหนงไวบนเสนกรดของแนวแกน x และแกน y

5. ภาพบตแมปจะประกอบดวยพกเซลหลายๆ พกเซล

54

Dreamweaverความละเอยด (Resolution) จำานวนพกเซลของภาพแตละภาพ เทยบจำานวนพกเซลกบความยาวตอนว หนวยเปน พกเซลตอนว (ppi: pixels per inch) หรอจดตอนว (dpi; dot per inch) ภาพขนาดเทากนแตมความละเอยดตางกน แสดงวาจำานวนพกเซลตางกน และขนาดของจดพกเซลกตางกนดวย

55

Dreamweaverวธการนำาภาพมาประกอบเวบเพจ1. ใหเราไปท Insert

Tool จากนนใหเราClick เลอกไปทImage ของTAB Common

ดงในภาพ

2. เมอ Click ไปแลวจะปรากฏหนาตางใหมขนมาเพอใหเราเลอกไฟลรปภาพทจะนำาเขามา

3. ใชงานภายในเพจเราใหเลอกไฟลไดตาม

ตองการ เมอเรา เลอกไฟลไดแลวก

Clcik ทปม OK ของหนาตางนน

56

Dreamweaverรายละเอยด Properties image

ทหนาตาง Properties นเราสามารภ กำาหนดคาตาง ๆ ไดดงน

- ชองแรก จะเปนการกำาหนดชออางองของไฟลรปภาพ- W จะเปนคาความกวางของรปภาพ- H จะเปนคาความสงของรปภาพ

ทง W และ H เราสามารถกำาหนดได 2 ลกษณะคอเปนเปอรเซน (%) กบเปน pixel

โดยถาเราใสเปนคาตวเลขลงไปอยางเดยวจะ เปนการกำาหนดแบบ Pixel แตถาเราใสเปน

30% จะเปนการกำาหนดแบบ เปอรเซน- Scr คอตำาแหนงของรปภาพ

- Link ถาตองการทำาภาพนใหมการเชอมโยงกบไฟลอนหรอเวบอนกกำาหนดคาตรง

สวนน ( จะกลาวถงการทำา link ตอไป)- Alt คอการกำาหนด Title ของรปภาพ เมอ

เวลาเอาเมาทวางเหนอรปภาพจะม PopUp แสดงขอความออกมา

- V Space คอคาความหางระหวางรปภาพกบวตถอนทางดานบนและลางของรป- H Space คอคาความหางระหวางรปภาพกบวตถอนทางดานขวาและซายของรป- Border คอ คาความหนาของกรอบรปภาพทตองการ- Align คอการกำาหนดตำาแหนงของรปภาพ

57

การทำางานกบ LinkLink for

webpage58

Dreamweaverประเภทของลงค1.Link to Other Pages2.Link to in Page3.Link to File (Multimedia,

Other File)4.Link to Download5.Link to URL6.Link E-Mail

59

Dreamweaverลกษณะจดคลกลงค ม 2 แบบ วธการสรางจดเชอมโยง หรอHyperlink นน เราสามารถแบง

ออกไดเปน 2 รปแบบใหญ ๆ คอ Text Link Image Link

60

ตวอยางลงค

61

DreamweaverLink ภายใน website เดยวกน1. ใหทำาการพมพขอความทตองการทำาเปนจดคลก

link ลงบนหนาเวบเพจ2 .จากนนใหทำาการเลอกขอความนน3. จากนนใหไปทหนาตาง Properties ดานลาง4. ตรงหนาตาง properties จะพบชอง คำาวา

Link อย5. ทชองนให Click ทรปไอคอนคลาย ๆ โฟรเดอร

ซงอยทางขวามอของชองน (Browser for File)

6. จากนนใหทำาการเลอกไฟลเพจทตองการ Link ไป

62

DreamweaverLink URL1. บางครงเราจำาเปนตองมการสราง Link

ไปยงภายนอกเวบไซต เชนคณอาจจะอยาก จะ Link มาทเวบ

http://www.janooy.com กไมยากดงน- ทชอง Link (จากขนตอนกอน) ใหเราทำาการ

พมพ URL ของเวบไซตทเราตองการ Link ไปหา โดยวธการพมพตองพมพแบบระบ

Protocol เชน http://www.janooy.com เปนตน ตรง http:// คอการระบโปรโตคอล

63

DreamweaverLink ไปยง e-mail1. การทำา Link อกแบบหนงทนยมใชกนคอ การ

Link ไปยง e-mail ทตองการ มาดวธการทำา กน เชน sathima@bitsthailand.com

ไปทหนาตาง Insert Tool เลอกไปท Email Link เมอ Click แลวจะ

ปรากฏหนาตางใหมขนมา ใหเราทำาการกรอก E-mail Account ทตองการ link ลงไปในText Box

ชอง Text ใหทำาการพมพขอความทตองการ สราง link

ทชอง E-Mail ใหเราทำาการพมพ E-Mail Account ทตองการลงไปClick ท OK

64

DreamweaverImage Link Image Link หรอ การเชอมโยงโดยใช

รปภาพนนเปนทนยมใชกนมาก เนองจากม ความสวยงามและนาสนใจกวาการใช Text

หรอขอความทวไป แตสงหนงเราควรคำานง ถง และนำามาพจารณาเปนองคประกอบใน

การเลอกระหวางการใช Text หรอ Image ทจะนำามาทำาเปน link กคอ ระยะเวลาในการ

Load ไฟลเพจของเรา65

Dreamweaver วธการสราง Image Link ใหคณทำาการ Insert ไฟลรปภาพเขามา

ภายใน webpage ของคณ จากนน Click เลอกไปทรปภาพนน (เมอคลกแลวจะปรากฏ

เปนกรอบขนมาทรปนน) จากนนใหคณไปยง หนาตาง Properties

66

Dreamweaver ทหนาตาง Properties นใหเรา

ทำาการกำาหนดคาทสำาคญ ๆ ดงน- Link คลกเลอกไฟลท

คณตองการ link ไป(กรณไฟลทตองการลงค

ไปอยใน site เดยวกน) หรอ พมพ URL ของไฟล ลงไป กรณถาไฟลอยตาง

site กน- Border ใหเรากำาหนด

คาเปน 0 เสย ไมเชนนน จะปรากฏกรอบของ link

ขนโดยอตโนมตทรปภาพ ซงเปนลงค (แตถาคณ

ตองการกรอบนนกปลอยวางไวไมตองกรอกเลขอะไรทงสน)

- Target กำาหนดBrowser ทจะมารองรบ

ไฟลทเชอมโยงไปนน โดย มความหมายดงน >>>

_blank ใหทำาการเปดBrowser ใหม สำาหรบไฟลทเชอมโยงไป_self ใหเปดไฟลทเชอม

โยงไปกบ Browser ทเรยกใชไฟลนน_ top ใหทำาการเปดไฟลท

เชอมโยงไปกบ Browser ปจจบนและทำาการลบ

Frame ออกทงหมดหากใชรวมกบเฟรม_self ใหผลคลายกบ_top

67

DreamweaverShow Content

_blank - the target URL will open in a new window _self - the target URL will open in the same frame as it was clicked _parent - the target URL will open in the parent frameset _top - the target URL will open in the full body of the window

68

Dreamweaver การสรางตาราง

การสรางตารางสำาคญและจำาเปนอยางมาก ในการสรางเวบเพจ เพราะโครงสรางของ

หนาเวบเพจทคณเหนสวย ๆ นน แทจรงแลว กเกดจาการสรางตารางขนมาใชในการ

Layout นนเอง ครงนเราจะมาเรยนรพนฐานการสรางตารางกน...

69

Dreamweaverวธการสราง1. ใหคณทำานำา cursor ไปวางไวยงตำาแหนงทคณตองการสรางตาราง2. จากนนใหคณทำาการเปด หรอ

ไปทหนาตาง Insert ในกรณMX หรอท Object ในกรณversion.4 นะ3. จากนนทหนาตางนใหไปทเมนCommon Object ทเมนนเรา

จะเหน Icon เปนรปตารางอย ท ชอวา Insert Table ใหเรา ทำาการ Click ท icon น

4. เมอทานไดทำาการ Click ทIcon นแลวจะปรากฏหนาตางใหมขนมาใหเรากำาหนดคา

คณสมบตตาง ๆ ของตารางท เราจะทำาการสราง

70

DreamweaverการกำาหนดคณสมบตของตารางRow -> กำาหนดจำานวนแถวของตาราง (เซลตารางตามแนวนอน)Columns -> กำาหนดจำานวนคอลมนของ

ตาราง (เซลตารางตามแนวตง) Width -> กำาหนดความกวางของตาราง ตรง

นเราสามารถกำาหนดไดเปน 2 แบบคอแบบPixels กบแบบ Percent (%)Border -> กำาหนดคาความหนาของกรอบตารางCell Padding -> กำาหนดระยะหางระหวางกรอบขอขอความกบตวอกษรภายในเซลCell Spacing -> กำาหนดระยะหางระหวางCell ของตาราง

71

DreamweaverRollover Image เมอเรานำาเอาเมาทไปวางเหนอภาพทใชเทคนคRollover น รปภาพจะเปลยนไปเปนอกรปหนง นคอ

การทำางานของ-Rollover Image Name : ใหทำาการตงชอของรปภาพ-Original Image : ทำาการ Browse..เพอเลอกไฟลรปภาพทจะนำามาแสดงกอนทเมาทจะมาวางเหนอรปภาพ-Rollover Image : ทำาการ Browse..เพอ

เลอกรปภาพทจะมาแสดงแทน เมอผใชทำาการนำาเมาทมาวางเหนอรปภาพ-Perload Rollover Image : ตก

เครองหมายถก เพอให Browser ทำาการโหลดไฟลRollover Image มาเกบไวกอน เพอการแสดงผลทรวดเรว-Alternate Text : ขอความอธบายรปภาพ-When Clicked, Go To URL : ทำาการเลอก

ไฟล หรอใสชอ URL สำาหรบการทำา link ใหแก รปภาพ

72

File Flash กบ Dreamweaver

73

Dreamweaver การนำาเขาไฟลแฟลท

ปจจบนงานประเภท Flash ไดรบความนยมจากผ ออกแบบและผใชงาน website เปนอยางมาก

อาจจะเปนเพราะเทคโนโลยทเปลยนไป ทำาใหBrowser ตาง ๆ หนมาสนบสนนเทคโนโลยของFlash กนมากขน ซงผดกบเมอกอนน ทใคร

ตองการชมเวบเพจทมใชงานไฟล Flash นตองไปDownload ตว Plug in มาตดตงเพมเตมกบBrowser เอง แตปจจบบนผพฒนา Browser

ตาง ๆ ไมวาจะเปน IE หรอ NS ลวนแตสนบสนน ไฟล Flash น โดยทคณไมตองทำาการตดตง

โปรแกรมเพมเตมแตอยางใด....ครงนเราจะมา  ทำาการ Insert Flash File ดวยโปรแกรม

Dreamweaver

74

Dreamweaver วธการ Insert Flash File1. กบ webpage โดยอาจจะ

สรางขนมาเองดวยโปรแกรมMacromedia Flash หรอจะ

เขาไปหา Download ไฟลFlash นจากเวบไซตทใหบรการกได2. เมอเราไดไฟล Flash ทตองการแลวตอไปกมาเรมนำาเขา

มาใชงานกบ webpage ของ เราเลย โดยใหเปดโปรแกรม

DW ขนมา จากนนใหทำาการNew File ขนมาใหม หรออาจจะ

เปดไฟลเพจเดมทมอยแลวกได จากนนใหคณนำาเอา cursor ไป

วางในตำาแหนงทตองการจะ ทำาการ Insert Flash เขาไป

3. เมอไดตำาแหนงในการจดวาง ไฟล Flash นแลว ใหไปท

หนาตาง (Panel) ทชอวาCommon แลวเลอกไปท icon

ทชอวา Flash

4. เมอเลอกไปท icon ทชอวาFlash จากขนตอนกอนแลว ก

จะเกดเปน Dialog Box ขนมา ใหมเพอใหเราทำาการเลอกไฟล

Flash ทเราตองการนำามาใช งานกบ webpage ของเรา ให

เราทำาการเลอกไปทไฟล Flash ทเราตองการนำามาใช5. เมอเลอกแลวโปรแกรมจะ

ทำาการ Insert Flash File ให เรา ขนตอนนอาจจะมการถามให

เราตอบคำาถามบางอยาง กรณน จะเกดขนไดหากมการเรยกใช

File Flash นอกไซตททำาการ ตงเอาไว ให ตอบ OK ไป แลวให

ทำาการ Save ตามทโปรแกรมแนะนำา6. เมอเราไดทำาการ Insert

เปนทเรยบรอยแลว ในโปรแกรมDreamweaver ทเรา

ออกแบบจะไมแสดงไฟล Flash นนใหเราเหน แตจะแสดงเปน

วตถสเทา ๆ แทน

75

Dreamweaver การแทรกวน - เวลา

หลายครงการสรางwebpage ขนมา เราตองทำาการบนทกวนเวลาลงไปกบ

หนาเวบเพจนน ๆ ครนจะมานง พมพมนกเสยเวลา ในวนนเลย

มาแนะนำาปม Insert - Day Format : เลอกรป

แบบวนทตองการแสดง- Date Format : เลอกรปแบบวน-เวลาทตองการแสดง- Time Format : เลอกรปแบบเวลาทตองการแสดง- Update Automatically on Save : ถาเราเลอกทOption น หมายความวา เราตองการใหตวโปรแกรมทำาการ

บนทกเวลาใหใหมทก ๆ ครงท เราทำาการ Save เวบเพจ

76

Dreamweaver การสราง Flash Button

ในโปรแกรม Dreamweaver ตงแตเวอรชน 4 ขนมา เราจะ

สามารถสราง Flash Button หรอ ปมกดในแบบแฟลทไดจาก

โปรแกรม Dreamweaver โดย ไมตองพงโปรแกรม

Macromedia Flash ในการ สรางปมขนมาใชงาน

วธสราง1. ใหไปท Panel ทชอวา Insert จากนนเลอกไปท TAB ทชอวา Media สำาหรบ MX 2003 แตใน MX 2004 จะปรากฏอยท Common > Media > Flash Button2. จากนนใหไปท Icon ทชอวา Flash Button

77

Dreamweaver การสราง Flash Button

ทหนาตาง Insert Flash Button น ใหเรากำาหนดคาตาง ๆ ดงน

- Sample :: แสดงตวอยางของรปแบบFlash Button ทเราตองการ- Style :: เลอกรปแบบของ Button- Button Text :: ทำาการพมพขอความ

ทตองการใหปรากฏบน Button- Font :: เลอกรปแบบ Font ทตองการ- Size :: เลอกขนาดของ Font- Link :: ทำาการกำาหนด Link ทตองการ

ในกรณทอยใน Site เดยวกนใหทำาการBrowse.. ไปยงไฟลเพจทตองการไดทนท

แตหากอยนอกไซตใหทำาการพมพ URL ใน แบบเตมลงไป (ดงในรป)

- Target :: เลอกกำาหนดการเปด Link ไปยง window ทตองการ (อานราย

ละเอยดเพมเตมทหวขอการสราง Link)- Bg Color :: เลอกสพนBackground- Save As :: เลอก หรอ พมพชอไฟลท

ตองการบนทกไฟล Button น

78

Dreamweaver การสราง Flash TEXT

วธการสราง Flash TEXTใหทานทำาการเปดไฟลเวบเพจ

ทตองการ Insert Flash Text ขนมา หรอใหสรางขนมา

ใหม (ในกรณทสรางไฟลเพจขน มาใหม ใหทำาการ Save ไฟล

เพจนนเสยกอน)2. ไปท Panel ของ Insert

เลอกไปท Media 3. จากนนท Tab Media ให

เราเลอกท Icon ทชอวาFlash Text

79

Dreamweaver การสราง Flash TEXT

ทหนาตาง Insert Flash Text นให เราทำาการกำาหนดคาตาง ๆ ดงน

- Font เลอกรปแบบ Font ทตองการ- Size เลอกขนาดของตวอกษร- Color เลอกสตวอกษร- Rollover Color เลอกสตวอกษร

เมอผใชนำา Mouse มาวางเหนอขอความนน- Show Font ใชเลอกเพอใหทำาการ

แสดง Font นน- Link ทำาการ Browse..ไปหาไฟลทเรา

ตองการ Link ไปดวยขอความน หรอใน กรณทจะทำาการ Link ไปยงนอกเวบไซต

ของเราใหทำาการพมพ URL แบบเตม ๆ ลงไป ดงในรป

- Target กำาหนดหนาตางเปาหมายทเรา จะใหเปด Link นน

( )อานรายละเอยดในเรองการสราง Link- Bg Color เลอกสพน- Save AS ตงชอไฟลทเราตองการ

ทำาการ Save ไฟล Flash Text น หรอให เราทำาการ Browse หากตองการนำาไฟลน

ไปเกบยงโฟลเดอรอน ๆ

80

Dreamweaver การสราง Layer

Layer เปรยบเสมอนแผนใส ทเราสามารถจด วางเคลออนยายและซอนกนไดกบ Object ตาง

ๆ ไดอยางอสระ และภายใน Layer ทเราสรางขน เรายงสามารถ Insert หรอ ใส TEXT, Image,

Table ตาง ๆ ลงไปได เหมอนเราใชงานบนพนทปรกต

81

Dreamweaverวธการสราง1. เรยกใช Layer จากหนาตาง Common Object (Object Palette) โดยใช icon ทชอ

วา Draw Layer หรอจะเรยกใชจากแถบเมน(MenuBar) โดยไปทคำาสง Insert >> Layout Objects/Layer2. วาด Leyer ยงตำาแหนงทตองการ3. click ท Layer ทเราสรางจากนนทำาการ

กำาหนดคณสมบตของ Layer 82

Dreamweaver

การกำาหนด Properties >>Layer ID : กำาหนดชอทอางองใหกบ Layer หากไมกำาหนด โปรแกรมจะทำาการกำาหนด

ชอใหเราโดยอตโนมต ตามลำาดบ Layer m เราสรางขนL (Left) : กำาหนดตำาแหนงเรมตนทางดานซายของ Layer ( มคาเปน Pixel)T (Top) : กำาหนดตำาแหนงเรมตนดานบนสดของ Layer ( มคาเปน Pixel)W (Width) : กำาหนดความกวางของ Layer ( มคาเปน Pixel)H (Hight) : กำาหนดความสงของ Layer ( มคาเปน Pixel)Z-Index : กำาหนดคาการซอนกนของ Layer ( โดย Layer ทมคา Z-Index มากจะอย

เหนอ Layer ทม Z- Index นอยกวา)Vis : กำาหนดคาสถานะของ LayerInherit : ใชคณสมบตจาก layer’s parentVisible : ใหแสดง LayerHidden : ไมใหแสดง Layer (การซอน)Bg Image : กำาหนดภาพ Background ใหกบ LayerBg Color : กำาหนดสใหกบพนหลงใหของ LayerTag : เลอกคำาสง HTML ทใชในการสราง Layer ( ปกตจะใช DIV เนองจากใชไดกบBrowser ทกคาย)Overflow : ในกรณทเนอหามพนทใหญกวาขนาดของ Layer เราสามารถกำาหนดใหLayer ทำาการขยาย (Visible) ไมขยาย (Hidden) หรอวาใหมแถบเลอน (Scroll) Clip-L (Left), T (Top), R (Right), B (Bottom) : เปนการกำาหนดบรเวณพนท

ของ Layer ทจะแสดง

83

Dreamweaver>> การตกแตงแตงแกไขรปภาพ  <<1. ใหทำาการ Insert รปภาพเขามายงไฟลเวบเพจ

จากนนใหคณทำาการ Click เลอกทรปภาพนน2. เมอไดทำาการเลอกทรปภาพทเราตองการจะ

ทำาการตบแตงแลว ใหคณไปท Properties panel เราจะพบ Option สำาหรบการตบแตง

รปภาพอย 3 Icon ดงน Crop สำาหรบการตดรปภาพเฉพาะสวนทเราตองการ Brightness and Contrast สำาหรบการปรบแสง

ของรปภาพ Sharpen สำาหรบการปรบความคมชดของรปภาพ 84

Insert Multimedia

85

Dreamweaver การ Insert ไฟล VDO มา ใชงานบนเวบเพจ วธการ Insert ไฟล VDO

1. จดเตรยมไฟล VDO ทคณตองการ อาจจะอย รปแบบของ Format : *.wmv - *.avi กได

ตามแตสะดวก2. ทำาการเปดไฟลเวบเพจทเราตองการInsert VDO ขนมา หรอสรางไฟลเวบเพจใหม

ขนมาและทำาการ Save ไวใน Site ทเรากำาหนด3. จากนนนำา CURSOR ไปวางในจดท

ตองการแทรกไฟลวดโอบน Document Window ของโปรแกรม ตามทตองการ4. เมอไดตำาแหนงหรอจดทเราตองการแทรก

แลวใหไปท Insert Bar เลอกไปท Media จากนน Click ไปท Icon ทชอวา ActiveX

86

Dreamweaverการแทรก Sound

วธการ Insert ไฟล Sound1. จดเตรยมไฟล Sound ทคณตองการ อาจจะ

อยรปแบบของ Format : *.mp3 - *.wma กไดตามแตสะดวก

2. ทำาการเปดไฟลเวบเพจทเราตองการInsert Sound ขนมา หรอสรางไฟลเวบเพจ

ใหมขนมาและทำาการ Save ไวใน Site ทเรากำาหนด3. จากนนนำา CURSOR ไปวางในจดท

ตองการแทรกไฟลวดโอบน Document Window ของโปรแกรม ตามทตองการ4. เมอไดตำาแหนงหรอจดทเราตองการแทรก

แลวใหไปท Insert Bar เลอกไปท Media จากนน Click ไปท Icon ทชอวา ActiveX

87

Dreamweaver:: การสรางเทมเพลต ::

ออกแบบหนาเพจเหมอนปกตในทนผม แบงออกเปน 3 สวน สวนบน สวนเมน

ทางดานซายมอและสวนทอยตรงกลางเปนสวนทปลอยวางไวเพอจะใชกำาหนด

ใหเปนสวนทสามารถแกไขได ในหวขอ ตอไป ในการแบงนผมใช layout cell

และ layout table ชวย88

Dreamweaverเทมเพลตคออะไร Template ทำาหนาทเหมอนแมแบบในการ

ออกแบบ webpage ชวยใหเราประหยดเวลาในการสรางสรางเวบเพจตอไปใน

อนาคต โดยการสรางเทมเพลตจะแบงออก เปน 2 สวนใหญๆ คอ สวนทคงทและสวนท

สามารถแกไขได

89

DreamweaverTemplate

1.การสรางเทมเพลต2. การนำาเทมเพลตมาใชงาน3. การปรบปรงเทมเพลต4. การซอนเทมเพลต (Nested Template)

90

Dreamweaver เรอง การใชงาน CSS กบโปรแกรมDreamweaver CSS ยอมาจาก Cascading Style Sheets

ซงเปนนมาตราฐานนงในการกำาหนดรปแบบ ลกษณะตาง ๆ ของขอมลบนเวบเพจ CSS ชวย

เราไดอยางมากในการออกแบบหรอจดการกบ ปญหาบางอยางท HTML โดยปรกตไมสามารถ

ทำาได หรอทำาไดไมดเทาทควร เชน การกำาหนด ขนาด Font ใหไดขนาดตามทเราตองการ หรอ

การใสสสรรใหกบชองกรอกขอมลบนหนาเวบ และ อน ๆ ในบทเรยนนเราจะมาเรมรจกกบการใชงาน

CSS กบโปรแกรม Dreamweaver เบองตน กนสกนด สำาหรบเทคนควธการใชงาน CSS ตาง

ๆ คณอาจจะหาอานไดจากหนา Tricks ของเเวบ ไซตน

91

Dreamweaver การใชงาน CSS Styles Panel เบองตน1. การเรยกใชงาน CSS Styles Panel สำาหรบโปรแกรม

Dreamweaver เราสามารถเรยกใชงาน

หนาตาง CSS Styles ไดจาก Main menu ->

Window -> CSS Styles หรอหากเปนเวอรชน MX2004 คณสามารถเรยกใชงานไดจาก Panel Group ทางขวามอของโปรแกรม (ตามคาเรมตนของโปรแกรม) หนาตาของ CSS Styles Panel

92

Dreamweaver2. วธการสราง CSS

Styles ใหม เราสามารถสราง CSS

ขนมาใหมไดโดยไปท หนาตาง CSS Styles

จากนนใหทำาการกดไปทIcon ทมเครองหมาย

บวก (+) หรอเราเรยกicon นวา New CSS Style ดงจะเหนไดจาก

ภาพขางตน เมอทำาการ กดไปแลว โปรแกรมจะ

ทำาการเปดหนาตางใหมขนมาใหเราทำาการตงชอ

หรอเลอก TAG ของHTML มาใชในการ

กำาหนดคา ดงรป

93

Dreamweaver ทหนาตาง New CSS Style นจะมชองใหเราตงชอหรอเลอกรป

แบบของ CSS ได ดงน- Selector : เปนการกำาหนดชอของ CSS ทเราตองการ และท

ชองนจะทำางานสมพนธกบ Type ดานลาง หากเราเลอก Type เปน Redifine HTML TAG ทชอง Selector จะม List ของ

TAG HTML ใหเราเลทอกเพอทำาการกำาหนดคณสมบตใหมใหกบTAG HTML - Tyle : เลอกรปแบบทเราจะกำาหนดคณสมบต CSS ม 3 คาให

เลอก คอMake Custom Style (class) เปนการสราง CSS ขนมาใหม

โดยเราทำาการกำาหนดชอของ Style ขนเอง เราอาจจะเรยก Style นนวา Class กได

Redifine HTML Tag เปนการเลอก TAG ของ HTML ขนมาทำาการกำาหนดคณสมบตใหมUse CSS Selector เปนการกำาหนดคณสมบต CSS ใหกบบาง

จดของหนาเวบเพจทเราตองการ เชน จดทเปน Link จดทเรา กำาหนด ID ของ TAG นน ๆ ไว เปนตน ใน MX2004 จะใชชอ

option นวา Advanced ดงรป- Define in : เปนการเลอกวาเราจะกำาหนดการเกบ CSS ทเรา

กำาลงจะสรางขนไวในรปแบบใด ม 2 รปแบบใหเลอก คอ1. New Style Sheet File เปนการเกบ CSS ไวภายนอก

เวบเพจ หรอพดอกนยนง คอ เปนการเกบ CSS ไวใน File ตาง หากแยกออกจากเวบเพจทเรากำาลงทำางานอยน

2. This document only เปนการฝง CSS นลงในไฟลเวบเพจ ปจจบนน ( สำาหรบมอใหม แนะนำาใหเลอกท option ไปกอน เพอ

การเรยนร)

94

Dreamweaver ทหนาตาง CSS Style Definition นเราสามารถกำาหนดลกษณะ

รปแบบตาง ๆ ของ CSS ไดมากมาย ซงโปรแกรมไดทำาการแบงไว เปนหมวด ๆ ดงน

- Type เปนการกำาหนดรปแบบของขอความทเปนลกษณะของText หรอ Font ตาง ๆ- Background เปนการกำาหนดคณสมบตของพนหลง เชน สพน

หลง ลกษณะรปภาพของพนหลง เปนตน- Block เปนการกำาหนดขอบเขตในลกษณะของ Block- Box เปนการกำาหนดขนาดของพนทในรปแบบของ Box เราสามารถกำาหรดคาความกวางความสงลงไปไดกบคณสมบตน- Border เปนการกำาหนดลกษณะคณสมบตของเสนขอบ เชน รป

แบบของเสนขอบ สสรรตาง ๆ- List เปนการกำาหนดลกษณะของขอความในลกษณะ List Menu- Position เปนการกำาหนดตำาแหนงของวตถ (Object) ทเลอก

ใช CSS น- Extension เปนการกำาหนดคาเพมเตมของ CSS ในรปแบบ

พเศษ เชนการกำาหนด Cursor ใหเปนรปแบบใหมตามทเรา ตองการ เปนตน

คาคณสมบตตาง ๆ จากหนาตาง CSS Style Definition เราจะ เลอกทจะกำาหนดเพยงคณสมบตใด คณสมบตหนงกได ไมจำาเปน

ตองกำาหนดใหครบทกคณสมบต เมอเราไดทำาการกำาหนดคาเปนท เรยบรอยแลว ใหทำาการ Click ทปม OK เรากจะได CSS Style

ในคณสมบตทเราตองการ

95

Dreamweaver3. การเรยกใชงาน CSS Style

เมอเราไดทำาการกำาหนดคาคณสมบตตาง ๆ กบ CSS ทเราตองการแลว สำาหรบวธการ

เรยกใช CSS กบ Obj ทเราตองการนน มการเรยกใชไดหลากหลายรปแบบทเรา

ตองการ หากเปน Dreamweaver MX2004 คณสามารถเรยกใชไดจากProperties Panel ไดเลยในทนท จาก

ชองทชอวา Style ดงรป

96

A&Q