zickr

ทำความเข้าใจกับการใช้ XHTML และการขึ้น Box Model ด้วย div

ภายในตอนที่ 2 นี้จะเป็นการกล่าวถึงรายละเอียดและเทคนิคการใช้งาน เบื้องต้นที่จะทำให้เเข้าใจถึงภาพรวมของวิธีเพื่อที่จะนำเอาไป ปรับใช้กับเว็บไซต์ได้ครับ ซึ่งจะแบ่ง เป็น 4 หัวข้อด้วยกัน

ลองเขียนเว็บ ด้วย css + xhtml โดยที่ไม่ต้องพึ่งพา table หรือ div ดูกันครับ รับรอง มันส์กว่าที่คิด

property position เป็นอีกตัวหนึ่งที่เราจะใช้กำหนดตำแหน่ง layout แต่ จะสามารถ กำหนด ได้ละเอียดกว่า การใช้ float มาดูกันว่ามีอะไรบ้างและใช้อย่างไร

การวางตำแหน่ง layout ของ div แต่ละอัน เรามักจะใช้ property float และ clear เป็นประจำ ทำให้เราวางตำแหน่งได้อิสระมากขึ้น ในกรณี ที่ต้องการให้มีหลาย คอลัมภ์ ใน 1 หน้า float นั้นจะคล้าย align ที่เราใส่ใน table

หากใครเคยใช้รูปภาพแบบ .png แบบพื้นหลังใส แล้วละก็ คงจะเคยพบกับปัญหา ที่เกิดพื้นสีเทาขึ้นตรงที่ต้องการให้เป็น transparent เฉพาะ IE6 จนต้องเปลี่ยนไปใช้ gif หรือ jpg ตามเดิม ทั้งที่ IE7 , Firefox ก็แสดงผล png ได้อย่างไม่มีปัญหา

การใช้ css กำหนด ul li ทำกล่องเมนูอย่างง่าย แทนการใช้ table อย่างไม่ถูกที่ ถูกเวลา

design เพื่อ ใคร... เจ้าของเว็บเค้าว่าอย่างงั้น

ในหน้าเว็บเพจนั้น แต่ละส่วน มองกันอย่างง่ายๆมันก็คือ กล่องแต่ละกล่อง วางต่อๆกัน เป็นการวาง layout พิ้นฐาน ซึ่งมีความสำคัญมาก เราจะมาดูกันว่า box แต่ละอัน มีส่วนประกอบอะไรบ้าง

หากคุณเป็นคนหนึ่งที่ใส่ใจใน seo ก็ย่อมจะทราบความสำคัญของแท็ก h1,h2 ซึ่งมีความสำคัญ ต่อหน้าเว็บเพจ เป็นที่สำหรับ keyword แต่ h1, h2มันก็เป็น text ตัวใหญ่ที่ตกแต่งได้เพียงใส่สีขีดเส้นใต้เท่านั้น คงขัดใจ webdesigner อยู่ไม่น้อยทีเดียว

คุณ Katherine Gallia, เจ้าของเวบไซต์ www.katgal.com, เธออยากจะเปลี่ยนรูปแบบเวบไซต์ใหม่ แล้วเกิดไอเดียว่า อยากให้ Style ของหน้าเวบ เปลี่ยนไปตามวันเวลาจริง เช่น เวลาเช้า Style ก็เป็นสีท้องฟ้าตอนพระอาทิตย์ขึ้น, เวลาเย็น ก็เป็นสีท้องฟ้าตอนพระอาทิตย์ตก

ตัวอย่าง และ code ของ web menu ที่สร้างด้วย CSS และ html tag

ถ้าทำเฝดพื้นขาวสีเดียวแล้วเปลี่ยนเป็นสีอื่น ๆ ได้ ก็ดีสิ ...อะอ๊าา บังเอิญมีเทพทำได้จริงฮะ -_-" (เค้าเรียนจบไรกันมานะจะไปเรียนมั่ง) ไปดูกัน เทคนิคการเฝดสี background หลากสี โดยใช้ png background แบบเดียว ชิ้นเดียว โอ้ว :D

จัดหน้าบน IE สวย เปิดใน FF เน่า... แก้ที่ FF สวย เปิด Opera เน่า... แก้ที่ Opera เปิดที่ IE และ FF เน่า... คำถามอยู่ที่ว่าใครเน่ากว่าใคร และ ทำไมเค้าถึง (จงใจ) ปล่อยให้ CSS stylesheet ยังเน่าอยู่จนทุกวันนี้... ทฤษฎีสมคบในย่อหน้าท้าย ๆ น่าสนใจมากฮะ :]

ชอบเว็บนี้เป็นการส่วนตัวครับ contributor เป็นเทพกันเยอะมาก สอนง่ายได้ใจความเหมาะสำหรับผู้เริ่มหัดใหม่และอยากแตะ css ตัวเป็น ๆ แบบไม่กลัวโดนกัด