50 places to visit in Japan

โครงการ 50 สดยอดสถานททองเทยวของญป น 50 places to visit in Japan

จดท าโดย นายณฐธร ทวรฐนธยศ นายณฐชนน นาคศร

นายวรตม พวงจนทร

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

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

ปการศกษา 2562

ก

ชอโครงการภาษาไทย 50 สดยอดสถานททองเทยวของญป น ชอโครงการภาษาองกฤษ 50 places to visit in Japan โดย 1. นายณฐธร ทวรฐนธยศ 2. นายณฐชนน นาคศร 3. นายวรตม พวงจนทร ............................................................................................................................................................. คณะกรรมการอนมตใหเอกสารโครงการฉบบนเปนสวนหนงของการศกษาวชาโครงการ ตามหลกสตรประกาศนยบตรวชาชพ สาขาวชาคอมพวเตอรธรกจ วทยาลยเทคโนโลยอรรถวทย พณชยการ (ATC.)

............................................................ ( อาจารยฐตรตน นยพฒน)

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

............................................................ ( อาจารยสมาภรณ เยนด)

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

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

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

ข

บทคดยอ หวขอโครงการ 50 สดยอดสถานททองเทยวของญป น 50 places to visit in Japan ผจดท าโครงการ นายณฐธร ทวรฐนธยศ

นายณฐชนน นาคศร นายวรตม พวงจนทร

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

บทคดยอ คณะผจดท าคดโครงการ50 สดยอดสถานททองเทยวของญป นเพอจะใหความร ความเขาใจเกยวกบสถานททองเทยวของญป นมากขน และยงมวดโอตวอยางสถานทบางแหง เหมาะส าหรบผทตองการจะศกษาเกยวกบการสถานททองเทยวทนาสนใจของญป นเพอการทองเทยว ทางคณะผจดท าไดมการใชโปรแกรม Adobe Dreamweaver CC 2019 ใชในการออกแบบหนาเวบไซต และ ใชโปรแกรม Adobe Photoshop CC 2019 ในการออกแบบ Logo Banner ใสรปภาพและขอความ ทางคณะผจดท าไดมการเรยนรดวยตนเองพรอมทงทานอาจารยชวยแนะน าในบางสวนจงท าโครงการนสมบรณยงขน โครงการนใหประโยชนและความรในเกยวกบสถานททองเทยวประเทศญป นมากขน ทางคณะผจดท าไดมการพฒนาตนเองเกยวกบการใชโปรแกรมตาง ๆ ในการสรางเวบไซตใหออกมาดดและสมบรณแบบ

ค

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

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

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

คณะผจดท า

ง

ค ำน ำ

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

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

คณะผจดท า

18 กมภาพนธ 2563

จ

สารบญ

หนา

หนาอนมต ก บทคดยอ ข กตตกรรมประกาศ ค ค าน า ง สารบญ จ สารบญรป ซ สารบญตาราง ฑ บทท 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 ปญหาทเกดขนในระบบงานปจจบน 5 2.3 ทฤษฎทเกยวของ 6 2.4 การน าระบบคอมพวเตอรในการใชงาน 40 บทท 3 การออกแบบงานดวยระบบคอมพวเตอร 3.1 การออกแบบ Site map 41

3.2 การออกแบบ Story Board 45 3.3 การออกแบบ Input Design 76 3.4 การออกแบบ Output Design 78

ฉ

สารบญ (ตอ) หนา บทท 4 การพฒนาระบบ 4.1 เครองมอและอปกรณทใช 79 4.2 โปรแกรมทงหมดทใชพฒนา 79

4.3 วธการตดตงโปรแกรม 80 4.4 วธการใชงาน 82

บทท 5 สรปการท าโครงการ 5.1 สรปผลการท าโครงการ 115 5.1.1 สรปขนาดของโปรแกรม 115 5.1.2 สรปขอผดพลาดทมตอการออกแบบระบบงาน 118 5.1.3 สรปขอผดพลาดทมในโปรแกรม 118 5.2 ปญหาและอปสรรคในการด าเนนงาน 118 5.3 สรปการด าเนนงานจรง(Gantt Chart) 119 5.4 สรปคาใชจายในการด าเนนงานจรง 120 บรรณานกรม 121 ภาคผนวก

- ใบขอเสนออนมตโครงการระบบคอมพวเตอร (ATC.01) 123 - ใบขอเสนออาจารยทปรกษารวมโครงการ (ATC.02) 124 - ใบขอสอบโครงการระบบคอมพวเตอรธรกจ (ATC.03) 125 - ใบรายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (ATC.04) 126 - ใบบนทกการเขาพบทปรกษาโครงการ (ATC.05) 127 - ใบขออนญาตอาจารยทปรกษารวมจดท าเอกสาร (ATC.06) 133

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

ฎ

สารบญรป หนา

รปท 2.1 แสดงตวอยางเวบไซตของ Adobe 7 รปท 2.2 ขนตอนในการพฒนาเวบไซต 10 รปท 2.3 แสดงตวอยางสขนตาง ๆ 17รปท2.4 จตวทยาสกบความรสก 18 รปท 2.5 แสดงการผสมสแบบลบ 19รปท 2.6 แสดงการผสมสแบบบวก 20รปท 2.7 แสดงการวงลอสแบบบวก 21 รปท 2.8 แสดงการวงลอสแบบลบ 21รปท 2.9 ความหลากหลายของสทไดจากการผสมสหลกกบสขาว เทา และด า 22 รปท 2.10 แสดงชดสเยน 23รปท 2.11 แสดงชดสรอน 24รปท 2.12 แสดงชดสทคลายคลงกนประกอบดวยส 2-3 สทอยตดกนในวงลอส 24 รปท 2.13 แสดงชดสแบบเดยว 25รปท 2.14 แสดงชดสแบบสามเสา 26 รปท 2.15 แสดงชดสตรงขามไดแกส 2 สทอยตรงขามในวงลอ 26รปท 2.16 แสดงชดสตรงขามขางเคยง 27รปท 2.17 แสดงชดสตรงขามแบบแบงแยก 2 ดาน 27 รปท 2.18 แสดงคาของสในระบบเลขฐานสบ 28รปท 3.1 แสดงขอมล Sitemap 41รปท 3.2 หนาindex 45 รปท 3.3 สถานททองเทยวแนะน า 45รปท 3.4 50สถานททองเทยว 46 รปท 3.5 ภมภาค 46รปท 3.6 ผจดท า 47รปท 3.7 โทโฮค 47 รปท 3.8 ชบ 48 รปท 3.9 คนไซ 48รปท 3.10 จโงข 49

ฎ

สารบญรป (ตอ) หนา

รปท 3.11 ควช 49 รปท 3.12 คนโต 50 รปท 3.13 ฮอกไกโด 50 รปท 3.14 ปราสาทฮเมจ 51 รปท 3.15 หมบานหลงคาโบราณ ชราคาวะโกะ 51 รปท 3.16 ทะเลสาบคาวากชโกะ 52 รปท 3.17 ปราสาทมตสโมโตะ 52 รปท 3.18 ศาลเจากลางทะเล อสกชมะ แหงเกาะมยาจมะ 53 รปท 3.19 วดคโยะมซ หรอวดน าใส 53 รปท 3.20 สวนรมทะเลฮตาช ซไซด ปารค 54 รปท 3.21 Snow monster และสกรสอรท Mount Zao 54 รปท 3.22 ชมดอกซากระแหงแรกของญป น ทคาวาซ 55 รปท 3.23 หาแยกชบยา และยานชนจก 55 รปท 3.24 ยานโดทงโบร 56 รปท 3.25 วดเซนโซจ หรอ วดอาสาก 56 รปท 3.26 โตเกยว ดสนยแลนด 57 รปท 3.27 พพธภณฑสตวน าชราอม 57 รปท 3.28 ก าแพงหมะทาเทยามา คโรเบะ 58 รปท 3.29 ทงดอกลาเวนเดอรท ฟารมโทมตะ 58 รปท 3.30 สวนเคนโรคเอน 59 รปท 3.31 สวนลงจโกคดาน 59 รปท 3.32 ภเขาไฟฟจ 60 รปท 3.33 เกาะภเขาไฟซากระจมะ 60 รปท 3.34 เมองชนบท อาราชยามา 61 รปท 3.35 เทอกภเขาไฟอะโซะ 61 รปท 3.36 สวนและพพธภณทสนตภาพฮโรชมา 62 รปท 3.37 ยานฮาราจก 62 รปท 3.38 ลานสกยซาวะ 63

ฎ

สารบญรป (ตอ)

หนา รปท 3.39 ยานมนาโตะ มเรอ 63 รปท 3.40 ปอมดาวหาแฉก โงเรยวกาค 64 รปท 3.41 สวนสนกยนเวอแซล สตดโอ 64 รปท 3.42 ศาลเจาเมจ จงก 65 รปท 3.43 วดซนจซนเกนโด 65 รปท 3.44 พพธภณฑระเบดปรมาณนางาซาก 66 รปท 3.45 ปราสาทนโจ 66 รปท 3.46 คบเนะ 67 รปท 3.47 วดโทไดจ 67 รปท 3.48 ตลาดนชก 68 รปท 3.49 สวนชนจกเงยวเอน 68 รปท 3.50 เกาะรางฮาชมะ 69 รปท 3.51 สวนกวางนารา 69 รปท 3.52 พพธภณทสตวน าโอซากา 70 รปท 3.53 เทศกาลแสงส 70 รปท 3.54 ลานสก 71 รปท 3.55 เนนทรายตอตโตร 71 รปท 3.56 งาน snow and ice festival sapporo 72 รปท 3.57 หาด Sunayama beach เกาะ Miyakojima, Okinawa 72 รปท 3.58 ชองเขาทาคาชโฮ 73 รปท 3.59 โอเอะโดะออนเซน 73 รปท 3.60 โซนมรดกโลก เมองนกโก 74 รปท 3.61 เกโระ ออนเซน 74 รปท 3.62 ศาลเจาจงจอกแดง 75 รปท 3.63 วดคนคะคจหรอวดทอง 75

ฎ

สารบญรป(ตอ)

หนา รปท 4.1 เปดfile adobe Dreamweaver cc 2019 แลวเขาfile setup 80 รปท 4.2 กดตวตดตง Set-up 80 รปท 4.3 รอโปรแกรมตดตงเสรจ 81 รปท 4.3 จากนนใหยอนกลบไปแลวเขาfile Crackจากนนใหcopy Dreamweaver 81 รปท 4.4 เปดfile Dreamweaver ทตดตงอแลวแลวน า DreamweaverทCopyมาวางทบไดเลย 82 รปท 4.5 เขาไปทไดรฟD 82 รปท 4.6 กดเปดfile Project-50 places to visit in Japan ขนมา 83 รปท 4.7 แลวเปหนา index 83 รปท 4.8 แสดงหนาจอรปท 1 หนาindex 84 รปท 4.9 แสดงหนาจอรปท 2 หนาแรก 84 รปท 4.10 แสดงหนาจอรปท 3 50สถานททองเทยว 85 รปท 4.11 แสดงหนาจอรปท 4 ภมภาค 85 รปท 4.12 แสดงหนาจอรปท 5 ผจดท า 86 รปท 4.13 แสดงหนาจอรปท 6 ศาลเจาจงจอกแดง 86 รปท 4.14 แสดงหนาจอรปท 7 วดคนคะคจหรอวดทอง 87 รปท 4.15 แสดงหนาจอรปท 8 ปราสาทฮเมจ 87 รปท 4.16 แสดงหนาจอรปท 9 หมบานหลงคาโบราณ ชราคาวะโกะ 88 รปท 4.17 แสดงหนาจอรปท 10 ทะเลสาบคาวากชโกะ 88 รปท 4.18 แสดงหนาจอรปท 11 ปราสาทมตสโมโตะ 89 รปท 4.19 แสดงหนาจอรปท 12 ศาลเจากลางทะเล อสกชมะ แหงเกาะมยาจมะ 89 รปท 4.20 แสดงหนาจอรปท 13 วดคโยะมซ หรอวดน าใส 90 รปท 4.21 แสดงหนาจอรปท 14 สวนรมทะเลฮตาช ซไซด ปารค 90 รปท 4.22 แสดงหนาจอรปท 15 Snow monster และสกรสอรท Mount Zao 91 รปท 4.23 แสดงหนาจอรปท 16 ชมดอกซากระแหงแรกของญป น ทคาวาซ 91 รปท 4.24 แสดงหนาจอรปท 17 หาแยกชบยา และยานชนจก 92 รปท 4.25 แสดงหนาจอรปท 18 ยานโดทงโบร 92 รปท 4.26 แสดงหนาจอรปท 19 วดเซนโซจ หรอ วดอาสาก 93 รปท 4.27 แสดงหนาจอรปท 20 โตเกยว ดสนยแลนด 93

ฎ


หนา รปท 4.28 แสดงหนาจอรปท 21 พพธภณฑสตวน าชราอม 94 รปท 4.29 แสดงหนาจอรปท 22 ก าแพงหมะทาเทยามา คโรเบะ 94 รปท 4.30 แสดงหนาจอรปท 23 ทงดอกลาเวนเดอรท ฟารมโทมตะ 95 รปท 4.31 แสดงหนาจอรปท 24 สวนเคนโรคเอน 95 รปท 4.32 แสดงหนาจอรปท 25 สวนลงจโกคดาน 96 รปท 4.33 แสดงหนาจอรปท 26 ภเขาไฟฟจ 96 รปท 4.34 แสดงหนาจอรปท 27 เกาะภเขาไฟซากระจมะ 97 รปท 4.35 แสดงหนาจอรปท 28 เมองชนบท อาราชยามา 97 รปท 4.36 แสดงหนาจอรปท 29 เทอกภเขาไฟอะโซะ 98 รปท 4.37 แสดงหนาจอรปท 30 สวนและพพธภณทสนตภาพฮโรชมา 98 รปท 4.38 แสดงหนาจอรปท 31 ยานฮาราจก 99 รปท 4.39 แสดงหนาจอรปท 32 ลานสกยซาวะ 99 รปท 4.40 แสดงหนาจอรปท 33 ยานมนาโตะ มเรอ 100 รปท 4.41 แสดงหนาจอรปท 34 ปอมดาวหาแฉก โงเรยวกาค 100 รปท 4.42 แสดงหนาจอรปท 35 สวนสนกยนเวอแซล สตดโอ 101 รปท 4.43 แสดงหนาจอรปท 36 ศาลเจาเมจ จงก 101 รปท 4.44 แสดงหนาจอรปท 37 วดซนจซนเกนโด 102 รปท 4.45 แสดงหนาจอรปท 38 พพธภณฑระเบดปรมาณนางาซาก 102 รปท 4.46 แสดงหนาจอรปท 39 ปราสาทนโจ 103 รปท 4.47 แสดงหนาจอรปท 40 คบเนะ 103 รปท 4.48 แสดงหนาจอรปท 41 วดโทไดจ 104 รปท 4.49 แสดงหนาจอรปท 42 ตลาดนชก 104 รปท 4.50 แสดงหนาจอรปท 43 สวนชนจกเงยวเอน 105 รปท 4.51 แสดงหนาจอรปท 44 เกาะรางฮาชมะ 105 รปท 4.52 แสดงหนาจอรปท 45 สวนกวางนารา 106 รปท 4.53 แสดงหนาจอรปท 46 พพธภณทสตวน าโอซากา 106 รปท 4.54 แสดงหนาจอรปท 47 เทศกาลแสงส 107 รปท 4.55 แสดงหนาจอรปท 48 ลานสก 107

