การสร้างเว็บไซต์ โดยใช้โปรแกรม Macromedia dreamweaver 8

1. การเข้าใช้งาน Macromedia Dreamweaver 8
1. คลิ๊กที่ปุ่ม Start -->All Programs --> Macromedia --> Macromedia Dreamweaver 8 หรือ
คลิกที่ เพื่อเข้าสู่โปรแกรม
2. ในการเข้าใช้งานครั้งแรกนั้นเมื่อเข้าสู่โปรแกรมเราจะพบหน้าต่าง Workspace Setup ให้เลือกเป็นแบบ
Designer จากนั้นคลิกปุ่ม OK
3. หลังจากนั้นเราจะพบหน้าเริ่มต้นของ Macromedia Dreamweaver Mx 2004 ซึ่งเราสามารถจะเริ่มต้น
ทาเว็บเพจได้ โดยคลิกเมนู File --> New

2. 4. จะปรากฏหน้าต่าง New Document เลือก Basic page จากนั้นคลิกปุ่ม Create เพื่อสร้างไฟล์ใหม่
การบันทึกหน้าเว็บเพจ
เมื่อเราทาการสร้างเว็บเพจเสร็จเรียบร้อยเป็นที่พอใจแล้ว ให้ทาการเซฟไฟล์ โดยมีคาสั่งให้เลือกใช้ดังนี้
File > Save เซฟไฟล์ในชื่อเดิม
File > Save As เซฟไฟล์ในชื่อใหม่
File > as Template เซฟไฟล์เป็นเทมเพลต
File > All เซฟไฟล์ทั้งหมด
ขั้นตอนง่ายๆ ในการเซฟไฟล์มีดังนี้
1. เลือกเมนู File > Save หรือ Save As... หรือ Save as Template... หรือ Save All
2. เลือกโฟลเดอร์ที่จะจัดเก็บไฟล์ ในช่อง Save in
3. ใส่ชื่อไฟล์ในช่อง File name แล้วกด Save

3. การสร้างตารางเพื่อออกแบบหน้า Homepage
การสร้างตาราง สามารถทาได้ 2 วิธี คือ
วิธีแรกของการสร้างตาราง คือจะต้องคลิกตรงบริเวณตาแหน่งที่ต้องการจะสร้างตารางแล้ว
คลิกคาสั่ง Insert บนเมนูบาร์ เลือกที่ Table
วิธีที่สองของการสร้างตาราง คือเราสามารถคลิกที่ไอคอน Table ( ) ที่ แท็บ Common ใน Insert Bar
รูปที่ 2 ขั้นตอนการสร้างตารางโดยคลิกที่ไอคอน Table บนแท็บ Common
เมื่อสร้างตารางแล้วจะปรากฏหน้าต่างดังนี้ ให้กรอกข้อมูลตามรูป แล้วคลิกตกลง

4. จะได้ตาราง ดังรูป
1.ให้นักเรียนทาการผสานเซลล์ในแถวแรก โดยคลุมแถบดาแถวแรก แล้วคลิกขวาเลือก Table > Merge Cells
หรือคลิกที่ รูปสี่เหลี่ยมผืนผ้ามุมล่างซ้าย ดังรูป
ให้นักเรียนผสานเซลในแถวที่ 2 ทาเหมือนขั้นตอนที่ 1
การทาข้อความวิ่ง พิมพ์ข้อความ ยินดีต้อนรับเข้าสู่เว็บไซต์ ปรับตัวหนังสือให้สวยงาม คลุมแถบดาที่ข้อความ
แล้วคลิกที่ แถบ Properties > Quick tag editor ดังรูป แล้วพิมพ์คาว่า marquee แล้วเคาะ enter
การปรับแต่งรายละเอียดของตาราง
หากเราต้องการปรับแต่งรายละเอียดของตาราง ให้คลิกเลือกรูปภาพที่ต้องการแล้วปรับค่าต่างๆ ได้จากหน้าต่าง
Properties แต่ก่อนอื่นเรามารู้จักกับค่ากาหนดต่างๆ ของตารางกันก่อน

