ตัวอย่าง 027 โครงการ wesite เหนือ เหนือ yummy...

1

Modern Merit Professional : วชาการทนสมย ใฝใจคณธรรม นอมน าปฏบตการ

เหนอ เหนอ Yummy (เวบไซด)

North North yummy (Website)

รหสประจ าตว 0021243 นางสาวกมลชนก คงอย

รหสประจ าตว 0021329 นางสาวจนจรา ดวนล

รหสประจ าตว 0021374 นางสาวอจฉราพรรณ แซลม

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

คณะอตสาหกรรมการบรการ สาขาการโรงแรม

วทยาลยเทคโนโลยสยามธรกจ ในพระอปถมภ

สมเดจพระเจาภคนเธอเจาฟาเพชรรตนราชสดา สรโสภาพณณวด

ภาคเรยนท 1 ปการศกษา 2556

2


เหนอ เหนอ Yummy (เวบไซด)

North North yummy (Website)

รหสประจ าตว 0021243 นางสาวกมลชนก คงอย

รหสประจ าตว 0021329 นางสาวจนจรา ดวนล

รหสประจ าตว 0021374 นางสาวอจฉราพรรณ แซลม

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

คณะอตสาหกรรมการบรการ สาขาการโรงแรม

วทยาลยเทคโนโลยสยามธรกจ ในพระอปถมภ

สมเดจพระเจาภคนเธอเจาฟาเพชรรตนราชสดา สรโสภาพณณวด

ภาคเรยนท 1 ปการศกษา 2556

3


ใบรบรองโครงการ

วทยาลยสยามธรกจ ในพระอปถมภฯ

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

2.นางสาวจนจรา ดวนล เลขประตว 0021329 3.นางสาวอจฉราพรรณ แซลม เลขประตว 0021374 ไดรบอนมตใหนบเปนสวนหนงของการศกษาตามหลกสตรประกาศนยบตรวชาชพ

คณะอตสาหกรรมการโรงแรม สาขาการโรงแรม

______________________________ ______________________________ (อาจารยจ ารส รสมย) (อาจารยธนศกด ตงทองจตร)

อาจารยประจ ารายวชา หวหนาคณะอตสาหกรรมการโรงแรม คณะกรรมการบรหารวทยาลย ______________________________ ________________________________

( อาจารยสชาต เกตกล) (อาจารยปญจพร เออจงประสทธ) รองผอ านวยการฝายวชาการ ผอ านวยการ

____________________________________ (ผชวยศาสตรจารย ดร.ผจญ ขนธะชวนะ)

ประธานกรรมการบรหารวทยาลย วนท………เดอน…..………….พ.ศ………

4


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

โครงการเหนอ เหนอ YUMMY เวบไซด เกดขนไดดวยความอปการะทางดานตางๆ ทง

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

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

ปรกษาใหในตลอดระยะเวลาการด าเนนโครงการ

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

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

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

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

ส าเรจไดดวยด

คณะผจดท า

19 กนยายน 2556

5


ชอ 1.นางสาวกมลชนก คงอย 2.นางสาวจนจรา ดวนล 3.นางสาวอจฉราพรรณ แซลม

ชอเรอง : เรองเหนอ เหนอ YUMMY เวบไซด สาขาวชา : การโรงแรม คณะวชา : อตสาหกรรมการบรการ ทปรกษา : อาจารยจ ารส รสมย ปการศกษา : 2556 บรณาการจากรายวชา : ครวและอปกรณงานครว, ภาษาองกฤษภาษาไทย,เทคโนโลยสารสนเทศ

บทคดยอ

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


_________________________________ _________________________________

( อาจารยสชาต เกตกล) (อาจารยปญจพร เออจงประสทธ) รองผอ านวยการฝายวชาการ ผอ านวยการ

__________________________________ (ผชวยศาสตรจารย ดร.ผจญ ขนธะชวนะ)

ประธานกรรมการบรหาร วนท………เดอน…..………….พ.ศ………

6


ค าน า โครงการเหนอ เหนอ YUMMY เวบไซดนจดท าขนเพอการเรยนรพฒนาองคความรจาก

การศกษาในสาขาวชาการโรงแรมคณะอตสาหกรรมบรการโดยน าความรในรายวชาตางๆน ามา

บรณาการโดย คณะผจดท า ไดด าเนนการท า โครงการเหนอ เหนอ YUMMY เวบไซด เนอหา

ภายในโครงการแสดงถงความเปนมาของโครงการ วตถประสงค เอกสารทเกยวของ วธด าเนนการ

การประเมน และการวเคราะหผลด าเนนการ

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

ประกาศนยบตรวชาชพ ปท 3 รวมทงเปนสวนสงเสรมใหนกศกษาไดน าความรจากการปฏบตงาน

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

ฝกการแกไขปญหา พฒนาความรบผดชอบตอหนาททไดรบมอบหมาย สงผลตอการน าความรทได

จากการปฏบตงานไปประยกตใชกบการท างานทดในอนาคต ซงการปฏบตงานทงหมดน อยในการ

ควบคมดแลของอาจารยทปรกษาโครงการ


7


สารบญ เรอง หนา กตตกรรมประกาศ 3 บทคดยอ 4 ค าน า 5 สารบญ 6 บทท 1 / บทน า 9

- ความเปนมาและความส าคญของปญหา 9 - วตถประสงคของโครงการ 9 - ขอบเขตการด าเนนโครงการ 9 - ค านยาม 10 - วธการด าเนนการ 10 - ประโยชนทคาดวาจะไดรบ 10

บทท 2 11 - การสรางเวบไซด 11 - โปรแกรม Dreamweaver 13 - โปรแกรม Photoshop CS6 37

บทท 3 54 - วธด าเนนการ 54 - วสด / อปกรณ 54 - ขนตอนการด าเนนงาน 55 - ขนตอนการสรางเวบไซด 60

- ผลสรปการทดลองจากการประเมนภายในกลม 74 - งบประมาณการด าเนน 75 - ผลสรปการทดลองจากการประเมนภายในกลม 76

บทท 4 77

- การส ารวจ และประเมนผล 77 - ตวอยางแบบประเมน 78

8


สารบญ (ตอ) เรอง หนา - ตวอยางแบบประเมน 78 - ตารางท 1 ตารางสรปความถของสถานะผตอบแบบสอบถาม 81 - ตารางท 2 ตารางสรปผลคะแนน 82 - ขอเสนอแนะ 82 - ตารางท 3 ตารางสรปผลความคดเหน 84 - สรปผลการประเมน 85

บทท 5 86 - สรปวเคราะหผลการด าเนนงาน 86 - วตถประสงคของการวจย 86 - ประชากรและกลมตวอยาง (ในการส ารวจ) 86 - เครองมอทใชในการวจย (ในการส ารวจ) 86 - ขอจ ากดของการวจย (ในการส ารวจ) 86 - ปญหาและอปสรรค 87 - แนวทางการแกไข 87 - วเคราะหผลการด าเนนการ 87 - แนวทางการพฒนาผลงาน 89

บรรณานกรม ภาคผนวก

ดชน ดชนรปภาพ 93

ดชน ดชนตาราง

ตารางท 1 99 ประวตผจดท า 100

9


บทท 1 บทน า

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

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

สรางเวบไซดอาหารประจ าภาคเหนอขนเพอใหเวบไซดทสรางขน มความนาสนใจและโดดเดนจากเวบไซดอน 4.ค านยาม เวบไซด (Web Site) คอ แหลงทเกบรวบรวมขอมลเอกสารและสอประสมตาง ๆ เชน ภาพ เสยง ขอความ ภาคเหนอ/เหนอ : บรเวณทอยทางเหนอของประเทศ YUMMY : เปนค าแสลง slang หมายถง : อรอย ค าทเกยวของ : รสเดด, รสเยยม

10


5.วธการด าเนนการ 6.ประโยชนทคาดวาจะไดรบ 6.1 สามารถน าความรทไดจากหาขอมลอาหารประจ าภาคเหนอไปใชไดในชวตประจ า 6.2 รจกการสรางเวบไซดใหมความนาสนใจมากยงขน 6.3 สามารถคนควาหาขอมลเพมเตมไดจากเวบไซดนแลวน าไปประยกตใชในการเขาสสมาคมอาเซยน 6.4 รจกวธการสรางเวบไซดโดยใชโปรแกรม Dream weaver cs6 มากยงขน 6.5 มการจดแจงและแบงงานในการชวยเหลอและรวมมอกนในการท างาน

11


บทท 2

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

ผจดท าไดรวบรวมขอมลเอกสารและงานวจยทเกยวของซงประกอบดวย 2.1 หนงสอการสรางเวบไซต 2.2 โปรแกรม Dreamweaver CS6 2.3 โปรแกรม Photoshop CS6 2.1 การสรางเวบไซด

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

การทเราจะสามารถใชงานเวบไซดให เกดประโยชนสงสดไดนน จ าเปนอยางยงทเราจะตองเขาใจถงลกษณะทวไปของเวบไซดและจ าแนกแยก แยะไดวาเวบไซดเหลานนมความแตกตางหรอเหมอนกนอยางไร รวมถงมหนาทหลกเฉพาะตวอยางใดบาง ทงน เพอใหเรามองเหนภาพรวมของเวบไซตไดดยงขน เราอาจแบงเวบไซตออกเปนกลมใหญ ๆ ได 8 ประเภท ตามลกษณะของเนอหาและรปแบบของเวบไซต ซงกลมเวบไซตทง 8 ประเภทนน ไดแก 1. เวบทา (Portal Site)

อาจเรยกอกชอหนงวา เวบวาไรต ซงหมายถงเวบทใหบรการตางๆ ไวมากมาย มกประกอบไปดวยบรการ เสรชเอนจน ทรวมลงคของเวบไซตทนาสนใจไวมากมายใหเราไดคนหา รวมถงบรการทเกยวกบเรองราวทมสาระและบนเทงหลากหลายประเภท ดหนงฟงเพลง ดดวง ทองเทยว ไอท เกม สขภาพ ฯลฯ 2. เวบขาว (News Site)

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

ตางๆ ของตนอยเปนหลก เชน สถานโทรทศน สถานวทย หนงสอพมพ นตยสาร วารสาร หรอ

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

12


3. เวบขอมล (Information Site)

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

4. เวบธรกจหรอการตลาด (Business/Marketing Site)

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

5. เวบการศกษา (Educational Site)

สวนใหญสรางขนโดยสถาบนการศกษาตางๆ หรอองคกรทงของภาครฐและเอกชนทมนโยบายในการเผยแพรความร และใหโอกาสในการคนควาหาขอมลเพอการศกษาแกนกเรยน นสต นกศกษา รวมถงประชาชนทวไป เวบการศกษาใหขอมลเกยวกบการเรยนรทเปนทางการและไมเปนทางการ บรการการเรยนรแบบออนไลน หรอทเรยกวา อเลรนนง (E-Learning) ตาง ๆ

6. เวบบนเทง (Entertainment Site)

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

7. เวบองคกรทไมแสวงหาผลก าไร (Non-profit Organization Site)

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

13


8. เวบสวนตว (Personal Site)

บางครงอาจเปนเวบของคนๆ เดยว เพอนฝง หรอครอบครวกได โดยอาจจะจดท าขนดวย

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

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

2.2 โปรแกรม Dreamweaver

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

ในกรณทเราตองการเขยน HTML เอง Dreamweaver กเปนเครองมอทอ านวยความสะดวก

ใหเราไดดมาก ไมเพยงแตการใชการกบ HTML เทานน Dreamweaver กรองรบภาษาตางมากมาย