ฎ


หนา รปท 4.56 แสดงหนาจอรปท 49 เนนทรายตอตโตร 108 รปท 4.57 แสดงหนาจอรปท 50 งาน snow and ice festival Sapporo 108 รปท 4.58 แสดงหนาจอรปท 51 หาด Sunayama beach เกาะ Miyakojima, Okinawa 109 รปท 4.59 แสดงหนาจอรปท 52 ชองเขาทาคาชโฮ 109 รปท 4.60 แสดงหนาจอรปท 53 โอเอะโดะออนเซน 110 รปท 4.61 แสดงหนาจอรปท 54 โซนมรดกโลก เมองนกโก 110 รปท 4.62 แสดงหนาจอรปท 55 บอนรก จโกก 111 รปท 4.63 แสดงหนาจอรปท 56 ภมภาคฮอกไกโด 111 รปท 4.64 แสดงหนาจอรปท 57 ภมภาคโทโฮค 112 รปท 4.65 แสดงหนาจอรปท 58 ภมภาคคนโต 112 รปท 4.66 แสดงหนาจอรปท 59 ภมภาคชบ 113 รปท 4.67 แสดงหนาจอรปท 60 ภมภาคคนไซ 113 รปท 4.68 แสดงหนาจอรปท 61 ภมภาคจโงข 114 รปท 4.69 แสดงหนาจอรปท 62 ภมภาคควช 114

ฑ

สารบญตาราง

หนา

ตารางท 1.1 แผนการด าเนนงาน (Gantt Chart) 3 ตารางท 1.2 งบประมาณการด าเนนงาน 4 ตารางท 2.1 แสดงการจดต าแหนง 31 ตารางท 5.1 แสดงขนาดของโปรแกรม 115 ตารางท 5.2 สรปเวลาการด าเนนงานจรง 119 ตารางท 5.3 สรปคาใชจายในการด าเนนงานจรง 120

1

บทท 1

บทน ำ

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

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

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

2

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

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

1.2 ขอบเขตกำรศกษำ 1. มภาพประกอบ 2. มการออกแบบโลโก 3. มสถานททองเทยว 4. มการสอดแทรกวดโอประกอบ 5. มการเชอมโยงเวบไซตรในเพจเดยวกนและภายนอกเวบ

1.3 ประโยชนทคำดวำจะไดรบ 1. ไดเรยนรสถานททองเทยวของญป นและมความนาสนใจ 2. ไดเรยนรสถานททองเทยวทส าคญของประเทศญป น 3. ไดเรยนรสถานททองเทยวตางๆในประเทศญป นทไมเคยไปหรอไมเคยรจก 4. ไดความรเรองคาเงนตราของประเทศญป นและยงรวาสถานททองเทยวบางทตองเสย

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

3

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

รำยกำร ภำคเรยนท 1 มถนำยน 62 กรกฎำคม 62 สงหำคม 62 กนยำยน 62 ระยะเวลำ

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

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

11-12 มถนายน 62

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

เอกสารบทท 1 14 มถนายน 62

ประกาศผลหวขอโครงการ รอบท 1 17 มถนายน 62

เสนอหวขอโครงการ รอบท 2 19 มถนายน 62


ลงทะเบยนหวขอออนไลน เสนออาจารยทปรกษารวม


สงเอกสารบทท 2 8-14 กรกฎาคม 62


สอบน าเสนอโครงการ (รอบเอกสาร) 17 สงหาคม 62

ประกาศผลสอบ (รอบเอกสาร) 22 สงหาคม 62

สงความคบหนาโปรแกรม 50% 9-15 กนยายน 62



รำยกำร ภำคเรยนท 2 พฤศจกำยน 62 ธนวำคม 62 มกรำคม 63 กมภำพนธ 63 ระยะเวลำ

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 สงความคบหนา 90% 1-8 พฤศจกายน 62

สงความคบหนา 100% 9-13 พฤศจกายน 62

สอบน าเสนอโครงการ ระดบปวช.3 7 ธนวาคม 62

ประกาศผลสอบ (รอบโปรแกรม) 11 ธนวาคม 62

สงเอกสารบทท 4 6-19 มกราคม 63


สงงบประมาณในการท าโครงการ(แบบออนไลน)

26-30 มกราคม 63

สงรปเลม ซด ช าระคาเขาเลม 1-20 กมภาพนธ 63

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

4

1.6 เครองมอทใชพฒนำโปรแกรม 1. โปรแกรมAdobe Photoshop CC ใชในการออกแบบโลโกหนาเวบไซต 2. โปรแกรม Adobe Dreamweaver CC ใชในการสรางเวบเพจเชน การใสเสยง วดโอ รป 3. โปรแกรม Adobe Animate CC ใชในการท ารปขยบ

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

ล ำดบ รำยกำร จ ำนวน รำคำ (บำท) 1 กระดาษ A4 1 รม 170 2 ซองน าตาล 1ซอง 20 3 สนปก 1อน 10

4 หมกปรนงาน 1ชด 1000 5 คารวมรปเลน 1ชด 250

รวมเปนเงน 1450

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

5

บทท 2

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

2.1 ระบบงานในปจจบน

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

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

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

2.2 ปญหาระบบงานในปจจบน 1. เวบไซตในปจจบนทเกยวกบการทองเทยวมความเกาท าใหไมนาสนใจ 2. มการน าเสนอบนเวบไซตไมนาสนใจท าใหไมอยากศกษา 3. เวบไซตบางเวบไซตอาจน าเสนอไมเขาใจหรอขอมลไมครบรปภาพขดของ 4. เวบไซตเกยวกบการทองเทยวประเทศญป นมนอย จงหาขอมลไดไมมาก

6

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

7

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

รปท 2.1 แสดงตวอยางเวบไซตของ Adobe สวนเวบไซตขององคกรธรกจทมเปาหมายเพอขายสนคาหรอบรการนนยงจ าเปนตองใหความส าคญกบการออกแบบเวบไซตเปนอยางมากเพราะผใชหรอลกคาของคณจะตดสนใจซอสนคาหรอบรการ โดยดจากสงทพบเหนในเวบไซต องคประกอบของการออกแบบเวบไซตอยางมประสทธภาพ การออกแบบเวบไซตทมประสทธภาพนนตองค านงถง องคประกอบส าคญดงตอไปน 1. ความเรยบงาย (Simplicity) หมายถง การจ ากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการสอสารเนอหากบผใชนน เราตองเลอกเสนอสงทเราตองการน าเสนอจรง ๆ ออกมาในสวนของกราฟก สสน ตวอกษรและภาพเคลอนไหว ตองเลอกใหพอเหมาะ ถาหากมมากเกนไปจะรบกวนสายตาและสรางความค าราญตอผใชตวอยางเวบไซตทไดรบการออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยางเชน Apple Adobe Microsoft หรอ Kokia ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก

8

2. ความสม าเสมอ ( Consistency) หมายถง การสรางความสม าเสมอใหเกดขนตลอดทงเวบไซต โดยอาจเลอกใชรปแบบเดยวกนตลอดทงเวบไซตกได เพราะถาหากวาแตละหนาในเวบไซตนนมความแตกตางกนมากจนเกนไป อาจท าใหผใชเกดความสบสนและไมแนใจวาก าลงอยในเวบไซตเดมหรอไม เพราะฉะนนการออกแบบเวบไซตในแตละหนาควรทจะมรปแบบ สไตลของกราฟก ระบบเนวเกชน (Navigation) และโทนสทมความคลายคลงกนตลอดทงเวบไซต 3. ความเปนเอกลกษณ (Identity) ในการออกแบบเวบไซตตองค านงถงลกษณะขององคกรเปนหลก เนองจากเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกร การเลอกใชตวอกษร ชดส รปภาพหรอกราฟก จะมผลตอรปแบบของเวบไซตเปนอยางมาก ตวอยางเชน ถาเราตองออกแบบเวบไซตของธนาคารแตเรากลบเลอกสสนและกราฟกมากมาย อาจท าใหผใชคดวาเปนเวบไซตของสวนสนกซงสงผลตอความเชอถอขององคกรได 4. เนอหา (Useful Content) ถอเปนสงส าคญทสดในเวบไซต เนอหาในเวบไซตตองสมบรณและไดรบการปรบปรงพฒนาใหทนสมยอยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใชตองการใหถกตองและสมบรณ เนอหาทส าคญทสดคอเนอหาททมผพฒนาสรางสรรคขนมาเอง และไมไปซ ากบเวบอน เพราะจะถอเปนสงทดงดดผใชใหเขามาเวบไซตไดเสมอ แตถาเปนเวบทลงคขอมลจากเวบอน ๆ มาเมอใดกตามทผใชทราบวา ขอมลนนมาจากเวบใด ผใชกไมจ าเปนตองกลบมาใชงานลงคเหลานนอก 5. ระบบเนวเกชน (User-Friendly Navigation) เปนสวนประกอบทมความส าคญตอเวบไซตมาก เพราะจะชวยไมใหผใชเกดความสบสนระหวางดเวบไซต ระบบเนวเกชนจงเปรยบเสมอนปายบอกทาง ดงนนการออกแบบเนวเกชน จงควรใหเขาใจงาย ใชงานไดสะดวก ถามการใชกราฟกกควรสอความหมาย ต าแหนงของการวางเนวเกชนกควรวางใหสม าเสมอ เชน อยต าแหนงบนสดของทกหนาเปนตน ซงถาจะใหดเมอมเนวเกชนทเปนกราฟกกควรเพมระบบเนวเกชนทเปนตวอกษรไวสวนลางดวย เพอชวยอ านวยความสะดวกใหกบผใชทยกเลกการแสดงผลภาพกราฟกบนเวบเบราเซอร 6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal) ลกษณะทนาสนใจของเวบไซตนน ขนอยกบความชอบสวนบคคลเปนส าคญ แตโดยรวมแลวกสามารถสรปไดวาเวบไซตทนาสนใจนนสวนประกอบตาง ๆ ควรมคณภาพ เชน กราฟกควรสมบรณไมมรอยหรอขอบขนบนไดใหเหน ชนดตวอกษรอานงายสบายตา มการเลอกใชโทนสทเขากนอยางสวยงาม เปนตน

9

7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility) การใชงานของเวบไซตนนไมควรมขอบจ ากด กลาวคอ ตองสามารถใชงานไดดในสภาพแวดลอมทหลากหลาย ไมมการบงคบใหผใชตองตดตงโปรแกรมอนใดเพมเตม นอกเหนอจากเวบบราวเซอร ควรเปนเวบทแสดงผลไดดในทกระบบปฏบตการ สามารถแสดงผลไดในทกความละเอยดหนาจอซงหากเปนเวบไซตทมผใชบรการมากและกลมเปาหมายควรใหความส าคญกบเรองนใหมาก 8. ความคงทในการออกแบบ (Design Stability) ถาตองการใหผใชงานรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได ควรใหความส าคญกบการออกแบบเวบไซตเปนอยางมาก ตองออกแบบวางแผนและเรยบเรยงเนอหาอยางรอบคอบ ถาเวบทจดท าขนอยางลวก ๆ ไมมมาตรฐานการออกแบบและระบบการจดการขอมล ถามปญหามากขนอาจสงผลใหเกดปญหาและท าใหผใชหมดความเชอถอ 9. ความคงทของการท างาน (Function Stability) ระบบการท างานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบสรางสรรคและตรวจสอบอยเสมอ ตวอยางเชน ลงคตาง ๆ ในเวบไซต ตองตรวจสอบวายงสามารถลงคขอมลไดถกตองหรอไม เพราะเวบไซตอนอาจมการเปลยนแปลงไดตลอดเวลา ปญหาทเกดจากลงค กคอ ลงคขาด ซงพบไดบอยเปนปญหาทสรางความร าคาญกบผใชเปนอยางมาก กระบวนการพฒนาเวบไซต การจดระบบโครงสรางขอมล (Information Architecture) ในกระบวนการพฒนาเวบไซตทก าลงจะไดศกษาตอไปนไดอาศยหลกการจดระบบโครงสราง ขอมลทเรยกวา Information Architecture อยในหลาย ๆ สวนตงแตขนแรกจนถงขนทไดเปนรปแบบ โครงสรางสดทาย (Final Architecture Plan) ซงถอเปนกระบวนการทส าคญมากทจะท าใหเวบไซตบรรลตามเปาหมายทตงไว การจดระบบโครงสรางขอมล คอ การพจารณาวาเวบไซตควรจะมขอมลและการท างานใดบาง ดวยการสรางเปนแผนผงโครงสรางกอนทจะเรมลงมอพฒนาเวบเพจโดยเรมจากการก าหนดเปาหมายเวบไซตและกลมผใชเปาหมาย ตอมากพจารณาถงเนอหาและการใชงานทจ าเปนแลวน ามา จดกลมใหเปนระบบจากนนกถงเวลาในการออกแบบโครงสรางขอมลในหนาเวบใหพรอมทจะน าไปออกแบบกราฟก และหนาตาใหสมบรณตอไป การจดท าระบบโครงสรางขอมลเปนพนฐานส าคญในการออกแบบเวบไซตทด ทจะชวยพฒนาแบบแผนรายละเอยดขอมลในการออกแบบเวบไซต ซงไดแก รปแบบการน าเสนอ กระบวนการ 13 ขนตอนในการพฒนาเวบไซต

10

สงทไดรบ ช

รปท 2.2 ขนตอนในการพฒนาเวบไซต

Phase 1: ส ารวจปจจยส าคญ (Research)

1. รจกตวเอง – ก าหนดเปาหมายและส ารวจความพรอม 2. เรยนรผใช – ระบกลมผใชและศกษาความตองการ 3. ศกษาคแขง - ส ารวจการแขงขนและเรยนรคแขง

1. เปาหมายหลกของ

เวบไซต

2. ความตองการของผใช

3. กลยทธในการแขงขน

Phase 2: พฒนาเนอหา (Site Content)

4. สรางกลยทธการออกแบบ 5. หาขอสรปขอบเขตเนอหา

Phase 3: พฒนาโครงสรางเวบไซต

(Site Structure)

6. จดระบบขอมล 7. จดท าโครงสรางขอมล 8. พฒนาระบบเนวเกชน

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

2. ขอบเขตเนอหาและการใชงาน

