1

ชอโครงการ เวบไซต หมบานหลกชย

ผเขยน นายภทรพงศ เจรญรวโรจน

สาขา คอมพวเตอรธรกจ

คณะ บรหารธรกจ

อาจารยทปรกษาโครงการ อาจารยจระศกด แผลงศร

ปการศกษา 2555

บทคดยอ

หมบานหลกชย ตงอยท หมท 9 ถนน เชยงใหม-ดอยสะเกด ต.สนนาเมง อ.สนทราย

จ.เชยงใหม 50210 โดยผจดท าไดท าเวบไซตขนมาเพอ เผยแผขอมลของ หมบานหลกชยใหแก

ลกบานและประชาชนภายในชมชนใกลเคยงหมบานหลกชย โดยจะประกาศขาวสารในชวงเชา

ประมาณ 8.00 น. และชวงเวลา 18.00 น. และจะมการประกาศกจกรรมตางๆใหทราบไมวาจะ

เปนกจกรรมของหมบานหลกชยเชน กจกรรมงานบญตางๆ กจกรรมกฬาการแขงขนไมวาจะ

เปนการแขงขนภายในหมบานหรอจะเปนการแขงขนนอกหมบานโดยสวนใหญจะจดแขงขนกนท

เทศบาลสนนาเมง และกจกรรมประเพณตางๆเชน ประเพณลอยกระทง อกทงยงมกจกรรม

ตางๆทเปนสากลเชน กจกรรมวนตรษจน เปนตน โดยใหหมบานหลกชย เปนกรณศกษา และ

เปนประโยชนตอลกบานและชาวบานภายในชมชนและยงชวยท าใหลกบานสามารถรบรขาวสาร

ไดอยางถกตองอกทงยงสามารถรก าหนดการลวงหนาไดวาทางหมบานหลกชยจะมการจด

กจกรรมตางๆอยางไร

วทยาลยเทคโนโลยพายพและบรหาธรกจ เลงเหนคณคา ความสามารถและ

สมรรถนะของนกศกษา ทางวทยาลยจงเปดโอกาสใหนกศกษาเรยนรผานการปฏบตเพอให

เกดประสทธภาพสงสด ทางผจดท าจงไดจดท าโครงการเวบไซตเกยวกบ หมบานหลกชย เพอ

เปนการประชาสมพนธและเกบรวบรวมขาวสาร หมบานหลกชย โดยผานระบบเครอขาย

อนเทอรเนตเปนสอกลางในการเผยแพรขอมล และเปนการสงเสรมใหมการใชอนเทอรเนตมา

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

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

โครงการและเปนการสงเสรมใหนกศกษาเรยนรผานการปฏบตเพอใหเกดทกษะในดานตาง ๆ

2

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

โครงการเวบไซต หมบานหลกชย เพอสงเสรมและสอดคลองกบอตลกษณสาขา คอมพวเตอร

ธรกจทวา “ตรรกะด กาวทนเทคโนโลย มมตทางสงคม”

3

สารบญ

เรอง หนา

บทคดยอ ก

กตตกรรมประกาศ ค

สารบญ ง

สารบญ (ตอ) จ

สารบญภาพ ช

บทท 1 บทน า

1.1 หลกการและเหตผล 1

1.2 วตถประสงค 2

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

1.4 ขนตอนและวธการปฏบตงาน 2

1.5 ระยะเวลาด าเนนการ 3

1.6 ขอบเขตของโครงการ 3

1.7 เครองมอและอปกรณ 4

1.8 สถานทในการด าเนนงาน 4

บทท 2 ทฤษฎและเนอหาทเกยวของ

การใชโปรแกรม Macromedia Dreamweaver 8 5

การใชโปรแกรม Adobe Photoshop CS4 8

ทฤษฏสกบการออกแบบ 12

ค านยาม 11

ตวอยางผลงานทเกยวของ 16

บทท 3 วธการด าเนนงาน

3.1 ศกษาขอมล 20

3.2 น าเสนอโครงการ 20

3.3 ด าเนนการจดท าโครงการ 20

4

สารบญ (ตอ)

เรอง หนา

บทท 4 ผลการวเคราะหขอมล

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

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

บทท 5 สรป อภปรายผล และ ขอเสนอแนะ

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

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

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

5.4 ขอเสนอแนะ 28

บรรณานกรม 29

ภาคผนวก 30

ภาคผนวก ก. แบบเสนอเคาโครงโครงการ (Proposal) 31

ภาคผนวก ข. คมอการใชงาน 32

ภาคผนวก ค. แบบประเมนความพงพอใจตอเวบไซตหมบานหลกชย 33

ภาคผนวก ง. ประวตผจดท า 34

ภาคผนวก จ. จดหมายจากกจการ 35

5

สารบญตาราง

เรอง หนา

ตารางท 1.1 แสดงรายละเอยดระยะเวลาด าเนนงาน 3

ตารางท 3.1 ตวอยางแบบประเมนความพงพอใจตอเวบไซตหมบานหลกชย 21

ตารางท 3.2 แผนการปฏบตงาน 24

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

6

สารบญภาพ

เรอง หนา

ภาพท 2.1 กรอบ Workspace Setup 6

ภาพท 2.2 หนาจอ Start Page 6

ภาพท 2.3 สวนประกอบของโปรแกรม Macromedia Dreamweaver 8 7

ภาพท 2.4 การสรางเวบเพจใหม 8

ภาพท 2.5 หนาตางการท างานของ Adobe Photoshop CS4 9

ภาพท 2.6 เมนบาร (Menu Bar) 9

ภาพท 2.7 ทลบอกซ (Toolbox) 10

ภาพท 2.8 พาเนล (Panel) 11

ภาพท 2.9 ภาพแสดงวงจรส 14

ภาพท 2.10 เวบไชตหมบานนกกฬาแหลมทอง 17

ภาพท 2.11 Login Form 17

ภาพท 2.12 เวปบอรด 18

ภาพท 2.13 ชอง Chat 18

ภาพท 2.14 สมครสมาชกและเขาสระบบ 19

ภาพท 3.1 หนาแรกของเวบไซต 21

ภาพท 3.2 หนาแรกของเวบไซต (ตอ) 22

ภาพท 3.3 หนาประวตของเวบไซต 22

ภาพท 3.4 หนาชองทางการตดตอ 23

7

บทท 1

บทน า

1.1 หลกการและเหตผล

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

