ออกแบบเว็บ ด้วย เทมเพจ
Home  Contents KMArticlesMembersSponsorsAbout us

ปรับปรุง : 2556-03-02 (ปรับ theme)
ขอบซ้ายขอบบน
template
เทมเพจ คืออะไร
เทมเพจ คือ เว็บเพจต้นแบบที่ถูกออกแบบทั้งโครงสร้าง ภาพ และเนื้อหา มักประกอบด้วยแฟ้มภาพ ตัวอย่างเนื้อหา และรหัสภาษาเอชทีเอ็มแอลที่สามารถนำไปแก้ไขได้ บางครั้งจะมีแฟ้ม .psd ซึ่งมีภาพต้นฉบับให้สามารถแก้ไขได้ด้วยโปรแกรม Photoshop, Imageready หรือ Firework

แบบของเทมเพจ
1. เว็บเพจให้นำมาปรับปรุงได้
2. เทมเพจสำหรับ CMS
3. เทมเพจของผู้ให้บริการโฮส
4. เทมเพจที่มากับอีดิเตอร์
แนะนำเว็บที่ไม่เกี่ยวกับบทเรียนนี้





 
สารบัญ เทมเพจจาก http://www.freelayouts.com
- แผนการสอนระยะสั้น
- แนะนำเว็บ
- เทมเพจ คืออะไร
- แบบของเทมเพจ
- Template Zip Sample
- ขั้นตอน ฝึกปฏิบัติ กลุ่ม A
- ขั้นตอน ฝึกปฏิบัติ กลุ่ม B
- ตัวอย่าง JavaScript และข้อมูล
- รายชื่อผู้เข้ารับการอบรมรุ่น 1

Black Berry

Long Beach

