Sitthiphorn Anthawonksa

Float ตอนที่ 1

Floatting หรือการจับ element(s) ให้อยู่ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง ด้วยคำสั่ง float: left;, float: right; และ float: none;

ในการทำเว็บแบบ tableless นั่น การใช้ float เพื่อควบคุม div tag เป็นเรื่องสำคัญอย่างมาก ในการวางเลเอ๊าท์ให้กับหน้าเว็บเพจ เช่นการวางหน้าเว็บแบบ 3 คอลัมน์ โดยการสั่ง div tags เป็น float: left; ทั้งหมด ซึ่งถ้าหากเราต้องการจัดกลางหน้าเว็บ ด้วยการให้ div tag ซึ่งเป็น ตัวหลัก ครอบทั้ง 3 อันนี้ไว้ ต้องให้ค่า div หลักอันนั้นมี float เป็น none เป็นต้น

มาดูตัวอย่างการใช้ floats กับ div tags กันครับ ซึ่งมีข้อแม้เล็กๆ น้อยๆ ว่า กรณีที่ท่านได้ให้ค่า float ต่อ element(s) ใดๆ แล้ว ควร กำหนดความกว้างให้ element(s) เข้าไปด้วยนั่นเองครับ

html, head, title, style, body

Html อันนี้ คงไม่ต้องอธิบายมากนะครับ เขียน html มันต้องประกาศเป็น html ดิใช่มั้ยครับ ส่วน แอทริบิวของ xmlns เขาบอกมามันควรเป็นของ

<html xmlns="http://www.w3.org/1999/xhtml">

โดยเขียนไว้ อย่างนี้

<html xmlns="http://www.w3.org/1999/xhtml">

……………………………

</html>

Head

ส่วนนี้คือของสงวน ถ้าอยากใส่อะไรลงไปก็ตรงนี้เลยครับ เช่น <meta> พวก description ต่างๆ และที่สำคัญ ระบบเสิร์ชเอ็นจิน มันจะเข้ามา ป้วนเปี้ยนแถวๆ นี้แหละ

เหนือจินตนาการ กับ XHTML Layout Creator

มันไม่ใช่เรื่องง่าย ผมยอมรับและไม่ได้ขู่ว่ามันยาก เอางี้แล้วกัน บอกแบบทื่อๆ ไปเลยว่า มันไม่ยากเลยสักนิดที่จะนั่งเขียน XHTML

แบบคนทำงานด้านเว็บดีไซน์โดยไม่จำเป็นต้องพึ่ง หน้าดีไซน์ ของ Adobe Dreamweaver เลย อาศัยเขียนโค้ดล้วนๆ บางคนคิดว่ามันยาก โดยที่ยังไม่ลองพยายามหัด หรือฝึกตัวเองเลย

มันจะยากไปไหน มันไม่ได้ยากไปไหนครับ แต่ผมคิดว่าเราไม่ยอมเดินหนีจากความยากลำบากที่ค้างคาอยู่นั่นต่างหาก คือปัญหา

ปัญหาที่ยังคงถกเถียงกันว่า งาน CSS XHTML มันเป็นงานของใครกันแน่ ระหว่าง โปรแกรมเมอร์ หรือ ดีไซเนอร์ ผมตอบตามแบบฉบับของผมเลย ว่า ไม่ต้องเอางานทั้ง 2 อย่างนี้ให้โปรแกรมเมอร์ หรือดีไซเนอร์ ที่มีอยู่ทำ

ไปจ้าง CSS Designer + XHTML Layout Creator มาดีกว่า

XHTML เว็บไซท์แบบสะอาด

การเขียนเว็บแบบเรียงลำดับความสำคัญ ของข้อมูลในโครงสร้างถือเป็นปัจจัยหลัก ที่สำคัญที่ XHTML designer ทุกคนควรพึงกระทำ และพึงระวัง ในเรื่องการใช้ tag xhtml ให้ถูกกับข้อมูลที่นำเสนอ

h1 หรือ Header Level 1 ถือเป็น Block Element ที่เป็น text module ที่สำคัญที่สุดของ xhtml เลยก็ว่าได้