ของหมบานหลกชยใหแกลกบานและประชาชนภายในชมชนใกลเคยงหมบานหลกชยโดยจะ

ประกาศขาวสารในชวงเชาประมาณ 8.00 น. และชวงเวลา 18.00 น. และจะมการประกาศ

กจกรรมตางๆใหทราบไมวาจะเปนกจกรรมของหมบานหลกชยเชน กจกรรมงานบญตางๆ

กจกรรมกฬาการแขงขนไมวาจะเปนการแขงขนภายในหมบานหรอจะเปนการแขงขนนอก

8

หมบานโดยสวนใหญจะจดแขงขนกนทเทศบาลสนนาเมง และกจกรรมประเพณตางๆเชน

ประเพณลอยกระทง ประเพณสงกรานต และประเพณอนๆ อกทงยงมกจกรรมตางๆทเปน

สากลเชน กจกรรมวนครสตมาส และตรษจน เปนตน โดยใหหมบานหลกชย เปนกรณศกษา

และเพอเปนประโยชนตอ ลกบานและชาวบานภายในชมชนและยงชวยท าใหลกบานสามารถ

รบรขาวสารไดอยางถกตองและรวดเรวอกทงยงสามารถรลวงหนาไดวาทางหมบานหลกชยจะ

มการจดกจกรรมตางๆ อยางไร

โครงการพฒนาสออเลกทรอนกสเพอชมชนน จะประกอบไปดวยประวตความเปนมา

ของหมบานและกจกรรมตางๆภายในหมบาน โดยจะมทงรปภาพและเนอหารวมถงมการ

ประกาศขอมลขาวสารของหมบานพรอมทงกจกรรมตางๆแจงใหทราบลวงหนา

วทยาลยเทคโนโลยพายพและ บรหารธรกจเลงเหนคณคาความสามารถและ

สมรรถนะของนกศกษาทา งวทยาลยจงเปดโอกาสใหนกศกษาเรยนรผานการปฏบตเพอใหเกด

ประสทธภาพสงสดโดยผานการเรยนร ในรายวชาโครงการ (Project) เพอตรงตามเปาหมายท

วทยาลยไดตงไว คอ “คดเปน เนนปฏบต จดการได ” และน าความรทไดเรยนมาบรณาการ

เพอใหเปนประโยชนตอชมชน ซงจะเปนการจดประกายใหนกศกษาไดเหนและสามารถสราง

องคความรใหมๆไดอยตลอดเวลาอนจะสงผลใหนกศกษาสามารถน าไปประยกตใชในการเรยน

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

คอ “บรณาการทางการศกษา วฒนธรรมทางปญญา การศกษาเพอชวต”

5

ดงนนนกศกษาในระดบประกาศนยบตรวชาชพ (ปวช.) ปท 3 วทยาลยเทคโนโลย

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

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

มากยงขน

1.2 วตถประสงค

1.2.1 เพอสรางสออเลกทรอนกสหมบานหลกชย

1.2.2 เพอชวยใหลกบานไดรบขาวสารไดถกตองและแมนย ามากขน

1.2.3 เพออ านวยความสะดวกใหแตลกบานและผทตองการรบรขาวสาร

1.2.4 เพอเปนแหลงใหขอมลขาวสารและกจกรรมตางๆ

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

1.3.1 หมบานไดรบการพฒนาสออเลกทรอนกส

1.3.2 สามารถอ านวยความสะดวกใหแกลกบาน

1.3.3 สามารถลดปญหาการตกหลนของขอมลขาวสารและไดรบขาวสารไมทวถง

1.3.4 ลกบานไดรบขอมลขาวสารไดอยากถกตอง

1.4 ขนตอนและวธการปฏบตงาน

1.4.1 โครงงานนเรมปฏบตงานเมอ พฤศจกายน 2555 สนสดการปฏบตงาน มกราคม

2556

1.4.2 ขนตอนการด าเนนงาน

- ศกษาประวตของหมบาน

- วเคราะหขอมล

- จดเรยงขอมล

- ออกแบบเคาโครงสออเลกทรอนกส

- จดท าสออเลกทรอนกส

- จดท าเอกสารประกอบโครงการ

- สรปผลการด าเนนงาน

6

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

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

1.6.1 น าเสนอความเปนมาของหมบานหลกชย

- ประวตการกอตงหมบาน

1.6.2 ทศนยภาพของหมบานหลกชย

- แสดงภาพภายในหมบานหลกชย

- แสดงภาพของกจกรรมตางๆทจดขน

1.6.3 ขอมลขาวสารส าหรบลกบาน

การด าเนนการ

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

พฤศจกายน

2555

ธนวาคม

2555

มกราคม

2556

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

1. ศกษาประวตของหมบาน

2. วเคราะหขอมล

3. จดเรยงขอมล

4. ออกแบบเคาโครงสออเลกทรอนกส

5. จดท าสออเลกทรอนกส

6. จดท าเอกสารประกอบโครงการ

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

ตารางท 1.1 แสดงรายละเอยดระยะเวลาด าเนนงาน

7

1.7 เครองมอและอปกรณ

1.7.1 ฮารดแวร (Hardware)

- Laptop [ HP I5 ]

- Printer { CANON MP250 SERIES PRINTER ]

- Flash Drive [ THUMB DRIVE MICRO 8GB]

- Digital Camera [ SAMSUNG ES80 ]

1.7.2 ซอฟตแวร (Software)

- Adobe Photoshop CS4 ใชในการตดแตงรปภาพ

- Adobe Illustrator CS4 ชวยในการเพมตวอกษรลงบนรปภาพ

- Adobe Flash CS4 Professional สรางภาพเคลอนไหว

- Macromedia Dreamweaver 8 เปนโปรแกรมหลกในการสรางเวบไซต

- Microsoft Office Word 2007 ใชในการท าเอกสารโครงการ

- Microsoft Office PowerPoint 2007 ใชในการท าสอน าเสนอโครงการ

1.8 สถานทในการด าเนนงาน

1.8.1 วทยาลยเทคโนโลยพายพและบรหารธรกจ เลขท 262 หม 6 ต าบลหนองจอม

อ าเภอสนทราย จงหวดเชยงใหม 50210

1.8.2 บานเลขท 151/127 หม 9 ต.สนนาเมง อ.สนทราย จ.เชยงใหม 50210

8

บทท 2

ทฤษฎและเนอหาทเกยวของ