ประสบการณ์จากการสอน รุ่น 1
การอบรมแบ่งเป็น 4 ช่วง ๆ ละ 1.5 ชม. ระหว่างอบรมผมดำเนินการสอนเร็วมาก เพราะมีเนื้อหาที่ต้องสอนให้เสร็จใน 1 วัน ถึง 4 เรื่องใหญ่คือ dream, mspaint, photoshop และ imageready ประกอบกับโชคดีที่ผู้เรียนส่วนใหญ่ใฝ่เรียน มีพื้นฐานคอมพิวเตอร์มาดี และไม่ได้ถูกบังคับให้มา จึงเรียนรู้ได้เร็ว แต่ปัญหาเกิดขึ้นในช่วงที่ 4 คือ ช่วงสุดท้ายที่เตรียมสรุปเรื่อง Template เพราะบทเรียนที่เตรียมไว้ คือ การใช้ imageready แก้ไข template204 แต่ template นี้ซับซ้อนมากเกินไป จึงสอนเรื่องนี้ไม่สำเร็จ จึงเปลี่ยนไปสอน Retouch อีกครั้ง
การสอนช่วงที่ 4 สำหรับรุ่นต่อไป จะแก้ไข template204 ให้เรียบร้อยก่อน แล้วให้นักเรียน download ไปแก้ไขเป็นเว็บเพจต่าง ๆ เพราะจำนวน Layer ใน template204 และการแก้ไข rollover มีมากเกินไป แต่ถ้าเน้นการแก้ไข template ที่ลด layer ที่ไม่จำเป็นออก และใช้ขั้นตอนเพียงไม่กี่ขั้นตอน ก็จะนำ template ไปสร้างกลุ่มเว็บเพจที่สวยงามได้
+ เหตุที่ผมเลิกออกแบบเว็บไซต์ส่วนตัว แล้วแนะให้จิ้ม
แผนการสอนระยะสั้น (Outlines)
1. ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ และโปรแกรมต่าง ๆ
- ความแตกต่างของเว็บไซต์ และเว็บเพจ
- โปรแกรม Dreamweaver, PhotoShop, ImageReady, IE
- การเพิ่ม Font ใหม่ สำหรับ PhotoShop หรือ Windows
- ความสัมพันธ์ของ Webpage, Text, Image, Link, Javascript
2. สร้างเว็บเพจอย่างง่าย ด้วยโปรแกรม Dreamweaver
- สร้างเว็บเพจใหม่ 1 หน้า
- เพิ่ม ข้อความ ลิงค์ และภาพ
3. ปรับปรุง template ที่ไม่ซับซ้อน ด้วย Dreamweaver (37)
- คลาย .zip ของ template
- เปิดแฟ้ม index.html มาแก้ไข
4. ใช้โปรแกรม PhotoShop สำหรับขยาย ย้าย หรือเปลี่ยนสีภาพ
- New แฟ้มขนาด 400 Pixels * 400 Pixels
- Copy ภาพจากเว็บไซต์ แล้ว Paste ลงใน Photoshop
- ฝึก Retouch
5. จัดเก็บงานจาก PhotoShop เป็นเว็บเพจ
- Save เป็น .html แล้วเปิดด้วย Internet Explorer
6. ใช้โปรแกรม ImageReady สำหรับ Slice ภาพ
- Save เป็น .html แล้วเปิดด้วย Internet Explorer
7. ใช้ Rollover
- Save เป็น .html แล้วเปิดด้วย Internet Explorer
8. ปรับปรุง template ที่ใช้ Rollover ด้วยโปรแกรม ImageReady (204)
- คลาย .zip ของ template
- เปิดแฟ้ม .psd มาแก้ไข
9. สร้างเว็บเพจหน้าใหม่ จาก Template ที่มีอยู่
- แก้ไขข้อความแล้วจัดเก็บเปลี่ยนชื่อ
- แก้ไขลิงค์ให้เชื่อมถึงกันได้
แนะนำเว็บ (Web Guides)
- freelayouts.com (Free Templates)
- templatesbox.com (Free Templates : virus)
- steves-templates.com (Free Templates !psd)
- freewebtemplates.com (Free Templates !psd)
- freewebtemplates.com (Free Templates !psd)
- namo.com (ขาย แต่มีตัวอย่างสวย)
- readyplanet.com (Readonly Template)
- design-crafts.com (แก้ภาษาไทยของ Dream)
- mambosolutions.com (สอน Dream)
แบบของเทมเพจ (Template Types)
1. Webpage Template (.zip)
2. CMS Template (Mambohub.com, Postnuke.com)
3. Template in Website (readyplanet.com, tarad.com)
4. Template in Editor (Dreamweaver, Frontpage, Namo)
1. แบบของเทมเพจ (Template Types)
1. Webpage Template (.zip)
ตัวอย่างในเว็บเพจนี้ทั้งหมดเป็น Webpage Template คือ copy template ของมืออาชีพที่เขาทำแจก มาสร้างเป็นเว็บเพจ เมื่อมีหลาย ๆ เว็บเพจ ก็จะกลายเป็นเว็บไซต์ที่ดูดีในที่สุด

templatesbox.com

steves-templates.com

freewebtemplates.com

namo.com

2. CMS Template (Mambohub.com, Postnuke.com, lampangcancer.com, lph.go.th, lampang.com)
Content Management System เป็นระบบที่ผู้ใช้หาข้อมูลมาใส่ให้สมบูรณ์เท่านั้น การออกแบบแทบไม่จำเป็นเลย เพราะผู้พัฒนา CMS สร้าง Template มาให้เลือก ถ้าต้องการแก้ไขก็สามารถทำได้ เช่นการใส่ Header Footer หรือปรับปรุงรูปในเนื้อหาที่เพิ่มเข้าไป

3. Template in Website (readyplanet.com, taradquickweb.com, sitepackage.com, cookkoo.com)

4. Template in Editor (Dreamweaver, Frontpage, Namo)
2. Template Zip Sample (.zip)

Zip Sample #1
จาก: www.steves-templates.com (5t * 8p = 40 Templates)
นำมาใช้ด้วย Dreamweaver หรือ Frontpage ได้ง่าย ๆ เพราะไม่มี .psd ให้
http://www.steves-templates.com/templates/screens/37.html
Download : template37.zip. 46 KB

ในห้อง Source มีเพียง jpg แฟ้มเดียวที่เป็น header แต่ไม่มี logo
ตัวอย่างการนำ Template มาใช้


ตัวอย่าง : http://www.yonok.ac.th/burin/template/dream37/
ตัวอย่าง : http://www.weblampang.com/burin/
Download : dream37.zip 32 KB

