1. คู่มือประกอบการสร้างเว็บไซต์
โดยโปรแกรม Macromedia Dreamweaver
จัดทำาโดย
1.นายทวีศักดิ์ เข็มเพชร
53010520012
2.นายภาณุวิชญ์ แสนโกษา
53010520025
3.นายพิษณุพงษ์ สุรพงษ์พิวัฒนะ
53010516046
4.นายนันทวุธ อิมจิต
่
53010516041
5.นางสาวดารารัตน์ สมมาตย์
53010516009
ชันปีที่ 1 คณะศึกษาศาสตร์
้
สาขา เทคโนโลยีและสื่อสารการศึกษา

2. ก
มหาวิทยาลัยมหาสารคาม
คำานำา
คู่มือนี้จัดทำำขึ้นเพื่อประกอบกำรเรียนกำรสอนเกี่ยวกับกำรสร้ำง
เว็บไซต์ด้วยโปรแกรม Dream ซึ่งเป็นกำรเรียนรู้กำรใช้โปรแกรมใน
ด้ำนอื่นๆ ที่นอกเหนือจำกกำรพิมพ์งำนปกติ นอกจำกนั้นคณะผู้จัดทำำยัง
ได้ทำำกำรสร้ำงเว็บไซต์ได้มีควำมรู้เกี่ยวกับฮำร์ดแวร์ ดังนั้นคณะผู้จัดทำำ
จึงได้จัดทำำคู่มือเกี่ยวกับกำรสร้ำงเว็บไซต์นี้เพื่อให้ผู้ศึกษำเข้ำใจวิธีกำร
สร้ำงเว็บไซต์ด้วยโปรแกรม Dream ได้งำยขึ้น หำกผิดพลำดประกำร
่
ใดขออภัยมำ ณ ทีนี้ด้วยคู่มือนี้จัดทำำขึ้นเพื่อประกอบกำรเรียนกำรสอน
่
เกี่ยวกับกำรสร้ำงเว็บไซต์ด้วยโปรแกรม Dream

3. ข
สารบัญ
เรือง
่
หน้า
วำง
โครงสร้ำง……………………………………………………………………………
………1
กำรสร้ำงเว็บไซต์ด้วยโปรแกรม Macromedia
Dreamweave…………….……….……….…….2
กำรตกแต่งเนื้อหำ ( Content) ใน
เว็บเพจ……………………………………………………….5
กำรใส่พื้นหลัง ( Background) และลักษณะพิเศษ................
………………………………….. 7
กำรสร้ำงไฮเปอร์ลงค์ ( Hyperlink)
ิ
…………………………………………………………….8
กำรลิงค์ไปยังเว็บเพจ
อื่น…………………………………………………………………………9
กำรบันทึก
เว็บเพจ…………………………………………………………………
………….…10
อ้ำงอิง…………………………………………………………………………………
………...11

4. 1
วางโครงสร้าง
1. กำำหนดเรื่องของเว็บไซต์
2. กำำหนดส่วนประกอบหลักของเว็บ ประกอบไปด้วย
2.1 ส่วนของ Title
2.2 ส่วนเมนู ประกอบไปด้วย
2.2.1 บทนำำ
2.2.2 กรรณิกำร์
2.2.3 ขนุน
2.2.4 คำำแสด
2.2.5 ฝำง
2.2.6 อัญชัญ
2.2.7 อ้ำงอิง
2.2.8 รำยชื่อสมำชิก
2.3 ส่วนของเนื้อหำ

