1. เอา tag <div> ที่ไม่จำเป็นออกไป
สำหรับบางคน หากคิดอะไรไม่ออกก็ใช้ <div> ไว้ก่อน จนมีมากเกินไป เพราะฉะนั้นเราควรตัด <div> ให้เหลือเฉพาะส่วนที่จำเป็นเท่านั้น ทีนี้เรามาดูตัวอย่างการใช้ <div> ที่มากเกินความจำเป็นกันดีกว่า

ตัวอย่างที่ 1

ตัวอย่างที่ 2

2. เลือกใช้ tag ให้เหมาะสม

3. ใช้ tag <div> ให้น้อยที่สุดและใช้งาน tag ให้ถูกความหมาย
ตัวอย่างที่ 1
แทนที่เราจะใช้ <div> สำหรับ breadcrumb หรือ ข้อมูลที่เกี่ยวกับการบอกตำแหน่งที่อยู่ในเว็บไซต์ เราก็ควรจะใช้ <p> มากกว่า เพราะข้อมูลนี้ถือว่าเป็นข้อความ(paragraph)

ตัวอย่างที่ 2
บางคนก็นำ <div> เพราะอยากจะให้ข้อมูลขึ้นบรรทัดใหม่โดยไม่ได้คำนึงถึงการใช้งานเลยว่า ใช้ถูกต้องตามความหมายรึเปล่า

4. จัดรูปแบบ code ให้เป็นระเบียบอยู่เสมอ
ถ้าหากว่าใครใช้โปรแกรม Adobe Dreamweaver ก็สามารถทำได้ง่าย ๆ โดยการเลือกไปที่เมนู Commands > Apply Source Formatting เพียงเท่านี้เจ้า dreamweaver ก็จะจัดรูปแบบโค้ดให้เราเรียบร้อย (ง่ายมั้ยหละ)

5. เขียน comment ไว้ใกล้ ๆ กับ </div>
ในกรณีที่เว็บไซต์เรานั้นมีการแยกไฟล์ออกเป็นส่วนต่าง ๆ เช่น index.php, header.php, sidebar.php footer.php การที่เราเขียน comment ไว้นั้นจะค่อยให้เราสามารถเข้าใจและแก้ไขโค้ดบริเวณต่าง ๆ ได้อย่างชัดเจน

อ่านข้อมูลทั้งหมดได้ที่ : http://www.webdesignerwall.com/tutorials/coding-clean-and-semantic-templates/

วันนี้ผมจะมานำเสนอเกี่ยวกับ property ของ css ที่หลาย ๆ คนอาจจะงงว่า “css มันมีคำสั่งแบบนี้ด้วยเหรอ ?” property ทั้ง 5 ตัวที่ผมจะมานำเสนอวันนี้ก็คือ clip, min-height, white-space, cursor และ display ซึ่งหลาย ๆ คนมองข้ามเจ้าพวกนี้ไป ทั้ง ๆ ที่มันมีประโยชน์ในการใช้งานอยู่มากโขทีเดียว

1. CSS Property : Clip (คลิกเพื่อดูตัวอย่าง)
การใช้งาน clip นั้นจะทำให้เหมือนกับมีหน้ากากมาครอบพื้นที่อยู่ (นึกภาพง่าย ๆ ก็เหมือนกับการใช้คำสั่ง crop ใน photoshop)

โดยการที่เราจะสร้างหน้ากากขึ้นมาครอบนั้น เราจะต้องระบุค่าระยะห่างของด้านทั้ง 4 ก่อน(บน ขวา ล่าง ซ้าย)

ตัวอย่างแรก
ในตัวอย่างนี้เราจะสร้างหน้ากากให้กับรูปภาพโดยใช้คำสั่ง clip อันดับแรกเราต้องกำหนด position: relative ใน <div> เพื่อทำเป็นหน้ากากไว้สำหรับครอบ จากนั้นใส่ position: absolute ในรูปภาพและกำหนดค่าระยะห่างทั้ง 4 ด้าน ดังรูป

css ที่นำมาใช้ของตัวอย่างนี้

