จะเริ่มใช้ Dreamweaver สร้างหน้าเว็บ โดยการสร้างเว็บไซต์ก่อน ซึ่งสำคัญมากเพราะการสร้างเว็บไซต์เป็นการตั้งโฟลเดอร์ที่ใช้เก็บทุกส่วนประกอบบนหน้าเว็บเอาไว้

1. 2.4 เพิ่มเนื้อหาในหน้าเว็บ
ต่อไปเราจะเพิ่มเนื้อหาในหน้าเว็บเปล่าที่สร้าง ดังตัวอย่างในรูป
ขั้นตอนที่ 1 กาหนดชื่อหัวเรื่องบนหน้าเว็บ
เราสามารถใส่ชื่อหัวเรื่องบนหน้าเว็บหรือที่นิยมเรียกว่าไตเติ้ล (title) ได้ที่ช่อง Title บน
แถบเครื่องมือ ดังนี้

2. ขั้นตอนที่ 2 แทรกภาพลงในหน้าเว็บ
การแทรกภาพลงในหน้าเว็บ มีวิธีการดังนี้
1. เลือกตาแหน่งบนหน้าเว็บที่ต้องการจะวางภาพแล้วเลือกเครื่องมือ image ในแท็บ
Common
2. เลือกภาพที่ต้องการ (ในตัวอย่างเลือกภาพ Succes sTravelHead.jpg) และคลิกปุ่ม OK
เพื่อตกลงเลือกภาพ

3. NOTE.
ถ้าเรานาภาพจากนอกโฟลเดอร์เว็บไซต์มาแทรกลงในหน้าเว็บของเรา จะมีข้อความแจ้ง
ให้ทราบว่าควรสาเนาภาพนั้นเก็บไว้ในโฟลเดอร์เว็บไซต์ เพราะการอ้างตาแหน่งภาพนอก
โฟลเดอร์เว็บไซต์ เราไม่สามารถควบคุมตาแหน่งภาพได้ตลอด ถ้าตาแหน่งเปลี่ยนภาพก็จะไม่
แสดง ดังนั้นให้เราคลิกปุ่ม Yes เพื่อสาเนาภาพเก็บไว้ในโฟลเดอร์เว็บไซต์ และภาพที่แสดงใน
หน้าเว็บก็คือตาแหน่งของภาพสาเนาในโฟลเดอร์เว็บไซต์
NOTE
เมื่อเราแทรกภาพเรียบร้อยจะมีหน้าต่าง กาหนดค่าเพิ่มเติมให้กับภาพซึ่งมีค่าทีกาหนด
ได้ดังนี้
Alternate text: กาหนดข้อความแทนภาพ จะแสดงแทนภาพในกรณีที่ภาพไม่สามารถ
แสดงได้ (โหลดไม่ครบ) บอกให้ทราบว่าภาพที่ไม่แสดงคือภาพอะไร นอกจากนี้ยังใช้สาหรับคน
พิการทางสายตาให้รู้ว่าภาพหน้าเว็บเป็นภาพอะไร โดยใช้โปรแกรมจาพวก Screen reader ที่จะจับ
ข้อความในหน้าเว็บ และข้อความที่ใช้แทนภาพ สังเคราะห์ข้อความที่จับได้ออกมาเป็นเสียงอ่านให้
คนพิการฟัง (เฉพาะข้อความภาษาอังกฤษ)
Long description: กาหนดตาแหน่งหน้าเว็บ โดยเมื่อคลิกเมาส์ที่ภาพจะกระโดดไปหน้า
เว็บที่กาหนดไว้ในช่องนี้

4. ขั้นตอนที่ 3 ใส่ข้อความบนหน้าเว็บ
การใส่ข้อความบนหน้าเว็บคล้ายกับการพิมพ์เอกสารในโปรแกรม Word โดยให้คลิกบน
พื้นที่ทางานแล้วพิมพ์ข้อความลงบนหน้าเว็บได้เลย
 คลิกเมาส์เพื่อพิมพ์ข้อความใหม่ หรือ แก้ไขข้อความในหน้าเว็บของเราได้
 คลิกเมาส์หน้าข้อความที่ต้องการขึ้นย่อหน้าใหม่ แล้วกดปุ่ม <Enter>
 แสดงผลลัพธ์การขึ้นย่อหน้าใหม่
การกดปุ่ม <Enter> จะเป็นการขึ้นย่อหน้าใหม่ และข้อความในแต่ละย่อหน้าจะถูกจัดให้
เต็มหน้าต่าง

5. ในกรณีที่เราต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดิม ให้กด <Shift>+<Enter> แทน (หรือ
คลิกแท็บ Text และคลิกปุ่ม Characters->Line Break ก็ได้)
2.5 บันทึกไฟล์เว็บเพจที่สร้าง
หลังจากที่เราสร้างเว็บเพจได้ตามต้องการแล้ว ให้ทาการบันทึกไฟล์เว็บเพจ โดยเลือก
คาสั่ง File->Save(หรือกคีย์ลัด <Ctrl>+S) เนื่องจากเรายังไม่เคยบันทึกไฟล์นี้มาก่อน โปรแกรม
Dreamweaver จะให้เราระบุชื่อไฟล์ใหม่ด้วย
จากนั้นเมื่อใดที่เราแก้ไขหน้าเว็บนี้ และต้องการบันทึกการเปลี่ยนแปลง ก็ให้เลือกคาสั่ง
File->Save เพื่อบันทึกหน้าเว็บแทนที่ไฟล์เดิมที่เคยบันทึกไว้ได้ แต่ถ้าเราต้องการบันทึกไฟล์นี้ไว้
ที่ตาแหน่งใหม่หรือบันทึกเป็นไฟล์ใหม่ ให้เลือกคาสั่ง File->Save As… และกาหนดตาแหน่งเก็บ
และชื่อไฟล์ใหม่ได้

