Macromedia Dreamweaver MX 3 - Chiang Mai...

Macromedia Dreamweaver MX

รศ.ดร.ถนอมพร เลาหจรัสแสง ภาควิชาเทคโนโลยีทางการศึกษา คณะศึกษาศาสตร มหาวิทยาลัยเชียงใหม

ตอนที่ 1 ทํ าความรูจักกับ Macromedia Dreamweaver MX

Dreamweaver เปนโปรแกรมประเภท Web Design ซึ่งมีคุณสมบัติในการใชงานในแบบWYSIWYG (What You See Is What You Get) คือ เปนโปรแกรมประเภทคุณออกแบบมาอยางไรกับโปรแกรมของคณุ คุณก็เห็นงานของคุณเปนแบบนั้น การใชงานของโปรแกรมจะอํ านวยความสะดวกใหกับการออกแบบ WebPages เปนอยางมาก เนื่องจาก เราไมจํ าเปนตองมานั่งเรียนรู CODE ของ HTML เลยเราก็สามารถสราง WebSite ไดอยางมืออาชีพ โปรแกรมกลุมเดียวกันกับโปรแกรม Dreamweaverยกตวัอยาง เชน โปรแกรม FrontPage จากคาย Microsoft เปนตน

A. การเปดโปรแกรม

1. คลิกปุม Start2. เลื่อนเมาสไปที่ Programs3. เลือ่นเมาสไปที่ Mecromedia4. เลือ่นเมาสไปที่ Mecromedia Dreamweaver MX5. โปรแกรมพรอมใชงาน



B. Dreamweaver มีสวนประกอบ 3 สวน หลกัๆ ดังนี้ คือ

1. Object Tools Box เปนกลองเครื่องมือที่ใช Insert Tag คํ าสั่งตาง ๆ ลงในโฮมเพจ เชน ใสรูปภาพใสตาราง สรางเลเยอร เปนตน (คํ าสั่งใน Object Tools Box จะตรง กับ Insert Menu)

2. Properties Inspector เปนกลองแสดงสถานะของ Object หรือ Tag ตางๆ มันจะคอยติดตาม การท ํางานของเรา ทัง้นี ้กเ็พื่ออํ านวยความสะดวก ใหเราทํ างานไดงายขึ้น เชน ถา Click ที่รูปภาพมันก็จะเปลีย่นสถานะเปน Image Inspector แสดงขอมูลของรูปภาพนั้น แตถา Click ที ่link มันจะแสดงขอมูลของlink นัน้ เราสามารถแกไขคาตางๆ ของ Object หรือ Tag ตางๆ ไดงาย โดยแกไขที่ Properties Inspectorไดเลย

3. Palette ประกอบไปดวยเครื่องมือในการชวยสรางโฮมเพจทั้ง CSS style Javascript และ DHTMLฯลฯ



C. Menu Bar ที่สํ าคัญคือ

Insert Menuเปนเมนทูีม่ีคํ าสั่งเดียวกับ Object Tools Box รวบรวม Tag ตางๆ ที่สํ าคัญตอการสรางเว็บเพจไว

Modify Menuเปนเมนทูีใ่ชในการกํ าหนดคา และแกไขคาของคํ าสั่งตางๆ เชนแกไขตาราง Page Property เลเยอร และ Timelineโดยปกติในการสราง webpage เราตองกํ าหนดคาพื้นฐานในกับwebpage เชน ชื่อหนา สีพื้น หรือรูปที่เปน Background การก ําหนด Encoding ของ webpage การกํ าหนดคาดังกลาวนี้ ในDreamweaver จะอยูใน Page Property ที่อยูใน Modify Menu



Command Menuเปนเมนทูี่มีคํ าสั่งพิเศษชวยเพิ่มสีสันใหกับ webpage ไดคลายกับAction ใน Behaviors นอกจากน ี้ยังมีชุดคํ าสั่งในการใหความชวยเหลอืและปรับแตง Tag ตางๆ เชน การทํ าความสะอาด Tag ที่ไมจ ําเปน หรือ Clean Up HTML การ Sort ตาราง เปนตน

Window Menuเปนเมนูสํ าหรับเปด-ปด Palette ตางๆ



ตอนที ่2 การกํ าหนดคาตาง ๆ กอนสรางเว็บเพจ

A. การกํ าหนดรูปแบบตัวอักษรภาษาไทย

1. คลกิเมนู Edit แลวเลือกเมนูยอย Preferences จะไดกรอบ Preferences ข้ึนมาดังภาพหนาถัดไป

1



2. ใน Category ใหคลิก เลอืกรายการ Fonts3. ใน Font Settings คลิกเลือก Thai Windows-874 หรือ Thai Tis-6204. ใน Proportional Font เลือก MS Sans Serif size 12 pt (Medium) หรือ ตามเหมาะสม5. ใน Fixed Font เลือก Courier New (Western) size 12 pt (Medium) หรือ ตามเหมาะสม6. ใน Code View เลือก Microsoft Sans Serif (Thai) size 12 pt (Medium) หรือ ตามเหมาะสม7. ใน Tag Inspector เลือก MS Sans Serif size 12 pt (Medium) หรือ ตามเหมาะสม8. คลิกปุม OK