ในการจดท าสออเลกทรอนกส เพอสงเสรมการศกษาและอ านวยความสะดวกสบาย

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

งานทฤษฎทเกยวของตามล าดบหวขอดงตอไปน

1. การใชโปรแกรม Macromedia Dreamweaver 8

2. การใชโปรแกรม Adobe Photoshop CS4

3. ทฤษฎสกบการออกแบบและส

4. ค านยาม

5. ตวอยางผลงานทเกยวของ

การใชโปรแกรม Macromedia Dreamweaver 8

Macromedia Dreamweaver 8 เปนโปรแกรมทใชส าหรบสรางเวบเพจและบรหาร

เวบไซต ทไดรบความนยมสงสดในกลมโปรแกรมประเภทเดยวกนในปจจบน เนองจาก

คณสมบตของโปรแกรมทมความสะดวกตอการใชงาน มฟงกชนทท าใหผใชสามารถจดวาง

ขอความ รปภาพ ตาราง ฟอรม วดโอ รวมถงองคประกอบอนๆ ภายในเวบเพจไดอยาง

สวยงามตามทผใชตองการ โดยไมตองใชภาษาสครปตทยงยากซบซอนเหมอนกอน

จดเดนของโปรแกรม Macromedia Dreamweaver 8

1. โปรแกรมจะท าการแปลงรหสใหเปนภาษา HTML โดยอตโนมตดงนน ผใชทไมมความร

ดานนกสามารถท าได

2. มแถบเครองมอ หรอแถบค าสง ทใชในการควบคมการท างาน แบงออกเปนหมวดหม

จงชวยในการท างานทดขน และรวดเรวยงขน

3. สนบสนนเวบเพจทเปนภาษาไทยไดด

4. มคณสมบตทสามารถจดการกบรปภาพเคลอนไหว โดยไมตองอาศย Plugin

5. สามารถเรยกใชตารางจากภายนอก โดยการอมพอรทจาก Text File

6. เปนโปรแกรมทสามารถสนบสนนการใชงาน CSS (Cadcading Style Sheet)

7. มความสามารถในการท า Drop Down Menu รวมไปถงการท าใหรปภาพเปลยนเมอ

น าเมาสไปช เปนตน

9

การเรมใชงานโปรแกรม Macromedia Dreamweaver 8 เมอเขาสโปรแกรม

Macromedia Dreamweaver 8 จะปรากฏกรอบ Workspace Setup ใหคลกเลอก Designer

แลวคลก OK เพอเขาสหนาจอการออกแบบขอโปรแกรม Macromedia Dreamweaver 8

เปด DREAMWEAVER ขนมาจากนนจะปรากฎหนาจอ Start Page ซงเปนเครองมอ

ส าหรบเรมตนการท างาน โดยตวเลอกจะแบงเปน 3 กลมดงรป ส าหรบการสรางเวบเพจเปลา

แบบพนฐาน ใหเลอกกลม Create New แลวคลกท HTML

สวนประกอบของโปรแกรม Macromedia Dreamweaver 8

- แถบชอเรอง (Title Bar) แสดงชอแฟมขอมลทก าลงใชงานอย

- แถบค าสง (Menu Bar) เปนสวนทเกบค าสงตาง ๆ ทใชงานในโปรแกรม

- แถบ Document Tool Bar เปนสวนทใชในการจดการกบเวบเพจ ณ ขณะนน

- แถบ Insert Bar เปนกลมเครองมอทใชสรางองคประกอบตางๆ ในเวบเพจ ซงประกอบดวย

ชดเครองมอ 8 ชดดวยกน

ภาพท 2.1 กรอบ Workspace Setup

ภาพท 2.2 หนาจอ Start Page

10

- พนทออกแบบ (Document Window) เปนสวนทใชส าหรบใสเนอหาและจดองคประกอบของ

เวบเพจ โดยประกอบดวยมมมองการท างาน 3 รปแบบดวยกนคอ Design, Code และ Code

and Design

- แถบสถานะ (Status Bar) เปนสวนทแสดงสถานะของการใชงานโปรแกรม ณ ขณะนน

หนาตาง Properties เปนสวนของค าสงทใชในการก าหนดคณสมบตขององคประกอบตาง ๆ

ทเราตองการเปลยนแปลงหรอตกแตง

- Panel Group เปนกลมของแผงควบคม ทใชแทนค าสงและตดตอกบฐานขอมล

การก าหนดโฟลเดอรเพอเกบเวบไซตทสรางใหม

การเรมตนสรางเวบไซตใหมในโปรแกรม Dreamweaver 8 จะตองเรมตนจากการตง

ชอเวบไซต และก าหนดต าแหนง เชน ไดรฟ และโฟลเดอร ทจะใชเกบไฟลตาง ๆ ของเวบไซตท

เราจะออกแบบ ซงท าไดตามขนตอนดงนคอ

1. คลกค าสง Site>New Site…

2. จะปรากฏกรอบ Site Definition ขนมา ใหพมพชอเวบไซตทตองการ แลวคลกปม Next

3. ใหคลกเลอก No, I do not want…….. แลวคลกปม Next

4. ระบชอไดรฟและโฟลเดอรทจะใชเกบขอมลของเวบไซตทจะท าการออกแบบ จากนนคลก

ปม Next

ภาพท 2.3 สวนประกอบของโปรแกรม

11

5. คลกทชอง How do you connect to your remote server ? แลวคลกตวเลอก None จากนน

ใหคลกทปม Next

6. จะแสดงกรอบใหเหนวาไดก าหนดเวบไซตใหมเปนทเรยบรอยแลว คลกทปม Done เพอ

เรมตนการออกแบบเวบเพจ

7. จะปรากฏชอของเวบไซต พรอมทงต าแหนงทเกบเวบไซต แสดงไวใน Panel Group

การสรางหนาเวบเพจใหม สามารถท าไดโดย

1. คลกค าสง File>New... ทแถบเมน

2. จะปรากฎกรอบ New Document ขนมา โดยคลกทตวเลอก Basic page ในชอง Category

3. คลกตวเลอก HTML ทชอง Basic page

4. คลกปม Create

การใชโปรแกรม Adobe Photoshop CS4

โปรแกรมสรางและแกไขรปภาพอยางมออาชพ โดยเฉพาะนกออกแบบในทกวงการ

ยอมรจกโปรแกรมตวนด โปรแกรม Photoshop เปนโปรแกรมทมเครองมอมากมายเพอ