เชน CFML, PHP, ASP, ASP.NET และอนอกมากมาย ชวยใหเราสามารถเขยน Code ไดงายขน

โปรแกรมจดการเวบไซตทด

14


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

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

ใหเหนวาหนาใด link ไปยงหนาใดบาง โดยเราสามารถยายหรอ เปลยนแปลง link ได โดยท

Dreamweaver จะท าการเขยน Code ใหเราใหมทนท ถอเปนเครองมอทดมาก เพราะความจรงแลว

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

15


ส าหรบคนทไมเคยท าเวบมากอนกสามารถใช Dreamweaver เพยงโปรแกรมเดยวเพอ

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

Dreamweaver กท าใหเรามความคลองตวขนเพราะตอนน Dreamweaver มเครองมอมากมายและ

ท างานเชอมตอกบโปรแกรมดงๆมากมายเชน Photoshop, Illustrator, Flash หรอแมแตกระทงการ

ใชในลกษณะ Dynamic webpage กพฒนาขนมาก จะเหนวาใน Dreamweaver CS3 นนมการใชงาน

ในสวนของ Ajax เพมมาอกดวยรวมถงการใชงาน CSS ทไดรบการพฒนาขนมาก นยงไมรวมถง

Template มากมายทชวยในการจดขอความ, หนาตาของเวบเพจ และเครองมออกมากมาย

ในบทความนคงท าใหมองภาพของ Dreamweaver วาเปนเครองมอทอ านวยความสะดวก

มากจรงๆ ถาลองใชดจะเหนไดวา Dreamweaver นนพฒนาไปมากจากเวอรชนแรกๆทออกมา และ

ชวยลดเวลาในการพฒนาเวบไซตลงไดมาก

16


เครองมอตางๆในโปรแกรม Dreamweaver

ส าหรบ Dreamweaver เปนโปรแกรมสรางโฮมเพจแบบเสมอนจรง โดยไมตอง เขยนภาษา

HTML เองหรอทศพทเทคนคเรยกวา "WYSIWYG" เราสามารถใชหนาจอเสมอนจรงของ

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

หนาตาของโปรแกรม Dreamweaver และชอเรยกเครองมอตางๆ

17


อธบายเครองมอตางๆ 1. Document window เปนสวนทใชการแสดงผลเวบเพจทก าลงสรางอย ซงแสดงผลไดทงแบบ Code และ แบบเสมอนจรงทแสดงผลบน web browser หรอจะแสดงควบคไปกได และใชในการท างานแกไขตวอกษร รปภาพตางๆในเวบเพจดวย โดยอาศยเครองมอตางๆ ทแสดงอยในรป ขอเสยของ Dreamweaver ยงไมอยบางคอ หนาจอทแสดงผลเสมอนจรง กบการแสดงผลจรงใน web browser อาจไมตรงกน ขนอยกบ web browser ทเราใชดวย 2.InsertBar

1 Common ในแถบนจะประกอบดวยเครองมอทใชงานบอยๆ เชน สรางตาราง , สรางลงค หรอใสรปในเวบเพจ 2. Layout ในแถบนจะเปนเครองมอทเกยวกบ การแสดงผลแบบตาราง และ frame ส าหรบใชสรางเวบเพจ แบบ layout 3.Forms ในแถบนประกอบดวยค าสงทใชในการสราง form เชน radio, check box เปนตน 4.Data เปนแถบทใสส าหรบ Dynamic เวบไซต ใชจดการกบระบบ data base จะใชมากในการพฒนา web application บนเวบไซต เชนการเขยนระบบ web board, ระบบสมาชก 5.Spry เปนแถบใหมของ Dreamweaver ทหลายคนจะตองชอบ เพราะเปนเครองมอทรวม javascript กบ HTML, CSS เขาดวยกน ท าใหเวบไซตมความนาสนใจ และมความสะดวกในการใชงานมากขน 6. Text ในนจะเปนเครองมอทใชจดการกบตวอกษรทงหมด เชนใสสญลกษณพเศษตางๆ 7. Favorites แถบอนนคณสามารถเพมเครองมอตางดวยตวเอง

18


3. Property inspector

เปนแถบเครองมอทจะเปลยนแปลงตามวตถทเราเลอกอยเชน ถาคลกทรป property

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

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

4.docking panels

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

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

การคลกทรปลกศรดานซายมอของ panels

19


5.menu

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

Insert bar, Property inspector, panels แตมบางค าสงทแสดงเฉพาะใน menu ดวย

6. Statusbar

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

น ขนานของ document window เครองมอยอ/ขยาย สวนทางขวาจะเปน Tag select ของ HTML จะ

แสดงค าสงของ HTML เราสามารถแกไขค าสงตางๆไดจากหนาตางน

7.DocumentToolbar

ทางซายมอสดจะเปนค าสง ใชเปลยนการแสดงผลของ document window อนแรกจะแสดงเฉพาะ

code อนตอมาจะแสดงทง code และ หนาออกแบบ อนสดทายจะแสดงหนาออกแบบเทานน และยง

มอ เค รองมอ ทใชก าหนด Title <title> </title> ของหนา เวบ เพจอกดวย

หนาตางตอไปทจะลมไมไดคอ Preference การเปดหนาตางนท าไดโดยคลกท Edit >Preferences

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

ก าหนด Site ขนตอนส าคญทสดของการท าเวบดวย Dreamweaver

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

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

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

มาแกไขได เครองมอตางๆของ Dreamweaver นนจะท างานโดยอางอง site ทเราก าหนดทงหมด

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

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

20


VDO ทอยในเวบไซต จะถกรวมอยใน Folder เดยวเราจะเรยก Folder นนวา local root folder

ขนตอนการก าหนด site

1.ไปท Menu เลอก Site > New site จะปรากฏหนาตางดงรปขางลางขนมา

2.ทแถบดานบนสดเลอก Advanced ถาเราเลอกทแถบ Basic จะเปนการก าหนดแบบอตโนมตซง

โปรแกรมจะถามเราไปทละขนตอน

3.แถวCategoryทางซายมอใหเลอก LocalInfo

4.ชอง Site name จะใสชออะไรลงไปกได เปนแคชออางองทใชในโปรแกรมเทานน เพราะ

ผใชงาน Dreamweaverอาจท าเวบไซตมากกวาจงตองตงชออางองเอาไว

5.ชอง Local root folder ใหเราคลกทรป folder สเหลองเพอเลอก folder ทใชในการเกบไฟล

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

จ ะ แ ก ไ ข ก ใ ห เ ล อ ก folder ท เ ก บ ไ ฟ ล ข อ ง เ ว บ น น ไ ด เ ล ย

21


6.ชอง Default image folder ใหเราระบสถานทเกบไฟลรปภาพของเวบไซต แนะน าวาใหเรา

สราง folder ชอ image เอาไวใน Local root folder เพอเกบไฟลรปทงหมดไวในนน

7.Links Relative to ใหเราเลอก Document เปนการก าหนดการเขยน link ในเวบไซตของเรา

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

8.Http address เปนชอเวบไซตของเรา เราอาจปลอยชองนวางไวกไดถายงไมมชอเวบ (URL)

9.Case-Sensitive Link ใหเลอกชองนดวย เพอก าหนดใหการเขยน link เขยนแบบ case sensitive

10.Enable Cache ใหเลอกชองน เพอก าหนดให Dreamweaver สรางหนวยความจ า

11.คลก ok แคนการก าหนด site ของเรากเสรจเรยบรอย ใหเราไปเปดดท panel ทางขวามอ ใน

หวขอ file จะเหนรายละเอยดของไฟลตางๆทเราสรางไว ดงรปดานลาง ในรปตงชอเวบวา ex1

และก าหนด Local root folder ชอ ex และ save ไวท C และสราง folder ชอ images ป

ถาเราตองการแกไข site กใหเลอกท site > manage site กจะท าการแกไขการก าหนดคาของ

site ได ถาเรามหลายไซดสามารถเลอกแกไขแตละไซดไดโดยคลกทปมทวงกลมสแดงไว จะ

แสดง site ทงหมดทเรามอย ใสขอความในเวบเพจดวย Dreamweaver cs6

22


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

โปรแกรมขนมาจะเหนวามหนาจอดงภาพ เราสรางเอกสารไดจากหนาจอนดงรป

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

เทานน นอกเหนอจากการใชหนาจอเรมตนเมอเปดโปรแกรมเรายงสามารถสรางเอกสารใหมได

23


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

ชอ เราอาจใชเครองหมาย underscore (_) หรอ hyphen (-) แทนการเวนวรรคได หนาหลกทจะตอง

ม ใน เวบไซต ค อหนา index.html หนา น เป รยบ เส มอนกบสารบญของ เ วบไซต

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

สามารถพมพเนอหาลงไปไดเลย ดงตวอยางพมพขอความวาทองเทยววดพระศรรตนศาสดาราม

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

ค าสง <h1>หวขอขนาดใหญมาก</h1> , <h2>หวขอขนาดเลกลงมา</h2> การใสหวขอใหกบเวบ

เพจนน เปนเรองทส าคญมาก แตหลายคนมกละเลยเรองน Search Engine หลายแหง เชน Google

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

<h1> 2.ไปท Property inspector จะมคณสมบตของตวอกษรใหเราเลอกใหเราดท Format จะม

รา ยก ารหวขอ ขนมาให เ ล อก ดง รป เ ป ล ยน font และขนาดตวอกษร

เราสามารถเปลยน font ทใชในการแสดงตวอกษรและขนาดของตวอกษรได โดย

1.เลอกอกษรทตองการเปลยน

2.ไปท Property inspector เลอก font จะมรายการแสดงชอ font มากมายใหเลอก

3.การปรบขนาดกไปท size แลวเลอกขนาดทเราตองการไดทนท

24


สามารถเปลยน font ในรายการทแสดงอยไดโดยคลกททายของรายการจะมหวขอ Edit font list

สามารถปรบเปลยนรายการได

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

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

เชน

ระบบปฏบตการ window จะม Tahoma

ระบบปฏบตการ linux จะม loma

การขนยอหนาใหม หรอเรมบรรทดใหม

ในการขนบรรทดใหมท าไดดงน

1.กด Enter เพอท าการขนบรรทดใหม ตวอกษรทเราพมพมาทงหมดจะอยใน <p> </p> โดย

อตโนมต

2.กด shift + enter จะท าการแทรก <br /> ใน code

ในสวนของการแสดงผล <p> </p> จะท าใหความหางของบรรทดมมากวาการใชค าสง <br>

เครองมออนทเกยวกบตวอกษร กมการใชงานเหมอนกบตวอยางขางบนทงหมด

ใสรปภาพในเวบเพจ (พนฐาน) Dreamweaver

25


จากบทความเรองการก าหนด site เราไดก าหนด local root folder ไวเพอเกบไฟลทงหมด และ

ก าหนด default images folder ส าหรบเกบไฟลรปไวดวย

** หมายเหต ** อยาลมวาไฟลรปทน ามาใชนนตองอยใน local root folder เทานน

การใสรปในเวบเพจนนท าไดหลายวธ ดงน

1.ลากรปลงไปใน document window ไดทนท โปรแกรมจะท าการ save รปไวใน default images

folder

2.ไปท file panel ดานขวามอแลวลากไฟลจากใน panel ไปท document window ไดเลย

3.คลกพนทใน document window ทคณตองการแทรกรปลงไป จากนนไปท Insert Bar หา icon ดง

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

ไมวาเราจะแทรกรปดวยวธไหนกตาม จะมหนาตางดงภาพดานลาง ส าหรบใส Alternate Text ซง

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

หรอส าหรบ ie จะแสดงเมอมเมาสไปอยเหนอ

26