ตัวอย่างการนำไปใช้งาน : thumbnail
ปกติแล้ว thumbnail ทั่ว ๆ ไปเราจะลดขนาดจากรูปเดิมลงมาทำให้บางทีรูปที่ได้อาจจะไม่สวย ทางออกอีกทางหนึ่งในการทำ thumbnail คือการใช้คำสั่ง clip นั่นเอง เพราะเป็นการ crop รูปให้เล็กลงเหลือเฉพาะบริเวณที่ต้องการ โดยตัวอย่างนี้นั้นจะใช้รูปซึ่งมีขนาด 200×140 px นำมาลดขนาดให้เหลือ 50%(100×70 px) จากนั้นใช้คำสั่ง clip เพื่อ crop ด้านซ้ายและขวาออกด้านละ 15px ก็จะได้ thumbnail ขนาด 70×70 px พอดี

2. CSS Property : Min-height (คลิกเพื่อดูตัวอย่าง)
property min-height นั้นเราจะใช้สำหรับกำหนดความสูงขั้นต่ำของ element จะมีประโยชน์มากสำหรับบางกรณีที่เนื้อหาในหน้าเว็บเรา้น้อยทำให้แลดูไม่สวยงาม หรือกรณีที่เราต้องการกำหนดความสูงของ layout ให้สมดุลและเหมาะสมกับหน้าเว็บ

Min-height hack for IE6
เนื่องจากคุณปู่ IE6 ของเรานั้นไม่รู้จักคำสั่ง min-height เพราะฉะนั้นเราจึงจำเป็นต้อง hack ซะก่อน ด้วยวิธีนี้ครับ

3. CSS Property : White-space (คลิกเพื่อดูตัวอย่าง)
White-space นั้นจะใช้สำหรับจัดการข้อความที่ต้องการขึ้นบรรทัดใหม่ จะใช้ในกรณีที่ข้อความอยู่คนละบรรทัดกัน ตัวอย่างในรูปด้านล่างจะเห็นว่า ข้อความของเราที่เราใช้คำสั่ง em เพื่อทำให้ตัวอักษรเอียงนั้น ถูกแบ่งให้อยู่คนละบรรทัดกัน เพราะฉะนั้นหากเราต้องการให้อยู่บรรทัดเดียวกันจะต้องใช้คำสั่ง white-space: nowrap

4. CSS Property : Cursor (คลิกเพื่อดูตัวอย่าง)
บางคนอาจจะยังไม่รู้ว่า cursor นั้นสามารถเปลี่ยนรูปได้ด้วย ซึ่งรูปแบบ cursor โดยทั่วไปก็จะเป็นรูปลูกศร(arrow) หากเอาเม้าส์ไปชี้ที่ลิ้งค์ก็จะเปลี่ยนเป็นรูปนิ้วชี้(pointer) และถ้ากำลังรอการดาว์นโหลดอะไรซักอย่างอยู่ก็จะเปลี่ยนเป็นรูปนาฬิกาทราย(wait) ซึ่งการแสดงผลของ cursor ในลักษณะต่าง ๆ เหล่านี้สามารถเปลี่ยนแปลงได้ โดยที่เรากำหนดการแสดงผลให้กับมันว่าต้องการให้แสดงผลออกมาในรูปแบบไหน

5. CSS Property : Display inline / block (คลิกเพื่อดูตัวอย่าง)
property display นั้นก็จะเหมือน ๆ กับ cursor ตรงที่เราสามารถปรับเปลี่ยนรูปแบบการแสดงผลให้ต่างออกไปจากเดิมได้ โดยธรรมชาติแล้ว block element จะมีการขึ้นบรรทัดใหม่ทันที เช่น <div>, <h1> และ <p> ส่วน inline element นั้นหากมีการใช้งานก็จะยังคงอยู่ในบรรทัดเดิม เช่น <em>, <span> และ <strong> แต่ถ้าหากเราต้องการเปลี่ยนการแสดงผลเป็นแบบอื่น ๆ ก็สามารถเปลี่ยนได้โดยกำหนดเอาว่าต้องการ display: inline หรือ display: block

อ้างอิงข้อมูลและรูปภาพจาก :
http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/
http://www.ibloomstudios.com/articles/misunderstood_css_clip/

ในการเขียน CSS นั้น หลาย ๆ คนอาจจะไม่ทราบว่าสามารถย่อให้สั้นลงได้ (จริงเหรอเนี่ย !!!) โดยการใส่ค่า(value) ให้กับคุณสมบัติ(property) พร้อมกันหลาย ๆ ค่า วิธีการเช่นนี้เราเรียกว่า Shorthand นั่นเอง property แต่ละตัวเวลาเขียนแบบย่อแล้วจะเป็นอย่างไร ไปดู

Font (ตัวอักษร)
การใช้งานปกติ :
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