6. 1. เลือกคาสั่ง File->Save As… เพื่อบันทึกไฟล์
2. เลือกตาแหน่งเก็บไฟล์
3. ใส่ชื่อไฟล์ และคลิกปุ่ม Save เพื่อสั่งบันทึกไฟล์
คาสั่งอื่นๆ ในการบันทึกไฟล์เว็บเพจ
นอกจากคาสั่ง File->Save ยังมีคาสั่งบันทึกแบบอื่นๆ ดังนี้
 คาสั่ง File->Save All บันทึกไฟล์ทุกไฟล์ที่เปิดอยู่ (ใช้ในกรณีที่เราเปิดหลายไฟล์พร้อม
กัน)
 คาสั่ง File->Save All Related Files บันทึกไฟล์ที่เกี่ยวข้องทั้งหมด
NOTE
หลังจากได้บันทึกไฟล์หน้าเว็บแล้ว หากเราทาการแก้ไขเพิ่มเติม แต่ยังไม่ได้บันทึกไฟล์
อีก โปรแกรม Dreamweaver จะแสดงเครื่องหมาย * หลังแท็บแสดงชื่อไฟล์ให้เราเห็น เพื่อเตือน
ให้เราทราบ
ในการตั้งชื่อไฟล์หรือโฟลเดอร์ ไม่แนะนาให้มีช่องว่าง หรือมีการใช้อักขระพิเศษ หรือ ;/.
เพราะเมื่อนาไฟล์ไปไว้บนเว็บเซิร์ฟเวอร์ อักขระเหล่านี้อาจถูกเปลี่ยน ทาให้เกิดปัญหา เช่น ใน
การเชื่อมโยงไฟล์ระหว่างหน้าเว็บอาจหาไฟล์ที่เชื่อมโยงไม่พบ เพราะชื่อไฟล์เปลี่ยนไปแล้ว
นอกจากนั้นไม่แนะนาให้ขึ้นต้นชื่อไฟล์ด้วยตัวเลข
หลังจากที่เราได้บันทึกไฟล์หน้าเว็บแล้ว หากเราแก้ไขบางอย่างผิดพลาดและต้องการ
กลับไปใช้หน้าเว็บเดิมก่อนทาการแก้ไข ให้เลือกคาสั่ง File->Revert โปรแกรม Dreamweaver จะ

7. แสดงข้อความถามว่าเราต้องการทิ้งการแก้ไขต่างๆ ที่ได้ทาไว้ และกลับไปโหลดไฟล์เดิมก่อนแก้
ขึ้นมาใหม่หรือไม่ ให้คลิก Yes เพื่อกลับไปใช้ไฟล์เดิม
2.6 เปิ ดดูหน้าเว็บที่สร้างบนบราวเซอร์
เมื่อเราบันทึกหน้าเว็บที่เราสร้างเสร็จเรียบร้อยแล้ว ให้เปิดดูหน้าเว็บได้บนบราวเซอร์โดย
เลือกคาสั่ง File->Preview in Browser-> ชื่อบราวเซอร์ที่ติดตั้งไว้ในเครื่อง (หรือกดคีย์ลัด
<F12>)
1. เลือกคาสั่ง File->Preview in Browser-> chrome เพื่อทดสอบดูหน้าเว็บบนบราวเซอร์
Internet Explorer
2. แสดงหน้าเว็บที่เราสร้างบนบราวเซอร์

8. 2.7 ย้อนกลับเพื่อแก้ไขข้อผิดพลาดด้วยพาเนล History
เมื่อใดที่เราทางานผิดพลาด เราสามารถย้อนกลับการทางานนี้ได้โดยกดคีย์ <Ctrl>+Z ซึ่ง
เป็นการย้อนกลับไป 1 ขั้นตอน แต่ถ้าเราทาผิดพลาดไปหลายขั้นตอน จะต้องเลือกคาสั่ง
Window->History หรือกดคีย์ <Shift>+<F10>เพื่อเปิดพาเนล History ซึ่งจะบันทึกการ
ทางานทุกขั้นตอนที่ผ่านมาไว้ โดยขั้นตอนล่าสุดจะเรียงลาดับอยู่ท้ายสุดของรายการ
การย้อนกลับการทางานหลายๆ ขั้นตอนพาเนล History
ในพาเนล History ให้เราเลื่อนแถบ ไปที่ขั้นตอนการทางานที่เราต้องการย้อนกลับ ซึ่งใน
กรณีที่เราต้องการย้อนกลับหลายขั้นตอน ก็ให้เลื่อนแถบนี้ทีละหลายขั้นตอนได้
การทาซ้าขั้นตอนการทางาน
เราสามารถสั่งให้ทาซ้าขั้นตอนการทางานที่บันทึกไว้ในพาเนล History ได้ โดยเลือก
ขั้นตอนการทางานที่ต้องการทาซ้า แล้วคลิกปุ่ม Replay
1. เลือกขั้นตอนการทางานที่ต้องการทาซ้า
2. คลิกเมาส์ปุ่ม Replay