aima-kun :: Variation Living.

มีเหตุให้ว่างอีกแล้ว มา ม. แต่เช้า ปรากฏว่าจารย์สอนบ่าย = ='
ว่างไป 2-3 ชม. จะกลับไปนอนก็ใช่ที่...

พอกลับมาดูโครงสร้างที่เขียนเป็น XML ไว้มันขาด ๆ ไปนิดหน่อย ขอโทษครับ ^^'

ที่หายไปมี
- CSS ของแท็ก <form> กับ <input>
ไม่ต้องคิดมาก ส่วน <form> คือส่วนที่ให้กรอก comment ของเรื่อง ๆ นึง
<input> ก็คือส่วนที่เป็นกล่องข้อความ และปุ่มต่าง ๆ ในฟอร์ม

ทั้งสองอย่างสามารถแก้สี, Background หรือรูปแบบปุ่มที่บางเว็บเป็นแบบปุ่มแบน ๆ ได้ครับ

- โครงสร้างของส่วน Commentด้านล่าง (ตอนผมแกะเมื่อวาน ดันไปแกะที่หน้าแรกเลยไม่เห็น)
อยู่ในส่วนสุดท้ายของ midtab

ขอยาวอีกนิด... เอารูปตัวอย่างมาด้วยจะได้ชัดเจนขึ้น

- ทั้งหน้าที่เห็น =#midtab
- กรอบบนสุดที่ชื่อเหมือน Title ของบลอค =.title
- รูปภาพลายสวย ๆ= .picture
- ใต้รูป= .content (ทั้งกรอบซ้ายกรอบขวา)
- กรอบซ้ายที่มี Profile กับลิงค์ =.rightcontent
- กรอบด้านขวาที่แสดงเรื่องต่าง ๆ ที่เราเขียน =.leftcontent

*ไม่ต้องงงกับตำแหน่ง เพราะเราใช้ CSS จัดตำแหน่งมันได้!

- กรอบวันที่ =.iday
- หัวเรื่อง =.entrytitle เนื้อหา =.entrycontent
- กรอบสีเขียว =.entryfooter
- กรอบสีน้ำเงิน =form (ทั้งกรอบ)กับ input (กล่องข้อความกับปุ่ม)
- ตรงข้อความ comment= .commentcontent
- ชื่อผู้comment=.commentposter เส้นใต้สีฟ้า =.commentdetail

ถ้ายังงง ๆ เปิดอีกหน้าต่าง แล้วเข้าบลอคตัวเองดู ที่ Theme เลือก 4. Config CSS
ดูประกอบภาพน่าจะเข้าใจขึ้น ^-^

(อธิบายภาษาคนไม่รู้เรื่อง แหะ ๆ)

จริง ๆ แล้วบลอคนู๋เต้มีวิธีตกแต่ง CSS แบบStep by Step นะ
แต่ว่า ถ้าอยากได้ Reference ของ CSS Properties ไว้แก้แบบพิสดารก็ดูได้ที่โรงเรียน

มีสอนการใช้ CSS เป็นภาษาอังกฤษ แถมมีโค้ดให้ลองเขียนบนเว็บทันที ^-^

ลองแก้เล่นแบบนี้ดู
- เซฟหน้าบลอคของตัวเอง กับ CSS ของบลอค (html,css อย่างละไฟล์)
- แก้โค้ด HTML ให้ดึง CSS ในเครื่องแทน (ต้องเป็นHTML นิดนึง)
-เปิดด้วย Dreamweaver ทั้งสองไฟล์(แก้เฉพาะ CSS)
พอแก้เสร็จ Refresh ในดรีมได้เลย ไวกว่าเยอะ

ถ้าจะแก้บนเว็บเลย อย่าลืมก๊อปปี้โค้ดในหน้า Config CSS ทั้งหมดเก็บไว้ในเครื่อง
เผื่อเสียจะได้เอาโค้ดเดิมมาแปะ *-*

ป.ล. สังเกตดี ๆ form กับ input ใช้กับ CSS ได้เลย ไม่ต้องใส่ . หรือ #
(เพราะมันเป็น Tag HTML)