5. 2
การสร้างเว็บไซต์ด้วยโปรแกรม Macromedia
Dreamweaver
กำรสร้ำงเว็บไซต์ก็คือ กำรสร้ำงเอกสำรสำำหรับแสดงผลบน
อินเทอร์เน็ตหรือเว็บบรำว์เซอร์โดยใช้มำตรฐำน HTML ซึ่งผู้สร้ำงจะ
ต้องมีควำมรูและเข้ำใจโครงสร้ำงภำษำ HTML พอสมควรจึงจะสร้ำงได้
้
ปัจจุบันได้มีกำรพัฒนำโปรแกรมสำำเร็จรูปช่วยในกำรสร้ำงเว็บเพจ
เช่น Dreamweaver และ
FrontPage เป็นต้น เพื่อช่วยให้ผู้พัฒนำเว็บออกแบบได้อย่ำงสวยงำม
และรวดเร็ว โดยไม่ต้องพิมพ์คำำสั่งภำษำ HTML หำกแต่ใช้กรำฟิกเข้ำ
มำช่วยออกแบบ
อย่ำงไรก็ตำม กำรสร้ำงเว็บเพจที่ง่ำยอีกวิธีหนึ่ง คือ กำรสร้ำงด้วย
โปรแกรมไมโครซอฟต์เวิร์ด
ซึ่งมีวิธีกำรสร้ำง ดังนี้
1.ก่อนอื่นเรำก็ต้องเปิดโปรแกรม Dream ทีเรำจะใช้งำนขึ้นมำ จำก
่
นั้นก็ตั้งโฟลเดอร์ จัดเก็บงำนตำมต้องกำร พอเรำเลือกไฟล์
หรือโฟล์เดอร์ ตั้งชื่อไฟล์เสร็จ เรำก็ ดับเบิลคลิกไฟล์ที่เรำต้องกำร ก็
้
จะได้รูปนี้ขึ้นมำ
2. จำกนั้นเรำก็กำำหนดขอบเขตเนื้อหำ ว่ำเรำต้องกำรพื้นที่มำกน้อย
เพียงใด ได้ตำมต้องกำร ก่อนอื่นเรำต้องคลิกปุ่ม เลือก Layout >>
I Insert >>HTML >> Frames >>Top
Insert >>HTML >> Frames >> Bottom

6. Insert >>HTML >> Frames >> Left
Insert >>HTML >> Frames >> Right
3
3. ต่อมำเรำก็จะมำตั้งชื่อ ไฟล์แต่ละไฟล์ของเรำ โดยคลิกขวำ ทีชื่อ ่
ที่ขึ้นให้ เรำเลือกที่คำำว่ำ Save All จำกนั้นเรำก็บันทึกชื่อไฟล์ ต้อง
เป็นภำษำอังกฤษ เท่ำนั้น Save ไว้ใน Dream ทีเรำตั้ง ตั้งแต่ทแรก
่ ี
เพื่อควำมเข้ำใจง่ำยไม่สับสน ถ้ำเรำยังไม่ Save จะมี * ขึ้นให้
เรำเห็น ทีชื่อนั้นๆ
่
4. พอเรำกำำหนดพื้นที่เสร็จเรำก็ใส่ข้อมูลลงไป ตำมขั้นตอนที่เรำวำง
ไว้ พร้อมกำรบันทึกไปด้วยเพื่อไม่ให้เกิดปัญหำตำมมำทีหลัง เรำจะใส่
ภำพหัวข้อบนสุด โดยคลิกที่ Common >> ตัวที่คล้ำยรูปภำพ เรำ
ก็จะได้ภำพนี้ขึ้นมำ เรำก็เลือกว่ำเรำจะเอำภำพไหนขึ้น แล้ว คลิก Ok

7. 4
5. เรำก็จะได้ภำพตำมที่เรำต้องกำร
6. กำรใส่ตำรำง เรำเลือก Layout แล้วเลือก Table จะได้ภำพ
เหมือนด้ำนล่ำง เรำก็ใส่ Rows ใส่Columns ตำมเรำต้องกำร คลิก
Ok

8. 5
การตกแต่งเนื้อหา ( Content) ในเว็บเพจ
7. เรำก็จะได้ตำรำงตำมที่เรำต้องกำร จำกนั้นเรำก็ใส่ข้อควำม ตกแต่ง
ตัวหนังสือ ใส่สีตำมเรำต้องกำร
8. พอเรำตกแต่งตัวหนังสือเสร็จ เรำก็ตกแต่ง พื้นลังของตำรำง พื้น
หลังของของหัวข้อ หรือตำำแหน่งที่เรำอยำกจะใส่ เรำสำมำรถใส่ได้
ตำมต้องกำร แต่ควรใส่ให้พอเหมำะ

