หล งจากสร างเอกสารเทมเพลตเร ยบร อยแล ว ก มาถ งข นตอนท จะน าเอาเอกสารเทมเพลตมาใช ก บ เอกสารเว บเพจ หร อเร ยกว า การเร ยกใช เทมเพลต

เรื่องที่ 3.1 การสร้างเว็บเพจและเรียกใช้เทมเพลต หลังจากสร้างเอกสารเทมเพลตเรียบร้อยแล้ว ก็มาถึงขั้นตอนที่จะนําเอาเอกสารเทมเพลตมาใช้กับ เอกสารเว็บเพจ หรือเรียกว่า การเรียกใช้เทมเพลต การสร้างเว็บเพจ 1. เปิดหน้าต่าง Site 2. ดับเบิ้ลคลิกไฟล์นามสกุล .html ตามชื่อไฟล์ที่ต้องการในที่นี้จะเลือก ไฟล์หน้า HomePage หรือไฟล์ index.html ก่อนเพื่อสะดวกในการเรียก เว็บไซต์ขึ้นมาตรวจสอบการใช้งาน จากภาพข้างล่างนี้ ภาพหมายเลข 1. แถบแสดงชื่อไฟล์ index.html คลิกเมาส์ที่รูป แทรกตาราง กําหนดค่าของตารางดังภาพหมายเลข 3 สําหรับเว็บเพจทุกหน้า (ยกเว้น การสร้างเทมเพลต) ให้ตั้งค่าแทรกตารางโดย กําหนดให้ความกว้าง (Width) เป็น 100 Percent และคลิก OK (หมายเลข 4) เมื่อทําการแทรกตารางทุกครั้งต้องกําหนดคุณสมบัติของตารางให้เป็น Top เสมอโดยคลิกเมาส์ใน ช่องตาราง (หมายเลข 1) และกําหนดค่า Vert ให้เป็น Top (หมายเลข 2)

การเรียกใช้เทมเพลต

เมื่อแทรกตารางเสร็จแล้วเลือกคําสั่งจากแถบเมนู Modify - Templates - Apply Template to page

คลิกหมายเลข 1 และ 2 เลือกหมายเลข 3 เลือกชื่อไฟล์เทมเพลตที่ต้องการคือ 333

คลิกเมาส์เลือก Document body (หมายเลข 4) ถ้าช่องนี้ปรากฏข้อความ

พื้นที่ในกรอบสี่เหลี่ยมเป็นพื้นที่ของหน้าเว็บเพจแต่ละหน้าที่สามารถใส่รายละเอียดต่างๆตามต้องการ พื้นที่นอกกรอบสี่เหลี่ยมไม่สามารถแก้ไขได้ในหน้าเว็บเพจนั้นถ้าแก้ไขต้องไปเปิดไฟล์เทมเพลตที่ เรียกใช้ในหน้าเว็บเพจนั้นขึ้นมาแก้ไข เลือกคําสั่งจากแถบเมนูFile - Saveหรือกดแป้นCtrl +S เพื่อทําการบันทึกไฟล์เว็บเพจ ซึ่งจะได้ ไฟล์ index.html ที่เรียกใช้ไฟล์แม่แบบหรือเทมเพลตแล้ว แต่ยังเหลืออีก 3 ไฟล์ได้แก่ไฟล์ 101.html, 102.html และ 103.html ให้ย้อยกลับไปปฏิบัติตามขั้นตอนการสร้างหน้าเว็บเพจที่ละไฟล์เสร็จแล้วให้ กดแป้นCtrl +S เพื่อทําการบันทึกไฟล์เว็บเพจและปิดหน้าต่างของไฟล์นั้น โดยสรุป การสร้างเว็บเพจและเรียกใช้เทมเพลต เป็นการสร้างเอกสารเว็บเพจ เริ่มจากการเปิดไฟล์ HTML ทําการใส่และปรับคุณสมบัติตาราง จากนั้นทําการเรียกใช้เอกสารเทมเพลตมาวางครอบพื้นที่ของ ตารางที่ได้สร้างไว้แล้ว เรื่องที่ 3.2 การบันทึกแฟ้มเอกสารเว็บเพจ หลังจากสร้างเรียกใช้เอกสารเทมเพลตเรียบร้อยแล้ว ก็มาถึงขั้นตอนการบันทึกไฟล์เอกสารเว็บเพจ มีวิธีการปฏิบัติ ดังนี้ หลังจากไฟล์เอกสารเว็บเพจหรือไฟล์HTML ได้ทําการเรียกใช้ไฟล์แม่แบบ (ไฟล์เทมเพลต) เสร็จเรียบแล้วให้ทําการบันทึกไฟล์โดยใช้คําสั่งจากแถบเมนูFile - Save หรือกดแป้นCtrl +S จะได้ไฟล์ index.html

