บทท� 1 บทนา

1.1 หลกการและเหตผล รานก�งกมล ชอป ต�งอยท�ใตหอพกณชชาเพลส อยบานเลขท� 38 ซอย 1 ถนนสนตสข อ.เมอง จ.เชยงใหม (ยานสนตธรรม) เปนกจการเก�ยวกบการคาขายเส�อผาแฟช�น ซ� งกลมลกคากคอวยรนและวยทางาน ทางผจดทาจงมแนวคดท�จะทาเวบไซตใหกบทางรานก�งกมล ชอป เพ�อเปนทางเลอกในการทาการตลาดใหกบทางรานท�หลากหลายมากย�งข�น โดยเวบไซตท�จดทาข�นจะประกอบดวยรายละเอยดดงน� การแนะนาสนคาตวใหมของทางราน เส� อผา กางเกง กระโปรง รองเทา และกระเปา ซ� งจะจดระเบยบการขายโดยมรหสสนคาและรายละเอยด เพ�อเปนมาตรฐานเดยวกนท�งหมด

วทยาลยพเทคโนโลยพายพและบรหารธรกจ เลงเหนคณคา ความสามารถและสมรรถนะของนกศกษาทางโรงเรยนจงเปดโอกาสให นกศกษาเรยนรผานการปฏบตเพ�อใหเกดประสทธภาพสงสด โดยผานการเรยนรในรายวชา โครงการ (Project) เพ�อตรงตามเปาหมายท�โรงเรยนไดต�งไว คอ “คดเปน เนนปฏบต จดการได” และนาความรท�ไดเรยนมาบรณาการ เพ�อใหเปนประโยชนตอชมชน ซ� งจะเปนการจดประกายใหนกศกษาไดเหนและสามารถสรางองคความรใหมๆไดอยตลอดเวลา อนจะสงผลใหนกศกษาสามารถนาไปประยกตใชในการเรยนและการประกอบวชาชพไดอยางเปนจรงและมประสทธภาพอกดวย ตามปรชญาของโรงเรยน คอ “บรณาการทางการศกษา วฒนธรมทางปญญา การศกษาเพ�อชวต”

ดงน�น นกศกษาในระดบประกาศนยบตรวชาชพ (ปวช.) ปท� 3 วทยาลยเทคโนโลยพายพและบรหารธรกจ จงไดจดทา เวบไซตรานก�งกมลชอป เพ�อใหสามารถ ใชในการทาการตลาดของกจการตอไป

1.2 วตถประสงคของโครงการ 1.2.1 เพ�อเพ�มชองทางการทาการตลาดใหกบธรกจ 1.2.2 เพ�อเปนการศกษาการจดทาการในการทาเวบไซต 1.2.3 เพ�อเปนประโยชนในการพฒนาการทาเวบไซตและพฒนาตนเอง

1.3 ผลท�คาดวาจะไดรบ

1.3.1 ทาให รานก�งกมล ชอป ไดเปนท�รจกกนอยางแพรหลายข�น โดยผานระบบเครอขายอนเทอรเนตในการเผยแพรขอมล

1.3.2 ทาใหลกคาของ รานก�งกมล ชอป เกดความสะดวกสบายในการรบร ขาวสารของ รานก�งกมล ชอป ผานทางเวบไซต

1.3.3 เปนการสรางโอกาสในการขยายธรกจ รานก�งกมล ชอป

