merged (pdf.io)

ขั้นตอนที่ 3 ใส่ข้อความบนหน้าเว็บ

การใส่ข้อความบนหน้าเว็บ คล้ายกับการพิมพ์เอกสารใน โปรแกรม Word วิธี
การ คือ คลิก บนพื้นที่ทำงานแล้วพิมพ์ข้อความ ลงบนหน้าเว็บได้เลย

คลิกเมาส์เพื่อพิมพ์ข้อความใหม่ หรือแก้ไขข้อความในหน้าเว็บ

ภาพที่ 4.18 การใส่ข้อความหน้าเว็บ
ที่มา : https://www.youtube.com/watch?v=muUC4FYMz-A

การกดปุ่ม Enter เป็นการขึ้นย่อหน้าใหม่ และข้อความในแต่ละย่อหน้าจะถูก
จัดให้เต็มหน้าต่าง

คลิกเมาส์หน้าข้อความที่ต้องการขึ้นย่อหน้าใหม่ แล้วกดปุ่ม Enter แสดงผลลัพธ์การขึ้นย่อหน้าใหม่







ภาพที่ 4.19 การขึ้นย่อหน้าใหม่


ที่มา : https://www.youtube.com/watch?v=muUC4FYMz-A


ในกรณีที่ต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดิม ให้กด Shift+Enter แทน

(หรือคลิกแท็บ Text และคลิกปุ่ม Characters->Line Break ก็ได้)
1. คลิกเมาส์หน้าข้อความที่ต้องการขึ้นบรรทัดใหม่



2.เลือก text

3. คลิกเมาส์ที่ Characters>Lone
Break

44

4.8 บันทึกไฟล์เว็บเพจที่สร้าง

เมื่อสร้างเว็บเพจได้ตามต้องการแล้ว ให้บันทึกไฟล์เว็บเพจ โดยเลือกคำสั่ง File-
>Sal(หรือกดคีย์ลัด Ctrl+S) ในกรณีที่ยังไม่เคยบันทึกไฟล์นี้มาก่อน โปรแกรม
Dreamweaver กำหนดให้ระบุชื่อไฟล์ใหม่ด้วย

จากนั้นเมื่อใดที่แก้ไขหน้าเว็บนี้ และต้องการบันทึกการเปลี่ยนแปลง ก็ให้เลือกคำ
File->Save เพื่อบันทึกหน้าเว็บแทนที่ไฟล์เดิมที่เคยบันทึกไว้ได้ แต่ถ้าต้องการบันทึก
ไฟ ไว้ที่ตำแหน่งใหม่หรือบันทึกเป็นไฟล์ใหม่ ให้เลือกคำสั่ง File->Save As... และกำห
ตำแหน่งเก็บและชื่อไฟล์ใหม่ได้

4.9 เปิดดูหน้าเว็บที่สร้างบนเบราว์เซอร์

เมื่อบันทึกหน้าเว็บที่สร้างเสร็จเรียบร้อยแล้ว ให้เปิดดูหน้าเว็บได้บนเบราว์เซอร์
โดย เลือกคำสั่ง File->Preview in Browser-> ชื่อเบราว์เซอร์ที่ติดตั้งไว้ในเครื่อง
(หรือกดคีย์ลัด F12)

สรุป

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




45

แบบทดสอบหน่วยที่ 4

คำสั่ง จงเลือกคำตอบที่ถูกที่สุดเพียงข้อเดียว

1. หน้าโฮมเพจหลัก ควรตั้งชื่อไฟล์ตามข้อใดต่อไปนี้
ก. first.htm
ข. this.htm
ค. start.htm
ง. index.htm

2. ปัจจุบันการกำหนดภาษาไทยบนเว็บ มีอยู่ 2 รูปแบบ คือข้อใด
ก. PostScript และ ThaiText
ข. Thai (Windows) และ PostScript
ค. Unicode (UTF-8) และ PostScript
ง. Thai (Windows) bla: Unicode (UTF-8)

3. หากต้องการรองรับการแสดงผลตัวอักษรบนอุปกรณ์พกพา ควรเลือกรูปแบบใด
ก. PostScript
ข. ThaiText
ค. Thai (Windows)
ง. Unicode (UTF-8)

4. องค์ประกอบบนหน้าเว็บ เช่น ตาราง รูปภาพ แบบฟอร์ม เรียกว่าอะไร
ก. วัตถุ
ข. บล็อก
ค. ออบเจ็กต์
ง. แอคชั่น

5. หากต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดิม ให้กดปุ่มใดต่อไปนี้
ก. Enter
ข. Alt+Enter
ค. Ctrl+Enter
ง. Shift+Enter

46

6. ปุ่มใดใช้สำหรับดูหน้าเว็บที่สร้างบนเบราว์เซอร์
ก. F9
ข. F10
ค. F11
ง . F12

7. Alternate Text คือ การกำหนดค่าใด
ก. กำหนดข้อความเสียง
ข. กำหนดข้อความแบบลอย
ค. กำหนดข้อความแทนภาพ
ง. กำหนดข้อความบรรยายภาพ

8. คำสั่ง File-> Save All Related Files เป็นคำสั่งไว้สำหรับทำงานใด
ก. บันทึกไฟล์ที่เกี่ยวข้องทั้งหมด
ข. บันทึกไฟล์ไปเก็บที่เซิร์ฟเวอร์
ค. อัพโหลดไฟล์ไปเก็บที่เซิร์ฟเวอร์
ง. บันทึกไฟล์สำรองเก็บไว้ที่เซิร์ฟเวอร์

9. เครื่องหมาย * หลังชื่อไฟล์เตือนให้ทราบถึงข้อใด
ก. ชื่อไฟล์ซ้ำกับไฟล์อื่น
ข. ไฟล์มีขนาดใหญ่เกินไป
ค. ไฟล์มีข้อผิดพลาดไม่สมบูรณ์
ง. มีการเปลี่ยนแปลงแต่ยังไม่ถูกบันทึก

10. การตั้งชื่อไฟล์ ข้อใดผิด
ก. specialDay
ข. Specialday
ค. SpecialDay
ง. special day

47

ใบงาน

คำสั่ง จงสร้างเว็บไซต์ขึ้นมาหนึ่งเว็บไซต์ โดยมีรายละเอียดตามตัวอย่าง
ดังต่อไปนี้

1. กำหนดชื่อให้กับโฟลเดอร์ที่ใช้เก็บเว็บไซต์ เป็น My Homepage
2. สร้างโฟลเดอร์ย่อยให้กับเว็บไซต์ของเราต่อไปนี้คือ โฟลเดอร์
Introduction,Pictures และ Products
3. สร้างเว็บเพจใหม่ขึ้นมาให้เป็นหน้าโฮมเพจหลัก และตั้งชื่อว่า index.htm
4. เปิดเว็บเพจindex.html ขึ้นมา แล้วกำหนดชื่อหน้าเว็บเพจนี้เป็น Welcome to
My Homepage




48

หน่วยที่ 5

การสร้างข้อความในเว็บไซต์

สาระสำคัญ

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

สาระการเรียนรู้

1. การเลือกข้อความ
2. การตกแต่งและจัดรูปแบบข้อความ

วัตถุประสงค์

1. เลือกข้อความที่ต้องการได้
2. ตกแต่งและจัดรูปแบบข้อความได้

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

5.1 การเลือกข้อความ

ก่อนจะตกแต่งข้อความที่พิมพ์ไว้ ให้เลือกข้อความเฉพาะส่วนที่ต้องการก่อน การ
เลือกข้อความมีหลายวิธี ดังนี้

เลือกข้อความเฉพาะส่วนที่ต้องการ

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

เลือกข้อความภายในย่อหน้าเดียวกัน

คลิกที่บรรทัดแรกของย่อหน้าและลากเมาส์มาถึงบรรทัดสุดท้ายในย่อหน้าที่ต้องการให้
เกิดแถบสีดำดังรูป

เลือกข้อความทั้งหมด

เลือกคำสั่ง Edit->Select AIIหรือกดคีย์ลัด Ctrl

การคลิกแท็ก HTML ที่แถบสถานะ

สำหรับผู้ที่มีพื้นฐาน HTML สามารถเลือกข้อความได้ โดยคลิกที่แท็ก HTML ดังนี้

เลือกข้อความทั้งย่อหน้า
คลิกที่ข้อความส่วนใดก็ได้ภายในย่อหน้า และคลิกที่แท็ก <p> บนแถบสถานะเพื่อ
เลือกข้อความทั้งย่อหน้า(เป็นคำสั่ง HTML ที่ใช้กำหนดย่อหน้าให้กับข้อความ ซึ่งการ
คลิกที่แท็กนี้เป็นการเลือกข้อความทั้งหมดภายในย่อหน้านั้น)

