โครงการ เว็บไซต์...

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

Website about E-learning for Webpage Design

จดท าโดย นายธนากร คดค านวล นายพรวฒน สวางนวล นายพนธกานต โคตรศรกลยา

โครงการนเปนสวนหนงของการศกษาตามหลกสตรประกาศนยบตรวชาชพ

สาขาวชาคอมพวเตอรธรกจ วทยาลยเทคโนโลยอรรถวทยพณชยการ

ปการศกษา 2561

ก

ชอโครงการภาษาไทย สอการเรยนการสอนวชาการสรางเวบไซต ชอโครงการภาษาองกฤษ E-Learnning For Webpage Design โดย 1. นายพรวฒน สวางนวล

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

............................................................ (อาจารยดฐประพจน สวรรณศาสตร)

อาจารยทปรกษา

............................................................ (อาจารยฐตรตน นยพฒน) อาจารยทปรกษารวม

............................................................ (อาจารยดฐประพจน สวรรณศาสตร) หวหนาสาขาวชาคอมพวเตอรธรกจ

ข

บทคดยอ หวขอโครงการ เวบไซตสอการเรยนการสอนวชาการสรางเวบไซต E-learning for Webpage Design

ผจดท าโครงการ นายพรวฒน สวางนวล นายธนากร คดค านวล นายพนธกานต โคตรศรกลยา อาจารยทปรกษา อาจารยดฐประพจน สวรรณศาสตร อาจารยทปรกษารวม อาจารยฐตรตน นยพฒน สาขาวชา สาขาวชาคอมพวเตอรธรกจ สถาบน วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561 --------------------------------------------------------------------------------------------------------------------------

บทคดยอ คณะผจดท าคดโครงการเพอสรางสอเวบไซตสอการเรยนการสอนวชาการสรางเวบไซต เพอ

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

กะทดรด เหมาะส าหรบผทตองการจะศกษาเกยวกบตวโปรแกรมเบองตน

ทางคณะผ จ ดท าไดมการใชโปรแกรม Adobe Dreamweaver Cs6ใชในการออกแบบหนา

เวบไซต และ ใช Adobe Photoshop CS5ในการออกแบบ Logo Banner ใสรปภาพและขอความ ทาง

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

สมบรณยงขน

โครงการนใหประโยชนและความรในการใชโปรแกรม Adobe Dreamweaver Cs6 กบทกคน

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

และสมบรณ

ค

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

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

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

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

ง

ค ำน ำ

โครงการนเปนสวนหนงของวชาโครงการ ตามหลกสตรประกาศนยบตรวชาชพ (ปวช.) สาขางานคอมพวเตอรธรกจ เปนการน าความรทไดศกษามาสรางเปนผลงานทางวชาการ โดยคณะผจดท าไดเลอกทจะท าโครงการประเภท เวบไซต โครงการนมเนอหาเกยวกบ การเรยนการสอนวชาโปรแกรมการสรางเวบไซต หรอ โปรแกรม Adobe Dreamweaver Cs6 ผจดท าไดมการประยกตใชโปรแกรม Adobe Dreamweaver Cs5 ในการออกแบบหนาเวบ และ Adobe Photoshop CS5ในการออกแบบ Logo Banner ใสรปภาพและขอความ ทางคณะผจดท าหวงเปนอยางยงวาการท าโครงการนจะใหความร และความเขาใจแกผ รบชมไมมากกนอย หากมขอผดพลาดประการใด ทางคณะผจดท าขออภยไว ณ ท นดวย และคณะผจดท าจะพฒนาผลงานตอไปใหดยงขน

คณะผจดท า

24 กมภาพนธ 2561

จ

สารบญ หนา

หนาอนมต ก บทคดยอ ข กตตกรรมประกาศ ค ค าน า ง สารบญ จ สารบญรป ช สารบญตาราง ญ บทท 1 บทน า 1.1 ภมหลงและความเปนมา 1 1.2 วตถประสงคโครงการ 2 1.3 ขอบเขตการศกษา 2 1.4 ประโยชนทคาดวาจะไดรบ 2 1.5 แผนการด าเนนงาน 3 1.6 เครองมอทใช 4 1.7 งบประมาณการด าเนนงาน 4 บทท 2 ระบบงานและทฤษฎทเกยวของ 2.1 ระบบงานปจจบน 5 2.2 ปญหาทเกดขนในระบบงานปจจบน 6 2.3 ทฤษฎทเกยวของ 6 2.4 การน าระบบคอมพวเตอรในการใชงาน 28 บทท 3 การออกแบบงานดวยระบบคอมพวเตอร 3.1 การออกแบบ Sitemap 29 3.2 การออกแบบ Story Board 37 3.3 การออกแบบสงน าเขา (Input Design) 47 3.4 การออกแบบสงน าออก (Output Design) 50 บทท 4 การพฒนาระบบ เวบไซต เรอง การสรางเวบไซต 4.1 เครองมอและอปกรณทใช 51 4.2 โปรแกรมทงหมดทใชในการพฒนา 51 4.3 การตดตงโปรแกรมระบบ 52 4.4 วธการใชงาน 54

ฉ

สารบญ (ตอ)

หนา บทท 5 สรปการท าโครงการ 5.1 สรปผลโครงการ 65 5.2 ปญหาและอปสรรคในการด าเนนงาน 66 5.3 สรปแผนการด าเนนงานจรง (Gantt Chart) 67 5.4 สรปคาใชจายในการด าเนนงานจรง 68 บรรณานกรม 69 ภาคผนวก

- ใบขอเสนออนมตโครงการระบบคอมพวเตอร (ATC.01) 70 - ใบเสนออาจารยทปรกษารวมโครงการ (ATC.02) 71 - ใบขอสอบโครงการระบบคอมพวเตอรธรกจ (ATC.03) 72 - ใบรายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (ATC.04) 74 - ใบบนทกการเขาพบทปรกษาโครงการ (ATC.05) 75

ประวตผจดท าโครงการ 78

ช

สารบญรป หนา รปท 2.1 ขนาดของเวบไซต 800 × 600 pixels 6 รปท 2.2 ภาพโครงสรางแบบเรยงล าดบ 9 รปท 2.3 ภาพโครงสรางแบบล าดบขน 10 รปท 2.4 ภาพโครงสรางแบบตาราง 10 รปท 2.5 ภาพโครงสรางแบบใยแมงมม 11 รปท 2.6 ตวอยางโครงสรางเวบไซต 14 รปท 2.7 การก าหนดการเชอมโยงเวบเพจ 14 รปท 2.8 ตวอยางการตงชอไฟล 15 รปท 2.9 ตวอยางการออกแบบโฮมเพจ 15 รปท 2.10 ตวอยางโครงสรางเวบไซต 16 รปท 2.11 ภาพแสดงการสรางเวบดวยภาษา HTML 17 รปท 2.12 เวบไซตการลงทะเบยนขอพนทเวบไซต 17 รปท 2.13 การอพโหลดเวบไซต 18 รปท 2.14 ตวอยางการเรยกดเวบไซต 19 รปท 2.15 แมสวตถธาต 23 รปท 2.16 สขนท 2 24 รปท 2.17 สขนท 3 24 รปท 2.18 วรรณะส 25 รปท 2.19 การใชสใกลเคยงกบสคตรงขาม 26 รปท 2.20 การใชโครงสามเหลยมในวงจรส 27 รปท 3.1 แสดง Site map 29 รปท 3.2 แสดงหนา Index 37 รปท 3.3 แสดงหนา Home 37 รปท 3.4 แสดงหนา ความเปนมา 38 รปท 3.5 แสดงหนา บทเรยน 38 รปท 3.6 แสดงหนา บทเรยนท 1 39 รปท 3.7 แสดงหนา บทเรยนท 2 39 รปท 3.8 แสดงหนา บทเรยนท 3 40 รปท 3.9 แสดงหนา บทเรยนท 4 40

ซ

สารบญรป (ตอ) หนา รปท 3.10 แสดงหนา บทเรยนท 5 41 รปท 3.11 แสดงหนา บทเรยนท 6 41 รปท 3.12 แสดงหนา บทเรยนท 7 42 รปท 3.13 แสดงหนา บทเรยนท 8 42 รปท 3.14 แสดงหนา บทเรยนท 9 43 รปท 3.15 แสดงหนา บทเรยนท 10 43 รปท 3.16 แสดงหนา บทเรยนท 11 44 รปท 3.17 แสดงหนา บทเรยนท 12 44 รปท 3.18 แสดงหนา บทเรยนท 13 45 รปท 3.19 แสดงหนา แบบทดสอบ 45 รปท 3.20 แสดงหนา ตดตอ 46 รปท 3.21 แสดงหนา หนาผจดท า 46 รปท 4.1 คลกท My computer เพอท าการตดตง 52 รปท 4.2 คลกขวา Open ท Floder ทสรางเวบ 52 รปท 4.3 คลกขวาท Floder Web กด Open 53 รปท 4.4 จากนนคลกขวา Index คลก Open with เลอก Google Chtome 53 รปท 4.5 แสดงหนา Index 54 รปท 4.6 หนา Home 54 รปท 4.7 หนาประวตความเปนมา 55 รปท 4.8 หนาแบบทดสอบ 55 รปท 4.9 หนาตดตอผจดท า 56 รปท 4.10 หนาผจดท า 56 รปท 4.11 หนาแนะน าผจดท า 57 รปท 4.12 หนาแนะน าผจดท า 57 รปท 4.13 หนาแนะน าผจดท า 58 รปท 4.14 บทท 1 58 รปท 4.15 บทท 2 59 รปท 4.16 บทท 3 59 รปท 4.17 บทท 4 60

