วิธีการใช้ตำแหน่ง CSS เพื่อสร้างเค้าโครงโดยไม่ใช้ตาราง

Layouts Layleless เปิด Frontier Design ใหม่

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

การสนับสนุนเบราว์เซอร์ของ CSS Positioning

การกำหนดตำแหน่ง CSS ได้รับการสนับสนุนอย่างดีใน เบราว์เซอร์ที่ทันสมัยทั้งหมด เว้นเสียแต่ว่าคุณกำลังสร้างเว็บไซต์สำหรับ Netscape 4 หรือ Internet Explorer 4 ผู้อ่านของคุณไม่ควรมีปัญหาในการดูเว็บเพจ CSS ที่วางอยู่

ทบทวนวิธีสร้างหน้าใหม่

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

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

1. ส่วนหัว หน้าแรกของโฆษณาแบนเนอร์ชื่อเว็บไซต์ลิงก์การนำทางชื่อบทความและสิ่งต่างๆอื่น ๆ
2. คอลัมน์ขวา นี่คือด้านขวาของหน้าด้วยช่องค้นหาโฆษณากล่องวิดีโอและพื้นที่สำหรับช็อปปิ้ง
3. เนื้อหา ข้อความของบทความบล็อกโพสต์หรือตะกร้าสินค้า - เนื้อและมันฝรั่งของหน้า
4. โฆษณาแบบอินไลน์ โฆษณาแบบอินไลน์ภายในเนื้อหา
5. ท้ายกระดาษ ข้อมูลการนำทางด้านล่างข้อมูลผู้เขียนข้อมูลลิขสิทธิ์แบนเนอร์โฆษณาที่ต่ำกว่าและลิงก์ที่เกี่ยวข้อง

แทนที่จะวางองค์ประกอบ 5 องค์ประกอบเหล่านี้ลงในตารางให้ใช้องค์ประกอบการแบ่งส่วน HTML5 เพื่อกำหนดส่วนต่างๆของเนื้อหาจากนั้นใช้การวางตำแหน่ง CSS เพื่อวางองค์ประกอบเนื้อหาบนหน้าเว็บ

การระบุส่วนเนื้อหาของคุณ

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

เพื่อแสดงตำแหน่งให้วาดภาพหน้าเว็บที่มีสามคอลัมน์ แต่ไม่มีส่วนหัวหรือท้ายกระดาษ คุณสามารถใช้การวางตำแหน่งเพื่อสร้างรูปแบบใดก็ได้ที่คุณต้องการ

สำหรับรูปแบบสามคอลัมน์ให้กำหนดส่วนที่สาม: คอลัมน์ซ้ายคอลัมน์ขวาและเนื้อหา

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

การวางตำแหน่งเนื้อหา

ใช้ CSS กำหนดตำแหน่งสำหรับองค์ประกอบ ID'd ของคุณ จัดเก็บข้อมูลตำแหน่งของคุณในรูปแบบเช่นนี้:

#เนื้อหา {

}

เนื้อหาภายในองค์ประกอบเหล่านี้จะใช้พื้นที่มากที่สุดเท่าที่จะทำได้ ได้แก่ ความกว้าง 100% ของตำแหน่งปัจจุบันหรือหน้าเว็บ หากต้องการส่งผลต่อตำแหน่งของส่วนโดยไม่ต้องบังคับให้มีความกว้างคงที่ให้เปลี่ยนส่วนที่เป็น padding หรือ margin properties

สำหรับเค้าโครงนี้ให้ตั้งค่าสองคอลัมน์เป็นความกว้างคงที่และตั้งค่าตำแหน่งเป็นสัมบูรณ์เพื่อไม่ให้ผลกระทบจากตำแหน่งที่พบใน HTML

# left-column {
ตำแหน่ง: สัมบูรณ์
ซ้าย: 0;
ความกว้าง: 150px;
margin-left: 10px;
margin-top: 20px;
สี: # 000000;
padding: 3px;
}
# right-column {
ตำแหน่ง: สัมบูรณ์
ซ้าย: 80%;
ด้านบน: 20px;
ความกว้าง: 140px;
padding ซ้าย: 10px;
z-index: 3;
สี: # 000000;
padding: 3px;
}

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

#เนื้อหา {
ด้านบน: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
สี: # 000000;
}

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