๏ palermos cafe ๏

ดูตัวอย่างกันก่อนเลยนะครับ

• 
• 
• 
• 

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

 

ในตัวอย่างเป็น 2แถว x 2 คอลัมน์ อาจจะดูว่า ไม่เห็นจะยาก ทีนี้มาดู 5แถว x 3คอลัมน์ นะครับ

 

 

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

ทีนี้มาแบบที่ผมจะสอนดีกว่า โค้ดสั้นกว่าเยอะดูรูปแบบ html นะครับ

 

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

css

เริ่มจากการเขียน css ก่อนนะครับ ต้องเขียน "class"  เพื่อเรียกใช้ก่อน ตามตัวนี้ผมตั้งชื่อว่า photo ซึ่งเราสามารถจะตั้งชื่อว่าอะไรก็ได้ที่ไม่ใช่ภาษาไทย

ในส่วนของ span ผมจะใส่แถบกาวเข้าไปเท่ๆ เท่านั้นนะครับ จริงๆไม่ใส่ก็ได้ขึ้นอยู่กับไอเดียของเรา สำคัญจริงๆคือชุดแรก กับชุดที่สอง เท่านั้น พอเขียนcss เสร็จก็ไปต่อในส่วนของการเขียนบล็อกเลย

งานนี้คุณต้องเขียน css เพิ่มขึ้นมาเองในบล็อกของท่าน ซึ่งก็แค่เขียน class ขึ้นมาใหม่ ไม่กี่บรรทัด แล้วท่า่นก็สามารถที่จะนำไปปรับปรุงให้เข้ากับหน้าบล็อกหน้าเว็บของท่านๆได้ ซึ่งในงานนี้ท่านต้อง"รู้ว่าส่วนแสดงเนื้อหาของท่านกว้างเท่าไหร่" แล้วก็ไปปรับค่า width, margin หรือ padding ให้ออกมางามที่สุด มันลำบากตอนครั้งแรกเท่านั้น เพราะพอเราก่งก๊งกับ css ผ่านแล้ว ครั้งหลังสบายมากๆ ไม่ต้องมานั่งยุ่งกับโค้ดตาราง table อะไรนั่น ใส่แต่โค้ดข้างล่างที่จะสอนอย่างเดียว

html

เมื่อเราเขียน css ขึ้นมาแล้วดังตัวอย่างข้างต้นนะครับ ทีนี้ก็หมูแล้ว เวลาที่เราจะทำห้องภาพแบบไม่ง้อตารางก็แค่ เขียนเอนทรี่ใน รูปแบบ html หรือ รูปแบบ Disable WYSIWYG (ผมแนะนำให้ใช้รูปแบบหลังดีกว่า) ทั้ง css กับ html ต้องเขียนขึ้นมาเพื่อทำงานร่วมกันนะครับในหน้าเขียนบล็อกปกติจะไม่สามารถ แทรก class ที่เราเขียนขึ้นมาเองได้

 

 

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

หวังว่าจะทำกันได้นะครับ ถ้าใครที่ไม่เข้าใจก็ลองสอบถามผมมาแล้วกัน