Bloggang.com : lozocat - •°¤* เทคนิค การจัดโคด "ข้อความวิ่งๆบนแบนเนอร์" *¤°•

•°¤* เทคนิค การจัดโคด "ข้อความวิ่งๆบนแบนเนอร์" *¤°•

เทคนิค การจัดโคด "ข้อความวิ่งๆบนแบนเนอร์" ดูตัวอย่างและลายละเอียดโดยจขบ.จะยกรูปตัวอย่างรูปล่างนะคะ....รูปที่กำหนด มาจะเห็นว่าในส่วนของช่องที่เขียนข้อความจะอยู่สูงจากขอบซึ่งเราจะใช้เทคนนิ คเล็กๆน้อยๆในการจัดขอความให้อยู่เป็นที่เป็นทางตามที่เราต้องการค่ะ

โคดชั้นที่1.นี่เป็นโคดที่เป็นโคดชั้นนอก กำหนดให้มี ความกว้าง คูณ ความสูง ตามขนาดของรูปตัวอย่างซึ่งก็คือ

width="150" - ความกว้าง

height: 170px - ความสูง

และใช้คำสั่งให้ข้อความที่เราจะเขียนอยู่แถวล่างของภาพพื้นหลังโดยใช้คำสั่ง

valign="bottom" - แถวล่างสุด

ใส่ขนาดตามสีที่กำกับไว้ที่โคดนะคะ. ก็จะได้ออกมาแบบนี้

ตัวอย่างโคดด้านซ้ายมือ

<table border="0" cellspacing="0" cellpadding="0" width="150" align="center" style="background-image: url('...//..ใส่รุปของพื้นหลั....'); height: 170px"> <tbody><tr><td align="center" valign="bottom" >....ใส่โคดชั้นใน....</td></tr></tbody> </table>

แถวล่างสุด

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

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

width="145" align="left" - ความกว้างที่ "145" ( ในส่วนของโคดชั้นในจะไม่กำหนดความสูง ) เราจะใส่ความกว้างที่น้อยกว่ารูปพื้นหลังอยู่นิดนึงเพื่อเว้นระยะห่างของข้อ ความ และ ขอบ ของรูปพื้นหลัง

"width: 13px" - ความกว้างจากขอบด้านซ้ายถึงจุดเริ่มเขียนข้อความ

"height: 26px" ความสูงระหว่างพื้นด้านล่างจนถึงส่วนของข้อความ

ระยะห่างทั้งหมดให้กำหนดตามแบบของแต่ละแบบนเนอร์นะคะอันที่เห็นเป็นแค่ตัวอย่างของรูปที่นำมาเสนอค่ะ

ตัวอย่างโคดชั้นใน

<table border="0" cellspacing="0" cellpadding="0" width="145" align="left"> <tbody><tr><td style= "width: 13px"></td><td align="center" valign="middle">....ใส่ข้อความเลื่อนๆๆ....</td></tr><tr><td colspan="2" style="height: 26px"></td></tr></tbody> </table>

	ใส่ข้อความเลื่อนๆ

เมื่อจัดเสร็จแล้วก็นำโคดชั้นในไปซ้อนโคดชั้นที่ 1.

ก้จะได้โคดซ้อนกันแบบตัวอย่างด้านล่างค่ะ

แสดงให้เห้นส่วนที่เรากำหนดค่าไว้

เมื่อสำเร็จแล้วจะมีผลใช้งานแบบนี้ค่ะ

	ใส่ข้อความเลื่อนๆ

	เขียนข้อความเลื่อนๆ

โคดข้อความเลื่อนๆ..ก็อปปี้โคดทั้งหมดไปวางที่โคดชั้นในค่ะ

<marquee direction="left" scrollamount=2><font size="2" color="#6b75ff">เขียนข้อความเลื่อนๆ</font></marquee>

ใส่ขนาดของข้อความ

ใส่สีให้ข้อความเลื่อนๆ

หมายเหตุ ..... เวลาจัดและวางโคดทั้งหมดอย่าให้โคดแตกแถวเพราะจำทำให้มีผลของการใช้งานค่ะ

เพื่อนๆลองหัดทำ จากรูปด้านล่างแล้วฝากผลงานไว้ที่กล่องคอมเม้นก็ได้นะคะ...ความรู้ทั้งนั้น..ขอบคุณค่ะ