1. เอกสารประกอบการสอน
การสรางเว็บเพจดวยโปรแกรมสําร็จรูป
Macromedia Dreamweaver 8
นายแมนสรวง แซซม
ิ้
ครู คศ.1
โรงเรียนแมจนวิทยาคม
ั
สํานักงานเขตพื้นที่การศึกษาเชียงราย เขต 3
อําเภอแมจัน จังหวัดเชียงราย

2. คํานํา
เอกสารประกอบการสอน เรื่อง การสรางเว็บเพจดวยโปรแกรมสําเร็จรูป เลมนี้ จัดทําขึ้นเพื่อใชในการ
ประกอบการเรียนการสอน ในสาระการเรียนรูเทคโนโลยีสารสนเทศ กลุมสาระการงานอาชีพและเทคโนโลยี ซึ่ง
เนื้อภายในเอกสารนี้ มีทั้งหมด 7 บท ประกอบดวย บทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8
บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต บทที่ 3 การใสขอความบนเว็บเพจ บทที่ 4 การใส
รูปภาพบนเว็บเพจ บทที่ 5 การจัดหนาเว็บเพจดวยตาราง บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ
บทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ ซึ่งสามารถนําไปปฏิบัติและใชงานจริงได และสามารถนําไปสูการเปนมือ
อาชีพในการสรางเว็บเพจไดอีกดวย หวังวาเอกสารประกอบการสอนเลมนี้คงเปนประโยชนตอนักเรียน และ
ผูสนใจทั่วไปไดเปนอยางดี
นายแมนสรวง แซซ้มิ
มิถุนายน 2549
แมนสรวง แซซิ้ม มิ.ย.49 2

3. สารบัญ
หนา
บทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8 1
บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต 14
บทที่ 3 การใสขอความบนเว็บเพจ 23
บทที่ 4 การใสรูปภาพบนเว็บเพจ 26
บทที่ 5 การจัดหนาเว็บเพจดวยตาราง 31
บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ 34
บทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ 43
แมนสรวง แซซิ้ม มิ.ย.49 3

4. บทที่ 1
ทําความรูจกกับ Macromedia Dreamweaver 8
ั
M acromedia Dreamweaver เปนโปรแกรมสําหรับการสรางเว็บเพจ บริหารจัดการเว็บไซต รวม
ไปถึงการพัฒนาเว็บแอปพลิเคชัน เนื่องจากตัว Dreamweaver มีความสามารถที่โดดเดน ดังนี้
สามารถเขียนโปรแกรมสําหรับเว็บไดทุกรูปแบบ เชน ASP, ASP.Net, ColdFusion,
JSP, PHP, XML, XHTML
เมนูคําสั่งและเครื่องมือตางๆ เรียกใชงานไดงายและสะดวก
มีการปรับปรุงกลไกภายในใหมีประสิทธิภาพสูงขึ้น
สามารถสรางแอปพลิเคชันงายๆ โดยไมจําเปนตองเขียนโปรแกรม
สรางเว็บเพจภาษาไทยไดทันทีโดยไมตองติดตองโปรแกรมเสริมเพราะ Dreamweaver
รองรับตัวอักษรแบบ Unicode
การติดตั้งโปรแกรม Dreamweaver 8
ในการติดตั้งโปรแกรม Dreamweaver 8 เริ่มจากใสแผนซีดีติดตั้งลงในไดรฟซดีรอม หลังจากนั้น
ี
ทําตามขั้นตอนดังนี้ 1 ดับเบิลคลิกที่ไอคอน
แมนสรวง แซซิ้ม มิ.ย.49 4

5. 2 ปรากฏหนาตางตอนรับการติดตั้งโปรแกรม จากนั้น
คลิกที่ปุม เพื่อเริ่มตนการติดตั้ง
3 ปรากฏขอความการใชงานโปรแกรมคลิกที่ปุม
เพื่อยอมรับขอตกลง
4 คลิกปุม หากตองการเลือก
ตําแหนงในการติดตั้งโปรแกรม
5 คลิกปุม
6 คลิกปุม
แมนสรวง แซซิ้ม มิ.ย.49 5

6. 7 คลิกปุม เพื่อเริ่มตนการติดตั้ง
ปรากฏสถานะการติดตั้ง
7 เมื่อติดตั้งโปรแกรมเรียบรอยแลว คลิกที่ปุม
เพียงเทานี้ก็สามารถใชโปรแกรม Dreamweaver 8 ไดแลว
แมนสรวง แซซิ้ม มิ.ย.49 6

7. การเขาสูโปรแกรม Dreamweaver 8
เมื่อเราติดตั้งโปรแกรม Dreamweaver 8 เรียบรอยแลว สามารถเปดโปรแกรมขึ้นมาใชงานไดเลย โดยมี
ขั้นตอนดังนี้
2 เลือก All Programs>Macromedia>
Macromedia Dreamweaver 8 เพื่อ
เริ่มตนการใชงาน
1 คลิกปุม
3 เลือกรูปแบบพื้นที่ทํางานของโปรแกรม โดยมีรายละเอียดดังนี้
Designer หมายถึง การสรางและออกแบบเว็บเพจโดยทั่วไป ซึ่ง
สวนมากนิยมเลือกรูปแบบนี้
Code หมายถึง วิธีการสรางเว็บเพจที่เนนการเขียนชุดคําสั่งเอง
จากนั้นคลิกปุม OK (โดยในที่เลือก Disigner)
แมนสรวง แซซิ้ม มิ.ย.49 7

8. แนะนําสวนประกอบของโปรแกรม Dreamweaver 8
กอนลงมือสรางหนาเว็บเพจนั้น ขอแนะนะสวนประกอบของโปรแกรม Dreamweaver 8 วาแต
ละสวนมีรายละเอียดอยางไรบาง
หนาจอ Start Page
ในการเปดโปรแกรม Dreamweaver 8 ทุกครั้งจะปรากฏหนาจอเริ่มตน (Start Page)
สําหรับเปดเว็บเพจเดิมหรือสรางเว็บเพจใหม โดยแบงเปน 3 กลุม ดังนี้
1 เปดเว็บเพจที่เคยใชงานมาแลว
2 การสรางงานใหม 3 การสรางงานตามแบบฟอรม
1. เปดไฟลเว็บเพจที่เคยใชงานมาแลว (Open a Recent Item)
เปนสวนแรกของหนาจอเริ่มตนใชสําหรับเปดงานที่เราทําคางไว ซึ่งเลือกจากรายการชื่อที่แสดงอยู โดย
โปรแกรมจะแสดงงานที่เปดใชบอยอยูดานบน
2. การสรางงานใหม (Create New)
ในสวนนี้เปนการเลือกประเภทงานที่ตองการสรางใหม โดยเลือกประเภทไฟลตางๆ ได เชน HTML,
PHP, ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, JSS, CSS หรือเลือก
แบบฟอรมอื่นๆ เปนตน
3. การสรางงานตามแบบฟอรม (Create from Sample)
เปนสรางเว็บเพจตามแบบฟอรมที่โปรแกรมไดจดไวใหแลว ซึ่งมีรูปแบบใหเลือกหลายประเภท
ั
แมนสรวง แซซิ้ม มิ.ย.49 8

