You are on page 1of 18

หน่ วยการเรี ยนที 7

การออกแบบด้ วยเทคนิค Template
สาระการเรียนร้ ู
การสร้างเว็บไซต์ทวั่ ไป ผูอ้ อกแบบอาจใช้สร้างหน้าเว็บหน้าแรก หรื อหน้าโฮม ซึ่ งใช้เป็ นเหมือน

็ างแบบซํ้ า ๆ กนโดยอาจใช

หน้าสารบัญหนังสื อ เพื่อลิ งค์ไปหน้าเนื้ อหา สวนหน้
าเนื้ อหากสร้
ว้ ิธีบนั ทึ
่ ๆ ใหม่ อาจมีปัญหา
เปลี่ยนชื่อ (Save as) ไปเรื่ อย ๆ ซึ่งการสร้างจะต้องเสี ยเวลาในการสร้างลิงค์เนื้ อหาตาง
่ ่เกบไฟล์

ความผิดพลาดในการลิงค์ เมื่อมีการย้ายตําแหนงที
งาน เนื่ องจากในเว็บไซต์ที่มีงานจํานวนมาก
็ นโฟล์เดอร์ยอย
่ หลายโฟล์เดอร์
จะต้องมีการจัดเกบเป็

บทเรี ยนนี้ จะนําเทคนิ คการสร้าง Template หรื อแมแบบมาใช้
ออกแบบเว็บเพื่อผูเ้ รี ยนจะได้นาํ

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



่ ไว้ เชนบริ
่ เวณที่เป็ นสวนหั
่ วเว็บ สวนเมนู

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

ผังความคิด (Mind Mapping)
ี ั Template
1. ความรู้เกยวกบ
การออกแบบด้ วยเทคนิค Template

2. การสร้าง Template จากไฟล์ HTML
3. การสร้าง Template ใหม่

4. การกาหนดพื
นทีทํางานใน template

7. การปรับปรุ งเทมเพลท
6. การใช้เทมเพลทออกแบบเวบ็
5. การบันทึก template และ HTML

226

จดประสงค์
การเรียนร้ ู

1. บอกลักษณะการทํางานของเทมเพลทได้
2. สามารถใช้ไฟล์ HTML ที่มีอยูแ่ ล้วมาสร้างเทมเพลท ไ ด้
3. สามารถสร้างไฟล์ เทมเพลทใหมไ่ ด้

4. สามารถกาหนด
พื้นที่ทาํ งานบนเทมเพลท ไ ด้
5. สามารถบันทึกไฟล์เทมเพลท และไฟล์ html ได้
6. สามารถออกแบบสร้างเว็บเพจโดยใช้เทมเพลทได้
้ งานในเทมเพลทได้
7. บอกวิธีแกไข

227

การออกแบบเว็บด้ วยเทคนิค Template
การออกแบบเว็บด้วยเทคนิ ค Template เป็ นการเรี ยนรู ้การใช้เครื่ องมือของ Dreamweaver


สร้างแมแบบสํ
าหรับใช้สร้างหน้าเว็บเพจ .html ที่มีจาํ นวนมากในเว็บไซต์ ขึ้ นได้อยางรวดเร็
ว เป็ นการ
เสริ มประสิ ทธิภาพการสร้างเว็บ ให้ได้งานที่รวดเร็ ว มีโอกาสผิดพลาดน้อย มีเนื้ อหาการเรี ยนรู ้ดงั นี้

1. ความร้ ู เกีย่ วกับ Template
การสร้างเว็บเพจโดยทัว่ ไปจะสร้างหรื อออกแบบไปทีละหน้า ในการออกแบบเว็บในเว็บไซต์
ั ่ สวนหั
่ วเว็บจะมีโลโก ้ ภาพสัญลักษณ์ เมนูสําคัญหรื อสวนของเมนู

หนึ่ ง ๆ จะมี ส่ วนที่ ซํ้ า ๆ กนเชน
่ ายของเว็บ ผูอ้ อกแบบจะให้แสดงในทุกหน้าเอกสาร เพื่ออํานวย
เข้าสู่ เนื้ อหา ซึ่ งมักออกแบบไว้ในสวนซ้


