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

ค่าเริ่มต้น

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

    ลำดับตอนที่ #43 : ไอดีดรีม - วีธีเอาจากดรีมลงไอดี

    • อัปเดตล่าสุด 21 ต.ค. 50



    โปรแกรมที่ใช้
    ดรีม
    ระดับความยาก 4.5/5
    บทความที่ควรอ่านก่อน ไอดีดรีม - เตรียมตัว ไอดีดรีม - วาดเลเยอร์เตรียมแปะทับ


    ที่แยกมาอีกหัวข้อเพราะว่ามันต้องอาศัยการอ่าน html นิดหน่อยน่ะ หลังจากที่เราวาดเลเยอร์เรียบร้อยแล้ว เราอยากสอนวิธีเอาลงให้ก่อน เพราะว่าตอนนี้โค๊ดเราจะไม่ยุ่งมาก ทำให้ดูง่ายกว่า หลังจากที่รู้วิธีลงแล้ว เราค่อยมาตกแต่งละกันนะคะ

    เอาล่ะ พร้อมแล้วเราไปดูโค๊ด html กันเลย > <!!


    ขั้นที่ 1 ให้เลือก code จากแถบเลือกมุมมอง


    โปรแกรมจะแสดง html ให้ โค๊ดที่ได้จะประมาณด้านล่างนี้ค่ะ อาจต่างกันไปบ้างตามเวอร์ชั่นของดรีม

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #Layer1 {
        position:absolute;
        left:0px;
        top:0px;
        width:1024px;
        height:769px;
        ;   background-image: url(file:///D|/Image/%5BGame%5D/girl_o81.jpg);
    }

    -->
    </style>
    </head>

    <body>
    <div id="Layer1">
      <p>&nbsp;</p>
      <p align="center" style="font-size: 36px;font-weight: bold;color: #5E9634;">How to do ID Dream by A.T.Ruby</p>
      <p align="center">ขอทดสอบไอดีดรีมเพื่อทำ how to สักครู่เจ้าค่ะ </p>
    </div>

    </body>
    </html>
    ตรงส่วนสีชมพูมันคือ style sheet (css) ซึ่งรู้สึกว่าเมื่อเอามาลงเด็กดีแล้วจะมีปัญหา เราเลยจะสอนวิธีรวม css กับ html ให้ สำหรับใครที่ไม่เห็นส่วนสีชมพู แสดงว่ามันรวมเรียบร้อยแล้วนะคะ (มันขึ้นอยู่กับเวอร์ชั่นของดรีมน่ะ)


    ขั้นที่ 2 เปลี่ยน url ของบีจีก่อน

    #Layer1 {
        position:absolute;
        left:0px;
        top:0px;
        width:1024px;
        height:769px;
        ;   background-image: url(file:///D|/Image/%5BGame%5D/girl_o81.jpg);
    }


    ตรงที่เราไฮไลท์ไว้ คือที่อยู่ของรูป ซึ่งตอนนี้มันจะชี้มาที่เครื่องเรา ปัญหาก็คือ เราไม่สามารถแสดงรูปในเครื่องบทเว็บได้ค่ะ เราต้องเอารูปอัพขึ้นเว็บ แล้วเอา url มาใส่แทน วีธีการดู url รูปภาพ

        background-image: url(http://www.........com/girl_o81.jpg);


    ขั้นที่ 3 รวม css กับ html ให้ สำหรับใครที่รวมเรียบร้อยแล้ว ให้ข้ามไปขั้นต่อไปเลย

    1. ก๊อบ css มา เอาแค่ตรงในปีกปานะคะ จากนั้นรวมให้มันเป็นแถวเดียว (ไปรวมใน notepad ก็ได้ค่ะ สะดวกดี)

        position:absolute;
        left:0px;
        top:0px;
        width:1024px;
        height:769px;
        ;   background-image: url(http://www........com/girl_o81.jpg);
       
    v
        v
        position:absolute; left:0px; top:0px; width:1024px; height:769px; .jpg);

    2. ดูตรงส่วน html (สีน้ำเงิน) ตรงแท็ก div ให้ลบ id="..." ทิ้งซะ <div id="Layer1"> >> <div>

    3. เติมคำว่า style เข้าไปแทน <div> >> <div style="">

    4. จากนั้น ใส่ css ที่เอาไปทำใน notepad ข้อ1 ลงไปในเครื่องหมายคำพูด

    <div style="position:absolute; left:0px; top:0px; width:1024px; height:769px; .jpg);">


    ขั้นที่ 4 เอาไปแปะได้แล้วค่ะ แปะแบบดิบน่อ



    เฮ้อ เหนื่อยเลย ช่วยกันเมนท์ให้หายเหนื่อยหน่อยนะคะ ^^
    คราวหน้าจะสอนวิธีจัดรูปแบบให้ค่ะ ว่าแต่...ใครก็ได้ช่วยบอกเราทีว่าปกติเค้าเอาอะไรใส่ไปในดรีมบ้างง่ะ (อีนี่หลังเขา เหอะๆ)


    ปล. เราจะล้างเครื่องใหม่ค่ะ อาจประมาณ 4-6 วันกว่าจะมาได้อัพตอนต่อไปน้า รอหน่อยละกัน
    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

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

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

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

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

    ความคิดเห็น

    ×