lesson7_KhruDaony

บทท่ี 7
การจดั หนา้ เวบ็ เพจดว้ ยเลเยอร์ (Layer)

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

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

การสร้างเลเยอร์

การสร้างเลเยอร์บนเว็บเพจจะทำได้เฉพาะในโหมดปกติ (Standard Mode) หรือโหมดขยาย
(Expanded Mode) เทา่ นั้น โดยสามารถใสข่ ้อความ รูปภาพ หรือตารางลงในเลเยอรไ์ ด้

1. การวาดเลเยอร์
การวาดเลเยอร์ สามารถทำไดด้ งั ภาพที่ 7.1 ดังนีค้ ือ
1. คลิกแถบเลเอาท์ บนแถบเคร่อื งมอื แทรก
2. คลกิ ปมุ่ ดรอเลเยอร์ (Draw Layer) หรอื คลิกคำสั่ง Insert  Layout Objects  Layer
3. แดรกเมาส์เป็นกรอบสี่เหลี่ยมบนหน้าเว็บเพจตามขนาดท่ีต้องการ โดยสังเกตตัวเลขบอก

ขนาดได้ที่ทางขวาของแถบสถานะ





ภาพที่ 7.1 การวาดเลเยอร์

2

2. การใส่เน้อื หาลงในเลเยอร์
การใส่เน้ือหาลงในเลเยอร์ สามารถทำได้เช่นเดียวกับการใส่เนื้อหาลงในเว็บเพจหรือตาราง

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

ภาพท่ี 7.2 การใส่เน้อื หาลงในเลเยอร์

การกำหนดวธิ ีการแสดงเลเยอร์

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

1. การซอ่ นหรือแสดงเสน้ โครงรา่ งของเลเยอร์
เส้นโครงร่างของเลเยอร์มีลักษณะเป็นกรอบสี่เหล่ียมสีเทา เมื่อเลเยอร์ถูกเลือก กรอบจะ

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

คลกิ คำสัง่ View  Visual Aids  Layer Outlines
หรอื คลกิ ที่ปมุ่ วชิ วลเอดส์ (Visual Aids) แล้วเลอื กคำสัง่ Layer Outlines ดงั ภาพที่ 7.3

3

ภาพท่ี 7.3 การซ่อนหรอื แสดงเสน้ โครงร่างของเลเยอร์

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

ตำแหน่งใดก็ได้บนหนา้ เวบ็ เพจ แตท่ ี่จริงแล้วทุกเลเยอร์จะมีตำแหน่งที่ยึดอยู่บนหน้าเวบ็ เพจ ที่เรียกว่า จุด

แองเคอร์ (Anchor Point) โดยแสดงดว้ ยไอคอน ตรงมุมบนซ้ายของหนา้ เว็บเพจ
การซอ่ นหรอื แสดงจุดยึดของเลเยอร์ ทำได้ดังนค้ี อื
คลิกคำสั่ง View  Visual Aids  Invisible Elements

หรือคลกิ ทีป่ ุ่มวิชวลเอดส์ (Visual Aids) แลว้ เลอื กคำส่ัง Invisible Elements

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

การเลอื กเลเยอรส์ ามารถทำได้หลายวิธีดงั นีค้ อื แลว้ คลกิ
วธิ ีท่ี 1 คลิกท่แี ฮนเดิลรปู ตรงมมุ บนซา้ ยของเลเยอร์
วิธที ่ี 2 กดแป้นพิมพ์ [Shift] ค้างไว้ แลว้ คลกิ ทีใ่ ดกไ็ ดบ้ นเลเยอร์
วิธที ่ี 3 เลอ่ื นเมาส์ไปทีข่ อบเลเยอร์ จนตวั ช้ีเมาสเ์ ปลย่ี นเปน็ รูป
วิธที ี่ 4 คลกิ ท่ีไอคอน

4

การกำหนดคุณสมบตั ขิ องเลเยอร์

1. คณุ สมบัตขิ องเลเยอรบ์ นพาเนลกำหนดคณุ สมบัติ
เม่ือเลเยอร์ถูกเลือก จะปรากฏคุณสมบัติของเลเยอร์บนพาเนลกำหนดคุณสมบัติ เพื่อให้

ผู้ออกแบบปรับแต่งตามตอ้ งการ (ดภู าพท่ี 7.4)

ตำแหน่ง ขนาด ระดบั ชัน้ ภาพพื้นหลงั
ชอื่ เลเยอร์