สนบสนนการสรางงานประเภทสงพมพ งานวดทศน งานน าเสนอ งานมลตมเดย ตลอดจนงาน

ออกแบบและพฒนาเวบไซต ในชดโปรแกรม Adobe Photoshop การทจะใชงานโปรแกรม

Photoshop คณตองมเครองทมความสามารถสงพอควร มความเรวในการประมวลผล และม

ภาพท 2.4 การสรางเวบเพจใหม

20

หนวยความจ าทเพยงพอ ไมเชนนนการสรางงานของคณคงไมสนกแน เพราะการท างานจะชา

และมปญหา ตามมามากมาย ขณะนโปรแกรม Photoshop ไดพฒนามาถงรน Adobe

Photoshop CS4 พรอมกบเครองมอทสรางความสะดวกสบายใหกบผใชอยางมากมาย

หนาตางการท างานเรมตนเมอเรยกเปดโปรแกรมเขามาครงแรก จะพบกบพนทการ

ท างานเรมตนแบบวางๆ (พนทสเทาด า) และจะจดวางเครองมอการท างานเบองตนเอาไวรอบๆ

ดงภาพ

สวนประกอบของโปรแกรม

แอพพลเคชนบาร( Application Bar) จะเปนแถบเครองมอทเกบปมค าสงทใชงาน

บอยๆ เอาไว เชน เปดโปรแกรม Bridge หมนพนทท างาน ยอ-ขยายภาพ , จดเรยงวนโดวภาพ

และจดองคประกอบของเครองมอ

เมนบาร(Menu Bar) หรอแถบค าสงทเกบชดค าสงส าหรบจดการไฟลงานทเปดใชงาน

ใน Photoshop Cs4 โดยแบงการท างานออกเปนหมวดหมดงน

1. File ใชจดการไฟลลกษณะตางๆเชน การสรางไฟลใหม, การเปดไฟลภาพ , การบนทก, การ

น าเขาไฟล และการสงออกไฟลเพอการท างานในลกษณะตางๆ

ภาพท 2.5 หนาตางการท างานของ Adobe Photoshop CS4

ภาพท 2.6 เมนบาร (Menu Bar)

21

22

2. Edit เปนชดค าสงในหมวดหมการแกไข เชน การตด , คดลอก, การวาง รวมถงการปรบแตง

คาเบองตนของโปรแกรม

3. Image เปนชดค าสงในหมวดหมการปรบแตงภาพ เชน การปรบส, แสง, ความคมชด , การ

ลดขนาดภาพและเพมขนาดพนทใชงาน เปนตน

4. Layer เปนชดค าสงทใชจดการกบเลเยอร ทงการสรางเลเยอรใหม แปลงเลเยอรและ

จดการเลเยอรดานตางๆ

5. Select เปนชดค าสงทใสส าหรบเลอกพนทการใชงานของรปภาพ หรอใชรวมกบค าสงทอย

ในทลพาเนล

6. Filter เปนนชดค าสงทรวมเอฟเฟคตางทใชในการปรบแตงรปภาพใหพเศษกวาภาพตนฉบบ

7. Analysis เปนเครองมอวดคาและวเคราะหการท างาน มใชในPhotoshop CS4

8. 3D รวมค าสงทใชกบภาพสามมต เปนเมนใหมทเพมเขามาในPhotoshop CS4

9. View ใชเลอกรปแบบการแสดงผล เชน การซมภาพ , การเรยกใชไมบรรทด , การแสดง

เสนกรดและเสนไกด

10. Window ใชเลอกแสดงพาเนลทใชในการท างาน รวมถงการก าหนดรปแบบการแสดงวนโดว

ในแบบตางๆ

11. Help ใชแสดงความชวยเหลอของรายละเอยดการใชงานโปรแกรมในรปแบบตางๆ

ทลบอกซ (Toolbox) กลองเครองมอ จะประกอบดวยเครองมอตางๆ ทใชในการวาด

ตกแตง และแกไขภาพ เครองมอเหลานมจ านวนมาก ดงนนจงมการรวมเครองมอทท าหนาท

คลายๆ กนไวในปมเดยวกน

23

พาเนล (Panel) คอ กรอบหนาตางยอยๆทมค าสงและเครองมอในการจดการ

ตรวจสอบและปรบแตงภาพ เครองมอเหลานจะถกจดแบงไวเปนหมวดหม เชน พาเนล Color

ใชก าหนดส, พาเนล Layers ใชส าหรบจดการเลเยอร เปนตน บางพาเนลทมกใชรวมกนจะถก

จดไวในกลมเดยวกน เชน พาเนล Color พาเนล Swatches และ StyLes การเปดใชงาน Panel

ใหคลกทค าสง Windos>ชอพาเนล

ค านยาม

ภาพท 2.7 ทลบอกซ (Toolbox)

ภาพท 2.8 พาเนล (Panel)

24

ลกบาน คอ ประชาชนทอาศยอยภายในหมบานหลกชย

index คอ หนาแรกของเวปไซต

home page คอ หนาหลกของเวปไซต

25

เวบเบราเซอร (Web Browser) คอโปรแกรมทใชส าหรบเปดเวบเพจหรอ รบสง

ขอมลตามทเครองลกขายรองขอเมอเราเปดเขาสอนเตอรเนต เวบเบราเซอรทไดรบความนยม

ปจจบนมหลายโปรแกรม เชน Microsoft Internet Explorer (IE), Mozilla Firefox, และ Opera

เวบไซต (Website) มความหมายถง ขอมลเวบเพจ ( web page) หลาย ๆ หนา มา

เชอมโยงกนดวย Link เกดเปนความสมพนธของขอมลทสามารถเขาชมไปไดเรอย ๆ เชน

Website ประกอบดวย หนาแรก หนาสนคา หนาบรการ หนาตดตอสอบถาม หนาความเปนมา

ของบรษท หนารายชอกรรมการ ฯลฯ โดยแตละหนาจะม Link เชอมโยงไปยงหนาตาง ๆ

เวบเพจ (Web Page) มความหมายถง หนาขอมลหนาหนง ๆ ทอาจจะกลาวถง

เรองราวเพยงเรองเดยว หรอ หลาย ๆ เรองราวในหนาเดยวกได เนองจากมผเคยท าการวจยวา

ในการอานขอมลบนเวบเพจแตละหนานน ผอานมกจะใชระยะเวลาในอานสน ๆ อานเพอจบ