เครองมอทใชปรบแตงภาพ

เมอเราคลกทภาพ ท Property inspector จะปรากฏตวเลอกทใชในการปรบแตงภาพ ดงรปดานลาง

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

ตวหนงสอ เทากบ 10 pixel

รายละเอยด Property inspector เมอเลอกทรป

1.Image Name (Name) ก าหนดชอใหกบรป ใชส าหรบเมอเราเขยน script อางองรป

2.W (Width) ก าหนดความยาวของรปทตองการใหแสดงผล โดยไมมผลกบไฟลรปเดม

3.H (Height) ก าหนดความสงของรปทตองการใหแสดงผล โดยไมมผลกบไฟลรปเดม

4.Src (Source) บอก folder ทใชเกบไฟลรปทเราเลอก

5.Link (Hyperlink) ใชก าหนด hyperlink ของรป

6.Alt (Alternate Text) ค าบรรยายรปจะปรากฏกตอเมอรปไมแสดงผล และน าเมาสไปอยเหนอรป

7.Edit ประกอบดวยเครองมอเหลาน เครองมอของ Dreamweaver จะท าการแกไขทไฟลรปโดยตรง

7.1 Fireworks แกไขรปดวย โปรแกรม Fireworks

7.2 Optimize แกไขขนาดไฟลของรป

27


7.3 Crop ใชตดรปใหไดขนาดทตองการ

7.4 Brightness and Contrast ปรบความสวางของรป

7.5 Sharpen ใชแกไขความคมชดของรป

8.V Space (Vertical Space) ก าหนดระยะหางระหวางรปกบวตถอน ในสวน บนและลางของรป

9.H Space (Horizontal Space) ก าหนดระยะหางระหวางรปกบวตถอน ในสวน ซายและขวาของรป

10.Low Src (Low Source) ในกรณทรปของเราไฟลใหญมากตองใชเวลาโหลดนาน เราอาจ

ก า ห น ด ใ ห ม ร ป ท ข น า ด เ ล ก ๆ ร ป อ น โ ห ล ด ข น ม า ก อ น โ ด ย ใ ช ต ว เ ล อ ก น

11.Border (ImageBorder)

12.Align (Alignment) ใ ช ก า หนดต า แห น ง ข อ ง ร ป เ ช น ช ดซ า ย ข ว า บน ล า ง

13.Class (CSS Setting) ถาเราเขยน CSS เอาไวตวเลอกนจะใชก าหนด CSS ทเราเขยนไว

14.Map (Map Name) ใชก าหนดชอใหกบ Map image จะกลาวถงในบทอน

15.Hot spot tool (Name) เปนเครองมอทใชรวมกบ Map Name จะกลาวถงในบทอน

16.Target (Name) ก าหนดตว เ ลอกของหนา ทจะเปด link จะกลาวถงในบทอน

หลายคนคงสงสยวา การเปลยนขนาดรปดวยการก าหนด W,H (width, height) ตางกบการใชค าสง

Edit

ถาเราก าหนดดวย W,H จะไมเปลยนขนาดของรปจรง แตจะมผลตอการแสดงผลใน browser

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

ค ว า ม ค ม ช ด ข อ ง ร ป แ ล ว อ า จ ท า ใ ห ส ด ส ว น ข อ ง ร ป ผ ด ไ ป ไ ด

การแกไขดวยค าสง Edit จะแกไขทไฟลรปโดยตรงท าใหการแสดงผลตรงตามทเราแกไข

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

"ใสภาพในเวบเพจ " จากเมนหวขอทางขวามอ

28


สราง Hyperlink Dreamweaver

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

เพอเชอมโยงไปยงไฟลตางๆทอยในเวบไซตกน

สรางลงคในเวบไซตเดยวกน

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

การสรางมขนตอนดงน

1.เปดหนาเอกสารทตองการสรางลงค ใน Dreamweaver

2.เลอกตวอกษร หรอรปภาพ ทตองการใหเปนลงค จากนนไปทสญลกษณตามภาพ

3.จะมหนาตางขนมาดงรป

3.1 ชอง Text คอค าทเราเลอกไวใหเปนลงค

3.2 ชอง link คอ ไฟลทเราตองการลงคไป โดยการคลกทรป folder สเหลองดานหลง ไฟลท

ลงคไปจะเปนเวบเพจ ไฟลรป หรอเปนไฟลอะไรกไดทอยใน local root folder

3.3 ชอง Target มรายละเอยดดงน

1.target='_blank' เปนค าสงใหเปด link ในหนาใหม

2.target='_parent' เปนค าสงใหเปด link ในหนาเดม (ถาไมเลอกจะเปนคานอตโนมต)

29


3.target='_self' เปนค าสงใหเปด link ใน frame ปจจบน

4.target='_top'เปนค าสงใหเปด link ทบหนาเดมทงหมด ซงจะปด frame ทงหมดเชนเดยวกน

(อานรายละเอยดในหวขอเรอง frame)

4.คลกโอเคกจะสรางลงคเรยบรอย

สรางลงคในหนาเดยวกน

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

link ภายในหนาเอาไว เพอใหสามารถหาเนอหาอานไดงายขน ถานกภาพไมออกกให

เปด wikipedia.org ดจะเหนวาม link ภายในเวบอยในหนาทเนอหาเยอะมากๆ

1.เปดหนาทเราตองการใหมลงคภายในหนาเดยวกน

2.เลอกจดทตองการใหลงคไป ไมจ าเปนตองใชตวหนงสอ หรอภาพ ใชแคจดในเวบเพจนน เชน

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

3.ไปท Insert > Named Anchor จะมหนาตางขนมากใหใสชอของจดลงค ชอทใสจะตองเปนชอท

ไมมการเวนวรรค เปนภาษาองกฤษ หามมจดตางๆ เราจะสรางจดลงคภายในหนากจดกไดแตหาม

ชอซ ากน

4.คลก OK จะมสญลกษณ แสดงในจดทเราเลอก ถาไปด Code จะเหนดงน <A NAME=?ชอ

ทตง?></A>

5.เลอกตวอกษร หรอรปภาพ ทตองการจะท าเปนลงค

6.ท Property inspector จะเหนวามสญลกษณ ใหลากไปยงจด กจะสรางลงคไดเรยบรอย

30


สรางลงคไปยงเวบไซตอน

1. เปดหนาทตองการสรางลงคขนมา

2. เลอกตวอกษร หรอรปภาพทตองการสรางลงค

3. ท Property inspector ใหใสชอเวบทตองการลงคไป เชน ในรปเลอกภาพเปนลงค

3.1. ชองลงคใส http://www.hellomyweb.

3.2. จากน นทชอง border ใหใสคา 0 เพอไมให มขอบรปเมอรปเปนลงค

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

ปรบแตงเวบเพจดวย Page Properties Page propertiese สามารถท าใหเราปรบแตงเวบเพจ

ของเราไดทงพนหลง, ชนดตวอกษร, รปแบบของ hyperlink และอนๆ อกมากทเราสามารถปรบได

ดวยเครองมอน

31


การใชงานเครองมอ Page Properties สามารถท าไดดงน

1.เปดเวบเพจทตองการปรบแตง

2.ไปท Menu เลอก Modify > Page Properties

3.จะมหนาตางขนมาดงรปดานลาง

ทดลองเปลยน พนหลง , ชนดของ font , สของตวอกษร , ระยะหางของวตถกบหนาเวบเพจ

1.เปดหนาเวบเพจทตองการปรบแตง



4.ท categoty ทางซายมอเลอก appearance จะมหนาจอใหปรบดงรป

32


1. Page font ใชปรบแตงชนดของ font ทแสดงผล ดานหลงจะมสญลกษณ B (ท าใหแสดงผลในหนานเปนตวหนาทงหมด) และ I (ท าใหแสดงผลในหนานเปนตวเอยงทงหมด) สามารถเลอกคลกได 2. Size ในชองนคอขนาดของตวอกษรทจะแสดงในเวบเพจ 3. Text color ใชก าหนดสของตวอกษรทจะแสดงในเวบเพจ โดยคลกทกลองสเหลยมจะมสใหเลอก 4. Background Color ใชก าหนดสพนหลงของเวบเพจ โดยคลกทกลองสเหลยมจะมสใหเลอก 5.Background image ใชก าหนดภาพพนหลงของเวบเพจ โดยคลกท Browse จะมหนาตางใหเลอกภาพทจะใชแสดงเปนพนหลง 6. Repeat ใชก าหนดการแสดงผลของภาพพนหลง โดยมค าสงดงน 6.1. No-repeat ใหแสดงผลภาพพนหลงเพยงครงเดยว 6.2. Repeat ใหแสดงผลภาพพนหลงซ ากนหลายๆครงจะเตมพนทเวบเพจ 6.3. Repeat-x ใหแสดงผลภาพพนหลงซ ากนเฉพาะในแนวนอนเทานน 6.4. Repeat-y ใหแสดงผลภาพพนหลงซ ากนเฉพาะในตงนอนเทานน 7. Margin เปนค าสงทใชก าหนดระยะหางของตวอกษร และภาพ กบเวบเพจ มรายละเอยดดงน 7.1 left margin ก าหนดใหวตถทกอยางหางจากขอบเวบเพจทางซายเปนระยะทเราก าหนด 7.2 right margin ก าหนดใหวตถทกอยางหางจากขอบเวบเพจทางขวาเปนระยะทเราก าหนด 7.3.top margin ก าหนดใหวตถทกอยางหางจากขอบเวบเพจดานบนเปนระยะทเราก าหนด 7.4.bottom margin ก าหนดใหวตถทกอยางหางจากขอบเวบเพจดานลางเปนระยะทเราก าหนด คลก ok เวบเพจกจะปรบหนาตามทเราไดตงไว

33


เปลยนสของตวอกษรทเปน Hyperlink

เราสามารถเปลยนส ขนาด การขดเสนใต ของตวอกษรทเปน Hyperlink ไดตามขนตอนดานลาง

1.เปดหนาเวบเพททตองการปรบแตง



4.ท categoty ทางซายมอเลอก link จะมหนาจอใหปรบดงรป

รายละเอยดตางๆของเครองมอมดงน

1. Link font เปน font ทจะใชแสดงตวอกษรทเปน hyperlink ดานหลงจะมสญลกษณ B

(ท าใหตวอกษรทเปน hyperlink เปนตวหนาทงหมด) และ I (ท าใหตวอกษรทเปน hyperlink

เปนตวเอยงทงหมด) สามารถเลอกคลกได

2. Size ปรบขนาดของตวอกษรทเปน hyperlink

3. การปรบสของ hyperlink เมออยในสถานะตางๆ มรายละเอยดดงน

3.1.Link Color เปนสทใชแสดง Hyperlink ทเรายงไมเคยคลกเปดด

3.2.Visited Links เปนสทใชแสดง Hyperlink ทเราเคยคลกเปดดแลว

34


3.3.Rollover Links เปนสทใชแสดง Hyperlink เมอมเมาสวางอยดานบน

3.4.Active Links: เปนสทใชแสดง Hyperlink เมอเราคลกท hyperlink

4.ปรบการขดเสนใตของ Hyperlink มรายละเอยดดงน

1. Always underline ใหแสดงเสนใตในทกกรณ

2. Never underline ไมแสดงเสนใตในทกกรณ

3. Show underline only on rollver แสดงเสนใตเฉพาะตอนทมเมาสอยดานบนเทานน

4. Hide underline on rollve ปรกตจะแสดงเสนใต แตเมอเมาสอยดานบนไมตองแสดงเสน

ใต

คลก ok Hyperlink กจะปรบหนาตามทเราไดตงไว

