บทที8

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

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

นอกจากพาเนล layer จะมีบทความสำคัญการในจัดลำดับการแสดงภาพแล้ว พาเนล layer ยังมีบทบาทสำคัญในการปรับแต่งภาพในลักษณะต่างๆ กันเช่น ใช้บังภาพในเลเยอร์อื่น กำหนดความโปร่งใส กำหนดความโปร่งแสง เพิ่มเอฟเฟคต่างๆ เป็นต้น

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


1. การสร้างเลเยอร์
         การสร้างเลเยอร์มีวิธีการ  ดังนี้
      1. คลิกแท็บ Insert เพื่อสร้างเลเยอร์ คลิก Layout Objects
      2. คลิกปุ่ม AP Div
      3. ลากพอยน์เตอร์ให้เป็นกรอบสี่เหลี่ยมบนเว็บเพจ

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

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

• คลิกที่เลเยอร์ที่ต้องการจะแทรกรูปภาพ
• คลิกที่คำสั่ง insert >> Image หรือ เครื่องมือ Image บนกลุ่มเครื่องมือ Common
• จะได้หน้าต่าง Select Image Source เลือกรูปภาพที่ต้องการแล้วคลิก Ok
• ภาพที่เลือกจะแทรกอยู่ในเลเยอร์ทันที หากภาพใหญ่เกินไปเลเยอร์จะขยายให้เท่ากับขนาดของภาพโดยอัตโนมัติ
• คลิกที่ปุ่มแฮนเดิลเพื่อปรับขนาดภาพและเลเยอร์ตามความเหมาะสม

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

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

• คลิกที่เลเยอร์ที่จะแทรกตาราง
• คลิกที่เครื่องมือ Table จะได้หน้าต่าง Table ขึ้นมา
• เลือกลักษณะตาราง เช่น 3แถว 3คอลัมน์ แล้วคลิกปุ่ม Ok
• ตารางจะแทรกในเลเยอร์ทันที ปรับขนาดตาราง และ ตกแต่งตาราง

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

Layer ID     หมายถึง  หมายเลขอ้างอิงเมื่อเรียกใช้  Layer  นั้น ๆ  เช่น  Layer1, Layer2 ซึ่งจะเรียงลำดับเลเยอร์ ที่สร้างก่อนเป็นหลัก
L  และ  T    หมายถึง  การกำหนดตำแหน่งของเลเยอร์  ซึ่งย่อมาจาก  Left  และ  Top
W  และ  H   หมายถึง  การกำหนดขนาดของเลเยอร์  ซึ่งย่อมากจาก  Width  และ  Height  มีหน่วยเป็นพิกเซล  (Pixel)
Z-Index  ใช้ในการเปลี่ยนลำดับเลเยอร์
Bg image  สำหรับปรับแต่งสีและรูปภาพพื้นหลังเลเยอร์
Vis  สำหรับกำหนดว่าจะแสดงหรือซ่อนเลเยอร์
Overflow  หมายถึง  การตั้งค่าเผื่อองค์ประกอบที่มีขนาดใหญ่กว่าเลเยอร์  ซึ่งแบ่งออกเป็น  
Visible  ขยายเลเยอร์เพื่อให้เห็นทั้งหมด
Hidden  จำกัดเลเยอร์เท่าเดิม
Scroll  ให้สร้างสกรอล์บาร์โดยอัตโนมัติ
Auto  ให้สร้างสกรอล์บาร์อัตโนมัติเมื่อขนาดองค์ประกอบใหญ่กว่าเลเยอร์
Clip  สำหรับจำกัดส่วนในการแสดงผล  โดยมีตำแหน่ง  L (Left), R (Right), T (Top), B (Bottom)


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

• การย้ายเลเยอร์ด้วย  Properties  โดยกำหนดเป็นตัวเลขที่ L (Left) และ  T (Top)
• การใช้เมาส์  ให้เลื่อนเมาส์ไปตรงเส้นขอบหรือปุ่ม   เมาส์จะเปลี่ยนเป็น  คลิกเมาส์ค้างไว้แล้วลากย้ายไปยังตำแหน่งที่ต้องการจึงให้ปล่อยเมาส์

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

• คลิกที่เลเยอร์ใช้ Properties กำหนดช่อง W เพื่อกำหนดความกว้าง และ H เพื่อกำหนดความสูง โดยกำหนดเป็นตัวเลข Pixel
• คลิกที่เลเยอร์ เลื่อนเมาส์ไปที่ปุ่มแฮนเดิลด้านใดด้านหนึ่ง เมาส์จะเปลี่ยนเป็นรูปลูกศร 2 ทิส คลิกค้างไว้แล้วลากเมาส์เพื่อย่อหรือขยายเลเยอร์

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

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

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

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

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

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

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

          

  

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

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

• คลิกที่เลเยอร์ที่ต้องการจะซ่อน

   ที่พาเนลเลเยอร์จะมีไอคอนรูปดวงตาปรากฏขึ้นมาตรงหน้าเลเยอร์ชื่อนั้น

   คลิกตรงดวงตา 

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

• ดับเบิลคลิกที่ชื่อเลเยอร์พาเนลเลเยอร์
• พิมพ์ชื่อใหม่ลงไปแทนที่คำว่า  Layer  หรือคลิกที่เลเยอร์เว็บเพจแล้วเปลี่ยนชื่อที่  Layer ID  ของ  Properties Inspector  ก็ได้

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

• ดับเบิลคลิกที่เลเยอร์ในพาเนลเลเยอร์
• พิมพ์ชื่อใหม่ลงไปแทนคำว่า Layer หรือคลิกที่เลเยอร์เว็บเพจแล้วเปลี่ยนชื่อที่ Layer ID ของ Properties inspector ก็ได้

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

       การลบเลเยอร์ที่ต้องการให้คลิกที่เลเยอร์นั้นๆ แล้วคลิกปุ่ม <Delete> ถ้าต้องการเรียกเลเยอร์ที่เพิ่งลบไปกลับคืนมา ให้คลิกคำสั่ง Edit >> Undo >> Delete หรือใช้แป้น <Ctrl>+<Z> 

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

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

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

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

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

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

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

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

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

• คลิกเมนู Modify >> Convert >> AP Divs to Table
• จะปรากฏหน้าต่างตั้งค่าตาราง Convert AP Divs to Table
• คลิกปุ่ม OK

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

• คลิกเมนู Modify >> Convert >> Table to AP Divs...
• จะปรากฏหน้าต่างตั้งค่า ๆ ในส่วนของ Convert Tables to AP Divs