9. 7
การใส่พื้นหลัง ( Background) และลักษณะพิเศษในเว็บเพจ
9. วิธีใส่พื้นหลัง เรำเลือกด้ำนข้ำงของภำพเรำด้ำนใด ด้ำนหนึง
่
บริเวณที่ว่ำ คลิกขวำ >> เลือกที่ Page Properties >> เรำก็จะ
ได้ดังภำพด้ำนล่ำง เลือก Link >>เล้วเรำก็เลือกสีตำมต้องกำร
10. กำรใส่เนื้อหำ ของบทนำำเรำต้องวำง Latout ก่อนทุกครั้งเพรำะ
เป็นกำรเหมือนเป็นกรอบป้องกัน เพื่อที่จะให้งำนอยูในตำำแหน่งที่เรำ
่
ต้องกำร กำรใส่บทนำำ เรำสำมำรถ Coppy วำงได้เลย
11. ตัวอย่ำงกำรใส่เนื้อหำร เรำก็คลิก โฟลเดอร์ ทีว่ำงที่เรำต้องกำร
่
ให้งำนเข้ำไปอยู่ขึ้นมำ แล้วเรำก็ เปิดโฟล์เดอร์ จำกนั้นก็ Coppy
งำนใน Word เรำมำวำงใน โฟล์เดอร์เรำได้เลย เรำก็ทำำแบบนีไป ้

10. จนกว่ำเรำจะใส่เนื้อหำครบ ตำมที่เรำต้องกำรเรำก็เปิดมำที่หน้ำหลัก
ของเรำ ก็จะได้ภำพนี้ขึ้นมำ เรำก็ตกแต่งได้ตำมต้องกำรตำมเหมำะสม 8
การสร้างไฮเปอร์ลิงค์ ( Hyperlink)
ไฮเปอร์ลิงค์ หมำยถึง กำรเชื่อมโยงเอกสำรจำกจุดหนึ่งไปยังอีก
จุดหนึ่ง เรียกสั้นว่ำ ลิงค์ ( links )
ซึ่งมีหลำยลักษณะ ทังกำรลิงค์ภำยในเว็บเพจหน้ำเดียวกัน ลิงค์
้
ระหว่ำงหน้ำในเว็บไซต์เดียวกัน และลิงค์ไปยังเว็บไซต์อื่น เหตุผลที่
ต้องสร้ำงลิงค์ ก็คือ ข้อมูลที่จะนำำเสนอในเว็บเพจมีจำำนวนมำกไม่
สำมำรถนำำเสนอให้ครบได้ในหน้ำเดียว จึงต้องเชื่อมโยงเอกสำรจำก
หน้ำหนึ่งไปยังหน้ำอื่นๆ
ลิงค์อำจเป็นตัวอักษร คำำ ข้อควำม ภำพ หรืออื่นๆ โดยจะใช้สี
แตกต่ำงจำกข้อควำมปกติหรือมีขีดเส้นใต้ไว้ สำมำรถคลิกเพื่อลิงค์ไป
ยังตำำแหน่งที่เชื่อมโยงไว้ทันที
การลิงค์ประกอบด้วย
1. ข้อมูลต้นทำง สำำหรับผูใช้คลิกเพื่อเชื่อมโยงไปยังข้อมูล
้
อื่นๆ
2. ข้อมูลปลำยทำง เป็นหน้ำเว็บเพจ หรือแหล่งข้อมูลที่
สร้ำงไว้สำำหรับแสดงผล

11. 9
การลิงค์ไปยังเว็บเพจอื่น
ในกรณีที่เรำสร้ำงเว็บเพจไว้หลำยหน้ำและกำำหนดให้มีกำรเชื่อม
โยงกันไปตำมหัวข้อเรื่อง เมื่อผู้อ่ำนคลิกก็จะไปยังเรื่องที่ต้องกำรนั้น
ทันที
การสร้างลิงค์ไปยังเว็บเพจอืน มีวิธีการทำาดังนี้
่
1. คลุมดำำสิ่งที่เรำต้องกำร ลิงค์
2. เปิดไฟล์ข้อมูลต้นทำง แล้วคลิกระบำยข้อควำมที่ต้องกำร
จะสร้ำงลิงค์ Coppy
3. นำำมำวำงตรงคำำว่ำ Link

12. 100
การบันทึกเว็บเพจ
เมื่อสร้ำงและตกแต่งเว็บเพจเสร็จแล้ว จะต้องบันทึกไฟล์ให้เป็น
เอกสำร HTML ดังนี้
1. คลิกที่คำำสั่ง File => Save Frame All
2. จะได้รูปดังภำพ จำกนั้นเรำก็ตั้งชื่อ งำนของเรำ เรำก็กด Save
เรำก็จะได้งำนของเรำ
3. เรำก็จะได้เว็บเพจตำมที่เรำต้องกำร

13. อ้างอิง
http://www.rspg.or.th/plants_data/herbs/herbs_200.htm
http://www.rspg.or.th/plants_data/herbs/herb1.htm
http://www.rspg.or.th/plants_data/herbs/herbs_30.htm