merged (pdf.io)

ภาพที่ 8.4 แสดงการใช้งานข้อความที่ถูกสร้างเป็นลิงก์

การเชื่อมโยงกายในเว็บไซต์เดียวกัน

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

ภาพที่ 8.5 แสดงตัวอย่างการเชื่อมโยงภายในเว็บไซต์เดียวกัน

94

1. เลือกข้อความบนหน้าเว็บที่ต้องการกำหนดเป็นลิงก์
2. คลิกปุ่ม HTML จะปรากฏช่อง Link
3.คลิกปุ่ม เพื่อกำหนดไฟล์เว็บเพจที่จะเชื่อมโยง (หรือพิมพ์ตำแหน่งเก็บไฟล์
เว็บเพจในช่อง Link ก็ได้)
4.ปรากฎหน้าต่าง Select File เพื่อเลือกไฟล์เว็บเพจที่ต้องการจะเชื่อมโยง
และคลิกปุ่ม OK
5.ช่อง Link จะแสดงตำแหน่งของชื่อไฟล์เว็บเพจที่เชื่อมโยง หลังจากนั้นให้
บันทึกหน้าเว็บ และกดปุ่ม F12 เพื่อทดสอบดูผลลัพธ์การเชื่อมโยงภายในเว็บไซต์
เดียวกัน
6. เมื่อคลิกที่ลิงก์ “ชุดภาพสิงคโปร์” จะเปิดหน้าเว็บ SingaporeAlbum.html
ขึ้นมา

95

ภาพที่ 8.6 ขั้นตอนการเชื่อมโยงภายในเว็บไซต์เดียวกัน

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

ภาพที่ 8.7 ขั้นตอนการใช้ภาพเป็นลิงก์

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

96

ภาพที่ 8.8 การใช้ลิงก์ภาพเพื่อแสดงหน้าเว็บ SingaporeAlbum.html

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

ทำได้โดยระบุ URL ของเว็บไซต์นั้น ด้วยการพิมพ์ http:// นำหน้าชื่อ
เว็บไซต์ที่ต้องการ เชื่อมโยง (ขอแนะนำให้ทำการตรวจสอบ URL ปลายทางที่
ต้องการเชื่อมโยงด้วยว่ามีอยู่จริง เนื่องจากเว็บไซต์อาจจะปิดให้บริการไปแล้ว)
สามารถกำหนดให้ข้อความหรือภาพที่อยู่บน หน้าเว็บ เป็นลิงก์เชื่อมโยงไปยัง
เว็บไซต์อื่นได้ในที่นี้ยกตัวอย่างการเชื่อมโยงภาพเพื่อไปยังเว็บไซต์
www.thaiairways.co.th ดังนี้

ภาพที่ 8.9 แสดงขั้นตอนการเชื่อมโยงไปยังเว็บไซต์อื่น

97

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

ภาพที่ 8.10 ตัวอย่างการคลิกเพื่อเชื่อมไปยังเว็บไซต์อื่น

การเชื่อมโยงเพื่อส่งอีเมล

เพื่อให้ผู้ที่มาเยี่ยมชมหน้าเว็บติดต่อกับเจ้าของเว็บได้ มักมีการสร้างลิงก์ไป
ยังอีเมล แอดเดรสของผู้ดูแลเว็บ เมื่อผู้ใช้คลิกที่ลิงก์นี้ก็สามารถเขียนอีเมลมาได้
โดยไม่ต้องเสียเวลา พิมพ์อีเมลแอดเดรสใหม่(สามารถกำหนดข้อความหรือภาพ
เป็นลิงก์เชื่อมโยงเพื่อส่งอีเมล ได้) ดังตัวอย่าง เมื่อคลิกที่ลิงก์ e-mail us”

จะเปิดโปรแกรม Microsoft Outlook ที่ใช้สำหรับ ส่งเมล์ โดยจะมีอีเมล
แอดเดรสของบริษัทแสดงขึ้นมาให้เรียบร้อย มีขั้นตอนดังต่อไปนี้

ภาพที่ 8.11 ขั้นตอนการเชื่อมโยงเพื่อส่งอีเมล

98

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

ภาพที่ 8.12 แสดงการเรียกโปรแกรมส่งเมล์ที่มีการกรอกอีเมลแอดเดรสมาให้เรียบร้อย



การเชื่อมโยงเพื่อดาวน์โหลดไฟล์

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

ภาพที่ 8.13 ขั้นตอนการเชื่อมโยงเพื่อดาวน์โหลดไฟล์

99

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

ภาพที่ 8.14 แสดงการเชื่อมโยงเพื่อดาวน์โหลดไฟล์

การเชื่อมโยงด้วย Map Link Map Link

ให้กำหนดขอบเขตการลิงก์บนภาพกราฟิกขนาดใหญ่ ซึ่งสามารถใช้เครื่อง

มือ จาก Property Inspector กำหนดพื้นที่ลิงก์เป็นรูปสี่เหลี่ยม วงกลม หรือ

รูปหลายเหลี่ยมก็ได้ โดยใช้เครื่องมือ Map Link วาดพื้นที่สี่เหลี่ยมลงบนภาพที่

เป็นแถบ Navigation Bar เพื่อกำหนดบริเวณนั้นให้เป็นลิงก์เชื่อมโยงไปยังหน้า

เว็บอื่น (สามารถกำหนด ได้หลายลิงก์บนภาพเดียวกัน)

1. คลิกเมาส์ภาพที่จะทำ Map Link

2. เลือกใช้เครื่องมือ ที่ Property Inspector เพื่อสร้าง Map Link ในที่

นี้เลือกที่

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

ได้บริเวณที่ต้องการ

3.1 เครื่องมือ วาดพื้นที่รูปสี่เหลี่ยม เพื่อสร้างเป็นลิงก์

3.2 เครื่องมือ วาดพื้นที่รูปวงกลมบนภาพ เพื่อสร้างเป็นลิงก์

3.3 เครื่องมือ วาดพื้นที่หลายเหลี่ยมบนภาพ เพื่อสร้างเป็นลิงก์

4. ในช่อง Link ที่ Property Inspector คลิกไอคอน เพื่อกำหนดไฟล์

เว็บเพจที่จะ เชื่อมโยง (หรือจะพิมพ์ตำแหน่งเก็บไฟล์เว็บเพจในช่อง Link ก็ได้)

5. จะปรากฏหน้าต่าง Select File ให้เลือกไฟล์ที่ต้องการเชื่อมโยงแล้วคลิก

ปุ่ม OK

6. ในช่อง Link จะแสดงไฟล์ที่จะเชื่อมโยงไป จากนั้นกำหนดค่าเพิ่มเติมใน

