การสร้างเว็บเพจด้วยDream 8

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

2. 4.2 หน้าต่างเปิดงาน
1.เปิดงานทีเรากําลังทําค้างอยู่ โปรแกรมจะแสดงงานทีเราเปิดใช้บ่อยๆ ไว้ด้านบน
2.เลือกประเภทงานทีต้องการสร้างใหม่ ได้แก่ HTML , Coldfusion, PHP ASP ,JavaScrip ฯลฯ
3.เลือกงานตามฟอร์มทีโปรแกรมจัดไว้ให้โดยมีรูปแบบให้เลือกหลายประเภท
หน้าจอการทําง

3. 4.3 หน้าจอการทํางานหลักของโปรแกรม
หลังจากทีเลือกโปรแกรมเสร็จแล้ว เราจะพบกับหน้าต่างการทํางาน ซึงประกอบด้วย
1.Title Bar คือ ส่วนทีแสดงชือโปรแกรม และชือไฟล์ทีกําลังทํางานอยู่
2.Menu Bar คือ ส่วนทีรวมคําสังการทํางานทังหมด แล้วแบ่งย่อยตามประเภทและในคําสังหลักมักจะมีเมนู
ลัดให้กดด้วย
3.Object Palette คือ แถบแสดงปุ่มต่างๆของโปรแกรม
เราสามารถเลือกประเภทคําสังได้ด้วยการคลิกที Common จะปรากฏเมนูขึนมา
4.Toolbar คือ แถบเครืองมือสําหรับการใช้งานด้าน HTML และอินเตอร์เน็ท ประกอบด้วย

4. 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

5. 4.4 วิธีการสร้าง Site
การสร้าง Site ก็เพื8อที8เวลาสร้างเว็บไซต์ ข้อมูลจะได้ถูกจัดอย่างเป็นระเบียบ ไม่กระจัด
กระจาย ง่ายต่อการตรวจสอบ วิธีการสร้างก็ง่ายๆ ตามรูปเลย

10. 4.5 การสร้างข้อความบน Dreamweaver 8
การสร้างข้อความบน Dreamweaver 8 มี ดังนี
พิมพ์ข้อความลงในส่วนของหน้าจอการทํางานเลย เป็นวิธีทีง่ายทีสุด เราแค่เตรียมเนือหาให้พร้อม
จากนันก็พิมพ์ได้เลย
+--ข้อควรจํา--+
ในเรืองของการพิมพ์ข้อความ ก็เลือกเอาตามความถนัดเลย แต่ควรตรวจเรืองของ Font ให้ดีเพราะบางFont
อ่านไทยไม่ได้ โดยสามารถตังค่าได้โดยการกด Ctrl + U แล้วก็จะได้หน้าต่าง Preferences ดังรูป

12. 4.6 วิธีการเปลี8ยนรูปแบบตัวอักษร
1.ลากเมาส์ข้อความทีต้องการเปลียน
2.คลิกที Font เพือเลือก Font ทีต้องการ ควรเป็น MS Sans Serif

13. การเปลี8ยนขนาดตัวอักษร
1.ลากเมาส์ข้อความทีต้องการเปลียนแปลง
2.คลิกที Size เพือปรับขนาดตามต้องการ
3.ตัวอักษรจะเปลียนขนาดไป

14. 4.7 วิธีการเปลี8ยนสีตัวอักษร
1.ลากเมาส์ข้อความที8ต้องการเปลี8ยนแปลง
2.คลิกทีปุ่ม Text color เพื8อเลือกสี
3.ตัวอักษรจะเปลี8ยนสีแล้ว

15. 4.8 การจัดเรียงข้อความในเพจ
การจัดก็จะคล้ายๆกับพวก Microsoft word ทีเรารู้กันดีนันแหละ
หากต้องการใช้คําสังจัดเรียงข้อความทีบรรทัดใด ก็ให้คลิกเคอร์เซอร์ ไปทีบรรทัดนัน แล้วคลิกคําสังได้เลย

