Adobe Dreamweaver เป็นโปรแกรมสาหรับพัฒนาเว็บไซต์ ซึ่งมีคุณสมบัติครอบคลุมตั้งแต่การออกแบบและสร้างเว็บและสร้างเว็บเพจ,การบริหารจัดการเว็บไซต์ ตลอดไปจนถึงการพัฒนาเว็บแอพพลิเคชั่นเบื้องต้น โปรแกรมนี้ได้รับความนิยมเป็นอย่างมากเพราะมีคุณสมบัติเด่นคือใช้งานง่าย มีเครื่องมือสำหรับวางข้อความ ภาพกราฟิก ตาราง แบบฟอร์ม มัลติมิเดีย รวมทั้งองค์ประกอบต่างๆเพื่อโต้ตอบกับผู้ชมลงบนเว็บเพจได้ง่าย โดยผู้ใช้ไม่จำเป็นต้องรู้จักภาษา HTML,CSS, JavaScript และภาษาสคริปต์อื่นๆ ดังนั้นจึงเหมาะสำหรับผู้เริ่มต้นและผู้ใช้ทั่วไป นอกจากนี้ยังมีคุณสมบัติขั้นสูงอีกมากมายสาหรับนักพัฒนาเว็บไซต์มืออาชีพด้วยเช่นกัน Dreamweaver เป็นโปรแกรมที่ช่วยให้เขียนเว็บไซต์ได้ง่ายขึ้น แก้ไขได้ง่ายขึ้น และมีเครื่องมืออำนวยความสะดวกมากมายที่มีประโยชน์ในการทำเว็บไซต์ 1. แนะนำ Dreamweaver Dreamweaver เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆ มากมายที่ใช้ Dreamweaver เพื่อพัฒนาเว็บไซต์ เราจะมาดูกันว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย
ในกรณีที่เราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น
2.1. FTP เราสามารถแก้ไขหน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ Dreamwerver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไขได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ของเราสารองไว้ในเครื่องเราตลอดด้วย 2.2 Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดงให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทำการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้วเราต้องแก้เว็บเพจของเราตลอด 3. ช่วยให้เราทำเว็บได้ง่ายขึ้น สาหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆ มากมายเช่น Photoshop ,Illustrator, Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ, หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้ คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวยความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆ ที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก 2. ความต้องการระบบของโปรแกรมสำหรับ Microsoft Windows
3. ขั้นตอนการติดตั้งโปรแกรม มีวิธีการดังนี้ 1. เปิดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6 2. ดับเบิ้ลคลิกที่ไฟล์ Set-up.exe จากนั้นโปรแกรมอ้างมีการแจ้งเตือนให้เรา restart เราเลือก Ignore เพื่อดำเนินการต่อ ดังรูป 3. โปรแกรมจะทำการตรวจสอบก่อนทำการติดตั้งโปรแกรม 4. เมื่อโปรแกรมตรวจสอบเสร็จแล้ว จะเข้าสู่หน้าจอข้อกำหนดในการติดตั้งโปรแกรม ให้เราคลิก Accept 5. กรอก Serial Number แล้วคลิกที่ปุ่ม Next 6. จะเข้าสู่หน้า Option ของโปรแกรม ให้เลือก Installs 7. รอให้โปรแกรมติดตั้งจนเสร็จ 8. เมื่อติดตั้งเสร็จจะปรากฏหน้าจอดังภาพ ให้เราคลิก Close 4. ขั้นตอนการเปิดโปรแกรม Adobe Dreamweaver CS6
5. ส่วนประกอบของหน้าจอโปรแกรม โปรแกรม Dreamweaver ประกอบไปด้วยส่วนต่าง ๆ ดังนี้
(หรือเลเยอร์)
ประกอบไปด้วยปุ่มและ ป๊อปอัพเมนูที่ใช้กำหนดรูปแบบมุมมองของ Document Window ที่เรากำลังทำงานอยู่และ คำสั่งต่างๆที่ใช้ทำงานกับ Document Window อย่างเช่น การแสดงเว็บเพจที่สร้างขึ้นในเว็บบราวเซอร์หรือ การกำหนดออปชั่นของ Document Window เป็นต้น ปุ่ม หน้าที่ แสดงเว็บเพจในมุมมองโค้ด แสดงเว็บเพจในมุมมองโค้ดและออกแบบ แสดงเว็บเพจในมุมมองออกแบบแสดงผลโค้ด (ทำงานร่วมกับมุมมอง Live View) ตรวจสอบความถูกต้องในการแสดงผลบนบราวเซอร์ที่เลือก ตรวจสอบความถูกต้องของการใช้สไตล์ CSS ในส่วนต่าง ๆ บน เว็บเพจโดยใช้ร่วมกับพาเนล CSS Styles และการแสดงผลในรูปมุมมอง Live View แสดงเมนูสำหรับเลือกเปิดบราวเซอร์เพื่อทดสอบเว็บเพจ (คีย์ลัดF12) แสดงเมนูซึ่งประกอบด้วยคาสั่งจัดการไฟล์ เช่น อัพโหลด (Put) หรือดาวน์โหลด (Get) ตรวจสอบความถูกต้องในการแสดงผลบนบราวเซอร์ที่เลือก แสดงเมนูสำหรับเปิด/ปิดลักษณะพิเศษของแท็กหรือคำสั่งบางอย่าง เช่น ตาราง,เฟรม และ CSS เพื่อช่วยให้การแก้ไขเว็บเพจสะดวกขึ้น ปรับปรุงการแสดงผลของเว็บเพจในมุมมองออกแบบ หลังจากที่แก้ไขคาสั่งในมุมมองโค้ด (คีย์ลัด F5) ใช้กำหนดชื่อหรือคำอธิบายเว็บเพจ ซึ่งจะถูกนำไปแสดงที่ไตเติลบาร์ของบราวเซอร์
ในมุมมองนี้ Document Window จะแสดงเว็บเพจในรูปของชุดคำสั่งภาษา HTML ที่ถูกสร้างขึ้นอัตโนมัติโดย Dreamweaver หรือเป็นคำสั่งที่คุณเขียนเพิ่มเข้าไปเองนอกจากนี้ก็อาจจะมีคาสั่งสไตล์ชีต (CSS) และภาษาสคริปต์ (script) ต่างๆ ด้วยคุณสามารถตรวจสอบและแก้ไขคาสั่งเหล่านี้ได้ตามต้องการ ซึ่งการแก้ไขจะส่งผลกลับไปยังมุมมองออกแบบโดยอัตโนมัติ
ในมุมมองนี้ Document Window จะแสดงเว็บเพจทั้งในรูปแบบที่ปรากฏบนบราวเซอร์ และรูปแบบคำสั่งภาษา HTML พร้อมๆ กันดังรูป เพื่อใช้ในการออกแบบและตรวจสอบแก้ไขคำสั่งไปในขณะเดียวกัน คุณสามารถปรับขนาดพื้นที่ของแต่ละส่วนได้โดยการคลิกแล้วลากที่เส้นแบ่ง ระหว่างทั้ง 2 ส่วน
ในมุมมองนี้ Document Window จะแสดงเว็บเพจทั้งในรูปของหน้าตาของเว็บเพจเหมือนกับที่เราเห็นในเว็บบราวเซอร์ โดยที่เราสามารถแก้ไขเนื้อหาต่างๆ บนเอกสารด้วย ดังรูป
ในมุมมองนี้ Document Window จะแสดงเว็บเพจเหมือนกับการรันหน้าเว็บบนบราวเซอร์ สามารถแสดงผลในส่วนของ JavaScript และ Plug in ต่างๆ ซึ่งถือเป็นมุมมองที่เพิ่มขึ้นมาเพื่ออำนวยความสะดวกต่อผู้จัดทาเว็บไซต์ในการตรวจเช็คองค์ประกอบและลิงค์ต่างๆได้อย่างรวดเร็ว ทำให้ประหยัดเวลากว่าการแสดงผลผ่านทางเว็บบราวเซอร์โดยตรง
ในมุมมองนี้ Document Window จะแสดงผลโค้ดร่วมกับมุมมอง Live View (จะแสดงมุมมอง Live Code ได้ก็ต่อเมื่ออยู่ที่มุมมอง Live View เท่านั้น) เป็นมุมมองที่เสมือนการใช้คำสั่ง View > Source จากบราวเซอร์ ซึ่งใช้ตรวจดูโค้ดในตำแหน่งต่าง ๆ เท่านั้น ไม่สามารถแก้ไขโค้ดในมุมมองนี้ได้
ในมุมมองนี้จะแสดงผลร่วมกับมุมมอง Live View ซึ่งเป็นมุมมองที่ใช้ตรวจดูการจัดรูปแบบด้วยคำสั่ง CSS ในตำแหน่งที่เมาส์เลื่อนผ่าน โดยสามารถดูได้จากพาเนล CSS Styles เพื่อให้เลือกใช้หรือยกเลิกคำสั่งที่เคยกำหนดเอาไว้ในมุมมองนี้ได้
พาเนลเป็นกรอบเล็ก ๆ ที่รวบรวมเครื่องมือต่าง ๆ สำหรับใช้ทำงานเฉพาะเรื่องไว้ เช่น พาเนล CSS Styles ใช้จัดการกับสไตล์ CSS และพาเนล Files ใช้จัดการกับไฟล์และโฟลเดอร์ภายในเว็บไซต์ใน Dreamweaver ประกอบไปด้วยพาเนลจำนวนมาก ซึ่งสามารถเปิด/ปิดได้โดยเลือกคาสั่ง Window แล้วเลือกชื่อพาเนลนั้น หรือกดคีย์ลัดที่แสดงด้านหลังชื่อพาเนลดังรูป 6. ไม้บรรทัด (Ruler) ไม้บรรทัดจะปรากฏที่ด้านบนและด้านซ้ายของวินโดว์ Document เพื่อให้สาหรับช่วยกำหนดตำแหน่งหรือขนาดขององค์ประกอบต่าง ๆ ที่วางบนเว็บเพจ สาหรับการจัดการต่าง ๆ กับไม้บรรทัดจะทำได้ดังนี้
7. เส้นกริด (Grid) เป็นอีกเครื่องมือหนึ่งที่ใช้ช่วยกำหนดตำแหน่งและขนาดของออบเจ็คบนเว็บเพจ โดยมีลักษณะเป็นช่องตารางที่มีระยะห่างเท่า ๆ กันทั้งแนวตั้งและแนวนอน สามารถกำหนดสีเส้นกริด และกำหนดให้ออบเจ็คยึดจับ (snap to grid) กับเส้น เพื่อให้สามารถจัดออบเจ็คต่าง ๆ อยู่ในแนวเดียวกันได้ง่าย
8. เส้นไกด์ (Guide) เป็นอีกเครื่องมือหนึ่งที่ใช้กำหนดตำแหน่งและขนาดของออบเจ็คบนเว็บเพจ เพื่อให้ได้ตามแนวที่ต้องการอย่างเที่ยงตรง การสร้างเส้นไกด์ทeได้โดยคลิกลากเมาส์จากไม้บรรทัดด้านใดด้านหนึ่งออกมาปล่อยบนเว็บเพจตรงจุดที่ต้องการ
9. การกำหนด Font การกำหนดค่าเบื้องต้นสำหรับการสร้างเว็บเพจ ก็คือ การกำหนดค่าตัวอักษรให้เว็บบราวเซอร์สามารถแสดงผลได้อย่างถูกต้อง และเหมาะสม มีวิธีการดังนี้
2. หลังจากนั้นให้เลือก Category >> Fonts และ Fonts >> ไทย หรือ Unicode (รูปแบบตัวอักษาที่รองรับหลายภาษา และภาษาไทยด้วย) ต่อไปการกำหนด Proportional font และ Code view ให้เลือก Font ที่เราต้องการ เช่น Tahoha, Angsana New เป็นต้น เพื่อเป็นการกำหนดค่า Font เริ่มต้น ดังรูป 3. การกำหนดค่า Default ให้กับเอกสาร สามารถทำได้โดย Category >> New Document และ Default encoding>> ไทย (Windows) หรือ Unicode (UTF-8) |