Zip Sample #2
จาก: www.free-webpage-templates.info (14t * 3p = 42 Templates)
มี psd ให้ แต่อาจไม่จำเป็น เพราะไม่มีการใช้ Image Rollover
นำมาใช้ด้วย Dreamweaver หรือ Frontpage ได้ง่าย ๆ เพราะไม่มี .psd ให้
http://www.a-135-database.info/layouts/template19/index.html
Download : template19.zip . 1,230 KB

Zip Sample #3
จาก: www.templatesbox.com (9t * 23p = 207 Templates)
มี Template หลายแบบทั้ง Flash, Banner, Logo และ Web
ถ้าใช้จริง ต้องใช้ ImageReady แก้ไข ออกแบบได้ซับซ้อน และ template ต่างกัน
http://www.templatesbox.com/templates/
http://www.templatesbox.com/templates/204.htm
Download : template204.htm.
Download : template204.zip 1,193 KB

Zip Sample #4
จาก: www.templatesbox.com
http://www.templatesbox.com/templates/062.htm
Download : template062.htm. 1,193 KB
Download : template062.ZIP 1,218 KB

Download : 101-idea.zip (only .psd)
not in thaiall.com
3. ขั้นตอน ฝึกปฏิบัติ กลุ่ม A

A1. บทเรียน Dreamweaver
ตอน : ฝึกแก้ไขเทมเพจที่ 37 เป็นอีก 3 เว็บเพจ
1. คลาย template37.zip ลงใน Drive D
2. ใช้ Dream เปิด index.html และเลือก View, Design
3. เปลี่ยน your link เป็น About Us, Products และ Contact Us
4. สำหรับ Link ที่ 4 ซึ่งเหลืออยู่ ให้ลบออก เพราะไม่ใช้ในกรณีนี้
5. เปลี่ยน Link ใน Properties ไปที่ index.html, products.htm และ contactus.htm
6. เลือก File, Save และ Save As ให้ได้ index.html, products.htm และ contactus.htm
7. เปิดแฟ้ม index.html มาเปลี่ยนเนื้อหาส่วน Headline เป็น About Us
8. เปิดแฟ้ม products.html มาเปลี่ยนเนื้อหาส่วน Headline เป็น Products
9. เปิดแฟ้ม contactus.html มาเปลี่ยนเนื้อหาส่วน Headline เป็น Contact Us
10. ทดสอบใน IE ว่าการ Link ระหว่างเว็บเพจต่าง ๆ มีปัญหาหรือไม่
11. Upload ทั้งแฟ้ม .html และ .htm และห้อง img ไปเก็บไว้ในเว็บไซต์ของตนเอง

ตัวอย่าง : http://www.yonok.ac.th/burin/template/dream37/
Download : dream37.zip 32 KB

A2. โครงสร้างแฟ้มของ templatesbox.com
1. ถ้าได้แฟ้ม template062.zip แล้วคลายลงในห้อง d:\template062
2. พบ 3 Folder คือ fonts, html และ psd ในห้อง html มี images และ css
3. ภาพทั้งหมดเก็บในห้อง d:\templatesbox062\html\images
4. แฟ้มหลักที่สามารถนำมาแก้ไข คือ d:\templatesbox062\psd\templage062.psd
5. โดยปกติจะแนะนำให้ใช้ ImageReady เปิด templage062.psd เพราะแก้ง่ายกว่า .html
6. เมื่อเขียนเว็บเพจหน้าใหม่ ให้เปิด templage062.psd มาแก้ไข แล้วจัดเก็บเป็น .html
7. แก้ไขภาพโดย Photoshop เปิดแฟ้ม d:\templatesbox062\psd\templage062.psd
8. แฟ้ม templage062.psd ถูกเปิดได้ทั้ง PhotoShop และ ImageReady
9. หารูปถ่ายเช่น picme.jpg หรือ picme2.jpg มาแทนรูปเดิม

picme.jpg

picme2.jpg

