เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

1 เรื่องที่ 10 การสร้างเฟรมเซต

เทมเพลตต่างๆ ที่ถูกสร้างขึ้นมา จะถูกแสดงในพาเนล Assets ซึ่งเราเรียกใช้ได้โดยเลือกเมนูค าสั่ง

Window -> Assets แล้วคลิกปุ่ม (Templates) เพ่ือแสดงรายชื่อเทมเพลตดังนี้

1. อัพเดตรายชื่อเทมเพลต 2. สร้างเทมเพลตใหม่ 3. แก้ไขเทมเพลต 4. ลบเทมเพลต

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

ใบความรู้ที่ 10.2 การท างานกับเทมเพลต

สร้างเทมเพลต ก าหนดพ้ืนที่ที่เปลี่ยนแปลงได้ ในเทมเพลต (Editable region)

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

เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

2 เรื่องที่ 10 การสร้างเฟรมเซต

ขั้นตอนที่ 1 สร้างเทมเพลต เราสามารถสร้างเทมเพลตได้จากหน้าเว็บที่มีอยู่แล้ว หรือจะสร้างข้ึนมาใหม่เลยก็ได้ กรณีท่ี 1 สร้างเทมเพลตจากหน้าเว็บที่มีออกแบบไว้แล้ว ถ้าเรามีหน้าเว็บที่ออกแบบไว้อย่างเหมาะสมแล้ว ก็สามารถน ามาสร้างเป็นเทมเพลตได้แลย ดังขั้นตอนต่อไปนี้

1. เปิดหน้าเว็บแล้วเลือกค าสั่ง File 2. เลือกค าสั่ง Save as Template… เพ่ือบันทึกเป็นไฟล์เทมเพลต 3. ตั้งชื่อไฟล์เทมเพลต 4. คลิกปุ่ม Save 5. คลิก Yes เพ่ืออัพเดตลิงก์ 6. ไฟล์เทมเพลตเกิดข้ึนในพาเนล Assets

เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

3 เรื่องที่ 10 การสร้างเฟรมเซต

กรณีท่ี 2 สร้างเทมเพลตขึ้นมาใหม่จากศูนย์

พาเนล Assets เราสามารถคลิกปุ่ม แล้วเลือกค าสั่ง New Template (หรือคลิกที่ปุ่ม ที่ด้านล่างของพาเนลนี้) เพ่ือสร้ามเทมเพลตขึ้นมาใหม่ได้

1. คลิกท่ี 2. คลิกเลือก New Template 3. ตั้งชื่อไฟล์เทมเพลตใหม่ที่เกิดขึ้น แล้วกดปุ่ม จากนั้นดับเบิลคลิกท่ีเทมเพลตใหม่นี้เพ่ือเปิด

หน้าต่างเทมเพลตขึ้นมา 4. แสดงหน้าต่างเทมเพลตใหม่ให้เราออกแบบ และสั่งบันทึกเพ่ือน าไปใช้ต่อไป

Note……

1. ถ้าเราใช้เมนูค าสั่ง Modify >Page Properties ก าหนด Page Properties ให้กับเทมเพลตที่สร้าง เมื่อเราน าเทมเพลตนี้มาใช้กับหน้าเว็บใด ก็จะท าให้หน้าเว็บนั้นถูกก าหนดค่า Page Properties ตามเทมเพลตนี้ด้วย (ยกเว้น Title หน้าเว็บที่เรายังด าหดได้เอง)

2. เราสามารถเปิดดูไฟล์เทมเพลต (นามสกุล .dwt) ได้จากพาเนล Files โดยเทมเพลตที่เราสร้างจะถูกเก็บไว้ในโฟลเดอร์ Templates

เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

4 เรื่องที่ 10 การสร้างเฟรมเซต