จรงแลวการตง page properties เปนการก าหนด CSS ในเวบเพจนนเองเราสามารถดรายละเอยด

CSS ทเราก าหนดไดท code หรอท vertical docking panel ในหวขอ CSS ดงรปดานลาง

(สามารถศกษาเรอง CSS เพมเตมไดในเวบไซตของเรา)

Adding Meta Tags ส าหรบการคนหาของ Search Engine

Dreamweaver

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

(keywords) ลงไป Search Engine จะท าการคนหาเวบไซตทใกลเคยงกบ keywords ออกมาแสดง

35


Search Engine ทมชอเชน www.google.com , www.yahoo.com

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

เกบรายละเอยดเวบไซตเอาไวในฐานขอมล เมอมผใชบรการ Search Engine กจะหาเวบไซตทม

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

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

ลงคตางๆ และ Meta tags Meta tags เปนขอความทเราประกาศเอาไวใน Code จะไมแสดงผลใน

เวบเพจ โดยเปนเนอหาทเกยวกบเวบไซต , Keywords ทใชทเกยวขอกบเวบไซต Search Engine จะ

ท าการเกบรายละเอยดพวกนไวอางองเวบไซตเรา ถาเราไมเขยนกได แต Search Engine จะท าการ

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

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

ขนตอนการแทรก Meta tags ในเวบเพจ

Meta tags ทเราจะแทรกนนจะม 2 อยางคอ

1.Description เปนสวนทใชบอกรายละเอยดของเวบเพจแบบคราวๆ

2.Keywords เปนสวนทใชบอก ค าทเกยวของกบเวบเพจหนาน เปนค าทใชในการคนหาหนาน

การแทรก Meta tags ในสวนของ Description

1.เปดหนาเวบเพจทเราตองการแทรก Meta tags ขนมา

2.ไปท Menu เลอก Insert > HTML > Head Tags > Description ดงรปดานลาง

3.จะมกลองขอความขน มาใหเราเขยนรายละเอยดลงไปในกลองนน ใสไดเฉพาะตวอกษรหามใส

Code ตางๆ จะเปนภาษาองกฤษ หรอไทยกได

4.คลก OK กจะแทรก Meta tags เรยบรอย

36


การแทรก Meta tags ในสวนของ Keywords

1.เปดหนาเวบเพจทเราตองการแทรก Meta tags ขนมา

2.ไปท Menu เลอก Insert > HTML > Head Tags > Keywords

3.จะมกลองขอความ ขนมาใหเราเขยนรายละเอยดลงไปในกลองนน การใส Keywords จะใสเปนค า

และคนดวย (,) เชน สอนท าเวบ Dreamweaver เปนตน

4.คลก OK กจะแทรก Meta tags เรยบรอย

แสดงผลเวบเพจของคณใน browser Dreamweaver

ถงแมวา Dreamweaver จะแสดงผลเสมอนจรง แตกยงไมถกตองเสมอไป สดทายเรากตองดผาน

browser การแสดงผลของเวบเพจทเราเขยนนนอาจแสดงผลไมเหมอนกนถาเราเปลยน Browser

เชน ถาเราใช Internet Explorer อาจแสดงผลไมตรงกบ Firefox กได การท าเวบทดเราควร

ตรวจสอบผาน Browser

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

37


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

ไปท Document tool bar จะเหนรปลกโลกเมอคลกกจะเปนการแสดงเวบเพจของเราใน Browser

ในกรณทเราตองการตงคา Browser ทใชในการแสดงผลเองกสามารถท าไดโดยไปท Menu ไปทค า

วา File > Preview in Browser > Edit browser list กจะมหนาตางขนมาดงรปใหเราสามารถแกไข

เพม Browser ทใชในการแสดงผลได

2.3 โปรแกรม Photoshop CS6

โปรแกรม Photoshop CS6 มสวนส าคญหลกทตองท าความรจก

38


เมนของโปรแกรม Application Menu

1. เมนของพนทท างาน Panel Menu

2. เครองมอใชงาน Tool และ สวนควบคมการใชเครองมอ Tool Contorl Menu

รปดานลางเปนหนาตาของโปรแกรม ผมไดแสดงสวนส าคญหลกตางๆ ไวใหเหน ส าหรบ

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

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

งานจรงดกวา

1. วธเปดและปดโปรแกรม (Opening an Image and Closing work)

การเปดไฟลภาพใหแสดงในโปรแกรม Photoshop CS6

วธเปดไฟลภาพจากหนา Windows Desktop - การเปดไฟลภาพ ไมวาจะนามสกล JPG, PNG, GIF

หรอ TIFF โปรแกรมวนโดวจะเปดจากโปรแกรม Window photo viewer ซงเปน Default program

แตถาเราตองการเปดไฟลภาพแลวใหเปดจาก Photoshop มวธทจะท าใหเปดไฟลภาพเหลานโดย

การคลกขวาทไฟลภาพ แลวเลอก Open with - Choose default program - เลอกโปรแกรม

Photoshop แตถาไมเหนโปรแกรม ใหคลกท ลกศรของ Other program ถายงไมเหนอก ตองคลกปม

Browse เพอไปทซงเกบไฟลโปรแกรม หลงจากนทกครงทเราดบเบลคลกทไฟลภาพ กจะเปดดวย

โปรแกรม Photoshop

39


เทคนค : ตองใหแนใจวาไดท าเครองหมายในชองของ Always use the selected program to open

this kind of file ดวยนะครบ

วธเปดไฟลภาพจากโปรแกรม Photoshop โดยตรง - เปดภาพโดยใชเมนของโปรแกรม Photoshop

เลอก File - Open - แลวเลอกทๆ เราเกบภาพไว - แลวท าการดบเบลคลกทภาพ

การปดไฟลงานในโปรแกรม Photoshop CS6

หลงจากทท าการเปดไฟลภาพเพอท าการปรบแตงภาพเปนทเรยบรอยแลว มวธการปดไฟล

งานตางๆ ไดสองวธดวยกน คอ การปดทละชนงาน และ การปดครงเดยวทกชนงาน

การปดทละชนงาน (Close) คลก Tab ชนงานทจะปด แลว ใชเมนโปรแกรม เลอก File - Close หรอ

ใชค าสงคยลด โดยกดปม Ctrl + W

การปดครงเดยวทกชนงาน (Close All) ใชเมนโปรแกรม เลอก File - Close All หรอ ใชค าสงคยลด

โดยกดปม Alt + Ctrl + W

2. สมผสทวไปกบโปรแกรม Getting Around

ท าความรจก Tab และ Window

โปรแกรม Photoshop CS6 สามารถก าหนดใหเปดภาพเพอแสดงขนมาในพนทท างานไดสองแบบ

คอ แสดงภาพแบบ Tab และ Window

40


วธก าหนดคาการเปดแสดงภาพ โดยไปท Preference ของโปรแกรม Photoshop ก าหนดคา Interface

โดยเลอกทชอง Open Document as Tabs ซงเปนการก าหนดเพอใหเปดแสดงภาพในรปแบบของ

Tabs ถาเราไม

เลอกชองน ภาพทเปดจะแสดงเปนแบบ Window

คณสมบตพเศษ ถาเลอกท Enable Floating Document Window Docking ซงอยถดจากชอง

ของ Open Document as Tabs เปนการตงคาเพอใหสามารถลาก Window ไปยงแถบของ Tab และ

เปลยนลกษณะจาก Window เปน Tab ได

41


การเปด preference / กด Ctrl + K

การเปลยนการแสดงภาพแบบ Tab เปน Window เวลาทเราท างาน อาจตองการสลบการแสดงภาพ จาก Tab ใหเปน Window หรอ กลบกนสามารถใชค าสงโดยใชเมนโปรแกรม เลอก Window – Arrange (ภาพซาย) เมอกด Arrange แลว กจะมรายการหลกสองสวน (ภาพขวา) ใหเลอกวาตองการแสดงโดยการเรยงภาพแบบไหน เชน แนวตง หรอ แนวนอนและ การแสดงภาพแบบไหน ถาตองการเปลยนการแสดงภาพแบบ Window ใหเปน Tab ทงหมด กเลอก Consolidate All to Tabs แตถาตองการเพยง บางภาพ ท าโดย น าเมาสคลกท Window นนแลวลากไปทแผงของ

42


Tab จะมแสงสฟาแสดงต าแหนงทจะวางไดใหเหน และยงสามารถเลอน Tab สลบไปมาระหวางแถวของ Tab ดวยกน โดยใชเมาสคลกคางไวท Tab นนแลวเลอนไปยงต าแหนงทตองการแลวปลอย เมาส ตามภาพทแสดงไวดานลาง ถาตองการบางภาพทแสดงแบบ Tab ใหเปนแบบ Window กใหคลกท Tab นนแลวเลอก Float in Window แตถาตองการใหแสดงทงหมด กเลอก Consolidate All to Windows โดยไมตองคลกท Tabใดๆ

เทคนควธใชคยลดเพอการเลอก tab บนแผง tab โดยกด Ctrl + tab = การเลอกแบบเดนหนา

Ctrl + shift + tab = การเลอกแบบถอยหลง

ปรบแตงพนทการท างาน Custom Panel and Workspace

รปแบบพนทการท างานของโปรแกรม Photoshop CS6 มอย 7 รปแบบดวยกน คอ

Essential, New in CS6, 3D, Motion, Painting, Photography, Typography แตละแบบกแปล

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

วธการเลอกรปแบบ ท าไดโดยการใชโปรแกรมเมน เลอก Window - Workspace - เลอกรปแบบท

ตองการ

43


อกวธหนงท าไดโดยกดปม Workspace Bar จะมรายการรปแบบทงเจดเลอนลงมาใหเลอก

การก าหนดพนทท างานของเราเอง ท าไดเพราะโปรแกรม Photoshop CS6 มระบบทท าใหเรา

ก าหนดเองได โดยใชเมนโปรแกรม เลอก Window - เลอก Panel ทตองการ (ภาพดานขวา เรมตงแต

3D panel ) ใหแสดงอยในพนทการท างาน เมอจดต าแหนงเรยบรอยแลว ใหกดปม Workspace Bar -

เลอก New Workspace - ท าการตงชอพนทท างานของเรา - แลวท าการ Save (ชอง Keyboard

Shortcuts / Menus จะเลอกหรอไมกไดถาเราไมมการปรบตงคาใหมในสองสวนนกไมตองเลอก)

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

กบรายการพนทอนๆ (ชอทเหนบนปม Workspace Bar นจะเปลยนไปตามการแสดงชอพนท

ปจจบนทเราเลอก)

44


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

ปม Workspace Bar - Delete Workspace

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

พอใจตองการเปลยนใหเหมาะสมมากขน ท าไดโดยกดปม Workspace Bar เลอกพนทการท างานท

เราสรางไว แลวท าการปรบแตง - เสรจแลวเลอก New Workspace - ตงชอใหเหมอนเดม - ยนยน

การบนทก

การเรยกคนการตงคาเดม เวลาทเราอยในหนา Workspace ของเรา แลวมการเปด Panel อนเพม

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

Workspace ของเรา โดยกดปม Workspace - เลอก Reset ทเปนชอ Workspace ของเรา แคนเองครบ

เทคนค การปรบแตงพนทท างาน ถาตองการยาย panel หนงไปรวมไวกบ panelอนใหท าการคลกท

panel นน แลวลากออกมาเพอไปวางไวในต าแหนงใหม ใหสงเกตจะมแสงสฟาแสดงใหเหนถง

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

ซมภาพ

โปรแกรม Photoshop CS6 มลกษณะพเศษของการซมภาพไดหลายวธ รวมถงความสะดวกในการ