เขียนแบบย่อ :
font: 1em/1.5em bold italic serif

Background (พื้นหลัง)
การใช้งานปกติ :
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed

เขียนแบบย่อ :
background: #fff url(image.gif) no-repeat top left fixed

Lists (ลิสต์รายการ)
การใช้งานปกติ :
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

เขียนแบบย่อ :
list-style: disc outside url(image.gif)

Margin and padding (ระยะประชิดขอบนอกและขอบใน)
การเขียนคุณสมบัติแบบย่อของ margin และ padding นั้น สามารถแยกได้เป็น 4 กรณี ซึ่งขึ้นอยู่กับความแตกต่างของค่าแต่ละด้าน (บน, ขวา, ล่าง, ซ้าย)
กรณีแรก : ค่าทั้ง 4 ด้านไม่เหมือนกันเลย
การใช้งานปกติ :
margin-top: 11px;
margin-right: 22px;
margin-bottom: 33px;
margin-left: 44px

เขียนแบบย่อ :
margin: 11px 22px 33px 44px (การเรียงกันของค่าทั้ง 4 ด้านนั้น จะเรียงจากด้านบน, ขวา, ล่าง และซ้าย จำง่าย ๆ คือเรียงตามเข็มนาฬิกาโดยเริ่มจากด้านบนเป็นหลัก)

กรณีที่ 2 : มีค่าที่ไม่เหมือนกัน 3 ค่า (ใช้กับกรณีที่ด้านขวาและซ้ายเท่ากัน)
การใช้งานปกติ :
margin-top: 55em;
margin-right: 66em;
margin-bottom: 77em;
margin-left: 66em

เขียนแบบย่อ :
margin: 55em 66em 77em (ค่าแรกคือด้านบน ค่าที่สองคือด้านซ้ายและขวา ค่าที่สามคือด้านล่าง)

กรณีที่ 3 : มีค่าที่ไม่เหมือนกัน 2 ค่า (ใช้กับกรณีที่ด้านบนเท่ากับด้านล่างและด้านซ้ายเท่ากับด้านขวา)
การใช้งานปกติ :
margin-top: 8%;
margin-right: 1%;
margin-bottom: 8%;
margin-left: 1%

เขียนแบบย่อ :
margin: 8% 1% (ค่าแรกคือด้านบนและล่าง ค่าที่สองคือด้านซ้ายและขวา)

กรณีที่ 4 : มีค่าเหมือนกันทั้ง 4 ด้านเลย
การใช้งานปกติ :
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

เขียนแบบย่อ :
margin: 0

Border (เส้นขอบ)
การใช้งานปกติ :
border-right-width: 1px;
border-right-color: black;
border-right-style: solid

เขียนแบบย่อ :
border-right: 1px black solid

หรือถ้าเราต้องการเส้นขอบทั้ง 4 ด้านที่เหมือนกันก็เขียนคุณสมบัติแบบย่อเหมือนเดิมนะคับ
การใช้งานปกติ :
border-width: 1px;
border-color: black;
border-style: solid

เขียนแบบย่อ :
border: 1px black solid

แต่ถ้าหากเราต้องการเส้นขอบที่บางด้านอาจจะไม่เหมือนกัน เช่น หากเราต้องการทำเส้นขอบแบบในรูป

ปกติแล้วจะเขียนแบบนี้ :
border-right: 8px solid #336;
border-bottom: 8px solid #336;
border-top: 10px solid #ccf;
border-left: 10px solid #ccf;

เราก็จะสามารถลดการเขียน CSS ลงได้โดยอาศัยหลักการที่ว่า CSS นั้นจะเขียนไล่บรรทัดจากบนลงล่าง ลงมาเรื่อย ๆ ถ้าเราเขียนคุณสมบัติเหมือน ๆ กันหลาย ๆ ที่ การแสดงผลจะยึดค่าสุดท้ายเป็นหลัก เพราะฉะนั้นเราจะลดการเขียนแบบด้านบนเป็นอย่างนี้ครับ

แบบที่ลดแล้ว :
border: 8px solid #336;
border-top: 10px solid #ccf;
border-left: 10px solid #ccf;

อธิบายก็คือ เราสั่งให้ทุกด้านมีเส้นขอบแบบ 8px solid #336 ก่อน จากนั้นเราก็เปลี่ยนแปลงด้านที่เหลือที่เราต้องการโดยการเพิ่มต่อท้ายเข้าไป เพราะถ้าค่ามันซ้ำมันก็จะเรียกใช้งานค่าล่างแทน

