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

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

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 550
    จำนวนคนให้กำลังใจ : 0 ครั้ง
    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 วันกว่าจะมาได้อัพตอนต่อไปน้า รอหน่อยละกัน

522 ความคิดเห็น