ฌ

สารบญรป (ตอ) หนา รปท 4.18 บทท 5 60 รปท 4.19 บทท 6 61 รปท 4.20 บทท 7 61 รปท 4.21 บทท 8 62 รปท 4.22 บทท 9 62 รปท 4.23 บทท 10 63 รปท 4.24 บทท 11 63 รปท 4.25 บทท 12 64 รปท 4.26 บทท 13 64

ญ

สารบญตาราง หนา

ตารางท 1.1 แผนการด าเนนงาน 3 ตารางท 1.2 งบประมาณการด าเนนงาน 4 ตารางท 5.1 สรปขนาดโปรแกรม 65 ตารางท 5.2 สรปเวลาการท างานจรง (Gantt Chart) 67 ตารางท 5.3 งบประมาณการด าเนนงานจรง 68

1

บทท 1 บทน ำ

1.1 ภมหลงและควำมเปนมำ

เวบไซต คอ สอส ำหรบน ำเสนอขอมลบนเครองคอมพวเตอรซงตองเปดดวยโปรแกรมเฉพำะทำงทเรยกวำ Web Browser เวบไซตนนสรำงขนดวยภำษำคอมพวเตอรทเรยกวำ HTML (Hyper Text Markup Language) และไดมกำรพฒนำน ำภำษำคอมพวเตอร ภำษำอน ๆ มำรวมพฒนำเวบไซตท งนเพอใหเวบไซตมควำมสำมำรถเพมมำกขน เชน ภำษำ PHP, ภำษำ SQL เปนตน เวบไซต นนมค ำศพทเฉพำะทำงหลำยค ำ เชน เวบเพจ (web page), โฮมเพจ (home page) และ ลงก (hyperlink) เปนตน

โปรแกรม Adobe Dreamweaver Cs6 เปนโปรแกรมส ำเรจรปทชวยในกำรสรำงเวบไซตไดอยำงงำยๆ โดยเรำสำมำรถน ำภำพ และขอควำมมำประกอบเปนหนำเวบเพจไดไมยำก อกทงยงสำมำรถเพมลกเลนทำงดำนเสยง ภำพเคลอนไหวกำรตดตอกบฐำนขอมลซงถอวำเปนเรองยำกแตกลบสำมำรถท ำไดงำยๆผำนโปรแกรม โปรแกรม Adobe Dreamweaver Cs6 โดยไมตองเสยเวลำกบกำรเขยนโปรแกรมดวยภำษำ HTML อกดวย นอกจำกนน โปรแกรม Adobe Dreamweaver Cs6 ย ง เปนโปรแกรมแบบ What You See Is What You Gat (WYSIWYG) คอเรำจดวำงภำพหรอขอควำมแบบใดโปรแกรมจะท ำกำรเขยนโคดใหอตโนมตตำมกำรจดวำงท ำใหผออกแบบหนำเวบไซตมสวนรวมในกำรพฒนำเวบดวยตนเองไดมำกขนถงแมจะไมถนดในกำรเขยนโคดกตำมโปรแกรม Adobe Dreamweaver CS6 น ถอเปนอกหนงโปรแกรมทำงเลอกส ำหรบบคคลทตองกำรสรำงเวบไซตทมประสทธภำพดวยตวทำนเอง พรอมทงน ำควำมรทไดไปประยกตใชในรำยวชำอนๆ หรอ เปนขอมลในกำรท ำธรกจกำรคำขำยเพอสรำงรำยไดผำนชองทำง Internet

สรปดวยเหตทกลำวขำงตนนทำงคณะผจดท ำจงอยำกน ำเสนอเรองกำรใชโปรแกรม Adobe Dreamweaver Cs6 สรำงเวบไซตและพฒนำกำรสรำงเวบไซตรวมถงใหควำมรแกผทตองกำรศกษำเกยวกบกำรสรำงเวบไซตใหไดศกษำน ำไปใชประโยชนไดจรงและสำมำรถน ำมำตอยอดสรำงเวบไซตของตนเองเพอน ำไปเผยแพรใหแกผทสนใจตอไป

http://www.ninetechno.com/a/website/1198-%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%80%E0%B8%9E%E0%B8%88%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

http://www.ninetechno.com/a/website/955-what-is-homepage.html

2

1.2 วตถประสงคโครงกำร

1. เพอใหไดทรำบวธกำรสรำงเวบไซต 2. เพอใหไดทรำบวธกำรสรำงขอควำม 3. เพอใหไดทรำบวธกำรตกแตงดวยภำพ 4. เพอใหไดทรำบวธกำรใสตำรำง 5. เพอใหไดทรำบวธกำรเชอมโยง

1.3 ขอบเขตกำรศกษำ

1. กำรจดท ำเวบไซตดวยโปรแกรม Adobe Dreamweaver CS6 2. กำรตกแตงภำพ และออกแบบภำพตำง ๆ ดวยโปรแกรม Adobe Photoshop CS6 3. กำรน ำขอมลเกยวกบวธกำรสรำงเวบไซตมำสรำงเปนสอกำรเรยนร 4. มกำรคนควำสอออนไลนมำใชในกำรท ำขอมล 5. มกำรน ำภำพขนตอนกำรใชโปรแกรมตำง ๆ มำน ำเสนอ 6. มกำรออกแบบปมลงคดวยโปรแกรม Adobe Photoshop CS6 7. มกำรลงคหนำเพจ

1.4 ประโยชนทคำดวำจะไดรบ

1. ไดทรำบวธกำรสรำงเวบไซต 2. ไดทรำบวธกำรสรำงขอควำม 3. ไดทรำบวธกำรตกแตงดวยภำพ 4. ไดทรำบวธกำรใสตำรำง 5. ไดทรำบวธกำรเชอมโยง

3

1.5 แผนกำรด ำเนนงำน (Gantt Chart)

รำยกำร มถนำยน 61 กรกฎำคม 61 สงหำคม 61 กนยำยน 61

ระยะเวลำ 1 2 3 4 5 1 2 3 4 1 2 3 4 1 2 3 4

อบรมกำรท ำโครงกำรนกศกษำ ปวช.3 และปวส.2

28-30 มถนำยน 61

เสนอหวขอ ATC.01โครงกำร รอบท 1 (บทท1)

29-3 มถนำยน 61

ประกำศผลหวขอโครงกำร รอบท 1

3 กรกฎำคม 61

เสนอหวขอโครงกำร รอบท 2 (บทท1)

17-20 กรกฎำคม 61

ประกำศผลหวขอโครงกำร รอบท 2

21 กรกฎำคม 61

สงบทท 2

24-28 กรกฎำคม 61 สงบทท 3

31 ก.ค. –20 ส.ค. 61 สอบหวขอโครงกำร

9 กนยำยน 61

สงควำมคบหนำ 70%

18-22 กนยำยน 61


25-29 กนยำยน 61

รำยกำร พฤศจกำยน 61 ธนวำคม 61 มกรำคม 62 กมภำพนธ 62

หมำยเหต 1 2 3 4 5 1 2 3 4 1 2 3 4 1 2 3 4


1-10 พฤศจกำยน 61 เปนตนไป

สอบโปรแกรม ระดบปวส.2

10 พฤศจกำยน

2561 สอบโปรแกรม ระดบ ปวช.3

24 พฤศจกำยน

2561 สงบทท 4

6-16 ธนวำคม 61 สงบทท 5

16-20 มกรำคม 62 สงรปเลม ซด และคำเขำเลม

23 มกรำคม –

14 กมภำพนธ 2562

ตำรำงท 1.1 แผนกำรด ำเนนงำน (Gantt Chart)

4

1.6 เครองมอทใช 1. Adobe Dreamweaver CS6 ใชส ำหรบออกแบบสรำงเวบไซต 2. Adobe Photoshop CS6 ใชออกแบบภำพ สรำงปม ตกแตงภำพใหมควำมสวยงำม 3. Microsoft Word 2016 ใชพมพเอกสำร

1.7 งบประมำณกำรด ำเนนงำน

ล ำดบ รำยกำร จ ำนวน รำคำ 1 คำกระดำษ 1 รม 200 2 คำเขำเลมเอกสำร 1 เลม 250 3 คำพมพเอกสำร 1 เลม 500 4 คำ CD 1 แผน 100

รวมเปนเงน 1,050

ตำรำงท 1.2 งบประมำณกำรด ำเนนงำน

5

บทท 2

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

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

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

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

เนองจากปจจบนมการน าเสนอเกยวกบปรากฏการณทางธรรมชาตในรปแบบตาง ๆ เชนสอโทรทศน หนงสอพมพ เสยงตามสายวทย หรอเวบไซตขาว และตามชองโซเชยลมเดยการสอสารตาง ๆ มากมาย คณะผจดท าจงมแนวคดทจะท าเรองของปรากฏการณทางธรรมชาตในรปแบบของเวบไซตโดยโปรแกรมทน ามาใช คอ Adobe Dreamweaver, Adobe Photoshop ภายในเวบไซตจะประกอบไปดวยภาพนง ภาพเคลอนไหว ขอความ โดยท าใหสงทน าเสนอเปนเวบไซตนนมความนาสนใจมากยงขน

