1. MacromediaMacromedia
Dreamweaver 8Dreamweaver 8

2. โปรแกรม Macromedia Dreamweaver โปรแกรมสำำหรับกำรสร้ำงเว็บเพจ
บริหำรจัดกำรเว็บไซต์ รวมไปถึงกำรพัฒนำเว็บแอปพลิเคชัน เนื่องจำกตัว
Dreamweaver มีควำมสำมำรถที่โดดเด่น ดังนี้ สำมำรถเขียนโปรแกรมสำำหรับเว็บได้
ทุกรูปแบบ เช่น ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมนูคำำสั่ง
และเครื่องมือต่ำงๆ เรียกใช้งำนได้ง่ำยและสะดวกมีกำรปรับปรุงกลไกภำยในให้มี
ประสิทธิภำพสูงขึ้น สำมำรถสร้ำงแอปพลิเคชันง่ำยๆ โดยไม่จำำเป็นต้องเขียนโปรแกรม
สร้ำงเว็บเพจภำษำไทยได้ทันทีโดยไม่ต้องติดต้องโปรแกรมเสริมเพรำะ Dreamweaver
รองรับตัวอักษรแบบ Unicode

3. กำรเข้ำสู่โปรแกรมกำรเข้ำสู่โปรแกรม
Macromedia DreamweaverMacromedia Dreamweaver
88
มีขั้นตอน คือ คลิกเลือก Start -> Program -> Macromedia -> Macromedia
Dreamweaver 8 ในกำรเข้ำสู่ระบบในครั้งแรกโปรแกรมจะถำมรูปแบบกำรใช้งำน 2
รูปแบบ คือ
1. Designer หมำยถึง กำรสร้ำงและออกแบบเว็บเพจโดยทั่วไป ส่วนมำก
นิยมเลือกรูปแบบนี้
2. Code หมำยถึง วิธีกำรสร้ำงเว็บเพจที่เน้นกำรเขียนชุดคำำสั่งเอง

4. ส่วนประกอบของหน้ำต่ำงส่วนประกอบของหน้ำต่ำง
หน้ำจอ Start Pageทุกครั้งเมื่อเปิดโปรแกรม Macromedia
Dreamweaver 8 จะปรำกฏหน้ำจอเริ่มต้น (Start Page) สำำหรับเปิดเอกสำรเว็บเพจเดิม
หรือสร้ำงเอกสำรเว็บเพจใหม่ โดยทั่วไปแบ่งออกเป็น 3 กลุ่ม ดังต่อไปนี้

5. เมื่อเรำเลือกประเภทกำรทำำงำนแล้ว (ในกรณีนี้ผู้สอนคลิกเลือก HTML จำก
ส่วนของ Create New) จะปรำกฏหน้ำต่ำงกำรทำำงำนของโปรแกรม โดยมีรำยละเอียดดัง
ต่อไปนี้