ช่อง Target โดยเลือก blank เพื่อให้เปิดหน้าเว็บที่เชื่อมโยงในหน้าต่างใหม่ และ

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

7. เมื่อเสร็จเรียบร้อยแล้วให้บันทึกหน้าเว็บ และกดปุ่ม F12 เพื่อทดสอบ

ผลลัพธ์ใน เบราว์เซอร์ เมื่อคลิกที่บริเวณสี่เหลี่ยมบนภาพที่เป็นลิงก์ จะเปิดหน้า

เว็บ payap.html ขึ้นมา

100

101

ภาพที่ 8.15 ขั้นตอนการเชื่อมโยงด้วย Map Link

การแก้ไข Map Link

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

ภาพที่ 8.16 แสดงการแก้ไข Map Link

102

ยกเลิกการเชื่อมโยงด้วย Map Link

พื้นที่ที่ได้กำหนดเป็นลิงก์ ถูกเรียกว่า Image tnap สามารถยกเลิกการใช้

งานได้โดยคลิกส่วนที่เป็น Image Imap แล้วกดปุ่ม Delete

ภาพที่ 8.17 แสดงการยกเลิกการเชื่อมโยงด้วย Map Link

8.2 กำหนดลักษณะการเปิดหน้าเว็บใหม่ที่เชื่อมโยงไป

ที่ Property Inspector ในส่วนของ Target สามารถกำหนดวิธีเปิดหน้า
เว็บที่เชื่อมโยง เมื่อมีการคลิกลิงก์ได้ (หรือเลือกเมนู Modify->Link Target)
เช่น ให้แสดงหน้าเว็บที่ เชื่อมโยงในหน้าต่างเบราว์เซอร์ใหม่ หรือให้แสดงแทน
หน้าเว็บเดิม เป็นต้น การกำหนด ลักษณะการเปิดหน้าเว็บมีรูปแบบที่แตกต่าง
กัน ดังนี้

1. _blank เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่างเบราว์เซอร์ใหม่
2. _parent เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่างเบราว์เซอร์เดิม
3. _self เปิดหน้าเว็บใหม่ที่เชื่อมโยงในเฟรมเติม
4. _top เปิดหน้าเว็บใหม่ที่เชื่อมโยงในหน้าต่างเบราว์เซอร์เดิมโดยจัดให้เต็ม
เฟรม

ภาพที่ 8.18 แสดงการกำหนดลักษณะการเชื่อมโยงที่หน้าต่าง Properties

103

ภาพที่ 8.19 ที่เมนู Modify-Link Target จะมีส่วนสำหรับกำหนดการแสดงหน้าเว็บใหม่

8.3 เทคนิคการเชื่อมโยงแบบ Rollover Image

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

1. เลือกตำแหน่งที่จะวางภาพ แล้วคลิกปุ่ม Rollover Image ที่แท็บ
Common หรือ เลือกที่เมนู Insert->Image Objects->Rollover Image

2. ปรากฏหน้าต่าง Insert Rollover Image ขึ้นมาสำหรับเชื่อมโยงแบบ
Rollover Image

2.1 image name : ตั้งชื่อภาพ Rollover image นี้
2.2 Original image : คลิกปุ่ม Browse... แล้วเลือกไฟล์ภาพแรก
2.3 Rollover Image : คลิกปุ่ม Browse.. แล้วเลือกไฟล์ภาพที่สอง
2.4 Preload rollover image : คลิกที่ตัวเลือกนี้เพื่อให้มีการโหลดภาพ
ทั้งสองมาไว้ ส่วงหน้า และแสดงภาพที่สองเมื่อมีการเลื่อนเมาส์ไปวางเหนือภาพ
แรก
2.5 Alternate Text : พิมพ์ข้อความที่ต้องการให้แสดงเมื่อนำเมาส์ไป
วางที่ภาพนี้

104

2.6 When clicked, Go to URL : กำหนดไฟล์เว็บเพจที่จะเชื่อมโยง เมื่อ
คลิกเมาส์ ที่ภาพ โดยคลิกปุ่ม Browse... เพื่อเข้าไปเลือกไฟล์เว็บเพจที่ต้องการ
หรือพิมพ์ URL ลงไป ได้เลยจากนั้นคลิกปุ่ม OK เพื่อตกลงการสร้าง Rollover
Image

3. จากนั้นคลิกปุ่ม OK เพื่อตกลงการสร้าง Rollover Image
4. แสดงภาพแรกที่กำหนดการใช้งานแบบ Rollover Image ซึ่งถูกจัดวาง
บน หน้าเว็บที่กำหนดไว้

105

ภาพที่ 8.20 ขั้นตอนการเชื่อมโยงแบบ Rollover Image

ภาพที่ 8.21 แสดงการเชื่อมโยงแบบ Rollover

8.4 กำหนดคุณสมบัติของข้อความที่เป็นลิงก์

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

106

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

สรุป

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

107

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

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

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

2. การเชื่อมโยงภายในเว็บเพจเดียวกันนั้น ต้องทำอย่างไรบ้าง
ก. กำหนดพื้นที่ย่อยเป็น Link เชื่อมโยงข้อมูล โดยใช้ไอคอน
ข. สร้างจุด Anchor (จุดที่ Link จะกระโดดไป) ในหน้าเว็บเพจนั้น
ค. พิมพ์ชื่อหน้าเว็บเพจที่ต้องการ Link ที่ช่อง Link โดยมีคำว่า mailto: นำหน้า
ง. พิมพ์ชื่อหน้าเว็บเพจที่ต้องการ Link ที่ช่อง Link โดยมีสัญลักษณ์ @ นำหน้า

3. วิธีใดไม่สามารถสร้างการเชื่อมโยงแบบ Map Link ได้
ก. ใช้ไอคอน ในการกำหนดพื้นที่ในการ Link เป็นแบบอิสระ
ข. ใช้ไอคอน ในการกำหนดพื้นที่ในการ Link เป็นรูปวงกลม
ค. ใช้ไอคอน ในการกำหนดพื้นที่ในการ Link เป็นรูปสี่เหลี่ยม
ง. ใช้ไอคอน ในการกำหนดพื้นที่ในการ Link เป็นแบบระบุทิศทาง

4. การเชื่อมโยงด้วย Anchor ต้องพิมพ์เครื่องหมายใด ไว้หน้าชื่อที่ตั้งไว้ในช่อง Link
ทุกครั้ง

ก. @ ข. #
ค. ฿ ง. %

5. การเชื่อมโยงไปยังเว็บไซต์อื่น ต้องกำหนดชื่อเว็บไซต์ที่ต้องการของลิงก์เป็นแบบใด