http://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html

6

2.2 ปญหาระบบงานในปจจบน 1. เวบไซตทเสนอปรากฏการณทางธรรมชาตในปจจบน บางเวบมการเสนอเพยงดานทสวยงามของธรรมชาตหรอดานทมผลกระทบดานเดยว คณะผจดท าจงจดท าเวบไซตทรวบรวมเนอหาของธรรมชาตทงสองแบบ 2. เวบไซตทจดท าขนนอกจากจะน าเสนอเรองของธรรมชาตแลวน นยงใชส าหรบการศกษาคนควาหาขอมลแกผทตองการศกษา 3. ภายในเนอหามศพทเฉพาะภาษาองกฤษประกอบอยดวย 4. มการรวบรวมรปภาพของปรากฏการณทางธรรมชาตตาง ๆ ภายในเวบไซตทจดท าขน 5. การจดท าเนอหาในรปแบบของเวบไซตมความสะดวกสบาย มการจดเรยงอยางเปนระเบยบ งายตอการสบคน 2.3 ทฤษฎและระบบงานทเกยวของ หลกการออกแบบเวบไซต

การก าหนดขนาดเวบเพจ ขนาดของเวบไซตทนยมในปจจบนม 2 ขนาด คอ 1. ขนาดเวบไซตแบบ 800 X 600 pixels เปนขนาดทสามารถใชไดกบหนาจอทกขนาดใน

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

รปท 2.1 ขนาดของเวบไซต 800 × 600 pixels

7

2. ขนาดเวบไซตแบบ 1024 X 768 pixels เปนขนาดทนยมในปจจบน เนองจากผใชนยมใชจอคอมพวเตอรขนาดใหญขนเนองมาจากราคาจอคอมพวเตอรทถกลง

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

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

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

รปแบบตารางเปนหลก มการออกแบบหนาตารปแบบงาย เชน มเมนสารบญ และเนอหา 2. การออกแบบเวบไซตทเนนภาพกราฟก เปนการออกแบบเวบไซตทเนนภาพกราฟกทสวยงาม ซงอาจจะใชโปรแกรม Photoshop

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

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

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

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

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

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

8

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

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

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

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

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

2. การใชงานทงาย ลกษณะของเวบทมการใชงานงายจะชวยใหผใชรสกสบายใจตอการอานและสามารถท าความเขาใจกบเนอหาไดอยางเตมท โดยไมตองมาเสยเวลาอยกบการท าความเขาใจ การใชงานทสบสนดวยเหตนผออกแบบจงควรก าหนดปมการใชงานทชดเจน เหมาะสม โดยเฉพาะปมควบคมเสนทางการเขาสเนอหา (Navigation) ไมวาจะเปนเดนหนา ถอยหลง หากเปนเวบไซตทมเวบเพจจ านวนมาก ควรจะจดท าแผนผงของเวบไซต (Site Map) ทชวยใหผใชทราบวา ตอนนอย ณ จดใด หรอเครองมอสบคน (Search Engine) ทชวยในการคนหาหนาททตองการ

3. การเชอมโยงทด ลกษณะไฮเปอรเทกซทใชในการเชอมโยง ควรอยในรปแบบทเปนมาตรฐาน ทวไปและตองระวงเรองของต าแหนงในการเชอมโยง การทจ านวนการเชอมโยงมากและกระจดกระจายอยทวไปในหนาอาจกอใหเกดความสบสน นอกจากนค าทใชส าหรบการเชอมโยงจะตองเขาใจงายมความชดเจนและไมส นจนเกนไป นอกจากนในแตละเวบเพจทสรางขนมาควรม จดเชอมโยงกลบมายงหนาแรกของเวบไซตทก าลงใชงานอยดวย ทงนเผอวาผใชเกดหลงทาง และไมทราบวาจะท าอยางตอไปดจะไดมหนทางกลบมาสจดเรมตนใหม ระวงอยาใหมหนาทไมมการเชอมโยง (Orphan Page) เพราะจะท าใหผใชไมรจะท าอยางไรตอไป

4. ความเหมาะสมในหนาจอ เนอหาทน าเสนอในแตละหนาจอควรส น กระชบ และทนสมย หลกเลยงการใชหนาจอทมลกษณะการเลอนขนลง (Scrolling) แตถาจ าเปนตองม ควรจะใหขอมลทม ความส าคญอยบรเวณดานบนสดของหนาจอ หลกเลยงการใชกราฟกดานบนของหนาจอ เพราะถงแมจะดสวยงาม แตจะท าใหผใชเสยเวลาในการไดรบขอมลทตองการ แตหากตองมการใชภาพประกอบกควรใชเฉพาะทมความสมพนธกบเนอหาเทานน นอกจากนการใชรปภาพเพอเปนพนหลง (Background) ไมควรเนนสสนทฉดฉาดมากนก เพราะอาจจะไปลดความเดนชด

9

ของเนอหาลง ควรใชภาพทมสออน ๆ ไมสวางจนเกนไปรวมไปถงการใชเทคนคตาง ๆ เชน ภาพเคลอนไหว หรอตวอกษรวง (Marquees) ซงอาจจะเกดการรบกวนการอานได ควรใชเฉพาะทจ าเปนจรง ๆ เทาน นตวอกษรทน ามาแสดงบนจอภาพควรเลอกขนาดทอานงาย ไมมสสนและลวดลายมากเกนไป

5. ความรวดเรว ความรวดเรวเปนสงส าคญประการหนงทสงผลตอการเรยนร ผใชจะเกดอาการเบอหนายและหมดความสนใจกบเวบทใชเวลาในการแสดงผลนาน สาเหตส าคญทจะท าใหการแสดงผลนานคอการใชภาพกราฟกหรอภาพเคลอนไหว ซงแมวาจะชวยดงดดความสนใจไดด ฉะนนในการออกแบบจงควรหลกเลยงการใชภาพขนาดใหญ หรอภาพเคลอนไหวทไมจ าเปน และพยายามใชกราฟกแทนตวอกษรธรรมดาใหนอยทสด

โครงสรางของเวบไซต 1. เวบทมโครงสรางแบบเรยงล าดบ (Sequential Structure) เปนโครงสรางแบบธรรมดาทใชกนมากทสดเนองจากงายตอการจดระบบขอมล ขอมลท

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

รปท 2.2 ภาพโครงสรางแบบเรยงล าดบ

2. เวบทมโครงสรางแบบล าดบขน (Hierarchical Structure) เปนวธทดทสดวธหนงในการจดระบบโครงสรางทมความซบซอนของขอมล โดยแบง

เนอหา ออกเปนสวนตาง ๆ และมรายละเอยดยอย ๆ ในแตละสวนลดหลนกนมาในลกษณะแนวคดเดยวกบ แผนภมองคกร จงเปนการงายตอการท าความเขาใจกบโครงสรางของเนอหาในเวบลกษณะน ลกษณะเดนเฉพาะของ เวบประเภทนคอการมจดเรมตนทจดรวมจดเดยว นนคอ โฮมเพจ (Homepage) และเชอมโยงไปสเนอหา ในลกษณะเปนล าดบจากบนลงลาง

10

รปท 2.3 ภาพโครงสรางแบบล าดบขน

3. เวบทมโครงสรางแบบตาราง (Grid Structure) โครงสรางรปแบบนมความซบซอนมากกวารปแบบทผานมา การออกแบบเพมความ

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

รปท 2.4 ภาพโครงสรางแบบตาราง ในการจดระบบโครงสรางแบบน เนอหาทน ามาใชแตละสวนควรมลกษณะทเหมอนกน

และสามารถใชรปแบบรวมกน หลกการออกแบบคอน าหวขอทงหมดมาบรรจลงในทเดยวกนซงโดยทวไป จะเปนหนาแผนภาพ (Map Page) ทแสดงในลกษณะเดยวกบโครงสรางของเวบ เมอผใชคลกเลอก หวขอใด กจะเขาไปสหนาเนอหา (Topic Page) ทแสดงรายละเอยดของหวขอนน ๆ และภายในหนานนกจะมการเชอมโยงไปยงหนารายละเอยดของหวขออนทเปนเรองเดยวกน นอกจากน

11

ยงสามารถน าโครงสรางแบบเรยงล าดบและแบบล าดบขนมาใชรวมกนไดอกดวย ถงแมโครงสรางแบบน อาจจะสรางความยงยากในการเขาใจได และอาจเกดปญหาการคงคางของหวขอ (Cognitive Overhead) ได แตจะเปนประโยชนทสดเมอผใชไดเขาใจถงความสมพนธ ระหวางเนอหา ในสวนของการออกแบบจ าเปนจะตองมการวางแผนทด เนองจากมการเชอมโยงทเกดขน ไดหลายทศทาง นอกจากนการปรบปรงแกไขอาจเกดความยงยากเมอตองเพมเนอหาในภายหลง

4. เวบทมโครงสรางแบบใยแมงมม (Web Structure) โครงสรางประเภทนจะมความยดหยนมากทสดทกหนาในเวบสามารถจะเชอมโยงไปถง