เลือกข้อความทั้งหมด
หากคลิกเมาส์ที่แท็ก <body> บนแถบสถานะ จะเป็นการเลือกข้อความทั้งหมดใน
หน้าเว็บ (แท็ก <body> เป็น คำสั่ง HTML ที่ใช้กำหนดเนื้อหาทั้งหมดบนหน้าเว็บ ซึ่ง
การคลิกที่แท็กนี้ เป็นการเลือกข้อความทั้งหมดที่ปรากฏในหน้า เว็บนั้น)

50

5.2 การตกแต่งและจัดรูปแบบข้อความ

หลังจากคลิกเมาส์เลือกข้อความแล้ว สามารถปรับแต่งและจัดรูปแบบข้อความโดย
กำหนดค่าใน Property Inspector แล้วเลือกกำหนด 2 รูปแบบคือแบบ css และ
แบบ HTML ดังนี้

ภาพที่ 5.1 แสดงกำหนดค่าใน property inspector ด้วยรูปแบบ HTML
ที่มา : http://www.pw.ac.th/krumeechai/ch11.html

ภาพที่ 5.2 แสดงการกำหนดค่าใน Property Inspector ด้วยรูปแบบ CSS
ที่มา : https://www.stou.ac.th/Offices/Opr/planning.pdf
-

51

การกำหนดคุณสมบัติด้วย CSS

ในการกำหนดคุณสมบัติให้กับข้อความ หากใช้คุณสมบัติของ HTML
สามารถกำหนดให้กับข้อความได้เลยแต่ถ้าใช้คุณสมบัติของCSS (Cascading
Style Sheets)ต้องเลือกตัวเลือก <New Inline Style> ในช่อง Targeted
Rule ก่อนจึงสามารถกำหนดคุณสมบัติของ Css ให้กับข้อความได้ ตัวเลือกนี้
เป็นการบอกว่าคุณสมบัติ css นี้ใช้เฉพาะกับตำแหน่งที่เลือกเท่านั้น แต่ถ้าใน
ช่อง Targeted Rule ถูกเลือกเป็น <New CSS Rules หมายถึง การสร้างกฏ
ใหม่ สามารถนำกฏใหม่ที่สร้างไปใช้ซ้ำในตำแหน่งอื่นของหน้าเว็บได้ และเมื่อมี
การแก้ไขกฏจะมีผลกับทุกตำแหน่งที่นำกฎนี้มาใช้

การจัดตำแหน่งข้อความ

สามารถจัดวางตำแหน่งข้อความได้อย่างเหมาะสม โดยใช้วิธีต่อไปนี้

ภาพที่ 5.3 ขั้นตอนการจัดตำแหน่งข้อความ
ที่มา : https://www.teachernu.com

52

การจัดย่อหน้า

การจัดย่อหน้าให้มีระยะเว้น ห่างจากขอบ ทำได้โดยคลิกที่ปุ่ม (Text Indent)
ตามระยะห่างของ ย่อหน้าที่ต้องการ และสามารถ ยกเลิกระยะห่างที่กำหนดไว้ได้
โดย คลิกที่ปุ่ม (Text Outdent)

ภาพที่ 5.4 ขั้นตอนการจัดย่อหน้า
ที่มา : https://www.teachernu.com

ใส่ Bullet และตัวเลขกำกับในแต่ละบรรทัด

สามารถใส่ Bulet หรือตัวเลขกำกับเนื้อหา ในแต่ละบรรทัด เพื่อจัดลำดับ
เนื้อหาให้เป็น ระเบียบมากขึ้น โดยคลิกปุ่ม ul (Unordered List) เพื่อใส่ Bullet ใน
แต่ละบรรทัด หรือคลิกปุ่ม ol (Ordered List) เพื่อใส่หมายเลขในแต่ละบรรทัดก็ได้

1.เลือกข้อความที่ต้องการใส่ Bullet หรือตัวเลขกำกับ



53

เลือก HTML

คลิกที่ เพื่อใส่Bullet
กำกับข้อความในแต่ละบรรทัด

ภาพที่ 5.5 ขั้นตอนการใส่ Bullet และตัวเลขกำกับในแต่ละบรรทัด
ที่มา : https://sites.google.com/dreamweaver



การเว้นวรรคระหว่างตัวอักษร

ในการสร้างเว็บ ผู้สร้างไม่สามารถเคาะ Space เพื่อเว้นวรรคหลาย ๆ ครั้ง
เหมือนใน โปรแกรม Word ได้ เนื่องจากหน้าเว็บจะมองการเว้นวรรคทั้งหมด
เป็นการเว้นวรรคเดียวดังนั้นจึงต้องเปลี่ยนไปใช้สัญลักษณ์Non-Breaking
Space แทน โดยคลิกที่ปุ่ม ในแท็บ Text (หรือกดคีย์ลัด Ctrl+Shift+Space)

ภาพที่ 5.6 ขั้นตอนการเว้นวรรคระหว่างตัวอักษร
ที่มา : https://sites.google.com/sitedreamweaver

54

แทรกสัญลักษณ์พิเศษ

การแทรกสัญลักษณ์พิเศษ เช่น สกุลเงิน หรือสัญลักษณ์แสดงลิขสิทธิ์ต่างๆ
ทำได้โดยการเลือกสัญลักษณ์พิเศษจากแท็บ Text

ภาพที่ 5.7 ขั้นตอน การแทรกสัญลักษณ์พิเศษ
ที่มา : https://www.dwthai.com

แทรกเส้นคั่นระหว่างบรรทัด

ภาพที่ 5.8 ขั้นตอนการแทรกเส้นคั่นระหว่างบรรทัด
ที่มา : https://sites.google.com/site/dreamweavercs6byjatuporn

55

สรุป

การสร้างข้อความ เริ่มจากการพิมพ์ข้อความหรือคัดลอกข้อความมาลง
ใน หน้าเว็บ และเลือกส่วนของข้อความที่ต้องการปรับแต่ง โดยสามารถเลือก
ได้ทั้งแบบ เฉพาะส่วนที่ต้องการ เลือกทั้งย่อหน้า หรือเลือกข้อความทั้งหมด
การตกแต่งข้อความคล้ายกับการตกแต่งข้อความในโปรแกรมงานเอกสาร
ทั่วไป อาทิ การใส่สีให้กับ ข้อความ การจัดย่อหน้า การเว้นวรรค การจัดลำดับ
ตัวเลข การแทรกสัญลักษณ์ พิเศษและการแทรกเส้นคั่นระหว่างบรรทัด

แบบทดสอบท้ายหน่วยที่ 5

คำสั่ง จงเลือกคำตอบที่ถูกต้องที่สุดเพียงข้อเดียว

1. ขนาดมาตรฐานตัวอักษรใน Properties Inpsector ของการจัดรูปแบบแบบ CSS มี

ขนาด เท่าไหร่

ก. 10 ข. 12

ค. 14 ง. 16

2. คีย์ใดใช้ในการขึ้นบรรทัดใหม่ ข. Alt+Enter
ก. Enter ง. Shift+Enter
ค. Ctrl+Enter

3. ถ้าต้องการแทรกสัญลักษณ์พิเศษ ต้องเลือกที่กลุ่มคำสั่งใด

ก. Text ข. Data

ค. Symbol ง. Common

4. แท็ก <p> เป็นการเลือกข้อความในลักษณะใด

ก. ย่อหน้า ข. ทั้งหมดในหน้าเว็บ

ค. ข้อความที่กำลังทำงานอยู่ ง. พารากราฟแรกของหน้าเว็บ

5. ปุ่ม ใช้สำหรับการทำงานใด ข. ขึ้นบรรทัดใหม่
ก. เว้นวรรคข้อความ ง. ไปยังข้อความสุดท้าย
ค. ขึ้นพารากราฟใหม่

56

6. คีย์ใดใช้ในการเว้นวรรคหลาย ๆ ครั้ง
ก. Ctrl+Space
ข. Shift+Enter
ค. Ctrl+Shift+Enter
ง. Ctrl+Shift+Space

7. แท็ก <body> เป็นการเลือกข้อความในลักษณะใด
ก. ย่อหน้า
ข. ทั้งหมดในหน้าเว็บ
ค. ข้อความที่กำลังทำงานอยู่
ง. พารากราฟแรกของหน้าเว็บ

8. ปุ่ม BR ใช้สำหรับการทำงานใด
ก. ขึ้นบรรทัดใหม่
ข. เว้นวรรคข้อความ
ค. ขึ้นพารากราฟใหม่
ง. ไปยังข้อความสุดท้าย

