เทมเพจ หรือ เว็บเพจต้นแบบ (Template Webpage)


	เทมเพจ หรือ เว็บเพจต้นแบบ (Template Webpage)

เว็บเพจสำรอง (Backup Webpages) : thaiabc.com | thaiall.com | yn1.yonok.ac.th | www.yonok.ac.th
ปรับปรุง : 2550-04-04 (เตรียมรุ่นที่ 2)

สารบัญ
- แผนการสอนระยะสั้น (Outlines)
- แนะนำเว็บ (Web Guides)
- เทมเพจ คืออะไร (What is Template?)
- แบบของเทมเพจ (Template Types)
- Template Zip Sample
- ขั้นตอน ฝึกปฏิบัติ กลุ่ม A
- ขั้นตอน ฝึกปฏิบัติ กลุ่ม B
- ตัวอย่าง JavaScript และข้อมูล
- รายชื่อผู้เข้ารับการอบรมรุ่น 1 (24 ธันวาคม 48)

แนะนำเว็บที่ไม่เกี่ยวกับบทเรียนนี้
- บทเรียน Photoshop
- บทเรียน Imapge Retouch
- บทเรียน HTML
- บทเรียน Java Script
- บทเรียน Gif Construction
- บทเรียน Flash ด้วย SwishMax

ประสบการณ์จากการสอน รุ่น 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)
- templatesbox.com (Free Templates)
- free-webpage-templates.info (Free Templates !psd)
- 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)

เทมเพจ คืออะไร (What is Template?)

เทมเพจ คือ เว็บเพจต้นแบบ ที่ถูกออกแบบมาก่อน ประกอบด้วยแฟ้มภาพ และ html ที่สามารถนำไปใช้งานต่อได้ เพิ่มเติมข้อมูล หรือแก้ไขได้โดยง่าย บางครั้งจะมีแฟ้ม .psd ซึ่งมีภาพต้นฉบับ ทำให้ใช้ Photoshop หรือ Imageready แก้ไขได้โดยง่าย