16. 4.9 วิธีเปลี8ยนสีพื&นหลังและรูปภาพที8พื&นหลัง
การเพิ8มสีสันให้กับเว็บในส่วนพื&นหลัง มีวิธีการดังนี&

17. 1.คลิกที8ปุ่ม
2.เลือกสีที8ช่อง ของ Background Color หรือ Background Images
3.คลิกที8ปุ่ม
4.สีพื&นหลังเปลี8ยนตามที8ถูกเลือกไว้แล้ว
หมายเหตุ ถ้าต้องการใส่รูปให้เลือกที Background Images

18. 4.10 วิธีนํารูปภาพมาใส่ในเว็บ
1.คลิกวางเคอร์เวอร์ตรงบริเวณทีเราต้องการจะวาง
2.คลิกทีปุ่มคําสัง Images
3. เลือกไฟล์ภาพทีต้องการ

19. 4.คลิกปุ่ม OK
5.มีข้อความเตือนให้ save ก่อน ให้คลิก OK

20. 4.11 วิธีการสร้างตาราง
การนําเสนอข้อมูลบางอย่างจําเป็นต้องใช้ตาราง เพือทีจะให้ข้อมูลทีนําเสนอไปนันเข้าใจง่าย เรามี
วิธีการสร้างง่ายๆดังนี
1.วางเคอร์เซอร์ไว้ตรงบริเวรทีต้องการ 2.คลิกปุ่ม ทีแถบเครืองมือ Insert 3.คลิกปุ่ม
4.จะมีหน้าต่างคุณสมบัติของตารางขึ&นมา ให้กําหนดค่าต่างๆของตารางตามต้องการ

21. 5.คลิกที8ปุ่ม
6.จะได้ตารางที8พร้อมสําหรับใช้งานแล้ว

22. 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.ข้อความกลายเป็นลิงค์เรียบร้อยแล้ว

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

25. 4.13 การสร้างลิงค์จากรูปภาพ
การสร้างลิงค์ด้วยรูปภาพกําลังเป็นที8นิยมในปัจจุบันนี& ซึ8ง Dreamweaver 8 ก็สามารถทําได้ง่ายๆ
ดังนี&
1.คลิกที8รูปภาพ
2.เลือกไฟล์ที8จะลิงค์ โดยคลิกที8 ในแถบ Properties
3.คลิกที8ปุ่ม
4.ทดสอบผลทาง Browser โดยการกด F12

27. 4.14 การทําลิงค์ไปยังเว็บไซต์อื8น
การทําลิงค์ไปยังเว็บไซต์อื8น สามารถทําได้ทั&งแบบข้อความและรูปภาพ วิธีการทํา ก็มีดังนี&
1.ถ้าเป็นข้อความให้ลากเมาส์ข้อความสั&นๆ ส่วนถ้าเป็นรูปให้คลิกที8รูป
2.พิมพ์ http:// ชื8อเว็บไซต์ ลงในช่อง Link และเลือกรูปแบบปลายทาง
3.คลิกพื&นที8ว่าง จากนั&นก็ดูผลทาง Browser

28. 4.15 การทําปุ่ม Flash
วิธีการนําปุ่มกด Flash มาใช้งาน มีขันตอนดังนี
1.วางเคอเซอร์บนพืนทีทํางาน
2.ไปที Menu Bar เลือก Insert > Media > Flash button
3.ในขันนีถ้าเรายังไม่ได้บันทึกเว็บเพจ โปรแกรมจะเตือนให้เราบันทึกก่อน ถึงจะสามารถใช้ปุ่ม Flash ได้ ให้
เราทําการบันทึก
4.จะปรากฏหน้าต่าง Insert Flash Button ขึนมา ให้เราเลือกรูปแบบของปุ่ม
5.จะได้ปุ่ม Flash เรียบร้อยแล้ว ให้ทดสอบแสดงผลทาง Browser โดยการกดปุ่ม F12