นี่ก็เป็นอีกแบบหนึ่งที่ลดแล้ว :
border: 8px solid #336;
border-width: 10px 8px 8px 10px;
border-color: #ccf #336 #336 #ccf

การเขียนคุณสมบัตแบบย่อนั้น อันที่จริงแล้วค่าของคุณสมบัติบางอย่างสามารถสลับตำแหน่งกันได้ บางอันก็ห้ามสลับ ผมเลยตัดปัญหาโดนการไม่อธิบายว่าค่าไหนสลับได้ ค่าไหนสลับไม่ได้นะครับ(หยิ่ง:P) เพราะในความเป็นจริง เวลาเราเขียนคุณสมบัติแบบย่อก็คงไม่เขียนสลับไปสลับมาอยู่แล้ว เคยใ้ช้แบบไหนมาก็ใช้แบบนั้นดีกว่าครับ ถ้าเกิดสลับแล้วมันไม่แสดงผลขึ้นมาหละแย่เลย

อ้างอิงข้อมูลบางส่วนจาก : http://www.webcredible.co.uk/user-friendly-resources/css/css-shorthand-properties.shtml

เมนูในเว็บไซต์ต่าง ๆ นั้น แต่ละที่ก็จะมีเทคนิคในการทำไม่เหมือนกัน วันนี้ผมจะนำเสนอวิธีการทำเมนูอีกวิธีหนึ่งที่เน้นความสวยงามเป็นหลัก ข้อดีของการทำเมนูด้วยวิธีนี้คือ ตัวอักษรและพื้นหลังขอเมนูจะเป็นรูปภาพทั้งหมด ทำให้สามารถออกแบบและตกแต่งเมนูได้เต็มที่ แต่ความสวยงามที่ได้ยังอยู่บนมาตรฐานเหมือนเดิมนะครับ เพราะถึงแม้ว่าเราจะใช้รูปภาพในการทำเมนู แต่ code ที่เรานำมาใช้นั้นยังเป็นตัวอักษรเหมือนเดิม จึงทำให้เรายังหวังผล SEO จาก keyword ที่อาจจะผสมลงไปในเมนูได้เหมือนเดิม (เยี่ยมมั้ยหละ) อย่ารอช้า เราไปดูกันเลยดีกว่าครับ

ในขั้นตอนแรกเราต้องออกแบบเมนูที่เราต้องการก่อนนะคับ ทำเป็นไฟล์รูปภาพไฟล์เดียวยาว ๆ เลยนะคับไม่ต้องเสียเวลาตัดแบ่งเป็นหลาย ๆ อัน

อันนี้เป็นรูปภาพ(เพียงรูปเดียว)ที่นำมาใช้ทำเมนูครับ บางคนอาจจะงงนะครับว่า “เอ๊ะ ทำไมเมนูมันมีสองแถว” ก็คือรูปภาพที่นำมาใช้นี้แถวบนจะเป็นสถานะปกติของเมนู ส่วนแถวล่างจะเป็นสถานะตอน hover ครับ
HTML จะเป็นแบบนี้ครับ

ส่วน CSS ที่นำมาใช้ทำเมนูมีหน้าตาแบบนี้คับ