2

34

5

6

7

8



9. คลกิเมนู Edit แลวเลือกเมนูยอย Preferences อีกครั้ง (เหมือน ขอ 1)10. ใน Category ใหคลิก เลอืกรายการ New Document11. ใน Default Document Type เลอืกตามเหมาะสม ในที่นี้ใหเลือก HTML12. ใน Default Encoding คลิกเลือก Thai Windows-874 หรือ Thai Tis-620

10

11

12



B. การกํ าหนด siteการสราง site ไวใชงานจะทํ าใหเราดูแลจัดการเว็บเพจของเราไดสะดวกและเปนระเบียบยิ่งขึ้น อีก

ทัง้ยงังายตอการแกไขในภายหลัง สามารถกํ าหนด site ไดดังนี้

1. คลิกเมนู site เลือกเมนูยอย New Site

2. คลิก Tab Advanced ใน Category เลือก Local Info3. ใน site Name พมิพชือ่ตามตองการ (ตัวอยางใหพิมพ edu)4. ใน Local Root Folder และ Default Images Folder ใหเลือกตํ าแหนงที่อยูของ Site ตามตองการ(ตัวอยางใหกํ าหนด Local Root Folder เปน c:\www\...รหสันักศึกษา..ก ําหนด Default Images Folder เปน c:\www\...รหสันักศึกษา..\images)5. คลิกปุม OK หลงัจากนี้โปรแกรมจะแจงวาไมมีโฟลเดอร images อยูใหกดปุม Enter เมือ่มีเตือนขึ้นมา

1

23

4

5



สรางโฟลเดอร images

6.คลิกที่ Palette Files และแท็บ Site7.คลิกขวาที่

8.จะปรากฏเมนูยอย ใหเลื่อนเมาสไปที่ New Folder

ใหพิมพ images จะไดดังนี้

6

7

8



C. การกํ าหนด Page Properties

1.คลิกที่เมนู Modify2.เลื่อนเมาสไปที่ Page Properties3.จะไดกลองโตตอบดังภาพขางลาง

4. Title หรือชื่อหนา webpage ซึ่งจะปรากฏบน Title Barของ Web Browser ถาไมกํ าหนด Dreamweaver จะใสวาUntitled ใหแทน(ตัวอยางใหพิมพคํ าวา เทคโนโลยีทางการศึกษา)

5. Background Image คือการกํ าหนดรูปที่เปนBackground ใหหนา Webpage(เลอืกตามความเหมาะสม)

6. Background เปนการกํ าหนดสีพื้น(เลอืกตามความเหมาะสม)

7. Text และ Link เปนการกํ าหนดสีตัวอักษร และสีของ Link(เลอืกตามความเหมาะสม)

8.การกํ าหนดใหขอบบนและขอบดานซายไมมชีองวางโดยกํ าหนดใหคาเปน ศูนย

9. Document Encoding เปนการกํ าหนดรหัสภาษาที่ใชแสดงผล ถาเปนการแสดงผลดวยภาษาไทยใหใช window 874 หรือ tis-620

10. กดปุม OK

1

2

4

5

67

8

9

10

รศ.ดร. ถนอมพร เลาหจรัสแสงภาควิชาเทคโนโลยีทางการศึกษา คณะศึกษาศาสตร มหาวิทยาลัยเชียงใหม

11

ตอนที่ 3 ฝกปฏิบัติสรางโฮมเพจสวนตัวกอนจะทําการสรางเว็บไซต เราควรมีความรูเบื้องตนดังนี้

ความละเอียดของภาพ ภาพที่ปรากฏบนจอคอมพิวเตอรนั้น เกิดจากการเรียงตัวของจุดสีที่มีลักษณะเปนรูป

ส่ีเหลี่ยมเล็ก ๆ มาประกอบกันจนกลายเปนภาพใหเราไดมองเห็น ซึ่งจุดเล็ก ๆ เรียกวา พิกเซล(pixel) ซึ่งใชอธิบายถึงจํานวนของจุดในภาพ และเปนตัวกําหนดถึงความชัดเจนของภาพแตละภาพที่เรามองเห็น

ภาพตนฉบับ ภาพแสดงรายละเอียดของพิกเซล (pixel)

สวนความละเอียดของภาพหรือ Image Resolution มักอางถึงจํานวนพิกเซลตอนิ้ว (pixelper inch หรือ ppi แตบางทีนิยมเรียกกันเปน dot per inch หรือ dpi แทน) คือพิกเซลที่เรียงกันวามีกี่จุดในความกวาง 1 นิ้วปกติ จอมอนิเตอรสามารถแสดงภาพกราฟกไดละเอียด 72 ถึง 96 ppiแตนิยมใชคา 72 ppi เปนหลัก

