หน่วยที่3

เริ่มต้นสร้างเว็บไซต์

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

จากรูป จะเห็นว่าหน้าโฮมเพจหลัก (index.html) จะต้องอยู่ในโฟลเดอร์หลักและไม่ควรอยู่ในโฟลเดอร์ย่อยใดๆ ทั้งสิ้น เพราะ index.html คือหน้าเว็บเพจหน้าแรกที่จะถูกแสดง เมื่อมีการเยี่ยมชมเว็บไซต์

เริ่มกำหนดเว็บไซต์ใหม่ใน Dreamweaver CS6
จะเริ่มต้นโดยการกำหนดเว็บไซต์ใหม่ในโปรแกรม Dreamweaver เรียกว่าการสร้างไซต์ (Site) ใหม่

โดยมีวิธีการดังนี้
1. คลิกที่เมนู Site > New Site….

2. พิมพ์ชื่อเว็บไซต์ที่ต้องการในที่นี้ยกตัวอย่าง “บทเรียนออนไลน์”
3. กำหนดโฟลเดอร์สำหรับจัดเก็บเว็บไซต์
4. คลิกปุ่ม Save

5. โปรแกรมจะแสดงรายชื่อเว็บไซต์และโฟลเดอร์ที่เก็บเว็บไซต์ในพาเนล Local Files ที่ได้สร้างไว้

การสร้างหน้าเว็บใหม่
สามารถสร้างหน้าเว็บเพจใหม่ได้ โดยคลิกเมาส์ปุ่มขวาที่โฟลเดอร์ที่ต้องการใช้เก็บหน้าเว็บใหม่

แล้วเลือกคำสั่ง New File จะปรากฏหน้าเว็บใหม่ที่มีนามสกุล html แล้วตั้งชื่อไฟล์ใหม่ได้ตามต้องการ

การสร้างโฟลเดอร์ใหม่
ในกรณีที่ต้องการสร้างโฟลเดอร์ย่อยใต้โฟลเดอร์ที่เก็บเว็บไซต์ เพื่อแยกเก็บข้อมูลและหน้าเว็บให้เป็นหมวดหมู่มีวิธีการดังนี้
1. คลิกเมาส์ปุ่มขวาที่โฟลเดอร์ Site แล้วเลือก New Folder
2. ตั้งชื่อตามต้องการแล้วกด Enter บนแป้นคีย์บอร์ด

การเปลี่ยนชื่อไฟล์และโฟลเดอร์
การเปลี่ยนชื่อไฟล์และโฟลเดอร์ที่อยู่ในเว็บไซต์ เพื่อช่วยในการสื่อความหมายมีวิธีการดังนี้
1. คลิกเมาส์ปุ่มขวา แล้วเลือกคำสั่ง Edit > Rename หรือกดคีย์ F2 แล้ว
2. พิมพ์ชื่อใหม่ตามที่เราต้องการจากนั้นกด Enter บนแป้นคีย์บอร์ด

การลบไฟล์และโฟลเดอร์
ให้ทำการคลิกที่ไฟล์/โฟลเดอร์ แล้วกดคีย์ Delete บนแป้นคีย์บอร์ด หรือคลิกเมาส์ปุ่มขวาที่ไฟล์/โฟลเดอร์แล้วเลือกคำสั่ง Edit > Delete จากนั้นจะแสดงหน้าต่างยืนยันในการลบ ให้คลิกปุ่ม Yes เพื่อยืนยับการลบได้ทันที

การเปิด/ปิดหน้าเว็บ
สามารถเรียกไฟล์ที่สร้าง โดยดับเบิลคลิกที่ไอคอนไฟล์นั้นในพาเนล Files ดังตัวอย่างจะเป็นการเปิดไฟล์ index.html ขึ้นมา และเมื่อต้องการปิดหน้าเว็บนี้ก็ให้คลิกที่หรือเลือกเมนูคำสั่ง File > Close

วิธีในการกำหนด Encoding บนหน้าเว็บให้เลือก Modify > Page Properties คลิกเลือกหัวข้อ Title/Encoding และเลือกรูปแบบการเข้ารหัสตัวอักษรในช่อง Encoding

การบันทึกหน้าเว็บเพจ

หลังจากที่สร้างหน้าเว็บได้ตามต้องการแล้ว ให้ทำการบันทึกไฟล์หน้าเว็บ โดยเลือกคำสั่ง

File > Save หรือกดคีย์ลัด <Ctrl+s>

การแสดงผลหน้าเพจ

เมื่อทำการสร้างหน้าเว็บเพจเสร็จเรียบร้อยแล้วนั้น หรืออาจจะยังไม่เสร็จเราก็สามารถที่จะแสดงผลหน้าเว็บเพจที่สร้างขึ้นได้โดยการกด <F12> ที่คีย์บอร์ด หรือ กดเลือกที่แถบดังภาพด้านล่าง

1. กดที่ Preview/Debug in browse
2. เลือกการแสดงผลกับ Browser ตัวไหน

ใบกิจกรรม หน่วยที่ 3