How to ตกแต่งนิยาย / ไอดี

ลำดับตอนที่ #31 : แผ่นรองไดแบบใส่สกอร์บาร์

โปรแกรมที่ใช้ แพด
ระดับความยาก 3/5
บทความที่ควรอ่านก่อน ทำกรอบในไอดี โดยใช้ตาราง (โปรแกรมดรีมฯ) หรือ ทำกรอบในไอดี โดยใช้ตาราง (แพดกับอิมเมจเรดี้) จะเอาไฟล์มาใช้ต่อค่ะ

วิธีทำกรอบก็เหมือนเดิม แต่พอเราทำกรอบเสร็จแล้ว ให้ไปตรงที่เราเว้นไว้ใส่ตัวหนังสือ แล้วใส่แท็กนี้ลงไป
<div style="overflow: scroll; width: 250; height: 150;">ข้อความ</div>
ตรง width,height ให้เปลี่ยนเป็นขนาดข้อความที่จะให้แสดงโดยไม่มีสกอร์บาร์ ส่วนตรงข้อความนี่จะทำในดรีมก่อนก็ได้ค่ะ แล้วค่อยใส่แท็กนี้คลุมเข้าไปอีกที เพราะว่าพอใส่เข้าไปแล้ว รู้สึกมันจะแก้ข้อความในดรีมไม่ได้ ต้องพิมพ์โค๊ดอย่างเดียว ^^;


คำอธิบายโค๊ด
ถ้าไม่สนใจเรื่องการทำเว็บ ข้ามไปดูตัวอย่างเลยก็ได้นะคะ

แท็ก div เป็นแท็กที่ใช้กำหนดขอบเขตค่ะ (defines a division/section in a document แปลไงดี เหอๆ) ใช้บ่อยมากๆ ลำพังเองตัวแท็กไม่ได้ทำให้อะไรก็ตามที่อยู่ในแท็กนี้เปลี่ยนแปลงอะไรเลย แต่เราสามารถกำหนดคุณสมบัติให้แท็ก div เพื่อใช้ในการจัดรูปแบบได้... งงล่ะสิ เราอธิบายเองยังงงเองเลย -*-

ขอยกตัวอย่างละกัน
<div>ข้อความ</div>

<div align="center">ข้อความ</div>

<div style="color:#FF0000">ข้อความ</div>

ตรง style นี่ก็คือ css ค่ะ เค้าเรียกว่า inline style definition คือเราไม่ได้แยกออกมาต่างหาก แต่ฝังไปกับ html เลย วิธีใส่ก็คล้ายๆ กับที่เราเคยสอนมา แต่ไม่ต้องกำหนดเป็นแท็ก <style> ตรงนี้เอาไปประยุกต์ใช้ได้หลากหลาย สำหรับตอนนี้ style ที่เราใช้ก็คือ
width,height ไม่บอกก็คงรู้เนอะ (ไม่รู้สมควรกลับไปทบทวนใหม่ ไม่ก็ไปเรียนภาษาอังกฤษเพิ่มเติม เหอๆ)
overflow บอกว่าจะเกิดอะไรขึ้น หากข้อความ (รูปภาพ ฯลฯ ที่อยู่ในแท็กนี้) เลยขอบเขตออกไป มันจะไม่มีประโยชน์อะไรเลยหากไม่เซตขอบเขตของข้อความโดย width,height กำหนดค่าได้ดังนี้
    visible คือปล่อยให้มันเลยไปทั้งอย่างนั้นแหล่ะ
    hidden ซ่อนเอาไว้ถ้าหากเลย
    scroll ให้มีแถบ scroll bar เลื่อนดูได้
    auto คล้ายๆ กับ scroll มั้ง ถ้าจำไม่ผิด (ขี้เกียจลอง 55+)
เอาไปลองใช้กันเองนะคะ (ปัดความรับผิดชอบอีก - -")



ตัวอย่างโค๊ด
สีเทาคือส่วนที่เป็นกรอบที่เราเคยทำไว้แล้วนะคะ ไม่ต้องไปสนใจมันมากก็ได้

<table background="http://image.dek-d.com/4/728230/6172929jpg." border="0" cellpadding="8" cellspacing="0" height="476" width="425">
<tr><td width="265">
    <div style="overflow: scroll; width: 250px; height: 150px;">
        <p>ข้อความ</p>
        <p>ข้อความ</p>
        <p>ข้อความ</p>
        <p>ข้อความ</p>
        <p>ข้อความ</p>
        <p>ข้อความ</p>
    </div>
</td><td width="160">&nbsp;</td></tr>
</table>

ข้อความ         ข้อความ         ข้อความ         ข้อความ         ข้อความ         ข้อความ