การใช้อย่างมหัศจรรย์ของคำอธิบายโดยละเอียดของตาราง DreamWeaver ของการผลิตโครงร่าง (5)

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-30 18:36:21

4> การผลิตเส้นขอบตัวเว้นวรรค

"Gap border" ส่วนใหญ่จะใช้เพื่อจัดเรียงรายการของแต่ละคอลัมน์หรือช่องบนหน้าเว็บ เพื่อให้ทุกคนเข้าใจ ผู้เขียนจะแสดงให้คุณเห็นการเรนเดอร์ก่อนหลังจากการผลิตเสร็จสิ้น ดังนี้

ต่อไปนี้เป็นกระบวนการผลิตที่สอดคล้องกัน (โดยยกตัวอย่างการผลิตระยะห่างสามเฟรม)

ขั้นแรก ให้แทรกวัตถุตารางที่มี 1 แถวและ 3 คอลัมน์ลงในหน้าเว็บ ในระหว่างขั้นตอนการแทรก ให้ตั้งค่า "Border" เป็น 0, "CellSpace" เป็น 2 และ "CellPad" เป็น 1 โดยตรง ดังแสดงในรูป

หมายเหตุ: การตั้งค่าที่นี่เทียบเท่ากับการตั้งค่าในแผงคุณสมบัติโดยสิ้นเชิง

กดปุ่มซ้ายของเมาส์ค้างไว้แล้วลากแต่ละเซลล์เพื่อเลือกวัตถุ 3 เซลล์พร้อมกัน ตั้งค่า "Bgcolor" เป็น "สีแดง" ในแผงคุณสมบัติ โปรดทราบว่าสีนี้เป็นสีของเส้นขอบรางน้ำ

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

แทรกวัตถุตารางลงในเซลล์สามเซลล์ตามลำดับ ตั้งค่า "Border", "CellSpace" และ "CellPad" ทั้งหมดเป็น "0" และตั้งค่าสีพื้นหลังของแต่ละตารางในแผงคุณสมบัติให้เป็นหน้าเดียวกัน สีพื้นหลังคือ " สีขาว" อีกจุดหนึ่งคือตั้งค่าทั้ง "ความกว้าง" และ "ความสูง" เป็น "100%" ในสถานะการแสดงผลตามสัดส่วนเพื่อให้สามารถเติมเต็มหน่วยทั้งหมดตามขนาดตารางได้โดยอัตโนมัติ

ตอนนี้คุณสามารถดูตัวอย่างเอฟเฟกต์ได้แล้ว

ในการผลิตเส้นขอบรางน้ำ ความแตกต่างจากเส้นขอบเส้นบางคือความกว้างของเส้นขอบ 1 ทำได้ผ่านแอตทริบิวต์ "CellPad" แทนที่จะเป็น "CellSpace" ก่อนหน้า "CellPad" ในที่นี้หมายถึงเซลล์ ระยะทาง ระหว่างเนื้อหาและขอบเขตของเซลล์ ไม่ต้องสงสัยเลยว่าอีกสามตารางที่เราแทรกเป็นเนื้อหาในตัวอย่างนี้คือ จากนั้นการปรับ "CellSpace" จะสามารถเปลี่ยนระยะห่างระหว่างแต่ละเส้นขอบได้ เช่น เอฟเฟกต์ของหน่วย "6"

ในทำนองเดียวกัน คุณสามารถสร้างเส้นขอบรางน้ำแนวตั้งได้ในลักษณะเดียวกัน

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