วิธีใช้เทมเพลตใน Dreamweaver

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-30 18:50:16

มีฟังก์ชันที่ทรงพลังมากในเครื่องมือออกแบบเว็บไซต์ Dreamweaver (ต่อไปนี้จะเรียกว่า DW เวอร์ชันสูงสุดในปัจจุบันคือ 4.02 ตัวอย่างในบทความนี้คือเวอร์ชัน 4.0) ซึ่งเป็นเทมเพลต!

แล้วเสน่ห์ของเทมเพลตคืออะไร? มันมีลักษณะอะไรบ้าง?

การใช้เทมเพลตทำให้เราสามารถรวบรวมองค์ประกอบที่ปรากฏบนทุกหน้าของไซต์ได้

การใช้เทมเพลตเพื่อสร้างเว็บเพจ ทำให้ทั้งไซต์สามารถมีสไตล์ที่เป็นหนึ่งเดียวได้

ตราบใดที่มีการแก้ไขเทมเพลต หน้าเว็บทั้งหมดที่ใช้เทมเพลตนั้นสามารถแก้ไขได้โดยไม่จำเป็นต้องแก้ไขแต่ละหน้าด้วยตนเอง เช่น เมื่อต้องการเปลี่ยนแปลงลิขสิทธิ์ จำเป็นต้องแก้ไขลิขสิทธิ์ทีละหน้าหรือไม่? เกิดอะไรขึ้นถ้ามีหลายพันหน้า? ฉันเชื่อว่าคุณจะใหญ่สองสามคนในตอนแรก แต่ถ้าคุณใช้เทมเพลตก็ไม่มีปัญหา

ด้านล่างนี้เป็นตัวอย่างที่ครอบคลุมมากขึ้นซึ่งสามารถช่วยให้คุณเชี่ยวชาญการใช้เทมเพลตได้อย่างรวดเร็ว

1. แก้ไขหน้า

เปิด DW และสร้างไซต์ใหม่ซึ่งเราจะตั้งชื่อว่า "Spider Web"

สร้างหน้าว่างใหม่เป็นหน้าภายใน (โดยปกติแล้วเว็บไซต์จะมีหน้าแรกเพียงหน้าเดียว ดังนั้นเราจึงไม่จำเป็นต้องสร้างเทมเพลตสำหรับหน้าแรก) และตั้งชื่อเป็น body.htm

แก้ไขหน้านี้และดำเนินการให้เสร็จสิ้นดังแสดงในรูปที่ 1

รูปที่ 1 หน้า body.htm หลังจากแก้ไขเสร็จแล้ว ให้ความสนใจกับจุด A ซึ่งจะใช้เป็นพื้นที่แก้ไขและจะกล่าวถึงด้านล่าง
2. สร้างเทมเพลต

หลังจากแก้ไขเสร็จสิ้น เราจะบันทึกเพจนี้เป็นเทมเพลต (โปรดทราบว่าจะไม่ได้บันทึกเป็นหน้าเว็บ htm ธรรมดา) คุณสามารถบันทึกเป็นเทมเพลตผ่านFileàSave As Template ใน DW หลังจากดำเนินการคำสั่งนี้ หน้าต่างบันทึกเป็นเทมเพลตจะปรากฏขึ้น ดังแสดงในรูปที่ 2

รูปที่ 2 หน้าต่างบันทึกเป็นเทมเพลต

ในรูปที่ 2 B คือการเลือกไซต์ เราเลือก "Spider Web" C คือชื่อไฟล์เทมเพลตที่เราต้องการบันทึกเป็น เรากรอกเนื้อหา กดบันทึกที่มุมขวาบนเพื่อบันทึก

ในขณะนี้ เรากด F8 เพื่อเรียกไซต์ (ผู้จัดการไซต์) และคุณจะเห็น body.dwt ในโฟลเดอร์เทมเพลต (เมื่อมีไฟล์เทมเพลต DW จะสร้างโฟลเดอร์เทมเพลตโดยอัตโนมัติ และ dwt จะเป็นประเภทเทมเพลต ไฟล์)

