การนำ Template ไปใช้กับโปรแกรมทำเว็บ จัดทำโดย : Mr.GuruZ พิมพ์
 Un title page การนำ Template ไปใช้กับโปรแกรมทำเว็บ หลายคนคงจะบอกไม่ยาก แต่สำหรับคนที่ไม่เคยก็คงจะนึกภาพไม่ออก ก็ต้องลองอ่านบทความนี้ดูนะครับ

ขั้นตอนการทำ

1. ทำการเปลี่ยนรูปแบบ Template ให้เข้ากับเว็บเรา หรือทำการแก้ไขให้เรียบร้อย ดังภาพ.


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


3. หลังจากที่เราสร้าง Guide เรียบร้อยแล้วให้เราส่งภาพที่สร้างไปยังโปรแกรม ImageReady ที่แถมติดมากับโปรแกรม Photoshop อยู่แล้วโดยกดที่ปุ่ม จะอยู่ด้านล่าง Tools ของตัวโปรแกรม หลังจากที่คลิกแล้วจะได้ผล ดังภาพ


4. จาหนั้นให้ใช้เครื่องมือ Slice เพื่อทำการตัดภาพ (แต่หลายคนคงจะคิดว่า แล้วมีตั้งหลายช่วงจะตัดยังไงหมด @-@) แน่นอนครับจะต้องมีเมนูช่วย หลังจากที่เราเลือกเครื่องมือแล้ว ให้เราขึ้นไปเลือกเมนุ Slices --> Create Slices From Guides โปรแกรมจะทำการตัดทุกเส้นที่เราได้ Guide ไว้ จะได้ผล ดังภาพ


5. คราวนี้ก็มาถึงขั้นตอนสุดท้าย ก็คือการ Save For Web เพื่อนำไปใช้ให้เราเลือกที่เมนู File --> Save Optomized As (Ctrl+Shipt+Art+S) จะมีหน้าต่างให้เรากำหนดเงื่อนไขการ Save ดังภาพ
* อาจจะ Save ไว้ที่ Folder ที่เราใช้ทดสอบก่อนก็ได้ครับแล้วค่อย Copy ไปใส่ Folder ที่ใช้งานจริง


6. จากนั้นลองเรียกไฟล์ Html ที่เรา Save ขึ้นมาทดสอบดู ดังภาพ


7. ถ้าเราจะใส่ Link ก็ใช้ Dreamweaver เปิดไฟล์ขึ้นมาแก้ไขเพิ่มเติมได้เลย ลองนำไปประยุกต์ใช้กับ Template ตัวอื่นๆ ดูนะครับ
คุณอาจสนใจ
การสุ่ม Password
Mr.GuruZ (36,098 - 03 มิ.ย. 49)
เทคนิคการใส่จุลภาค คั่นตัวเลข
Mr.GuruZ (27,937 - 03 มิ.ย. 49)
การเขียนคำสั่ง PHP ร่วมกับ Java Script
Mr.GuruZ (66,197 - 31 ก.ค. 49)
สร้างอักษร 3 มิติ ด้วย Illustrator CS2 (อีกวิธีหนึ่ง)
เว็บไทยดีดี (82,315 - 20 ต.ค. 50)
การทำ animation ต่างๆ
charoen (301,982 - 09 มิ.ย. 51)
การใช้งานคำสั่ง Break
Mr.GuruZ (24,828 - 03 มิ.ย. 49)
Herizontal Type Tool (T)
Mr.GuruZ (41,856 - 22 ก.ย. 50)
เทคนิคในการสร้าง wallpaper รูปดาว
สฟืเน (56,463 - 22 ต.ค. 51)