CSS จะถูกแยกออกเป็น 3 ส่วนหลัก ๆ คือ
1. การใช้งานทั่วไป (ul, li, a)
2. ควบคุมการแสดงผลปกติของเมนูแต่ละอัน (li#home a, li#products a เป็นต้น)
3. ควบคุมการแสดงผลตอน hover (li#home a:hover, li#products a:hover เป็นต้น)

มาดูเหตุผลในการใช้งาน property บางตัวที่หลายคนอาจจะไม่ค่อยคุ้นกันดีกว่าครับ
height: 0, padding-top: 38px, overflow: hidden
property ทั้ง 3 ตัวนี้จะทำให้รูปภาพที่เราต้องการปรากฎขึ้นมาแทน text ของแต่ละเมนู(overflow: hidden) โดยกำหนด padding-top ตามขนาดความสูงของรูปภาพที่นำมาทำเป็นเมนู (ความสูงของรูปภาพนี้เท่ากับ 38px)

background-position
property ตัวนี้จะเป็นการแสดงผลพื้นหลังของเมนูแต่ละตัว ซึ่งค่าที่นำมาใส่นั้นจะเป็นค่าพิกัดเริ่มต้นของความกว้าง ความยาวรูปภาพ (แกนx แกนy)

ไปดูตัวอย่างได้ที่นี่เลยครับ

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

คำเตือน : เหมาะสำหรับผู้มีพื้นฐาน html/css อยู่บ้าง ไม่งั้นอาจจะงงได้

ปัจจุบันนี้ เว็บไซต์ส่วนใหญ่มักจะมีการออกแบบให้ขอบของกล่องต่าง ๆ ในเว็บไซต์มีความโค้งมนเพื่อความสวยงาม แต่การจะทำให้ขอบมีความโค้งมนนั้น แต่ละคนก็จะมีเทคนิคหรือวิธีการทำที่แตกต่างกันไป ซึ่งเทคนิคส่วนใหญ่จะเป็นการสร้างกล่องที่มีพื้นหลังเป็นรูปขอบโค้งบนและล่าง ดังภาพ

ซึ่งเทคนิคนี้เป็นเทคนิคที่ค่อนข้างเปลืองโค้ด (ต้องสร้าง div เปล่าถึง 2 ที่เพื่อแสดงผลขอบโค้งบนล่าง) แถมยังไม่ได้มาตรฐานอีกต่างหาก (สร้างโค้ดโดยที่ไม่มีความหมาย) แล้วอย่างงี้เราจะใช้วิธีไหนดีหละ ?

วันนี้ผมจึงขอนำเสนอวิธีการทำขอบโค้งโดยที่ไม่ต้องใช้รูปภาพกัน โดย Alessandro Fulciniti

วิธีการทำกล่องขอบโค้งโดยไม่ใช้รูปภาพนี้ สิ่งที่จะต้องมีก็คือ (สามารถดาวน์โหลดไฟล์ได้ที่ข้างล่างครับ)
- ไฟล์ javascript ชื่อ “niftycornerscube.js”
- ไฟล์ css ชื่อ “niftycorners.css”
- “javascript เฉพาะ” สำหรับหน้านั้น ๆ ขึ้นอยู่กับ selector และ keyword ที่เราต้องการ

ก่อนจะไปดูตัวอย่างการทำกล่องขอบโค้งกัน เรามาทำความเข้าใจกับการใช้งาน “Javascript เฉพาะ” กันก่อนดีกว่า ตารางด้านล่างนี้จะแบ่งประเภทของ selector และยกตัวอย่างการใช้งานให้ดูด้วย (เวลาเอาไปใช้ จะได้ใช้ถูกไง)

ส่วนตารางนี้จะบอกความหมายของ keyword ที่นำมาใช้

พอทำความเข้าใจเรียบร้อยแล้วก็ไปดูตัวอย่างกันเลย Let’s go !!!

ตัวอย่างที่ 1 div โดด ๆ
เริ่มกันด้วยตัวอย่างง่าย ๆ ก่อนโดยการทำกล่องขอบโค้ง 1 กล่อง โดยใช้ id ชื่อว่า box และขอบโค้งมีขนาดใหญ่ (10 px)

คลิกเพื่อดูตัวอย่างที่นี่ครับ

ตัวอย่างที่ 2 div คู่
ต่อมาเราจะลองทำกล่อง 2 กล่อง โดยใช้ id ชื่อ content และ nav ขอบโค้งของทั้ง 2 กล่องจะเป็นขนาดธรรมดา (5 px) ซึ่งเป็นค่ามาตรฐาน เนื่องจากตัวอย่างที่ 2 เราไม่ได้ใส่ keyword เพราะฉะนั้นเราไม่ต้องใส่ keyword ก็ได้นะครับ ถ้าเราอยากได้ขอบโค้งขนาดธรรมดา

คลิกเพื่อดูตัวอย่างที่นี่ครับ

ตัวอย่างที่ 3 กล่องที่มีพื้นหลังไล่สีก็ยังทำขอบโค้งได้นะ
ในกรณีที่เราต้องการทำกล่องซึ่งมีพื้นหลังแบบไล่สีให้มีขอบโค้ง เราก็สามารถทำได้ โดยใส่ keyword ว่า transparent เพียงเท่านี้ก็เรียบร้อย

คลิกเพื่อดูตัวอย่างที่นี่ครับ

ตัวอย่างที่ 4 เอาไปทำเมนูก็แจ่ม
ทีนี้เราจะทำเมนูขอบโค้งบ้าง แต่เนื่องจากว่า ปกติแล้วกล่อง (div) และ เมนู (ul) นั้นจะมีความแตกต่างกันตรงที่พื้นหลังของกล่องจะไม่มีการเปลี่ยนสี แต่เมนูนั้นจะมีการเปลี่ยนสีได้ (a, a:hover) เพราะฉะนั้นจึงต้องใช้ keyword ว่า transparent เพื่อให้เมนูสามารถเปลี่ยนสีได้

คลิกเพื่อดูตัวอย่างที่นี่ครับ

ตัวอย่างที่ 5 ทำกล่องแบบกำหนดความสูงด้วย li
ในการทำกล่องนั้น บางทีเราไม่จำเป็นจะต้องใช้ div เสมอไปนะคับ ให้ดูการใช้งานเป็นหลัก อย่างในกรณีนี้นั้นเราต้องการทำกล่องหลาย ๆ กล่องเรียงต่อกัน ซึ่งข้อมูลด้านในดันมีความเกี่ยวข้องกันซะด้วย จึงสามารถใช้ li (list) แทนได้ กรณีนี้ที่จริงจะใช้ div ทำกล่องทุกกล่องก็ไม่ผิดนะครับ แต่เพียงแค่ต้องการนำเสนอเทคนิคการทำกล่อง(ที่ถูกต้อง) อีกแบบหนึ่งเท่านั้นเอง

คลิกเพื่อดูตัวอย่างที่นี่ครับ

ตัวอย่างที่ 6 กล่อง 2 กล่องโดยกำหนดให้ความสูงที่ยืดออกเท่ากัน
บางครั้งถ้าเรามีกล่อง 2 กล่อง ซึ่งเราอยากให้มันยืดออกเท่า ๆ กันไม่ว่าแต่ละกล่องจะมีข้อมูลหรือไม่ก็ตามก็ให้ยึดความยาวของกล่องที่มีข้อมูลมากเป็นหลัก ทำได้โดยใส่ keyword ว่า same-height เพียงเท่านี้ก็จะได้กล่อง 2 กล่องที่ยืดออกเท่ากันแล้ว

คลิกเพื่อดูตัวอย่างที่นี่ครับ

ตัวอย่างที่ 7 เอาไปใช้ทั้งเว็บกันเลยดีกว่า
ทีนี้เรามาดูหน้าเพจที่มีการใช้ขอบโค้งอย่างหลากหลายกันคับ
ปล. เนื่องจากมีการใช้ css ค่อนข้างเยอะ จึงทำ external css แทนนะครับ ชื่อ NiftyLayout.css

คลิกเพื่อดูตัวอย่างที่นี่ครับ

จะเห็นว่าถ้าเราทำขอบโค้งด้วยวิธีนี้ จะทำให้ประหยัดโค้ดกว่าวิธีแบบเดิม ๆ เยอะเลย
สำหรับคนที่สนใจสามารถดาวน์โหลดไฟล์ตัวอย่างทั้งหมดได้ ที่นี่

อ้างอิงและได้แรงบันดาลใจจาก : http://www.html.it/articoli/niftycube/index.html

ปกติแล้ว Sitemap ในเว็บไซต์ทั่ว ๆ ไปจะมีรูปแบบที่เรียบง่ายไม่ได้มีการตกแต่งด้วย CSS อะไรมากมาย ยิ่ง Sitemap ที่มีการแยกย่อยหลายลำดับชั้นด้วยแล้วนั้นแทบจะไม่ได้มีการตกแต่งหรือมีการตกแต่งด้วย CSS น้อยมาก เพราะฉะนั้นวันนี้เราจะมาตกแต่ง Sitemap ของเราให้ดูน่าใช้งานมากขึ้นกันครับ

ก่อนอื่นเรามาดูโครงสร้างของ Sitemap ตัวอย่างที่เราจะนำมาทำกันก่อนคับ

<ul id="sitemap">
     <li>Home</li>
     <li>Information
     <ul>
          <li>Personal</li>
          <li>Company Info</li>
     </ul></li>
     <li>Tutorials
     <ul>
          <li>Photoshop</li>
          <li>XHTML</li>
          <li>CSS
          <ul>
               <li>directory-like Sitemap</li>
               <li>Simple Horizontal Menu</li>
          </ul></li>
          <li>PHP</li>
     </ul></li>
     <li>Contact</li>
     <li>Links</li>
</ul>

ค่า Default ของ list ใน ul นั้น ในลำดับแรกคือ (disc) ลำดับที่ 2 คือ (circle) และลำดับต่อ ๆ ไปคือ (square) ตามรูปภาพด้านล่าง

ต่อไปเราก็เตรียมรูปภาพที่เป็นเส้นประสำหรับนำมาวางเป็น bullet ด้านหน้าเมนู ในที่นี้ผมเตรียมไว้ให้แล้วสามารถ copy ไปเก็บไว้ได้เลยครับ

เมื่อเรา copy รูปภาพเส้นประเรียบร้อยแล้ว ขั้นตอนต่อไปเราจะเขียน CSS เพื่อตกแต่ง Sitemap กันครับ โดยที่ code CSS ที่นำมาใช้มีดังนี้

#sitemap {color: black;}
#sitemap li {list-style-type: none;}

#sitemap ul {color: #a92626;}
#sitemap ul li {
list-style-image: url("l2_normal.gif");}
#sitemap ul li.firstfollow { /* li ตัวแรก */
list-style-image: url("l2_first_follow.gif");}
#sitemap ul li.last { /* li ตัวสุดท้าย */
list-style-image: url("l2_last_item.gif");}