3. ขอมลทถกจดอยางเปนระบบ

1. แผนผงโครงสรางขอมล

2. แนวทางการทอเวบ

3. ขอมลทถกจดอยางเปนระบบ

Phase 4: ออกแบบและพฒนาหนาเวบ

(Visual design)

9. ออกแบบลกษณะหนาเวบเพจ 10. พฒนาเวบตนแบบและขอก าหนดสดทาย

1. ลกษณะหนาตาของเวบไซต

2. เวบเพจตนแบบทจะใชในการพฒนา

3. รปแบบโครงสรางของเวบไซต

4. ขอก าหนดในการพฒนาเวบไซต

Phase 5: พฒนาและด าเนนการ

(Production and Operation)

11. ลงมอพฒนาเวบเพจ 12. เปดตวเวบไซต 13. ดแลและพฒนาตอเนอง

1. เวบไซตทสมบรณ

2. เปดตวเวบไซตและท าใหเปนทรจก

3. แนวทางการดแลและพฒนาตอไป

11

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

1. ขอมลและการใชงานทเปนประโยชน 2. การตอบสนองตอผใช 3. ความบนเทง 4. ของฟร

ขอมลหลกทควรมอยในเวบไซต 1. ขอมลเกยวกบบรษท (About the company) 2. รายละเอยดผลตภณฑ (Product information) 3. ขาวความคบหนาและขาวจากสอมวลชน (News/Press releases) 4. ค าถามยอดนยม (Frequently asked questions) 5. ขอมลในการตดตอ (Contact information)

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

12

โครงสรางขอมลแบบฐานขอมล (Database Model) โครงสรางขอมลแบบนมกน าไปใชกบเวบขนาดใหญทมผรบผดชอบเรองระบบฐานขอมลโดยเฉพาะฐานขอมลเปนการจดระบบขอมลทเปนทนยมมากประเภทหนงโดยขอมลจะถกจดอยในรปแถวและคอลมนดวยกฎเกณฑบางอยางทมการก าหนดไวเฉพาะฐานขอมลนน ๆ การน าระบบฐานขอมลมาใชในเวบไซตจะชวยเพมความสามารถในการคนหาขอมลไดอยางถกตองและรวดเรว นอกจากนนการใชระบบฐานขอมลยงชวยเพมความสะดวกในการดแลและปรบปรงเนอหาอยางมประสทธภาพอกดวย เนองจากความซบซอนของกฎเกณฑและขอจ ากดตาง ๆ ในระบบฐานขอมล จงเปนเรองยากในการจดเนอหาทงหมดของเวบไซต ซงมท งตวอกษร ลงค รปภาพ และสออน ๆ ไวในฐานขอมลเดยวกนไดทงหมด หรอถาจะท าจรงกตองใชเวลาและความพยายามอยางมากดวยเหตดงกลาวระบบฐานขอมลควรน าไปใชกบบางสวนในเวบไซต หรอเวบไซตยอย (Sub site) ทมกลมของขอมลประเภทเดยวกน หลกการออกแบบหนา สรางล าดบชนความส าคญขององคประกอบ (Visual Hierarchy) หลกส าคญในการออกแบบหนาเวบอยางหนงกคอการสรางล าดบชนความส าคญขององคประกอบตาง ๆ ภายในหนาเวบ เพอเนนใหเหนวาอะไรเปนเรองส าคญมากส าคญรองลงไปหรอส าคญนอยตามล าดบการจดระเบยบขององคประกอบอยางเหมาะสมจะชวยแสดงถงความสมพนธระหวางองคประกอบตาง ๆ ในหนาเวบไดในการออกแบบคณจงควรใหความสนใจกบปจจยเหลานดวย ขนาดเปรยบเทยบ (relative size) ขององคประกอบตาง ๆ ในหนาเวบจะชวยสอความหมายถงความส าคญของสงหนงตอสงอน ๆ โดยองคประกอบทมขนาดใหญยอมสามารถดงความสนใจของผใชไดกอน และยงแสดงถงความส าคญทมเหนอองคประกอบขนาดเลก ตวอยางทเราเหนกนอยทวไปกคอ การก าหนดหวขอเรองตาง ๆ ใหมขนาดใหญกวาสวนของเนอหาเสมอ เพอแสดงใหผ ใชมองเหนไดชดเจนและเขาใจจส าคญของเนอหาไดดข น แตเมอใดกตามทคณก าหนดใหสวนของหวขอมขนาดเลกกวาเนอหากจะสงผลใหผใชเกดความสบสนไดทนท

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

13

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

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

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

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

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

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

14

ใดมาใชกตาม คณควรใชลกษณะเหลานนใหสม าเสมอตลอดทงเวบไซต เพอปองกนความสบสนทอาจเกดขนได เชน ถาคณใชป มเนวเกชนทเปนแบบ 2D มาตลอด แลวกลบเปลยนเปนแบบ 3D ในบางสวน ผใชจะรสกสบสนกบความแตกตางทเกดขนอยางไมมเหตผลได สรางความสม าเสมอตลอดทวทงเวบไซต ปญหาอยางหนงทอาจจะเคยพบเหนมาแลวในบางเวบไซต ค อ การมรปแบบในแตละหนาทไมเหมอนกน จนท าใหไมแนใจวายงอยในเวบเดมหรอเปลา เมอคณไดออกแบบโครงสรางของหนาเวบเพจ รปแบบของกราฟก ลกษณะตวอกษร โทนส และองคประกอบอน ๆ เปนทเรยบรอยแลว กควรน าลกษณะดงกลาวไปใชกบทก ๆ หนาใหเปนมาตรฐานเดยวกนตลอดทงเวบไซต เพอเปนเอกลกษณใหผใชสามารถจดจ าลกษณะของเวบไซตไดดยงขน นอกจากนนความสม าเสมอของโครงสรางหนาเวบและระบบเนวเกชนกจะท าใหผใชรสกค นเคย และสามารถคาดการณลกษณะของเวบไดลวงหนา ซงจะชวยใหการทองเวบเปนไปอยางสะดวก ในทางเทคนคคณสามารถใช Cascading Style Sheet (CSS) ชวยในการก าหนดสไตลมาตรฐานใหกบองคประกอบตาง ๆ เชน ตวอกษร ส หรอตาราง โดยทก าหนดรปแบบเพยงครงเดยว แลวสามารถน าไปใชไดกบขอมลทงหมดในเวบไซต ท าใหเกดความสะดวกในการออกแบบ และยงงายตอการเปลยนแปลงในภายหลง ขอควรระวงอกอยางกคอในขณะทคณพยายามรกษาความสม าเสมอของเวบไซตไวโดยตลอดนน บางครงกอาจกลายเปนขอจ ากดทท าใหเวบไซตดนาเบอไดแนวทางแกไขกคอการสรางความแตกตางทนาสนใจในแตละหนาโดยใชองคประกอบทคลายคลงกน แตมสหรอลกษณะแตกตางไปเลกนอยเพอท าใหเกดลกษณะพเศษเฉพาะของหนานนแตยงสามารถคงความสม าเสมอของเวบไซตไวได การวางองคประกอบทส าคญไวในสวนบนของหนาเสมอ สวนบนของหนาในทน หมายถง สวนแรกของหนาทจะปรากฏขนในหนาตางบราวเซอร โดยทยงไมมการเลอนหนาจอใด ๆ เนองจากสวนบนสดของหนาจะเปนบรเวณทผใชมองเหนไดกอน ดงนนสงทอยในบรเวณนจงควรเปนสงทส าคญและสามารถดงดดความสนใจจากผใชได โดยปกตแลวสวนบนสดนควรประกอบดวย

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

15

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

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

- สชวยเชอมโยงบรเวณทไดรบการออกแบบเขาดวยกน ผอานจะมความรสกวาบรเวณทมสเดยวกนจะมความส าคญเทากน วธการเชอมโยงแบบนชวยจดกลมของขอมลทมความสมพนธอยางไมเดนชดเขาดวยกนได

16

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

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

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

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

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

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

17

ความรเบองตนเกยวกบส ทกคนคงไดรจกแมสหรอสขนตน ( primary color ) ทงสามซงประกอบดวย สแดง,เหลอง และน าเงน มากอนจากการศกษาในอดต เหตทสทงสามนถอวาเปนแมสหลก กเพราะวาสทงสามเปนสทไมสามารถเกดขนจากการผสมของสอน ๆ และยงเปนตนก าเนดของสอน ๆทเหลอทงหมด ตอไปกเปนสขนท 2 ทเกดจากการผสมของสขนตนเขาดวยกน โดยท สแดงกบสเหลองไดเปนสสม,สเหลองกบน าเงนไดเปนเขยว และสน าเงนกบแดงไดเปนมวง ตอจากนนกเปนสขนท 3 ซงเกดจากการผสมของสขนตนกบสขนท 2 ทอยตดกนทงสองดาน ในทสดเรากจะไดสขนท 3 ทงหมด 6 ส โดยสขนตน 1 ส ท าใหเกดสขนทสาม 2 ส ดงน : เหลอง-สม , แดง-สม , แดง-มวง , น าเงน-มวง ,น าเงน-เขยว และเหลอง-เขยว เมอเรารทมาของสตาง ๆ ดแลว ในขนตอไปจะเปนเรองของพนฐานการผสมส การจดระบบส และรปแบบของชดสพนฐาน

แสดงตวอยางสขนตาง ๆ

สขนท 1 สขนท 2

สขนท 3 สขนท 4

รปท 2.3 แสดงตวอยางสขนตาง ๆ

18

จตวทยาสกบความรสก ( Psychology of Colour) ในดานจตวทยา ส เปนตวกระตนความรสกและมผลตอจตใจของมนษย สตางๆจะใหความรสกทแตกตางกน ดงนนเราจงมกใชสเพอสอความรสกและความหมายตางๆ ไดแก • สแดง ใหความรสกเรารอน รนแรง อนตราย ตนเตน • สเหลอง ใหความรสก สวาง อบอน แจมแจง ราเรง ศรทธา มงคง • สเขยว ใหความรสก สดใส สดชน เยน ปลอดภย สบายตา มงหวง • สฟา ใหความรสก ปลอดโปลง แจมใส กวาง ปราดเปรอง • สมวง ใหความรสก เศรา หมนหมอง ลกลบ • สด า ใหความรสก มดมด เศรา นากลว หนกแนน • สขาว ใหความรสก บรสทธ ผดผอง วางเปลา จดชด • สแสด ใหความรสก สดใส รอนแรง เจดจา มพลง อ านาจ • สเทา ใหความรสก เศรา เงยบขรม สงบ แกชรา • สน าเงน ใหความรสก เงยบขรม สงบสข จรงจง มสมาธ • สน าตาล ใหความรสก แหงแลง ไมสดชน นาเบอ • สชมพ ใหความรสก ออนหวาน เปนผหญง ประณต ราเรง • สทอง ใหความรสก มงคง อดมสมบรณ

รปท2.4 จตวทยาสกบความรสก

19

การผสมส ( Color Mixing) รปแบบการผสมสเพอใหเกดเปนสตางๆ สามารถแบงไดเปน 2 แบบ คอการผสมของแสงหรอการผสมแบบบวก ( additive mixing ) และการผสมของวตถ (pigment) หรอการผสมแบบลบ (subtractive mixing) ซงมรายละเอยดดงตอไปน การผสมสแบบลบ (Subtractive Color Mixing) การผสมสแบบลบไมไดมความเกยวของกบเรองของล าแสงแตอยางใด ๆ แตเกยวเนองกบการดดกลนและสะทอนแสงของวตถตาง ๆ เมอแสงสขาวสองมายงวตถหนงๆวตถนน จะดดกลนแสงทความยาวคลนบางระดบไวและสะทอนแสงทเหลอออกมาใหเราเหน สขนตนในรปแบบนประกอบดวย สแดงแกมมวง (magenta) สน าเงนแกมเขยว (cyan) และสเหลอง ซงไมใชสแดง เหลอง และน าเงนอยางธรรมดาอยางทหลาย ๆ คนเขาใจเมอมการผสมวตถมส จะเกดการรวมกนของสทจะถกดดกลนไว ท าใหปรมาณแสงทจะสะทอนออกมาลดลง จงเปนทมาของชอ “ สแบบลบ ” เมอสทงสามมการผสมกนเปนค ๆ กจะเกดผลเปนสตาง ๆ ไดแกสแดง (เกดจากสแดงแกมมวงบวกกบเหลอง) สเขยว (เกดจากสเหลองบวกกบน าเงนแกมเขยว) และสน าเงน (เกดจากสน าเงนแกมเขยวบวกกบแดงแกมมวง) ในขนสดทาย เมอรวมสทงสามเขาดวยกนกจะเหนเปนสด า เพราะมการดดกลนแสงทกสไวทงหมด ท าใหไมมแสงสใดสามารถสะทอนออกมาไดสอตาง ๆ ทเกยวของกบการใชวตถมส อยางเชน สทใชในการวาดรปของศลปน , ดนสอส , สเทยน รวมถงระบบการพมพแบบ 4 ส ในสงพมพตาง ๆ (โดยมหมกสด าเพมมาอกสหนง) ลวนอาศยการผสมสแบบลบนทงสนรปแสดงการผสมสแบบลบ

รปท 2.5 แสดงการผสมสแบบลบ

20

การผสมสแบบบวก (Additive Mixing) การผสมสแบบบวกน เปนสงทคอนขางยากในการท าความเขาใจ เพราะมหลกการทลบลางสงทคณถกสอนมาในสมยกอน เราก าลงจะพดถงรปแบบการผสมของแสง ไมใชการผสมของวตถมสบนกระดาษ เนองจากแสงสขาวประกอบดวยล าแสงทมสตาง ๆ ตามความยาวคลนแสง ความยาวคลนแสงพนฐานไดแกสแดง เขยว และน าเงน ไมใชสแดง เหลองและน าเงนอยางทเราเขาใจมากอน เมอคลนแสงเหลานมการซอนทบกนกจะกอใหเกดการบวกและรวมตวกนของความยาวคลนแสง จงเปนทมาของชอ “สแบบบวก” เมอแสงทงสามสมการผสมกนเปนค กจะเกดเปนสน าเงนแกมเขยวหรอ cyan (เกดจากสน าเงนบวกกบเขยว) สแดงแกมมวงหรอ magenta (เกดจากสแดงบวกกบน าเงน) และสเหลอง (เกดจากสแดงบวกกบเขยว) และในทสดเมอผสมสทงสามเขาดวยกน กจะไดผลลพธเปนแสงสขาวอกครง สอใด ๆ กตามทมการใชแสงสองออกมา อยางเชน จอโปรเจคเตอร (movie projector) ทว หรอจอมอนเตอรส าหรบคอมพวเตอร ตางกเปนไปตามกฎของการผสมสแบบบวกน เพราะเหตน การออกแบบสส าหรบเวบไซต จงตองอาศยหลกการผสมสแบบบวกนเชนกน