เมื่อการบันทึกไฟล์หรือกดแป้นCtrl +S สังเกตตรงชื่อไฟล์ index.html จะไม่มีเครื่องหมาย* (ดอกจัน) ข้อควรระวังสัญลักษณ์หมายเลข 1 ต้องเป็น ไฟล์สกุล html เท่านั้นห้ามทํากับไฟล์สกุล dwt หรือ ไฟล์เทมเพลต การบันทึกไฟล์เว็บเพจอย่างรวดเร็วในกรณีที่ไฟล์เว็บเพจ หรือเอกสาร HTML ที่ใช้เทมเพลตเดียวกันสามารถทํา การบันทึกไฟล์ต้นฉบับที่เรียกใช้เทมเพลตซ้ําไฟล์เดิมอย่าง รวดเร็วโดยใช้คําสั่งFile - Save As ไปแทนที่ไฟล์HTML อื่น ตามภาพจนครบ ทําให้ได้ไฟล์เว็บเพจที่เรียกใช้เทมเพลต เดียวกันครบทุกไฟล์อย่างรวดเร็ว ข้อควรระวังขั้นตอนนี้ ห้ามทํากับไฟล์สกุล dwt หรือไฟล์เทมเพลต คลิกYes เพื่อบันทึกซ้ําไฟล์เก่า(ให้ทําการSave ทับไฟล์เก่าทุกไฟล์ ได้แก่101.html, 102.html และ 103.html) สรุป การบันทึกเอกสารเว็บเพจหลังจากที่ได้เรียกใช้แฟ้มเอกสารเทมเพลต เป็นการบันทึกไฟล์เว็บเพจ อย่างรวดเร็วโดยใช้คําสั่ง File - Save As ไปแทนที่ไฟล์ HTML อื่นที่เรียกใช้เทมเพลตเดียวกันครบทุกไฟล์ อย่างรวดเร็ว

เรื่องที่ 3.3 การแสดงผลทางเว็บบราวเซอร์

หลังจากบันทึกเอกสารเว็บเพจที่มีการเรียกใช้แฟ้มเอกสารเทมเพลต เป็นการบันทึกไฟล์เว็บเพจอย่าง รวดเร็วโดยใช้คําสั่ง File - Save As ไปแทนที่ไฟล์ HTML อื่นที่เรียกใช้เทมเพลตเดียวกันครบทุกไฟล์อย่าง รวดเร็ว ก็มาถึงขั้นตอนการแสดงผลทางเว็บบราวเซอร์

เว็บบราวเซอร์ (Web Browser) หมายถึงโปรแกรมใช้ในการแสดงผลภาษา HTML ให้แสดงใน

รูป World Wide Web ของอินเทอร์เน็ต โปรแกรมที่นิยมใช้กันมากได้แก่ Internet Explorer, Mozilla Firefox

ขั้นตอนการแสดงผลงานทางเว็บบราวเซอร์

หลังจากทําการบันทึกเอกสาร HTML แล้วก็กดแป้น F12 หรือคลิกที่หมายเลข 1 และ 2 ตามลําดับ

เพื่อแสดงผลงานทางโปรแกรมเว็บบราวเซอร์

แถบโต้ตอบบนเว็บบราวเซอร์