9. คำสั่งใดใช้สำหรับการแทรกเส้นคั่นระหว่างบรรทัด
ก. Insert->HTML-> Vertical Line
ข. Insert->HTML->Vertical Rule
ค. Insert->HTML->Horizontal Line
ง. Insert->HTML->Horizontal Rule

10. การกำหนดขนาดตัวอักษรเป็น None จะทำให้ผลลัพธ์เป็นอย่างไร
ก. จะไม่แสดงข้อความนั้นบนเว็บ
ข. โปรแกรมจะไม่อนุญาตให้บันทึกได้
ค. ตัวอักษรในการทำงานจะเป็นเครื่องหมาย -
ง. ขนาดตัวอักษรจะขึ้นกับค่าที่กำหนดในเบราว์เซอร์






57

ใบงาน

คำสั่ง จงใส่ข้อความบรรยายรายละเอียดของเว็บเพจ index.htmlให้มีลักษณะ
ของตัวอักษร และการจัดเรียงตามตัวอย่างดังต่อไปนี้

1. ขึ้นบรรทัดใหม่ และพิมพ์หัวเรื่อง “บริษัท ซัคเซสมีเดีย แทรเวล จำกัด” นำ
เสนอบนหน้าเว็บทางซ้ายมือ และกำหนดให้ตัวอักษรเป็นตัวหนา และขนาดตัวอักษรที่
ใหญ่กว่าส่วนอื่น ๆ

2. พิมพ์เนื้อหาเพิ่มเติม และกำหนดให้มีการขึ้นบรรทัดใหม่
3. สร้างเส้นคั่นระหว่างบรรทัด
4. พิมพ์ข้อมูลราคาห้องพัก และกำหนดให้เป็นตัวหนา และเอน โดยเว้นช่องว่างให้
มาก ๆ เพื่อพิมพ์ราคาห้อง
5. ใส่ Bullet ซึ่งเป็นเครื่องหมายสัญลักษณ์ในการจัดวางข้อความให้สวยงาม
6. บันทึกหน้าเว็บเพจนี้ที่สร้างขึ้นเป็นชื่อ index.html

58

หน่วยที่ 6

การใช้โปรแกรมกราฟิกเสริมในการออกแบบเว็บไซต์

สาระสำคัญ

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

สาระการเรียนรู้

1. การใส่ภาพลงในหน้าเว็บเพจ
2. การปรับแต่งรายละเอียดของภาพ
3. การใช้โปรแกรมสำเร็จรูปในการออกแบบเว็บไซต์

วัตถุประสงค์

1. สามารถใส่ภาพลงในหน้าเว็บเพจได้อย่างถูกต้อง
2. สามารถปรับแต่งรายละเอียดของภาพได้
3. สามารถใช้โปรแกรมสำเร็จรูปในการออกแบบเว็บไซต์ได้

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

6.1 การใส่ภาพลงในหน้าเว็บเพจ

การใส่ภาพลงในหน้าเว็บเพจทำได้โดยการคลิกปุ่ม (image) ในแท็บ และเรียก
ใช้ไฟล์ภาพที่จัดเก็บอยู่ในโฟลเดอร์ชื่อ images มาใช้ ดังนี้

1. คลิกเมาส์ที่ปุ่มลูกศร แล้วเลือกเครื่องมือ ที่อยู่ในแท็บ Common Image หรือ
เลือกคำสั่ง Insert-> Image เพื่อแทรกภาพลงบนหน้าเว็บ

2. จะปรากฎหน้าต่าง Select Image Source ให้เลือกรูปภาพที่ต้องการ และ
คลิกเมาส์ ปุ่ม OK Common

ภาพที่ 6.1 ขั้นตอนการใส่ภาพลงหน้าเว็บเพจ
ที่มา : https://sites.google.com/site/dreamweavercs6byjatuporn

60

Note

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

• JPEG สำหรับภาพถ่าย หรือภาพวาดที่มีจำนวนสีมาก ๆ
• GIF หรือ PNG-8 สำหรับภาพที่มีลักษณะเป็นลายเส้น หรือภาพที่ต้องการ
สร้างเป็นภาพโปร่งใส เช่น ภาพการ์ตูน และภาพเคลื่อนไหว
• PNG-24 สำหรับภาพถ่ายที่ต้องการให้มีลักษณะโปร่งใส แต่ไฟล์ที่ได้หลัง
การบีบอัด จะมีขนาดใหญ่กว่าไฟล์ JPEG และมีคุณภาพมากกว่าไฟล์ JPEG

6.2 การปรับแต่งรายละเอียดของภาพ

หากต้องการปรับแต่งรายละเอียดของภาพ ให้คลิกเลือกที่ภาพนั้นแล้ว
เข้าไปปรับรายละเอียดได้ที่Property Inspector

ปรับขนาดของภาพ

สามารถกำหนดขนาดใหม่ให้กับภาพ โดยระบุความกว้างและความยาวที่
ต้องการจาก Property Inspector ได้ นอกจากนี้สามารถปรับขนาดของภาพ
โดยการคลิกที่ปุ่มสีดำ ที่อยู่รอบภาพนั้น แล้วลากเมาส์เพื่อปรับขนาดภาพไปมา
ได้

1. คลิกเมาส์ที่ปุ่มสีดำรอบภาพ เพื่อย่อหรือขยายขนาดของภาพที่ต้องการ
(หากต้องการย่อหรือขยายภาพให้ได้สัดส่วนตามความกว้างและความสูงของ
ภาพ ให้กดปุ่ม<Shift > ค้างไว้ แล้วคลิกปุ่มสีดำที่มุมภาพด้านล่าง จากนั้นลาก
เพื่อย่อหรือขยายภาพให้ได้สัดส่วนตามต้องการ) หรือกำหนดขนาดของภาพได้
เองที่ช่อง (ความกว้าง) และ H(ความสูง) จาก Property Inspector

2. แสดงภาพที่ถูกย่อขนาดลงมา

61

ภาพที่ 6.2 ขั้นตอนการปรับขนาดของภาพ
ที่มา : https://sites.google.com/site/dreamweavercs6byjatuporn

ใส่กรอบให้กับภาพ

บางครั้ง อาจต้องการใส่กรอบให้กับภาพที่แสดงเพื่อเน้นภาพนั้น หรือแยกส่วน
ที่เป็น ภาพออกจากข้อความ ซึ่งทำได้โดยคลิกที่ภาพแล้วกำหนดค่าตัวเลขในช่อง
Border ใน Property Inspector

ภาพที่ 6.3 ขั้นตอนการใส่กรอบให้ภาพ
ที่มา : https://sites.google.com/site/dreamweavercs6byjatuporn

62

การจัดเรียงภาพให้เข้ากับข้อความ

เมื่อต้องการใส่ข้อความเพิ่มเติมควบคู่กับการวางภาพ สามารถจัดตำแหน่ง
ระหว่าง ข้อความและภาพได้ โดยใช้ Align

การกำหนดระยะห่างจากขอบภาพกับข้อความ

สามารถปรับระยะห่างจากขอบของภาพถึงขอบของสิ่งที่อยู่ล้อมภาพได้ ในช่อง
Vertical Space และ Horizontal Space ซึ่งเป็นระยะห่างของแนวตั้งและแนวนอน
ตามลำดับ

6.3 การใช้โปรแกรมสำเร็จรูปในการออกแบบสร้างเว็บไซต์

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

ในตัวอย่างต่อไปนี้ เป็นการใช้โปรแกรม Photoshop สร้างหัวเว็บ (Heading)
หัวเว็บ เป็นส่วนที่อยู่ด้านบนของหน้าเว็บ และเป็นส่วนที่สำคัญส่วนหนึ่งประกอบ
ด้วยโลโก้ (Logo) ชื่อเว็บไซต์ เมนู ลิงก์ สำหรับเป็นจุดเชื่อมโยงไปสู่เนื้อหาของ
เว็บไซต์ ตัวอย่างการสร้าง หัวเว็บไซต์ด้วยโปรแกรม Photoshop มีขั้นตอนดังนี้

1. สร้างพื้นที่การทำงานสำหรับสร้างหัวเว็บไซต์ โดยการใช้คำสั่ง File->New
2. กำหนดขนาด Width:1024 , Height:200, Resolution: 72 และกำหนด
Background Contents: Transparent เสร็จแล้วคลิกที่ปุ่ม OK จะได้พื้นที่การ
ทำงาน
3. นำภาพพื้นหลังที่ต้องการใช้เข้ามาวาง โดยเลือกคำสั่ง File-Place จากนั้น
เลือด ภาพที่ต้องการ
4. ภาพที่นำเข้ามาอาจมีขนาดเล็กกว่าพื้นที่ที่จะวาง และเพื่อความสมส่วนอาจ
จะขยาย ขนาดของภาพให้ใหญ่โดยลากปรับขนาดที่มุมของภาพ และพื้นที่บางส่วน
ของภาพอาจหาย ไป ดังรูป เสร็จแล้วกดปุ่ม <Enter>