A3. บทเรียน Adobe Photoshop
ตอน : เปลี่ยนภาพเขา เป็นภาพเรา
1. ใช้ PhotoShop เปิด d:\templatesbox062\psd\templage062.psd
2. หารูปถ่าย เช่น picme.jpg หรือ picme2.jpg มาแทนรูปเดิม
3. หลังเปิด templage062.psd ด้วย PhotoShop ให้ Click images folder ของ Layers
4. Click layer ที่ชื่อ man จะพบว่าอยู่ใน Slice 9, 12, 13 และ 16 (ภาพผู้ชาย)
5. Copy ภาพ picme.jpg เข้ามา Paste จะได้ Layer1 อยู่เหนือ Man (ไม่ลบ man ก็ได้)
6. ภาพที่ได้เล็กกว่าภาพ man ให้ขยายไปทับภาพ man ให้มิด .. เป็นอัน OK
7. เลือก Save for Web เป็นแฟ้มชื่อ template062.html ในห้อง d:\templatesbox062\html
8. มีหน้าต่างขึ้นมาถามการ Replace ภาพในห้อง image ให้เลือกแทนที่ไปเลย
9. ออกจาก PhotoShop ไปใช้ Internet Explorer เปิด template062.html ขึ้นมาดู

A4. บทเรียน Dreamweaver
ตอน : เปิด index.html ของ Templatesbox.com มาปรับปรุง และชี้ให้เห็นปัญหา
1. เปิดโปรแกรม Dreamweaver และเปิดแฟ้ม index.html
2. Template ของ templatesbox.com จะแก้ไขได้เฉพาะข้อความ
3. ภาพต่าง ๆ แก้ไขไม่ได้ เพราะถูก Slice ด้วย ImageReady หมด
4. การใช้ Dreamweaver คือ แก้ไขเฉพาะข้อความเท่านั้น
5. ถ้าใช้จัดการกับ Template ของค่ายอื่น จะทำได้ง่ายกว่า

Download : im6box204.zip 450 KB
not in thaiall.com

A5. บทเรียน Imageready 6.0
ตอน : ปรับปรุง template204 เป็น im6box204.psd สำหรับเตรียมสอน
1. วางแผนสร้าง index.html, aaa.html, bbb.html ccc.html และ ddd.html
2. เปิดโปรแกรม template204 และหารูปมาแทนที่รูปผู้หญิง เพื่อให้เป็น index.html
3. เปลี่ยนคำว่า ABOUT ME เป็น AAA และ HOBBY เป็น BBB และ NEWS เป็น CCC และ CONTACT เป็น DDD
4. ใช้ Slice Select Tool เลือก Slice แล้วเปลี่ยน Name และ URL ของ HOME ถึง DDD เป็น index.html ถึง ddd.htm ใน Window slice
5. ในขณะแก้ข้อความของ Rollover ระวังอย่างสร้าง Layer ใหม่
6. เดิมมี 32 slices ลบให้เหลือ 13 slices (การขยับไปเบียดที่มีอยู่ คือการลบ slice เดิม)
7. ลบ Layer ใน text Folder เหลือเพียง 2 Layer คือ copyright กับ header
8. ลบ img ทั้ง 3 ใน image folder
9. ใช้ Slice Select Tool เลือก Slice ที่เป็น main body แล้วดู Window Slice เห็นคำว่า image
10. เปลี่ยน image เป็น no image แล้วพิมพ์ข้อความ เช่น
<table height=100% width=100%><td bgcolor=white valign=top>
Hello boy
</td></table>
11. ใช้ Slice Select Tool เลือก Slice ที่เป็น อยู่ทางขวาบนพื้นขาว
12. เปลี่ยน image เป็น no image แล้วพิมพ์ข้อความ เช่น <pre> แล้วพิมพ์ a ไปสัก 30 บรรทัด
13. ลบ Drop Shadow จาก พื้นขาวใน image foler เพราะมีปัญหาเรื่องเงาของพื้นที่ไม่ไหลตาม text
14. Slice ซ้าย และขวา เปลี่ยนเป็น no image และกำหนดสีพื้นเป็น Foreground Color
15. เลือก Save Optimized As เป็น index.html ในห้องที่เหมาะสม
16. กลับมาแก้ข้อความ แล้ว Save Optimized As เป็น aaa.html ถึง ddd.html โดยเลือก Html Only
4. ขั้นตอน ฝึกปฏิบัติ กลุ่ม B

ImageReady 7.0