ความสะดวกแกผู่ ใ้ ช้ในการเข้าถึงข้อมูล จะเห็นวาหากมี
การออกแบบหน้าเว็บที่มีส่ วนเหมือนหรื อซํ้ ากนใ
ื กหน้า หากต้องออกแบบใหมทุ่ กหน้าจะเสี ยเวลา โปรแกรม Dream weaver มีเครื่ องมือชวยสร้

เกอบทุ
าง


งาน เรี ยกวา่ เทมเพลท (Template) หรื อแมแบบ
มาให้ใช้งาน ทําให้การสร้างเว็บขนาดใหญสามารถทํ
าได้
รวดเร็ ว
่ (Template) สําหรับเป็ นต้นแบบสร้างเว็บ จะทําการสร้างหน้าเอกสารโดยมีการ
การสร้างแมแบบ



่ เชน่ สวนหั
่ ว สวน
่ Hyper link ที่ไมให้
่ แกไข
้ ไว้ เมื่อจะ
กาหนดให้
มีส่ วนที่แกไขได้
และแกไขไมได้

็ ดแมแบบขึ

หน้าเอกสารนั้ นจะเปลี่ยน
สร้างหน้าเว็บเพจ กเปิ
้ นมา เมื่อมีการคลิกเมาส์ ในพื้ นที่แมแบบ
่ ่กาหนดให้


สถานะเป็ นหน้าเอกสารเว็บ ให้เราใส่ เนื้ อหาในสวนที
สามารถแกไขได้
จนได้หน้าเว็บเพจตาม

ต้องการ แล้วสั่งบันทึกเป็ นเอกสารเว็บ .html การทํางานด้วยเทมเพลทจึงเป็ นการชวยให้
การออกแบบ
่ าได้อยางรวดเร็

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

การสร้ างเทมเพลท

กําหนดพืน้ ทีเปลียนแปลงได้ ในเทมเพลท
(Editable Region)

เรียกใช้ เทมเพลทบนหน้ าเว็บ

228

2. สร้ างเทมเพลทจากเว็บเพจ (ไฟล์ HTML)
การสร้ างเทมเพลทจากเว็บเพจ (ไฟล์HTML) ที่ มี อยู่แล้ว เป็ นการนําเว็บที่ ออกแบบไว้แ ล้ว มา

ใช้เป็ นแมแบบหรื
อเทมเพลท ขั้นตอนทําได้เพียงสัง่ บันทึกแฟ้ มเป็ นเทมเพลท ดังนี้
เปิ ดไฟล์ HTML (ที่ออกแบบเรี ยบร้อยแล้ว) > เมนู File > Save as Template
ทีห่ น้ าต่ าง Save as Template ตรวจสอบ Site > ตั้ งชื่อ (Save as) > Save ตามลําดับ ดังรู ปที่ 7.1

่ บันทึกไฟล์ .html เป็ นเทมเพลท (.dwt)
รู ปที่ 7.1 แสดงหน้าตาง

229

3. การสร้ าง Template จากไฟล์ ใหม่
การเริ่ มต้นสร้างเทมเพลทใหม่ มี วิธีสร้างได้ 2 วิธีคือ

1. สร้ างจากเมนู File มีข้นั ตอนดังนี้
่ New Document แล้วปฏิบตั ิตามขั้ นตอน ดังรู ปที่ 7.2
เลือกเมนู File > new > เข้าหน้าตาง
1. เลือกเมนู General
2. เลือก Template page
่ Template page ตามต้องการ เชนในที

3. เลือกรายการในสวน
่น้ ีเลือก HTML Template
4. แล้วคลิกปุ่ ม Create

รูปที่ 7.2 สร้ าง Template ใหม่จากเมนู File > New

จะเข้าสู่ หน้าตางการออกแบบเว็
บ แล้วทําการบันทึ กไฟล์เทมเพลท จะให้นามสกุลเป็ น .dwt
่ ่
ซึ่งจะกลาวตอไป