63

5. ภาพที่นำเข้ามาดูเด่นชัดทั้งภาพจึงไม่เหมาะที่จะนำโลโก้หรือวางข้อความ
จึงต้อง ทำให้บริเวณที่จะวางข้อความดูสีจางหรืออ่อนลงไป ในที่นี้จะสร้างเลเยอร์
ขึ้นมาใหม่ และใน เลเยอร์นี้ จะทำการสร้างพื้นที่สีแบบไล่เฉดไป

5.1 สร้างเลเยอร์ใหม่ขึ้นมา เป็นเลเยอร์สำหรับวางพื้นที่ที่จะช่วยทำให้ภาพ
ในเลเยอร์ภาพพื้นหลังมีเฉดสีที่ดูอ่อนลงไป

5.2 ใช้เครื่องมือ Selection Tool แล้วกำหนดพื้นที่เพื่อจะใส่สีลงไป
5.3 ใช้เครื่องมือ Paint Bucket Tool เลือกสี Foreground เป็นสีน้ำตาล
เพราะภาพ พื้นหลังที่เลือกเป็นภาพโทนเดียวกัน
5.4 ใช้เครื่องมือ Gradient Tool แล้วเลือกรูปแบบการไล่โทนจากตัวเลือก
ด้านบน จากนั้นลากเป็นแนวนอนจากซ้ายมือไปขวามือ ดังรูป
5.5 ที่พาเนล Layer ให้กำหนดค่า Opacity เพื่อกำหนดค่าความโปร่งแสง
ให้ทะลุลง ไปด้านล่าง ในที่นี่กำหนดค่า Opacity = 57
5.6 เมื่อได้ภาพที่ต้องการแล้ว กดปุ่ม Ctrl +d เพื่อยกเลิก Selection
6. ขั้นตอนต่อไป จะนำโลโก้ของบริษัทเข้ามาวางไว้ทางด้านซ้ายของหัวเว็บ
ภาพที่นำ เข้ามาควรเป็นภาพที่ไม่มีพื้นหลังสีใด ๆ เพื่อให้เห็นโลโก้ลอยอยู่บนพื้นหลัง
โดยสร้างเลเยอร์ ใหม่สำหรับวางโลโก้ จากนั้นนำภาพเข้ามาแล้วให้ปรับขนาดและ
จัดวางให้เหมาะสม โดยใช้ Move Tool ลักษณะเดียวกับการปรับภาพพื้นหลัง
7. พิมพ์ข้อความชื่อบริษัทลงพื้นที่การทำงาน โดยสร้างเลเยอร์ใหม่ จากนั้นใช้
เครื่องมือ Type Tools แล้วพิมพ์ข้อความ กำหนดรูปแบบ ขนาด สี ของข้อความให้
เหมาะสมจากเครื่อง มือด้านบน
ทำในลักษณะเดียวกัน หากต้องการใส่ข้อความอื่น ๆ เพิ่มเติม เช่น สโลแกนของ
บริษัทหรือข้อความอื่น ๆ ที่ต้องการสื่อสารไปยังลูกค้า
8. เมื่อได้ภาพเป็นที่พอใจแล้ว ให้บันทึกเพื่อนำไปใช้งานบนเว็บ โดยไปที่เมนู
File- Save for Web... เลือกประเภทของไฟล์เป็น JPG หรือประเภทอื่นตาม
ต้องการ โดยในค่าของ Quality ยิ่งสูง ขนาดของไฟล์จะใหญ่ขึ้น จากนั้นคลิกที่ปุ่ม
Save.. แล้วบันทึกชื่อไฟล์ในช่อง File name เลือก Format เป็น Images Only
คลิกที่ Save จะได้ภาพสำหรับนำไปใช้ใน โปรแกรม Dreamweaver ต่อไป

64

สรุป

ไฟล์ภาพที่เหมาะสมในการใช้งานในหน้าเว็บไซต์ คือ ไฟล์ JPEG, GIF, PNG-
24 เนื่องจากสามารถแสดงค่าสีบนหน้าจอได้มากและขนาดไฟล์ภาพต่ำ การใส่
ภาพลงในหน้าเว็บไซต์ทำได้โดยคำสั่ง Image การปรับแต่งรายละเอียดของ ภาพ
มีหลายรูปแบบ เช่น การปรับขนาดของภาพ การใส่ข้อความกำกับภาพ การใส่
กรอบให้กับภาพการกำหนดระยะห่างจากขอบภาพกับข้อความนอกจากนี้ยัง
สามารถใช้โปรแกรมกราฟิกเสริมเข้ามาช่วยในการออกแบบภาพได้ เช่น การใช้
โปรแกรม Photoshop สำหรับการปรับแต่งภาพประเภทภาพถ่าย และโปรแกรม
Illustrator สำหรับการปรับแต่งภาพประเภทภาพลายเส้น

แบบทดสอบท้ายหน่วยที่ 6

คำสั่ง จงเลือกคำตอบที่ถูกต้องที่สุดเพียงข้อเดียว

1. ไฟล์ฟอร์แมตแบบใดที่ไม่สนับสนุนการทำงานภาพแบบโปร่งแสง

ก. JPEG ข. PNG

ค. GIF ง. ไม่มีข้อผิด

2. ข้อใดเป็นคีย์ลัดในการเพิ่มภาพเข้าไปในเว็บเพจ

ก. Ctrl+Alt+U ข. Ctrl+Alt+l

ค. Ctrl+Alt+0 ง. Ctrl+Alt+P

3. รูปแบบการวางตำแหน่งของข้อความแบบใดที่ทำให้ขอบล่างของภาพอยู่ตรงกับแนวล่าง

สุดของข้อความ

ก. Default ข. Absolute Bottom

ค. Bottom ง. Baseline

4. ข้อใดไม่ใช่ข้อควรคำนึงในการเขียนเว็บเพจ
ก. ความละเอียดของภาพ
ข. ความเร็วของเครื่องพีซี
ค. หน่วยวัดมาตรฐานของภาพบนเว็บ
ง. การใช้ชนิดของเบราว์เซอร์ที่แตกต่างกัน

65

5. ข้อใดไม่ใช้วิธีการแก้ไขปัญหาไฟล์ภาพขนาดใหญ่บนเว็บเพจ
ก. พยายามใช้ภาพเดิมในหน้าเว็บไซต์อื่น ๆ
ข. แบ่งภาพเป็นไฟล์เล็ก ๆ นำมาเรียงต่อเป็นภาพใหญ่
ค. กำหนดโครงสร้างของเว็บให้แสดงผลในส่วนที่เป็นภาพก่อน
ง. ลดขนาดภาพโดยสดจำนวนสีที่ใช้ หรือลดความละเอียดของภาพ

6. การปรับแต่งรายละเอียดของภาพ ทำได้ที่กลุ่มคำสั่งใด

ก. Common ข. Relative Image

ค. Property Inspector ง. Select Image Source

7. ข้อจำกัดของไฟล์ฟอร์แมตแบบ GIF คืออะไร
ก. ใช้งานอยู่ที่ 256 สี
ข. ไม่สนับสนุนการบีบอัดข้อมูลที่มีภาพโปร่งแสง
ค. หลังการบีบอัดพิกเซลที่โปร่งแสงจะถูกแทนที่ด้วยสีของ Background
ง. ลักษณะการบีบอัดโดยการลบข้อมูลส่วนที่ซ้ำซ้อนกันมากที่สุดออกทำให้คุณภาพ

ของภาพ จะสูญเสียมากกว่าไฟล์ฟอร์แมตอื่น

8. ข้อใดที่ไม่สามารถทำได้ในการปรับแต่งรายละเอียดของภาพบนเว็บเพจ
ก. ใส่ชื่อของรูปภาพ
ข. แสดงที่เก็บไฟล์รูปภาพ
ค. ปรับความละเอียดของภาพ
ง. กำหนดความหนาเส้นขอบภาพ

9. ในการจัดตำแหน่งระหว่างข้อความและภาพ โดยใช้คำสั่ง Align หากเลือกตัวเลือก
เป็นTop การจัดตำแหน่งจะเป็นลักษณะใด

ก. ข้อความบรรทัดเดียวกับภาพอยู่ต่อจากภาพ
ข. ภาพถูกจัดไว้ด้านบน และข้อความถูกจัดไว้ด้านล่าง
ค. ภาพถูกจัดไว้ด้านบน และข้อความถูกจัดไว้ด้านล่าง
ง. ข้อความบรรทัดเดียวกับภาพถูกจัดไว้ด้านบนของขอบภาพ ข้อความที่เหลืออยู่
ด้านล่างภาพ