รปท 2.6 แสดงการผสมสแบบบวก

วงลอส (Color Wheel) เพอความเขาใจถงความสมพนธของสทดขนเราความท าความรจกกบระบบสทเขาใจงาย และม ประโยชนมากทสดทเรยกกนวา วงลอส ( color wheel ) ซงเปนรปแบบหนงทมระบบการจดเรยงส ทงหมดไวในวงกลม วงลอสถกพฒนาขนจากความตองการกฎระเบยบทชดเจนของล าดบและความ กลมกลนของส แมในอดตจะมการพฒนาและออกแบบระบบสในรปแบบตาง ๆ มากมาย แตสวนใหญ มกจะมความซบซอนเกนกวาทจะน ามาใชประโยชนในการออกแบบจรง ในทสดเราจะใชวงลอสแบบ 12 ขน ซงถกประดษฐข นโดย Isaac Newton ในป 1666 ทไดแสดงถงการจดล าดบเฉดสอยางมเหตผล และงายตอการน าไปใช จงเปนประโยชนอยางมากตอศลปนในการศกษาและออกแบบศลปะตาง ๆ รวมทงการเลอกใชสในกระบวนการออกแบบเวบไซตทเราก าลงสนใจอย

21

วงลอสแบบบวก ( Additive Color Wheel )

รปท 2.7 แสดงการวงลอสแบบบวก

วงลอสแบบลบ ( Subtractive Color Wheel )

รปท 2.8 แสดงการวงลอสแบบลบ

สขนตนในวงลอสแบบลบประกอบดวย สแดงแกมมวง ( magenta ) สน าเงนแกมเขยว(cyan ) และสเหลอง ( yellow ) สวนสอน ๆ อาศยหลกการผสมสแบบลบไดเปนสทเหลอทงหมด

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

Red

Blue

bBMagent

a

Green

Magenta

Cyan Yellow

22

สออน สเขม และโทนส ( Tint , Shade and Tone ) ในการผสมสกลางดงกลาวเขากบสบรสทธ (สทไมผานการผสมกบสอนมากอน) จะเกดเปนสตางๆจ านวนมากมาย จนไมสามารถบรรจไวในวงลอสไดทงหมด จากประสบการณทผานมา คณคงรวาสแดงไมไดมเพยงเฉดสเดยว แทจรงแลว มแดงออน,แดงแก,แดงเขม หรองแดงจาง ฯลฯ อกจ านวนนบไมถวน สเหลานเปนผลมาจากการผสมของสบรสทธกบสด า ขาว และเทาระดบตางๆ นนเอง

- เมอสบรสทธผสมกบสขาว จะไดเปนสออน ( tint of the hue ) - เมอสบรสทธผสมกบสเทา จะไดเปนโทนสทระดบตางๆ ( tone of the hue ) - เมอสบรสทธผสมกบสด า จะไดเปนสเขม ( shade of the hue )

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

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

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

23

ความกลมกลนของส ( Color Harmony ) ความกลมกลนของส หมายถงความเปนระเบยบของสอยางเปนทนาพงพอใจตอสายตา ท า ใหผชมรสกถงความเปนระเบยบ สมดล และความสวยงามในเวลาเดยวกน การใชสทจดชดเกนไปจะท า ใหเกดความรสกนาเบอ และไมสามารถดงดดความสนใจจากผชมได ในทางตรงกนขาม การใชสทมากเกนไป ดวนวาย ไรระเบยบ กจะสรางความไมเขาใจและสบสนใหผชม ดงนน เปาหมายส าคญของเรา ในเรองส กคอการน าเสนอเวบไซตโดยใชชดสในรปแบบทเขาใจไดงาย นาสนใจ และสอความหมายไดอยางเหมาะสม รปแบบชดสพนฐาน ( Simple Color Schemes ) หลงจากคณไดรจกพนฐานของสมาพอสมควร ตอไปจะเปนเรองของชดสทถกจดกลมอยางเขากนดวยรปแบบตางๆ ท าใหเรามโอกาสเลอกชดสเหลานมาใชในการออกแบบไดโดยไมตองเสยเวลาสมเลอกสตางๆใหดเขากน อยางไรกตามคณควรยดรปแบบเหลานเปนเพยงหลกการเบองตน และยงคงตองท าการปรบเปลยนคาของส ( hue ) ความอมตวของส ( saturation ) และความสวางของส lightness) เพอใหเกดลกษณะทอานงาย สวยงาม และเหมาะสมกบเนอหาของเวบไซต

ชดสเยน ( Cool Color Scheme ) ชดสเยนประกอบดวยสมวง , น าเงน , น าเงนออน , ฟา , น าเงนแกมเขยว และสเขยว ตรงกนขามกบชดสรอนชดสเยนใหความรสกเยนสบายองคประกอบทใชสเยนเหลานจะดสภาพเรยบรอยและมความช านาญแตในทางจตวทยาสเยนเหลานกลบมความสมพนธกบความซมเศราหดหและเสยใจ นอกจากนน ชดสเยนมความกลมกลนกนโดยธรรมชาต แตอาจจะดไมนาสนใจในบางครง เพราะขาดความแตกตางของสทเดนชด เชนเดยวกบชดสรอน จะเหนวา มอก 2 ส ทไมอาจจ าแนกออกเปนสรอนหรอสเยนไดอยางแนนอน ซงกคอสเหลองและสเขยว เพราะสท งสองสามารถใหความรสกไดทงรอนและเยนตามแตสถานการณและสรอบขาง

รปท 2.10 แสดงชดสเยน

24

ชดสรอน ( Warm Color Scheme ) ชดสรอนประกอบดวยสมวงแกมแดง , แดงแกมมวง , แดง , สม , เหลอง และเขยวอมเหลอง สเหลานสรางความรสกอบอน สบาย และความรสกตอนรบแกผชม ชวยดงดดความสนใจไดงาย ในทาง จตวทยาสรอนมความสมพนธกบความสข สะดวก สบาย สตางๆในชดสรอนมความกลมกลนอยในตวเอง ขณะทอาจจะดไมนาสนใจบาง เพราะขาดสประกอบทตดกนอยางชดเจน

รปท 2.11 แสดงชดสรอน

ชดสทคลายคลงกน (Analogous Color Scheme) ชดสทมรปแบบอยางงายอกแบบหนงกคอชดสทคลายคลงกน ซงจะประกอบดวยส 2 หรอ 3 สทอยตดกนในวงลอส เชนสแดงแกมมวง สแดง และสสม เนองจากชดสทอยในรปแบบนมจ านวนมากมายท าใหเราสามารถเลอกชดสแบบนมาใชงานไดอยางงายสะดวก และแมวาเราสามารถเพมจ านวนสในชดใหมากขนเปน 4 หรอ 5 สได แตกลบจะมผลใหขอบเขตของสทมความกวางเกนไป ท าใหสอยตรงปลายทงสองของชดไมมความสมพนธกน เปนสาเหตใหลกษณะการทอยตรงปลายทงสองชดไมมความสมพนธ เปนสาเหตใหลกษณะการทมสคลายคลงกนลดลง ณ บางต าแหนงของวงลอส ชดสคลายคลงกน 3 -4 สทอยตดกนอาจดเหมอนเปนสเดยวกน เพราะมสใดสหนงคลมโทนของสทงหมดไวไมเพยงแตชดสแบบนจะน ามาใชงานไดสะดวกความคลายคลงกนของสยงกอใหเกดความกลมกลนกนอกดวยแมกระนนกดการขาดความแตกตางอยางชดเจน อาจท าใหไมมความเดนเพยงพอทจะดงดดความสนใจของผอานได

รปท 2.12 แสดงชดสทคลายคลงกนประกอบดวยส 2-3 สทอยตดกนในวงลอส

25

ชดสแบบสเดยว (Monochromatic Color Scheme) รปแบบของชดสทงายทสดคอชดแบบสเดยวทมคาของสบรสทธเพยงสเดยว ความหากหวายของสชดนเกดจากการเพมสเดยว ความหลากหลายของสชดนเกดจากการเพมความเขมหรอความเขมหรอความออนในระดบตางๆ ใหกบสตงตน ดงนน ชดสแบบเดยวของสแดงอาจประกอบดวยสแดงลวน สแดงอฐ(สเขม ของสแดง) สสตรอเบอร(สออนปานกลางของสแดง) ละชมพ(สออนมากของสชมพ) ชดสแบบนคอนขางจะมความกลมกลนเปนหนงเดยวกน และประสทธภาพในการสรางอารมณโดยรวมดวยการใชสเพยงสเดยว แตในบางครงรปแบบทมสเดยวนอาจดไมมชวตชวา เพราะขาดความหลากหลายของส ซงอาจท าใหผอานความสนใจ

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

26

รปท 2.14 แสดงชดสแบบสามเสา ชดสตรงขาม (Complementary Color Scheme) สตรงขามในทน หมายถง สทอยตรงกนขามกนในวงลอส เชน สแดงกบฟา หรอสน าเงนออนกบสมนาสนใจทวาเมอน าสทงสองนมาผสมกนจะไดผลลพธเปนสขาวส าหรบวงลอสแบบบวก หรอไดเปนสด าส าหรบวงลอสแบบลบทเปนเชนนกเนองจากวาสแตละสทอยตรงขามกนจะมตราสวนของสขนตนทผกผนกน ตวอยางเชน สแดงในวงลอสแบบบวกมสทตรงขามเปนสน าเงนแกมเขยวซงเปนสวนผสมจากสน าเงนและเขยวจงท าใหสทงสองรวมกนยงไดเปนสขาวอกเชนเดมจากคณสมบตนเราอาจเรยกสคนวาเปน “สเตมเตม” กได เมอน าสทงสองมาใชคกนกจะท าใหสทงสองมความสวางและสดใสมากขน ซงถอเปนคสทมความแตกตางมากทสดและยงมความเสถยรมากทสด (maximum contrast and maximum stability) ขอไดเปรยบของสในรปแบบนคอ ความสดใส สะดดตา และบางครงดนาสนใจกวาสทใชรปแบบสามจดเสยอก ท าใหแนใจไดวาชดสตรงกนขามนจะไมดจดชดขาดความนาสนใจอยางไรกดจ านวนสทจ ากดในรปแบบนท าใหผอานใหความสนใจไดงายแลวหลงจากนนกอาจละทงความรสกสนใจไปไดงายเชนกน

รปท 2.15 แสดงชดสตรงขามไดแกส 2 สทอยตรงขามในวงลอ

27

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

รปท 2.16 แสดงชดสตรงขามขางเคยง

ชดสตรงขามขางเคยงทง 2 ดาน (Double Split Complementary Color Scheme) ชดสแบบนถกดดแปลงมาจากชดสตรงขาม เชนกน แตคราวนสตรงกนขามทงสองถกแบงแยกเปนสดานขางทง 2 ดาน จงไดเปนชดส 4 ส ดงเชนสแดงแกมมวงกบน าเงนแกมเขยว และน าเงนออนกบสม ขอไดเปรยบทเหนไดชด คอ ความหลากหลายทเพมขนจากชดสตรงขามแบบแบงแยก สวนขอเสยเปรยบกยงมลกษณะเชนเดมทความสดใสและความกลมกลนของสลดลง

รปท 2.17 แสดงชดสตรงขามแบบแบงแยก 2 ดาน

28

นอกเหนอจากน ยงมรปแบบอนทเรยกวา Alternate Complementary Color Scheme โดยมสท ไดจากสามเหลยมรวมกบอกสหนงทอยตรงกนขามกบสใดสหนงในสามเหลยม เชน สเขยว สมวงแดง สแดง และสสม สวนแบบสดทายไดแก ชดสแบบสเหลยม (Tetrad Color Scheme) ทเกดจาก 4 สทอยตรงกนขามภายใตรปสเหลยม วธนเปนการใชสขนตน 1 ส สขนทสอง 1 ส และสขนทสาม 2 ส มาประกอบกน

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

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

29

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

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

30

การออกแบบกราฟกส าหรบเวบไซต ระบบการวดขนาดของรปภาพ เมอจอมอนเตอรท าการแสดงผลรปภาพในเวบเพจพกเซลในรปภาพจะจบคกนแบบหนงตอนงกบพกเซลตามความละเอยดของหนาจอท าใหหนวยการวดรปภาพในเวบจงเปนพกเซลไมใชนวหรอเซนตเมตรแตอยางใด ดงนนในกระบวนการ ออกแบบกราฟกและรปภาพตางๆ คณจงความลดขนาดเปนพกเซลไวเสมอ ซงจะมประโยชนในการเปรยบเทยบขนาดกราฟกกบองคประกอบอนๆ ในหนาเวบ รวมถงขนาดวนโดวของบราวเซอรอกดวย ระบบการวดความละเอยดของรปภาพ เนองจากรปภาพในเวบโดยสวนใหญจะถกแสดงผานหนาจอมอนเตอร ในทางเทคนคทถกตองแลว ระบบการวดความละเอยดของรปภาพจงตองเปน “Pixels per inch” (ppi) แตกมระบบการวดอกแบบหนงคอ “Dot per inch (dpi) ทใชความละเอยดของรปภาพทพมพออกมา ซงความละเอยดทไดจะขนอยกบประสทธภาพของเครองพมพแตละเครองในทางปฏบต หนวย ppi กบ dpi อาจใชแทนกนได ท าใหเปนทยอมรบวาความละเอยดของรปภาพในหนาจอมหนวยเปน dpi แทนทจะเปน ppi ทถกตอง ความละเอยดของรปภาพ โดยปกตแลว รปภาพทกรปในเวบไซตควรจะมความละเอยดแค 72 ppi ก เพยงพอแลวเรองจากจอมอนเตอรองผใชสวนใหญมความละเอยดต า (72 ppi) ดงนนแมวารปภาพจะมความละเอยดสงกวานเรากไมอาจมองเหนความแตกตางได เมอเปรยบเทยบความละเอยดของรปภาพในเวบกบในสงพมพคณจะเหนความแตกตางกนวารปภาพในเวบมคณภาพทต ากวา เนองจากมขอมลและรายละเอยดของรปภาพทนอยกวาท าใหรปทไดมองดมลกษณะเปนจดเลก ๆ ซงถอเปนธรรมชาตของรปภาพในเวบ ปญหาเกยวกบขนาดไฟลของกราฟก แมวากราฟกและรปภาพตาง ๆ จะชวยสอความหมายและสรางประโยชนอกหลายอยาง เราควรรถงขอเสยของกราฟกเหลานไวบางโดยปกต แลวขอมลในเวบไซทประกอบดวยไฟล HTML ทเปนตวอกษร และกราฟกหรอรปภาพเปนสงส าคญกราฟกใชเวลาในการดาวนโหลดมาก กวาตวอกษรหลายเทา ดงนนกราฟกขนาดใหญอาจใชเวลาในการสแดงผลนานมาก เมอผใชระบบการเชอตอกบอนเตอรเนตทคอนขางชา แมวากราฟกของคณจะออกแบบมาอยางดเพยงใด ถาตองใชเวลาในการโหลดนาน จงท าใหผใชรสกหงดหงด และเปลยนใจไมรอดรปเหลานนสงทคณทมเทออกไปไวกจะมมความหมาย เพอปองกนปญหาความลาชานเราจงตองท าการลดขนาดไฟลกราฟกลงใหเลกเขาไวกอน