ภาพที่มีความละเอียดสูง ก็จะสงผลใหขนาดของไฟลภาพใหญข้ึนตามไปดวย

คําศัพทที่ควรทําความเขาใจโฮมเพจ (Home Page)โฮมเพจ คือหนาแรกของเว็บไซตซึ่งประกอบไปดวยเมนูและเรื่องราวตาง ๆเว็บเพจ (Web Page)เว็บเพจ คือหนาหนึ่งหนาในเว็บไซตเว็บไซต (Web Site)เว็บไซต คือกลุมของเว็บเพจ (ดังนั้นเว็บไซต จะประกอบดวยหนาโฮมเพจ และเว็บเพจ)


12

ขนาดของหนาโฮมเพจขนาดของหนาโฮมเพจที่นิยมใชกันมี 3 ขนาด ดังนี้640 x 480 pixel800 x 600 pixel1024 x 768 pixelโดยปกติแลวขนาดของหนาโฮมเพจที่ใชกันมากที่สุดในปจจุบันคือ 800 x 600 pixel เนื่อง

จากเปนขนาดที่สามารถใชงานไดสะดวกไมวาจอภาพของคุณจะเปนขนาดใดก็ตาม หนาจอคอมพิวเตอรที่ต้ังคาความละเอียด 800 x 600 pixel การออกแบบควรอยูในพื้นที่

780 x 428 แตหนาจอที่ตองการพิมพออกมา ตองการใชพื้นที่ 595 x 842 pixel ตามขนาดกระดาษ A4 โดยใหขนาดของกราฟกที่ใชควรมีขนาดไมเกิน 535 x 320 pixel เพื่อใหการแสดงผลพอดีกับหนาจอคอมพิวเตอร

หนาโฮมเพจ

หนาเว็บเพจ

http://mail.edu.cmu.ac.th/~thanompo


13

การสรางเว็บไซตสวนตัวโดยใชโปรแกรม Dreamweaver MXโปรแกรม Dreamweaver MX เปนโปรแกรมที่นิยมใชมากในปจจุบัน เนื่องจากสามารถใช

งานไดสะดวกและสามารถนําโปรแกรมอื่นมาประยุกตใชงานไดโดยไมจําเปนตองมีความรูทางดานภาษา HTML จึงทําใหหลายคนเลือกใชโปรแกรมนี้เพื่อใชสรางโฮมเพจกันอยางแพรหลาย

ขั้นตอนที่ 1 เตรียมตัวกอนสรางเว็บไซต1. กําหนดเปาหมายของเว็บไซตที่จะทําการสราง2. เตรียมขอมูลที่ตองการใหพรอมไมวาจะเปนขอความสําหรับใชในการอธิบายตาง ๆ

หรือขอมูลที่เปนรูปภาพ ที่ตองการจะนําเสนอในเว็บไซตสวนตัว3. กําหนดขอบเขตเนื้อหาที่จะนําเสนอ เพื่อที่จะทําใหเราทราบถึงจํานวนเมนู และขอมูล

สําหรับเว็บแตละหนาที่จะทําการสราง สําหรับตัวอยางในการสรางเว็บไซตสวนตัวครั้งนี้ไดทําการกําหนดเนื้อหาดังนี้

• ประวัติสวนตัว (works) ซึ่งจะมีขอมูลเกี่ยวกับหนังสือ ตํารา งานวิจัย• เกี่ยวกับการงาน (career)• ขอมูลสวนตัว (profile) มีขอมูลเกี่ยวของกับ ประวัติสวนตัว ประวัติการศึกษา

และประวัติการทํางาน• การสื่อสาร (Communication) ประกอบดวย สมุดเยี่ยม (guestbook) ที่จะ

ทําการเชื่อมโยงไปยังเว็บไซตที่ใหบริการสมุดเยี่ยมฟรี และกระดานสนทนา(webboard) จะทําการเชื่อมโยงยังเว็บไซตที่ใหบริการกระดานสนทนาฟรี

• แหลงขอมูล (Resources)ขั้นตอนที่ 2 Define a Site

1. เมื่อเปดโปรแกรมแลว ทําการคลิกที่เมนู Site > New Sites เพื่อสรางไซตใหม

1


14

2. คลิกแท็บ Advanced จากนั้นตั้งชื่อไซตที่ตองการในชอง Site Name3. เลือกโฟลเดอรที่เราตองการจัดเก็บเว็บไซต4. คลิกปุม Select เพื่อตกลง5. คลิกปุม OK เพื่อตกลงการทํางาน

6. สังเกตผลลัพธ ที่หนาตางไซตจะแสดงชื่อไซตและโฟลเดอรที่เราสรางไวข้ึนมา

3

4

5

2

6


15

ขั้นตอนที่ 3 สรางหนาเว็บเพจใหมในโฟลเดอร1. คลิกเมาสขวาที่โฟลเดอร จากนั้นเลือกคําสั่ง New File

