คำนำ
ครั้งแรกที่ฉันท่องอินเทอร์เน็ต ฉันใช้เทอร์มินัลใบ้ ไม่นานนัก จอภาพขาวดำในรัฐมินนิโซตาก็สามารถเล่นภาพยนตร์เรื่อง "Monty Python and the Holy Grail" ผ่านเซิร์ฟเวอร์ได้ ไม่มีเมาส์ ไม่มีอินเทอร์เฟซผู้ใช้ที่ดี ไม่ต้องพูดถึงสี 24 บิตเลย โกเฟอร์เป็นเครื่องมือเดียวที่มีอยู่ การค้นหาสามารถใช้ได้เฉพาะ Archie และ Veronica เท่านั้น ไม่มีใครเคยได้ยินเกี่ยวกับ W3 (เวิลด์ไวด์เว็บ) และเว็บก็ดูเพียงพอในเวลานั้น
หมายเหตุผู้แปล:
1. เทอร์มินัลใบ้ เหมือนกับพีซี แต่ไม่มี CPU หน่วยความจำ และฮาร์ดไดรฟ์เป็นของตัวเอง ธุรกรรมได้รับการประมวลผลผ่านโฮสต์ทั่วไป
2.โกเฟอร์. แอปพลิเคชันไคลเอ็นต์/เซิร์ฟเวอร์ที่แสดงข้อมูลทั้งหมดแก่ผู้ใช้ปลายทางในรูปแบบเมนูโดยการโอน FTP การเข้าสู่ระบบระยะไกล การค้นหา Archie ฯลฯ ทำให้ผู้ใช้สามารถเรียกดูข้อมูลจำนวนมากได้ ด้วยวิธีนี้ ผู้ใช้ไม่จำเป็นต้องทราบ (หรือป้อน) ที่อยู่ของตนเมื่อเข้าถึงแหล่งข้อมูลทางอินเทอร์เน็ต
3.Archie เป็นโปรแกรมแรกที่จัดทำดัชนีไฟล์เว็บไซต์ FTP ที่ไม่ระบุชื่อบนอินเทอร์เน็ตโดยอัตโนมัติ แต่ยังไม่ใช่เครื่องมือค้นหาที่แท้จริง
4.Veronica เป็นทรัพยากรประเภท Gopher ที่คุณสามารถใช้เพื่อเรียกข้อมูลรายการเมนูทั้งหมดที่มีคำพิเศษที่ระบุในพื้นที่ Gopher
หลังจากนั้นไม่นาน โค้ดแปลกๆ ก็เริ่มท่วมผลการค้นหาของฉัน ฉันยังสามารถอ่านสิ่งที่ต้องการได้ แต่มันก็น่ารำคาญ เพื่อนร่วมงานบอกฉันว่าเป็น HTML ซึ่งเป็นภาษากราฟิกสำหรับอินเทอร์เน็ต ฉันได้เรียนรู้วิธีบางอย่างเพื่อพยายามกรอง HTML ออก ต่อมามีจอภาพ 256 สีและเบราว์เซอร์ Mosaic เวอร์ชันแรกปรากฏขึ้น และทุกอย่างก็เริ่มเปลี่ยนไป
เป็นเวลานานแล้วตั้งแต่นั้นเป็นต้นมา เทคโนโลยีได้รับการปรับปรุงอย่างเหลือเชื่อ และอินเทอร์เฟซเว็บได้รับการปรับปรุงใหม่ คิดใหม่ และสร้างนวัตกรรมใหม่นับครั้งไม่ถ้วน ตั้งแต่ฉันเริ่มทำงานเป็นนักออกแบบเว็บไซต์ ฉันมีประสบการณ์โดยตรงเกี่ยวกับขั้นตอนต่างๆ ของการออกแบบโดยใช้ตาราง ปัญหาของ JavaScript ปัญหาของ CSS และที่สำคัญกว่านั้นคือมาตรฐานเว็บที่เป็นที่ยอมรับในระดับสากล
ในตอนแรกอินเทอร์เน็ตถูกสร้างขึ้นตามแนวคิดของ Geeks เท่านั้น (ผู้คลั่งไคล้เทคโนโลยี) มีเพียงเนื้อหาล้วนๆ บนอินเทอร์เน็ต พวกเขาไม่ได้คำนึงถึงสีพื้นหลังและรูปภาพที่สวยงาม แต่ความจริงก็คือ ผู้คนชอบที่จะเห็นการแสดงออกที่สมบูรณ์ยิ่งขึ้นเมื่อท่องเว็บ การเกิดขึ้นของวิธีการออกแบบตารางช่วยแก้ปัญหานี้ เราสามารถควบคุมเค้าโครงผ่านตารางได้! เราทุกคนเริ่ม "โกง" ระบบ เราไม่สามารถสร้างเส้นบาง ๆ 1 พิกเซลได้หรือ? เพียงแทรกจุด GIF โปร่งใสลงในแถวของตารางและตั้งค่าสีพื้นหลัง เท่านี้ก็เสร็จเรียบร้อย! ไม่สามารถควบคุมแบบอักษรได้ใช่ไหม จากนั้นใช้แท็กอื่น <font>!
ก่อนที่ฉันจะได้รับการแนะนำให้รู้จักกับ CSS และมาตรฐานเว็บ ฉันออกแบบด้วยตารางมาหลายปีแล้ว วิธีการออกแบบมาตรฐานเว็บแตกต่างไปจากเดิมอย่างสิ้นเชิง มีประสิทธิภาพและมีเสน่ห์ ฉันตกหลุมรักวิธีการออกแบบใหม่ๆ อย่างหลงใหลอย่างลึกซึ้ง สามารถใช้โค้ดที่มีความหมายเพื่อแยกเนื้อหาออกจากเลย์เอาต์ แต่ยังคงรักษาพื้นที่สีขาวและการออกแบบที่สวยงามเอาไว้ ฉัน "ชอบสิ่งใหม่และเกลียดสิ่งเก่า" ทันที และเลิกใช้วิธีการออกแบบแบบเก่าอีกต่อไป
จนถึงวันนี้.
มีการถกเถียงกันมากมายเกี่ยวกับมาตรฐานเว็บและ CSS เช่นเดียวกับคำหลักที่ดีทุกคำ คำนี้จะกลายเป็น "ชื่อใหญ่" คนต่อไปในประวัติศาสตร์ของการพัฒนาเทคโนโลยีเว็บ เริ่มต้นจาก Dougl เมื่อ Bowman ออกแบบ Wired.com ใหม่และยังมีการพัฒนาอย่างต่อเนื่อง ในปี 2003 หนังสือ "การออกแบบด้วยมาตรฐานเว็บ" ที่เขียนโดย Zeldman ได้รับการตีพิมพ์ ทำให้เราทุกคนได้เห็นแสงสว่าง นักออกแบบทั่วโลกต่างยอมรับและเชียร์วิธีการออกแบบใหม่ มีโครงสร้าง มีความหมาย รวดเร็วและมีน้ำหนักเบา
อย่างไรก็ตาม ยังมีบางคนที่ยังคงใช้วิธีการออกแบบตารางแบบดั้งเดิม และถึงกับใช้แท็ก <font> พวกเขากล่าวว่าวิธีการแบบเดิมนั้นง่ายกว่า สะดวกกว่าในการบำรุงรักษาและการพัฒนาที่รวดเร็วกว่า ใครถูก?
ฉันตัดสินใจทำการทดลองด้วยตัวเองเพื่อดูว่าสิ่งต่างๆ เปลี่ยนแปลงไปอย่างไร และเราเลือกวิธีไหนดีกว่ากัน
ท้าทาย
ฉันออกแบบเว็บไซต์สมมุติโดยใช้ซอฟต์แวร์กราฟิก ขั้นแรกให้ใช้ HTML4.01 เพื่อสร้างโดยใช้ตารางที่ไม่มี CSS ใด ๆ จากนั้นใช้ XHTML1.0 Transitional เพื่อสร้างโค้ดที่สอดคล้องกับข้อกำหนดด้านการใช้งานและความสามารถในการเข้าถึง และใช้ CSS เพื่อหลีกเลี่ยงตารางให้มากที่สุด (เว้นแต่จะใช้ตารางเพื่อแสดงข้อมูลแบบตาราง)
กระบวนการผลิตแบ่งออกเป็น 3 ขั้นตอน และบันทึกขั้นตอนอย่างละเอียดและเปรียบเทียบข้อดีข้อเสียเพื่อดูว่าเราได้อะไร? มีอะไรหายไปบ้าง? เราควรอยู่ฝ่ายไหน..
ขั้นตอนที่หนึ่ง: ออกแบบไซต์
ฉันเริ่มออกแบบไซต์สมมติ ฉันกำลังสร้างเว็บไซต์ให้กับองค์กรชื่อ "Butterfly Watchers Association" ฮ่าฮ่า นี่อาจเป็นลูกค้าที่ดีที่สุดของฉันที่ไม่เกี่ยวข้องกับกระบวนการออกแบบ ฉันพยายามทำให้มันสมจริงที่สุดเท่าที่จะเป็นไปได้ โดยจินตนาการถึงผู้ใช้เป้าหมายของเว็บไซต์ โดยใช้รูปแบบดั้งเดิมและแบบอักษรที่เชื่อถือได้
ฉันต้องการให้เว็บไซต์มีขนาดกะทัดรัด มีประสิทธิภาพ และกระชับ นอกจากนี้ ฉันคิดว่าควรมีผีเสื้ออยู่ในหน้านี้ ดังนั้นฉันจึงมองหาภาพผีเสื้อที่เหมาะสมทุกที่ และในไม่ช้าก็พบภาพผีเสื้อที่ stock.xchng ผีเสื้อสีน้ำเงินที่อยู่ท่ามกลางใบไม้สีเขียวเข้ากับภาพลักษณ์ของสถานที่ได้อย่างลงตัว หลังจากประมวลผลและแก้ไขรูปภาพนี้จะกลายเป็นส่วนหัวของหน้าของเรา
ในระหว่างขั้นตอนการออกแบบ ฉันปฏิบัติตามหลักการใช้งานบางประการ ตัวอย่างเช่น พยายามรักษาขนาดไฟล์รูปภาพให้เล็กที่สุดเท่าที่จะเป็นไปได้ ตอนแรกฉันวางแผนที่จะใช้ฟอนต์ Garamond สำหรับการนำทาง ต่อมาเมื่อพิจารณาว่าเครื่องของผู้ใช้อาจไม่มีฟอนต์นี้ ฉันจึงตัดสินใจใช้ฟอนต์ Georgia (ฟอนต์นี้คล้ายกับ Times New Roman และในกรณีที่เลวร้ายที่สุด สามารถแทนที่ด้วยฟอนต์ Times New Roman) แต่สำหรับภาพส่วนหัวผมยังคงใช้จอร์เจียเพราะมันเป็นภาพ
ข้อความมีพื้นหลังสีเทาและใช้ฟอนต์ Trebuchet MS ส่วนข่าวใช้ฟอนต์ Verdana ซึ่งดูดีเมื่อลดขนาดลง มีกฎง่ายๆ ที่ไม่ได้เขียนไว้เพื่อใช้แบบอักษร 4 แบบในการออกแบบ และฉันไม่เห็นด้วยจริงๆ กับเรื่องนั้น
ขั้นตอนที่สอง: "ใช้วิธีการก่อนหน้าและใช้ภาพ GIF แบบโปร่งใสเพื่อควบคุมระยะห่าง"
หากคุณเป็นนักออกแบบเว็บไซต์ที่เข้าร่วมในหลายโครงการอยู่แล้ว โครงสร้างต่อไปนี้จะคุ้นเคยกับคุณเป็นอย่างดี:
<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">เนื้อหาอยู่ที่นี่</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
เราคุ้นเคยกับการใช้ตารางเพื่อพูดเพราะเป็น "องค์ประกอบพื้นฐาน" พื้นฐานที่สุดของเรา ตัวอย่างเช่น: ใช้รูปภาพ GIF แบบโปร่งใสเพื่อควบคุมระยะห่าง และใช้คุณลักษณะต่างๆ ของตารางเพื่อควบคุมตำแหน่ง มีคนอธิบายแบบนี้: ตารางมีความน่าเชื่อถือ และหน้าที่จัดวางด้วยตารางสามารถส่งต่อได้! ไม่มี CSS ใดกล้าแข่งขันกับตาราง ตารางสามารถใส่ได้กับทุกเบราว์เซอร์และอื่นๆ
เริ่มต้นด้วยการทำซ้ำกระบวนการออกแบบทั้งหมดทีละขั้นตอน
ชั่วโมง 1
โอ้. ดูเหมือนว่าเราจะย้อนเวลากลับไปได้ เราจะกำหนดสีพื้นหลังโดยไม่ใช้ CSS ได้อย่างไร โอ้ ใช่แล้ว... มันคือ bgcolor ขอบคุณสำหรับคำแนะนำ เอาล่ะ มาเริ่มสร้างแบบฟอร์มและดูเอฟเฟกต์กันดีกว่า ฉันกำหนด "align=center" เพื่อให้อยู่กึ่งกลางในเบราว์เซอร์ทั้งหมด เยี่ยมมาก มันง่ายมาก! ฟอร์มก็ดูไม่แย่และรู้สึกเหมือนได้เจอเพื่อนเก่าอีกครั้ง ฉันใช้รูปภาพ GIF แบบโปร่งใสอย่างเชี่ยวชาญเพื่อควบคุมระยะห่าง และงานก็ดำเนินไปอย่างรวดเร็ว! ความเมตตา? เหตุใดจึงมีช่องว่างระหว่างส่วนหัวและเมนู โอ้ ปรากฎว่ามีช่องว่างเพิ่มเติมหลังโค้ดรูปภาพ และเบราว์เซอร์ IE จะแสดงขึ้นมา เปลี่ยนแปลงได้ง่าย เพียงลบช่องว่าง
ชั่วโมงที่ 2
ฉันใช้จาวาสคริปต์เพื่อสร้างเอฟเฟกต์พลิกสำหรับเมนูนำทาง:
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript ถูกเขียนดังนี้:
ฟังก์ชั่น chBg(obj) { obj.bgColor = "#E1E5DB"; } ฟังก์ชั่น chBg2(obj) { obj.bgColor = "#CBD1C3";
นอกเหนือจากความจริงที่ว่าฉันลืมไปนิดหน่อยเกี่ยวกับวิธีการออกแบบแบบเก่า ความคืบหน้าทั้งหมดค่อนข้างรวดเร็ว แม้ว่าฉันพยายามลดการซ้อนตารางให้มากที่สุดเท่าที่จะเป็นไปได้ แต่โค้ดก็ยังดูซับซ้อนอยู่เล็กน้อย ดังนั้นฉันจึงเพิ่มความคิดเห็นบางส่วนเพื่อให้ง่ายต่อการค้นหาตำแหน่งที่เราต้องแก้ไข
ฉันพบปัญหาเล็กๆ น้อยๆ: ฉันไม่สามารถลบขีดเส้นใต้ของลิงก์โดยไม่ใช้ css ได้ อาจจะมีวิธีแก้ ลองค้นหาใน google ครับ
ชั่วโมงที่ 3
หลังจากค้นหาใน Google แล้ว ฉันยังหาทางไม่ได้ ฉันจะทำลิงค์โดยไม่ขีดเส้นใต้ได้อย่างไร มันต้องมีทางแก้!
ชั่วโมงที่ 4
มาดูผลลัพธ์ของ 4 ชั่วโมงแรกบนเบราว์เซอร์อื่นที่ไม่ใช่ IE6 กัน โอ้! น่าเกลียดมากใน Firefox ดูดีใน Opera และ Netscape
ชั่วโมงที่ 5
ไปข้างหน้าและเขียนโค้ด... ดีบักและแก้ไข
ที่ทำงาน ฉันตระหนักถึงข้อจำกัดของแท็ก <font> ในการควบคุมขนาดตัวอักษร ฉันไม่สามารถกำหนดหลายขนาดได้ ประณามมัน!
ฉันยังพบปัญหากับเค้าโครงข้อความในส่วนข่าวสาร ฉันต้องใช้การซ้อนตารางมากขึ้นเพื่อให้ได้ผลลัพธ์ ในการจัดเรียงรูปภาพผีเสื้อในข้อความทางด้านขวาของข้อความ ฉันยังต้องเพิ่มตารางเพื่อแก้ไขปัญหาด้วย การเรียงพิมพ์ "โกง" แบบนี้ทำให้ฉันรู้สึกทำอะไรไม่ถูก
ชั่วโมงที่ 6
การออกแบบเสร็จสิ้นแล้วและดูค่อนข้างเหมือนกับการออกแบบดั้งเดิม คุณสามารถคลิกที่นี่เพื่อดู
คลิกที่นี่เพื่อดูว่ามีกี่โต๊ะ
ระยะที่ 3: เราไม่ต้องการแบบฟอร์ม!
ด้านล่างนี้เราจะมาดูว่าการออกแบบตามมาตรฐานเว็บและการวางผังด้วย CSS คืออะไร ฉันจะเริ่มต้นด้วยการระบุเนื้อหา ฉันจะพยายามทำให้โลโก้มีความหมายและหลีกเลี่ยงแท็กที่ซ้ำซ้อน
ส่วนหัวเป็นรูปภาพ แต่ก็เป็นชื่อเรื่องด้วย ดังนั้นฉันจึงเขียนโค้ดดังนี้:
<h1>สมาคมนักดูผีเสื้อ พวกเขาพลิ้วไหว เราเฝ้าดูพวกเขา</h1>
ฉันจะคิดถึงวิธีแสดงชื่อนี้อย่างถูกต้องในภายหลัง (ตามหลักการแล้ว เราใส่ใจกับเนื้อหาให้มากที่สุดเท่าที่จะทำได้และจัดวางเลย์เอาต์ให้น้อยที่สุด) หัวข้ออื่นๆ (ข่าว การพบเห็น และการเป็นสมาชิก) จะถูกระบุเป็น <h2>
เมนูนั้นเป็นรายการที่ไม่เรียงลำดับ (รายการ) ดังนั้นจึงจะถูกระบุเป็นรายการ ไม่จำเป็นต้องจำแนกย่อหน้า (เราใช้ตัวเลือกการสืบทอดเพื่อ "แขวน" ย่อหน้าเหล่านั้นในเลเยอร์ที่มี) ฉันจะเปรียบเทียบกับข้อความเนื้อหาต้นฉบับเพื่อดูว่าฉันต้องเพิ่มแท็กพิเศษจำนวนเท่าใดเพื่อให้ได้เลย์เอาต์ (ฉันจะพยายามหลีกเลี่ยงการเพิ่มแท็กให้มากที่สุด)
นี่คือข้อความเนื้อหาต้นฉบับ ดูโค้ดต้นฉบับ ซึ่งสอดคล้องกับข้อกำหนดเฉพาะการนำส่ง xhtml1.0 โปรดสังเกตว่าองค์ประกอบทั้งหมดมีอยู่แล้วภายใน <div>s ด้วยชื่อที่กำหนด วันที่ในข่าวยังถูกเพิ่มเข้ากับคลาสวันที่อีกด้วย คุณสามารถเห็นรหัสนั้นง่ายมาก
ชั่วโมง 1
กำหนดเส้นขอบของเลเยอร์ "คอนเทนเนอร์" ให้เป็น 1px จัดเนื้อหาให้อยู่ตรงกลางโดยกำหนด "text-align: center" ในรูปแบบเนื้อหา เพื่อให้อยู่กึ่งกลางในเบราว์เซอร์ทั้งหมด Margin: 0 auto; (หมายถึง top=0, right=auto, lower=0, left=auto) ก็ถูกกำหนดไว้ใน "container" ด้วย การจัดกึ่งกลางสามารถทำได้ง่ายพอๆ กับตาราง
กำหนดค่าช่องว่างภายใน "บน" และ "ล่าง" ของ "เนื้อหา" ให้เป็น 20px (ไม่ได้กำหนดช่องว่างภายในโดยตรงใน "คอนเทนเนอร์" เพื่อให้เหมาะกับเบราว์เซอร์ทั้งหมด)
รายการที่ไม่เรียงลำดับ (li) ต้องถูกกำหนดเป็น "display:inline" เพื่อให้เมนูแสดงในหนึ่งบรรทัด ฉันเพิ่มไอคอนการนำทางระหว่างเมนู ไอคอนการนำทางเหล่านี้ถูกกำหนดโดยใช้วิธีพื้นหลังที่ไม่ซ้ำ ซึ่งสามารถกำหนดตำแหน่ง (x, y) ได้อย่างแม่นยำ คล้ายกับสิ่งนี้:
พื้นหลัง: url(menuBullet2.gif) no-repeat 4px 9px; เอฟเฟกต์การเปลี่ยนสีของการคลิกของเมนูใช้รูปแบบโฮเวอร์ของลิงก์ โดยไม่ต้องใช้ JavaScript อีกต่อไป
ฉันตั้งค่าภาพผีเสื้อที่ส่วนหัวของหน้าเป็นพื้นหลังของ <h1> เพื่อที่ฉันจะได้ไม่ต้องกังวลเรื่องความสะดวกในการใช้งาน และสามารถอ่านชื่อได้ตามปกติบนอุปกรณ์ที่ไม่สามารถแสดงภาพได้ (เช่น หน้าจอ ผู้อ่านและโรบ็อตการค้นหา)
ชั่วโมงที่ 2
รายการแรกของเมนู (HOME) ใช้ไอคอนอื่น และฉันต้องซ่อนพื้นหลังดั้งเดิมและเพิ่มรหัสพิเศษ (frst) ให้กับเมนู HOME:
#เมนูอุลลิ #frst
ไอคอนอื่น (ติดต่อ):
พื้นหลัง: url แบบโปร่งใส (menuBullet3.gif) ไม่ทำซ้ำ 615px 9px; ฉันไม่สามารถใช้ CSS เพื่อควบคุมทั้งสองคอลัมน์ให้มีความสูงเท่ากันได้ โชคดีที่ฉันสามารถใช้ภาพพื้นหลังเพื่อแก้ไขได้ ฉันกำหนด "คอนเทนเนอร์" ที่แสดงพื้นหลังซ้ำในแนวตั้ง
พื้นหลัง: #fff url(bgMain.gif) ทำซ้ำ-y;
ชั่วโมงที่ 3
กล่องคำจำกัดความ CSS สะดวกกว่าตารางมาก โดยเฉพาะคุณสมบัติของเส้นขอบที่มีประโยชน์มาก
ตอนนี้ฉันเริ่มกำหนดส่วนหัว <h2> คำจำกัดความของไอคอนเหมือนกับด้านบน
ฉันลอยเลเยอร์ "ข่าว" ทางด้านขวาของ "การพบเห็น" และ "การเป็นสมาชิก" กำหนดเลเยอร์ "ลิขสิทธิ์" ด้วย "clear: ทั้งสองอย่าง" เพื่อให้เป็นไปตามเลเยอร์ลอย ลอยรูปภาพผีเสื้อในข้อความไปทางขวา และข้อความจะล้อมรอบรูปภาพได้โดยอัตโนมัติ การกำหนดเส้นขอบ 1px ของรูปภาพและการตั้งค่าระยะห่างจากช่องว่างภายในสามารถทำให้ได้เอฟเฟกต์การซ้อนของตารางดั้งเดิมทั้งสองตาราง
พบปัญหาบางประการ: เลเยอร์ลิขสิทธิ์และเลเยอร์เนื้อหาทับซ้อนกันบางส่วน
ชั่วโมงที่ 4
ข้อผิดพลาดที่แสดงเกี่ยวข้องกับคำจำกัดความ float:right; การลอยไปทางซ้ายจะช่วยแก้ปัญหานี้ ซึ่งดูแปลกไป ฉันใช้ Firefox ในการทดสอบครั้งแรก มันก็ดูไม่แย่ ยกเว้นว่าไอคอนเมนูจะเลื่อนไปสองสามพิกเซล
มีเทคนิค CSS บางอย่างที่สามารถแก้ไขเอฟเฟกต์การแสดงผลในเบราว์เซอร์ที่ไม่ใช่ IE ได้ เช่น การให้ค่าคุณสมบัติที่แตกต่างกันให้กับเบราว์เซอร์ที่แตกต่างกัน
ฉันใช้ค่า !important ในคำจำกัดความขององค์ประกอบเดียวกัน เบราว์เซอร์ IE ไม่รองรับค่านี้
พื้นหลัง: url(menuBullet2.gif) ไม่ทำซ้ำ 4px 6px !สำคัญ;
พื้นหลัง: url (menuBullet2.gif) ไม่ทำซ้ำ 4px 9px;
ใน CSS หากมีคำจำกัดความหลายคำสำหรับองค์ประกอบเดียวกัน คำสุดท้ายนั้นถูกต้อง แต่เนื่องจาก IE ไม่รองรับ !important IE จะใช้ค่าที่กำหนดเป็นค่าที่สอง และเบราว์เซอร์อื่นๆ จะใช้ค่าที่กำหนดเป็นค่าแรก
เสร็จแล้วครับ ดูผลลัพธ์ได้ที่นี่
สรุปแล้ว
การออกแบบตามตาราง
ฉันทดสอบหน้าเว็บโดยใช้เบราว์เซอร์ทุกตัวที่หาได้ รวมถึงเบราว์เซอร์สำหรับแพลตฟอร์ม Linux, Windows และ Macintosh หน้าเค้าโครงตารางจะมีลักษณะเหมือนกันในเบราว์เซอร์ต่างๆ "มันแข็งเหมือนหิน" นี่เป็นความคิดเห็นแรกที่กล่าวถึงการจัดวางโต๊ะ
อย่างไรก็ตาม เมื่อจำเป็นต้องแก้ไขเนื้อหาบางส่วนของหน้า การเปลี่ยนเค้าโครงตารางค่อนข้างลำบาก นี่เป็นปัญหา หากเราใช้ CMS (ระบบจัดการเนื้อหา) จะเกิดปัญหาในการจัดรูปแบบเนื้อหา
ใช้เวลาออกแบบทั้งหมดนานหน่อยเพราะลืมวิธีเก่าไปแล้วถ้าทำใหม่น่าจะประหยัดเวลาได้ 1-2 ชั่วโมงครับ
ฉันอธิบายการออกแบบที่ใช้ตารางเป็น "งานฮึดฮัด" จำนวนมาก แม้ว่าฉันมักจะแปลกใจกับเทคนิคการออกแบบขั้นสูงก็ตาม ด้วยการออกแบบที่ใช้ CSS ล้วนๆ ฉันมักจะคุ้นเคยกับการแยกย่อยการออกแบบและวิเคราะห์ข้อบกพร่องทีละขั้นตอน อย่างไรก็ตาม การออกแบบโต๊ะไม่จำเป็นต้องมีการทำงานนี้ คุณเพียงแค่ต้องทุ่มเทให้กับการออกแบบโต๊ะต่อไป มาดูกระบวนการ CSS กันอีกครั้ง
การออกแบบที่ใช้ CSS
การออกแบบด้วย CSS รู้สึกดีขึ้นมาก การเปลี่ยนแปลงโค้ดทำได้โดยตรงและโปร่งใส และฉันสามารถควบคุมกระบวนการทั้งหมดได้อย่างชัดเจน ในทางตรงกันข้าม การออกแบบโต๊ะก็เหมือนกับการก่ออิฐ ยิ่งมีการเปลี่ยนแปลงในหน้ามากเท่าไร การออกแบบ CSS ก็ยิ่งสะดวกและมีประสิทธิภาพมากขึ้นเท่านั้น
การออกแบบ CSS ยังมีความหมายอย่างมากในการประหยัดแบนด์วิธ การแยกสไตล์ทั้งหมดออกเป็นไฟล์แยกกัน และการใช้ไฟล์สไตล์ชีตหนึ่งไฟล์หรือหลายไฟล์สำหรับทั้งไซต์จะทำให้ไซต์ทั้งหมดมีขนาดเล็กลง
การแยกข้อมูลโครงร่างออกจากเนื้อหายังมีประโยชน์หลายประการอีกด้วย ในอนาคต ฉันสามารถปรับปรุงเว็บไซต์ทั้งหมดได้ตลอดเวลาโดยไม่ต้องเปลี่ยนแปลงอะไรเลย เช่นเดียวกับ CSS Zen Garden นอกจากนี้ยังเพิ่มความสะดวกในการใช้งาน ทำให้โรบ็อตการค้นหาค้นพบหน้าเว็บของคุณได้ง่ายขึ้น (โปรดจำไว้ว่า: Google เป็นแหล่งที่มาของผู้เข้าชมที่สำคัญที่สุดของคุณ)
แม้ว่าประสิทธิภาพในการทำงานของคุณจะสูงมากเมื่อคุณคุ้นเคยกับการออกแบบที่ใช้ CSS แต่คุณต้องใช้เวลาอย่างมากในการเรียนรู้กฎ ความแตกต่างในรูปแบบกล่อง เทคนิคการประมวลผลของเบราว์เซอร์ และทฤษฎีมากมาย และต้องอาศัยการฝึกฝนอย่างต่อเนื่องจึงจะเชี่ยวชาญ . กล่าวโดยสรุปคือ CSS นั้นง่ายกว่าตาราง แต่ถ้าคุณต้องการออกแบบโดยใช้ CSS ล้วนๆ ให้เตรียมที่จะใช้เวลาอย่างมากในการเรียนรู้มัน แม้ว่าคุณจะเป็นนักพัฒนาที่มีประสบการณ์ คุณก็ควรเตรียมพร้อมรับมือกับข้อบกพร่องต่างๆ บางครั้งอาจใช้เวลาหลายชั่วโมงในการจัดการกับข้อบกพร่อง
ผู้ชนะ
CSS และการออกแบบตามมาตรฐานเว็บชนะ แค่ดูโค้ดของทั้งสองวิธีก็เพียงพอแล้วในการตัดสินใจ CSS มอบสิทธิประโยชน์อีกมากมาย (โดยหลักแล้วในแง่ของความง่ายในการใช้งาน) จริงๆ แล้ว เหตุผลพื้นฐานก็คือความเกียจคร้านของฉัน ถ้าฉันใช้แบบโต๊ะแล้วลูกค้าติดต่อฉันในอีกหนึ่งปีต่อมาและบอกว่าจำเป็นต้องแก้ไข ฉันอาจบอกเขาว่าฉันได้เข้าร่วมกองทัพแล้วและอยู่ต่างประเทศ ถ้าฉันใช้ CSS ฉันจะเปลี่ยนให้ลูกค้าโดยไม่ต้องคิดเลย เพราะฉันไม่ต้องคิดค้นวงล้อใหม่