หน่วยที่ 5

5หน่วยท่ี การสร้างเวบ็ ไซต์ด้วยโปรแกรมสําเร็จรูป Dreamweaver สาระสําคญั Dreamweaver เป็นโปรแกรมสาํ เร็จรูปที่ช่วยในการสร้างงานเวบ็ ไซตไ์ ดอ้ ยา่ งง่าย ๆ โดยเรา สามารถนาํ รูปภาพ และขอ้ ความที่ตอ้ งการมาประกอบเป็ นหนา้ เวบ็ เพจ อีกท้งั ยงั สามารถเพ่ิมลูกเล่น ทางดา้ นเสียง ภาพเคล่ือนไหว การติดต่อกบั ฐานขอ้ มูล โดยไม่ตอ้ งเสียเวลากบั การเขียนโปรแกรม ดว้ ยภาษา HTML อีกต่อไป จุดประสงค์การเรียนรู้ จุดประสงค์ทว่ั ไป เพอ่ื ใหม้ ีความรู้ความเขา้ ใจเก่ียวกบั การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver จุดประสงค์เชิงพฤตกิ รรม 1. บอกการเปิ ดใชง้ านโปรแกรม Dreamweaver ได้ 2. อธิบายส่วนประกอบหนา้ จอของโปรแกรม Dreamweaver ได้ 3. สร้างไซตไ์ ด้ 4. อธิบายการกาํ หนดรายละเอียดของหนา้ จอเวบ็ เพจได้ 5. สร้างเลยเ์ อาทโ์ ดยใช้ ตาราง (Table)ได้ 6. แทรกรูปภาพลงบนเวบ็ เพจได้ 7. บอกการเช่ือมโยงบนหนา้ เวบ็ เพจในรูปแบบตา่ ง ๆ ได้ 8. ตกแตง่ จดั รูปแบบขอ้ ความ และแทรกสัญลกั ษณ์พิเศษได้ 9. บอกวธิ ีการบนั ทึกไฟลเ์ วบ็ เพจได้

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 124 สาระการเรียนรู้ 5.1 การเปิ ดใชง้ านโปรแกรม Dreamweaver 5.2 ส่วนประกอบของโปรแกรม Dreamweaver 5.3 เริ่มตน้ สร้างเวบ็ ไซตด์ ว้ ยโปรแกรม Dreamweaver 5.3.1 การสร้างไซต์ (Site) 5.3.2 การกาํ หนดรายละเอียดของหนา้ เวบ็ เพจ 5.3.3 การวางเลยเ์ อาทโ์ ดยใช้ ตาราง (Table) 5.3.4 การแทรกรูปภาพลงในเวบ็ เพจ 5.3.5 การเช่ือมโยงเอกสาร 5.3.6 การตกแตง่ จดั รูปแบบขอ้ ความ และแทรกสญั ลกั ษณ์พเิ ศษ 5.3.7 การบนั ทึกไฟลเ์ วบ็ เพจท่ีสร้าง 5.4 บทสรุป

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 125 5หน่วยท่ี การสร้างเวบ็ ไซต์ด้วยโปรแกรมสําเร็จรูป Dreamweaver Dreamweaver เป็นโปรแกรมสาํ เร็จรูปที่ช่วยในการสร้างงานเวบ็ ไซตไ์ ดอ้ ยา่ งง่าย ๆ โดยเรา สามารถนาํ รูปภาพ และขอ้ ความที่ตอ้ งการมาประกอบเป็ นหนา้ เวบ็ เพจ อีกท้งั ยงั สามารถเพ่ิมลูกเล่น ทางดา้ นเสียง ภาพเคลื่อนไหว การติดต่อกบั ฐานขอ้ มูล โดยไม่ตอ้ งเสียเวลากบั การเขียนโปรแกรม ดว้ ยภาษา HTML อีกตอ่ ไป นอกจากน้นั Dreamweaver ยงั เป็ นโปรแกรมแบบ What You See Is What You Get (WYSIWYG) คือการจัดวางรูปภาพ หรือข้อความแบบไหน โปรแกรมจะทาํ การเขียนโค้ดให้ อตั โนมตั ิตามการจดั วาง ทาํ ใหผ้ อู้ อกแบบหนา้ เวบ็ ไซตท์ ี่เรียกวา่ Web Designer สามารถมีส่วนเขา้ มาพฒั นาเวบ็ ไซตด์ ว้ ยตนเองไดม้ ากข้ึน แมจ้ ะไม่ถนดั การเขียนโปรแกรมกต็ าม ส่งผลใหเ้ วบ็ ไซตใ์ น ปัจจุบนั น้ีมีความสวยงามน่าสนใจมากกวา่ ในยคุ แรก ๆ รูปท่ี 5-1 หนา้ โปรแกรม Dreamweaver

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 126 5.1 การเปิ ดใช้งานโปรแกรม Dreamweaver ก่อนที่จะเขา้ ไปใชง้ านโปรแกรม Dreamweaver เราควรศึกษาขอ้ มลู เบ้ืองตน้ อาทิเช่น ความตอ้ งการทรัพยากร เพื่อสาํ หรับการติดต้งั โปรแกรมใชง้ าน 5.1.1 ความต้องการทรัพยากรในการตดิ ต้ังโปรแกรม หากตอ้ งการติดต้งั โปรแกรม Dreamweaver ควรตรวจสอบเสียก่อนวา่ เคร่ืองของเรามี ทรัพยากรเพยี งพอหรือไม่ ดงั น้ี 5.1.1.1 หน่วยประมวลผลกลาง (CPU) Intel® Pentium® 4 หรือ AMD Athlon 64 Processor จะตอ้ งไม่ต่าํ กวา่ 2 GHz หรือเร็วกวา่ 5.1.1.2 ระบบปฏิบตั ิการ ท่ีสามารถติดต้งั ได้ คือ Windows 7 Service Pack 1, Windows 8 หรือ 8.1 5.1.1.3 หน่วยความจาํ (RAM) 1 GB 5.1.1.4 เน้ือที่ฮาร์ดดิสก์ อยา่ งนอ้ ย 2.5 GB 5.1.1.5 ความละเอียดของจอภาพในการแสดงผล 1024x768 พิกเซล (แนะนาํ ที่ 1280x800) หน่วยความจาํ 512 MB 5.1.1.6 ไดร์ฟซีดีรอม /ดีวดี ีสําหรับติดต้งั โปรแกรม 5.1.2 ข้นั ตอนการลงทะเบยี น และติดต้ังโปรแกรม Dreamweaver การติดต้งั โปรแกรม Dreamweaver จะตอ้ งมีการลงทะเบียนขอ Adobe ID จากน้ัน ดาวน์โหลดและติดต้งั Adobe Creative Cloud Desktop และสุดทา้ ยคือ การเลือก Package และ ชาํ ระเงิน โดยมีข้นั ตอนการทาํ ดงั น้ี 5.1.2.1 การลงทะเบียน Adobe ID 1) เปิ ดเวบ็ ไซต์ http://www.adobe.com และคลิกท่ี SIGN IN

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 127 เปิ ดเวบ็ ไซต์ www.adobe.com คลิกท่ี SIGN IN รูปท่ี 5-2 หนา้ เวบ็ ไซต์ www.adobe.com 2) กรอก e-mail และ password ของ Adobe ID ที่มีอยแู่ ลว้ หรือคลิกเลือก Get an Adobe ID เพอื่ สร้าง Adobe ID ใหม่ ระบุ e-mail, password และขอ้ มลู ผใู้ ช้ คลิกเคร่ืองหมายถกู หนา้ ตวั เลือกท้งั 2 แลว้ คลิก SIGN UP รูปท่ี 5-3 ลงทะเบียนขอ Adobe ID 3) เม่ือสมคั ร Adobe ID เสร็จสิ้น และทาํ การ SIGN IN กจ็ ะแสดง รายละเอียดของผใู้ ชท้ นั ที

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 128 ขอ้ มูลของผใู้ ช้ เม่ือสมคั ร Adobe ID และทาํ การ SIGN IN รูปท่ี 5-4 หนา้ แสดงรายละเอียดของผใู้ ช้ 5.1.2.2 ดาวน์โหลด ติดต้งั Adobe Creative Cloud Desktop และการชาํ ระเงิน Adobe Creative Cloud Desktop คือ ซอฟตแ์ วร์เสริมของ Adobe CC ที่ช่วยใหเ้ รา สามารถดาวนโ์ หลด อพั เดทโปรแกรมไดภ้ ายหลงั รวมถึงสามารถ Sync ไฟลง์ านไปยงั Creative Cloud ได้ 1) เมื่อทาํ การ SIGN IN เรียบร้อยจะปรากฏขอ้ มูลผใู้ ช้ จากน้นั ใหค้ ลิก เลือก Desktop คลิกที่ Desktop Downloads รูปที่ 5-5 หนา้ สาํ หรับติดต้งั APPS บน Desktop

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 129 2) จากน้นั ปรากฏรายการโปรแกรม และโปรแกรมแยกหมวดหมู่ท่ี สามารถ ดาวนโ์ หลดแบบทดลองใชง้ าน 30 วนั ในท่ีนี่เลือกโปรแกรม Dreamweaver STARTED รูปท่ี 5-6 หนา้ รายการโปรแกรมดาวน์โหลด 3) จากน้นั ปรากฏรายการใหเ้ ลือกตามท่ีผตู้ อ้ งการ ในที่น่ีเลือก GET รูปที่ 5-7 หนา้ สาํ หรับเลือกขอ้ มลู ของโปรแกรม Dreamweaver

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 130 4) จากน้นั ปรากฏหนา้ รายละเอียดของ GET STARTED ใหค้ ลิกป่ ุม Download ในกรณีทดลองใช้ 30 วนั หรือ คลิก Buy Now หากตอ้ งการซ้ือ คลิก Download สาํ หรับทดลองใช้ 30 วนั ตอ้ งการซ้ือ รูปที่ 5-8 หนา้ สาํ หรับดาวน์โหลดโปรแกรม 5) ในกรณีท่ีคลิกป่ ุม Buy Now จะใหเ้ ลือก Package ที่ตอ้ งการ และเลือก โปรแกรมที่ตอ้ งการดาวน์โหลด รูปที่ 5-9 หนา้ Package ของ Creative Cloud ในการชาํ ระเงินของแตล่ ะ Package จะมีอยู่ 3 Plan ซ่ึงจะมีราคาที่แตกต่างกนั ดงั น้ี Annual plan, paid monthly ใชง้ านเป็นรายปี จะมีการต่อรอบการชาํ ระ เงินอตั โนมตั ิ ทุกเดือน Annual plan, prepaid สาํ หรับการชาํ ระเงินล่วงหนา้ 1 ปี Monthly plan ชาํ ระเงินเพยี งเดือนเดียว

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 131 6) เมื่อเลือก Plan ไดแ้ ลว้ ใหค้ ลิกป่ ุม เพอ่ื เขา้ สู่ข้นั ตอนการ ชาํ ระเงิน ซ่ึงจะมีหนา้ สาํ หรับเง่ือนไขตา่ ง ๆ หลงั จากน้นั คลิกเคร่ืองหมายถูก เพื่อยอมรับเงื่อนไข แลว้ คลิกป่ ุม Accept and Continue เพื่อเขา้ สู่ข้นั ตอนการชาํ ระเงิน รูปที่ 5-10 หนา้ สาํ หรับเง่ือนไขต่าง ๆ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 132 7) กรอกรายละเอียดของบตั รเครดิต และกรอกที่อยใู่ นการจดั ส่งใบแจง้ หน้ี แลว้ คลิกป่ ุม Continue รูปที่ 5-11 หนา้ การชาํ ระเงิน

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 133 5.1.3 ข้นั ตอนการเปิ ดใช้งานโปรแกรม Dreamweaver เมื่อตอ้ งการเขา้ สู่โปรแกรม Adobe Dreamweaver เพือ่ เปิ ดใชง้ าน มีข้นั ตอนดงั น้ี 1) ทาํ การเปิ ดโปรแกรม Dreamweaver โดยคลิกที่ป่ ุม Start > All Programs > Adobe Dreamweaver CC เลือกโปรแกรม Adobe Dreamweaver CC คลิกป่ ุม รูปท่ี 5-12 เปิ ดโปรแกรม Dreamweaver 2) จากน้นั เขา้ สู่หนา้ จอของโปรแกรม Dreamweaver รูปท่ี 5-13 หนา้ จอโปรแกรม Dreamweaver

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 134 หนา้ ตา่ ง Welcome Screen เป็นเคร่ืองมือสาํ หรับช่วยเลือกข้นั ตอนเร่ิมตน้ ในการใชง้ าน โปรแกรมโดยตวั เลือกจะแบ่งออกเป็ นกลุ่ม ๆ ดงั น้ี Open a Recent Item เปิ ดไฟลท์ ี่เคยใชโ้ ดยคลิกเลือกจากรายชื่อท่ีแสดงอยู่ (เรียงลาํ ดบั จาก ที่เคยเปิ ดหลงั สุดเป็ นตน้ ไป หรือคลิก Open เพอื่ เปิ ดไฟล์อื่น ๆ Create New สร้างไฟลใ์ หม่ โดยถา้ คลิก HTML จะเป็นการสร้างเวบ็ เพจพ้นื ฐาน แต่ถา้ คลิกหวั ขอ้ อ่ืนจะเป็นการสร้างเวบ็ เพจ หรือไฟลต์ ามชนิดน้นั ๆ Top Features (Videos) เป็นเส้นทางลดั สาํ หรับเขา้ ดูรายละเอียด และเทคนิคในการใชง้ าน ต่าง ๆ ของโปรแกรมผา่ นทางเวบ็ ไซตข์ อง Adobe 5.2 ส่วนประกอบของโปรแกรม Dreamweaver หนา้ จอการทาํ งานของโปรแกรม Dreamweaver มีองคป์ ระกอบ ดงั ต่อไปน้ี เมนูหลกั แถบ Insert พ้นื ที่สร้างเวบ็ เพจ แถบสถานะ กล่มุ หนา้ ตา่ งพาเนล หนา้ ต่าง Properties inspector รูปที่ 5-14 หนา้ จอการทาํ งานของโปรแกรม Dreamweaver 5.2.1 แถบเมนูหลกั (Menu Bar) เป็นแถบรวบรวมคาํ สัง่ ท้งั หมดของโปรแกรม โดยแบง่ คาํ สง่ั ท้งั หมดออกเป็นหมวดหมู่ตามลกั ษณะการใชง้ าน รูปท่ี 5-15 แถบเมนูหลกั (Menu Bar) 5.2.2 แถบเคร่ืองมือ (Insert Bar) เป็นแหล่งรวมเครื่องมือซ่ึงใชใ้ นการวางออบเจก็ ตช์ นิด ตา่ ง ๆ ลงบนหนา้ เวบ็ เพจ เช่น ขอ้ ความ รูปภาพ ลิงค์ ภาพเคล่ือนไหว เป็นตน้ โดยจะแบ่งกลุ่ม คาํ สง่ั เพ่ือใหใ้ ชง้ านไดส้ ะดวก ซ่ึงจะประกอบดว้ ยกลุ่มคาํ ส่งั ตา่ ง ๆ ดงั น้ี

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 135 รูปท่ี 5-16 แถบเครื่องมือ (Insert Bar) 1) Common ใชว้ างออบเจก็ ตท์ ี่ตอ้ งใชง้ านบ่อย ๆ เช่น รูปภาพ ตาราง ไฟล์ มลั ติมีเดีย 2) Structure ใชว้ างออบเจก็ ตท์ ี่ใชจ้ ดั โครงสร้างของเวบ็ เพจ เช่น Div และ AP element 3) Media ใชส้ าํ หรับวางออบเจก็ ตเ์ กี่ยวกบั Edge Animate , HTML5 และ Flash ใชว้ างออบเจก็ ตท์ ี่ใชใ้ นการสร้างแบบฟอร์มรับขอ้ มูล เช่น ช่อง 4) Forms รับขอ้ ความ ป่ ุมตวั เลือกตา่ ง ๆ เป็นตน้ 6) jQuery Mobile ใชส้ ร้างหนา้ เวบ็ เพจท่ีแสดงบนอุปกรณ์มือถือ และแทบ็ เลต็ โดย ใชเ้ ทคโนโลยแี บบ jQuery 7) jQuery UI ใชส้ าํ หรับปรับแต่งหนา้ เวบ็ ไซต์ (User Interface) ใหด้ ูน่าใชง้ าน 8) Templates ใชส้ าํ หรับสร้าง Template และจดั การตา่ ง ๆ เก่ียวกบั Template 9) Favorites เป็นกลุ่มที่สามารถเพ่มิ ป่ ุมคาํ สง่ั ที่ใชบ้ อ่ ย ๆ จากกลุ่มอ่ืน ๆ เขา้ มา เกบ็ ไวใ้ ชง้ านเอง เพ่อื ความสะดวกในการใชง้ าน 5.2.3 พนื้ ทสี่ ร้างงาน (Document Area) เป็นส่วนที่ใชส้ ร้างหนา้ เวบ็ เพจ ใส่เน้ือหา และ องคป์ ระกอบต่าง ๆ ของเวบ็ เพจ ซ่ึงสามารถเลือกมุมมองการทาํ งานไดด้ งั น้ี 1) มุมมองโคด้ (Code View) ในมุมมองน้ี Document Window จะแสดงเวบ็ เพจใน รูปแบบของโคด้ ภาษา HTML ท่ีจะถูกสร้างข้ึนโดยโปรแกรม Dreamweaver หรือเขียนข้ึนเองโดย โคด้ ภาษา HTML ที่แสดงเราสามารถที่จะเพ่มิ หรือแกไ้ ขได้ ดงั รูป

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 136 รูปที่ 5-17 มุมมองโคด้ (Code View) 2) มุมมองโคด้ และออกแบบ (Code and Design View หรือ Spilt) ในมุมมองน้ี Document Window จะแสดงเวบ็ เพจท้งั ในรูปของหนา้ ตาเวบ็ เพจ และโคด้ ภาษา HTML โดยแสดง เวบ็ เพจในส่วนหน่ึง และแสดงโคด้ ภาษา HTML ในอีกส่วนหน่ึง ดงั รูป รูปที่ 5-18 มุมมองโคด้ และออกแบบ (Code and Design View หรือ Spilt) 3) มุมมองออกแบบ (Design View) ในมุมมองน้ี Document Window จะแสดง เวบ็ เพจท้งั ในรูปของหน้าตาของเวบ็ เพจเหมือนกบั ที่เราเห็นในเว็บบราวเซอร์ โดยที่เราสามารถ แกไ้ ขเน้ือหาตา่ ง ๆ บนเอกสารดว้ ย ดงั รูป

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 137 รูปที่ 5-19 มุมมองออกแบบ (Design View) 4) มุมมองแสดงเวบ็ เพจเหมือนดูบนบราวเซอร์ (Live View) แสดงหนา้ เวบ็ เพจ เหมือนดูบนบราวเซอร์ในส่วนของ JavaScript และ Plugin ดงั รูป รูปที่ 5-20 มุมมองแสดงเวบ็ เพจเหมือนดูบนบราวเซอร์ (Live View) 5.2.4*หน้าต่าง Properties Inspector ใชแ้ สดงคุณสมบตั ิของวตั ถุหรือ ขอ้ ความท่ีเราเลือก ในเวบ็ เพจ โดยเราสามารถท่ีจะเปล่ียนแปลงแกไ้ ขคุณสมบตั ิต่าง ๆ ของออบเจ็กตท์ ่ีวางในหน้า เวบ็ เพจ เช่น ตาํ แหน่ง ขนาด และสี รูปที่ 5-21 หนา้ ตา่ ง Property Inspector 5.2.5 กลุ่มหน้าต่างพาเนล (Panels) เป็นหนา้ ตา่ งเลก็ ๆ ที่รวบรวมเครื่องมือไวเ้ ป็ นกลุ่ม ตามหนา้ ที่ ท่ีเก่ียวขอ้ ง ทาํ ใหใ้ ชง้ านไดส้ ะดวกข้ึน

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 138 รูปที่ 5-22 กลุ่มหนา้ ต่างพาเนล (Panels) 5.2.6 แถบสถานะ (Status Bar) เป็นแถบที่อยทู่ างดา้ นล่างของหนา้ ตา่ ง Document ประกอบดว้ ย 2 ส่วน คือ ดา้ นซา้ ยเป็น Tag Selector ส่วนดา้ นขวาเป็นเครื่องมือต่าง ๆ รูปท่ี 5-23 แถบสถานะ (Status Bar) 5.3 เร่ิมต้นสร้างเวบ็ ไซต์ด้วยโปรแกรม Dreamweaver ก่อนที่จะสร้างเวบ็ ไซตข์ ้ึนมา ให้เริ่มออกแบบโครงร่างคร่าว ๆ ของเวบ็ ไซตน์ ้นั ก่อน เพ่ือ ไม่ก่อให้เกิดความสับสนท่ีอาจตามมาในภายหลงั โดยเว็บไซต์ท่ีประกอบดว้ ยเว็บเพจหลายหน้า จะนิยมจดั เกบ็ ไฟลเ์ วบ็ เพจไวใ้ นโฟลเดอร์แยกตามหวั ขอ้ ต่าง ๆ ดังตัวอย่าง ถ้าเราต้องการจดั ทาํ เว็บไซต์ขายเครื่องประดับ ก็อาจสร้างโฟลเดอร์ชื่อ “jewelry” เป็ นโฟลเดอร์ท่ีรวบเว็บเพจ และไฟล์ต่าง ๆ ท่ีใช้ไวท้ ้งั หมด โดยในโฟลเดอร์น้ีจะ ประกอบหลายโฟลเดอร์ยอ่ ยสาํ หรับแยกเก็บไฟลต์ า่ ง ๆ ดงั รูป รูปท่ี 5-24 ตวั อยา่ งโครงร่างของเวบ็ ไซต์

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 139 จากรูป จะเห็นวา่ หนา้ โฮมเพจหลกั (index.html) จะตอ้ งอยใู่ นโฟลเดอร์หลกั และไม่ควรอยู่ ในโฟลเดอร์ย่อยใด ๆ เพราะ index.html คือเวบ็ เพจหน้าแรกที่จะถูกแสดง เม่ือมีการเย่ียมชม เวบ็ ไซต์ ไฟล์ต่าง ๆ ที่ประกอบเป็ นเวบ็ ไซต์จะถูกเก็บไวใ้ นเครื่องของเรา จะแยกเก็บไฟล์ .html และไฟล์อ่ืน ๆ อยา่ งเป็ นระบบ จะช่วยในการจดั เก็บ และคน้ หาไฟล์ ตลอดจนการเชื่อมโยงไฟล์ ต่าง ๆ ไดง้ ่าย 5.3.1 การสร้างไซต์ (Site) เราจะเริ่มตน้ โดยการกาํ หนดเวบ็ ไซตใ์ หม่ในโปรแกรม Dreamweaver เรียกวา่ เป็ นการสร้าง ไซตใ์ หม่ ซ่ึงมีข้นั ตอนดงั น้ี 1) ไปท่ีเมนู Site > New Site ดงั รูป รูปท่ี 5-25 การสร้าง Site

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 140 2) กาํ หนดค่า Site name และ Local Site folder หลงั จากน้นั กดป่ ุม Save ดงั รูป รูปที่ 5-26 การกาํ หนด Site Name 3) เมื่อเสร็จสิ้นการสร้าง Site แลว้ จะปรากฏอยใู่ นส่วน Site Panel ดงั รูป รูปที่ 5-27 หนา้ จอ Site Panel 5.3.1.1 การจดั การโครงสร้างโฟลเดอร์ เมื่อเราสร้างเวบ็ ไซตใ์ หมข่ ้ึนมาแลว้ ตอ่ ไปเราสามารถสร้างหนา้ เวบ็ ใหม่ เปล่ียน ช่ือไฟล์ และโฟลเดอร์ และจดั ขอ้ มลู ในเวบ็ ไซตไ์ ด้ การสร้างเวบ็ เพจใหม่ มีข้นั ตอนดงั น้ี 1) คลิกเมาส์ป่ ุมขวาท่ีโฟลเดอร์ Site แลว้ เลือก New File ดงั รูป

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 141 คลิกเมนู New File รูปท่ี 5-28 การสร้างไฟลเ์ วบ็ เพจใหม่ 2) ต้งั ชื่อไฟลใ์ หม่แลว้ กดป่ ุม <Enter> ดงั รูป ทาํ การต้งั ช่ือ แลว้ กด Enter รูปท่ี 5-29 การต้งั ช่ือไฟลใ์ หม่ 5.3.1.2 การสร้างโฟลเดอร์ใหม่ ในกรณีท่ีเราตอ้ งการสร้างโฟลเดอร์ยอ่ ยใตโ้ ฟลเดอร์ที่เกบ็ เวบ็ ไซตข์ องเรา เพื่อแยก เกบ็ ขอ้ มูล และหนา้ เวบ็ ใหเ้ ป็ นหมวดหมู่ มีข้นั ตอนดงั น้ี 1) คลิกเมาส์ป่ ุมขวาท่ีโฟลเดอร์ Site แลว้ เลือก New Folder ดงั รูป คลิกเลือกเมนู New Folder รูปที่ 5-30 การสร้างโฟลเดอร์

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 142 2) ต้งั ชื่อโฟลเดอร์ใหม่ แลว้ กดป่ ุม Enter ดงั รูป พิมพช์ ่ือโฟลเดอร์ รูปที่ 5-31 การต้งั ช่ือโฟลเดอร์ใหม่ 5.3.1.3 การเปลี่ยนช่ือไฟลแ์ ละโฟลเดอร์ การเปล่ียนช่ือไฟล์ และโฟลเดอร์ที่อยภู่ ายในเวบ็ ไซต์ จะช่วยส่ือความหมายใหต้ รง กบั เน้ือหา ซ่ึงมีข้นั ตอนดงั น้ี 1) คลิกเมาส์ขวาที่โฟลเดอร์หรือไฟลท์ ่ีจะเปลี่ยนช่ือ แลว้ เลือกเมนู Edit > Rename ดงั รูป เลือกเมนู Edit > Rename รูปท่ี 5-32 การเปลี่ยนชื่อไฟลแ์ ละโฟลเดอร์ 2) จากน้นั ต้งั ช่ือใหม่ตามท่ีตอ้ งการ ดงั รูป พมิ พช์ ื่อใหม่ท่ีตอ้ งการ รูปที่ 5-33 เปลี่ยนช่ือตามท่ีตอ้ งการ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 143 5.3.1.4 การลบไฟล์ และโฟลเดอร์ 1) คลิกเลือกไฟลท์ ่ีตอ้ งการลบ และกดป่ ุม <Delete> ดงั รูป เลือกโฟลเดอร์ที่ตอ้ งการลบ รูปที่ 5-34 เลือกโฟลเดอร์ท่ีตอ้ งการลบ 2) คลิกเมาส์ เพ่ือยนื ยนั การลบ ดงั รูป รูปท่ี 5-35 หนา้ จอยืนยนั การลบ 3) แสดงโฟลเดอร์ที่ถูกลบหายไป ดงั รูป รูปที่ 5-36 แสดงโฟลเดอร์ท่ีถูกลบหายไป

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 144 5.3.2 การกาํ หนดรายละเอยี ดของหน้าเวบ็ เพจ ก่อนเร่ิมตกแต่งหนา้ เวบ็ เพจ ควรกาํ หนดรายละเอียดของหนา้ เวบ็ เพจท่ีสร้างก่อน โดย เลือกคาํ ส่งั Modify > Page Properties ดงั รูป รูปท่ี 5-37 หนา้ จอ Page Properties หนา้ จอ Page Properties จะแบง่ รายละเอียดต่าง ๆ ของเวบ็ เพจที่ปรับแต่งไดอ้ อกเป็ น 6 หมวด ดงั น้ี

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 145 5.3.2.1 หมวด Appearance (CSS) กาํ หนดหนา้ ตาเวบ็ ดว้ ยโคด้ CSS Page font รูปท่ี 5-38 Appearance (CSS) กาํ หนดรูปแบบตวั อกั ษร Size กาํ หนดขนาดใหก้ บั ตวั อกั ษร Text color กาํ หนดสีใหก้ บั ตวั อกั ษร Background color กาํ หนดสีที่ตอ้ งการใหเ้ ป็ นพ้นื หลงั ของหนา้ เวบ็ เพจ Background Image กาํ หนดรูปท่ีตอ้ งการใหเ้ ป็ นพ้ืนหลงั ของหนา้ เวบ็ เพจ Repeat กาํ หนดการแสดงซ้าํ ของรูปพ้ืนหลงั Left Margin กาํ หนดระยะขอบซา้ ยของหนา้ เวบ็ เพจ Right Margin กาํ หนดระยะขอบขวาของหนา้ เวบ็ เพจ Top Margin กาํ หนดระยะขอบบนของหนา้ เวบ็ เพจ Bottom Margin กาํ หนดระยะขอบล่างของหนา้ เวบ็ เพจ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 146 5.3.2.2 หมวด Appearance (HTML) กาํ หนดหนา้ ตาเวบ็ ดว้ ยโคด้ HTML Background image รูปที่ 5-39 Appearance (HTML) Background กาํ หนดรูปที่ตอ้ งการใหเ้ ป็ นพ้ืนหลงั ของหนา้ เวบ็ เพจ Text กาํ หนดสีที่ตอ้ งการใหเ้ ป็ นพ้นื หลงั ของหนา้ เวบ็ เพจ Visited links กาํ หนดสีใหก้ บั ตวั อกั ษร Links กาํ หนดสีของลิงคเ์ ม่ือถูกคลิกไปแลว้ Active links กาํ หนดสีของลิงค์ Left margin กาํ หนดสีของลิงคเ์ ม่ือถูกเมาส์ช้ี Margin width กาํ หนดระยะขอบซา้ ยของหนา้ เวบ็ (ค่าน้ีมีผลใน IE) กาํ หนดระยะขอบซา้ ยของหนา้ เวบ็ (คา่ น้ีมีผลใน Top Margin Netscape) Margin height กาํ หนดระยะขอบบนของหนา้ เวบ็ เพจ (คา่ น้ีมีผลใน IE) กาํ หนดระยะขอบบนของหนา้ เวบ็ เพจ (คา่ น้ีมีผลใน Netscape)

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 147 5.3.2.3 หมวด Links กาํ หนดการแสดงลิงคด์ ว้ ยโคด้ CSS รูปที่ 5-40 Link (CSS) กาํ หนดรูปแบบตวั อกั ษรของลิงค์ Link font Size กาํ หนดขนาดใหก้ บั ตวั อกั ษรของลิงค์ กาํ หนดสีของลิงค์ Links color กาํ หนดสีของลิงคเ์ มื่อถูกเมาส์ช้ี Rollover links กาํ หนดสีของลิงคเ์ มื่อถูกคลิกไปแลว้ Visited links Active links กาํ หนดสีของลิงคเ์ มื่อถูกโฟกสั กาํ หนดรูปแบบการขีดเส้นใตใ้ หก้ บั ลิงค์ Underline style 5.3.2.4 หมวด Headings กาํ หนดคุณสมบตั ิหวั ขอ้ ดว้ ยโคด้ CSS รูปที่ 5-41 Headings

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 148 Heading font กาํ หนดรูปแบบตวั อกั ษรของหวั ขอ้ กาํ หนดขนาดใหต้ วั อกั ษรของหวั ขอ้ Heading 1-6 5.3.2.5 หมวด Title/Encoding กาํ หนดหวั เร่ืองของเวบ็ เพจ และกาํ หนดชุด ตวั อกั ษรท่ีใช้ รูปที่ 5-42 Title/Encoding Title กาํ หนดส่วนไตเติล้ หรือชื่อหวั เร่ืองใหเ้ วบ็ เพจ Document type กาํ หนดประเภทของเวบ็ เพจ กาํ หนดรูปแบบภาษาของตวั อกั ษรท่ีใชใ้ นเวบ็ เพจ ถา้ เราตอ้ งการ Encoding ใชภ้ าษาไทยใหเ้ ลือก Thai (Windows) หรือ Unicode (UTF-8) 5.3.2.6 หมวด Tracing Image กาํ หนดคุณสมบตั ิของรูปที่จะใชเ้ ป็นแบบ รูปที่ 5-43 Tracing Image

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 149 Tracing Image เลือกไฟลร์ ูปที่จะใช้ กาํ หนดค่าความโปร่งใสของรูป โดยรูปจะเป็ นแบบสี Image Transparency จาง ๆ ดา้ นหลงั ช่วยใหเ้ ราเห็นตาํ แหน่งวางรูป วางขอ้ ความที่ถูกตอ้ ง 5.3.3 การวางเลย์เอาท์โดยใช้ ตาราง (Table) การวางเลยเ์ อาท์ คือ การจดั แบ่งพ้นื ท่ีบนหนา้ เวบ็ เพจให้เป็ นสดั ส่วน ก่อนวางเน้ือหา เพื่อที่จะควบคุมเน้ือหาใหอ้ ยใู่ นกรอบพ้นื ท่ี ท่ีจดั แบ่งไว้ ทาํ ใหห้ นา้ เวบ็ เพจคงความสมบูรณ์ การสร้างตารางในโปรแกรม Dreamweaver สามารถทาํ ไดง้ ่าย ๆ มีข้นั ตอนในการสร้าง ตารางอยู่ 3 วธิ ี คือ วธิ ีที่ 1 เลือกเมนู Insert > Table วธิ ีที่ 2 เลือกเครื่องมือ (Table) ที่แทบ็ Common วธิ ีที่ 3 กดคีย์ <Ctrl>+<Alt>+T ท่ีคียบ์ อร์ด วธิ ีที่ 2 เลือกใชเ้ คร่ืองมือ Common วธิ ีที่ 3 กดคีย์ <Ctrl>+<Alt>+T ที่คียบ์ อร์ด วธิ ีที่ 1 เลือกจากเมนู รูปที่ 5-44 วธิ ีการสร้างตาราง

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 150 โดยท้งั 3 วธิ ีน้ีจะแสดงหนา้ ต่าง Table สาํ หรับใชก้ าํ หนดรายละเอียดเก่ียวกบั ตาราง ดงั น้ี Row รูปที่ 5-45 กาํ หนดรายละเอียดของตาราง Columns จาํ นวนแถวท่ีตอ้ งการ Table Width จาํ นวนคอลมั น์ท่ีตอ้ งการ ความกวา้ งของตารางหน่วยท่ีใชจ้ ะเป็นเปอร์เซ็นต์ หรือ Border thickness พิกเซลกไ็ ด้ Cell padding ความหนาของขอบตาราง Cell spacing ระยะห่างระหวา่ งขอ้ ความภายในเซลลก์ บั ขอบเซลล์ Header ระยะห่างระหวา่ งแตล่ ะเซลลใ์ นตาราง กาํ หนดหวั ขอ้ ของขอ้ มลู ในตารางและการจดั วาง โดย กาํ หนดไดด้ งั น้ี ไมม่ ีการกาํ หนดหวั ขอ้ ของขอ้ มลู ในตาราง กาํ หนดใหค้ อลมั น์แรก เป็ นหวั ขอ้ ของขอ้ มลู ในตาราง กาํ หนดใหแ้ ถวแรกเป็นหวั ขอ้ ของขอ้ มูลในตาราง

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 151 กาํ หนดใหท้ ้งั แถว และคอลมั น์แรก เป็ นหวั ขอ้ ของขอ้ มูลใน ตาราง กาํ หนดหวั ขอ้ ของตาราง Caption เขียนคาํ อธิบายเก่ียวกบั ตาราง ซ่ึงจะถูกฝังไวใ้ นโคด้ HTML และ Summary ไมถ่ ูกแสดงออกมาใหเ้ ห็นบนหนา้ เวบ็ เพจ ตวั อยา่ งการวางเลยเ์ อาทด์ ว้ ย Table ก่อนที่จะสร้างตารางเราจะตอ้ งออกแบบหนา้ เวบ็ เพจ โดยแบ่งพ้ืนท่ีหนา้ จอเป็ นส่วน ๆ ตามท่ีเราตอ้ งการ เช่น ส่วนเมนูหลกั ส่วนของ Header ส่วนท่ีไวส้ าํ หรับทาํ ตวั อกั ษรเคลื่อนไหว ส่วนลิงคอ์ ่ืน ๆ ส่วนของเน้ือหา ส่วนของ Footer รูปท่ี 5-46 ออกแบบหนา้ เวบ็ เพจ การสร้างตารางตามท่ีเราออกแบบหนา้ เวบ็ เพจ มีข้นั ตอนดงั น้ี 1) ไปที่เมนู Insert > Table ดงั รูป หรือใชว้ ธิ ีอ่ืนสาํ หรับการสร้างตาราง ที่ได้ กล่าวมาแลว้ รูปที่ 5-47 การสร้างตาราง

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 152 2) จากน้นั กาํ หนด 4 แถว 3 คอลมั น์ กาํ หนดความกวา้ ง 100 percent กาํ หนดขอบ เป็น 0 pixels ดงั รูป รูปที่ 5-48 กาํ หนดคา่ ต่างๆ ของตาราง 3) เม่ือไดจ้ าํ นวนแถวและคอลมั น์เรียบร้อย กจ็ ะตอ้ งมีการปรับแตง่ ตาราง ในส่วน แถวที่ 1 จะตอ้ งทาํ การผสาน 3 คอลมั น์ โดยการเลือก 3 คอลมั น์ของแถวที่ 1 แลว้ คลิกเมาส์ขวา เลือกเมนู Table > Merge Cells ดงั รูป รูปท่ี 5-49 การ Merge Cells แถวที่ 1 4) เลือก 3 คอลมั น์ของแถวท่ี 2 แลว้ คลิกเมาส์ขวา เลือกเมนู Table > Merge Cells ดงั รูป รูปที่ 5-50 การ Merge Cells แถวที่ 2

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 153 5) เลือก 3 คอลมั น์ของแถวท่ี 4 แลว้ คลิกเมาส์ขวา เลือกเมนู Table > Merge Cells ดงั รูป รูปท่ี 5-51 การMerge Cells แถวที่ 4 6) เมื่อทาํ การปรับแตง่ ตารางเรียบร้อยแลว้ จะไดด้ งั รูป รูปที่ 5-52 ตารางท่ีปรับแตง่ แลว้ 5.3.4 การแทรกรูปภาพลงในเวบ็ เพจ ในโปรแกรม Dreamweaver รูปภาพประกอบท่ีนาํ มาแทรกในเวบ็ เพจ จะใชไ้ ฟล์รูปภาพ ไดเ้ ฉพาะไฟลท์ ่ีมีนามสกุลเป็ น JPEG, GIF และ PNG เท่าน้นั ในการเตรียมไฟลร์ ูปภาพ สามารถ ใชโ้ ปรแกรม Adobe Photoshop หรือโปรแกรมPhtoscape ในเอกสารประกอบการสอนน้ีจะอธิบาย การสร้างรูปภาพ และตกแตง่ รูปดว้ ยโปรแกรมPhotoscape อยา่ งง่าย ๆ เพือ่ นาํ ไปใชใ้ นเวบ็ ไซต์ 5.3.4.1 การสร้าง และตกแต่งรูป ดว้ ย Photoscape การสร้างรูปภาพสาํ หรับใชเ้ ป็ น Header ของเวบ็ เพจ มีข้นั ตอนดงั น้ี 1) เขา้ สู่โปรแกรม โดยคลิกที่ป่ ุม เลือก PhotoScape รูปที่ 5-53 การเขา้ สู่โปรแกรม

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 154 2) จากน้นั จะเขา้ สู่หนา้ จอโปรแกรม รูปท่ี 5-54 หนา้ จอของโปรแกรม 3) คลิกท่ีเมนู Editor จากน้นั คลิกที่ Menu > New Photo คลิกที่เมนู Editor คลิกที่ป่ ุม Menu เลือกคาํ สงั่ New Photo รูปท่ี 5-55 สร้างรูปภาพใหม่ 4) กาํ หนดขนาดความกวา้ ง ความสูง และสี จากน้นั คลิกป่ ุม Ok ดงั รูป รูปที่ 5-56 กาํ หนดความกวา้ ง สูง และสีของรูปภาพ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 155 5) จะปรากฏผลลพั ธ์ รูปที่ 5-57 ผลลพั ธ์จากการสร้างรูปภาพใหม่ 6) ต่อไปจะใส่ขอบใหก้ บั Header โดยการคลิกเลือกขอบที่ตอ้ งการ เลือกรูปแบบกรอบท่ีตอ้ งการ ผลลพั ธท์ ี่ได้ รูปที่ 5-58 การใส่ขอบใหก้ บั Header 7) การใส่ object รูปภาพการ์ตูน โดยการคลิกท่ีแทบ็ object รูปที่ 5-59 การใส่ object รูปภาพการ์ตูน

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 156 8) เลือกไอคอน ต่อจากน้นั เลือกรูปภาพที่ตอ้ งการ แลว้ คลิกป่ ุม OK ทาํ การเลือกรูปที่ตอ้ งการ เลือกรูปภาพ Object การ์ตูน คลิกป่ ุม OK รูปที่ 5-60 การแทรกรูปภาพการ์ตูน 9) จะปรากฏรูปภาพการ์ตนู ท่ีแทรกลงใน Header รูปที่ 5-61 รูปภาพการ์ตนู ที่แทรกลงใน Header 10) การแทรกขอ้ ความ โดยการคลิกท่ีไอคอน T จากน้นั ใหก้ าํ หนด คุณสมบตั ิต่าง ๆ เก่ียวกบั ขอ้ ความ เช่น ลกั ษณะฟอนต์ ขนาด สี และคุณสมบตั ิอ่ืน ๆ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 157 กาํ หนดคุณสมบตั ิต่าง ๆ ของ Text ผลลพั ธท์ ี่ได้ ทาํ การเลือก T เพ่อื พมิ พข์ อ้ ความ รูปที่ 5-62 การแทรกขอ้ ความใน Header 11) การแทรกไฟลร์ ูปภาพลงใน Header โดยการคลิกป่ ุม แลว้ คลิก Photo รูปที่ 5-63 การแทรกไฟลร์ ูปภาพ 12) ทาํ การเลือกตาํ แหน่งไฟลร์ ูปภาพอยู่ และเลือกรูปภาพที่ตอ้ งการ แลว้ คลิกป่ ุม Open ดงั รูป รูปท่ี 5-64 การเลือกไฟลร์ ูปภาพที่ตอ้ งการ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 158 13) กจ็ ะไดไ้ ฟลร์ ูปภาพท่ีแทรกใน Header รูปท่ี 5-65 ไฟลร์ ูปภาพที่แทรกลงใน Header 5.3.4.2 การบนั ทึกไฟลร์ ูปภาพ 1) ใหค้ ลิกท่ีป่ ุม Save จากน้นั จะปรากฏหนา้ ต่าง Save ใหค้ ลิกป่ ุม Save As เลือกป่ ุม Save AS เลือกป่ ุม Save รูปที่ 5-66 การบนั ทึกไฟลร์ ูปภาพ 2) ทาํ การเลือกไดร์ฟที่ตอ้ งการจดั เกบ็ ไฟลร์ ูปภาพ จากน้นั ทาํ การต้งั ช่ือไฟล์ รูปภาพ แลว้ คลิกป่ ุม Save

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 159 เลือกตาํ แหน่งที่จดั เก็บภาพ ต้งั ช่ือไฟลภ์ าพ คลิกป่ ุม Save รูปท่ี 5-67 การเลือกตาํ แหน่งที่จดั เกบ็ รูปภาพ 5.3.4.3 การจดั เก็บรูปภาพท่ีใชบ้ นหนา้ เวบ็ เพจ ขอแนะนาํ ให้นําไฟล์รูปภาพท้งั หมดที่จะนาํ มาแสดงบนหน้าเวบ็ เพจมารวมไวท้ ่ี โฟลเดอร์เดียว เพ่ือง่ายแก่การคน้ หารูปภาพ และการนาํ รูปภาพมาใช้ โดยการสร้างโฟลเดอร์ images สาํ หรับจดั เกบ็ รูปท้งั หมด รูปที่ 5-68 การจดั เก็บรูปภาพที่ใชบ้ นหนา้ เวบ็ เพจ 5.3.4.4 การแทรกรูปภาพลงในเวบ็ เพจ เราสามารถแทรกรูปภาพใหก้ บั หนา้ เวบ็ เพจได้ ในท่ีน้ีจะแทรกรูปภาพลงในเลยเ์ อาท์ ท่ีเราไดท้ าํ การออกแบบไว้ ซ่ึงมีข้นั ตอนดงั น้ี 1) ใหท้ าํ การคลิกเลือกแถวที่ตอ้ งการแทรกรูปภาพ รูปท่ี 5-69 การเลือกแถวท่ีตอ้ งการแทรกรูปภาพ 2) คลิกท่ีป่ ุม Insert > Image > Image

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 160 รูปท่ี 5-70 การแทรกรูปภาพ 3) ทาํ การเลือกตาํ แหน่งของไฟลร์ ูปภาพที่จดั เกบ็ จากน้นั เลือกรูปภาพที่ ตอ้ งการแทรก แลว้ คลิกป่ ุม OK รูปที่ 5-71 การเลือกรูปภาพท่ีตอ้ งการแทรก 4) จากน้นั จะเขา้ สู่หนา้ ต่างของ Image Tag Accessibility Attributes โดยให้ พิมพข์ อ้ ความลงใน Alternate Text เพ่ือใหผ้ ชู้ มสามารถอ่านขอ้ ความกาํ กบั รูปภาพ และทราบไดว้ า่ รูปภาพน้นั คืออะไร ก่อนรูปภาพจะถูกโหลดมาครบ รูปท่ี 5-72 การใส่ขอ้ ความกาํ กบั รูปภาพ 5) ผลลพั ธ์เม่ือแทรกรูปภาพลงในเลยเ์ อาทท์ ่ีออกแบบไว้

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 161 รูปที่ 5-73 ผลลพั ธ์การแทรกรูปภาพ Note: การแทรกรูปภาพของ Footer กม็ ีวธิ ีการเช่นเดียวกบั การแทรกรูปภาพของ Header ผลลพั ธ์ที่ไดจ้ ากการแทรกรูปภาพ รูปที่ 5-74 การแทรกรูปภาพของ Footer

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 162 การกาํ หนดคุณสมบตั ิของรูปภาพ มีดงั น้ี 1 2 3 4 รูปท่ี 5-75 กาํ หนดคุณสมบตั ิของรูปภาพ 1. ขนาดของรูปภาพ 2. ที่อยขู่ องรูปภาพ 3. คาํ อธิบายรูปภาพ 4. การเชื่อมโยงดว้ ยรูปภาพ (Link) 5.3.5 การเชื่อมโยงเอกสาร การเชื่อมโยงเอกสาร หรือการทาํ Hyperlink คือ การเช่ือมโยงเวบ็ เพจ จากเวบ็ เพจหน่ึงไป ยงั อีกเวบ็ เพจหน่ึงนนั่ เอง ซ่ึงในโปรแกรม Dreamweaver จะเรียกการเช่ือมโยงน้ีส้ัน ๆ วา่ ทาํ การ ลิงค์ ในโปรแกรม Dreamweaver เราสามารถสร้างเมนูเชื่อมโยงได้ 2 แบบ คือ การทาํ เมนู เช่ือมโยงดว้ ยขอ้ ความ และ การทาํ เมนูเชื่อมโยงดว้ ยรูปภาพ 5.3.5.1 การทาํ เมนูเชื่อมโยงดว้ ยขอ้ ความ มีข้นั ตอน ดงั น้ี 1) พิมพข์ อ้ ความท่ีตอ้ งการ 2) เลือกขอ้ ความที่ตอ้ งการทาํ เมนูเชื่อมโยง 3) ไปท่ี Properties แลว้ ใส่ช่ือเวบ็ เพจที่ตอ้ งการเช่ือมโยงขอ้ มูลในช่อง Link รูปท่ี 5-76 การทาํ เมนูขอ้ ความ Link 5.3.5.2 การทาํ เมนูเช่ือมโยงดว้ ยรูปภาพ มีข้นั ตอนดงั น้ี 1) Insert รูปภาพท่ีตอ้ งการสร้างเป็นเมนูลงบน Document Window 2) คลิกที่รูปภาพ 3) ไปที่ Properties แลว้ ใส่ชื่อเวบ็ เพจที่ตอ้ งการเชื่อมโยงขอ้ มลู ลงในช่อง Link

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 163 รูปที่ 5-77 การทาํ เมนูรูปภาพ Link 5.3.5.3 การสร้างเมนูดว้ ยรูปลิงคแ์ บบ Rollover Image Rollover Image เป็ นรูปภาพที่จะสลบั รูปภาพท่ีแสดง เมื่อเรานาํ เมาส์ไปวางเหนือ รูปภาพน้ัน และเมื่อเรานาํ เมาส์ออกจากบริเวณรูปภาพก็จะกลับไปแสดงรูปภาพเดิม เรานํา Rollover Image มาสร้างเป็นลิงคไ์ ด้ มีข้นั ตอนดงั น้ี 1) ใหท้ าํ การสร้างเมนู ซ่ึงเป็ นไฟลร์ ูปภาพมาจาํ นวน 2 รูป ไวส้ าํ หรับใส่เมนู รูปท่ี 5-78 ไฟลร์ ูปภาพเมนู 2) จากน้นั เลือกตาํ แหน่งที่จะวางรูปภาพ แลว้ ทาํ การสร้างตารางซอ้ น เพ่อื กาํ หนดขนาดตารางซอ้ น รูปที่ 5-79 การสร้างตารางซอ้ น 3) เม่ือสร้างตารางซอ้ นเรียบร้อย ใหเ้ ลือกตาํ แหน่งท่ีจะวางรูปภาพ คลิกตาํ แหน่งที่จะวางรูปภาพ รูปท่ี 5-80 เลือกตาํ แหน่งวางรูปภาพ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 164 4) คลิกเมนู Insert > Image Objects > Rollover Image ดงั รูป รูปท่ี 5-81 การใชค้ าํ สั่ง Rollover Image 5) กาํ หนดไฟล์รูปภาพแรกที่จะแสดงก่อน ที่ Original Image กาํ หนด ไฟล์รูปภาพที่ 2 จะแสดงเม่ือเรานาํ เมาส์ไปวางเหนือรูปภาพแรกที่ Rollover Image กาํ หนด ขอ้ ความกาํ กบั รูปภาพท่ี Alternate text และกาํ หนดไฟล์ที่จะเชื่อมโยงเมื่อมีการคลิกรูปภาพ ที่ When clicked Go to URL รูปภาพแรกที่จะแสดงก่อน รูปภาพที่ 2 ที่จะแสดง เมื่อนาํ เมาส์ไปวางเหนือภาพแรก ข ขอ้ ความกาํ กบั รูปภาพ กาํ หนดไฟลท์ ่ีจะเชื่อมโยงเม่ือมีการคลิกรูปภาพ รูปท่ี 5-82 การกาํ หนดค่าตา่ ง ๆใน Rollover Image 6) ผลลพั ธ์ท่ีไดก้ ่อนนาํ เมาส์ไปวางท่ีรูปภาพ จะแสดงรูปภาพพ้นื สีฟ้ า ก่อนนาํ เมาส์ไปวางท่ีรูปภาพ จะแสดงรูปภาพพ้นื สีฟ้ า รูปที่ 5-83 การใชร้ ูปสร้าง Rollover Image 1

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 165 7) เมื่อนาํ เมาส์มาวางที่รูปภาพ จะเปล่ียนเป็นรูปภาพพ้นื หลงั สีเขียว เม่ือนาํ เมาส์ไปวางที่รูปภาพ จะเปลี่ยนเป็ นรูปภาพพ้ืนหลงั สีเขียว รูปท่ี 5-84 การใชร้ ูปสร้าง Rollover Image 2 5.3.5.4 การกาํ หนดลกั ษณะการเปิ ดหนา้ เวบ็ เพจ หลงั จากคลิกที่ Link เม่ือทาํ การ เชื่อมโยงเอกสาร โดยการใส่ชื่อเวบ็ เพจในช่อง Link แลว้ ใหค้ ลิกที่ Target ดงั รูป รูปที่ 5-85 กาํ หนดลกั ษณะการเปิ ดหนา้ เวบ็ เพจ ความหมายของ Target มีดงั น้ี _blank ใหเ้ ปิ ดหนา้ เวบ็ เพจใหมท่ ี่เชื่อมโยงในหนา้ ตา่ ง Browser ใหม่อีกหนา้ ต่าง New ใหเ้ ปิ ดหนา้ เวบ็ เพจใหมท่ ี่เช่ือมโยงในหนา้ ต่าง Browser ใหม่อีกหนา้ ต่าง _parent ใหเ้ ปิ ดหนา้ เวบ็ เพจใหมท่ ่ีเชื่อมโยงในหนา้ ตา่ ง Browser เดิม _self ใหเ้ ปิ ดหนา้ เวบ็ เพจใหมท่ ่ีเชื่อมโยงในเฟรมเดิม -top ใหเ้ ปิ ดหนา้ เวบ็ เพจใหม่ท่ีเชื่อมโยงในหนา้ ต่าง Browser เดิม โดยแสดงให้ เตม็ พ้นื ที่หนา้ ตา่ ง 5.3.5.5 การเชื่อมโยงขอ้ มูล สามารถแบ่งได้ 3 วธิ ี ดงั น้ี 5.3.5.5.1 การเชื่อมโยงขอ้ มลู ภายในเวบ็ เพจหนา้ เดียวกนั ในกรณีการเชื่อมโยงแบบน้ี จะใชใ้ นกรณีหนา้ เวบ็ เพจที่ยาว มีเน้ือหาท่ี เล่ือนข้ึนบน หรือลงล่าง ไปยงั ตาํ แหน่งขอ้ มลู ซ่ึงการสร้างการเชื่อมโยง เพ่ือใหผ้ ใู้ ชง้ านเช่ือมโยง ไปยงั จุดท่ีกาํ หนดไว้ ซ่ึงมีข้นั ตอนดงั น้ี 1) สร้างจุดปลายทางเช่ือมโยง โดยการต้งั ชื่อที่ช่อง ID ในที่น้ี ต้งั ชื่อวา่ buy

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 166 เลือกจุดปลายทาง รูปที่ 5ต-8้งั 6ช่ือสที่รช้า่องงจIุดDปลายทางการเช่ือมโยง 2) กาํ หนดการเชื่อมโยงไปยงั จุดหมายปลายทาง ในช่อง Link โดยการพมิ พ์ # ตามดว้ ยชื่อ ID ท่ีไดต้ ้งั ไว้ เช่น #buy เลือกขอ้ ความเพือ่ ทาํ การเชื่อมโยง พิมพ์ #buy ที่ช่อง Link รูปที่ 5-87 กาํ หนดจุดเชื่อมโยง 3) จากน้นั เมื่อทาํ การคลิกเมนู วธิ ีการเลือกซ้ืออญั มณี ก็ จะลิงคไ์ ปท่ีเน้ือหา ซ่ึงอยใู่ นหนา้ เวบ็ เพจเดียวกนั

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 167 รูปที่ 5-88 ผลลพั ธ์การเช่ือมโยงขอ้ มลู หนา้ เวบ็ เพจเดียวกนั 5.3.5.5.2 การเช่ือมโยงขอ้ มูลในเวบ็ เพจหนา้ อื่น ภายในเวบ็ ไซตเ์ ดียวกนั การเช่ือมโยงไปยงั เวบ็ เพจอ่ืนภายในเวบ็ ไซตเ์ ดียวกนั ควรเกบ็ ไฟลเ์ วบ็ เพจ ไวใ้ นไดร์ฟ และโฟลเดอร์เดียวกนั เพอ่ื สะดวกในการคน้ หา ซ่ึงมีวธิ ีการดงั ต่อไปน้ี 1) ใหค้ ลิกท่ีขอ้ ความ หรือรูปภาพที่ใชเ้ ป็นเมนู ในที่น่ีจะใช้ รูปภาพเป็นเมนู โดยทาํ การคลิกเมาส์ท่ีรูปภาพ 2) จากน้นั ใหค้ ลิก หลงั ขอ้ ความ Link ที่แถบเครื่องมือ Properties เพอ่ื ทาํ การเลือกไฟลป์ ลายทางที่ตอ้ งการเช่ือมโยงไป คลิกเพอื่ เลือกไฟล์ รูปท่ี 5-89 การเช่ือมโยงขอ้ มูลในเวบ็ เพจหนา้ อื่น ภายในเวบ็ ไซตเ์ ดียวกนั

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 168 3) จากน้นั จะปรากฏหนา้ ตา่ ง สาํ หรับเลือกไฟลห์ นา้ เวบ็ เพจ ให้ เลือกไฟลท์ ี่ชื่อวา่ product.html แลว้ คลิกป่ ุม OK รูปที่ 5-90 การเลือกไฟลห์ นา้ เวบ็ เพจ 4) ผลลพั ธ์ท่ีได้ จะมีขอ้ ความไฟลห์ นา้ เวบ็ เพจ แสดงที่ช่อง Link ไฟลท์ ี่ทาํ การเชื่อมโยงไป รูปที่ 5-91 ไฟลห์ นา้ เวบ็ เพจที่เลือกแสดงที่ช่อง Link

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 169 5) ถา้ นาํ เมาส์ไปคลิกที่เมนู Product ก็จะเชื่อมโยงไปยงั หนา้ สินคา้ จะปรากฎหนา้ สินคา้ คลิกที่เมนู Product รูปที่ 5-92 ผลลพั ธ์การเชื่อมโยงขอ้ มลู ในเวบ็ เพจหนา้ อื่น ภายในเวบ็ ไซตเ์ ดียวกนั 5.3.5.5.3 การเชื่อมโยงขอ้ มูลไปยงั เวบ็ ไซตอ์ ่ืน การเชื่อมโยงไปยงั เวบ็ ไซตอ์ ื่น ท่ีอยนู่ อกเวบ็ ไซตข์ องเราที่สร้างข้ึน สามารถเช่ือมโยงไปยงั เวบ็ ไซตท์ ี่ที่ตอ้ งการ โดยใส่ URL ของเวบ็ ไซตท์ ่ีตอ้ งการ ซ่ึงมีวธิ ีการ ดงั ต่อไปน้ี 1) ใหค้ ลิกที่ขอ้ ความ หรือรูปภาพท่ีใชเ้ ป็นเมนู ในท่ีนี่จะใช้ ขอ้ ความเป็ นเมนู 2) จากน้นั พมิ พ์ URL เวบ็ ไซตป์ ลายทางที่ตอ้ งการเชื่อมโยงไป และกดป่ ุม Enter ที่คาํ สั่ง Link แถบเครื่องมือ Properties

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 170 1.ขอ้ ความท่ีจะเชื่อมโยงไปยงั 2. พมิ พ์ URL ท่ีตอ้ งการ รูปที่ 5-93 การเช่ือมโยงไปยงั เวบ็ ไซตอ์ ื่น 3) เมื่อทาํ การคลิกเมาส์ท่ีเมนู แหล่งอา้ งอิงขอ้ มลู ก็จะปรากฏ หนา้ เวบ็ ไซตท์ ี่ไดท้ าํ การเช่ือมโยงไวแ้ ลว้ รูปที่ 5-94 เวบ็ ไซตอ์ ่ืนที่ทาํ การเช่ือมโยงมา 5.3.5.6 การเชื่อมโยงไปยงั e-mail การเช่ือมโยงไปยงั e-mail address เป็นการอาํ นวยความสะดวกใหก้ บั ผใู้ ช้ ใน กรณีตอ้ งการส่งจดหมาย ติดต่อสอบถาม ซ่ึงมีวธิ ีการดงั น้ี 1) ใหค้ ลิกที่ขอ้ ความ หรือรูปภาพท่ีใชเ้ ป็นเมนู ในที่น่ีจะใชข้ อ้ ความเป็ น เมนู

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 171 2) จากน้นั พมิ พค์ าํ วา่ mailto:ตามดว้ ย e-mail address และกดป่ ุม Enter ที่ ช่อง Link ท่ีแถบเครื่องมือ Properties เช่น mailto:[email protected] 1.ขอ้ ความท่ีจะเช่ือมโยงไปยงั 2. พมิ พ์ mailto:[email protected] รูปท่ี 5-95 การเชื่อมโยงไปยงั e-mail 3) เม่ือทาํ การคลิกเมาส์ท่ีขอ้ ความ ก็จะปรากฏหนา้ ตา่ ง Microsoft Outlook สาํ หรับการติดต่อสอบถาม ผา่ น e-mail address รูปที่ 5-96 หนา้ โปรแกรม Microsoft Outlook 5.3.5.7 การเชื่อมโยงเพื่อดาวน์โหลดไฟล์ การเชื่อมโยงเพ่ือดาวน์โหลด เป็นการอาํ นวยความสะดวกใหก้ บั ผเู้ ขา้ ใชง้ าน เวบ็ ไซต์ ในกรณีที่มีเอกสารดาวน์โหลด ซ่ึงมีวธิ ีการดงั น้ี 1) ใหค้ ลิกท่ีขอ้ ความ หรือรูปภาพที่ใชเ้ ป็นเมนู ในท่ีนี่จะใชข้ อ้ ความเป็ น เมนู 2) จากน้นั ใหค้ ลิก หลงั ขอ้ ความ Link ที่แถบเครื่องมือ Properties เพ่ือทาํ การเลือกไฟลป์ ลายทางท่ีตอ้ งการใหด้ าวน์โหลด

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 172 1.ขอ้ ความท่ีจะเชื่อมโยงไปยงั 2. คลิกเพอ่ื เลือกไฟลท์ ี่ตอ้ งการใหด้ าวน์ รูปที่ 5-97 การเช่ือมโยงเพอื่ ดาวน์โหลดไฟล์ 3) จากน้นั จะปรากฏหนา้ ต่าง สาํ หรับเลือกไฟลด์ าวน์โหลด ใหเ้ ลือกไฟลท์ ี่ ชื่อวา่ serv0013.doc แลว้ คลิกป่ ุม OK รูปท่ี 5-98 การเลือกไฟลด์ าวนโ์ หลด 4) ผลลพั ธ์ท่ีได้ จะมีขอ้ ความไฟลท์ ่ีใหด้ าวน์โหลด แสดงท่ีช่อง Link