ใจความ ดงนนจงเปนเหตผลวาท าไมจงตองมการแบงเรองราวตาง ๆ เขยนออกมาเปนแตละ

เวบเพจ (Web Page) และท าการเชอมโยงกนดวย Link เพอใหประกอบกนเปนเวบไซต แตกม

ผจดท าเวบไซตบางรายทใช เวบเพจ ( Web Page) หนาเดยวในการอธบายเรองราวหลาย ๆ

เรอง ซงกถอเปนกลยทธทไดผลในดานการจงใจไดดทเดยว

ลงค (Link) หรอ ไฮเปอรลงก (hyperlink) คอค าหรอวลตาง ๆ ทปรากฏอยใน

เอกสารขอความ ใชส าหรบเปดเอกสารอนทเชอมโยงดวยวธการคลกลงบนค าหรอวลนน

โดยเฉพาะกบเวบเพจซงจะท างานบนเวบเบราวเซอร ขอความทเปนลงกมกจะปรากฏเปนส

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

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

ไฮเปอรลงกสามารถใชเปนการอางองภายในเอกสารขอความหลายมต นอกจากนการคลกบน

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

ทฤษฎสกบการออกแบบและส

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

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

การสรางระบบ เนวเกชน การออกแบบหนาเวบ รวมไปถงการใชกราฟก การเลอกใชส และ

การจดรปแบบตวอกษร นอกจากนนยงตองค านงถงความแตกตางของสอกลางในการ

แสดงผลเวบไซตดวย สงเหลานไดแก ชนดและรนของบราวเซอร ขนาดของหนาจอมอนเตอร

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

2

6

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

มองเหนและมองไมเหนลวน เปนผลมาจากกระบวนการออกแบบเวบไซตทงสน

เวบไซตทดสวยงามหรอมลกเลนมากมายนน อาจจะไมนบเปนการออกแบบทดกได

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

เรองยากทจะระบวาการออกแบบเวบไซตทดนนเปนอยางไร เนองจากไมมหลกเกณฑแนนอน

ทจะใชไดกบทกเวบไซต แนวทางการออกแบบบางอยางทเหมาะสมกบเวบไซตหนง อาจจะไม

เหมาะกบอกเวบไซตหนงกไดท าใหแนวทางในการออกแบบของแตละเวบไซตนนแตกตางกนไป

ตามเปาหมายและลกษณะของเวบไซตนน เวบไซตบางแหงอาจตองการความสนกสนาน

บนเทง ขณะทเวบอนกลบตองการความถกตอง นาเชอถอเปนหลก ดงนนอาจสรปไดวาการ

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

ความสะดวกในการใชงานของผใชเปนหลก

เวบไซตแตละประเภทตางมเปาหมายและลกษณะทแตกตางกน ตวอยางเชน

เวบไซตทเปน Search Engine ซงเปนแหลงรวมทอยของเวบไซตต างๆ ท าหนาทเปนประตไปส

เวบไซตอนๆ เวบไซตประเภทนมเปาหมายทจะใหขอมลทผใชตองการอยางรวดเรว และจะมผ

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

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

ขอมลทมประสทธภาพเพอใหไดผลลพธทรวดเรว

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

กบสงทนาตนเตน เรองราวทสนกสนาน เพลดเพลน หรออาจจะไดเรยนรสาระบางอยางบาง

ความส าคญในการออกแบบ เวบไซตเหลานจงมมากพอกบเนอหาภายในเวบไซต สวนเวบทวไป

ทใหบรการขอมล ซงไมไดมเปาหมายทจะใหความบนเทง ควรจะมการจดขอมลอยางเปนระบบ

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

เวบไซตขององคกรธรกจทมเปาหมายเพอขายสนคาหรอบรการนนยงจ าเปนตองให

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

สนคาหรอบรการโดยดจากสงทพบเหนในเวบไซต ซงลกษณะการออกแบบของเวบไซตกจะ

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

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

27

การใชสกลมกลนกน

การใชสใหกลมกลนกน เปนการใชสหรอน าหนกของสใหใกลเคยงกน หรอคลายคลง

กน เชน การใชสแบบเอกรงค เปนการใชสเดยวทมน าหนกออนแกหลายล าดบ การใชส

ขางเคยง เปนการใชสทเคยงกน 2-3 ส ในวงส เชน สแดง สสมแดง และสมวงแดง การใชสใกล

เครยง เปนการใชสทเรยงกนในวงสไมเกน 5 ส ตลอดจนการใชสวรรณะรอนและวรรณะเยน

(Wean tone colors and cool tone colors) ดงไดกลาวมาแลว

การใชสตดกน

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

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

กน อยางแทจรงม อยดวยกน 6 คส คอ สเหลอง

1. สเหลอง ตรงกนขามกบ สมวง

2. สสม ตรงกนขามกบ สน าเงน

3. สแดง ตรงกนขามกบ สเขยว

4. สเหลองสม ตรงกนขามกบ สมวงน าเงน

5. สสมแดง ตรงกนขามกบ สน าเงนเขยว

6. สมวงแดง ตรงกนขามกบ สเหลองเขยว

ภาพท 2.9 ภาพแสดงวงจรส

2

8

การใชสตดกน ควรค านงถงความเปนเอกภาพดวย วธการใชมหลายวธ เชน ใชสใหม

ปรมาณตางกน เชน ใชสแดง 20% สเขยว 80% หรอ ใชเนอสผสมในกนและกนหรอใชสหนงส

ใดผสมกบสคทตดกน ดวยประมาณเลกนอยรวมทงการเอาสทตดกนมาท าใหเปนลวดลาย

เลกๆ สลบกนในผลงานชน อาจจะใชสใหกลมกลนกนหรอตดกนเพยงอยางใดอยางหนง หร อ

อาจจะใชพรอมกนทง 2 อยาง ทงนแลวแตความตองการและความคดสรางสรรคของเรา ไมม

หลกการหรอรปแบบทตายตว

ในงานออกแบบหรอการจดภาพ หากเรารจกใชสมสภาพโดยรวมเปนวรรณะราน

หรอวรรณะเยน เราจะสามารถควบคมและสรางสรรคภาพใหเกดความประสานกลมกลน

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

ความกลมกลน หรอขดแยงได สสามารถขบเนนใหเกดจดเดนและการรวมกนใหเกดเปนหนวย