9. ตัวอยางแบบฟอรมที่ชวยในการออกแบบ
นอกจากนี้ยังสามารถศึกษาโปรแกรม Dreamweaver 8 จากอินเตอรเน็ตในหัวขอ Take a
quick tour of Dereamweaver. หรือเรียนรูจากโปรแกรมชวยสอนจากหัวขอ Learn about
documentation resources
เรียนรูจากโปรแกรมชวยสอน (Dreamweaver Help)
แมนสรวง แซซิ้ม มิ.ย.49 9

10. สวนประกอบหนาจอโปรแกรม
เมื่อเราเลือกประเภทการทํางานแลว (ในกรณีน้ีผูสอนคลิกเลือก HTML จากสวนของ Create
New) จะปรากฏหนาตางการทํางานของโปรแกรม
1 Titlebar
2 Menu Bar 3 Insert Bar
4 Toolbar
5 Document Area
6 Status Bar
7 Properties Inspector 8 Panel
1. Titlebar
เปนสวนแสดงชื่อโปรแกรม Dreamweaver 8 และชื่อไฟลที่ทํางานอยู
2. Menu Bar
เปนสวนที่รวบรวมเมนูคําสั่งการทํางานเอาไว ซึ่งสามารถเปดเมนูตางๆ ขึ้นมาใชงานโดยคลิกที่ชื่อเมนูแลว
เลื่อนเมาสไปยังตําแหนงที่ตองการได หากเมนูนั้นมีคําสั่งยอยจะมีลูกศร แลวเลื่อนเมาสไปยังคําสั่งยอยเหลานั้น

ได
แมนสรวง แซซิ้ม มิ.ย.49 10

11. คําสั่งยอยของเมนูตางๆ แสดงคําสั่งยอยของเมนู Table Mode
3. Insert Bar
เปนแถบที่ประกอบดวยปุมคําสั่งที่ใชในการแทรกออบเจ็กต (องคประกอบตางๆ) ลงในเว็บเพจ โดยแบงเปน
หมวดหมูซึ่งมีรายละเอียดดังนี้
Common เปนชุดคําสั่งสําหรับแทรกออปเจ็กตที่เรียกใชงานบอยๆ ในการสรางเว็บเพจ
เชน รูปภาพ กราฟก ตาราง ไฟลมีเดีย เปนตน
Layout สําหรับเลือกมุมมองในการสรางเว็บเพจ เชน มุมมองปกติ มุมมองแบบขยาย
เพื่อใหเห็นออปเจ็กตตางๆ ไดอยางชัดเจน
Forms สํากรับแทรกออปเจ็กตที่ใชสรางแบบฟอรมรับขอมูลจากผูชม เชน ชองรับขอความ
และฟลดชนิดตางๆ
Text สําหรับจัดรูปแบบขอความในเว็บเพจ เชน หัวเรื่อง ตัวหนา ตัวเอียง จัดหัวขอ จัดยอ
หนา และแทรกสัญลักษณพิเศษตางๆ
Application สําหรับแทรกคําสั่งและการดึงขอมูลจากฐานขอมูลมาแสดงบนเว็บ
แมนสรวง แซซิ้ม มิ.ย.49 11

12. Flash element สําหรับนําไฟล Flash เขามาใชงาน
Favorite สําหรับจัดเก็บออบเจ็กตที่ชอบเพื่อความสะดวกในการใชงาน
Show as Tabs เปลี่ยนแถบเครื่องมือใหแสดงผลในลักษณะแท็บคําสั่งเรียงตอกันไป
4. Toolbar
เปนแถบเครื่องมือที่เก็บปุมคําสั่งที่ตองใชงานบอยๆ ซึ่งประกอบดวย
Show Code View สําหรับแสดงการทํางานในรูปแบบ HTML
นอกจากนี้ยังสามารถเขียนคําสั่ง HTML หรือคําสั่งภาษาสคริปต (Script) อื่นๆ ไดดวย
Show Code and Design สําหรับแสดงการทํางานแบบ HTML กับ
การแสดงพื้นที่ออกแบบ โดยจะแสดงสวนของคําสั่งไวดานบนและแสดงเว็บเพจปกติไว
ดานลาง
แมนสรวง แซซิ้ม มิ.ย.49 12

13. Show Design View สําหรับแสดงเว็บเพจคลายกับที่เราเห็นใจเบรา
เซอร เชน ขอความ กราฟก หรือออปเจ็กตอื่นๆ และสามารถแกไขเนื้อหาลงเว็บเพจได
5. Document Area
เปนสวนที่ใชสําหรับสรางหนาเว็บเพจ โดยการใสเนื้อหาและจัดองคประกอบตางๆ นํามาวางใน
Document Area และสามารถเลือกพื้นที่การทํางานไดหลายมุมมอง เชน Show Code View,
Show Code and Design View ดังที่ไดกลาวไวแลวขางตน
6. Status Bar
คือ แถบแสดงสถานะที่อยูบริเวณดานลางของพื้นที่สรางงาน (Document Area) ซึ่งประกอบดวย 2
สวน คือ ทางดานซายเรียกวา Tag Selector ใชสําหรับแสดงคําสั่ง HTML ของสวนประกอบใน
เว็บเพจที่เลือกอยู และทางดานขวาเปนสวนที่บอกขนาดและเวลาที่ใชในการดาวนโหลดเว็บเพจ
Tag Selector สวนที่บอกขนาดและเวลาที่ใชในการดาวน
7. Properties Inspector โหลดเว็บเพจ
แมนสรวง แซซิ้ม มิ.ย.49 13

14. เปนหนาตางแสดงคุณสมบัติของออปเจ็กตที่เรากําลังเลือกในเว็บเพจ และสามารถกําหนดหรือแกไข
คุณสมบัติของสวนประกอบตางๆ ในหนาเว็บเพจได เชน ขอความ สี ขนาด ตาราง ลิงก เปนตน
โดยรายละเอียดภายในหนาตาง Properties Inspector จะไมเหมือนกันขึ้นอยูกับวาขณะนั้นเรากําลัง
เลือกทํางานกับออปเจ็กตใดอยู
สําหรับซอน/แสดง Properties Inspector สําหรับยอ/ขยาย Properties Inspector
Properties Inspector ของภาพกราฟก
Properties Inspector ของขอความ
Properties Inspector ของตาราง
8. Panels
เปนกรอบเล็กๆ บริเวณดานขวา ประกอบดวยเครื่องมือสําหรับใชทางานตางๆ ซึ่งแตละสวนของ Panels
ํ
จะมีหนาที่แตกตางกันไป เชน การจัดเก็บ Code, CSS, Behavior อีกทั้งไฟลและโฟลเดอรภายใน
เว็บไซต (โดยรายละเอียดตางๆ จะอธิบายใน Chapter ตอๆ ไป) และเรียกขึ้นมาใชงานโดยใชคําสั่ง
Windows จากนั้นเลือกชื่อ Panels ทีตองการเปด/ปด หรือใชคียลัดดานหลังชื่อ Panels ก็ได
่
เชนกัน
คลิกเพื่อซอน/แสดง Panels
คลิกเพื่อเปดพาเนลที่ซอนอยู
ดับเบิลคลิกเพื่อขยายกลุมพาเนล
คลิกเพื่อเปดหัวขอยอย
แมนสรวง แซซิ้ม มิ.ย.49 14

