เอกสารประกอบการสอน การสรางเว็บเพจดวยโปรแกรมสําร็จรูปMacromedia Dreamweaver 8           นายแมนสรวง แซซม                 ...
คํานํา          เอกสารประกอบการสอน เรื่อง การสรางเว็บเพจดวยโปรแกรมสําเร็จรูป เลมนี้ จัดทําขึ้นเพื่อใชในการประกอบการเรี...
สารบัญ                                                    หนาบทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8   1บทที่ 2...
บทที่ 1                   ทําความรูจกกับ Macromedia Dreamweaver 8                              ัM        acromedia Dreamw...
2   ปรากฏหนาตางตอนรับการติดตั้งโปรแกรม จากนั้น    คลิกที่ปุม               เพื่อเริ่มตนการติดตั้ง                    ...
7    คลิกปุม                 เพื่อเริ่มตนการติดตั้ง                                                                 ปราก...
การเขาสูโปรแกรม Dreamweaver 8         เมื่อเราติดตั้งโปรแกรม Dreamweaver 8 เรียบรอยแลว สามารถเปดโปรแกรมขึ้นมาใชงานได...
แนะนําสวนประกอบของโปรแกรม Dreamweaver 8        กอนลงมือสรางหนาเว็บเพจนั้น ขอแนะนะสวนประกอบของโปรแกรม Dreamweaver 8 ว...
ตัวอยางแบบฟอรมที่ชวยในการออกแบบ      นอกจากนี้ยังสามารถศึกษาโปรแกรม Dreamweaver 8 จากอินเตอรเน็ตในหัวขอ Take aquick t...
สวนประกอบหนาจอโปรแกรม      เมื่อเราเลือกประเภทการทํางานแลว (ในกรณีน้ีผูสอนคลิกเลือก HTML จากสวนของ CreateNew) จะปรากฏ...
คําสั่งยอยของเมนูตางๆ                         แสดงคําสั่งยอยของเมนู Table Mode3. Insert Bar   เปนแถบที่ประกอบดวยปุมค...
Flash element สําหรับนําไฟล Flash เขามาใชงาน                   Favorite สําหรับจัดเก็บออบเจ็กตที่ชอบเพื่อความสะดวกในกา...
Show Design View                           สําหรับแสดงเว็บเพจคลายกับที่เราเห็นใจเบรา                 เซอร เชน ขอความ ก...
เปนหนาตางแสดงคุณสมบัติของออปเจ็กตที่เรากําลังเลือกในเว็บเพจ และสามารถกําหนดหรือแกไข    คุณสมบัติของสวนประกอบตางๆ ใน...
บทที่ 2                                           กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต         เมื่อเริ่มตนสรางเว็บ...
Dreamweaver Site        ขั้นแรกของการสรางเว็บไซต คือการสราง Dreamweaver Site เพื่อกําหนดชื่อเว็บไซต ระบุไฟลเดอรสําหรั...
5       คลิกที่ชอง No, I do not want use                                                                         a server...
11    คลิกปุมเลือกโฟลเดอรหลักที่เตรียมไว  12    คลิกเลือกหัวขอ None เนี่องจากขณะนี้        ยังไมตองการเชื่อมตอกับเว็...
การสรางหนาเว็บเพจ           เราสามารถสรางหนาเว็บเพจขึ้นมาใหมไดทันที ในกรณีที่เปดโปรแกรมแลวไมปรากฏหนาเว็บเพจในพื้...
การกําหนดคุณสมบัติใหเว็บเพจ         เมื่อเราสรางหนาเว็บเพจขึ้นมาแลวขั้นตอนตอไปคือ การกําหนดคุณสมบัติใหเว็บเพจ โดยมีข...
กําหนดรูปแบบแสดงภาษา         เราสามารถกําหนดรูปแบบการแสดงภาษาเพื่อใหเว็บเพจแสดงผลเปนภาษาไทย โดยมีขั้นตอนดังนี้          ...
6     ปรากฎสีพื้นหลัง                                                                               บนหนาเว็บเพจที่ตองกา...
การทดสอบเว็บเพจกับเบราเซอร          ในระหวางการสรางเว็บเพจ เราตองตรวจสอบการแสดงผลของเนื้อหา เชน สี ขนาด และตําแหนงขอ...
บทที่ 3                                                                               การใสขอความบนเว็บเพจ         ขอคว...
การเลือกรูปแบบตัวอักษร (Font)         ในการเลือกรูปแบบตัวอักษรที่ไมมีมาตรฐานนั้น อาจจะเกิดปญหาไดในกรณีที่มีผูเขาชมเว็...
การนําขอมูลจากไฟลอื่นมาใช        ความสามารถพิเศษอีกอยางของ Dreamweaver 8 ก็คือ นําขอมูลตางๆ ที่อยูในไฟลประเภทอื่นเ...
บทที่ 4                                                                             การใสรูปภาพบนเว็บเพจ            ภายใน...
การใสรูปภาพลงบนเว็บ         ในการใสรูปภาพลงบนเว็บเพจ มีขั้นตอนดังนี้  1    วางเคอรเซอรตรงตําแหนงที่ตองการใสรูปภาพ  ...
การจัดการเกี่ยวกับรูปภาพ         เมื่อเรานํารูปภาพมาวางไวในเว็บเพจแลว หากเราตองการจัดเกี่ยวกับรูปภาพในลักษณะตางๆ เชน ...
3    ปรากฏการจัดวางรูปที่ตองการ                  ในการจัดวางรูปภาพประกอบขอความมีรายละเอียดดังนี้                        ...
1       คลิกที่ปุม Page Properties... หรือกดปุม <Ctrl+J> เพื่อเปดหนาตาง Page Properties   2       คลิกที่หัวขอ Apper...
บทที่ 5                                                                 การจัดหนาเว็บเพจดวยตาราง          เว็บเพจสวนมาก...
วิธีการสรางตาราง         ในโปรแกรม Dreamweaver มีเครื่องในการสรางตารางมากมาย เชน เครื่องมือในการสรางเสนขอบของตาราง กํ...
การกําหนดคุณบัติของตาราง       ในหนาตาง Properties จะแสดงคุณสมบัติของตาราง ซึ่งมีรายละเอียดในการปรับแตงดังนี้    •    T...
บทที่ 6                                                         การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ         ไฮเปอรลิง...
รูปแบบลิงกตางๆ บนอินเตอรเน็ต          ลิงกนับวาเปนสวนสําคัญของหนาเว็บเพจ โดยในปจจุบันไดมีลิงกในรูปแบบตางๆ มากม...
ลิงกภาพเคลื่อนไหว ในปจจุบันนี้ลิงกภาพเคลื่อนนิยมนํามาใชตกแตงหนาเว็บเพจ เนื่องจากมีความสวยงามและมีลูกเลนตางๆ ที่ทํา...
เราสามารถตรวจสอบลิงกที่สรางจากโปรแกรม Macromedia Flash โดยคลิกขวาที่ลิงก ถามีคําสั่ง About Macromedia Flash Player แสด...
จากนั้นใหบันทึกเว็บเพจแลวกดปุม F12 เพื่อเรียกดูผานเบราเซอร ทดสอบโดยการคลิกที่ลิงก จากนั้นก็จะเชื่อมโยงไปยังหนาเว็บเ...
ปรากฎไอคอน                                                            5     เลือกขอความที่ใชเปนจุดลิงก                ...
การสรางลิงกดวยรูปภาพ         การสรางลิงกดวยรูปภาพนับเปนการเพิ่มความนาสนใจกับลิงกในหนาเว็บเพจ โดยมีขั้นตอนดังนี้ ...
การลิงกกลับไปหนาโฮมเพจ         หากตองการสรางลิงกรูปภาพกลับไปหนาโฮมเพจ (หนาแรกของเว็บไซต) มีขั้นตอนดังนี้          ...
การลิงกไปยังเว็บไซตอื่น         เปนการสรางลิงกไปยังเว็บไซตหรือแหลงขอมูลภายนอกเว็บไซตของเรา ซึ่งมีขั้นตอนดังนี้   ...
บทที่ 7                                                                  การเพิ่มลูกเลนใหหนาเว็บเพจ           เมื่อไดเ...
6      คลิกปุม Text Field          เพื่อใสฟลดรับขอมูล            7    วางในบริเวณเดิมที่เราจะสรางฟลดรับขอมูล     ...
11      คลิกปุม Button        แบบ Submit เพื่อสรางปุมสงขอมูลจากฟอรมไปยัง Google                                 12  ...
เพิ่มเติมลูกเลนดวย Behavior          ในโปรแกรม Dreamwever สามารถสรางการโตตอบระหวางองคประกอบตางๆ บนเว็บเพจกับผูเยี่...
1       คลิกเลือกรูปภาพ                                                                       2     คลิกที่ปุม Add Behavi...
Dream weaver8
Dream weaver8
Dream weaver8
Dream weaver8
Dream weaver8
Dream weaver8
Upcoming SlideShare
Loading in...5
×