3. แก้ไขเทมเพลต

เมื่อคุณเปิดไฟล์เทมเพลต body.dwt ในไซต์ คุณจะพบว่าดูเหมือนว่าจะไม่แตกต่างจากหน้า body.htm แต่จริงๆ แล้วแตกต่างออกไป คุณไม่สามารถเพิ่มพื้นที่ที่สามารถแก้ไขได้ใน body.htm คุณสามารถเพิ่มพื้นที่ที่แก้ไขได้ในไฟล์เทมเพลตเท่านั้น

เพื่อให้ทุกคนเข้าใจ "พื้นที่ที่แก้ไขได้" ได้ดีขึ้น อันดับแรกเราใช้เทมเพลตนี้เพื่อสร้างไฟล์ html: คลิก FileàNew From Template หน้าต่างเลือกเทมเพลตจะปรากฏขึ้น เลือกเนื้อหาในเทมเพลต จากนั้นคลิก Select ที่ด้านบน มุมขวาเพื่อสร้างไฟล์ htm ใหม่ เราเปลี่ยนชื่อเพจใหม่นี้ body2.htm ตอนนี้เราใช้ DW เพื่อเปิดทั้งไฟล์ body.htm และ body2.htm และเปรียบเทียบความแตกต่าง คุณจะพบคำว่า "Template:body" เขียนอยู่ที่มุมขวาบนของหน้า body2.htm (หน้านี้สร้างจากไฟล์เทมเพลต body.dwt) ในขณะเดียวกัน คุณจะแปลกใจเมื่อพบว่าไฟล์ body2.htm ไม่สามารถแก้ไขได้ (body.htm สามารถแก้ไขได้) อย่างไรก็ตาม นี่เป็นเพราะว่า "พื้นที่ที่แก้ไขได้" ไม่ได้ถูกกำหนดไว้ในไฟล์เทมเพลต body.dwt ทำให้เพจที่สร้างขึ้นไม่สามารถแก้ไขได้ ดังนั้นเราจึงต้องเพิ่มพื้นที่ที่สามารถแก้ไขได้ในไฟล์เทมเพลต ต่อไปนี้เป็นขั้นตอนในการเพิ่มภูมิภาคที่สามารถแก้ไขได้:

1) เปิดไฟล์เทมเพลต body.dwt เราหวังว่าจะสามารถแก้ไขตารางกลางได้ (นั่นคือ A ในรูปที่ 1) แต่ในไฟล์ body.dwt ไม่ใช่ body.htm) ดังนั้นให้เพิ่มพื้นที่ที่สามารถแก้ไขได้ที่นี่

2) วางเคอร์เซอร์ของเมาส์ในตารางที่ A คลิกขวาที่เมาส์แล้วเลือก New Editable Region.... หน้าต่าง New Editable Region จะปรากฏขึ้น ขอให้คุณกรอกชื่อของขอบเขตที่แก้ไขได้นี้ (โดยปกติแล้วเรา เรียกว่าเครื่องหมายภูมิภาคที่แก้ไขได้) เรากรอก Region01 แล้วคลิกตกลงเพื่อปิดหน้าต่างนี้เพื่อทำการแก้ไขเครื่องหมายภูมิภาคที่แก้ไขได้ในปัจจุบันให้เสร็จสิ้น ขณะนี้คุณสามารถเห็นการแสดงผลในตารางดังแสดงในรูปที่ 3

รูปที่ 3 หน้าต่างภูมิภาคที่แก้ไขได้ใหม่

โปรดทราบว่ามีพื้นที่ที่แก้ไขได้ซึ่งทำเครื่องหมายว่า Region01

จนถึงตอนนี้เราได้กำหนดพื้นที่ที่แก้ไขได้ หากมีพื้นที่แก้ไขหลายจุด เราก็สามารถทำได้เช่นเดียวกัน

