lesson2_KhruDaony

บทท่ี 2
Macromedia Dreamweaver เบอ้ื งต้น

การออกแบบเว็บไซต์ให้มีความสวยงามและมีจุดเด่นน่าสนใจนั้น เป็นส่ิงที่ต้องคำนึงถึงเป็นอย่าง
มากเพราะถ้าเว็บไซต์มีข้อมูลที่ถูกต้อง ครบถ้วนทันสมัย และมีการออกแบบไว้อย่างสวยงามก็จะทำให้ผู้ที่
เคยเข้ามาเยี่ยมชมเว็บไซต์อยากกลับเข้ามาชมอีก การออกแบบเว็บไซต์น้ันง่ายมาก แต่จะออกแบบให้
สวยงามน้ันเป็นเร่ืองยาก เพราะการออกแบบเว็บไซต์ถือเป็นงานศิลปะอย่างหนึ่งท่ีต้องใช้ความสามารถ
เฉพาะตัวทีเดียวในการออกแบบ ทุกคนอาจออกแบบเว็บไซต์ได้ แต่จะสวยงามและน่าสนใจหรือไม่น้ัน
ข้ึนอยู่กับความสามารถด้านศิลปะเป็นสำคัญ เพราะจะต้องเลือกองค์ประกอบของข้อความ สี รูป ภาพ
ตารางต่าง ๆ ให้เข้ากัน เพ่ือให้มองแล้วกลมกลืนกัน ดังนั้นงานออกแบบเว็บไซต์จึงถือเป็นงานศิลปะที่มี
ความละเอียดออ่ นมากและท้าทายความสามารถเป็นอย่างยิ่ง

การเรยี กใชโ้ ปรแกรม Macromedia Dreamweaver

การเรียกใช้โปรแกรม Macromedia Dreamweaver สามารถทำไดด้ งั นี้คอื (ดูภาพท่ี 2.1)

1. คลิกปมุ่ สตาร์ท (Start) บนทาสก์บาร์ (Task Bar) ของโปรแกรมวินโดวส์

(Windows) เพื่อแสดงเมนูเลือก

2. คลกิ ทตี่ วั เลือก “All Programs”
3. จะปรากฏเมนยู ่อยข้นึ มา ให้คลิกท่ีตัวเลอื ก “Macromedia”
4. จะปรากฏเมนยู ่อยขึ้นมา ใหค้ ลิกทตี่ วั เลือก “Macromedia Dreamweaver ”





ภาพที่ 2.1 การเปดิ ใชโ้ ปรแกรม Macromedia Dreamweaver

2

5. จะปรากฏไดอะลอ็ กบ็อกซช์ ื่อ “Workspace Setup” ตามภาพท่ี 2.2 ใหค้ ลิกทตี่ วั เลอื ก
“Designer”

6. คลกิ ปุ่ม OK เพื่อเข้าสโู่ ปรแกรม Macromedia Dreamweaver

คลิกเลือก



ภาพที่ 2.2 ไดอะล็อกบ็อกซ์ Workspace Setup

7. จะปรากฏหนา้ จอเรมิ่ ต้น (Start Page) ดังภาพที่ 2.3 ซ่ึงเป็นเคร่อื งมือสำหรับเริ่มตน้ การ
ทำงาน โดยตัวเลอื กจะแบง่ เป็น 3 กลุ่ม คือ
- กล่มุ “Open a Recent ltem” เพื่อเลือกเปิดเว็บเพจท่เี คยใชง้ านมาแล้วขน้ึ มาก
แก้ไข
- กลุ่ม “Create New” เพ่ือสร้างเวบ็ เพจใหม่ตามประเภทของโปรแกรมประยุกตท์ ี่
ตอ้ งการ
- กลุ่ม “Create from Samples” เพอ่ื สร้างเว็บเพจจากตวั อย่างทโี่ ปรแกรม
Macromedia Dreamweaver เตรยี มไวใ้ ห้

สำหรบั การสรา้ งเวบ็ เพจตามบทเรยี นน้ีให้เลอื กจากกลุ่ม “Create New” จากน้นั คลกิ ท่ีตวั เลอื ก
“HTML” เพอื่ สร้างเวบ็ เพจเปล่าแบบพื้นฐาน ดังภาพที่ 2.4

3 สรา้ งเว็บเพจใหมจ่ ากตวั อยา่ ง
สร้างเวบ็ เพจใหม่

เปดิ เว็บเพจท่ีเคยใชง้ านมาแล้ว
ศึกษาบทเรยี นช่วยสอน

ภาพท่ี 2.3 สว่ นประกอบของหนา้ จอเร่มิ ต้น (Start Page)

สว่ นประกอบหนา้ จอของโปรแกรมMacromedia Dreamweaver

จากภาพที่ 2.4 แสดงให้เก็บส่วนประกอบหน้าจอของโปรแกรม Macromedia Dreamweaver
ดังน้คี ือ

แถบช่ือเรอื่ ง (Title Bar)เป็นส่วนที่แสดงชือ่ แฟ้มข้อมลู ทีก่ ำลงั ใชง้ านอยู่

แถบคำสง่ั (Menu Bar) เปน็ สว่ นท่ีเกบ็ คำสั่งต่างๆ ท่ีใช้งานในโปรแกรม Macromedia

Dreamweaver

