ใช้ DOM Inspector แก้ CSS

หน้าจอ DOM Inspector

รู้สึกว่าชอบ Firefox ที่มี tools ดีๆให้ใช้อย่าง DOM Inspector และ extension ที่เกี่ยวกับการสร้างหรือปรับแต่งโฮมเพจ. ถึงแม้จะไม่ใช่ web designer โดยสายงานแต่บางทีก็มีความจำเป็นที่ต้องแก้พวก CSS หรือ layout ต่างๆของโฮมเพจ. ตัวที่จะช่วยทุ่นแรงได้เยอะในการสำรวจโครงสร้างของเว็บไซด์หน้าที่ดูอยู่ก็คือ DOM Inspector ที่มากับ Firefox. ตอนแรกก็เข้าใจยากหน่อยว่ามันใช้อย่างไร. ในกรณีที่จะประยุกต์ใช้กับการ web design เบื้องต้นก็แค่เปิด URL เว็บไซด์ที่ต้องการสำรวจโครงสร้างนั้น แล้วกด Ctrl+Shift+i หรือเลือกจากเมนู Tools - DOM Inspector. แล้วจะได้หน้าจอใหม่แสดงโครงสร้างของเว็บ. พอคลิ้กไปส่วนต่างๆในแผนภาพต้นไม้ เช่นพวก DIV ต่างๆ, ตรงเบราวเซอร์จะตีกรอบสีแดงๆกระพิบให้ดูว่าส่วนที่เลือกนั้นอยู่ตรงไหน. นอกจากนี้ยังมีการแสดง id หรือ class ของโหนดนั้นๆด้วยเวลาแก้ CSS จะได้แก้ได้ถูกจุด. หรือตรงหน้าต่างทางขวาจะเลือก Object -CSS Style Rules แล้ว, กดเลือก Rule แล้วแก้ property ของแต่ละตัวใน CSS ได้เลย.

ตีกรอบแสดง DIV ด้วย web developer extension

อีกตัวที่ชอบคือ web developer extension. ต้องไปติดตั้ง extension ตัวนี้ก่อนแล้วก็จะได้ tool bar ทำอะไรได้หลายอย่างเกี่ยวกับพวก web design เช่น แก้ไข CSS ได้ทันที (ใช้ง่ายกว่า DOM Inspector), แสดง outline ของ element พวก div หรือ table ฯลฯ. ใช้ DOM Inspector ควบคู่กับ Web developer นี่ช่วยทำให้แก้ไขพวก CSS หรือ layout ของหน้าได้มีประสิทธิภาพขึ้นเยอะ.

Comments: blogger