กำหนดใหแ้ สดงเนอ้ื หา ซอ่ น/แสดง สีพนื้ หลงั
เพียงบางส่วน เลเยอร์

ภาพท่ี 7.4 คุณสมบัติของเลเยอรบ์ นพาเนลกำหนดคุณสมบัติ

2. คณุ สมบตั ขิ องเลเยอรบ์ นพาเนลเลเยอร์

นอกจากปรับแต่งคุณสมบัติของเลเยอร์ที่พาเนลกำหนดคณุ สมบัติแล้ว ผอู้ อกแบบยังสามารถ
เลอื กปรับแต่งคุณสมบตั ขิ องเลเยอรไ์ ด้ที่พาเนลเลเยอร์ โดยคลกิ คำส่งั Windows  Layer ดังภาพท่ี 7.5

ป้องกันเลเยอร์ซอ้ นทบั กนั

เลเยอรถ์ ูกซอ่ น
เลเยอรถ์ กู แสดง

ช่อื เลเยอร์ ระดับช้นั เลเยอร์

ภาพท่ี 7.5 คณุ สมบัติของเลเยอรบ์ นพาเนลเลเยอร์

5

3. การยา้ ยตำแหน่งเลเยอร์
เลเยอรเ์ ป็นออบเจ็กตท์ ่เี ป็นอิสระ ดังนัน้ ผอู้ อกแบบสามารถยา้ ยเลเยอรไ์ ปตำแหน่งใดๆ ก็ไดบ้ น

หน้าเวบ็ เพจ ซง่ึ ทำได้ง่ายๆ ดงั น้คี อื
1. คลกิ ทแ่ี ฮนเดิ้ลรปู ตรงมุมบนซ้ายของเลเยอร์
2. แดรกเมาสไ์ ปตำแหน่งท่ตี ้องการ

4. การปรับขนาดเลเยอร์
การปรบั ขนาดเลเยอรส์ ามารถทำได้ดังน้คี อื
1. คลกิ ที่แฮนเด้ิลรูปตรงมุมบนซา้ ยของเลเยอร์
2. คลกิ ทจ่ี ุดแฮนเด้ลิ รอบ ๆ เลเยอร์ แล้วแดรกเมา้ ท์เพ่ือปรบั ขนาด

5. การจัดระดบั ช้ันของเลเยอร์
การจัดหน้าเว็บเพจด้วยเลเยอร์ สามารถนำเลเยอร์มาวางซ้อน ๆ กันได้ โดยกำหนดค่า

ระดับช้ัน (z-index) เป็นค่าตัวเลข เช่น -2, -1, 0, 1, 2 ค่าท่ีมาก หมายถึง เลเยอร์ท่ีอยู่ชั้นบน ค่าท่ีน้อย
หมายถึงเลเยอรท์ ี่อยชู่ ัน้ ลา่ ง สำหรบั ค่า 0 เปน็ ระดบั ชั้นของเนื้อหาปกติบนเวบ็ เพจทไี่ ม่ไดอ้ ยู่ในเลเยอรใ์ ด ๆ

การเปลี่ยนค่าระดบั ชนั้ ของเลเยอรท์ ำได้ 2 วธิ ีดงั น้คี ือ
วธิ ที ่ี 1 กำหนดค่าระดบั ชัน้ ทร่ี ายการ “z-index” ในพาเนลกำหนดคณุ สมบตั ิ (ดูภาพที่ 7.6)

กำหนดค่า Z-index

ภาพที่ 7.6 การกำหนดคา่ z-index ทีพ่ าเนลกำหนดคุณสมบัติ

วธิ ที ่ี 2 กำหนดค่าระดบั ชน้ั ท่ีรายการ “z-index” ในพาเนลเลเยอร์ (ดภู าพที่ 7.7)

คลกิ แลว้ พมิ พ์คา่ Z-index

ภาพท่ี 7.7 การกำหนดคา่ z-index ทพ่ี าเนลเลเยอร์

6

6. การซอ่ นและแสดงเลเยอร์

การซ่อนและแสดงเลเยอร์ มักใช้ร่วมกันกับคำสั่งในกลุ่มบีแฮฟวีเออร์ (Behavior) เพ่ือสร้าง

เอฟเฟ็กต์พเิ ศษสำหรับโต้ตอบกับผู้เยีย่ มชมเวบ็ ไซต์ การซอ่ นและแสดงเลเยอรท์ ำได้ 2 วิธีคือ

