• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Dream weaver8
 

Dream weaver8

on

  • 1,260 views

 

Statistics

Views

Total Views
1,260
Views on SlideShare
1,260
Embed Views
0

Actions

Likes
0
Downloads
91
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Dream weaver8 Dream weaver8 Document Transcript

    • เอกสารประกอบการสอน การสรางเว็บเพจดวยโปรแกรมสําร็จรูปMacromedia Dreamweaver 8 นายแมนสรวง แซซม ิ้ ครู คศ.1 โรงเรียนแมจนวิทยาคม ั สํานักงานเขตพื้นที่การศึกษาเชียงราย เขต 3 อําเภอแมจัน จังหวัดเชียงราย
    • คํานํา เอกสารประกอบการสอน เรื่อง การสรางเว็บเพจดวยโปรแกรมสําเร็จรูป เลมนี้ จัดทําขึ้นเพื่อใชในการประกอบการเรียนการสอน ในสาระการเรียนรูเทคโนโลยีสารสนเทศ กลุมสาระการงานอาชีพและเทคโนโลยี ซึ่งเนื้อภายในเอกสารนี้ มีทั้งหมด 7 บท ประกอบดวย บทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต บทที่ 3 การใสขอความบนเว็บเพจ บทที่ 4 การใสรูปภาพบนเว็บเพจ บทที่ 5 การจัดหนาเว็บเพจดวยตาราง บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บบทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ ซึ่งสามารถนําไปปฏิบัติและใชงานจริงได และสามารถนําไปสูการเปนมืออาชีพในการสรางเว็บเพจไดอีกดวย หวังวาเอกสารประกอบการสอนเลมนี้คงเปนประโยชนตอนักเรียน และผูสนใจทั่วไปไดเปนอยางดี นายแมนสรวง แซซ้มิ มิถุนายน 2549แมนสรวง แซซิ้ม มิ.ย.49 2
    • สารบัญ หนาบทที่ 1 ทําความรูจักกับ Macromedia Dreamweaver 8 1บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต 14บทที่ 3 การใสขอความบนเว็บเพจ 23บทที่ 4 การใสรูปภาพบนเว็บเพจ 26บทที่ 5 การจัดหนาเว็บเพจดวยตาราง 31บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ 34บทที่ 7 การเพิ่มลูกเลนใหหนาเว็บเพจ 43แมนสรวง แซซิ้ม มิ.ย.49 3
    • บทที่ 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
    • 2 ปรากฏหนาตางตอนรับการติดตั้งโปรแกรม จากนั้น คลิกที่ปุม เพื่อเริ่มตนการติดตั้ง 3 ปรากฏขอความการใชงานโปรแกรมคลิกที่ปุม เพื่อยอมรับขอตกลง 4 คลิกปุม หากตองการเลือก ตําแหนงในการติดตั้งโปรแกรม 5 คลิกปุม 6 คลิกปุม แมนสรวง แซซิ้ม มิ.ย.49 5
    • 7 คลิกปุม เพื่อเริ่มตนการติดตั้ง ปรากฏสถานะการติดตั้ง 7 เมื่อติดตั้งโปรแกรมเรียบรอยแลว คลิกที่ปุม เพียงเทานี้ก็สามารถใชโปรแกรม Dreamweaver 8 ไดแลว แมนสรวง แซซิ้ม มิ.ย.49 6
    • การเขาสูโปรแกรม Dreamweaver 8 เมื่อเราติดตั้งโปรแกรม Dreamweaver 8 เรียบรอยแลว สามารถเปดโปรแกรมขึ้นมาใชงานไดเลย โดยมีขั้นตอนดังนี้ 2 เลือก All Programs>Macromedia> Macromedia Dreamweaver 8 เพื่อ เริ่มตนการใชงาน 1 คลิกปุม 3 เลือกรูปแบบพื้นที่ทํางานของโปรแกรม โดยมีรายละเอียดดังนี้ Designer หมายถึง การสรางและออกแบบเว็บเพจโดยทั่วไป ซึ่ง สวนมากนิยมเลือกรูปแบบนี้ Code หมายถึง วิธีการสรางเว็บเพจที่เนนการเขียนชุดคําสั่งเอง จากนั้นคลิกปุม OK (โดยในที่เลือก Disigner)แมนสรวง แซซิ้ม มิ.ย.49 7
    • แนะนําสวนประกอบของโปรแกรม 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
    • ตัวอยางแบบฟอรมที่ชวยในการออกแบบ นอกจากนี้ยังสามารถศึกษาโปรแกรม Dreamweaver 8 จากอินเตอรเน็ตในหัวขอ Take aquick tour of Dereamweaver. หรือเรียนรูจากโปรแกรมชวยสอนจากหัวขอ Learn aboutdocumentation resources เรียนรูจากโปรแกรมชวยสอน (Dreamweaver Help)แมนสรวง แซซิ้ม มิ.ย.49 9
    • สวนประกอบหนาจอโปรแกรม เมื่อเราเลือกประเภทการทํางานแลว (ในกรณีน้ีผูสอนคลิกเลือก 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
    • คําสั่งยอยของเมนูตางๆ แสดงคําสั่งยอยของเมนู Table Mode3. Insert Bar เปนแถบที่ประกอบดวยปุมคําสั่งที่ใชในการแทรกออบเจ็กต (องคประกอบตางๆ) ลงในเว็บเพจ โดยแบงเปน หมวดหมูซึ่งมีรายละเอียดดังนี้ Common เปนชุดคําสั่งสําหรับแทรกออปเจ็กตที่เรียกใชงานบอยๆ ในการสรางเว็บเพจ เชน รูปภาพ กราฟก ตาราง ไฟลมีเดีย เปนตน Layout สําหรับเลือกมุมมองในการสรางเว็บเพจ เชน มุมมองปกติ มุมมองแบบขยาย เพื่อใหเห็นออปเจ็กตตางๆ ไดอยางชัดเจน Forms สํากรับแทรกออปเจ็กตที่ใชสรางแบบฟอรมรับขอมูลจากผูชม เชน ชองรับขอความ และฟลดชนิดตางๆ Text สําหรับจัดรูปแบบขอความในเว็บเพจ เชน หัวเรื่อง ตัวหนา ตัวเอียง จัดหัวขอ จัดยอ หนา และแทรกสัญลักษณพิเศษตางๆ Application สําหรับแทรกคําสั่งและการดึงขอมูลจากฐานขอมูลมาแสดงบนเว็บแมนสรวง แซซิ้ม มิ.ย.49 11
    • Flash element สําหรับนําไฟล Flash เขามาใชงาน Favorite สําหรับจัดเก็บออบเจ็กตที่ชอบเพื่อความสะดวกในการใชงาน Show as Tabs เปลี่ยนแถบเครื่องมือใหแสดงผลในลักษณะแท็บคําสั่งเรียงตอกันไป4. Toolbar เปนแถบเครื่องมือที่เก็บปุมคําสั่งที่ตองใชงานบอยๆ ซึ่งประกอบดวย Show Code View สําหรับแสดงการทํางานในรูปแบบ HTML นอกจากนี้ยังสามารถเขียนคําสั่ง HTML หรือคําสั่งภาษาสคริปต (Script) อื่นๆ ไดดวย Show Code and Design สําหรับแสดงการทํางานแบบ HTML กับ การแสดงพื้นที่ออกแบบ โดยจะแสดงสวนของคําสั่งไวดานบนและแสดงเว็บเพจปกติไว ดานลางแมนสรวง แซซิ้ม มิ.ย.49 12
    • 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
    • เปนหนาตางแสดงคุณสมบัติของออปเจ็กตที่เรากําลังเลือกในเว็บเพจ และสามารถกําหนดหรือแกไข คุณสมบัติของสวนประกอบตางๆ ในหนาเว็บเพจได เชน ขอความ สี ขนาด ตาราง ลิงก เปนตน โดยรายละเอียดภายในหนาตาง 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
    • บทที่ 2 กําหนดคุณสมบัติและการจัดขอมูลของเว็บไซต เมื่อเริ่มตนสรางเว็บไซตนั้น เราตองทําความเขาใจในเรื่องการกําหนดโครงสรางการจัดขอมูลของเว็บไซตและการกําหนดคุณสมบัติตางๆ โดยใน Chapter นี้จะอธิบายขั้นตอนในการสรางเว็บไซต และ เว็บเพจและกําหนดคุณสมบัติตางๆ เชน การแกไขและการบันทึกเว็บไซต เพื่อเตรียมความพรอมกอนการใสเนื้อหาใหกับเว็บเพจการกําหนดไฟลและโฟลเดอรภายในเว็บไซต ภายในเว็บไซตประกอบดวยหนาเว็บเพจและไฟลตางๆ เปนจํานวนมาก หากเว็บไซตของเรามีขนาดใหญจํานวนหนาเว็บเพจและไฟลตางๆ ก็จะมีจํานวนมากขึ้น ดังนั้นการวางแผนในการจัดเก็บไฟลเหลานี้ก็นับวาเปนสิ่งสําคัญ โครงสรางโฟลเดอรภายในเว็บไซตจะประกอบไปดวยโฟลเดอรหลักและโฟลเดอรยอยๆ ที่ซอนกันอยู เปนชั้น ๆ ลงมา ดังนั้นในการแบงโฟลเดอรหสําหรับเก็บไฟลควรแบงเปนหมวดหมู และแยกตามประเภทของไฟล เชน เว็บเพจ กราฟก สคริปต เปนตน โครงสรางของโฟลเดอรดังรูปตัวอยาง เปนการกําหนดตําแหนงและ สถานที่เก็บไฟลขอมูล โดยมีรายระเอียดของโครงสรางโฟลเดอร ภายในเว็บไซต ดังนี้ 1. WEBket3 เปนโฟลเดอรหลักของเว็บไซต สําหรับ เก็บไฟล HTML ของเว็บเพจ 2. Data เปนโฟลเดอรยอยเก็บฐานขอมูล 3. Flash เปนโฟลเดอรยอยเก็บไฟลที่เปนภาพเคลื่อนไหว ที่ทําจากโปรแกรมแฟลช 4. galary เปนโฟลเดอรยอยที่เก็บเกี่ยวกับภาพที่ตางๆ ที่  เปนกิจกรรมตางๆ 5. image เปนโฟลเดอรยอยที่เก็บรูปภาพตางๆ ที่ใชใน เว็บเพจทั้งหมด ตัวอยางโครงสรางโฟลเดอรภายในเว็บไซตแมนสรวง แซซิ้ม มิ.ย.49 15
    • Dreamweaver Site ขั้นแรกของการสรางเว็บไซต คือการสราง Dreamweaver Site เพื่อกําหนดชื่อเว็บไซต ระบุไฟลเดอรสําหรับจัดเก็บไฟล เปนตน โดยโฟลเดอรน้จะเปนแหลงรวมเว็บเพจ กราฟก ไฟลอื่นที่สําคัญใหอยู ีภายในสถานที่เดียวกัน เพื่อความสะดวกในการอัพโหลดขึ้นสูอินเตอรเน็ต โดยการสราง DreamweaverSite มีขั้นตอนดังนี้ 1 คลิกเมนู Site>Manage 2 คลิกปุม แลวเลือกคําสั่ง Site 3 พิมพชื่อไซตที่ตองการลงในชอง What would you like to name your site? (ควรเปนภาษาอังกฤษ) 4 คลิกปุม เพื่อเริ่มตนขั้นตอไปแมนสรวง แซซิ้ม มิ.ย.49 16
    • 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
    • 11 คลิกปุมเลือกโฟลเดอรหลักที่เตรียมไว 12 คลิกเลือกหัวขอ None เนี่องจากขณะนี้ ยังไมตองการเชื่อมตอกับเว็บเซิรฟเวอร  13 คลิกปุม 14 คลิกที่ปุม เพื่อสราง Dreamweaver Site ตามคาที่กาหนดไว ํ ปรากฏชื่อไซตบริเวณพาเนล Filesแมนสรวง แซซิ้ม มิ.ย.49 18
    • การสรางหนาเว็บเพจ เราสามารถสรางหนาเว็บเพจขึ้นมาใหมไดทันที ในกรณีที่เปดโปรแกรมแลวไมปรากฏหนาเว็บเพจในพื้นที่สรางงาน โดยการสรางหนาเว็บเพจมีขั้นตอนดังนี้ 1 คลิกเมนู File > New 2 คลิกเลือก Basic page 3 คลิกเลือก HTML เพื่อสรางหนา เว็บเพจเปลาแบบธรรมดา 4 คลิกปุม Create 5 ปรากฏหนาวางเปลา สําหรับสรางเว็บเพจแมนสรวง แซซิ้ม มิ.ย.49 19
    • การกําหนดคุณสมบัติใหเว็บเพจ เมื่อเราสรางหนาเว็บเพจขึ้นมาแลวขั้นตอนตอไปคือ การกําหนดคุณสมบัติใหเว็บเพจ โดยมีขั้นตอนดังนี้ 1 คลิกเมนู Modify > Page Properties 2 ปรากฎหนาตาง Page Properties สําหรับ กําหนดคุณสมบัติใหเว็บเพจ ชื่อของเว็บเพจ ชื่อของเว็บเพจจะไปปรากฏอยูที่แถบ Titlebar โดยการตั้งชื่อหนาเว็บเพจมีขั้นตอนดังนี้ 1 ในชอง Category 2 พิมพชื่อเว็บที่ตองการ คลิกเลือก Title/Encoding 3 คลิกปุม Apply 4 ปรากฏชื่อที่ตั้งบนแถบ Titlebarแมนสรวง แซซิ้ม มิ.ย.49 20
    • กําหนดรูปแบบแสดงภาษา เราสามารถกําหนดรูปแบบการแสดงภาษาเพื่อใหเว็บเพจแสดงผลเปนภาษาไทย โดยมีขั้นตอนดังนี้ 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
    • 6 ปรากฎสีพื้นหลัง บนหนาเว็บเพจที่ตองการการบันทึกเว็บเพจ เมื่อสรางและกําหนดคุณสมบัติพื้นฐานของเว็บเพจเรียบรอยแลว ขั้นตอนตอไปที่ขาดไมไดคือ การบันทึกเว็บเพจเพื่อปองกันการผิดพลาดระหวางการทํางาน โดยการบันทึกเว็บเพจมีขั้นตอนดังนี้ 1 คลิกเมนู File > Save หรือปุม <Ctrl+S>  2 เลือกโฟลเดอร 3 ตั้งชื่อไฟล 4 คลิกปุม Save เพื่อบันทึกเว็บเพจแมนสรวง แซซิ้ม มิ.ย.49 22
    • การทดสอบเว็บเพจกับเบราเซอร ในระหวางการสรางเว็บเพจ เราตองตรวจสอบการแสดงผลของเนื้อหา เชน สี ขนาด และตําแหนงของขอความหรือรูปภาพเมื่อนําขึ้นไปแสดงผลบนเบราเซอร โดยมีขั้นตอนดังนี้ 1 คลิกเมนู File > Save หรือปุม <Ctrl+S>  2 คลิกที่ปุม เลือก Preview in iexplore หรือกดปุม <F12> 3 ปรากฏผลการทดสอบเว็บเพจใน Internet Explorerการปดไฟลเว็บเพจ หลังจากที่แกไขหรือบันทึกเว็บเพจเรียบรอยแลว เมื่อตองการเลิกใชงานเราสามารถปดไฟลในแตละหนาตาง โดยมีหลายวิธีดังนี้ o กดปุมคียบอรด <Ctrl+F4> o คลิกเมนู File > Close o คลิกปุม Close บริเวณมุมขวาของหนาตางงานแมนสรวง แซซิ้ม มิ.ย.49 23
    • บทที่ 3 การใสขอความบนเว็บเพจ ขอความตางๆ บนหนาเว็บเพจนับวาเปนองคประกอบที่มีความสําคัญมาก เนื่องจากขอความที่ปรากฏบนหนาเว็บเพจ จะเปนตัวกลางสื่อความหมายถึงผูเขามาเยี่ยมชมเว็บไซต ดวยเหตุนี้จึงจําเปนตองจัดวางขอความเนื้อหาตางๆ บนหนาเว็บเพจใหเหมาะสมสวยงาม เพื่อเปนสิ่งดึงดูดใหมีผูเขาชมเว็บไซตของเรามากๆเริ่มใสขอความในเว็บเพจ วางเคอรเ ซอรใ นตํา แหนง ที่ตอ งการพิม พ ขอ ความ แล วพิ ม พข อ ความที่ต อ งการ เพีย งเทานี้ ก็จ ะได ขอความที่ตองการแลว แตถาตองการตกแตงสวนตางๆ เพิ่มเติม เชน ใสสีพื้นหลังหรือกําหนดระยะหาง จากขอบก็สามารถทําไดเชนกันแมนสรวง แซซิ้ม มิ.ย.49 24
    • การเลือกรูปแบบตัวอักษร (Font) ในการเลือกรูปแบบตัวอักษรที่ไมมีมาตรฐานนั้น อาจจะเกิดปญหาไดในกรณีที่มีผูเขาชมเว็บไซตแลวอานยาก ไมสวย หรือเปนภาษาที่อานไมออก ดังนั้นจึงควรใชรูปแบบตัวอักษรที่เปนมาตรฐาน เชน MS SansSerif เนื่องจากสามารถแสดงผลบนเบราเซอรทุกชนิด โดยการเลือกรูปแบบตัวอักษร (Font) มีขั้นตอนดังนี้ 2 คลิกเลือก Edit Font List 1 คลิกในชอง Font บริเวณ ดานลางในหนาตาง Properties 4 คลิกที่ปุม สําหรับ 3 คลิกเลือกรูปแบบตัวอักษร เพิ่มรูปแบบตัวอักษรอีก MS Sans Serif Properties Inspector ของขอความ สรางหัวขอ ขนาดตัวอักษร สีตัวอักษร ตัวหนา ตัวเอียง จัดเรียงหัวขอและลิสตบุค จัดตําแหนงยอหนาขอความแมนสรวง แซซิ้ม มิ.ย.49 25
    • การนําขอมูลจากไฟลอื่นมาใช ความสามารถพิเศษอีกอยางของ Dreamweaver 8 ก็คือ นําขอมูลตางๆ ที่อยูในไฟลประเภทอื่นเชน Word, Excel, Powerpoint เปนตน มาวางบนพื้นที่สรางงานซึ่งจะชวยเพิ่มความสะดวกและประหยัดเวลาในการทํางานเปนอยางมาก โดยมีขั้นตอนดังนี้ 1 เลือกขอมูลจากหนาเอกสาร Word 2 คลิกเมาสขวาเลือกคําสั่ง คัดลอก 3 กลับมาทํางานในหนาเว็บเพจของ โปรแกรม Dreamweaver 8 จากนั้นคลิกเมนู Edit > Paste 4 ปรากฏไฟลจากหนาเอกสาร Word มาใชในเว็บเพจของ Dreaweaver 8 แลวแมนสรวง แซซิ้ม มิ.ย.49 26
    • บทที่ 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
    • การใสรูปภาพลงบนเว็บ ในการใสรูปภาพลงบนเว็บเพจ มีขั้นตอนดังนี้ 1 วางเคอรเซอรตรงตําแหนงที่ตองการใสรูปภาพ 2 ในแท็บ Common คลิกที่ปุม เลือก Image 3 ในชอง Look in ใหเลือกโฟลเดอรที่เก็บไฟลภาพ 4 เลือกรูปภาพที่ตองการ 5 คลิกปุม OK 6 ปรากฏหนาตางแสดงขอความวา ภาพนี้อยู 7 เลือกโฟลเดอรที่ใชเก็บภาพ นอกเว็บไซตใหกอบปเขามาในเว็บไซต  จากนั้นคลิกปุม Yes 8 คลิกที่ปุม Save 9 ปรากฏรูปภาพที่ตองการบนเว็บเพจแมนสรวง แซซิ้ม มิ.ย.49 28
    • การจัดการเกี่ยวกับรูปภาพ เมื่อเรานํารูปภาพมาวางไวในเว็บเพจแลว หากเราตองการจัดเกี่ยวกับรูปภาพในลักษณะตางๆ เชน การปรับขนาด การจัดวางรูป การใสขอความอธิบายรูปภาพ การใสกรอบใหรูปภาพ การกําหนดระยะหางระหวางรูปภาพ เปนตน เราสามารถจัดการเกี่ยวกับรูปภาพไดโดยใช กําหนดระยะหางของรูป ใสกรอบใหรูปภาพ การจัดวางรูป ปรับแสงและความคมชัด ปรับขนาดของรูปภาพ ใสขอความอธิบายรูปภาพการจัดวางรูปภาพประกอบขอความ เราสามารถจัดวางรูปภาพประกอบขอความบนหนาเว็บเพจใหมีความสวยงาม เปนที่นาดูของผูเขามาเยี่ยมชมเว็บไซต โดยมีขั้นตอนดังนี้ 1 คลิกเลือกรูปภาพที่ตองการ 2 คลิกเลือกรูปแบบการจัดวางรูปภาพ ในหนาตาง Properties ของ Align โดยในที่นี้เลือก Left เพื่อจัด วางรูปภาพไวดานซายมือแมนสรวง แซซิ้ม มิ.ย.49 29
    • 3 ปรากฏการจัดวางรูปที่ตองการ ในการจัดวางรูปภาพประกอบขอความมีรายละเอียดดังนี้ • Default เปนการจัดเรียงแบบปกติ • Baseline เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกับบรรทัดของ ขอความ • Top เปนการจัดใหขอบบนของรูปภาพอยูแนวเดียวกันกับบรรทัดของขอความ • Middle เปนการจัดใหตรงกลางของรูปภาพอยูแนวเดียวกันกับบรรทัดของ ขอความ • Bottom เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกันกับบรรทัดของ ขอความคลายการจัดแบบ Baseline • Text Top เปนการจัดใหขอบบนของรูปภาพอยูแนวเดียวกับบรรทัดของ ขอความคลายการจัดแบบ Top • Absolote Bottom เปนการจัดใหขอบลางของรูปภาพอยูแนวเดียวกับ สวนกลางของบรรทัดขอความ • Left เปนการจัดใหรูปภาพอยูทางซายมือของบรรทัดขอความ • Right เปนการจัดใหรูปภาพอยูทางขวามือของบรรทัดขอความการใสรูปภาพเปนฉากหลัง การใสรูปภาพเปนฉากหลัง (Background) ถือวาเปนการเพิ่มความสวยงามและนาสนใจใหกับเว็บเพจ ซึ่งภาพที่นาจะนํามาเปนฉากหลังตองไมมีลวดลายหรือสีสันมากเกินไป เพื่อไมใหผูชมเว็บไซตสับสนหรือสีของพื้นหลังอาจตัดกับสีของขอความทําใหลําบากในการอานได ดังนั้นภาพที่นํามาเปนฉากหลังตองเปนสีที่กลมกลืนกับขอความหรือรูปภาพที่วางไวในเว็บเพจ ซึ่งการใสรูปภาพเปนฉากหลังมีขั้นตอนดังนี้แมนสรวง แซซิ้ม มิ.ย.49 30
    • 1 คลิกที่ปุม Page Properties... หรือกดปุม <Ctrl+J> เพื่อเปดหนาตาง Page Properties 2 คลิกที่หัวขอ Apperance 4 เลือกไฟลรูปภาพที่ตองการนํามาเปนฉากหลัง  3 คลิกที่ปุม Browse... 5 คลิกที่ปุม OK 6 คลิกที่ปุม OK ที่ หนาตาง Page Properties อีกครั้ง 7 ปรากฏภาพที่ นํ า มาเป น ฉากหลังเรียบรอยแลวแมนสรวง แซซิ้ม มิ.ย.49 31
    • บทที่ 5 การจัดหนาเว็บเพจดวยตาราง เว็บเพจสวนมากมักนิยมใชตารางในการจัดวางองคประกอบ ซึ่งสวนมากจะเกี่ยวกับการนําเสนอขอมูลที่เปนรายชื่อหรือรายการตางๆ และที่สําคัญคือใชตารางสําหรับจัดเลยเอาตหนาเอกสาร เพื่อชวยในการแสดงขอมูลและองคประกอบตรงตามตําแหนงที่ตองการโครงสรางของตาราง กอนที่จะลงมือสรางตารางควรมาทําความรูจักโครงสรางของตารางซึ่งจะชวยทํางานไดงายขึ้น โดยมีรายละเอียดดังนี้ • คอลัมน (Column) ชองในแนวตั้ง • แถว (Row) ชองในแนวนอน • เซลล (Cell) ชองแตละชองที่อยูในตาราง • Cell Spacing เปนชองวางระหวางเซลลแตละเซลล • Cell Padding เปนระยะหางของขอความหรือรูปภาพจากขอบทุกดานของเซลล • สีพื้นเซลล • ขอบตาราง • ขอบเซลล • ความกวางทั้งหมดของตาราง • ความกวางจริงในคอลัมน • ความกวางของคอลัมนที่กําหนด • คอลัมนที่ไมกําหนดความกวาง Row Cell Padding สีพื้นเซลล Cell ขอบเซลล ขอบตาราง Column คอลัมนที่ไมกําหนดความกวาง ความกวางจริงในคอลัมน ความกวางทั้งหมดของตารางแมนสรวง แซซิ้ม มิ.ย.49 32
    • วิธีการสรางตาราง ในโปรแกรม Dreamweaver มีเครื่องในการสรางตารางมากมาย เชน เครื่องมือในการสรางเสนขอบของตาราง กําหนดสีพื้นตารางและเซลล การจัดขอมูลตางๆ ภายในเซลล เปนตน โดยวีธีการสรางตารางมีขั้นตอนดังนี้ 1 คลิกแท็บ Common ที่แถบ Insert Bar 2 คลิกที่ปุม Insert Table เพื่อสรางตาราง 3 ปรากฎหนาตาง Table จากนั้นในชอง Rows ใหกําหนดจํานวนแถว ของตาราง โดยในที่นี้กําหนดเปน 3 4 ในชอง Column ใหกําหนดจํานวน คอลัมนของตาราง โดยในที่นี้กําหนด เปน 3แมนสรวง แซซิ้ม มิ.ย.49 33
    • การกําหนดคุณบัติของตาราง ในหนาตาง 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
    • บทที่ 6 การสรางไฮเปอรลิงกเชื่อโยงระหวางเว็บ ไฮเปอรลิงก (Hyperlink) หรือที่เรียกวา “ลิงก” เปนการเชื่อมโยงเว็บไซตบนอินเตอรเน็ตจากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง หรือเชื่อมตอเขาสูอีเมลลของ Webmaster เพื่อติดตอสื่อสารกัน การเชื่อมโยงในลักษณะนี้นับวามีประโยชนอยางมาก เนื่องจากทําใหผูเขาชม สามารถเขาถึงขอมูลและเนื้อหาทุกหนาเว็บเพจภายในเว็บไซตของเราไดสวนประกอบของไฮเปอรลิงก ในการทํางานของไฮเปอรลิงกมีสวนประกอบดังนี้ 1. ตนทาง (Source Anchor) หมายถึง สวนประกอบบนเว็บที่เปนจะลิงก ซึ่งเมื่อเลื่อเมาสไปชี้ พอยเตอรจะเปลี่ยนเปนรูปมือ และเมื่อคลิกเลือกหนาเว็บหรือขอมูลปลายทางจะปรากฏขึ้นมา ซึ่ง อาจเปนขอความหรือรูปภาพก็ได 2. ปลายทาง (Destination Anchor) หมายถึง เนื้อหาขอมูลตางๆ ไมวาจะเปนขอความหรือ รูปภาพ ซึ่งถูกเรียกใหปรากฏขึ้นมาเมื่อมีผูชมคลิกที่ลิงกตนทาง ซึ่งลิงกปลายทางแบงไดเปนหลาย รูปแบบ ดังนี้ ตําแหนงเฉพาะบนเว็บเพจ คือการสั่งใหเบราเซอรเปดเว็บเพจพรอมทั้งเลื่อนไปยัง ตําแหนงที่ระบุไวโดยทันที เว็บเพจหรือเว็บไซต โดยสวนมากลิงกบ นเว็บเพจจะใชสําหรับ เปดไปยัง หนาเว็บเพจอื่นภายในเว็บไซตเดียวกัน หรือเปดไปยัง หนาเว็บไซตอื่น ไฟลเอกสารอื่นๆ สามารถลิ ง ก ไ ปยั ง เนื้ อ หาหรื อ ข อ มู ล ต า งๆ บน อินเตอรเน็ตได หากรูตําแหนงที่อยู โดยวิธีการทํางาน ของเบราเซอร จะขึ้นอยูกับประเภทของไฟลเหลานั้น คําสั่งสงอีเมลล คื อ การสั่ ง ให เ ป ด โปรแกรมอี เ มลล บ นเครื่ อ ง คอมพิ ว เตอร ข องผู ช ม เพื่ อ เตรี ย มเขี ย นข อ ความส ง อีเมลล การรันโปรกแกรมจาวาสคริปต สําหรับใชในการโตตอบบนเว็บเพจ การปดวินโดวเบ ราเซอร การเปดลิงก็เปนวินโดวใหม แบบปอบอัพแมนสรวง แซซิ้ม มิ.ย.49 35
    • รูปแบบลิงกตางๆ บนอินเตอรเน็ต ลิงกนับวาเปนสวนสําคัญของหนาเว็บเพจ โดยในปจจุบันไดมีลิงกในรูปแบบตางๆ มากมาย ซึ่งสามารถแบงไดดังนี้ ลิงกขอความ หมายถึง ลิงกที่ใชขอความเปนจุดเชื่อมโยงไปยังตําแหนงปลายทาง ซึ่งปกติจะใชสีใหแตกตางจากขอความปกติหรือมีการขีดเสนใตขอความนั้นๆ ตัวอยางลิงกขอความ (www.mwk.ac.th/maechancop) ลิงกรูปภาพ หมายถึง ลิงกที่ใชรูปภาพเปนจุดเชื่อมโยง โดยเมื่อนําเมาสไปวางบนรูปภาพเคอรเซอรของเมาสจะเปลี่ยนเปนรูปมือ ตัวอยางลิงกรูปภาพ (www.sawasdeeit.com)แมนสรวง แซซิ้ม มิ.ย.49 36
    • ลิงกภาพเคลื่อนไหว ในปจจุบันนี้ลิงกภาพเคลื่อนนิยมนํามาใชตกแตงหนาเว็บเพจ เนื่องจากมีความสวยงามและมีลูกเลนตางๆ ที่ทําใหผเู ขาชมเว็บไซตสนุกและตื่นตา โดยการลิงกแบบภาพเคลื่อนไหวจะใชรูปภาพเปนจุดเชื่อมโยงเชนเดียวกัน แตเมื่อนําเมาสไปวางไวบนรูปจะมีลูกเลนตางๆ เชน การเปลี่ยนรูป ขนาดสี ปรากฏขึ้นมาภาพกอนนําเคอรเซอรไปวาง ภาพหลังนําเคอรเซอรไปวาง ลิงกแบบ Flash การสรางลิงกดวยโปรแกรม Macromedia Flash หรือโปรแกรมSWISH จะมีลูกเลนความสวยงามและสามารถโตตอบกับผูเขาชมไดดวย โดยการลิงกแบบ Flash เพื่อประกอบในเว็บเพจมักเปนที่นิยมในปจจุบัน ตัวอยางลิงกแบบ Flash (www.kapook.com)แมนสรวง แซซิ้ม มิ.ย.49 37
    • เราสามารถตรวจสอบลิงกที่สรางจากโปรแกรม Macromedia Flash โดยคลิกขวาที่ลิงก ถามีคําสั่ง About Macromedia Flash Player แสดงวาเปนลิงกแบบ Flash คลิกทดสอบลิงกแบบ Flashการสรางลิงกขอความ ในการลิงกขอความนั้นสามารถทําได 2 วิธี คือ วิธีที่ 1 การลิงกขอความไปยังหนาเว็บเพจอื่นในเว็บไซตเดียวกัน มีขั้นตอนดังนี้ 1 เลือกขอความที่ตองการ สรางจุดลิงก 2 คลิกที่ปุม 3 ปรากฎหนาตาง Select File จากนั้นคลิกเลือกเว็บ เพจปลายทางที่ตองการลิงก 4 คลิกปุม OKแมนสรวง แซซิ้ม มิ.ย.49 38
    • จากนั้นใหบันทึกเว็บเพจแลวกดปุม F12 เพื่อเรียกดูผานเบราเซอร ทดสอบโดยการคลิกที่ลิงก จากนั้นก็จะเชื่อมโยงไปยังหนาเว็บเพจที่กําหนดคลิกที่ลิงก ปรากฏหนาเว็บเพจที่ตองการ วิธีที่ 2 การลิงกขอความไปยังสวนตางๆ ในหนาเว็บเพจเดียวกัน มีขั้นตอนดังนี้ 2 คลิกเมนู Insert > Named Anchor 3 ปรากฎหนาตาง Named Anchor จากนั้น พิมพชื่อลิงก โดยในที่นี้พิมพคํา วา When 1 วางเคอรเซอรหนาขอความที่ตองการลิงกไปหา 4 คลิกปุม OKแมนสรวง แซซิ้ม มิ.ย.49 39
    • ปรากฎไอคอน 5 เลือกขอความที่ใชเปนจุดลิงก 6 พิมพ # ตามดวยชื่อจุดลิงก โดยในที่นี้พิมพคําวา When เมื่อบันทึกและคลิกลิงกที่สรางขึ้น บนหนาเว็บเบราเซอร 7 จะปรากฎการลิงกไปยังสวนที่ตองการ 8 ปรากฏสวนที่ลิงกแมนสรวง แซซิ้ม มิ.ย.49 40
    • การสรางลิงกดวยรูปภาพ การสรางลิงกดวยรูปภาพนับเปนการเพิ่มความนาสนใจกับลิงกในหนาเว็บเพจ โดยมีขั้นตอนดังนี้ 1 คลิกเลือกรูปที่ตองการ สรางลิงก 4 คลิกปุม OK 2 คลิก ในหนาตาง Properties เพื่อ เลือกหนาเว็บเพจที่ตองการลิงกไปหา 3 ปรากฎหนาตาง Select File เลือกเว็บเพจปลายทางที่ตอง บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร << ทดสอบกับเบราเซอร หนาเว็บเพจที่ปรากฏขึ้นมา >>แมนสรวง แซซิ้ม มิ.ย.49 41
    • การลิงกกลับไปหนาโฮมเพจ หากตองการสรางลิงกรูปภาพกลับไปหนาโฮมเพจ (หนาแรกของเว็บไซต) มีขั้นตอนดังนี้ 1 คลิกเลือกรูปที่ตองการ สรางลิงก 2 คลิก ในหนาตาง Properties เพื่อเลือกหนา เว็บเพจที่ตองการลิงกไปหา 3 ปรากฎหนาตาง Select File เลือกเว็บเพจปลายทางที่ตอง 4 คลิกปุม OK บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร << ทดสอบกับเบราเซอร หนาเว็บเพจที่ปรากฎขึ้นมา >>แมนสรวง แซซิ้ม มิ.ย.49 42
    • การลิงกไปยังเว็บไซตอื่น เปนการสรางลิงกไปยังเว็บไซตหรือแหลงขอมูลภายนอกเว็บไซตของเรา ซึ่งมีขั้นตอนดังนี้ 1 ลากเมาสเลือกขอความ หรือรูปภาพสําหรับ กําหนดใหเปนจุดลิงก 2 พิมพชื่อเว็บเพจปลายทางในชอง Link ใหใส http:// จากนั้นตามดวยชื่อเว็บไซตที่ตองการลิงก ในตัวอยางพิมพ http://www.mwk.ac.th/maechancop บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร ทดสอบกับเบราเซอร >> << หนาเว็บเพจที่ปรากฎขึ้นมาแมนสรวง แซซิ้ม มิ.ย.49 43
    • บทที่ 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
    • 6 คลิกปุม Text Field เพื่อใสฟลดรับขอมูล 7 วางในบริเวณเดิมที่เราจะสรางฟลดรับขอมูล 8 ใสชื่อของ Field ที่ตองการ 9 คลิกปุม OK 10 Text Field ที่ไดแมนสรวง แซซิ้ม มิ.ย.49 45
    • 11 คลิกปุม Button แบบ Submit เพื่อสรางปุมสงขอมูลจากฟอรมไปยัง Google 12 พิมพชื่อปุมลงไปในชอง Value บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร 13 ทดสอบกับเบราเซอรพิมพขอมูลที่ตองการคนหาแลวคลิกที่ปุม Searchแมนสรวง แซซิ้ม มิ.ย.49 46
    • เพิ่มเติมลูกเลนดวย 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
    • 1 คลิกเลือกรูปภาพ 2 คลิกที่ปุม Add Behavior เลือก Popup Message 3 พิมพขอความที่ตองการใหแสดงบนรูปภาพ 4 คลิกปุม OK 5 จากนั้นที่พาเนล Behavior จะปรากฏ Action เปน Popup Message และ Event เปน onClick 6 บันทึกเว็บเพจแลวทดสอบเบราเซอร จากนั้นคลิกที่รปภาพจะปรากฏกลองขอความที่กําหนด ูแมนสรวง แซซิ้ม มิ.ย.49 48
    • การใสเสียงเพลงลงในเว็บไซต การใสเสียงเพลงนับเปนอีกวิธีหนึ่งที่ชวยเพิ่มความนาสนใจใหกับเว็บไซตของเรา ยกตัวอยางเชน ใหเปดเสียงเพลงเมื่อผูเยี่ยมชมคลิกเมาสบนปุมหรือเมื่อเปดหนาเว็บเพจ สําหรับการใสเสียงเพลงลงในเว็บไซต มีขั้นตอนดังนี้ 2 คลิกปุม Media : Flash 3 เลือก Plugin 1 วางเคอรเซอรบริเวณที่ตองการ สรางหนาจอควบคุมเสียง 4 ปรากฎหนาตาง Select File ในชอง Look in คลิกเลือกโฟลเดอรที่เก็บไฟลเพลง 5 คลิกเลือกไฟลเพลงที่ตองการใสลงในเว็บเพจ 6 คลิกที่ปุม OK 7 คลิกที่ปุม Yes เพื่อ Copy ไฟลเพลงไวภายในเว็บของเรา 8 คลิกที่ปุม Save เพื่อบันทึกไฟลเพลงแมนสรวง แซซิ้ม มิ.ย.49 49
    • 9 ปรากฎไอคอน บริเวณที่เราวางเคอรเซอรไว 10 ปรับขนาดของไอคอนในหนาตาง Properties ตามตองการ บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร แถบควบคุมการแสดงเสียงแมนสรวง แซซิ้ม มิ.ย.49 50
    • การสรางหนาตาง Pop Up หนาตาง Pop Up มีลักษณะเปนหนาตางแสดงรูปภาพและขอความโฆษณาหรือบงบอกเงื่อนไขในการเยี่ยมชมเว็บไซต ซึ่งเปนเทคนิคในการดึงดูดความสนใจ โดยมีขั้นตอนในการสรางหนาตาง Pop Up ดังนี้ 1 เตรียมหนาตาง Pop Up ที่จะใหปรากฏบนหนาเว็บเพจเมื่อเปดเขาชม 2 คลิกเลือกไฟลเดอรเก็บไฟล ในชอง Save in 3 ในชอง File name ใหตั้งชื่อไฟล โดยในที่นี้พิมพคําวา popup 4 คลิกปุม Save 5 เปดเว็บเพจตนทางที่จะใหแสดงหนาตาง Pop up 6 คลิกเลือกที่ปุม เลือก Open และคลิกแท็ก <Body> Browse Windowแมนสรวง แซซิ้ม มิ.ย.49 51
    • 7 ปรากฎหนาตาง Open Browser Window จากนั้นที่ปุม Browse เพื่อเลือกไฟลหนาตาง Pop up 8 เลือกไฟลหนาตาง popup 9 คลิกปุม OK 10 ในชอง Window width กําหนดความกวางของหนาตาง Pop up 11 ในชอง Window height กําหนดความสูงของหนาตาง Pop up 13 คลิกปุม OK 12 ในชอง Window name พิมพชื่อหนาตาง Pop up บันทึกหนาเว็บเพจ จากนั้น กดปุม F12 เพื่อทดสอบกับเบราเซอร ซึ่งเว็บเพจจะปรากฏ หนาตาง Pop up ขึ้นมาทันทีแมนสรวง แซซิ้ม มิ.ย.49 52
    • เว็บไซตที่ใหบริการพื้นที่ฟรี (ในประเทศ) 1. http://www.thai.net 2. http://www.siamwebhost.com 3. http://www.vhostweb.com 4. http://member.se-ed.net 5. http://thailand.hosify.comเว็บไซตที่ใหบริการพื้นที่ฟรี (ตางประเทศ) 1. http://www.clickheretree.com 2. http://www.free-webhosts.com 3. http://www.thefreesite.com 4. http://www.free-web-space.com 5. http://www.freewebspace.com 6. http://www.onlineexpress.net 7. http://www.topcities.com 8. http://www.simplecities.com 9. http://geocities.yahoo.com 10. http://www.fortunecity.com 11. http://www.50megs.com 12. http://www.doteasy.com 13. http://www.freewebspace.net 14. http://www.free-webhosts.com 15. http://www.brinkster.comแมนสรวง แซซิ้ม มิ.ย.49 53
    • เอกสารอางอิงภุชชงค เกวียกกุทณฑ และอนรรฆณง คุณมณี. ออกแบบเว็บไซตฉบับกาวหนาสูเซียน ั Dreamweaver 8.บริษัท เสริมวิทย อินฟอรเมชัน เทคโนโลยี จํากัด. ่ กรุงเทพมหานคร,2549.livedocs_dreamweaver. http://livedocs.macromedia.com/go/ livedocs_dreamweaver : ออนไลน . เขาถึงเมื่อวันที่ 26 มิถุนายน 2549 เวลา 13.00 น.แมนสรวง แซซิ้ม มิ.ย.49 54