แถบเครอ่ื งมือเอกสาร เปน็ ส่วนที่ใชใ้ นการจัดการกับเว็บเพจ ณ ขณะน้ัน

(Document Toolbar) เชน่ การเปล่ยี นมมุ มองในการดูหน้าเว็บเพจ

แถบเคร่อื งมือแทรก เป็นกลุ่มเคร่ืองมือท่ีใช้สรา้ งองค์ประกอบตา่ งๆใน

(Insert Bar) หนา้ เว็บเพจ ประกอบด้วยชดุ เครือ่ งมือ 8 ชุดด้วยกนั

4

แถบช่อื เร่ือง (Title Bar) แถบคำสั่ง (Menu Bar) แถบเครอื่ งมือแทรก กลมุ่ พาเนล
(Insert Bar) (Panels Group)

แถบสถานะ พน้ื ทอ่ี อกแบบ
(Status Bar) (Document Window)

พาเนลกาหนดคณุ สมบตั ิ
(Properties Inspector Panel)

ภาพท่ี 2.4 ส่วนประกอบของโปรแกรม Macromedia Dreamweaver

พน้ื ท่ีออกแบบ (Document Window) เปน็ ส่วนที่ใช้สำหรับใส่เน้อื หาและจัด

องคป์ ระกอบของเวบ็ เพจ ประกอบดว้ ยมมุ มอง

คือ มมุ มองออกแบบ (Design) มุมมองรหสั คำสั่ง

(Code) และมุมมองรหสั คำส่ังและออกแบบ

(Code and Design)

แถบสถานะ (Status Bar) เปน็ ส่วนทแ่ี สดงสถานการณใ์ ช้งานโปรแกรม

ณ ขณะนั้น

พาเนลกำหนดคุณสมบัติ เปน็ ส่วนของคำสงั่ ท่ใี ชก้ ำหนดคณุ สมบัติของ

(Properties Inspector Panel) องค์ประกอบตา่ งๆ ทีต่ ้องการเปล่ยี นแปลงหรอื

ปรับแตง่ รูปแบบ

กลมุ่ พาเนล (Panel Group) เป็นกล่มุ ของแผงควบคุมที่ใช้แทนคำส่ังและตดิ

ตอ่ กบั ฐานข้อมูล

5

1. มุมมองของหน้าตา่ งเว็บเพจ (Document Window)
ในการออกแบบหน้าเว็บเพจด้วยโปรแกรม Macromedia Dreamweaver ผู้ออกแบบ

สามารถเลอื กรปู แบบหรอื มมุ มองของหน้าตา่ งเว็บเพจได้ 3 รปู แบบด้วยกนั คอื (ดภู าพที่ 2.5)

แถบเลอื กมมุ มองของหน้าตา่ งเวบ็ เพจ (Document Window)

ภาพที่ 2.5 มมุ มองของหนา้ ต่างเว็บเพจ
1.1 Code มมุ มองแสดงรหสั คำสั่ง (Show Code View) ใช้แสดงหน้าจอออกแบบเป็น
รหัสคำสั่งภาษาเอชทีเอม็ แอล(HTML)
1.2 Split มมุ มองแสดงรหสั คำสั่งและหน้าจอออกแบบ (Show Code and Design
View) ใชแ้ สดงหนา้ จอออกแบบเปน็ 2 สว่ น คอื หนา้ ต่างรหัสคำสัง่ ภาษาเอชทีเอม็
แอลและหนา้ ต่างออกแบบจริง
1.3 Design มมุ มองหนา้ จอออกแบบ (Show Design View) ใชแ้ สดงหน้าจอออกแบบ
จริงเพือ่ แทรกองคป์ ระกอบต่างๆ

6

2. แถบเคร่ืองมือ (Toolbar)

แถบเคร่ืองมือหรือทูลบาร์ของโปรแกรม Macromedia Dreamweaver ประกอบด้วย

ทูลบาร์ 8 ชุด แบ่งเป็น 4 กลุ่มด้วยกัน คือ กลุ่มเคร่ืองมือแทรก (Insert) กลุ่มเครื่องมือแปลงรูปแบบ
(Style Rendering) กลุ่มเคร่ืองมือเอกสาร (Document) และกลุ่มเคร่ืองมือมาตรฐาน (Standard) ซึ่ง
สามารถเรยี กใช้งานไดด้ ว้ ยคำสัง่ View  Toolbars (ดูภาพท่ี 2.6)

เครือ่ งมอื แทรก (Insert) เครือ่ งมอื เอกสาร
(Document)

เคร่อื งมอื แปลงรปู แบบ (Style Rendering)

เครอื่ งมือมาตรฐาน
(Standard)

ภาพท่ี 2.6 แถบเคร่อื งมือของโปรแกรม Macromedia Dreamweaver
3. แถบเครอ่ื งมือแทรก (Insert Bar)
แถบเครื่องมือแทรกหรืออินเสิร์ทบาร์ เป็นแถบเครื่องมือท่ีประกอบด้วยกลุ่มเคร่ืองมือที่ใช้ใน

การออกแบบหน้าเวบ็ เพจ ประกอบด้วยแถบเครื่องมอื ยอ่ ยๆ จำนวน 8 ชดุ ดังน้ีคือ
3.1 คอมมอน (Common) ใชแ้ ทรกองคป์ ระกอบทใ่ี ช้งานบ่อยในการสรา้ งเว็บเพจ เช่น
ขอ้ ความ รปู ภาพ ตาราง เปน็ ต้น