ขั้นตอนที่ 2 ก าหนดพ้ืนที่ที่เปลี่ยนแปลงได้ในเทมเพลต หลังจากท่ีได้สร้างเทมเพลตแล้ว เราจะต้องก าหนดพ้ืนที่ที่เปลี่ยนแปลงได้ในเทมเพลตที่เรียกว่า Editable region โดยเมื่อมีการน าเทมเพลตนี้มาใช้กับหน้าเว็บที่สร้าง จะสามารถแก้ไขเนื้อหาได้เฉพาะในส่วนนี้ (ส่วนอื่นในเทมเพลตที่ไม่ได้ก าหนดพ้ืนที่ Editable region จะเป็ส่วนที่ถูก “ล็อก” ไว้ ไม่อุญาติให้มีการแก้ไขใดๆ โดยตัวชี้เมาส์เปลี่ยนเป็นรูป เมื่อเราเลือกเมาส์มาอยู่เหนือบริเวณดังกล่าว) ในตัวอย่างนี้เราจะสร้างหน้าเทมเพลต ซึ่งมีส่วนประกอบอยู่ 2 ส่วนคือ ส่วนที่ถูก”ล็อก” ไว้ (คือพื้นที่ส่วนที่เป็นด้านบนและเมนูด้านซ้ายมือ ซึ่งเราต้องการให้ทุกหน้าเว็บที่ใช้เทมเพลตนี้มีส่วนเหมือนกัน) และส่วนพ้ืนที่ Editable region ที่เปลี่ยนแปลงได้ (คือส่วนเนื้อหาด้านขวามือ) ดังรูป

ส่วนท่ีเราสร้างให้คงที่ในหน้าเทมเพลต

ส่วนท่ีเราก าหนดให้เป็นพ้ืนท่ีแก้ไขในหน้าเทมเพลต

เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

5 เรื่องที่ 10 การสร้างเฟรมเซต

เราสามารถก าหนดพ้ืนที่ Editable region ได้ 2 วิธี คือ แปลงข้อมูลที่มีอยู่แล้วให้เป็นพื้นที่ Editable region หรือก าหนดพ้ืนที่ว่างในเทมเพลตให้เป็นพื้นที่ Editable region ดังนี้

กรณีท่ี 1 แปลงข้อมูลที่มีอยู่แล้วให้เป็นพื้นที่ Editable region เป็นการเลือกข้อความในหน้าเทมเพลตที่พิมพ์ไว้แล้ว และแปลงให้เป็นพื้นที่ Editable region ดังนี้

1. เลือกข้อความที่จะแปลงเป็นพ้ืนที่ Editable region 2. คลิกท่ีเมนูค าสั่ง Insert ->Template Objects -> Editable region หรือเปิดแท็บ Common คลิก

ปุ่มลูกศร เลือกท่ี เพ่ือแปลงให้เป็นพ้ืนที่ Editable region 3. ก าหนดชื่อเรียกพ้ืนที่ Editable region แล้วคลิกเมาส์ปุ่ม OK 4. บริเวณข้อความที่เราเลือกในหน้าเทมเพลตจะถูกแปลงเป็น Editable region

Note……

มีวิธีลัดในการแปลงข้อความที่เลือกให้เป็นพ้ืนที่ Editable region โดยการคลิกเมาส์ปุ่มขวา แล้วเลือกค าสั่ง Template -> New Editable Region หรือกดคีย์ลัด

เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

6 เรื่องที่ 10 การสร้างเฟรมเซต

กรณีท่ี 2 ก าหนดพื้นที่ว่างในเทมเพลตให้เป็นพื้นที่ Editable region

1. เลือกต าแหน่งในหน้าเทมเพลต จากนั้นเลือกเมนูค าสั่ง Insert -> Template Objects ->

Editable Region หรือเปิดแท็บ Common คลิกปุ่มลูกศร เลือกท่ี เพ่ือแปลงให้เป็นพื้นที่ Editable region

2. ก าหนดชื่อเรียกพ้ืนที่ Editable region แล้วคลิกเมาส์ปุ่ม OK 3. พ้ืนที่ Editable region จะถูกแทรกตรงต าแหน่งที่เราก าหนดไว้

เราสามารถยกเลิกพ้ืนที่ Editable Region ที่สร้างไว้ได้โดยคลิกเลือกพ้ืนที่ Editable Region แล้วคลิกเมาส์ปุ่มขวาและเลือกค าสั่ง Templates -> Remove Templates Markup หรือเลือกค าสั่ง Modify -> Templates -> Remove Templates Markup

