July 3, 2008 at 3:22 pm
· Filed under CSS techniques
ก่อนที่ผมจะรู้จัก CSS นั้น การทำปุ่มเมนูในรูปแบบนี้ นั้นต้องใช้ รูป ถึง 3 รูปเลยทีเดียว คือ รูปขอบด้านซ้าย รูปพื้นที่ตรงกลาง และรูปขอบมนด้านขวา แต่ตอนนี้เราสามารถใช้ CSS ช่วยโดยใช้รูปเพียงรูปเดียว ประหยัดเวลา ประหยัดแบนวิธ ใช้ง่าย ในทุกที่ ยืดได้ แม้ ประโยคจะยาว ลองมาดูวิธีกันครับ
Image

ด้านบนนี้คือตัวอย่างรูป ที่เราจะใช้กัน แต่ผมจะไม่บอกวิธีการทำรูปนะครับ ดาวน์โหลด .psd ไปศึกษาหรือปรับเปลี่ยนกันดูเองนะครับ menubutton.psd
อ่านต่อ คลิกที่นี่ »
Permalink
June 12, 2008 at 12:56 pm
· Filed under Web design
ในการออกแบบบล็อก จะสังเกตได้ว่าการออกแบบส่วนประกอบต่าง ๆ จะมีความแตกต่างกัน ในบทความนี้ผมจะแยกส่วนประกอบพวกนี้ออกเป็น 9 ส่วน หากคุณให้ความสนใจในแต่ละส่วนมากเท่าไหร่ ภาพรวมของบล็อกที่ออกมาจะดูดีมากเท่านั้น
- ส่วนหัว(Header)
- ส่วนเนื้อหา(Content Area)
- เมนูหลัก(Primary Navigation)
- เมนูรอง(Secondary Navigation)
- หัวเรื่อง(Headlines)
- ส่วนแสดงความคิดเห็น(Comments)
- ส่วนท้ายของบทความ(Post’s Footer)
- ส่วนท้ายของบล็อก(Footer)
- โฆษณา(Advertisements)
1.ส่วนหัว(Header)
ส่วนหัวเป็นส่วนที่ผู้เยี่ยมชมส่วนใหญ่จะเห็นเป็นส่วนแรก เมื่อเข้ามาในบล็อกของคุณ และเป็นส่วนที่สำคัญที่สุด มันเป็นสิ่งเดียวที่จะแยก ให้เห็นถึงความแตกต่างระหว่างบล็อกของคุณกับบล็อกอื่น ๆ นับล้านบล็อก เป็นสิ่งที่แสดงถึงเอกลักษณ์ของบล็อกคุณเพื่อให้เกิดการจดจำ จากที่กล่าวมาแสดงให้เห็นว่าทำไมส่วนหัวจึงสำคัญมากที่สุด ในบรรดากระบวนการออกแบบบล็อก แม้แต่คนที่ไม่ให้ความสนใจกับการออกแบบบล็อกสักเท่าไหร่ แต่เขาก็ให้ความสำคัญกับส่วนหัวมาก
ตัวอย่างส่วนหัวที่ดี
1. Octwelve

Octwelve เป็นตัวอย่างที่ดีของการใช้ตัวอักษรที่สวยงาม ในส่วนหัวเพื่อทำให้ส่วนหัวแตกต่างจากส่วนอื่น ๆ ของบล็อกอย่างเห็นได้ชัด และยังทำให้คุณรู้ว่าบล็อกนี้มีเนื้อหาเกี่ยวกับอะไร
2. Cult foo

ผมชอบส่วนหัวของ Cultfoo ตรงที่รูปภาพทะลุออกมาจากกรอบ ที่เดิมทีจะเป็นกรอบโค้งและกรอบเหลี่ยม การออกแบบแบบนี้เรียกร้องความสนใจให้บล็อกได้เป็นอย่างดีทีเดียว
อ่านต่อ คลิกที่นี่ »
Permalink
June 2, 2008 at 2:49 pm
· Filed under Webmaster talks
มาดูกราฟฟิคเอนิเมชั่นสวยๆ จาก Street Fighter IV กัน สุดยอดเกมส์ ที่น้อยคนที่จะไม่รู้จัก ผมเล่นมาตั้งแต่เด็กๆเลย ตั้งแต่ ภาค 2 ตู้เกมส์โน่น มี 2 คลิปครับ ดูกันเลย
Street Fighter IV: A New Beginning
อ่านต่อ คลิกที่นี่ »
Permalink
May 14, 2008 at 10:41 am
· Filed under Tip & Trick
Mod_Rewrite คืออะไร?
Mod_Rewrite คือการแปลง URL ที่ดูยากให้อยู่ในรูปแบบที่เราต้องการ เพื่อประโยชน์หลายด้าน (ซึ่งจะกล่าวถึงต่อไป) และการแปลงเพื่อประโยชน์ด้าน SEO ก็เป็นอีกอันนึงที่มีการนำเอา Mod_Rewrite มาใช้ เพราะเรารู้กันดีว่า Search Engine ไม่ค่อยชอบ pages ที่เป็น dynamic ที่มี query string ยาวเฟื๊อย
ตัวอย่าง URL ที่ยาว และซับซ้อน
โค้ด:
http://www.site.com/viewcatalog.asp?category=hats&prodID=53
เมื่อผ่านการแปลง เราสามารถทำให้สั้นลงได้ดังนี้
โค้ด:
http://www.site.com/catalog/hats/53/
เริ่มทำ Mod_Rewrite
บาง Server ไม่สามารถจะทำ Mod_Rewrite ได้เนื่องจากไม่ได้ติดตั้ง Module Mod_Rewrite ดังนั้นถ้าเราจำเป็นต้องใช้ Mod_Rewrite ก็ต้องตรวจสอบดีๆก่อนเช่า host
.htaccess ไฟล์สำคัญในการทำ Mod_Rewrite
เราจะใช้ไฟล์นี้ในการกำหนด Rule ของการทำ Mod_Rewrite
เริ่มต้นด้วยคำสั่ง
RewriteEngine on
เพื่อเปิดการทำงาน เขียนไว้ในบรรทัดแรกสุดของไฟล์
ต่อไปจะเป็นการนำเอา Mod_Rewrite ไปให้งาน ซึ่งผมจะเริ่มด้วยตัวอย่างง่ายๆ และเขียน Rewrite Rule ง่ายก่อน แล้วก็ยกตัวอย่างต่อไปเรื่อยๆนะครับ
อ่านต่อ คลิกที่นี่ »
Permalink
May 2, 2008 at 11:54 am
· Filed under Webmaster talks
Permalink