<:: Closed { iDDream } 2.0!!

ลำดับตอนที่ #12 : ✖ Howto::> ทำไอดีดรีมแบบคอลัมน์ #1

ขอโทษที่ให้รอกันนานจ้า X) มาแล้วครับสำหรับวิธีทำไอดีดรีมแบบคอลัมน์ ไม่พูดอะไรมากนะครับ ก็จะขอเริ่มสอนเลยแล้วกัน โดยก่อนจะเริ่มทำกันจริงๆ เราต้องวางแผนก่อนครับ โดยไอดีดรีมแบบนี้นั้นมีข้อจำกัดคือ ต้องทำเป็นคอลัมน์เท่านั้น ซึ่งคอลัมน์ที่ว่านี้หมายถึงเป็นกล่องที่มีความสูง

เอ อาจจะฟังดูงงๆ แต่ให้ดูรูปนี้ http://image.dek-d.com/23/1003832/104895023 (รูปเดิมๆ 555+) คือจะทำเป็นแถบๆ สองแถบ หนึ่งแถบ กี่แถบก็ได้ตามใจเราครับ... ;w; ส่วนจะเว้นที่จากด้านบนหรือไม่นั้นแล้วแต่เราครับ

วิธีการวางแผนก็ง่ายๆ ร่างแบบมายไอดีที่เราอยากได้ในกระดาษ (หรือใน photoshop) ตามต้องการคร่าวๆ ว่าส่วนนี้ เป็นแถบเมนูนะ ส่วนนี้เป็นเนื้อหา เช่น



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



จริงๆ ถ้าชำนาญแล้วไม่ต้องร่างก็ได้ แต่สำหรับคนเพิ่งเริ่มผมว่าร่างก็ช่วยพอสมควรนะ พอลองร่างอะไรๆ เสร็จแล้ว เราก็มาเรียนรู้ HTML กันซักนิด โดยแท็กหรือคำสั่ง HTML ที่เราจะใช้ในตอนนี้คือแท็ก div (<div>) ซึ่งสามารถทำหน้าที่เสมือนเป็น "กล่อง" ได้ (ซึ่งก็คือ layer น่ะแหละ แต่ในที่นี้เราจะเขียนกันเอง) โดยปรับแต่งระยะห่าง คุณสมบัติของกล่องที่ว่านี้ ฯลฯ ได้

พอทราบกันไปพอสมควรแล้วก็มาดูเลยว่าต้องทำอะไรอีกบ้าง ที่ต้องทำก็คือ คิดไว้เลยว่าจะให้คอลัมน์นี้ระยะห่างอะไรเท่าไหร่ โดยรวมระยะห่าง ความกว้าง ฯลฯ ของแต่ละคอลัมน์แล้วไม่ควรเกิน 1000px จะได้แสดงผลได้ดีในทุก reslution (ขนาดจอ)


 

ซึ่งเราสามารถยืดหยุ่นได้ในภายหลังครับ =P คือค่อยไปแก้อีกทีก็ได้ แค่คร่าวๆ ไว้ เสร็จแล้วก็ได้เวลาเริ่มทำ ก่อนอื่นก็ตระเตรียมส่วนประกอบต่างๆ (ทั้ง bg, head, รูปที่จะใส่, ฯลฯ) ให้เรียบร้อย ล้างไอดี แล้วก็ยัดโค้ดนี้ลงไป

<style type="text/css">
body { background: url(URL พื้นหลัง); }
</style>
 

ถ้าจะเอาเป็น Background สี ก็

<style type="text/css">
body { background: #โค้ดสี; }
</style>

แล้วก็มาใส่คอลัมน์กัน ก่อนอื่นก็ใส่โค้ดนี้ลงไป

<style type="text/css">
.ชื่อ class { background: #โค้ดสีพื้นหลังคอลัมน์;
width: ความกว้างpx; height: ความสูงpx;
position: absolute; top: ระยะห่างจากด้านบนpx; left: ระยะห่างจากด้านซ้ายpx;
</style>
<div class="ชื่่อ class">test</div>

ตอนนี้อาจจะงงๆ ว่าอะไรเป็นอะไร ชื่อ class คือ ชื่อที่เรากำหนดขึ้นมาเอง ที่ต้องเป็นภาษาอังกฤษ จะเป็นอะไรก็ได้ (ยกเว้น hr1,hr2,modulebg1,modulebg2,left,right,external, ฯลฯ ที่ปรากฏอยู่ในโค้ดล้างไอดี ไม่แนะนำให้ตั้งเพราะอาจจะมีปัญหา ในที่นี้สมมุติผมตั้งเป็นชื่อ column1 ก็ได้

<style type="text/css">
.column1 { background: #FFF;
width: 500px; height: 1000px;
position: absolute; top: 0px; left: 20px; }
</style>
<div class="column1">test</div>

อะไรแบบนี้เป็นต้น โดยถ้าจะเพิ่มอีกคอลัมน์อื่น ก็เติม ส่วนไส้ของ style เข้าไป และเติมบรรทัดที่เป็น div เช่น

<style type="text/css">
.column1 { background: #FFF;
width: 500px; height: 1000px;
position: absolute; top: 0px; left: 20px; }
.column2 { background: #EEE;
width: 200px; height: 1000px;
position: absolute; top: 0px; left: 540px; }
</style>
<div class="column1">test</div>
<div class="column2">test</div>

ถ้าจะเพิ่มอีกก็ทำไปเรื่อยๆ แต่มีข้อควรระวังอยู่ นั่นก็คือ ระยะห่างจากด้านซ้าย จะหมายถึง ระยะห่างจากด้านขอบจอซ้าย ไม่ใช่จากคอลัมน์ก่อนหน้า ตัวอย่างเช่น .column1 ห่างจากด้านซ้าย 20px แล้วกว้าง 500px ดังนั้น รวมแล้วใช้ที่ของจอไป 520px ถ้าจะทำ column2 ให้ห่างจากคอลัมน์แรกมาทางด้านซ้าย 20px ก็กำหนดระยะห่างจากด้านซ้ายเป็น 540px อะไรแบบนี้เป็นต้น (อันนี้ต้องอาศัยประสบการณ์มั่วดู ถึงจะเข้าใจครับ)

นิดนึงเกี่ยวกับโค้ดคอลัมน์ ตรง background: #โค้ดสีพื้นหลัง; สามารถเปลี่ยนเป็น background: url(url รูปภาพพื้นหลัง); ได้ครับผม =w= และเรื่อง ความสูงควรจะมีความยาวไม่ต่ำกว่า 700px นะครับ ;w; เพื่อความสวยงามในการแสดงผลจ้า

ในขั้นนี้ผมลองเทสเล่นๆ ดู จะได้อะไรเทือกๆ นี้

 

สำหรับบทนี้อาจจะงงๆ กันอยู่เล็กน้อย ถ้าสอนเร็วไป ช้าไป งงไปหรืออย่างไรก็บอกกันได้นะขอรับ _/\_  สำหรับตอนนี้พอแค่นี้ก่อน เจอกันบทหน้าจ้า เอ้อ! บอกตรงๆ ว่าช่วงหลังนี้ไม่ค่อยมีเวลา ดังนั้นนี่เลยเป็นตอนแรกที่อัพตอนเปิดเทอม ขอโทษด้วยจริงๆ จ้า ;w;