วิธีที่ 1 กำหนดค่าในพาเนลกำหนดคุณสมบัติ โดยกำหนดท่ีกรอบรายการ “Vis” ดังน้ี คือ

(ดูภาพที่ 7.8)

 default ไมร่ ะบุ

 inherit ใช้คุณสมบตั ิตามเลเยอร์ทคี่ รอบเลเยอร์ปจั จบุ นั อยู่

 visible ให้แสดงเลเยอร์นี้

 hidden ให้ซ่อนเลเยอรน์ ้ี

การซ่อน/แสดงเลเยอร์

ภาพที่ 7.8 การซ่อนและแสดงเลเยอรใ์ นพาเนลกำหนดคุณสมบตั ิ

วธิ ีท่ี 2 กำหนดค่าบนพาเนลเลเยอร์ โดยคลกิ ทรี่ ปู ดวงตาหนา้ ช่อื เลเยอร์
หมายถงึ เลเยอรถ์ ูกแสดงอยู่
หมายถึง เลเยอร์ถกู ซอ่ นอยู่

7. การแสดงเนอ้ื หาทมี่ ขี นาดใหญ่กวา่ เลเยอร์

ผู้ท่ีออกแบบสามารถกำหนดว่าจะแสดงเนื้อหาส่วนท่ีเกินในเลเยอร์ได้ โดยเลือกจากกรอบ

รายการ “Overflow” บนพาเนลกำหนดคณุ สมบตั ิ ดงั น้ีคอื (ดูภาพที่ 7.9)

 visible ขยายเลเยอร์ออกไปจนสามารถแสดงเน้ือหาได้ครบ

 hidden ซ่อนเน้ือหาสว่ นทเี่ กนิ

 scroll ซ่อนเน้ือหาส่วนที่เกิน โดยให้แสดงสครอลบาร์เพ่ือเล่ือน

ดเู น้อื หาได้

 auto ซ่อนเน้ือหาส่วนท่ีเกิน โดยให้แสดงสครอลบาร์ เม่ือเนื้อหา

ใหญเ่ กินขนาดของเลเยอรเ์ ทา่ นัน้

วธิ แี สดงเน้อื หาทม่ี ขี นาดใหญก่ วา่ เลเยอร์

ภาพท่ี 7.9 การแสดงเน้ือหาท่ีมีขนาดใหญ่กว่าเลเยอร์

7

8. การแสดงเน้อื หาเพยี งบางสว่ น
ผู้ออกแบบสามารถกำหนดให้แสดงเน้ือหาในเลเยอร์เพียงบางส่วน โดยซ่อนส่วนเหลือไว้ซ่ึง

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

 L ตัดขอบดา้ นซ้ายของเนือ้ หาออกตามจำนวนพิกเซลที่กำหนด
 T ตดั ขอบด้านบนของเนอื้ หาออกตามจำนวนพิกเซลทก่ี ำหนด
 R ตัดขอบด้านขวาของเนื้อหาออก ให้เหลือความกว้างเท่าจำนวนพิกเซล

ที่กำหนด
 B ตดั ขอบดา้ นลา่ งของเนอื้ หาออก ใหเ้ หลอื ความสงู เทา่ ทีก่ ำหนด

ภาพที่ 7.10 การแสดงเน้ือหาเพียงบางสว่ น

การสร้างเลเยอร์ซอ้ นเลเยอร์

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

1. คลิกเคร่ืองมือดรอลเลเยอร์ (Draw Layer) บนแถบเครื่องมอื แทรก
2. กดแปน้ พิมพ์ [Alt] ค้างไว้ แลว้ แดรดเมาสเ์ ปน็ กรอบสเี่ หลีย่ มในเลเยอร์ท่ีมีอย่แู ลว้

เลเยอรห์ ลัก

เลเยอรย์ ่อย

ภาพท่ี 7.11 การสร้างเลเยอร์ซอ้ นเลเยอร์

8

การแปลงเลเยอร์ใหเ้ ป็นตาราง

การใช้เลเยอร์ในการจัดองค์ประกอบบนหน้าเว็บเพจ ช่วยให้งานออกแบบเว็บเพจดูง่ายขึ้นมากก็

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

เป็นตาราง โดยมวี ธิ ีการดงั นคี้ อื (ดูภาพที่ 7.12)

1. คลกิ คำสงั่ Modify  Convert  Layers to Table

