การจัดการเว็บเพจ การออกแบบหน้าด้วยตารางและ Layout

2. การกาหนดค่าเริ่มต้น Dreamweaver CS6
การดู Preferences การดูและกาหนดค่า Preferences ของ โปรแกรม Macromedia Dreamweaver เป็นสิ่งที่
สาคัญที่สุด ของการสร้างเว็บไซต์ ด้วยโปรแกรมนี้ เพราะ Preferences ของโปรแกรมก็คือ การกาหนดค่าเบื้องต้นทั้งหมด ของ
โปรแกรม ถ้าเราออกแบบเว็บโดยไม่ได้ กาหนดค่า เว็บก็จะมีค่าผิดพลาด เพี้ยนจากความเป็นจริง และไม่สามารถแก้ไขได้ใน
เหน้านั้น เราต้อง set ค่าแล้วก็ออกแบบใหม่ มาดูวิธีการกาหนดที่สาคัญดังนี้
การกาหนด Font
1. ไปที่เมนู Edit >Preferences จะได้หน้าต่างการกาหนดค่า ดังรูป
2. หลังจากนั้นให้เลือก Front settings เป็น Thai แล้วในส่วนของ Proportional font และ Code view เป็น
Tahoma เพื่อเป็นการกาหนดค่า Front เริ่มต้น ดังรูป

3. การตั้งกาหนดค่าของเอกสารเริ่มต้น
1. New Document เป็นการกาหนดค่า default ให้เอกสารเริ่มต้น ดังรูป
การตั้งค่าไฟล์เอกสารเริ่มต้น หากต้องการกาหนดค่าตาแหน่งเริ่มต้นชิดบนสุด ซ้ายสุด
1. เลือก Modify > Page Properties…
2. กาหนดค่า Left margin : 0 และ Top margin : 0

4. กาหนดค่า Title เพื่อใช้แสดงใน Title bar บนโปรแกรมเว็บบราวเซอร์ 1. เลือก Modify > Page Properties… แล้วเลือกที่ Title/Encoding
การกาหนด Dreamweaver Site หลังจากที่เราวางโครงสร้างเว็บไซต์ของเราแล้ว ต่อมาเราจะใช้ Dreamweaver Site เข้ามาช่วยในการสร้างและ จัดการเว็บไซต์ของเรา การนา Dreamweaver Site เข้ามาจัดการเว็บไซต์ของเราจะทาให้เราสามารถที่จะทาการอัพโหลดไฟล์ที่ ใช้ในการสร้างเว็บไซต์ไปในเว็บเซิร์ฟเวอร์ได้ ง่ายขึ้น นอกจากนี้Dreamweaver Site ยังช่วยในการตรวจสอบการชื่อโยงของไฟล์ ต่างๆ ให้อีกด้วยเมื่อเวลามีการแก้ไขไฟล์ต่างๆ ในเว็บไซต์ ด้วย
ก่อนเริ่มต้นสร้างเว็บไซต์และเว็บเพจ ควรมีการกาหนดโครงสร้างเว็บไซต์ก่อน ซึ่งเป็นการเตรียมพื้นที่หรือโฟลเดอร์สา หรับเก็บไฟล์เว็บเพจของเว็บไซต์ โดยจัดการสร้างโฟลเดอร์เพื่อเก็บข้อมูลหรือเก็บไฟล์ต่างๆ ให้เป็นหมวดหมู่เพื่อง่ายต่อการจัด ทาเว็บไซต์ และง่ายต่อการบริหารงานเว็บไซต์ ดังนั้นการจัดการวางแผนจัดเก็บข้อมูลลงในโฟลเดอร์จึงเป็นสิ่งสาคัญ ลักษณะ ของ การจัดเก็บควรมีลักษณะดังนี้ โฟล์เดอร์หลักใช้เก็บไฟล์ประเภท .html หรือ .php โฟลเดอร์รูปภาพ โฟลเดอร์เสียง โฟลเดอร์ภาพเคลื่อนไหว