10. เครื่องมือใน Properties Inspector ใช้ปรับแต่งสิ่งใด

ก. ลดทอนสีภาพ ข. ปรับขนาดของภาพต้นฉบับ

ค. ปรับแต่งความละเอียดของภาพ ง. เปิดไฟล์ภาพด้วยโปรแกรมที่เลือก

66

ใบงาน

คำสั่ง จงตอบคำถามและปฏิบัติตามคำสั่งต่อไปนี้

1. จงบอกความรู้พื้นฐานเกี่ยวกับการแสดงภาพบนเว็บมา 3 ข้อ พร้อมทั้ง
อธิบาย

2. จงอธิบายถึงความแตกต่างในการบีบอัดข้อมูลภาพของไฟล์ภาพแบบGIF,
JPE)และ PNG

3. หากต้องการให้ภาพบนเว็บเพจมีข้อความกำกับภาพ ควรทำอย่างไร
4. หากต้องการให้ภาพบนเว็บเพจอยู่ขอบล่างของภาพตรงกับแนวล่างสุดของ
ข้อความ ควรทำอย่างไร
5. จงสร้างเว็บเพจให้มีรายละเอียดและลักษณะของเว็บดังนี้

5.1 ใส่ภาพกราฟิกในลักษณะเป็นหัวข้อ
5.2 ใส่ภาพใดก็ได้ พร้อมทั้งใส่กรอบให้กับภาพ
5.3 ใส่ภาพใดก็ได้ (แต่ไม่ซ้ำกับภาพ 2) พร้อมทั้งใส่กรอบให้กับภาพ
5.4 ใส่ข้อความอธิบายภาพที่ 2 ที่บริเวณชิดขอบล่างของภาพที่ 2
55. ใส่ข้อความอธิบายภาพที่ 3 ที่บริเวณชิดขอบล่างของภาพที่ 3
5.6. ใส่ไฟล์ภาพนามสกุล GIF ให้เป็นพื้นหลัง

67

หน่วยที่ 7

การใส่ตารางในเว็บไซต์

สาระสำคัญ

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

สาระการเรียนรู้
1. การสร้างตาราง
2. การเลือกตาราง แถว คอลัมน์ และ เซลล์
3. การปรับแต่งรายละเอียดของตาราง
4. การจัดเรียงข้อมูลในตาราง
5. การแทรกแถวและคอลัมน์
6. การลบแถวและคอลัมน์
7. การรวมและการแบ่งเซลล์
8. ปรับความกว้างของตารางใน Property Inspector
9. การกำหนดสีกับตาราง

วัตถุประสงค์

1. สร้างตารางได้ 7. รวมและการแบ่งเซลล์ได้
2. เลือกตาราง แถว คอลัมน์ และเซลล์ได้ 8. ปรับความกว้างของตารางใน
3. ปรับแต่งรายละเอียดของตารางได้
4. จัดเรียงข้อมูลในตารางได้ Property Inspector ได้
5. แทรกแถวและคอลัมน์ได้ 9. เข้าใจการกำหนดสีกับตาราง
6. ลบแถวและคอลัมน์ได้

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

ภาพที่ 7.1 แสดงการใช้ตารางใส่ข้อความเพื่อแสดงบนหน้าเว็บ

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

ภาพที่ 7.2 แสดงการใส่ข้อความและภาพลงในช่องเซลล์แต่ละช่อง เพื่อนำเสนอบนหน้าเว็บ

69

7.1 การสร้างตาราง

การสร้างตารางในโปรแกรม Dreamweaver สามารถทำได้ง่าย ๆ เพราะมี

เครื่องมือ(Table) ที่ช่วยสร้างตารางบนหน้าเว็บได้ตามต้องการ วิธีการสร้างตาราง

นั้น มีขั้นตอนในการสร้างตารางอยู่ 3 วิธี คือ

วิธีที่ 1 เลือกเมนู Insert->Table

วิธีที่ 2 เลือกเครื่องมือ (Table) ที่แท็บ Common

วิธีที่ 3 กดคีย์ Ctrl+Alt+T ที่คีย์บอร์ด

โดยทั้ง 3 วิธีนี้จะแสดงหน้าต่าง Table สำหรับใช้กำหนดรายละเอียดเกี่ยวกับ
ตาราง ดังนี้

Rows จำนวนแถวที่ต้องการ

Columns จำนวนคอลัมน์ที่ต้องการ

Table Width ความกว้างของตารางหน่วยที่ใช้จะเป็นเปอร์เซ็นต์ หรือพิกเซล

Border thickness ความหนาของขอบตาราง

Cell padding ระยะห่างระหว่างข้อความภายในเซลล์กับขอบเซลล์

Cell spacing ระยะห่างระหว่างแต่ละเซลล์

Header กำหนดหัวข้อของข้อมูลในตารางและการจัดวาง ดังนี้

ภาพที่ 7.3 คลิกเพื่อสร้างตารางจากกลุ่มเครื่องมือ Common ภาพที่ 7.4 แสดงหน้าต่าง Table

(ซ้าย) หรือกลุ่มเครื่องมือ Layout (ขวา) สำหรับกำหนดรายละเอียดตาราง

None ไม่มีการกำหนดหัวข้อของข้อมูลในตาราง
Left กำหนดให้คอลัมน์แรกเป็นหัวข้อของข้อมูลในตาราง
Top กำหนดแถวแรกให้เป็นหัวข้อของข้อมูลในตาราง
Both กำหนดให้ทั้งแถว และ คอลัมน์แรกเป็นหัวข้อของข้อมูลในตาราง

70

Caption กำหนดหัวข้อของตาราง
Summary เขียนคำอธิบายเกี่ยวกับตาราง ซึ่งจะถูกฝังไว้ในโค้ด HTML และ
ไม่ถูกแสดงออกมาให้เห็นบนหน้าเว็บ

เมื่อกำหนดค่าตามต้องการ ใน
หน้าต่าง Table แล้ว ให้คลิกเมาส์ปุ่ม OK
จะได้ตาราง ตามที่กำหนดไว้ สำหรับใน
Dreamweaver เมื่อ สร้างตาราง จะเห็น
ส่วนที่เรียกว่า “ส่วนที่ใช้ จัดการตาราง/
คอลัมน์” เพิ่มขึ้นมา ส่วนนี้มี ประโยชน์ใน
การจัดระเบียบตาราง

ส่วนที่ใช้จัดการตาราง/คอลัมน์

ภาพที่ 7 5 แสดงตารางขนาด 4 แถว 3 คอลัมน์
ตามค่าที่กำหนด

ใส่ข้อมูลในตาราง

การใส่ข้อมูลในตาราง ทำได้โดยคลิกเลือกช่องเซลล์ที่ต้องการ แล้วพิมพ์ข้อความ
ที่ต้องการลงไปได้เลย ดังนี้

ภาพที่ 7.6 ขั้นตอนการใส่ข้อมูลในตาราง

ใส่รูปภาพในตาราง

เมื่อต้องการแทรกภาพลงในช่องเซลล์ และปรับขนาดภาพให้พอดีกับช่อง
เซลล์ที่ต้องการสามารถทำได้ ดังนี้

71

ภาพที่ 7.7 ขั้นตอนการใส่รูปภาพในตาราง

ภาพที่ 7.8 แสดงการเลือกปรับแต่งภาพเพิ่มเติมได้ใน Property Inspector

ปรับขนาดช่องเซลล์

สามารถปรับขนาดของช่องเซลล์ในแถว หรือคอลัมน์ให้ได้สัดส่วนของช่อง
เซลล์ตามที่ ต้องการได้ โดยการคลิกที่เส้นตาราง และลากเมาส์เพื่อปรับขนาด

ภาพที่ 7.9 แสดงการปรับความสูง ภาพที่ 7.10 แสดงการปรับความ
ของตาราง โดยคลิกที่เส้นแนวนอน
ภายในตารางตัวชี้เมาส์จะเปลี่ยน กว้างของตาราง โดยคลิกที่เส้นแนว
เป็นรูป เพื่อปรับขนาดตารางในแนว
นอน โดยการลากเมาส์ปรับขนาด ตั้งภายในตาราง ตัวชี้เมาส์จะเปลี่ยน
เพื่อปรับขนาดตารางในแนวตั้ง โดย

การลากเมาส์ปรับขนาด

72

7.2 การเลือกตาราง แถว คอลัมน์ และเซลล์

การทำงานกับตารางไม่ว่าจะเป็นการตกแต่งรายละเอียด หรือจัดรูปแบบตาราง
ล้วนต้อง เลือกตารางช่องต่าง ๆ ก่อนเสมอ การเลือกตารางสามารถทำได้หลายวิธี
ดังนี้