15. บทที่ 2
กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต
เมื่อเริ่มตนสรางเว็บไซตนั้น เราตองทําความเขาใจในเรื่องการกําหนดโครงสรางการจัดขอมูลของ
เว็บไซตและการกําหนดคุณสมบัติตางๆ โดยใน Chapter นี้จะอธิบายขั้นตอนในการสรางเว็บไซต และ เว็บ
เพจและกําหนดคุณสมบัติตางๆ เชน การแกไขและการบันทึกเว็บไซต เพื่อเตรียมความพรอมกอนการใสเนื้อหา
ใหกับเว็บเพจ
การกําหนดไฟลและโฟลเดอรภายในเว็บไซต
ภายในเว็บไซตประกอบดวยหนาเว็บเพจและไฟลตางๆ เปนจํานวนมาก หากเว็บไซตของเรามีขนาด
ใหญจํานวนหนาเว็บเพจและไฟลตางๆ ก็จะมีจํานวนมากขึ้น ดังนั้นการวางแผนในการจัดเก็บไฟลเหลานี้ก็นับวา
เปนสิ่งสําคัญ
โครงสรางโฟลเดอรภายในเว็บไซตจะประกอบไปดวยโฟลเดอรหลักและโฟลเดอรยอยๆ ที่ซอนกันอยู

เปนชั้น ๆ ลงมา ดังนั้นในการแบงโฟลเดอรหสําหรับเก็บไฟลควรแบงเปนหมวดหมู และแยกตามประเภทของ
ไฟล เชน เว็บเพจ กราฟก สคริปต เปนตน
โครงสรางของโฟลเดอรดังรูปตัวอยาง เปนการกําหนดตําแหนงและ
สถานที่เก็บไฟลขอมูล โดยมีรายระเอียดของโครงสรางโฟลเดอร
ภายในเว็บไซต ดังนี้
1. WEBket3 เปนโฟลเดอรหลักของเว็บไซต สําหรับ
เก็บไฟล HTML ของเว็บเพจ
2. Data เปนโฟลเดอรยอยเก็บฐานขอมูล
3. Flash เปนโฟลเดอรยอยเก็บไฟลที่เปนภาพเคลื่อนไหว
ที่ทําจากโปรแกรมแฟลช
4. galary เปนโฟลเดอรยอยที่เก็บเกี่ยวกับภาพที่ตางๆ ที่

เปนกิจกรรมตางๆ
5. image เปนโฟลเดอรยอยที่เก็บรูปภาพตางๆ ที่ใชใน
เว็บเพจทั้งหมด
ตัวอยางโครงสรางโฟลเดอรภายในเว็บไซต
แมนสรวง แซซิ้ม มิ.ย.49 15

16. Dreamweaver Site
ขั้นแรกของการสรางเว็บไซต คือการสราง Dreamweaver Site เพื่อกําหนดชื่อเว็บไซต ระบุ
ไฟลเดอรสําหรับจัดเก็บไฟล เปนตน โดยโฟลเดอรน้จะเปนแหลงรวมเว็บเพจ กราฟก ไฟลอื่นที่สําคัญใหอยู
ี
ภายในสถานที่เดียวกัน เพื่อความสะดวกในการอัพโหลดขึ้นสูอินเตอรเน็ต โดยการสราง Dreamweaver
Site มีขั้นตอนดังนี้
1 คลิกเมนู Site>Manage
2 คลิกปุม
แลวเลือกคําสั่ง Site
3 พิมพชื่อไซตที่ตองการลงในชอง What
would you like to name your
site? (ควรเปนภาษาอังกฤษ)
4 คลิกปุม
เพื่อเริ่มตนขั้นตอไป
แมนสรวง แซซิ้ม มิ.ย.49 16

17. 5 คลิกที่ชอง No, I do not want use
a server technology เพื่อสราง
เฉพาะไฟล HTML
6 คลิกปุม
7 คลิกที่ชอง Edit Local copies on my
machine, then upload to server
when ready (recommended) เพื่อเลือก
ทํางานในเครื่องคอมพิวเตอรกอนแลวจึงอัพ
โหลดขึ้นไปยังเชิรฟเวอรภายหลัง
9 คลิกปุมเลือกโฟลเดอรหลักที่เตรียมไว 8 คลิกปุม เพื่อเลือกโฟลเดอรที่ตองการเก็บ
เว็บไซต
10
9 คลิกปุม
แมนสรวง แซซิ้ม มิ.ย.49 17

18. 11 คลิกปุมเลือกโฟลเดอรหลักที่เตรียมไว
12 คลิกเลือกหัวขอ None เนี่องจากขณะนี้
ยังไมตองการเชื่อมตอกับเว็บเซิรฟเวอร

13 คลิกปุม
14 คลิกที่ปุม เพื่อสราง Dreamweaver Site
ตามคาที่กาหนดไว
ํ
ปรากฏชื่อไซตบริเวณพาเนล Files
แมนสรวง แซซิ้ม มิ.ย.49 18

19. การสรางหนาเว็บเพจ
เราสามารถสรางหนาเว็บเพจขึ้นมาใหมไดทันที ในกรณีที่เปดโปรแกรมแลวไมปรากฏหนาเว็บเพจใน
พื้นที่สรางงาน โดยการสรางหนาเว็บเพจมีขั้นตอนดังนี้
1 คลิกเมนู File > New 2 คลิกเลือก Basic page
3 คลิกเลือก HTML เพื่อสรางหนา
เว็บเพจเปลาแบบธรรมดา
4 คลิกปุม Create
5 ปรากฏหนาวางเปลา
สําหรับสรางเว็บเพจ
แมนสรวง แซซิ้ม มิ.ย.49 19

20. การกําหนดคุณสมบัติใหเว็บเพจ
เมื่อเราสรางหนาเว็บเพจขึ้นมาแลวขั้นตอนตอไปคือ การกําหนดคุณสมบัติใหเว็บเพจ โดยมีขั้นตอนดังนี้
1 คลิกเมนู Modify > Page Properties
2
ปรากฎหนาตาง Page Properties สําหรับ
กําหนดคุณสมบัติใหเว็บเพจ
ชื่อของเว็บเพจ
ชื่อของเว็บเพจจะไปปรากฏอยูที่แถบ Titlebar โดยการตั้งชื่อหนาเว็บเพจมีขั้นตอนดังนี้
1 ในชอง Category 2 พิมพชื่อเว็บที่ตองการ
คลิกเลือก Title/Encoding
3 คลิกปุม Apply
4 ปรากฏชื่อที่ตั้งบนแถบ Titlebar
แมนสรวง แซซิ้ม มิ.ย.49 20

