6 1

ตัวอย่างพื้นฐานของ DIV SET

 

DIV SET คืออะไร?

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

 

Div Set ประกอบไปด้วย 4 ส่วนหลักก็คือ

1. Div Main จะเป็นโครงสร้างหลัก ที่กำหนดไว้ใช้งานร่วมกับ Class " container-fluid " ของ Bootstrap เพื่อแสดงผลข้อมูลหรือ Module ในหน้าเว็บไซต์แบบเต็มพื้นที่หน้าจอ

 

<div id="top-main" class="container-fluid">

.........

</div>

 

2. Div Body จะเป็นโครงสร้างหลัก ที่กำหนดไว้ใช้งานร่วมกับ Class " container " ของ Bootstrap เพื่อแสดงผลข้อมูลหรือ Module ในหน้าเว็บไซต์แบบตรงกลางหน้าจอ 

 

<div id="top-body" class="container">

.........

</div>

 

3. Div Cal จะเป็นโครงสร้างหลัก ที่กำหนดไว้ใช้งานร่วมกับ Class " col-xs-12 col-sm-12 col-md-12 col-lg-12 " ของ Bootstrap เพื่อกำหนดขนาดความกว้างของคอลัมน์ ที่จะใช้กับ ข้อมูลหรือ Module โดยการปรับตัวเลขความกว้างที่ชุด class เท่านั้น

 

<div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">

.........

</div>

 

4. ชุดคำสั่งเรียกใช้งาน Module จะเป็น code ที่ไว้สำหรับเรียกใช้งานตำแหน่ง Module Positions ต่างๆ ตามชื่อที่เรากำหนดไว้ใน code นั้นๆ

 

<jdoc:include type="modules" name="logo" style="xhtml" />

  

ตัวอย่าง code เรียกใช้งาน Module ที่ Positions ที่ชื่อ logo

 

 ดังนั้น เบื้องต้นการที่จะสร้างตำแหน่งในโครงสร้าง เราก็อาศัย Div Set เป็นตัวกำหนดโครงสร้างพื้นฐาน โดยภาพรวมของชุดคำสั่งนี้ก็จะเป็น

 

<div id="top-main" class="container-fluid">

     <div id="top-body" class="container">

          <div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">

               <jdoc:include type="modules" name="logo" style="xhtml" />

           </div>

     </div>

</div>

 

6 2

ตัวอย่างตามชุดคำสั่งของ Div set

 

จากตัวอย่าง เราจะได้ตำแหน่ง top ที่แสดงข้อมูลแบบตรงกลาง โดยมี Module ที่ใช้ Positions ที่ชื่อ logo ซึ่งมีขนาดความกว้าง 3 ส่วน (จาก 12 ส่วน ใน 1 แถว)

 

กรณีแสดงผลขอ้มูลแบบเต็มหน้าจอ

เพียงแค่เรานำชุด div ของ body ออกไป เราก็จะได้การแสดงผลแบบเต็มหน้าจอ

 

<div id="top-main" class="container-fluid">

    

          <div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">

               <jdoc:include type="modules" name="logo" style="xhtml" />

           </div>

     

</div>

 

6 3

ตัวอย่างการแสดงผลแบบไม่มี Body class="container"

 

ในการใช้งานแบบนี้ ขึ้นอยู่ว่าท่านจะแสดงผลด้วย Module อะไรเป็นหลัก 

 

การกำหนด CAL

ส่วนการใช้งาน Cal นั้นจะเป็นการกำหนดตาม MOdule ที่จะแสดง โดย cal ทั้งหมดที่แสดงต่อแถว จะรวมกันแล้วจะต้องมีความกว้างไม่เกิน 12 

 

<div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">
   <jdoc:include type="modules" name="logo" style="xhtml" />
</div>
<div id="menu" class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
   <jdoc:include type="modules" name="menu" style="xhtml" />
</div>
<div id="social" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
   <jdoc:include type="modules" name="social" style="xhtml" />
</div>

 

ให้สังเกตุในส่วน class ของแต่ละ cal จะปรับขนาดในส่วน lg (ขนาดความกว้างสำหรับ PC) ให้มีขนาดที่รวมกันแล้วจะไม่เกิน 12 นั้นเอง

 

6 4

ตัวอย่างการกำหนดในส่วน cal ของ lg ซึ่งเป็นขนาดสำหรับ pc

 

ID ใน Div Set

      id ต่างๆ ที่อยู่ใน Div set จะเป็นตัวกำหนดการนำไปใช้ในส่วนของ CSS ซึ่งจะทำให้ ในแต่ละ Div จะสามารถแยกการกำหนด css เป็นแบบเฉพาะของแต่ละตำแหน่งนั้นๆ

 

<div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 ">
   <jdoc:include type="modules" name="logo" style="xhtml" />
</div>

 

ตัวอย่าง ID ชื่อ logo เราสามารถไปกำหนด css ในไฟล์ css ของเทมเพลต

 

#logo { padding-top:10px; padding-bottom:20px; }

 

จากตัวอย่าง css เราจะได้ตำแหน่ง logo ที่มีระยะห่างภายใน ด้านบน 10px และ ระยะห่างภายใน ด้านล่าง 20px

 

6 5

ตัวอย่างจาก css ของ id ที่ชื่อ logo