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