เดยวกนได เราในฐานะผใชสตองน าหลกการตางๆ ของสไปประยกตใชใหสอดคลองกบ

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

เหนแตกตางกนไป ทงนขนอยกบประสบการณและภมหลงของแตละคน สบางสสามารรกษา

บ าบดโรคจตบางชนดได การใชสภายใน หรอ ภายนอกอาคาร จะมผลตอการสมผสและสราง

บรรยากาศได

องคประกอบของการออกแบบเวบไซตอยางมประสทธภาพ

องคประกอบตอไปนถอเปนพนฐานทส าคญของเวบไซตทไดรบการออกแบบมา

อยางมประสทธภาพ

1. ความเรยบงาย (Simplicity) คอ การสอสารเนอหาถงผใชโดยจ ากดองคประกอบเสรมท

เกยวของกบการน าเสนอใหเหลอเฉพาะสงทจ าเปนเทานน

2. ความสม าเสมอ ( Consistency) ใชรปแบบเดยวกนตลอดทงเวบไซต เนองจากผใชจะรสกกบ

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

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

หนา สไตลของกราฟก ระบบเนวเกชน และโทนสทใชควรจะมความคลายคลงกนตลอดทง

เวบไซต

3. ความเปนเอกลกษณ ( Identity) การออกแบบตองค านงถงลกษณะขององคกร เนองจาก

รปแบบของเวบไซตสามารถ สะทอนถงเอกลกษณ และลกษณะขององคกรนนได

2

9

4. เนอหาทมประโยชน ( Useful Content) เนอหาถอเปนสงทส าคญทสดในเวบไซต ดงนนใน

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

ปรบปรงและเพมเตมใหทนตอเหตการณอยเสมอ เนอหาทส าคญทสดคอเนอหาทสราง

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

เวบไซตอยเสมอ

5. ระบบเนวเกชนทใชงานงาย ( User-Friendly Navigation) ระบบเนวเกชนเปนองคประกอบท

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

ทสอความหมายรวมกบค าอธบายทชดเจน รวมทงมรปแบบและล าดบของรายการท

สม าเสมอ

6. มลกษณะทนาสนใจ (Visual Appeal) เปนเรองยากทจะตดสนวาลกษณะหนาตาของเวบไซต

นาสนใจหรอไมเพราะเกยวของกบความชอบของแตละบคคลอยางไรกตามหนาตาของ

เวบไซตจะมความสมพนธกบคณภาพขององคประกอบตาง ๆ

7. การใชงานอยางไมจ ากด ( Compatibility) ควรออกแบบเวบไซตใหผใชสวนใหญเขาถงไดมาก

ทสด โดยไมมการบงคบให ผใชตองตดตงโปรแกรมใดๆ เพมเตมหรอตองเลอกใชบราวเซอร

ชนดใดชนดหนงจงจะสามารถเขาถงเนอหาได สามารถแสดงผลไดในทกระบบปฏบตการ

และทความละเอยดหนาจอตางกนอยางไมมปญหา

8. คณภาพในการออกแบบ ( Design Stability) ถาตองการใหผใชรสกวาเวบไซตทมคณภาพ

ถกตอง และเชอถอได กควรใหความ ส าคญ กบการออกแบบเวบไซตอยางมาก

9. ระบบการใชงานทถกตอง ( Functional Stability) ระบบการท างานตา งๆ ในเวบไซตจะตองม

ความแนนอนและท าหนาทไดอยางถกตอง

ตวอยางผลงานทเกยวของ

ตวอยางผลงานทเกยวของคอ เวบไ ซตหมบานนกกฬาแหลมทอง ซงเปนสอ

อเลกทรอนกสเพอสงเสรมการศกษาและ อ านวยความสะดวกใหแกประชาชนภายในหมบาน

เชนเดยวกบโครงการททางผจดท าไดจดท าขน

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

ส าหรบสมาชกอกดวยทส าคญยงมชองแชทใหคยกนไดตลอดเวลา

3

0

ภาพท 2.10 เวบไซตหมบานนกกฬาแหลมทอง

ภาพท 2.11 Login Form

31

ภาพท 2.13 ชอง Chat

ภาพท 2.12 เวบบอรด

32

3

3

ถงแมเวบไซตทผจดท าไดจดท าขนยงไมสามารถมระบบสมาชก มเวบบอรด หรอม

ชองแชทส าหรบการพดคยโตตอบกนทนท แตทางผจดท ากจะท าการศกษาและพฒนาตอไป ซง

ในเบองตนน เพอการตดตอสอสารหรอแจงปญหา ทางผจดท าไดจดท าหนา Fanpage และ

Twitter รวมถงการเบอรโทรศพท เปนแนวทางทดแทนในเบองตน

ภาพท 2.14 สมครสมาชกและเขาสระบบ

34

บทท 3

วธการด าเนนงาน

3.1 ศกษาขอมล

หมบานหลกชย ตงอยท หมท 9 ถนน เชยงใหม-ดอยสะเกด ต.สนนาเมง อ.สนทราย

จ.เชยงใหม 50210 เผยแผขอมลของ หมบานหลกชยใหแกลกบานและประชาชนภายในชมชน

ใกลเคยงหมบานหลกชยโดยจะประกาศขาวสารในชวงเชาประมาณ 8.00 น. และชวงเวลา

18.00 น. และจะมการประกาศกจกรรมตางๆใหทราบไมวาจะเปนกจกรรมของหมบานหลกชย

เชน กจกรรมงานบญตางๆ กจกรรมกฬาการแขงขนไมวาจะเปนการแขงขนภายในหมบานหรอ

จะเปนการแขงขนนอกหมบานโดยสวนใหญจะจดแขงขนกนทเทศบาลสนนาเมง และกจกรรม

ประเพณตางๆเชน ประเพณลอยกระทง อกทงยงมกจกรรมตางๆทเปนสากลเชน กจกรรมวน

ตรษจน เปนตน โดยให หมบานหลกชย เปนกรณศกษา และเปนประโยชนตอ ลกบานและ

ชาวบานภายในชมชนและยงชวยท าใหลกบานสามารถรบรขาวสารไดอยางถกตองอกทงยง

สามารถรลวงหนาไดวาทางหมบานหลกชยจะมการจดกจกรรมตางๆ อยางไร

3.2 น าเสนอโครงการ

ในการน าเสนอโครงการทางผจดท าไดน าเสนอโครงการโดยการน าเสนอตออาจารย