2. ต้ังชื่อไฟล เสร็จแลวกดปุม <Enter> บนคียบอรด (index.html) จากนั้นทําการดับเบิ้ลคลิกที่ชื่อไฟลเพื่อเปดหนาเว็บข้ึนมาใชงาน

1

2


16

3. สรางโฟลเดอรใหมไดอีกโดยการคลิกเมาสขวาที่โฟลเดอรจากนั้นเลือกคําสั่งNew Folder พรอมต้ังชื่อโฟลเดอรวา pic เพื่อเก็บไฟลภาพที่นํามาใชในเว็บไซต

ขั้นตอนที่ 4 จัดหนาเว็บเพจดวยเลยเอาตและเลเยอร1. คลิกแท็บ Layout จากนั้นคลิกปุม Layout View เพื่อเขาสูโหมดของเลยเอาต

3

1


17

2. คลิกปุม จากนั้นแดรกเมาสสรางขนาดของเลยเอาตที่ตองการ และจะพบวาปรากฏ Layout Table ข้ึน

3. กําหนดความกวาง ความยาว ตลอดจนสีของเลยเอาตไดที่หนาตาง Propertiesจากตัวอยางนี้ กําหนดคา Width = 780 และ Height = 428

4. กําหนดรายละเอียดของ Page Propertiesโดยการคลิกที่ Modify > Page Properties จะปรากฎหนาตาง Page Propertiesและทําการปรับแตงคาตาง ๆ ดังนี้หากตองการให Tittle Bar ปรากฏขอความใดก็สามารถพิมพขอความที่ชองTittle ไดBackground Image เลือกภาพที่จะใชเปนพื้นหลังโดยคลิกที่ปุม BrowseBackground Color เลือกสีพื้นหลังที่ตองการปรับแตงLeft Margin = 0 pixelsMargin Width = 0 pixelsMargin Height = 0 pixelsTop Margin = 0 pixels

2

3


18

5. เมื่อเราแบงสัดสวนเพื่อวางโครงสรางของหนาเว็บเรียบรอยแลว เรายังสามารถสรางสวนที่มีการระบุตําแหนงในการใสภาพหรือขอความไดอีกดวย โดยคลิกปุม จากนั้นแดรกเมาสครอบสวนที่ตองการ

6. เมื่อเราออกแบบโครงสรางเสร็จจะมีลักษณะดังนี้

4

5

สําหรับใสขอความ / ภาพสําหรับภาพเคลื่อนไหว

สําหรับเมนู


19

จากโครงสรางของเว็บเพจที่ไดทําการออกแบบไว จะพบวา หนาเว็บเพจนี้ประกอบดวยภาพเคลื่อนไหว เมนู และขอความรวม

สําหรับตัวอยางครั้งนี้ไดทําภาพเคลื่อนไหวดวยโปรแกรม Swish 2.0 สําหรับเมนู ไดใชโปรแกรม Macromedia Firework MX ในการสราง และนําแตละสวนมารวมกันในโปรแกรมMacromedia Dreamweaver MX

การสรางภาพเคลื่อนไหวดวยโปรแกรม Swish 2.0โปรแกรม Swish 2.0 อยูในตระกูล Macromedia เปนโปรแกรมที่เหมาะสําหรับการสราง

ภาพเคลื่อนไหวใหกับตัวอักษรหรือรูปภาพ เพราะมีขนาดไฟลที่เล็ก และสามารถที่จะ Export ไปใชไดกับหลาย ๆ โปรแกรม เชน Dreamveaver MX, Flash MX, Authorware เปนตน

โปรแกรม Swish 2.0 เปนโปรแกรมที่ใชงานงายไมซับซอนเพราะมี Effect ที่ติดมากับโปรแกรมใหเลือกใชงานไดอยางมากมาย ผูใชงานไมจําเปนตองมีความรูเร่ืองภาพเคลื่อนไหวที่ลึกซึ้งก็สามารถที่จะใชงานไดอยางสะดวกสบาย

1. เปดโปรแกรม Swish 2.0 แลวจะพบหนาจอแรกของโปรแกรม โดยมีสวนประกอบตางๆ ดังนี้

2. ปรับต้ังคาขนาดของพื้นที่การทํางานที่หนาตาง Movie โดยตั้ง Frame Rate ไวที่ 12แลวตั้งคา Width = 194 คา Height =66 สี Bgnd Color = สีขาว (สามารถวัดขนาดไดจากหนาตาง Properties ในสวนของการกําหนดโครงสรางในโปรแกรมDreamweaver สําหรับภาพเคลื่อนไหว)

เมนูบาร ปุมแสดงผลการเคลื่อนไหว

Time Line

หนาตางจัดการกับคุณสมบัติตาง ๆ

พื้นที่ทํางาน

เครื่องมือตาง ๆ


20

