How to ตกแต่งนิยาย / ไอดี

ลำดับตอนที่ #22 : ทำกรอบในไอดี โดยใช้ตาราง (แพดกับอิมเมจเรดี้)

ตอนแรกกะจะสอนใช้แพดเพรียวๆ แต่เราว่าประยุกต์ใช้กับอิมเมจเรดี้ง่ายกว่า เลยเอาหยั่งงี้แหล่ะ (บอกแล้วว่าบทความนี้ค่อนข้างเอาแต่ใจคนเขียน อิอิ)

1. เปิดอิมเมจฯ ขึ้นมา แล้วไปที่เมนู file > open... เปิดไฟล์รูปที่จะใช้ทำเป็นกรอบขึ้นมา
2. เลือกเครื่องมือนี้ มันคือ slice tool มีไว้ตัดภาพเป็นส่วนๆ
3. กดค้างที่มุมซักมุม แล้วลากคลุมส่วนที่จะไว้ใส่ตัวหนังสือ ประมาณนี้น่ะ

4. ไปที่เมนู file > save optimized as.. ตรง save as type ให้เลือกเป็น html and images ตั้งชื่อไฟล์ แล้วกดเซฟเลย
5. ไปดูที่โฟล์เดอร์ที่เซฟ เราจะเห็นไฟล์ .html และ โฟล์เดอร์ที่เป็นไฟล์รูปภาพ
6. คลิกขวาที่ไฟล์ .html แล้วใช้โปรแกรม editor อะไรเปิดก็ได้ (เราใช้แพดเลยเพื่อความรวดเร็วในการทำงาน) ดูที่โค๊ด หาคำว่า table

<table id="Table_01" width="425" height="476" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><img src="images/id_border2_01.jpg" width="425" height="48" alt=""></td></tr>
<tr>
<td><img src="images/id_border2_02.jpg" width="266" height="383" alt=""></td>
<td rowspan="2"><img src="images/id_border2_03.jpg" width="159" height="428" alt=""></td>
</tr>
<tr><td><img src="images/id_border2_04.jpg" width="266" height="45" alt=""></td></tr>
</table>

img แท็กสำหรับใส่รูป
src ที่อยู่รูป
width, height คงไม่ต้องบอก ส่วน alt เป็นคำอธิบายรูป ไม่ต้องใส่ก็ได้

คำอธิบายแท็กของตาราง ดูจากบท ตาราง ฉบับ html ของคนทำเว็บ เอาได้ แต่ถึงไม่รู้ก็ยังทำกรอบได้สำเร็จอยู่ดีค่ะ เพราะแก้แค่นิดๆ หน่อยๆ

7 เอาล่ะ นี่คือส่วนที่ต้องแก้ค่ะ

- ช่องที่จะใช้ใส่คำพูด ให้เอาภาพออก (ถ้าใครงง หาไม่เจอ ให้ลองดูจากชื่อรูปเอา ว่ารูปส่วนที่เราจะใช้เขียน ชื่ออะไร อยู่ตรงไหน) อย่างรูปของเราเนี้ย เราจะใส่คำพูดที่ช่องที่มีรูป id_border2_02.jpg เราจะแก้เป็น

<table id="Table_01" width="425" height="476" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><img src="images/id_border2_01.jpg" width="425" height="48" alt=""></td></tr>
<tr>
<td></td> (คือเอาแท็ก img ออกทั้งแท็ก)
<td rowspan="2"><img src="images/id_border2_03.jpg" width="159" height="428" alt=""></td>
</tr>
<tr><td><img src="images/id_border2_04.jpg" width="266" height="45" alt=""></td></tr>
</table>

- แท็ก td ตรงที่เราเอาภาพออก ให้ใส่อันนี้เข้าไปแทน background = "ที่อยู่ของภาพ" 
เราจะให้ภาพนั้นเป็นบีจีในช่อง ทำให้เขียนตัวหนังสือลงไปได้

<table id="Table_01" width="425" height="476" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><img src="images/id_border2_01.jpg" width="425" height="48" alt=""></td></tr>
<tr>
<td background = "images/id_border2_02.jpg"></td>
<td rowspan="2"><img src="images/id_border2_03.jpg" width="159" height="428" alt=""></td>
</tr>
<tr><td><img src="images/id_border2_04.jpg" width="266" height="45" alt=""></td></tr>
</table>

- ตรงชื่อรูปทั้งหมดให้เปลี่ยนเป็น url ของรูปที่เราอัพขึ้นเว็บแล้ว (เปลี่ยนที่อยู่รูปในเครื่องหมาย "" ทั้งหมดนะคะ รวมทั้งแท็ก backgrond ที่เราพึ่งแก้ไปด้วย)
- ทำเครื่องหมายอะไรก็ได้ คลุมคำว่า <table>...</table> ไว้ เพื่อเป็นสัญลักษณ์ใช้ในการก๊อบ

8 จากนั้นให้เซฟไฟล์เป็น .html (คุ้นๆ มั๊ยคะ นี่คือวิธีการใส่โค๊ดแบบสุกนั่นเองค่ะ)
9 เปิดไฟล์ .html ขึ้นมาในเบราเซอร์ ลากแทบดำคลุมตารางและเครื่องหมายที่เราทำไว้
10 ก๊อบไปแปะในไอดีทั้งอย่างนั้นเลย เราจะเห็นว่ามันขึ้นตารางให้

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