ใชคยลดเพอท าการซม เขา หรอ ออก กตาม

การซมออก (Zoom Out) ภาพจะเลกลง

โปรแกรมเมน View เลอก Zoom out

การใชคยลด กดปม Ctrl + minus sign (เครองหมาย -)

เครองมอ ซม (Zoom Tool) คลกทรปแวนขยาย หรอ ใชคยลดโดยการกดตว Z + Alt

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

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

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

กดปม Alt + Ctrl + Space bar คางไว และคลกทภาพ

กดปม Alt + Scroll Downward (เลอนตวหมนทอยตรงกลางของเมาส ลง)

การคยตวเลขขนาดทตองการซมออก ทชองบอกขนาดภาพ ซงอยดานลาง ซายมอ แลวกด

Enter

45


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

อยทนวช ใหเลอนเมาสไปทางซาย

การ ซมเขา (Zoom In) ภาพจะใหญขน

โปรแกรมเมน View - Zoom in

การใชคยลด กดปม Ctrl - plus (เครองหมาย +)

เครองมอซม (Zoom Tool) คลกทรปแวนขยาย หรอ ใชคยลดโดยการกดตว Z ลกศรของ

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

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

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

กดปม Ctrl + Space bar คางไว และคลกทภาพ

กดปม Alt + Scroll Upward (เลอนตวหมนทอยตรงกลางของเมาส ขน)

การคยตวเลขขนาดทตองการซมเขา ทชองบอกขนาดภาพ ซงอยดานลางซายมอ - แลวกด

Enter

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

อยทนวช ใหเลอนเมาสไปทางขวา

เทคนค กดปม Ctrl + 0 = ค าสงใหภาพแสดงเปน fit on screen หรอพอดกบหนาจอภาพ, กดปม Ctrl

+ 1 = ค าสงใหแสดงขนาดจรงของภาพเทากบ 100%

การเลอนภาพ (Scrolling and Panning Image)

เมอมการซมภาพ แนนอนวาตองมการเลอนภาพใหสวนทเราตองการเหนมาแสดงใหเหมาะสม

วธการท ามไดหลายแบบดวยกน

ลกกลงของเมาส เลอนขน ส าหรบการเลอนภาพขน และกลบกน

ลกกลงของเมาส + กดปม Ctrl ส าหรบการเลอนภาพแนวนอน ถาเลอนขนจะเปนการเลอน

ภาพไปทางขวา และกลบกน

เครองมอ Hand Tool (ไอคอนรปมอทแสดงบนแถบเครองมอ) หรอ กดคยลด H เมาสจะ

เปลยนเปนรปมอ คลกคางไวทภาพแลวเลอนภาพไดตามทตองการ

46


กดปม Space Bar คางไว เมาสจะเปลยนเปนรปมอ คลกคางไวทภาพแลวเลอนภาพได

ตามทตองการ

Bird Eye View เปนเครองมอซงใชในกรณพเศษ เปนการใชขณะทเราท าการขยายภาพใหญ

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

Hand Tool หรอ กด H คลกเมาสคางไวทภาพ เมาสจะมสญญาลกษณสเหลยมแสดงขน

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

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

กงกลางหนาจอท างานพอด

เทคนค ขณะทแสดงภาพเปนแบบ 2 Up Vertical ใหกดShift + Space Bar คางไว แลวใชเมาส

คลกคางไวทภาพใดภาพหนง ท าการเลอนภาพ ภาพทงสองจะท าการเลอนไปในทศเดยวกน และ

พรอมกน การท าแบบนเหมาะกบการดภาพทเหมอนกนสองภาพ เชน ภาพกอนแตง หรอ หลงแตง

ภาพ เพอเปรยบเทยบการเปลยนแปลง

การปรบหนาจอแสดงภาพ (Screen Mode)

จอแสดงภาพของโปรแกรม Photoshop CS6 มดวยกน 3 แบบ การเลอกแตละแบบท าไดโดย คลกท

ไอคอน Change Screen Mode (รปสเหลยมซอนกนสองรป) ทแถบเครองมอ หรอ จะกดคยลด F ก

47


ได กด F แตละครงจอแสดงภาพกจะเปลยนสลบกนไปแบบเดนหนา ถาตองการยอนการแสดง

รปแบบของจอแสดงภาพ ไดแก Standard Screen, Full Screen mode with Menu bar, Full Screen

ขณะทอยในรปแบบใดแบบหนงของจอแสดงภาพ ยงสามารถทจะสงใหแสดง หรอ ซอน แถบ

เครองมอ และ แถบ Panel ไดอกดวย โดยการใชปมตางๆ ดงน

กดปม Tab เปนการซอน แถบเครองมอ แผงควบคมเครองมอ และ แถบ Panel กด Tab อก

ครงเปนการเปดขนมาจากการซอน

กดปม Shift + Tab เปนการซอนแถบ Panel อยางเดยว กดอกครงเปนเปดขนมาจากการ

ซอน

เทคนค ขณะทอยในรปแบบการซอน แตตองการใชเครองมอ หรอท าบางอยางกบแถบ

Panel สามารถน าเมาสไปชทขอบของแถบททงสองซอนอย แถบเครองมอ และ Panel จะแสดง

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

เหมอนเดม

การปรบขนาด Layer Thumbnail

วธนใชเพอใหเหมาะกบการท างาน เชน ถาขนาด thumbnail มขนาดเลก การมองภาพหรอ

รายละเอยดของ thumbnail จะยากกวาขนาดทใหญ แตถางานชนทท านนม เลเยอร (layer) วธปรบ

ขนาด Thumbnail แตละชนงาน ท าไดโดย คลกขวาบนพนทวางของเลเยอร panel

(ไมใชทตวเลเยอร) แลวท าการเลอกขนาด ซงม 3 ขนาด คอ Small Medium and Large

วธปรบขนาด Thumbnail ใหกบทกชนงาน ท าไดโดยคลกทลกศรคว าบนแถบเลเยอร เลอก panel

option แลวคลกเลอกขนาดทตองการ

เทคนค วธนยงสามารถใชไดกบการปรบขนาด Thumbnail ของ Channel and Path Layer 3. ขนาดและความละเอยดของภาพ (Image and Resolution) รปภาพ ประกอบดวยจ านวนพก เซลมากมาย ย งภาพน น มความละ เ อ ยดมาก เท า ไร วธค านวณจ านวนพกเซลของภาพ ใช ขนาดความกวาง (pixel) x ขนาดความสง (pixel) จะไดจ านวนพกเซลรวม ส าหรบความละเอยดของภาพ (Resolution) ดไดจากจ านวนพกเซลรวมกนตอขนาดพนท เชน 300 pixel per inch (PPI) ท งนเพอใหเหมาะกบงานสงพมพ

48


โปรแกรม Photoshop สามารถก าหนดขนาดของภาพ และความละเอยดไดขณะทสรางงานใหม

ขนมา สามารถก าหนดขนาด Width and Height เปน Pixels, Inches, Centimeters, Millimeters,

Points,Picas,Columns

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

ขนแรกจะตองเปดหนา Image Size โดยใชเมนโปรแกรม Image เลอก Image size กจะไดหนาตาง

ดงกลาว สามารถท าการปรบแตงไดเปน 3 สวน

49


สวนทหนง Pixel Dimension เปนการปรบสดสวนขนาดของภาพทแสดงบนหนาจอ

สวนทสอง Dimension size เปนการปรบขนาดของภาพทจะใชพมพ

สวนทสามScale style, Constrain, Resample Image เปนสวนทใชก าหนดความสมพนธในการ

การปรบแตง (Resample) ท าไดสองแบบดวยกน คอ การเพม Up sample ลด Down sample ขนาด

ของภาพ

Upsample เปนการเพมพกเซลเขาไปใหกบภาพ ซงกจะท าใหภาพมขนาดใหญขน และความ

ละเอยดมากขน ซงควรจะตงคาเปน Bicubic Smoother Downsample เปนการท าลกษณะกลบกน

กบUpsample และควรจะตงคาเปน Bicubic Sharper

เทคนค การตงคา Bicubic เพอใหเหมาะกบแตละชนงาน ถาเรายงไมมความช านาญ ควรตงเปน

Bicubic Automatic

4. รจกเทคนคการบนทกงานแตละประเภท (Saving )

การบนทกงานแบงออกไดหลายแบบ เชน บนทกเปนไฟลงาน Photoshop (PSD), TIFF, PNG,

JPEG บนทกงานเปนไฟล PSD การท างานในโปรแกรม Photoshop จะมการปรบแตงหลายแบบ

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

เชน Layer, Alpha channel และ อนๆ แตอยาลมดใหแนใจวาชอง As a copy จะตองไมถกเลอก อก

อยางเพอประหยดเนอทของฮารดดสก ไมตองท าเครองหมายเลอกทชอง Maximize compatibility

ถาแนใจวาไมไดน าไฟลนไปใชกบ Photoshop ตระกลอนเชน Photoshop Lightroom เปนตน

50


บนทกงานเปนไฟล TIFF (ส าหรบงานพมพ) กอนบนทกงาน ใหท าการรวมเลเยอรใหเปน Flat

Layer กอน เพอลดขนาดไฟล เพราะไฟลประเภทนจะมขนาดคอนขางใหญ แตอยาลมขณะบนทก

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

Photoshop ไดอก แตถาแนใจวาไมตองการกลบมาแกไขอก ใหบนทกโดยไมตองเลอกชอง Layer

และใหก าหนดคาใน TIFF Option แทนเพอใหเหมาะกบความตองการ

51


บนทกงานเปนไฟล PNG การบนทกงานประเภทนจะมขนาดไฟลทคอนขางเลก แตไมสามารถเรยก

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

52


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

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

นะครบ สามารถปรบไดตงแต 0 - 12 เรยกจากความละเอยดของภาพจากนอยไปหามาก

53


โปรแกรม Photoshop มจดเดนทใหเราเรยกงานกอนหนานนกลบคนมาได โดยการใช

History panel โดยเลอกขนตอน Open ชนงานของเรา ทกสงกจะกลบมาทขนเรมตนทเราเปดภาพ

หรอชนงานนนขนมา แตครงนเราจะตองท าการบนทกใหมนะ เพราะไมนนชนงานของเรากจะเปน

ชนงานทแกไขโดยไมไดตงใจชนนนเหมอนเดม

54


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

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

3.1 วสด/อปกรณ

ล าดบ วสด/อปกรณ จ านวน

1. เครองคอมพวเตอร (Computer) 1

2. อนเทอรเนต (Internet) 1

3. โปรแกรมการสรางเวบไซด Dreamweaver cs6 1

4. โปรแกรม Photoshop CS6 1

5. ปรนเตอร(Printer) 1

55


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

Step 1 เปดโปรแกรมขนมา สรางหนากระดาษเปลา New > Custom เลอดขนาดตามตองการ

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

เลอกขนาด เลอกส เลอกฟอนททตองการ

56


57


58


Step 3 สราง เลเยอรเพมโดยการคลกขวาทเลเยอรตวหนงสอเลอก Duplicate layer กด Ok ตามภาพ

59


4. เลอกทเลเยอรตวหนงสออนแรก แลวไปทแถบเมน เลอกค าสง Filter > Stylize >wind กด OK

กด OK ขนตอนนทเราท าคอ จากดานขวา (From The right) ตอไปท าจากดานซายบาง คอไปทค าสง

เหมอนเดม Filter > Stylize >wind กด OK เลอกเปน From the left ขนตอน ตอไปคอการท าดานบน

กบดานลาง ใหไปท Image > Image Rotation > 90 CW จะไดตามภาพ จากนนใหท าการสรางเอฟ