เลือกทั้งตาราง

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

ภาพที่ 7.11 การเลือกทั้งตารางวิธีที่ 1

วิธีที่ 2 ให้คลิกเลือกเซลล์ใดก็ได้ในตาราง และเลือกคำสั่ง Modify ->Table-
>SelectTable ดังรูป

ภาพที่ 7.12 ขั้นตอนการเลือกทั้งตารางวิธีที่ 2

73

วิธีที่ 3 ขณะเลือกเซลล์ใด ๆ อยู่ ให้คลิกที่แท็ก <tables ที่แถบสถานะด้านล่าง
ดังรูป

ภาพที่ 7.13 การเลือกทั้งตารางวิธีที่ 3

NOTE

สำหรับวิธีเลือกเซลล์/คอลัมน์/แถวในตาราง โดยการคลิกที่แท็ก HTML
ของตารางผู้ใช้จำเป็นต้องเข้าใจโครงสร้างภาษา HTML จึงจะทำได้ถูกต้อง

การเลือกเซลล์

การเลือกเซลล์เดียว

การเลือกเซลล์เดียวที่ต้องการทำงานด้วย มีวิธีการง่าย ๆ โดยการคลิกเมาส์
ช่องเซลล์ที่จะเลือก แล้วคลิกที่แท็ก <td> หรือ <ths ที่เป็นแท็ก HTML ของช่อง
เซลล์นั้นที่แถบสถานะดังรูป

ภาพที่ 7.14 ขั้นตอนการเลือกเซลล์เดียว

74

การเลือกหลายเซลล์ที่อยู่ติดกันในตาราง

ทำได้โดยเลือกเซลล์แรกที่ต้องการ จากนั้นกดคีย์ Shift ค้างไว้ แล้วคลิกเลือก
เซลล์สุดท้าย ก็จะเป็นการเลือกทุกเซลล์ที่อยู่ระหว่างเซลล์ทั้งสอง ดังรูป

ภาพที่ 7.15 ขั้นตอนการเลือกเซลล์ที่อยู่ติดกันในตาราง

TIP

วิธีลัดในการเลือกหลายเซลล์ที่อยู่ติดกัน สามารถทำได้โดยคลิกเมาส์ค้าง
ไว้ที่เซลล์ที่ต้องการ แล้วลากเมาส์ไปยังเซลล์สุดท้ายได้เลย

การเลือกหลายเซลล์ที่ไม่อยู่ติดกันในตาราง

ให้กดคีย์ Ctrl ค้างไว้ ขณะเลือกหลาย ๆ เซลล์ที่ไม่อยู่ติดกัน ดังนี้

ภาพที่ 7.16 ขั้นตอนการเลือกหลายเซลล์ที่ไม่อยู่ติดกันในตาราง

75

การเลือกแถว

การเลือกทั้งแถว มีอยู่ 2 วิธีคือ
วิธีที่1 น้ำเมาส์ไปวางหน้าแถวที่ต้องการเลือก เมาส์จะกลายเป็นลูกศรสีดำ

ให้คลิกเมาส์จะเป็นการเลือกทั้งแถว
วิธีที่ 2 ให้คลิกเมาส์เลือกเซลล์ใด ๆ และคลิกแท็ก <tr> จะเป็นการเลือก

แถวของเซลล์

ภาพที่ 7.17 แสดงวิธีการเลือกทั้งแถว

การเลือกคอลัมน์

นำเมาส์ไปวางไว้บนคอลัมน์ที่ต้องการเลือก เมาส์จะกลายเป็นลูกศรสีดำ
ให้คลิกเมาส์จะเป็นการเลือกคอลัมน์นั้นทั้งคอลัมน์

ภาพที่ 7.18 แสดงการเลือกทั้งคอลัมน์

76

7.3 การปรับแต่งรายละเอียดของตาราง

นอกจากการใช้เมาส์ปรับคุณสมบัติต่าง ๆ ของตารางแล้ว ยังสามารถกำหนด
รายละเอียดต่าง ๆ ได้จาก Property Inspector โดยเมื่อคลิกเลือกตาราง หรือ
คอลัมน์หรือเซลล์ในตารางแล้วจะสามารถปรับได้ทั้งขนาดเซลล์/แถว/คอลัมน์ ปรับ
ความสูง/ความกว้าง/ความหนาของตารางอีกทั้งสามารถเลือกตำแหน่งการวางตา
รางบนหน้าเว็บได้

ภาพที่ 7.19 แสดงรายละเอียดต่างๆ ใน Property Inspector

คำสั่งเกี่ยวกับการปรับแต่งตาราง

นอกจากการปรับแต่งโดยใช้ Property Inspector สามารถเรียกคำสั่ง
เกี่ยวกับการปรับแต่งตารางได้โดยคลิกที่เซลล์แล้วเลือกคำสั่ง Modify->Table
หรือคลิกเมาส์ปุ่มขวา ตรงตารางที่ต้องการปรับแต่ง และเลือกคำสั่งย่อยภายใต้
คำสั่ง Table ก็ได้

ภาพที่ 7.20 แสดงคำสั่งเกี่ยวกับการปรับแต่งตาราง 77

7.4 การจัดเรียงข้อมูลในตาราง

การจัดเรียงข้อมูลในตารางมีจุดประสงค์เพื่อความสวยงามและเป็นระเบียบ

ภาพที่ 7.21 การจัดเรียงข้อมูลในตารางเพื่อควภามสวยงามและเป็นระเบียบ

จัดเรียงข้อมูลในแนวนอน

สามารถจัดเรียงข้อมูลที่แสดงใน ช่อง
เซลล์ให้ ชิดขวา ชิดซ้าย หรืออยู่ กึ่งกลาง
ของช่องเซลล์ โดยการคลิกช่อง เซลล์ที่
ต้องจัดข้อมูล แล้วกำหนดตำแหน่งของ
ข้อมูลในช่อง Horz จาก Property
Inspector ดังนี้

ภาพที่ 7.22 แสดงการจัดเรียงข้อมูลในแนวนอน

78

จัดเรียงข้อมูลในแนวตั้ง

สามารถจัดข้อมูลที่แสดงในของเซลล์ให้ ชิดบน ชิดล่าง หรืออยู่กึ่งกลางของ
ช่องเซลล์โดยการคลิกช่องเซลล์ที่ต้องจัดข้อมูล แล้วกำหนดตำแหน่งของข้อมูล
ในช่อง Vert จาก Property inspector ดังนี้

ภาพที่ 7.23 แสดงการจัดเรียงข้อมูลในแนวตั้ง

7.5 การแทรกแถวและคอลัมน์

หลังจากสร้างตารางขึ้นมาแล้ว สามารถแทรกแถวและคอลัมน์เพิ่มภายใน
ตารางได้ ดังนี้

การแทรกแถว

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

TIP

วิธีลัดในการเพิ่มแถว โดยการคลิกเมาส์ที่เซลล์สุดท้ายของตาราง แล้วกด
ปุ่ม <tab>ที่คีย์บอร์ด จะเป็นการเพิ่มแถวถัดไปอีก 1 แถว ที่ด้านล่างของตาราง

79

ภาพที่ 7.24 ขั้นตอนการแทรกแถว

การแทรกคอลัมน์

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

80

ภาพที่ 7.25 ขั้นตอนการแทรกคอลัมน์

7.6 การลบแถวและคอลัมน์

การลบแถวหรือคอลัมน์ของตารางที่ไม่ต้องการใช้งานออกไปได้ ทำได้โดย
เลือกแถวหรือคอลัมน์-นั้น ๆ -แล้วกดปุ่ม <Delete>

การลบแถว

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

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

ภาพที่ 2.26 ขั้นตอนการลบแถว

81

การลบคอลัมน์

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

2. คอลัมน์ที่เลือกไว้จะหายไป

ภาพที่ 7.27 ขั้นตอนการลบคอลัมน์

7.7 การรวมและการแบ่งเซลล์

การรวมและการแบ่งเซลล์ มีจุดประสงค์เพื่อจัดเรียงข้อมูลอย่างเหมาะสม
สามารถกำหนดให้รวม หรือแบ่งเซลล์ในตารางได้ ดังนี้

การรวมเซลล์