6. 1. แถบชื่อเรื่อง (Titlebar) เป็นส่วนที่ใช้แสดงชื่อโปรแกรม Dreamweaver 8
และชื่อไฟล์เอกสำรเว็บเพจที่กำำลังทำำงำนอยู่
2. แถบรำยกำรคำำสั่ง (Menu Bar) เป็นส่วนที่รวบรวมรำยกำรคำำสั่งกำร
ทำำงำนเอำไว้ สำมำรถเปิดรำยกำรคำำสั่งต่ำงๆ ขึ้นมำใช้งำนโดยคลิกที่ชื่อรำยกำรคำำสั่งแล้ว
เลื่อนเมำส์ไปยังตำำแหน่งที่ต้องกำรใช้งำน หำกรำยกำรคำำสั่งใดมีรำยกำรคำำสั่งย่อยจะแสดง
ลูกศรอยู่มุมขวำของรำยกำร หำกเลื่อนเมำส์ไปยังบริเวณดังกล่ำว จะแสดงรำยกำรคำำสั่งย่อย
เพื่อใช้งำนต่อไป
3. แถบแทรก (Insert Bar) เป็นแถบที่ประกอบด้วยปุ่มคำำสั่งที่ใช้ในกำรแทรก
ออบเจ็กต์หรือวัตถุต่ำงๆ ลงในเอกสำรเว็บเพจ โดยแบ่งเป็นหมวดหมู่ มีรำยละเอียดดังต่อไปนี้
Common เป็นชุดคำำสั่งสำำหรับแทรกออปเจ็กต์ที่เรียกใช้งำนบ่อยๆ ในกำรสร้ำง
เว็บเพจ เช่น รูปภำพ กรำฟิก ตำรำง ไฟล์มีเดีย เป็นต้น
Layout สำำหรับเลือกมุมมองในกำรสร้ำงเว็บเพจ เช่น มุมมองปกติ มุมมองแบบ
ขยำย เพื่อให้เห็นออปเจ็กต์ต่ำงๆ ได้อย่ำงชัดเจน
Forms ใช้สำำหรับแทรกออปเจ็กต์ที่ใช้สร้ำงแบบฟอร์มรับข้อมูลจำกผู้ชม เช่น
ช่องรับข้อควำม และฟิลด์ (Field) ชนิดต่ำงๆ
Text สำำหรับจัดรูปแบบข้อควำมในเว็บเพจ เช่น หัวเรื่อง ตัวหนำ ตัวเอียง จัด
หัวข้อ จัดย่อหน้ำ และแทรกสัญลักษณ์พิเศษต่ำงๆ
Application สำำหรับแทรกคำำสั่งและกำรดึงข้อมูลจำกฐำนข้อมูลมำแสดงบนเว็บ
Flash element สำำหรับนำำไฟล์ Flash เข้ำมำใช้งำน
Favorite สำำหรับจัดเก็บออบเจ็กต์ที่ชอบเพื่อควำมสะดวกในกำรใช้งำน

7. 4. Toolbar เป็นแถบเครื่องมือที่เก็บปุ่มคำำสั่งที่ต้องใช้งำนบ่อยๆ
5. Document Area เป็นส่วนที่ใช้สำำหรับสร้ำงหน้ำเว็บเพจ โดยกำรใส่
เนื้อหำและจัดองค์ประกอบต่ำงๆ นำำมำวำงใน Document Area และสำมำรถเลือกพื้นที่
กำรทำำงำนได้หลำยมุมมอง เช่น Show Code View,Show Code and Design View
ดังที่ได้กล่ำวไว้แล้วข้ำงต้น
6. Status Bar คือ แถบแสดงสถำนะที่อยู่บริเวณด้ำนล่ำงของพื้นที่สร้ำงงำน
(Document Area) ซึ่งประกอบด้วย 2 ส่วน คือ ทำงด้ำนซ้ำยเรียกว่ำ Tag Selector ใช้
สำำหรับแสดงคำำสั่ง HTML ของส่วนประกอบในเว็บเพจที่เลือกอยู่ และทำงด้ำนขวำเป็น
ส่วนที่บอกขนำดและเวลำที่ใช้ในกำรดำวน์โหลดเว็บเพจ
7. Properties Inspector เป็นหน้ำต่ำงแสดงคุณสมบัติของออปเจ็กต์ที่เรำ
กำำลังเลือกในเว็บเพจ และสำมำรถกำำหนดหรือแก้ไขคุณสมบัติของส่วนประกอบต่ำงๆ ใน
หน้ำเว็บเพจได้ เช่น ข้อควำม สี ขนำด ตำรำง ลิงก์ เป็นต้น โดยรำยละเอียดภำยใน
หน้ำต่ำง Properties Inspector จะไม่เหมือนกันขึ้นอยู่กับว่ำขณะนั้นเรำกำำลังเลือก
ทำำงำนกับออปเจ็กต์ใดอยู่
8. Panels เป็นกรอบเล็กๆ บริเวณด้ำนขวำ ประกอบด้วยเครื่องมือสำำหรับใช้
ทำำงำนต่ำงๆ ซึ่งแต่ละส่วนของ Panels จะมีหน้ำที่แตกต่ำงกันไป เช่น กำรจัดเก็บ Code,
CSS, Behavior อีกทั้งไฟล์และโฟลเดอร์ภำยในเว็บไซต์

