รายวิชา คอมพิวเตอร์ (การเขียนเว็บไซต์โดยใช้โปรแกรม Deramweaver  MX)

เรื่อง การจัดการด้วย Layer

1. การจัดการด้วย Layer
        เลเยอร์เป็นการจัดกลุ่มข้อมูล โดยการแยกออกเป็นชั้นๆ แต่ละชั้นเป็นอิสระต่อกัน เปรียบเหมือนแผ่นใสที่ใช้ในงานพรีเซนเตชั่นที่นำมาซ้อนๆ กัน ทำให้เราสามารถมองทะลุเห็นข้อมูลแผ่นใสอื่นๆ ได้ โดยเราสามารถกำหนดจัดวางตำแหน่งแต่ละเลเยอร์บนหน้าเว็บเพจได้อย่างเจาะจง และสั่งให้แสดงหรือไม่แสดงบางเลเยอร์ได้ ทำให้การใช้เลเยอร์เหมาะมากสำหรับการนำมาสร้างเอฟเฟคพิเศษบนหน้าเว็บ เช่น ให้มีการเคลื่อนย้ายองค์ประกอบของเว็บไปมา หรือการขยายขนาดภาพที่แสดงเป็นต้น
    การสร้างเลเยอร์
        การสร้างเลเยอร์ขึ้นเพื่อใชงานนั้น สามารถทำได้หลายวิธี โดยเลือกเมนู Insert>Layer ที่เมนู
บาร์ หรือเลือกออบเจ็กต์ ก็ได้ โดยจะมีกรอบพื้นที่แสดง ขอบเขตของเลเยอร์ให้เห็น ซึ่งสามารถคลิกเลเยอร์นั้น และนำข้อความ รูปภาพ ภาพเคลื่อนไหวไปใส่ในเลเยอร์ได้
    1.1 การใส่ข้อความในเลเยอร์
        เราสามารถพิมพ์ตัวอักษรและตารางเข้าในเลเยอร์ได้โดยตรง และตกแต่งตัวอักษรได้โดย
การกำหนดค่าในแถบ Properties
    1.2 การใส่รูปภาพในเลเยอร์
        1. เราสามารถใส่รูปภาพในเลเยอร์ได้ โดยคลิกที่ออบเจ็กต์ Insert Image ในแท็บ
Common จะปรากฏไดอะล็อกบ็อกซ์ขึ้นมาให้เลือกรูปภาพ เลือก แล้ว Click ปุ่ม Select
        2. ปรับขนาดของเลเยอร์ให้พอดีกับรูปภาพโดยปรับ Click ที่เลเยอร์จนปรากฏปุ่มสีดำ
รอบๆ กรอบซึ่งปรับขนาดได้
    1.3 การแทรกตารางในเลเยอร์
        เราสามารถแทรกตารางในเลเยอร์ได้โดยการนำตารางที่สร้างไว้แล้วมาแทรก หรือแทรก
ตารางเปล่าเข้าไปก็ได้ ดังนี้
        1. คลิกที่ออบเจ็กต์ Insert Table ที่แท็บ Common
        2. กำหนดจำนวนแถวและคอลัมน์ จากหน้าต่างที่ปรากฏขึ้นมา
        3. ปรับขนาดตารางตามต้องการและใส่ข้อความ หรือรูปภาพในตาราง ปรับแต่งสีขอบ
จากแถบ Properties
2. การปรับแต่งรายละเอียดของเลเยอร์
        เมื่อเราคลิกเลือกเลเยอร์ที่สร้างขึ้น หน้าต่าง Properties ก็จะแสดงรายละเอียดของเล
เยอร์ที่เราปรับแต่งได้ ดังนี้
    2.1 คุณสมบัติของเลเยอร์
 
 
        Layer ID กำหนดชื่ออ้างอิงให้กับเลเยอร์
        L (left) and T (Top) กำหนดตำแหน่งวางเลเยอร์บนหน้าเว็บเพจ โดยวัดเป็นพิกเซลจากขอบ
บนซ้ายของบราวเซอร์
        W (width) and H (height) กำหนดความกว้างและความยาวของเลเยอร์
        Z-Index กำหนดการซ้อนหรือการเหลื่อมของเลเยอร์ โดยเลเยอร์ที่มีค่า Z-Index มากจะอยู่