5. อีกทั้งยังสามารถสร้างโฟลเดอร์ย่อย (Sub folder) ลงในโฟลเดอร์ต่าง ๆ ได้อีกด้วย แสดงดังรูป
หลังจากที่ทาความรู้จักกับการกาหนดโครงสร้างของเว็บไซต์ ต่อไปเป็นการสร้างหน้าเว็บไซต์ด้วยโปรแกรม Adobe
Dreamweaver CS6 ประกอบด้วยขั้นตอนดังนี้
การกาหนดโครงสร้างเว็บไซต์
เป็นการเตรียมความพร้อมในการสร้างเว็บไซต์ ควรประกอบด้วยอะไร เช่น เนื้อหา รูปภาพ ภาพเคลื่อนไหวหรือ
มัลติมีเดียต่างๆ ซึ่งควรมีการแบ่งแยกเนื้อหาแต่ละส่วนไว้อย่างชัดเจนไม่ให้ปะปนกัน จากนั้นจึงจะดาเนินการเริ่มต้นสร้างเว็บไซต์
เป็นการเตรียมโฟลเดอร์เพื่อเก็บข้อมูลโดยสร้างเป็นโฟลเดอร์ย่อยในเครื่องคอมพิวเตอร์ โดยถ้าใช้งานร่วมกับโปรแกรม
เซิร์ฟเวอร์จาลองจะสร้างอยู่ในโฟลเดอร์ WWW ตามการสร้างโฟลเดอร์ใช้งานของโปรแกรม
การสร้างไซต์สาหรับจัดเก็บไฟล์เว็บเพจ
การสร้างไซต์ เป็นการสร้างแหล่งสาหรับจัดเก็บไฟล์ต่าง ๆ ที่ใช้ในการออกแบบและพัฒนาเว็บไซต์ อาจประกอบด้วย
ไฟล์รูปภาพ ไฟล์เว็บเพจ ไฟล์ CSS หรือไฟล์ประเภทวีดิโอ-มัลติมีเดียต่าง ๆ ซึ่งมีขั้นตอนดังต่อไปนี้

6. 1. คลิกเลือกเมนู Site
2. คลิกเลือกคาสั่ง New Site จะปรากฏหน้าจอ Site Setup for <ชื่อไซต์>
3. คลิกเลือกแท็บ Site
4. กาหนดชื่อเว็บไซต์จากช่อง Site Name เช่น spathai เป็นต้น
5. คลิก เพื่อเลือกแหล่งที่เก็บไฟล์ต่าง ๆ ของเว็บไซต์
6. เลือกโฟลเดอร์ที่จัดเก็บไฟล์ต่าง ๆ หากยังไม่มีโฟลเดอร์ให้สร้างโฟลเดอร์ใหม่
7. หลังจากเลือกโฟลเดอร์แล้วคลิกปุ่ม

7. การแก้ไขไซต์
การแก้ไขไซต์อาจกระทาได้เนื่องจากมีการเปลี่ยนแปลงขื่อไซต์ใหม่หรือเปลี่ยนแปลงแหล่งจัดเก็บข้อมูลใหม่ หรือ
ปรับเปลี่ยนค่าเกี่ยวกับไซต์ใหม่ ก็สามารถทาได้ดังนี้
1. คลิกเลือกเมนู Site
2. เลือกคาสั่ง Manage Sites
3. คลิกเลือกชื่อเว็บไซต์ที่ต้องการแก้ไข
4. คลิกุปมุ
5. แก้ไขข้อมูลชื่อไซต์
6. แก้ไขโฟลเดอร์แหล่งเก็บไฟล์ของเว็บไซต์
7. คลิกุปมุ เพื่อบันทึกการเปลี่ยนแปลงไซต์