2. เลอื กตัวเลือกสำหรับกำหนดวิธีสร้างตารางเพื่อจดั องคป์ ระกอบ คอื

Most accurate ใหไ้ ด้ผลลัพธ์ท่ีเที่ยงตรงทส่ี ดุ โดยโปรแกรม

จะแปลงทกุ ๆ เลเยอรไ์ ปเปน็ เซลล์ พรอ้ มทงั้

สร้างเซลลเ์ สรมิ ในชว่ งระหวา่ งเลเยอร์

Smallest: collapse empty cells ยุบเซลล์ทม่ี ีความกวา้ งน้อยกว่าค่าทกี่ ำหนด

ในช่องถดั มา ซึ่งจะช่วยลดจำนวนเซลล์วา่ ง

ในตาราง แต่ก็อาจทำให้องค์ประกอบของ

เว็บเพจผิดเพย้ี นไป

Use transparent GIFs ให้ใช้ภาพสเพเซอร์ควบคุมความกว้างของ

เซลล์

Center on page จัดตารางไวก้ ึ่งกลางเว็บเพจ

3. คลกิ ปุ่ม OK






ภาพท่ี 7.12 การแปลงเลเยอรไ์ ปเปน็ ตาราง

9

บทสรุป

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

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

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

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

10

คำถามท้ายบทที่ 7

คำชแ้ี จง
1. คำถามทา้ ยบทท่ี 7 เพื่อทบทวนความรู้ของนกั ศึกษา เรอื่ งการจัดหน้าเวบ็ เพจดว้ ยเลเยอร์ (Layer)
2. การตอบคำถาม ให้นกั ศึกษาเตมิ ข้อความลงในชอ่ งว่างใหส้ มบูรณ์

1. เลเยอร์(Layer ) หมายถึง ..............................................................................................................
……………………………………………………………………………………..…………………………………….…………
……………………………………………………………………………………...………………………………………………

2. เลเยอร์มคี วามสำคัญในการออกแบบเวบ็ เพจ คือ
……………………………………………………………………………………..………………………………………………
……………………………………………………………………………………...………………………………………………
……………………………………………………………………………………..………………………….……………………
……………………………………………………………………………………...………………………………………………

3. การสรา้ งเลเยอรบ์ นเวบ็ เพจจะทำไดเ้ ฉพาะในโหมด……………………………………………………………….
หรอื โหมด……………………..…………. เทา่ น้ัน โดยสามารถใส่…………………….……………..………………
ลงในเลเยอร์ได้

4. การกำหนดค่าระดับช้ัน (Z-index) ของเลเยอร์ คา่ ท่มี ากมายถึง………...………...……………………….
ค่าทีน่ อ้ ยหมายถึง…………………...…………………………………………………………………………………………
คา่ 0 หมายถึง………………………………..………………………………………………………………………………

5. กรอบรายการ “Vis” บนพาเนลกำหนดคณุ สมบตั ิ ทำหนา้ ท่ี………………….………….......................
………………………………………………………………………………………………………………………………………

11

เอกสารอา้ งอิง

บญุ สืบ โพธศ์ิ รี และอำภา กุลธรรมโยธิน (2547). การพฒั นาเว็บเพจดว้ ยโปรแกรมสำเรจ็ รูป.
กรุงเทพฯ: ศูนย์ส่งเสริมอาชวี ะ.

ดวงพร เก๋ียงคำ. (2549). อินไซต์ Dreamweaver 8. กรงุ เทพฯ: โปรวชิ ่ัน.
ดวงพร เกย๋ี งคำ. (2550). ค่มู ือสร้างเว็บไซตด์ ้วยตนเอง. กรงุ เพทฯ: โปรวิช่นั .
บรรณาธิการ นาถสงค์. (2550). Dreamweaver 8 Workshop. กรุงเทพฯ: ซัคเซส มีเดยี .
บอกอ แรมโบ.้ (2550). มอื ใหม่ Dreamweaver 8. กรุงเทพฯ: ซัคเซส มีเดยี .
พนั จนั ทร์ ธนวัฒนเสถียร. (2550). Dreamweaver 8 ฉบับเรยี นลัด. กรงุ เทพฯ: ซัคเซส มีเดีย.
สทิ ธิชัย ประสานวงศ์. (2550). สรา้ งสรรคเ์ ว็บสวยด้วย Dreamweaver 8. กรุงเทพฯ: ซอฟทเ์ พรส.