เหนือเลเยอร์ที่มีค่า Z-Index น้อยกว่า
        Bg Image กำหนดภาพเป็นพื้นหลังของเลเยอร์
        Vis ให้แสดง (visible) ไม่แสดง (hidden) เลเยอร์
        Bg Color กำหนดสีพื้นหลังให้กับเลเยอร์
        Tag มีคำสั่ง HTML หลายคำสั่งที่ใช้แทนกันในการสร้างเลเยอร์ได้ ซึ่งเราเลือกได้ในช่องนี้
โดยปกติแนะนำให้เลือกคำสั่ง DIV เพราะใช้ได้กับบราวเซอร์หลักทุกค่าย สำหรับคำสั่ง LAYER และ ILAYER เป็นคำสั่งที่ใช้ได้เฉพาะกับ Netscape เท่านั้น
        Overflow ในกรณีที่เนื้อหาใช้พื้นที่ใหญ่กว่าขนาดของเลเยอร์ที่กำหนดไว้ ให้ขยายเลเยอร์ได้
(visible)/ ไม่ได้ (hidden) หรือใช้แสดงแถบเลื่อนไว้ตลอดเวลา (scroll)/ เฉพาะเมื่อมีข้อมูลมากกว่าที่เลเยอร์แสดงได้หมดในครั้งเดียว
        Clip-L (left), T(top), R(right), B (buttom) กำหนดบริเวณของเลเยอร์ที่จะแสดงให้เห็นโดย
ค่าที่กำหนดจะนับจากขอบแต่ละด้านของเลเยอร์เป็นพิกเซล
    2.2 การปรับขนาดเลเยอร์
        เราสามารถปรับขนาดเลเยอร์ได้ 2 วิธี ดังนี้
        การปรับแต่งกรอบเลเยอร์
                นำเมาส์ไปวางบริเวณเลเยอร์ให้เป็นรูปลูกศร 4 หัว แล้วคลิกเมาส์ จะปรากฏปุ่มดำรอบเลเยอร์เราสามารถใช้เมาส์ลากปรับขนาดของเลเยอร์ได้เลย
        การปรับขนาดเลเยอร์ที่มีรูปภาพ
                วิธีนี้เป็นการปรับขนาดเลเยอร์ ซึ่งจะมีผลกับขนาดของเลเยอร์ด้วย
                1. คลิกที่เลเยอร์จะปรากฏปุ่มสี่เหลี่ยมสามปุ่มที่มุมขวาล่างจะช่วยในการย่อ/ขยายขนาดอย่างได้สัดส่วน
                2. เมื่อเราคลิกที่ปุ่มด้านล่างขวาและลากเมาส์ปรับขนาด จะเห็นเส้นประบอกขนาด
                3. ขนาดเลเยอร์จะถูกปรับไปพร้อมกับภาพ
    2.3 การเคลื่อนย้ายเลเยอร์
        เราสามารถเคลื่อนย้ายเลเยอร์ไปมาตามตำแหน่งที่ต้องการได้โดย Click เลือกเลเยอร์จะ
ปรากฏปุ่มสี่เหลี่ยมด้านบนซ้าย ให้ Click ที่ปุ่มนี้ค้างไว้ และลากเลเยอร์ไปวางตำแหน่งที่ต้องการได้
    2.4 กำหนดสีพื้นหลังของเลเยอร์
        หากต้องการใส่สีพื้นหลังให้กับเลเยอร์ ก็สามารถกำหนดได้ที่ BgColor ในหน้าต่าง
Properties
    2.5 กำหนดภาพเป็นพื้นหลังของเลเยอร์
        นอกจากการกำหนดสีให้กับพื้นหลังของเลเยอร์ เราสามารถกำหนดเป็นภาพก็ได้ที่ช่อง
BgImage ในแถบ Properties
    2.6 การลบเลเยอร์
        เมื่อใดที่เราต้องการลบเลเยอร์ให้คลิกเลือกเลเยอร์นั้นและกดปุ่ม Delete
    2.7 การแปลงเลเยอร์เป็นตาราง
        เนื่องจากเลเยอร์เป็นคุณสมบัติใหม่จึงใช้กับบราวเซอร์รุ่นเก่า ได้แก่ Internet Explorer
