Group Blog
 
 
กุมภาพันธ์ 2554
 
 12345
6789101112
13141516171819
20212223242526
2728 
 
5 กุมภาพันธ์ 2554
 
All Blogs
 

การจัดโค้ดข้อความวิ่งๆบนแบนเนอร์ ตอนที่ 1











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



เทคนิค การจัดโคด "ข้อความวิ่งๆบนแบนเนอร์" ดูตัวอย่างและลายละเอียดโดยจขบ.จะยกรูปตัวอย่างรูปล่างนะคะ....รูปที่กำหนด มาจะเห็นว่าในส่วนของช่องที่เขียนข้อความจะอยู่สูงจากขอบซึ่งเราจะใช้เทคนนิ คเล็กๆน้อยๆในการจัดขอความให้อยู่เป็นที่เป็นทางตามที่เราต้องการค่ะ
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>
ใส่ขนาดของข้อความ
ใส่สีให้ข้อความเลื่อนๆ
หมายเหตุ ..... เวลาจัดและวางโคดทั้งหมดอย่าให้โคดแตกแถวเพราะจำทำให้มีผลของการใช้งานค่ะ
 
เพื่อนๆลองหัดทำ จากรูปด้านล่างแล้วฝากผลงานไว้ที่กล่องคอมเม้นก็ได้นะคะ...ความรู้ทั้งนั้น..ขอบคุณค่ะ

lozocat


lozocatlozocat

คลิก ดูโคดแบบนเนอร์สำเร้จรูปได้ที่นี่ค่ะ

lozocatlozocat
T O P
lozocatlozocat







 

Create Date : 05 กุมภาพันธ์ 2554
2 comments
Last Update : 5 กุมภาพันธ์ 2554 22:16:28 น.
Counter : 1097 Pageviews.

 

วิธีทำให้คนอื่นรัก...ง่ายมาก
คือ รีบรักคนอื่นเสียก่อน

อย่าพูดถึงใครในแง่ร้าย

ถ้าอยากสวย...ยิ้ม!

เชิด ทรงศรี
(นักเขียน ผู้กำกับภาพยนตร์)

 

โดย: Elbereth 7 กุมภาพันธ์ 2554 12:45:08 น.  

 

ขอบคุณเจ้า ตี้แวะมาแอ่วหา และสำหรับคอมเม้นท์น่ารักๆ

 

โดย: น้ำโซดา@kaengho.com (sodacawaii ) 5 สิงหาคม 2554 4:48:47 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 


sodacawaii
Location :
เชียงใหม่ Thailand

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 1 คน [?]




Friends' blogs
[Add sodacawaii's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.