3.2 เลย์เอาท์ (Layout) ใช้จดั โครงสร้างของตารางเลยเ์ อาท์ เลเยอร์ และเฟรม

3.3 ฟอรม์ (Forms) ใช้แทรกรูปแบบฟอร์มรบั ข้อมูล และโต้ตอบกับผเู้ ย่ียมชมเว็บไซต์ เชน่
แบบสอบถาม หรือใบสมัคร เป็นตน้

.

7
3.4 เทก็ ซ์ (Text) ใช้สำหรบั แทรกและจัดรูปแบบข้อความบนหนา้ เพจ

3.5 เอชทีเอ็มแอล (HTML) ใช้สำหรบั แทรกองค์ประกอบบางประเภทของภาษาเอชทีเอ็มแอล
เชน่ เส้นคั่น คำสง่ั ควบคุมเว็บเพจ รวมทั้งคำสงั่ ภาษาสคริปตเ์ ปน็ ต้น

3.6 แอพพลิเคชั่น (Application)ใช้สำหรับแทรกคำสั่งในการจดั การฐานข้อมลู และการดึง
ขอ้ มูลจาก ฐานขอ้ มลู มาแสดงบนหน้าเวบ็ เพจ

3.7 แฟลชอลิ ิเมนท์ (Flash Elements) ใชแ้ ทรกกราฟิกประเภทไฟลจ์ ากโปรแกรมแฟลช
(Flash) ท่ีสามารถปรับแต่คุณสมบตั แิ ละการทำงานไดใ้ นโปรแกรม Macromedia
Dreamweaver โดยตรง

3.8 แฟเวอไรท์ (Favorites) เปน็ แถบเครอื่ งมือที่สามารถเพ่ิมปมุ่ คำส่ังจากหมวดอน่ื เข้ามา
เกบ็ ไวไ้ ด้ในสว่ นน้ี เพอื่ เพิม่ ความสะดวกในการใชง้ าน โดยการคลิกเมาส์ปมุ่ ขวาบน
เคร่ืองมอื ที่ต้องการเพิ่ม แลว้ คลิกคำสง่ั “Customize Favorites”

4. การเปลี่ยนมมุ มองของแถบเครอื่ งมือแทรก

แถบเครื่องมือแทรกของโปรแกรม Macromedia Dreamweaver ได้ถูกออกแบบมาให้ผู้ใช้

สามารถเลือกเปล่ยี นการแสดงผลได้ 2 แบบ คือแบบเมนู และแบบแท็บ โดยวิธีการปรับเปลี่ยนสามารถทำ

ได้ดงั น้คี อื

4.1 การแสดงผลแบบแทบ็ ทำได้ดังภาพท่ี 2.7 ดังนี้คือ

4.1.1 คลกิ ปมุ่ คอมมอน ทางดา้ นขวาของแถบเคร่ืองมือแทรก

4.1.2 คลกิ คำส่ัง “Show as Tabs”

8

 แสดงผลแบบแท๊บ

ภาพที่ 2.7 แสดงผลแถบเครอื่ งมือแบบแท็บ 
4.2 การแสดงผลแบบเมนู ทำไดด้ ังภาพที่ 2.8 ดงั นี้คือ
4.2.1 คลกิ ปุ่ม ทางด้านขวาของแถบเครื่องมือแทรก
4.1.2 คลกิ คำส่งั “Show as Menu”


แสดงผลแบบเมนู

ภาพท่ี 2.8 แสดงผลแถบเคร่อื งมอื แบบเมนู

9

5. แถบสถานะ (Status Bar)
แถบสถานะ เป็นส่วนท่ีแสดงสถานการณ์ทำงานของหน้าเว็บเพจท่ีกำลังออกแบบอยู่ ณ

ขณะนนั้ ประกอบด้วย 2 ส่วน ดังนค้ี ือ (ดูภาพท่ี 2.9)
5.1 แท็กเลือก (Tag Selector)อยู่ทางด้านซ้ายของแถบสถานะ ใช้สำหรับตรวจสอบ

ความสัมพันธ์ระหวา่ งแท็ก (Tag) และใช้เลอื กองค์ประกอบตา่ งๆ เพื่อกำหนดคุณสมบตั ิ
5.2 แท็กสถานะ (Tag Status) อยู่ทางด้านขวาของแถบสถานะ ใช้สำหรับย่อ-ขยายมุมมอง

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

แทก็ เลอื ก (Tag Selector) แทก็ สถานะ (Tag Status)

ภาพท่ี 2.9 แถบสถานะ (Status Bar)

6. พาเนลกำหนดคุณสมบัติ (Properties Inspector Panel)
พาเนลกำหนดคุณสมบัติ เป็นพาเนลท่ีถูกใช้งานมากที่สุด เพ่ือกำหนดคุณสมบัติของ

องค์ประกอบที่กำลังถูกเลือกบนหน้าเว็บเพจที่ออกแบบ เชน่ การกำหนดรูปแบบ สี ขนาด เป็นต้น (ดภู าพ
ที่ 2.10)

