1.การเรียกใช้โปรแกรม
ขั้นตอนในการเรียกใช้โปรแกรม Adobe Dreamweaver CS4 สามารถทำได้ดังนี้
 คลิกปุ่ม stat
 คลิกเลือก Programs
 เลือก Adobe Design Premium CS4
 เลือกโปรแกรม Adobe Dreamweaver CS4 ( )
 จะปรากฏหน้าจอโปรแกรม Adobe Dreamweaver CS4 (ให้คลิก OK ก่อนหน้า)
คลิกเลือก HTML เพื่อเข้าสู่โปรแกรม

2.ส่วนประกอบของโปรแกรม Adobe Dreamweaver CS4

แถบชื่อเรื่อง (Title Bar) ทำหน้าที่บอกชื่อโปรแกรมและชื่อเว็บเพจที่ใช้อยู่ปัจจุบัน

แถบเมนูคำสั่ง (Menu Bar) ทำหน้าที่แสดงเมนูคำสั่ง มีทั้งภาษาไทยและภาษาอังกฤษ นอกจากนี้
ยังมีปุ่มควบคุมหน้าต่างโปรแกรม (Control Buttons)

เป็นส่วนของการเขียน Code โดยปกติโปรแกรมจะผลิตคำสั่งให้โดยอัตโนมัติ
Common
ซึ่งบรรจุคำสั่ง อาทิ คำสั่งลิงค์เพื่อเชื่อมโยงไปเอกสารอื่น ทำอีเมลลิงค์ หรือลิงค์ภายในเว็บเพจ
สร้างเส้นแนวนอน ตาราง ชั้นเลเยอร์ ตลอดจนแทรกรูปภาพลงเว็บเพจ
Layout
ซึ่งบรรจุคำสั่ง อาทิ คำสั่งตาราง สร้างเลเยอร์แบบมาตรฐาน คือ แสดงตารางและเส้นกรอบ สร้างเล
เยอร์แบบเลย์เอาท์ มี 2 แบบ คือ Draw Layer Table และ Draw Layer Cell วาดตารางแยกเป็นแต่ละ
เซลล์ วาดตารางแบบไม่มีการแบ่งแยกเซลล์
Text
กำหนดรูปแบบตัวอักษร กำหนดลักษณะตัวอักษร กำหนดการวางตำแหน่งของข้อความ กำหนด
ขนาดของหัวข้อเรื่อง ลำดับรายการแบบมีสัญลักษณ์นำหน้า ลำดับรายการแบบไม่มีสัญลักษณ์
นำหน้า แทรกแท็ก <abbr> และ <acronym>
Form
สร้างแบบฟอร์ม สร้างฟิลด์สำหรับใส่ข้อความ สร้างฟิลด์แบบมองไม่เห็น สร้างฟิลด์ข้อความแบบ
หลายบันทัด สร้างตัวเลือกแบบเลือกได้หลายตัว สร้างตัวเลือกแบบเลือกได้ตัวเดียว สร้างกลุ่ม
ตัวเลือกแบบเลือกได้ตัวเดียว สร้างแท็ก <label>

Document Toolbar เป็นแถบเครื่องมือที่แสดงปุ่มคำสั่งต่างๆ ในการจัดการกับ Document Window
Insert Bar คือแถบแสดงแท็บคำสั่งต่างๆ ที่เกี่ยวข้องกับ
การเพิ่มออบเจ็กต์ โดยแบ่งแยกเป็นหมวดหมู่ เช่น แท็บ
Common รวบรวมคำสั่งที่ใช้ง่ายบ่อยไว้ เช่น

Status Bar เป็นหน้าต่างแสดงรายละเอียดเกี่ยวกับหน้าต่างเว็บเพจ
 แสดง Tag ภาษา Hypertext Markup Language (HTML) ที่ใช้กับออบเจ็กต์ที่ถูกเลือก
 แสดงขนาดของหน้าต่างเว็บเพจ คลิกที่ลูกศรเพื่อเลือกกำหนด ขนาดใหม่ได้
 แสดงขนาดของไฟล์เว็บเพจและเวลาที่ใช้ในการเปิดเว็บเพจนี้

Properties Inspector ใช้กำหนดรูปแบบอักษร ขนาด การจัดวาง สีของข้อความหรือขนาดของ
ออบเจ็กต์ ที่พิมพ์บนเว็บเพจ สร้างตัวเชื่อมโยงเว็บเพจหรือไปยังเว็บไซต์อื่น ๆ

Document Window เป็นพื้นที่ทำงาน สามารถตกแต่งและใส่ออบเจ็กต์ต่าง ๆ ลงไปในเว็บเพจ
ซึ่งเมื่อดูเว็บเพจจากเบราว์เซอร์หรือพิมพ์ออกเครื่องพิมพ์จะมีลักษณะเดียวกับการตกแต่งในพื้นที่
ทำงานนี้ ดังคำที่ว่า WYSIWYG (What - You -See - Is - What - You - Get) หมายถึง ออกแบบ
เว็บเพจก็มีผลออกมาอย่างที่ออกแบบนั่นเอง