แล้วเราจะมองข้ามมันไปได้ยังไงหว่า และที่รองลงมา คือ h2-h6 และ h ใน XHTML 2.0 ที่จะมีเพิ่มเข้ามา

p หรือ paragraph เอาไว้ใช้จัดการกับตัวหนังสือ ที่ถูกแบ่งออกเป็นย่อหน้า สามารถใช้ inline elements อย่าง span, strong, em เข้าร่วมด้วยอย่างเมามัน

สำหรับการทำเมนู ไม่ว่าจะแนวตั้งหรือแนวนอน ในตอนนี้ ul, li (Unordered list, list) ถือเป็น elements ที่นิยมใช้กัน ก่อนที่ จะเปลี่ยนไปใช้ Nl หรือ Navigation แทนใน XHTML 2.0 เช่นกัน (nl สามารถใช้ใน Opera, Firefox และบราวเซอร์ใหม่ๆ อื่นๆ ยกเว้น ไออี 6 ส่วน 7 ผมยังไม่ลอง)

แล้ว OL หละ ทำไมไม่เอามาทำเป็นเมนูแทน ul มันก็สั่งได้เหมือนกัน

อย่างที่เคยเล่าให้ฟังครับ ol คือ Ordered List แตกต่างจาก Unordered List ตรงที่อันนึงมันเป็นลิสต์แบบตามลำดับขั้น แต่อีกอัน มันไม่ใช่ จึงเห็นเขาใช้ ul มาทำเมนู มากกว่าใช้ ol แต่ในเชิงความสำคัญทางโครงสร้างภาษา XHTML ทาง ol ถูกจัดอันดับความสำคัญไว้มากกว่า

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 1

ความเคยชินที่ได้ทำสิ่งใดสิ่งหนึ่งมาช้านาน จากยาก จนกลายเป็นง่าย และไม่อยากเปลี่ยนไปทำรูปแบบอื่นอีก อาการอย่างนี้ บางครั้งมันอาจจะทำให้เราท้อแท้ใจ เมื่อเจอของใหม่

เหมือนเวลาที่ท่านเคยทำอะไรบางอย่างมานาน ทำแล้วทำอีก ทำแล้วทำอีก แล้วอยู่ๆ วันหนึงก็มี เงาลึกลับมาบอกท่านว่า ที่ท่านกำลังทำนั้น มันผิด มันมีทางที่ถูกต้อง ท่านควรลองศึกษาทางใหม่ดูบ้าง

อาการแรกที่ท่านอาจจะรู้สึกและต้องทำ แต่อาจจะทำไม่ได้ คือ ทำใจ ทำใจให้ยอมรับและปรับเปลี่ยน

การเรียนรู้สิ่งใหม่มันไม่ใช่เรื่องยาก มากมายอะไร แต่การบังคับจิตใจตัวเองให้ยอมรับนั้น มันยากยิ่งกว่าต่างหาก

ย้อนกลับไป เมื่อหลายปีก่อน ตอนที่ผมเพิ่งเริ่มทำเว็บใหม่ๆ เครื่องมือที่ใช้ก่อร่างสร้างเว็บก็ไม่ใช่ใครอื่นใด คือ ดรีมวีฟเว่อร์ 3 นั่นเอง

Dreamweaver 8.0.2 กับ XHTML 1.0 Strict

อ้าว เร่เข้ามา พ่อแม่พี่น้อง มาก่อนได้นั่งหน้า มาช้าได้นั่งหลัง มาทีหลังอาจได้ยืน มาดึกๆ ดื่นๆ อาจได้ขี่คอกันดู วันนี้ ผมจะนำเสนอเรื่องความอ่อนด้วย ปัญญาในการใช้โปรแกรม Adobe Macromedia Dreamweaver 8.0.2 ของผมเอง

ด้วยความสักแต่ว่าใช้ ไม่ดูตาม้าตาเรือ และไม่เอาประโยชน์ออกมาใช้ให้เต็มที่

วันนี้จะมาสารภาพความโง่ด้วยการ ปรับโปรแกรมให้เขียน XHTML 1.0 Strict แบบเบาๆ

Back to Top