หนวยการเรยนท 7 การออกแบบดวยเทคนค Template

สาระการเรยนร การสรางเวบไซตทวไป ผออกแบบอาจใชสรางหนาเวบหนาแรก หรอหนาโฮม ซงใชเปนเหมอนหนาสารบญหนงสอ เพอลงคไปหนาเนอหา สวนหนาเนอหากสรางแบบซา ๆ กนโดยอาจใช ว ธบนทเปลยนชอ (Save as) ไปเรอย ๆ ซงการสรางจะตองเสยเวลาในการสรางลงคเนอหาตาง ๆ ใหม อาจมปญหาความผดพลาดในการลงค เมอมการยายตาแหนงทเกบไฟลงาน เนองจากในเวบไซตทมงานจานวนมากจะตองมการจดเกบเปนโฟลเดอรยอย หลายโฟลเดอร บทเรยนนจะนาเทคนคการสราง Template หรอแมแบบมาใชออกแบบเวบเพอผเรยนจะไดนาเทคนคนไปใชงานกบการสรางเวบขนาดใหญ ทมหนาเวบเพจจานวนมาก โดยเทคนคการใชเทมเพลทจะชวย แกปญหา ความผดพลาดทเกดขนได เพราะขนตอนการทางานหลายอยางทซากนจ ะไมตองทาใหม มการกาหนดพนทงานใหแกไขได และแกไขไมไดไว เชนบรเวณทเปนสวนหวเวบ สวนเมนจะ ลอกหามแกไข การลงคทสรางไวแลวในเทมเพลท มการอพเดทใหอตโนมตทนททมการเปลยนแปลง ซงเทคนคการสรางเวบดวยเทมเพลทจะนยมนาไปใชงานในระดบอาชพมากทสด

ผงความคด (Mind Mapping)

การออกแบบดวยเทคนค Template

1. ความรเกยวกบ Template

2. การสราง Template จากไฟล HTML

3. การสราง Template ใหม

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

6. การใชเทมเพลทออกแบบเว

บ

5. การบนทก template และ HTML

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

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

รปท 7.1 แสดงหนาตาง บนทกไฟล .html เปนเทมเพลท (.dwt)

229

3. การสราง Template จากไฟลใหม

การเรมตน สรางเทมเพลทใหม ม วธสรางได 2 วธคอ

1. สรางจากเมน File มขนตอน ดงน เลอกเมน File > new > เขาหนาตาง New Document แลวปฏบตตามขนตอน ดงรปท 7.2 1. เลอกเมน General 2. เลอก Template page 3. เลอกรายการในสวน Template page ตามตองการ เชนในทนเลอก 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 Editable Region จะปรากฏหนาตาง New Editable Region ใหตงชอ > แลวคลก OK

รปท 7.6 แสดงขนตอนการ

กาหนดพนท Editable Region

234

รปท 7.7 แสดงพนท Editable Region

เมอ Ok แลวจะปรากฏกรอบพนทแกไขได ดงรปท 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) เมอบนทก โปรแกรมจะทาการสรางโฟลเดอร Template ใหอตโนมตเชนเดยวกบวธท 1

236

รปท 7.10 การบนทกเทมเพลทดวยเมน File

6. การใชเทมเพลทออกแบบเวบ

การเรยกใชเทมเพลททบนทกไวมาใชสรางเอกสารเวบ .html ทาได 2 วธ คอ เปดเทมเพลทจากเมน File และ เปดเทมเพลทจากพาเนล Assets ดงน 1. เปดเทมเพลทจากเมน มขนตอนดงรปท 7.11 1. คลกเมน File เลอก New > ปรากฏหนาตาง New Document > ใหคลกรายการ Template 2. ปรากฏหนาตาง New from Template > 3. ทรายการ Template for: 3. เลอก Site ทเกบTemplate > 4. เลอกชอไฟลเทมเพลท จะเหนภาพ Preview เทมเพลททเราเลอก 5. คลกปม Create เพอเปดไฟล

237

รปท 7.11 แสดงการเปดไฟลเทมเพลทจากเมน File

2. เปดเทมเพลทจากเมน Assets มขนตอนดง รปท 7.12

