Dreamweaver_manual-th

ส่วนประกอบของ welcome screen

หลังจากเปิดโปรแกรมขึ้นมาจะปรากฏหน้าต่าง welcome screen ซึ่งแบ่งออกเป็น 3 กลุ่มหลัก ดังภาพด้านล่าง ดังนี้

ส่วนประกอบหน้าจอโปรแกรม Adobe Dreamweaver CS6

1. แถบเมนูหลัก (Menu bar) เป็นแถบรวมรวมคำสั่งทั้งหมดของโปรแกรม โดยแบ่งคำสั่งทั้งหมดออกเป็นหมวดหมู่ตาม ลักษณะของการใช้งาน

2. แถบเครื่องมือ (Insert Bar) เป็นแหล่งรวมเครื่องมือซึ่งใช้ในการวางออบเจ็กต์ชนิดต่าง ๆ ลงบนหน้าเว็บเพจ เช่น ข้อความ รูปภาพ ลิงค์ รูปเคลื่อนไหว เป็นต้น โดยจะแบ่งเป็นกลุ่มคำสั่งเพื่อให้ใช้งานได้สะดวก

ซึ่งจะประกอบด้วยกลุ่มคำสั่งดังนี้

- Common ใช้วางออบเจ็กต์ที่ต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟล์มัลติมีเดีย เป็นต้น

- Layout ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP element (หรือเลเยอร์)

- Forms ใช้วางออบเจ็กต์ที่ใช้ในการสร้างแบบฟร์อมรับข้อมูล เช่น ช่องรับข้อความ ปุ่มตัวเลือกต่าง ๆ เป็นต้น

- Data ใช้วางคำสั่งที่ใช้การจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ

- Sary ใช้วางออบเจ็กต์ที่ใช้เทคโนโลยีของ Ajax

- jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ jQuery

- InContext Edting ใช้สร้างออบเจ็กต์ที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้

- Text ใช้สำหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษรและข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัวหน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (Dollar) © (Copyright) เป็นต้น

- Favorites เป็นกลุ่มที่สามารถเพิ่มปุ่มคำสั่งที่ใช้บ่อยจากกลุ่มอื่น ๆ เข้ามาเก็บไว้ เพื่อความสะดวกในการใช้งาน

3. พื้นที่สร้างงาน (Document area) เป็นส่วนที่ใช้สร้างหน้าเว็บเพจ ใส่เนื้อหา และองค์ประกอบต่าง ๆ ของเว็บเพจ ซึ่ง สามารถเลือกเปิดพื้นที่สร้างงานได้ด้วยกัน 4 มุมมอง

- มุมมองออกแบบ (Design View) ใช้แก้ไขและจัดวางเนื้อหาต่าง ๆ ลงบนเว็บเพจ

- มุมมองโค้ด (Code View) ใช้สำหรับเปิดดูคำสั่งต่าง ๆ เช่น HTML PHP ASP และ JSP และสามารถแก้ไขคำสั่ง

ต่างๆ ได้ตามต้องการ

- มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) แสดงทั้งแบบมุมมองออกแบบ และมุมมองโค้ด

พร้อมกัน สามารถปรับขนาดพื้นที่ของแต่ละส่วนได้โดยคลิกลากที่เส้นแบ่งระหว่างทั้ง 2 ส่วนนี้

- มุมมองแสดงเว็บเพจเหมือนดูบนเบราเซอร์ (Live View) แสดงหน้าเว็บเพจเหมือนดูบนเบราเซอร์ทั้งในส่วนของ JavaScript และ Plugin

4. หน้าต่าง properties inspector เป็นหน้าต่างเล็ก ๆ ที่อยู่ด้านล่างสุดของหน้าจอโปรแกรม เป็นส่วนที่ใช้งานมากที่สุด เนื่องจากเป็นส่วนที่ใช้กำหนดคุณสมบัติสำคัญ ๆ ของออบเจ็กต์ที่วางในหน้าเว็บเพจ เช่น ตำแหน่ง ขนาด และสี

5. กลุ่มหน้าต่างพาเนล (Panels) เป็นหน้าต่างเล็ก ๆ ที่รวบรวมเครื่องมือไว้เป็นกลุ่มตามหน้าที่ที่เกี่ยวข้อง ทำให้ใช้งานได้ สะดวกขึ้น

6. แถบสถานะ (Status Bar) เป็นแถบที่อยู่ทางด้านล่างของหน้าต่าง ๆ Document ประกอบด้วย 2 ส่วน คือ ด้านซ้ายเป็น Tag Selector ส่วนด้านขวาเป็นเครื่องมือต่าง ๆ

หลักสำคัญก่อนการสร้างเว็บเพจ

1. เลือกรูปแบบพื้นที่ทำงาน (Workspace) ให้เหมาะสม

2. จัดการกับหน้าต่างไฟล์

3. เตรียมโฟลเดอร์สำหรับสร้างเว็บไซต์

4. สร้าง Define Site เพื่อจัดระบบให้ข้อมูล

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

1.คลิกเลือกคำสั่ง File - > Save (หรือกดคีย์ลัด Ctrl+S)

- ถ้าต้องการบันทึกเว็บเพจเดิมให้เป็นชื่อใหม่ เลือกคำสั่ง Save As

- ถ้าต้องการบันทึกเว็บเพจทั้งหมดที่เปิดใช้งานอยู่ เลือกคำสั่ง Save All

2. เปิดเข้าไปยังโฟลเดอร์หลักที่จัดเก็บเว็บไซต์และโฟลเดอร์ย่อยที่จะใช้เก็บไฟล์

3. ตั้งชื่อไฟล์ที่ต้องการ (กรณีหน้าแรกของเว็บไซต์ ต้องตั้งเป็น Index.html เท่านั้น นอกจากนั้นตั้งชื่อตามชนิด

ของไฟล์งาน)

4. เลือกประเภทไฟล์ที่จะบันทึกเป็น html

5. คลิกปุ่ม Save