การแสดงผลงานทางเว็บบราวเซอร์ เกิดแถบโต้ตอบดังภาพหมายเลข 1 แก้ไขโดยคลิกเมาส์ขวาที่แถบ โต้ตอบ แล้วเลือกคําสั่ง Allow Blocked Content ดังภาพหมายเลข 2

ปรากฏ ดังภาพ

โดยสรุป การแสดงผลงานทางเว็บบราวเซอร์เป็นผลงานทางโปรแกรมใช้ในการแสดงผลภาษา

HTML ให้แสดงในรูป World Wide Web ของอินเทอร์เน็ตโดยวิธีกดแป้น F12 ของเอกสารเว็บเพจ

เรื่องที่ 3.4 การพิมพ์และใส่ข้อความในเว็บเพจ หลังจากเรียกใช้เทมเพลตมาครอบเอกสารเว็บเพจเรียบร้อยแล้ว ก็มาถึงขั้นตอนการพิมพ์และใส่ ข้อความ วิธีการปฎิบัติดังนี้ การพิมพ์ข้อความหรือใส่ข้อความลงในหน้าเว็บทําได้โดยการเปิด ไฟล์ HTML ที่ต้องการแก้ไขให้นําเมาส์ดับเบิ้ลคลิกไฟล์ 101.html, 102.html, 103.html เพื่อใส่ข้อความ ปรากฏ ดังภาพ

การพิมพ์ข้อความใส่หน้าเว็บ 1. สามารถพิมพ์ข้อความใส่ในหน้าเว็บนั้นได้โดยตรงแต่ขอแนะนําจากข้อ 2 จะดีและสะดวกกว่า 2. คัดลอกข้อความจากโปรแกรมประมวลผลคํา (Word) หรือโปรแกรมอื่นๆหลักการพิมพ์ข้อความควรใช้ หลักการคือไม่ขึ้นย่อหน้าใหม่ไม่ต้องตัดข้อความโดยใช้แป้น Enter ซึ่งจะทําให้สะดวกในการจัดข้อความใน หน้าเว็บเพจ ตัวอย่างการนําข้อความจากโปรแกรมประมวลผลคํามาใส่ในหน้าเว็บเพจ 1. เปิดโปรแกรมประมวลผลคําและทําแถบสีดําหรือกําหนดพื้นที่ที่ต้องการจะคัดลอกข้อความ หมายเลข 1 เลือกคําสั่งหมายเลข 2 และ 3 ตามลําดับ 2. นํามาวางไว้ในโปรแกรม Notepad โดยที่โปรแกรม Notepad จะตัดคุณสมบัติอื่นๆออก จะเหลือแต่เฉพาะข้อความเท่านั้น

3. วิธีการคัดลอกข้อความจากโปรแกรม Notepad เริ่มจากเมนู Edit - Select All เพื่อเลือก ทําแถบสี (ข้อความที่จะคัดลอก) แล้วใช้คําสั่ง Copy

คลิกเมาส์ที่หมายเลข 1 และคลิกเมาส์ขวาใช้คําสั่ง Paste (หมายเลข 2)

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

เรื่องที่ 3.5 การเตรียมรูปภาพและการใส่รูปภาพ หลังจากพิมพ์และใส่ข้อความในเว็บเพจเรียบร้อยแล้ว ก็มาถึงขั้นตอนการใส่รูปภาพในหน้าเว็บเพจ และก่อนนํารูปภาพมาวางในเว็บเพจ จะต้องมีการเตรียมรูปภาพให้อยู่ในลักษณะที่สามารถแสดงผลบน อินเทอร์เน็ตได้ การเตรียมรูปภาพ **** (การเตรียมรูปภาพแบบง่าย ศึกษาขั้นตอนในหน้าที่ 65) ***** 1. สร้างภาพใหม่ใช้คําสั่ง File - New หรือใช้คําสั่ง Ctrl - N 2. ดับเบิ้ลคลิกที่หมายเลข 1 และคลิก OK 3. นําเมาส์มาคลิกหมายเลข 3 - 4 กําหนดค่า Radius หมายเลข 5 (ถ้าตัวเลขมาก จะมีมุมโค้งมาก)