8. 8. คลิกปุ่ม สิ้นสุดการแก้ไขไซต์
การสร้างโฟลเดอร์เพื่อจัดเก็บไฟล์
หลังจากที่สร้างไซต์พร้อมสร้างโฟลเดอร์หลักสาหรับเก็บไฟล์เว็บเพจ จากนั้นจาเป็นต้องสร้างโฟลเดอร์ย่อย เพื่อจัดเก็บ
ไฟล์ข้อมูลต่าง ๆ ที่เกี่ยวข้องในการสร้างเว็บไซต์และเว็บเพจ เช่น โฟลเดอร์เก็บรูปภาพ มัลติมีเดีย และข้อมูลที่เกี่ยวข้องกับการ
สร้างเว็บไซต์ โดยแบ่งเป็นหมวดหมู่แยกตามประเภทของไฟล์ข้อมูลที่ใช้งาน การสร้างหลายโฟลเดอร์ ใช้ขั้นตอนการปฏิบัติ
เช่นเดิม ซึ่งสามารถกระทาได้ตามขั้นตอนดังต่อไปนี้
1. คลิกเมาส์ขวาตรงพาเนล File โดยให้เมาส์ชี้ตรงชื่อไซต์ที่ต้องการสร้างโฟลเดอร์สาหรับเก็บไฟล์ข้อมูลต่าง ๆ (หากไม่
ปรากฏพาเนล File ให้ทาการเปิดพาเนล File โดยคลิกเลือกเมนู Window และคลิกเลือกคาสั่ง File แล้วพาเนล File จะแสดง
อยู่ในส่วนล่างขวาของจอภาพ)
2. เมื่อปรากฏแท็บคาสั่ง ให้เลือกคาสั่ง New Folder เพื่อสร้างโฟลเดอร์ใหม่
3. โปรแกรมจะกาหนดชื่อโฟลเดอร์ให้ ซึ่งสามารถเปลี่ยนแปลงชื่อโฟลเดอร์ได้ โดยลบชื่อโฟลเดอร์ที่โปรแกรมตั้งให้ แล้ว
พิมพ์ชื่อโฟลเดอร์ที่ต้องการแล้วกดแป้น Enter โปรแกรมจะเปลี่ยนชื่อโฟลเดอร์ตามที่กาหนด

9. การสร้างตารางและการปรับแต่งคุณสมบัติ
ในการออกแบบเว็บไซต์ส่วนใหญ่ เรามักจะใช้ตารางมาช่วยในการทา เพราะสามารถช่วยทาให้ง่ายในการจัดการกับ Layout ของเว็บเพจได้ดี ซึ่งในส่วนใหญ่จะพบปัญหา เกี่ยวกับการใส่รูปภาพและและข้อความต่างๆ ซึ่งจะมีวิธีการจัด Layout ด้วยตาราง ดังนี้ 1. ในขั้นตอนแรก ให้คลิกเลือก Workspace แบบ Design 2. คลิกเลือกที่ Insert บนแทบเครื่องมือ ก็จะปรากฏเมนูย่อยขึ้นมา 3. คลิกที่ปุ่มเครื่องมือ Table ดังภาพตัวอย่าง เพื่อแทรกตาราง
เมื่อคลิกที่ Table ก็จะเด้งหน้าต่างดังรูปภาพด้านล่าง
1
2
3
4
5
6
7
8
9
4. Rows คือ จานวนแถวของตาราง 5. Columns คือ จานวนคอลัมน์
7. ความหนาของเส้นตาราง 9. ช่องว่างระหว่างเส้นตาราง
6. ขนาดความกว้างของตาราง กาหนดทั้งแบบ Pixels และ Percent 8. ความห่างระหว่างเส้นตาราง