รปท 7.12 แสดงการเปดไฟล จากเมน Assets

1. คลกท File เพอเลอก Site ทเกบ 2. คลกพาเนล Assets 3. คลก ไอคอน เทมเพลท จะปรากฏไฟล เทมเพลททสรางไว 4. ดบเบลคลกทชอไฟลเทมเพลท จะเปดไฟล เวบเพจ ขนในพนทออกแบบทนท โดยม คณสมบตเหมอน เทมเพลท ทกประการ

เทมเพลท

238

จากรปท 7.13 ไฟลเอกสารเวบใหมทเปดจากเทมเพลท จะ มคณสมบตของ Template ตามทสรางไว สงเกตวาทหมายเลข 1 ชอไฟลเปน Untitled… คอยงไมมการบนทก หมายเลข 2 แสดงใหเหนลกษณะของไฟลใหมทได เหมอนกบ Template ทกประการ มพนท Editable Region รอการปรบปรง แกไข ใสเนอหาตามทเราตองการ และทหมายเลข 3 เปนหนาตาง Assets แสดงใหรวาเรากาลงเปดไฟลเทมเพลท (.dwt) แหลง เกบอยท โฟลเดอรใด

รปท 7.13 แสดงไฟล html ทเปด

จากการใชไฟล Template

239

เมอใสเนอหาลงบนหนาเวบเพจใหมเรยบรอยแลว การบนทกไฟลเวบเพจ (.html) ทเกดจากการใชไฟลเทมเพลท ทาไดโดยใชคาสง File ดงรปท 7.14, 7.15 การบนทกทาไดดงน File > Save as เขาสหนาตางบนทก เลอกโฟลเดอรเกบ (Save in) ตงชอไฟล และ สงบนทก

รปท 7.14 แสดงการบนทกไฟล .html จาก ไฟล template

ขอควรระวง เมอสงบนท ก หากมการปรบปรงลงคในไฟลเวบเพจ โปรแกรมจะปรากฏหนาตางใหยนยนการ อพเดทลงค ทสรางไวใน Template เราตองตอบ Yes เพอใหบนทกเทมเพลทตามการแกไข จะทาใหเมนหรอจดลงคทงหมดในไฟลเวบ *.html ทมทมาจากเทมเพลทเดยวกนมคณสมบตการลงคเหมอนกนทงหมด

รปท 7.15 แสดงหนาตางยนยนการอพเดทลงค เมอสงบนทก

240

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

ในการสรางเวบไซตหนง ๆ จะมหนาเวบเพจจานวนมาก แมแบบหรอเทมเพลทท ออกแบบไวเดมอาจตองมการปรบปรงบางเสมอ เชนการเพมรายการเมนลงค หรอรปภาพโลโก เพอเนนสวนเนอหา การปรบปรงทาไดดงน 1. เปดไฟลเทมเพลททตองการแกไข (แนะนาใหใชวธเรยกจากพาเนล File > Asset) 2. ปรบปรงแมแบบตามทตองการ เชน กาหนดพนทแกไขไดเพมขน แกรายการลงคในพนท เพมขอมลเชน รปภาพ สาหรบพนท Non-Editable Region เปนพนท ทลอค (Non-Editable Region) จะตองทาการปลดลอคทงหมดกอน โดยใชคาสง Modify > Template >Open Attached Template 3. การแกไขเรยบรอย ใหสงบนทก โดยใชคาสง Save เทานนเพราะเปนไฟลทเคยบนทกมากอน แลว โปรแกรมจะปรากฏหนาตาง Update Template Files ขนใหคลกปม Update โปรแกรมจะทาการปรบปรงไฟลเวบ .html ทกไฟลทสรางไปจากไฟลเทมเพลท แลวแสดงผลใหทราบ ดงรปท 7.16

รปท 7.16 แสดงหนาตางการปรบปรงไฟลเทมเพลท

เมอการอพเดทไฟลเวบ .html เสรจ จะปรากฏหนาตาง Update Pages แสดงใหรวามการอพเดท เทมเพลทแลวใหคลก ปม Close การอพเดทเทมเพลทกเสรจสมบรณ ดงรปท 7.17

รปท 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