css กับการจัดวาง xhtml ในกล่องข้อมูล

บทความโดย : พร อันทะ เมื่อ Sat 18 August 2007 14:42:08

ก่อนหน้านี้ ในหลายๆ บทความ ผมได้พูดถึงเรื่อง การจัดวางข้อมูล อย่างเป็นระบบของ xhtml มาบ้างแล้ว มาคราวนี้เราลองนำ css เข้ามาตกแต่งหน้าเอกสาร บ้างเป็นไร ผมจะยังพูดถึงลักษณะ การจัดวางข้อมูลแบบเดิมๆ ในกล่องนั่นคือ มี div, h1, p, strong, span, em, img ซึ่งแต่ละอันจะถูก นำมาใช้ให้เหมาะสม กับการนำเสนอข้อมูล

ในตัวอย่างต่อไปนี้ ผมขอสมมุติเรื่องราวขึ้นมา 1 เรื่องแล้วกันนะครับ ผมอยากจะเอาเนื้อหาทั้งหมดทีมีใส่ลงไปในกล่อง โดยเลือกใช้ xhtml elements เดินตามเนื้อเรื่อง

ตัวอย่างแสดงผลออกมาแบบนี้

เราไปดูโค้ดทั้งหมดกันครับ

xhtml ทั้งหมดที่ผมเลือกใช้ มี

1. h1 : หัวเรื่องของเนื้อหา
2. p : แสดงผลเนื้อหา
3. blockquote : แสดงคำพูดสำคัญ
4. div : ควบคุมโครงสร้าง
5. q : แสดงประโยคคำพูด (ไออี 6 นรกตามเคย)
6. strong : ตัวหน้าที่เน้นความสำคัญ
7. em : ตัวเอียงที่ความหมายมีนัยยะต่างไป
8. span : การแสดงผลทางสีที่ต่างกัน
9. img : แทรกรูปภาพ

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

<div>
<h1></h1>
<p><q></q></p>
<p><img></img></p>
<p><strong></strong><span></span><em></em></p>
<blockquote></blockquote>
</div>

เมื่อนำข้อมูลที่มีอยู่มาใส่

<div>

<h1>ต้นนุ่น สะพาน ร้านน้ำแข็ง</h1>

<p><q>แก</q></p>

<p><q>แก</q></p>

<p><q>แกจะรักฉันไหม</q></p>

<p>ชายหนุ่มยังไม่ยอมลดละความพยายามที่จะถามเพื่อนสาวที่เขาเคยบอกรักเธอมาเป็นร้อยเป็นพันครั้ง แต่ยังไม่ได้คำตอบที่แน่ชัดจากปากของฝ่ายหญิง สักที ทั้งๆ ที่รู้ว่าคำตอบที่เขาจะได้กลับมานั้นมันคือคำตอบที่เคยได้ยินจากปากของเธอมาก่อนแล้ว</p>

<p>บางครั้ง ถ้าเธอรำคาญก็ก็จะบอกว่า <strong><q>ฉันยังพูดเหมือนเดิม</q></strong> แต่มันก็ไม่ได้ทำให้ความพยายามที่จะ <span>รัก</span> จากชายคนนี้ลดน้อยถอยลงไปเลย</p>

<p>บางทีเขาคงต้องมานั่งขบคิดและจริงจังกับคำว่า <em>ฉันยังพูดเหมือนเดิม</em> ของเธอใหม่ และทำตัวใหม่ให้สมกับการเป็นเพื่อนที่ดีต่อกันอย่างเดิมที่เคยรู้สึกก็เป็นได้ แต่จะทำอย่างไร เพราะในใจมันไม่ยอมสั่งให้ทำอย่างนั้น เมื่อในใจมันไม่ได้สั่ง ความอยากไม่ได้เกิด กระนั้นจะทำการใดให้ขัดกับความเป็นจริงของใจตัวเองมันก็อยากที่จะทำเขาจึงปล่อยให้มันเป็นไปตามกาลเวลาอย่างนี้มาเรื่อยๆ </p>

<p><img src="coffe-cup.jpg" title="รัก พักจิบกาแฟ" alt="Coffe for Lover" /></p>

<p>5 ปีมาแล้ว มันไม่ใช่ห้วงเวลาสั้นๆ กับการทำความรู้จักกันฉันท์เพื่อน และพัฒนาการมาเป็นความรักแบบอื่น นอกจากรักแบบเพื่อน ตามที่ฝ่ายหญิงต้องการ</p>

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

<p><strong>กว่าที่ความทรงจำอันดีเก่าๆ จักผุดขึ้นมาใหม่ก็ใช้เวลาเยียวยาล่วงหลายปี</strong></p>

<blockquote>แกไม่จำเป็นต้องตอบฉันก็ได้นะ ฉันก็ถามไปงั้นๆ แหละ ทั้งๆ ที่รู้คำตอบอยู่ในใจ</blockquote>

</div>

นำ css มาควบคุม

* {
    padding: 0;	
    margin: 0;	
    outline: 0;
}
body {
    font-family: Tahoma;	
    font-size: 0.8em;	
    background: #4e382f;	
    margin-top: 1em;
}
div {	
    position: relative;	
    width: 494px;	
    margin: 0 auto;	
    background: url(bg-all.gif) repeat-x #f6f5f1;	
    border: solid 3px #ffffff;
}
p {	
	padding: 0 1em 1em 1em;
}
h1 {	
    color: #3e271e;	
    padding: 1em 1em 1em 1em;	
    height: 64px;	
    background: url(h-bg.gif) no-repeat;	
    font-size: 1.5em;
}
blockquote {	
    position: absolute;	
    right: 0;	
    top: 2em;	
    width: 175px;	
    height: 100px;	
    padding: 40px 10px 10px 20px;
    background: url(bq.gif) no-repeat right top;	
    font-weight: bold;	
    text-align: center;
}
span {	
    color: #FF99CC;	
    font-weight: bold;
}
img {	
    display: block;	
    margin: 0 auto;	
    border: #d77487 solid 3px;
}

มาไล่จับรายละเอียดทีละชิ้นกันครับ

1. <div>

ลักษณะการใช้งานโดยนำมาเป็นตัววางโครงสร้างหลัก โดยใช้ css ควบคุม ให้มีความกว้างรวม 500px และจัดกลางหน้าด้วย margin: 0 auto; เพิ่มเติมรูปภาพพื้นหลังเข้าไปและใส่เส้นขอบสีขาว

2. <h1>

หัวข้อหลักที่สำคัญที่สุด แน่นอนอยูแล้วครับว่าต้อง h1 การแสดงผลพิเศษ ที่ผมเพิ่มเข้ามาคือ ใส่พื้นหลังรูปภาพให้นั่นเอง

3. <p>

ย่อหน้าทั้งหลาย ในที่นี้ไม่มีอะไรแปลกใหม่ แค่เพียงเอาไว้คั่นแสดงว่า แต่ละย่อหน้ามีข้อมูลมากมายแค่ไหนเท่านั้นเองครับ

4. <q>

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

5. <strong>, <span>, <em>

ตามนั้นเลยครับ

6. <img>

ถ้าอยากจะจับ รูปภาพจัดกลาง แค่สั่ง display: block; แล้วก็ตามด้วย margin: 0 auto; เท่านั้นครับ

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

มีความสุขกับการทดลองและประยุกต์ใช้ ด้วยตนเองครับ

ความคิดเห็น 4 | แสดงความคิดเห็น

^ Back To Top