30
การสร้างเว็บเพจโดย โปรแกรม Macromedia Dreamweaver 8 4.1 ขั&นตอนการเข้าสู ่โปรแกรม วิธีการเข้าสู ่โปรแกรมมีขันตอนดังนี 1.คลิก ที Taskbar ด้านล่าง 2. เลือกที Program > Macromedia > Macromedia Dreamweaver 8 โปรแกรมจะทํางาน และเปิด หน้าต่างโปรแกรมขึนมา

เอกสารประกอบการสอน Dreamweaver8 ม.6

  • Upload
    -

  • View
    2.569

  • Download
    6

Embed Size (px)

Citation preview

Page 1: เอกสารประกอบการสอน  Dreamweaver8 ม.6

การสรางเวบเพจโดย โปรแกรม Macromedia Dreamweaver 8

4.1 ข &นตอนการเขาสโปรแกรม

วธการเขาสโปรแกรมมข �นตอนดงน �

1.คลก ท� Taskbar ดานลาง

2. เลอกท� Program > Macromedia > Macromedia Dreamweaver 8 โปรแกรมจะทางาน และเปดหนาตางโปรแกรมข �นมา

Page 2: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.2 หนาตางเปดงาน

1.เปดงานท�เรากาลงทาคางอย โปรแกรมจะแสดงงานท�เราเปดใชบอยๆ ไวดานบน 2.เลอกประเภทงานท�ตองการสรางใหม ไดแก HTML , Coldfusion, PHP ASP ,JavaScrip ฯลฯ 3.เลอกงานตามฟอรมท�โปรแกรมจดไวใหโดยมรปแบบใหเลอกหลายประเภท

หนาจอการทาง

Page 3: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.3 หนาจอการทางานหลกของโปรแกรม

หลงจากท�เลอกโปรแกรมเสรจแลว เราจะพบกบหนาตางการทางาน ซ�งประกอบดวย

1.Title Bar คอ สวนท�แสดงช�อโปรแกรม และช�อไฟลท�กาลงทางานอย

2.Menu Bar คอ สวนท�รวมคาส�งการทางานท �งหมด แลวแบงยอยตามประเภทและในคาส�งหลกมกจะมเมนลดใหกดดวย

3.Object Palette คอ แถบแสดงป มตางๆของโปรแกรม

เราสามารถเลอกประเภทคาส�งไดดวยการคลกท� Common จะปรากฏเมนข �นมา 4.Toolbar คอ แถบเคร�องมอสาหรบการใชงานดาน HTML และอนเตอรเนท ประกอบดวย

Page 4: เอกสารประกอบการสอน  Dreamweaver8 ม.6

Show Code View แสดงการทางานในรปแบบ HTML

Show Code and Design Views แสดงการทางานแบบ HTML ควบคกบแสดงพ �นท�ออกแบบ

Show Design View แสดงการทางานแบบแสดงพ �นท�ออกแบบ

Document Title ต �งช�อของเวบเพจ

Check Errors ตรวจสอบขอผดพลาดจาก Browser

File Management จดการกบไฟลๆ ท�อยในเวบเพจ

Preview / Debug in Browser ทดลอง ดเวบเพจทาง Browser หรอกด F12

View Options มมมองในการทางานเพ�มเตม 5.หนาตางออกแบบเวบเพจ ใชพมพขอความและจดเรยงรปภาพ 6.Tag Selector ใชควบคมการทางานในรปแบบ HTML 7.Window Size กาหนดพ �นท�ใชงานตามตองการ 8.Estimate Download Time แสดงเวลา ท�ใชในการดาวนโหลด 9.Properties ใชกาหนดรปแบบตางๆ ของตวอกษร และรปภาพ รวมถงการสรางลงค

หนาตาง Proties สามารถจะเปดปดไดตามตองการดวยการคลกท� เพ�อขยายหนาตางการทางานใหมากข �น หรอคลกท� Window > properties กไดเชนกน