21. กําหนดรูปแบบแสดงภาษา
เราสามารถกําหนดรูปแบบการแสดงภาษาเพื่อใหเว็บเพจแสดงผลเปนภาษาไทย โดยมีขั้นตอนดังนี้
1 ในชอง Category คลิกเลือก Title/Encoding
2 ในชอง Encoding คลิกเลือก Thai (Windows)
3 คลิกปุม OK
การใสสีพื้นหลังใหหนาเว็บเพจ
พื้นหลัง (Background) ในหนาเว็บเพจปกติจะมีสีขาวไมเปนที่นาสนใจ การใสสีใหพื้นหลังก็
เปนอีกวิธีหนึ่งซึ่งจะชวยใหเว็บของเรานาสนใจมากขึ้น โดยการใสสีพื้นหลังใหหนาเว็บเพจมีขั้นตอนดังนี้
1 คลิกเมนู Modify > Page Properties
2 ในชอง Categry คลิกเลือก Appearance
3 คลิกในชอง Background area
5 คลิกที่ปุม OK 4 คลิกเลือกสีที่ตองการเปนพื้นหลัง
แมนสรวง แซซิ้ม มิ.ย.49 21

22. 6 ปรากฎสีพื้นหลัง
บนหนาเว็บเพจที่ตองการ
การบันทึกเว็บเพจ
เมื่อสรางและกําหนดคุณสมบัติพื้นฐานของเว็บเพจเรียบรอยแลว ขั้นตอนตอไปที่ขาดไมไดคือ การ
บันทึกเว็บเพจเพื่อปองกันการผิดพลาดระหวางการทํางาน โดยการบันทึกเว็บเพจมีขั้นตอนดังนี้
1 คลิกเมนู File > Save หรือปุม <Ctrl+S>

2 เลือกโฟลเดอร
3 ตั้งชื่อไฟล
4 คลิกปุม Save เพื่อบันทึกเว็บเพจ
แมนสรวง แซซิ้ม มิ.ย.49 22

23. การทดสอบเว็บเพจกับเบราเซอร
ในระหวางการสรางเว็บเพจ เราตองตรวจสอบการแสดงผลของเนื้อหา เชน สี ขนาด และตําแหนง
ของขอความหรือรูปภาพเมื่อนําขึ้นไปแสดงผลบนเบราเซอร โดยมีขั้นตอนดังนี้
1 คลิกเมนู File > Save หรือปุม <Ctrl+S>

2 คลิกที่ปุม เลือก Preview in
iexplore หรือกดปุม <F12>
3 ปรากฏผลการทดสอบเว็บเพจใน
Internet Explorer
การปดไฟลเว็บเพจ
หลังจากที่แกไขหรือบันทึกเว็บเพจเรียบรอยแลว เมื่อตองการเลิกใชงานเราสามารถปดไฟลในแตละ
หนาตาง โดยมีหลายวิธีดังนี้
o กดปุมคียบอรด <Ctrl+F4>
o คลิกเมนู File > Close
o คลิกปุม Close บริเวณมุมขวาของหนาตางงาน
แมนสรวง แซซิ้ม มิ.ย.49 23

24. บทที่ 3
การใสขอความบนเว็บเพจ
ขอความตางๆ บนหนาเว็บเพจนับวาเปนองคประกอบที่มีความสําคัญมาก เนื่องจากขอความที่
ปรากฏบนหนาเว็บเพจ จะเปนตัวกลางสื่อความหมายถึงผูเขามาเยี่ยมชมเว็บไซต ดวยเหตุนี้จึงจําเปนตองจัดวาง
ขอความเนื้อหาตางๆ บนหนาเว็บเพจใหเหมาะสมสวยงาม เพื่อเปนสิ่งดึงดูดใหมีผูเขาชมเว็บไซตของเรามากๆ
เริ่มใสขอความในเว็บเพจ
วางเคอรเ ซอรใ นตํา แหนง ที่ตอ งการพิม พ ขอ ความ แล วพิ ม พข อ ความที่ต อ งการ เพีย งเทานี้ ก็จ ะได
ขอความที่ตองการแลว แตถาตองการตกแตงสวนตางๆ เพิ่มเติม เชน ใสสีพื้นหลังหรือกําหนดระยะหาง
จากขอบก็สามารถทําไดเชนกัน
แมนสรวง แซซิ้ม มิ.ย.49 24

25. การเลือกรูปแบบตัวอักษร (Font)
ในการเลือกรูปแบบตัวอักษรที่ไมมีมาตรฐานนั้น อาจจะเกิดปญหาไดในกรณีที่มีผูเขาชมเว็บไซตแลว
อานยาก ไมสวย หรือเปนภาษาที่อานไมออก ดังนั้นจึงควรใชรูปแบบตัวอักษรที่เปนมาตรฐาน เชน MS Sans
Serif เนื่องจากสามารถแสดงผลบนเบราเซอรทุกชนิด โดยการเลือกรูปแบบตัวอักษร (Font) มีขั้นตอนดังนี้
2 คลิกเลือก Edit Font List
1 คลิกในชอง Font บริเวณ
ดานลางในหนาตาง
Properties
4 คลิกที่ปุม สําหรับ 3 คลิกเลือกรูปแบบตัวอักษร
เพิ่มรูปแบบตัวอักษรอีก MS Sans Serif
Properties Inspector ของขอความ
สรางหัวขอ ขนาดตัวอักษร สีตัวอักษร ตัวหนา ตัวเอียง จัดเรียงหัวขอและลิสตบุค
จัดตําแหนงยอหนาขอความ
แมนสรวง แซซิ้ม มิ.ย.49 25

26. การนําขอมูลจากไฟลอื่นมาใช
ความสามารถพิเศษอีกอยางของ Dreamweaver 8 ก็คือ นําขอมูลตางๆ ที่อยูในไฟลประเภทอื่น
เชน Word, Excel, Powerpoint เปนตน มาวางบนพื้นที่สรางงานซึ่งจะชวยเพิ่มความสะดวกและ
ประหยัดเวลาในการทํางานเปนอยางมาก โดยมีขั้นตอนดังนี้
1 เลือกขอมูลจากหนาเอกสาร Word
2 คลิกเมาสขวาเลือกคําสั่ง คัดลอก
3 กลับมาทํางานในหนาเว็บเพจของ
โปรแกรม Dreamweaver 8
จากนั้นคลิกเมนู Edit > Paste
4 ปรากฏไฟลจากหนาเอกสาร Word มาใชในเว็บเพจของ
Dreaweaver 8 แลว
แมนสรวง แซซิ้ม มิ.ย.49 26

