การสร้างและปรับแต่งเลเยอร์

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

 

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

สําหรับวิธีการสร้างเลเยอร์ มีขั้นตอนดังต่อไปนี้

1. คลิกเมนู Insert > Layer จะสังเกตเห็นว่ามีกรอบเลเยอร์แสดงขึ้นมา

2. ใส่ข้อมูลที่ต้องการลงในกรอบเลเยอร์ โดยใน ที่นี้จะใส่รูปภาพลงไป

3. คลิกปุ่ม Image เพื่อเลือกไฟล์รูปภาพจาก หน้าต่าง Insert

4. เลือกรูปภาพที่จะนํามาวาง รูปภาพที่จะปรากฏอยู่ภายในกรอบของเลเยอร์ ดัง รูปด้านล่าง

 

การปรับขนาดเลเยอร์

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

1. คลิกกรอบของเลเยอร์ โดยจะสังเกตได้ว่าที่ กรอบของเลเยอร์มี Handle ซึ่งก็คือรูปสี่เหลี่ยมเล็กๆ สีดํา ปรากฏขึ้นมา

2. วางเมาส์ที่มุมด้านใดด้านหนึ่งของกรอบ โดย สังเกตเห็นว่า สัญลักษณ์ของเมาส์จะเปลี่ยนเป็นรูปลูกศร 2 หัว

3. แดรกเมาส์เลื่อนปรับขนาดกรอบ ของเลเยอร์ตามต้องการ

เมื่อปล่อยเมาส์ก็จะได้เลเยอร์ที่มีขนาดตามต้องการดังรูป

 

การเคลื่อนย้ายเลเยอร์

หลังจากที่สร้างเลเยอร์เสร็จเรียบร้อยแล้ว ต่อไป จะเป็นเรื่องของการเคลื่อนย้ายเลเยอร์ไปไว้ยังตําแหน่งต่างๆ บนหน้าเว็บเพจตามต้องการ สําหรับการเคลื่อนย้ายเลเยอร์สามารถทําได้ดังนี้

1. คลิกเลเยอร์ที่ต้องการจะเคลื่อนย้าย

2. คลิกปุ่ม Handle ที่มุมด้านซ้ายของเลเยอร์

3. ลากเลเยอร์ไปยังตําแหน่งที่ต้องการ

4. คลิกเมาส์บริเวณพื้นที่ว่าง เลเยอร์จะแสดงอยู่ ตรงตําแหน่งที่ต้องการ

5. ใส่พื้น Background ให้กับหน้าเว็บเพจ

 

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

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

1. สร้างเลเยอร์ขึ้นมาใหม่อีกเลเยอร์ โดยกรอกข้อ ความลงในเลเยอร์ที่สร้างขึ้นมาใหม่ พร้อมปรับแต่งขนาด ตัวอักษรและขนาดเลเยอร์ตามต้องการ

2. คลิกเลเยอร์ข้อความ

3. ลากไปวางยังตําแหน่งที่ต้องการ โดยในตัว อย่างจะลากไปวางทับเลเยอร์รูปภาพ

4. คลิกเลเยอร์รูปภาพ จะเห็นว่าเลเยอร์รูปภาพจะแสดงทับอยู่บนเลเยอร์ข้อความ ทําให้มองเห็นข้อความไม่ครบ ดังรูป

ในกรณีที่ต้องการจะให้ข้อความแสดงอยู่บน เลเยอร์รูปภาพ ให้ทําตามขั้นตอนดังต่อไปนี้

5. คลิกเลเยอร์ข้อความ เพื่อให้แสดงทับเลเยอร์รูปภาพ จะแสดงผลลัพธ์ดังรูป

 

การเคลื่อนย้ายหลายเลเยอร์พร้อมกัน

ในกรณีที่ต้องการจะเคลื่อนย้ายเลเยอร์มากกว่า หนึ่งเลเยอร์ไปพร้อมๆ กัน เราสามารถทําได้โดยการเลือก เลเยอร์ทั้งหมด ดังแสดงต่อไปนี้

1. คลิกเลเยอร์แรกที่ต้องการจะเคลื่อนย้าย ซึ่งในที่นี้ก็คือ เลเยอร์รูปภาพ

2. กดปุ่ม <Shift > ที่คีย์บอร์ดค้างไว้

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