Panel Group เป็นหน้าต่างของเครื่องมือที่ใช้ในการสร้างเว็บเพจ สามารถซ่อนได้

3.การพิมพ์ข้อความบนเว็บเพจ
การพิมพ์ข้อความบนเว็บเพจในโปรแกรม Adobe Dreamweaver CS4 นี้ ผู้ใช้สามารถพิมพ์ได้
คล้ายกับโปรแกรมประเภทประมวลผลคำอื่น ๆ เพราะมีการจัดการข้อความเป็นบรรทัดไม่ใช่ object (วัตถุ)
ดังนั้นผู้ใช้สามารถใช้ความรู้ในด้านการจัดการเอกสารมาประยุกต์ใช้ได้

4.การดูผลลัพธ์

เมื่อพิมพ์ข้อความบนหน้าเอกสารเว็บเพจเรียบร้อยแล้ว ผู้ใช้สามารถดูผลลัพธ์ในรูปแบบเว็บเพจได้  โดยการกดปุ่ม F12 ที่แป้นพิมพ์ จะปรากฏหน้าต่างเว็บเพจที่สร้างขึ้น โดยจะเปิดในโปรแกรม WebBrowser ที่ติดตั้งในเครื่องคอมพิวเตอร์นั้น ๆ

5.การนำภาพใส่ในเว็บเพ็จ
1. เปิดโปรแกรม Dreamweaver
บรรทัดแรกพิมพ์ข้อความว่า วิธีการเพิ่มรูปภาพ กดปุ่ม enter เพื่อขึ้นบรรทัดใหม่ ในแท็บ
Common เลือก Image
2. จะปรากฏหน้าต่าง Select Image Source
2.1 Look in ให้เลือก Drive ที่เก็บรูปภาพ
2.2 ให้เลือกรูปภาพที่ต้องการ
2.3 คลิกปุ่ม OK
3. มีข้อความเตือนใน Save ก่อน ให้เลือกปุ่ม OK
4. จะปรากฏรูปภาพตามตัวอย่าง

6.การปรับแต่งรายละเอียดของภาพ
วิธีที่ 1 คลิกเมาส์ลากภาพเพื่อลดขนาดภาพตามต้องการ
วิธีที่ 2 กำหนดขนาดใหม่ให้กับภาพ โดยระบุความกว้างและความยาวที่ต้องการจาก Property
Inspector
1. คลิกเลือกรูปภาพ
2. กำหนดความสูงหรือความกว้างของภาพ
3. ช่อง Alt พิมพ์ข้อความที่ต้องการบรรยายภาพ
4. ช่อง Border พิมพ์ตัวเลขเพื่อกำหนดความหนาของกรอบภาพ

7.การจัดเรียงภาพให้ข้อความและรูปภาพ

1. พิมพ์ข้อความใต้รูปภาพ 3 บรรทัด

2. คลิกเลือกภาพที่ต้องการจัดตำแหน่ง

2.1 ย่อขนาดรูปให้เล็กลง

2.2 คลิกเลือก Align และเลือกการจัดตำแหน่งของภาพ โดยรูปแบบการจัดวางของภาพมีดังนี้

- Default จัดเรียงภาพและข้อความตามบราวเซอร์ที่ใช้

- Baseline ขอบล่างของภาพตรงกับแนว Baseline ของข้อความ

- Top ขอบบนของภาพตรงกับแนวจุดบนสุดของข้อความ

- Middle กึ่งกลางของภาพตรงกับแนว Baseline ของข้อความ

- Bottom ขอบล่างของภาพตรงกับแนวล่างสุดของข้อความ

- Text Top ขอบบนของภาพตรงกับแนวบนสุดของข้อความ

- Absolute Middle กึ่งกลางของภาพตรงกับแนวกึ่งกลางของข้องความ

- Absolute Bottom ขอบล่างของภาพตรงกับแนวล่างสุดของข้อความ

- Left ภาพแสดงทางซ้ายโดยมีข้อความอยู่ทางขวา

- Right ภาพแสดงทางขวาโดยมีข้อความอยู่ทางซ้าย

คลิกเลือกแบบ Left2.3

กำหนดระยะห่างจากขอบภาพกับข้อความ ช่อง - V Space กำหนด 20

- H Space กำหนด 20

8.การสร้างตาราง
1. เลือกเมนู Insert > Table
2. จากหน้าต่างที่แสดงขึ้นมาให้กำหนดค่าต่างๆ

3. ใส่ข้อมูลลงในแต่ละเซลล์จากตารางที่ได้

9.การสร้าง Local Site
ก่อนการสร้างเว็บเพจผู้ใช้จะต้องสร้าง Local Site ก่อนทุกครั้ง เพื่อใช้เป็นแหล่งที่เก็บและรวบรวม  เว็บเพจไว้ด้วยกัน และทำให้การเชื่อมโยงระหว่างหน้าเว็บเพจเป็นไปอย่างมีขั้นตอน

ที่มา http://itschool.siam.edu/itservice/dreamweavercs4/index.html