ฉันพัฒนาส่วนหน้ามาเกือบ 3 ปีแล้ว วันนี้ฉันอยากจะพูดคุยกับคุณเกี่ยวกับประสบการณ์ส่วนตัวของฉันในการพัฒนาส่วนหน้าของเว็บ (แน่นอนว่ามันเป็นความเข้าใจส่วนตัวของฉันทั้งหมด โปรดรวมและแก้ไขฉันด้วยหากมี คือสิ่งที่ฉันบอกว่าไม่เหมาะสมหรือไม่ถูกต้อง) ที่นี่ขอเริ่มต้นด้วยมาตรฐานเว็บ
มาตรฐานเว็บคืออะไร?
ฮ่าๆ ว่ากันว่าเป็นมาตรฐานของเว็บ แต่ในที่นี้ผมจะสรุปประสบการณ์บางอย่างของ XHTML1.1 และ CSS2.1 เป็นหลัก เนื่องจาก WEB ครอบคลุมเนื้อหาจำนวนมาก "มาตรฐานเว็บ" จึงเป็นชื่อทั่วไปของชุดมาตรฐาน รวมถึง HTML4.0, XHTML1.1, CSS2.1, XML1.0, RSS2.0, ECMAScript1.1 และ DOM1 0 และอื่น ๆ ตรงนี้ฉันอยากจะชี้ให้เห็นว่ามาตรฐานเว็บไม่ใช่สิ่งที่เราเรียกว่า DIV+CSS
เพิ่งกล่าวถึงข้างต้น - DIV+CSS ฮ่าๆ ให้ฉันอธิบายที่นี่ นี่ไม่ถูกต้องจริงๆ ข้อกำหนดที่ถูกต้องของ DIV+CSS (ความเข้าใจส่วนบุคคล) ควรเป็น: การใช้ XHTML1.1 ในมาตรฐานเว็บที่แนะนำโดย W3C รวมกับสไตล์ชีต CSS2.0 เพื่อสร้างเพจ DIV ควรอ้างถึงแท็ก XHTML ในขณะที่การแสดงผล CSS อ้างถึง สไตล์ชีต CSS
ประโยชน์ของการพัฒนาโดยใช้มาตรฐานเว็บ
เหตุใด W3C จึงแนะนำวิธีการผลิตเพจดังกล่าว มาดูข้อดีของการใช้การพัฒนามาตรฐาน WEB (ความเข้าใจส่วนตัว) กันดีกว่า เทียบกับเค้าโครง TABLE ก่อนหน้านี้กัน
1. ประหยัดค่าใช้จ่ายในการดำเนินงานและประหยัดเงิน!
ฮ่าๆ สนใจอะไรที่สามารถช่วยประหยัดเงินได้มั้ยคะ? แน่นอนฉันสนใจมาก มาดูกันว่าวิธีการผลิตมาตรฐาน WEB ของเราบรรลุผลสำเร็จได้อย่างไร?
การใช้มาตรฐานเว็บในการผลิต เราสามารถบรรลุการแยกนิพจน์อย่างเป็นทางการได้ เราใช้ XHTML เพื่อแสดง (ข้อมูล) และ CSS เพื่อควบคุมแบบฟอร์ม (การนำเสนอองค์ประกอบของหน้า) ในหน้าที่เขียนไว้อย่างดี โดยพื้นฐานแล้วโค้ด XHTML จะมีข้อมูลที่ผู้ใช้ต้องการดู รวมถึงของตกแต่งอื่นๆ ทั้งหมดนี้ควบคุมโดย CSS ของเรา ด้วยวิธีนี้ ขนาดของหน้า (XHTML) ของเราจะลดลงอย่างมาก ดังนั้น ต้นทุนแบนด์วิธของคุณจึงลดลง คุณจะจินตนาการได้ว่าหน้าแรกของ YAHOO มีขนาดเล็ก 1,000,000 คน ดังนั้น แบนด์วิธที่ประหยัดได้เท่าไร? และแบนด์วิดธ์สามารถใช้ประโยชน์ได้เต็มที่ยิ่งขึ้น
CSS ของเราควบคุมสไตล์ขององค์ประกอบของหน้าทั้งหมด ตอนนี้ หากคุณต้องการเปลี่ยนสไตล์โดยรวมของเว็บไซต์ คุณใช้เวลาเพียงไม่กี่นาทีในการแก้ไขไฟล์ CSS และคุณก็ทำได้อย่างง่ายดาย ค่าบำรุงรักษาก็ลดลงช่วยประหยัดเงินได้มากใช่ไหม? นอกจากนี้คุณจะเปิดหน้านี้ได้เร็วขึ้นมาก หน้าเว็บที่ทำให้คุณรอครึ่งนาที เว้นแต่ว่าข้อมูลภายในจะเป็นประโยชน์กับคุณมาก โดยทั่วไปแล้ว เราก็ไม่มีเวลารอมากนัก
2. เป็นมิตรกับผู้ใช้มากขึ้นและมีโอกาสที่จะได้รับผู้ใช้เพิ่มมากขึ้น
ตอนนี้เรามาพูดถึงความเป็นมิตรต่อผู้ใช้กันดีกว่า ก่อนอื่น ฉันต้องการแบ่งผู้ใช้ของเราออกเป็นหมวดหมู่
หมวดที่ 1: ผู้ใช้ทั่วไป (ทุกคนที่เยี่ยมชมเว็บไซต์ของเรา);
หมวดที่ 2: เครื่องมือค้นหา;
เพจที่พัฒนาโดยใช้มาตรฐานเว็บมีโครงสร้างที่ชัดเจน ขนาดเพจเล็ก และเข้ากันได้กับเบราว์เซอร์ที่ดี เมื่อผู้ใช้ทั่วไปเข้าถึงได้ เพจจะเปิดขึ้นอย่างรวดเร็ว และไม่ว่าผู้ใช้จะใช้เบราว์เซอร์ใดก็สามารถเข้าถึง (แสดง) เพจได้ตามปกติ โครงสร้างเพจมีความชัดเจน และข้อมูลที่พวกเขาค้นหาสามารถเรียกดูได้อย่างง่ายดาย
สำหรับเครื่องมือค้นหา หน้าที่ดีที่พัฒนาโดยใช้มาตรฐานเว็บได้รับการปรับให้เหมาะสม SEO ง่ายต่อการเยี่ยมชมและง่ายต่อการเข้าใจว่าชื่อ (แท็ก H1~H6) อยู่ที่ไหนในหน้าเว็บของคุณ และชื่อย่อหน้าอยู่ที่ไหน แท็ก) โดยที่เนื้อหาที่จะเน้นในย่อหน้า (แท็กที่รัดกุม) ฯลฯ สามารถวิเคราะห์ได้ง่าย ดังที่เราทุกคนทราบกันดีว่าเว็บไซต์ที่มี SEO ที่ดีมีโอกาสที่จะได้รับการจัดทำดัชนีโดยเครื่องมือค้นหา ซึ่งหมายความว่าเว็บไซต์ของคุณจะถูกเยี่ยมชมโดยผู้ใช้ทั่วไปมากขึ้น ซึ่งจะนำผู้ใช้มายังไซต์ของคุณมากขึ้น
เราสามารถช่วยให้เราประหยัดเงินได้มากและปรับปรุงประสิทธิภาพการทำงาน ในขณะเดียวกัน ก็สามารถปรับปรุงความเร็วในการเรียกดูเพจ เป็นมิตรกับผู้ใช้ และยังสามารถนำผู้ใช้มาให้คุณมากขึ้นโดยไม่ต้องเสียเงินไปกับการประชาสัมพันธ์ คุณคิดว่าคุณจะใช้มันหรือไม่? ฮ่าฮ่า นี่คือเหตุผลที่ W3C ของเราแนะนำให้ใช้มาตรฐานเว็บสำหรับเว็บไซต์แบบเปิด เทคโนโลยีนี้ยังได้รับการยอมรับจากผู้ใช้ของเรา ดังนั้นตอนนี้คุณต้องเรียนรู้มาตรฐานเว็บ -
ฮ่าๆ ฉันทบทวนหลักสูตรพื้นฐานเสร็จแล้ว และตอนนี้ฉันกำลังเริ่มพูดถึงทักษะ XHTML และ CSS อย่างเป็นทางการ
เค้าโครงที่สมเหตุสมผล
เพื่อนบางคนจะเริ่มถามว่าทำไมเราถึงเริ่มพูดถึงเลย์เอาต์ที่สมเหตุสมผลตั้งแต่ต้น ฮ่าๆ เราได้พูดถึงประเด็นความรู้บางส่วนไปแล้ว - "โครงสร้างที่ชัดเจน การเพิ่มประสิทธิภาพ SEO ขนาดหน้าเล็ก และโค้ด XHTML โดยพื้นฐานแล้วมีข้อกำหนดของผู้ใช้ทั้งหมด ดูที่ ข้อมูล” สิ่งเหล่านี้เป็นผลมาจากรูปแบบที่สมเหตุสมผลของเรา และส่วนตัวผมรู้สึกว่าทุกสิ่งที่เราผลิตโดยใช้มาตรฐาน WEB เริ่มต้นจากจุดความรู้นี้ ดังนั้นผมจะพูดถึงหัวข้อนี้ก่อน
แล้วทุกคนก็จะเริ่มถามว่าเพจแบบไหนที่ถือว่ามีเลย์เอาต์ที่เหมาะสม? นี่เป็นคำถามที่ดี และเป็นหนึ่งในคำถามที่พบบ่อยที่สุดเมื่อเราเริ่มเรียนรู้การใช้มาตรฐานเว็บ ฉันมักจะประสบปัญหากับคำถามนี้ในที่นี้ .
ก่อนที่เราจะเริ่มพูดถึงองค์ประกอบต่างๆ ที่หน้าเว็บที่มีการจัดวางอย่างถูกต้องควรบรรลุผล เราจะใช้ตัวอย่างเพื่ออธิบายได้ง่ายขึ้น มาดูภาพนี้กันก่อน:
http://www.yaohaixiao.com/samples/myblog/index.htm
ใช่ นี่คือหน้ารายละเอียดบทความ ไม่มีเค้าโครงคอลัมน์ซ้ายและขวา แต่สิ่งที่ฉันต้องการเน้นที่นี่คือเค้าโครงที่สมเหตุสมผล ฉันจะแนะนำองค์ประกอบแบบลอยโดยละเอียดในบทความต่อๆ ไป เอาล่ะ กลับเข้าเรื่องเมื่อกี้ ใครๆ ก็เห็นหน้านี้แล้ว