230

2. สร้ างจากหน้ าต่ างพาเนล Assets
่ Assets เพราะสะดวกและสามารถเห็น
โดยทัว่ ไปการสร้างเทมเพลทจะใช้การสร้างจากหน้าตาง
ไฟล์ Template ที่มีอยูเ่ ดิมได้วิธีสร้างเทมเพลทจากพาเนล Assets ทําได้ ดังในรู ปที่ 7.3
1. เริ่ มจากที่เมนู Windows > เลือกเปิ ด พาเนล Assets
2. เลือกไอคอน Template
3. คลิกปุ่ ม New Template
4. จะได้ Template ใหม่ ให้ต้ งั ชื่อ แล้วกด Enter ซึ่งจะทําให้เราได้เทมเพลทใหม่ ที่ทาํ การ
บันทึกไฟล์ .dwt เรี ยบร้อยแล้ว
การนําเทมเพลทไปใช้สร้างหน้าเว็บเพจ ทําได้โดย ดับเบิลคลิกที่ไฟล์เทมเพลท เพื่อเปิ ดไป

็ หน้าเอกสารเว็บเพจ . html
ที่หน้าตางออกแบบ
เมื่อออกแบบเสร็ จ กบั็ นทึกเป็ นไฟล์ .html เรากจะได้

รูปที่ 7.3 การสร้ างไฟล์เทมเพลทใหม่จากพาเนล Assets

231

4. การกําหนดพืน้ ทีท่ าํ งานในเทมเพลท


เทมเพลท ที่ สร้ างขึ้ นเพื่อเป็ นต้นแบบ จะต้องมี การกาหนดพื
้ นที่ การทํางานให้เหมาะสมกอน

่ 4 แบบ ได้แก่
นําไปใช้เพื่อให้เป็ นแมแบบที
่ใช้งานได้สะดวกที่สุด โดยทัว่ ไปจะแบงไว้

่ ้นที่สามารถเปลี่ยนแปลงหรื อ
1. Editable Region/ Non-Editable Region เป็ นกาหนด
สวนพื
่ ้ อหาได้ (Editable Region) และสวนพื
่ ้นที่ไม่สามารถเปลี่ยนแปลงเนื้ อหาได้(Non-Editable Region)
ใสเนื

่ เมนู ลิงค์ และสวนหั
่ วเว็บกาหนด

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

่ ้ อหา เพื่อความสะดวกและ
ไมให้
เพื่อให้ใช้สําหรับใสเนื
ิ ั ่ งค์
รวดเร็ วในการสร้ างเว็บที่ มีจ าํ นวนหน้าเว็บเพจ มาก ๆ เพราะความผิดพลาด มักจะเกดกบสวนลิ
่ ่