B1. บทเรียน Adobe ImageReady 7.0
ตอน : Slice ภาพแล้วจัดเก็บเป็น .html
1. เปิดแฟ้มใหม่ และใส่ภาพด้วย file, place หรือ file, paste
2. เปิดเครื่องมือที่ต้องการจาก Windows, Tools ..
3. ฝึก Slice ภาพด้วย Slice Tools และ Toggle Slice Visibility
4. เมื่อใช้ Slice Tools วาดสี่เหลี่ยมกลางภาพจะได้ภาพเป็น 5 ส่วน
5. เลือก Save Optimized As จะได้ .html และห้อง images ซึ่งมีภาพ 5 ภาพ
6. ถ้าพิมพ์ Text ก็จะเข้าไปอยู่ใน .html เมื่อเปิด .psd ก็จะแก้ไขได้ปกติ

ImageReady 6.0

B2. บทเรียน Adobe ImageReady 6.0
ตอน : Mouse เหนือภาพ แล้วภาพเปลี่ยน ด้วย Rollover
1. เปิดแฟ้มใหม่ และใส่ภาพ ด้วย file, place หรือ file, paste 2 ภาพที่ขนาดพอกัน
2. เปิดเครื่องมือที่ต้องการจาก Windows, Show Rollover ..
3. Slice คลุมภาพ 2 ภาพที่วางซ้อนกันอยู่ ด้วย Slice Tools และ Toggle Slice Visibility
4. ดูที่ Window ของ Rollover แล้ว Click Creates new rollover state จำนวน 2 state
5. มี State ใหม่ชื่อ Over และ Down ให้ลบ Down ออกได้ เพราะไม่จำเป็นในกรณีนี้
6. Click เลือก Over เพื่อเลือกเปลี่ยนภาพ เมื่อ Mouse Over (มิเช่นนั้นจะเป็นภาพเดียวหมด)
7. ดูที่ Window ของ Layer แล้ว Click Layer Visibility ออก สำหรับภาพที่อยู่ด้านบน
8. เลือก Save Optimized As จะได้ .html
9. ใช้ Internet Explorer เปิดแฟ้ม .html ขึ้นมาดูผลลัพธ์ เมื่อ Mouse Over

Download : imageready2p6.psd

ImageReady CS

B3. บทเรียน Adobe ImageReady CS
ตอน : Mouse เหนือภาพ แล้วภาพเปลี่ยน ด้วย Rollover
1. เปิดแฟ้มใหม่ และใส่ภาพ ด้วย file, place หรือ file, paste 2 ภาพที่ขนาดพอกัน
2. เปิดเครื่องมือที่ต้องการจาก Windows, Web Content และ Layers
3. Slice คลุมภาพ 2 ภาพที่วางซ้อนกันอยู่ ด้วย Slice Tools และ Toggle Slice Visibility
4. ดูใน Web Content แล้ว Right Click ที่ภาพ แล้วเลือก Add Rollover State
5. บนภาพที่มีคำว่า over และเครื่องหมาย วนหมุด หมายถึง ขณะนี้อยู่ในสถานะ over
6. กลับไป click ภาพที่อยู่ด้านหน้าใน Layer แล้วเลือก Click Indicates layer visibility ออก
7. ทดสอบการทำงานของ Rollover ด้วยการ Click Preview Document
8. เลือก Save Optimized As จะได้ .html
9. ใช้ Internet Explorer เปิดแฟ้ม .html ขึ้นมาดูผลลัพธ์ เมื่อ Mouse Over

