กำหนดโครงร่างเว็บไซต์

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

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

การสร้างเว็บไซต์ จะต้องทำการสร้างโฟลเดอร์เก็บไฟล์เอกสาร และไฟล์ที่เกี่ยวข้องไว้เฉพาะ ซึ่งในโปรแกรม Dreamweaver เรียกว่า การสร้างไซต์ (Site) มีวิธีการดังนี้

1. คลิกที่เมนู Site

2. เลือก New Site...

จากนั้นจะปรากฏหน้าต่าง Site Setup for ... (ตามชื่อไซต์)

3. คลิกที่แท็บ Site

4. ช่อง Site Name : ตั้งชื่อเว็บไซต์ที่ต้องการ

5. ช่อง Local Site Folder : กำหนดโฟลเดอร์ที่จัดเก็บเว็บไซต์ จากนั้นคลิกที่ปุ่ม Save

6. คลิกที่แท็บ Advanced Settings

7. เลือก Local Info

8. ช่อง Default Images folder : กำหนดโฟลเดอร์ในการจัดเก็บรูปภาพ ต้องอยู่ในโฟลเดอร์ย่อยของโฟลเดอร์ที่จัดเก็บเว็บไซต์ (ตามข้อ 5)

9. คลิกที่ปุ่ม Save

ถ้าต้องการแก้ไขไซต์ที่สร้างไว้ มีวิธีการดังนี้

1. คลิกที่เมนู Site

2. เลือก Manage Site...

3. ดับเบิลคลิกที่ชื่อเว็บไซต์

4. คลิกที่ปุ่ม 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)

Page Font : กำหนดรูปแบบของตัวอักษร

Size : กำหนดขนาดของตัวอักษร

Text Color : กำหนดสีของตัวอักษร

Background Color :กำหนดสีพื้นหลังของเว็บเพจ

Background Image : กำหนดภาพให้เป็นพื้นหลังของเว็บเพจ

Repeat : กำหนดการแสดงซ้ำของภาพพื้นหลัง

Left Margin : กำหนดระยะขอบด้านซ้ายของเว็บเพจ

Right Margin : กำหนดระยะขอบด้านขวาของเว็บเพจ

Top Margin : กำหนดระยะขอบด้านบนของเว็บเพจ

Bottom Margin : กำหนดระยะขอบด้านล่างของเว็บเพจ

Appearance (HTML) กำหนดคุณสมบัติทั่ว ๆ ไปของหน้าเว็บเพจ (การกำหนดหน้าตาเว็บเพจด้วย HTML) จะเหมือนกับ Appearance (CSS)

Background Image : กำหนดภาพให้เป็นพื้นหลังของเว็บเพจ

Background : กำหนดสีพื้นหลังของเว็บเพจ

Text : กำหนดสีของตัวอักษร

Visited links : กำหนดสีของลิงค์ เมื่อถูกเมาส์คลิกไปแล้ว

Link : กำหนดสีของข้อความที่เป็นจุดลิงค์

Active links : กำหนดสีของลิงค์ เมื่อถูกเมาส์คลิก

Left Margin : กำหนดระยะขอบด้านซ้ายของเว็บเพจ

Right Margin : กำหนดระยะขอบด้านขวาของเว็บเพจ

Top Margin : กำหนดระยะขอบด้านบนของเว็บเพจ

Bottom Margin : กำหนดระยะขอบด้านล่างของเว็บเพจ

Links (CSS) กำหนดคุณสมบัติพื้นฐานของการสร้างจุดเชื่อมโยงหรือลิงค์

Link Font : กำหนดรูปแบบของข้อความที่ใช้เป็นลิงค์

Size : กำหนดขนาดของข้อความที่ใช้เป็นลิงค์

Link Color : กำหนดสีของข้อความที่ใช้เป็นลิงค์

Rollover links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์ชี้

Visited links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์คลิกไปแล้ว

Active links : กำหนดสีของข้อความลิงค์ เมื่อถูกเมาส์คลิก

Underline Style : กำหนดรูปแบบการขีดเส้นใต้ของข้อความลิงค์

Headings (CSS) กำหนดคุณสมบัติข้อความที่ใช้เป็นหัวเรื่องในหน้าเว็บเพจ

Heading font : กำหนดรูปแบบตัวอักษรของหัวข้อหรือหัวเรื่อง

Heading 1-6 : กำหนดขนาดและสีตัวอักษรของหัวข้อหรือหัวเรื่อง

Title/Encoding กำหนดหัวเรื่องและรูปแบบภาษาของเว็บเพจ

Title : กำหนดชื่อหัวเรื่องของเว็บเพจ

Document Type(DTD) : กำหนดประเภทของหน้าเว็บเพจ

Encoding : กำหนดภาษาที่จะใช้ในเว็บเพจ (นิยมกำหนดเป็น Unicode (UTF-8) ในการแสดง

ข้อความบนหน้าเว็บเพจเป็นภาษาไทย)

Tracing Image กำหนดรูปภาพให้แสดงอยู่ด้านหลังของเนื้อหา แต่จะไม่ปรากฏรูปภาพเมื่อแสดงผลหน้าเบราว์เซอร์

Tracing image : กำหนดไฟล์ภาพที่จะใช้เป็นแบบ

Transparency : ปรับแต่งความโปร่งใสของภาพ

การสร้างหน้าเว็บเพจใหม่

การสร้างหน้าเว็บเพจใหม่ (เว็บเพจเปล่า) มีวิธีการดังนี้

1. คลิกที่เมนู File

2. เลือก New...

3. คลิกที่แท็บ Blank Page

4. ช่อง Page Type : ประเภทของเว็บเพจให้เลือก HTML

5. ช่อง Layout : รูปแบบโครงสร้างให้เลือก <none> จากนั้นคลิกที่ปุ่ม Create

6. จะปรากฏหน้าเว็บเพจเปล่า ดังรูป

การบันทึกไฟล์เว็บเพจ

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

1. คลิกที่เมนู File

2. เลือก Save... หรือ Save As...

3. ช่อง Save in ให้เลือกตำแหน่งเก็บไฟล์เว็บเพจ

4. ช่อง File name ให้ตั้งชื่อไฟล์เว็บเพจที่ต้องการบันทึก

5. คลิกที่ปุ่ม Save เพื่อบันทึกไฟล์

การเปิดเว็บเพจเดิม

การเปิดเว็บเพจเดิมที่เคยสร้าง เพื่อปรับปรุงหรือแก้ไขเนื้อหา มีวิธีการดังนี้

1. คลิกที่เมนู File

2. เลือก Open...

3. เข้าโฟลเดอร์แล้วเลือกไฟล์เว็บเพจที่ต้องการ

4. คลิกที่ปุ่ม Open

การทดสอบเว็บเพจผ่านเบราว์เซอร์

เมื่อสร้างเว็บเพจได้ตามต้องการแล้วให้เปิดดูหน้าเว็บ เพื่อทดสอบเว็บเพจผ่านเบราว์เซอร์ มีวิธีการดังนี้

1. คลิกที่ปุ่ม Preview/Debug in browser

2. เลือกโปรแกรมสำหรับการแสดงผลหน้าเว็บ เช่น Firefox, IExplore, Chrome

3. หน้าเว็บเพจจะแสดงขึ้นมาด้วยโปรแกรม Web Browser