่ ่ ถู ก “ล็ อ ค”) สั ง เกตได้จ ากรู ปเมาส์
การสั ง เกตวาสวนใดกาหนดให้
ไ มสามารถแกไขได้
(สวนที
้ (หากโปรแกรม ไมแสดง

้ )
ที่เปลี่ยนเป็ นรู ป ทันทีที่อยูใ่ นพื้นที่หา้ มแกไข
สัญลักษณ์ สามารถแกไขได้


พื้นที่ที่สามารถแกไขจะมี
กรอบสี ฟ้ า และป้ ายที่เรากาหนดไว้
ให้ และรู ปเมาส์จะเป็ นสัญลักษณ์ I (ไอบีม)
สามารถพิมพ์ เนื้ อหาลงในพื้นที่น้ นั ๆ ได้ ดังรู ปที่ 7.4

จุดกําหนดให้ สามารถแก้ ไข
สามารถใส่ข้อมูลได้

จุดกําหนดให้ สามารถแก้ ไข
สามารถใส่ข้อมูลได้

รูปที่ 7.4 แสดงพื ้นที่ กําหนดให้ เปลี่ยนแปลงใส่เนื ้อหาได้ และ ไม่ได้

232


2. Repeating Region คือการกาหนดคุ
ณสมบัติพ้ืนที่ส่ วนที่ทาํ งานแบบซํ้ า ๆ ให้ทาํ งานได้เร็ วขึ้ น
่ กษณะของเมนูลิงค์ หรื อตารางแสดงข้อมูล ที่จดั เรี ยงในแถวหรื อบรรทัด โดยในแตละกลุ

่มของข้อมูล
เชนลั

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

่ ล็อค เพื่อให้สามารถเปลี่ยนแปลงข้อมูลได้
จะต้องกาหนดพื
้นที่ Editable Region ลงไปในแตละบ

3. Optional Region คือการกาหนดคุ
ณสมบัติตวั เลือกลงใปในเทมเพลท ให้เราสามารถเลือกใช้
่ รูปแบบที่กาหนดไว้

หรื อไมใช้
ในเทมเพลทแล้ว

4. Editable tag attribute เป็ นการกาหนดให้
สามารถเปลี่ยนแปลงคา่ (Attribute) ของวัตถุ (Object)
่ ได้ เชนสั
่ ่งให้ไปอยู่ชิดด้านซ้าย
ในเทมเพลทซึ่ งถูกล็อคไว้ให้สามารถเปลี่ ยนแปลงคุ ณสมบัติบางอยาง
่ึ
ชิดด้านขวา หรื อกงกลาง
เป็ นต้น

่ งเฉพาะ Editable Region และ Non-Edidtable Region ซึ่ งเป็ น
ในตัวอยางเอกสารนี
้ จะกลาวถึ

คุณสมบัติหลัก สําหรับคุณสมบัติ repeating และ Optional เป็ นการกาหนดรายละเอี
ยดการทํางานเพิ่มเติม
่ เลยกสามารถทํ

่ ั
ที่เราไมจํ่ าเป็ นต้องใช้ มีความจําเป็ นน้อย ไมใช้
างานได้เชนกน

233

ขั้นตอนการกําหนด Editable Region และ Non-Edidtable Region ทําได้ ดงั รปที
ู ่ 7.6
1. เปิ ดไฟล์เทมเพลทที่เริ่ มสร้างและบันทึกแล้วขึ้ นมา
ํ นดให้แกไขได้

2. นําเมาส์ช้ ีในพื้นที่ ที่ตอ้ งการกาห
คลิกเมาส์ขวาเลือกคําสัง่ Template > New
่ New Editable Region ให้ต้ งั ชื่อ > แล้วคลิก OK
Editable Region จะปรากฏหน้าตาง

รูปที่ 7.6 แสดงขันตอนการ

กําหนดพื ้นที่ Editable Region

234


เมื่อ Ok แล้วจะปรากฏกรอบพื้นที่แกไขได้
ดังรู ปที่ 7.7
็ รถกาหนดพื

เรากสามา
้นที่ Editable Region สําหรับ
่ ้ อหา ได้ตามต้องการ
ใสเนื

รูปที่ 7.7 แสดงพื ้นที่ Editable Region

การยกเลิกพืน้ ที่ Editable Region เป็ น Non Editable Region ทําได้ดงั รู ปที่ 7.8
1. นําเมาส์คลิกในพื้นที่ Editable Region แล้วคลิกเมาส์ปุ่มขวา จะปรากฏคําสัง่ ให้เลือก
2. เลือก Templates
้ จะหายไป เมื่อปรับปรุ งแกไ้ข
3. คลิก Remove Template Markup กรอบพื้นที่แกไขได้
เรี ยบร้อยแล้ว ทําการบันทึก

รูปที่ 7.8 แสดงการยกเลิกพื ้นที่ Editable Region

235

5. การบันทึกไฟล์ Template(.dwt) และไฟล์ เว็บเพจ (.html)
การบันทึกเทมเพลท จากการที่มีเครื่ องมือให้เลือก 2 กลุ่ม คือใช้บนั ทึกจากเมนู File และ พาเนล
Assets จึงแยกอธิบายได้ ดังนี้
1. การบันทึกไฟล์ เทมเพลทจากพาเนล Assets มีข้นั ตอน ดังรู ปที่ 7.9
่ Name (หมายเลข 4) แล้วกด Enter โปรแกรม
การบันทึก ทําได้เพียงเปลี่ยนชื่อไฟล์ในชอง
็ บไซต์ที่กาลั
ํ งทํางานอยู่
จะบันทึกและสร้างโฟล์เดอร์ Templates ให้เองภายในโฟล์เดอร์เกบเว็

รูปที่ 7.9 การบันทึกไฟล์เทมเพลทใหม่จากพาเนล Assets
2. บันทึกเทมเพลทจากเมนู File ได้ 2 วิธีคือ

วิธีที่ 1. > File > Save as Template > กาหนด
Site > ตั้ งชื่อไฟล์และคําอธิ บาย ใน Save as,
Description แล้ว บันทึก (Save) ดังรู ปที่ 7.10


วิธีที่ 2. > File > Save as > ปรากฏหน้าตางเหมื
อนการบันทึกไฟล์ใหมทั่ ว่ ไปเราต้องกาหนด
ชนิดของไฟล์( Save as type)เป็ น Template Files(.dwt) เมื่อบันทึก โปรแกรมจะทําการสร้างโฟล์เดอร์
่ ยวกบวิ
ั ธีที่ 1
Template ให้อตั โนมัติเชนเดี

236

รู ปที่ 7.10 การบันทึกเทมเพลทด้วยเมนู File

6. การใช้ เทมเพลทออกแบบเว็บ
การเรี ยกใช้เทมเพลทที่บนั ทึกไว้มาใช้สร้างเอกสารเว็บ .html ทําได้ 2 วิธี คือ เปิ ดเทมเพลท
จากเมนู File และ เปิ ดเทมเพลทจากพาเนล Assets ดังนี้
1. เปิ ดเทมเพลทจากเมนู มีข้ นั ตอนดังรู ปที่ 7.11
่ New Document > ให้คลิกรายการ Template
1. คลิกเมนู File เลือก New > ปรากฏหน้าตาง
่ New from Template > 3. ที่รายการ Template for:
2. ปรากฏหน้าตาง
3. เลือก Site ที่เก็บTemplate >
4. เลือกชื่อไฟล์เทมเพลท จะเห็นภาพ Preview เทมเพลทที่เราเลือก
5. คลิกปุ่ ม Create เพื่อเปิ ดไฟล์

237

รู ปที่ 7.11 แสดงการเปิ ดไฟล์เทมเพลทจากเมนู File
2. เปิ ดเทมเพลทจากเมนู Assets มีขนตอนดั
ั้
ง รู ปที่ 7.12
1. คลิกที่ File เพื่อเลือก Site ที่เกบ็
2. คลิกพาเนล Assets
3. คลิก ไอคอน เทมเพลท จะปรากฏไฟล์
เทมเพลทที่สร้างไว้
4. ดับเบิลคลิกที่ชื่อไฟล์เทมเพลท จะเปิ ดไฟล์
เว็บเพจ ขึ้ นในพื้นที่ออกแบบทันที โดยมี
คุณสมบัติเหมือน เทมเพลท ทุกประการ

รู ปที่ 7.12 แสดงการเปิ ดไฟล์เทมเพลท
จากเมนู Assets

238

จากรู ปที่ 7.13 ไฟล์เอกสารเว็บใหมที่ ่เปิ ดจากเทมเพลท จะมีคุณสมบัติของ Template ตามที่สร้าง
่ ่หมายเลข 1 ชื่อไฟล์เป็ น Untitled… คือยังไมมี่ การบันทึก หมายเลข 2 แสดงให้เห็นลักษณะ
ไว้ สังเกตวาที
ของไฟล์ใหม่ที่ได้ เหมือนกบั Template ทุกประการ มีพ้ืนที่ Editable Region รอการปรับปรุ ง แกไ้ข
่ ้ อหาตามที่เราต้องการ และที่หมายเลข 3 เป็ นหน้าตาง
่ Assets แสดงให้รู้วาเรากาลั

ํ งเปิ ดไฟล์เทมเพลท
ใสเนื
็ ท่ ี่โฟล์เดอร์ใด
(.dwt) แหลง่เกบอยู

รูปที่ 7.13 แสดงไฟล์ html ที่เปิ ด
จากการใช้ ไฟล์ Template

239

่ ้ อหาลงบนหน้าเว็บเพจใหมเรี่ ยบร้อยแล้ว การบันทึกไฟล์เว็บเพจ (.html) ที่เกดจากการ

เมื่อใสเนื
ใช้ไฟล์เทมเพลท ทําได้โดยใช้คาํ สัง่ File ดังรู ปที่ 7.14, 7.15
่ นทึก เลือกโฟล์เดอร์ เกบ็ (Save in) ตั้ งชื่อ
การบันทึกทําได้ดงั นี้ File > Save as เข้าสู่ หน้าตางบั
ไฟล์ และ สัง่ บันทึก

รูปที่ 7.14 แสดงการบันทึกไฟล์ .html จาก ไฟล์ template

ข้ อควรระวัง เมื่อสัง่ บันทึก หากมีการปรับปรุ งลิงค์ในไฟล์เว็บเพจ โปรแกรมจะปรากฏหน้าตาง

ให้ยนื ยันการ อัพเดทลิงค์ ที่สร้างไว้ใน Template เราต้องตอบ Yes เพื่อให้บนั ทึกเทมเพลทตามการแกไข
ั คุณสมบัติการลิงค์
จะทําให้เมนู หรื อจุ ดลิงค์ท้ งั หมดในไฟล์เว็บ *.html ที่มีที่มาจากเทมเพลทเดี ยวกนมี
ั ้ งหมด
เหมือนกนทั

รูปที่ 7.15 แสดงหน้ าต่างยืนยันการอัพเดทลิงค์ เมื่อสัง่ บันทึก

240

7. การปรับปรงเทมเพลท


ในการสร้างเว็บไซต์หนึ่ง ๆ จะมีหน้าเว็บเพจจํานวนมาก แมแบบหรื
อเทมเพลทที่ออกแบบไว้เดิม


อาจต้องมีการปรั บปรุ งบ้างเสมอ เชนการเพิ
้ อหา
่มรายการเมนู ลิงค์ หรื อรู ปภาพโลโก เพื่อเน้นสวนเนื
การปรับปรุ งทําได้ดงั นี้
้ (แนะนําให้ใช้วิธีเรี ยกจากพาเนล File > Asset)
1. เปิ ดไฟล์เทมเพลทที่ตอ้ งการแกไข


้ เพิ่มขึ้ น แกรายการลิ

2. ปรับปรุ งแมแบบตามที
่ตอ้ งการ เชน่ กาหนดพื
งค์ในพื้นที่ เพิ่ม
้นที่แกไขได้
ข้อมูลเชน่ รู ปภาพ สําหรับพื้นที่ Non-Editable Region เป็ นพื้นที่ที่ลอ็ ค (Non-Editable Region) จะต้องทํา
่ โดยใช้คาํ สัง่ Modify > Template >Open Attached Template
การปลดล็อคทั้ งหมดกอน

้ ยบร้อย ให้สั่งบันทึก โดยใช้คาํ สั่ง Save เทานั
่ ้ นเพราะเป็ นไฟล์ที่เคยบันทึกมากอน
3. การแกไขเรี
่ Update Template Files ขึ้ นให้คลิกปุ่ ม Update โปรแกรมจะทําการ
แล้ว โปรแกรมจะปรากฏหน้าตาง
ปรับปรุ งไฟล์เว็บ .html ทุกไฟล์ที่สร้างไปจากไฟล์เทมเพลท แล้วแสดงผลให้ทราบ ดังรู ปที่ 7.16


รู ปที่ 7.16 แสดงหน้าตางการปรั
บปรุ งไฟล์เทมเพลท
่ Update Pages แสดงให้รู้วามี
่ การอัพเดท
เมื่อการอัพเดทไฟล์เว็บ .html เสร็ จ จะปรากฏหน้าตาง
็ จสมบูรณ์ ดังรู ปที่ 7.17
เทมเพลทแล้วให้คลิก ปุ่ ม Close การอัพเดทเทมเพลทกเสร็


รู ปที่ 7.17 แสดงหน้าตางการปรั
บปรุ งไฟล์เทมเพลทเสร็ จแล้ว

241

สรปุบทเรียน การสร้างเว็บเพจด้วยเทมเพลทนับได้ว่าสร้างความสะดวก ความถูกต้อง ความรวดเร็ วใน


การสร้างหน้าเว็บเพจได้มาก การใช้งานเทมเพลทยังมีรายละเอียดที่สามารถกาหนดคุ
ณสมบัติส่ วนที่แกไข
ได้อีก ซึ่ งผูอ้ อกแบบสร้ างควรศึ กษาเพิ่มเติ มอีกเล็กน้อยในที่น้ ี แนะนําไว้เฉพาะขั้ นตอนเบื้ องต้น แตก่็
ิ กษะ
สามารถนําไปใช้ได้แล้วคุณสมบัติอื่นดูยงั ไมจํ่ าเป็ นมากนัก การฝึ กใช้งานจริ งจะทําให้นกั ศึกษาเกดทั

และข้อควรปรั บปรุ งมากขึ้ น ขอให้ทดลองใช้เทมเพลทโดยปฏิ บตั ิ ตามใบงานที่ กาหนด
นักศึ กษาจะ

ประสบความสําเร็ จในการเรี ยนรู ้เนื้ อหาในบทนี้ เป็ นอยางดี
.............................................................................................................


่ ความรู ้ในสิ่ งตอไปนี

เพื่อให้นกั ศึกษาทบทวนความรู ้ในบทเรี ยน ให้ตอบคําถามตอไปนี
้ วาเรามี
้ เพียงใด

แบบฝึ กหัดประจําบทเรียน

คําสั่ ง ให้ตอบคําถามตอไปนี

1. การใช้ เทมเพลท หมายถึง…………………………………………………………………
……………………………………………………………………………………………….
่ สร้างเว็บรวดเร็ วอยางไร

2. เทมเพลท ชวยให้
……………………………………………………………………………………………....
……………………………………………………………………………………………….


้ ่ บนเทมเพลทมีประโยชน์อยางไร

3. การกาหนดพื
แกไขไมได้
้นที่ใช้งาน แกไขได้
……………………………………………………………………………………………….

4. การใช้ Template มาออกแบบสร้างไฟล์ ใหม่ มีวิธีการอยางใด
……………………………………………………………………………………………….
……………………………………………………………………………………………….


5. ขั้นตอนการบันทึกไฟล์เทมเพลท กาหนดอยางไร
………………………………………………………………………………………………..
้ บนเทมเพลทมีข้นั ตอนอยางไร

6. การใช้งานพื้นที่แกไขได้
……………………………………………………………………………………………....

7. การเรี ยกใช้งานไฟล์เทมเพลท เมื่อบันทึกไปใช้จริ งมีข้นั ตอนอยางไร
...............................................................................................................................................

242

อ้ างอิง
ิ ภักดีวฒั นะกุล, คัมภีร์Dream weaver MX 2004,กรุ งเทพ , เคทีพี
กตติ
เกรี ยงศักดิ เจริ ญวงศ์ศักดิ,ออกแบบและสร้ างเว็บสวยด้ วย Dream weaver CS3,กรุ งเทพ ;
ซีเอ็ดยูเคชัน,2551.
กฤษณะ สถิต , สร้ างโฮมเพจด้ วยตนเอง ,กรุ งเทพ:Info press.
ณัชติพงศ์ อูทอง, การสร้ างเว็บเพจ(ภาษาHTML), กรุ งเทพฯ; สํานักพิมพ์เอมพันธ์ จํากดั.
สื บค้นจาก :
http://www.nectect.or.th