1. 1
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ปฏิบัติการที่ 12 การออกแบบเว็บไซต์ด้วยโปรแกรม Dream Weaver ครั้งที่ 1
วิชา 001272 คอมพิวเตอร์สารสนเทศขั้นพื้นฐาน
รหัส ชื่อ สาขา
คณะ หมู่เรียนที่ วันที่ เดือน พ.ศ
วัตถุประสงค์
1. เพื่อแนะนาเครื่องมือในโปรแกรม Dreamweaver
2. เพื่อแนะนาการกาหนดค่าเว็บเพจ การแทรกตาราง แทรกภาพ แทรกการเชื่อมโยง
โปรแกรม Dreamweaver คืออะไร
Dreamweaver เป็นโปรแกรมประเภทการออกแบบเว็บไซต์ (Web Design) ซึ่งมีคุณสมบัติในการใช้งานในแบบ
WYSIWYG (What You See Is What You Get) คือเป็นโปรแกรมประเภทคุณออกแบบมาอย่างไรกับโปรแกรมของคุณ คุณก็
เห็นงานของคุณเป็นแบบนั้น การใช้งานของโปรแกรมจะอานวยความสะดวกให้กับการออกแบบเว็บเพจเป็นอย่างมาก
เนื่องจาก เราไม่จาเป็นต้องมานั่ งเรียนรู้ภาษาของ HTML เลย เราก็สามารถสร้างเว็บไซต์ (Website) ได้อย่างมืออาชีพแล้ว
โปรแกรมยังรองรับมัลติมีเดียต่างๆได้ เช่น การใส่เสียง การแทรกไฟล์วิดีโอ การใช้งานร่วมกับโปรแกรม Flash และ Fireworks
เป็นต้น
ซึ่งโปรแกรมในแนวทางเดียวกันกับโปรแกรม Dreamweaver ก็ยกตัวอย่าง เช่น โปรแกรม FrontPage จากค่าย
Microsoft เป็นต้น ซึ่งปัจจุบันอยู่ในชุดโปรแกรม Adobe
การเข้าโปรแกรมให้เข้าไปในชุดโปรแกรมของ Adobeแล้วเลือกไปที่ Adobe Dreamweaver
รูปที่ 12.1 หน้าแรกหลังเข้าโปรแกรม
Object
Palette
Site
Properties
Palette
Menu Bar

2. 2
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ส่วนประกอบของ Dreamweaver
 แถบคาสั่ง (Menu Bar) เป็นแถบที่ใช้เก็บคาสั่งทั้งหมดของโปรแกรม
 แถบวัตถุ (Object Palette) เป็นกลุ่มเครื่องมือต่างๆ ที่ใช้ในการควบคุมวัตถุ บนชิ้นงาน เอกสารเว็บ เช่น
เส้นกราฟิก (Horizontal Rule), ตาราง, รูปภาพ, เลเยอร์ (Layer)
 แถบควบคุมการทางาน (Properties Palette) เป็นรายการที่ปรับเปลี่ยนได้ ตามลักษณะการเลือกข้อมูล
เช่น หากมีการเลือกที่จะพิมพ์ หรือแก้ไขเนื้อหา รายการก็จะเป็น ส่วนทางานที่เกี่ยวกับอักษร , การจัดพารา
กราฟ ถ้าเลือกที่รูปภาพ รายการในแถบนี้ก็จะเป็นคาสั่งต่างๆ ที่เกี่ยวกับ การควบคุมเรื่องรูปภาพ
 ขั้นตอนการปฏิบัติ ขอให้นิสิตปฏิบัติตามดังสิ่งต่อไปนี้