เฟคเหมอนเดม ท า 2 ครงเลย

Step 5 ขนตอนตอไปใหคลกขวาทเลเยอรตวหนงสออนแรก เลอก Blinding Option ตกทชอง Color

Overlay เลอกสไดตามตองการ

60


3.3 ขนตอนการสรางเวบไซด

รปท 1 หารปภาพ Background ทเราตองการ

รปท 2 หา Icons ทเราตองการ

61


รปท 3 เปดหนาตางโปรแกรม Photoshop

รปท 4 ขนตอนการออกแบบหวเวบไซด

62


รปท 5 ขนตอนการออกแบบปมตวเลอก

รปท 6 ขนตอนการออกแบบหนาแรก “อาหารภาคเหนอ”

63


รปท 7 ขนตอนการออกแบบรปภาพ

รปท 8 ขนตอนการออกแบบ “ภมประเทศ”

64


รปท 9 ขนตอนการออกแบบ “ค าขวญ”

รปท 10 ขนตอนการออกแบบ ลงค “ค าขวญ”

65


รปท 11 ขนตอนการออกแบบ “ประเพณการรบประทานอาหาร”

รปท 12 ขนตอนการออกแบบ “เมนอาหาร”

66


รปท 13 ขนตอนการออกแบบ ลงค “เมนอาหาร”

รปท 14 ขนตอนการออกแบบ ลงค “สวนผสม”

67


รปท 15 ขนตอนการออกแบบ ลงค “วธการท า”

รปท 16 ขนตอนการออกแบบ ลงค “คณคาทางโภชนาการ”

68


รปท 17 ขนตอนการออกแบบ“กลองขอความ”

รปท 18 เปดหนาตางโปรแกรม Dream Weaver

69


รปท 19 เรมออกแบบและสราง header ของเวบไซด

รปท 20 ออกแบบหนาแรก ของเวบไซด

70


รปท 21 ออกแบบ "ค าขวญ" ของเวบไซด

รปท 22 ออกแบบ ลงค "ค าขวญ" ของเวบไซด

71


รปท 23 ออกแบบ "ประเพณ" ของเวบไซด

รปท 24 ออกแบบ "อาหาร" ของเวบไซด

72


รปท 25 ออกแบบ "สวนผสม" ของเวบไซด

รปท 26 ออกแบบ "วธท า" ของเวบไซด

73


รปท 27 ออกแบบ "คณคาทางอาหาร" ของเวบไซต

รปท 28 การใสเพลงในเวบไซต

74


ผลสรปการทดลองจากการประเมนภายในกลม

รายการ ครงท 1 ครงท 2

1. รปแบบ เวบไซด มความนาสนใจ ตวหนง สอ เล ก เ กนไป ควรปรบใหใหญกวาน

ปรบขนาดตวหนงสอใหใหญกวาเดม

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

ลดสสนใหนอยลง ดแลวสบายตา

3. รปภาพกบเนอหาสมพนธกน รปภาพนอยเกนไป ใสรปภาพเพมเตม

4. ใชภาษาไดอยางถกตองและเหมาะสม ควรใสภาษาองกฤษเพม เพมเตมภาษาองกฤษ

5. เพลงทใชในการประกอบเวบไซด มความเหมาะสม เพลงเรวเกนไป ไมเขากบเวบไซด

เปลยนเพลงใหมใหชาลงกวาเดม

6. เนอหามความนาสนใจและเหมาะสม เนอหานอยเกนไป ใสเนอหาเพม

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

75


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

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

3.รปภาพกบเนอหาสมพนธกน 4.ใชภาษาไดอยางถกตองและเหมาะสม 5.เพลงทใชในการประกอบเวบไซด มความเหมาะสม 6. เนอหามความนาสนใจและเหมาะสม 7. รายละเอยดครอบคลมกบเวบไซด

3.4 งบประมาณการด าเนนการ

ท รายการ ราคาสทธ 1 คา Internet 613 บาท

2 คมอใชงาน Photoshop CS6 250 บาท

3 คมอใชงาน Dreamweaver CS6 250 บาท

4 คาใบประเมน 55 บาท

5 คาจดท ารปเลมโครงการ 585 บาท

รวม 1698 บาท

76


ผลสรปการทดลองจากการประเมนภายในกลม

รายการ ครงท 1 ครงท 2

8. รปแบบ เวบไซด มความนาสนใจ ตวหนง สอ เล ก เ กนไป ควรปรบใหใหญกวาน

ปรบขนาดตวหนงสอใหใหญกวาเดม

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

ลดสสนใหนอยลง ดแลวสบายตา

10. รปภาพกบเนอหาสมพนธกน รปภาพนอยเกนไป ใสรปภาพเพมเตม

11. ใชภาษาไดอยางถกตองและเหมาะสม ควรใสภาษาองกฤษเพม เพมเตมภาษาองกฤษ

12. เพลงทใชในการประกอบเวบไซด มความเหมาะสม เพลงเรวเกนไป ไมเขากบเวบไซด

เปลยนเพลงใหมใหชาลงกวาเดม

13. เนอหามความนาสนใจและเหมาะสม เนอหานอยเกนไป ใสเนอหาเพม

14. รายละเอยดครอบคลมกบเวบไซด ขอมลนอยเกนไป เพมขอมลทเกยวของ

77


บทท 4 การส ารวจ และประเมนผล

จากทไดจดท าแบบสอบถามเพอท าการประเมนผล จากประชากรเปนนกศกษาภาคปกตภายในวทยาลยเทคโนโลยสยามธรกจ ในพระอปถมภฯ ท งหมด 1,200 คน โดยใชวธการสมตวอยาง(Sampling) จงไดจ านวนกลมตวอยางทงสน 50 คน ใชหลกการค านวณสตรของ ทาโร ยามาเน (Taro Yamane , 1973 : 727-728) และ ของ R. VKrejcie and D.W. Morgan

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

78


วทยาลยเทคโนโลยสยามธรกจ ในพระอปถมภฯ

แบบประเมนความพงพอใจโครงการ “เหนอ เหนอ YUMMY” เวบไซด

รายวชา “โครงการ” ภาคเรยนท 1 ปการศกษา 2556

ค าชแจง แบบสอบถามส ารวจเพอพฒนาการเรยนการสอนในสาขาการโรงแรม

ตอนท 1 ขอมลผตอบแบบสอบถาม

เพศ ชาย หญง

ต าแหนงหนาท / ระดบการศกษา

อาจารย นกศกษาระดบชน ปวช. ................ นกศกษาระดบชน ปวส. .................

ตอนท 2 ใหท าเครองหมาย √ ในชองทตรงกบความคดเหน

หมายเหต ระดบความคดเหน 5 หมายถง เหมาะสมมากทสด

ระดบความคดเหน 4 หมายถง เหมาะสมมาก

ระดบความคดเหน 3 หมายถง เหมาะสมปานกลาง

ระดบความคดเหน 2 หมายถง เหมาะสมนอย

ระดบความคดเหน 1 หมายถง เหมาะสมนอยทสด

ตอนท 3 ขอเสนอแนะ ……………………………………................................................................ ……………………………………....................................................................................................

รายการ ระดบความคดเหน

5 4 3 2 1

15. รปแบบ เวบไซด มความนาสนใจ

16. รปภาพและสสนใน เวบไซด มความสวยงาม

17. รปภาพกบเนอหาสมพนธกน

18. ใชภาษาไดอยางถกตองและเหมาะสม

19. เพลงทใชในการประกอบเวบไซด มความเหมาะสม

20. เนอหามความนาสนใจและเหมาะสม

21. รายละเอยดครอบคลมกบเวบไซด

79


รวมภาพผลการประเมน

รปท1.ประเมนโครงการเหนอ เหนอ Yummy เวบไซด โดยคณะอาจารย

80


รวมภาพผลการประเมน รปท 2 ประเมนโครงการเหนอ เหนอ Yummy เวบไซด โดยนกศกษาของวทยาลยเทคโนโลยสยามธรกจ ในพระอปถมภฯ

81


ตารางสรปผลการประเมน ตารางท 1 ตารางสรปความถของสถานะผตอบแบบสอบถาม

สถานะผตอบแบบสอบถาม ความถ รอยละ เพศ ชาย 28 56 หญง 22 44 รวม 50 100 ต าแหนงหนาท/ระดบการศกษา อาจารย 10 20 นกศกษาระดบชน ปวช.1 5 10 นกศกษาระดบชน ปวช.2 4 8 นกศกษาระดบชน ปวช.3 17 34 นกศกษาระดบชน ปวส.1 9 18 นกศกษาระดบชน ปวส.2 5 10 รวม 50 100

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

แบบสอบถามเปนผชาย 28 คน คดเปนรอยละ 56 ของจ านวนผตอบแบบสอบถามทงหมด ผตอบแบบสอบถามทเปนผหญง 22 คน คดเปนรอยละ 44 ของจ านวนผตอบแบบสอบถามทงหมด ในกลมตวอยางทงเพศหญงและเพศชายน เปนอาจารย 10 คน คดเปนรอยละ 20 ของจ านวนผตอบแบบสอบถามทงหมด นกศกษาระดบชน ปวช.1. 5 คน คดเปนรอยละ 10 ของจ านวนผตอบแบบสอบถามทงหมด ปวช.2 4 คน คดเปนรอยละ 8 ของจ านวนผตอบแบบสอบถามทงหมด ปวช.3 17 คน คดเปนรอยละ 34 ของจ านวนผตอบแบบสอบถามทงหมดและนกศกษาระดบชน ปวส.1 9 คน คดเปนรอยละ 18 ของจ านวนผตอบแบบสอบถามทงหมด ปวส.2 5 คน คดเปนรอยละ 10 ของจ านวนผตอบแบบสอบถามทงหมด เมอไดท าการส ารวจกลมตวอยางเรยบรอยแลว สมาชกในกลมน าแบบสอบถามทงหมดมาท าการนบคะแนน โดยวธการ Tally สรปไดผลดงตารางตอไปน

82


ตารางท 2 ตารางสรปผลคะแนน

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

- Web side ควรมหลากหลาย ภาพ/เสยง/หรอภาพเคลอนไหวใหนาสนใจมากกวานแตถอวาขอมลครบถวน นาเชอถอ

รายการ ระดบความคดเหน

5 4 3 2 1

1. รปแบบ เวบไซด มความนาสนใจ 35 15 0 0 0

2. รปภาพและสสนใน เวบไซด มความสวยงาม 40 10 0 0 0

3. รปภาพกบเนอหาสมพนธกน 30 15 3 1 0

4. ใชภาษาไดอยางถกตองและเหมาะสม 26 22 2 0 0

5. เพลงทใชในการประกอบเวบไซด มความเหมาะสม 23 20 7 1 0

6. เนอหามความนาสนใจและเหมาะสม 30 18 2 0 0

7. รายละเอยดครอบคลมกบเวบไซด 28 19 2 0 1

83


โดยน าผลคะแนนทไดจากการท า Tally มาคดหาคาเฉลย X โดยใชสตรคอ x = N

x

x แทน คะแนนเฉลยของกลมตวอยาง

x แทน ผลรวมของคะแนนรวมทงหมด N แทน จ านวนขอมล