27. บทที่ 4
การใสรูปภาพบนเว็บเพจ
ภายในเว็บเพจของเรานอกจากจะมีเนื้อหาที่มีประโยชนแกผูเขาชมแลว หากมีการเพิ่มรูปภาพกราฟก
ตางๆ ก็จะชวยใหเว็บเพจมีสีสันสวยงามนาสนใจมากยิ่งขึ้น ดังนั้นเราจะเห็นไดวาเว็บไซตจํานวนมากจึงนิยมนํา
รูปภาพมาใชตกแตงและอธิบายเนื้อหาเพื่อใหผูเขามาเยี่ยมชมเว็บไซตไดเห็นภาพและเขาใจเนื้อหามากขึ้น
ขอพิจารณาในการเลือกใชรูปภาพ
ในการนําภาพมาประกอบขอความบนเว็บเพจนั้น ควรพิจารณาและเลือกรูปภาพที่นํามาใชใหเหมาะสม
โดยมีขอพิจารณาดังนี้
1. ไมควรเนนรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีขอความและรูปภาพที่สมดุลกัน
2. การใชรูปภาพที่เปนไฟลขนาดใหญจะทําใหการโหลดเว็บเพจใชเวลานานกวาจะแสดงภาพ ดังนั้น
จึงควรใชภาพที่มีพอเหมาะกับสิ่งที่เราตองการสื่อกับผูชม หรืออาจใชโปรแกรมทางกราฟก เชน
Photoshop หรือ ACDSee ทําการลดขนาดภาพ (Resize) กอนนํามาลงบนเว็บเพจก็ได
3. ปจจุบันการนํารูปภาพลงเว็บเพจควรคํานึงถึงที่มาและลิขสิทธิ์ของรูปภาพนั้นดวย แตบางเว็บไซตก็
มีการแจกรูปภาพใหฟรี ซึ่งสามารถนํามาใชประโยชนโดยไมตองเสียคาลิขสิทธิ์

4. ควรเลือกใชภาพที่มีโทนเดียวกับสวนประกอบอื่นภายในเว็บเพจ เพื่อความกลมกลืนไมแตกตางกัน
ชนิดของรูปภาพที่ใชในเว็บเพจ
ชนิดของรูปภาพที่ใชในเว็บเพจมีอยู 3 ชนิดดวยกัน ซึ่งแตละชนิดมีรายละเอียดและลักษณะที่แตกตาง
กันดังนี้
GIF (Graphic Interchange Format)
GIF นับเปนไฟลภาพที่สามารถแสดงผลกับเบราเซอรไดทุกชนิด จึงไดรับความนิยม โดย
ส ว นมากมั ก จะใช รู ป ภาพไฟล .gif กํ า หนดฉากหลั ง หรื อ พื้ น ที่ โ ปรงใส การใช ทํ า ภาพเคลื่ อ นไหว
(Animation) ภาพโลโก ตัวการตูน ภาพตัวอักษรลายเสนตางๆ
JPG (Joint Photographic Expert Group)
JPG เปนไฟลภาพที่แสดงสีไดถึง 16.7 ลานสี เหมาะสําหรับภาพที่ใชสีจํานวนมาก ภาพที่
มีการไลระดับสีอยางตอเนื่องหรือภาพถายทั่วไป
PNG (Portable Network Graphic)
PNG เปนไฟลภาพที่ไมไดรับความนิยมมากนักเมื่อเทียบกับ GIF, JPG เนื่องจากเปน
รูปแบบใหม จึงไมสามารถแสดงผลไดทุกเบราเซอร
แมนสรวง แซซิ้ม มิ.ย.49 27

28. การใสรูปภาพลงบนเว็บ
ในการใสรูปภาพลงบนเว็บเพจ มีขั้นตอนดังนี้
1 วางเคอรเซอรตรงตําแหนงที่ตองการใสรูปภาพ
2 ในแท็บ Common คลิกที่ปุม เลือก Image
3 ในชอง Look in ใหเลือกโฟลเดอรที่เก็บไฟลภาพ
4 เลือกรูปภาพที่ตองการ 5 คลิกปุม OK
6 ปรากฏหนาตางแสดงขอความวา ภาพนี้อยู 7 เลือกโฟลเดอรที่ใชเก็บภาพ
นอกเว็บไซตใหกอบปเขามาในเว็บไซต

จากนั้นคลิกปุม Yes
8 คลิกที่ปุม Save
9 ปรากฏรูปภาพที่ตองการบนเว็บเพจ
แมนสรวง แซซิ้ม มิ.ย.49 28

29. การจัดการเกี่ยวกับรูปภาพ
เมื่อเรานํารูปภาพมาวางไวในเว็บเพจแลว หากเราตองการจัดเกี่ยวกับรูปภาพในลักษณะตางๆ เชน การ
ปรับขนาด การจัดวางรูป การใสขอความอธิบายรูปภาพ การใสกรอบใหรูปภาพ การกําหนดระยะหางระหวาง
รูปภาพ เปนตน เราสามารถจัดการเกี่ยวกับรูปภาพไดโดยใช
กําหนดระยะหางของรูป ใสกรอบใหรูปภาพ การจัดวางรูป ปรับแสงและความคมชัด
ปรับขนาดของรูปภาพ ใสขอความอธิบายรูปภาพ
การจัดวางรูปภาพประกอบขอความ
เราสามารถจัดวางรูปภาพประกอบขอความบนหนาเว็บเพจใหมีความสวยงาม เปนที่นาดูของผูเขามา
เยี่ยมชมเว็บไซต โดยมีขั้นตอนดังนี้
1 คลิกเลือกรูปภาพที่ตองการ
2 คลิกเลือกรูปแบบการจัดวางรูปภาพ
ในหนาตาง Properties ของ
Align โดยในที่นี้เลือก Left เพื่อจัด
วางรูปภาพไวดานซายมือ
แมนสรวง แซซิ้ม มิ.ย.49 29

30. 3 ปรากฏการจัดวางรูปที่ตองการ
ในการจัดวางรูปภาพประกอบขอความมีรายละเอียดดังนี้
• Default เปนการจัดเรียงแบบปกติ
• Baseline เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกับบรรทัดของ
ขอความ
• Top เปนการจัดใหขอบบนของรูปภาพอยูแนวเดียวกันกับบรรทัดของขอความ
• Middle เปนการจัดใหตรงกลางของรูปภาพอยูแนวเดียวกันกับบรรทัดของ
ขอความ
• Bottom เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกันกับบรรทัดของ
ขอความคลายการจัดแบบ Baseline
• Text Top เปนการจัดใหขอบบนของรูปภาพอยูแนวเดียวกับบรรทัดของ
ขอความคลายการจัดแบบ Top
• Absolote Bottom เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกับ
สวนกลางของบรรทัดขอความ
• Left เปนการจัดใหรูปภาพอยูทางซายมือของบรรทัดขอความ
• Right เปนการจัดใหรูปภาพอยูทางขวามือของบรรทัดขอความ
การใสรูปภาพเปนฉากหลัง
การใสรูปภาพเปนฉากหลัง (Background) ถือวาเปนการเพิ่มความสวยงามและนาสนใจใหกับ
เว็บเพจ ซึ่งภาพที่นาจะนํามาเปนฉากหลังตองไมมีลวดลายหรือสีสันมากเกินไป เพื่อไมใหผูชมเว็บไซตสับสน
หรือสีของพื้นหลังอาจตัดกับสีของขอความทําใหลําบากในการอานได ดังนั้นภาพที่นํามาเปนฉากหลังตองเปนสีที่
กลมกลืนกับขอความหรือรูปภาพที่วางไวในเว็บเพจ ซึ่งการใสรูปภาพเปนฉากหลังมีขั้นตอนดังนี้
แมนสรวง แซซิ้ม มิ.ย.49 30