ขั้นตอนที่ 1 สร้างโฟลเดอร์ myWebsite (พิมพ์ติดกัน) *ก่อนอื่นให้นิสิตโหลดไฟล์ชื่อmyWebsite.zip *
ขั้นตอนที่ 1.1 ก่อนเริ่มเพื่อให้การสร้างเว็บไซต์มีการจัดการไปในทิศทางเดียวกัน ขอให้โหลดไฟล์myWebsite.zip
ไปไว้ที่ C: แล้วคลิกขวาที่ไฟล์นั้น เลือก “แยกที่นี่” หรือ Extract Here จากนั้นนิสิตจะพบว่ามีโฟลเดอร์และรูปภาพอยู่ โดยมี
โฟลเดอร์ชื่อ myWebsite และ Images ถ้าทาได้แล้วให้ข้ามไปขั้นตอนที่ 2
ขั้นตอน 1.2 หรืออาจจะสร้าง Folder ชื่อ myWebsite ที่ไดรฟ์ C: ก่อน จากนั้นภายใน myWebsite สร้างโฟลเดอร์
Images จากนั้น นาไฟล์ภาพจากไฟล์ MyWebsite.zip มาวางไว้ที่ Images ก็จะได้ดังรูป 12.2
รูปที่ 12.2 โฟลเดอร์ที่สร้าง
ขั้นตอนที่ 2 สร้าง Site เพื่อจาลองการทางานในเครื่อง
ให้นิสิตเลือกไปที่เมนู Site New Site (ครั้งแรก แต่ถ้าแก้ไขต้องไปที่ Manage Site ..) จากนั้นให้กาหนดค่าที่ ที่
แท็ป Local Info ดังรูป 12.3 จากนั้นกาหนดค่า
- กาหนดชื่อ Site ที่ Site Name กาหนดว่า myWebsite
- กาหนดโฟลเดอร์ทางาน ที่ Local Root Folder กาหนดว่า C:myWebsite (โฟลเดอร์กาหนดไว้ในขั้นตอนที่ 1)
- กาหนดโฟลเดอร์รูปภาพที่ Default Images Folder กาหนดว่า C:myWebsiteimages

3. 3
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
รูปที่ 12.3 การเซ็ต Site
เมื่อกาหนดเสร็จแล้วให้กด OK แล้วให้ดูที่ Site Palette
รูปที่ 12.4 แสดง Site ที่ Palette หลังจากการเซ็ต
ขั้นตอน 3 เริ่มสร้างไฟล์งาน HTML
ขั้นตอนที่ 3.1 ให้เลือกไปที่ Create New HTML หรือ ไปที่เมนู FileNew จากนั้นเลือก HTML
รูปที่ 12.5 แสดงขั้นตอนการเริ่มสร้าง HTML

4. 4
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ขั้นตอนที่ 3.2 กาหนดหน้าจอแสดงผล (Document Windows) ขณะออกแบบ
หน้าต่างการทางานของ Dreamweaver สามารถเลือกหน้าต่างการทางานได้ 3 รูปแบบ โดยการคลิกไอคอนที่อยู่ใน
แถบเครื่องมือ Toolbar ดังนี้
Show Code View เป็นหน้าต่างที่ให้แสดงเฉพาะโค้ด HTML ของหน้าเว็บเพจที่ กาลังทางาน
Show Code and Design View เป็นหน้าต่างที่แสดงทั้งโค้ด HTML และหน้าเว็บเพจที่กาลังทางาน
Show Design View ให้แสดงแต่หน้าเว็บเพจไม่ต้องแสดงโค้ดHTML
รูปที่ 12.6 หน้าจอการออกแบบ
ซึ่งในที่นี้ขอให้นิสิตเลือกแบบที่ 3
ขั้นตอนที่ 3.3 กาหนดค่าให้เพจของเว็บ ให้เลือกไปที่ Modify Page Properties.. หรือกดที่ Page Properties..
ด้านล่างของ Properties Palette จากนั้นก็จะพบหน้าจอเพื่อให้ปรับค่า ในที่นี้จะลองปรับค่าของแท็ปคือAppearance (CSS)
และ Title/Encoding
- ที่แท็ป Appearance (HTML) เพื่อกาหนดสีพื้นหลัง (Background Color) ภาพพื้นหลังของเพจ (Background
Image) หรือ สีตัวอักษร (Text Color)
- ที่แท็ป Title/Encoding เพื่อกาหนด Titlebar ของเพจ และกาหนดภาษาที่ใช้แสดงในที่นี้เลือก “Thai/Windows”
1 2
3เพจที่ยังไม่
บันทึกจะขึ้นว่า
Untitled-… *

