โดยทั่วไปแล้ว สไตล์ชีตคือชุดของกฎการจัดรูปแบบที่ควบคุมลักษณะที่ปรากฏของเนื้อหาเว็บ CSS สามารถนำมาใช้ในหน้าเว็บของคุณได้สามวิธี:
อินไลน์: รูปแบบครั้งเดียวที่เขียนลงในโค้ด
ฝังตัว: สไตล์ชีตที่ควบคุมองค์ประกอบทั้งหมดบนเพจ
ภายนอก: สไตล์ชีตที่ควบคุมองค์ประกอบต่างๆ ในหลายเพจ
ที่จริงแล้ว ไซต์จำนวนมากใช้ทั้งสามวิธีนี้ร่วมกันตามความจำเป็น
สิ่งสำคัญที่ต้องพิจารณาเมื่อทำงานกับ CSS คือความจริงที่ว่าเบราว์เซอร์ที่แตกต่างกันและเบราว์เซอร์เดียวกันเวอร์ชันที่แตกต่างกันแยกวิเคราะห์ CSS ด้วยวิธีที่ต่างกัน นอกจากความแตกต่างในเว็บเบราว์เซอร์แล้ว คุณยังต้องตระหนักว่ายังมีเบราว์เซอร์อื่นๆ อีกมากมาย เช่น เบราว์เซอร์สำหรับการได้ยิน เบราว์เซอร์บนทีวี และอุปกรณ์พกพา เช่น Palm Pilot และ TTY (เครื่องพิมพ์ดีด เครื่องพิมพ์ดีดระยะไกล)
แนวทางปฏิบัติที่ดีที่สุดคืออะไร?
เทคโนโลยีส่วนใหญ่มีมาตรฐานที่ตกลงกันไว้เป็นของตัวเอง CSS ก็ไม่มีข้อยกเว้น แม้ว่า CSS ทั้งหมดที่มีอยู่บนเว็บจะไม่ได้รับมาตรฐาน แต่การใช้ CSS ตามมาตรฐานที่มีอยู่ก็มีประโยชน์ โดยทั่วไป นักพัฒนาซอฟต์แวร์ควรแยกเนื้อหาออกจากการรายงานให้มากที่สุด ข้อดีของการทำเช่นนี้คือ:
1. เพิ่มอายุการใช้งานของไซต์
สไตล์ชีทที่ไม่ได้มาตรฐานอาจจะสะดวกในขณะนั้น แต่เมื่อเบราว์เซอร์เวอร์ชันใหม่ๆ ออกมา ปัญหาความเข้ากันได้ก็มีแนวโน้มที่จะเกิดขึ้น ในเวลานั้น การแก้ไขเว็บไซต์ทีละหน้าจะเป็นงานที่กินเวลามากและจะทำให้การใช้ CSS ไร้ความหมายด้วย
2. ทำให้เว็บไซต์ของคุณสามารถเข้าถึงได้โดยผู้ใช้และเบราว์เซอร์ทั้งหมด
รัฐบาลท้องถิ่นบางแห่งได้ออกกฎหมายว่าเว็บไซต์ต้องสามารถเข้าถึงได้โดยผู้ทุพพลภาพ อุปกรณ์เรียกดูที่ออกแบบมาเพื่อการรับรู้ถึงความพิการ เช่น เครื่องช่วยฟัง มีข้อกำหนดเชิงบรรทัดฐาน CSS ที่เข้มงวดอย่างยิ่ง
3. ทำให้การอัปเดตและการบำรุงรักษาไซต์ง่ายขึ้น
หากใช้อย่างถูกต้อง CSS จะทำให้การปรับเปลี่ยนที่คุณทำในหน้าเดียวนำไปใช้กับทุกหน้าได้อย่างรวดเร็ว
ตัวเลือกแรกที่คุณต้องเลือกคือควรใช้สไตล์ชีตใด เมื่อพูดถึงแนวทางปฏิบัติที่ดีที่สุด ต่อไปนี้คือการวิเคราะห์สไตล์ชีตต่างๆ:
พูดง่ายๆ ก็คือ คุณควรพยายามหลีกเลี่ยงการใช้มัน ท่ามกลางข้อเสียอื่นๆ การใช้ CSS แบบอินไลน์หมายความว่าคุณไม่ได้ใช้ประโยชน์จากข้อได้เปรียบที่แท้จริงของ CSS ซึ่งก็คือคุณไม่ได้แยกเนื้อหาออกจากการจัดรูปแบบ DW ใช้ Inline CSS ในการวางตำแหน่งองค์ประกอบของหน้าเป็นหลัก (องค์ประกอบเหล่านี้เรียกว่า "เลเยอร์" ในส่วนต่อประสานผู้ใช้ของ DW) หรือใช้เอฟเฟกต์ DHTML บางอย่าง ซึ่งต้องใช้ Javascript สไตล์อินไลน์เพื่อเปลี่ยนคุณสมบัติของวัตถุ
CSS แบบฝัง: ยังน้อยกว่าอุดมคติเนื่องจากมีผลกับหน้าปัจจุบันเท่านั้น ในระหว่างกระบวนการอัปเดต หากเพจหายไป รูปแบบของไซต์จะไม่สอดคล้องกัน นอกจากนี้ เมื่อผู้ใช้เรียกดูไซต์ของคุณ จะต้องดาวน์โหลดข้อมูลสไตล์ชีตสำหรับแต่ละเพจ
CSS ภายนอก: นี่คือตัวเลือกแรกของคุณ CSS ภายนอกช่วยให้เพจทั้งหมดที่เชื่อมต่ออยู่รักษารูปลักษณ์และสไตล์ที่สอดคล้องกัน ร่าง เปลี่ยนแปลงเพียงครั้งเดียว และอัปเดตเพจที่เกี่ยวข้องทั้งหมดได้อย่างง่ายดาย ทำให้เพจของคุณเล็กลงและเรียกดูได้เร็วขึ้น แนวทางปฏิบัติที่ดีที่สุดอื่นๆ จะกล่าวถึงด้านล่างเมื่อวิเคราะห์คุณลักษณะ CSS ที่เฉพาะเจาะจง
สร้างสไตล์ชีท CSS ใน DW
เมื่อสร้างสไตล์ชีต CSS ใน DW (ข้อความ 》สไตล์ CSS 》สไตล์ชีตใหม่) ในกล่องโต้ตอบป๊อปอัป คุณมีสองตัวเลือก: ไฟล์สไตล์ชีตใหม่และสำหรับหน้าปัจจุบันเท่านั้น (เอกสารนี้เท่านั้น) เลือก "ไฟล์สไตล์ชีตใหม่" และคุณเริ่มกระบวนการสร้าง CSS ภายนอก ตัวเลือกนี้กำหนดให้คุณต้องตั้งชื่อสไตล์ชีตและเลือกตำแหน่งบันทึกก่อนขั้นตอนการสร้างจริง ส่วนอีกตัวเลือกหนึ่งคือ เอกสารนี้เท่านั้น จะเขียนโค้ดที่เกี่ยวข้องลงในเพจโดยตรง
คุณยังสามารถเลือกสไตล์ชีตที่มีอยู่เพื่อแก้ไขหรือเพิ่มคำจำกัดความใหม่ในกล่องโต้ตอบสไตล์ใหม่
ควรเชื่อมต่อกับ CSS ภายนอกหรือนำเข้าหรือไม่
หลังจากสร้างสไตล์ชีตภายนอกแล้ว คุณจะต้องแนบมันเข้ากับแต่ละหน้า (หรือเทมเพลต) ในการดำเนินการนี้ ให้คลิกปุ่ม "แนบสไตล์ชีต" บนแผง CSS กล่องโต้ตอบลิงก์สไตล์ชีตภายนอกจะปรากฏขึ้น ซึ่งคุณสามารถเรียกดูสไตล์ชีตเป้าหมายของคุณได้ หลังจากค้นหาชื่อแล้ว คุณสามารถเลือกลิงก์หรือนำเข้าได้ สไตล์ชีตภายนอกนี้
การเชื่อมต่อเป็นวิธีที่ใช้กันมากที่สุด เลือก "ลิงก์" เพื่อเชื่อมต่อสไตล์ชีตเข้ากับเพจ มันจะเพิ่มมาร์กอัปต่อไปนี้ให้กับหน้าของคุณ:
ตัวเลือกการเชื่อมต่อได้รับการสนับสนุนโดยเบราว์เซอร์ทั้งหมดที่รองรับ CSS หากคุณต้องการให้เบราว์เซอร์รุ่นเก่าบางรุ่น (เช่น Netscape 4.x) "เห็น" สไตล์ชีตนี้ คุณต้องใช้วิธีการต่อไปนี้
หากคุณเลือกตัวเลือก "นำเข้า" แท็กที่ใช้จะเป็น:
NetSscape4 จะเพิกเฉยต่อ CSS ที่นำเข้าโดยสิ้นเชิง และตีความหน้าเว็บตาม CSS ที่เชื่อมต่อ ด้วยวิธีนี้ เราสามารถใช้ฟีเจอร์ใหม่ใน CSS ได้โดยไม่ต้องกังวลกับปัญหาความเข้ากันได้ของเบราว์เซอร์
ตัวตรวจสอบคุณสมบัติ CSS
คุณสามารถสลับไปใช้โหมด CSS ในตัวตรวจสอบคุณสมบัติของ DW ได้อย่างง่ายดาย ตามค่าเริ่มต้น Property Inspector จะแสดงแท็กแบบอักษรในโหมด Raw HTML คลิก "A" เล็กๆ ข้างเมนู Fonts ที่ขยายลงมา แล้วคุณจะเห็นสไตล์ชีต CSS ที่มีอยู่ในปัจจุบัน แทนที่จะเป็นรายการแท็กแบบอักษร ในเวลาเดียวกัน คุณสามารถเปลี่ยนกลับไปใช้โหมด HTML ได้อย่างง่ายดาย
สไตล์ชีต CSS สำเร็จรูป
หนึ่งในคุณสมบัติ CSS ที่น่าตื่นเต้นใน DW ก็คือมันรวมสไตล์ชีต CSS สำเร็จรูปไว้ด้วย ผู้ใช้ CSS รายใหม่สามารถทดลองใช้ก่อนได้ เลือกไฟล์ > ใหม่ เลือกสไตล์ชีต CSS ในกล่องโต้ตอบเอกสารใหม่แบบป๊อปอัป และรายการ CSS ที่มีอยู่ทั้งหมดจะปรากฏในช่องทางด้านขวา หากต้องการปฏิบัติตามสิ่งที่เราเรียกว่าแนวทางปฏิบัติที่ดีที่สุด ให้เลือกรายการที่มีเครื่องหมายว่า "เข้าถึงได้"
บันทึกเอกสารในโฟลเดอร์ไซต์ จากนั้นผนวก CSS เข้ากับเอกสารของคุณโดยใช้วิธีที่อธิบายไว้ข้างต้น
สไตล์ชีตเวลาออกแบบ
คุณลักษณะของ DW นี้ช่วยให้คุณสามารถใช้สไตล์ชีทกับเพจเมื่อทำงานในมุมมองการออกแบบ ทำให้คุณเข้าใจลักษณะที่ปรากฏของไซต์ได้ง่ายขึ้น สไตล์ชีตเวลาออกแบบจะไม่ปรากฏภายในไซต์ คุณลักษณะนี้มีประโยชน์มากจากมุมมองของแนวทางปฏิบัติที่ดีที่สุดของเรา หากคุณใช้ทั้งวิธีการนำเข้าและการรวม (ตามที่อธิบายไว้ข้างต้น) การแนบสไตล์ชีตขณะออกแบบจะช่วยให้คุณสามารถพัฒนาไซต์โดยใช้วิธีใดวิธีหนึ่งได้ คุณสามารถเปลี่ยนเป็นสไตล์ชีตอื่นได้อย่างง่ายดายเมื่อคุณต้องการดูว่าหน้าจะมีลักษณะอย่างไรภายใต้สไตล์ชีตอื่น
สไตล์ชีทขณะออกแบบยังมีประโยชน์สำหรับนักพัฒนาที่ต้องการใช้ CSS บนฝั่งเซิร์ฟเวอร์ (เช่น ASP, PHP หรือ ColdFusion) หรือบนฝั่งไคลเอ็นต์ผ่าน Javascript สไตล์ชีตฝั่งเซิร์ฟเวอร์เป็นอีกวิธีหนึ่งในการจัดการกับการสนับสนุน CSS ที่ไม่ดีในเบราว์เซอร์ไคลเอนต์ แต่ใน DW เวอร์ชันก่อนหน้า วิธีนี้ไม่อนุญาตให้คุณดูผลกระทบที่แท้จริงของ CSS ในระหว่างขั้นตอนการออกแบบ สไตล์ชีตขณะออกแบบช่วยให้คุณดูเอฟเฟกต์ของสไตล์ชีตได้แบบเรียลไทม์ ดังนั้นคุณจึงสามารถทำงานกับอินเทอร์เฟซแบบภาพใน DW ได้ ข้อดีอีกประการหนึ่งคือเมื่อคุณอัปโหลดไฟล์ของไซต์ คุณไม่จำเป็นต้องไปทั่วทั้งไซต์เพื่อค้นหาสไตล์ชีตที่ซ้ำซ้อนอีกต่อไป
ตรวจสอบ
ไม่ว่าคุณจะสร้างสไตล์ชีตของคุณเองหรือแก้ไขสไตล์ชีตที่มีอยู่ การตรวจสอบให้แน่ใจว่าคุณไม่ได้ใช้แท็กที่ไม่เป็นมาตรฐานหรือโค้ดที่ไม่ถูกต้องในทางที่ผิด DW เองไม่มีเครื่องมือตรวจสอบ CSS คุณสามารถใช้บริการตรวจสอบความถูกต้องของเว็บไซต์ W3C ได้
ภายใน DW คุณสามารถตรวจสอบแท็ก HTML หรือ DHTML ได้ (ไฟล์ > ตรวจสอบเพจ > ตรวจสอบมาร์กอัป (สำหรับ HTML) หรือ ไฟล์ > ตรวจสอบเพจ > ตรวจสอบความถูกต้องเป็น XML สำหรับ XHTML) DW มีเครื่องมือเสริมมากมายเมื่อพัฒนาเว็บไซต์ที่ใช้ CSS ด้วยความช่วยเหลือของ MW MX ประกอบกับความเข้าใจที่ดีเกี่ยวกับ CSS คุณสามารถพัฒนาเว็บไซต์ที่จะยืนหยัดได้อย่างยั่งยืน