Back to iWebsmile.com

Tag: HTML5

หยุดใช้ IDs Selector กับ CSS

หยุดใช้ IDs Selector กับ CSS

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

Element Selector (body, ul, li) = 1 points
Class Selector (.classname) = 10 points Continue reading

CSS Short hands

ผมเชื่อว่า Web Designer หรือ Web Developer หลายๆ คนต้องเคยปรับแต่ง แก้ไข หรือเคยเขียน CSS กันมาแล้ว และหลายๆ คนก็คงงงกับการเรียกใช้ Property ผมจะขอทบทวน CSS เบื้องต้นให้ท่านได้อ่านทำความเข้าใจง่ายๆ ก่อนนะครับ

Cascading Style Sheet หรือที่เราเรียกย่อๆ กันว่า CSS คือ ภาษาหรือชุดคำสั่งในการจัดการหน้า HTML เพื่อให้การแสดงผลถูกต้อง เช่นการกำหนดสีพื้นหลัง สีอักษร จัดโครงสร้างหน้า HTML เป็นต้น Continue reading

การสร้าง Mobile Application ด้วย Dreamweaver (Starter)

สำหรับคลิปนี้ ผมขอพูดถึงการสร้าง Mobile Application จากโปรแกรม Adobe Dreamweaver CS6 และการนำชุดสีจาก jQuery Mobile Swatches บนโปรแกรมและการ Download Themes color swatches มาใช้งาน (สำหรับผู้เริ่มต้นนะ) Continue reading

เรื่องเล็กๆ ที่มือใหม่ มือโปรไม่รู้

คุณรู้หรือไม่ว่า “เว้นวรรค” ด้วยการกด Spacebar บนคีย์บอร์ด หรือการกด Ctrl + Shift + Spacebar มีผลแตกต่างกัน โดยปกติที่เราทราบกันคือ ถ้ากด Space bar ในโค้ด HTML จะสร้างช่องว่างให้ ” ” แต่ถ้าเรากด Ctrl + Shift + Spacebar จะสร้างโค้ดให้ “ ”
แต่คุณรู้หรือป่าวว่าถึงแม้ว่าผลลัพธ์ในการแสดงจะเหมือนๆ กัน แต่ทำงานแตกต่างกันนะ
ยกตัวอย่างผมจะพิมพ์คำว่า “Responsive Web Design” มาดูตัวอย่างกันดีกว่า Continue reading

Adobe Widget Browser

เครื่องมือระดับเทพ สำหรับนักออกแบบเว็บไซต์
God Tool 4 Web Designer

วันนี้ผมขอเอาเครื่องมือสำเร็จรูปที่ทาง Adobe รวบรวมไว้ให้เราใช้กัน ตัวนี้มีชื่อว่า Adobe Widget Browser ครับ ตอนแรกเนี่ยผมก็ไม่กล้าเล่นกลัวว่ามันจะต้องเสียเงิน แต่พอลองเล่นดูก็สามารถดาวน์โหลดมาใช้งานได้เลยครับ ซึ่ง Script นั้นก็เป็นของ Programmer จากหลายๆ ค่าย Continue reading

กระชับไฟล์ CSS ให้เล็กลงเพื่อการโหลดที่ไวขึ้น

สำหรับ Web Designer แล้วหลายต่อ ต่อหลายคน ที่ไม่เคยเรียน Programming หรือโค้ดทางด้าน CSS HTML มาบ้าง อาจจะไม่ทราบข้อนี้

การเขียนโค้ด ลักษณะที่ยาวเป็นบรรทัดเดียว จะทำให้ ไฟล์ นามสกุล .html หรือ .css หรือไฟล์โปรแกรมใดๆ ก็ตาม จะมีขนาดที่เล็กลง และจะช่วยใช้การโหลดบนหน้าเว็บไซต์ของเราเร็วขึ้นทันตาเห็นทีเดียว
ตัวอย่างเช่น
body{
margin:0 auto;
background-color:#999;
}
แล้วคุณลอง Save ไฟล์ CSS ใครเครื่องของผมได้ไฟล์ขนาด 48bytes แต่พอผมเปลี่ยนเป็นแบบนี้ Continue reading

What’s Dummy Text? มารู้จักกับดัมมี่เท็กซ์

คุณคือนักออกแบบใช่ไหม?
You‘re designer?

สำหรับนักออกแบบทั้งมือใหม่และมือเก๋าทั้งหลายที่ยังไม่รู้จักกับ Dummy Text จะต้องประสบกับปัญหาแบบนี้ เหมือนๆ กันทุกคนแน่นอนครับ

D : คุณมีเนื้อหาสักเล็กน้อยให้ผมจัดใส่ งานออกแบบที่จะมานำเสนองานของคุณไหมครับ
C : เนื้อหายังไม่มีให้เลยค่ะ เพราะว่าทางเราก็ยังเตรียมข้อมูลไม่เสร็จ
D : -..-” กำ!! (แล้วตรูจะเอาเนื้อหาไรใส่ให้มันว่ะ)

จากตัวอย่าง Conversation ด้านบนทำให้เหล่า Designer ทั่วโลกที่เราอยู่ใบนี้รวมตัวกันก่อตั้ง สมาพันธ์ Dummytext ขึ้นมา เหอๆจริงๆแล้วมั่วครับ Dummy Text หรือในที่รู้จักกันของคนไทยคือ Lorem Ipsum สำหรับ Designer คงเป็นที่รู้จักกันดีแน่ๆ ครับ เพราะว่าอะไร ก็เพราะว่า.. ในการออกแบบ ไม่ว่าจะเป็น Graphic Design, Web Design ก็จะต้องมีเนื้อหา Continue reading

© 2010-2013 iWebSmile — all right reserved.