Exteen CSS layout

posted on 02 Jul 2009 19:50 by nodtem32 in Exteen

Version 1.0 ยังไม่สมบูรณ์

คำอธิบายรูป

# แทน id ของ css เช่น #belly คือ <element id="belly">
. แทน class ของ css เช่น .entry คือ<element class="entry">
ในหนึ่ง element ที่มีทั้ง class และ id จะถูกเขียนให้อยู่ใน block เดียวกัน
สำหรับ #?1 คือ ชื่ออ้างอิงถึง id ซึ่งจะถูกอธิบายในด้านล่าง

เนื้อหาที่ถูกอ้างอิง

คุณสามารถข้ามส่วนนี้ไปได้ เหมาะสำหรับอ้างอิงศัพท์ของเทคนิคที่ใช้ในบทนี้
HTML อย่างย่อ

HTML คือภาษาที่ถูกนำใช้ในในการแสดงผลของเว็บไซต์
HTML จะกอบด้วยกลุ่มของ tag จำนวนมาก
tag คือ รูปแบบที่ใช้กำหนดลักษณะของการแสดงผล แบ่งเป็น
- tag เปิด ประกอบด้วย
  - เครื่องหมายน้อยกว่า "<"
  - ชื่อของรูปแบบหรือคำสั่ง มีชื่อเรียกว่า element เช่น html ,body,div
  - ชื่อของรูปแบบเพิ่มเติมหรือคำสั่งย่อย อาจจะมีหรือไม่มีก็ได้และมีได้มากกว่าหนึ่งตัวโดย แต่ละตัวจะถูกคั่นด้วย ช่องว่าง " " มีชื่อเรียกว่า attribute เช่น type,value,color
  - เครื่องหมายเท่ากับ "="
  - ค่าของ attributeใน เครื่องหมายคำพูด เช่น "test","red","text/css" ในกรณีที่มี attribute
  - เครื่องหมายข่องว่าง " " ในกรณีที่มี attribute หลายตัว
  - เครื่องหมายมากกว่า ">"
- tag ปิด ประกอบด้วย
  - เครื่องหมายน้อยกว่า "<"
  - เครื่องหมายทับ "/"
  - ชื่อของรูปแบบหรือคำสั่ง เช่น html,span,script
  - เครื่องหมายมากกว่า ">"
- tag เปิดและปิดในตัวเอง เช่น br,hr ประกอบด้วย
  - เครื่องหมายน้อยกว่า "<"
  - element
  - ช่องว่างและเครื่องหมาย ทบ " /"
  - เครื่องหมายมากกว่า ">"
ถ้ามี tag เปิดต้องมี tag ปิดเสมอ
ตัวอย่างของ tag
- <a href="121212">asdasdasd</a>
- <div id="baba" class="test">testest<div>
- <br />
- <hr />
ตัวอย่าง HTML
- <html>
  <body>
  The content of the body element is displayed in your browser.
  </body>
  </html>
- <html>
  <body>
  
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  
  </body>
  </html>

เข้าใจ Exteen Layout

ส่วนของ #header คือตั้งแต่ส่วนที่เป็นชื่อ blog คำอธิบายจนไปถึงส่วนของรูปภาพ (#coverimage)

ส่วนของ #neck คือส่วนที่อยู่ถัดมาจาก #header แต่ก่อนส่วนเนื้อหา (#belly) ในส่วนจะเป็นที่อยู่ของ widget ทั้งหลายที่คุณใส่ในส่วน top menu จะอยู่ในส่วนนี้ เช่น ถ้าคุณใส่ widget สองตัวคุณจะเห็น .module ในส่วนนี้สองตัว

ส่วนของ #belly คือส่วนของเนื้อหาซึ่งแบ่งเป็น 2 ส่วนคือ

#sidebar และ #sidebar1 คือส่วนของเมนูด้านข้างทั้งข้างซ้ายและข้างขวา ในส่วนนี้จะพบ widget ที่คุณใส่ในส่วนของ#Sidebar1 และ #Sidebar2
#content คือส่วนของเนื้อหา และ ส่วนcomment ประกอบด้วย
1. .entry เป็นส่วนเนื้อหาของ blog ประกอบด้วย
  - .title เป็นส่วนที่แสดงหัวข้อ(Title)
  - .post เป็นส่วนที่แสดงข้อความที่เป็นเนื้อหาของ blog
  - .info เป็นส่วนที่แสดง tag (.tag) และจำนวน comment (.coms)
2. #commentform เป็นส่วนที่แสดง ฟอร์มสำหรับการแสดงความคิดเห็น
3. .comment เป็นส่วนขอ แสดงความคิดเห็นต่างๆ ถ้าคุณมจำนวน comment ใน บทความคุณ 10 comment คุณก็จะเห็น element ที่มี .comment 10 ตัว โดยที่แต่ละตัวประกอบด้วย
  - .post เป็นส่วนของข้อความแสดงเห็นคิด
  - .info เป็นส่วนแสดงข้อมูลของผู้แสดงความคิดเห็น แบ่งเป็น
    - .avatar เป็นส่วนรูปภาพของผู้ comment
    - tag p ซึ่งแบ่งเป็น
      - .commentno เป็นส่วนหมายเลขลำดับความคิดเห็นเห็นก่อนหลัง
      - .commentator เป็นส่วนแสดงชื่อ blog ของเจ้าของ comment
  - .commentmanage เป็นส่วน จัดการ comment ของ เจ้าของ blog
4. .nav คุณส่วนของการแบ่งหน้าจัดการหน้าเช่น next(หน้าถัดไป),prev(ก่อนหน้า),first(หน้าแรกสุด),last(หน้าหลังสุด)

ส่วนของ #leg เป็นส่วนของเมนูด้านล่าง อยู่หลังจาก เนื้อหา (#belly) แต่ก่อนส่วน copyright (#footer) ในส่วนนี้คุณจะเห็น widget ที่คุณใส่ในส่วนของ Bottom menu

ส่วนของ #footer เป็นส่วนแสดงข้อความ Powered by exteen ........

เนื้อหาครั้งนี้จะเชื่อมโยงกับครั้งหน้า โปรดติดตามตอนต่อไป