8. กำรเข้ำสู่โปรแกรมกำรเข้ำสู่โปรแกรม
1. คลิกปุ่ม start > All Programe > Macromedia > Macromedia
Dreamweaver MX 2004 เพื่อเข้ำสู่โปรแกรม
ส่วนประกอบส่วนประกอบ
1. แถบ Menu Barหน้ำต่ำง File สำำหรับดูข้อมูลต่ำง ๆ ในหน้ำเพจ
เช่นเครื่องมือต่ำง ๆ และกำรใช้ FTP
2. แถบเครื่องมือ Insert Bar มีหลำยเครื่องมือด้วยกัน จะแสดงให้
เห็นเมื่อคลิ๊กที่กลุ่มเครื่องมือ แต่ละกลุ่มในที่นี้จะอธิบำยบำงเครื่องมือ และเรำจะลอง
ใช้งำนกันในบทหลังๆ
3. ส่วน Panel ต่ำง ๆ เป็นส่วนของหน้ำต่ำงซึ่งเรำต้องใช้งำนเมื่อเรำ
ต้องกำรเพิ่มเติมควำมสำมำรถบำงอย่ำงลงไปในเว็บเพจของเรำเช่นเพิ่ม CSS เข้ำ
ไปเพื่อใช้ในกำรจัดแต่งส่วนต่ำง ๆ ของ webpage กำรทำำ Layer เป็นต้น

9. ส่วนส่วน DesignDesign หน้าต่าง Design นี้จะเป็นหน้าต่างที่รวบรวมเครื่อง
มือ อาทิเช่น หน้าต่าง CSS Styles หน้าต่าง HTML Styles หน้าต่าง
Bahaviors หรือจะพูดให้เข้าใจ ก็คือ หน้าต่าง Design นี้จะรวบรวม เครื่อง
มือที่เกี่ยวกับการ ตกแต่งเว็บด้วย CSS Style และ HTML Styles รวมถึง
การใส่ลูกเล่นพิเศษต่าง ๆ มารวมกันไว้นั่นเอง
ส่วน Code หน้าต่าง Code นี้จะรวบรวมเครื่องไม้เครื่องมือต่างๆ
เหมือนกับหน้าต่าง Design ซึ่งหน้าต่าง Code นี้ได้รวบรวมหน้าต่าง เครื่อง
มือทีจำาเป็นไว้ดังนี้ Tag Inspector , Snippets , Reference
5. ส่วนต่าง ๆ properties ส่วนของ Properties ส่วนนี้ก็เป็นอีก
ส่วนที่เราใช้งานกันบ่อยมากเป็นเครื่องมือที่ไว้ใช้กำาหนดค่าของเครื่องมือใน
tool File หน้าต่าง Property นี้จะขึ้นอยู่กับเครื่องมือที่เราเลือกใช้ ว่ามีค่า
อะไรให้ set บ้าง เช่น ใช้ในการกำาหนดชื่อ Font ภายใน webpage ใช้ใน
การกำาหนด link สีตาราง ฟอร์ม อีก มากมายเป็นต้น

10. คุณสมบัติทั่วไปของโปรแกรมคุณสมบัติทั่วไปของโปรแกรม
Macromedia Dreamweaver เป็นโปรแกรมสำาหรับออกแบบและ
พัฒนาเว็บไซท์ ด้วยการสร้างเว็บเพจและเว็บแอพพลิเคชั่น ที่กำาลังเป็นที่
นิยมนำามาสร้างเว็บไซท์ในปัจจุบัน เนื่องจากใช้งานง่าย โดยเราสามารถที่
จะจัดวางข้อความ รูปภาพ ตารางข้อมูล แบบฟอร์ม ฯลฯ ลงไปใน
เว็บเพจได้อย่างง่ายดายโดยไม่จำาเป็นต้องใช้โค้ด HTML ซึ่งมีขั้นตอนยุ่ง
ยากและซับซ้อน ทำาให้มีโอกาสผิดพลาดได้ง่าย ใน Dreamweaver มี
เครื่องมือมากมายให้ใช้ในการพัฒนาเว็บได้อย่างรวดเร็ว สวยงาม และมี
ประสิทธิภาพสูง
Dreamweaver มีเครื่องมือในการจัดการและบริหารเว็บไซท์ ที่ช่วย
ให้เราจัดการกับไซท์และไฟล์ที่เกี่ยวข้องกับไซท์ของเรา เช่น สร้าง ลบ
ย้าย และเปลี่ยนชื่อไฟล์เป็นต้น นอกจากนี้ยังมีเครื่องมือในการอัพโหลด
ไฟล์ของเราขึ้นเว็บเซิร์ฟเวอร์เพื่อเผยแพร่ข้อมูลสู่อินเตอร์เน็ตได้โดยตรง
ในเว็บเพจนอกจากจะมีโค้ดภาษา HTML แล้ว ในปัจจุบันเว็บเพจจะมี
การโต้ตอบกับผู้ใช้ได้ ซึ่งจะต้องอาศัยเทคโนโลยีอื่นๆมาเสริม เพื่อให้การ
นำาเสนข้อมูลมีประสิทธิภาพ เทคโนโลยีเหล่านี้ได้แก่ CSS (Cascading
Style Sheet) ภาษา JavaScript , ภาษา XML และมัลติมีเดีย Flash
เป็นต้น ซึ่ง Dreamweaver ได้สนับสนุนเทคโนโลยีต่างๆเหล่านี้อย่าง
สมบูรณ์แบบ