1.4 ข(นตอนและวธดาเนนงาน

1.4.1 โครงการน� เร�มปฏบตงานเม�อ ตลาคม 2554 ส�นสดการปฏบตงานเม�อ กมภาพนธ 2555

1.4.2 ข�นตอนการดาเนนงาน 1.4.2.1 เสนอโครงรางการจดทาเวบไซต 1.4.2.2 ศกษาขอมลการใชโปรแกรม Dreamweaver CS3, Photoshop CS3 1.4.2.3 รวบรวมขอมลทางราน 1.4.2.4 วางแผนและออกแบบเวบไซต 1.4.2.5 จดทาเวบไซต 1.4.2.6 ทดสอบและแกไขเวบไซต 1.4.2.7 สรปผลการดาเนนงาน

6

1.5 ระยะเวลาดาเนนงาน

การดาเนนการ

ระยะเวลาปฏบตงาน

ตลาคม 2554

ตลาคม 2554

พฤศจกายน 2554

ธนวาคม 2554

มกราคม 2555

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1. เสนอโครงรางการทาเวบไซต

2. ศกษาการใชโปรแกรม

3. รวบรวมขอมลทางราน

4. วางแผนและออกแบบเวบไซต

5. จดทาเวบไซต

6. ทดสอบและแกไขเวบไซต

7

ตารางท� 1.1 แสดงระยะเวลาในการทางาน

1.6 ขอบเขตของโครงงาน 1.6.1 Banner

1.6.1.1 ม Logo ของทางราน Kingkamon Shop 1.6.1.2 รปภาพผลตภณฑทางราน

1.6.2 เน�อหาของ Website 1.6.2.1 แนะนาสนคา 1.6.2.2 แนะนารายละเอยดของสนคา

1.6.3 วธการส�งซ�อสนคา 1.6.3.1 ตดตอส�งซ�อไดท� เบอรโทร 089-855-8805 1.6.3.2 ไปซ�อท�รานคา ตามท�อย

1.6.4 วธการชาระเงน 1.6.4.1 ชาระเงนไดท�ธนาคาร พรอมคาขนสงสนคา

1.7.1 เคร�องมอและอปกรณดานฮารดแวร (Hardware) 1. เคร�องคอมพวเตอรโนตบคจานวน 1 เคร�อง 2. Flash Drive Kingston 4 GB

1.7.2 ดานซอฟแวร (Software) 1. โปรแกรม Adobe Photoshop CS3 2. โปรแกรม Adobe Dreamweaver CS3

1.7 โปรแกรม Adobe Illustrator CS3ถานท� 1.8.1 โรงเรยนพายพเทคโนโลยและบรหารธรกจ กม.ท� 4 ถ.เชยงใหม – แมโจ 262 หม 6 ต.หนองจอม อ.สนทราย จ.เชยงใหม 50210 1.8.2 38 ซอย 1 ถ.สนตสข ต.ชางเผอก อ.เมอง จ.เชยงใหม 50300

7. สรปผลการดาเนนงาน

8

บทท� 2

ทฤษฎและเอกสารท�เก�ยวของ

2.1 ทฤษฏและเอกสารท�เก�ยวของ

2.1.1 โปรแกรม Dreamweaver CS3 คออะไร โปรแกรม Macromedia Dreamweaver โปรแกรมสาหรบการสรางเวบเพจ บรหารจดการเวบไซต รวมไปถงการพฒนาเวบแอปพลเคชน เน�องจากตว Dreamweaver มความสามารถท�โดดเดน ดงน� สามารถเขยนโปรแกรมสาหรบเวบไดทกรปแบบ เชน ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมนคาส�งและเคร�องมอตางๆ เรยกใชงานไดงายและสะดวกมการปรบปรงกลไกภายใน ใหม ประสทธภาพสงข�น สามารถสรางแอปพลเคชนงายๆ โดยไมจาเปนตองเขยนโปรแกรม สรางเวบเพจภาษา ไทยไดทนทโดยไมตองตดตองโปรแกรมเสรมเพราะ Dreamweaver รองรบตวอกษรแบบ Unicode

2.1.2 ทฤษฏการเขยน Website โดยใชภาษา HTML HTML (Hyper Text Markup Language) เปนภาษาสากลท�ใชส�อสารกนแพรหลายใน internet เชนเดยวกบคาส�งใน UNIX หรอ DOS ในเคร�องคอมพวเตอรแบบ PC HTML กคอเอกสารขอความท�ม ชดคาส�ง <TAG> กากบแตละสวนของเอกสาร เพ�อบอกใหโปรแกรมสาหรบอานซ�งเราเรยกวา Web browser รวา แตละสวนของเอกสารจะตองแสดงผลออกมาอยางไร หรอจะตองทาอยางไรหากมการ เลอก (ดวยการคลกเมาสหรอกด Enter) ตรงบรเวณท�กาหนด เปนตน

2.1.3 รปแบบของเอกสาร HTML เปนอยางไร? รปแบบมาตรฐานของเอกสาร HTML จะมอยสองสวน สวนแรกเรยกวาสวนหว (head) และสวนท�สองเรยกวา สวนตว (body) และท�งสองสวนจะตองอยภายใตชดคาส�ง<HTML>....</HTML> เสมอ รปแบบเอกสาร HTML ท�สมบรณ ควรจะมชดคาส�งมาตรฐานกากบอยางนอยท�สด ดงน�

9

<HTML>

<HEAD>

<TITLE>หวขอเร�อง </TITLE>

</HEAD> <BODY> ขอมลสนคาขายเส�อผา </BODY>

</HTML>

2.1.4 ทฤษฏการสราง Site ในการสราง Website น�น จะประกอบไปดวยไฟลตาง ๆ มากมาย ไมวาจะเปนไฟล HTML รปภาพและโฟลเดอรซ� งเราจะตองมการเตรยมการจดเกบสวนประกอบเหลาน� เพ�อไมใหเกดความสบสนในภายหลง ซ� งการสราง Site สามารถชวยจดการไดในโปรแกรมMacromedia Dreamweaver กมสวนท�สนบ สนนการจดการเก�ยวกบการจดเกบไฟลและโฟลเดอรอย ซ� งเราเรยกวาการสราง Site เพ�ออานวยความ สะดวกในการสราง Website เวลาเรยกใชงาน กจะสามารถใชงานไดอยางรวดเรว 2.1.5 ข(นตอนการสราง Template

1. ออกแบบหนาเวบเพจตามตองการ กาหนดใหสวนหวและสวนเมนเปน Template 2. คลกเมน File > Save as Template

10

ภาพท� 2.1 แสดงการออกแบบหนาเวบไซต

จากน�นจะปรากฏหนาตาง Dream weaver ข�นมา 1. คลกปม Edit Sites… จะปรากฏหนาตาง Site Definition ข�นมา 2. พมพช�อเวบไซตท�ตองการลงในชอง What would you like to name your site? 3. คลกปม Next เพ�อผานไปยงข�นตอนตอไป

ภาพท� 2.2 แสดงการต�งช�อเวบไซต

4. คลกเลอก No, I do not want to use a server technology. เน�องจากเราจะสรางเวบไซตโดยจะไมใชงานอะไรเก�ยวของกบ Server

5. คลกปม Next

ภาพท� 2.3 แสดงข�นตอนตอไปของการต�งช�อเวบไซต

6. คลกเลอกรายการแรก น�นคอ Edit local copies on my machine, then upload to server when ready (recommended) เพ�อเลอกท�จะเกบเวบไซตท�สรางไวในเคร�องของเรากอน เม�อพรอมแลวจงจะอพโหลดข�นไปยง server

7. กาหนดโฟลเดอรสาหรบเกบเวบไซตท�จะสรางข�น ในชอง Where on your computer do you want to store your files?

8. คลกปม Next

ภาพท� 2.4 แสดงการกาหนดโฟลเดอรสาหรบเกบเวบไซต

19

จากน�นหนาตาง Choose Remote Root Folder จะปรากฏข�นมา ใหเลอกตาแหนงท�ตองการจะเกบไฟล

9. คลกวธการเช�อมตอกบ Server ท�ชอง How do you connect to your remote server? โดยในตวอยางรายการ Local/Network เน�องจากเช�อมตออนเตอรเนตผานระบบเครอขายภายในองคกร

10. คลกปม เพ�อเลอกโฟลเดอรทางฝ�ง Server ท�จะอพโหลดไฟลข�นไปเกบไวในชอง what folder on your server do you want to store your files in? คลกเลอกโฟลเดอรท�จะเกบไฟล คลกปม Select

ภาพท� 2.5 แสดงการคลกเลอกโฟลเดอรท�จะเกบเวบไซต

11. คลกเลอก No, do not enable check in and check out. 12. คลกปม Next 13. คลกปม Done

20

ภาพท� 2.6 แสดงข�นตอนสดทายในการเลอกโฟลเดอรท�จะเกบเวบไซต

คลกปม Cancel เพ�อปดหนาตาง Save As Template ท�ปรากฏข�นมากอน

ภาพท� 2.7 แสดงการ Save As Template

2.1.6 การกาหนดสวนแกไขและคงท�ของ Template จากน�นเราจะมากาหนดสวนท�สามารถแกไขขอมลได และไมสามารถแกไขขอมลไดของเทมเพลตน� กอน โดยในท�น� จะกาหนดใหสวนท�สามารถแกไขขอมลไดกคอ สวนท�เปนรปภาพและสวนท�เปนพ�นท�สขาว

1. คลกรปภาพท�ตองการจะกาหนดใหสามารถแกไขได 2. คลกรปภาพ Insert > Template Objects > Editable Region หรอ Ctrl+Alt+V จะ

ปรากฏหนาตาง New Editable Region ข�นมา

21

3. พมพช�อของสวนท�ตองการใหแกไขไดท�ชอง Name จากตวอยางพมพวา main คลกปม OK

ภาพท� 2.8 แสดงข�นตอนการแกไขช�อ 2.1.7 การบนทก Template ในกรณท�ตองการบนทกหนาเทมเพลตท�สรางข�น ใหทาตามข�นตอนดงแสดงตอไปน�

1. คลกเมน File > Save As Template… เพ�อบนทกหนาเวบเพจ จะปรากฏหนาตาง Save As Template ข�นมา

2. กาหนดช�อเทมเพลตท�สรางข�น ในชอง Save As: 3. คลกปม Save

ภาพท� 2.9 แสดงการบนทกเทมเพลต

2.1.8 การเปดหนา Template

22

หลงจากท�สรางหนาเทมเพลตเสรจเรยบรอยแลว และตองการเปดหนาเทมเพลตน�นข�นมาใชงาน มวธการเปดดงตอไปน�

1. คลกเมน File > New จะปรากฏหนาตาง New From Template ข�นมา 2. คลกแทบ Templates 3. คลกเลอกไฟลเทมเพลตท�ตองการ 4. คลกปม Create

ภาพท� 2.10 การเปดหนาเทมเพลต

2.2 ทฤษฏสกบการออกแบบและส การออกแบบเวบไซตน�นไมไดหมายถงลกษณะหนาตาของเวบไซตเพยงอยางเดยว แต

เก�ยว ของต�งแตการเร�มตนกาหนดเปาหมายของเวบไซต ระบกลมผใช การจดระบบขอมล การสรางระบบ เนวเกชน การออกแบบหนาเวบ รวมไปถงการใชกราฟก การเลอกใชส และการจดรปแบบตวอกษร นอกจากน�นยงตองคานงถงความแตกตางของส�อกลางในการแสดงผลเวบไซตดวย ส�งเหลาน� ไดแก ชนด และรนของบราวเซอร ขนาดของหนาจอมอนเตอร ความละเอยดของสในระบบ รวมไปถง Plug-in ชนด ตาง ๆ ท�ผใชมอย เพ�อใหผใชเกดความสะดวกและความพอใจท�จะทองไปในเวบไซตน�น ดงน�นทก ส�ง ทกอยางในเวบไซตท�งท�คณมองเหนและมองไมเหนลวน เปนผลมาจากกระบวนการออกแบบเวบไซต ท�ง ส�น

เวบไซตท�ดสวยงามหรอมลกเลนมากมายน�น อาจจะไมนบเปนการออกแบบท�ดกได ถาความ สวยงามและลกเลนเหลาน�นไมเหมาะสมกบลกษณของเวบไซต ดวยเหตน� จงเปนเร�องยากท� จะระบวาการ ออกแบบเวบไซตท�ดน�นเปนอยางไร เน�องจากไมมหลกเกณฑแนนอนท�จะใชไดกบทกเวบไซต แนวทาง การออกแบบบางอยางท�เหมาะสมกบเวบไซตหน�ง อาจจะไมเหมาะกบอกเวบไซตหน�งกไดทาใหแนวทางในการออกแบบของแตละเวบไซตน�นแตกตางกนไปตามเปาหมาย

23

และลกษณะของเวบไซตน�น เวบไซตบางแหงอาจตองการความสนกสนาน บนเทง ขณะท�เวบอ�นกลบตองการความถกตอง นาเช�อถอ เปน หลก ดงน�นอาจสรปไดวาการออกแบบท�ดกคอ การออกแบบใหเหมาะสมกบเปาหมายและลกษณะ ของ เวบไซต โดยคานงถงความสะดวกในการใชงานของผใชเปนหลก

2.2.1 ออกแบบใหตรงกบเปาหมายและลกษณะของเวบไซต เวบไซตแตละประเภทตางมเปาหมายและลกษณะท�แตกตางกน ตวอยางเชน เวบไซตท�เปน Search Engine ซ� งเปนแหลงรวมท�อยของเวบไซตตาง ๆ ทาหนาท�เปนประตไปสเวบไซตอ�น ๆ เวบไซต ประเภทน� มเปาหมายท�จะใหขอมลท�ผใชตองการอยางรวดเรว และจะมผเขามาใชบรการคนหาขอมลเปน จานวนมากในแตละวน ดงน�นส�งท�สาคญในการออกแบบเวบไซตประเภทน�กคอสามารถแสดง หนาเวบ อยางรวดเรว เม�อผใชเปดเขามาและมระบบสบคนขอมลท�มประสทธภาพ เพ�อใหไดผลลพธท�รวดเรว สาหรบเวบเพ�อความบนเทงหรอเก�ยวของกบศลปะน�น ผใชมกคาดหวงท�จะไดพบกบส� งท�นาต�นเตน เร� อง ราวท�สนกสนาน เพลดเพลน หรออาจจะไดเรยนรสาระบางอยางบาง ความสาคญในการออกแบบ เวบไซตเหลาน� จงมมากพอกบเน�อหาภายในเวบไซต สวนเวบท�วไปท�ใหบรการขอมล ซ� งไมไดมเปา หมาย ท�จะใหความบนเทง ควรจะมการจดขอมลอยางเปนระบบและมรปแบบท�เขาใจงาย เพ�อทาให สามารถ เขาถงขอมลท�ตองการไดอยางรวดเรว สวนเวบไซตขององคกรธรกจท�มเปาหมายเพ�อขายสนคาหรอบรการน�นย�งจาเปนตองใหความสาคญกบการออกแบบเวบไซตเปนอยางมาก เพราะผใชหรอลกคา ของ คณจะ ตดสนใจซ�อสนคาหรอบรการ โดยดจากส�งท�พบเหนในเวบไซต ซ� งลกษณะการออกแบบของ เวบ ไซต กจะสะทอนถงภาพลกษณของธรกจน�น จงทาใหเวบไซตท�ไดรบการออกแบบมาอยางด สามารถ สราง ความนาเช�อถอและดงดดความสนใจของผใชไดมากกวาเวบไซตอ�น 2.2.2 การใชสกลมกลนกน การใชสใหกลมกลนกน เปนการใชสหรอน� าหนกของสใหใกลเคยงกน หรอคลายคลงกน เชน การใชสแบบเอกรงค เปนการใชสเดยวท�มน� าหนกออนแกหลายลาดบ การใชสขางเคยง เปนการใชสท�เคยงกน 2-3 ส ในวงส เชน สแดง สสมแดง และสมวงแดง การใชสใกลเครยง เปนการใชสท�เรยงกนในวงสไมเกน 5 ส ตลอดจนการใชสวรรณะรอนและวรรณะเยน (Wean tone colors and cool tone colors) ดงไดกลาวมาแลว

24

2.2.3 การใชสตดกน

สตดกนคอสท�อยตรงขามกนในวงจรส (ดรปจาก ดานลางประกอบ) การใชสใหตดกนมความจาเปนมาก ในงานออกแบบ เพราะชวยใหเกดความนาสนใจ ในทนทท�พบเหน สตดกน อยางแทจรงม อยดวยกน 6 คส คอ สเหลอง

1. สเหลอง ตรงกนขามกบ สมวง 2. สสม ตรงกนขามกบ สน�าเงน 3. สแดง ตรงกนขามกบ สเขยว 4. สเหลองสม ตรงกนขามกบ สมวงน�าเงน 5. สสมแดง ตรงกนขามกบ สน� าเงนเขยว 6. สมวงแดง ตรงกนขามกบ สเหลองเขยว

ภาพท� 2.11 ภาพแสดงวงจรส

การใชสตดกน ควรคานงถงความเปนเอกภาพดวย วธการใชมหลายวธ เชน ใชสใหมปรมาณตางกน เชน ใชสแดง 20% สเขยว 80% หรอ ใชเน�อสผสมในกนและกน หรอใชสหน�งสใดผสมกบสคท�ตดกน ดวยประมาณเลกนอยรวมท�งการเอาสท�ตดกนมาทาใหเปนลวดลายเลก ๆ สลบกน ในผลงานช�น อาจจะใชสใหกลมกลนกนหรอตดกนเพยงอยางใดอยางหน�ง หรออาจจะใชพรอมกนท�ง 2 อยาง ท�งน� แลวแตความตองการ และความคดสรางสรรคของเรา ไมมหลกการหรอ รปแบบท�ตายตว ในงานออกแบบ หรอการจดภาพ หากเรารจกใชสมสภาพโดยรวมเปนวรรณะรานหรอวรรณะเยน เราจะ สามารถควบคม และสรางสรรคภาพใหเกดความประสานกลมกลน งดงามไดงายข�น เพราะสมอทธพลตอ มวล ปรมาณ และชองวาง สมคณสมบตท�ทาใหเกดความกลมกลน หรอ

25

ขดแยงได สสามารถขบเนนใหเกด จดเดน และการรวมกนใหเกดเปนหนวยเดยวกนได เราในฐานะผใชสตองนาหลกการตาง ๆ ของสไปประยกตใชใหสอดคลอง กบเปาหมาในงานของเราเพราะสมผลตอการออกแบบคอ สรางความรสก สใหความรสกตอผพบเหนแตกตางกนไป ท�งน� ข�นอยกบประสบการณและภมหลง ของแตละคน สบางสสามารรกษาบาบดโรคจตบางชนดได การใชสภายใน หรอ ภายนอกอาคาร จะมผลตอการ สมผสและสรางบรรยากาศได สรางความนาสนใจ สมอทธพลตองานศลปะการออกแบบ จะชวยสรางความประทบใจ หรออนตราย สเขยวสญลกษณแทนพช หรอความปลอดภย เปนตน สชวยใหเกดการรบร และจดจา งานศลปะการออกแบบตองการใหผพบเหนเกดการจดจา ในรปแบบและผลงาน หรอเกดความประทบใจ การใชสจะตองสะดดตา และมเอกภาพ

2.2.2 องคประกอบของการออกแบบเวบไซตอยางมประสทธภาพ องคประกอบตอไปน� ถอเปนพ�นฐานท�สาคญของเวบไซตท�ไดรบการออกแบบมาอยางมประสทธภาพ 1. ความเรยบงาย (Simplicity) หลกท�สาคญของความเรยบงาย คอ การส� อสารเน� อหาถงผ ใชโดยจากดองคประกอบเสรม ท�เก�ยวของกบการนาเสนอใหเหลอเฉพาะส�งท�จาเปนเทาน�น 2. ความสม�าเสมอ (Consistency) ใชรปแบบเดยวกนตลอดท� งเวบไซต เน�องจากผใชจะรสกกบเวบไซตวาเปนเสมอน สถานท�จรง ถาลกษณะของแตละหนาในเวบไซตเดยวกนน�นแตกตางกนมาก ผใชกจะ เกดความ สบสน และไมแนใจวากาลงอยในเวบเดมหรอไม ดงน�นรปแบบของหนา สไตลของกราฟก ระบบเนวเกชน และ โทนสท�ใชควรจะมความคลายคลงกนตลอดท�งเวบไซต 3. ความเปนเอกลกษณ (Identity) การออกแบบตองคานงถงลกษณะขององคกร เน�องจากรปแบบของเวบไซต 4. เน(อหาท�มประโยชน (Useful Content) เน�อหาถอเปนส�งท�สาคญท�สดในเวบไซต ดงน�นในเวบไซตควรจดเตรยม เน�อหาและ ขอมล ท�ผใชตองการใหถกตองและสมบรณ โดยมการ ปรบ ปรงและเพ�มเตมใหทนตอ

26

เหตการณอยเสมอ เน�อหาท�สาคญท�สดคอ เน�อหาท�สรางข�นมาเอง โดยทมงาน ของคณและไมซ� ากบเวบอ�น เพราะจะเปนส�ง ท�ดงดดผใชใหเขามาในเวบไซตอยเสมอ 5. ระบบเนวเกชนท�ใชงานงาย (User-Friendly Navigation)

ระบบเนวเกชนเปนองคประกอบท�สาคญมากของเวบไซต จะตองออกแบบใหผใชเขาใจ ไดงายและใชงานสะดวก โดยใชกราฟกท�ส�อความหมายรวมกบคาอธบายท�ชดเจน รวมท�งมรป แบบและ ลาดบของรายการท�สม�าเสมอ 6. มลกษณะท�นาสนใจ (Visual Appeal) เปนเร� องยากท�จะตดสนวาลกษณะหนาตาของเวบไซตนาสนใจหรอไมเพราะเก�ยวของกบความชอบของแตละบคคลอยางไรกตามหนาตาของเวบไซตจะมความสมพนธกบ 7. การใชงานอยางไมจากด (Compatibility)ห ควรออกแบบเวบไซตใหผใชสวนใหญเขาถงไดมากท�สด โดยไมมการบงคบให ผใช ตอง ตดต�งโปรแกรมใด ๆ เพ�มเตม หรอตองเลอกใชบราวเซอรชนดใดชนดหน�งจงจะสามารถเขาถงเน�อหาได สามารถแสดงผลไดในทกระบบปฏบตการและท�ความละเอยดหนาจอตางกนอยางไมมปญหา 8. คณภาพในการออกแบบ (Design Stability) ถาตองการใหผใชรสกวาเวบไซตท�มคณภาพ ถกตอง และเช�อถอได กควรใหความ สาคญ กบการออกแบบเวบไซตอยางมาก 9. ระบบการใชงานท�ถกตอง (Functional Stability) ระบบการทางานตาง ๆ ในเวบไซตจะตองมความแนนอน และทาหนาท�ไดอยางถกตอง

27

บทท� 3

การออกแบบและพฒนาโปรแกรม

3.1. การออกแบบหนาจอหลกของระบบ

ภาพท� 3.1 แสดงหนาจอหลกของเวบไซตก�งกมลชอป

1

24

6

5

3

28

จากภาพท� 3.1 เปนภาพแสดงหนาจอหลกของเวบไซตก� งกมลชอปโดยมสวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนหลกตาง ๆ ของเวบไซต

สวนท� 2 คอ สวนท�แสดงรปภาพลกคาของทางราน สวนท� 3 คอ สวนแสดงโลโกของทางราน สวนท� 4 คอ สวนท�แสดงเมนยอย สวนท� 5 คอ สวนท�แสดงดสนคาเพ�มเตม สวนท� 6 คอ สวนท�แสดงรปภาพสนคา

3.2 การออกแบบหนาจอแสดงผลเน(อหาเวบไซต

ภาพท� 3.2 แสดงหนาสนคาท�งหมดของทางราน

จากภาพท� 3.2 เปนภาพแสดงหนาสนคาท�งหมดของทางราน โดยมสวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงดสนคาเพ�มเตม สวนท� 3 คอ สวนแสดงรปภาพสนคา สวนท� 4 คอ สวนแสดงเมนยอย

1

3

4 2

ภาพท� 3.3 แสดงหนารายละเอยดของสนคา

จากภาพท� 3.3 เปนภาพแสดงหนารายละเอยดของสนคา โดยมสวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงรายละเอยดของสนคา สวนท� 3 คอ สวนแสดงเมนยอย สวนท� 4 คอ สวนแสดงรปภาพของสนคาท�เลอก

1

3 2

4

24

ภาพท� 3.4 แสดงหนาวธการชาระเงน

จากภาพท� 3.4 เปนภาพแสดงหนาแสดงวธการชาระเงนโดยมสวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงวธการชาระเงน สวนท� 3 คอ สวนแสดงเมนยอย สวนท� 4 คอ สวนแสดงเลขท�บญชธนาคาร

3

1

2

4

25

ภาพท� 3.5 แสดงหนาชองทางการตดตอ

จากภาพท� 3.5 เปนภาพแสดงหนาชองทางการตดตอ โดยมสวนประกอบดงน�

สวนท� 1 คอ สวนแสดงเมนตาง ๆ ของเวบไซต สวนท� 2 คอ สวนแสดงชองทางการตดตอ สวนท� 3 คอ สวนแสดงเมนยอย

1

3 2

26

บทท� 4

การพฒนาโปรแกรม

4.1 หลกในการพฒนาโปรแกรม

การพฒนาเวบไซตก� งกมลชอป ควรมการวางแผนอยางเปนข� นเปนตอน กาหนดวตถประสงคชดเจนต�งแตข�นตอนการออกแบบ ข�นตอนการผลต และข�นตอนการประยกตใชงานเพ�อใหผเขาชมไดรบชมอยางเขาใจ

4.1.1 การออกแบบเวบไซตก�งกมลชอป

1. การวเคราะหเน�อหา

• เลอกเน�อหาท�มความเขาใจงาย และมภาพประกอบอยางสวยงามและชดเจนตอ

การส�อสารกบผเขาชมเวบไซต

• การออกแบบสวนตาง ๆ ของเวบไซต

• วางโครงสรางการออกแบบสวนตาง ๆ อยางเรยบรอย ไมดหนาแนนหรอม

ชองวางมากเกนไป

2. กาหนดวตถประสงคโดยคานงถง

• ส�งท�คาดหวงจากผเขาชมเม�อไดเขาชมเวบไซต เชน ทาใหผเขาชมเวบไซตรจก

ราน ก�งกมล ชอปมากข�น เปนจดประสงคหลกในการสรางเวบไซต

• ความเหมาะสมในการเขาชมของผเขาใชในระดบวยตาง ๆ ซ� งไมวาจะวยใดเทาก

สามารถเขาชมได

3. ลาดบข�นการนาเสนอ

• การใชภาษามความเหมาะสมและเขาใจงายตอผเขาชม

• ขนาดของตวอกษร สของของตวอกษรสามารถอานไดงาย

• การใชโทนสของเวบไซตไมฉดฉาดหรอจดชดจนเกนไป

4.1.2 การสรางหรอผลตเวบไซต

1. วางเคาโครงการสรางเวบไซตตามท�ตองการ

2. นาเคาโครงท�ไดออกแบบไวมาสรางเปนหนาเวบไซต

3. แสดงหนาเวบไซตของการแสดงผล

• ดานเน�อหามความถกตอง และอานไดงาย มความเขาใจในการอาน

• การลงคเน�อหาตาง ๆ ภายในเวบไซตมความถกตอง และใชงานไดงาย

4.1.3 การประยกตใชงานเวบไซต

1. การประเมนผล ซ� งเปนข�นตอนสดทายของการพฒนาเวบไซตใหมการพฒนามาก

ข�น

4.2 เคร�องมอท�ใชในการพฒนาโปรแกรม

4.2.1 โปรแกรม Adobe Dreamweaver CS3 เปนอกโปรแกรมหน� ง ท�มการออกแบบมา

เพ�อท�จะใชในการจดการกบเอกสารท�ใชสาหรบการสรางเวบเพจ

4.2.2 โปรแกรม Adobe Photoshop CS3 เปนโปรแกรมท�ใชในการตดตอและตกแตงภาพหรอ

รปภาพท�ตองการ

4.2.3 โปรแกรม Adobe Illustrator CS3 เปนโปรแกรมท�ใชงานการตดตอและตกแตงภาพหรอ

รปภาพท�ตองการ มการใชงานคลายคลงกบโปรแกรม Adobe Photoshop CS3

27

4.3 ผงโครงสรางของโปรแกรม(Site Map)

ภาพท� 4.1 ผงโครงสรางของโปรแกรม (Site Map)

หนาแรก

หนาหลก

หนาแรก

สนคา

วธการส�งซ,อ / วธการชาระเงน

ชองทางการตดตอ

สนคา

ขอมลสนคา

วธการส �งซ#อ/วธการชาระเงน

วธการส�งซ,อ

วธการชาระเงน

ชองทางการตดตอ

รายละเอยดเก�ยวกบทางราน

28

บทท� 5

การประเมนผลและสรปผลการศกษา

4.4 การประเมนผล

การประเมนผลเปนข�นตอนสดทายของการสรางและพฒนาเวบไซต เพ�อใหเวบไซตประสบความสาเรจและลลวงไปดวยดตามเปาหมายของผพฒนาเวบไซต โดยหาไดจากการประเมนการเขาใชในดานตาง ๆ ไมวาจะเปนทางสถต การสงเกตและรบแจงปญหาการใชงาน ดงน�

5.1.1 การประเมนผลโดยทางสถต

การประเมนผลโดยวธทางสถตน� ไดแก การทาแบบสารวจความพงพอใจหรอแบบประเมนใหผท�เขาใชหรอเย�ยมชมเวบไซตทาการประเมน โดยผพฒนาโปรแกรมเปนผกาหนดหลกเกณฑการประเมนเอง โดยสอดคลองกบการเขาใชและวตถประสงคของการเผยแผขอมลในเวบไซต

จากแบบประเมนผลท�งหมด 10 ชด โดยสมจากผท�เขาใชงานเวบไซต 10 คน ไดผลการประเมนดงน�

รายละเอยด เกณฑ การประเมน

5 4 3 2 1

1. เวบไซตมความสวยงามและนาสนใจ 70% 20% 10% 0% 0% 2. ความนาสนใจในการใชนาเสนอ 30% 60% 10% 0% 0% 3. เวบไซตมประโยชนสาหรบบคคลท�วไป 40% 40% 20% 0% 0% 4. การนาเสนอโครงการทาใหไดเรยนรส�งใหม ๆ 30% 50% 20% 0% 0%

ตารางท� 5.1 แสดงรายละเอยดแบบประเมนผลโครงการทางสถต

5 = ดมาก 4 = ด 3 = ปานกลาง 2 = พอใช 1 = ปรบปรง

29

สรปผลการประเมน 1. ความสวยงามและความนาสนใจของเวบไซต อยในระดบปานกลางเกอบจะด แสดง

วาผเขาชมใหความสนใจในการเขาชมเวบไซตพอสมควร 2. การเขาชมเวบไซตมความงาย อยในระดบด ผเขาชมสวนใหญมความเขาใจในการ

เขาชมและใชงาน แตยงมผเขาชมบางสวนท�ยงไมมความเขาใจในการใชงาน ดงน�นจะตองพฒนาเวบไซตใหมความงายตอการใชงานมากข�นเพ�อความเขาใจของผเขาชมตอไป

3. เวบไซตมประโยชนสาหรบบคคลท�วไปในระดบดพอสมควร แสดงวาเวบไซตใหประโยชนกบผเขาชมอยางด

4. เวบไซตมประโยชนตอสถานประกอบการในระดบด เน�องจากสถานประกอบการไมคอยเปนท�รจกกนอยางแพรหลายนก เวบไซตน� จงเปนการประชาสมพนธสถานประกอบการและทาใหเปนท�รจกกนอยางแพรหลายมากข�น

5. เน�อหาในเวบไซตเหมาะสม ในระดบด แสดงวาเน�อหาสามารถส�อสารและใหความเขาใจตอผเขาชมเปนอยางด

5.1.2 การสงเกต

การสงเกตเปนการประเมนท�ไดจากการสงเกตการณเขาใชของผใชงานเวบไซต เปนการสารวจความพงพอใจท�ผใชงานมตอการใชงานเวบไซต จากการสงเกตการเขาใชและรบชมเวบไซตสรปไดดงน�

1. ผเขาชมเวบไซตมความสนใจในการเขาชมและใชงานเวบไซต

2. ผเขาชมเวบไซตสามารถเขาใชงานไดงาย และมความเขาใจเน�อหาในเวบไซต

3. ผเขาชมเวบไซตรจกเก�ยวกบเวบไซตอบตเหต มากข�น

5.2 สรปผลการศกษา

เวบไซตน� เปนเวบไซตการพฒนาระบบเพ�ออเลกทรอนกสเพ�อสงเสรมธรกจขนาดกลางและขนาดยอม (SMEs) เร�อง เวบไซตก�งกมล ชอป เพ�อเปนการแนะนาประชาสมพนธเวบไซตรานก�งกมล ชอปใหเปนท�รจกกนอยางแพรหลาย การศกษาของการทาเวบไซตในคร� งน� มวตถประสงคเพ�อใหนกศกษา ไดเรยนรการคด วเคราะหการออกแบบเวบไซต มประสบการณและความชานาญในการสรางเวบไซตมากข�น และยงเปนการพฒนาศกยภาพของนกศกษาใหมประสทธภาพตอไป

30

หลงจากท�ไดจดทาเวบไซตก�งกมล ชอปแลวสามารถสรปผล ปญหา อปสรรค และขอเสนอแนะในการศกษาในคร� งน� โดยสงเขปดงน�

5.3 ปญหาอปสรรค และขอจากดของระบบ

5.3.1 ผจดทาไมมความชานาญและความสามารถในการทาเวบไซต

5.3.2 ผจดทาขาดความรทางดานการใชโปรแกรมในการทาเวบไซตรวมไปถงโปรแกรม

ตกแตงรปภาพ

5.3.3 มการแสดงผลท�ผดพลาดจากท�ไดออกแบบไว

5.3.4 ผจดทายงขาดประสบการณในการทาเวบไซต จงทาใหออกแบบผงงานซบซอน ยากตอ

การใชงาน

5.4 ขอแนะนา

5.4.1 เวบไซตควรจะมระบบงานท�ใชงายและออกแบบอยางเปนระบบมากข�น

5.4.2 เวบไซตควรจะมฐานขอมลและระบบการสมครสมาชก

5.4.3 เวบไซตดเรยบงายเกนไป ควรจะมลกเลนเพ�อใชดงดดผเขาชมและผใชงานเวบไซต

31