31. 1 คลิกที่ปุม Page Properties... หรือกดปุม <Ctrl+J> เพื่อเปดหนาตาง Page Properties
2 คลิกที่หัวขอ Apperance
4 เลือกไฟลรูปภาพที่ตองการนํามาเปนฉากหลัง
 3 คลิกที่ปุม Browse...
5 คลิกที่ปุม OK
6 คลิกที่ปุม OK ที่
หนาตาง Page
Properties อีกครั้ง
7 ปรากฏภาพที่ นํ า มาเป น
ฉากหลังเรียบรอยแลว
แมนสรวง แซซิ้ม มิ.ย.49 31

32. บทที่ 5
การจัดหนาเว็บเพจดวยตาราง
เว็บเพจสวนมากมักนิยมใชตารางในการจัดวางองคประกอบ ซึ่งสวนมากจะเกี่ยวกับการนําเสนอขอมูลที่
เปนรายชื่อหรือรายการตางๆ และที่สําคัญคือใชตารางสําหรับจัดเลยเอาตหนาเอกสาร เพื่อชวยในการแสดงขอมูล
และองคประกอบตรงตามตําแหนงที่ตองการ
โครงสรางของตาราง
กอนที่จะลงมือสรางตารางควรมาทําความรูจักโครงสรางของตารางซึ่งจะชวยทํางานไดงายขึ้น โดยมี
รายละเอียดดังนี้
• คอลัมน (Column) ชองในแนวตั้ง
• แถว (Row) ชองในแนวนอน
• เซลล (Cell) ชองแตละชองที่อยูในตาราง
• Cell Spacing เปนชองวางระหวางเซลลแตละเซลล
• Cell Padding เปนระยะหางของขอความหรือรูปภาพจากขอบทุกดานของเซลล
• สีพื้นเซลล
• ขอบตาราง
• ขอบเซลล
• ความกวางทั้งหมดของตาราง
• ความกวางจริงในคอลัมน
• ความกวางของคอลัมนที่กําหนด
• คอลัมนที่ไมกําหนดความกวาง
Row Cell Padding สีพื้นเซลล
Cell ขอบเซลล ขอบตาราง Column
คอลัมนที่ไมกําหนดความกวาง
ความกวางจริงในคอลัมน
ความกวางทั้งหมดของตาราง
แมนสรวง แซซิ้ม มิ.ย.49 32

33. วิธีการสรางตาราง
ในโปรแกรม Dreamweaver มีเครื่องในการสรางตารางมากมาย เชน เครื่องมือในการสรางเสน
ขอบของตาราง กําหนดสีพื้นตารางและเซลล การจัดขอมูลตางๆ ภายในเซลล เปนตน โดยวีธีการสรางตารางมี
ขั้นตอนดังนี้
1 คลิกแท็บ Common ที่แถบ Insert Bar
2 คลิกที่ปุม Insert Table เพื่อสรางตาราง
3 ปรากฎหนาตาง Table จากนั้นในชอง Rows ใหกําหนดจํานวนแถว
ของตาราง โดยในที่นี้กําหนดเปน 3
4 ในชอง Column ใหกําหนดจํานวน
คอลัมนของตาราง โดยในที่นี้กําหนด
เปน 3
แมนสรวง แซซิ้ม มิ.ย.49 33

34. การกําหนดคุณบัติของตาราง
ในหนาตาง Properties จะแสดงคุณสมบัติของตาราง ซึ่งมีรายละเอียดในการปรับแตง
ดังนี้
• Table Id แสดงชื่อตาราง
• Rows แสดงจํานวนแถว
• Cols แสดงจํานวนคอลัมน
• W ความกวาง
• H ความสูง
• CellPad แสดงระยะหางระหวางขอบเซลลและเนื้อหาภายในเซลล
• CellSpace แสดงระยะหางระหวางเซลลแตละเซลล
• Align กําหนดตําแหนงตาราง
• Border กําหนดความหนาของเสนตาราง
• Bg Color กําหนดสีพื้นตาราง
• Brdr กําหนดสีขอบตาราง
• Bg Image กําหนดฉากหลังตาราง
• Clear Column Widths ยกเลิกคาความกวางในทุกคอลัมน
• Convert Table Widths to Pixels เปลี่ยนหนวยวัดความกวางใหเปนพิกเซล
• Convert Table Widths to Percent เปลี่ยนหนวยวัดความกวางใหเปนเปอรเซ็นต
• Clear Row Heights ยกเลิกคาความสูงในแถว
• Convert Table Heights to Pixels เปลี่ยนหนวยวัดความสูงใหเปนพิกเซล
• Convert Table Heights to Percent เปลี่ยนหนวยวัดความสูงใหเปนเปอรเซ็นต
แมนสรวง แซซิ้ม มิ.ย.49 34

35. บทที่ 6
การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ
ไฮเปอรลิงก (Hyperlink) หรือที่เรียกวา “ลิงก” เปนการเชื่อมโยงเว็บไซตบนอินเตอรเน็ต
จากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง หรือเชื่อมตอเขาสูอีเมลลของ Webmaster เพื่อติดตอสื่อสารกัน การ
เชื่อมโยงในลักษณะนี้นับวามีประโยชนอยางมาก เนื่องจากทําใหผูเขาชม สามารถเขาถึงขอมูลและเนื้อหาทุกหนา
เว็บเพจภายในเว็บไซตของเราได
สวนประกอบของไฮเปอรลิงก
ในการทํางานของไฮเปอรลิงกมีสวนประกอบดังนี้
1. ตนทาง (Source Anchor) หมายถึง สวนประกอบบนเว็บที่เปนจะลิงก ซึ่งเมื่อเลื่อเมาสไปชี้
พอยเตอรจะเปลี่ยนเปนรูปมือ และเมื่อคลิกเลือกหนาเว็บหรือขอมูลปลายทางจะปรากฏขึ้นมา ซึ่ง
อาจเปนขอความหรือรูปภาพก็ได
2. ปลายทาง (Destination Anchor) หมายถึง เนื้อหาขอมูลตางๆ ไมวาจะเปนขอความหรือ
รูปภาพ ซึ่งถูกเรียกใหปรากฏขึ้นมาเมื่อมีผูชมคลิกที่ลิงกตนทาง ซึ่งลิงกปลายทางแบงไดเปนหลาย
รูปแบบ ดังนี้
ตําแหนงเฉพาะบนเว็บเพจ คือการสั่งใหเบราเซอรเปดเว็บเพจพรอมทั้งเลื่อนไปยัง
ตําแหนงที่ระบุไวโดยทันที
เว็บเพจหรือเว็บไซต โดยสวนมากลิงกบ นเว็บเพจจะใชสําหรับ เปดไปยัง
หนาเว็บเพจอื่นภายในเว็บไซตเดียวกัน หรือเปดไปยัง
หนาเว็บไซตอื่น
ไฟลเอกสารอื่นๆ สามารถลิ ง ก ไ ปยั ง เนื้ อ หาหรื อ ข อ มู ล ต า งๆ บน
อินเตอรเน็ตได หากรูตําแหนงที่อยู โดยวิธีการทํางาน
ของเบราเซอร จะขึ้นอยูกับประเภทของไฟลเหลานั้น
คําสั่งสงอีเมลล คื อ การสั่ ง ให เ ป ด โปรแกรมอี เ มลล บ นเครื่ อ ง
คอมพิ ว เตอร ข องผู ช ม เพื่ อ เตรี ย มเขี ย นข อ ความส ง
อีเมลล
การรันโปรกแกรมจาวาสคริปต สําหรับใชในการโตตอบบนเว็บเพจ การปดวินโดวเบ
ราเซอร การเปดลิงก็เปนวินโดวใหม แบบปอบอัพ
แมนสรวง แซซิ้ม มิ.ย.49 35