3. คลิกเมาส ที่ Insert > Text4. พิมพขอความ “Welcome to Aj. Toh’s homepage” นี้ลงในพื้นที่ดังกลาว แลวปรับ

แตงขนาด รูปแบบตัวอักษร สี ตามในชอบ (ตัวอักษรที่พิมพจะไปปรากฏที่พื้นที่การทํางาน)

5. คลิกเมาสที่ Add Effect เพื่อทําการเลือก Effect ที่จะใช ในที่นี่จะใช Transform6. จะปรากฏหนาตาง Properties ของ Effect Transform และในชอง Name ให คลิก ที่

กรอบสีดําเพื่อเลือกใชชื่อของ Effect Transform ในที่นี้จะใช Transform_flash infast

2

3

4


21

7. คลิกเมาสที่ปุม Play the Effect เพื่อดูผลของ Effect ที่กระทํากับตัวอักษร จากนั้นปดหนาตางไป

8. คลิกเมาสที่ Add Effect เพื่อเลือก Effect ตอไปที่จะใช คือ Fade out9. เมื่อได Effect ตามที่ตองการ ใหปดหนาตางคุณสมบัติของ Effect Fade out

จะปรากฎแถบระยะเวลาของ Effect ข้ึนที่ Time Line โดยกําหนด Duration = 20จากนั้นปดหนาตางนี้ไป

10. เมื่อไดตามที่ตองการแลว ใหทําการ คลิกเมาสที่ปุม Play เพื่อแสดงผลของ Effectทั้งหมด

56

7

8 9


22

11. Save งานที่ไดไวใน Folder ที่ตองการ ไฟลที่ไดจะมีนามสกุลเปน .*swi ซึ่งเราสามารถจะกลับมาแกไขผลงานของเราไดอีก

12. หากเราตองการ Export ไฟลในรูปของ Shockwave ที่สามารถ Import ไปใชไดในโปรแกรม Macromedia Dreamweaver ให คลิกเมาสที่ File > Export > SWF

10


23

การสรางเมนูดวยโปรแกรม Macromedia Firework MX โปรแกรม Macromedia Firework MX เปนโปรแกรมที่ใชในการออกแบบกราฟก

ที่จะใชในเว็บเพจ โดยมีจุดเดนตรงการสรางภาพกราฟกขึ้นมาใชทํางานในเว็บไซตไดสะดวกกวาโปรแกรมอื่น โดยเฉพาะการสรางปุม การหั่นภาพเปนชิ้นเล็กเพื่อความเร็วในการโหลดขอมูล ซึ่งสามารถทําไดไมยากและใชเวลานอย

1. เมื่อทําการเปดโปรแกรม จากนั้น คลิกเมนู File > new เพื่อเร่ิมตนกําหนดพื้นที่ที่จะทําการสรางเมนู (สําหรับพื้นที่ เราสามารถทําการวัดพื้นที่ของขนาดเมนูไดจากที่กําหนดโครงสรางไวในโปรแกรม Macromedia Dreamweaver) ซึ่งในที่นี้ ใชขนาดWidth = 585 Height = 20 Resolution = 72 Canvas Color = White

2. คลิกเมนู Edit > Libraries > Buttons เพื่อเรียกหนาตางแสดงปุมที่โปรแกรมมีอยู

1

2


24

3. ภายในหนาตางแสดงตัวอยางปุม คลิกเลือกปุมที่ตองการใชงาน โดยดูหนาตาของปุมไดจากชองสี่เหลี่ยมแสดงผลดานบนสุด เมื่อเลือกปุมไดแลวใหทําการคลิกที่ปุมImport

4. ปุมที่เลือกจะถูกนํามาวางไวบนกระดานเพื่อทําการตกแตงแกไขตอไป5. เราสามารถทําการเลื่อนปุมดังกลาวไดโดยการ ลากเมาส และหากตองการตกแตง

สามารถจัดการกับขอความ การเชื่อมโยง สี หรือแมแตการกําหนด URL เปาหมายไดโดยการดับเบิ้ลคลิก เพื่อปรับแกไขตามตองการ

3


25

6. ทําเชนนี้จนครบปุมที่ตองการ ซึ่งปุมดังกลาว ตามที่ไดทําการวิเคราะหในขั้นตอนที่ 1จะมีปุมอยูที่หมด 5 ปุม คือ works, career, profile, communication, resources ซึ่งปุมบางปุมก็มีปุมยอย เชน communication แยกไดเปน webboard และ guestbook

7. หากทําปุมครบทั้ง 5 ปุมแลวการเพิ่มเมนูยอยทําไดโดย ทําการเลือกเมนูที่ไดทําการสรางไวแลว จากนั้นคลิกตรงกลางของเมนู แลวเลือก Add pop-up menu

8. จะปรากฎ pop-up menu editor จากนั้นคลิกแท็บ content

7


26