ในช่องตารางอื่นเราสามารถก าหนดพื้นท่ี Editable Region ได้ตามขั้ตอนท่ี 1-3

เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

7 เรื่องที่ 10 การสร้างเฟรมเซต

ขั้นตอนที่ 3 น าเทมเพลตมาใช้งานบนหน้าเว็บ

หลังจากท่ีเราได้ก าหนดพ้ืนที่ Editable Region แล้ว ให้เราสั่งบันทึกหน้าเทมเพลตนี้โดยเลือกเมนูค าสั่ง File -> Save จากนั้เราจะน าเทมเพลตนี้ไปใช้กับหน้าเว็บ ซึ่งท าได้ 2 วิธีคือ สร้างหน้าเว็บใหม่จาก เทมเพลตนั้น หรือน าเทมเพลตมาใช้กับหน้าเว็บที่มีอยู่แล้ว

กรณีท่ี 1 สร้างเว็บเพจใหม่จากเทมเพลต

1. เลือกเมนูค าสั่ง File -> New 2. คลิกแท็บ Page from Template ที่อยู่หน้าต่าง

New Document 3. เลือก Site เราต้องการแทรกเทมเพลต

4. เลือกรูปแบบเทมเพลตที่เราต้องการใช้งาน

5. คลิกเมาส์ปุ่ม Create

แสดงพื้นที่ที่ไม่สามารถแก้ไขข้อมูลได ้

แสดงพื้นที่สามารถแก้ไขขอ้มูลได้ (Editable Region)

เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

8 เรื่องที่ 10 การสร้างเฟรมเซต

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

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

หน้าเทมเพลตทีเ่ราออกแบบไว ้ หน้าเว็บเพจท่ีเรามีอยู่แล้ว

เอกสารประกอบการเรียน การใช้งานโปรแกรม Dreamweaver CS6 โดย ครูกัญยา บัวตูม

9 เรื่องที่ 10 การสร้างเฟรมเซต

1. เปิดหน้าเว็บที่เราต้องการน าเทมเพลตมาใช้ และเลือกเมนูค าสั่ง Modify -> Templates -> Apply Template to Page

2. จะปรากฏหน้าต่าง Select Template เลือกเทมเพลตที่ต้องการ และคลิกเมาส์ปุ่ม Select หน้าเว็บจะถูกปรับให้มีรูปแบบเหมือนเทมเพลตที่เลือก

3. ต่อไปเราต้องก าหนดว่าจะให้เนื้อหาของหน้าเว็บ ไปอยู่ส่วนใดในเทมเพลต โดยในหน้าต่าง Inconsistent Region Names จะแบ่งเนื้อหาของหน้าเว็บเป็นสองส่วนคือ Document head (เนื้อหาภายในส่วน ) และ Document body (เนื้อหาภายในส่วน ) ให้เราคลิกเลือก Document head และ Document body และเลือกต าแหน่งในเทมเพลตที่จะวางเนื้อหาส่วนนี้ โดยเลือกต าแหน่งในช่อง Move content to new region ดังนี้

Nowhere ตัดเนื้อหาส่วนนี้ทิ้งไป Doctitle ย้ายเนื้อหาส่วนนี้ไปเก็บไว้ในส่วน Doctitle ของเทมเพลต head ย้ายเนื้อหาส่วนนี้ไปเก็บไว้ในส่วน head ของเทมเพลต EditRegion ย้ายเนื้อหาส่วนนี้ไปเก็บไว้ในส่วน Editable Region ของเทมเพลต

จากนั้นคลิกเมาส์ปุ่ม OK เทมเพลตจะถูกแทรกเข้าไปในหน้าเว็บ และส่วน Document head และ Document body เดิม จะถูกย้ายไปไว้ในส่วนที่เราก าหนด ดังรูป

แสดงตัวอย่างการน าเทมเพลตมาแทรกในหน้าเว็บ

ส่วนของเทมเพลตที่แทรกเข้ามา

หน้าเว็บท่ีเราได้ออกแบบไว้แล้วจะอยู่ในส่วนท่ีเราก าหนด