5. Rows Cols (จานวนแถวและคอลัมน์) ระบุจานวนแถวและคอลัมน์ของตารางตามต้องการ
W (ความกว้าง)
ใช้ระบุความกว้างของตาราง โดยจะระบุเป็นเปอร์เซ็นต์เทียบกับความกว้าง
ของหน้าต่างบราวเซอร์ หรือระบุเป็นพิกเซลก็ได้ หากเราไม่ระบุค่าในช่องนี้
บราวเซอร์ที่เปิดดูเว็บที่สร้างอาจแสดงขนาดตารางไม่ตรงกับที่ต้องการ
H (ความสูง)
ใช้ระบุความสูงของตาราง โดยจะระบุเป็นเปอร์เซ็นต์เทียบกับความกว้างของ
หน้าบราวเซอร์ หรือระบุเป็นพิกเซลก็ได้ ซึ่งโดยปกติจะไม่ถูกกาหนดค่าไว้
เพราะเป็นค่าที่ได้จากความสูงของทุกแถวในตารางรวมกันอยู่แล้ว
CellPad
กาหนดระยะระหว่างข้อความในตารางกับขอบตาราง ค่านี้มีผลกับทั้งตาราง
ค่าที่กาหนดไว้เป็นมาตรฐานคือ 1
CellSpace
กาหนดระยะห่างระหว่างเซลที่อยู่ในตาราง ค่านี้มีผลกับทั้งตาราง ค่าที่กาหนด
ไว้เป็นมาตรฐานคือ 2
Align
ใช้ระบุการจัดวางตารางให้ชิดซ้าย (Left) ชิดขวา (Right) กึ่งกลาง (Center)
หน้าเว็บได้ โดยค่าที่กาหนดไว้เป็นมาตรฐาน (Default) คือ Left
Border
ถ้าเราไม่ต้องการให้มีเส้นขอบตารางให้กาหนดค่าในช่องนี้เป็น 0 หากเรา
ต้องการให้มีเส้นขอบตารางให้กาหนดความหนาของเส้นขอบได้ในช่องนี้
Clear Row Heights
Clear Column
Widths
ให้ Click mouse ที่ปุ่มเพื่อลบค่าความสูงหรือความกว้างที่เราระบุให้กับ
ตาราง
Convert Table
Widths to Pixel
Percent
ให้ Click mouse ที่ปุ่มเพื่อแปลงค่าความกว้างของตารางที่เรากาหนดไว้จาก
พิกเซล เป็นค่าเปอร์เซ็นต์ หรือจากค่าเปอร์เซ็นต์เป็นค่าพิกเซล
Light Brdr, Dark
Brdr
ระบุสีเส้นขอบในและขอบนอกของตาราง
Bg Color เป็นสีพื้นหลังของตาราง
Brdr เป็นสีของขอบตาราง
Bg Image เป็นรูปภาพที่ใช้เป็นพื้นหลังของตาราง
การแทรกแถวและคอลัมน์
การแทรกแถว
1. นาเคอร์เซอร์ไปวางยังตาแหน่งที่ต้องการจะแทรกแถว
2. คลิกเมาส์ปุ่มขวา ในเมนูย่อยให้เลือก Table > Insert Row หรือจากแถบเมนูให้เลือกคาสั่ง Modify >
Table > Insert Row หรือ (Ctrl + M)

6. 3. เพิ่มแถวเข้ามาหนึ่งแถว ซึ่งมีขนาดของเซลล์เท่ากับขนาดของแถวเดิมที่เข้าไปแทรก
การแทรกคอลัมน์
1. นาเคอร์เซอร์ไปวางไว้ข้างหน้าตาแหน่งที่ต้องการจะแทรกคอลัมน์
2. คลิกเมาส์ปุ่มขวา ในเมนูย่อยให้เลือก Table > Insert Column หรือจากแถบเมนูให้เลือกคาสั่ง
Modify > Table > Insert Column หรือ (Ctrl + Shift + A)

7. 3. จะได้คอลัมน์เพิ่มขึ้นมา ซึ่งมีขนาดของเซลล์เท่ากับคอลัมน์เดิม
การลบแถวและคอลัมน์
การลบแถว
1. เลือกแถวที่ต้องการจะลบแล้วกดปุ่ม Delete
2. คลิกเมาส์ปุ่มขวา ในเมนูย่อยให้เลือก Table > Delete Row หรือจากแถบเมนูให้เลือกคาสั่ง Modify
> Table > Delete Row หรือ (Ctrl + Shift +M)

8. 3. แถวที่เลือกไว้จะหายไป

9. การลบคอลัมน์
1. เลือกคอลัมน์ที่ต้องการจะลบแล้วกดปุ่ม Delete
2. คลิกเมาส์ปุ่มขวา ในเมนูย่อยให้เลือก Table > Delete Column หรือจากแถบเมนูให้เลือกคาสั่ง
Modify > Table > Delete Column หรือ (Ctrl + Shift +-)
3. คอลัมน์ที่เลือกไว้จะหายไป