ผสอน น าเสนอกบอาจารยทานอนตามทวทยาลยไดจดให โดยทางวทยาลยจะจดใหน าเสนอ

โครงการทงหมด 2 รอบ คอ น าเสนอกบอาจารยภายในคณะ และน าเสนอกบอาจารยภายใน

วทยาลย เพอทโครงการทจดท าจะไดมประสทธภาพมากขน หลงจากทไดด าเนนเสนอโครงตอ

อาจารยผสอน น าเสนอกบอาจารยทานอนตามทวทยาลยไดจดใหแลว ทางผจดท ากน า

โครงการไปน าเสนอใหกบนายณฐวฒน เจรญรวโรจนซงเปนผใหญบานของหมบานหลกชย

3.3 ด าเนนการจดท าโครงการ

3.3.1 ประสานงานเกยวกบสถานทจดท าโครงการ

3

5

ผจดท าไดเรมเขาไปตดตอขอจดท าโครงการกบนายณฐวฒน เจรญรวโรจนซงเปน

ผใหญบานของหมบานหลกชย ตงแตวนท 1 พฤศจกายน 2555 และไดเรมเขาไปเกบรวมรวม

ขอมล ณ วนท 2 พฤศจกายน 2555 และส าเรจเมอ วนท 1 มนาคม 2556

25

ตารางท 3.1 ตวอยางแบบประเมนความพงพอใจตอหมบานหลกชย

3.3.2 การจดท าสอทเกยวของ

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

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

ทานและประชาชนทอาศยอยภายในหมบานทเขาชมเวบไซต 5 ทาน

ตวอยางแบบประเมนความพงพอใจตอเวบไซตหมบานหลกชย

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

5 4 3 2 1

1. ขอมลภายในเวบไซตหมบานหลกชยน าไปใชประโยชนไดจรง

2. เวบไซตมความสวยงามและนาสนใจ

3. เวบไซตมประโยชนตอหมบานหลกชยและลกบาน

4. เวบไซตมความสะดวกสบายตอการใชงาน

5. ไดรบขาวสารทวถงมากขน

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

3.3.3 ตวอยางผลงาน

2

1

3

ภาพท 3.1 หนาแรกของเวบไซต

26

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

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ เปนขาวสารทแจงลาสด

สวนท 4 คอ เมนทเมอคลกแลวจะเขาสหนาคลงภาพตามรป

สวนท 5 คอ เมนทแจงขาวสารทส าคญของจงหวดเชยงใหมและประเทศ

ภาพท 3.2 หนาแรกของเวบไซต(ตอ)

4 5

ภาพท 3.3 หนาประวตของเวบไซต

2

1

3

27

28

จากภาพท 3.2 เปนภาพหนาประวตของเวบไซตมรายละเอยดดงน

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ เปนประวตของหมบานหลกชย

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

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ เปนแผนทของหมบานหลกชย

สวนท 4 คอ เปนชองทางการตดตอกบผใหญบานโดยตรงและทอยของหมบาน

ภาพท 3.3 หนาชองทางการตดตอ

2

1

3

4

29

3.3.4 แผนการปฏบตงาน

การด าเนนการ

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

พฤศจกายน

2555

ธนวาคม

2555

มกราคม

2556

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

1. ศกษาขอมลหมบานหลกชย

2. เรยบเรยงขอมลทมอย

3. ออกแบบเคาโครงของสออเลกทรอนกส

4. จดท าสออเลกทรอนกส

5. จดท าเอกสารประกอบโครงการ

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

ตารางท 3.2 แผนการปฏบตงาน

30

บทท 4

ผลการวเคราะหขอมล

ผลการสรปเรองการพฒนาสออเลกทรอนกส เพอสงเสรมการศกษา เรองหมบาน

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

อเลกทรอนกสทสามารถอ านวยความสะดวกระหวางหมบานหลกชยกบผทตองการรบขาวสาร

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

กจกรรม ซงในการจดท าสออเลกทรอนกสนยงมวตถประสงคเพอประชาสมพนธขาวสารให

กระจายทวถงกบประชาชนภายในหมบานมากยงขน ซงมผลการด าเนนงานโครงงาน ดงน

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

การพฒนาสออเลกทรอนกสเพอสงเสรมการศกษา เรองหมบานหลกชย ควรมการ

วางแผนเปนขนเปนตอน ก าหนดวตถประสงคชดเจนตงแตขนตอนการออก ขนตอนการผลต

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

4.1.1 การออกแบบเวบไซต

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

ศกษาทอยของหมบานหลกชย

ศกษาประวตของหมบานหลกชย

สอบถามและรวบรวมขอมลทจะใชท าเวบไซต

ออกแบบโครงสรางเวบไซต

บนทกขอมลจากทไดสอบถามและรวบรวมมา

ท าการทดสอบและแกไขเวบไซต

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

ความตองการของหมบานหลกชย

ความตองการของผทตองการเขารบขาวสารหรอกจกรรม

27

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

น าเสนอตออาจารยผสอน

น าเสนอตออาจารยภายในคณะ

น าเสนอตออาจารยภายในวทยาลย

น าเสนอตอผใหญบานหมบานหลกชย

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

1. ออกแบบเคาโครงเวบไซต

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

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

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

ณ ปจจบน เวบยงไมไดมการ Upload ขน Host อาจจะใชในองคกรอนทราเนต

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

ปจจบนอาจจะยงไมสามารถใชไดจรง

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

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

โปรแกรม Macromedia Dreamweaver 8

โปรแกรม Adobe Photoshop CS4

โปรแกรม Adobe Illustrator CS4

4.2.2 การวดผล

แบบประเมนความพงพอใจตอเวบไซตหมบานหลกชย

28

บทท5

สรป อภปรายผล และ ขอเสนอแนะ

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

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

ประเมนการเขาใชในดานตางๆ ไมวาจะเปนทางสถต การสงเกตและรบแจงปญหาการใชงาน

ดงน

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

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

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

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

ในเวบไซต

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

ประเมนจะสมจากคณะกรรมการของหมบาน 5 ทานและประชาชนทอาศยอยภายในหมบานท

เขาชมเวบไซต 5 ทาน

แบบประเมนความพงพอใจตอเวบไซตหมบานหลกชย

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

5 4 3 2 1

1. ขอมลภายในเวบไซตน าไปใชประโยชนไดจรง 70% 20% 10% 0% 0%

2. เวบไซตมความสวยงามและนาสนใจ 50% 40% 10% 0% 0%

