ถ้ามีโจทย์มา ถ้านะครับ แบบว่า สมมุติ ให้ทำเว็บไซท์ ธรรมดา 1 หน้า ดีไซน์ พอไปวัดไปวา แต่ ห้ามใช้ table หรือแม้กระทั่ง div tag ในหน้านั้น คุณจะแก้โจทย์ข้อนี้ด้วยวิธีการอะไร ด้วยการใช้ XHTML + CSS ในการสร้างหน้าเว็บขึ้นมา อย่าเพิ่งคิดว่ามันเป็นไปไม่ได้ครับ มาลองดูกันดีว่า
วินาทีนี้ ใครตั้งโจทย์แบบนี้ก็ถือว่าบ้า และไร้สาระสิ้นดีใช่ไหมครับ แน่นอนครับ ผมมีความบ้าและไร้สาระ แถมเพี้ยนอยู่ในตัวพอๆ กัน เหล่าผองเพื่อนที่อยู่ข้างๆ ผมเข้าใจและรู้ข้อนี้ดี วันๆ ไม่ทำห่าอะไร นอกจากนอนกินบ้านกินเมืองและเล่นกีต้าร์ด้วยฝีมือห่วยๆ
ขอชี้แจงไว้ตรงนี้ก่อนนะครับ สำหรับเหล่าเซียน css หรือ เทพ css xhtml ทั้งหลาย มีของอย่าเพิ่งลองครับ เก็บไว้ไปลองเล่นที่อื่นบ้าง ผมไม่เล่นของครับ เพราะว่าถ้าลองมาแล้วไม่เห็นผลเดี๋ยวเสียของเปล่าๆ
ผมพยายามอย่างยิ่งที่จะเขียนเว็บหน้านี้เพื่อให้รองรับบราวเซอร์หลักๆ แม้แต่บราวเซอร์ ห่วยๆ อย่าง IE6 ซึ่งข้อจำกัดเหล่านี้ มันสามารถกลายเป็นข้อจำกัด แนวคิดในการออกแบบเว็บในแต่ละรูปแบบ ไปในตัวด้วย เพราะบางทีเราสามารถออกแบบได้อย่างเทพ และกะว่าจะเอามานำเสนอแบบเทพโคตรๆ ด้วย CSS แต่ พอเจอบราวเซอร์เน่าๆ เข้าไป ทำให้เราหมดอารมณ์เทพ ไปโดยปริยายเพราะฉะนั้นเราไม่ต้องเทพกันหรอก ปล่อยให้ บิล เกต เทพไปคนเดียวก็พอ
ถ้ามีโจทย์มา ถ้านะครับ แบบว่า สมมุติ ให้ทำเว็บไซท์ ธรรมดา 1 หน้า ดีไซน์ พอไปวัดไปวา แต่ ห้ามใช้ table หรือแม้กระทั่ง div tag ในหน้านั้น คุณจะแก้โจทย์ข้อนี้ด้วยวิธีการอะไร ด้วยการใช้ XHTML + CSS ในการสร้างหน้าเว็บขึ้นมา อย่าเพิ่งคิดว่ามันเป็นไปไม่ได้ครับ มาลองดูกันดีว่า
ทำยังไงที่เราจะพอดี พอเพียงกับชีวิตและพัฒนาตัวเองตามเทคโนโลยีได้อย่างพอเหมาะ และปรับตัวเข้ากับระบบกลไกการตลาดได้อย่างดีพอ (อันหลังนี้ไปหาทางกันเอาเองครับ)
ดีไซน์ที่คุณเห็นอยู่นี้ สำหรับแฟนเดนตายของ ไทยซีเอสเอสคงคุยเคยกันดี เพราะมันเป็นดีไซน์เก่า ของเว็บไทยซีเอสเอส ผมถอดทิ้งไปประมาณ เดือนพฤศจิกายน 2549 ที่นำกลับมาใช้ ก็เพื่อเป็นการลำลึกถึงความงี่เง่าและห่วยแตกของตัวเองและไทยซีเอสเอสจะครบ 1 ปี ในเดือนกรกฎาคมนี้แล้ว
เริ่มกันเลยกรุณาดูโค้ด หรือวิวซอสตามไปด้วยนะครับ
ผมเตรียมไว้ให้พร้อมแล้ว ในไฟล์ซิป โหลดไปยำได้เลย ดาวน์โหลดได้ที่นี่
ผมเปิดซิงหน้านี้ด้วย h1 แน่นอน element ที่สำคัญระดับสิทธัตถะ เราต้องเอาไว้บนสุด ตามด้วย h2 หลายคนสงสัย ไอ้ h2 มันสถิตอยู่ตรงไหน โปรดมองไปที่มุมขวา ด้านบนสุด ที่มีลายไทยจางๆ ใช่เลยครับ นั่นคือ พื้นหลังของ h2 แล้ว h1 ก่อนหน้านี้หละ ก็ไอ้โลโก้เหียกๆ ของเว็บนั่นไงครับพี่น้อง ติด absolute position เข้าไป ติดลบให้ text-indent นิดหน่อยก็หรูแล้ว
ul li ตามมาติดๆ นั่นคือ Navigation สำหรับเว็บ ใจจริงแล้วผมอยากใช้ nl li มากกว่า แต่ ติดที่ว่า อ้ายอี ทั้ง 2 ตนนั้นมันยังไม่รองรับ จึงต้องปรับใจใช้ของเดิมก่อน จับพื้นหลังที่เป็นปุ่มใส่เข้าไปให้ ul จัดระยะห่างระหว่าง li ด้วย padding อย่าลืมใส่ line-height ให้พ่อท่านด้วย และสำคัญยิ่ง อ้ายอีทั้งสองตนนั้น มันอ่านค่า padding ไม่เหมือนชาวบ้านชาวเมือง กรุณา Hack ด้วย [if lte IE 6] ยัด absolute position ให้ ul แล้วก็จัดตำแหน่งด้วยค่า % สำหรับฝั่งซ้าย ส่วนด้านบน ใช้ px เพื่อความแม่นยำ
ซึ่งพอนำทั้งหมดที่กล่าวมาด้านบนมารวมกับ พื้นหลังของ body ที่ repeat-x แล้วมันจะทับกันพอดี
จบส่วน header
เชิญเดินดงกันต่อกับส่วน body
Blockquote ผมเอามาใส่ไว้ เสมือนคอลัมน์ ผมโยกให้ไปอยู่ฝั่งขวามือด้วยคำสั่ง float: right แต่ เฉกเช่นเดิม อ้ายอีไม่เข้าใจ จึงอัญเชิญดาบอาญาสิทธิ์มาแหก ด้วย position แบบ absolute เลยทำให้ข้อมูลฝั่งซ้ายของ IE ต้องถูกย่อส่วนลงเหลือ 40% เพิ่ม magin-right ให้ทั้ง h และ p ตามระเบียบ
สำหรับ บราวเซอร์ทั่วไป ไม่ต้อง absolute position ให้กับ blockquote แค่ float: right; แล้วตระกูล h กับ p ที่อยู่ฝั่งซ้ายจะถูก wrap โดยอัตโนมัติ
ใน blockquote ผมใส่ ol li เข้าไปเพื่อทำลิสต์ข้อมูล แล้ว label โผล่มาไงหว่า XHTML 2.0 ไงครับ สั่ง list-style-position: inside; ให้กับ li ของ ol ด้วย ตัวเลขจะได้ไม่โดดออกนอกกรอบ
ข้ามกลับไปฝั่งซ้าย ใน p ที่ดูเหมือนมันมี tab ให้ตัวหนังสือ ผมใช้ strong ในย่อหน้าแรก และที่เหลือผมครอบด้วย span สั่งทั้ง 2 อย่าง padding-left: 3em; แต่จริงๆ แล้ว css3 มี p:first-line { padding-left: 3em;} อย่างว่าครับ อย่าเพิ่งเล่นเลย เอาไว้มันออกมาก่อนแล้วค่อยเล่น มั่วไปอย่างนี้ก่อนแล้วกัน
สุดท้ายกับ footer ล่างสุด ผมเลือกใช้ บริการของ address ใส่พื้นหลังให้ด้วย เอา span ไปครอบตัวหนังสือ สั่งความกว้างที่ 60% และ display: block; ซะ ตัดบรรทัดได้ไปในตัว
ฝากเอาไว้สำหรับใครที่ต้องการเอาโค้ดทั้งหมดไปศึกษา ผมเตรียมไว้ให้พร้อมแล้ว ในไฟล์ซิป โหลดไปยำได้เลย ดาวน์โหลดได้ที่นี่
เครดิต จะให้หรือไม่ให้ ขึ้นอยู่กับสภาวะด้านจิตใจของแต่ละบุคคล มันห้ามกันไม่ได้ อย่าลืมว่านี่เป็นแค่ตัวอย่างที่ผมเขียนและคิดค้นขึ้นมาเอง ความผิดพลาดมันเกิดขึ้นได้เสมอ อยู่ที่ว่า ผู้ที่นำไปใช้จะเอาไปต่อยอดความคิดและจิตวิญญาณยังไง นั่นเป็นเรื่องของตัวบุคคล
ไปก่อนหละครับ ฤดูทำนามาถึงแล้ว แม่กับพี่ต้องการตัวเพราะหาคนถางหญ้าคันนาไม่ได้ ขอตัวกลับไปสูดกลิ่นโคลน สาบควายที่อุดรธานีสักพัก หว่านกล้าเสร็จแล้วจะกลับมา
มีความสุขกับการเขียน เว็บแบบ Tableless, Divless, Classless และ IDless ครับ
ปล. บทความนี้ผมเขียนด้วยความโง่ครับ แต่ก็จะปล่อยให้มันประจานตัวเองอย่างนี้ไปก่อน
แจ่มครับ
เทพจริง ๆ เลยกาก้า
เอาไปลองกันดูครับ เผื่อมีอะไรดีๆ มาแลกเปลี่ยนกัน
สุดยอดเลย.. โปรแกรมเมอร์ตายแน่งานนี้
กลับบ้านสองวันเกิดการนองเลือดกันอีกแล้ว
555บทความนี้มันแรงจิงๆๆเดี๋ยวกลัวตัวเองจะเผลอลองของไม่รู้ตัว
แจ่ม เฮีย
อุ๊ยตาย เก๋กู๊ดฮ่า
โธ่….เด็ก ๆๆ ฮ่า ๆๆๆ เด็กโข่งยังงง
ผมก็ว่าเป็นจุดเริ่มต้นที่ดีนะครับ แต่ผลออกมาแปลกๆ คือหน้านี้มันเบี้ยวไปหมดเลยครั้ง ทั้งเมนูทั้งข้อความ เมนูกับพื้นหลังไม่ตรงกัน ข้อความในเว็บใช้ IE7 เปิดก็เป็นแบบนึง ไฟฟอกเปิดก็เป็นอีกแบบ คือผมไม่ได้อะไรนะครับ แค่บอกไว้เผื่อจะแก้ไขอะไรได้ หรือตั้งใจให้เป็นแบบนี้ผมก็ไม่ทราบนะครับ พอดีผมก็ยังไม่ได้อ่านอะไรเลย
คุณท่านเทพมากๆ ค่ะ
ถ้าพูดถึงหน้าเว็บ เราก็จะนึกถึงการใช้ตารางเป็นอันดับแรก แล้วตามด้วย Div tag เป็นอันดับสอง แต่ตอนนี้ก็พยายามศึกษา css style sheet อยู่ พอมาเจอเว็บที่ทำโดยใช้ css อย่างเดียวก็รู้สึกว่าเจ๋งจริงๆ ถ้าให้ดีอยากให้สอนเกี่ยวกับ css มากกว่านี้นะคะ จะศึกษาเรื่อยๆ ค่า
วิจารณญาณและความสามารถ มีกันทุกคนครับ
เชิญเอาไปต่อยอดความคิดกันเอาเองเถิด สหายทั้งหลาย
อยากไปเป็นปลิงในกระเพาะพี่พร อันทะ ซัก หกเดือน จะได้เก่งแบบพี่บ้าง
ผมลองดูตัวอย่างแล้วคับ ขออนุญาตแสดงความคิดเห็นหน่อยน้ะคับ พอดีกะลังจะ less จาก table อยู่ แล้วก็กะลังศึกษา การทำ layout แบบ tableless ก็มาเจอบทความนี้เข้า
ก็นับว่าเป็นไอเดียที่ดีมากๆ น้ะคับ ที่จะไม่ใช้ table, div, span, id, class, .
แต่…
ในชีวิตจริงแล้ว การจะทำเว็บซักเว็บนึงนั้น เราต้องมี
- style ของ link กี่แบบคับ
- เราต้องมีรูปแบบตัวหนังสือกี่แบบคับ เช่น ถ้าใช้ span ก็จะ
<span class="style1">text style1</span>
<span class="style2">text style2</span> …. ไปเรื่อยๆ
แล้วถ้าไม่ใช้ span จะทำยังงัยคับ
คุณคงไม่ทำ
<h1>text style1</h1>
<h2>text style2</h1>
แล้วไปกำหนด css ของ <h1>, <h2> น้ะคับ เพราะว่า tag header <h> มันมีแค่ 6 อัน
- เห็นใช้ <blockquote> ไปแล้ว สำหรับกล่องของ !Fucking Important; บ้าบออะไรนั่น แล้วถ้าคุณจะมีกล่องอีกใบ หรือมี left menu คุณจะทำยังงัยคับ
- ถ้าคุณไม่ใช้ <div> และ id คุณจะอ้างถึง field นั้นได้อย่างไรครับ จะไม่มีปัญหาเลย ถ้าคุณทำเว็บแค่นิ่งๆ ไม่ได้ inter active อะไรกับ user
- และอื่นๆ อีกมากมาย
ถ้า ตัวอย่างนี้เพียงแค่ตอบโจทย์ว่า "สมมุติ ให้ทำเว็บไซท์ ธรรมดา 1 หน้า ดีไซน์ พอไปวัดไปวา แต่ ห้ามใช้ table หรือแม้กระทั่ง div tag ในหน้านั้น คุณจะแก้โจทย์ข้อนี้ด้วยวิธีการอะไร ด้วยการใช้ XHTML + CSS ในการสร้างหน้าเว็บขึ้นมา?" ก็โอน้ะคับ แต่เชื่อเถอะว่าในชีวิตจริงนั้น ลำบากมากๆ แม้กระทั่งหน้า home ของhttp://www.thaicss.comเองก็เถ่อะ ยังคิดไม่ออกเรย ว่าถ้าไม่ใช้ div, span, class, id, . แล้วจะทำออกมาหน้าตายังงี้ได้ยังงัย???
แต่ก็ยอมรับน้ะคับว่าคุณ พร อันทะ นี่ก็ advance ในฟิล์ดของ css จริงๆ อันนี้ยอมรับ …
ลองไปดูเว็บนี้นะครับ เพิ่งเคยเห็น ใช้ CSS ในการออกแบบทั้งหมดเลย รู้สึกจะใช้ XHTML 1.1 ด้วย
http://www.nmad2006.com
ปล. ผมแสดงความคิดเห็นในมุมของ programmer น้ะคับ ไม่ใช่ designer จึงมองไปว่า เว็บมันไม่ได้แค่นิ่งๆ มันมีอะไรมากมาย ที่ต้อง inter active กับ user … ถ้าบทความนี้เขียนสำหรับ designer ที่ทำหน้าเว็บนิ่งๆ ไม่กี่หน้า ก็ถือว่า ผมแสดงความเห็นผิดวัตถุประสงค์ ก็ขออภัยด้วยน้ะคับ
อืมม โทษทีคับ สงสัยผมหลงประเด็นไป พอดีมีเพื่อนมากรอกหู จนคิดไปเองว่า tableless ก็ต้องไม่ใช้ table เห็นบทความนี้แล้วก็เลยนึกไปเองว่า จาไม่ใช้ table div และอื่นๆ กันแล้ว (ผมเห็นคำว่า "หักดิบ" เลยตีความหมายผิดไป) …
พูดถึง "แก่น" ของมันแล้ว ผมก็นึกได้อันเดียวคือ "ขอนแก่น" บ้านเกิดของผม เท่านั้นเอง อย่างอื่น นึกไม่ออกเลยจิงๆ ว่าจะมีแก่นอะไรอีก
พูดเล่นน้ะคับ … แก่นของมัน คงยากที่จะ define ออกมา เพราะในโลกนี้มันมีแก่นเยอะเสียเหลือเกิน บางทีคนทำอยากทำออกมางี้ แต่เจ้าของเงินต้องการยังงั้น มันก็ต้องตามใจเจ้าของเงินไป … ถ้าพูดถึงเรื่องเทคโนโลยีแล้ว มันก็มีแก่นอีกมากหลายเหลือเกิน ทั้งในฝั่ง Client Side และ Server Side ไม่ว่าจะเป็น HTML, XHTML, DHTML, CSS, JS, YUI, AJAX, Flex, WYSIWYG, BBCode, Google API, PHP, Framework, PEAR, MySQL, Database Tuning, SQL Optimization และอีกมากมายมหาศาล สับสน อลหม่านไปหมด
เอาเป็นว่าสุดท้าย ขอบคุณบทความนี้ และเจ้าของบทความน้ะคับ ไปหล่ะ
ดีซะอีกครับ
การแสดงความคิดเห็น ยิ่งต่างมาก เราก็จะได้เห็นแง่มุมที่ต่างไป
มันไม่ใช่เรื่องที่ผิดประเด็นหรือตรงประเด็น แต่มันเป็นอีกแง่มุม และประเด็นที่น่าสนใจอื่นๆ ที่คนทำเว็บต้องมอง
แต่ มันไม่ใช่แค่ทำเว็บ มันรวมไปถึงเรื่องอื่นๆ ด้วย
สิ่งที่ผมอยากให้เกิดคือ ประเด็นการถกเถียง และนำมาซึ่งประเด็น แปลกใหม่ ที่หลายๆ คนยังคิดไม่พบ ว่ามันจะเป็นไปได้ ถ้าเราทำตรงนั้นได้ แสดงว่าเราประสบผลสำเร็จในการค้นพบสิ่งใหม่ ไปพร้อมๆ กัน
ส่วนเรื่องที่ผมเขียนมาให้แค่นี้ ผมแค่อยากจะฉายไอเดีย เพื่อให้เกิดการถกประเด็น
ไม่ได้เขียนสำหรับอะไรอย่างอื่น นอกจากเขียนเพื่อให้ผู้ที่กำลังศึกษา CSS XHTML เปิดใจเข้าหากัน ไม่ว่าจะเป็นโปรแกรมเมอร์ หรือดีไซเนอร์
มองหาแก่นของมันให้เจอ
ผมไม่อยากได้ยินว่า ไม่ใช้เทเบิล ต้องใช้ div
เพราะทั้งสองอย่าง มันไม่ใช่ประเด็น มันไม่ใช่ประเด็น
ถึงตอนนี้ ประเด็นมันคืออะไร หลายคนคงรู้แล้ว
หรืออย่างไร
ดีครับได้ความรู้ดีคุณเจ๋งมาก ๆ พึ่งเข้าเวปครั้งแรก
ภาษาที่ใช้เขียน ไม่ค่อยน่าอ่านเลย
ขอเป็น แฟนเดนตายของ ไทยซีเอสเอส ด้วยคนนะครับ ชอบครับ
พึ่งโผล่มาคับ เห็นแล้วก็อยากทำ แต่ยังทำไม่เป็น
ขอศึกษาก่อนนะ ( เริ่มตอนก่อนหว่า)
สุดยอดครับ อ่านแล้ว รู้สึกเหมือนว่า ตัวอง จะเขียนโปรแกรม เน้นใช้งานไ้ดอย่างเดียว (ผิด ประเภท ก้อเยอะ)
สุดยอดเลยครับ เป็นบทความอะไรที่ เทพสุด ๆ อ่ะครับ
ขอบคุณครับ ได้ความรู้เยอะจริง ๆ เลย
ขอบคุณและซาบซึ้งในความพยามของเจ้าของเว็บ
แต่ถ่ายทอดออกมาได้มึนงงไม่รู้เรื่อง
อ่านบทความของคุณแล้วผมก็คงจะเหมือนคุณตอนแรกๆ ครับต้องทำความเข้าใจกันใหม่ อิอิ แต่ก็จะสู้ๆๆ ไปเรื่อยๆ ยังไงก็ขอให้มีบทความดีๆๆมากันต่อเรื่อยๆ ผมชอบที่คุณใส่ความจริงใจลงไปด้วย อ่านแล้วฮา แตก ดีนะครับ ตอนนี้หนังสือ Css แปลไทยมีเยอะแล้วนะครับจะรบกวนให้พี่ท่าน ช่วยแนะนำสักหน่อยก้เป็นพระคุณอย่างยิ่งครับ อิอิ
ดีครับ คิดได้ไงเนี้ย
ได้เข้ามาอ่านเนื้อหาดีดีในเว็บนี้ ก็ขอขอบคุณท่านผู้เขียนไว้ ณ ที่นี้ คงยังไม่ไปไหน จะเวียนว่ายตายเกิดกับเว็บท่านอีกนาน อย่าเพิ่งรำคาญใจกันก่อน และจะความรู้ของท่านไปต่อยอด ต่อไป