กน ไดหมด เปนการสรางรปแบบการเขาสเนอหาทเปนอสระ ผใชสามารถก าหนดวธการเขาสเนอหาไดดวยตนเอง การเชอมโยงเนอหาแตละหนาอาศยการโยงใยขอความทมมโนทศน (Concept) เหมอนกน ของแตละหนาในลกษณะของไฮเปอรเทกซหรอไฮเปอรมเดย โครงสรางลกษณะนจดเปนรปแบบทไมมโครงสรางทแนนนอนตายตว (Unstructured) นอกจากนการเชอมโยงไมไดจ ากดเฉพาะเนอหา ภายในเวบนน ๆ แตสามารถเชอมโยงออกไปสเนอหาจากเวบภายนอกได

รปท 2.5 ภาพโครงสรางแบบใยแมงมม

องคประกอบของการออกแบบเวบไซต 1. ความเรยบงาย (Simplicity) หมายถง การจ ากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการ

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

12

บรษทใหญ ๆ อยางเชน Apple Adobe Microsoft หรอ Kokia ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก

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

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

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

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

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

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

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

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

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

แลวกสามารถสรปไดวาเวบไซตทนาสนใจนนสวนประกอบตาง ๆ ควรมคณภาพ เชน กราฟกควร

13

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

7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility) การใชงานของเวบไซตน นไมควรมขอบจ ากด กลาวคอ ตองสามารถใชงานไดดใน

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

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

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

9. ความคงทของการท างาน (Function Stability) ระบบการท างานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบ

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

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

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

ขนตอนท 2 การก าหนดโครงสรางของเวบ เปนขนตอนในการก าหนดผงของเวบเพอใหทราบองคประกอบทงหมดของเวบตวอยางดง

รป

14

รปท 2.6 ตวอยางโครงสรางเวบไซต

ขอสงเกต 1. หนาแรกของเวบ หรอโฮมเพจ จะตองชอ index สวนนามสกลใหใสตามลกษณะของ

ภาษาทใชในการสรางเวบ 2. การตงชอเวบเพจแตละหนาเวลาใหก าหนดชอเปนภาษาองกฤษตามดวยนามสกลของ

ภาษาทเราสรางเวบ เชน index.html, home.html, history.html เปนตน

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

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

รปท 2.7 การก าหนดการเชอมโยงเวบเพจ

15

ขนตอนท 4 การตงชอไฟลและโฟลเดอร 1. การสรางโฟลเดอร การสรางโฟลเดอรใหสรางเปนชอหนวยงานเรองนน ๆ ควรใชตวอกษร ภาษาองกฤษ

ตวพมพเลก หรอผสมกบตวเลข 0-9 เชน swt คอ โรงเรยนเสรมงามวทยาคม จากน นขางในโฟลเดอร swt ใหเราสรางโฟลเดอรเกบรปภาพ พนหลง ไฟลเสยง ไฟลวดโอ หรอโฟลเดอรอนเปนชอภาษาองกฤษ เชน pic คอโฟลเดอรเกบรปภาพ, bg คอ โฟลเดอรเกบพนหลง เปนตน

2. การตงชอไฟล การตงชอไฟลใหตงชอและนามสกลไฟลเปนตวอกษร ภาษาองกฤษตวพมพเลก หรอผสม

กบตวเลข 0-9 หรอเครองมอขดลบขดลาง และตงชอไฟลใหตรงกบเรองนน ๆ เชน history.html คอ ประวตของโรงเรยน, person.html คอ บคลากรของโรงเรยน เปนตน

รปท 2.8 ตวอยางการตงชอไฟล

ขนตอนท 5 การออกแบบเวบเพจแตละหนาในเวบไซต

รปท 2.9 ตวอยางการออกแบบโฮมเพจ

16

สวนประกอบของเวบไซตทด 1. สวนหวของหนา (Page Header) เปนสวนทอยตอนบนสดของหนา และเปนสวนทส าคญทสดของหนา เพราะเปนสวนท

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

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

ชอเวบไซต เมนหลกหรอลงค (Navigation Bar) เปนจดเชอมโยงไปสเนอหาของเวบไซต 2. สวนของเนอหา (Page Body) เปนสวนทอยตอนกลางของหนา ใชแสดงขอมลเนอหาของเวบไซต ซงประกอบดวย

ขอความ, ตารางขอมล ภาพกราฟก วดโอ และอน ๆ และอาจมเมนหลก หรอเมนเฉพาะกลมวางอยในสวนนดวย ส าหรบสวนเนอหาควรแสดงใจความส าคญทเปนหวเรองไวบนสด ขอมลมความกระชบ ใชรปแบบตวอกษรทอานงาย และจด Layout ใหเหมาะสมและเปนระเบยบ

3. สวนทายของหนา (Page Footer) เปนสวนทอยดานลางสดของหนา มกวางระบบน าทางทเปนลงคขอความงาย ๆ และอาจ

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

รปท 2.10 ตวอยางโครงสรางเวบไซต

17

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

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

รปท 2.11 ภาพแสดงการสรางเวบดวยภาษา HTML

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

โลกของอนเทอรเนตใหคนอนเขามาเยยมชม วธการ คอ การน าเวบไซตไปฝากกบผใหบรการพนทเวบไซตท งแบบเสยคาใชจายหรอบรการ และแบบพนทเวบไซตฟร ซงวนนเราจะขอแนะน าเวบไซตทใหบรการฟรพนทฝากเวบ คอ http://www.thcity.com

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

18

ขนตอนท 8 การอพโหลดเวบไซต เมอเราท าการสมครบรการพนทฝากเวบแลว ขนตอนตอไป คอการอพโหลดไฟลเวบไซต

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

รปท 2.13 การอพโหลดเวบไซต

ขนตอนท 9 การเรยกดเวบไซต เมอเราท าการอพโหลดไฟลเวบไซตของเราขนบนเวบไซตทใหบรการพนทฝากเวบแลว

เราสามารถเปดดเวบไซตของเราผานโปรแกรมเวบบราวเซอร เชน Internet Explorer, Google Chrome เปนตน โดยการพมพทอยเวบไซตตรง Address Bar เชน http://www/.swt.ac.th เปนตน

19

รปท 2.14 ตวอยางการเรยกดเวบไซต ประเภทของการออกแบบ

1. Organization-centered : ออกแบบเพอตอบสนองความตองการของตวองคกรเอง (ขอเสยคออาจไมตรงความตองการของผใช)

2. Technology-centered : ออกแบบโดยเนนลกเลนและเทคโนโลยททนสมย (แตอาจใชประโยชนจรงไมได)

3. Designer-centered : ออกแบบโดยเนนการน าเสนอความคดสรางสรรคดานการออกแบบ

4. User-centered : ออกแบบใหงายตอการใชงาน โดยตอบสนองผใชเปนหลก (และเลอกใชจดเดนของทง 3 ประเภทมาผสมผสานกน)

ตวชวด Usability หมายถง ความสามารถในการน ามาใชงานหรอใชประโยชน หรอความมประสทธภาพและ

ความพงพอใจทผใชสามารถใชงานไดดอยางทคาดคด รวมทงเปนคณภาพทวดจาก “ความงายของการใชงาน” ดวย

1. Learnability : ผใชสามารถเรยนรวธการใชงานในคราวแรกไดเรวเพยงใด 2. Efficiency : ผใชสามารถใชงานไดเรวและคลองเพยงใด 3. Memorability : เมอผใชไมใชงานเปนระยะเวลาหนง จะกลบมาใชงานอกครง ไดงาย

และเรวเพยงใด

20

4. Error : ผใชงานท าผดพลาดมากเพยงใด และกลบออกมาจากความผดพลาดนนไดงายเพยงใด

5. Satisfaction : ผใชเกดความพงพอใจในการใชงานเพยงใด การสรางประสบการณของผใช (User Experience (UX) Design) ระดบ Strategy Plane การสรางเวบไซตขนมาตามความตองการของผใชและของเรา

จ าเปนตองท าอะไรบาง 1. ผใช ตองการอะไรจากเวบไซตของเรา 2. เรา (ผบรหารองคกร) ตองการอะไรจากเวบไซตของเรา 3. อะไรคอความตองการของผใช ทสอดคลองกบความตองการของเรา 4. อะไรคอความตองการของผใช ทขดแยงกบความตองการของเรา ระดบ Scope Plane 1. เวบไซตตองมเนอหาอะไรบาง 2. เวบไซตตองมความสามารถอะไรบาง มหนาทหรอการท างาน (Function) อะไรบาง 3. ทราบวาเราจะตองสรางอะไร และไมควรสรางอะไร โดยการเขยน Requirement ให

รดกม และชดเจน สามารถวดได ระดบ Structure Plane 1. ออกแบบโครงสรางหลกของเวบไซต วาดแผนผงโครงสราง 2. ออกแบบระบบโตตอบกบผใช (Interaction Design) 3. การสถาปตยโครงสรางของขอมล จดองคประกอบของขอมลเนอหา (Information

Architect) ระดบ Skeleton Plane

1. การออกแบบขอมลทใชสอสารไปถงผใช (Information Design) 2. การออกแบบสวนโตตอบระหวางเวบและผใช (Interactive Design) 3. การออกแบบทศทางของการเคลอนทไปมาภายในเวบไซต หรอการน ารอง เพอไมให

