การสร้าง Dreamweaver Template (ตอนที่ 1)

การสร้างเว็บไซต์นั้น หลังจากที่เราออกแบบและจัดทำหน้าแรกของเว็บไซต์เป็น HTML ได้สำเร็จแล้ว ?ก็ยังต้องทำเว็บไซต์หน้าอื่นๆอีก สิ่งที่ตามมาคือ เมื่อมีเว็บเพจหลายๆหน้าเข้า การบริหารจัดการเริ่มทำได้ยากขึ้น โดยเฉพาะการแก้ไข HTML หากต้องตามไปแก้ไขทุกหน้า นอกจากยุ่งยากแล้ว โอกาสจะผิดพลาดยังมีสูงอีกด้วย

 

Dreamweaver จึงมีฟังก์ชั่นให้สามารถสร้างเป็น Template ได้ เพื่อให้สามารถแก้ไข ปรับปรุง หน้าเว็บไซต์ส่วนของ HTML ได้ง่ายขึ้น โดยข้อดีของการสร้างเป็น Template คือ

  • ไม่ต้องเขียนโค๊ดใหม่ ทุกครั้งที่สร้างหน้าใหม่ ลดความผิดพลาดในการโค๊ดโปรแกรม
  • กำหนดส่วนที่ต้องเหมือนกัน ทุกหน้า หรือ เป็นส่วนของ Template โดยส่วนของ Template จะเป้นส่วนที่ไม่ให้แก้ไข (ใน Dreamweaver) และในหน้า HTML ที่สร้างจาก DWT นั้น จะอัพเด็ท HTML ส่วนนั้นตาม DWT แม่ได้
  • กำหนดจุดที่ให้สามารถอัพเด็ทข้อมูลได้

แต่ข้อเสียก็มีเช่นกัน นั่นคือ Dreamweaver Template?ไม่ใช่มาตรฐาน จึงไม่สามารถใช้ร่วมกับโปรแกรมอื่นได้ นั่นหมายความว่า ถ้าใช้ Dreamweaver Template?ก็ต้องใช้ Dreamweaver?เท่านั้น จะเปลี่ยนใจไปใช้โปรแกรมอื่นไม่ได้นะ เออ… !!??

โดยหลักการของ?Dreamweaver Template ก็แสดงให้เห็นดังรูป

dreamweaver_templates

การสร้าง Dreamweaver Template (ต่อไปผมจะเรียกว่า DWT) ผมจะอธิบายเป็นขั้นตอน ดังนี้

  1. สร้าง Site Management เพื่อให้ Dreamweaver สร้างโครงสร้างของ Site ได้ การสร้าง Dreamweaver Site ดูได้จากบทความ ….
  2. สร้าง DWT ซึ่งสามารถสร้างได้ 2 วิธี คือ
    1. สร้างจาก HTML ที่มีอยู่แล้ว
    – เริ่มจากการเปิดไฟล์ HTML ที่มีอยู่ขึ้นมา แล้วเลือกที่ File -> Save as Template ดังรูป
    3-4-2556 14-11-13
    – หรืออีกวิธีคือเลือกจาก เมนู Insert -> Common -> Template -> Make Template ดังรูป
    3-4-2556 14-14-25
    ซึ่งไม่ว่าจะเลือกวิธีไหนก็เหมือนกัน และหลังจากนั้นโปรแกรมจะให้เรากำหนด Site ของ Template เพื่อบอกว่า Template นี้ใช้กับ Site ไหน โดยจะมีหน้าต่างขึ้นมา ดังรูป
    3-4-2556 14-15-09
    – ทำการเลือก Site ที่ต้องการกำหนดรายละเอียดของ Template และ ตั้งชื่อ ในช่อง Save as: จากนั้นเลือก Save ได้เลย โปรแกรมอาจจะถามเรื่องการ Update link ถ้าพัฒนาบนเครื่องตัวเอง ก็กด Update ได้เลย
    – เสร็จแล้วไฟล์ของเราจะเปลี่ยนชื่อไปเป็น .dwt แทน3-4-2556 14-37-02
    2. สร้าง DWT ใหม่โดยตรง
    – เลือก File -> New… จากนั้นจะมีหน้าต่างขึ้นมาถามว่า เราจะสร้างไฟล์ประเภทไหน เลือกได้เลยตามรูป
    3-4-2556 14-38-47
  3. ไฟล์ DWT ที่เราสร้างขึ้นนั้น ยังต้องมีการกำหนดส่วนที่สามารถเปลี่ยนแปลงแก้ไขได้ ไม่เช่นนั้น เราจะไม่สามาถแก้ไขข้อมูลได้ เราต้องทำการกำหนดก่อนว่า ส่วนใดที่สามารถแก้ไขเพิ่มเติมข้อมูลได้ โดยการกำหนด Editable Region ลงไป
    – การกำหนด Editable Region ทำได้โดยกำหนดตำแหน่งที่จะแทรก Editable Region ก่อน โดยดูที่ไฮไลท์สีดำตามรูป
    3-4-2556 15-18-41
    จากนั้นเลือกที่ เมนู Insert -> Common -> Templates -> Editable Region
    3-4-2556 15-21-29
    จากนั้นจะมีหน้าต่างขึ้นมาให้ตั้งชื่อ
    3-4-2556 15-22-34
    ให้เราตั้งชื่อ ให้สื่อถึง ข้อมูลที่เราจะอัพเด็ท เช่น News, Product Update เพื่อที่ว่า เวลากลับมาอัพเด็ทข้อมูลจะได้ทราบว่า ต้องใส่อะไรลงไป โดยจะเห็นเป็นกรอบเขียว ดังภาพ
    3-4-2556 15-32-18
  4. หลังจากกำหนดเสร็จแล้ว กด Save ได้เลย ตอนนี้ เมื่อทำการ Save แล้ว ทีนี้ Template ของเราจะสามารถแก้ไขข้อมูลได้แล้ว
  5. จากนั้นเราลองสร้างไฟล์ HTML ใหม่ จาก Template ได้เลย โดยไปที่ File -> New… -> Page from Template เลือก Site ของเรา จากนั้นเลือก Template for Site เลือกชื่อ Template ที่ต้องการ
    3-4-2556 15-40-14 
  6. จากนั้นเราจะได้ไฟล์ HTML ขึ้นมาใหม่ และสามารถแก้ไขข้อมูลได้ในส่วนที่กำหนด Editable Region ไว้นั่นเอง
    3-4-2556 15-43-07
    คิดว่า การสร้าง DWT คงเป็นแนวทางในการเอาไปใช้ในการพัฒนาเว็บไซต์ได้บ้างแล้ว เรื่องของ DWT ยังไม่จบแค่นี้ ในบทความต่อไป เราจะกำหนด Editable Region ในแบบอื่นๆได้อีกครับ