โค๊ดของแต่งMy:id~Hi5

ลำดับตอนที่ #328 : MY:ID CODE : การทำแผ่นรองได

    อ่า.. เปิดบทเรียนที่ 2 หลังจากทำธีมบลอคไปแล้วเด้อ เอาละ!! เรื่องที่สอน
ในคราวนี้ ก็คือ การทำกรอบใส่ entry นั่นเอง ฮ่า ความจริงไม่ก็ไม่ค่อยมีไร
ที่ยากหรอกอ่ะนะ แต่ต้องใช้ความอดทน ถึก ในการอัพ เราไม่ได้ใช้ CSS ทำแต่
ใช้เขาไถไป เพราะอยากให้ BLog สวย ฮาๆ

เริ่มเลยดีกว่า

    ขั้นแรกก็ต้องเปิด Photoshop กันก่อนละ แล้วก็กำหนดขนาดความกว้าง
ของขนาดกรอบที่เราต้องการ ส่วนความสูงนี่ไม่ต้องยาวมากอ่ะนะ

    ใช้เครื่องมือ Rectangular Marquee Tool < > สร้างกรอบ
สี่เหลี่ยม เพื่อสร้างตารางที่เราต้องการ

    เทสีซะ เลือกสีที่ชอบ แต่ต้องไม่รำคาญลูกกะตานะ เอาลงๆ

    ต่อไปก็อาจจะทำขอบ คลิกเลือก Edit --> Stroke  <มันอยู่ตรงไหนง่า>
แล้วเราก็จะได้กรอบคร่าวๆออกมาแล้ว 

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

    ขั้นตอนนี้เป็นขั้นตอนที่จะทำการชำแหละ   กรอบที่ทำไว้เป็น 3 ส่วน
โดยใช้ Slice Tool < > ตัดยังไงก็ไปดูภาพดิ แล้วก็ save
เลือก Save for web นะ

    ก็จะได้ส่วนประกอบออกมาดังนี้  <ส่วนหัว>   <Bg>  <ส่วนล่าง>

    การนำไปใช้ ให้ดีก็น่าจะมี Dreamweaver อ่ะนะ เปิดโปรแกรมขึ้นมา
สร้างไฟล์ใหม่ จากนั้นก็คลิก Table < >  แล้วกำหนดค่าดังนี้

    จากนั้นเราก็ทำการยัดรูปใส่เข้าไปในตาราง ใช้เครื่องมือ < > ใส่
ส่วนหัว กับ ส่วนล่างลงไปก่อน  แต่ส่วนกลางเราจะใช้การกำหนด BG นะ
อ่ะ < ดูรูป > ส่วนที่กำหนด BG จะอยู่แถบด้านล่าง ชื่อแถบ Properites นะ

    แค่นี้ก็เส็ดแล้ว ก็จะได้กรอบไว้ไปใสข้อความใน Entry 

ส่วนการเอาโค้ดไปใช้ให้คลิกเลือกโหมด Code  < > จากนั้นก็
ก๊อบโค้ดตารางที่เราสร้างขึ้น เพื่อไปใส่ในEntry ก่อนวางก็ต้องเปลี่ยนเป็นโหมด
Code ด้วย คลิกเครื่องหมาย <> อ่ะนะ

   แนะนำเพิ่มเติม
  บางเว็บจะมีให้โหลดตารางที่สำเร็จรูปแล้ว ลองหาๆดู
  ถ้าไม่มี Dreamweaver ละ อ่ะ มีโค้ดให้นะ < โหลดๆอีกแล้ว >
  นอกจากการแบ่งเป็นสามส่วน แล้วยังมีการแบ่งเป็น 9 ส่วนอีก
     การแบ่งแบบนี้ก็เพื่อที่จะขยายด้านข้างด้วย แต่สำหรับเราก็ไม่จำเป็นมั้ง
  ถ้ารูปไม่ขึ้นก็หมายความว่า Url ของรูปไม่สัมพันธ์กับใน Sever นะ
           เข้าโหมด Code  <>   แล้วแก้ Urlอ่ะนะ
---------------------------------------------------------------------------------------

เครดิต  < My.iD >