36. รูปแบบลิงกตางๆ บนอินเตอรเน็ต
ลิงกนับวาเปนสวนสําคัญของหนาเว็บเพจ โดยในปจจุบันไดมีลิงกในรูปแบบตางๆ มากมาย ซึ่งสามารถ
แบงไดดังนี้
ลิงกขอความ หมายถึง ลิงกที่ใชขอความเปนจุดเชื่อมโยงไปยังตําแหนงปลายทาง ซึ่งปกติจะใชสีให
แตกตางจากขอความปกติหรือมีการขีดเสนใตขอความนั้นๆ
ตัวอยางลิงกขอความ (www.mwk.ac.th/maechancop)
ลิงกรูปภาพ หมายถึง ลิงกที่ใชรูปภาพเปนจุดเชื่อมโยง โดยเมื่อนําเมาสไปวางบนรูปภาพเคอรเซอรของ
เมาสจะเปลี่ยนเปนรูปมือ
ตัวอยางลิงกรูปภาพ (www.sawasdeeit.com)
แมนสรวง แซซิ้ม มิ.ย.49 36

37. ลิงกภาพเคลื่อนไหว ในปจจุบันนี้ลิงกภาพเคลื่อนนิยมนํามาใชตกแตงหนาเว็บเพจ เนื่องจากมีความ
สวยงามและมีลูกเลนตางๆ ที่ทําใหผเู ขาชมเว็บไซตสนุกและตื่นตา โดยการลิงกแบบภาพเคลื่อนไหวจะใชรูปภาพ
เปนจุดเชื่อมโยงเชนเดียวกัน แตเมื่อนําเมาสไปวางไวบนรูปจะมีลูกเลนตางๆ เชน การเปลี่ยนรูป ขนาดสี ปรากฏ
ขึ้นมา
ภาพกอนนําเคอรเซอรไปวาง
ภาพหลังนําเคอรเซอรไปวาง
ลิงกแบบ Flash การสรางลิงกดวยโปรแกรม Macromedia Flash หรือโปรแกรม
SWISH จะมีลูกเลนความสวยงามและสามารถโตตอบกับผูเขาชมไดดวย โดยการลิงกแบบ Flash เพื่อ
ประกอบในเว็บเพจมักเปนที่นิยมในปจจุบัน
ตัวอยางลิงกแบบ Flash (www.kapook.com)
แมนสรวง แซซิ้ม มิ.ย.49 37

38. เราสามารถตรวจสอบลิงกที่สรางจากโปรแกรม Macromedia Flash โดยคลิกขวาที่ลิงก ถามี
คําสั่ง About Macromedia Flash Player แสดงวาเปนลิงกแบบ Flash
คลิกทดสอบลิงกแบบ Flash
การสรางลิงกขอความ
ในการลิงกขอความนั้นสามารถทําได 2 วิธี คือ
วิธีที่ 1 การลิงกขอความไปยังหนาเว็บเพจอื่นในเว็บไซตเดียวกัน มีขั้นตอนดังนี้
1 เลือกขอความที่ตองการ
สรางจุดลิงก
2 คลิกที่ปุม
3 ปรากฎหนาตาง Select
File จากนั้นคลิกเลือกเว็บ
เพจปลายทางที่ตองการลิงก
4 คลิกปุม OK
แมนสรวง แซซิ้ม มิ.ย.49 38

39. จากนั้นใหบันทึกเว็บเพจแลวกดปุม F12 เพื่อเรียกดูผานเบราเซอร ทดสอบโดยการคลิกที่ลิงก จากนั้น
ก็จะเชื่อมโยงไปยังหนาเว็บเพจที่กําหนด
คลิกที่ลิงก
ปรากฏหนาเว็บเพจที่ตองการ
วิธีที่ 2 การลิงกขอความไปยังสวนตางๆ ในหนาเว็บเพจเดียวกัน มีขั้นตอนดังนี้
2 คลิกเมนู Insert >
Named Anchor
3 ปรากฎหนาตาง Named Anchor
จากนั้น พิมพชื่อลิงก โดยในที่นี้พิมพคํา
วา When
1 วางเคอรเซอรหนาขอความที่ตองการลิงกไปหา 4 คลิกปุม OK
แมนสรวง แซซิ้ม มิ.ย.49 39

40. ปรากฎไอคอน
5 เลือกขอความที่ใชเปนจุดลิงก
6 พิมพ # ตามดวยชื่อจุดลิงก
โดยในที่นี้พิมพคําวา When
เมื่อบันทึกและคลิกลิงกที่สรางขึ้น บนหนาเว็บเบราเซอร
7
จะปรากฎการลิงกไปยังสวนที่ตองการ
8 ปรากฏสวนที่ลิงก
แมนสรวง แซซิ้ม มิ.ย.49 40

41. การสรางลิงกดวยรูปภาพ
การสรางลิงกดวยรูปภาพนับเปนการเพิ่มความนาสนใจกับลิงกในหนาเว็บเพจ โดยมีขั้นตอนดังนี้
1 คลิกเลือกรูปที่ตองการ
สรางลิงก
4 คลิกปุม OK
2 คลิก ในหนาตาง Properties เพื่อ
เลือกหนาเว็บเพจที่ตองการลิงกไปหา
3 ปรากฎหนาตาง Select File เลือกเว็บเพจปลายทางที่ตอง
บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร
<< ทดสอบกับเบราเซอร
หนาเว็บเพจที่ปรากฏขึ้นมา >>
แมนสรวง แซซิ้ม มิ.ย.49 41

42. การลิงกกลับไปหนาโฮมเพจ
หากตองการสรางลิงกรูปภาพกลับไปหนาโฮมเพจ (หนาแรกของเว็บไซต) มีขั้นตอนดังนี้
1 คลิกเลือกรูปที่ตองการ
สรางลิงก
2 คลิก ในหนาตาง
Properties เพื่อเลือกหนา
เว็บเพจที่ตองการลิงกไปหา
3 ปรากฎหนาตาง Select File
เลือกเว็บเพจปลายทางที่ตอง
4 คลิกปุม OK
บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร
<< ทดสอบกับเบราเซอร
หนาเว็บเพจที่ปรากฎขึ้นมา >>
แมนสรวง แซซิ้ม มิ.ย.49 42