10. การใส่ภาพพื้นหลัง ( background )
1. คลิกที่ เมนู Modify > Page properties.. จะได้หน้าต่างดังรูป
2. คลิกเลือกพื้นหลังที่ต้องการดังภาพ กดปุ่ม Apply เพื่อแสดงตัวอย่าง กด OK เพื่อตกลง
การใส่สีและขนาดให้กับข้อความใน Macromedia Dreamweaver 8
ขั้นตอนแรก อย่างแรกเลยเราก็ต้องสร้างข้อความไว้ก่อนค่ะ
พื้นหลังที่เป็นรูปภาพ
พื้นหลังที่เป็นสี

11. ขั้นตอนที่ 2 เมื่อสร้างข้อความเสร็จแล้วให้ทาเลือกข้อความที่เราจะใส่สี โดยการลากเมาท์ให้เป็นแถบสีดาดัง
ภาพ
ขั้นตอนที่ 3 สังเกตที่บริเวณ Properties ด้านล่างค่ะ จากนั้นคลิกที่ช่องสีเหลี่ยมตามภาพค่ะ จะมีตารางสี
ปรากฏขึ้น ต้องการให้ข้อความสีอะไรก็คลิกที่ช่องสีนั้นได้เลยค่ะ
การแทรกรูปภาพนั้นสามารถแทรกรูปภาพลงในตาราง หรือในเซลล์ได้ 2 วิธี คือ
1.คลิกเลือกเซลล์ที่ต้องการจะแทรกรูปภาพ
ใส่ขนาด

12. รูปที่ 1 ภาพแสดงวิธีการเลือกเซลล์เพื่อแทรกรูปภาพในตาราง
2. เลือกคาสั่ง Insert ไปเลือกที่ Image
รูปที่ 2 ภาพแสดงวิธีการเลือกเมนู Insert -> Image
3. หรือคลิกที่ไอคอน Image ( ) บนแท็บ Common ของแถบ Insert Toolber
รูปที่ 3 ภาพแสดงวิธีการเลือกไอคอน บนแท็บ Common เพื่อแทรกรูปภาพในตาราง
4. จากนั้นจะปรากฏกรอบ Select Image Source เพื่อให้ผู้ใช้เลือกไฟล์รูปภาพที่ต้องการ

13. รูปที่ 4 ภาพแสดงหน้าต่าง Select Image Source เพื่อเลือกรูปภาพที่ต้องการจะแทรก
5. เมื่อเลือกเสร็จให้คลิกที่ปุ่ม OK ก็จะสามารถแทรกภาพในตาราง หรือเซลล์ที่ต้องการได้
การแทรกไฟล์ flash
เมื่อเราใส่ Flahs Movie ลงในเว็บเพจ จะใช้แท็ก object และ embed ร่วมกัน เพื่อให้การแสดงผลเป็นไป
อย่างถูกต้อง เมื่อเราเปลี่ยนแปลงค่าของ Flahs Movie ใน Property Inspector แล้ว Dreamweaver ก็จะ
เปลี่ยนแปลงค่าที่เหมาะสมในแท็ก object และ embed ให้ด้วย ซึ่งขั้นตอนในการใส่ Flahs Movie ลงในเว็บ
เพจสามารถทาได้ดังนี้
1. เลือกตาแหน่งที่ต้องการเพิ่ม Flash Movie
2. ใน Insert Bar เลือก Media Tab แล้วคลิกปุ่ม
* หรือ เลือกเมนู Insert > Media > Flash
* หรือกด Ctrl + Alt + F
3. เลือกไฟล์ Flash ที่จะเพิ่มในเว็บเพจ
4. หลังจากที่เราแทรกไฟล์ Flash แล้ว สามารถที่จะดูการแสดงผลได้โดยการคลิกเลือกไฟล์ แล้วกดปุ่ม
Play

