บทที่ 4 - siam university · 4.2...

บทท 4

ผลการปฏบตงานตามโครงงาน

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

1.1 ขนตอนการท าเวบไซต 1. เรมออกแบบเวบไซตจากการลางในกระดาษ 2. ออกแบบเวบไซตและโครงสรางของเวบ 3. จดเตรยมขอมล เนอหา ทงหมดใหพอดกบหนาเวบทออกแบบ 4. ขนโครงสรางเวบไซตจากโปรแกรม Dreamweaver 5. เรมลงรายละเอยดการตกแตงในสวนของ Header 6. ตกแตง Logo ของบรษทจากโปรแกรม Photoshop 7. น า Logo ทตกแตงเสรจแลวมาใสใน Header ในโปรแกรม Dreamweaver 8. หา Code ชดเมนส าหรบท าเวบไซต และน ามาใส ดดแปลงเปนเมนท

ออกแบบไว 9. คนหา Footer จากเวบไซต เพอน ามาเปนแนวทาง 10. ท า Footer จากโปรแกรม Photoshop และน าไปใสใน Dreamweaver 11. ดาวโหลดชด Code สไลดภาพ และท าการแกไขโดยการน าภาพของ บรษทเขา

ไปใสแทน 12. น าสไลดภาพมาใสในโปรแกรม Dreamweaver 13. Copy Code โครงสรางทงหมด เพอน าไปสรางแบบเวบไซตของทกๆ หนาให

มหนาตาเหมอนกน 14. เตรยมขอมลเนอหาของแตละสวน เพอน ามาใสในหนาเวบของแตละหนา

ประกอบดวย หนาแรก ขอมลบรษท การใหบรการ แกลอร ตดตอเรา 15. น าขอมลเนอหาทงหมดมาตกแตงในโปรแกรม Photoshop 16. จากนน Save ขอมลทงหมดใหเปนรปภาพ 17. น าเนอหาทเปนรปภาพของแตละหนา แตละสวนมาใสในโปรแกรม

Dreamweaver 18. ตกแตงและจดต าแหนงใหตรงเหมอนกนของทกหนา

4.2 ตวอยางประกอบขนตอนการท าเวบไซต

ภาพท 4.2.1

เปนสวนของ Header ในสวนนจะตกแตง Logo ทตกแตงเสรจแลวมาใสใน Header ในโปรแกรม Dreamweaver

ภาพท 4.2.2 ในสวนของภาพนจะเปน Code ทใชในการสรางสวนของ Header แถบสเขยว และชอของบรษท

ภาพท 4.2.3 ในสวนของภาพนจะเปนหนาหลกของเวบไซต จะมการเนนสของเมนและรปภาพ สไลดของบรษท

ภาพท 4.2.4 ในสวนของภาพนจะเปนหนาหลกของเวบไซต จะมการเนนสของเมนและรปภาพ สไลดของบรษท

ภาพท 4.2.5 ในสวนของภาพนจะเปน Code ใชในการสรางสวนของเนอหา จากภาพท 4.2.4

ภาพท 4.2.6 ในสวนของภาพนจะเปนสวนของ Footer ตกแตงรปภาพใน Photoshop และน ามาใสใน โปรแกรม Dreamweaver

ภาพท 4.2.7 ในสวนของภาพนจะเปน Code ใชในการสรางสวนของ Footer จากภาพท 4.2.6

4.3 ผลการท าเวบไซต

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

4.4 ตวอยางของหนาเวบไซด บรษท โนพ อนเซนทฟ ทวร จ ากด

ภาพท 4.4.1

หนาแรกของเวบไซต จะมปม 5 เมน

ภาพท 4.4.2 ขอมลเกยวกบบรษท

ภาพท 4.4.3 การใหบรการของบรษท

ภาพท 4.4.4 แกลอร

ภาพท 4.4.5 การตดตอและแผนทบรษท

4.5 ผลส ารวจในการสรางเวบไซต

ภาพท 4.5.1 ดานขอมลขาวสารของเวบไซต

ภาพท 4.5.2 ดานการออกแบบและจดรปแบบ