3. เวบไซตมประโยชนตอหมบานหลกชยและลกบาน 70% 20% 10% 0% 0%

4. เวบไซตมความสะดวกสบายตอการใชงาน 40% 40% 20% 0% 0%

5. ไดรบขาวสารทวถงมากขน 60% 20% 20% 0% 0%

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

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

2

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

จากผลการประเมนของผเขาใชงานเวบไซตจ านวน 10 คน สามารถสรปผล

การศกษาไดดงน

5.2.1 ขอมลในเวบไซตเปนประโยชนตอประชาชนทอาศยอยในหมบาน และท าใหหมบาน

หลกชยกระจายขาวสารใหกบลกบานไดดขน อยในระดบดมากแสดงวาในการ

จดท าเวบไซตหมบานหลกชยชวยใหลกบานไดรบขอมลทเปนประโยชน และชวย

ไดรบขาวสารทแมนย ามากขน

5.2.2 ความสวยงามและความนาสนใจของเวบไซตอยในระดบทด แสดงใหเหนวาเวบไซต

ไดรบความสนใจจากผเขาชม

5.2.3 เวบไซตมประโยชนตอลกบานและหมบานหลกชยระดบทดมาก ซงแสดงวาการ

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

5.2.4 เวบไซตหมบานหลกชยมความสะดวกสบายตอการใชงานในระดบด แสดงใหเหน

วาเวบไซตนงายตอการใชงาน

5.2.5 หมบานหลกชยสามารถกระจายขาวสารไดทวถงและลกบานรบทราบขาวสารท

แมนย ามากขนอยในระดบดมาก แสดงใหเหนวาเวบไซตสามารถเขาถงลกบานได

ตลอดเวลา

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

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

ผดพลาดจากทไดออกแบบไว และยงไมสามรถแกไขขอผดพลาดบางประการได ซงผจดท าจะ

น าขอผดพลาดดงกลาวไปศกษาและพฒนาตอไป

5.4 ขอเสนอแนะ

5.4.1 ขอเสนอแนะในการใชงาน

ในสวนของคลงภาพควรแบงใหเปนหมวดหมมากขน

5.4.2 ขอเสนอแนะในการน าไปพฒนาครงตอไป

ควรมการเพมระบบถาม-ตอบแบบออนไลนเหมอนการ Chat เพอเพมความสะดวก

ใหกบผเขาขมเวบไซตมากขน

3

บรรณานกรม

พนจนทร ธนวฒนเสถยร และคณะ. ออกแบบและสรางเวบสวยดวย DREAMWEAVER 8

ฉบบสมบรณ. กรงเทพฯ: บรษท ซคเซส มเดย จากด, 2549.

พนจนทร ธนวตนเสถยร . ออกแบบและสรางเวบสวยดวย DREAMVEAVER 8 ฉบบเรยน

ลดเปนเรว. กรงเทพฯ: บรษท ซคเซส มเดย จากด, 2549.

พนจนทร ธนวฒนเสถยร และ ปยะ นากสงค. ออกแบบ สราง โปรโหมด Website step by

step. กรงเทพฯ: บรษท ซคเซส มเดย จากด, 2549.

4

คมอการใชงาน

เวบไซตหมบานหลกชย จะประกอบไปดวยหนาแรก หนาประวต หนาแผนท หนา

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

หมบาน ซงจะอธบายการใชงานในแตละหนาใหรบทราบโดยทวกนดงน

การใชงานหนาแรก

ภาพท ข.1 หนาแรกของเวบไซต

2

1

3

ภาพท ข.2 หนาแรกของเวบไซต(ตอ)

4 5

5

จากภาพท ข.1 และ ข.2 เปนภาพหนาแรกของเวบไซตมรายละเอยดดงน

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ เปนขาวสารทแจงลาสด

สวนท 4 คอ เมนทเมอคลกแลวจะเขาสหนาคลงภาพตามรป

สวนท 5 คอ เมนทแจงขาวสารทส าคญของจงหวดเชยงใหมและประเทศ

การใชงานหนาประวต

จากภาพท ข.3 เปนภาพหนาประวตของเวบไซตมรายละเอยดดงน

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ เปนประวตของหมบานหลกชย

ภาพท ข.3 ประวตของหมบานหลกชย

2

1

3

6

การใชงานหนาแผนท

จากภาพท ข.4 เปนภาพหนาแผนทของเวบไซตมรายละเอยดดงน

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ เปนแผนทของหมบานหลกชย

สวนท 4 คอ เปนชองทางการตดตอกบผใหญบานโดยตรงและทอยของหมบาน

การใชงานหนากจกรรม

ภาพท ข.5 หนากจกรรมของเวบไซต

2

1

3

4

4

2

1

3

ภาพท ข.4 หนาแผนทของเวบไซต

7

จากภาพท ข.5 เปนภาพหนากจกรรมของเวบไซตมรายละเอยดดงน

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ เปนขาวกจกรรมทไดแจงไว

สวนท 4 คอ เปนการไปหนาถดไปหรอยอนกลบ

การใชงานหนาขาวสาร

จากภาพท ข.6 เปนภาพหนาขาวสารของเวบไซตมรายละเอยดดงน

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ เปนขาวสารทไดแจงไว

สวนท 4 คอ การแสดงวาขาวสารในแตละเดอนมทขาวและมขาวอะไรบาง

สวนท 5 คอ เปนการไปหนาถดไปหรอยอนกลบ

ภาพท ข.6 หนาขาวสารเวบไซต 5

4

1

3 2

8

การใชงานหนาขอมลหมบาน

จากภาพท ข.7 เปนภาพหนาขอมลหมบานของเวบไซตมรายละเอยดดงน

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ ขอมลของหมบานหลกชย

การใชงานหนาคลงภาพ

ภาพท ข.7 หนาขอมลหมบานของเวบไซต

ภาพท ข.8 หนาคลงภาพของเวบไซต

2

1

3

2

1

3

4

9

จากภาพท ข.8 เปนภาพหนาคลงภาพของเวบไซตมรายละเอยดดงน

สวนท 1 คอ เมนทเมอคลกแลวจะเขาสหนาตางๆตามเมน

สวนท 2 คอ เมนทรวบรวมชองทางการตดตอตางๆ

สวนท 3 คอ คลกทรปแลวรปจะขยายออกมา

สวนท 4 คอ คลกเพอไปหนาตอไป