ภาพที่ 2.10 พาเนลกำหนดคุณสมบัติ (Properties Inspector Panel)

10
7. ไม้บรรทัด (Ruler)

ไม้บรรทัดใช้สำหรับกำหนดตำแหน่งหรือขนาดขององค์ประกอบต่างๆ บนหน้าเว็บเพจโดยจะ
ปรากฏอยู่ด้านบนและด้านซ้ายของพ้ืนที่ออกแบบ(Document Window) ดังภาพที่ 2.11 การซ่อนและ
แสดงไมบ้ รรทัดสามารถทำได้โดยใช้คำสั่ง View  Rulers  Show

ภาพท่ี 2.11 การกำหนดรูปแบบไมบ้ รรทัด (Ruler)
8. เสน้ กริด (Grid)
เส้นกริด เป็นเครื่องมือสำหรับกำหนดตำแหน่งและขนาดขององค์ประกอบบนหน้าเว็บเพจมี

ลักษณะเป็นช่องตาราง (ดูภาพท่ี 2.12) เพ่ือช่วยงานออกแบบในการจัดวางองค์ประกอบให้ง่ายและตรง
ตำแหน่งท่ีตอ้ งการ โดยใช้คำส่ัง View  Grid  Show  Grid

ภาพที่ 2.12 การกำหนดให้ซ่อน/แสดงเส้นกรดิ (Grid)

11

9. เสน้ ไกด์ (Guide)
เส้นไกด์ เป็นเครื่องมือที่ช่วยกำหนดตำแหน่งและขนาดขององค์ประกอบต่างๆ บนเว็บเพจ

(ดูภาพท่ี 2.13) เพ่ือชว่ ยงานออกแบบในการจัดวางองคป์ ระกอบได้อย่างเที่ยงตรง

ภาพท่ี 2.13 การสรา้ งเสน้ ไกด์ (Guide)
การใช้งานเสน้ ไกด์บนพน้ื ท่ีออกแบบ สามารถเลือกใชง้ านได้ดงั นี้คือ
9.1 การซอ่ นและแสดงเส้นไกด์ โดยใชค้ ำสั่ง View  Guides  Show Guides
9.2 การย้ายเสน้ ไกด์ คลิกลากเสน้ ไกด์ไปยงั ตำแหน่งใหม่ทต่ี อ้ งการ
9.3 การลบไกด์ คลกิ ลากเสน้ ไกด์กลบั ไปปล่อยทไ่ี ม้บรรทัด
9.4 การลบเส้นไกด์ท้งั หมด โดยใช้คำสัง่ View  Guides Clear Guides
9.5 การลบเสน้ ไกด์ไม่ให้ถูกย้ายหรอื ลบ โดยใชค้ ำส่ัง View  Guides  Lock Guide

การซ่อนและแสดงเคร่อื งมอื ออกแบบ

การออกแบบเว็บเพจ บางคร้ังต้องการใช้เคร่ืองมือเพิ่มเติมเพ่ือใช้ในการออกแบบแต่บางคร้ังก็
ต้องการซ่อนเคร่ืองมือต่างๆ ไว้ชั่วขณะเพื่อดูหน้าเว็บเพจท่ีออกแบบไว้ให้ชัดเจน การซ่อนและแสดง
เคร่ืองมือออกแบบในโปรแกรม Macromedia Dreamweaver สามารถทำได้หลายวิธีด้วยกัน ดังน้ี คือ
(ดูภาพที่ 2.14)

12

คลิกคำสั่ง Windows แล้วคลกิ เลอื กคำสง่ั ที่ต้องการ

คลกิ เพ่อื ซ่อน/แสดง แถบพาเนล

ภาพที่ 2.14 การซ่อนและแสดงเครื่องมอื ออกแบบ
วิธีที่ 1 คลกิ ที่คำสัง่ “Windows” แล้วคลิกคำสั่งท่ีต้องการใชง้ าน
วธิ ที ่ี 2 คลกิ ทป่ี ่มุ  หน้าแถบพาเนล
วิธที ่ี 3 กดแป้นพิมพ์ [F4] เพ่ือซอ่ นหรือแสดงเครือ่ งมือทัง้ หมด

คำส่งั ในการใชง้ านโปรแกรม Macromedia Dreamweaver เบอื้ งต้น

1. การสรา้ งเว็บไซต์ใหม่
การเร่ิมต้นสร้างเว็บไซต์ใหม่ในโปรแกรม Macromedia Dreamweaver จะต้องเร่ิมต้นจาก

การต้ังช่ือเว็บไซต์และกำหนดตำแหน่ง เช่น โฟลเดอร์ และไดร์ฟท่ีจะใช้เก็บไฟล์ต่างๆ ของเว็บไซต์ที่
ต้องการจะออกแบบ ซ่ึงทำได้ตามขัน้ ตอนดังนค้ี ือ (ดภู าพท่ี 2.15-2.19)

1.1 คลิกคำสง่ั Site  New Site….

13



ภาพที่ 2.15 คลกิ คำส่ัง Site  New Site
1.2 จะปรากฏไดอะล็อกบอ็ กซช์ ่ือ “Site Definition” ขน้ึ มาเพื่อให้กำหนดโครงสร้างของ
เวบ็ ไซต์ ใหพ้ ิมพช์ ่ือเวบ็ ไซต์ท่ีต้องการในกรอบด้านล่างของคำถาม “What would you
like to name your site?” จากนั้นคลิกปุ่ม Next เพอ่ื ดำเนนิ การข้ันต่อไป
1.3 คลิกตัวเลอื ก No, l do not want to use a server technology. จากนัน้ คลิกปมุ่
Next




