มาหัดเขียนโคดข้อความบนโนตดุ๊กดิ๊กแบบยากๆๆกันค่ะ
ดูตัวอย่างโนตดุ๊กดิ๊ก และ โคด ด้านล่าง
ถ้ารูปที่เห็นเป็นแบบนี้หมดก็จะทำให้เขียนข้อความได้ง่ายๆๆใช่มั้ยคะ
|
| |
| |
| |
แต่ไม่ใช่...รูปมีแบบน่ารักๆๆแตกต่างกันไป อย่างเช่น รูปที่เห็นด้านล่าง....
เรามีวิธีเขียนข้อความให้อยู่ตรงช่องสำหรับเขียนแบบพอดีๆๆ......
สมมุตนี่คือรูปที่เราต้องการ....ให้เราใส่รูป ใส่ขนาด ความกว้าง คูณ ความสูง ของรูปโดยใช้โคดด้านล่างค่ะ... |
| |
 |
| |
| <table border="0" cellspacing="20" width="230" align="center" style="background-image: url('...ใส่..//..ของรูป..'); height: 230px"><tbody><tr><td align="center" valign="middle">ใส่กรอบอีกชั้นที่นี่</td></tr></tbody></table> |
| |
พอสร้างเสร็จแล้ว เรามาดูที่รูปว่า ช่องที่เราจะเขียนข้อความ อยู่ที่ด้านล่างของรูป
ให้เราแก้ที่พิมพ์ สีแดง (ที่จขบ. กำกับไว้ที่โคดด้านบน)...แก้ที่ align="center" valign="middle" เป็น align="center" valign="bottom" ซึ่งหมายถึง ตอนกลาง แถวล่าง ของรูปซึงมีช่องข้อความเล็กๆไว้ให้เราใส่ข้อความ...
ให้เราสร้างกรอบที่มองไม่เห็นด้วยตาเปล่าขึ้นมาอีก1กรอบ...(...แต่ จขบ. จะทำให้เห็นว่ากรอบที่เรามองไม่เไห็นด้วยตาเปล่าเป็นแบบใหน.....) ใส่ขนาดให้มีขนาดเล็กเท่าๆๆกับช่องข้อความที่เราจะเขียน โดยดูที่รูปซึ่งมีขนาด width="230" height: 230px" เราก็ใส่ขนาดให้เล็กกว่ารูปเท่าไหร่คำนวน กันเอาเองนะคะ....จขบ.ใส่ขนาดที่...180px; height: 90px"
|
| |
หรือ ใส่ตามโคดด้านล่างค่ะ ..ซึ่งมีขาดเท่าๆกับช่องที่เราจะเขียนข้อความพอดีๆๆเลยค่ะ
|
| |
| <table border="0" cellspacing="0" cellpadding="0" align="center"><tbody><tr><td align="center" valign="middle" style="width: 180px; height: 90px">เขียนข้อความ</td></tr></tbody></table> |
| |
จัดเสร็จแล้วก็อปปี้โคดทั้งหมดไปวางที่โคดที่เราใส่รูปและจัดขนาดเรียบร้อยแล้วด้านล่างค่ะ
|
| <table border="0" cellspacing="20" width="230" align="center" style="background-image: url('...ใส่..//..ของรูป..'); height: 230px"><tbody><tr><td align="center" valign="bottom">ใส่กรอบอีกชั้นที่นี่</td></tr></tbody></table> |
พอจัดสร็จแล้วเราก็จะมีที่เขียนข้อความขนาดพอดีๆๆกับรูป
ถ้าต้องการจะใส่ โคดมาคี หรือ ข้อความเลื่อนๆๆ ให้ดู ที่โคดมาคีค่ะ
เราจะใส่คำสั่ง ความกว้าง คูณ ความสูง ของข้อความเข้าให้มีขนาดเท่ากันกับ กรอบชั้นที่2 คือ width=150 height=100 และใส่คำสั่งให้ข้อความอยู่ชิดซ้าย ชิดขวา หรือ กลาง หรือเว้นบันทัดให้อ่านได้ง่ายๆขึ้น......... โดยให้เราจัดข้อความที่ต้องการให้เลื่อนๆๆก่อนจะนำไปวางที่โคดด้านล่าง....ดูตัวอย่างที่ จขบ.เขียนก่อนที่จะนำไปวาง เพื่อความสวยงามแบบมืออาชีพ
<p align=left> เวลาอยู่ต่อหน้าคนที่คุณรัก
หัวใจคุณจะเต้นแรง<br/><br/>
แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ
ความสุขจะมาเยี่ยมเยือนคุณ<br/><br/>
เวลาอยู่ต่อหน้าคนที่คุณรัก
ฤดูหนาวจะดูเหมือนฤดูใบไม้ผลิ<br/><br/>
แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ
ฤดูหนาวจะสวยสดงดงามกว่าปกติ</p>
ปอลอ...อย่าลืมใส่ขนาด ใส่สี และรูปแบบ ของฟอนท์ให้เหมาะกันด้วยนะคะ
|
| |
| <font face="tahoma,arial,helvetica,sans-serif" size="2" color="#FFA154">ใส่ข้อความ</font> |
| |
| เมื่อเขียนเสร็จแล้วก็อปี้ทั้งหมดไปวางที่โคด มาคี ด้านล่าง.......ที่เราใส่ขนาด ความกว้าง คูณ ความสูง เรียบร้อยแล้ว |
| |
| <marquee width=150 height=100 direction=up scrollamount=1>ใส่ข้อความที่ต้องการให้เลื่อนๆๆที่นีั่</marquee> |
| |
| จัดวางจ้อความที่เราต้องการให้เลื่อนๆๆ เสร็จแล้ว ก็อปปี้โคดทั้งหมดมาวางที่โคด ที่เราจัดเสร็จเรีบยร้อยแล้ว..ด้านล่าง |
| |
| <table border="0" cellspacing="20" width="230" align="center" style="background-image: url('...ใส่..//..ของรูป..'); height: 230px"><tbody><tr><td align="center" valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" align="center"><tbody><tr><td align="center" valign="middle" style="width: 180px; height: 90px">ใส่ข้อความเลื่อนๆๆที่นี่ค่ะ</td></tr></tbody></table></td></tr></tbody></table> |
| |
| ทีนี่...เราก็จะทีข้อความ ที่เราเขียน เลื่อนๆๆบน โนตดุ๊กกดิ๊กๆน่ารักๆๆที่ ผ่านการจัดวาง และนำเสนออวดเพื่อนๆๆที่เข้ามาเยี่ยมชมบล็อคของเราแบบมืออาชีพ...ตามตัวอย่างด้านล่างค่ะ |
| |
|
|
|
| |
กับอีก1ตัวอย่างของรูป.....ถ้ารูปที่เราต้องการเป็นแบบด้านล่าง ให้ดูที่ โคดแลพดูที่ พิมพ์ที่เป็นสีๆๆที่จขบ. กำกับไว้ ทุกสีเปลี่ยนแปลงได้ค่ะ |
 |
