Dreamweaver MX 2004 ตั้งแต่เริ่มต้น (4)
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-05-31 21:02:51
การใช้เลเยอร์ <BR> เลเยอร์คือพื้นที่ของหน้าเว็บสามารถมีได้หลายเลเยอร์ เสน่ห์ที่ใหญ่ที่สุดคือแต่ละเลเยอร์สามารถทับซ้อนกันได้ และคุณสามารถตัดสินใจได้ว่าแต่ละเลเยอร์จะมองเห็นได้หรือไม่ ในเวลาเดียวกัน ความสามารถในการปรับแต่งความสัมพันธ์แบบลำดับชั้นระหว่างชั้นต่างๆ หลังจากเชี่ยวชาญเทคโนโลยีเลเยอร์แล้ว คุณสามารถมอบความสามารถในการควบคุมเพจที่มีประสิทธิภาพสำหรับหน้าเว็บได้
สร้างเลเยอร์
เพื่อแสดงให้เห็นการทำงานของเลเยอร์ ขั้นแรกเราจะสร้างเอฟเฟกต์ตัวอย่างง่ายๆ ดังแสดงในรูปที่ 1 (รูปที่ 1)
รูปที่ 1
ขั้นตอนแรกคือการสร้างเพจใหม่ใน Dreamweaver MX 2004 และเรียกใช้คำสั่ง "Insert→Layer Objects→Layer" ในเวลานี้ กรอบสี่เหลี่ยมสีดำจะปรากฏขึ้นในหน้าต่างแก้ไข ซึ่งเป็นเลเยอร์ที่แทรกไว้ เมื่อเมาส์เลื่อนผ่านเส้นกรอบสี่เหลี่ยม เมาส์จะเปลี่ยนเป็นรูปลูกศรกากบาท เมื่อคลิกเมาส์ จะมีสี่เหลี่ยมทึบสีดำ 8 อันปรากฏขึ้นรอบๆ เส้นกรอบ และมีสี่เหลี่ยมว่างที่มุมซ้ายบน แสดงว่า ว่าเลเยอร์นี้ถูกเลือก
เคล็ดลับ: ใช้เมาส์ลากสี่เหลี่ยมทึบเพื่อเปลี่ยนขนาดของเลเยอร์ และลากสี่เหลี่ยมว่างที่มุมซ้ายบนเพื่อเปลี่ยนตำแหน่งของเลเยอร์
ขั้นตอนที่สองคือการคลิกเมาส์ในเลเยอร์แล้วป้อน "China Computer Education News" จากนั้นตั้งค่าข้อความเป็นสีน้ำเงินในหน้าต่างแผงคุณสมบัติ
ขั้นตอนที่สามคือการคลิกขอบเลเยอร์เพื่อเลือกเลเยอร์ จากนั้นเรียกใช้คำสั่ง "แก้ไข→คัดลอก" เพื่อคัดลอกเลเยอร์ปัจจุบัน จากนั้นคลิกเมาส์ในพื้นที่ว่างอื่นๆ ของหน้าต่างแก้ไข และเรียกใช้คำสั่ง "แก้ไข→วาง" เพื่อให้มีอีกเลเยอร์หนึ่งปรากฏขึ้นในหน้าต่างแก้ไข แต่ปัจจุบันซ้อนทับกันและคุณต้องย้ายเลเยอร์ก่อนจึงจะเห็นสองชั้น
ขั้นตอนที่สี่คือการเปลี่ยนสีข้อความของเลเยอร์ใดเลเยอร์หนึ่งให้เป็นสีดำ และย้ายตำแหน่งของเลเยอร์เพื่อให้ตำแหน่งของทั้งสองเลเยอร์แตกต่างกันสองสามพิกเซล ทำให้เกิดเอฟเฟกต์เงา (รูปที่ 2)
รูปที่ 2
หลังจากดำเนินการข้างต้นเสร็จแล้ว ให้กดปุ่ม "F12" เพื่อดูตัวอย่าง และคุณจะเห็นเอฟเฟกต์ที่แสดงในรูปที่ 1 ในเบราว์เซอร์ IE
ชั้นที่ซ้อนกัน
สิ่งที่เรียกว่าเลเยอร์ที่ซ้อนกันหมายถึงเลเยอร์ที่สร้างขึ้นในเลเยอร์อื่น ตัวอย่างเช่น สิ่งที่แสดงในรูปที่ 3 นั้นเป็นเลเยอร์ที่ซ้อนกันทั่วไป (รูปที่ 3) ที่จริงแล้ว การสร้างเลเยอร์ที่ซ้อนกันประเภทนี้นั้นง่ายมาก เพียงสร้างเลเยอร์หลัก คลิกภายในเลเยอร์ด้วยเมาส์ แล้วแทรกเลเยอร์อีกครั้ง อย่างไรก็ตาม เลเยอร์ที่ซ้อนกันไม่ได้หมายความว่าเลเยอร์ย่อยต้องอยู่ภายในเลเยอร์พาเรนต์ มีความสัมพันธ์แบบสืบทอดระหว่างเลเยอร์เหล่านั้น
รูปที่ 3
หน้าที่ของการสืบทอดคือการรักษาการมองเห็นของเลเยอร์ย่อยให้สอดคล้องกับเลเยอร์พาเรนต์ เนื่องจากเอฟเฟกต์พิเศษของหน้าเว็บไดนามิกจำนวนมากทำได้โดยการควบคุมการมองเห็นของเลเยอร์ เมื่อการมองเห็นของเลเยอร์พาเรนต์เปลี่ยนไป การมองเห็นของ การเปลี่ยนแปลงของเลเยอร์ย่อย การมองเห็นก็เปลี่ยนไปเช่นกัน นอกจากนี้ ความสัมพันธ์แบบสืบทอดยังสามารถรักษาตำแหน่งสัมพัทธ์ของเลเยอร์ลูกและเลเยอร์พาเรนต์ไว้ไม่เปลี่ยนแปลง ตัวอย่างเช่น ถ้าเราลากเลเยอร์พาเรนต์เพื่อย้าย เลเยอร์ลูกก็จะย้ายตามไปด้วย ซึ่งจะมีประโยชน์มากเมื่อสร้างไดนามิก หน้าเว็บ
ลำดับ Z ของเลเยอร์
เมื่อเปรียบเทียบกับตาราง ข้อได้เปรียบที่ใหญ่ที่สุดของเลเยอร์ก็คือสามารถทับซ้อนกันได้ เพื่อระบุว่าเลเยอร์ใดอยู่ด้านบนและอยู่ด้านล่าง จะต้องตั้งค่าซีเรียลนัมเบอร์สำหรับแต่ละเลเยอร์ ความหมายก็คือ นอกเหนือจากพิกัด X และ Y ของหน้าจอแล้ว แกน Z ที่ตั้งฉากกับหน้าจอก็ถูกเพิ่มเข้ามาอย่างไม่ตั้งใจ
ดังแสดงในรูปที่ 4 สี่เลเยอร์ในพื้นที่ด้านซ้ายแตกต่างจากสี่เลเยอร์ในพื้นที่ด้านขวาอย่างเห็นได้ชัด นอกจากนี้ยังง่ายต่อการปรับลำดับของเลเยอร์ เพียงใช้เมาส์เพื่อคลิกและวางไว้ที่ด้านล่าง , ชั้นกลาง และชั้นบนสุดจะทำ อย่างไรก็ตาม วิธีดำเนินการนี้ดูเหมือนจะยุ่งยากเล็กน้อยเมื่อมีหลายเลเยอร์ และไม่สะดวกที่จะปรับเปลี่ยนในภายหลัง ดังนั้นเราจึงสามารถปรับค่าผ่านแผงเลเยอร์ได้
รูปที่ 4
ขั้นแรกให้รันคำสั่ง "Window→Layers" เพื่อเปิดใช้งานพาเนลเลเยอร์ ในเวลานี้ คุณจะเห็นหน้าต่างพาเนลที่แสดงในรูปที่ 5 (รูปที่ 5) ที่นี่ เพียงเลือกเลเยอร์ที่ต้องการเปลี่ยนหมายเลขซีเรียล แล้วกด เมาส์แล้วลากขึ้นหรือลง ลากและปล่อยเมาส์เมื่อมีเส้นแนวนอนปรากฏขึ้นระหว่างสองชั้นที่คุณต้องการแทรก เพื่อให้คุณสามารถเปลี่ยน "ลำดับ Z" ของแต่ละเลเยอร์ได้
รูปที่ 5
เคล็ดลับ: คลิกที่ค่าของช่อง "Z" โดยตรงเพื่อเปลี่ยนเป็นระดับเลเยอร์ที่ต้องการ
สร้างตารางโดยใช้เลเยอร์
แม้ว่าการใช้เลเยอร์เพื่อค้นหาองค์ประกอบหน้าเว็บจะสะดวกกว่าการใช้ตารางมาก แต่เฉพาะเบราว์เซอร์ IE 4.0 ขึ้นไปเท่านั้นที่รองรับฟังก์ชันเลเยอร์ ดังนั้น เพื่อให้เพื่อน ๆ ที่ใช้เบราว์เซอร์รุ่นเก่าสามารถดูงานที่คุณทุ่มเทอย่างหนักเพื่อสร้าง วิธีที่ดีที่สุดคือการแปลงเลเยอร์ให้เป็นตาราง
ขั้นตอนแรกคือเลือกช่องทำเครื่องหมาย "ป้องกันการทับซ้อนกัน" ในส่วนบนของหน้าต่างที่แสดงในรูปที่ 5 เพื่อให้แต่ละเลเยอร์ไม่สามารถทับซ้อนกันได้ มิฉะนั้นจะมีข้อความเตือนในระหว่างกระบวนการแปลง
ขั้นตอนที่สองคือการรันคำสั่ง "Modify→Convert→Layers to Table" ในเวลานี้ คุณจะเห็นหน้าต่างที่แสดงในรูปที่ 6 (รูปที่ 6) ในพื้นที่ "เค้าโครงตาราง" ให้เลือก "แม่นยำที่สุด" และ "ใช้ GIF แบบโปร่งใส" ตามลำดับ ตัวเลือกแรกสร้างเซลล์สำหรับแต่ละเลเยอร์ผ่านการแปลงที่แม่นยำเพื่อให้แน่ใจว่าระยะห่างระหว่างแต่ละเซลล์; ตัวเลือกหลังจะเติมแถวสุดท้ายของตารางที่แปลงแล้วด้วยรูปภาพ GIF โปร่งใส ซึ่งทำให้แน่ใจได้ว่าทั้งหมด เบราว์เซอร์ทั้งหมดมีลักษณะเหมือนกัน
รูปที่ 6
ขั้นตอนที่สามคือดำเนินการแปลงจากเลเยอร์หนึ่งไปอีกตารางหนึ่งให้เสร็จสิ้นหลังจากกดปุ่ม "ตกลง"
เคล็ดลับ: Dreamweaver MX 2004 มีฟังก์ชันการแปลงจากตารางเป็นเลเยอร์ด้วย และมีขั้นตอนคล้ายกัน
หากคุณต้องการสร้างเว็บเพจของคุณเองให้มีสีสัน คุณต้องเชี่ยวชาญเทคโนโลยีเลเยอร์ มิฉะนั้น คุณจะพบกับความยากลำบากมากมายในการสร้างเว็บเพจแบบไดนามิกในอนาคต ดังนั้นจึงขอแนะนำให้คุณศึกษาเชิงลึกผ่านคำแนะนำข้างต้นอย่างแท้จริง เชี่ยวชาญด้านเทคโนโลยี