ภาพท่ี 2.16 การกำหนดชื่อเว็บไซต์ ภาพที่ 2.17 กำหนดการใชง้ านผา่ นเซิร์ฟเวอร์

14

1.4 ท่รี ายการคำถาม “Where on your computer do you want to store your
files?” ให้ระบชุ อื่ ไดร์ฟและโฟลเดอรท์ ่จี ะใชเ้ ก็บข้อมูลของเวบ็ ไซต์ที่จะทำการออกแบบ
ในกรอบด้านลา่ ง จากนนั้ คลิกป่มุ Next เพื่อดำเนนิ การข้นั ต่อไป

1.5 ทร่ี ายการคำถาม “How do you connect to your remote server?” ใหค้ ลิก
ตัวเลอื ก “None”จากนัน้ ใหค้ ลิกทป่ี ุ่ม Next เพ่ือดำเนนิ การข้ันต่อไป

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

1.7

 


ภาพท่ี 2.18 การกำหนดโครงสร้างไฟล์ของเว็บไซตใ์ หม่

1.7 ทกี่ ลุม่ พาเนล (Group Panel) จะปรากฏชื่อของเวบ็ ไซต์พร้อมทง้ั ตำแหน่งที่เก็บเวบ็ ไซต์
แสดงไวใ้ นพาเนลไฟล์ (Files Panel)


ภาพที่ 2.19 แสดงตำแหน่งที่เก็บเวบ็ ไซต์ที่กล่มุ พาเนล

15

2. การสรา้ งเวบ็ เพจใหม่
การสร้างเว็บเพจใหม่ สามารถทำได้ตามภาพที่ 2.20 ดงั นี้ คอื







ภาพที่ 2.20 การสรา้ งเวบ็ เพจใหม่

2.1 คลกิ คำสง่ั File  New….
2.2 จะปรากฏไดอะล็อกบ็อกซช์ อื่ “New Document” ขึ้นมาเพอ่ื ให้เลือกประเภทของไฟล์

เวบ็ เพจใหมท่ ตี่ ้องการ ในท่นี ีใ้ หค้ ลกิ ท่ตี ัวเลือก “Basic page” ในรายการของ
“Category”
2.3 ในรายการ “Basic page” ให้คลิกเลอื ก “HTML”
2.4 คลิกป่มุ Create

3. การกำหนดคณุ สมบัตขิ องเว็บเพจ
ก่อนการออกแบบเว็บเพจทุกครั้งผู้ออกแบบควรเร่ิมต้นด้วยการกำหนดคุณสมบัติพ้ืนฐานของ

หน้าเวบ็ เพจ เชน่ ช่อื เวบ็ เพจ (Title)สพี ้ืน (Background color) และสขี องขอ้ ความ (Text color) เป็นต้น
โดยสามารถกำหนดได้ด้วยคำส่ัง Modify Properties โดยมีรายละเอยี ดของคุณสมบัติตา่ งๆ ดังนคี้ ือ

3.1 การกำหนดลักษณะการแสดงผล (Appearance)
การกำหนดลักษณะการแสดงผลเป็นการคณุ สมบตั ิทัว่ ไปในการแสดงผลของหน้าเว็บเพจ

โดยมีรายละเอียดดังนค้ี ือ (ดภู าพที่ 2.21)

16

ภาพท่ี 2.21 การกำหนดลักษณะการแสดงผล (Appearance)

Page font รูปแบบตัวอกั ษร
Size ขนาดตวั อักษร
Text color สีของข้อความท่วั ไป
Background color สพี ้นื หลังของหนา้ เว็บเพจ
Background image ภาพพนื้ หลังของหน้าเวบ็ เพจ
Repeat วธิ แี สดงภาพพืน้ หลงั แบบซำ้ ๆ
Left margin ระยะของด้านซ้ายของหนา้ เว็บเพจ
Right margin ระยะของด้านขวาของหนา้ เว็บเพจ
Top margin ระยะของด้านบนของหน้าเว็บเพจ
Bottom margin ระยะของด้านลา่ งของหนา้ เว็บเพจ

3.2 การกำหนดลกั ษณะข้อความช่ือเรื่องและภาษา (Title/Encoding)
ลักษณะข้อความชื่อเร่ืองและภาษาเป็นส่วนที่นับว่าสำคัญสำหรับการออกแบบเว็บเพจ

เพราะการกำหนดรหัสภาษา (Encoding)ท่ีไม่ถูกต้องอาจมีผลให้การแสดงผลบนเบราว์เซอร์ผิดพลาดได้
การกำหลดชือ่ ภาษาท่ีใช้ของเวบ็ เพจ มรี ายละเอยี ดดงั นี้คือ (ดูภาพที่ 2.22)

17

ภาพท่ี 2.22 การกำหนดลกั ษณะข้อความชื่อเร่อื งและภาษา (Title/Encoding)