| |
| ใส่ขนาด ความกว้าง คูณ ความสูง ของทั้ง2กรอบ รวมทั้ง โคดมาคี หรือ ทั้ง 3 ขั้นตอนแล้ว...มาดูที่ พิมพ์สีแดง เปลี่ยนจาก align="center" valign="bottom" เป็น align="center" valign="top" หรือตอนกลาง แถวบนของรูป เราก็จะได้ แบบนี้ค่ะ...... |
| |
|
|
|
| |
หรือ จขบ. จะยกตัวอย่างแบบง่ายๆๆ ของ align="right" valign="bottom" ที่อยู่กับกรอบชั้นแรกให้สังเกต์และนึกภาพแบบง่ายๆๆนะคะ..... กรอบทุกกรอบหรือ table ทั้งหมดที่สร้างด้วยโคด html แบบพื้นฐาน (..มีซับซ้อนกว่านี้อีกนะคะ.แต่เอาแบบพื้นฐานก่อนละกัน.) ใน1กรอบจะมีอยู่ 9 ช่องด้วยกัน ที่เราจะใช้คำสั่ง กับ ข้อความที่กำหนดด้วย align="right" valign="bottom" ดูตามหมาเลขนะคะ..... |
| |
| |
| |
11.......align="left" valign="top" หรือ มุมซ้าย ตอนบน ของกรอบ
22....... align="center" valign="top" หรือ กลาง ตอนบน ของกรอบ
33.......align="right" valign="top" หรือ มุมขวา ตอนบน ของกรอบ
44.......align="left" valign="middle" หรือ มุมซ้าย ตอนกลาง ของกรอบ
55.......align="center" valign="middle" หรือ กลาง ตอนกลาง ของกรอบ
66....... align="right" valign="middle" หรือ มุมขวา ตอนกลาง ของกรอบ
77.......align="left" valign="bottom" หรือ มุมซ้าย ตอนล่าง ของกรอบ
88.......align="center" valign="bottom" หรือ กลาง ตอนล่าง ของกรอบ
99....... align="right" valign="bottom" หรือ มุมขวา ตอนล่าง ของกรอบ
ทั้งหมด คือคำลั่งทีี่ใช้กับ align="center" valign="middle" ในแต่ละช่องกรอบ table
แต่ถ้าเราจะใช้คำสั่งนี้ กับกรอบ table ทังกรอบเลย ดูที่ align="center" แถวแรกของ โคดกรอบ table ให้อยู่ี align="center" align="left" align="right" |
| |
หรือดูโคดด้านล่าง ที่ จขบ. จะใช้คำสั่ง ทั้งหมด ให้กับทั้ง 2 กรอบ ที่เขียนๆๆไว้ข้างต้นค่ะ
ดูที่รูปด้านล่างนะคะ....จะจัดยังไง ให้ข้อความที่เราเขียนอยู่พอดีกับช่องที่กระดาษโนตดุ๊กดิ๊กกำหนดมาให้..... |
| |
 |