#sitemap ul ul{color: #255d9c;}
#sitemap ul ul li {
list-style-image: url("l3_normal.gif");}
#sitemap ul ul li.firstfollow { /* li ตัวแรก */
list-style-image: url("l3_first_follow.gif");}
#sitemap ul ul li.last { /* li ตัวสุดท้าย */
list-style-image: url("l3_last_item.gif");}

เมื่อเราทำการกำหนด class ให้กับ HTML แล้ว ก็จะได้ Sitemap ออกมาเป็นแบบนี้คับ

จะเห็นว่าการทำ Sitemap นี้ก็จะเหมือนกับเป็นเทคนิคการทำเมนูรูปแบบหนึ่งนั่นเอง ซึ่งสามารถนำไปประยุกต์ใช้งานได้หลากหลายทีเดียว ในคราวหน้าผมจะอธิบายวิธีการทำเมนูด้วย CSS ในรูปแบบอื่น ๆกันครับ

อ้างอิง : http://www.alexandersperl.de/tutorials/css/sitemap.php

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

เป็นไกด์นำทางไปยังสถานที่ที่ต้องการ (อย่าลืมระบุด้วยหละว่าจะไปไหน) ซึ่งสามารถนำไปประยุกต์ใช้ได้กับการหาเส้นทางไปยังห้องต่าง ๆ ในสถานที่ที่ค่อนข้างใหญ่ เช่น สนามบิน, โรงพยาบาล หรือสถานที่ราชการ เป็นต้น