Title ข้อความชื่อเรอ่ื งของเวบ็ เพจ ซง่ึ ปรากฏบนแถบชื่อเรอ่ื ง (Title Bar)
Document ของหนา้ เว็บเบราว์เซอร์
Encoding Typeกำหนดรหัสคำส่ังในเว็บเพจให้เปน็ ไปตามมาตรฐานของ
ภาษาทตี่ ้องการ
ภาษาของเว็บเพจ สำหรับเวบ็ เพจภาษาไทยให้เลือก
“Thai(Windows)” ส่วนเวบ็ เพจภาษาอังกฤษใหเ้ ลือก
“Westerm European”

4. การบันทกึ (Save) เวบ็ เพจ
ไฟล์เว็บเพจของโปรแกรมMacromedia Dreamweaver ขณะท่ีกำลังทำงานอยู่และยังไม่ได้

บันทึก (Title Bar)จะมีเคร่ืองหมาย * ปรากฏอยู่ท้ายช่ือไฟล์ ซึ่งเป็นเคร่ืองหมายเตือนว่ายังไม่ได้บันทึก
ข้อมูลของไฟล์นั้น ไฟล์ข้อมูลของโปรแกรม Macromedia Dreamweaver จะถูกจัดเก็บให้เป็นไฟล์
ประเภทเอชทีเอม็ แอล (HTML) ให้อตั โนมัติ

คำสง่ั ทีใ่ ชใ้ นการจดั เก็บข้อมูล สามารถเลือกใช้ได้ดังน้คี ือ

File  Save… จัดเกบ็ ไฟลโ์ ดยใช้ช่อื ไฟลเ์ ดมิ

File  Save As… จดั เกบ็ ไฟลโ์ ดยใช้ชือ่ ไฟล์ใหม่

File  Save as Template… จัดเก็บเป็นไฟล์เทมเพลต(Template)

File  Save to Remote Server จัดเก็บไวท้ ี่รีโมตเซริ ์ฟเวอร์ (Remote Server)

File  Save All จัดเก็บทุกไฟลท์ ่เี ปิดใชง้ านอยู่

นอกจากน้ยี ังสามารถใช้แป้นพิมพ์ [Ctrl]+[S] แทนการใชค้ ำสัง่ File Save…

หรอื File  Save As… ได้

18

ขนั้ ตอนการบันทึกข้อมูลสามารถทำได้ดังนค้ี ือ (ดูภาพที่ 2.23)






ภาพที่ 2.23 การบันทึก (Save) ไฟลเ์ ว็บเพจ
4.1 คลกิ คำส่ัง File  Save… หรือกดแปน้ พิมพ์ [Ctrl]+[S]
4.2 จะปรากฏไดอะลอ็ กบอ็ กซช์ อ่ื “Save As” ข้นึ มา ให้ระบชุ ่อื ไฟล์ที่ต้องการในกรอบ
ด้านขวารายการ “File name”
4.3 คลกิ ปุ่ม Save
หมายเหตุ ไฟล์ทต่ี ้องการให้เปน็ โฮมเพจของเวบ็ ไซต์ ใหก้ ำหนด
ชื่อเป็น index.htm หรอื index.html เทา่ น้ัน

5. การดผู ลการออกแบบเวบ็ เพจทีเ่ วบ็ เบราว์เซอร์
การออกแบบเว็บเพจด้วยโปรแกรม Macromedia Dreamweaver ผู้ออกแบบควร

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

5.1 คลิกคำสัง่ File Preview in Browser internet explorer (หรือกดแปน้ พิมพ์ [F12])
5.2 จะปรากฏหน้าตา่ งของเว็บเพจในเว็บเบราวเ์ ซอร์ ดังภาพที่ 2.24

19

ภาพที่ 2.24 การดูผลการออกแบบเวบ็ เพจทเ่ี ว็บเบราว์เซอร์
6. การเปดิ (Open) เว็บเพจขึ้นมาแก้ไข
เว็บเพจที่ได้ออกแบบไว้แล้ว เม่ือต้องการแก้ไขหรือเพ่ิมเติมข้อมูลบนหน้าเว็บเพจในภายหลัง

ผอู้ อกแบบสามารถเปดิ เวบ็ เพจนน้ั ๆ ข้นึ มาแก้ไขไดต้ ามขนั้ ตอนดงั นี้ คอื
6.1 เรยี กใชง้ านในสว่ นของกลุม่ พาเนล (Group Panel)โดยคลกิ เลอื กชื่อของเวบ็ ไซต์ที่
ต้องการแก้ไขข้นึ มา
6.2 ดับเบลิ คลกิ ชอื่ ไฟล์ประเภทเอชทีเอม็ (HTM)หรอื เอชทีเอม็ แอล (HTML)ท่ตี ้องการแก้ไข
6.3 ไฟล์ที่ต้องการแก้ไขจะปรากฏขน้ึ มาบนพน้ื ที่ออกแบบ

7. การปดิ (Close) เว็บเพจ
เวบ็ เพจที่ออกแบบไว้เรยี บร้อยและแล้วบนั ทกึ ข้อมูลแล้ว สามารถปดิ หน้าเว็บเพจน้ัน

ได้ 2 วิธคี อื
วธิ ีท่ี 1 คลกิ คำสัง่ File  Close
วิธีท่ี 2 คลิกที่ปุ่ม