10. Dockable Window เปดหนาตางท�รวบรวมเคร�องมออานวยความสะดวกเอาไว โดยคลกท� เพ�อเปด-ปดได เชนเดยวกบ Properties

Page 5: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.4 วธการสราง Site

การสราง Site กเพ8อท8เวลาสรางเวบไซต ขอมลจะไดถกจดอยางเปนระเบยบ ไมกระจดกระจาย งายตอการตรวจสอบ วธการสรางกงายๆ ตามรปเลย

Page 6: เอกสารประกอบการสอน  Dreamweaver8 ม.6
Page 7: เอกสารประกอบการสอน  Dreamweaver8 ม.6
Page 8: เอกสารประกอบการสอน  Dreamweaver8 ม.6
Page 9: เอกสารประกอบการสอน  Dreamweaver8 ม.6
Page 10: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.5 การสรางขอความบน Dreamweaver 8

การสรางขอความบน Dreamweaver 8 ม ดงน � พมพขอความลงในสวนของหนาจอการทางานเลย เปนวธท�งายท�สด เราแคเตรยมเน �อหาใหพรอม

จากน �นกพมพไดเลย

+--ขอควรจา--+ ในเร�องของการพมพขอความ กเลอกเอาตามความถนดเลย แตควรตรวจเร�องของ Font ใหดเพราะบางFont อานไทยไมได โดยสามารถต �งคาไดโดยการกด Ctrl + U แลวกจะไดหนาตาง Preferences ดงรป

Page 11: เอกสารประกอบการสอน  Dreamweaver8 ม.6
Page 12: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.6 วธการเปล8ยนรปแบบตวอกษร

1.ลากเมาสขอความท�ตองการเปล�ยน 2.คลกท� Font เพ�อเลอก Font ท�ตองการ ควรเปน MS Sans Serif

Page 13: เอกสารประกอบการสอน  Dreamweaver8 ม.6

การเปล8ยนขนาดตวอกษร 1.ลากเมาสขอความท�ตองการเปล�ยนแปลง 2.คลกท� Size เพ�อปรบขนาดตามตองการ

3.ตวอกษรจะเปล�ยนขนาดไป

Page 14: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.7 วธการเปล8ยนสตวอกษร 1.ลากเมาสขอความท8ตองการเปล8ยนแปลง

2.คลกทปม Text color เพ8อเลอกส

3.ตวอกษรจะเปล8ยนสแลว

Page 15: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.8 การจดเรยงขอความในเพจ

การจดกจะคลายๆกบพวก Microsoft word ท�เรารกนดน�นแหละ

หากตองการใชคาส�งจดเรยงขอความท�บรรทดใด กใหคลกเคอรเซอร ไปท�บรรทดน �น แลวคลกคาส�งไดเลย

Page 16: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.9 วธเปล8ยนสพ &นหลงและรปภาพท8พ &นหลง

การเพ8มสสนใหกบเวบในสวนพ &นหลง มวธการดงน &

Page 17: เอกสารประกอบการสอน  Dreamweaver8 ม.6

1.คลกท8ปม 2.เลอกสท8ชอง ของ Background Color หรอ Background Images

3.คลกท8ปม 4.สพ &นหลงเปล8ยนตามท8ถกเลอกไวแลว

หมายเหต ถาตองการใสรปใหเลอกท� Background Images

Page 18: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.10 วธนารปภาพมาใสในเวบ

1.คลกวางเคอรเวอรตรงบรเวณท�เราตองการจะวาง 2.คลกท�ป มคาส�ง Images

3. เลอกไฟลภาพท�ตองการ

Page 19: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.คลกป ม OK

5.มขอความเตอนให save กอน ใหคลก OK

Page 20: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.11 วธการสรางตาราง การนาเสนอขอมลบางอยางจาเปนตองใชตาราง เพ�อท�จะใหขอมลท�นาเสนอไปน �นเขาใจงาย เราม

วธการสรางงายๆดงน �

1.วางเคอรเซอรไวตรงบรเวรท�ตองการ 2.คลกป ม ท�แถบเคร�องมอ Insert 3.คลกป ม

