Bloggang.com : axer - การทำกรอบข้อความเลื่อนเอง«-(¯`v´¯)«--

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

เลือก Slices from Guide (เราว่าวิธีง่ายกว่าการที่เราจะไปทำ สไลซ์ ทีละส่วน

ไปที่เครื่องมือ Rectangle ทาบวัดกรอบแต่ละส่วนที่เราแบ่งไว้แล้วดูขนาดที่ได้นะ

ดูจากหน้าต่างที่ชื่อ ว่า Info ถ้าหาไม่เจอไปที่ Windows --> Info

<TABLE height=273 cellSpacing=0 cellPadding=0 width=359 align=center background=//i75.photobucket.com/albums/i309/mini-cat/fdinga/dinga06.gif border=0>
<TBODY>
<TR>
<TD noWrap width=10 height=39> </TD>
<TD width=179 height=39> </TD>
<TD noWrap width=170 height=39> </TD></TR>
<TR>
<TD noWrap width=10 height=215> </TD>
<TD width=179 height=215>
<DIV style="SCROLLBAR-FACE-COLOR: #F4E5D3; SCROLLBAR-HIGHLIGHT-COLOR: #78461C; OVERFLOW: auto; WIDTH: 179px; SCROLLBAR-SHADOW-COLOR: #F4E5D3; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #F4E5D3; SCROLLBAR-ARROW-COLOR: #78461C; SCROLLBAR-DARKSHADOW-COLOR: #78461C; HEIGHT: 215px" align=center><STRONG></STRONG>
<P style="FONT-SIZE: 12px; COLOR: #998a07" align=center>แก้ไขข้อความ</FONT></P>
<P style="FONT-SIZE: 12px; COLOR: #998a07" align=center>Text Here</FONT></P></DIV></TD>
<TD noWrap width=170 height=215> </TD></TR>
<TR>
<TD noWrap width=10 height=19> </TD>
<TD width=179 height=19> </TD>
<TD noWrap width=170 height=19> </TD></TR>
</TBODY>
</TABLE></FONT>

Hight = ความสูง
Widht = ความกว้างนะ

เอาหละ เมื่อได้ตัวเลข พร้อมกับโค้ดแล้วนะ มาดูตรงนี้กัน

สีม่วง คือ ความกว้าง + สูง ของรูป นะคะ
สีน้ำเงิน คือ URL ของรูปที่ฝากไว้
สีเขียว คือ ความกว้าง+สูง ของทั้ง 9 ส่วนที่เราแบ่งไว้ ไล่ไปตามลำดับ 1-9 โดยส่วนที่ 5 คือส่วนที่จะใช้เขียนข้อความ
สีฟ้า คือ ความกว้าง+สูง ของ ส่วนที่เราแบ่งไว้ตรงกลาง เพื่อใส่ สกอลล์บาร์
สีส้ม คือ โค้ดสกอล์บาร์ (เปลี่ยนสีกันเองนะจ๊ะ ลองมั่วๆดู ว่าอะไรคืออะไรนะ)
สีแดง คือ ส่วนที่ไว้ใส่ข้อความค่ะ