Hello!!!.. New Friends Come .Some Friends Leave. Hope You keep me into your heart.As i keepyou in mine. I willnever forget you. Promise .
Group Blog
lozocat
lozocat
lozocat
lozocat
lozocat
lozocat
lozocat

lozocat
lozocat
lozocat
lozocat
lozocat
lozocat
lozocat
lozocat
lozocat
Group Blog
 
<<
กันยายน 2551
 123456
78910111213
14151617181920
21222324252627
282930 
 
21 กันยายน 2551
 
All Blogs
 
หัดเขียนโคดใส่ข้อความแบบยากๆๆกันค่ะ

มาหัดเขียนโคดข้อความบนโนตดุ๊กดิ๊กแบบยากๆๆกันค่ะ

ดูตัวอย่างโนตดุ๊กดิ๊ก  และ  โคด ด้านล่าง
ถ้ารูปที่เห็นเป็นแบบนี้หมดก็จะทำให้เขียนข้อความได้ง่ายๆๆใช่มั้ยคะ
 
เขียนข้อความ
 
แต่ไม่ใช่...รูปมีแบบน่ารักๆๆแตกต่างกันไป  อย่างเช่น  รูปที่เห็นด้านล่าง....
เรามีวิธีเขียนข้อความให้อยู่ตรงช่องสำหรับเขียนแบบพอดีๆๆ......

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


เวลาอยู่ต่อหน้าคนที่คุณรัก หัวใจคุณจะเต้นแรง

แต่เวลาอยู่ต่อหน้าคนที่คุณชอบความสุขจะมาเยี่ยมเยือนคุณ


เวลาอยู่ต่อหน้าคนที่คุณรักฤดูหนาวจะดูเหมือนฤดูใบไม้ผลิ

แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ฤดูหนาวจะสวยสดงดงามกว่าปกติ

 




หรือ  จขบ. จะยกตัวอย่างแบบง่ายๆๆ ของ   align="right" valign="bottom" ที่อยู่กับกรอบชั้นแรกให้สังเกต์และนึกภาพแบบง่ายๆๆนะคะ..... กรอบทุกกรอบหรือ  table  ทั้งหมดที่สร้างด้วยโคด  html  แบบพื้นฐาน (..มีซับซ้อนกว่านี้อีกนะคะ.แต่เอาแบบพื้นฐานก่อนละกัน.) ใน1กรอบจะมีอยู่ 9 ช่องด้วยกัน ที่เราจะใช้คำสั่ง กับ  ข้อความที่กำหนดด้วย align="right" valign="bottom"  ดูตามหมาเลขนะคะ.....
 
11
22
33
.
445566

77
88
99
 
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  กรอบ ที่เขียนๆๆไว้ข้างต้นค่ะ


ดูที่รูปด้านล่างนะคะ....จะจัดยังไง ให้ข้อความที่เราเขียนอยู่พอดีกับช่องที่กระดาษโนตดุ๊กดิ๊กกำหนดมาให้.....
 
lozocat
 
ใส่ขนาด  ความกว้าง คูณ ความสูง  ของทั้ง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>
 

เวลาอยู่ต่อหน้าคนที่คุณรัก หัวใจคุณจะเต้นแรง

แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ
ความสุขจะมาเยี่ยมเยือนคุณ

เวลาอยู่ต่อหน้าคนที่คุณรักฤดูหนาวจะดูเหมือนฤดูใบไม้ผลิ


แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ฤดูหนาวจะสวยสดงดงามกว่าปกติ


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



Create Date : 21 กันยายน 2551
Last Update : 24 กันยายน 2553 20:25:00 น. 19 comments
Counter : 4648 Pageviews.

 





Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting
Photobucket - Video and Image Hosting







โดย: lozocat วันที่: 21 กันยายน 2551 เวลา:4:01:13 น.  

 







เป็นความรู้มากเลย ขอบคุณมากค่ะ คุณแคท


โดย: June4 วันที่: 21 กันยายน 2551 เวลา:4:36:13 น.  

 
น่ารักดีค่ะคุณแคท ไว้จะมาเอาไปใช้นะค่ะ

ขอบคุณค่ะ


โดย: thattron วันที่: 21 กันยายน 2551 เวลา:8:06:14 น.  

 


สวยและจะลองทำดูค่ะ

Photobucket


โดย: Cheria (SwantiJareeCheri ) วันที่: 21 กันยายน 2551 เวลา:12:19:30 น.  

 
ขอบคุณคะมาเกบหน้าไว้ไปใช้คะ


โดย: หนึ่งคิด วันที่: 21 กันยายน 2551 เวลา:14:40:20 น.  

 
ขอเก็บกระดาษโน้ตไปก่อนนะคะคุณแคท แต่เรื่องหัดทำต้องขอเวลาหน่อยค่ะ อิอิ เรื่องแบบนี้หัวช้ามากๆ ค่ะ


