เริ่มต้นใช้งานโปรแกรม Dreamweaver 8 ความรู้ทั่วไปเกี่ยวกับ Dreamweaver 8 แนะนำโปรแกรม Dreamweaver 8 เมื่อประมาณ 4-5 ปีที่แล้วมีเว็บไซต์เป็นของตนเองถือเป็นเรื่องที่ค่อนข้างยาก เหตุผลหลัก คือ ค่าใช้จ่ายสูงและขั้นตอนการสร้างเว็บเพจยุ่งยากมาก แต่ปัจจุบัน การเป็นเจ้าของเว็บไซต์ทำได้ง่ายมาก บริษัท ห้างร้าน หน่วยงานของรัฐบาล
และองค์กรต่างๆ ส่วนใหญ่มีเว็บไซต์ของตนเอง แม้แต่บุคคลธรรมดาจำนวนไม่น้อยก็มีเปิดเว็บไซต์ส่วนตัวกัน โปรแกรม Dreamweaver ได้รับการพัฒนาขึ้นโดยบริษัท Macromedia ใช้ชื่อว่า Macromedia Dreamweaver โดยเริ่มออกจำหน่ายเมื่อเดือน ธันวาคม พ.ศ. 2540
ตามมาด้วย Version 1.2 เมื่อเดือนมีนาคม พ.ศ. 2541 และออกรุ่นต่างๆโดยสรุป คือ จุดเด่นของโปรแกรม
Dreamweaver 8 ที่ได้รับการพัฒนาให้ดีจากรุ่นก่อน ดังนี้ ความต้องการระบบของโปรแกรม ก่อนที่จะเริ่มใช้โปรแกรม
Dreamweaver สำหรับผู้ที่จะติดตั้งโปรแกรมบนเครื่องคอมพิวเตอร์ไว้ใช้งานเอง ควรจะสำรวจความต้องการระบบที่สามารถใช้งานโปรแกรมได้ ดังนี้ การติดตั้งโปรแกรม การติดตั้งโปรแกรม Dreamweaver 8 มีขั้นตอน ดังนี้ การเปิดใช้งานโปรแกรม หลังจากติดตั้งโปรแกรมบนเครื่องคอมพิวเตอร์แล้วสามารถเรียกใช้งานโปรแกรม ดังนี้ เรียกผ่านปุ่ม Start มีวิธีทำ คือ เมื่อเปิดโปรแกรมแล้วจะเข้าสู่หน้าต่างที่เรียกว่า หน้าเริ่มต้น ( Start Page ) เพื่อให้ผู้ใช้เรียกใช้งานได้อย่างรวดเร็ว ซึ่งประกอบด้วยส่วนต่างๆ ดังรูป ปกติผู้เริ่มต้นสร้างเว็บเพจก็จะเลือกใช้ สร้างเว็บเพจใหม่ ( Create New ) ซึ่งมีรูปแบบให้เลือกหลายชนิดที่นิยมใช้ คือ ส่วนประกอบบนหน้าจอแรกของโปรแกรม เมื่อคลิกที่ตัวเลือก HTML แล้วจะได้หน้าต่างแรกของโปรแกรม Dreamweaver 8 ซึ่งมีส่วนประกอบต่างๆ ดังรูป เมนูคำสั่ง เมนูคำสั่งของ
Dreamweaver ประกอบด้วยเมนูหลัก 10 เมนูและเมนูย่อยอีกจำนวนมาก ดังนี้
4.
เมนู Insert รวบรวมคำสั่งที่ใช้แทรกส่วนประกอบต่างๆบนเว็บ เช่น ภาพ เลเยอร์
กลุ่มเครื่องมือ เป็นกลุ่มเครื่องมือที่ใช้สำหรับสร้างวัตถุต่างๆบนเว็บเพจ คลิกที่ปุ่ม Common จะพบกลุ่มเครื่องมือทั้งหมด ซึ่งมีอยู่ 8 กลุ่ม 1. Common เป็นกลุ่มเครื่องมือที่ใช้งานบ่อยๆ เช่น แทรกตาราง แทรกภาพ 2. Layout เป็นกลุ่มเครื่องมือที่ใช้งานด้านการวางองค์ประกอบของหน้าเว็บเพจ 3. Forms เป็นกลุ่มเครื่องมือที่ใช้จัดการกับฟอร์มที่สร้างขึ้นเพื่อรับข้อมูล 4. Text เป็นกลุ่มเครื่องมือที่ใช้สำหรับจัดการกับข้อความ 5. HTML เป็นกลุ่มเครื่องมือที่ใช้จัดการกับภาษา HTML บนเว็บเพจ 6. Application เป็นกลุ่มเครื่องมือที่ใช้สำหรับจัดการกับแอพพลิเคชันฐานข้อมูล
7. Flash elements เป็นเครื่องมือที่ใช้สำหรับจัดการกับไฟล์งานที่สร้างด้วย Flash บนเว็บ 8. Favorites เป็นกลุ่มเครื่องมือที่ให้ผู้ใช้โปรแกรมนำเอาเครื่องมือที่ใช้งานบ่อยๆนอกเหนือจากที่กล่าวมาให้มาสร้างไว้ที่นี่ พาเนล Property Inspector พาเนลคุณสมบัติของสิ่งที่เลือกหรือ Property Inspector เป็นพาเนลที่ใช้สำหรับแสดงคุณสมบัติของภาพ ข้อความ หรือวัตถุใดๆบนเว็บเพจ และผู้ใช้สามารถปรับปรุงแก้คุณสมบัติได้จากพาเนลนี้ ดังตัวอย่าง จากตัวอย่าง เมื่อคลิกที่ภาพ คุณสมบัติของภาพจะแสดงไว้ที่ Property Inspector เช่น W (กว้าง) 89 H (สูง) 119 และ Image 27k (ความละเอียดของภาพ) เป็นต้น ถ้าคลิกที่ข้อความก็จะแสดงคุณสมบัติแตกต่างกันออกไป กลุ่มพาเนล พาเนลของ Dreamweaver
เป็นส่วนที่ใช้ในการควบคุมหรือการตั้งค่าการใช้งานส่วนต่างๆของเว็บเพจ โดยมีหลายพาเนลแต่ละพาเนลมีความสามารถในการจัดเอกสารต่างกัน พาเพลมีดังนี้ 1. การซ่อน - แสดงพาเนล 2. การปิดพาเนล การปรับมุมมองการทำงาน โปรแกรม
Dreamweaver 8 มีมุมมองการทำงาน 3 แบบ คือ 2. Show Code and Design View ( ) แสดงทั้งโค้ด HTML และงานบนหน้าเอกสาร แบ่งเป็นสองส่วนในหน้าเดียวกัน3. Show Design View ( ) แสดงเฉพาะหน้าเอกสารไม่มีโค้ด HTMLการเริ่มต้นสร้างเว็บไซต์และเว็บเพจ การกำหนดโครงร่างเว็บไซต์
การสร้างเว็บไซต์ควรนำแผนงานและเค้าโครงของเว็บไซต์ที่ได้ออกแบบไว้มาเป็นแนวทางในการสร้าง โดยปกติถ้าสังเกตเว็บไซต์ทั่วไปสิ่งที่ควรมี คือ หน้าแรก (Home) หน้าข้อมูลทั่วไปของบริษัทหรือผู้จัดทำ (About) และหน้าการติดต่อกับบริษัท (Contact) นอกนั้นก็อาจจะแตกต่างกันไปแล้วแต่ประเภทของกิจการ เช่น ถ้าเป็นการขายสินค้าก็จะมีหมวดสินค้า (Product) สินค้าใหม่ (New Product) เป็นต้น การสร้างไซต์ (Site) งาน
หลังจากได้กำหนดรายละเอียดบนกระดาษแล้ว ขั้นต่อไปก็จะต้องจัดเตรียม ไซต์ (Site) บนคอมพิวเตอร์ด้วย Dreamweaver ซึ่งมีวิธีการดังนี้ หมายเหตุ : การเตรียมไซต์ (Site) ในที่นี้หมายถึง Local Site ซึ่งเป็นที่เก็บไฟล์ในฮาร์ดดิสก์ของเรา เพื่อรอส่งไปยังรีโมทไซต์ (เครื่องเซิร์ฟเวอร์) 1. คลิกที่เมนู Site แล้วเลือกคำสั่ง New Site...
2. จะเข้าสู่หน้าต่าง Site Definition เพื่อกำหนดชื่อให้กับโฟลเดอร์ 3. พิมพ์ชื่อใหม่ที่ต้องการ เช่น ThaiWood แล้วคลิกปุ่ม Next 4. เลือก ไม่ต้องติดต่อไปยังเซิร์ฟเวอร์ในขณะนี้ ( No,I do ...) แล้วคลิกปุ่ม Next 5. กำหนดวิธีแก้ไขงานและโฟลเดอร์ที่เก็บเว็บไซต์ แล้วคลิกปุ่ม Next 6. เลือกรูปแบบการเชื่อมต่อกับเว็บเซิร์ฟเวอร์เป็น None แล้วคลิกปุ่ม Next 7. จะได้รายละเอียดที่เราตั้งค่าไว้ทั้งหมด คลิกปุ่ม Done โฟลเดอร์ที่สร้างจะปรากฏอยู่ที่พาเนล File การสร้างไฟล์และโฟลเดอร์ใหม่ หลังจากได้สร้างไซต์งานไว้แล้ว ขั้นตอนต่อไปคือการสร้างโฟลเดอร์ย่อยและไฟล์งานตามที่ได้วางแผนไว้ มีวิธีการสร้าง ดังนี้ หมายเหตุ : การเพิ่มโฟลเดอร์และไฟล์งาน ควรระวัง ถ้าคลิกที่โฟลเดอร์ใด ไฟล์งานจะไปอยู่ในโฟลเดอร์นั้น ไฟล์ Index.html จะต้องอยู่ที่ไซต์หลัก ไม่ควรอยู่ในโฟลเดอร์ย่อยอื่นๆ 5. การแก้ไขไฟล์และโฟลเดอร์ให้คลิกขวาที่ไฟล์หรือโฟลเดอร์ที่ต้องการ แล้วเลือกคำสั่ง Edit จะมีคำสั่งย่อยให้เลือก เช่น Copy Delete ฯลฯ การสร้างหน้าเว็บเพจใหม่ เมื่อเปิดโปรแกรมแล้วจะเข้าสู่หน้าสำหรับสร้างเว็บเพจมีชื่อว่า Untitled – 1 โดยอัตโนมัติ เราสามารถสร้างเว็บเพจได้ทันที อย่างไรก็ตาม หากต้องการสร้างหน้าเว็บเพจใหม่ก็ทำได้ดังนี้ 2. คลิกเลือกแท็บ General แล้วเลือก Category เป็น Basic Page การใส่หัวเรื่องหรือแถบชื่อเรื่อง เป็นส่วนที่ปรากฏอยู่บนแถบชื่อของเว็บเพจหน้านั้นๆ
เพื่อบอกให้ผู้อ่านทราบว่ากำลังเปิดดูเว็บเพจหน้าอะไร การใส่หัวเรื่องทำได้ดังนี้
2. หรือคลิกเลือกปุ่ม Page Properties จะได้หน้าต่าง Page Properties แล้วคลิกที่ตัวเลือก Title/Encoding จะได้ตัวเลือกดังรูป
3. พิมพ์ข้อความแถบชื่อเรื่องในช่อง Title : แล้วคลิก OK การบันทึกเว็บเพจ การบันทึกเว็บเพจทั้งเว็บเพจที่สร้างใหม่และเว็บเพจที่เปิดขึ้นมาใช้งาน
มีวิธีการทำ ดังนี้
การทดสอบเว็บเพจกับเว็บเบราว์เซอร์ เว็บเพจที่สร้างและบันทึกไว้แล้ว
สามารถทดสอบเพื่อดูผลงานกับเว็บเบราว์เซอร์แบบออฟไลน์ได้ โดยปกติ Dreamweaver 8 จะเลือกเว็บเบราว์เซอร์ให้เองโดยอัตโนมัติ ส่วนใหญ่ก็จะเป็น Internet Explorer แต่ก็มีบางคนที่ใช้ Firefox ทั้งนี้ การแสดงผลอาจจะไม่ตรงกันเสียทีเดียว
4. จะได้เว็บเพจ
ระหว่างที่สร้างเว็บเพจควรจะบันทึกไฟล์บ่อยๆจะได้ตรวจดูความเรียบร้อยและปรับแก้ไขให้เหมาะสมก่อนที่จะนำเสนอบนอินเทอร์เน็ต การออกจากโปรแกรม การออกจากโปรแกรมทำได้ 4 วิธี ดังนี้ วิธีที่ 2 คลิกที่ปุ่ม บน Titlebar แล้วคลิกคำสั่ง Close
วิธีที่ 3 คลิกที่คำสั่ง File > Exit วิธีที่ 4 ใช้แป้นพิมพ์ < Ctrl > + < Q > |