9. ดับเบิ้ลคลิกแตละชองเพื่อกําหนดรายการตัวเลือกตามตองการ เมื่อเรากรอก 1 ชองโปรแกรมจะเพิ่มแถวตอไปใหพิมพตัวเลือกตอไปใหเอง

10. ใสตัวเลือกตางๆ จนครบ จากนั้น เลือกปุม done และหากตองการดูผลที่ได ใหกดปุม F12 เพื่อดูในเว็บบราวเซอร

11. เมื่อไดปุมตามที่ตองการแลว ทําการคลิกที่เมนู File > Export เพื่อบันทึกปุมที่สรางขึ้น12. คลิกเลือกโฟลเดอรที่ตองการบันทึกไฟลเก็บไว พิมพชื่อไฟลที่จะใชในการบันทึกลงใน

ชอง File Name13. คลิกเลือกชนิดของไฟลที่ตองการจากชอง Save As Type ในที่นี้ใหเลือก HTML and

Image เพราะการบันทึกไฟลเพื่อนําไปใชงานบนเว็บไซตจะตองมีทั้งไฟลที่เปนภาษาHTML และไฟลที่เปนรูปภาพ

14. คลิกเลือก Export HTML File จากชอง HTML15. ภายในชอง slices คลิกเลือก Export Slices


27

16. คลิกใหมีเครื่องหมายถูกหนาชอง Put Images in Subfolder เพื่อเก็บภาพที่ถูกSlices ไวในโฟลเดอรที่กําหนด

17. เลือกโฟลเดอรที่ตองการเก็บภาพ ซึ่งภายในหนาตาง Select Folder ใหทําการคลิกเลือกโฟลเดอรที่ตองการเก็บภาพ (เปนโฟลเดอรเดียวกับที่เลือกไวกอนหนานี้)

18. คลิกปุม Select Image เพื่อตกลงเลือกโฟลเดอรดังกลาว

19. ภายในหนาตาง Export ใหคลิกปุม Save เทานี้ก็สามารถไดปุมที่พรอมจะนําเขาใสในเว็บเพจ โดยผานโปรแกรม Macromedia Dreamweaver MX ไดแลว

ขั้นตอนที่ 5 นําภาพเคลื่อนไหว (*.swf) และ ปุมที่ไดสรางไว มาใสในเว็บเพจ1. คลิกบริเวณที่ตองการใสภาพเคลื่อนไหว และปุม2. แท็บ Common ใหคลิกปุม และ เพื่อทําการนําภาพเคลื่อนไหว และปุม

ที่สรางจากโปรแกรม Firework มาใส และทําการ คลิกเลือกโฟลเดอรที่บันทึกไว

18


28

3. จากนั้นเพียงกดปุม OK ก็สามารถนําภาพเคลื่อนไหว และปุมดังกลาวมาใสในเว็บเพจไดโดยสะดวก

ขั้นตอนที่ 6 การใสขอความลงในเว็บเพจ1. คลิกเมาสตําแหนงที่ตองการใสขอความ2. หากตองการขึ้นบรรทัดใหมให กดปุม <Enter> บนคียบอรด3. คลิกเลือกรูปแบบขนาดที่ชอง Format เปน Heading 1 (หรือกําหนดลักษณะตามที่

ตองการ) จากนั้นสามารถพิมพขอความที่ตองการใหปรากฎในเว็บเพจได

4. หากเราตองการเปลี่ยนฟอนต สามารถคลิกเลือกฟอนตที่ตองการไดที่ชอง Font5. หากเราตองการปรับเปลี่ยนขนาด สี ฟอนต และการจัดวางตําแหนงก็สามารถทําได

ดวยวิธีการเดียวกันนี้

4


29

ขั้นตอนที่ 7 ใสภาพลงในเว็บเพจ1. คลิกบริเวณที่ตองการใสภาพ2. แท็บ Common ใหคลิกปุม จะปรากฎหนาตาง Select Image Source คลิกเลือก

โฟลเดอรที่บันทึกภาพเก็บไว3. คลิกเลือกไฟลภาพที่ตองการ เสร็จแลวคลิกปุม OK

4. หนาตางถามการก็อปปไฟลภาพจะปรากฏขึ้น ใหคลิกปุม Yes เพื่อตกลงก็อปปภาพลงในโฟลเดอรของโฮมเพจที่สรางไว

5. คลิกเลือกโฟลเดอร Picture ที่สรางไว จากนั้นคลิกปุม Save

6. สังเกตผลลัพธ เราก็จะสามารถใสภาพลงในหนาเว็บเพจไดตามตองการและภาพยังถูกก็อปปลงในโฟลเดอร Picture เพื่อเก็บไวใชงานไดอีกดวย

2

3

5


30

7. นอกจากนี้แลว เรายังสามารถจัดวางตําแหนงของภาพ ใสกรอบภาพ ยอ – ขยายและแกไขภาพไดอีกดวย โดยคลิกที่รูปภาพ จากนั้นกําหนดคาที่หนาตาง Properties

