บทที่ 6 โครงสร้างของเว็บ

บทนำ ตามที่กล่าวไว้แล้วในหน่วยที่ 1 เว็บไซต์ หมายถึงที่อยู่ของเว็บที่นำทุกหน้าของเว็บมารวมไว้ เพื่อจะนำไปไว้ในระบบอินเตอร์เน็ต ฉะนั้นการสร้างเว็บไซต์จึงเป็นสิ่งจำเป็นอย่างยิ่ง ในที่นี้จะอธิบายขั้นตอนการสร้างเว็บไซต์ที่ควรปฏิบัติ โดยมีขั้นตอนดังนี้ การสร้างโฟลเดอร์ (Folder) การสร้างและแก้ไขไซต์ (Site) การสร้างและแก้ไขไฟล์ (File) การเตรียมการก่อนลงมือเขียนเว็บ

1. การสร้าวโฟล์เดอร์ (Folder) การสร้างโฟล์เดอร์สำหรับป็นแหล่งเก็บข้อมูลทั้งหมด เช่น ไฟล์ที่เป็น.html ไฟล์อื่นๆ ตลอดจนรูปภาพ เพื่อความสะดวกในการคัดลอกไฟล์และการ Upload File มีขั้นตอนดังนี้ คลิกเมาส์ข้างขวาบริเวณ Desktop (พื้นที่ว่างหน้าจอ) ในกรณีที่ต้องการให้เห็นเด่นชัด หรือจะสร้างไว้ในโฟล์เดอร์อื่นๆ ก็ได้ เช่น My Document เป็นต้น คลิกที่ New คลิกที่ Folder พิมพ์ชื่อโฟล์เดอร์ที่ต้องการ ในกรณีนี้ให้พิมพ์ชื่อ mywork คลิกตรงพื้นที่ว่าง

2. การสร้าวและแก้ไขไซต์ (Site) การสร้างโซต์ การสร้างไซต์ สำหรับเป็นที่อยู่ของไฟล์ต่างๆ ที่จะทำการ Upload File ไปไว้บนระบบอินเตอร์เน็ต มีขั้นตอนดังนี้ เปิดโปรแกรม Adobe Dreamweaver คลิกที่ HTML คลิกที่ Site เลือก New Site

2. การสร้าวและแก้ไขไซต์ (Site) 5. เลือก Advance

2. การสร้าวและแก้ไขไซต์ (Site) 6. กำหนดชื่อ เลือก (ในที่นี้ให้กำหนดชื่อ Showmywork) และเลือกแหล่ง (ในที่นี้คือ Desktop)

2. การสร้าวและแก้ไขไซต์ (Site) 7. เลือกโฟลเดอร์ที่สร้างไว้ (ในที่นี้คือ mywork) ในช่อง Select 8. คลิก OK 9. คลิก Done

2. การสร้าวและแก้ไขไซต์ (Site) การแก้ไขโซต์ เปิดไซต์ที่ต้องการ แล้วคลิกที่เมนู Site  Manage Site.. คลิกที่ไซต์ที่ต้องการ คลิกที่ Edit แก้ไข  OK  Done

3. การสร้าวและแก้ไฟล์ (File) การสร้างไฟล์ การสร้างไฟล์หน้าต่างๆ ของเว็บสำหรับออกแบบแล้วนำข้อมูลและรูปภาพมาใส่ไว้เพื่อให้หน้าของเว็บข้อมูลที่จะต้องใช้ศึกษาและมีรูปภาพประกอบเพื่อความสวยงามและน่าสนใจผู้เขียนเว็บจะต้องกำหนดจำนวนหน้าและเนื้อหา พร้อมทั้งกำหนดชื่อไฟล์ของแต่ละหน้าไว้ด้วย เช่น ในที่นี้จะกำหนดไว้ 4 หน้า คือ index.html star1.html star2.html และ tour.html มีวิธีปฏิบัติดังนี้ คลิกขวาที่บริเวณชื่อ Site 2. คลิกที่ New File 3. พิมพ์ชื่อไฟล์ที่ต้องการ

3. การสร้าวและแก้ไฟล์ (File) การสร้างไฟล์ 4. ปฏิบัติจามข้อ 1-3 จนครบ ชื่อไฟล์ทั้ง 4 หน้า

3. การสร้าวและแก้ไฟล์ (File) การแก้ไขไฟล์ 1. คลิกเมาส์ข้างขวาบริเวณชื่อไฟล์ที่ต้องการ 2. คลิก Edit Cut = ตัดเพื่อไปวาง Copy = คัดลอก Paste = วาง Delete = ลบ Duplicate = คัดลอก Rename = เปลี่ยนชื่อ

3. การสร้าวและแก้ไฟล์ (File) โครงสร้าง FOLDER SITE FILE FILE

3. การสร้าวและแก้ไฟล์ (File) จากโครงสร้างข้างต้น ถ้าต้องการคัดลอกข้อมูลทั้งหมดไปไว้ในแหล่งเก็บข้อมูลอื่น เช่น ใน Flashdrive สามารถทำการคัดลอกได้ที่โฟลเดอร์ โดยมีขั้นตอนดังนี้ คลิกเมาส์ข้างขวาบริเวณโฟลเดอร์ที่ต้องการ คลิกที่ Sent to คลิกที่ช่อง Flashdrive ที่ต้องการ รอสักครู่ จนทำการคัดลอกเสร็จ ซึ่งข้อมูลที่ทำการคัดลอกสามารถนำไปสร้างต่อที่เครื่องอื่น หรือนำไปเปิดดูได้

การเปิดและปิดไฟล์ การเปิดไฟล์ เมื่ออยู่ในกรอบ Site จะมองเห็นชื่อไฟล์ต่างๆ ที่สร้างไว้ ให้ดับเบิลคลิกชื่อไฟล์ที่ต้องการ เช่น index.html การปิดไฟล์ คลิกที่เมนู File  Close หรือคลิกที่รูปเครื่องมือ Close

การเปิดไซต์ การเปิด Site เมื่อเข้าโปรแกรมแล้ว Site ที่ทำงานล่าสุดจะปรากฏขึ้นอัตโนมัติแต่ถ้าต้องการเปิด Site อื่น ให้คลิกที่ชื่อ Site เพื่อเลือก Site ที่ต้องการ

4. การเตรียมการก่อนลงมือเขียนเว็บ เปิดไฟล์ชื่อ index.html (ปิดไฟล์ชื่อ Unitiled..1)

4. การเตรียมการก่อนลงมือเขียนเว็บ เปิดไฟล์แล้วควรกำหนดค่าต่างๆ โดยคลิกที่เมนู Modify  Page Properties แล้วกำหนดดังนี้

4. การเตรียมการก่อนลงมือเขียนเว็บ กำหนดที่ Appearance กำหนดที่ Left margin = 0, Top margin = 0

4. การเตรียมการก่อนลงมือเขียนเว็บ 3. คลิก OK 4. ทำการบันทึก โดยคลิกที่เมนู File  Save

4. การเตรียมการก่อนลงมือเขียนเว็บ ข้อแตกต่างระหว่างยังไม่ได้กำหนดค่าเป็น 0 กับกำหนดค่าเป็น 0 แล้ว

The End