Contenu connexe Similaire à Dream weaver8 Similaire à Dream weaver8 (20) Dream weaver82. คํานํา
เอกสารประกอบการสอน เรื่อง การสรางเว็บเพจดวยโปรแกรมสําเร็จรูป เลมนี้ จัดทําขึ้นเพื่อใชในการ
ประกอบการเรียนการสอน ในสาระการเรียนรูเทคโนโลยีสารสนเทศ กลุมสาระการงานอาชีพและเทคโนโลยี ซึ่ง
เนื้อภายในเอกสารนี้ มีทั้งหมด 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