แปลข้อมูลในหน้าจอให้เป็นภาษาที่ต้องการได้โดยอัตโนมัติ น่าจะถูกใจสำหรับผู้ที่ความรู้ทางด้านภาษาไม่แข็งแรง

ปกติเรามักจะเคยชินกับการค้นหา คำสำคัญ (keyword) ในเว็บไซต์ต่าง ๆ แต่เจ้าอุปกรณ์พกพาตัวนี้สามารถค้นหา keyword ในเนื้อหาจำนวนมากที่ปรากฏบนหน้าจอได้อีกด้วย

เวลามองขึ้นไปบนท้องฟ้าแล้วเห็นดาวเต็มฟ้าตอนกลางคืน เคยนึกสงสัยกันมั้ยครับ ว่าดวงดาวต่าง ๆ ที่มองกันอยู่มันคือดาวอะไรกัน เจ้าอุปกรณ์ตัวนี้ช่วยท่านได้คับ (อะไรมันจะเว่อร์ขนาดนั้น)

หรือถ้าอยากรู้ว่าต้นไม้ต้นนี้เวลามันออกดอกมาจะเป็นอย่างไร ก็เพียงแค่มองต้นไม้ต้นนั้นผ่านเจ้าอุปกรณ์ตัวนี้ก็จะเห็นต้นไม้ต้นนี้ที่ออกดอกสะพรั่งบานเต็มต้นอย่างที่เราต้องการทันที (แถมยังบอกรายละเอียดอื่น ๆ เกี่ยวกับต้นไม้ต้นนี้ด้วยนะจะบอกให้)