ก. www.sanook.com ข. sanook.com

ค. http://www.sanook.com ง. www.sanook.co.th

6. ลักษณะการเชื่อมโยง เพื่อเปิดหน้าต่างเบราว์เซอร์ใหม่อีก ใช้คำสั่ง Target ในรูป

แบบใด

ก. _self ข. _top

ค. _parent ง. _blank

108

7. สิ่งสำคัญที่ใช้ในการสร้างการเชื่อมโยงเพื่อส่งอีเมล คือข้อใด
ก. ใส่ชื่ออีเมลช่อง Target
ข. ใส่คำว่า mailto นำหน้าชื่ออีเมล
ค. ใส่ชื่ออีเมลที่ใช้ในการติดต่อในช่อง Link
ง. พิมพ์สัญลักษณ์ # นำหน้าชื่ออีเมลในช่อง Link

8. เมื่อนำเมาส์ไปวางที่ภาพที่จะทำการเชื่อมโยง แล้วภาพนั้นเปลี่ยนเป็นภาพใหม่ และเมื่อ

นำเมาส์ออกจากภาพ ภาพนั้นจะกลับมาเหมือนเดิม เป็นการสร้างการเชื่อมโยงแบบใด

ก. Image Map ข. Mail To

ค. Rollover Image ง. Go to URL

9. ปุ่มคำสั่ง เป็นคำสั่งที่ใช้กับการเชื่อมโยงข้อมูลในแบบใด
ก. การเชื่อมโยงแบบดาวน์โหลดไฟล์
ข. การเชื่อมโยงภายในเว็บไซต์เดียวกัน
ค. การเชื่อมโยงแบบกำหนดพื้นที่ Map Link
ง. การเชื่อมโยงแบบการสร้าง Rollover Image

10. การเชื่อมโยงเพื่อส่งอีเมล โปรแกรมใดจะถูกเปิดขึ้นมา

ก. Microsoft Outlook ข. google.com

ค. yahoo.com ง. Outlook.com

ใบงาน

คำสั่ง จงสร้างตารางในหน้าเว็บเพจ ตามคำสั่งต่อไปนี้

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

2.1 สร้างการเชื่อมโยงภายในเว็บเพจเดียวกัน
2.2 สร้างการเชื่อมโยงภายในเว็บไซต์เดียวกัน
2.3 สร้างการเชื่อมโยงไปยังเว็บไซต์อื่น
2.4 สร้างการเชื่อมโยงเพื่อส่งอีเมล
2.5 สร้างการเชื่อมโยงเพื่อดาวน์โหลดไฟล์
2.6 สร้างการเชื่อมโยงด้วย Map Link
2.7 สร้างการเชื่อมโยงแบบ Rollover Image

109

หน่วยที่ 9

การสร้างฟอร์ม

สาระสำคัญ

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

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

1. เครื่องมือในการสร้างฟอร์ม
2. เข้าใจการทำงานของฟอร์มและโปรแกรมสคริปต์
3. ตัวอย่างการสร้างฟอร์ม
4. การจัดกลุ่มให้ฟอร์ม
5. ปรับแต่ง และตรวจสอบรูปแบบฟอร์ม

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

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

หน้าเว็บมีความแตกต่างจากเอกสารธรรมดา เพราะเป็นสื่อสองทางที่ผู้ใช้

สามารถสื่อสาร และโต้ตอบกับเจ้าของเว็บได้ ปัจจุบันมีการใช้แบบฟอร์มในหน้า

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

ภาพที่ 9.1 ตัวอย่างแบบฟอร์มขอรายละเอียดเกี่ยวกับผู้ใช้

ภาพที่ 9.2 ตัวอย่างแบบฟอร์มรายละเอียดการสั่งซื้อสินค้า

11
1

9.1 เครื่องมือในการสร้างฟอร์ม