เป็นการรวมเซลล์หลาย ๆ เซลล์เข้าด้วยกัน มีขั้นตอนดังต่อไปนี้
1. เลือกเซลล์ที่ต้องการรวม (ต้องเป็นเซลล์ที่ติดกัน) โดยกดคีย์ Ctrl ค้างไว้
พร้อมกับเลือกเซลล์ที่จะรวมกัน
2. คลิกเมาส์ปุ่ม จาก Property Inspector หรือคลิกเมาส์ปุ่มขวาเลือกคำ
สั่ง Table-Merge Cells หรือเลือกคำสั่ง Modify->Table->Merge Cells ที่
เมนู หรือกดคีย์ลัด Ctrl+Alt+M
3. เมื่อรวมกันแล้วจะได้เซลล์ผลลัพธ์ที่มีขนาดใหญ่ขึ้น

82

ภาพที่ 7.28 ขั้นตอนการรวมเซลล์

การแบ่งเซลล์

ในกรณีที่ต้องการแบ่งเซลล์ในตารางออกเป็นเซลล์ย่อยสามารถทำได้ ดังนี้
1. คลิกเมาส์เลือกเซลล์ที่ต้องการแบ่ง
2. คลิกเมาส์ปุ่ม จาก Property Inspector หรือคลิกเมาส์ปุ่มขวาเลือกคำสั่ง
Table->Split Cell หรือเลือกคำสั่ง Modify->Table-Split Cell ที่เมนู หรือกดคีย์
ลัด Ctrl+Alt+S
3. จะปรากฎหน้าต่าง Split Cell ขึ้นมาให้เลือกรูปแบบของการแบ่งเซลล์
จากนั้นคลิกปุ่ม OK เพื่อตกลง รูปแบบการแบ่งเซลล์เป็นดังนี้

3.1 Split Cell Into Rows/Columns การแบ่งเซลล์ตามแนวแถวหรือคอลัมน์
3.2 Number of Rows/Columns จำนวนเซลล์ที่จะแบ่งในแถวหรือคอลัมน์
4. จะปรากฎเซลล์ใหม่ที่แบ่งออกมาจากเซลล์เดิมตามต้องการ

83

ภาพที่ 7.29 ขั้นตอนการแบ่งเซลล์

7.8 ปรับความกว้างของตารางใน Property Inspector

ใน Property Inspector มีคำสั่งที่ใช้กำหนดความกว้างของทั้งตาราง หรือ
เซลล์ใด ๆ ในตาราง สามารถระบุค่าที่เจาะจงสำหรับการปรับความกว้างของ
ตารางได้เอง ดังนี้

ปรับความกว้างของทั้งตาราง
สามารถปรับความกว้างของทั้งตารางได้ โดยคลิกเลือกทั้งตาราง จากนั้น

กำหนดความกว้างในช่อง (กำหนดเป็นเปอร์เซ็นต์เทียบกับความกว้างของ

หน้าเว็บ หรือจะ ระบุเป็นพิกเซลด้วยขนาดที่เฉพาะเจาะจงก็ได้) ตัวอย่าง กำหนด

ความกว้างของตารางเป็น100% ซึ่งขนาดของตารางจะถูกขยายตามขนาดของ

หน้าเว็บที่เปิดอยู่ มีขั้นตอนดังนี้

84

ภาพที่ 7.30 ขั้นตอนการปรับความกว้างของทั้งตาราง

ปรับความสูงและความกว้างของช่องเซลล์

ในตัวอย่างการสร้างตารางที่ผ่านมา ขนาดความกว้างของช่องเซลล์นั้นถูก

กำหนดโดยขนาดข้อมูลในแต่ละช่อง ทำให้ในบางกรณีอาจทำให้ตารางดูไม่เหมาะ

สม ทั้งนี้สามารถกำหนด ขนาดความกว้างของช่องเซลล์ได้อย่างเจาะจง โดยคลิก

ที่ช่องเซลล์ที่ต้องการปรับขนาด แล้วกำหนดขนาดความกว้างในช่อง กำหนด

ความสูงในช่อง ตัวอย่าง กำหนดความกว้างของตารางเป็น 60% และความ

สูงของช่องเซลล์เป็น 50 พิกเซล มีขั้นตอนดังนี้

ภาพที่ 7.31 ชั้นตอนการปรับความสูงและความกว้างของช่องเซลล์

85

7.9 การกำหนดสีกับตาราง

การปรับแต่งสีของตาราง ต้องใช้ CSS (Cascading Style Sheets) เข้ามา
ช่วยการกำหนดกฎ (Rule) ใหม่ขึ้นมา เพื่อใช้บังคับส่วนประกอบในหน้าเว็บที่
เลือก ให้แสดงผลตาม กฎที่ตั้งไว้ การสร้างกฏใหม่จากพาเนล CSS Styles ทำได้
โดยเรียกเมนูคำสั่ง Window-SCSSStyles แล้วทำตามขั้นตอนดังต่อไปนี้

1. ในหน้าต่าง Css Styles ให้คลิกที่ปุ่ม AI แล้ว คลิกที่ปุ่ม New CSS Rule
เพื่อสร้างกฏใหม่

2. ในหน้าต่าง New CSS Rule ให้เลือก Class เพื่อสร้างกฎที่ใช้งานได้ทุกที่
ตั้งชื่อกฎ กำหนดให้สร้างกฏฝังในหน้าเว็บ แล้ว คลิกเมาส์ปุ่ม OK

3. ในหน้าต่าง CSS Rule definition for Table เลือก Background แล้ว
เลือกกำหนดสีพื้นให้กับตาราง

4. เลือก Border เลือกกำหนดลักษณะเส้นขอบ (Solid = เส้นทึบ) เลือก
กำหนด ความหนาเส้นขอบ และ เลือกกำหนดสีเส้นขอบ แล้วคลิกเมาส์ปุ่ม OK

5. แสดงกฏใหม่ที่สร้างขึ้น

86

ภาพที่ 7.32 ขั้นตอนการกำหนดสีกับตาราง

NOTE

ใน 1 กฎ สามารถกำหนดหลาย ๆ คุณสมบัติรวมกันได้ เช่น กำหนดสีพื้น
หลังกับกำหนดสีเส้นขอบ รวมอยู่ในกฏเดียวกัน

ใน 1 หน้าเว็บ สามารถกำหนดหลาย ๆ กฏได้ เช่น กฎที่หนึ่งกำหนดสีพื้น
เป็นสีแดง กฎที่สองกำหนดสีพื้นเป็นสีดำ โดยสามารถใช้วิธีในตัวอย่างที่ผ่าน
มาในการสร้างกฏใหม่เพิ่มขึ้นอีกได้

87

สรุป

การใช้ตารางเหมาะสำหรับการนำเสนอข้อมูลปริมาณมาก การสร้าง
ตารางทำได้โดยการใช้เครื่องมือ Table เริ่มจากการกำหนดรายละเอียด
ทั่วไปเกี่ยวกับตาราง การใส่ข้อมูล ใส่ภาพ การใส่สี และปรับขนาดช่อง
ตาราง หลังจากนั้นจึงปรับแต่งรายละเอียดของช่องตาราง ใน Property
Inspector นอกจากนี้ยังสามารถจัดเรียงข้อมูลในตารางแทรก/ลบ แถว
และคอลัมภ์ ตลอดจนรวมและแบ่งเซลล์ในตารางได้

แบบทดสอบท้ายหน่วยที่ 7

คำสั่ง จงเลือกคำตอบที่ถูกต้องที่สุดเพียงข้อเดียว

1. การสร้างตารางลงบนเว็บเพจด้วโปรแกรมDreamweaver ทำได้กี่วิธี

ก. 2 วิธี ข. 3 วิธี

ค. 4 วิธี ง. 5 วิธี

2. การเลือกเซลล์เพื่อแก้ไขตาราง โดยเลือกเซลล์ที่อยู่ติดกัน ต้องกดคีย์ใดค้างไว้ขณะเลือก

ก. Shift ข. Ctrl

ค. Alt ง. Insert

3. การเลือกเซลล์เซลล์ที่ไม่อยู่ติดกันเพื่อแก้ไขตาราง ต้องกดคีย์ใดค้างไว้ขณะเลือก

ก. Shift ข. Ctrl

ค. At ง. Insert

4. คีย์ลัดในการแทรกแถวทำได้โดยกดคีย์ใด

ก. Ctrl+J ข. Ctrl+Y

ค. Ctrl+M ง. Ctrl+F

5. คีย์ลัดในการลบแถวทำได้โดยกดคีย์ใด

ก. Ctrl+Shift+J ข. Ctrl+Shift+Y

ค. Ctrl+Shift+M ง. Ctrl+Shift+F

88

6. Cell pedding เป็นการกำหนดค่าใด
ก. ระยะห่างระหว่างเซลล์
ข. ความกว้างของเซลล์
ค. ความกว้างxความสูงของเซลล์
ง. ระยะห่างระหว่างข้อความกับขอบเซลล์