14. 5. จะปรากฎไฟล์ที่แสดงผล แต่หากต้องการหยุดก็ให้กดปุ่ม Stop
การเชื่อมโยงเว็บเพจ (Link)
การกาหนดตาแหน่งเป้าหมายของการเชื่อมโยง เป็นการกาหนดให้เว็บเพจนั้นแสดงบนหน้าต่างเว็บ
บราวเซอร์ใหม่ หรือแสดงที่หน้าต่างเดิม ซึ่งสามารถกาหนดได้ โดยการเลือก Properties
แล้วเลือก Target แล้วเลือกคาสั่งที่ต้องการใช้ ดังนี้
_blank ให้แสดงเว็บเพจปลายทางในหน้าต่างใหม่
_parent ให้แสดงเว็บเพจปลายทางในหน้าต่างเดิม โดยจะแทนที่หน้าต่างเดิม
_self ให้แสดงเว็บเพจปลายทางในพื้นที่ที่เป็นจุดเชื่อมโยง หากจุดเชื่อมโยงนั้นอยู่เฟรมทางซ้าย เว็บ
ปลายทางจะปรากฏที่เฟามด้านซ้าย
_top ให้แสดงเว็บเพจปลายทางในลักษณะเช่นเดียวกัน _parent
รูป Porperties Bar
การเชื่อมโยงในเว็บเพจเดียวกัน
ใช้ในกรณีที่เนื้อหามีจานวนมาก ต้องใช้ Scroll Bar เลื่อนไปยังเนื้อหาที่ต้องการ ทาให้ไม่
สะดวกในการอ่านเนื้อหา จึงมีการสร้างการเชื่อมโยงภายในเว็บเพจเดียวกันขึ้น
โดยการนาชื่อจุดเชื่อมโยงปลายทาง ไปใส่ไว้ในช่อง Link มีขั้นตอนดังนี้
1. วางเคอร์เซอร์ไว้ตรงตาแหน่งที่ต้องการเชื่อมโยง

15. รูปการเลือกตาแหน่งจุดเชื่อมโยง
2. เลือกเมนู Insert เลือก Named Anchor
รูป Menu Insert Named Anchor
หรือคลิกที่รูป ที่แถบ Toolbar Common

16. 3. จะปรากฏกรอบโต้ตอบ Named Anchor ให้ต้องชื่อจุดเชื่อมโยงปลายทาง แล้วกด OK
รูป Named Anchor Box
4. จะปรากฏสัญลักษณ์ “ สมอ ” หน้าข้อความที่เลือก
การเชื่อมโยงภายในเว็บไซต์เดียวกัน
การเชื่อมโยงลักษณะนี้ เป็นการเชื่อมโยงไปยังส่วนต่าง ๆ ที่อยู่ในไฟล์เว็บเพจอื่น แต่อยู่ในเว็บไซต์
เดียวกัน มีขั้นตอนดังนี้
1. เลือกข้อความหรือรูปภาพ ที่ต้องการสร้างเป็นจุดเชื่อมโยง

17. 2. ไปที่ Properties ในช่อง Link ให้คลิกที่ Browse for file ทางขวามือ เพื่อเลือกไฟล์ที่ต้องการเชื่อมโยง
จากนั้นคลิกปุ่ม OK
รูป Properties Bar

18. รูป Select File
หรือพิมพ์ตาแหน่งและชื่อไฟล์เว็บเพจที่ต้องการเชื่อมโยงลงในช่อง Link
รูป Properties Bar
3. Save แล้วกด F12 เพื่อทาการรันบราวเซอร์
การเชื่อมโยงไปยังเว็บไซต์อื่น เราต้องระบุ URL ของเว็บไซต์นั้น และต้องตรวจสอบด้วยว่า URL ปลายทาง
ที่เราต้องการเชื่อมโยงนั้นถูกต้อง
1. เลือกรูป หรือข้อความที่เราต้องการ
2. พิมพ์ชื่อ URL เว็บไซต์ที่เราต้องการที่จะเชื่อมโยง ในช่อง Link

19. การสร้าง Rollover Image
Rollover Image เป็นรูปภาพที่มีการสลับภาพเมื่อนาเม้าส์ไปวางเหนือรูปภาพนั้น และเมื่อเรานาเม้าส์ออกจาก
รูปภาพจะกลับเป็นรูปภาพเดิม นอกจากนี้เราสามารถทาการเชื่อมโยงต่อไปยังไฟล์เว็บเพจหรือรูปภาพต่าง ๆ
รูปภาพที่เป็น rollover ช่วยเรียกความสนใจให้กับเพจมากขึ้น
ขั้นตอนการสร้างปุ่ม Rollover Image
1. เลือกตาแหน่งที่ต้องการจะวางรูปภาพ
2. คลิกที่ปุ่ม Rollover Image ที่ แท็บ Common > Rollover Image
พิมพ์URL

20. 3. จะปรากฎหน้าต่าง Insert Rollover Image สาหรับกาหนด Rollover Image
- Original Image กาหนดภาพที่จะแสดงบนหน้าจอเว็บเพจ
- Pollover Image กาหนดภาพที่จะแสดงเมื่อนาเมาส์ไปวางเหนือรูป
- When Clicked, Go to URL กาหนดไฟล์ที่จะเชื่อมโยงเมื่อมีการคลิกไปที่รูปภาพ
4. เซฟหน้าเว็บเพจ และกดปุ่ม F12 เมื่อนาเมาส์ไปวางเหนือรูปภาพ รูปภาพจะสลับเป็นรูปใหม่ที่เลือกไว้