Download : imageready2p6.psd (สร้างจาก 6.0 แต่ใช้ใน CS ได้)

    รายชื่อผู้เข้ารับการอบรมรุ่น1
    (24 ธ.ค.48 9.00-16.00 น.)
  1. พ.ต.ท.ประจัญ ปัญญาแก้ว
  2. พ.ต.ท.ปรีชา เจริญพงศ์
  3. พ.ต.ท.อุดมศักดิ์ ไชยวรรณ
  4. พ.ต.ต.ทรงศักดิ์ ธิติธารวัฒน์
  5. ร.ต.อ.สุไทย การจนโรจน์
  6. ร.ต.ต.หญิง รัฐนันท์ โสณ์นคร
  7. ด.ต.โกศล เครือตัน
  8. ด.ต.บุญจันทร์ สายมูล
  9. จ.ส.ต.สมบูรณ์ ริจริยา
  10. ส.ต.ท.นิพนธ์ สร้อยสน
  11. น.พ.วัลลภ พรเรืองวงศ์
  12. คุณจเรพันธ์ เคลือบคนโท
  13. คุณชัยวัฒน์ พันธ์หงษ์
  14. คุณนพเรศ ก๋าเงิน
  15. คุณนิตยา ชัยวงษ์
  16. คุณบุษบา ลักษณะโยธิน
  17. คุณมยุรี อินต๊ะมา
  18. คุณรุ่งรัตนชนี อินตาคำ
  19. คุณอรรถวุฒิ จิตราทร
    ขั้นตอนการติดตั้งภาษาไทยใน DreamweaverMX
    วิธีแรก
  1. ถ้าเป็น Dreamweaver MX และมีปัญหาภาษาไทย ให้ Download windows874.xml
    ไปไว้ในห้อง C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Encodings
  2. เปิดแฟ้ม EncodingMenu.xml มาแก้ไข
  3. เพิ่มบรรทัดที่มี 874 ลงไปอย่างเหมาะสม
  4. เปิด Dream ขึ้นมาใหม่ แล้วกดปุ่ม Ctrl - U
  5. เข้า Font, Font Setting เลือก Windows 874
  6. เปลี่ยน Proportional Font เป็น microsoft sans serif
  7. เข้า New Document
  8. เปลี่ยน Default Encoding เป็น Windows 874
  9. ปิด Dream แล้ว New Document ใหม่
  10. เปิดเอกสารที่ Save ไว้ก็ไม่พบปัญหาภาษาไทยอีก
  11. วิธีนี้ยังพบปัญหาภาษาไทยใน Code View
    วิธีที่สอง (File From Thaiware.com)
  1. ติดตั้ง Thai Add-on จึงจะใช้ภาษาไทยใน Code View ได้
  2. เปิด Dream ขึ้นมาใหม่ แล้วกดปุ่ม Ctrl - U
  3. เข้า Font, Font Setting เลือก Windows 874
  4. เปลี่ยน Proportional Font เป็น microsoft sans serif
  5. เข้า New Document
  6. เปลี่ยน Default Encoding เป็น Windows 874
  7. ปิด Dream แล้ว New Document ใหม่
5. ตัวอย่าง JavaScript และข้อมูล
ตัวอย่าง 1 : JavaScript ใน Template สำหรับ Preload

ตัวอย่าง 2 : JavaScript ใน Template สำหรับ Rollover

ตัวอย่าง 3 : About Us

ตัวอย่าง 4 : Products

ตัวอย่าง 6 : Contact Us

6. ตัวอย่างภาพแต่งเว็บเพจ
ดาวน์โหลดตัวอย่าง
+ Background : paper02.gif
+ Bar : bar01.png
+ Bar : พื้นหลัง
+ Bar : แท่งกั้น
ก่อนปรับปรุง
หลังปรับปรุง
Home Contact About Us
+ Icon มากมาย #
+ Smile Icon
+ กล่องข้อความ : bar_top_700.jpg : bar_bottom_700.jpg

   หัวข้อ
เนื้อหา



source code
ทดสอบที่ thaiabc.com ซึ่งเป็น windows server แล้วใช้ได้ แต่ทดสอบกับ Linux Server 2 เครื่องแล้วมีปัญหา
+ Download : http://www.thaiall.com/template/spymenubar.zip ทดสอบบน windows : ok
7. เทมเพจแบบ web 2.0 ตั้งใจเริ่มใช้เมื่อต้นปี 2013
Code generator
for
template of web 2.0
Title
Keywords
Description
Short title
gkey
"Imagination is more important than knowledge" - Albert Einstein
Home
Thaiabc.com
Thainame.net
Lampang.net
Nation university
PHP
MySQL
Visual basic.NET
TabletPC
Linux
Online quiz
Download
Search engine
Web ranking
Add website
Blog : Education
Blog : ACLA
Blog : Lampang
Facebook.com
Twitter.com
About us
My dream
Site map
Sponsor
http://goo.gl/9vJYk