จะเห็นได้ว่าเจ้าอุปกรณ์ตัวนี้มีความสามารถในการประยุกต์ใช้กับงานต่าง ๆ สูงมาก เป็นแนวความคิดที่นำ User Interface มาใช้อย่างมีประสิทธิภาพ ดังจะเห็นได้จากการใช้งานที่ดูเรียบง่าย ไม่ซับซ้อน ไม่ต้องทำความเข้าใจอะไรมากก็สามารถใช้งานได้ทันที เข้ากับ concept “Look and Feel” ได้ดีจริง ๆ

บทความหน้าเราจะมาดูความสามารถอื่น ๆ (อันสุดแสนจะล้ำสมัย) และ อุปกรณ์ที่ถูกออกแบบมาเพื่อรองรับแนวความคิดนี้กันครับ

วันนี้ผมขอนำเสนออุปกรณ์พกพาในอนาคต (อันใกล้) นี้ครับ ซึ่งมีจอภาพแบบสัมผัส (touch screen)  โดยที่เจ้าอุปกรณ์พกพาตัวนี้เนี่ยจะรวมการใช้งานต่าง ๆ ไว้ด้วยกัน อาทิเช่น สามารถถ่ายรูปได้, สแกนได้ และแถมยังสามารถเชื่อมต่อ WiFi เพื่อใช้ google map (อาจจะสามารถพัฒนาไปถึงขั้นใช้งาน google earth ได้ด้วย) รวมไปถึงระบบ search ของ google ได้อีกด้วย ซึ่งสิ่งต่าง ๆ เหล่านี้รวมอยู่ในอุปกรณ์พกพาเครื่องนี้เพียงเครื่องเดียว (All in one device)

อุปกรณ์พกพาชิ้นนี้ยังสามารถบอกได้ด้วยว่า สิ่งที่ปรากฏอยู่บนหน้าจอนั้นคืออะไร แต่จำเป็นจะต้องทำการกำหนดขนาดของพื้นที่ที่ต้องการทราบด้วย (จะเห็นว่าในรูปเค้ากำหนดขนาดคือ ขอบของตึกทั้งสองด้าน) โดยจะเปรียบเทียบรูปที่อยู่บนหน้าจอกับผลการค้นหารูปภาพใน goolge image search แค่นี้เราก็จะรู้แล้วว่า มันคืออะไร !!!

หรือเพียงแค่คุณเลือกตึกมาซักตึกนึงและจิ้มไปยังชั้นที่ต้องการ เจ้าอุปกรณ์พกพาตัวนี้ก็จะบอกรายละเอียดเกี่ยวกับตึกนี้ทันที ความสามารถของมันไม่ได้มีเพียงแค่บอกรายละเอียดของตึกได้อย่างเดียว แต่มันสามารถบอกรายละเอียดได้ทุกอย่างที่ปรากฏบนหน้าจอ ไม่ว่าจะเป็นยี่ห้อรถยนต์, ชื่อแมลง, หรือประเภทของอาหารหรู ๆ ในภัตตาคาร (แถมบอกราคาด้วยอีกต่างหาก) หรือว่าชื่อของคนที่สร้างสะพาน เป็นต้น

สแกนเนอร์ที่ติดตั้งอยู่ภายในก็สามารถสรุปใจความสำคัญของเนื้อหาในหนังสือพิมพ์, หนังสือ หรือนิตยสารได้อีกด้วย

แถมมันยังสามารถอ่านตัวอักษรในหนังสือได้ด้วย และยังสามารถใช้ดิกชันนารี, wikipedia หรือบริการอื่น ๆ ในเว็บไซต์ควบคู่กันไปได้อีกด้วย (อะไรจะขนาดนั้น !!!)

อย่าเพิ่งตกใจไปนะคับ อุปกรณ์พกพาตัวที่เห็นนี้เป็นเพียงแค่ชิ้นงานที่ถูกออกแบบมาเท่านั้น แต่ในปัจจุบัน แนวความคิดนี้ก็ได้ถูกนำไปพัฒนาเพื่อสร้างเป็นอุปกรณ์ต้นแบบ (phototype) เรียบร้อยแล้ว ซึ่งอยู่ในช่วงของการทดสอบการใช้งานอยู่ แต่คาดว่าอีกไม่นานในอนาคตเราก็คงจะได้ใช้เจ้าอุปกรณ์พกพาทำนองนี้แน่นอน

คราวหน้าเราจะมาดูความสามารถในการใช้งานอื่น ๆ อันเหนือคำบรรยายของเจ้าอุปกรณ์พกพาตัวนี้กันครับ

อ้างอิง : http://petitinvention.wordpress.com/2008/02/10/future-of-internet-search-mobile-version/