เรียนรู้การใช้เว็บเพจเค้าโครง CSS ล้วนๆ อย่างเชี่ยวชาญ

คุณกำลังเรียนรู้เค้าโครง 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 ที่เกี่ยวข้องตามวัตถุประสงค์ของเนื้อหาเหล่านี้

หากคุณนั่งลงและวิเคราะห์และวางแผนโครงสร้างเพจของคุณอย่างรอบคอบ คุณอาจพบสิ่งนี้:

โลโก้และชื่อเว็บไซต์

เนื้อหาหน้าหลัก

การนำทางไซต์ (เมนูหลัก)

เมนูย่อย

ช่องค้นหา

พื้นที่ใช้งาน (เช่น รถเข็นช็อปปิ้ง ชำระเงิน)

ส่วนท้าย (ประกาศเกี่ยวกับลิขสิทธิ์และกฎหมายที่เกี่ยวข้อง)

เรามักจะใช้องค์ประกอบ DIV เพื่อกำหนดโครงสร้างเหล่านี้ คล้ายกับสิ่งนี้:

＜div id="header"">＜/div>

＜div id="content"">＜/div>

＜div id="globalnav"">＜/div>

＜div id="subnav"">＜/div>

＜div id="ค้นหา"></div>

＜div id="ร้านค้า"></div>

＜div id="ส่วนท้าย"></div>

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

จากที่กล่าวมาข้างต้น คุณรู้วิธีจัดโครงสร้าง HTML แล้ว และตอนนี้คุณสามารถกำหนดเค้าโครงและสไตล์ได้แล้ว แต่ละบล็อกเนื้อหาสามารถวางที่ใดก็ได้บนหน้า และสามารถระบุสี แบบอักษร เส้นขอบ พื้นหลัง คุณสมบัติการจัดตำแหน่ง ฯลฯ ของบล็อกได้