ใบควำมรู้ กำรสร้ ำงเว็บเพจและเว็บไซต์ # กำหนดโครงร่ ำงเว็บไซต์ ก่อนทำกำรสร้ำงเว็บไซต์ ต้องกำหนดโครงสร้ำงเว็บไซต์ก่อน เพื่อสร้ำงควำมสัมพันธ์ระหว่ำงเว็บเพจและ ไฟล์ต่ำง ๆ ให้เป็ นไป อย่ำงถูกต้อง โดยภำยในเว็บไซต์ประกอบด้วยโฟลเดอร์และไฟล์เป็ นจำนวนมำก ซึ่ง ไฟล์หน้ำแรกของเว็บไซต์ (Homepage) จะต้องอยูใ่ นตำแหน่งโฟลเดอร์หลักเสมอ และควรจัดเก็บไฟล์หน้ำ เว็บไว้ในโฟลเดอร์แยกตำมหัวข้อ เพื่อทำให้สำมำรถจัดกำรเว็บเพจได้อย่ำงเป็ นระเบียบและง่ำยต่อกำรแก้ไข ข้อมูล โครงสร้ำงของโฟลเดอร์ภำยในเว็บไซต์จะมีลกั ษณะเช่นเดียวกับโครงสร้ำงของโฟลเดอร์ในระบบไฟล์ของ วินโดว์ คือ ประกอบด้วยโฟลเดอร์หลัก (Root) ของเว็บไซต์ และสำมำรถสร้ำงโฟลเดอร์ยอ่ ย ๆ เป็ นชั้น ๆ เพื่อจัดเก็บไฟล์ให้เป็ นหมวดหมู่ เช่น ไฟล์รูปภำพ ก็จะถูกเก็บไว้ในโฟลเดอร์ images สำหรับไฟล์ Index.html ซึ่งเป็ นไฟล์หน้ำแรกของเว็บไซต์ จะต้องอยูใ่ นตำแหน่งโฟลเดอร์หลักเสมอ ดังตัวอย่ำง
# เริ่มต้ นสร้ ำงเว็บไซต์ ใน Dreamweaver CS6 กำรสร้ำงเว็บไซต์ จะต้องทำกำรสร้ำงโฟลเดอร์เก็บไฟล์เอกสำร และไฟล์ที่เกี่ยวข้องไว้เฉพำะ ซึ่งใน โปรแกรม Dreamweaver เรี ยกว่ำ กำรสร้ำงไซต์ (Site) มีวธิ ีกำรดังนี้ 1.คลิกที่เมนู Site 2.เลือก New Site
3.จำกนั้นจะปรำกฏหน้ำต่ำง Site Setup for ... (ตำมชื่อไซต์) คลิกที่แท็บ Site 4.ช่อง Site Name : ตั้งชื่อเว็บไซต์ที่ตอ้ งกำร 5.ช่อง Local Site Folder : กำหนดโฟลเดอร์ที่จดั เก็บเว็บไซต์ คลิกปุ่ ม Browse for folder เพื่อเลือกโฟลเดอร์ ที่เก็บเว็บไซต์ 6.คลิก Save
7.จะปรำกฏหน้ำต่ำง Choose Root Folderคลิกปุ่ ม Create new folder เพื่อสร้ำงโฟลเดอร์ที่เก็บเว็บไซต์ 8.ตั้งชื่อโฟลเดอร์... (ในที่น้ ีกำหนดชื่อเป็ น Product) 9.คลิกปุ่ ม Open
10.จะได้ชื่อโฟลเดอร์ที่เรำตั้งชื่อไว้ (ในที่น้ ีกำหนดชื่อเป็ น Product) 11.คลิกปุ่ ม Select
12.กลับมำที่หน้ำต่ำง Site Setup for ... จะได้โฟลเดอร์ที่เลือกในช่อง Local Site Folder 13.คลิกปุ่ ม Save
14.คลิกที่แท็บ Advanced Settings 15.เลือก Local Info 16.ช่อง Default Images folder : กำหนดโฟลเดอร์ในกำรจัดเก็บรู ปภำพ ต้องอยูใ่ นโฟลเดอร์ยอ่ ยของ โฟลเดอร์ที่จดั เก็บเว็บไซต์ (ตำมข้อ 11) 17.คลิกที่ปุ่ม Save
# ถ้ ำต้ องกำรแก้ ไขไซต์ ที่สร้ ำงไว้ มีวธิ ีกำรดังนี้ 1.คลิกที่เมนู Site 2.เลือก Manage Site...
3.คลิกเลือกไซต์ที่ตอ้ งกำรแก้ไข 4.คลิกปุ่ ม (Edit current the select site) เพื่อแก้ไขไซต์
5.แก้ไขชื่อไซต์ หรื อเลือกโฟลเดอร์ใหม่ตำมต้องกำร 6.คลิกปุ่ ม Save
7.จะได้ไซต์ที่แก้ไขตำมต้องกำร 8.คลิกที่ปุ่ม Done
# กำรจัดกำรโครงสร้ ำง Files พำเนล Files เป็ นส่ วนแสดงชื่อเว็บไซต์ โฟลเดอร์ สำหรับเก็บไฟล์เอกสำรต่ำง ๆ ของเว็บไซต์ มีวธิ ีกำรดังนี้ 1.คลิกเมำส์ขวำที่แท็บพำเนล Files (คลิกขวำที่ไซต์ หรื อพื้นที่วำ่ ง ๆ) 2.คลิกเลือกคำสัง่ New File สำหรับสร้ำงไฟล์ 3.หรื อ คลิกเลือกคำสัง่ New Folder สำหรับสร้ำงโฟลเดอร์ 4.หรื อ เลือกจัดกำรเกี่ยวกับไฟล์และโฟลเดอร์ในคำสัง่ อื่น ๆ
# กำรกำหนดคุณสมบัตขิ องเว็บเพจ ก่อนกำรสร้ำงเว็บเพจ จำเป็ นต้องกำหนดคุณสมบัติพ้นื ฐำนให้กบั เว็บเพจแต่ละหน้ำ เพื่อควำมเหมำะสมใน กำรทำงำน ซึ่งมีวิธีกำรดังนี้ 1.คลิกที่เมนู Modify 2.เลือก Page Properties... หรื อ Ctrl + J
3.หรื อ คลิกที่ปุ่ม Page Properties..
จะปรำกฎหน้ำต่ำง Page Properties แบ่งรำยละเอียดออกเป็ น 6 หมวด ได้แก่ Appearance (CSS) กำหนดคุณสมบัติทวั่ ๆ ไปของหน้ำเว็บเพจ (กำรกำหนดหน้ำตำเว็บเพจด้วย CSS)
o o o o o o o o o o
Page Font กำหนดรู ปแบบของตัวอักษร Size: กำหนดขนำดของตัวอักษร Text Color: กำหนดสี ของตัวอักษร Background Color:กำหนดสี พ้นื หลังของเว็บเพจ Background Image: กำหนดภำพให้เป็ นพื้นหลังของเว็บเพจ Repeat: กำหนดกำรแสดงซ้ ำของภำพพื้นหลัง Left Margin: กำหนดระยะขอบด้ำนซ้ำยของเว็บเพจ Right Margin: กำหนดระยะขอบด้ำนขวำของเว็บเพจ Top Margin: กำหนดระยะขอบด้ำนบนของเว็บเพจ Bottom Margin: กำหนดระยะขอบด้ำนล่ำงของเว็บเพจ
Appearance (HTML) กำหนดคุณสมบัติทวั่ ๆ ไปของหน้ำเว็บเพจ (กำรกำหนดหน้ำตำเว็บเพจด้วย HTML) จะเหมือนกับ Appearance (CSS)
o o o o
Background Image :กำหนดภำพให้เป็ นพื้นหลังของเว็บเพจ Background : กำหนดสี พ้นื หลังของเว็บเพจ Text : กำหนดสี ของตัวอักษร Visited links : กำหนดสี ของลิงค์ เมื่อถูกเมำส์คลิกไปแล้ว
o o o o o o
Link : กำหนดสี ของข้อควำมที่เป็ นจุดลิงค์ Active links : กำหนดสี ของลิงค์ เมื่อถูกเมำส์คลิก Left Margin : กำหนดระยะขอบด้ำนซ้ำยของเว็บเพจ Right Margin : กำหนดระยะขอบด้ำนขวำของเว็บเพจ Top Margin : กำหนดระยะขอบด้ำนบนของเว็บเพจ Bottom Margin : กำหนดระยะขอบด้ำนล่ำงของเว็บเพจ
Links (CSS) กำหนดคุณสมบัติพ้นื ฐำนของกำรสร้ำงจุดเชื่อมโยงหรื อลิงค์
o o o o o o o
Link Font : กำหนดรู ปแบบของข้อควำมที่ใช้เป็ นลิงค์ Size : กำหนดขนำดของข้อควำมที่ใช้เป็ นลิงค์ Link Color : กำหนดสี ของข้อควำมที่ใช้เป็ นลิงค์ Rollover links : กำหนดสี ของข้อควำมลิงค์ เมื่อถูกเมำส์ช้ ี Visited links : กำหนดสี ของข้อควำมลิงค์ เมื่อถูกเมำส์คลิกไปแล้ว Active links :กำหนดสี ของข้อควำมลิงค์ เมื่อถูกเมำส์คลิก Underline Style :กำหนดรู ปแบบกำรขีดเส้นใต้ของข้อควำมลิงค์
Headings (CSS) กำหนดคุณสมบัติขอ้ ควำมที่ใช้เป็ นหัวเรื่ องในหน้ำเว็บเพจ
o Heading font: กำหนดรู ปแบบตัวอักษรของหัวข้อหรื อหัวเรื่ อง o Heading 1-6 : กำหนดขนำดและสี ตวั อักษรของหัวข้อหรื อหัวเรื่ อง Title/Encoding กำหนดหัวเรื่ องและรู ปแบบภำษำของเว็บเพจ
o Title: กำหนดชื่อหัวเรื่ องของเว็บเพจ o Document Type(DTD): กำหนดประเภทของหน้ำเว็บเพจ o Encoding: กำหนดภำษำที่จะใช้ในเว็บเพจ (นิยมกำหนดเป็ น Unicode (UTF-8) ในกำรแสดง ข้อควำมบนหน้ำเว็บเพจเป็ นภำษำไทย) Tracing ImageTitle/Encoding กำหนดรู ปภำพให้แสดงอยูด่ ำ้ นหลังของเนื้อหำ แต่จะไม่ปรำกฏรู ปภำพเมื่อ แสดงผลหน้ำเบรำว์เซอร์
o Tracing image: กำหนดไฟล์ภำพที่จะใช้เป็ นแบบ o Transparency: ปรับแต่งควำมโปร่ งใสของภำพ
# กำรสร้ ำงหน้ ำเว็บเพจใหม่ กำรสร้ำงหน้ำเว็บเพจใหม่ (เว็บเพจเปล่ำ) มีวิธีกำรดังนี้ 1.คลิกที่เมนู File 2.เลือก New..
3.คลิกที่แท็บ Blank Page 4.ช่อง Page Type : ประเภทของเว็บเพจให้เลือก HTML 5.ช่อง Layout : รู ปแบบโครงสร้ำงให้เลือก จำกนั้นคลิกที่ปุ่ม Create
6.จะปรำกฏหน้ำเว็บเพจเปล่ำ
# กำรบันทึกไฟล์ เว็บเพจ เมื่อสร้ำงเว็บเพจได้เสร็ จเรี ยบร้อยแล้ว ให้ทำกำรบันทึกไฟล์เว็บเพจ ซึ่งมีวิธีกำรดังนี้ 1.คลิกที่เมนู File 2.เลือก Save... หรื อ Save As...
3.ช่อง Save in ให้เลือกตำแหน่งเก็บไฟล์เว็บเพจ 4.ช่อง File name ให้ต้ งั ชื่อไฟล์เว็บเพจที่ตอ้ งกำรบันทึก 5.คลิกที่ปุ่ม Save เพื่อบันทึกไฟล์
# กำรเปิ ดเว็บเพจเดิม กำรเปิ ดเว็บเพจเดิมที่เคยสร้ำง เพื่อปรับปรุ งหรื อแก้ไขเนื้อหำ มีวิธีกำรดังนี้ 1.คลิกที่เมนู File 2.เลือก Open...
3.เข้ำโฟลเดอร์แล้วเลือกไฟล์เว็บเพจที่ตอ้ งกำร 4.คลิกที่ปุ่ม Open