ขั้นตอนที่ 8 การบันทึกหนาเว็บเพจเมื่อเราสรางหนาเว็บเพจเสร็จเรียบรอยแลว เราตองทําการบันทึกไฟลเก็บไวทุกครั้ง เพื่อไม

ใหภาพประกอบหรือขอความที่สรางไวหายไปโดยหากเราตองการบันทึกซ้ําไฟลเดิมก็ใหคลิกเมนู File > Saveแตถาตองการบันทึกไฟลใหมก็ใหคลิกเมนู File > Save As จากนั้นตั้งชื่อหนาเว็บใหม

การทดลองดูหนาเว็บที่เราสรางไวเมื่อเราออกแบบหนาเว็บเพจเรียบรอยแลว เราควรทดลองแสดงผลหนาเว็บเพจที่หนาตาง

โปรแกรม Internet Explorer เพื่อตรวจสอบวาหนาเว็บของเรามีปญหาหรือไม ซึ่งการเปดหนาเว็บเพจดวยหนาตาง Internet Explorer สามารถทําไดโดย

• คลิกเมนู File > Preview in Browser จากนั้นเลือก iexplore หรือกดปุม <F12>บนคียบอรด

ขั้นตอนที่ 9 การลงทะเบียนสมุดเยี่ยม (Guestbook)สําหรับตัวอยางนี้ เปนการลงทะเบียนเพื่อขอใชบริการฟรี Guestbook ที่

www.212café.com มีวิธีการลงทะเบียนดังนี้1. พิมพชื่อเว็บไซต http://www.212café.com/freeguestbook ลงในชอง Address2. คลิกที่ สมัครขอใชบริการ เพื่อลงทะเบียน

7


31

3. กรอกขอมูลลงในชองวางแตละชอง

4. เมื่อลงทะเบียนเปนที่เรียบรอย ทางเว็บไซตจะปรากฎ Code ใหเราทราบ URL ของสมุดเยี่ยม

5. จาก URL ที่ไดรับ นําไประบุการเชื่อมโยงในปุม guestbook

1

3

4


32

6. เมื่อเราอัพโหลดขอมูลข้ึนบนอินเทอรเน็ต ทดลองคลิกปุม guestbook ก็จะทําการเชื่อมโยงไปยังสมุดเยี่ยมที่ทําการเชื่อมโยงดังกลาว

ขั้นตอนที่ 10 การสรางกระดานสนทนา (Webboard)สําหรับตัวอยางนี้ เปนการลงทะเบียนเพื่อขอใชบริการฟรี Webboard ที่

www.212café.com มีวิธีการลงทะเบียนดังนี้1. พิมพชื่อเว็บไซต http://www.212café.com/freewebboard ลงในชอง Address2. คลิกที่ สมัครขอใชบริการ เพื่อลงทะเบียน จากนั้นจะปรากฎฟอรมใหทําการกรอก

ซึ่งการลงทะเบียนขอใชบริการฟรี webboard นี้ จะตางจาก การลงทะเบียนขอใชบริการฟรี guestbook ตรงที่ ผูลงทะเบียนจะตองสง SMS เพื่อแจงความประสงคแลวทางผูใหบริการจะสงรหัสที่จะกรอกแบบฟอรม

1

2


33

3. เมื่อลงทะเบียนเปนที่เรียบรอย ทางเว็บไซตจะปรากฎ Code ใหเราทราบ URLของกระดานสนทนา

4. จาก URL ดังกลาว นําไประบุการเชื่อมโยงในปุม webboard5. เมื่อเราอัพโหลดขอมูลข้ึนบนอินเทอรเน็ต ทดลองคลิกปุม webboard ก็จะทําการ

เชื่อมโยงไปยังกระดานสนทนาที่ทําการเชื่อมโยงดังกลาว

ขั้นตอนที่ 11 การใช Named Anchor1. คลิกที่ขอความที่ตองการสรางเปนจุด Named Anchor2. คลิกปุมรูปสมอ ที่ แท็บ Common3. ต้ังชื่อใหกับ Named Anchor โดยหามเวนวรรค เสร็จแลวคลิกปุม OK

3


34

4. จะสังเกตวามีรูปสมอ (Named Anchor) ปรากฏขึ้น5. คลิกที่ขอความที่จะกําหนดใหไปที่ Named Anchor (ขอความ “กลับดานบน”)

6. พิมพเครื่องหมาย # จากนั้นพิมพชื่อของ Named Anchor ในชอง link ใน Properties7. กดปุม <F12> เพื่อทดลองดูหนาเว็บในหนาตาง Explorer

ขั้นตอนที่ 12 การสรางการเชื่อมโยง (Link)1. แดรกเมาสใหเกิดแถบสีดําที่ขอความที่ตองการสรางลิงค2. ที่ชอง Link คลิกปุม เพื่อทําการลิงค3. คลิกเลือกไฟลปลายทางที่ตองการ เสร็จแลวคลิกปุม OK4. สังเกตผลลัพธ ขอความที่ทําการลิงคไวจะเปลี่ยนสีและมีเสนใตเกิดขึ้น