4.จะมหนาตางคณสมบตของตารางข &นมา ใหกาหนดคาตางๆของตารางตามตองการ

Page 21: เอกสารประกอบการสอน  Dreamweaver8 ม.6

5.คลกท8ปม 6.จะไดตารางท8พรอมสาหรบใชงานแลว

Page 22: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.12 การสรางลงคจากขอความ ลงค (Link) หรอจดเช8อมโยงเวบเพจ มหลายรปแบบดงน &

การทาลงคแบบขอความ การทาลงคไปยง E-mail

การทาลงคไปยง Named Anchor การทาลงคแบบ Rollover Image การทาลงคใน Dreamweaver 8 สวนสาคญจะอยตรงท�แถบ Properties ซ�งจะมอย 2 สวนดวยกน ไดแก

1.Link คอ แถบสาหรบเลอกไฟลท�ตองการจะลงคไปถง 2.Target คอ แถบสาหรบเลอกรปแบบของปลายทาง ซ�งไดแก _blank คอ การแสดงเวบเพจปลายทางในหนาตางใหม _parent คอ การแสดงเวบเพจท�หนาตางเด�ยว แตอยในเฟรมหลก _self คอ การแสดงเวบเพจในเฟรมเดยวกบตนทาง _top คอ การแสดงผลเวบเพจ โดยจะไมมเฟรม วธสรางลงคจากขอความ 1.พมพขอความลงไป 2.ลากเมาสทบขอความท�ตองการ

3.คลกท� ในแถบ properties เพ�อเลอกไฟลท�จะลงค 4.เม�อเลอกไดแลว ใหคลกป ม 5.ขอความกลายเปนลงคเรยบรอยแลว

Page 23: เอกสารประกอบการสอน  Dreamweaver8 ม.6
Page 24: เอกสารประกอบการสอน  Dreamweaver8 ม.6

6. ทดสอบผลทาง Browser โดยการกด F12

Page 25: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.13 การสรางลงคจากรปภาพ

การสรางลงคดวยรปภาพกาลงเปนท8นยมในปจจบนน & ซ8ง Dreamweaver 8 กสามารถทาไดงายๆดงน & 1.คลกท8รปภาพ

2.เลอกไฟลท8จะลงค โดยคลกท8 ในแถบ Properties

3.คลกท8ปม 4.ทดสอบผลทาง Browser โดยการกด F12

Page 26: เอกสารประกอบการสอน  Dreamweaver8 ม.6
Page 27: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.14 การทาลงคไปยงเวบไซตอ8น

การทาลงคไปยงเวบไซตอ8น สามารถทาไดท &งแบบขอความและรปภาพ วธการทา กมดงน & 1.ถาเปนขอความใหลากเมาสขอความส&นๆ สวนถาเปนรปใหคลกท8รป 2.พมพ http:// ช8อเวบไซต ลงในชอง Link และเลอกรปแบบปลายทาง 3.คลกพ &นท8วาง จากน&นกดผลทาง Browser

Page 28: เอกสารประกอบการสอน  Dreamweaver8 ม.6

4.15 การทาปม Flash

วธการนาป มกด Flash มาใชงาน มข �นตอนดงน � 1.วางเคอเซอรบนพ �นท�ทางาน

2.ไปท� Menu Bar เลอก Insert > Media > Flash button

3.ในข �นน �ถาเรายงไมไดบนทกเวบเพจ โปรแกรมจะเตอนใหเราบนทกกอน ถงจะสามารถใชป ม Flash ได ใหเราทาการบนทก 4.จะปรากฏหนาตาง Insert Flash Button ข �นมา ใหเราเลอกรปแบบของป ม

5.จะไดป ม Flash เรยบรอยแลว ใหทดสอบแสดงผลทาง Browser โดยการกดป ม F12

Page 29: เอกสารประกอบการสอน  Dreamweaver8 ม.6
Page 30: เอกสารประกอบการสอน  Dreamweaver8 ม.6