1.รปแบบ เวบไซด มความนาสนใจ (35x5) (15x4) = 175+60 = 235÷50 = 4.7 เหมาะสมมาก โดยการปรบขนาดตวหนงสอใหมความเหมาะสมกบเวบไซด 2.รปภาพและสสนใน เวบไซด มความสวยงาม (40x5) (10x4) = 200+40 = 240÷50 = 4.8 เหมาะสมมาก โดยมการน ารปภาพทเกยวของกบภาคเหนอและการใชสพนหลงทดแลวสบายตา 3.รปภาพกบเนอหาสมพนธกน (30x5) (15x4) (3x3) (2x1) = 150+60+9+1 = 220÷50 = 4.4 เหมาะสมมาก โดยน ารปภาพมาใสใหเขากบเนอหา 4.ใชภาษาไดอยางถกตองและเหมาะสม (26x5) (22x4) (2x3) = 130+88+6 = 224÷50 = 4.48 เหมาะสมมากทสด โดยมการเพมเตมค าศพทภาษาองกฤษ 5.เพลงทใชในการประกอบเวบไซด มความเหมาะสม (23x5) (20x4) (7x3) (1x2) = 115+80+21+2 = 218÷50 =4.36 เหมาะสมมากทสด โดยมการน าเพลงพนบานมาใสเพอเพมความนาสนใจของเวบไซด 6.เนอหามความนาสนใจและเหมาะสม (30x5) (18x4) (3x2) = 150+72+6 = 228÷50 = 4.56 เหมาะสมมากทสด โดยการน าเนอหาเพมเตมมาใสใหเวบไซดนาสนใจมากยงขน 7.รายละเอยดครอบคลมกบเวบไซด (28x5) (19x4) (3x2) (1x1) = 140+76+6+2 = 224÷50 = 4.48 เหมาะสมมากทสด โดยการคนควาขอมลจากในหนงสอและเวบไซดมาใสใหมรายละเอยดครอบคลมกบเวบไซด

84


มเกณฑการประเมนผล ดงน คะแนนเฉลย 4.21 - 5.00 มความคดเหนอยในระดบ เหมาะสมมากทสด คะแนนเฉลย 3.41–4.20 มความคดเหนอยในระดบ เหมาะสมมาก คะแนนเฉลย 2.61–3.40 มความคดเหนอยในระดบ เหมาะสมปานกลาง คะแนนเฉลย 1.81–2.60 มความคดเหนอยในระดบ เหมาะสมนอย คะแนนเฉลย 1.00 - 1.80 มความคดเหนอยในระดบ เหมาะสมนอยทสด ตารางท3 ตารางสรปผลความคดเหนทมตอ เหนอ เหนอ YUMMY” เวบไซด

รายการประเมน คาเฉลย เกณฑ

1. รปแบบ เวบไซด มความนาสนใจ 5 มากทสด 2. รปภาพและสสนใน เวบไซด มความสวยงาม 4.8 มาก 3. รปภาพกบเนอหาสมพนธกน 4.42 มากทสด 4. ใชภาษาไดอยางถกตองและเหมาะสม 4.48 มากทสด 5. เพลงทใชในการประกอบเวบไซด มความเหมาะสม 4.28 มากทสด 6. เนอหามความนาสนใจและเหมาะสม 4.56 มากทสด 7. รายละเอยดครอบคลมกบเวบไซด 4.46 มากทสด

ผลการประเมนจากตารางสามารถสรปไดวา “เหนอ เหนอ YUMMY” เวบไซดมรปภาพ

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

85


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

ทงหมด นกศกษาระดบชน ปวช.1 5 คน คดเปนรอยละ 10 ของจ านวนผตอบ

แบบสอบถามทงหมด ปวช.2 4 คน คดเปนรอยละ 8 ของจ านวนผตอบแบบสอบถามทงหมด ปวช.3 17 คนคดเปนรอยละ 34 ของจ านวนผตอบแบบสอบถามทงหมดและนกศกษาระดบชน ปวส.1 9 คน คดเปนรอยละ 18 ของจ านวนผตอบแบบสอบถามทงหมด ปวส.2 5 คน คดเปนรอยละ 10 ของจ านวนผตอบแบบสอบถามทงหมด เมอไดท าการส ารวจกลมตวอยางเรยบรอยแลว สมาชกในกลมน าแบบสอบถามทงหมดมาท าการนบคะแนน โดยวธการ Tally สรปไดผลดงตารางตอไปน

86


บทท 5

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

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

ประชากรและกลมตวอยาง (ในการส ารวจ) นกศกษาและอาจารยวทยาลยเทคโนโลย สยามธรกจในพระอปถมภฯ จ านวน 50คน จาก 1,200 คน ภาคปกต เครองมอทใชในการวจย (ในการส ารวจ)

1. แบบสอบถาม 2. เครองคอมพวเตอร

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

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

87


ปญหาและอปสรรค 1. ขาดความรความเขาทางดานอาหารภาคเหนอ 2. ไมมความรทางดานการสรางเวบไซดโดยการใชโปรแกรม Dreamweaver cs6 3. ไมมความรดานการใชโปรแกรม Photoshop CS6 4. ขอมลของอาหารภาคเหนอในสอแตละเวบไซด มขอมลทไมคอยตรงกน

แนวทางการแกไข

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

ไซดไหนมความเชอถอมากทสด วเคราะหผลการด าเนนการ

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

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

88


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

เหนอ เหนอ yummy เวบไซดมรปแบบเวบไซดอยในเกณฑการประเมนระดบดมาก ซงถอเปนจดเดนของเวบไซด เนองจากมความนาสนใจมาก แตยงคงตองปรบปรงเรองของสสนและความสวยงานของเวบไซด ใหมสสนทสวยงานมากกวาเดม โดยอาจศกษาขนตอนการท าเวบไซดเพมเตมจากแหลงความรตาง ๆ ทเกยวของ และตองปรบปรงเรองขอมล เนอหาใหมความนาเชอถอมากกวาเดม และเปนทนยมในกลมผชมเวบไซดหรอใชบรการเวบไซด โดยทยงคงเนอหาเดม ใหเกดประโยชนตอผรบชมมากทสด ผลการประเมน เหนอ เหนอ yummy เวบไซดถอวาอยในเกณฑทสมาชกกลมผจดท าโครงการพงพอใจ และจะน าไปปรบปรงในสวนทตองพฒนา และแกไข เพอใหผรบชมเกดความพงพอใจสงสดตอ เหนอ เหนอ yummy เวบไซด อภปรายผลการทดลอง/ผลการส ารวจ (ผลทไดตรงตามทคาดหวง/สงไมตรงไปตามทตงเปาไวในผลงาน) การท าเวบไซด เหนอ เหนอ yummy เปนการดดแปลงเวบไซด ใหมความแปลกใหมและนาสนใจ โดยการใชโปรแกรม โปรแกรม Dreamweaver CS6 ,โปรแกรม Photoshop CS6 ในการสรางเวบไซดนขนมา แตเนองจากขาดความรในดานการท าเวบไซด และประสบการณการท าเวบไซด ท าใหคนควาจากหนงสอและอนเทอรเนต และผ เชยวชาญท าใหไดเวบไซดทมความนาสนใจ และแปลกใหมขนมา ขอเสนอแนะจากผทดลอง/ผเชยวชาญ/กลมตวอยาง จากการทดลองในครงแรกท าใหเวบไซดออกมาไมคอยดมากเนองจากเกดปญหาการใสเพลงเพราะใสเพลงเขาไปในเวบไซดแลวเพลงไมเลนตามทก าหนด จงปรกษาผเชยวชาญโดยการใหแปลงไฟลเพลงกอน โดยใชโปรแกรมแปลงไฟลเพลงกอนแลวน ามาใสในเวบไซดจงประสบผลส าเรจ

89


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

1. การใสขอมล รายละเอยดในการเวบไซดตองมการเพมเตมและมความนาสนใจมากกวาน 2. วางแผน วธการท าโปรแกรม Dreamweaver CS6 ทกขนตอนอยางละเอยด เพอผลงานทม

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

สรางเวบไซดได 6. สามารถน าเวบไซดไปอพโหลดเพอใหใชงานไดมากขน 7. ใชเปนสอการเรยนการสอน ในการประกอบอาหารได

90


บรรณานกรม

เวบไซด

http://www.hellomyweb.com/index.php/main/content

http://www.hellomyweb.com/index.php/main/content/

http://www.hellomyweb.com/index.php/main/content/46







http://giveuwblog.blogspot.com/2012/11/photoshop-cs6-basic.html

www.hellomyweb.com/index.php/main/vote/46‎

www.youtube.com/watch?v=XucjFcEPQhA

หนงสอ

คมอใชงาน Photoshop CS6 ผเขยน: ธนยพฒน วงศรตน

คมอใชงาน Dreamweaver CS6 ผเขยน: ธนยพฒน วงศรตน

91


ภาคผนวก

การประเมนแบบสอบถาม การประเมนแบบสอบถาม

ประเมนแบบสอบถามโดยนกศกษาปวช. ประเมนแบบสอบถามโดยอาจารย

92


ประเมนแบบสอบถามโดยนกศกษาปวช ประเมนแบบสอบถามโดยนกศกษาปวช

ประเมนแบบสอบถามโดยนกศกษาปวช. ประเมนแบบสอบถามโดยนกศกษาปวช

93


ดชน ดชนรปภาพ หนา รปท 1 การปรบแตงหนาของเวบเพจ 13

รปท 2 การใสค าในโปรแกรม Dreamweaver 14

รปท 3 site map เครองมอชวยแสดงผลเวบไซด 14

รปท 4 หนาตาของโปรแกรม Dreamweaver และชอเรยกเครองมอ 16

รปท 5 Insert Bar แถบเครองมอ 17

รปท 6 Property inspecter เปนแถบเครองมอทจะเปลยนแปลงตามวตถ 18

รปท 7 docking panels เครองมอทใชแสดงไฟลทใชอย 18

รปท 8 Menu แสดงใหเปนโปรแกรมทวไป 19

รปท 9 Status Bar แสดงสถานะของค าสง HTML 19

รปท 10 New Site หนาตางใหม 20

รปท 11 หนาแรกของโปรแกรม Dreamweaver 22

รปท 12 หนาการเลอกไฟลทจะเปด 22

รปท 13 การปรบขนาดตวหนงสอ 23

รปท 14 เลอกขนาดทตองการ 24

รปท 15 การใสรปภาพในเวบเพจ 25

รปท 16 เครองมอใชในการแตงภาพ 25

รปท 17 การแบงภาพ 26

รปท 18 เครองมอเลอกตวอกษร 28

รปท 19 หนาตางการเลอกตวอกษร 29

94


ดชน (ตอ) ดชนรปภาพ หนา รปท 20 Porperity inspector แบบเชอมโยงลงค 30

รปท 21 การตงคาขอบ 31

รปท 22 การใชเครองมอ Page properties 31

รปท 23 กลองเมน Page Proerties 33

รปท 24 เปลยนสตวอกษรใหเปน Typerline 34

รปท 25 การก าหนด Css 36

รปท 26 การแทรก Mate tage 37

รปท 27 โปรแกรม Photoshop cs6 38

รปท 28 Application menu 39

รปท 29 การคนหาโปรแกรมอนๆ 40

รปท 30 วธการก าหนดคาการเปดแสดงภาพ 40

รปท 31 การตงคาการแสดงภาพ 41

รปท 32 การปรบแตงภาพ 41

รปท 33 การเปด Preference 41

รปท 34 การแสดงภาพบน Window 42

รปท 35 การปรบแตงการท างาน 42

รปท 36 ปม Workspace Bar 43

รปท 37 หนาตางค าสง New Workspace 43

รปท 38 การเปรยบเทยบการเปลยนแปลงภาพ 43

95


ดชน (ตอ) ดชนรปภาพ หนา รปท 39 การปรบขนาดรปภาพ 47

รปท 40 การปรบขนาดรปภาพ 49

รปท 41 การบนทกไฟล 49

รปท 42 การบนทกงานเปนไฟล TIFE 50