3

2

5

6


35

5. กําหนดรูปแบบการแสดงหนาเว็บที่ชอง Target โดยเลือก _parent เพื่อตองการใหแสดงในหนาตาง Internet Explorer เดิม

6. กดปุม <F12> เพื่อทดลองดูหนาเว็บในหนาตาง Internet Explorer7. ทดลองคลิกขอความที่สรางลิงคไว ก็จะปรากฏหนาที่เราไดกําหนดลิงคปลายทางไว

ตามตองการ

การลิงคไปยังเว็บไซตอ่ืน1. เลือกที่ภาพหรือขอความที่ตองการสรางลิงค2. พิมพชื่อเว็บไซตปลายทางลงในชอง Link3. กําหนดลักษณะการแสดงหนาเว็บไซตที่ชอง Target โดยเลือก _blank เพื่อกําหนดให

มีการเปดหนาตาง Internet Explorer ข้ึนมาใหมเพื่อแสดงเว็บไซตที่ลิงคไป

1

2

3

2

3

5


36

4. กดปุม <F12> เพื่อทดลอง ดวยวิธีนี้เราก็จะสามารถสรางการลิงคไปยังเว็บไซตอ่ืนไดตามตองการ

การลิงคดวยอีเมล1. สําหรับการสรางลิงคนั้นก็ไมมีอะไรแตกตางกัน เพียงแตที่ชอง Link ใหพิมพคําวา

mailto:แลวตามดวยชื่ออีเมลของเรา และเมื่อผูเยี่ยมชมคลิกที่จุดเชื่อมโยงก็จะปรากฏหนาตางโปรแกรมสงเมล

2. นอกจากนี้เรายังสามารถสรางการลิงคอีเมลไดโดยคลิกเลือกตําแหนงที่ตองการ จากนั้นคลิกปุม ที่แท็บ Common หรือเลือกคําสั่ง Insert >Email Link เสร็จแลวกรอกขอความและอีเมลแอดเดรสลงไป

ขั้นตอนที่ 13 การอัพโหลดเว็บไซตขึ้นสูอินเทอรเน็ตเราสามารถอัพโหลดโฮมเพจไดหลายวิธีดวยกัน เชน การอัพโหลดผานโปรแกรมสําเร็จรูป

ของทางเว็บไซต การอัพโหลดดวยโปรแกรม Dreamweaver MX การอัพโหลดดวยโปรแกรมชวยอัพโหลด เชน CuteFTP หรือ WS_FTP เปนตน และการอัพโหลดดวยบราวเซอร (InternetExplorer)

การอัพโหลดดวยบราวเซอร (Internet Explore)เนื่องจากทางมหาวิทยาลัยเชียงใหมไดใหพื้นที่สําหรับการสรางเว็บไวพอสมควร ดังนั้น

ตัวอยางการอัพโหลดดวยบราวเซอร (Internet Explore) คร้ังนี้ จึงขอยกตัวอยางการอัพโหลดข้ึน Server ของทางมหาวิทยาลัยเชียงใหม

1. คลิกปุม Start > All Programs > Internet Explorer เพื่อเรียกหนาตางบราวเซอร(Internet Explorer) มาใชงาน

2. พิมพ ftp://mail.cm.edu ลงในชอง Address

2


37

3. หนาตาง FTP Folder จะปรากฏขึ้น พิมพ Username และ PasswordUsername = gXXXXXXX (อักษรgตามดวยรหัสนักศึกษา)Password = XXXXXX (รหัสเช็คเมลมหาวิทยาลัย)

4. ดับเบิ้ลคลิก Folder public_html เพื่อเขาสู Folder public_html

5. ทําการก็อปป ไฟลที่ตองการอัพโหลด มาวางใน Folder public_html

3

4


38

6. เมื่ออัพโหลดไฟลเสร็จส้ิน ใหคลิกรูปกากบาทมุมบนดานขวา เพื่อทําการปดหนาตางบราวเซอร

ในการอัพโหลดไฟลที่สมบูรณนั้น เราจะตองอัพโหลดไฟลทุกไฟลที่ใชประกอบในหนาเว็บไซต และไฟลแรกที่เปดขึ้นมาจะเปนไฟลชื่อ index.html เสมอ ดังนั้น หากตองการใหหนาแรกมีลักษณะที่ตองการ จําเปนตองตั้งชื่อไฟลเปน indext.htm

7. พิมพชื่อเว็บไซต http://mail.cm.edu/~gXXXXXXX ลงในชอง Address เพื่อเขาไปดูหนาโฮมเพจที่เราไดทําการอัพโหลดไว

6

Macromedia Dreamweaver MX 3 - Chiang Mai...

Documents

Transcript of Macromedia Dreamweaver MX 3 - Chiang Mai...