คำนำของนักแปล: บทความต้นฉบับชุดนี้ประกอบด้วยบทความทั้งหมด 8 บทความ เริ่มต้นด้วยการทำให้ Web Standards เป็นที่นิยมและอธิบายวิธีใช้ Dreamweaver 8 เพื่อสร้างเว็บที่เป็นไปตามมาตรฐาน เนื่องจากบทความของผู้เขียนต้นฉบับเป็นการทบทวนเรื่อง "Build Your เป็นเจ้าของเว็บไซต์ที่ได้มาตรฐานโดยใช้ Dreamweaver 8" (บทความนี้เป็นบทความที่ตัดตอนมาแบบเสียเงิน) จึงได้ลบเนื้อหาออกอย่างเหมาะสม ลำดับนั้นสอดคล้องกับบทความต้นฉบับแต่จะมีการปรับความยาว จึงขอแจ้งให้ทราบ ระดับการแปลมีจำกัด โปรดเข้าใจ
หากคุณกำลังอ่านบทความนี้ แสดงว่าคุณน่าจะสนใจมาตรฐานของเว็บอยู่แล้ว และสนใจอย่างยิ่งเกี่ยวกับการประยุกต์ใช้มาตรฐานในไซต์ที่สร้างด้วย DW (ย่อมาจาก Dreamweaver)
บางทีคุณอาจมีความเข้าใจเกี่ยวกับ WS อยู่แล้ว (ย่อมาจาก Web Standards) แต่คุณไม่รู้วิธีใช้ DW เพื่อเขียนโค้ดที่เข้ากันได้ หรือคุณเป็นผู้ใช้ DW และต้องการปฏิบัติตาม WS, ใช้ CSS อย่างกว้างขวางยิ่งขึ้น และสร้างเอกสารที่เป็นมิตรต่อผู้ใช้มากขึ้น ไม่ว่าคุณจะเป็นคนประเภทไหน บทความนี้จะให้คำตอบที่คุณต้องการ: บอกวิธีใช้ DW เพื่อจัดการ WS
คำจำกัดความของมาตรฐานเว็บ
สำหรับ WS ที่เรากังวลตลอดบทความนี้ ให้เราใช้เวลาสักครู่เพื่อชี้แจงสิ่งที่เรากำลังพูดถึง:
WS เป็นข้อกำหนดที่แนะนำภาษาการพัฒนาเว็บและกำหนดโดย W3C ข้อกำหนดเหล่านี้ประกอบด้วยหลายภาษา เช่น HTML, XHTML และ CSS รวมถึงภาษาอื่นๆ ที่เกี่ยวข้อง เช่น MathML ซึ่งใช้เพื่อแสดงสมการทางคณิตศาสตร์ เมื่อคุณมีความต้องการพิเศษดังกล่าว คุณอาจสามารถใช้งานได้ . W3C ยังเผยแพร่แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) ซึ่งส่งเสริมการเข้าถึงหน้าเว็บ (ผ่าน WAI)
เคล็ดลับ: รับคำแนะนำเหล่านี้โดยตรง
คุณสามารถอ่านหลักเกณฑ์เหล่านี้ได้บนเว็บไซต์ของ W3C แม้ว่าบางครั้ง
อาจทำได้
ยากก็ตาม
อ่าน:
HTML
4.01
ไม่จำเป็นต้องอ่านเอกสาร W3C มากเกินไปใครต้องการ WS
คุณอาจมีความคิดที่คลุมเครือว่า WS เป็นสิ่งที่ดี แต่ไซต์จำนวนมาก - รวมถึงไซต์ที่มีชื่อเสียงหลายแห่ง - ไม่ปฏิบัติตาม WS และดูเหมือนว่าไซต์เหล่านั้นจะได้รับการจัดการอย่างดี เหตุใดเราจึงควรมุ่งมั่นที่จะปฏิบัติตาม WS มีประโยชน์จริง ๆ หรือไม่ ใครต้องการ WS ใครที่ต้องใส่ใจกับข้อกำหนดและคำแนะนำของ W3C
?
นักพัฒนาและนักออกแบบ
เว็บไซต์ : นักพัฒนาและนักออกแบบการสร้างเว็บไซต์ มันคุ้มค่าไหมที่เราจะใช้เวลาเรียนรู้วิธีการพัฒนาด้วย WS?มาร์กอัปที่สะอาดทำให้การแก้ไขข้อบกพร่องเร็วขึ้น
หากคุณตรวจสอบหน้าเว็บของคุณด้วย W3C อย่างน้อยคุณจะรู้ว่ามาร์กอัปที่ผิดปกติไม่ใช่สาเหตุของข้อผิดพลาดที่คุณพบ บางครั้ง กระบวนการตรวจสอบหน้าเว็บและแก้ไขข้อผิดพลาดที่พบสามารถแก้ไขปัญหาในการแสดงผลที่เกิดจากองค์ประกอบที่ต่อเนื่องกันหรือแท็กที่สะกดผิดได้
แม้ว่าการตรวจสอบเอกสารของคุณจะไม่สามารถแก้ไขปัญหาได้ แต่อย่างน้อยคุณจะรู้ว่าปัญหานั้นมีอยู่ในเอกสาร Canonical ตอนนี้คุณรู้แล้วว่าปัญหานี้ไม่ใช่จุดบกพร่อง คุณสามารถเริ่มมุ่งเน้นไปที่ปัญหาอื่นๆ ได้ เช่น ความแตกต่างในการจัดการ CSS ในเบราว์เซอร์ต่างๆ
การปฏิบัติตามข้อกำหนดการช่วยสำหรับการเข้าถึงนั้นเป็นเรื่องง่าย
หากคุณเขียนมาร์กอัป XHTML ตามรูปแบบบัญญัติ คุณจะมั่นใจได้ว่าเอกสารนั้นถูกต้องตามความหมาย และคุณสามารถแยกเนื้อหาของเอกสารออกจากงานนำเสนอได้ คุณสามารถทำงานหลายอย่างได้ กล่าวถึงหลายๆ ปัญหาการเข้าถึงที่ระบุไว้ใน WCAG1.0 สิ่งสำคัญคือต้องตระหนักว่าการเข้าถึงไม่ได้มีไว้สำหรับผู้พิการเท่านั้น ไซต์ที่เป็นมิตรสามารถเข้าถึงได้โดยอุปกรณ์ต่างๆ มากมาย เช่น โทรศัพท์มือถือและ PDA ซึ่งไม่มีพลังในการประมวลผลเพื่อจัดการกับมาร์กอัปที่กระจัดกระจายและไม่เป็นมาตรฐาน
ความเข้ากันได้ของการส่งต่อ
หากคุณพิจารณาเฉพาะประสิทธิภาพของเพจที่พัฒนาขึ้นใหม่ในเบราว์เซอร์ปัจจุบัน คุณจะมั่นใจได้อย่างไรว่าประสิทธิภาพของเพจนั้นในเบราว์เซอร์ใหม่ในอนาคต เบราว์เซอร์ใหม่อาจเปลี่ยนเพจของคุณ จอแสดงผลแย่มาก และคุณกำลังประสบปัญหา เพื่อค้นหาและแก้ไขปัญหาที่น่ารำคาญ
การปฏิบัติตาม WS จะไม่ช่วยขจัดปัญหานี้ได้อย่างสมบูรณ์ อย่างไรก็ตาม ความเข้ากันได้ของมาตรฐานช่วยลดความเสี่ยงที่การออกแบบของคุณจะล้มเหลวได้อย่างมาก และบริษัทซอฟต์แวร์เบราว์เซอร์ในปัจจุบันก็เริ่มสนับสนุนมาตรฐานเช่นกัน พวกเขาอาจตีความข้อมูลจำเพาะบางส่วนผิดโดยไม่ได้ตั้งใจ แต่ไม่สามารถปฏิเสธได้ทั้งหมด หากสิ่งที่เลวร้ายที่สุดเกิดขึ้นและเบราว์เซอร์ใหม่สร้างผลกระทบที่แปลกประหลาดต่อไซต์มาตรฐานของคุณ การแก้ไขจะง่ายกว่าไซต์ที่เข้ากันไม่ได้มาก หากคุณพบปัญหา ก็จะส่งผลต่อไซต์อื่นๆ ที่ได้มาตรฐานด้วย ภูมิปัญญาโดยรวมของชุมชนเว็บจะชี้ให้เห็นสิ่งนี้และเขียนบทความเพื่อกล่าวถึงเรื่องนี้ ดังนั้น ทุกคนจึงพูดคุยร่วมกันว่าการแก้ไข BUG นี้ในเอกสารที่เข้ากันได้ง่ายกว่าในเอกสารที่เข้ากันไม่ได้
การรีแฟคเตอร์ที่ง่ายขึ้น
คุณเคยต้องตัดข้อความออกจากไซต์และรีแฟคเตอร์ใหม่หรือไม่ และเริ่มต้นใหม่อีกครั้ง คุณเคยเห็นป้ายกำกับเหล่านั้นที่รกไปด้วยป้ายกำกับแบบอักษรและเซลล์ตารางเล็กๆ (ที่ทำให้เราต้องเริ่มต้นใหม่) สิ่งที่ฉันรู้ก็คือฉันมี และมันเป็นกระบวนการที่ยาวนาน ใช้เวลาและเงินจำนวนมาก ทั้งหมดถูกเผาโดย การปรับโครงสร้างของไซต์นี้
การแยกเนื้อหาและการนำเสนอเอกสารช่วยให้คุณปฏิบัติตามมาตรฐานได้อย่างสวยงาม หมายความว่าครั้งต่อไปที่มีคนต้องการปรับโครงสร้างไซต์ใหม่ พวกเขาไม่จำเป็นต้องคัดลอกเอกสารบนเว็บออกมา ข้อความทั้งหมดในไซต์จะถูกทำเครื่องหมายด้วยความหมาย (X)HTML และข้อมูลการนำเสนอทั้งหมด - ซึ่งเป็นสิ่งที่ผู้ดูแลเว็บต้องการเปลี่ยนแปลง - จะถูกจัดเก็บไว้ในไฟล์ CSS ที่เปลี่ยนได้ง่าย
ลูกค้าบางรายไม่รอให้มีการปรับโครงสร้างใหม่ก่อนจึงจะเริ่มขอให้คุณทำการเปลี่ยนแปลง พวกเขาจะรอจนกว่าพวกเขาจะไปเยี่ยมชมหลุมฟอสซิลแมมมอธ แล้วจึงขอให้คุณพูดว่า "แค่ย้ายคอลัมน์ซ้ายไปทางขวา" ." สำหรับ a สำหรับไซต์ที่เข้ากันได้มาตรฐาน หน้าทั้งหมดจะถูกควบคุมโดย CSS คุณสามารถย้ายแท็กบนหน้าได้อย่างง่ายดายโดยไม่ต้องคำนึงถึงลูกเล่นในหลาย ๆ หน้าที่มีตารางที่ซับซ้อนเป็นโครงสร้าง ทำให้การเปลี่ยนเค้าโครงหน้าง่ายขึ้น
การแยกโครงสร้างออกจากการนำเสนอยังช่วยให้เพิ่มองค์ประกอบใหม่ๆ ได้ง่ายขึ้น เช่น เว็บไซต์เวอร์ชันภาพขนาดเล็กที่มีคอนทราสต์สูง ซึ่งอาจดึงดูดผู้ชมบางรายได้มากขึ้น เหตุใดจึงต้องสร้างเพจเวอร์ชันข้อความเท่านั้นแยกต่างหากในเมื่อคุณสามารถเปลี่ยนสไตล์ชีทได้อย่างง่ายดาย
บริษัทซอฟต์แวร์เบราว์เซอร์
บริษัทซอฟต์แวร์เบราว์เซอร์เริ่มให้ความสนใจกับ WS ในอดีต บริษัทซอฟต์แวร์เบราว์เซอร์ได้เพิ่มแท็กและคุณลักษณะที่เป็นกรรมสิทธิ์ของตนเองให้กับภาษาพื้นฐาน แต่ตอนนี้เบราว์เซอร์ทั้งหมดเริ่มปฏิบัติตามมาตรฐานอย่างที่ไม่เคยเป็นมาก่อน และเบราว์เซอร์ล่าสุดบางตัวก็พยายามแสดงผลตาม (X)HTML และ CSS ตามที่กำหนดไว้ในข้อกำหนด
ในอนาคตอันใกล้นี้ เบราว์เซอร์จะสามารถแสดงมาร์กอัปและโค้ดที่ไม่ได้มาตรฐานส่วนใหญ่ได้ เพราะหากไม่แสดง ไซต์ที่ไม่ได้มาตรฐานจำนวนหลายพันแห่งจะไม่แสดงอย่างถูกต้อง - และจากนั้นสาธารณชนก็มีแนวโน้มที่จะเริ่มตำหนิเบราว์เซอร์ ไม่ใช่นักออกแบบเว็บไซต์ อย่างไรก็ตาม อุปกรณ์อื่นๆ (อุปกรณ์ที่ไม่มีพลังการประมวลผลแบบเดสก์ท็อป) จะต้องพึ่งพาความเข้ากันได้ที่เป็นมาตรฐานของโค้ดที่พวกเขาพบมากขึ้น
ผู้จำหน่ายซอฟต์แวร์เครื่องมือการเขียน
ผู้จำหน่ายซอฟต์แวร์เครื่องมือการเขียน เช่น Macromedia ซึ่งสร้าง Dreamweaver ก็เริ่มปฏิบัติตาม WS เช่นเดียวกับนักออกแบบเว็บไซต์ ตัวอย่างเช่น เนื่องจากลูกค้าของพวกเขาต้องการให้เครื่องมือเขียนเหล่านี้แสดงมาร์กอัปตามรูปแบบบัญญัติมากขึ้นเรื่อยๆ เดิมที สภาพแวดล้อมการพัฒนาภาพเหล่านี้ไม่มีชื่อเสียงที่ดี เนื่องจากสร้างความสับสนและมาร์กอัปที่ไม่ได้มาตรฐาน อย่างไรก็ตาม สภาพแวดล้อมการพัฒนาภาพหลักล่าสุดได้เรียกใช้องค์ประกอบมาตรฐานของความเข้ากันได้และการเข้าถึง ซึ่งได้กลายเป็นจุดขายหลักด้วย ผู้จำหน่ายซอฟต์แวร์จะต้องรับฟังและตอบสนองต่อความต้องการของตลาด
ผู้ใช้เว็บ
ผู้ใช้ไซต์ที่เราออกแบบยังได้รับประโยชน์จากการนำ WS ของเรามาใช้ แม้ว่าพวกเขาจะไม่รู้ตัวก็ตาม บางทีพวกเขาอาจใช้ไซต์ที่พัฒนาขึ้นมาสำหรับเบราว์เซอร์ยอดนิยมในปัจจุบันโดยไม่รู้ตัว หากผู้ใช้เหล่านี้เปลี่ยนไปใช้เบราว์เซอร์อื่น พวกเขาอาจพบว่าประสบการณ์ออนไลน์ไม่สนุกอีกต่อไป เนื่องจากเบราว์เซอร์ใหม่จะไม่ยอมรับแท็กที่เป็นกรรมสิทธิ์เหล่านั้น ไซต์ที่ได้มาตรฐานและเข้ากันได้จะทำงานได้ดีในเบราว์เซอร์ต่างๆ ไม่ว่าจะเป็นเบราว์เซอร์ที่มีอยู่หรือในอนาคต
นอกจากนี้ เว็บไซต์ที่ปฏิบัติตามคำแนะนำในการเข้าถึงจะเข้าถึงได้ง่ายขึ้นสำหรับผู้ใช้ที่พบว่าการท่องเว็บไม่น่าพอใจ เว็บควรจัดให้มีเงื่อนไขการซื้อ การอ่าน และการค้นหาที่สะดวกยิ่งขึ้นสำหรับผู้มีความบกพร่องทางการมองเห็นหรือความพิการอื่นๆ ไม่ควรป้องกันไซต์เหล่านี้จากการเรียกดูไซต์เนื่องจากใช้แท็กที่เป็นกรรมสิทธิ์หรือเทคโนโลยีพิเศษอื่น ๆ (หมายถึงเบราว์เซอร์)
เราจะมั่นใจได้อย่างไรว่าการใช้ WS ถูกต้องเมื่อ
ใช้ WS
เราจะทำอย่างไรเพื่อให้เป็นไปตามมาตรฐานอันดับแรก เราควรปฏิบัติตามข้อกำหนด ซึ่งหมายความว่า เราควรใช้เฉพาะองค์ประกอบและคุณลักษณะที่กำหนดไว้ในข้อกำหนด และหลีกเลี่ยงการใช้คุณลักษณะเฉพาะของเบราว์เซอร์ เช่น แท็กปะรำของ IE และแท็กกะพริบของ Netscape นอกจากนี้ ห้ามใช้องค์ประกอบที่ปรากฏในข้อกำหนดก่อนหน้านี้ (เช่น HTML 3.2) หรือที่ถูกลบออกจากข้อกำหนดในภายหลัง
สร้างเอกสาร XHTML ตามรูปแบบบัญญัติ
ในบทความนี้ เราจะใช้ XHTML ดังนั้นเราจะปฏิบัติตามคำแนะนำ XHTML 1.0 ของ W3C [ตาม W3C คำแนะนำหมายถึงข้อกำหนด] XHTML นั้นเป็น HTML เวอร์ชันล่าสุด และได้รับการออกแบบมาเพื่อแทนที่ HTML ซึ่งเป็นภาษามาร์กอัปของเว็บ แม้ว่าจะเป็นรูปแบบ HTML ของ XML แต่ XHTML ก็เกือบจะเหมือนกับ HTML โดยมีความแตกต่างเล็กน้อยที่เราจะกล่าวถึงในภายหลังใน XHTML และความหมาย
คุณสามารถสร้างเอกสาร XHTML ผ่านกล่องโต้ตอบ New Document ใน Dreamweaver (ไฟล์>ใหม่...) ตรวจสอบให้แน่ใจว่าได้เลือกหน้าฐานในรายการหมวดหมู่ จากนั้นเลือก HTML จากรายการหน้าฐาน ดังแสดงในรูปที่ 2.1 "การสร้างเอกสาร XHTML ใหม่ใน Dreamweaver" จากนั้นคุณสามารถเลือกประเภทเอกสารใดก็ได้จากรายการแบบเลื่อนลง
รูปที่ 2.1: การสร้างเอกสาร XHTML ใหม่ใน Dreamweaver
รูปที่ 2.2: การแสดงเอกสาร XHTML ใหม่ในมุมมองโค้ด
คลิก "สร้าง" เพื่อสร้างเอกสารใหม่ คลิกปุ่มโค้ดที่ด้านบนของหน้าต่างเอกสารแล้วไปที่ "มุมมองโค้ด" คุณจะเห็นได้อย่างชัดเจนว่าโค้ดใดรวมอยู่ในเอกสาร XHTML แบบธรรมดา ดังแสดงในรูปที่ 2.2 บรรทัดแรกของเอกสาร "แสดงเอกสาร XHTML ใหม่ในมุมมองโค้ด"
จะแสดงเนื้อหาต่อไปนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: / /www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
สิ่งนี้เรียกว่าการประกาศประเภทเอกสารหรือ DOCTYPE ตามชื่อที่แนะนำ DOCTYPE จะประกาศว่าเอกสารของคุณคืออะไร - ข้อกำหนด (X)HTML ใดที่คุณปฏิบัติตาม ในตัวอย่างนี้ เรากำลังติดตาม XHTML 1.0 Transitional ซึ่งเป็นการตั้งค่าเริ่มต้นสำหรับ DW 8 ส่วนการเปลี่ยนผ่านจะบอกข้อมูลเพิ่มเติมบางอย่างเกี่ยวกับเวอร์ชัน XHTML XHTML1.0 มี "รสชาติ" สามแบบ: Strict, Transitional และ Frameset DW จะใช้ประเภทการเปลี่ยนผ่านตามค่าเริ่มต้น และหากคุณต้องการแทรกเฟรมลงในเอกสาร ให้ใช้ประเภทนั้นคือ Frameset
XHTML Strict เป็นรูปแบบ XHTML ที่เข้มงวดที่สุด อย่างที่คุณอาจเดาได้ ประเภทเอกสารที่เข้มงวดมีลักษณะดังนี้:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
หากคุณใช้ Strict DOCTYPE คุณจะไม่สามารถใช้เอกสารดังกล่าวในองค์ประกอบใดๆ ของเอกสารได้ (แท็ก) หรือแอตทริบิวต์ที่ประกาศการเลิกใช้ไม่สามารถใช้ในเฟรม องค์ประกอบที่เลิกใช้แล้วที่ประกาศไว้จะถูกลบออกใน XHTML เวอร์ชันอนาคต องค์ประกอบเหล่านี้จำนวนมากใช้เพื่อควบคุมลักษณะที่ปรากฏของหน้า ซึ่งสามารถแทนที่ด้วย CSS ได้อย่างสมบูรณ์ ข้อแตกต่างที่ใหญ่ที่สุดระหว่าง Strict และ Transitional คือ เมื่อใช้ Strict DOCTYPE คุณลักษณะและองค์ประกอบที่คุณคิดว่าสามารถใช้เพื่อประสิทธิภาพได้จะถูกจำกัดอย่างมาก
หมายเหตุ: การใช้ Strict DOCTYPE ใน DW
DW ไม่ได้เข้มงวดในการปฏิบัติตามมาตรฐานมากนัก หากคุณใช้ Strict DOCTYPE โปรดให้ความสำคัญเป็นพิเศษกับการตรวจสอบเอกสารของคุณและแก้ไขแอตทริบิวต์ที่ผิดปกติ โดยพื้นฐานแล้ว คุณสามารถแทนที่ด้วย CSS ได้อย่างง่ายดาย
Frameset DOCTYPE รองรับการใช้เฟรม หากคุณแทรกเฟรมลงในเอกสาร DW จะใช้ประเภทนี้โดยอัตโนมัติ หน้าเฟรมควรเกี่ยวข้องกับหน้าอื่นอย่างน้อยสองหน้า และไม่จำกัดประเภทเอกสารของหน้าที่เกี่ยวข้อง รหัสของ Frameset DOCTYPE เป็นดังนี้:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4.01 ยังมี "รสชาติ" ของประเภทเอกสารทั้งสามนี้ - Transitional, Strict และ Frameset - ทำงานเหมือนกับ XHTML DOCTYPE ที่กล่าวถึงข้างต้นทุกประการ หากคุณใช้ประเภทใดประเภทหนึ่ง คุณต้องระบุสิ่งนี้ในเอกสาร HTML (ไม่ใช่ XHTML) เราจะพูดถึงความแตกต่างระหว่าง HTML และ XHTML ในเชิงลึกในภายหลังในส่วนเกี่ยวกับการสร้างเว็บไซต์
ต้นฉบับ: Dreamweaver 8 Does Standards ! โดย Rachel Andrew
เรียบเรียง: x5