โดย: อุ่นตะวัน วันที่: 21 กันยายน 2551 เวลา:15:39:29 น.  

 


สวัสดีค่ะ
เวาะมา ขอบคุณคะ
ส่วนใหญ่ก็จะ Copy Code
ไปใช้เลย . เพราะถ้าทำเองคงไม่ไหว
ทำ Link มาที่ Blog แล้วนะค่ะ





โดย: ต้อยตุ๋มต๋อง วันที่: 23 กันยายน 2551 เวลา:12:53:10 น.  

 
ขอบคุณอีกครั้งนะคะ สำหรับโค้ดดีดีที่มีให้เสมอ จะลองอ่านอยางละเอียดและลองหัดทำดูค่ะ


โดย: ตะไคร้หอม วันที่: 25 กันยายน 2551 เวลา:8:53:02 น.  

 
ขอบคุณมาก ๆ นะคะ สำหรับความรู้ใหม่ ๆ
จะลองเอาไปทำดูบ้างค่ะ


โดย: poon_ja7 วันที่: 26 กันยายน 2551 เวลา:18:25:45 น.  

 
ลูกศิษย์ของลงชื่อไว้ก่อนนะคะ
จะมาเรียนภายหลัง ขอบคุณค่ะ


โดย: ดา ดา วันที่: 25 ตุลาคม 2551 เวลา:9:54:25 น.  

 

♥ ชอบแบบสำเร็จ
ง่ายดีค่ะ♥


โดย: ก้าวไปตามใจฝัน วันที่: 13 มกราคม 2552 เวลา:10:33:07 น.  

 
แวะมาศึกษา ขอบคุณมาก ค่ะ ^ ^


โดย: ศรีสุรางค์ วันที่: 31 มกราคม 2552 เวลา:9:36:19 น.  

 
สุดยอดฝีมือ แต่อ่านแล้วรู้สึกว่ายากมาก มีเวลาจะกลับมาอ่านอย่างจริงจังอีกครั้ง


โดย: pantipngon วันที่: 20 กุมภาพันธ์ 2552 เวลา:9:44:13 น.  

 
lสวัสดีค่ะ
เย้ๆ ๆ ทำได้ด้วยค่า
คริ ๆ เชิญคุณครูตรวจงานที่บล็อกด้วยนะคะ คริ ๆ
ขอบคุณสำหรับความรู้ใหม่ ๆ ค่า
ช่วงนี้สนุกสนานกับการแต่งบล็อกมาก ๆ ค่ะ
แล้วก็เข้าบล็อกคุณlozocat ทุกวันเลยค่ะ


โดย: -+-JuStThEgIrL-+- วันที่: 11 เมษายน 2552 เวลา:21:30:54 น.  

 
บล๊อกนี้สีหวานจัง


โดย: kapeak วันที่: 8 มิถุนายน 2552 เวลา:10:53:15 น.  

 
ทำบล็อคได้น่ารักมั่กมากเลยคะ ^ ^


โดย: YaWeN วันที่: 9 สิงหาคม 2552 เวลา:23:03:39 น.  

 
จริง ๆ ค่ะ ถ้าก๊อปมาใช้เลย ก้อจะดีนะคะ เพิ่งจะเริ่มหัดทำค่ะ ก๊อปไปแล้วด้วยค่ะ อิอิ
ว่าแต่จาเอาโค๊ตรูปภาพ หรือ อีโมทีให้มาจากไหนอ่ะคะ แล้ว ถ้าเราใช้ธีมสำเร็จรูปที่ ก๊อปมา เราสามารถจะเปลี่ยน หรือเพิ่มเติม ได้ไม๊คะ หรือว่าต้องใช้ตามนั้นเลย กวนหน่อยน๊าค๊า ไม่รู้จิง ๆ นิ
รู้สึกว่าจาง่วงเพราะตาลาย ขอแน๊พหน่อยนะคะ หุหุ


โดย: eungeang วันที่: 15 มกราคม 2553 เวลา:1:19:29 น.  

 
สวัสดีค่ะ ก้ามปูนะคะ ขอบคุณนะคะน่ารักทุกรูปเลย มาแอบจดแอบจำแอบดึงไปใช้ แต่ก้อยัง งงๆๆเง็งๆๆอยู่ค่า ลองเข้าไปดูหน้าบ้านก้ามปูได้นะคะ ยังไงก้อช่วยแนะนำหน่อยนะคะ ขอบคุณค่ะ


โดย: ก้ามปู (poo_puppo ) วันที่: 25 กรกฎาคม 2553 เวลา:15:15:17 น.  

 
ขอบคุณมากๆ ค่ะ ทำเองคงตาลาย แค่อ่านเฉยๆ ก็ตาลายแล้ว อิอิ


โดย: KHUNie88 (สมาชิกหมายเลข 1041026 ) วันที่: 30 ตุลาคม 2556 เวลา:21:07:16 น.  

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

lozocat
Location :


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

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




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

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