11. วินโดว์วินโดว์ DocumentDocument
วินโดว์ Document คือส่วนที่จะใส่เนื้อหาและจัดองค์ประกอบของ
เว็บเพจลงไป การใช้งานวินโดว์นี้จะคล้ายกับการใช้งานเวิร์ดโปรเซสเซอร์
ทั่วไป คือการพิมพ์ข้อความ ใส่รูปภาพ สร้างตารางข้อมูล โดยเนื้อหาต่างๆ
ที่แทรกลงไปจะปรากฏให้เห็นคล้ายกับที่ปรากฏในบราวเวอร์ ยกเว้นข้อมูล
บางอย่าง เช่น ภาพเคลื่อนไหว หรือ Movie Flash (แต่สำาหรับ Flash
เราสามารถคลิกที่ปุ่ม Play เล่นภาพเคลื่อนไหวได้
วินโดว์ Document มีมุมมองในการทำางาน 3 มุมมอง คือ
1. มุมมองออกแบบ (Design View)
2. มุมมองโค้ด HTML(Code View)
3. มุมมองโค้ดและออกแบบ(Code & Design View)
ในการทำางานกับมุมมองต่างๆ ทำาให้การสร้างเว็บเพจสะดวกรวดเร็ว
เพราะสามารถที่จะทำางานได้หลายวิธีสลับกันไปตามความเหมาะสม

12. การติดตั้งระบบภาษาไทยการติดตั้งระบบภาษาไทย
Dreamweaver MX เป็นโปรแกรมที่ไม่ได้สนับสนุนภาษาไทย
โดยตรง ฉะนั้นเวลาติดตั้งโปรแกรมแล้วเริ่มใช้งานเลย จะเห็นว่าเวลาพิมพ์
ภาษาไทยลงไปในเว็บเพจจะอ่านไม่ออก (แต่ในบราวเซอร์จะอ่านออก) แต่เรา
ไม่ต้องตกใจเพราะสามารถที่จะติดตั้งตัวช่วยเหลือภาษาไทย
ได้(Dreamweaver MX Thai Addon) ทำาให้การใช้ภาษาไทยไม่มีปัญหาอีก
ต่อไป แต่ต้องไปดาวน์โหลดไฟล์จากอินเตอร์เน็ตที่เว็บไซท์ Thaiware.com
หรือเว็บไซท์ marianasgraphix.com หรือจะเข้าไปที่ google.com จากนั้น
Search หาคำาว่า Dreamweaver MX รับรองว่ามีเว็บไซท์ให้ดาวน์โหลด
มากมาย หลังจากดาวน์โหลดมาแล้วก็ติดตั้งเพิ่มลงไปที่โฟลเดอร์ดีฟอลต์ของ
โปรแกรมคือ C:Program FilesMacromediaDreamweaver
MXConfiguration (โปรแกรมเลือกให้อยู่แล้ว) หลังจากนั้นก็สามารถใช้
ภาษาไทยได้แล้ว
Dreamweaver MX Thai Addon มีคุณสมบัติดังนี้
1. เพิ่มการเข้ารหัส (Encoding) แบบ windows-874 และ tis-620
สำาหรับเว็บเพจภาษาไทย
2. ทำาให้สามารถแสดงผลและพิมพ์ภาษาไทยในพาเนลต่างๆ
3. แก้ไขการแสดงผลภาษาไทยตามเมนูให้ใหญ่ขึ้น

13. การวางแผนออกแบบเว็บไซท์การวางแผนออกแบบเว็บไซท์
1. กำาหนดเป้าหมายของเว็บไซท์Dreamweaver MX
2. กำาหนดกลุ่มเป้าหมายของผู้เข้าชม
3. จัดโครงสร้างเว็บไซท์
4. ออกแบบโครงร่างหลักของเว็บไซท์
5. กำาหนด Dreamweaver Site
Dreamweaver Site มี 3 ส่วนด้วยกันคือ
Local Folder เป็นไดเร็กทอรี่ที่เก็บเว็บไซท์ที่เราสร้างขึ้นภายใน
เครื่องคอมพิวเตอร์ของเราเอง ซึ่ง Dreamweaver จะเรียกว่า Local
Site
Remote Folder เป็นไดเร็กทอรี่ที่ใช้เก็บและเผยแพร่เว็บไซท์ที่
อยู่บนเว็บเซิร์ฟเวอร์ ซึ่ง Dreamweaver เรียกว่า Remote Site
Folder For Dynamic Page เป็นไดเร็กทอรี่ที่ใช้ในการจัดเก็บ
และประมวลผล Dynamic Page หรือเว็บเพจที่มีการใช้ Server
Side Script ที่สร้างขึ้นภายในเว็บไซท์ของเรา
การสร้างและแก้ไขเว็บไซท์การสร้างและแก้ไขเว็บไซท์

14. ขั้นตอนการสร้างเว็บไซท์ใหม่
1. เลือกคำาสั่ง Site  New Site จากเมนู
2. จะปรากฏไดอะล็อกบ็อกซ์ Site Definition for
Untitled Site 1 ให้คลิกที่แท็บ Basic
3. ใน Edit Files หน้าแรกพิมพ์ชื่อเว็บไซท์ลงไปที่ช่อง
What would you like to name your site ? และคลิกปุ่ม
Next
4. ใน Edit Files, Part 2 เลือก Server Technology
แล้วเลือก No , I do not want to use server technology และ
คลิกที่ Next
5. ใน Edit Files , Part 3 ให้เลือกไดเร็กทอรี่ที่จะทำาเป็น
เว็บไซท์ โดยคลิกที่ไอคอน เพื่อเปิดเข้าไปในโฟลเดอร์ที่ต้องการ
แล้วคลิก Select จากนั้นคลิกปุ่ม Next
6. หลังจากนั้นจะปรากฏหน้าจอของการเลือกการ Sharing
Files ให้เลือกเป็น None และคลิกปุ่ม Next
7. จะปรากฏหน้าจอ Summary ซึ่งแสดงรายละเอียดของ
เว็บไซท์ขึ้นมา ให้คลิกที่ปุ่ม Done เพื่อสิ้นสุดการสร้าง Site

15. การสร้างเว็บเพจใหม่
ทุกครั้งที่เปิด Dreamweaver ขึ้นมา จะปรากฏเว็บเพจว่างขึ้นมาให้ 1
หน้า เพื่อให้เราสามารถลงมือสร้างได้ทันที แต่ถ้าต้องการสร้างเว็บเพจเพิ่ม เรา
สามารถทำาได้โดย
1. คลิกเลือกคำาสั่ง File  New หรือ กด Ctrl+N
2. จะปรากฏไดอะล็อกบ็อกซ์ New Document
3. เลือก ประเภทของเว็บเพจใหม่ที่จะสร้าง จาก Category
4. เลือกประเภทของเว็บเพจ(โดยส่วนใหญ่คือ HTML)
5. คลิกปุ่ม Create

16. การใส่รูปลงในเว็บเพจการใส่รูปลงในเว็บเพจ
ภาพกราฟิกที่จะนำามาแสดงในเว็บไซท์มีกันอยู่มากมายหลายแบบ แต่ที่นิยมนำา
มาใช้งานกันมากที่สุดได้แก่แบบ GIF และ JPG

17. การจัดตำาแหน่งภาพเทียบกับการจัดตำาแหน่งภาพเทียบกับ
ข้อความข้อความ

19. การสร้างไฮเปอร์ลิงค์การสร้างไฮเปอร์ลิงค์
ไฮเปอร์ลิงค์ หรือเรียกสั้นๆว่า ลิงค์ (Link) คือการสร้างจุดเชื่อม
โยงเอกสารจากจุดหนึ่งไปยังอีกจุดหนึ่ง หรือจากเอกสารหนึ่งไปยังเอกสาร
หนึ่ง โดยใช้ ข้อความ รูปภาพ หรือเมนู เป็นตัวนำาทางไปยังเอกสารดัง
กล่าว ซึ่งเนื้อหาข้อมูลอาจเกี่ยวข้องกัน หรือไม่เกี่ยวข้องกันก็ได้เพราะ
เอกสารเว็บเพจมีเป็นจำานวนมากและไม่สามารถนำามาวางหน้าเดียวกันได้
ทั้งหมด จึงนิยมสร้างลิงค์ขึ้นมาเพื่อให้ผู้ชมสามารถคลิกกระโดดไปยัง
ตำาแหน่งต่างๆภายในเว็บไซท์ได้ง่ายขึ้น
ในอินเตอร์เน็ตแต่ละไฟล์หรือแต่ละเว็บเพจที่สร้างขึ้นจะมีที่อยู่ที่เรา
สามารถอ้างถึงที่ไม่ซำ้ากัน ซึ่งเรียกว่า Uniform Resource Locator
(URL) รูปแบบของ URL ประกอบด้วย 3 ส่วนคือ
โปรโตคอล(Protocol) โดเมน(Domain) และที่อยู่ไฟล์ในโดเมน (Path)

20. การลิงค์ภายในเว็บเพจเดียวกันการลิงค์ภายในเว็บเพจเดียวกัน
จะใช้ในกรณีที่เอกสารเว็บเพจนั้นมีเนื้อหายาว และเนื้อหาอาจ
จะแบ่งเป็นหัวข้อย่อยๆ ทำาให้ผู้ชมเลื่อนไปยังตำาแหน่งที่ต้องการได้ช้า
กังนั้นอาจจะมีการทำาสารบัญหรือดัชนีไว้ที่ตอนบนของเว็บเพจ และสร้าง
ลิงค์ไปยังส่วนต่างๆภายในเอกสาร การสร้างลิงค์ภายในเว็บเพจเดียวกัน
ประกอบด้วย 2 ขั้นตอนคือ
1. สร้าง Name Anchor หรือกำาหนดชื่อให้กับจุดที่จะเชื่อม
โยงไป
2. สร้างลิงค์ไปยัง Name Anchor ที่สร้างไว้

21. การสร้างลิงค์ภายในเว็บไซท์การสร้างลิงค์ภายในเว็บไซท์
เป็นการสร้างลิงค์ภายในเว็บไซท์เดียวกัน จากเว็บเพจหนึ่งไปยังอีกเว็บเพจ
หนึ่ง(ไฟล์ HTML หรือไปยังไฟล์อื่นๆ
1. เลือกข้อความหรือรูปภาพที่ต้องการสร้างเป็นลิงค์
2. คลิกที่ปุ่ม Browse for File
3. คลิกเลือกชื่อไฟล์ที่จะลิงค์ไปหา
4. คลิกปุ่ม OK
5. ถ้าต้องการกำาหนดเฟรมหรือวินโดว์ปลายทางที่ต้องการให้เว็บเพจนี้
แสดงผลให้เลือกจากช่อง Target
_blank ให้เปิดเว็บเพจปลายทางในวินโดว์ใหม่
_self ให้แสดงเว็บเพจในเฟรมเดิมจากที่เลือกลิงค์
_parent ให้แสดงเว็บเพจในเฟรมที่ครอบเฟรมปัจจุบันอยู่
_top ให้แสดงเว็บเพจในวินโดว์เดิม โดยยกเลิกเฟรมที่ครอบอยู่ทั้งหมด
6. ทดสอบการทำางานของลิงค์ภายในเว็บไซท์

22. การลิงค์ไปยังเว็บไซท์อื่นการลิงค์ไปยังเว็บไซท์อื่น
เป็นการลิงค์ไปยังเว็บไซท์ เว็บเพจ รูปภาพ โปรแกรม หรือ
แหล่งข้อมูลอื่นที่อยู่ภายนอกเว็บไซท์ของเรา
1. เลือกข้อความหรือรูปภาพที่จะทำาเป็นลิงค์
2. ใส่ URL ปลายทางในช่อง Link บน Properties
Inspector (URL ปลายทางต้องระบุแบบ เต็ม เช่น http://
www.microsoft.com
3. เลือกวินโดว์หรือเฟรมปลายทางที่จะแสดงเว็บเพจใน
ช่อง Target(ถ้าต้องการ)

23. การลิงค์ไปยังอีเมล์
การสร้างลิงค์ไปยังอีเมล์ คือการระบุชื่ออีเมล์แอดเดรสเป็นปลายทาง
ของลิงค์ ซึ่งเมื่อผู้ชมคลิกที่ลิงค์จะมีการเปิดโปรแกรมอีเมล์ขึ้นมา (ตามค่า
ดีฟอลต์ที่กำาหนดไว้ในเครื่องของผู้ชม เช่น Outlook Express) พร้อมกับ
นำาที่อยู่อีเมล์ในลิงค์ไปใส่ในช่อง To โดยอัตโนมัติทำาให้ผู้ชมสามารถกรอก
ข้อมูลและส่งอีเมล์ได้เลย
1. เลือกข้อความหรือรูปภาพที่จะทำาเป็นลิงค์
2. ใส่แอดเดรสปลายทางในช่อง Link บน Properties
Inspector โดยแอดเดรสปลายทางต้องระบุในรูปแบบ
mailto:emailaddress เช่น mailto:tanaysu@thaimail.com

24. การสร้างการสร้าง Image MapImage Map
Image Map คือ การนำารูปภาพมาแบ่งเป็นส่วนย่อยๆ เพื่อกำา
หนดเป็นไฮเปอร์ลิงค์ที่แตกต่างกัน โดยสามารถสร้างได้หลายลิงค์ในหนึ่ง
รูป
ขั้นตอนการสร้าง Image Map
1. คลิกเลือกรูปภาพที่จะนำามาสร้างเป็น Image Map
2. เลือกเครื่องมือ Image Map บน Properties Inspector
ทางด้านล่างซ้าย
3. คลิกลากบนรูปภาพเพื่อวาดรูปทรงกำาหนดขอบเขตของ Image
Map
4. คลิกในช่อง Link เพื่อกำาหนด URL หรือชื่อไฟล์ที่จะลิงค์ไป
หา
5. กำาหนดเฟรมหรือวินโดว์ปลายทางที่จะแสดงผลในช่อง Target
(ถ้าต้องการ)
6. ใส่ข้อความอธิบายลิงค์ ซึ่งจะแสดงเมื่อผู้ชมเลื่อนเมาส์ไปชี้ที่
ลิงค์ในช่อง Alt (ถ้าต้องการ)
7. ทำาซำ้าขั้นตอนที่ 2-6 เพื่อสร้าง Hotspot ส่วนอื่นๆในรูปภาพ
8. ทดสอบการทำางานของ Image map โดยกด F12 แล้วเลื่อน
เมาส์ไปคลิกบนขอบเขตที่กำาหนดไว้

25. การสร้างลิงค์แบบการสร้างลิงค์แบบ RolloverRollover
การสร้าง Rollover Image นั้น ก่อนอื่นต้องเตรียมรูปภาพที่มี
ขนาดเท่ากันไว้ 2 รูป เพื่อเวลาเปลี่ยนภาพจะได้ดูนุ่มนวล ภาพไม่กระตุก
มาก มีขั้นตอนดังนี้
1. เลือกคำาสั่ง Insert } Interactive Image } Rollover
Image จะปรากฏไดอะล็อกบ็อกซ์ Insert Rollover Image ขึ้นมา
2. พิมพ์ชื่อของ Rollover ลงในช่อง Image Name
3. คลิกปุ่ม Browse เลือก Original Image (รูปที่แสดงครั้ง
แรก)
4. คลิกปุ่ม Browse เลือก Rollover Image (รูปที่แสดงเมื่อผู้
ชมวางเมาส์เหนือรูป)
5. พิมพ์ Alternate Text (ข้อความอธิบายลิงค์)
6. พิมพ์ชื่อเว็บเพจหรือเว็บไซท์ที่จะลิงค์ไปหาในช่อง When
Click Go To URL และคลิก OK

26. การออกแบบเว็บเพจด้วยตารางการออกแบบเว็บเพจด้วยตาราง
ตารางเป็นเครื่องมือที่เราใช้ในการแสดงผลข้อมูล ช่วยในการจัด
วางเลย์เอาท์ของเว็บเพจได้อย่างสวยงาม และยังช่วยในการจัดวาง
ตำาแหน่งการแสดงผลของข้อความหรือรูปภาพให้ตรงตามตำาแหน่งที่
ต้องการ
ตารางประกอบไปด้วยคอลัมน์(Column) ในแนวตั้ง และ
แถว(Row) ในแนวนอน มีจุดตัดที่เกิดขึ้นจากแถวและคอลัมน์เรียกว่า เซล
(Cell)

27. ขั้นตอนการสร้างตารางขั้นตอนการสร้างตาราง

28. การจัดรูปแบบตารางอัตโนมัติการจัดรูปแบบตารางอัตโนมัติ
โปรแกรม Dreamwever ได้เตรียมคำาสั่งในการจัดการรูปแบบ
อัตโนมัติ ที่ออกแบบไว้อย่างสวยงาม ไม่ว่าข้อความ สีพื้น เส้นขอบ
โดยสร้างเป็ยชุดสำาเร็จให้เลือกใช้งานได้เลย
การเรียกใช้รูปแบบการจัดตารางสำาเร็จรูป
1. คลิกในส่วนใดส่วนนึ่งของตาราง
2. เลือกคำาสั่งจากเมนู Command 4 Format Table
3. คลิกเลือกชื่อรูปแบบและดูรูปตัวอย่างทางด้านขวา
4. รายละเอียดที่กำาหนดในรูปแบบที่เลือก เราสามารถ
เปลี่ยนแปลงได้ตามต้องการ
5. คลิก Apply เพื่อดูผลลัพธ์ หากยังไม่พอใจสามารถเลือกแบบ
ใหม่ได้
6. คลิก OK เมื่อเลือกรูปแบบได้แล้ว

29. การจัดหน้าเว็บเพจด้วยเลเยอร์การจัดหน้าเว็บเพจด้วยเลเยอร์
ในการจัดหน้าเว็บเพจที่ซับซ้อน นอกจากตารางแล้ว
Dreamweaver ยังมีเครื่องมืออีกชนิดหนึ่งที่ช่วยในการจัดวางเลย์เอาท์
คือ เลเยอร์ (Layer)
เลเยอร์เปรียบเสมือนแผ่นใสที่สามารถวางออปเจ็กต่างๆลงไป
และนำามาเรียงซ้อนกันหลายๆชั้น โดยออปเจ็คชั้นบนจะบังออปเจ็คชั้นที่อยู่
ถัดไป เลเยอร์แต่ละชิ้นสามารถจัดวางไว้ที่ส่วนใดของหน้าเว็บเพจก็ได้
และสามารถที่จะใส่รูปภาพ ข้อความ ตาราง หรือออปเจ็คต่างๆลงไปได้
เช่นเดียวกับในเว็บเพจ

30. วิธีการแสดงเนื้อหาที่ใหญ่กว่าวิธีการแสดงเนื้อหาที่ใหญ่กว่า
เลเยอร์เลเยอร์
ถ้ามีการกำาหนดขนาดเลเยอร์เล็กกว่าเนื้อหาภายใน ก็สามารถเลือกได้
ว่าจะแสดงเนื้อหาภายในอย่างไร โดยเลือกออปชั่น Overflow จาก Properties
Inspector ดังนี้
Visible ให้แสดงเลเยอร์ออกจนสามารถแสดงเนื้อหาได้ครบ
Hidden ซ่อนเนื้อหาที่เกินขนาดเลเยอร์ไว้
Scroll แสดง Scroll bar ที่ขอบขวาของเลเยอร์ให้เลื่อนดูเนื้อหาที่
เกินได้
Auto แสดง Scroll bar เฉพาะกรณีเนื้อหาเกินขนาดเลเยอร์เท่านั้น
ช่องว่างหมายถึงไม่ระบุ ค่าปกติ คือ visible