การสร้างเว็บไซต์ด้วย Dreamweaver

การสรา้ งเวบ็ ไซต์Adobe Dreamweaver

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

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

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

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 2215.1 การเปิ ดใช้งานโปรแกรม Dreamweaver การใช้งานโปรแกรม Dreamweaver ควรศึกษาข้อมูลเบ้ืองต้น เช่น ความต้องการทรัพยากรสาํ หรับการติดต้งั โปรแกรม ข้นั ตอนการลงทะเบียนและติดต้งั โปรแกรม Dreamweaverข้นั ตอนการเปิ ดใชง้ านโปรแกรม Dreamweaver 5.1.1 ความตอ้ งการทรัพยากรในการติดต้งั โปรแกรม การติดต้งั โปรแกรม Dreamweaver ควรตรวจสอบก่อนวา่ เคร่ืองคอมพวิ เตอร์มีทรัพยากรเพียงพอหรือไม่ดงั น้ี (ธนั ยพฒั น์ วงศร์ ัตน,์ 2556 : 8) 5.1.1.1 หน่วยประมวลผลกลาง (CPU) Intel® Pentium® 4 หรือ AMD Athlon 64Processor จะตอ้ งไม่ต่าํ กวา่ 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 pixels (แนะนาํ ท่ี1280x800) หน่วยความจาํ 512 MB 5.1.1.6 ไดร์ฟซีดีรอม /ดีวดี ีสําหรับติดต้งั โปรแกรม 5.1.2 ข้นั ตอนการลงทะเบียน และติดต้งั โปรแกรม Dreamweaver การติดต้งั โปรแกรม Dreamweaver ตอ้ งมีการลงทะเบียนขอ Adobe ID จากเวบ็ ไซต์www.adobe.com จากน้นั ดาวน์โหลดและติดต้งั Adobe Creative Cloud Desktop และสุดทา้ ย คือการเลือก Package และชาํ ระเงิน โดยมีข้นั ตอนดงั น้ี 5.1.2.1 การลงทะเบียน Adobe ID 1) เปิ ดเวบ็ ไซต์ http://www.adobe.com จากน้นั คลิกท่ี SIGN IN

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

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 223 3) เมื่อสมคั ร 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 Downloads

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 224 คลิกที่ Desktop Downloads รูปที่ 5-5 หนา้ จอสาํ หรับติดต้งั โปรแกรมบนคอมพิวเตอร์ 2) จากน้นั แสดงโปรแกรมต่าง ๆ สามารถดาวนโ์ หลดโปรแกรมแบบทดลองใชง้ าน 30 วนั ในท่ีน้ีเลือกโปรแกรม Dreamweaver โดยคลิกป่ ุม Download trial คลิกป่ ุม Download trial รูปที่ 5-6 หนา้ จอแสดงโปรแกรมสาํ หรับดาวนโ์ หลด

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 225 3) จากน้นั แสดงขอ้ มลู ของโปรแกรม Dreamweaver ใหค้ ลิกเลือกตามที่ตอ้ งการในที่น้ีเลือก GET STARTED คลิกเลือก GET STARTED รูปท่ี 5-7 หนา้ จอสาํ หรับเลือกขอ้ มูลของโปรแกรม Dreamweaver 4) จากน้นั แสดงหนา้ จอรายละเอียดของ GET STARTED ใหค้ ลิกป่ ุมDownload ในกรณีทดลองใช้ 30 วนั หรือ คลิก Buy Now หากตอ้ งการซ้ือ คลิก Download สาํ หรับทดลองใช้ 30 วนั ตอ้ งการซ้ือ รูปที่ 5-8 หนา้ จอสาํ หรับดาวน์โหลดโปรแกรม

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 226 5) แสดงหนา้ จอการชาํ ระเงินสามารถเลือก Package ซ่ึงมีอยู่ 3 Plan ราคาแตกต่างกนั เช่น Annual plan, paid monthly ใชง้ านเป็ นรายปี มีการต่อรอบการชาํ ระเงินอตั โนมตั ิทุกเดือน ส่วน Annual plan, prepaid สาํ หรับการชาํ ระเงินล่วงหนา้ 1 ปี และ Monthly plan ชาํ ระเงินเพียงเดือนเดียว เลือก Package Plan รูปท่ี 5-9 หนา้ จอ Package ของ Creative Cloud 6) เม่ือเลือก Package Plan เสร็จเรียบร้อยใหค้ ลิกป่ ุมจากน้นั แสดงหนา้ จอรายละเอียดเงื่อนไขตา่ ง ๆ ของการชาํ ระเงิน หลงั จากน้นั ทาํ เคร่ืองหมายถูก หนา้ ขอ้ ความ By checking this box, I agree to a one year commitment and installmentbilling, to the auto-renewal plan terms and charges, to the cancellation terms and charges, andto the Digital River Terms of Sale and Privacy Policy. เพ่อื ยอมรับเงื่อนไข และคลิกป่ ุม AcceptTerms & Conditions เพื่อเขา้ สู่ข้นั ตอนการชาํ ระเงิน

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 227 ทาํ เคร่ืองหมายถกู  เพือ่ ยอมรับเงื่อนไข คลิกป่ ุม Accept Terms & Conditionsรูปท่ี 5-10 หนา้ จอแสดงรายละเอียดเงื่อนไขต่าง ๆ ของการชาํ ระเงิน

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

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 229 5.1.3 ข้นั ตอนการเปิ ดใชง้ านโปรแกรม Dreamweaver เม่ือตอ้ งการเขา้ สู่โปรแกรม Dreamweaver เพ่อื เปิ ดใชง้ าน มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 เปิ ดโปรแกรม Dreamweaver โดยคลิกท่ีป่ ุม Start > All Programs >Adobe Dreamweaver CC เลือกโปรแกรม Adobe Dreamweaver CC คลิกป่ ุม รูปท่ี 5-12 การเปิ ดโปรแกรม Dreamweaver ข้นั ตอนที่ 2 เขา้ สู่หนา้ จอ Welcome Screen ซ่ึงเป็นเคร่ืองมือสาํ หรับช่วยเลือกข้นั ตอนเริ่มตน้ ในการใชง้ านโปรแกรม โดยตวั เลือกแบง่ ออกเป็ นกลุ่มดงั น้ี Open a Recent Item เปิ ดไฟลท์ ี่ใชโ้ ดยคลิกเลือกจากรายชื่อที่แสดงอยู่ เรียงลาํ ดบั จากท่ีเปิ ดหลงั สุดเป็นตน้ ไป หรือคลิก Open เพอื่ เปิ ดไฟลอ์ ่ืน ๆ Create New สร้างไฟลใ์ หม่ โดยถา้ คลิก HTML เป็นการสร้างเวบ็ เพจพ้ืนฐาน แต่ถา้คลิกหวั ขอ้ อื่นเป็นการสร้างเวบ็ เพจ หรือไฟลต์ ามชนิดน้นั ๆ Top Features (Videos) เป็นเส้นทางลดั สาํ หรับเขา้ ดูรายละเอียดและเทคนิคในการใชง้ านตา่ ง ๆ ของโปรแกรมผา่ นทางเวบ็ ไซตข์ อง Adobe

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 230กลุ่ม Open a Recent Item กลุ่ม Create New กล่มุ Top Features (videos) รูปที่ 5-13 หนา้ จอโปรแกรม Dreamweaver5.2 ส่วนประกอบของโปรแกรม Dreamweaver หนา้ จอการทาํ งานของโปรแกรม Dreamweaver มีองคป์ ระกอบดงั น้ี แถบเมนูหลกั แถบเคร่ืองมือพ้นื ท่ีสร้างเวบ็ เพจ แถบสถานะ กลุม่ หนา้ จอ Panelหนา้ จอ Properties inspector รูปที่ 5-14 หนา้ จอการทาํ งานของโปรแกรม Dreamweaver

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

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

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

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

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

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 236 ข้นั ตอนท่ี 2 ต้งั ชื่อ Site name และกาํ หนดตาํ แหน่งของ Local Site Folder จากน้นัคลิกป่ ุม Save ต้งั ชื่อ Site Name กาํ หนดตาํ แหน่งของ Local Site Folder คลิกป่ ุม Save รูปท่ี 5-26 การกาํ หนด Site Name และ Local Site Folder ข้นั ตอนที่ 3 เม่ือเสร็จสิ้นการสร้าง Site แสดงผลลพั ธ์ในส่วนของ Site Panel แสดงผลลพั ธก์ ารสร้าง Site ใน Site Panel รูปท่ี 5-27 หนา้ จอ Site Panel

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

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

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 239 ข้นั ตอนท่ี 2 ต้งั ชื่อใหมต่ ามที่ตอ้ งการ พิมพช์ ่ือใหมท่ ่ีตอ้ งการ รูปท่ี 5-33 การเปลี่ยนชื่อตามท่ีตอ้ งการ 5.3.1.4 การลบไฟลแ์ ละโฟลเดอร์ ในกรณีท่ีตอ้ งการลบไฟลห์ รือโฟลเดอร์ที่ไม่ไดใ้ ชง้ านออกจาก Site มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 คลิกเลือกไฟลท์ ต่ี อ้ งการลบ จากน้นั กด Delete เลือกโฟลเดอร์ที่ตอ้ งการลบ รูปที่ 5-34 การเลือกโฟลเดอร์ที่ตอ้ งการลบ ข้นั ตอนท่ี 2 แสดงหนา้ จอการยนื ยนั การลบไฟล์ ใหค้ ลิกป่ ุมเพือ่ ยนื ยนั การลบไฟล์ เลือกโฟลเดอร์ท่ีตอ้ งการลบ รูปที่ 5-35 หนา้ จอยืนยนั การลบ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 240 ข้นั ตอนท่ี 3 ท่ีหนา้ จอ Site Panel โฟลเดอร์ที่ถูกลบหายไป รูปที่ 5-36 แสดงโฟลเดอร์ท่ีถูกลบหายไป 5.3.2 การกาํ หนดรายละเอียดของหนา้ เวบ็ เพจ การกําหนดรายละเอียดของหน้าเว็บเพจเป็ นการกาํ หนดคุณสมบัติพ้ืนฐานของเวบ็ เพจ ซ่ึงเวบ็ เพจแต่ละหนา้ มีคุณสมบตั ิพ้ืนฐานเฉพาะตวั ไม่เก่ียวขอ้ งกบั เวบ็ เพจหนา้ อื่น ๆ เช่นช่ือเวบ็ เพจ (Title) สีพ้นื (Background color) ภาพพ้นื หลงั (Background image) และสีของขอ้ ความ(Text color) เป็นตน้ การกาํ หนดรายละเอียดของหนา้ เวบ็ เพจมีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 ไปท่ีเมนูคาํ สั่ง Modify > Page Properties คลิกเมนู Modify > Page Properties.. รูปท่ี 5-37 วธิ ีการกาํ หนดรายละเอียดของหนา้ เวบ็ เพจ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 241 ข้นั ตอนที่ 2 แสดงหนา้ จอ Page Properties เพอ่ื ต้งั ค่าพ้ืนฐานใหก้ บั หนา้ เวบ็ เพจซ่ึงมีท้งั หมด 6 หมวด มี 6 หมวด รูปท่ี 5-38 หนา้ จอ Page Properties 5.3.2.1 หมวด Appearance (CSS) กาํ หนด Font สีขอ้ ความ และสีพ้ืนหลงั เวบ็ เพจแบบ CSS Style Sheet มีรายละเอียดดงั น้ี Page Font กาํ หนดรูปแบบขอ้ ความ Size กาํ หนดขนาดใหก้ บั ขอ้ ความ Text color กาํ หนดสีใหก้ บั ขอ้ ความ Background color กาํ หนดสีท่ีตอ้ งการใหเ้ ป็ นพ้นื หลงั ของหนา้ เวบ็ เพจ Background imageกาํ หนดรูปภาพท่ีตอ้ งการเป็ นพ้นื หลงั ของหนา้ เวบ็ เพจ Repeat กาํ หนดการแสดงซ้าํ ของรูปพ้ืนหลงั Left margin กาํ หนดระยะขอบซา้ ยของหนา้ เวบ็ เพจ Right margin กาํ หนดระยะขอบขวาของหนา้ เวบ็ เพจ Top margin กาํ หนดระยะขอบบนของหนา้ เวบ็ เพจ Bottom margin กาํ หนดระยะขอบล่างของหนา้ เวบ็ เพจ

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

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 243 หมวด Appearance (HTML) รูปท่ี 5-40 หนา้ จอ Appearance (HTML) 5.3.2.3 หมวด Links (CSS) กาํ หนดเลือก Font ขนาดขอ้ ความ และสีขอ้ ความที่สร้างเป็นลิงคเ์ พ่ือเชื่อมโยงไปที่หนา้ เวบ็ เพจตา่ ง ๆ มีรายละเอียดดงั น้ี Link Font กาํ หนดรูปแบบขอ้ ความของลิงค์ Size กาํ หนดขนาดใหก้ บั ขอ้ ความของลิงค์ Links color กาํ หนดสีขอ้ ความของลิงค์ Rollover links กาํ หนดสีขอ้ ความของลิงคเ์ มื่อเล่ือนเมาส์ ไปวางบนขอ้ ความของลิงค์ Visited links กาํ หนดสีขอ้ ความของลิงคเ์ มื่อถูกคลิกไปแลว้ Active links กาํ หนดสีขอ้ ความของลิงคท์ ่ีกาํ ลงั คลิกอยขู่ ณะน้นั Underline style กาํ หนดรูปแบบการขีดเส้นใตใ้ หก้ บั ลิงค์

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 244 หมวด Links (CSS) รูปท่ี 5-41 หนา้ จอ Link (CSS) 5.3.2.4 หมวด Headings (CSS) กาํ หนด Font ขนาดขอ้ ความ และสีขอ้ ความใหก้ บัหวั เร่ืองระดบั ต่าง ๆ จาก Heading 1 ใหญ่สุดไปถึงระดบั Heading 6 ที่เลก็ ท่ีสุด มีรายละเอียดดงั น้ี Heading Font กาํ หนดรูปแบบขอ้ ความของหวั เรื่อง Heading 1-6 กาํ หนดขนาดใหข้ อ้ ความของหวั เร่ือง หมวด Headings (CSS) รูปที่ 5-42 หนา้ จอ Headings

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 2455.3.2.5 หมวด Title/Encoding กาํ หนดหวั เรื่องของเวบ็ เพจ และการเขา้ รหสัขอ้ ความ มีรายละเอียดดงั น้ี Title หวั เรื่องของหนา้ เวบ็ เพจ แสดงผลเม่ือเปิ ดเวบ็ เพจ บนเวบ็ บราวเซอร์ Document Type ระบุมาตรฐานของภาษาในเวบ็ เพจ เช่น HTML5 หรือ XHTML1.0 Transition ใหเ้ ป็นค่าเริ่มตน้ Encoding การเขา้ รหสั ภาษาปกติเป็น Unicode (UTF-8) หมวด Title/Encoding รูปที่ 5-43 หนา้ จอ Title/Encoding5.3.2.6 หมวด Tracing Image กาํ หนดคุณสมบตั ิของรูปภาพที่ใชเ้ ป็นแบบมีรายละเอียดดงั น้ี Tracing Image เลือกไฟลร์ ูปภาพท่ีใช้ Transparency กาํ หนดคา่ ความโปร่งใสของรูปภาพ โดยรูปภาพเป็นแบบสีจาง ๆ ดา้ นหลงั ช่วยให้ เห็นตาํ แหน่งการวางรูปภาพ และวางขอ้ ความ ที่ถูกตอ้ ง

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

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 247โดยท้งั 3 วธิ ีแสดงหนา้ จอ Table สาํ หรับกาํ หนดรายละเอียดเกี่ยวกบั ตารางดงั น้ีRow จาํ นวนแถวท่ีตอ้ งการColumns จาํ นวนคอลมั นท์ ี่ตอ้ งการTable width ความกวา้ งของตารางหน่วยท่ีใชเ้ ป็น percent หรือ pixelsBorder thickness ความหนาของขอบตารางCell padding ระยะห่างระหวา่ งขอ้ ความภายในเซลลก์ บั ขอบเซลล์Cell spacing ระยะห่างระหวา่ งแต่ละเซลลใ์ นตารางHeader กาํ หนดหวั ขอ้ ของขอ้ มูลในตารางและการจดั วาง โดยกาํ หนด ไดด้ งั น้ี ไมม่ ีการกาํ หนดหวั ขอ้ ของขอ้ มูลในตาราง กาํ หนดใหค้ อลมั น์แรกเป็ นหวั ขอ้ ของขอ้ มลู ในตาราง กาํ หนดใหแ้ ถวแรกเป็นหวั ขอ้ ของขอ้ มูลในตารางCaption กาํ หนดใหท้ ้งั แถว และคอลมั นแ์ รก เป็ นหวั ขอ้Summary ของขอ้ มูลในตาราง กาํ หนดหวั ขอ้ ของตาราง เขียนคาํ อธิบายเก่ียวกบั ตาราง ซ่ึงถูกฝังไวใ้ นโคด้ HTML และ ไมถ่ ูกแสดงออกมาใหเ้ ห็นบนหนา้ เวบ็ เพจ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 248 รูปที่ 5-46 การกาํ หนดรายละเอียดของตารางตวั อยา่ ง การออกแบบหนา้ เวบ็ เพจดว้ ยเลยเ์ อาท์ส่วนเมนูหลกั ส่วนของ Header ส่วนท่ีไวส้ าํ หรับทาํ ขอ้ ความเคลื่อนไหว ส่วนลิงคอ์ ื่น ๆ ส่วนของเน้ือหา ส่วนของ Footer รูปที่ 5-47 การออกแบบหนา้ เวบ็ เพจดว้ ยเลยเ์ อาท์

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

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 250 เลือกคาํ สงั่ Table > Merge Cells รูปท่ี 5-50 การใชค้ าํ สัง่ Merge Cells แถวที่ 1 ข้นั ตอนท่ี 4 ผสานคอลมั น์แถวท่ี 2 โดยการเลือก 3 คอลมั นข์ องแถวที่ 2จากน้นั คลิกเมาส์ขวาเลือกคาํ สั่ง Table > Merge Cells เลือกคาํ สง่ั Table > Merge Cells รูปที่ 5-51 การใชค้ าํ ส่งั Merge Cells แถวท่ี 2 ข้นั ตอนที่ 5 ผสานคอลมั นแ์ ถวท่ี 4 โดยการเลือก 3 คอลมั นข์ องแถวที่ 4จากน้นั คลิกเมาส์ขวาเลือกคาํ สัง่ Table > Merge Cells เลือกคาํ สง่ั Table > Merge Cells รูปที่ 5-52 การใชค้ าํ สั่ง Merge Cells แถวที่ 4

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 251 ข้นั ตอนที่ 6 เม่ือปรับแต่งตารางเสร็จเรียบร้อย แสดงผลลพั ธ์ดงั รูปที่ 5-53 รูปที่ 5-53 แสดงตารางที่ไดป้ รับแต่งเรียบร้อย 5.3.3.2*การจดั เลยเ์ อาท์ด้วย*Fluid*Grid*เป็ นการสร้างเว็บเพจแบบ*Responsiveให้ยืดหยุ่น สามารถแสดงเน้ือหาไดอ้ ย่างถูกตอ้ ง และเหมาะสมกบั การใช้งานตามขนาดหน้าจอที่หลากหลายของผใู้ ช้ ในโปรแกรม Dreamweaver สามารถสร้างหนา้ เวบ็ เพจแบบ Responsive ได้อตั โนมตั ิโดยไม่ตอ้ งเขียนโคด้ HTML และ CSS มีข้นั ตอนการสร้างดงั น้ี ข้นั ตอนที่ 1 ไปที่เมนู File > New คลิกเมนู File > New รูปท่ี 5-54 การสร้างเอกสารใหม่ ข้นั ตอนท่ี 2 คลิกเลือกคาํ สง่ั Fluid Grid Layout จากน้นั คลิกป่ ุม Create

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 252เลือกคาํ สงั่ Fluid Grid Layout คลิกป่ ุม Create รูปที่ 5-55 การสร้าง Fluid Grid Layoutข้นั ตอนที่ 3 ต้งั ชื่อไฟล์ CSS จากน้นั คลิกป่ ุม Saveต้งั ช่ือไฟล์ CSS คลิกป่ ุม Saveรูปที่ 5-56 การต้งั ช่ือไฟล์ CSS

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 253 ข้นั ตอนท่ี 4 แสดงหนา้ จอไฟลท์ ่ีสร้างในแบบ Fluid Grid Layout ขนาดเริ่มตน้ ท่ีแสดงเป็ นขนาด 480 x 480 และโปรแกรมสร้างไฟลป์ ระกอบข้ึนมาใหด้ ว้ ย ซ่ึงไฟลเ์ หล่าน้ีเป็นไฟลท์ ่ีทาํ หนา้ ที่ร่วมกนั ใหเ้ วบ็ เพจเป็น Responsive เช่น boilerplate.css, repon.min.js รายการไฟลท์ ี่โปรแกรมสร้างให้ คาํ แนะนาํ Column Grid ขนาดหนา้ จอเร่ิมตน้ 480 x 480รูปท่ี 5-57 หนา้ จอ Fluid Gridข้นั ตอนที่ 5 เลือกขอ้ ความใน Box กดป่ ุม Delete ท่ีคียบ์ อร์ดเพ่ือลบทิง้จากน้นั ไปที่ Panel Insert > Structure เลือกคาํ ส่ัง Div 2. ท่ี Panel Insert > Structure เลือกคาํ สง่ั Div1. เลือกขอ้ ความใน Box จากน้นั กดป่ ุม Delete ที่คียบ์ อร์ดเพอื่ ลบทิ้ง รูปที่ 5-58 หนา้ จอการใชค้ าํ สง่ั Div

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 254 ข้นั ตอนที่ 6 แสดงหนา้ จอ Div ต้งั ชื่อ header เป็นส่วนหวั ของเวบ็ เพจและทาํ เคร่ืองหมาย  หนา้ ขอ้ ความ Insert as Fluid Element จากน้นั คลิกป่ ุม OK คลิกป่ ุม OK พมิ พ์ header ทาํ เครื่องหมายถกู รูปที่ 5-59 หนา้ จอการ Insert Div ส่วนของ header ข้นั ตอนท่ี 7 แสดงผลลพั ธ์จากการ Insert Div ส่วนของ header ผลลพั ธ์ที่ไดจ้ ากการสร้าง header รูปท่ี 5-60 หนา้ จอผลลพั ธ์จากการสร้าง header ข้นั ตอนท่ี 8 แสดงหนา้ จอ Div ต้งั ชื่อ nav เป็นส่วนของเมนูและทาํ เคร่ืองหมาย  หนา้ ขอ้ ความ Insert as Fluid Element จากน้นั คลิกป่ ุม OK คลิกป่ ุม OK พิมพ์ nav ทาํ เครื่องหมายถูก รูปท่ี 5-61 หนา้ จอการ Insert Div ส่วนของ nav

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 255 ข้นั ตอนท่ี 9 แสดงผลลพั ธ์จากการ Insert Div ส่วนของ nav ผลลพั ธท์ ี่ไดจ้ ากการสร้าง nav รูปที่ 5-62 หนา้ จอผลลพั ธ์จากการสร้าง nav ข้นั ตอนท่ี 10 แสดงหนา้ จอ Div ต้งั ช่ือ section เป็นส่วนของเน้ือหาและทาํ เครื่องหมาย  หนา้ ขอ้ ความ Insert as Fluid Element จากน้นั คลิกป่ ุม OK คลิกป่ ุม OK พมิ พ์ section ทาํ เครื่องหมายถูก รูปที่ 5-63 หนา้ จอการ Insert Div ส่วนของ section ข้นั ตอนท่ี 11 แสดงผลลพั ธ์จากการ Insert Div ส่วนของ section และคลิกปรับความกวา้ งคอลมั น์ ผลลพั ธ์ท่ีไดจ้ ากการสร้าง section หลงั จากปรับความกวา้ งคอลมั น์ รูปท่ี 5-64 หนา้ จอผลลพั ธ์จากการสร้าง section

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 256 ข้นั ตอนที่ 12 แสดงหนา้ จอ Div ต้งั ชื่อ aside เป็นส่วนลิงคอ์ ื่น ๆ และทาํ เคร่ืองหมาย  หนา้ ขอ้ ความ Insert as Fluid Element จากน้นั คลิกป่ ุม OK คลิกป่ ุม OK พมิ พ์ aside ทาํ เคร่ืองหมายถกู รูปที่ 5-65 หนา้ จอการ Insert Div ส่วนของ aside ข้นั ตอนท่ี 13 แสดงผลลพั ธ์จากการ Insert Div ส่วนของ aside สาํ หรับเป็นลิงคอ์ ื่น ๆ จากน้นั คลิกป่ ุม Move up a row เพือ่ ใหแ้ ถวไปอยดู่ า้ นบนเดียวกบั ส่วนของ section คลิกป่ ุม Move up a row รูปท่ี 5-66 หนา้ จอผลลพั ธ์จากการสร้าง aside ข้นั ตอนท่ี 14 แสดงหนา้ จอ Div ต้งั ช่ือ footer เป็นส่วนทา้ ยของเวบ็ เพจและทาํ เคร่ืองหมาย  หนา้ ขอ้ ความ Insert as Fluid Element จากน้นั คลิกป่ ุม OK คลิกป่ ุม OK พมิ พ์ footer ทาํ เครื่องหมายถูก รูปท่ี 5-67 หนา้ จอการ Insert Div ส่วนของ footer

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 257 ข้นั ตอนที่ 15 แสดงผลลพั ธ์จากการ Insert Div ส่วนทา้ ยของเวบ็ เพจ ผลลพั ธท์ ี่ไดจ้ ากการสร้าง footer รูปท่ี 5-68 หนา้ จอผลลพั ธ์จากการสร้าง footer 5.3.4 การจดั การรูปภาพในเวบ็ เพจ รูปภาพเป็ นองค์ประกอบที่สําคัญของเว็บไซต์ เพราะเพ่ิมความสวยงามและความน่าสนใจให้กบั เวบ็ ไซต์ ซ่ึงรูปภาพที่นาํ มาใช้ในเวบ็ เพจตอ้ งเป็ นรูปแบบไฟล์*JPEG, GIFและ PNG เท่าน้นั ในการเตรียมไฟลร์ ูปภาพสามารถใชโ้ ปรแกรม Adobe Photoshop หรือโปรแกรมPhotoScape หรือโปรแกรมอื่น ๆ ในเอกสารประกอบการเรียนน้ีอธิบายการสร้างและตกแต่งรูปภาพดว้ ยโปรแกรม PhotoScape เพ่ือนาํ ไปใชใ้ นเวบ็ ไซต์ 5.3.4.1 การสร้าง และตกแต่งรูปภาพดว้ ยโปรแกรม PhotoScape การสร้างรูปภาพสาํ หรับใชเ้ ป็ นส่วนหวั ของเวบ็ เพจ (Header) มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 เขา้ สู่โปรแกรม โดยคลิกท่ีป่ ุม เลือก PhotoScape คลิกเลือก PhotoScape คลิกป่ ุม Start รูปที่ 5-69 การเขา้ สู่โปรแกรม PhotoScape

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 258 ข้นั ตอนที่ 2 หนา้ จอโปรแกรม PhotoScape รูปที่ 5-70 หนา้ จอของโปรแกรม PhotoScape ข้นั ตอนท่ี 3 ไปท่ีเมนู Editor จากน้นั คลิกท่ี Menu > New Photo1. คลิกที่เมนู Editor 2. คลิกที่คาํ สง่ั Menu เลือกคาํ สง่ั New Photo รูปท่ี 5-71 การสร้างรูปภาพใหม่

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 259 ข้นั ตอนท่ี 4 กาํ หนดความกวา้ ง ความสูง และสี จากน้นั คลิกป่ ุม Ok คลิกป่ ุม OK กาํ หนดความกวา้ ง ความสูงและสี รูปที่ 5-72 การกาํ หนดความกวา้ ง สูง และสีของรูปภาพ ข้นั ตอนที่ 5 แสดงผลลพั ธ์ท่ีไดจ้ ากการสร้างรูปภาพใหม่ แสดงผลลพั ธท์ ่ีไดจ้ ากการสร้างรูปภาพใหม่ขอบท่ีตอ้ งการ รูปท่ี 5-73 แสดงผลลพั ธ์จากการสร้างรูปภาพใหม่ ข้นั ตอนท่ี 6 การใส่เส้นขอบใหก้ บั รูปภาพท่ีสร้าง ทาํ ไดโ้ ดยการคลิกเลือก เลือกรูปแบบเสน้ ขอบที่ตอ้ งการ ผลลพั ธ์ท่ีได้ รูปที่ 5-74 การใส่เส้นขอบใหก้ บั รูปภาพ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 260 ข้นั ตอนที่ 7 การแทรก Object รูปภาพการ์ตูน โดยการคลิกท่ีแทบ็ Object คลิกท่ีแทบ็ Object รูปที่ 5-75 การแทรก Object รูปภาพการ์ตนู ข้นั ตอนที่ 8 คลิกไอคอน เลือกรูปภาพท่ีตอ้ งการ จากน้นั คลิกป่ ุม OK 2. เลือกรูปภาพที่ตอ้ งการ1. คลิกไอคอน 3. คลิกป่ ุม OK เพ่ือเลือกรูปภาพ รูปท่ี 5-76 การแทรกรูปภาพการ์ตนู ข้นั ตอนท่ี 9 แสดงผลลพั ธ์การแทรกรูปภาพการ์ตนูผลลพั ธจ์ ากการแทรกรูปภาพการ์ตูน รูปท่ี 5-77 แสดงผลลพั ธ์การแทรกรูปภาพการ์ตูน

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 261 ข้นั ตอนที่ 10 การแทรกขอ้ ความ โดยการคลิกที่ไอคอน T จากน้นั ให้กาํ หนดคุณสมบตั ิต่าง ๆ เกี่ยวกบั ขอ้ ความ เช่น ลกั ษณะ Font ขนาด สี และคุณสมบตั ิอื่น ๆ 2. กาํ หนดคุณสมบตั ิต่าง ๆ ของขอ้ ความ เช่น font สี ขนาด 3. ผลลพั ธท์ ี่ไดจ้ ากการแทรกขอ้ ความ1. คลิกเลือก T เพอื่ พมิ พข์ อ้ ความ รูปท่ี 5-78 การแทรกขอ้ ความ ข้นั ตอนท่ี 11 การแทรกไฟลร์ ูปภาพ โดยการคลิกไอคอน จากน้นัคลิกคาํ ส่ัง Photo คลิกไอคอน และเลือกคาํ สง่ั Photo.. รูปที่ 5-79 การแทรกไฟลร์ ูปภาพ ข้นั ตอนท่ี 12 เลือกตาํ แหน่งไฟลร์ ูปภาพ และเลือกรูปภาพที่ตอ้ งการจากน้นั คลิกป่ ุม Open

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 262 คลิกเลือกรูปภาพ คลิกป่ ุม Open รูปท่ี 5-80 การเลือกไฟลร์ ูปภาพที่ตอ้ งการข้นั ตอนท่ี 13 แสดงผลลพั ธ์การแทรกรูปภาพ ผลลพั ธ์จากการแทรกรูปภาพ รูปท่ี 5-81 แสดงผลลพั ธ์การแทรกรูปภาพ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 263 5.3.4.2 การบนั ทึกไฟลร์ ูปภาพ มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 คลิกท่ีป่ ุม Save จากน้นั แสดงหนา้ จอ Save ใหค้ ลิกป่ ุม Save As 2. เลือกป่ ุม Save AS 1. เลือกป่ ุม Save รูปท่ี 5-82 การบนั ทึกไฟลร์ ูปภาพ ข้นั ตอนที่ 2 เลือกไดร์ฟท่ีตอ้ งการจดั เกบ็ ไฟลร์ ูปภาพ ต้งั ชื่อไฟลร์ ูปภาพจากน้นั คลิกป่ ุม Save 1. เลือกตาํ แหน่งที่จดั เกบ็ รูปภาพ2. ต้งั ช่ือไฟลร์ ูปภาพ 3. คลิกป่ ุม Saveรูปที่ 5-83 การเลือกตาํ แหน่งที่จดั เก็บรูปภาพ

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

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

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