ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    How to ตกแต่งนิยาย / ไอดี

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

    • อัปเดตล่าสุด 6 เม.ย. 50



    โปรแกรมที่ใช้
    แพด
    ระดับความยาก 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>

           

    ข้อความ

           

    ข้อความ

           

    ข้อความ

           

    ข้อความ

           

    ข้อความ

           

    ข้อความ

     


    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×