※คุณยังสามารถสร้างขอบเขตที่แก้ไขได้ใหม่ผ่าน ModifyàTemplatesàNew Editable Region…. หากคุณต้องการลบขอบเขตที่แก้ไขได้ คุณสามารถใช้ ModifyàTemplatesàRemove Editable Region… จากนั้นปฏิบัติตามคำแนะนำ
4. สร้างเพจโดยใช้เทมเพลต

ที่จริงแล้ว เราได้กล่าวไปแล้วว่าขั้นตอนในการสร้างเพจโดยใช้เทมเพลตนั้นทำผ่านFileàNew From Template โปรดดูขั้นตอนที่เกี่ยวข้องในขั้นตอนที่สาม ตอนนี้เราใช้เทมเพลตเพื่อสร้างเพจชื่อ body3.htm ในขณะนี้ คุณจะพบว่าในหน้า body3.htm ยกเว้นพื้นที่ที่แก้ไขได้ Region01 ซึ่งสามารถแก้ไขได้ เมาส์ถูกจำกัดไว้ที่อื่น เราเพิ่มเนื้อหาที่เราต้องการในพื้นที่ที่สามารถแก้ไขได้ เช่น เราสามารถเขียนบทความได้ตามต้องการ ด้วยวิธีนี้ เราสามารถใช้เทมเพลตเพื่อสร้างเพจได้ตามความต้องการของเรา

5. แก้ไขเนื้อหาเทมเพลตและอัปเดตไฟล์ไซต์

เปิดไฟล์เทมเพลต body.dwt และแก้ไขพื้นที่ที่เราต้องแก้ไข ตัวอย่างเช่น เราสามารถแทนที่รูปภาพโลโก้หรือแก้ไขพื้นที่ที่ไม่สามารถแก้ไขได้ หรือแม้แต่เพิ่มหรือลบพื้นที่ที่แก้ไขได้ เป็นต้น

ข้อมูลต่อไปนี้ใช้การเปลี่ยนโลโก้เพื่อแสดงให้เห็นว่าเทมเพลตอัปเดตไฟล์อย่างไร

เราเปลี่ยนรูปภาพโลโก้เป็นรูปภาพอื่นที่เราชอบ และบันทึกไฟล์ body.dwt หลังจากเสร็จสิ้น ในเวลานี้ DW จะปรากฏขึ้นมาเพื่อถามว่าไฟล์นั้นจำเป็นต้องได้รับการอัปเดตหรือไม่ และ DW จะอัปเดตทุกหน้าโดยอัตโนมัติ ที่สร้างด้วยเทมเพลตนี้ DW จะแสดงหน้าต่างอัปเดตเพจขึ้นมาระหว่างการอัปเดต หลังจากเสร็จสิ้น บันทึกการอัปเดตจะได้รับในหน้าต่างอัปเดตเพจ

※หากไม่อัปเดต DW จะเก็บไฟล์เทมเพลตไว้โดยตรงและไม่อัปเดตหน้าชั่วคราว แต่เราสามารถอัปเดตหน้าด้วยตนเองได้ เพียงเลือก ModifyàTemplatesàUpdate Pages….

ในขณะนี้ เราจะเปิดเพจใดๆ ก็ตามที่สร้างด้วย body.dwt เช่น body3.htm คุณจะพบว่าภาพโลโก้มีการเปลี่ยนแปลง

ไม่ใช่เรื่องยากที่จะพบว่าการใช้ฟังก์ชันนี้ช่วยให้เราสามารถแก้ไขปัญหาการอัปเดตไซต์ได้อย่างง่ายดาย บทความนี้ทำหน้าที่เป็นจุดเริ่มต้นเท่านั้น ลองให้มากขึ้นเพื่อให้คุณสามารถใช้งานได้อย่างเต็มที่ สัมผัสสไตล์เทมเพลตของ DW

ใน DW ยังมีฟังก์ชันที่เรียกว่าไลบรารีซึ่งสามารถรวมเข้ากับเทมเพลตได้ ซึ่งจะทำให้เทมเพลตมีประสิทธิภาพมากขึ้น หากผู้อ่านสนใจ ฉันยินดีมอบของขวัญชิ้นนี้ให้กับทุกคน