4. แดรกเมาส์เลื่อนเลเยอร์ ไปยังตําแหน่งที่ต้องการ ให้สังเกตว่าเลเยอร์ทั้งหมดที่เลือกจะเคลื่อนย้ายไปยังตําแหน่งที่ต้องการพร้อมกัน

5. กดปุ่ม <F 12 > ที่คีย์บอร์ด เพื่อดูผลลัพธ์ทางบราวเซอร์

 

วิธีเปิดหน้าต่างเลเยอร์

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

1. คลิกเมนู Window > Other > Layers หน้า ต่างเลเยอร์จะแสดงขึ้นมาทางด้านขวามือ

2. คลิกช่อง Prevent Overlaps เอาเครื่องหมาย ถูกออกไป เพื่อให้วางเลเยอร์ซ้อนทับกันได้

3. ดับเบิ้ลคลิกชื่อเลเยอร์ Layer 1 เพื่อเปลี่ยนชื่อใหม่

4. กรอกชื่อใหม่ที่ต้องการลงไป

ต่อไป เราจะทําการปรับแต่งการซ้อนกันของเลเยอร์ ซึ่งสิ่งที่มีผลต่อการซ้อนกันของเลเยอร์ก็คือ ค่าของ z โดยเลเยอร์ที่มีค่า z มากกว่าเมื่อนํามาวางซ้อนกัน จะอยู่
บนเลเยอร์ที่มีค่า z น้อยกว่า วิธีการปรับแต่งค่าการซ้อนกันของเลเยอร์ทําได้ดังนี้

5. ดับเบิ้ลคลิกค่า z ท้ายเลเยอร์ที่ต้องการจะเปลี่ยนค่า

6. กําหนดค่า z ลงไปใหม่ โดยกําหนดให้มากกว่าอีกเลเยอร์ที่เหลือ ค่าของ z เป็นจํานวนเต็มบวก โดยเริ่มตั้งแต่ 1 เป็นต้นไป เมื่อเรานําออบเจ็กต์ใดๆ ก็ตามไม่ว่าจะเป็น ข้อความหรือรูปภาพ ออบเจ็กต์เหล่านั้นจะถูกกําหนดค่า z ให้เป็น 1 โดยอัตโนมัติ

7. ทดลองลากเลเยอร์ไปวางซ้อนทับกันซึ่งจะเห็นว่าเลเยอร์ที่มีค่า z มากกว่าจะวางทับอยู่บนเลเยอร์ที่มีค่าของ z น้อยกว่า

 

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

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

1. คลิกเลือกเลเยอร์ที่ต้องการจะลบออกไป

2. คลิกเมนู Edit > Clear หรือกดปุ่ม < Delete> ที่คีย์บอร์ดก็ได้เช่นกัน เพื่อทําการลบเลเยอร์ออกไป

 

การซ่อนเลเยอร์

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

1. คลิกเมนู Window > Other > Layers เพื่อเปิดหน้าต่างเลเยอร์ขึ้นมา จากนั้นให้สังเกตเลเยอร์ก่อนที่เราจะ ทําการซ่อนเลเยอร์

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

 

วิธีแปลงเลเยอร์ให้เป็นตาราง

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

1. เปิดไฟล์หน้าเว็บเพจที่ใช้งานเลเยอร์ขึ้นมา

2. คลิกเมนู File > Convert > 3.0 Browser Compatible…

จากนั้นจะปรากฏหน้าต่าง Convert to 3.0 Browser Compatible ขึ้นมา

3. กําหนดรูปแบบเป็น Layers to Table เพื่อ แปลงเลเยอร์ให้เป็นตาราง

4. คลิกปุ่ม

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

5. บันทึกหน้าเว็บเพจตามปกติ

 

วิธีแปลงตารางให้เป็นเลเยอร์

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

1. เปิดหน้าเว็บเพจที่สร้างจากตารางขึ้นมา

2. คลิกเมนู Modify > Convert > Tables to Layers…

จากนั้นจะปรากฏหน้าต่าง Convert Tables to Layers ขึ้นมา

3. กําหนดคุณสมบัติของเลเยอร์ที่จะใช้งาน โดย การกําหนดค่าสามารถกลับไปดูได้จากหัวข้อ "6.1 การสร้าง ละปรับแต่งเลเยอร์"

4. คลิกปุ่ม

ผลลัพธ์ที่ได้จะปรากฏดังรูปด้านล่าง