5. 5
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
รูปที่ 12.7 การกาหนด Page Properties
หมายเหตุ ก่อนทาขั้นตอนต่อไป ขอให้นิสิตบันทึกไฟล์นี้ชื่อ index.html ไว้ที่โฟลเดอร์ C:myWebsite
ขั้นตอนที่ 4 แทรกตาราง
ขั้นตอนที่ 4.1 ไปที่เมนู Insert  Table หรือ กดไปที่เครื่องใน Insert
จะพบหน้าจอสาหรับเพิ่มตารางดังรูปที่ 12.9
รูปที่ 12.8 เครื่องมือ Insert

6. 6
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ขั้นตอนที่ 4.2 กาหนดค่าต่างๆของตาราง โดยกาหนดแถว 8 แถว (Rows) คอลัมน์ 3 คอลัมน์ (Columns) กาหนด
ขนาดตาราง (Table Width) เป็น 800 พิกเซล (หน่วยปรับขนาดมี 2 แบบคือ Pixels กับ Percent) ถ้าเป็น Percent
หมายถึงให้ปรับขนาดเป็นเปอร์เซ็นต์หน้าจอที่แสดงจริง ปรับความหนาเส้นขอบ (Border thickness) กาหนดเป็น 0
พิเซล ปรับระยะห่างของข้อความหรือภาพ (Cell Padding) ภายในช่องจากเส้นขอบ กาหนดเป็น 0 พิเซล และปรับ
ระยะห่างของเส้นด้านใน-นอก (Cell Spacing) กาหนดเป็น 0 พิเซล
รูปที่ 12.9 การกาหนดแทรกตาราง
จากนั้นก็จะได้ตารางดังรูปที่ 12.10 จากนั้นนาเมาส์ไปคลิกที่เส้นขอบแล้วกาหนด Properties ที่ Align เป็น “Center”
เพื่อให้ตารางอยู่ตรงกลางเพจ
รูปที่ 12.10 ตารางขนาด 8x3
ขั้นตอนที่ 4.3 การผสานหรือการรวมช่องตารางและการกาหนดสีในช่องตาราง ให้นิสิตทาการเลือกบริเวณที่
ต้องการรวมช่อง จากนั้นไปเลือกที่ อยู่ใน Properties ด้านล่าง จากนั้นสามารถเลือกกาหนดสีพื้นหลัง
ได้ที่ Bg ในที่นี้ขอให้รวมตารางแถวแรกและแถวที่2 กาหนดสีเหลือง ดังรูปที่ 12.12
รูปที่ 12.11 Properties ของตาราง
8 แถว 3 คอลัมน์
ขนาดตาราง 800 พิกเซล
ความหนาเส้นขอบเป็น 0 พิเซล
ปรับระยะห่างของข้อความ
ปรับระยะห่างของเส้นด้าน
ใน-นอก

7. 7
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
รูปที่ 12.12 ตารางที่รวมช่องและกาหนดสีแล้ว
ตารางดังกล่าวสามารถปรับขนาดช่องต่างๆได้โดยใช้เมาส์ลากปรับแต่งได้ทันที
ขั้นตอนที่ 5 แทรกข้อความและภาพในตาราง
ขั้นตอนที่ 5.1 แทรกข้อความในแถวที่ 3 คอลัมน์ที่ 1 ว่า “Menu” ซึ่งสามารถปรับค่าบางอย่างได้ที่ Properties เช่น
ตัวหนา ตัวเอียง หรือตาแหน่งการแสดง
ขั้นตอนที่ 5.2 แทรกภาพลงในช่องตารางซึ่งทาได้หลายแบบ ตัวอย่างเช่น ใช้เครื่องมือ d
จากนั้นจะพบการแทรกภาพ วิธีการนี้จะต้องนาเมาส์ไปคลิกบริเวณที่ต้องแทรกรูปก่อน จากนั้นก็กด
เครื่องมือดังกล่าวก็จะพบว่ามีหน้าจอให้ค้นหาภาพเพื่อแทรกลงไปดังรูปที่
รูปที่ 12.13 ค้นหาภาพ
การแทรกภาพอีกวิธีก็คือ ให้ไปดูที่ Site ของเราที่อยู่ด้านขวา โดยกดไปที่ “ASSETS” เพื่อเปลี่ยนมุมมองให้เห็นภาพ
ของเราด้วย ดังรูป 12.14 เมื่อต้องการภาพไหนก็แค่ลากภาพนั้นลงไปบริเวณที่ต้องการ
ได้ทันที (แต่ต้องเป็นภาพที่เตรียมไว้แล้ว)
ขณะที่เราจากไปวาง ก็จะมีหน้าจอแสดงขึ้นมาให้ ใส่ค่าข้อความ(Alternate
Text) คือข้อความนี้จะแสดงเมื่อนาเมาส์ชี้ไปที่ภาพ และชื่อลิ้งค์ (Long Description) ถ้า
ไม่ต้องการกาหนดให้กด “Cancel” จากนั้นให้นิสิตนาภาพต่างๆ ซึ่งในที่นี้ออกแบบไว้
แล้ว ทั้งปุ่มเมนู ป้ ายเว็บ (Banner) ต่างๆ ให้ได้ตาแหน่ง ดังรูปที่ 12.15
รูปที่ 12.14 ภาพที่อยู่ใน Site ของเรา

