สรุปปัญหาทั่วไปในการเรียนรู้เค้าโครงหน้าเว็บ DIV CSS

เมื่อใช้เค้าโครงหน้าเว็บ Div+CSS เพื่อสร้างเว็บไซต์ที่สอดคล้องกับมาตรฐานเว็บ ก็อาจเกิดปัญหาบางอย่างเกิดขึ้นได้ง่าย

มาสรุปกันตอนนี้เพื่อให้ทุกคนเห็นว่าปัญหาอยู่ที่ไหน

1. ปัญหาการตรวจสอบ CSS

หน้าเว็บที่เราออกแบบทั้งหมดหวังว่าจะเป็นไปตามมาตรฐาน XHTML และ CSS เพื่อให้ผ่านการตรวจสอบ W3C การตรวจสอบ CSS2.0 ล้มเหลว ข้อผิดพลาดในการตรวจสอบหลักคือ: "บรรทัด: 0 ตระกูลแบบอักษร: ขอแนะนำให้คุณระบุตระกูลประเภทเป็นตัวเลือกสุดท้าย"

W3C แนะนำว่าเมื่อกำหนดแบบอักษร ควรลงท้ายด้วยหมวดหมู่ของแบบอักษร แทนที่จะเป็นแบบอักษรเดียว ตัวอย่างเช่น "sans-serif" ช่วยให้มั่นใจได้ว่าแบบอักษรบนเว็บสามารถแสดงภายใต้ระบบปฏิบัติการที่แตกต่างกันได้

แม้ว่าคนส่วนใหญ่จะกำหนด "sans-serif" บนแท็ก body แต่หากละเว้น sans-serif เมื่อกำหนดแบบอักษรอีกครั้งใน ID หรือคลาสอื่น จะถือว่าการตรวจสอบล้มเหลว ข้อผิดพลาดนี้ไม่ร้ายแรงมากนักและสามารถหลีกเลี่ยงได้ด้วยการเอาใจใส่เพียงเล็กน้อย

2. คำแนะนำการเขียน CSS

เพิ่มความคิดเห็นให้กับไฟล์ CSS ความคิดเห็นจะนำความสะดวกสบายมาสู่การบำรุงรักษาในอนาคตของคุณ ขอแนะนำให้เพิ่มความคิดเห็นลงในไฟล์ CSS ให้มากที่สุด และไม่ต้องกังวลกับการเพิ่มจำนวนไบต์เพียงเล็กน้อย พยายามย่อไวยากรณ์ CSS ให้สั้นลงให้มากที่สุด ตัวอย่างเช่น ค่าสี "FFFFFF" สามารถย่อเป็น "#FFF"; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" สามารถย่อเป็น " การขยาย:30px 0 10px" 20px;". มีเทคนิคการบันทึกเพิ่มเติมในการกำหนดเทคนิค และเมื่อคุณมีความเชี่ยวชาญมากขึ้นในแอปพลิเคชัน CSS คุณจะค้นพบวิธีการที่ดีขึ้นต่อไป

3. ปัญหาการตรวจสอบ XHTML

ผู้คนมักให้ความสนใจกับการตรวจสอบ CSS มากขึ้น แต่พวกเขาละเลยการปฏิบัติตามมาตรฐาน XHTML และเกิดข้อผิดพลาดระดับต่ำจำนวนมาก ประเด็นหลักมีดังต่อไปนี้:

○target="_blank" ไวยากรณ์นี้ถูกต้องใน HTML4.0 แต่ไม่ได้รับอนุญาตใน XHTML1.0 วิธีแก้ปัญหาหนึ่งคือเขียน target="new" และอีกวิธีหนึ่งคือใช้ js เพื่อประมวลผลเป้าหมายทั้งหมด

◎ทางที่ดีไม่ควรฝังไฟล์สไตล์ชีทที่แยกจากกันจะง่ายต่อการดูแลรักษา หากฝัง <style> ไว้ จะต้องเขียนเป็น <style type="text/css"> และไม่สามารถละเลยประเภทนั้นได้ ไม่เช่นนั้น XHTML จะไม่สามารถระบุได้ว่าสไตล์ของคุณใช้ทำอะไร

○<br> ต้องเขียนเป็น <br /> แท็กทั้งหมดจะต้องปิดด้วย "/"

◎ใช้ ID เดียวกันซ้ำ ID สามารถใช้ได้เพียงครั้งเดียวใน XHTML หากคุณต้องการอ้างอิงสไตล์หลายครั้ง คุณควรใช้คลาส

◎วิธีการฝัง Flash ไม่ถูกต้อง <embed> เดิมเป็นแท็กส่วนตัวของ Netscape แม้ว่า IE จะรองรับในภายหลัง แต่ W3C ไม่เคยรู้จักแท็กนี้เลย W3C สนับสนุนการใช้แท็ก <object> เพื่อแก้ปัญหาความเข้ากันได้ระหว่างเบราว์เซอร์ที่แตกต่างกัน วิธีแก้ปัญหาคือใช้ทั้งสองแท็ก

รหัสตัวอย่างที่สมบูรณ์มีดังนี้ (พื้นหลังแฟลชมีความโปร่งใส):

แต่การเขียนโดยตรงใน XHTML ยังคงเป็นไปไม่ได้ ตอนนี้เราทำได้เพียงโกงการตรวจสอบโดยการเขียนโค้ดด้านบนในไฟล์ flash.js แล้วเรียกมัน

<script type="text/javascript" src="flash.js"></script>

แฟลชมีคุณสมบัติตรงตามมาตรฐานหรือไม่นั้นเป็นประเด็นที่ถกเถียงกัน

○โค้ดที่คล้ายกับ id=header class=title ควรเขียนเป็น id="header" class="title" การอ้างอิงค่าแอตทริบิวต์เป็นกฎไวยากรณ์ XHTML พื้นฐานที่สุด

4. ปัญหาความเข้ากันได้

เว็บไซต์บางแห่งมีรูปร่างผิดปกติและไม่ตรงแนวเมื่อดูใน IE6.0, Mozilla Firefox1.0 และ Opera 7.12

มีศูนย์กลางอยู่ที่ IE แต่ไม่ใช่ใน Mozilla การตั้งค่าเนื้อหา {TEXT-ALIGN: center;} ใน IE สามารถจัดกึ่งกลางได้แล้ว แต่ใน Mozilla คุณต้องเพิ่มการตั้งค่าสไตล์ต่อไปนี้ให้กับเลเยอร์ที่ต้องการให้อยู่กึ่งกลาง: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

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

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