31

ลดขนาดไฟลกราฟกส าหรบเวบ (Optimizing Web Graphic) ปญหาความเชองชาของอนเตอรเนตท าใหผออกแบบเวบไซตตองระมดระวงในเรองของ เวลาทใชในการดาวนโหลดเปนอยางมากแนวทางงาย ๆ ส าหรบผมหนาทออกแบบกราฟกก าหรบเวบกคอพยายามท าใหกราฟกมขนาดเลกมากทสดเทาทจะเปนไปได ทงนผออกแบบตองรจกทจะสรางความสมดลระหวางความสวยงามกบความเรวในการ แสดงผลเรองจากการสรางเวบโดยไมมรปภาพกราฟกใด ๆ เลยยอมไมนาสนใจ เพราะกราฟกมบทบาทส าคญในการแนะน า และสรางความบนเทงตอผชม ดงนนแนวทางทดทสดคอการสรางเวบ ทมประสทธภาพโดยใชกราฟกทแสดงผลไดอยางรวดเรวการ Optimize กราฟกจะชวยลดขนาดไฟลใหเลกลงไดท าใหแสดงผลไดเรวขน การจดต าแหนง (Alignment) การจ าต าแหนงของตวอกษรในแตละสวนมผลตอความรสกของเอกสารโดยทการจดต าแหนงแตละแบบจะใหความรสกทตางกนตวอกษรทถกจดใหชดขอบดานซายโดยทปลอยใหดานขวามลกษณะไมสม าเสมอจะใหความรสกไมเปนทางการ และจะอานไดงายกวาการจดชดขอบขวา โดยทวไปแลวพยายามหลกเลยงการจดชดขวา ยกเวนเมอมความเหมาะสมกบรปแบบจรง ๆ สวนตวอกษรทมการปรบระยะใหชดขอบทงซายและขวา (Justify) เปนทนยมใชในหนงสอพมพและจลสาร พรอมกบใหคามรสกทเปนทางการอกดวย ในภาษา HTML คณสามารถจดต าแหนงตวอกษรไดดวยค าสง ALIGN และเลอกค าสง left, right, center และ Justify (ค าสง Justify ใชไดเฉพาะบราวเซอรรนใหม ๆ ) ดงตวอยาง

ตารางท 2.1 แสดงการจดต าแหนง

จดชดซาย

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

จดชดขวา

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

จดกงกลาง

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

จดขอบชดซายและขวา

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

32