10. จากภาพด้านล่างกาหนด ความกว้างขนาด 1000 pixels จานวน 7 แถว 5 คอลัมน์
เมื่อนักเรียนสร้างตารางเสร็จจะปรากฏแถบ Properties ด้านล่างของโปรแกรม ดังภาพ ซึ่งหากไม่ปรากฏดังภาพให้ นักเรียนทาการคลิกที่เส้นของตารางจนขึ้น Properties ดังรูป ในส่วนนี้นักเรียนสามารถกาหนดค่า หรือแก้ไขตารางเพิ่มเติมได้ หลังจากที่สร้างตารางนั้นขึ้นมาแล้ว แต่ต้องการเพิ่ม หรือลดตาราง
เมื่อนักเรียนนาเมาส์ไปคลิกที่พื้นที่ในตารางจะปรากฏเมนู ดังภาพด้านล่างขึ้นมาแทน ซึ่งจะเป็นส่วนของ Properties สาหรับจัดการตาราง หรือตกแต่งตารางที่เราสร้างขึ้นมา
1. ในส่วนของ Cell จะมีหน้าที่ทาการรวมช่องตารางเป็นช่องเดียวกัน หรือหากรวมเป็นแล้ว อย่างแบ่งออกเหมือนเดิมก็ สามารถใช้เมนู Cell ในการจัดการได้ 2. Horz สาหรับจัดการในช่องตารางว่าต้องการให้จัดข้อความ หรือภาพไว้ที่ตรงส่วนไหนของช่องตารางนั้น โดยก็จะมี เมนูให้เลือก คือ Left, Center และ Right นอกจากนี้ยังมีเมนู Vert ทาหน้าที่เหมือนกันกับ Horz โดยจะมีเมนูให้เลือกคือ Top, Meddle, Bottom และ Baseline 3. Bg ย่อมาจาก Background หรือพื้นหลังนั้นเอง โดยเราสามารถคลิกเลือกสีได้ตามที่เราต้องการ
1
2
3

11. การสร้าง Banner และ ปุ่มกด
ให้นักเรียนสร้างภาพจากโปรแกรม Photoshop ตามขนาดที่กาหนด - การสร้าง Banner กาหนดขนาดใน Photoshop ดังนี้
จากนั้นก็ให้นักเรียนใส่สีลงไปในภาพ สีใดก็ได้ตามใจชอบ แล้ว Save ไฟล์ออกมาเป็น JPEG จะได้ดังรูป
- การสร้าง ปุ่มกดหรือปุ่ม Social กาหนดขนาดใน Photoshop ดังนี้

12. จากนั้นก็ให้นักเรียนใส่สีลงไปในภาพ สีใดก็ได้ตามใจชอบ แล้ว Save ไฟล์ออกมาเป็น JPEG จะได้ดังรูป
โดยไฟล์ภาพทั้งหมดเก็บไว้ใน โฟลเดอร์เดียวกันทั้งหมด โดยเก็บในมร Appserv > www > 574000
เมื่อนักเรียนสร้างภาพแต่ละรูปจนได้ไฟล์ภาพครบทั้งหมดตามที่ต้องการแล้ว ดังรูปแล้ว
กลับมาเปิดที่โปรแกรม Adobe Dreamweaver CS6 หรือ Dw
1. ให้นักเรียนสร้างตารางขึ้นมาโดยไปที่ Insert > Table

13. 2. กาหนดค่าตาราง ดังภาพด้านล่าง
3. เมื่อได้ตารางมาตามที่ต้องการแล้ว ให้ทาการรวมช่องตารางแถวที่ 1 โดย 3.1 ลากคลุมตารางแถวที่ 1 ทั้ง 2 คอลัมน์
3.2 แล้วกดปุ่ม ทางด้านล่างของโปรแกรม

14. 3.3 แล้วให้ไปคลิกที่ช่องที่เรารวมกันเรียบร้อยแล้ว จากนั้นไปกด Insert > Image
ก่อนการแรกรูปภาพให้ Save ไฟล์งานนี้ก่อนการแทรก
3.4 เลือกไฟล์ภาพที่เราต้องการ แล้วกด OK

15. 3.5 เราก็จะได้ภาพที่เราต้องการแทรกตามต้องการ
4. ในส่วนของปุ่มกดต่างๆ ก็แทรกรูปภาพเข้ามาในลักษณะเดียวกัน หรือ อาจจะใช้วิธีลากเข้ามาวางลงในช่องของ ตารางที่เราต้องการเลยก็ได้
5. ในส่วนของเมนูด้านบน ให้ทาการแทรกตารางเพิ่มเข้ามาอีกรอบ โดยการนาเมาส์ไปคลิก ดังรูป

16. 5.1 แล้วเพิ่มตารางเข้ามาโดยกด Insert > Table แล้วกาหนดตามนี้
5.2 เราก็จะได้ตารางย่อยเพิ่มเข้ามาอีก

17. 6. จากนั้นให้เราทาการแทรกรูปภาพเข้าไปจนครบตามที่กาหนด