Dream weaver8

1,376
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,376
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
113
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dream weaver8

  1. 1. เอกสารประกอบการสอน การสรางเว็บเพจดวยโปรแกรมสําร็จรูปMacromedia Dreamweaver 8 นายแมนสรวง แซซม ิ้ ครู คศ.1 โรงเรียนแมจนวิทยาคม ั สํานักงานเขตพื้นที่การศึกษาเชียงราย เขต 3 อําเภอแมจัน จังหวัดเชียงราย
  2. 2. คํานํา เอกสารประกอบการสอน เรื่อง การสรางเว็บเพจดวยโปรแกรมสําเร็จรูป เลมนี้ จัดทําขึ้นเพื่อใชในการประกอบการเรียนการสอน ในสาระการเรียนรูเทคโนโลยีสารสนเทศ กลุมสาระการงานอาชีพและเทคโนโลยี ซึ่งเนื้อภายในเอกสารนี้ มีทั้งหมด 7 บท ประกอบดวย บทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต บทที่ 3 การใสขอความบนเว็บเพจ บทที่ 4 การใสรูปภาพบนเว็บเพจ บทที่ 5 การจัดหนาเว็บเพจดวยตาราง บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บบทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ ซึ่งสามารถนําไปปฏิบัติและใชงานจริงได และสามารถนําไปสูการเปนมืออาชีพในการสรางเว็บเพจไดอีกดวย หวังวาเอกสารประกอบการสอนเลมนี้คงเปนประโยชนตอนักเรียน และผูสนใจทั่วไปไดเปนอยางดี นายแมนสรวง แซซ้มิ มิถุนายน 2549แมนสรวง แซซิ้ม มิ.ย.49 2
  3. 3. สารบัญ หนาบทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8 1บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต 14บทที่ 3 การใสขอความบนเว็บเพจ 23บทที่ 4 การใสรูปภาพบนเว็บเพจ 26บทที่ 5 การจัดหนาเว็บเพจดวยตาราง 31บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ 34บทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ 43แมนสรวง แซซิ้ม มิ.ย.49 3
  4. 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. 5. 2 ปรากฏหนาตางตอนรับการติดตั้งโปรแกรม จากนั้น คลิกที่ปุม เพื่อเริ่มตนการติดตั้ง 3 ปรากฏขอความการใชงานโปรแกรมคลิกที่ปุม เพื่อยอมรับขอตกลง 4 คลิกปุม หากตองการเลือก ตําแหนงในการติดตั้งโปรแกรม 5 คลิกปุม 6 คลิกปุม แมนสรวง แซซิ้ม มิ.ย.49 5
  6. 6. 7 คลิกปุม เพื่อเริ่มตนการติดตั้ง ปรากฏสถานะการติดตั้ง 7 เมื่อติดตั้งโปรแกรมเรียบรอยแลว คลิกที่ปุม เพียงเทานี้ก็สามารถใชโปรแกรม Dreamweaver 8 ไดแลว แมนสรวง แซซิ้ม มิ.ย.49 6
  7. 7. การเขาสูโปรแกรม Dreamweaver 8 เมื่อเราติดตั้งโปรแกรม Dreamweaver 8 เรียบรอยแลว สามารถเปดโปรแกรมขึ้นมาใชงานไดเลย โดยมีขั้นตอนดังนี้ 2 เลือก All Programs>Macromedia> Macromedia Dreamweaver 8 เพื่อ เริ่มตนการใชงาน 1 คลิกปุม 3 เลือกรูปแบบพื้นที่ทํางานของโปรแกรม โดยมีรายละเอียดดังนี้ Designer หมายถึง การสรางและออกแบบเว็บเพจโดยทั่วไป ซึ่ง สวนมากนิยมเลือกรูปแบบนี้ Code หมายถึง วิธีการสรางเว็บเพจที่เนนการเขียนชุดคําสั่งเอง จากนั้นคลิกปุม OK (โดยในที่เลือก Disigner)แมนสรวง แซซิ้ม มิ.ย.49 7
  8. 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. 9. ตัวอยางแบบฟอรมที่ชวยในการออกแบบ นอกจากนี้ยังสามารถศึกษาโปรแกรม Dreamweaver 8 จากอินเตอรเน็ตในหัวขอ Take aquick tour of Dereamweaver. หรือเรียนรูจากโปรแกรมชวยสอนจากหัวขอ Learn aboutdocumentation resources เรียนรูจากโปรแกรมชวยสอน (Dreamweaver Help)แมนสรวง แซซิ้ม มิ.ย.49 9
  10. 10. สวนประกอบหนาจอโปรแกรม เมื่อเราเลือกประเภทการทํางานแลว (ในกรณีน้ีผูสอนคลิกเลือก HTML จากสวนของ CreateNew) จะปรากฏหนาตางการทํางานของโปรแกรม 1 Titlebar 2 Menu Bar 3 Insert Bar 4 Toolbar5 Document Area 6 Status Bar 7 Properties Inspector 8 Panel1. Titlebar เปนสวนแสดงชื่อโปรแกรม Dreamweaver 8 และชื่อไฟลที่ทํางานอยู2. Menu Bar เปนสวนที่รวบรวมเมนูคําสั่งการทํางานเอาไว ซึ่งสามารถเปดเมนูตางๆ ขึ้นมาใชงานโดยคลิกที่ชื่อเมนูแลวเลื่อนเมาสไปยังตําแหนงที่ตองการได หากเมนูนั้นมีคําสั่งยอยจะมีลูกศร แลวเลื่อนเมาสไปยังคําสั่งยอยเหลานั้น ไดแมนสรวง แซซิ้ม มิ.ย.49 10
  11. 11. คําสั่งยอยของเมนูตางๆ แสดงคําสั่งยอยของเมนู Table Mode3. Insert Bar เปนแถบที่ประกอบดวยปุมคําสั่งที่ใชในการแทรกออบเจ็กต (องคประกอบตางๆ) ลงในเว็บเพจ โดยแบงเปน หมวดหมูซึ่งมีรายละเอียดดังนี้ Common เปนชุดคําสั่งสําหรับแทรกออปเจ็กตที่เรียกใชงานบอยๆ ในการสรางเว็บเพจ เชน รูปภาพ กราฟก ตาราง ไฟลมีเดีย เปนตน Layout สําหรับเลือกมุมมองในการสรางเว็บเพจ เชน มุมมองปกติ มุมมองแบบขยาย เพื่อใหเห็นออปเจ็กตตางๆ ไดอยางชัดเจน Forms สํากรับแทรกออปเจ็กตที่ใชสรางแบบฟอรมรับขอมูลจากผูชม เชน ชองรับขอความ และฟลดชนิดตางๆ Text สําหรับจัดรูปแบบขอความในเว็บเพจ เชน หัวเรื่อง ตัวหนา ตัวเอียง จัดหัวขอ จัดยอ หนา และแทรกสัญลักษณพิเศษตางๆ Application สําหรับแทรกคําสั่งและการดึงขอมูลจากฐานขอมูลมาแสดงบนเว็บแมนสรวง แซซิ้ม มิ.ย.49 11
  12. 12. Flash element สําหรับนําไฟล Flash เขามาใชงาน Favorite สําหรับจัดเก็บออบเจ็กตที่ชอบเพื่อความสะดวกในการใชงาน Show as Tabs เปลี่ยนแถบเครื่องมือใหแสดงผลในลักษณะแท็บคําสั่งเรียงตอกันไป4. Toolbar เปนแถบเครื่องมือที่เก็บปุมคําสั่งที่ตองใชงานบอยๆ ซึ่งประกอบดวย Show Code View สําหรับแสดงการทํางานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคําสั่ง HTML หรือคําสั่งภาษาสคริปต (Script) อื่นๆ ไดดวย Show Code and Design สําหรับแสดงการทํางานแบบ HTML กับ การแสดงพื้นที่ออกแบบ โดยจะแสดงสวนของคําสั่งไวดานบนและแสดงเว็บเพจปกติไว ดานลางแมนสรวง แซซิ้ม มิ.ย.49 12
  13. 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. 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. 15. บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต เมื่อเริ่มตนสรางเว็บไซตนั้น เราตองทําความเขาใจในเรื่องการกําหนดโครงสรางการจัดขอมูลของเว็บไซตและการกําหนดคุณสมบัติตางๆ โดยใน Chapter นี้จะอธิบายขั้นตอนในการสรางเว็บไซต และ เว็บเพจและกําหนดคุณสมบัติตางๆ เชน การแกไขและการบันทึกเว็บไซต เพื่อเตรียมความพรอมกอนการใสเนื้อหาใหกับเว็บเพจการกําหนดไฟลและโฟลเดอรภายในเว็บไซต ภายในเว็บไซตประกอบดวยหนาเว็บเพจและไฟลตางๆ เปนจํานวนมาก หากเว็บไซตของเรามีขนาดใหญจํานวนหนาเว็บเพจและไฟลตางๆ ก็จะมีจํานวนมากขึ้น ดังนั้นการวางแผนในการจัดเก็บไฟลเหลานี้ก็นับวาเปนสิ่งสําคัญ โครงสรางโฟลเดอรภายในเว็บไซตจะประกอบไปดวยโฟลเดอรหลักและโฟลเดอรยอยๆ ที่ซอนกันอยู เปนชั้น ๆ ลงมา ดังนั้นในการแบงโฟลเดอรหสําหรับเก็บไฟลควรแบงเปนหมวดหมู และแยกตามประเภทของไฟล เชน เว็บเพจ กราฟก สคริปต เปนตน โครงสรางของโฟลเดอรดังรูปตัวอยาง เปนการกําหนดตําแหนงและ สถานที่เก็บไฟลขอมูล โดยมีรายระเอียดของโครงสรางโฟลเดอร ภายในเว็บไซต ดังนี้ 1. WEBket3 เปนโฟลเดอรหลักของเว็บไซต สําหรับ เก็บไฟล HTML ของเว็บเพจ 2. Data เปนโฟลเดอรยอยเก็บฐานขอมูล 3. Flash เปนโฟลเดอรยอยเก็บไฟลที่เปนภาพเคลื่อนไหว ที่ทําจากโปรแกรมแฟลช 4. galary เปนโฟลเดอรยอยที่เก็บเกี่ยวกับภาพที่ตางๆ ที่  เปนกิจกรรมตางๆ 5. image เปนโฟลเดอรยอยที่เก็บรูปภาพตางๆ ที่ใชใน เว็บเพจทั้งหมด ตัวอยางโครงสรางโฟลเดอรภายในเว็บไซตแมนสรวง แซซิ้ม มิ.ย.49 15
  16. 16. Dreamweaver Site ขั้นแรกของการสรางเว็บไซต คือการสราง Dreamweaver Site เพื่อกําหนดชื่อเว็บไซต ระบุไฟลเดอรสําหรับจัดเก็บไฟล เปนตน โดยโฟลเดอรน้จะเปนแหลงรวมเว็บเพจ กราฟก ไฟลอื่นที่สําคัญใหอยู ีภายในสถานที่เดียวกัน เพื่อความสะดวกในการอัพโหลดขึ้นสูอินเตอรเน็ต โดยการสราง DreamweaverSite มีขั้นตอนดังนี้ 1 คลิกเมนู Site>Manage 2 คลิกปุม แลวเลือกคําสั่ง Site 3 พิมพชื่อไซตที่ตองการลงในชอง What would you like to name your site? (ควรเปนภาษาอังกฤษ) 4 คลิกปุม เพื่อเริ่มตนขั้นตอไปแมนสรวง แซซิ้ม มิ.ย.49 16
  17. 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. 18. 11 คลิกปุมเลือกโฟลเดอรหลักที่เตรียมไว 12 คลิกเลือกหัวขอ None เนี่องจากขณะนี้ ยังไมตองการเชื่อมตอกับเว็บเซิรฟเวอร  13 คลิกปุม 14 คลิกที่ปุม เพื่อสราง Dreamweaver Site ตามคาที่กาหนดไว ํ ปรากฏชื่อไซตบริเวณพาเนล Filesแมนสรวง แซซิ้ม มิ.ย.49 18
  19. 19. การสรางหนาเว็บเพจ เราสามารถสรางหนาเว็บเพจขึ้นมาใหมไดทันที ในกรณีที่เปดโปรแกรมแลวไมปรากฏหนาเว็บเพจในพื้นที่สรางงาน โดยการสรางหนาเว็บเพจมีขั้นตอนดังนี้ 1 คลิกเมนู File > New 2 คลิกเลือก Basic page 3 คลิกเลือก HTML เพื่อสรางหนา เว็บเพจเปลาแบบธรรมดา 4 คลิกปุม Create 5 ปรากฏหนาวางเปลา สําหรับสรางเว็บเพจแมนสรวง แซซิ้ม มิ.ย.49 19
  20. 20. การกําหนดคุณสมบัติใหเว็บเพจ เมื่อเราสรางหนาเว็บเพจขึ้นมาแลวขั้นตอนตอไปคือ การกําหนดคุณสมบัติใหเว็บเพจ โดยมีขั้นตอนดังนี้ 1 คลิกเมนู Modify > Page Properties 2 ปรากฎหนาตาง Page Properties สําหรับ กําหนดคุณสมบัติใหเว็บเพจ ชื่อของเว็บเพจ ชื่อของเว็บเพจจะไปปรากฏอยูที่แถบ Titlebar โดยการตั้งชื่อหนาเว็บเพจมีขั้นตอนดังนี้ 1 ในชอง Category 2 พิมพชื่อเว็บที่ตองการ คลิกเลือก Title/Encoding 3 คลิกปุม Apply 4 ปรากฏชื่อที่ตั้งบนแถบ Titlebarแมนสรวง แซซิ้ม มิ.ย.49 20
  21. 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. 22. 6 ปรากฎสีพื้นหลัง บนหนาเว็บเพจที่ตองการการบันทึกเว็บเพจ เมื่อสรางและกําหนดคุณสมบัติพื้นฐานของเว็บเพจเรียบรอยแลว ขั้นตอนตอไปที่ขาดไมไดคือ การบันทึกเว็บเพจเพื่อปองกันการผิดพลาดระหวางการทํางาน โดยการบันทึกเว็บเพจมีขั้นตอนดังนี้ 1 คลิกเมนู File > Save หรือปุม <Ctrl+S>  2 เลือกโฟลเดอร 3 ตั้งชื่อไฟล 4 คลิกปุม Save เพื่อบันทึกเว็บเพจแมนสรวง แซซิ้ม มิ.ย.49 22
  23. 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. 24. บทที่ 3 การใสขอความบนเว็บเพจ ขอความตางๆ บนหนาเว็บเพจนับวาเปนองคประกอบที่มีความสําคัญมาก เนื่องจากขอความที่ปรากฏบนหนาเว็บเพจ จะเปนตัวกลางสื่อความหมายถึงผูเขามาเยี่ยมชมเว็บไซต ดวยเหตุนี้จึงจําเปนตองจัดวางขอความเนื้อหาตางๆ บนหนาเว็บเพจใหเหมาะสมสวยงาม เพื่อเปนสิ่งดึงดูดใหมีผูเขาชมเว็บไซตของเรามากๆเริ่มใสขอความในเว็บเพจ วางเคอรเ ซอรใ นตํา แหนง ที่ตอ งการพิม พ ขอ ความ แล วพิ ม พข อ ความที่ต อ งการ เพีย งเทานี้ ก็จ ะได ขอความที่ตองการแลว แตถาตองการตกแตงสวนตางๆ เพิ่มเติม เชน ใสสีพื้นหลังหรือกําหนดระยะหาง จากขอบก็สามารถทําไดเชนกันแมนสรวง แซซิ้ม มิ.ย.49 24
  25. 25. การเลือกรูปแบบตัวอักษร (Font) ในการเลือกรูปแบบตัวอักษรที่ไมมีมาตรฐานนั้น อาจจะเกิดปญหาไดในกรณีที่มีผูเขาชมเว็บไซตแลวอานยาก ไมสวย หรือเปนภาษาที่อานไมออก ดังนั้นจึงควรใชรูปแบบตัวอักษรที่เปนมาตรฐาน เชน MS SansSerif เนื่องจากสามารถแสดงผลบนเบราเซอรทุกชนิด โดยการเลือกรูปแบบตัวอักษร (Font) มีขั้นตอนดังนี้ 2 คลิกเลือก Edit Font List 1 คลิกในชอง Font บริเวณ ดานลางในหนาตาง Properties 4 คลิกที่ปุม สําหรับ 3 คลิกเลือกรูปแบบตัวอักษร เพิ่มรูปแบบตัวอักษรอีก MS Sans Serif Properties Inspector ของขอความ สรางหัวขอ ขนาดตัวอักษร สีตัวอักษร ตัวหนา ตัวเอียง จัดเรียงหัวขอและลิสตบุค จัดตําแหนงยอหนาขอความแมนสรวง แซซิ้ม มิ.ย.49 25
  26. 26. การนําขอมูลจากไฟลอื่นมาใช ความสามารถพิเศษอีกอยางของ Dreamweaver 8 ก็คือ นําขอมูลตางๆ ที่อยูในไฟลประเภทอื่นเชน Word, Excel, Powerpoint เปนตน มาวางบนพื้นที่สรางงานซึ่งจะชวยเพิ่มความสะดวกและประหยัดเวลาในการทํางานเปนอยางมาก โดยมีขั้นตอนดังนี้ 1 เลือกขอมูลจากหนาเอกสาร Word 2 คลิกเมาสขวาเลือกคําสั่ง คัดลอก 3 กลับมาทํางานในหนาเว็บเพจของ โปรแกรม Dreamweaver 8 จากนั้นคลิกเมนู Edit > Paste 4 ปรากฏไฟลจากหนาเอกสาร Word มาใชในเว็บเพจของ Dreaweaver 8 แลวแมนสรวง แซซิ้ม มิ.ย.49 26
  27. 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. 28. การใสรูปภาพลงบนเว็บ ในการใสรูปภาพลงบนเว็บเพจ มีขั้นตอนดังนี้ 1 วางเคอรเซอรตรงตําแหนงที่ตองการใสรูปภาพ 2 ในแท็บ Common คลิกที่ปุม เลือก Image 3 ในชอง Look in ใหเลือกโฟลเดอรที่เก็บไฟลภาพ 4 เลือกรูปภาพที่ตองการ 5 คลิกปุม OK 6 ปรากฏหนาตางแสดงขอความวา ภาพนี้อยู 7 เลือกโฟลเดอรที่ใชเก็บภาพ นอกเว็บไซตใหกอบปเขามาในเว็บไซต  จากนั้นคลิกปุม Yes 8 คลิกที่ปุม Save 9 ปรากฏรูปภาพที่ตองการบนเว็บเพจแมนสรวง แซซิ้ม มิ.ย.49 28
  29. 29. การจัดการเกี่ยวกับรูปภาพ เมื่อเรานํารูปภาพมาวางไวในเว็บเพจแลว หากเราตองการจัดเกี่ยวกับรูปภาพในลักษณะตางๆ เชน การปรับขนาด การจัดวางรูป การใสขอความอธิบายรูปภาพ การใสกรอบใหรูปภาพ การกําหนดระยะหางระหวางรูปภาพ เปนตน เราสามารถจัดการเกี่ยวกับรูปภาพไดโดยใช กําหนดระยะหางของรูป ใสกรอบใหรูปภาพ การจัดวางรูป ปรับแสงและความคมชัด ปรับขนาดของรูปภาพ ใสขอความอธิบายรูปภาพการจัดวางรูปภาพประกอบขอความ เราสามารถจัดวางรูปภาพประกอบขอความบนหนาเว็บเพจใหมีความสวยงาม เปนที่นาดูของผูเขามาเยี่ยมชมเว็บไซต โดยมีขั้นตอนดังนี้ 1 คลิกเลือกรูปภาพที่ตองการ 2 คลิกเลือกรูปแบบการจัดวางรูปภาพ ในหนาตาง Properties ของ Align โดยในที่นี้เลือก Left เพื่อจัด วางรูปภาพไวดานซายมือแมนสรวง แซซิ้ม มิ.ย.49 29
  30. 30. 3 ปรากฏการจัดวางรูปที่ตองการ ในการจัดวางรูปภาพประกอบขอความมีรายละเอียดดังนี้ • Default เปนการจัดเรียงแบบปกติ • Baseline เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกับบรรทัดของ ขอความ • Top เปนการจัดใหขอบบนของรูปภาพอยูแนวเดียวกันกับบรรทัดของขอความ • Middle เปนการจัดใหตรงกลางของรูปภาพอยูแนวเดียวกันกับบรรทัดของ ขอความ • Bottom เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกันกับบรรทัดของ ขอความคลายการจัดแบบ Baseline • Text Top เปนการจัดใหขอบบนของรูปภาพอยูแนวเดียวกับบรรทัดของ ขอความคลายการจัดแบบ Top • Absolote Bottom เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกับ สวนกลางของบรรทัดขอความ • Left เปนการจัดใหรูปภาพอยูทางซายมือของบรรทัดขอความ • Right เปนการจัดใหรูปภาพอยูทางขวามือของบรรทัดขอความการใสรูปภาพเปนฉากหลัง การใสรูปภาพเปนฉากหลัง (Background) ถือวาเปนการเพิ่มความสวยงามและนาสนใจใหกับเว็บเพจ ซึ่งภาพที่นาจะนํามาเปนฉากหลังตองไมมีลวดลายหรือสีสันมากเกินไป เพื่อไมใหผูชมเว็บไซตสับสนหรือสีของพื้นหลังอาจตัดกับสีของขอความทําใหลําบากในการอานได ดังนั้นภาพที่นํามาเปนฉากหลังตองเปนสีที่กลมกลืนกับขอความหรือรูปภาพที่วางไวในเว็บเพจ ซึ่งการใสรูปภาพเปนฉากหลังมีขั้นตอนดังนี้แมนสรวง แซซิ้ม มิ.ย.49 30
  31. 31. 1 คลิกที่ปุม Page Properties... หรือกดปุม <Ctrl+J> เพื่อเปดหนาตาง Page Properties 2 คลิกที่หัวขอ Apperance 4 เลือกไฟลรูปภาพที่ตองการนํามาเปนฉากหลัง  3 คลิกที่ปุม Browse... 5 คลิกที่ปุม OK 6 คลิกที่ปุม OK ที่ หนาตาง Page Properties อีกครั้ง 7 ปรากฏภาพที่ นํ า มาเป น ฉากหลังเรียบรอยแลวแมนสรวง แซซิ้ม มิ.ย.49 31
  32. 32. บทที่ 5 การจัดหนาเว็บเพจดวยตาราง เว็บเพจสวนมากมักนิยมใชตารางในการจัดวางองคประกอบ ซึ่งสวนมากจะเกี่ยวกับการนําเสนอขอมูลที่เปนรายชื่อหรือรายการตางๆ และที่สําคัญคือใชตารางสําหรับจัดเลยเอาตหนาเอกสาร เพื่อชวยในการแสดงขอมูลและองคประกอบตรงตามตําแหนงที่ตองการโครงสรางของตาราง กอนที่จะลงมือสรางตารางควรมาทําความรูจักโครงสรางของตารางซึ่งจะชวยทํางานไดงายขึ้น โดยมีรายละเอียดดังนี้ • คอลัมน (Column) ชองในแนวตั้ง • แถว (Row) ชองในแนวนอน • เซลล (Cell) ชองแตละชองที่อยูในตาราง • Cell Spacing เปนชองวางระหวางเซลลแตละเซลล • Cell Padding เปนระยะหางของขอความหรือรูปภาพจากขอบทุกดานของเซลล • สีพื้นเซลล • ขอบตาราง • ขอบเซลล • ความกวางทั้งหมดของตาราง • ความกวางจริงในคอลัมน • ความกวางของคอลัมนที่กําหนด • คอลัมนที่ไมกําหนดความกวาง Row Cell Padding สีพื้นเซลล Cell ขอบเซลล ขอบตาราง Column คอลัมนที่ไมกําหนดความกวาง ความกวางจริงในคอลัมน ความกวางทั้งหมดของตารางแมนสรวง แซซิ้ม มิ.ย.49 32
  33. 33. วิธีการสรางตาราง ในโปรแกรม Dreamweaver มีเครื่องในการสรางตารางมากมาย เชน เครื่องมือในการสรางเสนขอบของตาราง กําหนดสีพื้นตารางและเซลล การจัดขอมูลตางๆ ภายในเซลล เปนตน โดยวีธีการสรางตารางมีขั้นตอนดังนี้ 1 คลิกแท็บ Common ที่แถบ Insert Bar 2 คลิกที่ปุม Insert Table เพื่อสรางตาราง 3 ปรากฎหนาตาง Table จากนั้นในชอง Rows ใหกําหนดจํานวนแถว ของตาราง โดยในที่นี้กําหนดเปน 3 4 ในชอง Column ใหกําหนดจํานวน คอลัมนของตาราง โดยในที่นี้กําหนด เปน 3แมนสรวง แซซิ้ม มิ.ย.49 33
  34. 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. 35. บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ ไฮเปอรลิงก (Hyperlink) หรือที่เรียกวา “ลิงก” เปนการเชื่อมโยงเว็บไซตบนอินเตอรเน็ตจากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง หรือเชื่อมตอเขาสูอีเมลลของ Webmaster เพื่อติดตอสื่อสารกัน การเชื่อมโยงในลักษณะนี้นับวามีประโยชนอยางมาก เนื่องจากทําใหผูเขาชม สามารถเขาถึงขอมูลและเนื้อหาทุกหนาเว็บเพจภายในเว็บไซตของเราไดสวนประกอบของไฮเปอรลิงก ในการทํางานของไฮเปอรลิงกมีสวนประกอบดังนี้ 1. ตนทาง (Source Anchor) หมายถึง สวนประกอบบนเว็บที่เปนจะลิงก ซึ่งเมื่อเลื่อเมาสไปชี้ พอยเตอรจะเปลี่ยนเปนรูปมือ และเมื่อคลิกเลือกหนาเว็บหรือขอมูลปลายทางจะปรากฏขึ้นมา ซึ่ง อาจเปนขอความหรือรูปภาพก็ได 2. ปลายทาง (Destination Anchor) หมายถึง เนื้อหาขอมูลตางๆ ไมวาจะเปนขอความหรือ รูปภาพ ซึ่งถูกเรียกใหปรากฏขึ้นมาเมื่อมีผูชมคลิกที่ลิงกตนทาง ซึ่งลิงกปลายทางแบงไดเปนหลาย รูปแบบ ดังนี้ ตําแหนงเฉพาะบนเว็บเพจ คือการสั่งใหเบราเซอรเปดเว็บเพจพรอมทั้งเลื่อนไปยัง ตําแหนงที่ระบุไวโดยทันที เว็บเพจหรือเว็บไซต โดยสวนมากลิงกบ นเว็บเพจจะใชสําหรับ เปดไปยัง หนาเว็บเพจอื่นภายในเว็บไซตเดียวกัน หรือเปดไปยัง หนาเว็บไซตอื่น ไฟลเอกสารอื่นๆ สามารถลิ ง ก ไ ปยั ง เนื้ อ หาหรื อ ข อ มู ล ต า งๆ บน อินเตอรเน็ตได หากรูตําแหนงที่อยู โดยวิธีการทํางาน ของเบราเซอร จะขึ้นอยูกับประเภทของไฟลเหลานั้น คําสั่งสงอีเมลล คื อ การสั่ ง ให เ ป ด โปรแกรมอี เ มลล บ นเครื่ อ ง คอมพิ ว เตอร ข องผู ช ม เพื่ อ เตรี ย มเขี ย นข อ ความส ง อีเมลล การรันโปรกแกรมจาวาสคริปต สําหรับใชในการโตตอบบนเว็บเพจ การปดวินโดวเบ ราเซอร การเปดลิงก็เปนวินโดวใหม แบบปอบอัพแมนสรวง แซซิ้ม มิ.ย.49 35
  36. 36. รูปแบบลิงกตางๆ บนอินเตอรเน็ต ลิงกนับวาเปนสวนสําคัญของหนาเว็บเพจ โดยในปจจุบันไดมีลิงกในรูปแบบตางๆ มากมาย ซึ่งสามารถแบงไดดังนี้ ลิงกขอความ หมายถึง ลิงกที่ใชขอความเปนจุดเชื่อมโยงไปยังตําแหนงปลายทาง ซึ่งปกติจะใชสีใหแตกตางจากขอความปกติหรือมีการขีดเสนใตขอความนั้นๆ ตัวอยางลิงกขอความ (www.mwk.ac.th/maechancop) ลิงกรูปภาพ หมายถึง ลิงกที่ใชรูปภาพเปนจุดเชื่อมโยง โดยเมื่อนําเมาสไปวางบนรูปภาพเคอรเซอรของเมาสจะเปลี่ยนเปนรูปมือ ตัวอยางลิงกรูปภาพ (www.sawasdeeit.com)แมนสรวง แซซิ้ม มิ.ย.49 36
  37. 37. ลิงกภาพเคลื่อนไหว ในปจจุบันนี้ลิงกภาพเคลื่อนนิยมนํามาใชตกแตงหนาเว็บเพจ เนื่องจากมีความสวยงามและมีลูกเลนตางๆ ที่ทําใหผเู ขาชมเว็บไซตสนุกและตื่นตา โดยการลิงกแบบภาพเคลื่อนไหวจะใชรูปภาพเปนจุดเชื่อมโยงเชนเดียวกัน แตเมื่อนําเมาสไปวางไวบนรูปจะมีลูกเลนตางๆ เชน การเปลี่ยนรูป ขนาดสี ปรากฏขึ้นมาภาพกอนนําเคอรเซอรไปวาง ภาพหลังนําเคอรเซอรไปวาง ลิงกแบบ Flash การสรางลิงกดวยโปรแกรม Macromedia Flash หรือโปรแกรมSWISH จะมีลูกเลนความสวยงามและสามารถโตตอบกับผูเขาชมไดดวย โดยการลิงกแบบ Flash เพื่อประกอบในเว็บเพจมักเปนที่นิยมในปจจุบัน ตัวอยางลิงกแบบ Flash (www.kapook.com)แมนสรวง แซซิ้ม มิ.ย.49 37
  38. 38. เราสามารถตรวจสอบลิงกที่สรางจากโปรแกรม Macromedia Flash โดยคลิกขวาที่ลิงก ถามีคําสั่ง About Macromedia Flash Player แสดงวาเปนลิงกแบบ Flash คลิกทดสอบลิงกแบบ Flashการสรางลิงกขอความ ในการลิงกขอความนั้นสามารถทําได 2 วิธี คือ วิธีที่ 1 การลิงกขอความไปยังหนาเว็บเพจอื่นในเว็บไซตเดียวกัน มีขั้นตอนดังนี้ 1 เลือกขอความที่ตองการ สรางจุดลิงก 2 คลิกที่ปุม 3 ปรากฎหนาตาง Select File จากนั้นคลิกเลือกเว็บ เพจปลายทางที่ตองการลิงก 4 คลิกปุม OKแมนสรวง แซซิ้ม มิ.ย.49 38
  39. 39. จากนั้นใหบันทึกเว็บเพจแลวกดปุม F12 เพื่อเรียกดูผานเบราเซอร ทดสอบโดยการคลิกที่ลิงก จากนั้นก็จะเชื่อมโยงไปยังหนาเว็บเพจที่กําหนดคลิกที่ลิงก ปรากฏหนาเว็บเพจที่ตองการ วิธีที่ 2 การลิงกขอความไปยังสวนตางๆ ในหนาเว็บเพจเดียวกัน มีขั้นตอนดังนี้ 2 คลิกเมนู Insert > Named Anchor 3 ปรากฎหนาตาง Named Anchor จากนั้น พิมพชื่อลิงก โดยในที่นี้พิมพคํา วา When 1 วางเคอรเซอรหนาขอความที่ตองการลิงกไปหา 4 คลิกปุม OKแมนสรวง แซซิ้ม มิ.ย.49 39
  40. 40. ปรากฎไอคอน 5 เลือกขอความที่ใชเปนจุดลิงก 6 พิมพ # ตามดวยชื่อจุดลิงก โดยในที่นี้พิมพคําวา When เมื่อบันทึกและคลิกลิงกที่สรางขึ้น บนหนาเว็บเบราเซอร 7 จะปรากฎการลิงกไปยังสวนที่ตองการ 8 ปรากฏสวนที่ลิงกแมนสรวง แซซิ้ม มิ.ย.49 40
  41. 41. การสรางลิงกดวยรูปภาพ การสรางลิงกดวยรูปภาพนับเปนการเพิ่มความนาสนใจกับลิงกในหนาเว็บเพจ โดยมีขั้นตอนดังนี้ 1 คลิกเลือกรูปที่ตองการ สรางลิงก 4 คลิกปุม OK 2 คลิก ในหนาตาง Properties เพื่อ เลือกหนาเว็บเพจที่ตองการลิงกไปหา 3 ปรากฎหนาตาง Select File เลือกเว็บเพจปลายทางที่ตอง บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร << ทดสอบกับเบราเซอร หนาเว็บเพจที่ปรากฏขึ้นมา >>แมนสรวง แซซิ้ม มิ.ย.49 41
  42. 42. การลิงกกลับไปหนาโฮมเพจ หากตองการสรางลิงกรูปภาพกลับไปหนาโฮมเพจ (หนาแรกของเว็บไซต) มีขั้นตอนดังนี้ 1 คลิกเลือกรูปที่ตองการ สรางลิงก 2 คลิก ในหนาตาง Properties เพื่อเลือกหนา เว็บเพจที่ตองการลิงกไปหา 3 ปรากฎหนาตาง Select File เลือกเว็บเพจปลายทางที่ตอง 4 คลิกปุม OK บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร << ทดสอบกับเบราเซอร หนาเว็บเพจที่ปรากฎขึ้นมา >>แมนสรวง แซซิ้ม มิ.ย.49 42
  43. 43. การลิงกไปยังเว็บไซตอื่น เปนการสรางลิงกไปยังเว็บไซตหรือแหลงขอมูลภายนอกเว็บไซตของเรา ซึ่งมีขั้นตอนดังนี้ 1 ลากเมาสเลือกขอความ หรือรูปภาพสําหรับ กําหนดใหเปนจุดลิงก 2 พิมพชื่อเว็บเพจปลายทางในชอง Link ใหใส http:// จากนั้นตามดวยชื่อเว็บไซตที่ตองการลิงก ในตัวอยางพิมพ http://www.mwk.ac.th/maechancop บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร ทดสอบกับเบราเซอร >> << หนาเว็บเพจที่ปรากฎขึ้นมาแมนสรวง แซซิ้ม มิ.ย.49 43
  44. 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. 45. 6 คลิกปุม Text Field เพื่อใสฟลดรับขอมูล 7 วางในบริเวณเดิมที่เราจะสรางฟลดรับขอมูล 8 ใสชื่อของ Field ที่ตองการ 9 คลิกปุม OK 10 Text Field ที่ไดแมนสรวง แซซิ้ม มิ.ย.49 45
  46. 46. 11 คลิกปุม Button แบบ Submit เพื่อสรางปุมสงขอมูลจากฟอรมไปยัง Google 12 พิมพชื่อปุมลงไปในชอง Value บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร 13 ทดสอบกับเบราเซอรพิมพขอมูลที่ตองการคนหาแลวคลิกที่ปุม Searchแมนสรวง แซซิ้ม มิ.ย.49 46
  47. 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. 48. 1 คลิกเลือกรูปภาพ 2 คลิกที่ปุม Add Behavior เลือก Popup Message 3 พิมพขอความที่ตองการใหแสดงบนรูปภาพ 4 คลิกปุม OK 5 จากนั้นที่พาเนล Behavior จะปรากฏ Action เปน Popup Message และ Event เปน onClick 6 บันทึกเว็บเพจแลวทดสอบเบราเซอร จากนั้นคลิกที่รปภาพจะปรากฏกลองขอความที่กําหนด ูแมนสรวง แซซิ้ม มิ.ย.49 48

×