4. วาดกรอบดังภาพ 6 - 7 ข้างล่างนี้

5. คลิกคําสั่ง เพื่อกําหนดภาพเงา (หมายเลข 8- 9)

6. กําหนด Layer Style หมายเลข 10 Drop Shadow และกําหนดค่าดังภาพ

8. วาดกรอบสี่เหลี่ยม (หมายเลขที่ 13) และคลิกที่หมายเลข 14 เพื่อเอา Layer Style ออก

9. คลิกเอา Layer Style ออกหรือคลิกเอารูปตาออก (หมายเลข 15) และคลิกที่ Paths หมายเลข 16 คลิกเมาส์ขวาหมายเลข 17 เลือกคําสั่งหมายเลข 18 (Make Selection)

11. เปิดภาพที่ทําต้องการใช้คําสั่ง File - Open หมายเลข 21 ในขั้นตอนนี้ควรจะมีการปรับรายละเอียด ของภาพให้ชัดเจน ปรับขนาดที่เหมาะสมเสร็จแล้วทําตามภาพหมายเลข 22

12. ใช้คําสั่ง Edit - Paste Into จะได้ภาพตามต้องการที่สีพื้นเป็นสีขาว

13. หากต้องการใช้สีพื้นโปร่งแสงก็ให้คลิกหมายเลข 24 เพื่อเอารูปตาออกและเมื่อใช้คําสั่ง

การบันทึกรูปภาพ

ก่อนทําการใส่รูปภาพในหน้าเว็บ ต้องมีการเตรียมรูปภาพและบันทึก (Save) ไว้ในไซต์ (Site) ก่อน วิธีการทําดังนี้

เปิดโปรแกรม Adobe Photoshop และปฏิบัติขั้นตอนตามรูปภาพ

Save For Web กําหนด

เลือก JPEG ขนาด Medium Quality 30 หรือ Save เป็นสุกล GIF ก็ได้ เลือกไดร์ที่เก็บข้อมูลเว็บไซต์ บันทึกภาพเก็บไว้ในไซต์ที่ทํางาน

แฟ้มรูปภาพที่บันทัก (Save) จะปรากฏอยู่ในโฟลเดอร์ย่อย 100 ชื่อ 101.jpg ดังภาพ ข้อควรระวัง ไฟล์รูปภาพที่ Save จะต้องอยู่ในไซต์ ที่ทํางานเสมอ หากไม่พบไฟล์ที่ Save ให้กลับไปทําการ Save รูปภาพใหม่ การใส่รูปภาพในหน้าเว็บ ***** (ต่อจากหน้า 50) ก่อนใส่รูปภาพในหน้าเว็บต้องทําการพิมพ์ข้อความหรือวางข้อความโดยที่ยังไม่ต้องจัดข้อความให้ใส่ รูปภาพก่อนแล้วค่อนจัดข้อความที่หลัง การใส่รูปภาพในหน้าเว็บมีวิธีการทําดังนี้ คือ 1. นําเมาส์ไปวางเคอร์เซอร์ในตําแหน่งที่ต้องการใส่รูปภาพในที่นี้ให้วางในตําแหน่งหน้าข้อความ แรกในบรรทัดแรก 2. คลิกคําสั่ง เพื่อทําการแทรกตางรางดังภาพ

3. ปรากฏกรอบโต้ตอบ Table ตั้งค่าของตารางตามในรูปค่าความกว้าง (Table Width)

ควรกําหนดให้น้อยไว้ก่อนพอแทรกวางรูปภาพจะขยายขนาดเท่ากับรูปภาพโดยอัตโนมัติ

การใส่รูปภาพเริ่มต้นนําเมาส์ไปคลิกไฟล์ภาพที่จะใส่ 101.jpg (หมายเลข 1) คลิกเมาส์ค้างไว้และลาก ไปยังภายกรองตารางที่แทรกไว้ก่อนหน้านี้และปล่อยเมาส์ (หมายเลข 2) คลิกปุ่ม OK (หมายเลข 3) ดังภาพ