หลงทาง (Navigation Design) ระดบ Surface Plane 1. การจดวาง (Grid Layout) : แบงพนทหนาจอออกเปน Header, Footer, Content (อย

กลางหนาจอ) Left Sidebar, Right Sidebar 2. การจดกลมเนอหา : จดกลมตามหมวดหม (Category) หรอแบงกลมใหญ-กลมยอย

(Hierarchy) จดเรยงตามตวอกษร (Alphabetical) เรยงตามชวงเวลา (Chorological) หรออาจจดเรยง

21

ตามความนยม (Popularity) ตามแนวของ web 2.0 เชน วดจากความนยมของผใช หรอเนอหานาสนใจ

3. ตวหนงสอ : ควรใชขนาดทอานงาย 9-12 point ส าหรบภาษาองกฤษ มความหางระหวางบรรทด 1-4 point มหวขอใหญ หวขอยอย (Headings)ใหชดเจน ตวอยางทดของการใชตวหนงสอและสทอานงายสบายตา คอเวบไซตของ Google

4. รปภาพ 5. ส : อยาใชเกน 5 ส ใชสโทนอนกบ Foreground (พนทสวนนอย ตวอกษร) ใชสโทนเยน

กบ Background (สบายตา ไมเปลงแสง เชนสด า สมวงเยนๆ) ใชสทมความจดสงเมอตองการดงดดความสนใจ ใชสเพอสรางความแตกตางระหวางลงกทสามารถคลกได กบเนอหาทวไป

ชองทางทคนเขาเวบไซต ม 3 ทาง คอ 1. คนดวย Search Engine โดยเฉพาะ Google (มากถง 71%) 2. Link ตอมาจาก web อน (18%) 3. พมพ URL หรอ Bookmark หนาเวบเอาไวโดยตรง (11%) ตงชอ URL ทเหมาะสม 1 . ต ง ช อ domain แ ล ะ sub domain ท ส า ม า ร ถ ใ ช เ ป น keyword ไ ด ด ว ย เ ช น

thai.tourismthailand.org (thai คอชอของ subdomain สวน tourismthailand.org คอชอของ domain) 2. ตงชอ Directory หรอ File ใหม keyword ทเหมาะสม มความหมาย และมความสมพนธ

กบเนอหาภายในเวบหนานน อาจตงชอ File เปนภาษาไทยกได ท าใหคนหาไดงายขน แตอาจมปญหากบ Browser รนต า ๆ บางตว เชน IE 6, Firefox 3

3. เนอหาแตละหนา ควรก าหนดชอ URL เพยงหนงเดยวเทานน และควรก าหนดชอแบบถาวร ไมเปลยนแปลง (Permalink หรอ Permanent Link)

4. ชอ URL ควรใชตวอกษรตวเลกทงหมด 5. หลกเลยงการมหลาย URL ส าหรบเนอหาเดยวกน แตถาหากตองการเปลยนลงก เชน

จาก myweb.com เปน www.myweb.com การใช Tags ตาง ๆ 1. ควรใช Headings ในการก าหนดชอหวขอตามล าดบตาง ๆ 2. ควรใชตวหนา ตวเอยง 3. ควรใช Listing 4. รปภาพ ควรมขอความอธบายดวย โดยเฉพาะถามการลงกจากภาพไปยงเวบหนาอน ๆ

http://www.myweb.com/

22

5. การลงกตอไปยงเวบอน ควรใชชอลงกทมความหมาย หรอม keyword อยในชอลงกดวย และไมยาวจนเกนไป

การวางโครงสรางเวบ 1. ควรม sitemap ใหเขาดได 2. ทกหนาภายในเวบไซต จะตองถกลงกถงได 3. อยาวางโครงสรางเวบแบบซอยยอยเกนไป ตองคลกหลายครง 4. ควรใช Breadcrumb (navigation) เพอไมใหหลงทาง ตวอยางเชน myweb > บทความ

นาสนใจ > วธการท า SEO 5. หลกเลยงการใชลงกแบบ รปภาพ Javascript หรอ flash 6. อยาใหมลงกไปยงหนาเวบทไมมอยจรง 7. ปรบแตงหนา 404NotFound ใหผใชมขอมลวาควรจะไปไหนตอ การออกแบบเวบไซตตองค านงถง 1. ความเรยบงาย ไดแก มรปแบบทเรยบงาย ไมซบซอน และใชงานไดสะดวก ไมมกราฟก

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

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

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

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

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

6. ลกษณะทนาสนใจ หนาตาของเวบไซตจะตองมความสมพนธกบคณภาพขององคประกอบตาง ๆ เชน คณภาพของกราฟกทจะตองสมบรณ การใชส การใชตวอกษรทอานงาย สบายตา การใชโทนสทเขากนลกษณะหนาตาทนาสนใจนนขนอยกบความชอบของแตละบคคล

23

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

8. คณภาพในการออกแบบ การออกแบบและเรยบเรยงเนอหาอยางรอบคอบ สรางความรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได

9. ลงคตาง ๆ จะตองเชอมโยงไปหนาทมอยจรงและถกตอง ระบบการท างานตาง ๆ ในเวบไซตจะตองมความแนนอนและท าหนาทไดอยางถก

ทฤษฎสส าหรบงานออกแบบเวบไซต

ความรเรองทฤษฎสเปนสงส าคญมากส าหรบงานออกแบบทกชนดและหากตองการ ใหงานออกแบบดสวยงามตองเขาใจเรองพนฐานของสเพองานออกแบบกอน ฉะนนไมควรมองขามเรองนไป เพราะเพยงแตการเรยนรการใชงาน Photoshop จนช านาญเทาน นย งไมสามารถสรางสรรคงานด ๆ ออกมาไดหากไมรจกใชสใหเหมาะสม โดยเรองทน ามาอธบายเปนทฤษฎสเบองตนจากสวตถธาตเพอน ามาใชกบ งานออกแบบดงน

Primary Colors (สขนท 1 แมสวตถธาต) สขนท 1 คอ แมสเปนสชดแรกทเมอน ามาผสมกนจะไดสอกมากมายสกลมนไดแก ส

เหลอง แดงและน าเงน

รปท 2.15 แมสวตถธาต

24

Secondary Colors (สขนท 2) สขนท 2 เปนสทเกดจากการผสมกนของแมสขนท 1 ซงจะไดส ดงตอไปน 1. สสม สแดง + เหลอง 2. สเขยว สเหลอง + สน าเงน 3. สมวง สน าเงน + แดง

รปท 2.16 สขนท 2

Tertiary Colors (สขนท 3) สขนท 3 เปนสทเกดจากการผสมกนระหวางสขนท 1 กบสขนท 2 ซงจะมชอเรยกตามคท

ผสมกน เปนสใหมขนมา 6 สดงน สเหลอง – สม, แดง – สม, แดง – มวง, น าเงน – มวง, น าเงน – เขยว และ เหลอง – เขยว

รปท 2.17 สขนท 3

25

Muddy Colors เปนสทเกดจากการผสมสในวงจรสทงหมดรวมกนในอตราสวนเทากนเกดเปน สกลาง

หรอคาสเฉลยจากสทงหมดซงจะออกสน าตาลเขม (หากเปนสขาวจะเปนสกลางของสแสง) Color : แมสแบงออกเปน 2 ประเภท 1. แมสวตถธาต เปนสทเกดจากธรรมชาตหรอการสงเคราะหขนมาเพอน ามาใชในวงการ

ศลปะ วงการพมพ เปนตน แมสกลมนไดแก แดง เหลอง น าเงน 2. แมสแสง เปนสทเกดจากแสงสามารถเหนไดเมอน าแทงแกวปรซมมาสองกบแสงแดด

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

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

เรมตนทวรรณะส แบงเปนสองวรรณะ ไดแก วรรณะสรอนกบวรรณสเยน วรรณะสเยน (Cold Tone) วรรณะสเยนมอย 7 ชนด ไดแกสเหลอง เหลองเขยว เขยว เขยวน าเงน น าเงน น าเงนมวง

มวง สกลมนเมอใชในงานจะไดความรสกสดชน เยนสบาย เปนตน วรรณะสรอน (Warm Tone)

วรรณะสรอนมอย 7 ส ไดแกมวง มวงแดง แดง แดงสม สม สมเหลอง เหลอง สกลมนเมอใชในงานจะรสกอบอน รอนแรง สนกสนาน เปนตน

รปท 2.18 วรรณะส

26

Color : สทเปนทงวรรณะรอนและวรรณะเยน สเหลองและมวงจะอยไดท งสองวรรณะขนอยกบสแวดลอม เชน หากน าสเหลองไปไวกบ

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

นาสนใจอก ดงน การใชสทใกลเคยงกน (Analog Colors)

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

การใชสคตรงขาม (Complementary Colors) เปนคสตองหามแตถาใชใหถกวธจะท าใหงานดโดดเดนทนท สมมตวาเลอกใชสแดงกบส

เขยว กใหใชวธทแนะน าดงน 1. เลอกสแรก (สมมตเปนสแดง) ในปรมาณมากกวา 80% ของพนท แตสทสอง (สมมต

เปนสเขยว) ตองใชในปรมาณทนอยกวา 20% 2. ผสมหรอใสสกลางลงในงานทใชสคตรงขามเพอลดความรนแรงของส 3. ผสมสคตรงขามลงไปลดทอนความเขมขนของกนและกน การใชสใกลเคยงกบสคตรงขาม (Split Complementary) เปนการใชสทหลกเลยงการใชสคตรงขามโดยตรง เทคนคนท าใหงานดนมนวลขนมลกเลน