และ Netscape รู่น 3 แต่ต่ำกว่าไม่ได้ ดังนั้นในการจัดองค์ประกอบต่างๆ บนหน้าเว็บให้ดูสวยงาม แทนการใช้เลเยอร์เราอาจจะใช้ตารางแทนถ้าต้องการให้คนกลุ่มกว้างเปิดดูเว็บเราได้ อย่างไรก็ตามเนื่องจากการใช้เลเยอร์นั้นสะดวกรวดเร็ว เราอาจสร้างหน้าเว็บโดยใช้เลเยอร์ก่อน แล้วจึงแปลงเลเยอร์นั้นเป็นตาราง
        1. เลือกเมนู Modify>Convert>Layer to Tables ซึ่งเราจะพบกับหน้าต่าง Convert Layers to Table ที่มีรายละเอียดดังนี้
                 Most Accurate ให้สร้างช่องตารางแทนแต่ละเลเยอร์ และแทนช่องว่างระหว่างเลเยอร์ด้วยเพื่อให้ผลลัพธ์ที่ได้มีความไกล้เคียงกับของเดิมมากที่สุด
                 Smallest : Collapse Empty Cells หากแต่ละเลเยอร์อยู่ใกล้กันมาก ให้ยกเลิกช่องว่างระหว่างกัน และแปลงเป็นตารางที่จัดเรียงข้อมูลในเลเยอร์ทั้งสองตรงกัน การทำเช่นนี้จะตัดการสร้างช่องตารางที่ต้องใช้แทนช่องว่างระหว่างเลเยอร์ได้ ทั้งนี้ในช่อง Less then xx pixels wide ให้เรากำหนดว่าแต่ละเลเยอร์ควรห่างกันไม่เกินกี่พิกเซลจึงจะยกเลิกช่องว่างระหว่างเลเยอร์ได้
                 Use Transparent GIFs สั่งให้ใช้ภาพเปล่าที่เป็น Transparent GIF ใส่ในแถวสุดท้ายของตาราง การทำเช่นนี้จะเป็นการล็อคขนาดตารางทำให้บราวเซอร์แต่ละรุ่นแสดงตารางได้อย่างถูกต้อง
                 Center on Page จัดวางตารางที่ได้ให้อยู่กึ่งกลางหน้าเว็บ (ถ้าเราไม่ใช้ตัวเลือกนี้ตารางก็จะถูกจัดวางชิดขอบซ้าย)
        2. Dreamweaver จะสร้างตารางที่สอดคล้องกับการจัดเรียงองค์ประกอบต่างๆ และ
ยกเลิกเลเยอร์ที่ใช้ซึ่งเราจะเปิดดูหน้าเว็บเพจนี้ในบราวเซอร์ที่ไม่สนับสนุนเลเยอร์ได้อย่างถูกต้องสำหรับคนที่เคยสร้างหน้าเว็บโดยใช้ตารางมาก่อนจะเห็นว่าการใช้เลเยอร์และแปลงกลับเป็นตาราง จะทำให้การสร้างหน้าเว็บรวดเร็วกว่าเดิมมาก
ข้อควรระวังในการการแปลงเลเยอร์เป็นตาราง คือเราสามารถสร้างเลเยอร์ซ้อนกันได้ แต่ไม่สามารถซ้อนตารางได้ ดังนั้นเราจึงแปลงเลเยอร์เป็นตารางไม่ได้หากเลเยอร์ซ้อนทับกัน
    2.8 การแปลงตารางเป็นเลเยอร์
        นอกจากเราจะแปลงเลเยอร์เป็นตารางแล้ว เราสามารถเปลี่ยนข้อมูลในตารางมาเป็น
เลเยอร์ได้โดย
        1. ใช้คำสั่ง Modify>Convert>Table to Layers
        2. จะปรากฏหน้าต่าง Convert Overlap กำหนดให้เราไม่สามารถเลื่อน หรือปรับขนาดเลเยอร์ที่ได้จากการแปลงตารางให้ซ้อนกันได้
                 Prevent Layer Overlap กำหนดให้เราไม่สามารถเลื่อน หรือปรับขนาดเลเยอร์ที่ได้จากการแปลงตารางให้ซ้อนกันได้
                 Show Layers Palette ให้แสดงหน้าต่างเลเยอร์หลังจากการแปลงตารางเสร็จสิ้น
                 Show Grid ให้แสดงเส้นกริด
                 Snap To Grid ให้เลเยอร์ที่สร้างยึดติดกับเส้นกริด
        3. ตารางจะถูกแปลงเป็นเลเยอร์ สังเกตจากเลเยอร์ที่ได้จะแยกกันอิสระและมีไอคอน
ด้านบน