81
82 การสร้างเว็บไซต์ด้วยโปรแกรมAdobe Dreamweaver cc 2018 6.1 การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 6.2 การสร้างไชต์ 6.3 การจัดการโครงร่างเว็บไซต์ด้วยตาราง 6.4 การตั้งค่าการแสดงผลเว็บไซต์ 6.5 การบันทึกเอกสารเว็บไซต์ แนวคิดสำคัญ (MAIN IDEA) หลังจากที่ได้ติดตั้งโปรแกรมและรู้จักส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 มาแล้ว ในหน่วยนี้ประกอบด้วย การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 ซึ่งเป็นเครื่องมือที่จะใช้ในการสร้างเว็บไซต์และจ าเป็นต้องมีความรู้ในการบริหารจัดการไฟล์ในโปรแกรม หรือการสร้างเว็บไซต์ให้กับไฟล์ข้อมูลและการจัดการโครงร่างเว็บไซต์ด้วยตาราง การตั้งค่าการแสดงผล เว็บไซต์และ การบันทึกเอกสารเว็บไซต์เพื่อให้สามารถสร้างเว็บไซต์ได้อย่างถูกต้องและมีประสิทธิภาพ สมรรถนะย่อย (ELEMENT OF COMPETENCY) 1. แสดงความรู้เกี่ยวกับการใช้งานโปรแกรม Adobe Dreamweaver CC 2018 2. ประยุกต์ใช้โปรแกรม Adobe Dreamweaver CC 2018 สำหรับการสร้างเว็บไซต์ หัวข้อเรื่อง (TOPICS) จุดประสงค์เชิงพฤติกรรม (BEHAVIOAL OBJECTIVES) 1. ใช้งานโปรแกรม Adobe Dreamweaver CC 2018 ได้ 2. สร้างไซต์ได้ 3. จัดการโครงร่างเว็บไซต์ด้วยตารางได้ 4. ตั้งค่าการแสดงผลเว็บไซต์ได้ 5. บันทึกเอกสารเว็บไซต์ได้
83 การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 ประกอบด้วย การเข้าสู่โปรแกรม การปิด โปรแกรม Adobe Dreamweaver CC 2018 และการสร้างเอกสารใหม่ ซึ่งมีรายละเอียดดังนี้ 6.1.1 การเข้าสู่โปรแกรม Adobe Dreamweaver CC 2018 การเข้าสู่โปรแกรม Adobe Dreamweaver CC 2018 สามารถทำได้ 2 วิธี ดังนี้ 1. การเข้าสู่โปรแกรมให้ไปที่เครื่องมือ Start Menu โดยกดคลิกที่ Start เลือก Adobe Dreamweaver CC 2018 ดังรูป 2. การเข้าสู่โปรแกรมที่ Shortcut หน้า Desktop โดยสามารถดับเบิลคลิกที่ไอคอนรูป โปรแกรม Adobe Dreamweaver CC 2018 ได้เลย 6.1การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 เนื้อหาสาระ (Content)
84 6.1.2 การปิดโปรแกรม Adobe Dreamweaver CC 2018 การปิดโปรแกรมสามารถทำได้ 3 วิธีดังนี้ 1. กดปุ่ม Close ที่หน้าจอด้านขวามือโปรแกรม ดังรูป 2. คลิกที่เมนู File > Exit 6.1.3 การสร้างเอกสารใหม่ การสร้างเอกสารใหม่จะทำหลังจากที่ได้เปิดโปรแกรมขึ้นมาแล้ว และเอกสารใหม่ของโปรแกรม Adobe Dreamweaver CC 2018 สามารถสร้างได้หลายประเภท แต่การสร้างเว็บในหน่วยนี้จะสร้างเอกสาร ใหม่ที่เป็นแบบ HTML และใช้รูปแบบ HTML5 หมายถึง ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล
85 HTML5 ถูกพัฒนาชื้นเพื่อเป็นภาษามาร์กอัปสำหรับ WW รุ่นต่อไปของ HTML ถูกพัฒนาขึ้น ในปี 2004 โดยกลุ่ม WHATWG (The Web Hypertext Application Technology Working Group) โดยเรียกชื่อว่า Web Applications 1.0 ซึ่งดราฟต์แรกได้ปรากฏออกมาเมื่อ 22 มกราคม พ.ศ. 2551 มีสิ่งที่เปลี่ยนการเขียนชุดคำสั่งแบบเดิม ๆ ในเวอร์ชันเก่า ทำให้การเขียนชุดคำสั่ง Doctype การกำหนดภาษา การทำหนดชุดตัวอักษรทำได้ง่ายขึ้น วิธีการสร้างเอกสารใหม่มีดังนี้ 1. คลิกที่เมนู File > New หรือกด Ctrl+N เพื่อเปิดเอกสารใหม่ 2. จะปรากฎหน้าจอให้สร้างเอกสารใหม่ (New Document) เลือก Document Type: </>HTML และ Framework: HTML5 คลิกที่ปุ่ม Create
86 3.จะได้เอกสารใหม่ ดังรูป สร้างไซต์เป็นขั้นตอนแรกของกสร้างเว็บด้วยโปรแกรม Dreamweaver ซึ่งเป็นการกำหนดให้ โปรแกรมทราบที่อยู่ของไฟล์ต่าง ๆ ของเว็บไชต์ที่สร้างไว้ เครื่องมือต่าง ๆ ของ Dreamweaver จะทำงานโดย อ้างอิงไซต์ที่กำหนด ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่าง ๆ ที่อยู่ในเว็บไซต์ จะถูกรวมอยู่ในโฟลเดอร์เดียว เรียกโฟลเดอร์นั้นว่า Local Root Folder การสร้างไซต์ มีขั้นตอนดังนี้ 1.คลิกที่เมนู Site > New Site 6.2 การสร้างไซต์
87 2.จะปรากฏหน้าต่างการตั้งค่าไซต์ ที่ Site Name ตั้งชื่อที่ต้องการ (การตั้งชื่อไซต์ควรเป็น ภาษาอังกฤษเพราะเครื่องเซิร์ฟเวอร์ส่วนใหญ่ใช้ระบบปฏิบัติการยูนิกซ์ (Unix) หรือลินุกซ์ (Linux) การใส่ชื่อ ภาษาไทยอาจมีปัญหาได้) Local Site Folder: เลือกแหล่งที่เก็บไฟล์โดยคลิกที่ปุ่ม Browse 3.จะปรากฏหน้าจอ Choose Root Folder ให้เลือกโฟลเดอร์ที่ต้องการ คลิกปุ่ม Select Folder 4.จะปรากฏหน้าจอ Site Setup for web คลิกปุ่ม Save 5.จะปรากฏหน้าจอ Site ที่หน้าต่าง File
88 6.หากมีการย้ายเครื่องทำงาน สามารถแก้ไขไซต์โดยการคลิกที่เมนู Site > Manage Sites 7.จะพบไซต์ที่มีในเครื่อง ให้ดับเบิลคลิกไซต์ที่ต้องการแก้ไข 8.จะเข้าสู่หน้าจอการตั้งค่า Site Setup for web ให้ทำการตั้งค่าใหม่ แล้วคลิกปุ่ม Save
89 9.ไซต์ที่สร้างจะถูกแก้ไขเรียบร้อย คลิกปุ่ม Done จัดโครงร่างเว็บไซต์ด้วยตารางช่วยในการแสดงข้อมูลหรือองค์ประกอบต่าง ๆ ของเว็บไซต์แสดงผล ได้ตรงตามตำแหน่งที่ต้องการ ไม่ว่าจะเป็นข้อความ รูปภาพ ปุ่ม เมนู แบบฟอร์ม หรือมัลติมีเดียอื่น ๆ แม้ว่า ในปัจจุบันจะมีเทคนิคใหม่ที่สามารถใช้จัดวางเลย์เอาของเว็บไซต์ได้สะดวกขึ้น แต่การวางโครงร่างเว็บไซต์ ด้วยตารางก็ยังเป็นเครื่องมือที่นิยม เพราะสามารถแสดงผลในโปรแกรมเว็บบราวเซอร์ต่าง ๆ ได้ในตำแห น่ง ที่ถูกต้อง การจัดโครงร่างเว็บไซต์ด้วยตาราง มีขั้นตอนดังนี้ 1. คลิกมุมมอง Design 2. คลิกที่เครื่องมือตารางเพื่อสร้างตารางในการจัดการโครงร่างเว็บไซต์ 3. กำหนดจำนวนแถว Rows : 2 แถว กำหนดจำนวนคอลัมน์ Columns : 4 คอลัมน์ และกำหนด ความกว้างของตาราง Table width : 1010 pixels คลิกปุ่ม OK 6.3 การจัดการโครงร่างเว็บไซต์ด้วยตาราง
90 4.จะได้ตารางที่มีขนาดตามต้องการ 5.ที่แถบ Properties กำหนดตำแหน่งการวางของตารางที่ได้ให้อยู่ในตำแหน่งกึ่งกลางที่ช่อง Align Center 6.เลือกแถวแรกทั้งหมด 7.คลิกขวา Table > Merge Cells หรือคลิกที่แถบ Properties คลิกเครื่องมือ Merges หรือกดคีย์ลัด Ctrl+Alt+M
91 8.แถวที่เลือกจะอยู่รวมกัน 9.ที่แถบ Properties กำหนดความสูงให้กับเซลล์ที่เลือกที่ช่อง H : 300 10.จะได้แถวของตารางเพื่อใช้สำหรับใส่รูปภาพส่วนหัว 11.คลิกคลุมเลือกคอลัมน์ที่ 2,3,4 แถวที่ 2 12.คลิกที่แถบ Properties คลิกเครื่องมือ Merges
92 13.คอลัมน์จะรวมกันเป็นเซลล์เดียวกัน 14.คลิกแถวที่ 2 กด Tab 1 ครั้ง ที่แป้นพิมพ์ จำนวนแถวจะเพิ่มขึ้น 1 แถว 15.คลิกเลือกแถวที่ 2 แถบ Propeties กำหนดความสูงให้กับเซลล์ที่เลือกที่ช่อง H : 300
93 16.เลือกแถวที่ 3 ที่แถบ Propeties คลิกเครื่องมือ Merges 17.จะได้โครงร่างเว็บไซต์ ซึ่งประกอบไปด้วย ส่วนหัว Header Section, ส่วนเมนู Menu Section ส่วนเนื้อหา Body และส่วนท้าย Footer Section ดังรูป
94 การตั้งค่าการแสตงผลเว็บไซต์ สามารถทำได้ที่ CSS และ HTML ซึ่งทั้งสองรูปแบบสามารถตั้งค่าผลของ เว็บไซต์ได้เหมือนกัน ขึ้นอยู่กับผู้สร้างจะเลือกใช้รูปแบบใด ในส่วนนี้จะตั้งค่าการแสดงผลเว็บไซต์โดยใช้ HTMLซึ่ง มีขั้นตอนดังนี้ 1.แถบ Properties คลิกปุ่ม Page Properties 2. จะปรากฎหน้าต่าง Page Properties เลือกแถบ Appearance (HTML) กำหนดคุณสมบัติตาม ต้องการ ดังนี้ - Background image : การกำหนดภาพพื้นหลังของเว็บ - Background : เป็นการกำหนดสีพื้นหลังของเว็บ - Text : เป็นการกำหนดสีของข้อความทั่วไป - Links : เป็นการกำหนดสีของลิงก์ในสภาวะปกติ - Visited links : เป็นการกำหนดสีของลิงก์เมื่อคลิกแล้ว - Active links : เป็นการกำหนดสีของลิงก์ขณะกำลังคลิก - Left margin : กำหนดระยะของเว็บด้านข้ายห่างจากขอบเว็บบราวเซอร์ -Top margin : กำหนดระยะของเว็บด้านบนห่างจากของเว็บบราวเซอร์ -Margin width : กำหนดความกว้างของขอบเว็บด้านซ้ายห่างจากขอบเว็บบราวเซอร์ -Margin height : กำหนดความสูงของเว็บด้านบนห่างจากขอบเว็บบราวเซอร์ 3. กำหนดค่าการแสดงผลตามที่ต้องการ 4. คลิก Apply เพื่อให้แสดงผลทันที 5. เสร็จเรียบร้อยคลิก OK 6.4การตั้งค่าการแสดงผลเว็บไซต์
95 การบันทึกเอกสารเว็บ สามารถทำได้ดังนี้ 1. คลิกที่เมนู File > Save หรือกดคีย์ลัด Cirl+s 2. ปรากฏกล่องข้อความการบันทึกข้อมูล ถ้าในกรณีต้องการให้แสดงเป็นหน้าแรกของเว็บไซต์ ให้บันทึกไฟล์ชื่อ Index html เพื่อกำหนดให้หน้าเว็บเพจนี้เป็นหน้าแรกของระบบเว็บไซต์ หลักการตั้งชื่อไฟล์ ในการตั้งชื่อไฟล์เว็บเพจนั้น ต้องตั้งชื่อไฟล์เป็นภาษาอังกฤษเป็นพิมพ์ตัวเล็กทั้งหมด ไม่ควรยาวเกินไป และหากต้องการเว้นวรรค ควรคั่นด้วยเครื่องหมาย (Underscore) เช่น website b, web_ book เป็นต้น 6.5 การบันทึกเอกสารเว็บไซต์
96 นอกจากนั้นไฟล์เว็บเพจควรบันทึกให้เป็นไฟล์ .html หรือ .htm ถ้าเป็นเว็บเพจที่ถูกเขียนด้วยภาษาScipt ก็สามารถใช้นามสกุลตามภาษานั้น ๆ เช่น ภาษา php จะมีนามสกุล .php เป็นต้น 3.คลิกปุ่ม Save เพื่อบันทึกข้อมูล 4.ไฟล์บันทึกแล้วจะแสดงที่แท็บ ดังรูป
97