การจัดตําแหน่งการวางภาพคลิกที่ขอบของตาราง (หมายเลข 1) คลิกที่ช่อง Align (หมายเลข 2) เลือก ตําแหน่งของภาพด้านซ้าย (Left) กลาง (center) และขวา (Right)

โดยสรุป การใส่รูปภาพหน้าเว็บเพจต้องมีการเตรียมรูปภาพให้มีขนาดเหมาะสมกับการแสดงผล บนโปรแกรมเว็บบราวเซอร์ การใส่รูปภาพต้องทําการแทรกตารางก่อนและใส่รูปภาพในตารางนั้นต่อไป เรื่องที่ 3.6 การปรับแต่งเอกสารเว็บเพจ หลังจากเอกสารเว็บเพจได้พิมพ์หรือใส่ข้อความ ทําการแทรกตารางและใส่รูปภาพในตารางที่แทรก จัดตําแหน่งการวางของรูปภาพว่าจะวางในตําแหน่ง ซ้าย กลางหรือขวาของหน้าเว็บเพจ ก็มาถึงขั้นตอน การปรับแต่งเอกสารเว็บเพจพิมพ์ข้อความลงในหน้าเว็บเพจ มีลักษณะคล้ายๆกับการพิมพ์งานด้วย โปรแกรมประมวลผลคํา (Microsoft Word) หรือโปรแกรมพิมพ์ทั่วไป ซึ่งสามารถสรุปหลักการพิมพ์ ได้ดังนี้ 1. ให้พิมพ์งานก่อนโดยไม่ต้องสนใจเกี่ยวกับแบบอักษร (Font), ขนาดของอักษร (Size) และ ลักษณะพิเศษ (Format, Style) 2. ให้ใส่ช่องว่างระหว่างคําเป็นช่วงๆ (เคาะแป้น Space Bar เพื่อเว้นวรรค) ตามความเหมาะสม เพื่อช่วยในการตัดคํา เนื่องจากโปรแกรมไม่มีความสามารถด้านการตัดคําอัตโนมัติ 3. ข้อความให้พิมพ์ไปเรื่อยๆไม่ต้องกดแป้น Enter เมื่อถึงระยะขอบขวาเพราะโปรแกรมจะทําการ ตัดคําขึ้นบรรทัดใหม่ ให้โดยอัตโนมัติ 4. การขึ้นย่อหน้าใหม่ ให้กดแป้น Enter 5. การขึ้นหัวเรื่องใหม่หรือหัวข้อใหม่ให้กดแป้น Enter 6. การขึ้นบรรทัดใหม่โดยให้เนื้อความอยู่ในพารากราฟเดิมใช้การกดแป้น Sift ค้างไว้พร้อมกับ กดแป้น Enter 7. การปรับแต่งลักษณะตัวอักษรให้ใช้เมาส์ลากทําแถบสีคลุมข้อความที่ต้องการแล้วเลือกลักษณะ อักษรที่ต้องการ จากปุ่มควบคุมในแถบ Properties

8. การจัดพารากราฟเช่นจัดชิดขอบซ้าย, จัดกึ่งกลาง และจัดชิดขอบขวา ใช้ปุ่ม Alignment จาก

แถบ Properties

9. การเพิ่มจํานวนช่องว่างให้กดแป้น Ctrl - Shif ค้างไว้และกดแป้น Space Bar