สรางจดสนใจไดด

รปท 2.19 การใชสใกลเคยงกบสคตรงขาม

27

การใชโครงสสามเหลยมในวงจรส (Triad Colors) เทคนคการใชโครงสรางสสามเหลยม คอ ใหวาดสามเหลยมขนมาแลวใชสทอยบนโครง

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

รปท 2.20 การใชโครงสามเหลยมในวงจรส

การใชสเดยว (Mono Tone) เทคนคสเดยวเปนอกเทคนคทนยม การใชจะอาศยคาความออนแกของสแทนการใชคาส

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

28

2.4 การน าระบบคอมพวเตอรในการใชงาน 1. ใชคอมพวเตอรในการคนควาหาขอมล 2. ใชคอมพวเตอรในการพมพเอกสาร 3. ใชคอมพวเตอรส าหรบบนทกขอมล 4. ใชคอมพวเตอรส าหรบการตกแตง ออกแบบภาพตาง ๆ 5. ใชคอมพวเตอรส าหรบออกแบบหนาเวบไซตตาง ๆ

29

บทท 3 การออกแบบระบบงานดวยคอมพวเตอร

3.1 การออกแบบ Site Map

รปท 3.1 แสดง Site map

Index

บทเรย

น คว

ามเปนม

า หน

าแรก

แบบฝ

กหด

ตดตอ

เรา

ผจดท

า

30

รปท 3.1 แสดง Site map (ตอ)

Index

บทเรย

น คว

ามเปนม

า หน

าแรก

แบบฝ

กหด

ตดตอ

เรา

ผจดท

า

บทเรย

นท 1

บทเรย

น 2

บทเรย

น 3

บทเรย

น 4

31


ผจดท

า

Index

บทเรย

น คว

ามเปนม

า หน

าแรก

แบบฝ

กหด

ตดตอ

เรา

บทเรย

นท 5

บทเรย

น 6

บทเรย

น 7

บทเรย

น 8

32


ผจดท

า

Index

บทเรย

น คว

ามเปนม

า หน

าแรก

แบบฝ

กหด

ตดตอ

เรา

บทเรย

นท 9

บทเรย

น 10

บทเรย

น 11

บทเรย

น 12

33


ผจดท

า

Index

บทเรย

น คว

ามเปนม

า หน

าแรก

แบบฝ

กหด

ตดตอ

เรา

บทเรย

นท 13

34


ผจดท

า

Index

บทเรย

น คว

ามเปนม

า หน

าแรก

แบบฝ

กหด

ตดตอ

เรา

แบบฝ

กหด

35


ตดตอ

เรา

Index

บทเรย

น คว

ามเปนม

า หน

าแรก

แบบฝ

กหด

ตดตอ

เรา

Face

book

Gmail

36


ผจดท

า

Index

บทเรย

น คว

ามเปนม

า หน

าแรก

แบบฝ

กหด

ตดตอ

เรา

ผจดท

า

37

3.2 การออกแบบ Story Board

รปท 3.2 แสดงหนา Index

รปท 3.3 แสดงหนา Home

38

รปท 3.4 แสดงหนา ความเปนมา

รปท 3.5 แสดงหนา บทเรยน

39

รปท 3.6 แสดงหนา บทเรยนท 1


40



41



42



43



44



45


รปท 3.19 แสดงหนา แบบทดสอบ

46

รปท 3.20 แสดงหนา ตดตอ

รปท 3.21 แสดงหนา หนาผจดท า

47

3.3 การออกแบบสงน าเขา (Input Design)

3.3.1หลกการสรางเวลไซตและรจกกบ Dreamweaver -พนฐานอนเทอรเนต -รจกกบ Dreamweaver -เปดใชงาน Dreamweaver -สวนประกอบของ Dreamweaver -มมมองการท างานใน Dreamweaver

3.3.2 การสรางเวบไซต

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

3.3.3. การสรางขอความ

-การเลอกขอความ -การตกแตงและจดรปแบบขอความ

3.3.4 การตกแตงดวยภาพ

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

3.3.5การใสตาราง

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

48

-การแทรกแถวและคอลมน -การลบแถวและคอลมน -การรวมและการแบงเซลล -การขยายและลดขนาดเซลล -ปรบความกวางของตารางใน Property Inspector -การซอนตาราง (Nasted Table) -การก าหนดสตาราง

3.3.6. การเชอมโยง

-การเชอมโยงแบบตาง ๆ -ก าหนดลกษณะการเปดหนาเวบใหมทเชอมโยงไป -เทคนคการเชอมโยงแบบ Rollover Image -ก าหนดคณสมบตขอความทเปนลงค

3.3.7 การออกแบบเลยเอาท

-การวางเลยเอาท -การวางเลยเอาทโดยใช CSS -เครองมอทใชในการวางเลยเอาท -การวางเลยเอาทโดยใช HTML -การใช Spry เพอเพมพนทหนาเวบ

3.3.8 การสรางเฟรมเซต

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

3.3.9 การสรางฟอรม

-เครองมอในการสรางฟอรม

49

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

3.3.1 การใช Cascading Style Sheet

-รจกสไตล -พาเนล CSS Style -การแกไขคา Cascading Style Sheet -การใชสไตลตนแบบ -Visual Aids ตวชวยในการออกแบบ

3.3.1 การใชมลตมเดย -ขนตอนแทรกองคประกอบมลตมเดย -รจก Flash และ Shockwave -การแทรกไฟล Flash และไฟล Shckwave -การแสดง VDO คลปดวย FLV

3.3.1 การสรางลกเลนดวย Behaviors -การใช Behaviors -เทคนคการเพมลกเลนบนเวบดวย Behaviors

3.3.13 การอพโหลดไฟลสเวบไซต -การจดโครงรางไฟลภายในเวบไซต -การตรวจสอบการท างานของหนาเวบ -การขอพนทเวบไซตบนเวบเซรฟเวอร -การจดโดเมนเนมเพอจดตงชอเวบไซต -การอพโหลดไฟลไปยงเวบเซรฟเวอร

50

3.4 การออกแบบสงน าออก (Output Design) 1. มการแสดงภาพทางหนาจอ 2. มการแสดงเสยงออกทางล าโพง 3. แสดงขอความออกทางหนาจอมอนเตอร

51

บทท4 การพฒนาระบบเวบไซต (Web Site) เรอง การสรางเวบไซต

4.1 เครองมอและอปกรณทใช

• โนตบค • CPU Intel Core i5-4210 (1.70GHz .40 GHz) • Size 14 inch รน acer • Windows 8 Enterprise • Memory 4 GB DDR3L • Hard Disk 1000 GB HDD • 64-bit Operating Sytem,x64-based processor

• คอมพวเตอร • CPU Intel Core 2 Quad Q9400 (2.66 GHz 2.66 GHz) • Size 28 inch รน LG • Windows 7x64 Ultimate • Memory 6 GB • Hard Disk 1 TB • 64-bit Operating System

• การะดาษ A4 ในการปรนเอกสาร • เครองสแกนเนอร ใชสแกนภาพ • เครอง Printerใชในการปรนเอกสารออกมา

4.2 โปรแกรมทงหมดทใชในการพฒนา • Adobe Photoshop cs5 ในการสรางเนอหา,ตกแตงรปภาพ • Adobe Dreamveaver cs6 ในการจดองคประกอบเวบไซต • Adobe illustrator cs6 ในการตกแตงภาพ

52

4.3 การตดตงโปรแกรมและระบบ

รปท 4.1 คลกท My computer เพอท าการตดตง

รปท 4.2 คลกขวา Open ท Floder ทสรางเวบ

53

รปท 4.3 คลกขวาท Floder Web กด Open

รปท 4.4 จากนนคลกขวา Index คลก Open with เลอก Google Chtome

54

4.4 วธการใชงาน

รปท 4.5 แสดงหนา Index

รปท 4.6 หนา Home

55

5

รปท 4.7 หนาประวตความเปนมา

รปท 4.8 หนาแบบทดสอบ

56

รปท 4.9 หนาตดตอผจดท า

รปท 4.10 หนาผจดท า

57

รปท 4.11 หนาแนะน าผจดท า


58


รปท 4.14 บทท 1

59



60



61



62



63



64



65

บทท 5 สรปผลการท าโครงการ

5.1 สรปผลโครงการ 1. ไดใชเปนสอการเรยนการสอน 2. ไดใหนสตนกศกษาเขาถงบทเรยนไดงาย 3. ไดเรยนรเกยวกบขอมลเบองตนส าหรบการสรางเวบไซต

5.1.1 ขนาดของโปรแกรมแตละไฟล

ท ชอไฟล ขนาด หมายเหต 1 Index.html 1 KB หนาแรกของเวบไซต 2 Home.html 5 KB หนาหลกของเวบไซต 3 Story.html 5 KB หนาประวตความเปนมาเวบไซต 4 Lesson.html 9 KB หนาเลอกบทเรยน 5 Test.html 5 KB หนาท าแบบทดสอบ 6 Contact.html 6 KB หนาแสดงชองทางตดตอผจดท า 7 Maker.html 6 KB หนาแสดงผจดท าเวบไซต 8 Lesson1.html 10 KB หนาแสดงบทเรยนท 1 9 Lesson2.html 10 KB หนาแสดงบทเรยนท 2

