ไม่กี่ปีที่ผ่านมา DIV+CSS เริ่มกลายมาเป็นวิธีการที่นิยมใช้ในการออกแบบเว็บ ปัจจุบัน DIV+CSS ได้กลายเป็นมาตรฐานสำหรับการออกแบบเว็บไปแล้วในช่วงไม่กี่ปีที่ผ่านมา ปี. . ผู้เขียนยังเป็นนักออกแบบเว็บไซต์ที่ชอบวิธีนี้ ฉันใช้ div+css เพื่อออกแบบให้กับลูกค้ามาเป็นเวลาสามปีแล้ว แล้วมันมีข้อดีอะไรบ้างเมื่อเทียบกับ TABLE? เรามาพูดถึงประสบการณ์และความเข้าใจส่วนตัวกันดีกว่า โดยหวังว่าจะเป็นประโยชน์กับเพื่อนร่วมงานและบุคลากรที่เกี่ยวข้อง
ข้อได้เปรียบที่ใหญ่ที่สุดของการใช้ DIV+CSS ในการออกแบบเว็บคือการสร้างมาตรฐานให้กับโค้ดของเว็บ ละทิ้งวิธีการจัดวางตารางที่ล้าสมัย และตระหนักถึงการแยกระหว่างเนื้อหา ประสิทธิภาพ และพฤติกรรม โค้ด html มีโครงสร้างที่ดีขึ้น และอ่านและบำรุงรักษาได้ง่ายขึ้น และขนาดไฟล์หน้าเว็บก็เล็กลงด้วย ตัวอย่างเช่น หลังจากที่เว็บไซต์ของลูกค้าสร้างขึ้นใหม่เมื่อเร็วๆ นี้ ขนาดไฟล์หน้าเว็บก็น้อยกว่าครึ่งหนึ่งของขนาดเดิม ดังนั้นจึงใช้พื้นที่เว็บไซต์น้อยลงและเว็บไซต์เปิดเร็วขึ้น
วิธี DIV+CSS และ TABLE นั้นแตกต่างกันมากในการออกแบบ จำเป็นต้องมีการวางแผนอย่างรอบคอบก่อนที่จะเริ่มออกแบบหน้าเว็บ เช่น การตั้งชื่อองค์ประกอบที่ประกอบขึ้นเป็นหน้าเว็บเพื่ออำนวยความสะดวกในการกำหนดสไตล์ในแอตทริบิวต์สาธารณะจะกำหนดได้ดีที่สุดด้วยชื่อคลาส . สไตล์ทั่วไปของเว็บไซต์ทั้งหมดสามารถวางไว้ในไฟล์ css แยกกัน คุณลักษณะสาธารณะทั่วไป ได้แก่: ความกว้างของหน้าเว็บ สีพื้นหลัง ภาพพื้นหลัง ขนาดเริ่มต้นของแบบอักษร สี สไตล์ลิงก์ ฯลฯ สไตล์ที่แตกต่างกันสำหรับหน้าเว็บแต่ละหน้าอยู่ใน ไฟล์ CSS ทางที่ดีควรเน้นที่บล็อกเดียวและระบุว่าหน้าเว็บหรือส่วนของหน้าเว็บใดอยู่ก่อนบล็อก ซึ่งไม่เพียงแต่จะลดขนาดของไฟล์ CSS เท่านั้น แต่ยังหลีกเลี่ยงความสับสนและทำให้การบำรุงรักษาสะดวกยิ่งขึ้น เป็นที่น่าสังเกตว่าไม่ควรฝังสไตล์ไว้ในโค้ดของหน้าเว็บเพื่อแยกเนื้อหาและสไตล์ออกจากกันโดยสิ้นเชิง
เพื่อให้ทำงานได้ดีในการออกแบบเว็บ DIV+CSS มีประเด็นสำคัญสามประการที่ต้องเข้าใจ
1. คุณลักษณะ Float: DIV (เลเยอร์) จะใช้ทั้งแถวตามค่าเริ่มต้น สำหรับการออกแบบเลย์เอาต์แบบสองคอลัมน์หรือหลายคอลัมน์ทั่วไป คุณจะต้องสามารถตั้งค่าแอตทริบิวต์ float และ width ได้อย่างถูกต้องเพื่อให้ได้เอฟเฟกต์ หลังจากเค้าโครงแบบหลายคอลัมน์เสร็จสมบูรณ์แล้ว หากมีการติดตามเลเยอร์ที่ครอบครองแบนเนอร์ คุณจะต้องตั้งค่าแอตทริบิวต์ที่ชัดเจนเพื่อล้างเลเยอร์แบบลอย
2. โหมดกล่อง: เลเยอร์มีคุณสมบัติต่างๆ เช่น ความกว้าง ความสูง เส้นขอบ ระยะห่างภายใน และระยะห่างภายนอก พื้นที่จริงที่เลเยอร์ครอบครองคือผลรวมของค่าแอตทริบิวต์ข้างต้นอย่างเหมาะสม รูปแบบที่หรูหรา รูปแบบเว็บที่สวยงาม
3. การซ้อนเลเยอร์: นักออกแบบเว็บไซต์ที่มีประสบการณ์ทุกคนรู้ดีว่าไม่แนะนำให้ซ้อนเลเยอร์มากเกินไป โดยทั่วไปแล้วจะไม่เกิน 3 เลเยอร์ การซ้อนกันมากเกินไปจะนำไปสู่โค้ดที่ซับซ้อนและซ้ำซ้อน ความยากลำบากในการบำรุงรักษา และการทำงานที่ช้า นอกจากนี้ ในรูปแบบหลายคอลัมน์ สามารถใช้เลเยอร์แบบลอยได้ และไม่จำเป็นต้องตั้งค่าเลเยอร์ IE โดยรวมสำหรับการฝัง
กล่าวถึงหัวข้อความเข้ากันได้ของเบราว์เซอร์แยกกัน เมื่อเปรียบเทียบกับรูปแบบ TABLE แล้ว DIV+CSS มีแนวโน้มที่จะเกิดปัญหาความไม่เข้ากันกับเบราว์เซอร์หลายตัวมากกว่า สาเหตุหลักคือเบราว์เซอร์ที่ต่างกันมีค่าเริ่มต้นที่แตกต่างกันสำหรับมาตรฐานเว็บ กระแสหลักในจีนคือ IE ซึ่งใช้ Firefox และ Chrome น้อยกว่า ในแง่ของการทดสอบความเข้ากันได้ คุณต้องแน่ใจว่าจะไม่มีปัญหาเกิดขึ้นใน IE หลายเวอร์ชัน ต่อไปนี้เป็นวิธีการและเทคนิคบางอย่างที่ออกแบบมาเพื่อช่วยคุณค้นหาวิธีแก้ปัญหาเฉพาะ ปัญหาบนเว็บไซต์
สรุป: DIV+CSS มีข้อได้เปรียบเหนือ TABLE หลายประการ ผู้ออกแบบเว็บไซต์ควรละทิ้งวิธี TABLE โดยเร็วที่สุด ซึ่งจะเอื้อต่อการกระตุ้นตนเองให้เรียนรู้ความรู้ DIV+CSS ในเชิงลึกมากกว่า การเรียนรู้และใช้วิธีการออกแบบเว็บไซต์ DIV+CSS ไม่ใช่เรื่องยาก ตราบใดที่คุณเข้าใจความรู้พื้นฐานและทำอีกสองสามกรณี คุณจะค่อยๆ เข้าใจและเชี่ยวชาญมัน
บทความนี้เผยแพร่โดย [Hippie] ผู้ดูแลเว็บของ http://www.swjns.com โปรดเก็บ URL ไว้สำหรับการพิมพ์ซ้ำ
ขอขอบคุณ hbjsp สำหรับการสนับสนุนของคุณ