เพราะโปรแกรมไม่อนุญาตให้เคาะแป้นเว้นวรรคมากกว่า 1 ครั้ง โดยสรุป การปรับแต่งเอกสารเว็บเพจเป็นจัดรูปแบบตัวอักษร การเว้นวรรค การย่อหน้าให้ เหมาะสมกับการแสดงผลบนโปรแกรมเว็บบราวเซอร์ เรื่องที่ 3.7 การปรับปรุงเอกสารเทมเพลต การปรับปรุงเอกสารเทพลต เป็นการปรับปรุงเอกสารแม่แบบของเอกสารเว็บเพจที่มีการเรียกใช้ สาเหตุที่ ต้องมีการปรับปรุงเกิดขึ้นเช่น ตัวลิงก์ไม่ถูกต้องหรือมีการเปลี่ยนแปลงรูปร่างหน้าตาของหน้าเว็บใหม่ ก็ใช้ วิธีการปรับปรุงเอกสารเทมเพลตซึ่งจะมีผลทําให้เอกสารเว็บเพจที่เรียกใช้เทมเพลตนั้นมีการเปลี่ยนแปลงปรับปรุง โดยอัตโนมัติ การแก้ไขการลิงก์ (Link) ในเทมเพลตแล้วยังไม่ปรับปรุงเว็บเพจครบทุกหน้า ทําได้ดังนี้ 1. เปิดไซต์ (Sites) ที่ทํางานให้ถูกต้องหากเปิดไซต์ไม่ถูกต้องจะไม่สามารถปรับปรุงเอกสารเทมเพลตได้ 2. เปิดหน้าเว็บเพจที่ลิงก์ (Link) ยังไม่ได้ปรับปรุงมา 1 หน้า 3. ใช้คําสั่ง Modify - Templates - Updage Pages..

4. ปรากฏดังภาพให้สังเกตตรวจดูว่าชื่อ Site ตรงหรือไม่ (ภาพหมายเลข 1) แล้วคลิกStart (ภาพหมายเลข 2) เพื่อเริ่มปรับปรุงเว็บเพจ 5. แสดงผลการปรับปรุงแฟ้มข้อมูลเสร็จเรียบร้อยแล้วคลิกปุ่มCloseดังภาพ โดยสรุป การปรับปรุงเอกสารเทมเพลต เป็นการปรับปรุงเอกสารแม่แบบของเอกสารเว็บเพจที่มี การเรียกใช้ สาเหตุที่ต้องมีการปรับปรุงเนื่องจากมีการเปลี่ยนแปลงรูปร่างหน้าตาของหน้าเว็บใหม่ตัวลิงก์ไม่ ถูกต้อง ก็ใช้วิธีการปรับปรุงเอกสารเทมเพลต ซึ่งจะมีผลทําให้เอกสารเว็บเพจที่เรียกใช้เทมเพลตนั้นมีการ เปลี่ยนแปลงปรับปรุงโดยอัตโนมัติ การยกเลิกพื้นที่เทมเพลต การยกเลิกพื้นที่เทมเพลต ใช้ในกรณีที่มีการ Save as Template เพื่อสร้างไฟล์เทมเพลตขึ้นใหม่ ซึ่งไฟล์เทมเพลตที่เกิดขึ้นใหม่ ต้องทําการยกเลิกพื้นที่เทมเพลตเดิมออก และกําหนดพื้นที่เทมเพลตใหม่ ให้ตรงกับชื่อไฟล์เทมเพลตที่สร้างขึ้นใหม่ การยกเลิกพื้นที่เทมเพลตต้องใช้ความระมัดระวังเป็นพิเศษ เพราะอาจจะทําให้ข้อมูลในเว็บเพจที่มีการเรียกใช้เทมเพลตสูญหายได้

วิธีการยกเลิกพื้นที่เทมเพลต มีขั้นตอนดังนี้

ภาพหมายเลข 1 วางเคอร์เซอร์ในพื้นที่ 111

ภาพหมายเลข 2 - 3 - 4 คลิกเมาส์เลือกคําสั่ง Modify - Templates - Remove Template Markup

ภาพแสดงการยกเลิกพื้นที่เทมเพลต

สังเกตพื้นที่เทมเพลต 111 จะถูกยกเลิกไป และหากกําหนดพื้นที่เทมเพลตใหม่ ให้ย้อนกลับไปทําใน เรื่อง 1.8 การกําหนดพื้นที่เทมเพลตหน้าที่ 16