นักออกแบบส่วนใหญ่ของเรายังคงใช้เค้าโครงตาราง การนำเสนอ และโครงสร้างแบบเดิมผสมผสานกันเพื่อสร้างเว็บไซต์ การเรียนรู้วิธีใช้ XHTML+CSS ต้องใช้กระบวนการ และการทำให้เว็บไซต์ที่มีอยู่เป็นไปตามมาตรฐานเว็บไซต์ไม่สามารถทำได้ในขั้นตอนเดียว แนวทางที่ดีที่สุดคือดำเนินการทีละขั้นตอนและทีละขั้นตอนเพื่อให้บรรลุเป้าหมายในการปฏิบัติตามมาตรฐานเว็บไซต์โดยสมบูรณ์ หากคุณเป็นมือใหม่หรือไม่คุ้นเคยกับโค้ดมากนัก คุณยังสามารถใช้เครื่องมือแก้ไขที่ได้มาตรฐาน เช่น Dreamweaver MX 2004 ซึ่งปัจจุบันเป็นเครื่องมือที่สมบูรณ์แบบที่สุดที่รองรับมาตรฐาน CSS
1. การปรับปรุงเบื้องต้น
เพิ่ม DOCTYPE ที่ถูกต้องลงในเพจ
นักออกแบบและนักพัฒนาหลายคนไม่ทราบว่า DOCTYPE คืออะไรและใช้ทำอะไร DOCTYPE เป็นตัวย่อของประเภทเอกสาร ส่วนใหญ่ใช้เพื่อระบุเวอร์ชันของ XHTML หรือ HTML ที่คุณใช้ เบราว์เซอร์ตีความโค้ดของหน้าตาม DTD (คำจำกัดความประเภทเอกสาร) ที่กำหนดโดย DOCTYPE ของคุณ ดังนั้น หากคุณตั้งค่า DOCTYPE ผิดโดยไม่ได้ตั้งใจ ผลลัพธ์ที่ได้จะทำให้คุณประหลาดใจ XHTML1.0 มีตัวเลือก DOCTYPE สามตัวเลือก:
(1) หัวต่อหัวเลี้ยว
<!DOCTYPE html สาธารณะ -//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) เข้มงวด
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 เข้มงวด//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3)ประเภทเฟรม (เฟรมเซ็ต)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 เฟรมเซ็ต//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
สำหรับการปรับปรุงเบื้องต้น เราจำเป็นต้องใช้เพียงคำชี้แจงการเปลี่ยนผ่านเท่านั้น ยังคงสามารถเข้ากันได้กับเค้าโครงตาราง โลโก้ประสิทธิภาพการทำงาน ฯลฯ เพื่อที่คุณจะไม่รู้สึกว่าการเปลี่ยนแปลงใหญ่เกินไปและยากต่อการควบคุม
เคล็ดลับ: หากคุณขี้เกียจเกินไปที่จะป้อนโค้ดเฉพาะกาลข้างต้น คุณสามารถไปที่หน้าแรกของเว็บไซต์ http://www.macromedia.com/ จากนั้นดูซอร์สโค้ด จากนั้นคัดลอกและวางโค้ดเดียวกันในบริเวณส่วนหัว .
ตั้งค่าเนมสเปซ (เนมสเปซ)
เพิ่มรหัสต่อไปนี้โดยตรงหลังการประกาศ DOCTYPE:
<html XMLns=http://www.w3.org/1999/xhtml >
เนมสเปซคือ DTD แบบละเอียดที่รวบรวมประเภทองค์ประกอบและชื่อแอตทริบิวต์ การประกาศเนมสเปซทำให้คุณสามารถระบุเนมสเปซของคุณผ่านตัวชี้ที่อยู่ออนไลน์ เพียงกรอกรหัสตามปกติ
ประกาศภาษาการเขียนโค้ดของคุณ
เพื่อให้เบราว์เซอร์ตีความได้อย่างถูกต้องและผ่านการตรวจสอบมาร์กอัป เอกสาร XHTML ทั้งหมดจะต้องประกาศภาษาการเข้ารหัสที่พวกเขาใช้ รหัสมีดังนี้:
<meta http-equiv=เนื้อหาประเภทเนื้อหา=ข้อความ/html; charset=GB2312 />
ภาษาการเขียนโค้ดที่ประกาศที่นี่คือภาษาจีนตัวย่อ GB2312 หากคุณต้องการสร้างเนื้อหาภาษาจีนตัวเต็ม คุณสามารถกำหนดเป็น BIG5
เขียนป้ายกำกับทั้งหมดด้วยตัวอักษรพิมพ์เล็ก
XML คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ดังนั้น XHTML จึงต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ด้วย ชื่อองค์ประกอบและแอตทริบิวต์ XHTML ทั้งหมดจะต้องเป็นตัวพิมพ์เล็ก มิฉะนั้นเอกสารของคุณจะถือว่าไม่ถูกต้องโดยการตรวจสอบ W3C ตัวอย่างเช่นรหัสต่อไปนี้ไม่ถูกต้อง:
<TITLE>ประวัติบริษัท</TITLE>
วิธีเขียนที่ถูกต้องคือ:
<title>ประวัติบริษัท</title> ในทำนองเดียวกัน เปลี่ยน <P> เป็น <p>, <B> เป็น <b> ฯลฯ ขั้นตอนการแปลงนี้เป็นเรื่องง่าย
เพิ่มแอตทริบิวต์ alt ให้กับรูปภาพ
เพิ่มแอตทริบิวต์ alt ให้กับรูปภาพทั้งหมด แอตทริบิวต์ alt ระบุว่าข้อความแทนที่จะแสดงขึ้นเมื่อไม่สามารถแสดงรูปภาพได้ ซึ่งเป็นสิ่งที่แจกจ่ายได้สำหรับผู้ใช้ทั่วไป แต่เป็นสิ่งสำคัญสำหรับเบราว์เซอร์แบบข้อความเท่านั้นและผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอ เมื่อมีการเพิ่มแอตทริบิวต์ alt เท่านั้น รหัสจะผ่านการตรวจสอบความถูกต้องของ W3C โปรดทราบว่าเราจำเป็นต้องเพิ่มแอตทริบิวต์ alt ที่มีความหมาย การเขียนเช่นนี้ไม่มีความหมาย
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
วิธีเขียนที่ถูกต้อง:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=โลโก้บริษัท UNC คลิกเพื่อกลับสู่หน้าแรก>
อ้างอิงค่าแอตทริบิวต์ทั้งหมด
ใน HTML คุณไม่จำเป็นต้องอ้างค่าแอตทริบิวต์ แต่ใน XHTML จะต้องอ้างอิงค่าเหล่านั้น
ตัวอย่าง: ความสูง=100 ไม่ใช่ความสูง=100
ปิดแท็บทั้งหมด
ใน XHTML ทุกแท็กที่เปิดอยู่จะต้องปิด แบบนี้:
<p>ทุกแท็บที่เปิดอยู่จะต้องปิด </p> <b>HTML ยอมรับแท็กที่ไม่ปิดได้ แต่ XHTML ไม่สามารถทำได้ </ข>
กฎนี้สามารถหลีกเลี่ยงความสับสนและปัญหา HTML ได้ ตัวอย่างเช่น หากคุณไม่ปิดแท็กรูปภาพ คุณอาจประสบปัญหาในการแสดง CSS ในบางเบราว์เซอร์ ใช้วิธีนี้เพื่อให้แน่ใจว่าเพจปรากฏขึ้นตามที่คุณออกแบบ ควรสังเกตว่าต้องปิดแท็กเปล่าด้วย ใช้เครื่องหมายทับ / ที่ส่วนท้ายของแท็กเพื่อปิดตัวเอง ตัวอย่างเช่น:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
หลังจากได้รับการประมวลผลตามกฎเจ็ดข้อข้างต้น โดยพื้นฐานแล้วหน้าเว็บจะตรงตามข้อกำหนดของ XHTML1.0 แต่เรายังต้องตรวจสอบว่าเป็นไปตามมาตรฐานจริงหรือไม่ เราสามารถใช้ W3C เพื่อให้บริการตรวจสอบความถูกต้องฟรี (http://validator.w3.org/) แก้ไขข้อผิดพลาดทีละรายการหลังจากค้นพบแล้ว ในรายการทรัพยากรต่อไปนี้ เรายังให้บริการตรวจสอบอื่นๆ และ URL ที่ให้คำแนะนำในการตรวจสอบ ซึ่งสามารถใช้เป็นส่วนเสริมในการตรวจสอบ W3C ได้ ในที่สุดเมื่อคุณผ่านการตรวจสอบความถูกต้องของ XHTML ขอแสดงความยินดี คุณได้ก้าวไปอีกขั้นสู่มาตรฐานเว็บไซต์ ไม่ยากอย่างที่คิด!
2. การปรับปรุงระดับกลาง
การปรับปรุงครั้งต่อไปของเราส่วนใหญ่อยู่ที่การแยกโครงสร้างและประสิทธิภาพ ขั้นตอนนี้ไม่ใช่เรื่องง่ายที่จะบรรลุผลเหมือนขั้นตอนแรก เราต้องการการเปลี่ยนแปลงแนวคิด เช่นเดียวกับการเรียนรู้และการประยุกต์ใช้เทคโนโลยี CSS2 แต่การเรียนรู้สิ่งใหม่ต้องใช้เวลาใช่ไหม? เคล็ดลับคือการเรียนรู้ด้วยการลงมือทำ หากคุณใช้เค้าโครงตารางมาโดยตลอดและไม่เคยใช้ CSS เลย ไม่จำเป็นต้องรีบเร่งที่จะบอกลาเค้าโครงตาราง คุณสามารถแทนที่แท็กแบบอักษรด้วยสไตล์ชีตได้ เมื่อคุณเรียนรู้มากขึ้น คุณสามารถทำอะไรได้มากขึ้น เอาล่ะ เรามาดูกันว่าเราต้องทำอะไรกันบ้าง:
กำหนดลักษณะที่ปรากฏขององค์ประกอบด้วย CSS
เราได้พัฒนานิสัยในการเขียนโลโก้ เมื่อเราต้องการให้แบบอักษรใหญ่ขึ้น เราใช้ <h1> และเมื่อเราต้องการเพิ่มสัญลักษณ์จุดข้างหน้า เราก็ใช้ <li> เรามักจะคิดว่า <h1> มีขนาดใหญ่ <li> เป็นจุด และ <b> เป็น "ข้อความตัวหนา" ในความเป็นจริง <h1> สามารถเป็นอะไรก็ได้ที่คุณต้องการ เมื่อใช้ CSS <h1> อาจกลายเป็นแบบอักษรขนาดเล็ก <p> ข้อความอาจมีขนาดใหญ่และหนา และ <li> สามารถกลายเป็นรูปภาพ และอื่นๆ เราไม่สามารถบังคับองค์ประกอบโครงสร้างให้บรรลุการนำเสนอได้ เราควรใช้ CSS เพื่อกำหนดลักษณะที่ปรากฏขององค์ประกอบเหล่านั้น ตัวอย่างเช่น เราสามารถทำให้ส่วนหัวระดับ 6 เริ่มต้นดั้งเดิมดูมีขนาดเท่ากันได้:
h1, h2, h3, h4, h5, h6{ ตระกูลแบบอักษร: 宋体, ขนาดตัวอักษร: 12px;
แทนที่ขยะที่ไม่มีความหมายด้วยองค์ประกอบที่มีโครงสร้าง
หลายๆ คนอาจไม่เคยรู้ว่าองค์ประกอบ HTML และ XHTML ได้รับการออกแบบมาเพื่อแสดงโครงสร้าง พวกเราหลายคนเริ่มคุ้นเคยกับการใช้องค์ประกอบเพื่อควบคุมการนำเสนอ แทนที่จะเป็นโครงสร้าง ตัวอย่างเช่น รายการอาจถูกทำเครื่องหมายดังนี้:
ประโยคที่ 1<br /> ประโยคที่ 2<br /> ประโยคที่ 3<br />
จะดีกว่าถ้าเราใช้รายการที่ไม่เรียงลำดับแทน:
<ul> <li>ประโยคที่ 1</li> <li>ประโยคที่ 2</li> <li>ประโยคที่ 3</li> </ul>
คุณอาจพูดว่า "แต่ <li> แสดงจุด และฉันไม่ต้องการใช้จุด" ในความเป็นจริง CSS ไม่ได้ระบุว่าองค์ประกอบมีลักษณะอย่างไร คุณสามารถปิดจุดได้โดยใช้ CSS
เพิ่มรหัสลงในแต่ละตารางและแบบฟอร์ม
จัดทำตารางหรือสร้างมาร์กอัปที่มีโครงสร้างเฉพาะตัว เช่น
<รหัสตาราง=เมนู>
ขั้นต่อไป เมื่อเขียนสไตล์ชีต คุณสามารถสร้างตัวเลือก "เมนู" และเชื่อมโยงกับกฎ CSS ที่จะบอกเซลล์ตาราง ป้ายกำกับข้อความ และองค์ประกอบอื่นๆ ทั้งหมดถึงวิธีการแสดง ด้วยวิธีนี้ ไม่จำเป็นต้องแนบแอตทริบิวต์เลเยอร์การนำเสนอที่ซ้ำซ้อนและใช้แบนด์วิธ เช่น ความสูง ความกว้าง การจัดตำแหน่ง และสีพื้นหลัง ให้กับแต่ละแท็ก <td> เพียงแนบแท็ก (แท็ก ID ที่ติดแท็ก "เมนู") คุณสามารถดำเนินการนำเสนอเฉพาะกิจเพื่อให้ได้มาร์กอัปโค้ดที่สะอาดตาและกะทัดรัดภายในสไตล์ชีตที่แยกต่างหาก
สำหรับการปรับปรุงขั้นกลาง เราจะแสดงรายการสามประเด็นหลักที่นี่ก่อน แต่มีเนื้อหาและประเด็นความรู้จำนวนมาก ซึ่งเราต้องเรียนรู้และฝึกฝนทีละขั้นตอนจนกว่าเราจะบรรลุเค้าโครงโดยใช้ CSS โดยสมบูรณ์โดยไม่ต้องใช้ตารางใดๆ