ในโปรแกรม Dreamweaver ได้จัดเตรียมแท็บ Forms ที่มีเครื่องมือต่าง ๆ
สำหรับนำไปใช้ในการสร้างฟอร์ม โดยต้องเขียนโปรแกรมสคริปต์ เช่น ASP, PHP,
CGl, Per หรือ (va ทำงานควบคู่กับฟอร์มด้วย เพื่อใช้ในการประมวลผลข้อมูลที่ได้
รับจากแบบฟอร์ม

ภาพที่ 9.3 ภาพแสดงเครื่องมือในการสร้างฟอร์ม

112

9.2 เข้าใจการทำงานของฟอร์มและโปรแกรมสคริปต์

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

CGI Script นั้นจะถูกเขียนขึ้นมาจากภาษาคอมพิวเตอร์ เช่น Perl, PHP
หรือ ASP.NET ภาษาใดภาษาหนึ่ง ซึ่งปัจจุบันบริษัทที่ให้บริการเช่าพื้นที่รับฝาก
เว็บไซต์จะ สนับสนุนภาษา PHP หรือ ASP.NET อยู่แล้ว ต่อไปนี้คือ ตัวอย่างแสดง
ถึงขั้นตอนการ ทำงานของ CGI ในการจัดการกับข้อมูลที่ได้รับจากแบบฟอร์ม

1. ผู้ใช้ป้อนข้อมูลในแบบฟอร์ม และคลิกเมาส์ปุ่มค้นหา เพื่อส่งข้อมูลไปที่
เครื่องเว็บเซิร์ฟเวอร์

2. เมื่อเว็บเซิร์ฟเวอร์ได้รับข้อมูล ก็จะส่งให้กับ CGI Script ที่มีหน้าที่
ประมวลผลข้อมูล

3. CGI Script ทำการประมวลผลข้อมูลเสร็จ และส่งผลลัพธ์ที่ได้กลับมา
แสดงที่ เบราว์เซอร์

ภาพที่ 9.4 ขั้นตอนการทำงานของ CGI

113

9.3 ตัวอย่างการสร้างฟอร์ม

ตัวอย่างการสร้างฟอร์มประกอบด้วยองค์ประกอบต่าง ๆ ดังรูป

ภาพที่ 9.5 รูปแบบฟอร์มที่สมบูรณ์

การสร้างฟอร์ม

ก่อนการสร้างฟอร์ม ต้องกำหนดขอบเขตของฟอร์มบนหน้าเว็บก่อน โดย
เลือกคำสั่ง Insert > Form->Form หรือกดปุ่ม ในแท็บ Forms จะเกิดเส้น
ประสีแดงล้อมรอบพื้นที่ ที่กำหนดให้เป็นฟอร์ม สามารถปรับขนาดพื้นที่ฟอร์ม
และเพิ่มวัตถุต่าง ๆ ของฟอร์มเข้าไป ในพื้นที่นั้นได้ ดังนี้

114

1. เลือกตำแหน่งวางขอบเขตของฟอร์มบนหน้าเว็บ จากนั้นเลือกคำสั่ง Insert-
>Form->Form หรือเลือกที่ (Form) ที่กลุ่มเครื่องมือ Form

2. แสดงขอบเขตของฟอร์มที่สร้างขึ้น สามารถใส่ข้อความ รูปภาพ และวัตถุ
ต่าง ๆ ที่ ใช้ในการสร้างฟอร์มลงไปได้

3. ให้กำหนดรายละเอียดการทำงานของฟอร์มใน Property Inspector โดย

กำหนดค่า ได้ดังนี้
3.1 Method คือ วิธีในการส่งข้อมูลในฟอร์มให้กับโปรแกรมสคริปต์ ได้แก่

POST ส่งข้อมูลผ่านทางส่วน Body และ GET ส่งข้อมูลผ่านทางส่วน URL ทั้งนี้
การประมวลผล ฟอร์มด้วยโปรแกรมสคริปต์นั้นจะใช้วิธี POST เป็นส่วนใหญ่ (ค่า
Default คือ POST)

3.2 Action ตำแหน่งที่ฟอร์มจะส่งข้อมูลไปให้ หรือก็คือ URL ของ
โปรแกรมสคริปต์ นั่นเอง เช่นhttp:/[ชื่อเว็บไซต์/member.asp (โปรแกรมสคริปต์
เช่น PHP, ASP.NET ผู้เรียนสามารถศึกษาจากคู่มือเล่มอื่น เพื่อเขียนขึ้นมาใช้งาน
กับฟอร์มนี้ได้)

3.3 Form name ชื่อของฟอร์มซึ่งจะถูกอ้างอิง เมื่อมีการนำภาษา
VBScript หรือ JavaScript มาใช้

4. พิมพ์ข้อความลงไป แล้วทำการปรับขนาดของฟอร์ม เพื่อรองรับวัตถุต่าง ๆ
ต่อไป

ภาพที่ 9.6 ขั้นตอนการสร้างฟอร์ม

115

การสร้างฟิลด์กรอกข้อความ

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

ภาพที่ 9.7 การสร้างฟิลด์กรอกข้อความ

ฟิลด์แบบปกติ

เหมาะสำหรับดารกรอกข้อมูลที่มีตัวอักษรไม่ยาวมากนัก เช่น การใส่ชื่อ
นามสกุล

ภาพที่ 9.8 ขั้นตอนการสร้างฟิลด์กรอกข้อความแบบปกติ

หน้าต่าง Accessibility Attributes

ในการสร้างวัตถุใด ๆ ในฟอร์ม จะปรากฎหน้าต่าง Accessibility
Attributes ขึ้นมา เสมอ หน้าต่างนี้จะมีค่าต่าง ๆ ที่กำหนดได้ดังนี้

1. ID ชื่อของวัตถุ (ชื่อนี้จะถูกใช้ในโปรแกรมสคริปต์)
2. Label ข้อความที่ใช้อธิบายวัตถุ

116

3. Style รูปแบบข้อความอธิบายวัตถุ คือ Wrap with label tag(วัตถุ
อยู่ในแท็ก)Attach label tag using for atribute (วัตถุไม่อยู่ในแท็ก Label),
No label tag (ไม่มีแท็ก Label หรือไม่มีข้อความอธิบาย)

4. Position ตำแหน่งข้อความอธิบายวัตถุ คือ Before form item
(ก่อนวัตถุ), After form item (หลังวัตถุ)

5. Access key คีย์ลัด เช่น กำหนดคีย์ KS เมื่อเปิดฟอร์มในเบราว์เซอร์
แล้วกดคีย์ <Alt> +K จะเป็นการเลือกวัตถุนั้น

6. Tab Index ลำดับการเลือกวัตถุ โดยกดคีย์ <Tab> (ค่า 1 คือ ลำดับ
แรก)

ภาพที่ 9.9 หน้าต่าง Accessibility Attributes

ฟิลด์แบบใส่รหัสผ่าน

เหมาะสำหรับใช้กรอกข้อมูลที่ไม่ต้องการให้ผู้อื่นเห็น เช่น การใส่รหัสผ่าน
ของผู้ใช้เนื่องจากจะต้องมีการเชื่อมโยงกับฐานข้อมูลด้วยดังนั้นการตั้งชื่อฟิลด์
ต้องตั้งให้ตรงกับชื่อ ฟิลด์ในฐานข้อมูลด้วย วิธีการดังนี้

117

ภาพที่ 9.10 ขั้นตอนการสร้างฟิลด์กรอกข้อความแบบใส่รหัสผ่าน

ฟิลด์แบบหลายบรรทัด

เหมาะสำหรับการกรอกข้อมูลที่มีจำนวนมาก ๆ ลงในฟอร์ม เช่น การ
กรอกที่อยู่ของ ผู้ใช้ มีขั้นตอนดังต่อไปนี้

ภาพที่ 9.11 ขั้นตอนการสร้างฟิลด์กรอกข้อความแบบหลายบรรทัด

กำหนดข้อความเริ่มต้นให้กับฟิลด์

ถ้าต้องการให้มีการแสดงข้อความเริ่มต้นในฟิลด์ เช่น ให้มีรหัส +66 ใน
ช่องเบอร์โทรศัพท์ กำหนดได้ในช่อง Init val ดังภาพ

ภาพที่ 9.12 การกำหนดค่าเริ่มต้นให้กับฟิลด์

118

การสร้างรายการ

ใช้สำหรับเลือกสิ่งที่ต้องการได้จากรายการ โดยไม่ต้องพิมพ์ มี 2 แบบ
คือ แบบ Menuและแบบ List

ภาพที่ 9.13 ภาพแสดงการสร้างรายการ

รายการแบบ Menu

เหมาะสำหรับรายการข้อมูลจำนวนมาก ขนาดของข้อมูลไม่ยาวมากนัก
มีวิธีการดังนี้

119

ภาพที่ 9.14 ขั้นตอนการสร้างรายการแบบ Menu

รายการแบบ List

เหมาะสำหรับรายการข้อมูลจำนวนน้อย ไม่กี่บรรทัด มีวิธีการดังนี้

120

ภาพที่ 9.15 ขั้นตอนการสร้างรายการแบบ List

กำหนดลำดับตัวเลือกในรายการ

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

ภาพที่ 9.16 แสดงการกำหนดลำดับตัวเลือกในรายการ

การสร้างตัวเช็ค

ตัวเช็ค (Check Box) ทำให้ผู้ใช้สามารถเลือก หรือยกเลิกสิ่งที่เลือกได้ มี
ได้หลายตัวเลือก เหมาะสำหรับใช้กับคำถามที่มีได้หลายคำตอบ ดังรายละเอียด
ต่อไปนี้

ภาพที่ 9.17 ตัวอย่างตัวเช็คในฟอร์มที่สร้างขึ้น

121

ภาพที่ 9.18 ขั้นตอนการสร้างตัวเช็ค

การสร้างตัวเลือก ภาพที่ 9.19 ตัวอย่างตัวเลือกในฟอร์มที่สร้างขึ้น

ตัวเลือก (Radio Button)
เหมาะกับคำถามที่ให้ ผู้ใช้เลือกได้
เพียงตัวเลือกเดียว มีวิธีการสร้าง
ดังนี้

ภาพที่ 9.20 ขั้นตอนการสร้างตัวเลือก

122

ในคำถามที่มีตัวเลือกหลายตัว ต้องตั้งชื่อทุกตัวเลือกในคำถามนั้นด้วย
ชื่อเดียวกัน ถ้า ตั้งคนละชื่อจะหมายถึงเป็นตัวเลือกของคำถามข้ออื่น และตัว
เลือกกลุ่มที่มีชื่อเหมือนกัน จะ เลือกได้เพียงหนึ่งตัวเลือกเท่านั้นในกลุ่มนั้น

ในกลุ่มตัวเลือกที่มีชื่อเหมือนกัน ค่าที่อยู่ในช่อง Checked Value ใน
แต่ละตัวเลือกด้วย ต่างกัน เพื่อแยกได้ว่าผู้ใช้เลือกตัวเลือกไหนเป็นคำตอบ ดัง
ตัวอย่างแต่ละตัวเลือกจะตั้งชื่อ ว่า "radio4” แต่ค่าที่กำหนดใน Checked
Value มีความแตกต่างกันไป โดยเมื่อผู้ใช้เลือก 4 ครั้ง” ค่า “tour” จะถูกส่งไป
ให้โปรแกรมสคริปต์ประมวลผล ทำให้ผู้ดูแลเว็บทราบว่าผู้ใช้เลือก คำตอบเป็น
“4 ครั้ง”

ภาพที่ 9.21 ตัวอย่างการกำหนดค่าในตัวเลือกที่มีชื่อเหมือนกัน

การสร้างฟิลด์เลือกไฟล์

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

ภาพที่ 9.22 ขั้นตอนการสร้างฟิลด์แบบเลือกไฟล์

123

การสร้างปุ่มกด

ในฟอร์มมีปุ่มกด (Button) ที่เรียกว่าปุ่ม Subrit สำหรับส่งข้อมูลที่กรอก
ในฟอร์มไปยังโปรแกรมสคริปต์ หรือมีปุ่ม Reset สำหรับล้างข้อมูลที่กรอก
ทั้งนี้ในฟอร์มส่วนมากจะพบ ปุ่ม Submit และปุ่ม Reset อยู่คู่กัน หรืออาจจะมี
ปุ่มพิเศษอื่นเพิ่มเติมก็ได้ วิธีการดังนี้

ภาพที่ 9.23 ขั้นตอนการสร้างปุ่มกด

ภาพที่ 9.24 ตัวอย่างปุ่มกดที่สร้างขึ้น

ส่วน Action ให้คลิกเลือกการทำงานของปุ่ม ถ้าเลือก Submit form ปุ่ม
จะใช้ส่งข้อมูล ในฟอร์ม, ถ้าเลือก Reset form ปุ่มจะใช้ล้างข้อมูลในฟอร์ม แต่
ถ้าเลือก None จะเป็นปุ่ม พิเศษที่ผู้ใช้ตั้งขึ้น และต้องเขียนโปรแกรมเพิ่มเติม
ถึงจะใช้งานได้

124

การสร้างฟิลด์ซ่อน

ฟิลด์ซ่อน (Helen Field) เป็นเสมือนฟิลด์ปกติ ที่ไม่ต้องการให้ผู้ใช้กรอก
ข้อมูลจะไม่ปรากฏให้เห็นในฟอร์ม แต่สามารถส่งข้อมูลให้กับโปรแกรมสคริปต์
ได้ วิธีการดังนี้

ภาพที่ 9.25 ขั้นตอนการสร้างฟิลด์ซ่อน

สามารถเลือกวางฟิลด์ซ่อนที่ตำแหน่งใดก็ได้ เพราะไม่ได้ถูกนำมาแสดง
ผลบนเบราว์เซอร์

ภาพที่ 9.26 ฟิลด์ซ่อนจะไม่ปรากฏให้เห็นบนเบราว์เซอร์

การสร้างฟิลด์รูปภาพ

สามารถแทรกโลโก้ สัญลักษณ์ หรือรูปโฆษณาต่าง ๆ ในฟิลด์รูปภาพ
(Image Field)เพื่อสร้างความน่าสนใจให้กับฟอร์ม หรือกำหนดให้แสดง
แบนเนอร์ หรือแสดงรูปภาพที่มีการ ถึงก็ไปยังหน้าเว็บอื่น ๆ ได้ วิธีการดังนี้

125

ภาพที่ 9.27 ขั้นตอนการสร้างฟิลด์รูปภาพ

ใน Property Inspector มีการกำหนดค่าต่าง ๆ เกี่ยวกับภาพ สามารถ
กำหนดได้ตั้งแต่ ความกว้างและความสูงของภาพ (W, H), ตำแหน่งเก็บและ
ชื่อไฟล์ภาพที่นำมาใช้ (Src), ข้อความกำกับภาพ (Alt) และการจัดเรียงภาพ
กับข้อความ (Align)

9.4 การจัดกลุ่มให้ฟอร์ม

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

126

ภาพที่ 9.28 ขั้นตอนการจัดกลุ่มให้ฟอร์ม

9.5 ปรับแต่ง และตรวจสอบรูปแบบฟอร์ม

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

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

127

ภาพที่ 9.29 รูปแบบของฟอร์มที่สมบูรณ์เมื่อทดสอบจากเบราว์เซอร์

สรุป

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

128

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

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

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

2. ถ้าต้องการชื่อ ที่อยู่ ผู้ท่องเว็บ ต้องกำหนดให้มีการใช้แบบฟอร์มใด
ก. การใช้ Field Set
ข. การใช้ Text Field
ค. การใช้ Jump Menu
ง. การใช้ Hidden Field

3. ปุ่มคำสั่ง นี้เป็นลักษณะการสร้างฟอร์มแบบใด
ก. การใส่ฟิลด์ซ่อน
ข. การสร้างเช็คบ็อกซ์
ค. การสร้างลิสต์รายการ
ง. การใส่ฟิลด์กรอกข้อความ

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

5. โปรแกรมใดที่ไม่ได้ใช้ในการนำข้อมูลที่ได้จากแบบสอบถามมาประมวลผล และ
แสดงออก เป็นผลลัพธ์ได้

ก.PHP
ข. CGI
ค. FTP
ง. ASP

129

6. ข้อใดกล่าวไม่ถูกต้อง สำหรับส่วน Action ในการทำงานของปุ่ม
ก. Reset form ปุ่มใช้ล้างข้อมูลในฟอร์ม
ข. Submit form ปุ่มใช้ส่งข้อมูลในฟอร์ม
ค. Except form ปุ่มยกเว้นการส่งข้อมูลในฟอร์ม
ง. None ปุ่มที่ต้องเขียนโปรแกรมเพิ่มจึงจะใช้งานได้

7. ในกรณีที่มีตัวเลือกอยู่หลายตัว และไม่มีพื้นที่เพียงพอจะแสดง ควรเลือกฟอร์มแบบใด
ก. Text Field
ข. Jump Menu
ค. การจัดกลุ่มให้ฟอร์ม
ง. การสร้างรายการแบบลิสต์

8. ปุ่มคำสั่ง นี้เป็นลักษณะการสร้างฟอร์มแบบใด
ก. การสร้างเช็คบ็อกซ์
ข. การจัดกลุ่มให้ฟอร์ม
ค. การสร้างลิสต์รายการ
ง. การสร้าง Radio Button

9. การสร้างฟอร์มแบบกรอกข้อความ สามารถกำหนดค่าเริ่มต้นให้กับฟอร์มกรอก
ข้อความจากช่องในข้อใด

ก. Label
ข. Type
ค. Init Val
ง. Multi line

10. การสร้างปุ่มกด ถ้าเลือกรูปแบบเป็น None สามารถเปลี่ยนชื่อปุ่มได้ โดยพิมพ์ชื่อที่
ต้องการในช่องใด

ก. Action
ข. Value
ค. Label
ง. ButtonName

130

ใบงาน

คำสั่ง จงปฏิบัติตามคำสั่งต่อไปนี้
1. สร้างแบบฟอร์มเกี่ยวกับการกรอกใบสมัครงานผ่านทางเว็บไซต์
โดยกำหนดให้แบบฟอร์มมีรายละเอียดดังต่อไปนี้

1.1 มีโลโก้ภาพประกอบของบริษัทที่ต้องการ
1.2 ใส่ฟิลด์สำหรับกรอกข้อความ
1.3 สร้างลิสต์รายการ
1.4 สร้างเช็คบ็อกซ์
1.5 สร้างฟอร์มแบบ Radio Button
1.6 สร้างกรอบสำหรับเลือกไฟล์เพิ่มเติมได้
1.7 สร้างปุ่มกดให้กับแบบฟอร์ม
2. หลังการสร้างแบบฟอร์มตามข้อ 1 แล้ว ให้ทำการปรับแต่งฟอร์ม
ให้สวยงามและจัดกลุ่มให้เป็นหมวดหมู่

131

หน่วยที่ 10

การกำหนดรูปแบบการแสดงผลในหน้าเว็บไซต์

สาระสำคัญ

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

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

1. รู้จักสไตล์
2. พาเนล CSS Styles
3. การแก้ไขค่า Cascading Style Sheet
4. การใช้สไตล์ต้นแบบ
5. Visual Aids ตัวช่วยในการออกแบบเว็บ

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

1. รู้จักสไตล์และสามารถใช้งานสไตล์เบื้องต้นได้
2. เข้าใจการใช้งานพาเนล css Styles
3. แก้ไขค่า Cascading Style Sheet ได้
4. เข้าใจการใช้สไดล์ต้นแบบ
5. ใช้ Visual Aids เป็นตัวช่วยในการออกแบบเว็บได้

ในการสร้างเว็บไซต์ นักออกแบบเว็บมักกำหนดรูปแบบมาตรฐานขึ้นมา เพื่อ
ให้ทั้งเว็บไซต์ใช้รูปแบบเดียวกันทั้งหมด เช่น ส่วนที่เป็นหัวข้อ ใช้ตัวอักษรชนิดนี้ สี
นี้ ซึ่งรูปแบบมาตรฐานดังกล่าวเรียกว่า “สไตล์” หรือ CSS (Cascading Style
Sheet) การนำสไตล์มาใช้ทำให้สามารถควบคุมรูปแบบทั้งเว็บไซต์ได้ง่าย กล่าว
คือถ้าเปลี่ยนค่าสีที่สไตล์หน้าเว็บทุกหน้าที่นำสไตล์นี้ไปใช้ก็จะเปลี่ยนสีตาม ทำให้
ไม่เสียเวลาในการแก้ค่าสีในทุก ๆ หน้าเว็บ

10.1 รู้จักสไตล์

สไดล์ (Style) คือรูปแบบที่ถูกกำหนดขึ้นมาเป็นส่วนกลาง ใช้ร่วมกันในทุก
ๆ หน้าเรียน ในสไตล์ประกอบด้วย กฏ (Rule) และในกฎประกอบด้วย ข้อบังคับ
หรือคุณสมบัติ (Property เช่น ข้อบังคับเรื่องสี ข้อบังคับเรื่องขนาดตัวอักษร
เป็นต้น

สำหรับการใช้งาน มักใช้กฏในสไตล์เป็นตัวบังคับรูปแบบของสิ่งที่เลือก เช่น
บังคับรูปแบบตัวอักษร บังคับรูปแบบตาราง บังคับรูปแบบพื้นหลัง เป็นต้น

ตัวอย่างการนำกฎในสไตล์มาใช้บังคับรูปแบบ

ภาพที่ 10.1 เลือกข้อความ แล้วคลิกเมาส์ปุ่มขวาเลือก ภาพที่ 10.2 แสดงรูปแบบของตัวอักษรที่
คำสั่ง CSS Styles-Tex11 (Text1 คือ ชื่อกฏที่สร้างขึ้น) เปลี่ยนไปตามกฎข้อบังคับ

ตำแหน่งที่ใช้ในการเก็บสโตล์

ในเว็บไซต์สามารถสร้างสไตล์และเก็บไว้ในตำแหน่งต่าง ๆ ได้ 3 จุดซึ่งทั้ง 3
จุดนี้ มีขอบเขตการเรียกใช้สไตล์ได้แตกต่างกัน เช่น ถ้าเก็บสไตล์แบบ Linked

สไตล์นั้นสามารถ เรียกได้ทั่วทั้งเว็บไซต์ แต่ถ้าเก็บสไตล์แบบ Embeded สไตล์นั้น
จะถูกเรียกใช้ได้เฉพาะในหน้าเว็บหน้านั้นเท่านั้น

133

ลำดับการเรียกใช้สไตล์

สามารถกำหนดสไตล์ได้พร้อมกันทั้ง 3 จุดที่ได้กล่าวมา และนำสไตล์ทั้ง 3 จุด
มาใช้รวม กันได้ เช่น กำหนดชนิดตัวอักษรใน Linked กำหนดขนาดตัวอักษรใน
Embeded และกำหนด สใน Inline เมื่อนำสไตล์ทั้ง 3 จุดมากำหนดให้กับแท็ก
HTML แท็กนั้นก็จะแสดงรูปแบบตัว อักษร โดยใช้ชนิดตัวอักษรจากสไตล์ในส่วน
Linked, ใช้ขนาดตัวอักษรจากสไตล์ในส่วน Embeded และใช้ค่าสีจากสไตล์ใน
ส่วน Inline รวมกัน แต่ถ้ากำหนดค่าซ้ำกันในแต่ละจุด เช่น กำหนดค่าสีในส่วน
Embedded, Inline และ Linked ในกรณีเช่นนี้จะใช้ค่าสีที่ใกล้แท็ก มากที่สุด คือ
ค่าสีในส่วน Inline

10.2 พาเนล CSS Styles

เป็นส่วนที่ใช้ในการกำหนดสไตล์ และสร้างกฏ ผู้ใช้สามารถเปิดพาเนล CSS
Stylesโดยวิธีเลือกคำสั่ง Window->Css Styles นอกจากนี้ ในพาเนล CSS
Styles มีการแสดงชื่อกฏที่ถูกสร้างขึ้น และสามารถแก้ไขเปลี่ยนแปลงคุณสมบัติ
ภายในกฎ เช่น ชนิดตัวอักษร สี ความหนา/บาง ได้

ภาพที่ 10.3 แสดงคำสั่งในหน้าต่าง Css Styles

ภาพที่ 10.4 ตัวอย่างกฏชื่อ .main

134

การสร้างกฏข้อบังคับ

ทดลองสร้างกฏใหม่ดังตัวอย่าง คือ กำหนดกฏให้ตัวอักษรมีขนาด 24
พิกเซล, ใช้ตัวอักษร Arial, Helvetica, Sans-serif, เป็นตัวหนา และสีแดง โดย
เก็บกฎแยกลงในไฟล์ Text Style.css เพื่อสามารถเรียกใช้ในหน้าเว็บใด ๆ ได้

1. คลิกเมาส์ เพื่อเพิ่มกฎใหม่ในพาเนล CSS Styles
2. ประกาศกฏใหม่ จากนั้นคลิกปุ่ม OK เพื่อตกลง ดังตัวอย่าง กำหนดกฏ
ใหม่ได้ดังนี้

2.1 Selector Type เลือก Class เพื่อสร้างกฎแบบทั่วไป
2.2 Selector Name ตั้งชื่อกฏเป็น Text1
2.3 Rule Definition เลือก (New Style Sheet File) เพื่อสร้างไฟล์
css ใหม่
3. ตั้งชื่อไฟล์ .css แล้วคลิกปุ่ม Save เพื่อบันทึก จากนั้นเข้าสู่หน้าต่างที่
กำหนด คุณสมบัติภายในกฎ
4. กำหนดคุณสมบัติ โดยประเภทตัวอักษรเป็น Arial, Helvitica, sans-
serif, ขนาด24 พิกเซล, สีตัวอักษรเป็นสีแดง และเป็นตัวหนา จากนั้นคลิกปุ่ม
OK เพื่อตกลง
5. แสดงผลลัพธ์ของกฎที่สร้างขึ้น พบว่ากฎถูกเก็บไว้ในไฟล์ .css ซึ่งใน
หัวข้อต่อไปจะนำกฎนี้ไปใช้งานกับข้อความบนหน้าเว็บที่ต้องการ

135

ภาพที่ 10.5 ขั้นตอนการสร้างข้อบังคับ

136

ตัวเลือกอื่น ๆ ในหน้าต่าง New CSS Rule

ในหน้าต่าง New CSS Rule มีตัวเลือกอื่น ๆ ที่ควรรู้ดังนี้
Selector Type

1. Class ตั้งกฎที่ใช้กับแท็ก HTML แท็กใดก็ได้ (ชื่อกฏนำหน้าด้วยจุด (0)
2. ID ตั้งกฎที่มีผลกับแท็ก HTML ค่า 4D ในแท็กตรงกับชื่อกฎ (ชื่อกฏดอยนา ด้วย
& เสมอ)
3. Tag ตั้งกฎที่มีผลกับแท็ก HTML ที่ชื่อแท็กตรงกับชื่อกฎ เช่น กฏชื่อ tate ผล
บังคับใช้กับแท็ก <TABLE- ทุกจุดในหน้าเว็บ
4. Compound ตั้งกฏที่มีผลกับแท็ก HTML ที่ถูกเลือก และแท็ก HTM. ข้อน

ภาพที่ 10.6 การกาหนด Selector Type

Selector Name

ใช้ตั้งชื่อกฏ โดยช่องบนใช้ตั้งชื่อ ส่วนช่องล่างโปรแกรมใช้แสดงคำอธิบายแจ้ง
ให้ทราบ (จากภาพโปรแกรมบอกว่า ชื่อกฎคือ table) และถ้าค่าในช่อง Selector

Type เป็น Compound สามารถตั้งกฎสำหรับสถานะลิงก์ได้ โดย
1. a:Link ตั้งกฎสำหรับสถานะลิงก์ปกติ
2. arisited ตั้งกฎสำหรับสถานะลิงก์ที่ถูกคลิกไปแล้ว
3. a:hover ตั้งกฏสำหรับสถานะลิงก์ที่ถูกเมาส์
4. aractive ตั้งกฎสำหรับสถานะลิงก์ที่ถูกโฟกัส

ภาพที่ 10.7 การกำหนด Selector Name ภาพที่ 10.8 การกำหนดสถานะลิงก์

137

Rule Definition กำหนดตำแหน่งที่ใช้เก็บกฏ
1. (This document only) เก็บกฏในหน้าเว็บหน้านั้น กฎจะถูกเรียกได้เฉพาะ

ในหน้าเว็บหน้านั้นเท่านั้น (เก็บแบบ Embedded)
2. (New Style Sheet File) เก็บกฏในไฟล์แยก Css โดยสร้างเป็นไฟล์ใหม่

ทำให้หน้าเว็บหน้าอื่นสามารถเรียกกฎที่สร้างขึ้นนี้ไปใช้งานได้ (เก็บแบน Linked)
3. ชื่อไฟล์ css เก็บกฏในไฟล์แยก Css โดยเพิ่มในไฟล์เดิม (เก็บแบบ

Linked)

ภาพที่ 10.9 การกำหนด Rule Definition

การนำสไตล์มาใช้งาน

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

ภาพที่ 10.10 ขั้นตอนการนำสไตล์มาใช้งาน

138

การนำสไตล์มาใช้งานผ่านทาง Property Inspector

การเปลี่ยนสไตล์ได้ง่าย ๆ มีอีกวิธีหนึ่ง คือผ่านทาง Property Inspector
ดังนี้

ภาพที่ 10.11 ขั้นตอนการนำสไตล์มาใช้งานผ่านทาง Property Inspector

การลิงก์ไฟล์.css

ในกรณีที่มีการสร้างกฏในไฟล์ .CSS แยกต่างหากจากหน้าเว็บ สามารถนำ
ไฟล์ดังกล่าวไปลิงก์เข้าหน้าเว็บใด ๆ ก็ได้ และมีผลทำให้หน้าเว็บหน้านั้นสามารถ
เรียกกฏที่เก็บอยู่ในไฟล์ .css มาใช้งานได้ วิธีการลิงก์ไฟล์ .css มาใช้ในหน้าเว็บ
มีดังนี้

1. เปิดหน้าเว็บที่จะลิงก์ไฟล์ .css จากนั้นคลิกที่
2. คลิกปุ่ม Browse. ในช่อง File /URL เพื่อค้นหาไฟล์ .css
3. ปรากฎหน้าต่าง Select Style Sheet File ให้เลือกไฟล์ .cssที่ต้องการ
คลิกปุ่ม OK
4. แสดงชื่อไฟล์ CSS และเลือกตัวเลือกต่าง ๆ ตามต้องการ รายละเอียด
ของตัวเลือก มีดังนี้

1. Link กำหนดให้มีการเชื่อมโยงกันระหว่างหน้าเว็บกับไฟล์ .css ถ้า
ไฟล์ .CSS เปลี่ยนจะมีผลต่อหน้าเว็บเช่นกัน

2. Import คัดลอกกฎในไฟล์ .CSS มาเก็บลงในหน้าเว็บ กรณีเช่นนี้จะ
ไม่มีการลิงก์เกิดขึ้น ดังนั้นหากไฟล์ .CSSเปลี่ยน จะไม่มีผลกระทบต่อหน้าเว็บ

3. Media กำหนดว่าไฟล์ CSS นี้ใช้กับมีเดียชนิดใด (ความหมายของ
มีเดียสามารถเข้าไปศึกษาได้ที่ www.w3.org/TRICSS21/media.html)

139

จากนั้นคลิกปุ่ม OK เพื่อตกลงการนำไฟล์ .css นี้ลิงก์กับไฟล์หน้าเว็บ
สังเกตใน พาเนล CSS Styles จะพบชื่อไฟล์ .CSS

5. แสดงกฎที่เก็บในไฟล์ .css ซึ่ง ซึ่งสามารถเรียกใช้ได้ตามปกติ เหมือนขั้น
ตอนที่กล่าวไว้ ในหัวข้อที่ผ่านมา

ภาพที่ 10.12 ขั้นตอนการลิงก็ไฟล์ CSS

140

การกำหนดสไตล์แบบ Inline

เป็นการตั้งคุณสมบัติ CSS ให้กับวัตถุที่เลือก ไม่ได้ตั้งเป็นกฎใหม่ ไม่ได้ตั้ง
ชื่อใหม่เพื่อเรียกใช้ซ้ำเป็นการกำหนดคุณสมบัติเฉพาะจุดที่เลือกเพียงจุดเดียว
เท่านั้น การกำหนดคุณสมบัติเช่นนี้ เรียกว่า การกำหนดสไตล์แบบ Inline

ภาพที่ 10.13 ขั้นตอนการกำหนดสไตล์แบบ Inline

การเปลี่ยนชื่อสไตล์

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

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

1. ใน Property Inspector ในส่วน HTML ที่ช่อง Class ให้คลิกเลือกคำ
สั่ง Rename เพื่อ เปลี่ยนชื่อสไตล์

2. ปรากฎหน้าต่าง Rename Style ที่ช่อง Rename style เลือกชื่อ
สไตล์ที่เปลี่ยน

3. ที่ช่อง New name ตั้งชื่อใหม่แทนที่ชื่อเดิม จากนั้นคลิกปุ่ม OK

141

4. เฉพาะสไตล์ที่เก็บในไฟล์ .css เท่านั้น ที่จะแสดงหน้าต่างนี้ โดยถ้า
คลิก Yes จะ ปรากฏหน้าต่าง Find and Replace เพื่อใช้แก้ไขจุดที่เรียกใช้ชื่อ

สไตล์เดิม ให้เปลี่ยน ไปใช้ชื่อสไตล์ใหม่ แต่ถ้าคลิก No จะไม่มีการแก้ไขทำให้

หน้าเว็บนั้น ไม่สามารถหา ชื่อสไตล์เดิมพบ
5. ปรากฎหน้าต่าง Find and Replace ซึ่งมีการกำหนดค่าให้เรียบร้อย

ให้คลิกที่ปุ่ม Repace AI เพื่อแทนที่ชื่อสไตล์เดิมด้วยชื่อสไตล์ใหม่ทุกจุด

6. ปรากฎหน้าต่างแจ้งบอกว่า การแทนที่ในเอกสารที่ไม่ถูกเปิดแสดงอยู่

เอกสารนั้น ไม่สามารถย้อนกลับการทำงานได้ (Undo) ถ้าจะแทนที่ให้คลิกที่ปุ่ม
Yes

7. ใน Property Inspector ในส่วน HTML ที่ช่อง Class จะแสดงชื่อ

สไตล์ใหม่แทนที่ ชื่อสไตล์เดิม

ภาพที่ 10.14 ขั้นตอนการเปลี่ยนชื่อสไตล์

142

การยกเลิกสไตล์

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

ภาพที่ 10.15 ขั้นตอนการยกเลิกสไตล์

การลบกฎ

สามารถลบกฎที่สร้างขึ้นได้ ที่พาเนล CSS Styles โดยคลิกเมาส์ปุ่มขวาที่
ชื่อกฎ แล้วเลือกคำสั่ง Delete หรือคลิกปุ่ม ให้ระวังเรื่องการลบ เพราะจุดที่
เรียกใช้กฎที่ลบทิ้งไปจะได้รับผลกระทบด้วย

ภาพที่ 10.16 ขั้นตอนการลบกฏ

143