7. การจัดเรียงข้อความในตารางแบบ Default เป็นอย่างไร
ก. จัดเรียงข้อมูลให้อยู่ชิดขวาของช่องเซลล์
ข. จัดเรียงข้อมูลให้อยู่ชิดซ้ายของช่องเซลล์
ค. จัดเรียงข้อมูลให้อยู่ชิดขอบบนของช่องเซลล์
ง. จัดเรียงข้อมูลให้อยู่ชิดขอบล่างของช่องเซลล์

8. คำสั่ง Insert->Table Objects->Import Tabular Data สำหรับทำอะไร
ก. นำข้อมูลเข้ามา
ข. นำข้อมูลภาพเข้ามา
ค. นำตารางข้อมูลเข้ามา
ง. นำข้อมูลภาพเคลื่อนไหวเข้ามา

9. ในการเรียงลำดับข้อมูลในตาราง คำสั่ง Sort header rows จะมีผลของการเรียง
ลำดับข้อมูลแบบใด

ก. เพิ่มการจัดเรียงแถวที่อยู่ภายในแท็ก <tfoot> ... </tfoot>
ข. เพิ่มการจัดเรียงแถวที่อยู่ภายในแท็ก <thead>...</thead
ค. ทำการจัดเรียงเฉพาะแถวที่อยู่ภายในแท็ก <tfoot>...</ tfoot>
ง. ทำการจัดเรียงเฉพาะแถวที่อยู่ภายในแท็ก <thead>...</thead>

10. ในการเรียงลำดับข้อมูลในตาราง คำสั่ง Sort footer rows จะมีผลของการเรียง
ลำดับข้อมูลแบบใด

ก. เพิ่มการจัดเรียงแถวที่อยู่ภายในแท็ก <tfoot> ... </tfoot>
ข. เพิ่มการจัดเรียงแถวที่อยู่ภายในแท็ก <thead>...</thead>
ค. ทำการจัดเรียงเฉพาะแถวที่อยู่ภายในแท็ก <tfoot>... </tfoot>
ง. ทำการจัดเรียงเฉพาะแถวที่อยู่ภายในแท็ก <thead>... </thead>

89

หน่วยที่ 8

การเชื่อมโยงเว็บไซต์

สาระสำคัญ

จุดเด่นหนึ่งของเว็บ คือ ความสามารถในการเชื่อมโยงจากส่วนหนึ่ง
ของเว็บหน้าหนึ่งไปยังส่วนอื่นได้ หรือเรียกว่า ลิงก์(Link)ไม่ว่าจะเป็นการ
เชื่อมโยงในหน้าเว็บไซต์เดียวกันการเชื่อมโยงภายในเว็บเพจเดียวกัน การ
เชื่อมโยงไปยังเว็บไซต์อื่นรวมไปถึงให้ผู้เข้ามาชมคลิกเพื่อดาวน์โหลด
ข้อมูลได้ ซึ่งสามารถใช้ข้อความ รูปภาพ หรือส่วนหนึ่งของรูปภาพเป็นตัว
เชื่อมโยงได้

สาระการเรียนรู้

1.การเชื่อมโยงแบบต่างๆ
2. กำหนดลักษณะการเปิดหน้าเว็บใหม่ที่เชื่อมโยงไป
3. เทคนิคการเชื่อมโยงแบบ Rollover Image
4. กำหนดคุณสมบัติของข้อความที่เป็นลิงก์

วัตถุประสงค์

1. สร้างการเชื่อมโยงแบบต่าง ๆ ได้
2. เข้าใจการกำหนดลักษณะการเปิดหน้าเว็บใหม่ที่เชื่อมโยงไป
3. เข้าใจเทคนิคการเชื่อมโยงแบบ Rollover Image
4. กำหนดคุณสมบัติของข้อความที่เป็นลิงก์ได้

ในเว็บไซต์มักจะมีหน้าเพจมากกว่า 1 หน้า สำหรับแสดงรายละเอียดข้อมูล
รายวข้องทั้งหมด เช่น ในหน้าโฮมเพจซึ่งเป็นหน้าหลัก สามารถคลิกเพื่อเข้าไปดู
ข้อมูลในหน้าอื่น ๆ ได้ เรียกว่า การเชื่อมโยงเว็บเพจ หรือ การลิงก์ (Line)

8.1 การเชื่อมโยงแบบต่าง ๆ

การเชื่อมโยงบนเว็บเพจมีหลายรูปแบบ หากแบ่งเป็นกลุ่มใหญ่ ๆ จะได้ 2 กลุ่ม คือ
การเชื่อมโยงภายใน และการเชื่อมโยงภายนอกเว็บเพจ แต่ถ้าแบ่งตามวัตถุประสงค์การ
ใช้งาน จะแบ่งการเชื่อมโยงบนเว็บเพจออกเป็นประเภทต่าง ๆ ดังต่อไปนี้

1. การเชื่อมโยงภายในเว็บเพจเดียวกัน
2. การเชื่อมโยงภายในเว็บไซต์เดียวกัน
3. การเชื่อมโยงไปยังเว็บไซต์อื่น
4. การเชื่อมโยงเพื่อส่งอีเมล
5. การเชื่อมโยงเพื่อดาวน์โหลดไฟล์
6. การเชื่อมโยงด้วย Map Link

การเชื่อมโยงภายในเว็บเพจเดียวกัน

หากข้อมูลในหน้าเว็บเดียวกันมีขนาดยาวมากทำให้ต้องใช้เมาส์เลื่อนแถบ Scrollbar
ดูควรเปลี่ยนมาสร้างลิงก์เชื่อมโยงสองส่วนนี้แทน ดังตัวอย่าง เมื่อคลิกข้อความที่กำหนด
ให้ เป็นลิงก์ ก็จะเกิดการกระโดดไปยังส่วนล่างของหน้าเว็บเดียวกันในที่นี้จะไปที่ข้อความ
ที่มีชื่อว่า ทัวร์เกาหลี

ภาพที่ 8.1 แสดงการเชื่อมโยงภายในเว็บเพจเดียวกัน

91

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

ขั้นตอนที่ 1 การกำหนดจุดแองเคอร์

วิธีการกำหนดจุดแองเคอร์ ทำได้ดังนี้
1. กำหนดจุดแองเคอร์ ในที่นี้คือตำแหน่งหัวข้อ “ทัวร์เกาหลี” ที่อยู่ในส่วน
ด้านล่างของ หน้าเว็บ
2. คลิกเมาส์ปุ่ม ในแท็บ Common หรือเลือกจากเมนู Insert->hamed
Anchor หรือกด Ctrl+Alt+A เพื่อกำหนดให้จุดนี้เป็นจุดแองเคอร์
3. จะปรากฎหน้าต่าง Named Anchor จากนั้นในช่อง Anchor Name ให้
ตั้งชื่อ จุดแองเคอร์ ดังตัวอย่าง ตั้งชื่อว่า tourKorea แล้วคลิกปุ่ม OK เพื่อตกลง
4. แสดงสัญลักษณ์สมอเรือ แสดงว่าได้กำหนดจุดแองเคอร์แล้ว

ภาพที่ 8.2 ขั้นตอนการกำหนดจุดแองเคอร์

92

ขั้นตอนที่ 2 การกำหนดข้อความที่จะสร้างเป็นลิงก์

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

1. คลิกเมาส์และลากเพื่อเลือกข้อความที่จะสร้างเป็นลิงก์เชื่อมโยงไปยังจุด
แองเคอร์

2. คลิกปุ่ม HTML. แล้วกำหนดจุดที่จะเชื่อมโยง โดยการพิมพ์ # ตามด้วย
ชื่อจุดแองเคอร์ที่ตั้งไว้ (ดังตัวอย่างจะให้เชื่อมโยงไปที่ "#tourKorea)

ภาพที่ 8.3 ขั้นตอนการกำหนดข้อความที่จะสร้างเป็นลิงก์

NOTE

ควรตั้งชื่อจุดแองเคอร์ ในหน้าต่าง Named Anchor เป็นภาษาอังกฤษ




WRRNNING ในช่อง Link

ต้องพิมพ์เครื่องหมาย # หน้าชื่อจุดแองเคอร์ จึงจะเชื่อมโยงได้ถูกต้อง และ
ต้องเป็นชื่อที่สะกดตรงกับชื่อจุดแองเคอร์ที่ได้ กำหนดไว้

บันทึกการทำงาน และกดปุ่ม F12 เพื่อทดสอบดูผลลัพธ์การเชื่อมโยงภายใน
เว็บเพจ เดียวกัน เมื่อคลิกที่ลิงก์ “ทัวร์เกาหลี” ก็จะกระโดดไปที่ภาพ “ทัวร์
เกาหลี” ซึ่งเป็น จุดแองเคอร์ที่ถูกกำหนดไว้

93