| |
ใส่ขนาด ความกว้าง คูณ ความสูง ของทั้ง2กรอบ รวมทั้ง โคดมาคี หรือ ทั้ง 3 ขั้นตอนแล้ว...มาดูที่ พิมพ์สีแดง
คำสั่งแรก จขบ. สั่งให้ กรอบอยู่ตรงกลาง หรือ ไม่ว่าเพื่อนๆๆจะวางกรอบอันนี้ที่ใหนๆๆ ก็จะเห็นอยู่ตรงกลางตลอด
ไม่ว่าโคดตัวใหนๆๆก็เปลี่ยนไม่ได้ค่ะ...ถ้าไม่แก้ที่ align="center" align="left" หรือ align="right"
หรือสั่งให้กรอบย้ายมาอยู่ ด้านซ้าย ด้านขวา ตามความต้องการ
จากนั้น มาดูืั้ พิมพ์ สีฟ้า จขบ. ใช้คำสั่ง align="right" valign="bottom" หรือ มุมขวา ตอนล่าง ของกรอบ |
|
จากนั้นมาดูที่ พิมพ์ สีเขียว (กรอบชั้นที่2 ) ที่กำหนดให้มีขนาดเล็กว่ากรอบชั้นแรก จขบ. ใช้คำสั่ง align="right" หรือสั่งให้กรอบวางอยู่ที่ มุมขวา ของรูป แค่เปลี่ยนจาก align="center" เป็น align="right" เราก็จะได้ แบบนี้ค่ะ...... หรือถ้าช่องข้อความอยู่ด้านซ้าย ก็เปลี่ยนจาก ขวา มาเป็น ซ้าย แค่นั้นเองค่ะ
|
| |
| <table border="0" cellspacing="20" width="200" align="center" style="background-image: url('//i410.photobucket.com/albums/pp188/p00nim/note-dookdik2/x1pPHu2K6HCG6qDaqSp3VHhE_AhDvnXiw0z.gif'); height: 200px"><tbody><tr><td align="right" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" align="right"><tbody><tr><td align="center" valign="middle" style="width: 95px; height: 70px">ใส่โคดข้อความเลื่อนๆๆที่นี่< /td></tr></tbody></table></td></tr></tbody></table> |
| |
|
|
|
|
| เห็นมั้ยคะ ง่ายๆๆไม่ยากเลย แต่ถ้าอ่านแล้วไม่เข้าใจ หรือสับสน หรือไม่สนใจ หรือแค่อ่านผ่านๆๆไม่เป็นไรค่ะ แต่ถ้าวันใหนเจอรูปที่รูปที่ถูกใจ อยากจะใส่ข้อความไว้อวดเพื่อนๆๆลองเปิดเข้ามาอ่านดู ก็จะทำให้เข้าใชได้ง่ายขึ้นค่ะ |
ฝากข้อความหลังไมค์
Rss Feed
ผู้ติดตามบล็อก : 13 คน [