Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
เอกสารประกอบการสอน การสรางเว็บเพจดวยโปรแกรมสําร็จรูป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,530 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×