8. การเลิกใชง้ านโปรแกรมMacromedia Dreamweaver
เมอื่ ต้องการเลกิ ใชง้ านโปรแกรมMacromedia Dreamweaver สามารถทำได้ดังน้คี ือ
วิธที ี่ 1 คลกิ คำสั่ง File  Exit
วิธที ่ี 2 คลกิ ทปี่ มุ่

20

9. คำส่งั ลัดทใ่ี ชง้ านบ่อย

การออกแบบเว็บเพจดว้ ยโปรแกรม Macromedia Dreamweaver ผ้อู อกแบบมกั จะใช้คำส่ัง

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

คำสงั่ ลัดที่ใช้งานด้วยการกดแปน้ พิมพ์ เพอื่ ให้เกดิ ความรวดเร็วในการใช้งาน ซ่งึ พอสรุปได้ดังนีค้ อื

File  New ([Ctrl]+[N]) สรา้ งเวบ็ เพจใหม่

File  Open ([Ctrl]+[O]) เปิดเว็บเพจเก่าขน้ึ มาแก้ไข

File  Save ([Ctrl]+[S]) เก็บบนั ทึกเวบ็ เพจลงดิสด์

File  Close ([Ctrl]+[W]) ปิดเว็บเพจที่แก้ไขแล้ว

Edit  Cut ([Ctrl]+[X]) ตัดวตั ถหุ รือออ็ บเจกต์ทีเ่ ลือกไวอ้ อก

Edit  Copy ([Ctrl]+[C]) คัดลอกวัตถุหรือออ็ บเจกต์ท่เี ลอื กไว้

Edit  Paste ([Ctrl]+[V]) วางวัตถหุ รอื อ็อบเจกต์ในบริเวณทีก่ ำหนด

Edit  Undo ([Ctrl]+[Z]) ยกเลิกคำสัง่ กอ่ นหน้า

Edit  Redo ([Ctrl]+[Y]) ทำคำส่ังเดิมอีกครั้งหนึ่ง

[F4] ซ่อนหรอื แสดงกรอบพาเนล

[F12] แสดงผลทเี่ ว็บเบราว์เซอร์ (Web Browser)

21

บทสรุป

การเรียกใช้โปรแกรม Macromedia Dreamweaver มีวธิ ีการเรยี กใช้เหมือนโปรแกรมทั่วไปคือ
คลิกท่ีปุ่มสตาร์ (Start) บนทาสก์บาร์ (Task Bar) ของโปรแกรมวินโดวส์ (Windows) จากน้ันคลิกที่
ตัวเลือก All Programs แล้วคลิกท่ีตัวเลือกโปรแกรม Macromedia และคลิกที่ตัวเลือก Macromedia
Dreamweaver

สว่ นประกอบของโปรแกรม Macromedia Dreamweaver ทีส่ ำคญั ๆ ไดแ้ ก่
1. มมุ มองของหน้าต่างเวบ็ เพจ (Document Window) ประกอบด้วย 3 มุมมอง ไดแ้ ก่ มมุ มอง
แสดงรหัสคำสั่ง (Show Code View)มุมมองแสดงรหัสคำส่ังและหน้าจอออกแบบ (Show Code and
Design View) และมุมมองหน้าจอออกแบบ (Show Design View)
2. แถบเคร่อื งมอื (Toolbar) ของโปรแกรม Macromedia Dreamweaver ประกอบดว้ ย
ทูลบาร์จำนวน 8 ชุด รวม 4 กลุ่มคือ กลุ่มเครื่องมือแทรก (Insert) กลุ่มเคร่ืองมือแปลงรูปแบบ (Style
Rendering) กล่มุ เครอ่ื งมอื เอกสาร (Document) และกลุม่ เครอื่ งมอื มาตรฐาน (Standard)
3. แถบเคร่ืองมือแทรก (Insert Bar) เปน็ แถบเครอ่ื งมอื หลกั ทป่ี ระกอบดว้ ยกลุม่ เคร่ืองมือทีใ่ ชใ้ น
การออกแบบหน้าเว็บเพจ ประกอบด้วยแถบเคร่ืองมือย่อยๆ 8 ชุด คือ คอมมอน (Common) เลย์เอาท์
(Layout) ฟอร์ม (Forms) เท็กซ์ (Text) เอชทีเอ็มแอล (HTML) แอพพลิเคช่ัน (Application) แฟลช
อลิ เิ มนท์ (Flash Elements) และแฟเวอรไรท์(Favorites)
4. มุมมองแถบเครือ่ งมือแทรก สามารถแสดงผลเป็นแทบ็ หรือแบบเมนกู ็ได้
5. แถบสถานะ (Status Bar) ใชแ้ สดงสถานการณท์ ำงานของหนา้ เว็บเพจทก่ี ำลงั ออกแบบอยู่ ณ
ขณะนั้น
6. พาเนลกำหนดคณุ สมบัติ (Properties Inspector Panel) เป็นพาเนลทใี่ ชง้ านมากท่ีสดุ ใช้
สำหรับกำหนดคุณสมบัติขององค์ประกอบที่กำลังเลือกบนหน้าเว็บเพจที่ออกแบบเช่นการกำหนดรูปแบบ
ส่ี ขนาด เป็นตน้
7. ไม้บรรทัด (Ruler) ใช้สำหรบั กำหนดตำแหนง่ หรือขนาดขององคป์ ระกอบต่างๆ ที่วางบนหน้า
เว็บเพจ โดยจะปรากฏอยู่ดา้ นบนและดา้ นซา้ ยของพนื้ ที่ออกแบบ
8. กริด (Grid) เป็นเครือ่ งกำหนดตำแหน่งและขนาดองค์ประกอบตา่ ง ๆ บนเว็บเพจมลี กั ษณะ
เปน็ ช่องตารางเพอ่ื ช่วยในงานออกแบบในการจดั วางองค์ประกอบให้ง่าย
9. เสน้ ไกด์ (Guide) เป็นเคร่อื งมอื อกี ตัวหน่งึ ทชี่ ่วยในการกำหนดตำแหน่งและขนาดของ
องคป์ ระกอบตา่ ง ๆ บนเว็บเพจ
การเริ่มต้นสร้างเว็บไซต์ใหม่ในโปรแกรม Macromedia Dreamweaver จะต้องเร่ิมต้นจากการ
ตั้งช่ือเว็บไซต์ และกำหนดตำแหน่ง เช่น โฟลเดอร์ และไดร์ฟท่ีจะเก็บไฟล์ต่าง ๆ ของเว็บไซต์ท่ีเราจะ
ออกแบบ จากน้ันจึงเปิดไฟล์ใหม่เพื่อทำการออกแบบ ก่อนการออกแบบเว็บเพจทุกครั้งผู้ออกแบบควร
เริ่มต้นด้วยการกำหนดคุณสมบัติพ้ืนฐานของหน้าเว็บเพจ เช่น ช่ือเว็บเพจ (Title) สีพื้น (Background
color) และสีของข้อความ (Text color) เป็น

