แบบที่ 1

แบบที่ 2

แบบที่ 3

เว็บไซต์ของกลุ่มประกันคุณภาพการอาชีวศึกษา สำนักงานคณะกรรมการการอาชีวศึกษา

เว็บไซต์ www.sanook.com

เว็บไซต์สถานีโทรทัศน์ช่อง 3

การสร้างไซต์
      การกำหนดไซต์ (Site) มีความสำคัญมากในการทำเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver ไม่ว่าจะสร้างเว็บไซต์ใหม่ หรือแก้ไขเว็บไซต์เก่าที่เดยทำมาแล้ว การกำหนดไซด์เป็นขั้นตอนแรกของการทำเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver เป็นการกำหนดให้โปรแกรมทราบที่อยู่ของไฟล์ต่าง ๆ ของเว็บไซต์ที่ได้ทำไร้ทำให้โปรแกรมสามารถดึงมาแก้ไขได้
      เครื่องมือต่าง ๆ ของโปรแกรม Adobe Dreamweaver นั้นจะทำงานโดยอ้างอิงไซต์ที่ได้กำหนดทั้งหมดถ้าไม่ได้กำหนดไซต์จะทำให้เครื่องมือเหล่านั้นไม่สามารถใช้งานได้สิ่งแรกที่ต้องทำความเข้าใจในการทำเว็บไซต์ คือ ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่าง ๆ เช่น HTML หรือไฟล์ VD0 ที่อยู่ในเว็บไซต์จะถูกรวมอยู่ในโฟลเดอร์ (Folder) เดียว ซึ้งจะเรียกโฟลเดอร์นั้นว่า local root folder

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

ภาพที่ 3.1 โฟลเดอร์

ภาพที่ 3.2 เมนู File

ภาพที่ 3.3 หน้าต่าง New Document

ภาพที่ 3.4 Framework

ภาพที่ 3.5 หน้าต่างการทำงาน

ภาพที่ 3.6 เมนู Site

ภาพที่ 3.7 Site Setup for layout

ภาพที่ 3.8 หน้าต่างการเลือก โฟลเดอร์

ภาพที่ 3.9 Site Setup for layout

ภาพที่ 3.10 พาเนล Files

ภาพที่ 3.11 พาเนล Files

ภาพที่ 3.12 โครงร่างเว็บไซต

ภาพที่ 3.13 Table

Rows หมายถึง จำนวนแถว (แกนนอน)
Columns หมายถึง จำนวนคอลัมน์ (แกนตั้ง)
Table Width หมายถึง ความกว้างของตารางทั้งหมดและหน่วยวัดที่ใช้
Border thickness หมายถึง ขนาดเส้นกรอบตาราง (มีหน่วยเป็นพิกเซล)
Cellpadding หมายถึง ระยะห่างระหว่างขอบเซลล์กับเนื้อหาภายในเซลล์
Cellspacing หมายถึง ระยะห่างระหว่างเซลล์แต่ละเซลล์

กลุ่มของ Header เลือกตำแหน่งของหัวเรื่องภายในตารางดังนี้

None หมายถึง ไม่ใช้หัวเรื่องตาราง
Left หมายถึง กำหนดให้มีหัวเรื่องทางด้านซ้าย
Top หมายถึง กำหนดให้มีหัวเรื่องทางด้านบน
Both หมายถึง กำหนดให้มีหัวเรื่องทั้งด้านซ้ายและด้านบน

กลุ่ม Accessibility กำหนดข้อมูลทั่วไปในตารางดังนี้

Caption หมายถึง คำอธิบายกำกับตาราง
Summary หมายถึง ข้อความสรุปของตาราง

 ขั้นตอนในการกำหนดโครงสร้างเว็บไซต์ มีดังนี้

1. เมื่อเข้าสู่โปรแกรม Adobe Dreamweaver แล้ว

ภาพที่ 3.14 หน้าต่างการทำงาน

2. คลิกที่เมนู Insert แล้วเลือก Table เพื่อสร้างตารางหรือโครงสร้างคลุมส่วนต่าง ๆ ทั้งหมด

ภาพที่ 3.15 เมนู Insert

3. กำหนดขนาดตามต้องการ ในที่นี้กำหนด Rows (แถว) เท่ากับ 1 แถว กำหนด Columns (คอลัมน์)เท่ากับ 1 แถว กำหนด Table width (ความกว้างของตาราง) เท่ากับ 1000 pixels (ควรเท่ากับรูปภาพที่ทำแบนเนอร์) เสร็จแล้วคลิกที่ OK ในที่นี้กำหนด Border thickness เท่ากับ 1 pixels เพื่อให้ซัดเจน โดยจะกำหนดให้เป็น 0 ในภายหลัง

ภาพที่ 3.16 แถว (Rows)

ภาพที่ 3.17 Properties

ภาพที่ 3.18 แถว (Rows)

ภาพที่ 3.19 เคอร์เซอร์ตาราง

ภาพที่ 3.20 Properties

ภาพที่ 3.21 ตำแหน่งของเคอร์เซอร์

ภาพที่ 3.22 Properties

ภาพที่ 3.23 ตำแหน่งของเคอร์เซอร์

ภาพที่ 3.24 Table

ภาพที่ 3.25 แถว (Rows)

ภาพที่ 3.26 Table

ภาพที่ 3.27 แถวและคอลัมน์

ภาพที่ 3.28 แถวและคอลัมน์

ภาพที่ 3.29 Properties

ภาพที่ 3.30 Table

ภาพที่ 3.31 แถว ( Rows)

ภาพที่ 3.32 Table

ภาพที่ 3.33 แถว (Rows)

ภาพที่ 3.34 Table

ภาพที่ 3.35 แถวและคอลัมน์

การบันทึก
      เมื่อดำเนินการเสร็จแล้วทั้งหมดหรือบางส่วนให้บันทึก (Save) โดยมีวิธีปฏิบัติดังนี้
1. คลิกที่เมนู File แล้วเลือก Save All

ภาพที่ 3.36 เมนู File

ภาพที่ 3.37 Save Flie

ภาพที่ 3.38 พาเนล File

ภาพที่ 3.39 File index.html