คุณกำลังเรียนรู้เค้าโครง CSS หรือไม่? คุณยังไม่สามารถเชี่ยวชาญเค้าโครง CSS ล้วนๆ ได้อย่างสมบูรณ์หรือไม่ โดยปกติมีสองสถานการณ์ที่ขัดขวางการเรียนรู้ของคุณ:
ความเป็นไปได้ประการแรกคือคุณยังไม่เข้าใจหลักการของหน้าการประมวลผล CSS ก่อนที่คุณจะพิจารณาประสิทธิภาพโดยรวมของเพจ คุณควรพิจารณาความหมายและโครงสร้างของเนื้อหาก่อน จากนั้นจึงเพิ่ม CSS สำหรับความหมายและโครงสร้าง บทความนี้จะบอกวิธีจัดโครงสร้าง HTML
อีกเหตุผลหนึ่งก็คือ คุณสูญเสียคุณสมบัติของเลเยอร์การนำเสนอที่คุ้นเคย (เช่น cellpadding, hspace, align=left ฯลฯ) และไม่รู้ว่าจะต้องแปลงคำสั่ง CSS ใดเป็นคำสั่งใด เมื่อคุณแก้ไขปัญหาแรกได้และรู้วิธีจัดโครงสร้าง HTML ของคุณแล้ว ฉันจะให้รายการรายละเอียดว่า CSS ใดที่จะใช้แทนที่แอตทริบิวต์การนำเสนอดั้งเดิม
HTML ที่มีโครงสร้าง
เมื่อเราเรียนรู้การผลิตหน้าเว็บครั้งแรก เราจะคำนึงถึงวิธีการออกแบบก่อนเสมอ โดยพิจารณาจากรูปภาพ แบบอักษร สี และแผนผังเค้าโครง จากนั้นเราใช้ Photoshop หรือ Fireworks เพื่อวาดและตัดเป็นภาพขนาดเล็ก สุดท้าย แก้ไข HTML เพื่อคืนค่าการออกแบบทั้งหมดไปยังเพจ
หากคุณต้องการให้หน้า HTML ของคุณถูกจัดวางด้วย CSS (เป็นมิตรกับ CSS) คุณต้องกลับไปเริ่มต้นใหม่ อย่าคิดถึง "รูปลักษณ์ภายนอก" ก่อน แต่ให้คิดถึงความหมายและโครงสร้างของเนื้อหาหน้าของคุณก่อน
หน้าตาไม่ใช่สิ่งที่สำคัญที่สุด หน้า HTML ที่มีโครงสร้างดีสามารถนำเสนอในรูปแบบใดก็ได้ และ CSS Zen Garden เป็นตัวอย่างคลาสสิก CSS Zen Garden ช่วยให้เราตระหนักถึงพลังของ CSS ในที่สุด
HTML ไม่ใช่แค่การอ่านบนหน้าจอคอมพิวเตอร์เท่านั้น รูปภาพที่คุณออกแบบอย่างระมัดระวังใน Photoshop อาจไม่แสดงบน PDA โทรศัพท์มือถือ และโปรแกรมอ่านหน้าจอ แต่หน้า HTML ที่มีโครงสร้างดีสามารถแสดงได้ทุกที่และทุกอุปกรณ์เครือข่ายผ่านคำจำกัดความที่แตกต่างกันของ CSS
เริ่มคิด
เริ่มต้นด้วยการเรียนรู้ว่าโครงสร้างคืออะไร ซึ่งนักเขียนบางคนเรียกว่าความหมาย ความหมายของคำนี้ก็คือ คุณต้องวิเคราะห์บล็อกเนื้อหาและวัตถุประสงค์ของเนื้อหาแต่ละชิ้นที่ให้บริการ จากนั้นจึงสร้างโครงสร้าง HTML ที่เกี่ยวข้องตามวัตถุประสงค์ของเนื้อหาเหล่านี้
หากคุณนั่งลงและวิเคราะห์และวางแผนโครงสร้างเพจของคุณอย่างรอบคอบ คุณอาจได้องค์ประกอบบางอย่างดังนี้:
โลโก้และชื่อเว็บไซต์เนื้อหาหน้าหลัก
การนำทางเว็บไซต์ (เมนูหลัก)
เมนูย่อย
ช่องค้นหา
Ribbon (เช่น ตะกร้าสินค้า ชำระเงิน)
ส่วนท้าย (ลิขสิทธิ์และคำชี้แจงทางกฎหมายที่เกี่ยวข้อง)
เรามักจะใช้องค์ประกอบ DIV เพื่อกำหนดโครงสร้างเหล่านี้ คล้ายกับสิ่งนี้:
<div id=ส่วนหัว></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=ค้นหา></div>
<div id=shop></div>
<div id=ส่วนท้าย</div>
มันไม่ใช่เลย์เอาต์ แต่เป็นโครงสร้าง นี่คือคำอธิบายเชิงความหมายของบล็อกเนื้อหา เมื่อคุณเข้าใจโครงสร้างของคุณแล้ว คุณสามารถเพิ่ม ID ที่เกี่ยวข้องลงใน DIV ได้ บล็อกเนื้อหาใดๆ สามารถบรรจุอยู่ภายในคอนเทนเนอร์ DIV และ DIV อื่นสามารถซ้อนอยู่ภายในได้ บล็อกเนื้อหาสามารถมีองค์ประกอบ HTML---ชื่อเรื่อง ย่อหน้า รูปภาพ ตาราง รายการ ฯลฯ
จากที่กล่าวมาข้างต้น คุณรู้วิธีจัดโครงสร้าง HTML แล้ว และตอนนี้คุณสามารถกำหนดเค้าโครงและสไตล์ได้แล้ว แต่ละบล็อกเนื้อหาสามารถวางที่ใดก็ได้บนหน้า และสามารถระบุสี แบบอักษร เส้นขอบ พื้นหลัง คุณสมบัติการจัดตำแหน่ง ฯลฯ ของบล็อกได้
การใช้ตัวเลือกเป็นสิ่งที่ยอดเยี่ยม
ชื่อของรหัสเป็นวิธีการควบคุมบล็อกเนื้อหาบางอย่าง ด้วยการล้อมบล็อกเนื้อหานี้ด้วย DIV และเพิ่มรหัสที่ไม่ซ้ำกัน คุณสามารถใช้ตัวเลือก CSS เพื่อกำหนดลักษณะที่ปรากฏของแต่ละองค์ประกอบของหน้าได้อย่างแม่นยำ รวมถึงชื่อเรื่อง รายการ รูปภาพ , ลิงก์หรือย่อหน้า ฯลฯ ตัวอย่างเช่น หากคุณเขียนกฎ CSS สำหรับ #header กฎนั้นอาจแตกต่างจากกฎรูปภาพใน #content โดยสิ้นเชิง
อีกตัวอย่างหนึ่ง: คุณสามารถใช้กฎที่แตกต่างกันเพื่อกำหนดสไตล์ลิงก์ในบล็อกเนื้อหาต่างๆ บางอย่างเช่นนี้: #globalnav a:link หรือ #subnav a:link หรือ #content a:link คุณยังสามารถกำหนดสไตล์ที่แตกต่างกันสำหรับองค์ประกอบเดียวกันในบล็อกเนื้อหาที่แตกต่างกันได้ ตัวอย่างเช่น กำหนดสไตล์ของ p ใน #content และ #footer ตามลำดับผ่าน #content p และ #footer p ตามโครงสร้างแล้ว เพจของคุณประกอบด้วยรูปภาพ ลิงก์ รายการ ย่อหน้า ฯลฯ องค์ประกอบเหล่านี้ไม่ส่งผลต่ออุปกรณ์เครือข่ายที่แสดงบน (PDA โทรศัพท์มือถือ หรืออินเทอร์เน็ตทีวี) ซึ่งสามารถกำหนดเป็นลักษณะที่ปรากฏด้านประสิทธิภาพได้
หน้า HTML ที่มีโครงสร้างอย่างระมัดระวังนั้นง่ายมาก และทุกองค์ประกอบจะถูกใช้เพื่อจุดประสงค์ด้านโครงสร้าง เมื่อคุณต้องการเยื้องย่อหน้า คุณไม่จำเป็นต้องใช้แท็ก blockquote เพียงใช้แท็ก p และเพิ่มกฎระยะขอบ CSS ที่ p เพื่อให้บรรลุวัตถุประสงค์ของการเยื้อง p เป็นแท็กที่มีโครงสร้างและมาร์จิ้นเป็นแอตทริบิวต์การนำเสนอ แท็กแรกเป็นของ HTML และแท็กหลังเป็นของ CSS (นี่คือการแยกโครงสร้างและการแสดงออก)
หน้า HTML ที่มีโครงสร้างดีแทบไม่มีแท็กแอตทริบิวต์เลย รหัสสะอาดและกระชับมาก ตัวอย่างเช่น โค้ดต้นฉบับ <table width=80% cellpadding=3 border=2 align=left> สามารถเขียนได้เฉพาะ <table> ใน HTML เท่านั้น และทุกสิ่งที่ควบคุมประสิทธิภาพจะถูกเขียนใน CSS ในโครงสร้าง HTML In , table คือตาราง ไม่ใช่สิ่งอื่นใด (เช่น ใช้สำหรับเค้าโครงและการวางตำแหน่ง)
ฝึกจัดโครงสร้างตัวเอง
ข้างต้นเป็นเพียงโครงสร้างพื้นฐานที่สุด ในการใช้งานจริง คุณสามารถปรับบล็อกเนื้อหาได้ตามความต้องการของคุณ การซ้อน DIV มักเกิดขึ้น และคุณจะเห็นว่ามีเลเยอร์อื่นๆ ในเลเยอร์คอนเทนเนอร์ โดยมีโครงสร้างคล้ายกับสิ่งนี้:
<div id=navcontainer>
<div id=globalnav>
<ul>รายการ</ul>
</div>
<div id=subnav>
<ul>รายการอื่น</ul>
</div>
</div>
องค์ประกอบ div ที่ซ้อนกันทำให้คุณสามารถกำหนดกฎ CSS ได้มากขึ้นเพื่อควบคุมการนำเสนอ ตัวอย่างเช่น คุณสามารถตั้งกฎ #navcontainer เพื่อจัดกึ่งกลางรายการทางด้านขวา ให้กฎ #globalnav เพื่อจัดกึ่งกลางรายการไปทางซ้าย และให้ #subnav อีกกฎหนึ่ง กฎเพื่อจัดกึ่งกลางรายการโดยสิ้นเชิง