43. การลิงกไปยังเว็บไซตอื่น
เปนการสรางลิงกไปยังเว็บไซตหรือแหลงขอมูลภายนอกเว็บไซตของเรา ซึ่งมีขั้นตอนดังนี้
1 ลากเมาสเลือกขอความ
หรือรูปภาพสําหรับ
กําหนดใหเปนจุดลิงก
2 พิมพชื่อเว็บเพจปลายทางในชอง Link ใหใส http:// จากนั้นตามดวยชื่อเว็บไซตที่ตองการลิงก
ในตัวอยางพิมพ http://www.mwk.ac.th/maechancop
บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร
ทดสอบกับเบราเซอร >>
<< หนาเว็บเพจที่ปรากฎขึ้นมา
แมนสรวง แซซิ้ม มิ.ย.49 43

44. บทที่ 7
การเพิ่มลูกเลนใหหนาเว็บเพจ
เมื่อไดเรียนรูถึงองคประกอบพื้นฐานในการสรางเว็บเพจ เชน การใสขความ รูปภาพ การใชตาราง การ
สรางลิงก เรียบรอยแลว หากตองการเพิ่มลูกเลนบนหนาเว็บเพจเพื่อดึงดูดความสนใจของผูเขาชม ก็สามารถทําได
มากมาย ไมวาจะเปนการใชภาพเคลื่อนไหว การคนหาขอมูล การสรางเมนู Pop Up เปนตน ซึ่งเราจะมาศึกษา
กันในบทนี้
การสรางชองคนหาขอมูลในเว็บเพจ
การใส Search Engine หรือเครื่องมือสําหรับการคนหาขอมูลตางๆ นับเปนสิ่งที่สําคัญขาด
ไมไดโดยการสรางชองคนหาขอมูลในเว็บเพจมีขั้นตอนดังนี้
2 คลิกปุม Form บนแท็บ Forms
1 วางเคอรเซอรบริเวณ
ที่ตองการสรางชอง
คนหาขอมูล
กําหนดคาในชอง Properties ซึ่งมีรายละเอียดดังนี้
3 ในชอง Action ใหพิมพ http://www.google.co.th/search เพื่อสราง Search engine ของ Google
4 ในชอง Method ใหเลือกคา
แมนสรวง แซซิ้ม มิ.ย.49 44

45. 6 คลิกปุม Text Field เพื่อใสฟลดรับขอมูล
7 วางในบริเวณเดิมที่เราจะสรางฟลดรับขอมูล
8 ใสชื่อของ Field ที่ตองการ
9 คลิกปุม OK
10 Text Field ที่ได
แมนสรวง แซซิ้ม มิ.ย.49 45

46. 11 คลิกปุม Button แบบ Submit เพื่อสรางปุมสงขอมูลจากฟอรมไปยัง Google
12 พิมพชื่อปุมลงไปในชอง Value
บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร
13 ทดสอบกับเบราเซอรพิมพขอมูลที่ตองการคนหาแลวคลิกที่ปุม Search
แมนสรวง แซซิ้ม มิ.ย.49 46

47. เพิ่มเติมลูกเลนดวย Behavior
ในโปรแกรม Dreamwever สามารถสรางการโตตอบระหวางองคประกอบตางๆ บนเว็บเพจกับผู
เยี่ยมชมเว็บไซต เชน เมื่อนําเมาสไปวางบนลิงกจะมีกรอบเมนูยอยปรากฏใหเลือกหรือแสดงขอความอธิบาย เปน
ตน โดยเราเรียกคุณสมบัตที่ใชสรางนี้วา Behaviors
ิ
ความหมายของ Behaviors
Behavior คือ การนํา JavaScript สําเร็จรูปที่โปรแกรม Dreamweaver สรางไวใหมาใช
Behaviors ประกอบดวย 2 สวนดวยกันคือ
1. Event หมายถึง การกําหนดเหตุการณหรือลูกเลนตางๆ ที่สรางไวใหเกิดขึ้นเมื่อไร เชน เมื่อผู
เยี่ยมชม นําเมาสไปวางหรือคลิก
2. Action หมายถึง การตอบสนองของเหตุการณที่เราตองการใหเกิดขึ้น ซึ่งเปนผลมาจากชุดคําสั่ง
ภาษา JavaScript ที่เขียนขึ้นเพื่อแสดงการทํางานตางๆ เชน การแสดงภาพ การแสดงกลอง
ขอความ การเปดหนาตางเบราเซอรใหม เปนตน
การเปดพาเนล Behavior
กอนการสราง Behavior ใหเราเปดพาเนล Behavors ขึ้นมากอน ซึ่งมีขั้นตอนดังนี้
1 คลิกเมนู Windows > Behaviors หรือกดปุม <Shift+F4>
2 ปรกฎพาเนล Behaviors
ซึ่งจะชวยในการกําหนด
Event และ Action
การนํา Behavior มาใชงาน
ขอแนะนําการใชงาน Behavior เปนหัวขอตางๆ ดังนี้
การสรางกลองขอความ (Popup Message)
เปนการแสดงกลองขอความแจงคําเตือนตางๆ ใหผเู ยี่ยมชม ซึ่งมีขั้นตอนการสรางดังนี้
แมนสรวง แซซิ้ม มิ.ย.49 47

48. 1 คลิกเลือกรูปภาพ
2 คลิกที่ปุม Add Behavior
เลือก Popup Message
3 พิมพขอความที่ตองการใหแสดงบนรูปภาพ 4 คลิกปุม OK
5 จากนั้นที่พาเนล Behavior จะปรากฏ
Action เปน Popup Message และ
Event เปน onClick
6 บันทึกเว็บเพจแลวทดสอบเบราเซอร จากนั้นคลิกที่รปภาพจะปรากฏกลองขอความที่กําหนด
ู
แมนสรวง แซซิ้ม มิ.ย.49 48

49. การใสเสียงเพลงลงในเว็บไซต
การใสเสียงเพลงนับเปนอีกวิธีหนึ่งที่ชวยเพิ่มความนาสนใจใหกับเว็บไซตของเรา ยกตัวอยางเชน ให
เปดเสียงเพลงเมื่อผูเยี่ยมชมคลิกเมาสบนปุมหรือเมื่อเปดหนาเว็บเพจ
สําหรับการใสเสียงเพลงลงในเว็บไซต มีขั้นตอนดังนี้
2 คลิกปุม Media : Flash
3 เลือก Plugin
1 วางเคอรเซอรบริเวณที่ตองการ
สรางหนาจอควบคุมเสียง
4 ปรากฎหนาตาง Select File ในชอง Look in คลิกเลือกโฟลเดอรที่เก็บไฟลเพลง
5 คลิกเลือกไฟลเพลงที่ตองการใสลงในเว็บเพจ
6 คลิกที่ปุม OK
7 คลิกที่ปุม Yes เพื่อ Copy ไฟลเพลงไวภายในเว็บของเรา
8 คลิกที่ปุม Save เพื่อบันทึกไฟลเพลง
แมนสรวง แซซิ้ม มิ.ย.49 49