10 Lesson3.html 10 KB หนาแสดงบทเรยนท 3 11 Lesson4.html 10 KB หนาแสดงบทเรยนท 4 12 Lesson5.html 10 KB หนาแสดงบทเรยนท 5 13 Lesson6.html 10 KB หนาแสดงบทเรยนท 6 14 Lesson7.html 10 KB หนาแสดงบทเรยนท 7 15 Lesson8.html 10 KB หนาแสดงบทเรยนท 8

ตารางท 5.1 สรปขนาดโปรแกรม

66

ท ชอไฟล ขนาด หมายเหต 16 Lesson9.html 10 KB หนาแสดงบทเรยนท 9 17 Lesson10.html 10 KB หนาแสดงบทเรยนท 10 18 Lesson11.html 10 KB หนาแสดงบทเรยนท 11 19 Lesson12.html 10 KB หนาแสดงบทเรยนท 12 20 Lesson13.html 10 KB หนาแสดงบทเรยนท 13 21 Phatakarnprofile 5 KB แสดงขอมลผจดท า (พนธกานต) 22 Phirawatprofile 5 KB แสดงขอมลผจดท า (พรวฒน) 23 Tanakornprofile 5 KB แสดงขอมลผจดท า (ธนากร)

ตารางท 5.1 สรปขนาดโปรแกรม (ตอ)

5.1.2 ขอผดพลาดทมตอการออกแบบระบบงาน

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

5.1.3 ขอผดพลาดทมในโปรแกรม • มปญหาเรองตวอกษรกระจาย ตองโหลดฟอนตภาษาไทยมาตดตงลงเครอง • ไมสามารถใสตารางได • ใสโคดนาฬกาแลวไมแสดง • สราง เลเยอร ซอนกน

5.2 ปญหาและอปสรรคในการด าเนนงาน • การใชโปรแกรม Photoshop และ Deamweaver ทางผจดท าตองศกษาเพมในสวน

ของเครองมอการท างาน • ในการด าเนนการเนองจากสมาชกในกลมไมคอยมเวลาวางตรงกนจงท าให

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

ปรบแกและออกแบบใหมหลายครง • Flash drive มปญหาตดไวรสจากเครองอนตองสแกนหลายครง

67

5.3 สรปแผนการด าเนนงานจรง (Gantt Chart)

รายการ มถนายน 61 กรกฎาคม 61 สงหาคม 61 กนยายน 61

ระยะเวลา 1 2 3 4 5 1 2 3 4 1 2 3 4 1 2 3 4

อบรมการท า

โครงการนกศกษา ปวช.3 และปวส.2

29 มถนายน 61

เสนอหวขอ

ATC.01โครงการ รอบท 1 (บทท1)

2 มถนายน 61

ประกาศผลหวขอ

โครงการ รอบท 1

3 กรกฎาคม 61

เสนอหวขอ

โครงการ รอบท 2

(บทท1)


ประกาศผลหวขอโครงการ รอบท 2


สงบทท 2


สงบทท 3

10 ส.ค. 61

สอบหวขอ

โครงการ

9 กนยายน 61

สงความคบหนา 70%


สงความคบหนา

80%


รายการ พฤศจกายน 61 ธนวาคม 61 มกราคม 62 กมภาพนธ 62

หมายเหต 1 2 3 4 5 1 2 3 4 1 2 3 4 1 2 3 4

สงความคบหนา

100%

1 พฤศจกายน 61

เปนตนไป

สอบโปรแกรม

ระดบปวส.2


ตารางท 5.2 แผนการด าเนนงาน (Gantt Chart)

68

สอบโปรแกรม

ระดบ ปวช.3


สงบทท 4 14 ธนวาคม 61

สงบทท 5 20 มกราคม 62

สงรปเลม ซด และ

คาเขาเลม

14 กมภาพนธ 2562

ตารางท 5.2 แผนการด าเนนงาน Gantt Chart (ตอ)

5.4 สรปคาใชจายในการด าเนนงานจรง

ล าดบ รายการ จ านวน ราคา 1 กระดาษ A4 1 รม 200.00 2 คาเขาเลมเอกสาร 1 เลม 250.00 3 คาพมพเอกสาร 1 เลม 500.00 4 คา CD 1 แผน 100.00

รวมเปนเงน 1,050.00

ตารางท 5.3 งบประมาณการด าเนนงานจรง

69

บรรณานกรม

ณฐกานต หารค า. (2557). สอน Adobe Dreamweaver Cs6. คนหาขอมลวนท 24 ตลาคม 2561, จาก https://www.youtube.com/watch?v=b2vQ17-y6Gs

ณฐชา อนสา. (2560). การออกแบบโครงสรางเวบไซต. คนหาขอมลวนท 26 ตลาคม 2561, จาก https://www.sites.google.com/site/nutchanathanusa53292802071 ณฐพล แกนนาค า. (2559). สอน Adobe Photoshop Cs6. คนหาขอมลวนท 29 กรกฎาคม 2561,

จาก https://www.youtube.com/watch?v=y5t-pUjB_VQ ทศพล ทองนาโพธ และ คณะ. (2560). โครงการเวบไซต สอการเรยนการสอนวชาการสราง เวบไซต. หลกสตรประกาศนยบตรวชาชพ สาขาวชาคอมพวเตอรธรกจ, วทยาลย เทคโนโลยอรรถวทยพณชการ วชยศร ส าราญ. (2559) แมส (Primary Colour). คนหาขอมลวนท 30 กรกฏาคม 2561, จาก https://www.site.google.com/site/wichasukpam/maesi ทศนะพล เชน และ พงศธร บางเหลอง. (2560). โครงการเวบไซต สอการเรยนการสอนวชา คอมพวเตอรและสารสนเทศเพองานอาชพ. หลกสตรประกาศนยบตรวชาชพ สาขาวชา คอมพวเตอรธรกจ, วทยลยเทคโนโลยอรรถวทยพณชยการ อารยา และ อญชสา แกลวไทรอทร. (2560). โครงการเวบไซต สอการเรยนการสอนวชาการสราง เวบไซต Adobe Dreamweaver Cs5. หลกสตรประกาศนยบตรวชาชพ สาขาวชา คอมพวเตอรธรกจ, วทยาลยเทคโนโลยอรรถวทยพณชยการ

https://www.youtube.com/watch?v=b2vQ17-y6Gs

https://www.sites.google.com/site/nutchanathanusa53292802071

https://www.youtube.com/watch?v=y5t-pUjB_VQ

https://www.site.google.com/site/wichasukpam/maesi

78

ประวตผจดท ำ นายพรวฒน สวางนวล เกดเมอวนท 21 ตลาคม 2543 ส าเรจการศกษาช นมธยมตอนตนจากโรงเรยน พนสนเพชรสข (อปถมภ) ปจจบนก าลงศกษาในหลกสตรประกาศนยบตรวชาชพ(ปวช.)สาขางานคอมพวเตอรธรกจ อย ทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561 ปจจบนอาศย อยบานเลขท 1072/106 แขวง บางจาก เขตพระโขนง จ.กรงเทพมหานคร 10260 เบอรโทรศพท 095-9080-748 E-mail : [email protected] นาย ธนากร คดค านวล เกดเมอวนท 22 พฤษภาคม 2544ส าเรจการศกษาชนมธยมตอนตนจากโรงเรยนโรงเรยนนวมนทราชนทศ สวนกหลาบวทยาลยสมทรปราการ ปจจบนก าลงศกษาในหลกสตรประกาศนยบตรวชาชพ(ปวช.) อย ทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561 ปจจบนอาศย อยบานเลขท 199/1064 ซอย 15/7 หมบานพฤกษา 15 ม.3 ต.แพรกษาใหม อ.เมอง จ.สมทรปราการ เบอรโทรศพท 096-541-2051 E-mail:[email protected] นายพนธกานต โคตรศรกลยา เกดเมอวนท 30 พฤษภาคม 2544 ส าเรจการศกษาชนมธยมตอนตนจากโรงเรยนวดบางนาในปจจบนก าลงศกษาในหลกสตรประกาศนยบตรวชาชพ(ปวช.) อยทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561ปจจบนอาศย อยบานเลขท ตกM.B.อพารตเมนต 2147หม7 ซ.ศรสมตร ต.เทพารกษ อ.เมอง จ.สมทรปราการ เบอรโทรศพท 094-647-6822

ภาคผนวก

- ใบเสนอขออนมตการท าโครงการระบบคอมพวเตอรธรกจ (ATC.01)

- ใบเสนออาจารยทปรกษารวมโครงการ (ATC.02)

- ใบขอสอบปองกนโครงการระบบคอมพวเตอรธรกจ (ATC.03)

- รายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (ATC.04)

- ใบบนทกการเขาพบอาจารยทปรกษาโครงการ (ATC.05)

70

ATC.01

ขอเสนออนมตท ำโครงกำรระบบคอมพวเตอร


