บทที่ 8

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

 

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

1. การสร้างเลเยอร์มีวิธีการ ดังนี้

        1.  คลิกแท็บ Layout เพื่อสร้างเลเยอร์   2.  คลิกปุ่ม Draw Layer  3.  ลากพอยน์เตอร์ให้เป็นกรอบสี่เหลี่ยมบนเว็บเพจ

 

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

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

 

3.การใส่รูปภาพในเลเยอร์

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

2.  คลิกที่คำสั่ง Insert >> Image หรือ เครื่องมือ Image บนกลุ่มเครื่องมือ Common

3.  จะได้หน้าต่าง Select Image Source เลือกรูปภาพที่ต้องการแล้วคลิก OK

4.  ภาพที่เลือกจะแทรกอยู่ในเลเยอร์ทันที หากภาพใหญ่เกินไปเลเยอร์จะขยายให้เท่ากับขนาดของภาพโดยอัตโนมัติ

5.  คลิกที่ปุ่มแฮนเดิลเพื่อปรับขนาดภาพและเลเยอร์ตามความเหมาะสม

 

4.การใส่ตารางในเลเยอร์

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

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

2.  คลิกที่เครื่องมือ Table จะได้หน้าต่าง Table ขึ้นมา

3.  เลือกลักษณะตาราง เช่น แถว คอลัมน์ แล้วคลิกปุ่ม OK

4.  ตารางจะแทรกในเลเยอร์ทันที ปรับขนาดตารางและตกแต่งตาราง (ตามที่ได้ศึกษามาในหน่วยที่ 5)

 

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

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

1.  Layer ID หมายถึง หมายเลขอ้างอิงเมื่อเรียกใช้ Layer นั้น ๆ เช่น Layer1, Layer2 ซึ่งจะเรียงลำดับเลเยอร์ที่สร้างก่อนเป็นหลัก

2.  L และ หมายถึง การกำหนดตำแหน่งของเลเยอร์ ซึ่งย่อมาจาก Left และ Top

3.  W และ หมายถึง การกำหนดขนาดของเลเยอร์ ซึ่งย่อมากจาก Width และ Height มีหน่วยเป็นพิกเซล (Pixel)

     Z-Index ใช้ในการเปลี่ยนลำดับเลเยอร์

     image สำหรับปรับแต่งสีและรูปภาพพื้นหลังเลเยอร์

     Vis สำหรับกำหนดว่าจะแสดงหรือซ่อนเลเยอร์

     Overflow หมายถึง การตั้งค่าเผื่อองค์ประกอบที่มีขนาดใหญ่กว่าเลเยอร์ ซึ่งแบ่งออกเป็น

              Visible ขยายเลเยอร์เพื่อให้เห็นทั้งหมด

               Hidden จำกัดเลเยอร์เท่าเดิม

               Scroll ให้สร้างสกรอล์บาร์โดยอัตโนมัติ

11.  Auto ให้สร้างสกรอล์บาร์อัตโนมัติเมื่อขนาดองค์ประกอบใหญ่กว่าเลเยอร์

12.  Clip สำหรับจำกัดส่วนในการแสดงผล โดยมีตำแหน่ง L (Left), R (Right), T (Top), B (Bottom)

 

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

 

7. การย่อ/ขยายเลเยอร์

 

8.การใส่สีและภาพพื้นหลังเลเยอร

การใส่สีพื้นหลังให้คลิกที่เลเยอร์ แล้วคลิกเลือก Bg Color ที่ Properties Inspector

2.  การใส่ภาพพื้นหลัง ให้คลิกเลือกที่ Bg Image ที่ช่อง Properties Inspector

3.  เลือกภาพที่ต้องการจากหน้าต่าง Select Image Source

 

9.การใช้งานพาเนลเลเยอร์

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

 

10.การจัดลำดับเลเยอร์

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

 

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

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

12.การเปลี่ยนชื่อเลเยอร์

 

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

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

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

 1.  วาดเลเยอร์ด้วยเครื่องมือ Draw Layer   โดยวาดเลเยอร์แม่ก่อน แล้กดแป้น < Alt > ค้างไว้พร้อมกับลากเมาส์เพื่อสร้างเลเยอร์ย่อยให้ซ้อนทับกัน

2.  หรือใช้พาเนลเลเยอร์ โดยคลิกที่เลเยอร์ย่อยพร้อมกับกดแป้น < Ctrl > ค้างไว้ แล้วลากไปวางยังเลเยอร์แม่

3.  หรือคลิกเลือกเลเยอร์แล้วใช้เมนู Insert >> Layout Objects >> Layer

       การกำหนดให้เลเยอร์ที่สร้างให้ทีหลังซ้อนกันอัตโนมัติทุกครั้ง ให้เลือกคำสั่ง Edit >> Preference… หรือ < Ctrl > + < U > จะได้หน้าต่าง Preferences คลิกที่ Layers ใน Category แล้วเลือกตัวเลือก Nest when creates within a layer

 

15.การแปลงเลเยอร์

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

 1.  คลิกเมนู Modify >> Convert >> Layer to Table

 2.  จะปรากฏหน้าต่างตั้งค่าตาราง Convert Layer to Table

3.  คลิกปุ่ม OK

 

16.การแปลงตารางเป็นเลเยอร์

1.  คลิกเมนู Modify >> Convert >> Table to AP Divs.....

2.  จะปรากฏหน้าต่างตั้งค่าต่าง ๆ ในส่วนของ Convert Table to AP Divs.....

3.  คลิกปุ่ม OK

 

Free Web Hosting