ลำดับตอนที่ #43
คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #43 : ไอดีดรีม - วีธีเอาจากดรีมลงไอดี
โปรแกรมที่ใช้ ดรีม
ระดับความยาก 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> </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 วันกว่าจะมาได้อัพตอนต่อไปน้า รอหน่อยละกัน
เก็บเข้าคอลเล็กชัน
ความคิดเห็น