รปท 43 เมน TIFE Option 51

รปท 44 การบนทกไฟล PNG 51

รปท 45 การบนทกไฟล PNG 52

รปท 46 เลอกประเภทไฟล 53

รปท 47 เลอกคณภาพของรปภาพ 53

รปท 48 เปดโปรแกรม Photoshop 53

รปท 49 เลอกสทตองการ 55

รปท 50 เลอกสทตองการลงบนกระดาษ 56

รปท 51 ใสสทตองการ 56

รปท 52 ใสสในกระดาษทตองการ 57

รปท 53 เลอกขนาด,เลอกส,เลอกฟอนต ทตองการ 57

รปท 54 สรางเลเยอร 58

รปท 55 เลอกเลเยอรตวหนงสอ 58

รปท 56 คลกเลอกเลเยอรทตองการ 59

รปท 57 รป Background 59

96


ดชน (ตอ) ดชนรปภาพ หนา รปท 58 รปไอคอน 60

รปท 59 หนาตางโปรแกรม Photoshop 60

รปท 60 การออกแบบหวเวบไซด 61

รปท 61 การออกแบบปมตวเลอก 61

รปท 62 การออกแบบหนาแรก ”อาหารภาคเหนอ” 62

รปท 63 การออกแบบรปภาพ 62

รปท 64 การออกแบบภมประเทศ 63

รปท 65 การออกแบบค าขวญ 63

รปท 66 ขนตอนการออกแบบลงค ค าขวญ 64

รปท 67 ขนตอนการออกแบบประเพณการรบประทานอาหาร 64

รปท 68 ขนตอนการออกแบบเมนอาหาร 65

รปท 69 ขนตอนการออกแบบลงค เมนอาหาร 65

รปท 70 ขนตอนการออกแบบลงค สวนผสม 66

รปท 71 ขนตอนการออกแบบลงควธการท า 66

รปท 72 ขนตอนการออกแบบลงคคณคาทางโภชนาการ 67

รปท 73 ขนตอนการออกแบบกลองขอความ 67

รปท 74 เปดหนาตางโปรแกรม Dream weaver 68

97


ดชน (ตอ) ดชนรปภาพ หนา รปท 75 เรมออกแบบและสราง header ของเวบไซด 68

รปท 76 ออกแบบหนาแรกของเวบไซด 69

รปท 77 ออกแบบค าขวญของเวบไซด 70

รปท 78 ออกแบบลงคค าขวญของเวบไซด 70

รปท 79 ออกแบบประเพณของเวบไซด 71

รปท 80 ออกแบบอาหารของเวบไซด 71

รปท 81 ออกแบบสวนผสมของเวบไซด 72

รปท 82 ออกแบบวธท าของเวบไซด 72

รปท 83 ออกแบบคณคาทางอาหารของเวบไซด 73

รปท 84 การใสเพลงในเวบไซด 73

รปท 85 การประเมนโครงการเหนอ เหนอ Yummy เวบไซด โดยอาจารย 79



รปท 88 การประเมนโครงการเหนอ เหนอ Yummy เวบไซด โดยนกศกษา 80



รปท 91 การประเมนแบบสอบถาม 91

98


ดชน (ตอ) ดชนรปภาพ หนา รปท 92 การประเมนแบบสอบถาม 91

รปท 93 ประเมนแบบสอบถามโดยนกศกษา 91

รปท 94 ประเมนแบบสอบถามโดยอาจารย 91

รปท 95 ประเมนแบบสอบถามโดยนกศกษา ปวช. 91

รปท 96 ประเมนแบบสอบถามโดยนกศกษา ปวช 92



รปท 99 รปผจดท า 100



99


ดชน ดชนตาราง หนา ตารางท 1 งบประมาณการด าเนนการ 67

ตารางท 2 สรปผลการทดลองจากการประเมนผลในกลม 76

ตารางท 3 ตารางสรปผลการประเมน 81

ตารางท 4 ตารางสรปความถของสถานะผตอบแบบสอบถาม 81

ตารางท 5 ตารางสรปผลคะแนน 82

ตารางท 6 ตารางสรปผลความคดเหน 84

100


ประวตผจดท า

ชอ – นามสกล นางสาว กมลชนก คงอย

ประวต

ประวตสวนตว

วนเกด 02 มถนายน พ.ศ.2538 อาย 18 ป

ทอย 1614/21 นคมมกกะสน เขตราชเทว แขวงมกกะสน ถนนเพชรบรตดใหม กรงเทพมหานคร 10400

ประวตการศกษา

- ประถมศกษา โรงเรยนวดดสหงสาราม พ.ศ. 2550

- มธยมศกษา โรงเรยนจ านงควทยา พ.ศ. 2553

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

อปถมภฯ

101



ชอ – นามสกล นางสาว จนจรา ดวนล อาย 19 ป

ประวต


วนเกด 05 เมษายน พ.ศ.2537 อาย 19 ป

ทอย 191 หม3 ต าบลพทธบาท อ าเภอชนแดน จงหวด เพชรบรณ 10670


- ประถมศกษา โรงเรยนเสรศกษา พ.ศ. 2549

- มธยมศกษา โรงเรยนเสรศกษา พ.ศ. 2552


อปถมภฯ

102



ชอ – นามสกล นางสาว อจฉราพรรณ แซลม

ประวต


วนเกด 21 พฤศจกายน พ.ศ.2538 อาย 18 ป

ทอย 112/11 ซ. อนามยงานเจรญ 31 ถ. พระราม 2 เขตทาขาม แขวงบางขนเทยน กรงเทพมหานคร 10150


- ประถมศกษา โรงเรยนวดชองลม พ.ศ. 2550

- มธยมศกษา โรงเรยนเจาพระยาวทยาคม พ.ศ. 2553


อปถมภฯ

103


โครงรางในการจ าท าโครงการ

1. ชอโครงการงานคนควาวจย เหนอ เหนอ Yummy Website

2. ความเปนมาและความส าคญของปญหา (ความสนใจ, ตองการพฒนา, สรางสรรคผลงาน)

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

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

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

ผจดท าจงจดท าโครงการนขน เพอศกษาและคนควาการท าเวบไซดอาหารประจ าภาคเหนอ

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

ไดรบรขอมลอาหารประจ าภาคเหนอมากขน

3. วตถประสงคของโครงการ

3.1 เพอใหนกศกษาน าความรทไดเรยนในสาขาวชาการโรงแรม มาบรณาการใหเกดองคความรใหม

3.2 เพอพฒนารปแบบเวบไซดของอาหารประจ าภาคเหนอใหมความนาสนใจมากขน

3.3 เพอเปนการเผยแพรอาหารประจ าภาคเหนอผานเวบไซด ท าใหมคนรจกมากขน

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

3.5 เพอท าใหคนหนมาสนใจอาหารของภาคเหนอมากยงขน โดยการน าเสนอผานทางเวบไซด

4. ขอบเขตการวจย

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

จากเวบไซดอน

5. ค านยาม

5.1 เวบไซด (Web Site) คอ แหลงทเกบรวบรวมขอมลเอกสารและสอประสมตาง ๆ เชน ภาพ

เสยง ขอความ

104


ภาคเหนอ/เหนอ : บรเวณทอยทางเหนอของประเทศ

YUMMY: เปนค าแสลง slang หมายถง: อรอย ค าทเกยวของ: รสเดด, รสเยยม

6. วธการด าเนนการ

6.1 ประชากร และกลมตวอยาง

-นกศกษาวทยาลยเทคโนโลยสยามธรกจในพระอปถมภฯ

6.2 เครองมอทใชในการวจย

6.2.1 แบบสอบถาม

6.2.2 เทคโนโลยดาน Computer

6.3 วธการเกบรวบรวมขอมล

- Sampling การสมตวอยาง (แบบการกระจายกลม)

-โดยใหผเชยวชาญประเมน

6.4 สถตทใชและวธการวเคราะหและระยะเวลา

-การค านวณรอยละ

-คาเฉลย (Average)

7. เอกสาร, รายงาน หรองานวจยทเกยวของ

7.1 หนงสอการท าเวบไซด

7.2 รปแบบการน าเสนอวธการท า การสรางเวบ โดยโปรแกรม Powerpoint

7.3 โปรแกรม Dreamweaver CS 6

7.4 โปรแกรม Photoshop CS 6

105


7.5 Microsoft Word 2010

8. ประโยชนทคาดวาจะไดรบ

8.1 สามารถน าความรทไดจากหาขอมลอาหารประจ าภาคเหนอไปใชไดในชวตประจ า

8.2 รจกการสรางเวบไซดใหมความนาสนใจมากยงขน

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

อาเซยน

8.4 รจกวธการสรางเวบไซดโดยใชโปรแกรม Dream weaver cs6 มากยงขน

8.5 มการจดแจงและแบงงานในการชวยเหลอและรวมมอกนในการท างาน

9. กรอบแนวความคด (Conceptual)

ตองการใหนกศกษารจกอาหารภาคเหนอมากขน วามลกษณะ รสชาตอาหารอยางไร มวฒนธรรม

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

106


10. ขนตอนด าเนนการและระยะเวลา

11. งบประมาณ

รายละเอยด ราคา

คา Internet 613 บาท

คมอใชงาน Photoshop CS6 250 บาท

คมอใชงาน Dreamweaver CS6 250 บาท

คาใบประเมน 55 บาท

คาจดท ารปเลมโครงการ 585 บาท

107


รวม 1698 บาท

12.ผจดท า

1.นางสาวกมลชน คงอย

2.นางสาวจนจรา ดวนล

3.นางสาวอจฉราพรรณ แซลม

13.อาจารยทปรกษาโครงการ

13.1 อาจารยจ ารส รสมย ( อาจารยคณะอตสาหกรรมบรการ )

13.2 อาจารยพรชตา เทอกทา ( อาจารยคณะเทคโนโลยสารสนเทศ )

13.3 อาจารยสนต ทองประสตร ( อาจารยคณะเทคโนโลยสารสนเทศ )

14.ปญหา อปสรรคทคาดวาจะพบ และแนวทางแกไข

ปญหา / อปสรรค แนวทางแกไข

1.ความรในการสรางเวบไซดมนอยไป 1.ไปเรยนรวธการสรางเวบไซดเพมเตม

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

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

นาสนใจจากเวบไซดอน

108


จดนทรรศการน าเสนอผลโครงงานคนควาวจย

(Research & Study Presentation Exhibition)

ขนตอนด ำเนนกำรจดท ำโครงกำรคนควำวจย

ส ารวจความสนใจและแรงบนดาลใจของตน SWOT

ศกษาคนควา เอกสาร ขอมล งานวจยทเกยวของ/ปรกษา

ผ เชยวชาญ

โครงรางงานคนควาวจย (Research & Study

Proposal) ขอรบขอเสนอแนะและแนวความคดจาก ผ เชยวชาญ/ท

ปรกษา

สงตรวจ พรอมอธบายและตอบขอซกถาม จากทปรกษา

ด าเนนการจดท า บทท 1-5 โดยน ามาปรกษา เปนระยะๆ

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

ปรกษา

น าเสนอสรปผลโครงงานคนควาวจย

(Presentation Research & Study) ขอรบขอเสนอแนะและแนวความคดจาก ผ เชยวชาญ/ท

ปรกษา จดท ารปเลม/สงตรวจโครงงานคนควาวจย น าเขารปเลม

(Research & Study Text)

2 สงหาคม 2556

109


ตัวอย่าง 027 โครงการ wesite เหนือ เหนือ yummy...

Documents

Transcript of ตัวอย่าง 027 โครงการ wesite เหนือ เหนือ yummy...