วนท 3 เดอน กรกฎาคม พ.ศ. 2561 เรอง ขอเสนออนมตท าโครงการระบบคอมพวเตอรธรกจ เรยน ประธานกรรมการพจารณาอนมตท าโครงการระบบคอมพวเตอรธรกจ ขาพเจา 1. นายธนากร คดค านวล รหสนกศกษา 38357 ระดบ ปวช. 3/8 2. นายพรวฒน สวางนวล รหสนกศกษา 38337 ระดบ ปวช. 3/8 3. นายพนธกานต โคตรศรกลยา รหสนกศกษา 38771 ระดบ ปวช. 3/8 มความประสงคท าโครงการระบบคอมพวเตอรธรกจ ประเภท เวบไซต ชอโครงการภาษาไทย เรองสอการเรยนการสอนวชาการสรางเวบไซต ชอโครงการภาษาองกฤษ E-learning for Webpage Design โดยม อาจารยทปรกษาหลก คอ อาจารยดฐประพจน สวรรณศาสตร พรอมนไดแนบเอกสารประกอบการขอเสนอโครงการระบบคอมพวเตอร บทท 1 จ านวน 1 ชด จงเรยนมาเพอโปรดพจารณาอนมต

ลายมอชอ................................................นกศกษา (นายธนากร คดค านวล) หวหนากลมโครงการ

ผาน ไมผาน ความคดเหนคณะกรรมการ ..................................................................................................................

............................................................................................................................................................................

ลงชอ ........................................ ลงชอ ........................................ คณะกรรมการ คณะกรรมการ

71

ATC.02

เสนออาจารยทปรกษารวมโครงการ


วนท 11 เดอน กรกฎาคม พ.ศ. 2561 เรอง ขอเรยนเชญอาจารยเปนทปรกษารวมโครงการ เรยน อาจารยฐตรตน นยพฒน ขาพเจา 1. นายธนากร คดค านวล รหสนกศกษา 38357 ระดบ ปวช. 3/8 2. นายพรวฒน สวางนวล รหสนกศกษา 38337 ระดบ ปวช. 3/8 3. นายพนธกานต โคตรศรกลยา รหสนกศกษา 38771 ระดบ ปวช. 3/8 มความประสงคจะขอเรยนเชญ อาจารย ฐตรตน นยพฒน มาเปนทปรกษารวมโครงการของกลมขาพเจา ซงไดจดท าโครงการประเภท เวบไซต ชอโครงการภาษาไทย “สอการเรยนการสอนวชาการสรางเวบไซต”

พรอมนไดแนบเอกสารประกอบการเสนอหวขอโครงการมาดวย

จงเรยนมาเพอโปรดพจารณาอนมต

ลายมอชอ................................................นกศกษา ลายมอชอ................................................นกศกษา (นายธนากร คดค านวล) (นายพรวฒน สวางนวล)

ลายมอชอ................................................นกศกษา (นายพนธกานต โคตรศรกลยา)

ลายมอชอ................................................อาจารยทปรกษารวม (อาจารยฐตรตน นยพฒน)

72

ATC.03

ขอสอบโครงการระบบคอมพวเตอร


วนท 21 เดอน สงหาคม พ.ศ. 2561 เรอง ขอสอบโครงการระบบคอมพวเตอรธรกจ (ครงท 1) เรยน คณะกรรมการพจารณาการสอบปองกนโครงการระบบคอมพวเตอรธรกจ ขาพเจา 1. นายพรวฒน สวางนวล รหสนกศกษา 38337 ระดบ ปวช. 3/8 2. นายธนากร คดค านวล รหสนกศกษา 38357 ระดบ ปวช. 3/8 3. นายพนธกานต โคตรศรกลยา รหสนกศกษา 38771 ระดบ ปวช. 3/8 มความประสงคท าโครงการระบบคอมพวเตอรธรกจ ประเภท เวบไซต ชอภาษาไทย สอการเรยนการสอนวชาการสรางเวบไซต ชอภาษาองกฤษ E-learning for Webpage Design โดยม อาจารยทปรกษาหลก คอ อาจารยดฐประพจน สวรรณศาสตร อาจารยทปรกษารวม คอ อาจารยฐตรตน นยพฒน พรอมนไดแนบเอกสารประกอบการขอสอบโครงการระบบคอมพวเตอร โปรแกรมระบบคอมพวเตอร (Software) จ านวน 1 ชด โครงการระบบคอมพวเตอรธรกจ (เอกสารบทท 1-3) จ านวน 1 ชด จงเรยนมาเพอโปรดพจารณาอนมต ------------------------------------------------------------------------------------------------------------------------------------- ลายมอชอ................................................นกศกษา (นายธนากร คดค านวล) หวหนากลมโครงการ

73

ATC.03

ขอสอบโครงการระบบคอมพวเตอร

สาขาวชาคอมพวเตอรธรกจ วทยาลยเทคโนโลยอรรถวทยพณชยการ วนท 24 เดอน พฤศจกายน พ.ศ. 2561

เรอง ขอสอบโครงการระบบคอมพวเตอรธรกจ (ครงท 2) เรยน คณะกรรมการพจารณาการสอบปองกนโครงการระบบคอมพวเตอรธรกจ ขาพเจา 1. นายพรวฒน สวางนวล รหสนกศกษา 38337 ระดบ ปวช. 3/8 2. นายธนากร คดค านวล รหสนกศกษา 38357 ระดบ ปวช. 3/8 3. นายพนธกานต โคตรศรกลยา รหสนกศกษา 38771 ระดบ ปวช. 3/8 มความประสงคท าโครงการระบบคอมพวเตอรธรกจ ประเภท เวบไซต ชอภาษาไทย สอการเรยนการสอนวชาการสรางเวบไซต ชอภาษาองกฤษ E-learning for Webpage Design โดยม อาจารยทปรกษาหลก คอ อาจารยดฐประพจน สวรรณศาสตร อาจารยทปรกษารวม คอ อาจารยฐตรตน นยพฒน พรอมนไดแนบเอกสารประกอบการขอสอบโครงการระบบคอมพวเตอร โปรแกรมระบบคอมพวเตอร (Software) จ านวน 1 ชด โครงการระบบคอมพวเตอรธรกจ (เอกสารบทท 1-3) จ านวน 1 ชด จงเรยนมาเพอโปรดพจารณาอนมต ------------------------------------------------------------------------------------------------------------------------------------- ลายมอชอ................................................นกศกษา (นายธนากร คดค านวล) หวหนากลมโครงการ

74

ATC.04 ใบบนทกรายงานความคบหนา อาจารยทปรกษาหลก และอาจารยทปรกษารวม

โครงการ สอการเรยนการสอนวชาการสรางเวบไซต E-learning for Webpage Design

---------------------------------------------------------------------------------------------------------------------- ทปรกษาหลกโครงการ อาจารยดฐประพจน สวรรณศาสตร ทปรกษารวมโครงการ อาจารยฐตรตน นยพฒน ล าดบ รายการ วน/เดอน/ป อาจารยทปรกษาหลก อาจารยทปรกษารวม

ภาคเรยนท 1/2561 1 เสนอหวขอโครงการ รอบท 1 ....../....../...... 2 สงเอกสารบทท 1 ....../....../...... 3 สงเอกสารบทท 2 ....../....../...... 4 สงเอกสารบทท 3 ....../....../...... 5 สงเอกสาร และ PowerPoint เพอการ

น าเสนอ เอกสารบทท 1 - 3 ....../....../......

6 สงคบหนาโปรแกรมโครงการ 70% ....../....../...... 7 สงคบหนาโปรแกรมโครงการ 80% ....../....../...... 8 สงคบหนาโปรแกรมโครงการ 100% ....../....../......

ภาคเรยนท 2/2561 9 สงเอกสาร และโปรแกรมโครงการ

เพอการน าเสนอ โปรแกรมโครงการ ....../....../......

10 สงโปรแกรมโครงการ ทแกไขแลว (ถาม)

....../....../......

11 สงเอกสารบทท 4 ....../....../...... 12 สงเอกสารบทท 5 ....../....../...... 13 สงเอกสารรปเลม ฉบบสมบรณ ....../....../...... 14 สงซด ....../....../...... 15 ช าระคาเขาเลม ....../....../......

75

ATC.05

ใบบนทกการเขาพบอาจารยทปรกษา สาขาวชาคอมพวเตอรธรกจ

วทยาลยเทคโนโลยอรรถวทยพณชยการ แผนท 1

ขาพเจา 1. นายธนากร คดค านวล รหสนกศกษา 38357 ระดบ ปวช. 3/8 2. นายพรวฒน สวางนวล รหสนกศกษา 38337 ระดบ ปวช. 3/8 3. นายพนธกานต โคตรศรกลยา รหสนกศกษา 38771 ระดบ ปวช. 3/8

4. นางสาวคอมพวเตอร บรหารธรกจ รหสนกศกษา 520002 ระดบ ปวช. 3/xx โครงการประเภท เวบไซต เรอง สอการเรยนการสอนวชาการสรางเวบไซต อาจารยทปรกษาหลก อาจารยดฐประพจน สวรรณศาสตร อาจารยทปรกษารวม อาจารยฐตรตน นยพฒน

ครงท วนท หวขอการเขาพบ ลายเซน หมายเหต

76

ATC.05






77

ATC.05






โครงการ เว็บไซต์...

Documents

Transcript of โครงการ เว็บไซต์...