8.การสร้าง Template

                Template ของโปรแกรม Dreamweaver ทำให้สามารถแบ่งรูปแบบของเอกสารนั้น ๆ ออกเป็นสองส่วน คือ ส่วนที่แก้ไขได้ (Editable Regions) และส่วนที่แก้ไขไม่ได้ (Non-Editable Regions) เอกสารที่สร้างจาก Template เดียวกนจะมีรูปแบบเหมือนกันหมด การสร้าง Template สามารถสร้างได้จากหน้าเอกสารว่าง ๆ หรือหน้าที่มีข้อมูลอยู่แล้ว ซึ่งรวมถึงหน้าเอกสารที่มีข้อมูล แบบไดนามิค เช่น ASP, ColdFusion, JSP หรือ PHP ก็ตาม

 

ขั้นตอนการสร้าง Template

1.        ออกแบบหน้าเว็บเพจตามต้องการ โดยจะกำหนดให้ส่วนหัวและส่วนเมนูเป็น Template

2.        คลิกเมนู File > Save as Template

 

                จากนั้นจะปรากฏหน้าต่าง Dreamweaver ขึ้นมา

3.        คลิกปุ่ม Edit Sites… จะปรากฏหน้าต่าง Site Difinition ขึ้นมา

4.        พิมพ์ชื่อเว็บไซต์ที่ต้องการลงในช่อง What would you like to name your site?

5.        คลิกปุ่ม Next เพื่อผ่านไปยังขั้นตอนต่อไป

 

 

 

6.        คลิกเลือก No, I do not want to use a server technology. เนื่องจากเราจะสร้างเว็บไซต์โดยจะไม่ใช้งานอะไรเกี่ยวข้องกับ Server

7.        คลิกปุ่ม Next

8.        คลิกเลือกรายการแรก นั่นคือ Edit local copies on my machine, then upload to server when ready (recommended) เพื่อเลือกที่จะเก็บเว็บไซต์ที่สร้างไว้ในเครื่องของเราก่อน เมื่อพร้อมแล้วจึงจะอัพโหลดขึ้นไปยัง server

9.        กำหนดโฟลเดอร์สรหรับเก็บเว็บไซต์ที่จะสร้างขึ้น ในช่อง Where on your computer do you want to store your files?

10.     คลิกปุ่ม Next

 

                จากนั้นหน้าต่าง Choose Remote Root Folder จะปรากฏขึ้นมา ให้เลือกตำแหน่งที่ต้องการจะเก็บไฟล์

11.     คลิกวิธีการเชื่อมต่อกับ server ที่ช่อง How do you connect to your remote server? โดยในตัวอย่างรายการ Local/Network เนื่องจากเชื่อมต่ออินเตอร์เน็ตผ่านระบบเครือข่ายภายในองค์กร

12.     คลิกปุ่ม        เพื่อเลือกโฟลเดอร์ทางฝั่ง server ที่จะอัพโหลดไฟล์ขึ้นไปเก็บไว้ในช่อง What folder on your server do you want to store your files in?

13.     คลิกเลือกโฟลเดอร์ที่จะเก็บไฟล์

 

 

1.        คลิกปุ่ม Select

 

2.        คลิกเลือก No, do not enable check in and check out.

3.        คลิกปุ่ม Next

4.        คลิกปุ่ม Done

 

5.        คลิกปุ่ม Cancel เพื่อปิดหน้าต่าง Save As Template ที่ปรากฏขึ้นมาก่อน

 

การกำหนดส่วนแก้ไขและคงที่ของ Template

                จากนั้นเราจะมากำหนดส่วนที่สามารถแก้ไขข้อมูลได้ และไม่สามารถแก้ไขข้อมูลได้ของเท็มเพลตนี้ก่อน โดยในที่นี้จะกำหนดให้ส่วนที่สามารถแก้ไขข้อมูลได้ก็คือ ส่วนที่เป็นรูปภาพและส่วนที่เป็นข้อความว่า Welcome

1.        คลิกรูปภาพที่ต้องการจะกำหนดให้สามารถแก้ไขได้

2.        คลิกรูปภาพ Insert > Template Objects > Editable Region หรือ Ctrl+Alt+V จะปรากฏหน้าต่าง New Editable Region ขึ้นมา

3.        พิมพ์ชื่อของส่วนที่ต้องการให้แก้ไขได้ที่ช่อง Name จากตัวอย่างพิมพ์ว่า EditPicture01

4.        คลิกปุ่ม OK

 

5.        สังเกตที่รูปภาพ จะมีข้อความว่า EditPicture01 แสดงอยู่

ถ้าต้องการกำหนดให้ส่วนที่เป็นข้อความว่า Welcome สามารถแก้ไขได้เหมือนรูปภาพก็ให้ทำตามขั้นตอนที่ 1-4 โดยตั้งชื่อใหม่ตามต้องการ ในที่นี้ตั้งชื่อเป็น EditText01 ก็จะได้หน้าเท็มเพลตที่เสร็จเรียบร้อยดังรูปด้านล่าง

 

 

 

การบันทึก Template

                ในกรณีที่ต้องการบันทึกหน้าเท็มเพลตที่สร้างขึ้น ให้ทำตามขั้นตอนดังแสดงต่อไปนี้

1.        คลิกเมนู File > Save As Template… เพื่อบันทึกหน้าเว็บเพจ จะปรากฏหน้าต่าง Save As Template ขึ้นมา

2.        กำหนดชื่อเท็มเพลตที่สร้างขึ้น ในช่อง Save As:

3.        คลิกปุ่ม Save

 

การเปิดหน้า Template

                หลังจากที่สร้างหน้าเท็มเพลตเสร็จเรียบร้อยแล้ว และต้องการเปิดหน้าเท็มเพลตนั้นขึ้นมาใช้งาน มีวิธีการเปิดดังต่อไปนี้

1.        คลิกเมนู File > New จะปรากฏหน้าต่าง New From Template ขึ้นมา

2.        คลิกแท็บ Templates

3.        คลิกเลือกไฟล์เท็มเพลตที่ต้องการ

4.        คลิกปุ่ม Create

 

จะปรากฏหน้าเท็มเพลตที่เลือกขึ้นมา โดยจะแสดงชื่อเท็มเพลตที่มุมบนด้านขวา โดยส่วนที่สามารถแก้ไขได้สัญลักษณ์ของเมาส์จะแสดงเป็นรูปเคอร์เซอร์ และส่วนที่ไม่สามารถแก้ไขข้อมูลได้นั้นสัญลักษณ์เมาส์จะไม่แสดงเครื่องหมายเคอร์เซอร์ขึ้นมา ดังรูปด้านล่าง

 

 

 

ย้อนกลับ                                                                                                                 ต่อไป