ชองวางระหวางตวอกษร (Tracking) และชองวางระหวางค า ความรสกของตวอกษรอาจจะเปนผลมาจากพนทวางโดยรอบ ทอยระหวางตวอกษร ระหวางค า หรอระหวางบรรทด คณสามารถปรบระยะของชองวางเหลานเพอใหอานไดงายขน แมวาตวอกษรจะถกออกแบบมาใหมระยะหางทเหมาะสมอยแลว แตในบางสถานการณ อาจมความตองการใหตวอกษรดแนนหรอหลวมเปนพเศษ อยางเชนตวอกษรทใช ตวพมพใหญท งหมด (UPPERCASE) จะดคอนขางแนนเพราะถกออกแบบใหใชรวมกบตวพมพเลกดงนนคณควรเพมชองวางระหวางตวอกษรใหมากขนเลกนอย ส าหรบค าทใชตวพมพใหญทงหมด ตวอกษรบางคทอยตดกนอาจมระยะหางไมเหมาะสม จ าเปนตองท าการปรบแตงทเรยกวา Kerning เปนการปรบระยะหางระหวางคของตวอกษร ซงจะมความส าคญมากเมอใชตวอกษรขนาดใหญหรอตวอกษรทใชเปนหวขอหลก เพราะเมอตวอกษรใหญขนกจะเกดชองวางทมากขนดวย จดประสงคของการท า kerning คอการปรบระยะหางของตวอกษรใหเทากนโดยตลอด เพอทสายตาจะไดเคลอนทอยางราบเรยบและสม าเสมอ ชองวางระหวางค าส าหรบภาษาองกฤษ หรอ ชองวางระหวางค าในภาษาไทย เปนสงทควรจะเทากนเสมอ ไมวาจะเปนการจดต าแหนงแบบ Justify ชองวางของแตละค าจะแตกตางกนไปในแตละบรรทด เพอชวยใหขอบซายและขวาเทากน คณอาจตองใชเครองหมายยตภงค (-) มาชวยแยกค าใหอยคนละบรรทด หรอปรบเปลยนการเวนวรรคใหม เพอไมใหมชองวางมากเกนไป ระยะหางระหวางบรรทด (Leading) ระยะหางระหวางบรรทด หรอ Leading ซงมทมาจากการเตมแนวของตะกวเขาไประหวางบรรทดเพอใหอานงายขนในกระบวนการท าตวอกษรโลหะในสมยกอน (Leading ออกเสยงวา “เลดดง” มาจากค าวา Lead หรอตะกวแปลตรงตามตววา “เสนตะกวทใชถางบรรทดในการพมพ” ไมไดเกยวกบค าวา lead ทแปลวา “การน า” หรอ “สงน า” แตอยางใด จากกระบวนการนท าใหค าวา Leading ถกน ามาใชในการก าหนกระยะหางระหวางบรรทด ในโปรแกรมใชในการก าหนดระยะหางระหวางบรรทดในโปรแกรมออกแบบสงพมพและ word processing ทระยะหางนอยจะมจ านวนตวอกษรไดมากจะขยายพนทของตวอกษรและยงเพมความสะดวกในการอานอกดวย ลองเปรยบเทยบผลของความสะดวกในการอานจากตวอยางตอไปน ความยาวของบรรทด เมอบรรทดของตวอกษรยาวขน อาจสรางความไมสะดวกใหกบผอานทตองเลอนสายตาจากปลายบรรทดไปยงสวนตนของบรรทดใหมในทางตรงกนขามบรรทดทคอนขางสนขอความจะถกแยกจากกนบอยครงซงเปนการรบกวนผอานเชนกน ความยาวทเหมาะสมของบรรทดขนอยกบหลายปจจยอยางเชน ชนดตวอกษร ขนาด ระยะหางระหวางบรรทดและความยาวของเนอหา คณสามารถควบคมความยาวของบรรทดไดดวยการสรางตางราง HTML ครอบบรเวณเนอหาเหลานน แลวก าหมดความกวางของชองเปนพกเซลแทนการใหเปอรเซนตจากการศกษา

33

พบวาสายตาคนเราสามารถกวาดไปในพนทกวางประมาณ 4 นวไดโดยไมตองขยบศรษะ ดงนน เพอความสะดวกในการอานแตละบรรทดควรมตวอกษรประมาณ 50 -70 ตวหรอ 7-15 ค า (ภาษาองกฤษ) หรอเทยบเปนพนทกจะกวางประมาณ 350-500 พกเซล ความยาวของหนาเวบ โดยปกตแลว ความยาวของหนาเวบไมควรยาวจนเกนไปเพราะหนาเวบทยาวมาก ๆ จะท าใหผใชรสกเหนอยลาทจะอานทางทดควรจะแบงออกเปนหนาสน ๆ หลาย ๆ หนาตอกน ซงจะใหความรสกทดกวาอยางไรกตาม ไมมขอก าหนดตามตวเกยวกบความยาวสงสดทควรจะเปน ทงนขนอยกบรปแบบหนาและขนากไฟลนน ๆ แบงเนอหาออกเปนยอหนา (Paragraph) เมอใดทเนอหาของคณมความยาวมากๆหลายบรรทดตอกนกควรแบงขอความเหลานนใหเปนสวนยอยๆ หรอเรยกวา “ยอหนา” หรอ Paragraph ซงแตละยอหนาแตละเวบเพจแยกออกจากกนโดยการขนยอหนาใหม และมกจะมบรรทดวางคนเนองจากภาษา HTML ค าสงหรอแทกซทใชในการขนยอหนาใหมคอ <P> จะท าใหเกดบรรทดวางระหวางยอหนาดวยกนเพอแยกใหเหนไดชดวาเปนขอความทอยคนละยอหนา ขนาดของตวอกษร ขนาดของตวอกษรมผลตอคณสมบตและลกษณะของเนอหาหลายประการ การเขาถงบทบาทและความส าคญของขนาดตวอกษรจะชวยใหคณออกแบบเวบเพจทสามารถดงความสนใจของผอาน ไปยงขอมลทตองการ และมผลในการน าทางใหผใชคลกไปยงสวนตาง ๆ ไดแนวทางตอไปนจะชวยใหคณใชประโยชนจากขนาดของตวอกษรไดอยางมประสทธภาพ ดงดดความสนใจดวยอกษรขนาดใหญ คณอาจน าสายตาของผอานใหมงไปยงเปาหมายดวยการใชตวอกษรขนาดใหญ เชนในสวนของโลโกหรอหวขอหลกตาง ๆ หรอบรเวณทคณตองการใหผอานสนใจ ซงเปนการก าหนดต าแหนงใหผอานใชเปนจดเรมตนโดยปกตแลวผอานจะเรมตนจากดานบนซายแตถาคณตองการใหเรมสนใจทสวนอนของหนากอาจใชตวอกษรขนาดใหญใหสะดดตาสายผอานกอน

• การใชตวอกษรขนาดใหญเรมตนประโยค (Initial caps หรอ Drop caps) บางครงคณไมจ าเปนตองใชตวอกษรแบบกราฟก เพอดงดดความสนใจเนนถงความส าคญของ ขอความ เมอคณสามารถใชตวอกษรทมขนาดใหญเรมตน ประโยคเปนเทคนคทนยมใชกนมานานแลว ในสงพมพ เพอดงดดความสนใจของผอานดวยการสรางความแตกตางของขนาดตวอกษร โดยทวไปแลวตวอกษรตวแรกจะมขนาดใหญวาตวอนประมาณ 2-5 พอยท และยงนยมทจะใชตวอกษรชนดอนเพอใหเกดความแตกตางมากขน นอกจากนนแลวยงอาจใชรปแบบสลบส ซง

34

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

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

35

การท าตวเอยง (Italic) ลกษณะตวอกษรแบบเอยงเปนทนยมใชกบสงพมพในการเนนค าหรอขอความตวอกษรแบบเอยงนมกจะท าใหอานยากกวาตวปรกตเลกนอยจงท าให ผอานตองหยดเพออานซ า ๆ ซงนบถอเปนสงทเนนเพราะความแตกตางจากตวอกษรปกต และเพราะความเรวของการอานทลดลง ซงจะท าใหสายตาของเรามงไปสจดทแตกตางจากปรกตตามลกษณะเฉพาะของสมองมนษยต าราทางดาน Publishing หลายเลมแนะน าใหใชตวเอยงเพอเนนมากกวาท าตวหนา (Bold) เสยอกเพราะเรยกรองความสนใจไดโดยไมสะดดตาหรอรบกวนการกวาดสายตาเกนไปขณะทการใชตวเอยงในสงพมพไดผลดแตในหนาจอมอนเตอรแลวกลบมการแสดงของพกเซลอยางไมลงตวเพราะจดบนจอภาพมความละเอยดต ากวาการพมพมาก คอมความละเอยดเพยงประมาณ 72 -96 dpi (จดตอนว) ในขณะทการพมพนนใชความละเอยด ถง 2,400 dpi ขนไป ดงนนเปนเวลาแสดงผลตวเอยงในปรมาณมาก ๆ โดยเฉพาะอยางยงตวอกษรภาษาไทยจงเปนสงทควรหลกเลยงหรอถาจ าเปนตองใชกตองแนใจวาผใชจะสามารถอานไดโดยไมล าบากนก การขดเสนใต เทคนคการขดเสนใตเปนทนยมใชในการพมพดดสมยกอนมการใชสบเนองจนมาถงยคการพมพในโปรแกรมคอมพวเตอร (Word Processing) แตเนองจากการใชเสนใตมความหมายพเศษในระบบเวบ ซงแสดงถงไฮเปอรลงคทตดอยกบค านน (Hypertext) ดงนนเราจงไมควรใชขดเสนใตในความหมายอนอก มฉะนนสรางความสบสนใหกบผใชได ต าแหนงตวอกษร ต าแหนงของค าหรอบรรทดทอยตางจากปรกตจะมความเดนในตวเชนเดยวกบการยอหนาขางในหรออกขางนอก (Indent หรอ hanging indent) ใหเกดความแตกตางในพารากราฟซงจะชวยดงดดความสนใจได แนวทางของตวอกษร (Orientation) ตวอกษรทอยในแนวตงจากลางไปบนเปนสงทแปลกใหมสงเกตไดงายแตท าใหไมสะดวกในการอานในหนาหนงสอปกตเราแตกลบดานหนงสอกจะอานไดแตในจอมอนเตอรผอานตองเอยงคอจงจะอานไดสวนตวอกษรในแนวตงจากบนลงลางเปนสงทท าไมไดในภาษา Html แตสามารถท าไดงายโดยใชรปกราฟกแทนถาจ าเปนกตองใชกควรใชอยางจ ากด พนทวาง (White Space) นอกเหนอจากขนาดตวอกษรทจะแสดงถงความส าคญพนทวางรอบๆตวอกษรกเปนสงทส าคญเชนกน ตวอกษรขนาดเลกในพนทกวาง ๆ จะมความโดดเดนมากกวาปรกต นอกจากนน การ

36

มพนทวางมาก ๆ ในหนาเวบยงชวยท าใหเนอหานนนาอานมากกกวาหนาทเตมไปดวยตวหนงสอผออกแบบควรเขาใจวาการท าเนอหาใหดอานงายส าคญกวาการใสเนอหาใหมากทสดในหนาเวบการออกแบบเวบเพจโดยค านงถงพนทวาง จงชวยท าใหคณสามารถจดบรเวณของเนอหาไดอยางนาสนใจ วธเบองตนในการควบคมการปรากฏของตวอกษรในเวบเพจ คอการใชค าสง <PRE> ทมไวส าหรบแสดงตวอกษรตามรปแบบทก าหนดไวสวนวธทพลกแพลงขนอกหนอยคอการใชกราฟกโปรงใสมาคนใหเกดพนทวาง หรอการก าหนดคาพนทวางในแนวตงและแนวนอนโดยรอบของกราฟก นอกจากนน การใชตาราง HTML ท าใหคณสามารถจดตวอกษรและกราฟกไดอยางเปนระเบยบมากขน ขณะท Cascading Style Sheets และ Dynamic HTML กเปนเทคนคใหมทจะชวยคณในการควบคมต าแหนงของขอความและรปกราฟกตางๆ โดยใชการจดต าแหนงอยางแนนอน และการจดล าดบของชนเอกสารขององคประกอบในหนาเวบวาอะไรซอนกบอะไร การสรางความสมดลในหนาเวบ การจดรปแบบโครงสรางของเนอหาในหนาเวบตองอาศยแนวทางในการจดระเบยบ สรางสมดลรวมถงการจดแนวของตวอกษรอยางเหมาะสมเพอใหผ อานเขาใจไดงาย แมวาเรายงจะมขอจ ากดในการจดรปแบบตวอกษรอยมาก แนวทางตอไปนจะชวยใหคณน าเสนอขอความอยางมรปแบบ จดเรยงรายการลงคตามแนวนอน คณไมจ าเปนตองเรยงรายการลงคเปนแถวตามแนวต งเสมอไปบางครงการเรยงตามแนวนอนอาจท าใหมองเหนไดชดเจนและยงดงดดความสนใจไดดกวา ทงนขนอยกบรปแบบและความเหมาะสมของการออกแบบดวย สรางความสมดลของตวอกษรขนาดใหญและขนาดเลก หลกในการใชตวอกษรอกอยางหนงคอการสรางความสมดลของตวอกษรขนาดใหญและขนาดเลกโดยปรกตนกออกแบบจะใช GIF ส าหรบตวอกษรขนาดใหญ และตวอกษรแบบ HTML กบสวนเนอหาในเวบเพจ ดงนนเราจงตองควบคมใหตวอกษรแบบ GIF เขากนไดแบบ HTML อยางเหมาะสมและตองไมโดดเดนเกนไป

37

จดกลมขอความเปนสดสวนเหลอมล ากน วธการหนงในการสรางความสมดลใหกบหนาเวบคอการจดกลมขอความใหเปนสดสวนเหลอมล ากน เชนการจดขอความ 3 พารากราฟใหเหลอมล ากนลงมาดานลางจากซายไปขวา ผใชสวนใหญกจะเรมอานทพารากราฟทอยดานบนซายและไลไปตามล าดบวธนถอเปนการจดขอความใหเปนสดสวนทนาตดตามอยางสรางสรรค จดโครงสรางพนทของตวอกษรอยางไมเทากน (Asymmetrical) ไมจ าเปนตองจดวางพนทของตวอกษรใหเทากนหรออยตรงกลางเสมอทจรงแลวการแบงพนทหนาอยางไมสมดลเชนเปน 2 คอลมนในอตราสวน 30:70 ไมเพยงแตจะดนาสนใจแตยงชวยสรางความสมดลระหวางพนทวางและตวอกษรวธการในการแบงพนทท าไดดวยการก าหนดตารางใหมความกวางเตมพนทหนาจอ แลวแบงคอลมนตามขนาดทตองการ จดแนวตวอกษรในกลมเดยวกน การจดแบบนจะชวยใหผใชสามารถแยกแยะขอความตามลกษณะออกเปนกลมอยางชดเจนซงอาจท าไดโดยใชพนทวางและคอลมนในตารางในสวนของเนวกเกชนบารกควรรวมลงคประเภทเดยวกนเขาดวยกน พรอมทงจดแนวใหเปนระเบยบ และควรนกถงความสม าเสมอของรปแบบโดยรวมของทงหนาอยาลมวาการแยกสวนของขอมลกบลงคออกจากกนอาจท าใหผใชสนใจหรอในทางตรงกนขามอาจจะสบสนกได การใชสกบตวอกษร สเปนองคประกอบทมประสทธภาพสงในการน าเสนอบนเวบโดยจะชวยตกแตงโครงสรางและรปแบบของตวอกษรใหดดยงขนเมอเทยบกบสอสงพมพสวนมายงเปนขาว-ด าแลวการใชสกเปนเรองทนาตนเตนและเรยกความสนใจไดมากกวา นอกจากนส าหรบเวบเพจการใชสไมท าใหตนทนของเราเพมขนและสยงชวยท าใหเกดความแตกตางจากตวอกษรปรกตอกดวย ดงนนในเวบเพจของคณอาจใชสแสดงการเนนค าหรอขอความแทนทจะใชตวหนาหรอตวเอยงสทแตกตางหรอมความเดนชดมากเทาไหรยอมหมายถงการเนนทมากขน ตวอยางเชน ตวอกษรสแดงจะมความเดนมากกวาสเหลองเมออยบนพนสขาว ส าหรบเวบเพจเลอกใชเพยงสขาวและด า อาจสรางความแตกตางกน ก าหนดสหลกส าหรบเวบ เวบไซตทดอาจไมจ าเปนตองใชสจ านวนมากอยางทคดโดยทวไปแลวเวบไซทตองการสหลก จ านวน ถง 7 สทจะใชประจ าส าหรบองคประกอบตาง ๆ ในเวบเพจ ซงรวมถงตวอกษรดวยแตกไมใชวาคณจะใชไดเฉพาะสทก าหนดไวเทานนคณอาจเลอกใชสอนเพมเขาไดเสมอเพยงแตตองระวงใหส ทงหมดไปดวยกนไดดโดยไมขดแยงกน

38

ใชสของตวอกษรอยางมความหมายและสม าเสมอ เนองจากผใชจะมองเปนความแตกตางของสไดอยางรวดเรวการใชสของตวอกษรทตางกน ตามลกษณะเนอหาเชน หวขอ รายละเอยด และลงคอยางสม าเสมอ จะท าใหผใชคนเคยและทองไปใน เวบไซทไดอยางสะดวกตลอดไซท เพอความสม าเสมอของสตลอดทงเวบไซทคณอาจใชเทคนคของ Cascading Style Sheets ชวย ระบสและรปแบบขององคประกอบแตละชนดภายในเวบไดอยางสะดวกและจะเปนการดถาคณจดรหส ทใชไวอางองภายหลง ท งคาในแบบ Hexadecimal ส าหรบ HTML และคา RGB ทจะตองใชในงาน กราฟกรวมไปถงคา CM ถาคณจ าเปนตองเปรยบเทยบกบสในสงพมพ ใชสทแตกตางกนในแตละสวนขอมล ถาคณก าลงน าเสนอเนอหาทแบงเปนสวนๆ ได อยางเชน สนคาหลายๆ ประเภท หรอลงคไปยงขอมลหลายๆสวนคณอาจทดลองใชสทตางกนในแตละยอหนาชวยใหผอานไดรบขอมลทเรวขนและถาเราใชสเหลานอยางสม าเสมอผอานกจะคนเคยและเขาถงขอมลไดสะดวกขนทส าคญคอคณตองแนใจวาสทน ามาใชเขากนไดกบสขององคประกอบอนๆ ก าหนดสของลงคใหเหมาะสม ในขนตอนการออกแบบลงคคณสามารถระบสใหกบสภาวะทงสามอยางของลงค ซงไดแก ลงคทยงไมไดคลกลงคขณะทคลกและลงคทไดผานการคลกไปแลวท งนการเลอกสทใชความค านงถงนาทของแตละสภาวะลงคตามปรกตควรจะมสทเดนชดใหรวาสามารเชอมโยงไปทอนได จงควรใชสทเดนมองเหนไดชดขณะทสของลงคขณะทคลกนนมไวเพอตอบสนองวาก าลงถกคลกอย จงควรท าใหมสสนทชดเจนเชนกนแตตองตางจากสของลงคปกตพอสมควรสวนลงคทผานการคลกไปแลวมหนาทเตอนใหเรารวาไดคลกเขาไปแลวจะไดไมตองคลกซ าอกจงควรใชสทแตกตางไมจ าเปนตองใชสทเดนชดแตอยางใด สกบการพมพเวบเพจ ถาคณตงใจใหผใชพมพขอมลจากเวบแลวควรจะออกแบบใหมลกษณะพเศษทเหมาะสมกบการพมพ เชนการใชตวอกษรสเขมบนพนหลงสออนมผออกแบบจ านวนมากทใชพนหลงเปนสเขมกบตวอกษรสขาวโดยอาจลมคดไปวาปกตแลวสพนหลงจะไมถกพมพออกมาดวยคอกลายเปนสขาวไป ท าใหไมสามารถพมพตวอกษรสขาวบนพนขาวได หรอถามการก าหนดใหพมพสพนหลงออกมาดวยกจะเปนการสนเปลองหนกพมพอยางไมสมควรนก

39

ระบบงานทเกยวของ

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

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

นายเอกสทธ การสาล ,นายเกยรตพฒชย ชมทรวง และนายวฒชย จตตสงห (2561) โครงการเวบไซตพนธไมสงวนทควรอนรกษ ไดจดท าขนเพอใหตระหนกถงความส าคญของพนธไมอนรกษเพอใหรจกการอนรกษสงแวดลอมอยางถกวธ 2.4 การน าระบบคอมพวเตอรในการใชงาน

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

41

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

3.1 การออกแบบ Sitemap

รปท 3.1 แสดงขอมล Sitemap

- พพธภณฑสตวน ำชรำอม - เกำะภเขำไฟซำกระจมะ - เทอกภเขำไฟอะโซะ - พพธภณฑระเบดปรมำณนำงำซำก - เกำะรำงฮำชมะ - หำด Sunayama beach เกำะ Miyakojima, Okinawa - ชองเขำทำคำชโฮ -8 บอนรก จโกก

ควช

1

Index

ภมภำค

Home

50 สถำนททองเทยว

ผจดท ำ

41

42

รปท 3.1 แสดงขอมล Sitemap (ตอ)

1

ฮอกไกโด

- ปอมดำวหำแฉก โงเรยวกำค - ดอกลำเวนเดอรท ฟำรมโทมตะ - งำน snow and ice festival sapporo - ลำนสก

โทโฮค

- Snow monster และสกรสอรท Mount Zao

- สวนรมทะเลฮตำช ซไซด ปำรค - หำแยกชบยำ และยำนชนจก - วดเซนโซจ หรอ วดอำสำกซะ -โตเกยว ดสนยแลนด - ยำนฮำรำจก - ยำนมนำโตะ มเรอ - สวนชนจกเงยวเอน - โอเอะโดะออนเซน - โซนมรดกโลก เมองนกโก - ศำลเจำเมจ จงก

คนโต

2

ภมภำค 50 สถำนททองเทยว

ผจดท ำ

Home

Index

43


2

มะ แหงเกำะมยำจมะ 2.เนนทรำยตอตโตร

- หมบำนหลงคำโบรำณชรำคำวะโกะ - ทะเลสำบคำวำกชโกะ - ปรำสำทมตสโมโตะ - ชมดอกซำกระแหงแรกของญป น - ก ำแพงหมะทำเทยำมำ คโรเบะ - สวนเคนโรคเอน - สวนลงจโกคดำน - ภเขำไฟฟจ - ลำนสกยซำวะ

ชบ

จโงข

- ศำลเจำกลำงทะเล อสกช มะ แหงเกำะมยำจมะ - เนนทรำยตอตโตร

3

Index

ภมภำค

Home

50 สถำนททองเทยว

ผจดท ำ

44


- ศำลเจำจงจอกแดง - วดคนคะคจหรอวดทอง - ปรำสำทฮเมจ - วดคโยะมซ หรอวดน ำใส - ยำนโดทงโบร - เมองชนบท อำรำชยำมำ - สวนสนกยนเวอแซล สตดโอ - วดซนจซนเกนโด - ปรำสำทนโจ - คบเนะ - วดโทไดจ - ตลำดนชก - สวนกวำงนำรำ - พพธภณทสตวน ำ โอซำกำ - เทศกำลแสงส

คนไซ

3

4

ภมภำค 50 สถำนททองเทยว

ผจดท ำ

Home

Index

45

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

รปท 3.2 หนำindex

รปท 3.3 สถำนททองเทยวแนะน ำ

46

รปท 3.4 50สถำนททองเทยว

รปท 3.5 ภมภำค

47

รปท 3.6 ผจดท ำ

รปท 3.7 โทโฮค

48

รปท 3.8 ชบ

รปท 3.9 คนไซ

49

รปท 3.10 จโงข

รปท 3.11 ควช

50

รปท 3.12 คนโต

รปท 3.13 ฮอกไกโด

51

รปท 3.14 ปรำสำทฮเมจ

รปท 3.15 หมบำนหลงคำโบรำณ ชรำคำวะโกะ

52

รปท 3.16 ทะเลสำบคำวำกชโกะ

รปท 3.17 ปรำสำทมตสโมโตะ

53

รปท 3.18 ศำลเจำกลำงทะเล อสกชมะ แหงเกำะมยำจมะ

รปท 3.19 วดคโยะมซ หรอวดน ำใส

54

รปท 3.20 สวนรมทะเลฮตำช ซไซด ปำรค

รปท 3.21 Snow monster และสกรสอรท Mount Zao

55

รปท 3.22 ชมดอกซำกระแหงแรกของญป น ทคำวำซ

รปท 3.23 หำแยกชบยำ และยำนชนจก

56

รปท 3.24 ยำนโดทงโบร

รปท 3.25 วดเซนโซจ หรอ วดอำสำก

57

รปท 3.26 โตเกยว ดสนยแลนด

รปท 3.27 พพธภณฑสตวน ำชรำอม

58

รปท 3.28 ก ำแพงหมะทำเทยำมำ คโรเบะ

รปท 3.29 ทงดอกลำเวนเดอรท ฟำรมโทมตะ

59

รปท 3.30 สวนเคนโรคเอน

รปท 3.31 สวนลงจโกคดำน

60

รปท 3.32 ภเขำไฟฟจ

รปท 3.33 เกำะภเขำไฟซำกระจมะ

61

รปท 3.34 เมองชนบท อำรำชยำมำ

รปท 3.35 เทอกภเขำไฟอะโซะ

62

รปท 3.36 สวนและพพธภณทสนตภำพฮโรชมำ

รปท 3.37 ยำนฮำรำจก

63

รปท 3.38 ลำนสกยซำวะ

รปท 3.39 ยำนมนำโตะ มเรอ

64

รปท 3.40 ปอมดำวหำแฉก โงเรยวกำค

รปท 3.41 สวนสนกยนเวอแซล สตดโอ

65

รปท 3.42 ศำลเจำเมจ จงก

รปท 3.43 วดซนจซนเกนโด

66

รปท 3.44 พพธภณฑระเบดปรมำณนำงำซำก

รปท 3.45 ปรำสำทนโจ

67

รปท 3.46 คบเนะ

รปท 3.47 วดโทไดจ

68

รปท 3.48 ตลำดนชก

รปท 3.49 สวนชนจกเงยวเอน

69

รปท 3.50 เกำะรำงฮำชมะ

รปท 3.51 สวนกวำงนำรำ

70

รปท 3.52 พพธภณทสตวน ำโอซำกำ

รปท 3.53 เทศกำลแสงส

71

รปท 3.54 ลำนสก

รปท 3.55 เนนทรำยตอตโตร

72

รปท 3.56 งำน snow and ice festival sapporo

รปท 3.57 หำด Sunayama beach เกำะ Miyakojima, Okinawa

73

รปท 3.58 ชองเขำทำคำชโฮ

รปท 3.59 โอเอะโดะออนเซน

74

รปท 3.60 โซนมรดกโลก เมองนกโก

รปท 3.61 เกโระ ออนเซน

75

รปท 3.62 ศำลเจำจงจอกแดง

รปท 3.63 วดคนคะคจหรอวดทอง

76

3.3 การออกแบบสงน าเขา (Input Design) 1. หนำแรก 2. 50 สถำนททองเทยว

-ศำลเจำจงจอกแดง -วดคนคะคจหรอวดทอง -ปรำสำทฮเมจ -หมบำนหลงคำโบรำณ ชรำคำวะโกะ -ทะเลสำบคำวำกชโกะ -ปรำสำทมตสโมโตะ -ศำลเจำกลำงทะเล อสกชมะ แหงเกำะมยำจมะ -วดคโยะมซ หรอวดน ำใส -สวนรมทะเลฮตำช ซไซด ปำรค -Snow monster และสกรสอรท Mount Zao -ชมดอกซำกระแหงแรกของญป น ทคำวำซ -หำแยกชบยำ และยำนชนจก -ยำนโดทงโบร -วดเซนโซจ หรอ วดอำสำก -โตเกยว ดสนยแลนด -พพธภณฑสตวน ำชรำอม -ก ำแพงหมะทำเทยำมำ คโรเบะ -ทงดอกลำเวนเดอรท ฟำรมโทมตะ -สวนเคนโรคเอน -สวนลงจโกคดำน -ภเขำไฟฟจ -เกำะภเขำไฟซำกระจมะ -เมองชนบท อำรำชยำมำ -เทอกภเขำไฟอะโซะ -สวนและพพธภณทสนตภำพฮโรชมำ -ยำนฮำรำจก -ลำนสกยซำวะ -ยำนมนำโตะ มเรอ -ปอมดำวหำแฉก โงเรยวกำค

77

-สวนสนกยนเวอแซล สตดโอ -ศำลเจำเมจ จงก -วดซนจซนเกนโด -พพธภณฑระเบดปรมำณนำงำซำก -ปรำสำทนโจ -คบเนะ -วดโทไดจ -ตลำดนชก -สวนชนจกเงยวเอน -เกำะรำงฮำชมะ -สวนกวำงนำรำ -พพธภณทสตวน ำโอซำกำ -เทศกำลแสงส -ลำนสก -เนนทรำยตอตโตร -งำน snow and ice festival sapporo -หำด Sunayama beach เกำะ Miyakojima, Okinawa -ชองเขำทำคำชโฮ -โอเอะโดะออนเซน -โซนมรดกโลก เมองนกโก -บอนรก จโกก

3. ภมภำค -ภมภำคฮอกไกโด

-ภมภำคโทโฮค -ภมภำคคนโต

-ภมภำคชบ -ภมภำคคนไซ -ภมภำคจโงข -ภมภำคควช

4. ผจดท ำ 3.4 การออกสงน าออก (Output Design)

78

1. เครองคอมพวเตอรสำมำรถพมพเนอหำขอมลได 2. สำมำรถแสดงผลทำงโปรเจคเตอรไดเพอน ำไปเสนอเวบไซต 3. น ำเสนอเวบไซตออกมำทำงหนำจอคอมพวเตอรเพอเปนเวบไซตทสมบรณ

79

บทท 4

การพฒนาระบบเวบไซตโครงการ 50 สดยอดสถานททองเทยวของญปน

4.1 เครองมอและอปกรณทใช 1. AMD Ryzen 5 2600 3.4GHz 2. NVIDIA ASUS ROG Strix gaming RTX2060s 3. HDD 1 TB HDD WD Blue 4. Board (AM4) ASROCK B450M STEEL LEGEND 5. 500 GB SSD M.2 WD Green 6. Mouse Logitech G502 7. Keyboard Signo kb-758 vandoff 8. Monitor 24.5'' ACER KG251QFbmidpx144Hz 9. Kingston Hyperx RGB 16GB

4.2 โปรแกรมทงหมดทใชพฒนา 1. โปรแกรม Adobe Dreamweaver CC ใชในการท าเวบไซต 2. โปรแกรมAdobe Photoshop CC ใชในการตกแตงรปภาพ 3. โปรแกรม Adobe Animate CC ใชในการเชอมตอฐานขอมล 4. โปรแกรม Microsoft Office Word 2016 ใชในการท าเอกสาร

5. โปรแกรม Microsoft Office PowerPoint 2016 ใชในการท างานน าเสนอ

80

4.3 วธการตดตงโปรแกรม

รปท 4.1 เปดfile adobe Dreamweaver cc 2019 แลวเขาfile setup

รปท 4.2 กดตวตดตง Set-up

79

81

รปท 4.3 รอโปรแกรมตดตงเสรจ

รปท 4.3 จากนนใหยอนกลบไปแลวเขาfile Crackจากนนใหcopy Dreamweaver

82

รปท 4.4 เปดfile Dreamweaver ทตดตงแลวแลวน า DreamweaverทCopyมาวางทบไดเลย

4.4 วธการใชงาน

รปท 4.5 เขาไปทไดรฟD

83

รปท 4.6 กดเปดfile Project-50 places to visit in Japan ขนมา

รปท 4.7 แลวเปหนา index

84

รปท 4.8 แสดงหนาจอรปท 1 หนาindex

รปท 4.9 แสดงหนาจอรปท 2 หนาแรก

85

รปท 4.10 แสดงหนาจอรปท 3 50สถานททองเทยว

รปท 4.11 แสดงหนาจอรปท 4 ภมภาค

86

รปท 4.12 แสดงหนาจอรปท 5 ผจดท า

รปท 4.13 แสดงหนาจอรปท 6 ศาลเจาจงจอกแดง

87

รปท 4.14 แสดงหนาจอรปท 7 วดคนคะคจหรอวดทอง

รปท 4.15 แสดงหนาจอรปท 8 ปราสาทฮเมจ

88

รปท 4.16 แสดงหนาจอรปท 9 หมบานหลงคาโบราณ ชราคาวะโกะ

รปท 4.17 แสดงหนาจอรปท 10 ทะเลสาบคาวากชโกะ

89

รปท 4.18 แสดงหนาจอรปท 11 ปราสาทมตสโมโตะ

รปท 4.19 แสดงหนาจอรปท 12 ศาลเจากลางทะเล อสกชมะ แหงเกาะมยาจมะ

90

รปท 4.20 แสดงหนาจอรปท 13 วดคโยะมซ หรอวดน าใส

รปท 4.21 แสดงหนาจอรปท 14 สวนรมทะเลฮตาช ซไซด ปารค

91

รปท 4.22 แสดงหนาจอรปท 15 Snow monster และสกรสอรท Mount Zao

รปท 4.23 แสดงหนาจอรปท 16 ชมดอกซากระแหงแรกของญป น ทคาวาซ

92

รปท 4.24 แสดงหนาจอรปท 17 หาแยกชบยา และยานชนจก

รปท 4.25 แสดงหนาจอรปท 18 ยานโดทงโบร

93

รปท 4.26 แสดงหนาจอรปท 19 วดเซนโซจ หรอ วดอาสาก

รปท 4.27 แสดงหนาจอรปท 20 โตเกยว ดสนยแลนด

94

รปท 4.28 แสดงหนาจอรปท 21 พพธภณฑสตวน าชราอม

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

95

รปท 4.30 แสดงหนาจอรปท 23 ทงดอกลาเวนเดอรท ฟารมโทมตะ

รปท 4.31 แสดงหนาจอรปท 24 สวนเคนโรคเอน

96

รปท 4.32 แสดงหนาจอรปท 25 สวนลงจโกคดาน

รปท 4.33 แสดงหนาจอรปท 26 ภเขาไฟฟจ

97

รปท 4.34 แสดงหนาจอรปท 27 เกาะภเขาไฟซากระจมะ

รปท 4.35 แสดงหนาจอรปท 28 เมองชนบท อาราชยามา

98

รปท 4.36 แสดงหนาจอรปท 29 เทอกภเขาไฟอะโซะ

รปท 4.37 แสดงหนาจอรปท 30 สวนและพพธภณทสนตภาพฮโรชมา

99

รปท 4.38 แสดงหนาจอรปท 31 ยานฮาราจก

รปท 4.39 แสดงหนาจอรปท 32 ลานสกยซาวะ

100

รปท 4.40 แสดงหนาจอรปท 33 ยานมนาโตะ มเรอ

รปท 4.41 แสดงหนาจอรปท 34 ปอมดาวหาแฉก โงเรยวกาค

101

รปท 4.42 แสดงหนาจอรปท 35 สวนสนกยนเวอแซล สตดโอ

รปท 4.43 แสดงหนาจอรปท 36 ศาลเจาเมจ จงก

102

รปท 4.44 แสดงหนาจอรปท 37 วดซนจซนเกนโด

รปท 4.45 แสดงหนาจอรปท 38 พพธภณฑระเบดปรมาณนางาซาก

103

รปท 4.46 แสดงหนาจอรปท 39 ปราสาทนโจ

รปท 4.47 แสดงหนาจอรปท 40 คบเนะ

104

รปท 4.48 แสดงหนาจอรปท 41 วดโทไดจ

รปท 4.49 แสดงหนาจอรปท 42 ตลาดนชก

105

รปท 4.50 แสดงหนาจอรปท 43 สวนชนจกเงยวเอน

รปท 4.51 แสดงหนาจอรปท 44 เกาะรางฮาชมะ

106

รปท 4.52 แสดงหนาจอรปท 45 สวนกวางนารา

รปท 4.53 แสดงหนาจอรปท 46 พพธภณทสตวน าโอซากา

107

รปท 4.54 แสดงหนาจอรปท 47 เทศกาลแสงส

รปท 4.55 แสดงหนาจอรปท 48 ลานสก

108

รปท 4.56 แสดงหนาจอรปท 49 เนนทรายตอตโตร

รปท 4.57 แสดงหนาจอรปท 50 งาน snow and ice festival sapporo

109

รปท 4.58 แสดงหนาจอรปท 51 หาด Sunayama beach เกาะ Miyakojima, Okinawa

รปท 4.59 แสดงหนาจอรปท 52 ชองเขาทาคาชโฮ

110

รปท 4.60 แสดงหนาจอรปท 53 โอเอะโดะออนเซน

รปท 4.61 แสดงหนาจอรปท 54 โซนมรดกโลก เมองนกโก

111

รปท 4.62 แสดงหนาจอรปท 55 บอนรก จโกก

รปท 4.63 แสดงหนาจอรปท 56 ภมภาคฮอกไกโด

112

รปท 4.64 แสดงหนาจอรปท 57 ภมภาคโทโฮค

รปท 4.65 แสดงหนาจอรปท 58 ภมภาคคนโต

113

รปท 4.66 แสดงหนาจอรปท 59 ภมภาคชบ

รปท 4.67 แสดงหนาจอรปท 60 ภมภาคคนไซ

114

รปท 4.68 แสดงหนาจอรปท 61 ภมภาคจโงข

รปท 4.69 แสดงหนาจอรปท 62 ภมภาคควช

115

บทท 5

สรปผลการท าโครงการ 5.1 สรปผลโครงการ

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

ท ชอไฟล ขนาดของไฟล หมายเหต 1 1Fushimi Inari Shrine 9 KB ศาลเจาจงจอกแดง 2 2Kinkakuji 9 KB วดคนคะคจหรอวดทอง 3 3Himeji Castle 9 KB ปราสาทฮเมจ 4 4Shirakawa-go 9 KB หมบานหลงคาโบราณ 5 5Lake Kawaguchiko 9 KB ทะเลสาบคาวากชโกะ 6 6Matsumoto Castle 9 KB ปราสาทมตสโมโตะ 7 7Miyajima Itsukushima 9 KB ศาลเจากลางทะเล อสกชมะ 8 8Kiyomizu-dera 9 KB วดคโยะมซ หรอวดน าใส 9 9Hitachi Seaside Park 9 KB สวนรมทะเลฮตาช

10 10Snow monster 9 KB สกรสอรท Mount Zao 11 11Kawazu 9 KB ชมดอกซากระแหงแรกของญปน 12 12Shinjuku 9 KB หาแยกชบยา 13 13Dotonbori 9 KB ยานโดทงโบร 14 14Sensoji-Temple 9 KB วดเซนโซจ

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

116

ท ชอไฟล ขนาดของไฟล หมายเหต 15 15Tokyo Disneyland 9 KB โตเกยว ดสนยแลนด 16 16Churaumi Aquarium 9 KB พพธภณฑสตวน าชราอม 17 17Tateyama Kurobe Alpine 9 KB ก าแพงหมะทาเทยามา 18 18Tomita Farm 9 KB ทงดอกลาเวนเดอรท ฟารมโทมตะ 19 19Kenrokuen Garden 9 KB สวนเคนโรคเอน 20 20Jigokudani Yaen Park 9 KB สวนลงจโกคดาน 21 21Shizuoka-Yamanashi 9 KB ภเขาไฟฟจ Mt. Fuji 22 22Sakurajima 9 KB เกาะภเขาไฟซากระจมะ 23 23Arashiyama 9 KB เมองชนบท อาราชยามา 24 24Aso Mountain 9 KB เทอกภเขาไฟอะโซะ 25 25Hiroshima Peace Park 9 KB สวนและพพธภณทสนตภาพ 26 26Harajuku 9 KB ยานฮาราจก 27 27Yuzawa 9 KB ลานสกยซาวะ Yuzawa 28 28Minato Mirai 9 KB ยานมนาโตะ มเรอ 29 29Fort Goryokaku 9 KB ปอมดาวหาแฉก โงเรยวกาค 30 30Universal Studio Japan 9 KB สวนสนกยนเวอแซล สตดโอ 31 31Meiji-jingu Shrine 9 KB ศาลเจาเมจ จงก 32 32Sanjusangendo Temple 9 KB วดซนจซนเกนโด 33 33Nagasaki Atomic Bomb 9 KB พพธภณฑระเบดปรมาณนางาซาก 34 34Nijo Castle 9 KB ปราสาทนโจ 35 35Kibune 9 KB คบเนะ 36 36Todaiji 9 KB วดโทไดจ 37 37Nishiki Market 9 KB ตลาดนชก 38 38Shinjuku Gyoen 9 KB สวนชนจกเงยวเอน 39 39Hashima Island 9 KB เกาะรางฮาชมะ 40 40Nara Park 9 KB สวนกวางนารา 41 41Kaiyukan Osaka 9 KB พพธภณทสตวน า โอซากา 42 42 Nabana no Sato Winter 9 KB เทศกาลแสงส

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

117

ท ชอไฟล ขนาดของไฟล หมายเหต 43 43Niseki 9 KB ลานสก 44 44Tottori Sand Dunes 9 KB เนนทรายตอตโตร 45 45snow and ice festival 9 KB งาน snow and ice festival sapporo 46 46Sunayama beach 9 KB หาด Sunayama beach 47 47Takachiho-kyo 9 KB ชองเขาทาคาชโฮ 48 48Ooedo Onsen 9 KB โอเอะโดะออนเซน 49 49 nego 9 KB โซนมรดกโลก เมองนกโก 50 50Jigoku Meguri Beppu 9 KB 8 บอนรก จโกก 51 Chubu 24 KB ภมภาคชบ 52 Chugoku 14 KB ภมภาคจโงข 53 Hokkaido 15 KB ภมภาคฮอกไกโด 54 HOME 13 KB หนาหลกของเวบไซต 55 index 1 KB หนาแรกของเวบไซต 56 Kansai 31 KB ภมภาคคนไซ 57 Kanto 25 KB ภมภาคคนโต 58 Kyushu 21 KB ภมภาคควซ 59 Place 27 KB 50 สภานททองเทยว 60 Provider 9 KB ผจดท า 61 Region 11 KB ภมภาค 62 Tohoku 10 KB ภมภาคโทโฮค

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

118

5.1.2 สรปขอผดพลาดทมตอการออกแบบระบบงาน 1. สญลกษณ Logo ไมตรงกบทรปแบบตอนแรก มการเปลยนแปลงรปทรง เพอใหสวยงามมากขน

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

5.1.3 สรปขอผดพลาดทมในโปรแกรม 1. Logo มขนาดเลกเกนไป

2. ขนาดหนาจอเวบมขนาดใหญเกนไป 3. ตวอกษรในเวบไซต มขนาดเลกใหญไมเทากน

4. ปมตวอกษรบางตวมภาพและสทคลายคลงกบพนหลงโปรแกรม

5.2 ปญหาและอปสรรคในการด าเนนงาน 1. คอมพวเตอรมอาการหนวง ท าใหตองอพเกรดคอมพวเตอรใหม 2. โปรแกรม Adobe Photoshop ชาเลยท าใหตองตดตงโปรแกรมใหม 3. สมาชกในกลมมเวลาในการท างานไมตรงกน 4. การตดตอสอสารระหวางกลมไมตอเนองท าใหงานลาชาและผดแผนทวางไว

119

5.3 สรปการด าเนนงานจรง

รายการ ภาคเรยนท 1

มถนายน 62 กรกฎาคม 62 สงหาคม 62 กนยายน 62 ระยะเวลา

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

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


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

14 มถนายน 62


เสนอหวขอโครงการ รอบท 2 19 มถนายน 62 ประกาศผลหวขอโครงการ รอบท 2 21 มถนายน 62 ลงทะเบยนหวขอออนไลน เสนออาจารยทปรกษารวม




สอบน าเสนอโครงการ (รอบเอกสาร) 17 สงหาคม 62

ประกาศผลสอบ (รอบเอกสาร) 22 สงหาคม 62

สงความคบหนาโปรแกรม 50% 9-15 กนยายน 62 สงความคบหนาโปรแกรม 60% 16-22 กนยายน 62


รายการ ภาคเรยนท 2 พฤศจกายน 62 ธนวาคม 62 มกราคม 63 กมภาพนธ 63 ระยะเวลา

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 สงความคบหนา 90% 1-8 พฤศจกายน 62

สงความคบหนา 100% 9-13 พฤศจกายน 62

สอบน าเสนอโครงการ ระดบปวช.3 7 ธนวาคม 62

ประกาศผลสอบ (รอบโปรแกรม) 11 ธนวาคม 62



สงงบประมาณในการท าโครงการ(แบบออนไลน)

26-30 มกราคม 63

สงรปเลม ซด ช าระคาเขาเลม 1-20 กมภาพนธ 63

ตารางท 5.3 สรปเวลาการด าเนนงานจรง

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

120

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

ล าดบ รายการ จ านวน ราคา (บาท) 1. กระดาษ A4 2 รม 340 2. ซองน าตาล 1ซอง 20 3. สนปก 1อน 10 4. หมกปรนงาน 1ชด 1000 5. คารวมรปเลม 1ชด 250 รวมเปนเงน 1,620

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

บรรณนานกรม

ชะเอม ชกชวน. (2558). ฐานขอมล. คนหาขอมลวนท 10 ตลาคม 2562, จาก http://www.

satrinon.ac.th/emmy/lesson/lesson01/ls0101.html ชนกา แกวขวานอย. และคณะ. (2561). โครงการเวบไซตโครงการสถานททองเทยวภาคอสาน.

หลกสตรประกาศนยบตรวชาชพ สาขาวชาคอมพวเตอรธรกจ, วทยาลยเทคโนโลย อรรถวทยพณชยการ.

บรษท ซอฟทเมลท จ ากด, (2560). ทฤษฎส (Color Theory). ส าหรบงานออกแบบเวบไซต. คนหาขอมลวนท 10 ตลาคม 2562, จาก https://www.softmelt.com/article.php?id=365

ปงปง ทาลอน,(นามแฝง). (2562). สถานททองเทยวญปนทง50สถานท. คนหาขอมวนท 17 มถนายน 2562, จาก https://www.talonjapan.com/60-best-destinations-japan/?fbclid= IwAR0P-fmOiTs5ari4NW4KpHFALYViczaOFPS4noRIdwRlKNpsCZMplD5s6nM

พนจนทร ธนวฒนเสถยร. (2558). การสรางเวบไซตเบองตน. กรงเทพมหานคร : ซคเซส มเดย จ ากด.

พชย นาคเกด. และคณะ. (2561). โครงการเวบไซตพลศกษาเพอพฒนาบคลกภาพ. หลกสตรประกาศนยบตรวชาชพ สาขาวชาคอมพวเตอรธรกจ, วทยาลยเทคโนโลย

อรรถวทยพณชยการ. เอกสทธ การสาล และคณะ. (2561). โครงการเวบไซตพนธไมสงวนทควรอนรกษ.

หลกสตรประกาศนยบตรวชาชพ สาขาวชาตอมพวเตอรธรกจ, วทยาลยเทคโนโลย อรรถวทยพณชยการ.

ภาคผนวก - ใบเสนอขออนมตการท าโครงการระบบคอมพวเตอรธรกจ (ATC.01) - ใบอาจารยทปรกษารวม (ATC.02) - ใบขอสอบปองกนโครงการระบบคอมพวเตอรธรกจ (ATC.03) - รายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (AT.C.04) - ใบบนทกการเขาพบอาจารยทปรกษาโครงการ (AT.C.05) - ใบขออนญาตอาจารยทปรกษารวมจดท าเอกสาร(ATC.06)

134

ประวตผจดท ำ นายณฐธร ทวรฐนธยศ เกดเมอวนท 22 เมษายน 2544 ส าเรจการศกษาช นมธยมตอนตนจากโรงเรยน เทพศรนทรสมทรปราการ เมอปการศกษา 2560 จบการศกษาหลกสตรประกาศนยบตรวชาชพ (ปวช.) สาขาวชาคอมพวเตอรธรกจ ทวทยาลยเทคโนโลยอรรถวทยพณชยการปการศกษา 2562 ปจจบนอาศยท บานเลขท 307/18 ซ.อดมเดช7ขวา ต.บางเมองใหม อ.เมอง จ.สมทรปราการ 10270 เบอรโทรศพท 096-2944503 E-mail : [email protected] Line ID: lux254484 นายณฐชนน นาคศร เกดเมอวนท 5 มถนายน 2544 ส าเรจก าร ศ กษ าช น มธ ยมตอนตน จ าก โรง เร ยน เทพ ศ รนท รสมทรปราการ เมอปการศกษา 2560 จบการศกษาหลกสตรประกาศนยบตรวชาชพ (ปวช.) สาขาวชาคอมพวเตอรธรกจ ทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2562ปจจบนอาศยท บานเลขท 112/55 ภสสร ไพรด ต.บางแกว อ.บางพล จ.สมทรปราการ 10540 เบอรโทรศพท 099-1312492 E-mail : [email protected] Line ID: best นายวรตม พวงจนทร เกดเมอวนท 5 มถนายน 2544 ส าเรจการศกษาชนมธยมตอนตนจากโรงเรยนสตรสมทรปราการ เมอปการศกษา 2560 จบการศกษาหลกสตรประกาศนยบตรวชาชพ (ปวช.) สาขาวชาคอมพวเตอรธรกจ ทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2562 ปจจบนอาศยท บานเลขท 999/90 ปญฐญา ถ.พทธรกษา ต.แพรกษา อ.เมอง จ.สมทรปราการ 10280 เบอรโทรศพท 095-5538566 E-mail : [email protected] Line ID: 085am

ATC.01

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


วนท 19 เดอน มถนายน พ.ศ. 2562 เรอง ขอเสนออนมตท าโครงการระบบคอมพวเตอรธรกจ เรยน ประธานกรรมการพจารณาอนมตท าโครงการระบบคอมพวเตอรธรกจ ขาพเจา 1. นายณฐธร ทวรฐนธยศ รหสนกศกษา 39470 ระดบ ปวช. 3/8 2. นายณฐชนน นาคศร รหสนกศกษา 39479 ระดบ ปวช. 3/8 3. นายวรตม พวงจนทร รหสนกศกษา 39474 ระดบ ปวช. 3/8 มความประสงคท าโครงการระบบคอมพวเตอรธรกจ ประเภท เวบไซต ชอโครงการภาษาไทย 50 สดยอดสถานททองเทยวของญป น ชอโครงการภาษาองกฤษ 50 places to visit in Japan โดยม อาจารยทปรกษาหลก คอ อาจารยฐตรตน นยพฒน พรอมนไดแนบเอกสารประกอบการขอเสนอโครงการระบบคอมพวเตอร บทท 1 จ านวน 1 ชด จงเรยนมาเพอโปรดพจารณาอนมต

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

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

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

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

ATC.0201

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


วนท 25 เดอนมถนายน พ.ศ. 2562 เรอง ขอเรยนเชญอาจารยเปนทปรกษารวมโครงการ เรยน อาจารยดฐประพจน สวรรณศาสตร ขาพเจา 1. นายณฐธร ทวรฐนธยศ รหสนกศกษา 39470 ระดบ ปวช. 3/8 2. นายณฐชนน นาคศร รหสนกศกษา 39479 ระดบ ปวช. 3/8 3. นายวรตม พวงจนทร รหสนกศกษา 39474 ระดบ ปวช. 3/8 มความประสงคจะขอเรยนเชญ อาจารยสมาภรณ เยนด มาเปนทปรกษารวมโครงการของกลมขาพเจา ซงไดจดท าโครงการประเภท เวบไซต ชอ 50 สดยอดสถานททองเทยวของญป น ระดบปวช.3

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

(นายณฐธร ทวรฐนธยศ) (นายณฐชนน นาคศร)

ลายมอชอ................................................นกศกษา (นายวรตม พวงจนทร)

ลายมอชอ................................................อาจารยทปรกษารวม (อาจารยสมาภรณ เยนด)

ATC.03

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


วนท 7 เดอนธนวาคม พ.ศ. 2562 เรอง ขอสอบโครงการระบบคอมพวเตอรธรกจ (ครงท 2) เรยน คณะกรรมการพจารณาการสอบปองกนโครงการระบบคอมพวเตอรธรกจ ขาพเจา 1. นายณฐธร ทวรฐนธยศ รหสนกศกษา 39470 ระดบ ปวช. 3/8 2. นายณฐชนน นาคศร รหสนกศกษา 39479 ระดบ ปวช. 3/8 3. นายวรตม พวงจนทร รหสนกศกษา 39474 ระดบ ปวช. 3/8 มความประสงคท าโครงการระบบคอมพวเตอรธรกจ ประเภท เวบไซต ชอภาษาไทย 50 สดยอดสถานททองเทยวของญป น ชอภาษาองกฤษ 50 places to visit in Japan โดยม อาจารยทปรกษาหลก คอ อาจารยฐตรตน นยพฒน อาจารยทปรกษารวม คอ อาจารยสมาภรณ เยนด พรอมนไดแนบเอกสารประกอบการขอสอบโครงการระบบคอมพวเตอร โปรแกรมระบบคอมพวเตอร (Software) จ านวน 1 ชด โครงการระบบคอมพวเตอรธรกจ (เอกสารบทท 1-3) จ านวน 1 ชด จงเรยนมาเพอโปรดพจารณาอนมต ------------------------------------------------------------------------------------------------------------------------------------- ลายมอชอ................................................นกศกษา ( นายณฐชนน นาคศร ) หวหนากลมโครงการ

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

โครงการ 50 สดยอดสถานททองเทยวของญป น 50 places to visit in Japan

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

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

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

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

ภาคเรยนท 2/2562 9 สงคบหนาโปรแกรมโครงการ 100% ....../....../......

10 สงเอกสาร และโปรแกรมโครงการ เพอการน าเสนอ โปรแกรมโครงการ

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

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

ATC.05

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

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

ขาพเจา 1. นายณฐธร ทวรฐนธยศ รหสนกศกษา 39470 ระดบ ปวช. 3/8 2. นายณฐชนน นาคศร รหสนกศกษา 39479 ระดบ ปวช. 3/8 3. นายวรตม พวงจนทร รหสนกศกษา 39474 ระดบ ปวช. 3/8 โครงการประเภท เวบไซต เรอง 50 สดยอดสถานททองเทยวของญป น อาจารยทปรกษาหลก อาจารยฐตรตน นยพฒน อาจารยทปรกษารวม อาจารยสมาภรณ เยนด

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

ATC.05





ATC.05





ATC.05





ATC.05





ATC.0601

ขออนญาตอาจารยทปรกษารวมจดท าเอกสาร


วนท 17 เดอน มกราคม พ.ศ. 2563 เรอง ขออนญาตอาจารยทปรกษารวมจดท าเอกสารบทท 4-5 เรยน อาจารยสมาภรณ เยนด ขาพเจา 1. นายณฐธร ทวรฐนธยศ รหสนกศกษา 39470 ระดบ ปวช. 3/8 2. นายณฐชนน นาคศร รหสนกศกษา 39479 ระดบ ปวช. 3/8 3. นายวรตม พวงจนทร รหสนกศกษา 39474 ระดบ ปวช. 3/8

มความประสงคจะขออนญาตจดท าเอกเอกสารบทท 4 และบทท 5 เนองจากไดจดท าโปรแกรมเสรจ สมบรณตามวตถประสงคเรยบรอยแลว จงเรยนมาเพอโปรดพจารณาอนมต ลายมอชอ................................................นกศกษา ลายมอชอ................................................นกศกษา (นายณฐธร ทวรฐนธยศ) (นายณฐชนน นาคศร)

ลายมอชอ................................................นกศกษา (นายวรตม พวงจนทร)

ลายมอชอ................................................อาจารยทปรกษารวม (อาจารยสมาภรณ เยนด)

50 places to visit in Japan

Documents