8. 8
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
รูปที่ 12.15 เพจที่ใส่รูปแล้ว
หมายเหตุ ภาพต่างๆในโฟลเดอร์นี้นิสิตสามารถออกแบบเพิ่มเติมได้ เพราะมีไฟล์ที่สามารถออกแบบในPhotoshop ซึ่งมีอยู่
ในโฟลเดอร์ PSD ของ โฟลเดอร์ Images
ขั้นตอนที่ 6 กาหนดการเชื่อมโยง (Links)
- ถ้าลิ้งค์เป็นรูปภาพ ให้นาเมาส์ไปคลิกส์ภาพที่ต้องการทาลิ้งค์จากนั้นไปกาหนดที่ Properties ดังรูป
รูปที่ 12.16 กาหนดลิ้งค์ใน Properties ของภาพ
o Link คือกาหนดชื่อไฟล์หรือเว็บไซต์ที่ต้องการไปหลังกดที่ลิ้งค์นั้น
o Target คือหน้าต่างที่ต้องการให้แสดง ในที่นี้กาหนดเป็น“_blank” ดังนั้นเว็บจะเปิดหน้าต่างใหม่ไป
ทุกครั้งที่กดลิ้งค์ดังกล่าว
o Border คือ เส้นรอบรูปภาพ ถ้าไม่ต้องการให้กาหนดเป็น 0
o Alt หรือ Alternate Text คือ ข้อความที่ต้องการให้ปรากฏเมื่อเอาเม้าส์ไปชี้ภาพนี้
- ถ้าลิ้งค์เป็นข้อความ ให้ทาแถบสีคุมบริเวณที่ต้องการจากนั้น ไปกาหนดที่ Properties เพื่อกาหนดลิ้งค์
เหมือนกับที่ทากับรูปภาพ เช่น ทาลิ้งค์ไป “Naresuan University” ใช้ http://www.nu.ac.th
หมายเหตุ ในส่วนของการทาเชื่อมโยง (Link) นี้อาจจะเป็น URL ชื่อเว็บไซต์ ไฟล์ HTML หรือไฟล์อื่นๆ ก็ได้ เช่น
ไฟล์ Word, Excel, PDF, Power Point, Zip เป็นต้น ขึ้นอยู่กับความต้องการของผู้ออกแบบ

9. 9
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ ม.นเรศวร
ขั้นตอนที่ 7 การดูผลลัพธ์เว็บเพจในหน้า Browser
ให้เลือกไปที่เมนู File  Preview in Browser  IExplore หรือ กด F12 โดยการดูผลลัพธ์ให้บันทึกไฟล์ก่อน
(Ctrl+S) ทุกครั้ง
รูปที่ 12.18 การแสดงใน Internet Explorer
คาถามท้ายบท
1. การกาหนด Site ใน Dreamweaver มีประโยชน์อย่างไร ………………………………………………………………
………………………………………………………………………………………………………………………….
2. การแสดงแบบ ASSETS ใน Sites เพื่ออะไร …………………………………………………………………………
………………………………………………………………………………………………………………………….
3. การกาหนด Cell Spacing ในตาราง เพื่ออะไร ……………………………………………………………………
………………………………………………………………………………………………………………………….
4. ขนาดของตารางมีหน่วยที่ใช้ปรับขนาดอะไรบ้าง……………………………………………………………………
………………………………………………………………………………………………………………………….
5. Properties ชื่อ ALT ของภาพ ใช้เพื่อกาหนดอะไร ……………………………………………………………………
………………………………………………………………………………………………………………………….