แบบของเทมเพจ (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 ของมืออาชีพที่เขาทำแจก มาสร้างเป็นเว็บเพจ เมื่อมีหลาย ๆ เว็บเพจ ก็จะกลายเป็นเว็บไซต์ที่ดูดีในที่สุด
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 แล้วพิมพ์ข้อความ เช่น

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

พ.ต.ท.ประจัญ ปัญญาแก้ว
พ.ต.ท.ปรีชา เจริญพงศ์
พ.ต.ท.อุดมศักดิ์ ไชยวรรณ
พ.ต.ต.ทรงศักดิ์ ธิติธารวัฒน์
ร.ต.อ.สุไทย การจนโรจน์
ร.ต.ต.หญิง รัฐนันท์ โสณ์นคร
ด.ต.โกศล เครือตัน
ด.ต.บุญจันทร์ สายมูล
จ.ส.ต.สมบูรณ์ ริจริยา
ส.ต.ท.นิพนธ์ สร้อยสน
น.พ.วัลลภ พรเรืองวงศ์
คุณจเรพันธ์ เคลือบคนโท
คุณชัยวัฒน์ พันธ์หงษ์
คุณนพเรศ ก๋าเงิน
คุณนิตยา ชัยวงษ์
คุณบุษบา ลักษณะโยธิน
คุณมยุรี อินต๊ะมา
คุณรุ่งรัตนชนี อินตาคำ
คุณอรรถวุฒิ จิตราทร

ขั้นตอนการติดตั้งภาษาไทยใน DreamweaverMX

วิธีแรก

ถ้าเป็น Dreamweaver MX และมีปัญหาภาษาไทย ให้ Download windows874.xml
ไปไว้ในห้อง C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Encodings
เปิดแฟ้ม EncodingMenu.xml มาแก้ไข
เพิ่มบรรทัดที่มี 874 ลงไปอย่างเหมาะสม
เปิด Dream ขึ้นมาใหม่ แล้วกดปุ่ม Ctrl - U
เข้า Font, Font Setting เลือก Windows 874
เปลี่ยน Proportional Font เป็น Ms Sans Serif
เข้า New Document
เปลี่ยน Default Encoding เป็น Windows 874
ปิด Dream แล้ว New Document ใหม่
เปิดเอกสารที่ Save ไว้ก็ไม่พบปัญหาภาษาไทยอีก
วิธีนี้ยังพบปัญหาภาษาไทยใน Code View

วิธีที่สอง

File From Thaiware.com

ติดตั้ง Thai Add-on จึงจะใช้ภาษาไทยใน Code View ได้
เปิด Dream ขึ้นมาใหม่ แล้วกดปุ่ม Ctrl - U
เข้า Font, Font Setting เลือก Windows 874
เปลี่ยน Proportional Font เป็น Ms Sans Serif
เข้า New Document
เปลี่ยน Default Encoding เป็น Windows 874
ปิด Dream แล้ว New Document ใหม่

5. ตัวอย่าง JavaScript และข้อมูล

ตัวอย่าง 1 : JavaScript ใน Template สำหรับ Preload
<script language="javascript">
<!--
function changeimages() {
  if (document.images && (preloadflag == true)) {
    for (var i=0; i<changeimages.arguments.length; i+=2) {
      document[changeimages.arguments[i]].src = changeimages.arguments[i+1];
    }
  }
}
function newimage(arg) {
  if (document.images) {
    rslt = new image();
    rslt.src = arg;
    return rslt;
  }
}
var preloadflag = false;
function preloadimages() {
  if (document.images) {
    ab01 = newimage("images/about-us-over.gif");
    ab02 = newimage("images/about-us.gif");
    preloadflag = true;
  }
}
// -->
</script>
<body bgcolor=#ffffff onload="preloadimages();">

ตัวอย่าง 2 : JavaScript ใน Template สำหรับ Rollover
<a href="aboutus.htm"
onmouseover="window.status='about us'; changeimages('about_us', 'images/about-us-over.gif'); return true;"
onmouseout="window.status=''; changeimages('about_us', 'images/about-us.gif'); return true;">
<img name="about_us" src="images/about-us.gif" width=126 height=34 border=0 alt="about us"></a>

ตัวอย่าง 3 : About Us
About Us
    StrongFiber Company was founded in 1999 to meet the demands for quality fiberglass doors in Thailand. We have the strong experienced management team and staffs in fiberglass industry. StrongFiber has established a position in the building materials industry through the manufacture and sale of insulated door. Introducing products made of high quality composite compounds, StrongFiber redefines the traditional concept of high performance building materials. Our unique manufacturing processes assure products superior in quality and versatility that can be delivered quickly. We desire to develop, manufacture and control all aspects of the StrongFiber door and believe the potential and performance of alternative materials is virtually unlimited. StrongFiber welcomes importer and distributor in every country around the world. We challenge you to do business and prosper together at the beginning of the year 2000. We will build our reputation on one product success after another. And we will maintain our reputation for innovation in product by working closely together with our customers to help them achieve success with the products and programs designed for their needs.
    In the building products industry, we see a great opportunity to create the products of tomorrow. We take pride in finding the best possible solution to your needs. Put StrongFiber to work on your next project and see what we can do for you. We are committed to enhancing product performance.
    The mission of StrongFiber Company is to manufacture a high quality door panel at the competitive price with a material of the future, fiberglass. StrongFiber commits to respond to expectations of customers by offering options that add value and increase customer satisfaction. The company is dedicated to providing and imporving continuously innovative products, upholding the highest standards of quality, being service oriented and market driven.

ตัวอย่าง 4 : Products
Durable and Attractive
    StrongFiber doors have an authentic wood grain texture that replicates the look of a wood door. StrongFiber doors won’t split, crack, wrap, peel or dent like a wood door so these doors will retain their wood-like beauty for years to come, even under the most severe weather conditions.
Energy Efficiency
    StrongFiber doors eliminate the transfer of heat and cold while its solid polyurethane foam core provides five times greater insulation than wood. StrongFiber doors outperform wood doors in energy efficiency and durability. Each component is designed to retain stability and beauty over long term.
Superior to wood, Priced comparatively much less
    Wood has a warm look and a natural appeal. But people dislike wood drawbacks. StrongFiber provides security and comfort and do that with beauty, style, and economy. We make high quality products with less production cost, so StrongFiber doors are priced comparatively much less than but superior to wood.
Custom Choices
    StrongFiber provides a wide selection of residential fiberglass doors. The doors come in any size, texture, color and natural beauty of wood grain surface and deep embossments for added beauty with any species from Thai Teak, Thai Rosewood, Cherry, Mahogany, Walnut, Maple, to North American Oak.
Warranty
    Care-free, maintenance-free fiberglass. Your best answer for superior performance and good looks that will truly stand the test of time. StrongFiber doors carry a limited lifetime warranty for as long as you own your home.

ตัวอย่าง 6 : Contact Us
StrongFiber Co., Ltd. All right reserved 1999
116 M.1 T.Pongyangkok, A.Hangchat, Lampang 52190. THAILAND .
Tel. 66-54-269665-7 Fax : 66-54-269670