22

คำถามทา้ ยบทท่ี 2

คำชี้แจง
1. คำถามท้ายบทที่ 2 เพอื่ ทบทวนความรู้ของนักศึกษาเรือ่ งMacromedia Dreamweaver
เบือ้ งต้น
2. การตอบคำถาม ใหน้ ักศึกษาเติมข้อความลงในชอ่ งวา่ งใหส้ มบูรณ์

1. หน้าจอเรม่ิ ต้น (Start Page) ของโปรแกรมMacromedia Dreamweaver ประกอบด้วย
ตวั เลอื ก 3 กลุ่มได้แก่

1.1 Open a Recent ltem เพอื่ ใหท้ ำงาน...................................................................................
1.2 Create New เพ่ือใหท้ ำงาน...................................................................................................
1.3 Create from Samples เพื่อใหท้ ำงาน..................................................................................
2. จงบอกหน้าที่ของสว่ นประกอบของโปรแกรม Macromedia Dreamweaver ดังต่อไปน้ี
2.1 แถบคำสั่ง (Menu Bar) ทำหนา้ ที่...........................................................................................
........................................................................................................................................................
2.2 แถบเคร่ืองมือเอกสาร (Document Toolbar) ทำหนา้ ที่.......................................................
.......................................................................................................................... ..............................
2.3 แถบเครื่องมือแทรก (Insert Bar) ทำหนา้ ที.่ ............................................................................
.................................................................................................. ......................................................
2.4 พาเนลกำหนดคุณสมบัติ (Properties Inspector Panel) ทำหน้าท.ี่ ....................................
............................................................................................................................. ...........................
3. มมุ มอง Code แสดงผลหน้าจอเปน็ .............................................................................................
มุมมอง Split แสดงผลหนา้ จอเป็น............................................................................................
มมุ มอง Design แสดงผลหน้าจอเป็น............................................................................................
4. จงบอกหน้าทค่ี ำส่ังต่อไปนี้
4.1 Site  New Site ทำหนา้ ท.ี่ .................................................................................................
4.2 Modify  Page Properties ทำหน้าท.่ี .................................................................................
4.3 File  Preview in Browser  internet explorer ทำหนา้ ท.ี่ .............................................

23

เอกสารอา้ งอิง

บญุ สืบ โพธศิ์ รี และอำภา กุลธรรมโยธนิ (2547). การพฒั นาเว็บเพจดว้ ยโปรแกรมสำเรจ็ รูป.
กรงุ เทพฯ: ศูนย์ส่งเสริมอาชวี ะ.

ดวงพร เกี๋ยงคำ. (2549). อินไซต์ Dreamweaver 8. กรงุ เทพฯ: โปรวชิ ่ัน.
ดวงพร เกีย๋ งคำ. (2550). ค่มู ือสร้างเว็บไซตด์ ้วยตนเอง. กรงุ เพทฯ: โปรวิช่นั .
บรรณาธิการ นาถสงค์. (2550). Dreamweaver 8 Workshop. กรุงเทพฯ: ซัคเซส มีเดยี .
บอกอ แรมโบ.้ (2550). มอื ใหม่ Dreamweaver 8. กรุงเทพฯ: ซัคเซส มเี ดยี .
พันจันทร์ ธนวฒั นเสถียร. (2550). Dreamweaver 8 ฉบับเรยี นลัด. กรงุ เทพฯ: ซัคเซส มีเดีย.
สทิ ธชิ ัย ประสานวงศ.์ (2550). สรา้ งสรรคเ์ ว็บสวยด้วย Dreamweaver 8. กรุงเทพฯ: ซอฟทเ์ พรส.