ครูสม ฟาร์มมะนาว, profile picture
Uploaded byครูสม ฟาร์มมะนาว
572 views

ตัวอย่าง 027 โครงการ wesite เหนือ เหนือ yummy กมลชนกก จันจิรา อัจฉราพรรณ 56

Embed presentation

Download to read offline
1 / 109
2 / 109
3 / 109
4 / 109
5 / 109
6 / 109
7 / 109
8 / 109
9 / 109
10 / 109
11 / 109
12 / 109
13 / 109
14 / 109
15 / 109
16 / 109
17 / 109
18 / 109
19 / 109
20 / 109
21 / 109
22 / 109
23 / 109
24 / 109
25 / 109
26 / 109
27 / 109
28 / 109
29 / 109
30 / 109
31 / 109
32 / 109
33 / 109
34 / 109
35 / 109
36 / 109
37 / 109
38 / 109
39 / 109
40 / 109
41 / 109
42 / 109
43 / 109
44 / 109
45 / 109
46 / 109
47 / 109
48 / 109
49 / 109
50 / 109
51 / 109
52 / 109
53 / 109
54 / 109
55 / 109
56 / 109
57 / 109
58 / 109
59 / 109
60 / 109
61 / 109
62 / 109
63 / 109
64 / 109
65 / 109
66 / 109
67 / 109
68 / 109
69 / 109
70 / 109
71 / 109
72 / 109
73 / 109
74 / 109
75 / 109
76 / 109
77 / 109
78 / 109
79 / 109
80 / 109
81 / 109
82 / 109
83 / 109
84 / 109
85 / 109
86 / 109
87 / 109
88 / 109
89 / 109
90 / 109
91 / 109
92 / 109
93 / 109
94 / 109
95 / 109
96 / 109
97 / 109
98 / 109
99 / 109
100 / 109
101 / 109
102 / 109
103 / 109
104 / 109
105 / 109
106 / 109
107 / 109
108 / 109
109 / 109
1 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เหนือ เหนือ Yummy (เว็บไซด์) North North yummy (Website) รหัสประจาตัว 0021243 นางสาวกมลชนก คงอยู่ รหัสประจาตัว 0021329 นางสาวจันจิรา ดวนลี รหัสประจาตัว 0021374 นางสาวอัจฉราพรรณ แซ่ลิ้ม โครงการนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพ คณะอุตสาหกรรมการบริการ สาขาการโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระอุปถัมภ์ สมเด็จพระเจ้าภคินีเธอเจ้าฟ้าเพชรรัตนราชสุดา สิริโสภาพัณณวดี ภาคเรียนที่ 1 ปีการศึกษา 2556
2 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เหนือ เหนือ Yummy (เว็บไซด์) North North yummy (Website) รหัสประจาตัว 0021243 นางสาวกมลชนก คงอยู่ รหัสประจาตัว 0021329 นางสาวจันจิรา ดวนลี รหัสประจาตัว 0021374 นางสาวอัจฉราพรรณ แซ่ลิ้ม โครงการนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพ คณะอุตสาหกรรมการบริการ สาขาการโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระอุปถัมภ์ สมเด็จพระเจ้าภคินีเธอเจ้าฟ้าเพชรรัตนราชสุดา สิริโสภาพัณณวดี ภาคเรียนที่ 1 ปีการศึกษา 2556
3 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ใบรับรองโครงการ วิทยาลัยสยามธุรกิจ ในพระอุปถัมภ์ฯ เรื่อง เหนือ เหนือ YUMMY เว็บไซด์ โดย 1.นางสาวกมลชนก คงอยู่ เลขประตัว 0021243 2.นางสาวจันจิรา ดวนลี เลขประตัว 0021329 3.นางสาวอัจฉราพรรณ แซ่ลิ้ม เลขประตัว 0021374 ได้รับอนุมัติให้นับเป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพ คณะอุตสาหกรรมการโรงแรม สาขาการโรงแรม ______________________________ ______________________________ (อาจารย์จารัส รู้สมัย) (อาจารย์ธนศักดิ์ ตั้งทองจิตร) อาจารย์ประจารายวิชา หัวหน้าคณะอุตสาหกรรมการโรงแรม คณะกรรมการบริหารวิทยาลัย ______________________________ ________________________________ ( อาจารย์สุชาติ เกตุกุล) (อาจารย์ปัญจพร เอื้อจงประสิทธิ์) รองผู้อานวยการฝ่ายวิชาการ ผู้อานวยการ ____________________________________ (ผู้ช่วยศาสตรจารย์ดร.ผจญ ขันธะชวนะ) ประธานกรรมการบริหารวิทยาลัย วันที่………เดือน…..………….พ.ศ………
4 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ กิตติกรรมประกาศ โครงการเหนือ เหนือ YUMMY เว็บไซด์ เกิดขึ้นได้ด้วยความอุปการะทางด้านต่างๆ ทั้ง ด้านข้อมูลเอกสาร ด้านการสารวจแบบประเมิน และด้านสถานที่ดาเนินการ ขอขอบคุณ อาจารย์จารัส รู้สมัย ที่ให้ข้อมูลการดาเนินการ และสละเวลาส่วนตัว เพื่อเป็นที่ ปรึกษาให้ในตลอดระยะเวลาการดาเนินโครงการ ขอขอบคุณ อาจารย์พรชิตา เทือกทา , อาจารย์สันติ ทองประสูติ ที่ช่วยให้คาแนะนาในการ ทาเว็บไซด์ และให้คาแนะนาเพื่อให้สมาชิกผู้จัดทานาไปทาการปรับปรุงแก้ไข ขอขอบคุณ รุ่นพี่ทุกคน ที่ให้ความช่วยเหลือ เป็นที่ปรึกษาในการทาเว็บไซด์โครงการครั้งนี้ สุดท้ายนี้ขอขอบคุณทุกท่านที่มีส่วนร่วม ช่วยเหลือ และสนับสนุน ให้โครงการบรรลุผล สาเร็จได้ด้วยดี คณะผู้จัดทา 19 กันยายน 2556
5 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ชื่อ 1.นางสาวกมลชนก คงอยู่ 2.นางสาวจันจิรา ดวนลี 3.นางสาวอัจฉราพรรณ แซ่ลิ้ม ชื่อเรื่อง : เรื่องเหนือ เหนือ YUMMY เว็บไซด์ สาขาวิชา : การโรงแรม คณะวิชา : อุตสาหกรรมการบริการ ที่ปรึกษา : อาจารย์จารัส รู้สมัย ปีการศึกษา : 2556 บูรณาการจากรายวิชา : ครัวและอุปกรณ์งานครัว, ภาษาอังกฤษภาษาไทย,เทคโนโลยีสารสนเทศ บทคัดย่อ โครงการเหนือ เหนือ YUMMY เว็บไซด์ มีจุดประสงค์เพื่อส่งเสริมและสนับสนุนการปรับเปลี่ยน รูปแบบเว็บไซด์ให้เกิดความแปลกใหม่ และทาให้หันมาสนใจในอาหารภาคเหนือมากขึ้น โดยการ นาเสนอข้อมูลผ่านในรูปแบบของเว็บไซด์ โดยเนื้อหาในเว็บไซด์จะมีทั้ง ภาษาไทยและ ภาษาอังกฤษ นามาทาการสารวจและประเมินผล โดยมีผลการดาเนินการเว็บไซด์ มีรูปแบบมีความ น่าสนใจ เนื้อหาและรูปภาพมีความสัมพันธ์กัน อยู่ในเกณฑ์การประเมินระดับ มากที่สุด เนื่องจากมี ความแปลกใหม่ แต่ยังคงต้องปรับปรุงเนื้อหาที่ต้องเพิ่มและผู้ชมมีความพึงพอใจกับการชมผลงาน ส่วนมาก แต่ต้องปรับปรุงเรื่องของเพลงของผลงานให้มีความเหมาะสม และมีความน่าสนใจมาก ขึ้น โครงการเหนือ เหนือ yummy เว็บไซด์ใช้ระยะเวลาดาเนินการทั้งสิ้น 3 เดือน เริ่มจากเดือน กรกฎาคม จนถึงเดือนกันยายน คณะผู้จัดทา _________________________________ _________________________________ ( อาจารย์สุชาติ เกตุกุล) (อาจารย์ปัญจพร เอื้อจงประสิทธิ์) รองผู้อานวยการฝ่ายวิชาการ ผู้อานวยการ __________________________________ (ผู้ช่วยศาสตรจารย์ดร.ผจญ ขันธะชวนะ) ประธานกรรมการบริหาร วันที่………เดือน…..………….พ.ศ………
6 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ คานา โครงการเหนือ เหนือ YUMMY เว็บไซด์นี้จัดทาขึ้นเพื่อการเรียนรู้พัฒนาองค์ความรู้จาก การศึกษาในสาขาวิชาการโรงแรมคณะอุตสาหกรรมบริการโดยนาความรู้ในรายวิชาต่างๆนามา บูรณาการโดย คณะผู้จัดทา ได้ดาเนินการทา โครงการเหนือ เหนือ YUMMY เว็บไซด์ เนื้อหา ภายในโครงการแสดงถึงความเป็นมาของโครงการ วัตถุประสงค์ เอกสารที่เกี่ยวข้อง วิธีดาเนินการ การประเมิน และการวิเคราะห์ผลดาเนินการ ทั้งนี้การดาเนินการทาโครงการขึ้น จัดเป็นส่วนหนึ่งของรายวิชาโครงการ ในระดับชั้น ประกาศนียบัตรวิชาชีพ ปีที่ 3 รวมทั้งเป็นส่วนส่งเสริมให้นักศึกษาได้นาความรู้จากการปฏิบัติงาน ไปประยุกต์ใช้จริงกับการทางาน สามารถวางแผนการปฏิบัติงานร่วมกันอย่างเป็นขั้นตอนได้ ทั้งยัง ฝึกการแก้ไขปัญหา พัฒนาความรับผิดชอบต่อหน้าที่ที่ได้รับมอบหมาย ส่งผลต่อการนาความรู้ที่ได้ จากการปฏิบัติงานไปประยุกต์ใช้กับการทางานที่ดีในอนาคต ซึ่งการปฏิบัติงานทั้งหมดนี้ อยู่ในการ ควบคุมดูแลของอาจารย์ที่ปรึกษาโครงการ คณะผู้จัดทา
7 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สารบัญ เรื่อง หน้า กิตติกรรมประกาศ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สารบัญ (ต่อ) เรื่อง หน้า - ตัวอย่างแบบประเมิน 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 1 บทนา 1.ความเป็นมาและความสาคัญของปัญหา ในปัจจุบันมีการนาเทคโนโลยีที่ เรียกว่าอินเทอร์เน็ตเข้ามาใช้กันออย่างกว้างขวางแทบทุกหลังคา บ้านทาให้แหล่งข่าวทางการสื่อสารและการกระจายข่าวข้อมูลทางอินเทอร์เน็ตได้ดีขึ้นจึงจะมีการ นาเว็บไซด์โดยการใช้อินเทอร์เน็ตในการกระจายข่าวสารหรือข้อมูลต่างๆผ่านเว็บไซด์ต่างๆ ผู้จัดทาจึงจัดทาโครงการนี้ขึ้น เพื่อศึกษาและค้นคว้าการทาเว็บไซด์อาหารประจา ภาคเหนือและเพื่อเผยแพร่ข้อมูล วิธีการทาอาหารภาคเหนือให้สะดวกและรวดเร็วขึ้นเพื่อให้ผู้เข้ามา ดูเว็บไซด์ได้รับรู้ข้อมูลอาหารประจาภาคเหนือมากขึ้น 2. วัตถุประสงค์ของโครงการ 2.1 เพื่อให้นักศึกษานาความรู้ที่ได้เรียนในสาขาวิชาการโรงแรม มาบูรณาการให้เกิดองค์ความรู้ใหม่ 2.2 เพื่อพัฒนารูปแบบเว็บไซด์ของอาหารประจาภาคเหนือให้มีความน่าสนใจมากขึ้น 2.3 เพื่อเป็นการเผยแพร่อาหารประจาภาคเหนือผ่านเว็บไซด์ ทาให้มีคนรู้จักมากขึ้น 2.4 เพื่อนาไปใช้ในชีวิตประจาวันในการประกอบอาหารและการเรียนรู้ได้อย่างเหมาะสม 2.5 เพื่อทาให้คนหันมาสนใจอาหารของภาคเหนือมากยิ่งขึ้น โดยการนาเสนอผ่านทางเว็บไซด์ 3. ขอบเขตการดาเนินโครงการ สร้างเว็บไซด์อาหารประจาภาคเหนือขึ้นเพื่อให้เว็บไซด์ที่สร้างขึ้น มีความน่าสนใจและ โดดเด่นจากเว็บไซด์อื่น 4.คานิยาม เว็บไซด์ (Web Site) คือ แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ภาคเหนือ/เหนือ : บริเวณที่อยู่ทางเหนือของประเทศ YUMMY : เป็นคาแสลง slang หมายถึง : อร่อย คาที่เกี่ยวข้อง : รสเด็ด, รสเยี่ยม
10 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 5.วิธีการดาเนินการ 6.ประโยชน์ที่คาดว่าจะได้รับ 6.1 สามารถนาความรู้ที่ได้จากหาข้อมูลอาหารประจาภาคเหนือไปใช้ได้ในชีวิตประจา 6.2 รู้จักการสร้างเว็บไซด์ให้มีความน่าสนใจมากยิ่งขึ้น 6.3 สามารถค้นคว้าหาข้อมูลเพิ่มเติมได้จากเว็บไซด์นี้แล้วนาไปประยุกต์ใช้ในการเข้าสู่สมาคม อาเซียน 6.4 รู้จักวิธีการสร้างเว็บไซด์โดยใช้โปรแกรม Dream weaver cs6 มากยิ่งขึ้น 6.5 มีการจัดแจงและแบ่งงานในการช่วยเหลือและร่วมมือกันในการทางาน
11 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 2 เอกสารและทฤษฎีที่เกี่ยวข้อง จากการศึกษา อาหารของภาคเหนือ ผู้จัดทาโครงการได้ศึกษาข้อมูลในการสร้างเว็บไซต์ ผู้จัดทาได้รวบรวมข้อมูลเอกสารและงานวิจัยที่เกี่ยวข้องซึ่งประกอบด้วย 2.1 หนังสือการสร้างเว็บไซต์ 2.2 โปรแกรม Dreamweaver CS6 2.3 โปรแกรม Photoshop CS6 2.1 การสร้างเว็บไซด์ การสร้างเว็บไซด์ให้ออกมาดูดีแบบมืออาชีพและมีคุณภาพนั้นสิ่งที่สาคัญที่สุดไม่ได้อยู่ที่ เทคโนโลยีหรือลูกเล่นในเว็บไซด์แต่สิ่งที่สาคัญที่สุดก็คือการนาเสนอข้อมูลหลักของเว็บไซด์ให้ ตรงกับเป้ าหมายและสื่อสารได้ตามความต้องการของเจ้าของเว็บดังนั้นก่อนที่เราจะเริ่มสร้างเว็บ ไซด์เราควรที่จะเตรียมตัวและวางแผนให้ดีเสียก่อนเพื่อจะได้ประหยัดเวลาและได้เว็บไซด์ที่ ตอบสนองความต้องการได้มากที่สุด การที่เราจะสามารถใช้งานเว็บไซด์ให้ เกิดประโยชน์สูงสุดได้นั้น จาเป็นอย่างยิ่งที่เรา จะต้องเข้าใจถึงลักษณะทั่วไปของเว็บไซด์และจาแนกแยก แยะได้ว่าเว็บไซด์เหล่านั้นมีความ แตกต่างหรือเหมือนกันอย่างไร รวมถึงมีหน้าที่หลักเฉพาะตัวอย่างใดบ้าง ทั้งนี้ เพื่อให้เรามองเห็น ภาพรวมของเว็บไซต์ได้ดียิ่งขึ้น เราอาจแบ่งเว็บไซต์ออกเป็นกลุ่มใหญ่ ๆ ได้ 8 ประเภท ตาม ลักษณะของเนื้อหาและรูปแบบของเว็บไซต์ ซึ่งกลุ่มเว็บไซต์ทั้ง 8 ประเภทนั้น ได้แก่ 1. เว็บท่า (Portal Site) อาจเรียกอีกชื่อหนึ่งว่า เว็บวาไรตี้ ซึ่งหมายถึงเว็บที่ให้บริการต่างๆ ไว้มากมาย มักประกอบ ไปด้วยบริการ เสิร์ชเอ็นจิ้น ที่รวมลิงค์ของเว็บไซต์ที่น่าสนใจไว้มากมายให้เราได้ค้นหา รวมถึง บริการที่เกี่ยวกับเรื่องราวที่มีสาระและบันเทิงหลากหลายประเภท ดูหนังฟังเพลง ดูดวง ท่องเที่ยว ไอที เกม สุขภาพ ฯลฯ 2. เว็บข่าว (News Site) เป็นเว็บที่สร้างขึ้นโดยองค์กรข่าวหรือสถาบันสื่อสาร มวลชนต่างๆ ที่มีสื่อมวลชนประเภท ต่างๆ ของตนอยู่เป็นหลัก เช่น สถานีโทรทัศน์ สถานีวิทยุ หนังสือพิมพ์ นิตยสาร วารสาร หรือ แม้กระทั่ง กระทรวง ทบวง กรมต่างๆ ซึ่งผู้ใช้สามารถค้นหาข้อมูลและติดตามข่าวได้ทุกเวลา
12 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 3. เว็บข้อมูล (Information Site) เป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้น ข้อมูลข่าวสาร หรือข้อเท็จจริงต่างๆ ที่น่าสนใจ องค์กรต่างๆ มักสร้างเว็บข้อมูลของตนขึ้นมาเพื่อเป็นช่องทางให้ประชาชนหรือกลุ่มบุคคลที่ สนใจ เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตน 4. เว็บธุรกิจหรือการตลาด (Business/Marketing Site) สร้างขึ้นโดย องค์กรธุรกิจต่าง ๆ มีจุดประสงค์ในการประชาสัมพันธ์องค์กรและเพิ่มผล กาไรทางการค้าด้วย โดยเนื้อหาส่วนใหญ่หรือเกือบทั้งหมดมักจะเป็นการนาเสนอเกี่ยวกับ รายละเอียด และความน่าสนใจของสินค้าและบริการ 5. เว็บการศึกษา (Educational Site) ส่วนใหญ่สร้างขึ้นโดยสถาบันการศึกษาต่างๆ หรือองค์กรทั้งของภาครัฐและเอกชนที่มี นโยบายในการเผยแพร่ความรู้ และให้โอกาสในการค้นคว้าหาข้อมูลเพื่อการศึกษาแก่นักเรียน นิสิต นักศึกษา รวมถึงประชาชนทั่วไป เว็บการศึกษาให้ข้อมูลเกี่ยวกับการเรียนรู้ที่เป็นทางการและไม่ เป็นทางการ บริการการเรียนรู้แบบออนไลน์ หรือที่เรียกว่า อีเลิร์นนิ่ง (E-Learning) ต่าง ๆ 6. เว็บบันเทิง (Entertainment Site) เป็นเว็บนาเสนอและให้บริการต่างๆ เพื่อเสริมสร้างความบันเทิง จะเป็นเรื่องราวเกี่ยวกัน ดนตรี ภาพยนตร์ ดารา กีฬา เกม ความรัก บทกลอน การ์ตูน เรื่องขาขัน รวมถึงบริการดาวน์ โหลดโลโก้และริงโทนสาหรับโทรศัพท์เคลื่อนที่ด้วย 7. เว็บองค์กรที่ไม่แสวงหาผลกาไร (Non-profit Organization Site) ส่วนใหญ่สร้างขึ้นโดยบุคคลหรือองค์การต่าง ๆ ที่มีนโยบายในการสร้างและช่วยเหลือ สังคมโดยที่ไม่หวังผลกาไรหรือค่าตอบแทน ซึ่งกลุ่มบุคคลหรือองค์การเหล่านี้ได้แก่ สมาคม ชมรม มูลนิธิ และโครงการต่างๆ โดยอาจจะมีจุดประสงค์เฉพาะที่แตกต่างกันเช่น เพื่อทาความดี สร้างสรรค์สังคม พิทักษ์สิ่งแวดล้อม ปกป้ องสิทธิมนุษยชน รณรงค์ไม่สูบบุหรี่ เป็นต้น
13 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ Dreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้นโดยมีเครื่องมือ 1. FTP เราสามารถแก้ไข หน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ Dreamweaver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไข ได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ ของเราสารองไว้ในเครื่องเราได้ 2. Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดง ให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทาการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้ว เราต้องแก้เว็บเพจของเราตลอดช่วยให้เราทาเว็บได้ง่ายขึ้น
15 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สาหรับคนที่ไม่เคยทาเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อ พัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสาหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทาให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamweaver มีเครื่องมือมากมายและ ทางานเชื่อมต่อกับโปรแกรมดังๆมากมายเช่น Photoshop, Illustrator, Flash หรือแม้แต่กระทั่งการ ใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งาน ในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ, หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้คงทาให้มองภาพของ Dreamweaver ว่าเป็นเครื่องมือที่อานวยความสะดวก มากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆที่ออกมา และ ช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก
16 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เครื่องมือต่างๆในโปรแกรม Dreamweaver สาหรับ Dreamweaver เป็นโปรแกรมสร้างโฮมเพจแบบเสมือนจริง โดยไม่ต้อง เขียนภาษา HTML เองหรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG" เราสามารถใช้หน้าจอเสมือนจริงของ Dreamweaver ในการทา เว็บเพจได้เลย โดยใช้เครื่องมือต่างๆที่มีมาให้ดังแสดงในรูปด้านล่าง หน้าตาของโปรแกรม Dreamweaver และชื่อเรียกเครื่องมือต่างๆ
17 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ อธิบายเครื่องมือต่างๆ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 3. Property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็ จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จานวนแถวและหลักของตาราง เป็นต้น 4.docking panels เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซด์ ไฟล์ CSS และ ใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดย การคลิกที่รูปลูกศรด้านซ้ายมือของ panels
19 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เริ่มต้นด้วยการสร้างหน้าเว็บเพจ การสร้างเอกสารใหม่ของ Dreamweaver นั้นทาได้ง่ายมากเมื่อเปิด โปรแกรมขึ้นมาจะเห็นว่ามีหน้าจอดังภาพ เราสร้างเอกสารได้จากหน้าจอนี้ดังรูป จากหน้าจอจะเห็นว่ามีชนิดไฟล์มากมายที่เราสามารถสร้างได้แต่ในบทนี้จะขอพูดถึงแค่ HTML เท่านั้น นอกเหนือจากการใช้หน้าจอเริ่มต้นเมื่อเปิดโปรแกรมเรายังสามารถสร้างเอกสารใหม่ได้
23 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การตั้งชื่อให้กับเว็บเพจนั้นจะต้องตั้งเป็นภาษาอังกฤษเท่านั้น และการตั้งชื่อห้ามมีการเว้นวรรคใน ชื่อ เราอาจใช้เครื่องหมาย 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สามารถเปลี่ยน 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ จากบทความเรื่องการกาหนด 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เครื่องมือที่ใช้ปรับแต่งภาพ เมื่อเราคลิกที่ภาพ ที่ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สร้าง 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สร้างลิงค์ไปยังเว็บไซต์อื่น 1. เปิดหน้าที่ต้องการสร้างลิงค์ขึ้นมา 2. เลือกตัวอักษร หรือรูปภาพที่ต้องการสร้างลิงค์ 3. ที่ Property inspector ให้ใส่ชื่อเว็บที่ต้องการลิงค์ไป เช่น ในรูปเลือกภาพเป็นลิงค์ 3.1.ช่องลิงค์ใส่ http://www.hellomyweb. 3.2.จากนั้นที่ช่อง border ให้ใส่ค่า 0 เพื่อไม่ให้มีขอบรูปเมื่อรูปเป็ นลิงค์ แค่นี้ก็สามารถสร้างลิงค์ไปยังเว็บไซต์อื่น และไฟล์ต่างๆในเว็บไซต์ของตัวเองได้แล้ว ปรับแต่งเว็บเพจด้วย Page Properties Page propertiese สามารถทาให้เราปรับแต่งเว็บเพจ ของเราได้ทั้งพื้นหลัง, ชนิดตัวอักษร, รูปแบบของ hyperlink และอื่นๆ อีกมากที่เราสามารถปรับได้ ด้วยเครื่องมือนี้
31 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การใช้งานเครื่องมือ Page Properties สามารถทาได้ดังนี้ 1.เปิดเว็บเพจที่ต้องการปรับแต่ง 2.ไปที่ Menu เลือก Modify > Page Properties 3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง ทดลองเปลี่ยน พื้นหลัง , ชนิดของ font , สีของตัวอักษร , ระยะห่างของวัตถุกับหน้าเว็บเพจ 1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง 2.ไปที่ Menu เลือก Modify > Page Properties 3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง 4.ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับดังรูป
32 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink เราสามารถเปลี่ยนสี ขนาด การขีดเส้นใต้ของตัวอักษรที่เป็น Hyperlink ได้ตามขั้นตอนด้านล่าง 1.เปิดหน้าเว็บเพทที่ต้องการปรับแต่ง 2.ไปที่ Menu เลือก Modify > Page Properties 3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การแทรก 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ อยู่แล้วซึ่งถ้าเราต้องการจะแสดงผลหน้าเว็บเพจที่เราทาอยู่ก็สามารถ กดปุ่ม F12 ที่คีย์บอร์ด หรือ ไปที่ Document tool bar จะเห็นรูปลูกโลกเมื่อคลิกก็จะเป็นการแสดงเว็บเพจของเราใน Browser ในกรณีที่เราต้องการตั้งค่า Browser ที่ใช้ในการแสดงผลเองก็สามารถทาได้โดยไปที่ Menu ไปที่คา ว่า File > Preview in Browser > Edit browser list ก็จะมีหน้าต่างขึ้นมาดังรูปให้เราสามารถแก้ไข เพิ่ม Browser ที่ใช้ในการแสดงผลได้ 2.3 โปรแกรม Photoshop CS6 โปรแกรม Photoshop CS6 มีส่วนสาคัญหลักที่ต้องทาความรู้จัก
38 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เมนูของโปรแกรม 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เทคนิค : ต้องให้แน่ใจว่าได้ทาเครื่องหมายในช่องของ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ วิธีกาหนดค่าการเปิดแสดงภาพ โดยไปที่ Preference ของโปรแกรม Photoshop กาหนดค่า Interface โดยเลือกที่ช่อง Open Document as Tabs ซึ่งเป็นการกาหนดเพื่อให้เปิดแสดงภาพในรูปแบบของ Tabs ถ้าเราไม่ เลือกช่องนี้ ภาพที่เปิดจะแสดงเป็นแบบ Window คุณสมบัติพิเศษ ถ้าเลือกที่ Enable Floating Document Window Docking ซึ่งอยู่ถัดจากช่อง ของ Open Document as Tabs เป็นการตั้งค่าเพื่อให้สามารถลาก Window ไปยังแถบของ Tab และ เปลี่ยนลักษณะจาก Window เป็น Tab ได้
41 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การเปิด preference / กด Ctrl + K การเปลี่ยนการแสดงภาพแบบ Tab เป็น Window เวลาที่เราทางาน อาจต้องการสลับการแสดงภาพ จาก Tab ให้เป็น Window หรือ กลับกันสามารถใช้คาสั่งโดยใช้เมนูโปรแกรม เลือก Window – Arrange (ภาพซ้าย) เมื่อกด Arrange แล้ว ก็จะมีรายการหลักสองส่วน (ภาพขวา) ให้ เลือกว่าต้องการแสดงโดยการเรียงภาพแบบไหน เช่น แนวตั้ง หรือ แนวนอนและ การแสดงภาพ แบบไหน ถ้าต้องการเปลี่ยนการแสดงภาพแบบ Window ให้เป็น Tab ทั้งหมด ก็เลือก Consolidate All to Tabs แต่ถ้าต้องการเพียง บางภาพ ทาโดย นาเม้าส์คลิกที่ Window นั้นแล้วลากไปที่แผงของ
42 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ อีกวิธีหนึ่งทาได้โดยกดปุ่ม Workspace Bar จะมีรายการรูปแบบทั้งเจ็ดเลื่อนลงมาให้เลือก การกาหนดพื้นที่ทางานของเราเอง ทาได้เพราะโปรแกรม Photoshop CS6 มีระบบที่ทาให้เรา กาหนดเองได้โดยใช้เมนูโปรแกรม เลือก Window - เลือก Panel ที่ต้องการ (ภาพด้านขวา เริ่มตั้งแต่ 3D panel ) ให้แสดงอยู่ในพื้นที่การทางาน เมื่อจัดตาแหน่งเรียบร้อยแล้ว ให้กดปุ่ม Workspace Bar - เลือก New Workspace - ทาการตั้งชื่อพื้นที่ทางานของเรา - แล้วทาการ Save (ช่อง Keyboard Shortcuts / Menus จะเลือกหรือไม่ก็ได้ถ้าเราไม่มีการปรับตั้งค่าใหม่ในสองส่วนนี้ก็ไม่ต้องเลือก) หลังจากทาการบันทึกแล้ว ถ้าเรากดปุ่ม Workspace Bar ก็จะมีรายชื่อที่เราบันทึกไว้แสดงรวมอยู่ กับรายการพื้นที่อื่นๆ (ชื่อที่เห็นบนปุ่ม Workspace Bar นี้จะเปลี่ยนไปตามการแสดงชื่อพื้นที่ ปัจจุบันที่เราเลือก)
44 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การลบพื้นที่การทางาน ถ้าคิดว่าไม่ต้องการใช้รูปแบบพื้นที่เรา กาหนดขึ้นเอง อีกต่อไปแล้ว ก็ให้กด ปุ่ม 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ  กดปุ่ม 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ  กดปุ่ม Space Bar ค้างไว้ เมาส์จะเปลี่ยนเป็นรูปมือ คลิกค้างไว้ที่ภาพแล้วเลื่อนภาพได้ ตามที่ต้องการ  Bird Eye View เป็นเครื่องมือซึ่งใช้ในกรณีพิเศษ เป็นการใช้ขณะที่เราทาการขยายภาพใหญ่ มากๆ เพื่อดูเฉพาะจุดนั้น แล้วต้องการเปลี่ยนจุดที่ต้องการดูไปยังจุดอื่น ให้คลิกเครื่องมือ Hand Tool หรือ กด H คลิกเมาส์ค้างไว้ที่ภาพ เมาส์จะมีสัญญาลักษณ์สี่เหลี่ยมแสดงขึ้น ล้อมรอบเมาส์ พร้อมทั้งภาพจะลดขนาดลงไปให้เราเห็นทั้งภาพ ทาการเลื่อนเมาส์ไปยังจุด ที่เราต้องการดู ปล่อยเมาส์ ภาพจะขยายขึ้นมาตามขนาดเดิม และส่วนที่เราเลือกจะอยู่ กึ่งกลางหน้าจอทางานพอดี เทคนิค ขณะที่แสดงภาพเป็นแบบ 2 Up Vertical ให้กดShift + Space Bar ค้างไว้แล้วใช้เมาส์ คลิกค้างไว้ที่ภาพใดภาพหนึ่ง ทาการเลื่อนภาพ ภาพทั้งสองจะทาการเลื่อนไปในทิศเดียวกัน และ พร้อมกัน การทาแบบนี้เหมาะกับการดูภาพที่เหมือนกันสองภาพ เช่น ภาพก่อนแต่ง หรือ หลังแต่ง ภาพ เพื่อเปรียบเทียบการเปลี่ยนแปลง การปรับหน้าจอแสดงภาพ (Screen Mode) จอแสดงภาพของโปรแกรม Photoshop CS6 มีด้วยกัน 3 แบบ การเลือกแต่ละแบบทาได้โดย คลิกที่ ไอคอน Change Screen Mode (รูปสี่เหลี่ยมซ้อนกันสองรูป) ที่แถบเครื่องมือ หรือ จะกดคีย์ลัด F ก็
47 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ได้ กด 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ โปรแกรม Photoshop สามารถกาหนดขนาดของภาพ และความละเอียดได้ขณะที่สร้างงานใหม่ ขึ้นมา สามารถกาหนดขนาด Width and Height เป็น Pixels, Inches, Centimeters, Millimeters, Points,Picas,Columns ถ้าต้องการเปลี่ยนแปลงขนาด หรือ ความละเอียดของชิ้นงานหลังจากที่ได้กาหนดไว้แล้วตั้งแต่ต้น ขั้นแรกจะต้องเปิดหน้า Image Size โดยใช้เมนูโปรแกรม Image เลือก Image size ก็จะได้หน้าต่าง ดังกล่าว สามารถทาการปรับแต่งได้เป็น 3 ส่วน
49 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ส่วนที่หนึ่ง 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บันทึกงานเป็นไฟล์ TIFF (สาหรับงานพิมพ์) ก่อนบันทึกงาน ให้ทาการรวมเลเยอร์ให้เป็น Flat Layer ก่อน เพื่อลดขนาดไฟล์ เพราะไฟล์ประเภทนี้จะมีขนาดค่อนข้างใหญ่ แต่อย่าลืมขณะบันทึก ต้องแน่ใจว่าได้เลือกที่ช่อง Layer ไว้ด้วย กรณีนี้จะสามารถเปิดไฟล์เพื่อมาแก้ไขในโปรแกรม Photoshop ได้อีก แต่ถ้าแน่ใจว่าไม่ต้องการกลับมาแก้ไขอีก ให้บันทึกโดยไม่ต้องเลือกช่อง Layer และให้กาหนดค่าใน TIFF Option แทนเพื่อให้เหมาะกับความต้องการ
51 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บันทึกงานเป็นไฟล์ PNG การบันทึกงานประเภทนี้จะมีขนาดไฟล์ที่ค่อนข้างเล็ก แต่ไม่สามารถเรียก กลับมาแก้ไขใน Photoshop ได้อีก เหมาะกับงานประเภทที่ใช้แสดงผลบนเว็บไซด์
52 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บันทึกงานเป็นไฟล์ JPEG ไฟล์ประเภทนี้จะให้ภาพที่ค่อนข้างสวยงาม แต่ก็จะมีขนาดของไฟล์ใหญ่ พอสมควร ก่อนที่จะบันทึกก็ลองปรับค่าคุณภาพของภาพตามประเภทของงานที่จะนาไปใช้ต่อไปดู นะครับ สามารถปรับได้ตั้งแต่ 0 - 12 เรียกจากความละเอียดของภาพจากน้อยไปหามาก
53 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ โปรแกรม Photoshop มีจุดเด่นที่ให้เราเรียกงานก่อนหน้านั้นกลับคืนมาได้ โดยการใช้ History panel โดยเลือกขั้นตอน Open ชิ้นงานของเรา ทุกสิ่งก็จะกลับมาที่ขั้นเริ่มต้นที่เราเปิดภาพ หรือชิ้นงานนั้นขึ้นมา แต่ครั้งนี้เราจะต้องทาการบันทึกใหม่นะ เพราะไม่นั้นชิ้นงานของเราก็จะเป็น ชิ้นงานที่แก้ไขโดยไม่ได้ตั้งใจชิ้นนั้นเหมือนเดิม
54 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 3 วิธีดาเนินการ จากที่สมาชิกในกลุ่ม ได้ศึกษาข้อมูลที่เกี่ยวข้องในการดาเนินโครงการเรื่อง เหนือ เหนือ YUMMY จากทางเว็บไซด์ หนังสือเกี่ยวกับอาหารทางภาคเหนือ หนังสือการทาเว็บไซด์ ในกลุ่มได้ มีความคิดเห็นว่า อาหารทางภาคเหนือมีความน่าสนใจ และมีเอกลักษณ์ประจาท้องถิ่นนั้นๆ จึง ศึกษาเพิ่มเติมและเกิดความคิดสร้างสรรค์ในการทาเว็บไซด์ เหนือ เหนือ YUMMY ขึ้นมา จุดประสงค์หลักเพื่อที่จะให้อาหารทางภาคเหนือมีความน่าสนใจและเป็นที่รู้จักกันอย่างแพร่หลาย มากยิ่งขึ้น ดังนั้นสมาชิกในกลุ่มจึงมีความคิดเห็นที่จะสร้างเว็บไซด์เกี่ยวกับอาหารทางภาคเหนือขึ้น โดยมีข้อสรุปที่จะใช้วัสดุ อุปกรณ์ และดาเนินการตามขั้นตอน ดังต่อไปนี้ วิธีการทา “YUMMY” 3.1 วัสดุ/อุปกรณ์ ลาดับ วัสดุ/อุปกรณ์ จานวน 1. เครื่องคอมพิวเตอร์ (Computer) 1 2. อินเทอร์เน็ต (Internet) 1 3. โปรแกรมการสร้างเว็บไซด์ Dreamweaver cs6 1 4. โปรแกรม Photoshop CS6 1 5. ปริ้นเตอร์(Printer) 1
55 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 3.2 ขั้นตอนการดาเนินงาน Step 1 เปิดโปรแกรมขึ้นมา สร้างหน้ากระดาษเปล่า New > Custom เลือดขนาดตามต้องการ Step 2 ได้ขนาดมาแล้วจัดการเท่สีที่เราจะทา พอเท่สีเสร็จให้เราพิมพ์ตัวหนังสืออะไรก็ได้ใส่เข้าไป เลือกขนาด เลือกสี เลือกฟอนท์ที่ต้องการ
56 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ
57 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ
58 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ Step 3 สร้าง เลเยอร์เพิ่มโดยการคลิ้กขวาที่เลเยอร์ตัวหนังสือเลือก Duplicate layer กด Ok ตามภาพ
59 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 3.3 ขั้นตอนการสร้างเว็บไซด์ รูปที่ 1 หารูปภาพ Background ที่เราต้องการ รูปที่ 2 หา Icons ที่เราต้องการ
61 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 3 เปิดหน้าต่างโปรแกรม Photoshop รูปที่ 4 ขั้นตอนการออกแบบหัวเว็บไซด์
62 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 5 ขั้นตอนการออกแบบปุ่มตัวเลือก รูปที่ 6 ขั้นตอนการออกแบบหน้าแรก “อาหารภาคเหนือ”
63 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 7 ขั้นตอนการออกแบบรูปภาพ รูปที่ 8 ขั้นตอนการออกแบบ “ภูมิประเทศ”
64 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 9 ขั้นตอนการออกแบบ “คาขวัญ” รูปที่ 10 ขั้นตอนการออกแบบ ลิงค์ “คาขวัญ”
65 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 11 ขั้นตอนการออกแบบ “ประเพณีการรับประทานอาหาร” รูปที่ 12 ขั้นตอนการออกแบบ “เมนูอาหาร”
66 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 13 ขั้นตอนการออกแบบ ลิงค์ “เมนูอาหาร” รูปที่ 14 ขั้นตอนการออกแบบ ลิงค์ “ส่วนผสม”
67 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 15 ขั้นตอนการออกแบบ ลิงค์ “วิธีการทา” รูปที่ 16 ขั้นตอนการออกแบบ ลิงค์ “คุณค่าทางโภชนาการ”
68 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 17 ขั้นตอนการออกแบบ“กล่องข้อความ” รูปที่ 18 เปิดหน้าต่างโปรแกรม Dream Weaver
69 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 19 เริ่มออกแบบและสร้าง header ของเว็บไซด์ รูปที่ 20 ออกแบบหน้าแรก ของเว็บไซด์
70 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 21 ออกแบบ "คาขวัญ" ของเว็บไซด์ รูปที่ 22 ออกแบบ ลิงค์ "คาขวัญ" ของเว็บไซด์
71 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 23 ออกแบบ "ประเพณี" ของเว็บไซด์ รูปที่ 24 ออกแบบ "อาหาร" ของเว็บไซด์
72 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 25 ออกแบบ "ส่วนผสม" ของเว็บไซด์ รูปที่ 26 ออกแบบ "วิธีทา" ของเว็บไซด์
73 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 27 ออกแบบ "คุณค่าทางอาหาร" ของเว็บไซต์ รูปที่ 28 การใส่เพลงในเว็บไซต์
74 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ผลสรุปการทดลองจากการประเมินภายในกลุ่ม รายการ ครั้งที่ 1 ครั้งที่ 2 1. รูปแบบ เว็บไซด์ มีความน่าสนใจ ตัวหนังสือเล็กเกินไป ควรปรับให้ใหญ่กว่านี้ ปรับขนาดตัวหนังสือ ให้ใหญ่กว่าเดิม 2. รูปภาพและสีสันใน เว็บไซด์ มีความสวยงาม มีสีสันมากเกินไป ทาให้ ลายตา ลดสีสันให้น้อยลง ดู แล้วสบายตา 3. รูปภาพกับเนื้อหาสัมพันธ์กัน รูปภาพน้อยเกินไป ใส่รูปภาพเพิ่มเติม 4. ใช้ภาษาได้อย่างถูกต้องและเหมาะสม ควรใส่ภาษาอังกฤษเพิ่ม เพิ่มเติมภาษาอังกฤษ 5. เพลงที่ใช้ในการประกอบเว็บไซด์ มีความเหมาะสม เพลงเร็วเกินไป ไม่เข้ากับ เว็บไซด์ เปลี่ยนเพลงใหม่ให้ช้า ลงกว่าเดิม 6. เนื้อหามีความน่าสนใจและเหมาะสม เนื้อหาน้อยเกินไป ใส่เนื้อหาเพิ่ม 7. รายละเอียดครอบคลุมกับเว็บไซด์ ข้อมูลน้อยเกินไป เพิ่มข้อมูลที่เกี่ยวข้อง
75 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ หลังจากการดาเนินการแล้ว สมาชิกภายในกลุ่มมีความเห็นว่า ต้องการให้บุคคลภายนอกทา การประเมินผลการดาเนินการให้ เพื่อสารวจความนิยม และนาผลการประเมินมาทาการปรับปรุง ผลิตภัณฑ์ จึงได้จัดทาคาถามสาหรับการประเมินผล ดังนี้ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ผลสรุปการทดลองจากการประเมินภายในกลุ่ม รายการ ครั้งที่ 1 ครั้งที่ 2 8. รูปแบบ เว็บไซด์ มีความน่าสนใจ ตัวหนังสือเล็กเกินไป ควรปรับให้ใหญ่กว่านี้ ปรับขนาดตัวหนังสือ ให้ใหญ่กว่าเดิม 9. รูปภาพและสีสันใน เว็บไซด์ มีความสวยงาม มีสีสันมากเกินไป ทาให้ ลายตา ลดสีสันให้น้อยลง ดู แล้วสบายตา 10. รูปภาพกับเนื้อหาสัมพันธ์กัน รูปภาพน้อยเกินไป ใส่รูปภาพเพิ่มเติม 11. ใช้ภาษาได้อย่างถูกต้องและเหมาะสม ควรใส่ภาษาอังกฤษเพิ่ม เพิ่มเติมภาษาอังกฤษ 12. เพลงที่ใช้ในการประกอบเว็บไซด์ มีความเหมาะสม เพลงเร็วเกินไป ไม่เข้ากับ เว็บไซด์ เปลี่ยนเพลงใหม่ให้ช้า ลงกว่าเดิม 13. เนื้อหามีความน่าสนใจและเหมาะสม เนื้อหาน้อยเกินไป ใส่เนื้อหาเพิ่ม 14. รายละเอียดครอบคลุมกับเว็บไซด์ ข้อมูลน้อยเกินไป เพิ่มข้อมูลที่เกี่ยวข้อง
77 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 4 การสารวจ และประเมินผล จากที่ได้จัดทาแบบสอบถามเพื่อทาการประเมินผล จากประชากรเป็นนักศึกษาภาคปกติ ภายในวิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระอุปถัมภ์ฯ ทั้งหมด 1,200 คน โดยใช้วิธีการสุ่ม ตัวอย่าง(Sampling) จึงได้จานวนกลุ่มตัวอย่างทั้งสิ้น 50 คน ใช้หลักการคานวณสูตรของ ทาโร ยามา เน่ (Taro Yamane , 1973 : 727-728) และ ของ R. VKrejcie and D.W. Morgan เพื่อป้ องกันการผิดพลาดจึงกาหนดให้ทาการสารวจจากกลุ่มตัวอย่างทั้งหมดจานวน100 คน แต่ทั้งนี้ ทางสมาชิกเห็นว่าจะเป็นการใช้งบประมาณมากเกินไป เพื่อให้การประเมินมีความพึงพอใจ จึงได้ทาการสารวจทั้งหมด 50 คน แต่ทาแบบกระจายกลุ่มตัวอย่าง
78 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระอุปถัมภ์ฯ แบบประเมินความพึงพอใจโครงการ “เหนือ เหนือ YUMMY” เว็บไซด์ รายวิชา “โครงการ” ภาคเรียนที่ 1 ปีการศึกษา 2556 คาชี้แจงแบบสอบถามสารวจเพื่อพัฒนาการเรียนการสอนในสาขาการโรงแรม ตอนที่ 1 ข้อมูลผู้ตอบแบบสอบถาม เพศ ชาย หญิง ตาแหน่งหน้าที่ / ระดับการศึกษา อาจารย์ นักศึกษาระดับชั้น ปวช. ................ นักศึกษาระดับชั้น ปวส. ................. ตอนที่ 2 ให้ทาเครื่องหมาย √ ในช่องที่ตรงกับความคิดเห็น หมายเหตุ ระดับความคิดเห็น 5 หมายถึงเหมาะสมมากที่สุด ระดับความคิดเห็น 4 หมายถึงเหมาะสมมาก ระดับความคิดเห็น 3 หมายถึงเหมาะสมปานกลาง ระดับความคิดเห็น 2 หมายถึงเหมาะสมน้อย ระดับความคิดเห็น 1 หมายถึงเหมาะสมน้อยที่สุด ตอนที่ 3 ข้อเสนอแนะ ……………………………………................................................................ …………………………………….................................................................................................... รายการ ระดับความคิดเห็น 5 4 3 2 1 15. รูปแบบ เว็บไซด์ มีความน่าสนใจ 16. รูปภาพและสีสันใน เว็บไซด์ มีความสวยงาม 17. รูปภาพกับเนื้อหาสัมพันธ์กัน 18. ใช้ภาษาได้อย่างถูกต้องและเหมาะสม 19. เพลงที่ใช้ในการประกอบเว็บไซด์ มีความเหมาะสม 20. เนื้อหามีความน่าสนใจและเหมาะสม 21. รายละเอียดครอบคลุมกับเว็บไซด์
79 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รวมภาพผลการประเมิน รูปที่1.ประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยคณะอาจารย์
80 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รวมภาพผลการประเมิน รูปที่ 2 ประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยนักศึกษาของวิทยาลัยเทคโนโลยีสยาม ธุรกิจ ในพระอุปถัมภ์ฯ
81 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ตารางสรุปผลการประเมิน ตารางที่ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ตารางที่ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ โดยนาผลคะแนนที่ได้จากการทา 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ มีเกณฑ์การประเมินผล ดังนี้ คะแนนเฉลี่ย 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สรุปผลการประเมิน โครงการ “เหนือ เหนือ YUMMY” เว็บไซด์ มีรูปแบบมีความน่าสนใจ เนื้อหาและรูปภาพ มีความสัมพันธ์กัน อยู่ในเกณฑ์การประเมินระดับ มากที่สุด ซึ่งถือเป็นจุดเด่นของผลงาน เนื่องจาก มีความแปลกใหม่ แต่ยังคงต้องปรับปรุงเนื้อหาที่ต้องเพิ่มและผู้ชมมีความพึงพอใจกับการชมผลงาน ส่วนมาก โดยอาจศึกษาขั้นตอนการทาผลงานเพิ่มเติมจากแหล่งความรู้ต่างๆที่เกี่ยวข้อง และต้อง ปรับปรุงเรื่องของเพลงของผลงานให้มีความเหมาะสม และมีความน่าสนใจมากขึ้น การนาเสนอ ผลงานสื่อการเรียนการสอน “เหนือ เหนือ YUMMY” เว็บไซด์ เป็นที่นิยมในกลุ่มผู้ชมส่วนใหญ่ โดยที่ยังเนื้อหาเรื่องราวให้เกิดประโยชน์ต่อผู้ชมมากที่สุด ผลการประเมินโครงการ เหนือ เหนือ YUMMY” เว็บไซด์ ถือว่าอยู่ในเกณฑ์ที่สมาชิก กลุ่มผู้จัดทาโครงการพึงพอใจ และจะนาไปปรับปรุงในส่วนที่ต้องพัฒนา และแก้ไข เพื่อให้ผู้ชม เกิดพึงพอใจสูงสุดต่อผลงานสื่อการเรียนการสอน “เหนือ เหนือ YUMMY” เว็บไซด์ ทั้งหมด นักศึกษาระดับชั้น ปวช.1 5 คน คิดเป็นร้อยละ 10 ของจานวนผู้ตอบ แบบสอบถามทั้งหมด ปวช.2 4 คน คิดเป็นร้อยละ 8 ของจานวนผู้ตอบแบบสอบถามทั้งหมด ปวช.3 17 คนคิดเป็นร้อยละ 34 ของจานวนผู้ตอบแบบสอบถามทั้งหมดและนักศึกษาระดับชั้น ปวส.1 9 คน คิดเป็นร้อยละ 18 ของจานวนผู้ตอบแบบสอบถามทั้งหมด ปวส.2 5 คน คิดเป็น ร้อยละ 10 ของจานวนผู้ตอบแบบสอบถามทั้งหมด เมื่อได้ทาการสารวจกลุ่มตัวอย่างเรียบร้อยแล้ว สมาชิกในกลุ่มนาแบบสอบถามทั้งหมดมาทา การนับคะแนน โดยวิธีการ Tally สรุปได้ผลดังตารางต่อไปนี้
86 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 5 สรุป วิเคราะห์ผลการดาเนินการ วัตถุประสงค์ของการวิจัย เพื่อให้นักศึกษานาความรู้ที่ได้เรียนในสาขาวิชาการโรงแรม มาบูรณาการให้เกิดองค์ความรู้ใหม่ 1. เพื่อพัฒนารูปแบบเว็บไซด์ของอาหารประจาภาคเหนือให้มีความน่าสนใจมากขึ้น 2. เพื่อเป็นการเผยแพร่อาหารประจาภาคเหนือผ่านเว็บไซด์ ทาให้มีคนรู้จักมากขึ้น 3. เพื่อนาไปใช้ในชีวิตประจาวันในการประกอบอาหารและการเรียนรู้ได้อย่างเหมาะสม 4. เพื่อทาให้คนหันมาสนใจอาหารของภาคเหนือมากยิ่งขึ้น โดยการนาเสนอผ่านทางเว็บไซด์ ประชากรและกลุ่มตัวอย่าง (ในการสารวจ) นักศึกษาและอาจารย์วิทยาลัยเทคโนโลยี สยามธุรกิจในพระอุปถัมภ์ฯ จานวน 50คน จาก 1,200 คน ภาคปกติ เครื่องมือที่ใช้ในการวิจัย (ในการสารวจ) 1. แบบสอบถาม 2. เครื่องคอมพิวเตอร์ การเก็บรวบรวมข้อมูล (วิธีขั้นตอนการได้มา) การเก็บรวบรวมข้อมูลที่ได้มานั้น ได้มาจากเสนอเว็บไซด์กับผู้ทาแบบประเมิน โดยการเสนอ เว็บไซด์อาหารภาคเหนือให้กับผู้ทาแบบประเมิน และให้ผู้ประเมินทาการชมและกรอก แบบสอบถามโดยวิธีเช็ค โดยการสุ่มผู้ทาแบบประเมินเป็นอาจารย์และนักศึกษาระดับ ปวช,ปวส ระดับความพึงพอใจจากระดับดีมาก-ควรปรับปรุง เปรียบเป็น5-1 ข้อจากัดของการวิจัย (ในการสารวจ) 1. ผู้ทาแบบประเมินมีเวลาจากัดในการประเมินแบบสอบถาม 2. ขาดความรู้อย่างละเอียดในการทาเว็บไซด์
87 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ปัญหาและอุปสรรค 1. ขาดความรู้ความเข้าทางด้านอาหารภาคเหนือ 2. ไม่มีความรู้ทางด้านการสร้างเว็บไซด์โดยการใช้โปรแกรม Dreamweaver cs6 3. ไม่มีความรู้ด้านการใช้โปรแกรม Photoshop CS6 4. ข้อมูลของอาหารภาคเหนือในสื่อแต่ละเว็บไซด์ มีข้อมูลที่ไม่ค่อยตรงกัน แนวทางการแก้ไข 1. ศึกษาจากหนังสือ นิตยสาร และเว็บไซด์ที่เกี่ยวกับการสร้างเว็บไซด์ 2. ศึกษาจากหนังสือ เว็บไซด์และผู้เชี่ยวชาญด้านการสร้างเว็บไซด์เพิ่มเติม 3. ศึกษาจากหนังสือและเว็บไซด์ในการใช้โปรแกรม Photoshop CS6 4. นาข้อมูลแต่ละเว็บไซด์มาเปรียบเทียบกันว่าข้อมูลมีความตรงกันมากน้อยเพียงใด และเว็บ ไซด์ไหนมีความเชื่อถือมากที่สุด วิเคราะห์ผลการดาเนินการ โครงการเว็บไซด์ เหนือ เหนือ YUMMY เกิดขึ้นเพราะเห็นถึงความสาคัญของเว็บไซด์ใน ปัจจุบันมากขึ้น ในปัจจุบันมีการนาเทคโนโลยีที่ เรียกว่าอินเทอร์เน็ตเข้ามาใช้กันออย่างกว้างขวาง แทบทุกหลังคาบ้านทาให้แหล่งข่าวทางการสื่อสารและการกระจายข่าวข้อมูลทางอินเทอร์เน็ตได้ดี ขึ้นจึงจะมีการนาเว็บไซด์โดยการใช้อินเทอร์เน็ตในการกระจายข่าวสารหรือข้อมูลต่างๆผ่านเว็บ ไซด์ต่างๆ โดยการนาเสนอข้อมูลอาหารภาคเหนือ วิธีการทา ส่วนผสมในการประกอบอาหาร ภาคเหนือ นาเสนอข้อมูลผ่านทางเว็บไซด์ เพื่อที่จะให้ผู้คนหันมาสนใจในอาหารภาคเหนือมากขึ้น เพราะผู้คน ในปัจจุบัน ใช้อินเทอร์เน็ตในการติดต่อสื่อสาร และค้นหาข้อมูล หลังจากการดาเนินการและนาผลงานเว็บไซด์ เหนือ เหนือ YUMMY มาให้กลุ่มตัวอย่าง ประเมินแล้ว พบเรื่องที่ต้องปรับปรุงคือ เรื่องเนื้อหาในเว็บไซด์ เพลงประกอบในเว็บไซด์ ซึ่ง ผลงานเว็บไซด์เหนือ เหนือ YUMMY เป็นที่พอใจมากกับผู้ชม เนื้อหาของเว็บไซด์ยังไม่เป็นที่พึง พอใจสูงสุดต่อกลุ่มผู้ชม อาจต้องมีการปรับเปลี่ยนเนื้อหา หาเนื้อหามาเพิ่มเติมในเว็บไซด์ เพื่อให้ เกิดความน่าสนในกลุ่มผู้ชมมากขึ้น แต่ต้องยังคงเนื้อหาเรื่องราวที่สาคัญเอาไว้เพื่อให้เกิดประโยชน์ ต่อผู้ชมมากที่สุด
88 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ทั้งนี้การดาเนินการโครงการเว็บไซด์ เหนือ เหนือ YUMMY ถือว่ามีผลเป็นที่พึงพอใจต่อกลุ่ม ผู้จัดทา ที่ได้เผยแพร่ข้อมูลอาหารภาคเหนือผ่าทางรูปแบบเว็บไซด์และมีส่วนร่วมให้ผู้ชมหันมาใส่ ใจต่อการเรียนรู้เกี่ยวกับการทาอาหารภาคเหนือที่ให้คุณประโยชน์กับผู้ชมมากขึ้น และพร้อมที่จะ นาผลการประเมินไปปรับปรุง พัฒนาเพื่อให้เกิดผลงานที่มีคุณภาพสูงสุดต่อไป สรุปผลการวิจัย/ทดลอง (จากการทดลองเปรียบเทียบกับผลสารวจความพึงพอใจกลุ่มตัวอย่าง) เหนือ เหนือ yummy เว็บไซด์มีรูปแบบเว็บไซด์อยู่ในเกณฑ์การประเมินระดับดีมาก ซึ่ง ถือเป็นจุดเด่นของเว็บไซด์ เนื่องจากมีความน่าสนใจมาก แต่ยังคงต้องปรับปรุงเรื่องของสีสันและ ความสวยงานของเว็บไซด์ ให้มีสีสันที่สวยงานมากกว่าเดิม โดยอาจศึกษาขั้นตอนการทาเว็บไซด์ เพิ่มเติมจากแหล่งความรู้ต่าง ๆ ที่เกี่ยวข้อง และต้องปรับปรุงเรื่องข้อมูล เนื้อหาให้มีความน่าเชื่อถือ มากกว่าเดิม และเป็นที่นิยมในกลุ่มผู้ชมเว็บไซด์หรือใช้บริการเว็บไซด์ โดยที่ยังคงเนื้อหาเดิม ให้ เกิดประโยชน์ต่อผู้รับชมมากที่สุด ผลการประเมิน เหนือ เหนือ yummy เว็บไซด์ถือว่าอยู่ในเกณฑ์ที่สมาชิกกลุ่มผู้จัดทา โครงการพึงพอใจ และจะนาไปปรับปรุงในส่วนที่ต้องพัฒนา และแก้ไข เพื่อให้ผู้รับชมเกิดความพึง พอใจสูงสุดต่อ เหนือ เหนือ yummy เว็บไซด์ อภิปรายผลการทดลอง/ผลการสารวจ (ผลที่ได้ตรงตามที่คาดหวัง/สิ่งไม่ตรงไปตามที่ตั้งเป้ าไว้ใน ผลงาน) การทาเว็บไซด์ เหนือ เหนือ yummy เป็นการดัดแปลงเว็บไซด์ ให้มีความแปลกใหม่และ น่าสนใจ โดยการใช้โปรแกรม โปรแกรม Dreamweaver CS6 ,โปรแกรม Photoshop CS6 ในการ สร้างเว็บไซด์นี้ขึ้นมา แต่เนื่องจากขาดความรู้ในด้านการทาเว็บไซด์ และประสบการณ์การทาเว็บ ไซด์ ทาให้ค้นคว้าจากหนังสือและอินเทอร์เน็ต และผู้เชี่ยวชาญทาให้ได้เว็บไซด์ที่มีความน่าสนใจ และแปลกใหม่ขึ้นมา ข้อเสนอแนะจากผู้ทดลอง/ผู้เชี่ยวชาญ/กลุ่มตัวอย่าง จากการทดลองในครั้งแรกทาให้เว็บไซด์ออกมาไม่ค่อยดีมากเนื่องจากเกิดปัญหาการใส่เพลง เพราะใส่เพลงเข้าไปในเว็บไซด์แล้วเพลงไม่เล่นตามที่กาหนด จึงปรึกษาผู้เชี่ยวชาญโดยการให้ แปลงไฟล์เพลงก่อน โดยใช้โปรแกรมแปลงไฟล์เพลงก่อนแล้วนามาใส่ในเว็บไซด์จึงประสบ ผลสาเร็จ
89 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ แนวทางการพัฒนาผลงาน จากการที่ได้ดาเนินการวางแผนการนาเสนอผลงานและประเมินผลโครงการเว็บไซด์ เกี่ยวกับอาหารภาคเหนือแล้ว สมาชิกผู้จัดทามีความเห็นว่า หากมีการนาผลงานไปพัฒนาต่อใน อนาคต จะต้องปรับปรุงในเรื่องต่าง ๆ ดังนี้ 1. การใส่ข้อมูล รายละเอียดในการเว็บไซด์ต้องมีการเพิ่มเติมและมีความน่าสนใจมากกว่านี้ 2. วางแผน วิธีการทาโปรแกรม Dreamweaver CS6 ทุกขั้นตอนอย่างละเอียด เพื่อผลงานที่มี คุณภาพและมาตรฐาน 3. เรียนรู้เทคโนโลยีใหม่ๆเพื่อนามาปรับปรุงผลงานให้น่าสนใจ 4. ในเว็บไซด์จะมีเกมตอบคาถามเกี่ยวกับอาหารภาคเหนือมาเพื่อเพิ่มความบันเทิง 5. ออกแบบผลงานให้มีความน่าสนใจมากขึ้นและสามารถนาข้อมูลไปประยุกต์ใช้ในการ สร้างเว็บไซด์ได้ 6. สามารถนาเว็บไซด์ไปอัพโหลดเพื่อให้ใช้งานได้มากขึ้น 7. ใช้เป็นสื่อการเรียนการสอน ในการประกอบอาหารได้
90 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บรรณานุกรม เว็บไซด์ 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://www.hellomyweb.com/index.php/main/content/47 http://www.hellomyweb.com/index.php/main/content/48 http://www.hellomyweb.com/index.php/main/content/49 http://www.hellomyweb.com/index.php/main/content/50 http://www.hellomyweb.com/index.php/main/content/51 http://www.hellomyweb.com/index.php/main/content/52 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ภาคผนวก การประเมินแบบสอบถาม การประเมินแบบสอบถาม ประเมินแบบสอบถามโดยนักศึกษาปวช. ประเมินแบบสอบถามโดยอาจารย์
92 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ประเมินแบบสอบถามโดยนักศึกษาปวช ประเมินแบบสอบถามโดยนักศึกษาปวช ประเมินแบบสอบถามโดยนักศึกษาปวช. ประเมินแบบสอบถามโดยนักศึกษาปวช
93 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี ดัชนีรูปภาพ หน้า รูปที่ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 75 เริ่มออกแบบและสร้าง header ของเว็บไซด์ 68 รูปที่ 76 ออกแบบหน้าแรกของเว็บไซด์ 69 รูปที่ 77 ออกแบบคาขวัญของเว็บไซด์ 70 รูปที่ 78 ออกแบบลิงค์คาขวัญของเว็บไซด์ 70 รูปที่ 79 ออกแบบประเพณีของเว็บไซด์ 71 รูปที่ 80 ออกแบบอาหารของเว็บไซด์ 71 รูปที่ 81 ออกแบบส่วนผสมของเว็บไซด์ 72 รูปที่ 82 ออกแบบวิธีทาของเว็บไซด์ 72 รูปที่ 83 ออกแบบคุณค่าทางอาหารของเว็บไซด์ 73 รูปที่ 84 การใส่เพลงในเว็บไซด์ 73 รูปที่ 85 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยอาจารย์ 79 รูปที่ 86 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยอาจารย์ 79 รูปที่ 87 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยอาจารย์ 79 รูปที่ 88 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยนักศึกษา 80 รูปที่ 89 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยนักศึกษา 80 รูปที่ 90 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยนักศึกษา 80 รูปที่ 91 การประเมินแบบสอบถาม 91
98 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 92 การประเมินแบบสอบถาม 91 รูปที่ 93 ประเมินแบบสอบถามโดยนักศึกษา 91 รูปที่ 94 ประเมินแบบสอบถามโดยอาจารย์ 91 รูปที่ 95 ประเมินแบบสอบถามโดยนักศึกษา ปวช. 91 รูปที่ 96 ประเมินแบบสอบถามโดยนักศึกษา ปวช 92 รูปที่ 97 ประเมินแบบสอบถามโดยนักศึกษา ปวช 92 รูปที่ 98 ประเมินแบบสอบถามโดยนักศึกษา ปวช 92 รูปที่ 99 รูปผู้จัดทา 100 รูปที่ 100 รูปผู้จัดทา 101 รูปที่ 101 รูปผู้จัดทา 102
99 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี ดัชนีตาราง หน้า ตารางที่ 1 งบประมาณการดาเนินการ 67 ตารางที่ 2 สรุปผลการทดลองจากการประเมินผลในกลุ่ม 76 ตารางที่ 3 ตารางสรุปผลการประเมิน 81 ตารางที่ 4 ตารางสรุปความถี่ของสถานะผู้ตอบแบบสอบถาม 81 ตารางที่ 5 ตารางสรุปผลคะแนน 82 ตารางที่ 6 ตารางสรุปผลความคิดเห็น 84
100 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ประวัติผู้จัดทา ชื่อ – นามสกุล นางสาว กมลชนก คงอยู่ ประวัติ ประวัติส่วนตัว วันเกิด 02 มิถุนายน พ.ศ.2538 อายุ 18 ปี ที่อยู่ 1614/21 นิคมมักกะสัน เขตราชเทวี แขวงมักกะสัน ถนนเพชรบุรีตัดใหม่ กรุงเทพมหานคร 10400 ประวัติการศึกษา - ประถมศึกษา โรงเรียนวัดดิสหงสาราม พ.ศ. 2550 - มัธยมศึกษา โรงเรียนจานงค์วิทยา พ.ศ. 2553 - ประกาศนียบัตรวิชาชีพ สาขาการกาโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระ อุปถัมภ์ฯ
101 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ประวัติผู้จัดทา ชื่อ – นามสกุล นางสาว จันจิรา ดวนลี อายุ 19 ปี ประวัติ ประวัติส่วนตัว วันเกิด 05 เมษายน พ.ศ.2537 อายุ 19 ปี ที่อยู่ 191 หมู่3 ตาบลพุทธบาท อาเภอชนแดน จังหวัด เพชรบูรณ์ 10670 ประวัติการศึกษา - ประถมศึกษา โรงเรียนเสรีศึกษา พ.ศ. 2549 - มัธยมศึกษา โรงเรียนเสรีศึกษา พ.ศ. 2552 - ประกาศนียบัตรวิชาชีพ สาขาการกาโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระ อุปถัมภ์ฯ
102 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ประวัติผู้จัดทา ชื่อ – นามสกุล นางสาว อัจฉราพรรณ แซ่ลิ้ม ประวัติ ประวัติส่วนตัว วันเกิด 21 พฤศจิกายน พ.ศ.2538 อายุ 18 ปี ที่อยู่ 112/11 ซ. อนามัยงานเจริญ 31 ถ. พระราม 2 เขตท่าข้าม แขวงบางขุนเทียน กรุงเทพมหานคร 10150 ประวัติการศึกษา - ประถมศึกษา โรงเรียนวัดช่องลม พ.ศ. 2550 - มัธยมศึกษา โรงเรียนเจ้าพระยาวิทยาคม พ.ศ. 2553 - ประกาศนียบัตรวิชาชีพ สาขาการกาโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระ อุปถัมภ์ฯ
103 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ โครงร่างในการจาทาโครงการ 1. ชื่อโครงการงานค้นคว้าวิจัย เหนือ เหนือ Yummy Website 2. ความเป็นมาและความสาคัญของปัญหา (ความสนใจ, ต้องการพัฒนา, สร้างสรรค์ผลงาน) ในปัจจุบันมีการนาเทคโนโลยีที่ เรียกว่าอินเทอร์เน็ตเข้ามาใช้กันออย่างกว้างขวางแทบทุกหลังคา บ้านทาให้แหล่งข่าวทางการสื่อสารและการกระจายข่าวข้อมูลทางอินเทอร์เน็ตได้ดีขึ้นจึงจะมีการ นาเว็บไซด์โดยการใช้อินเทอร์เน็ตในการกระจายข่าวสารหรือข้อมูลต่างๆผ่านเว็บไซด์ต่างๆ ผู้จัดทาจึงจัดทาโครงการนี้ขึ้น เพื่อศึกษาและค้นคว้าการทาเว็บไซด์อาหารประจาภาคเหนือ และเพื่อเผยแพร่ข้อมูล วิธีการทาอาหารภาคเหนือให้สะดวกและรวดเร็วขึ้นเพื่อให้ผู้เข้ามาดูเว็บไซด์ ได้รับรู้ข้อมูลอาหารประจาภาคเหนือมากขึ้น 3. วัตถุประสงค์ของโครงการ 3.1 เพื่อให้นักศึกษานาความรู้ที่ได้เรียนในสาขาวิชาการโรงแรม มาบูรณาการให้เกิดองค์ความรู้ใหม่ 3.2 เพื่อพัฒนารูปแบบเว็บไซด์ของอาหารประจาภาคเหนือให้มีความน่าสนใจมากขึ้น 3.3 เพื่อเป็นการเผยแพร่อาหารประจาภาคเหนือผ่านเว็บไซด์ ทาให้มีคนรู้จักมากขึ้น 3.4 เพื่อนาไปใช้ในชีวิตประจาวันในการประกอบอาหารและการเรียนรู้ได้อย่างเหมาะสม 3.5 เพื่อทาให้คนหันมาสนใจอาหารของภาคเหนือมากยิ่งขึ้น โดยการนาเสนอผ่านทางเว็บไซด์ 4. ขอบเขตการวิจัย สร้างเว็บไซด์อาหารประจาภาคเหนือขึ้นเพื่อให้เว็บไซด์ที่สร้างขึ้น มีความน่าสนใจและโดดเด่น จากเว็บไซด์อื่น 5. คานิยาม 5.1 เว็บไซด์ (Web Site) คือ แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ
104 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ภาคเหนือ/เหนือ : บริเวณที่อยู่ทางเหนือของประเทศ 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 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 7.5 Microsoft Word 2010 8. ประโยชน์ที่คาดว่าจะได้รับ 8.1 สามารถนาความรู้ที่ได้จากหาข้อมูลอาหารประจาภาคเหนือไปใช้ได้ในชีวิตประจา 8.2 รู้จักการสร้างเว็บไซด์ให้มีความน่าสนใจมากยิ่งขึ้น 8.3 สามารถค้นคว้าหาข้อมูลเพิ่มเติมได้จากเว็บไซด์นี้แล้วนาไปประยุกต์ใช้ในการเข้าสู่สมาคม อาเซียน 8.4 รู้จักวิธีการสร้างเว็บไซด์โดยใช้โปรแกรม Dream weaver cs6 มากยิ่งขึ้น 8.5 มีการจัดแจงและแบ่งงานในการช่วยเหลือและร่วมมือกันในการทางาน 9. กรอบแนวความคิด (Conceptual) ต้องการให้นักศึกษารู้จักอาหารภาคเหนือมากขึ้น ว่ามีลักษณะ รสชาติอาหารอย่างไร มีวัฒนธรรม ในการกินอย่างไร จึงได้จัดทาเว็บไซด์นี้ขึ้นมาให้มีความน่าสนใจต่างจากเว็บไซด์อื่น
106 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 10. ขั้นตอนดาเนินการและระยะเวลา 11. งบประมาณ รายละเอียด ราคา ค่า Internet 613 บาท คู่มือใช้งาน Photoshop CS6 250 บาท คู่มือใช้งาน Dreamweaver CS6 250 บาท ค่าใบประเมิน 55 บาท ค่าจัดทารูปเล่มโครงการ 585 บาท
107 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รวม 1698 บาท 12.ผู้จัดทา 1.นางสาวกมลชน คงอยู่ 2.นางสาวจันจิรา ดวนลี 3.นางสาวอัจฉราพรรณ แซ่ลิ้ม 13.อาจารย์ที่ปรึกษาโครงการ 13.1 อาจารย์จารัส รู้สมัย ( อาจารย์คณะอุตสาหกรรมบริการ ) 13.2 อาจารย์พรชิตา เทือกทา ( อาจารย์คณะเทคโนโลยีสารสนเทศ ) 13.3 อาจารย์สันติ ทองประสูตร ( อาจารย์คณะเทคโนโลยีสารสนเทศ ) 14.ปัญหา อุปสรรคที่คาดว่าจะพบ และแนวทางแก้ไข ปัญหา / อุปสรรค แนวทางแก้ไข 1.ความรู้ในการสร้างเว็บไซด์มีน้อยไป 1.ไปเรียนรู้วิธีการสร้างเว็บไซด์เพิ่มเติม 2. เว็บไซด์ที่สร้างออกมมาอาจจะไม่ค่อยดึงดูดใจ 2.พยายามหาจุดเด่นให้คนเข้ามาชมเว็บไซด์มากขึ้น 3.เว็บไซด์อาหารประจาภาคเหนือจานวนมากแล้ว 3. หาช่องทางในการนาเสนอเว็บไซด์ให้มีความ น่าสนใจจากเว็บไซด์อื่น
108 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ จัดนิทรรศการนาเสนอผลโครงงานค้นคว้าวิจัย (Research & Study Presentation Exhibition) ขั้นตอนดำเนินกำรจัดทำโครงกำรค้นคว้ำวิจัย สารวจความสนใจและแรงบันดาลใจของตน SWOT ศึกษาค้นคว้า เอกสาร ข้อมูล งานวิจัยที่เกี่ยวข้อง/ปรึกษา ผู้เชี่ยวชาญ โครงร่างงานค้นคว้าวิจัย (Research & Study Proposal) ขอรับข้อเสนอแนะและแนวความคิดจาก ผู้เชี่ยวชาญ/ที่ ปรึกษา ส่งตรวจ พร้อมอธิบายและตอบข้อซักถาม จากที่ปรึกษา ดาเนินการจัดทา บทที่ 1-5 โดยนามาปรึกษา เป็นระยะๆ หรือให้เสร็จสิ้นในแต่ละบท ขอรับข้อเสนอแนะและแนวความคิดจาก ผู้เชี่ยวชาญ/ที่ ปรึกษา นาเสนอสรุปผลโครงงานค้นคว้าวิจัย (Presentation Research & Study) ขอรับข้อเสนอแนะและแนวความคิดจาก ผู้เชี่ยวชาญ/ที่ ปรึกษา จัดทารูปเล่ม/ส่งตรวจโครงงานค้นคว้าวิจัย นาเข้ารูปเล่ม (Research & Study Text) 2 สิงหาคม 2556
109 Modern Merit Professional : วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ

More Related Content

PDF
ตัวอย่าง 001 โครงการ paopao กมลวรรณ,ศราวุฒิ,เอกราช 56
byครูสม ฟาร์มมะนาว
 
PPTX
2ตัวอย่างนำเสนอโครงการ
byครูสม ฟาร์มมะนาว
 
PDF
The machine that changed the world
byvantannguyen
 
PPTX
Digital marketing
byDeepankshu Das
 
PPTX
Canada
byphilip51
 
PDF
หน่วยการเรียนที่ 2 สภาพแวดล้อมของ vb 2013 express
byครูสม ฟาร์มมะนาว
 
PDF
บทที่ 1 ความรู้พื้นฐานระบบฐานข้อมูล
byครูสม ฟาร์มมะนาว
 
PDF
เนื้อหารายวิชาโครงการ ปวช.3 chepter i อ.จำรัส
byครูสม ฟาร์มมะนาว
 
ตัวอย่าง 001 โครงการ paopao กมลวรรณ,ศราวุฒิ,เอกราช 56
byครูสม ฟาร์มมะนาว
 
2ตัวอย่างนำเสนอโครงการ
byครูสม ฟาร์มมะนาว
 
The machine that changed the world
byvantannguyen
 
Digital marketing
byDeepankshu Das
 
Canada
byphilip51
 
หน่วยการเรียนที่ 2 สภาพแวดล้อมของ vb 2013 express
byครูสม ฟาร์มมะนาว
 
บทที่ 1 ความรู้พื้นฐานระบบฐานข้อมูล
byครูสม ฟาร์มมะนาว
 
เนื้อหารายวิชาโครงการ ปวช.3 chepter i อ.จำรัส
byครูสม ฟาร์มมะนาว
 

Viewers also liked

PDF
160
byครูสม ฟาร์มมะนาว
 
PPTX
Presentation1
bynasser25
 
PPT
Rohit indiagift
byRohit Sharma
 
PDF
หน่วยการเรียนที่ 3 เรียนรู้ไวยากรณ์ ตัวแปร ค่าคงที่ comment
byครูสม ฟาร์มมะนาว
 
PDF
การประมวลผลข้อมูล
byครูสม ฟาร์มมะนาว
 
PPT
บทที่ 1 ความรู้พื้นฐานระบบฐานข้อมูล
byครูสม ฟาร์มมะนาว
 
PDF
ความรู้เบื้องต้นเกี่ยวกับ Internet
byครูสม ฟาร์มมะนาว
 
PDF
คำสั่งในการวนรอบการทำงาน Vb2010 (1)
byครูสม ฟาร์มมะนาว
 
PDF
โดนัทPresent project
byครูสม ฟาร์มมะนาว
 
PDF
บทที่ 5 การแปลง er diagram ให้เป็น table
byครูสม ฟาร์มมะนาว
 
PDF
รายงาน Power point
byThank Chiro
 
PDF
บทที่ 4 er diagram
byครูสม ฟาร์มมะนาว
 
160
byครูสม ฟาร์มมะนาว
 
Presentation1
bynasser25
 
Rohit indiagift
byRohit Sharma
 
หน่วยการเรียนที่ 3 เรียนรู้ไวยากรณ์ ตัวแปร ค่าคงที่ comment
byครูสม ฟาร์มมะนาว
 
การประมวลผลข้อมูล
byครูสม ฟาร์มมะนาว
 
บทที่ 1 ความรู้พื้นฐานระบบฐานข้อมูล
byครูสม ฟาร์มมะนาว
 
ความรู้เบื้องต้นเกี่ยวกับ Internet
byครูสม ฟาร์มมะนาว
 
คำสั่งในการวนรอบการทำงาน Vb2010 (1)
byครูสม ฟาร์มมะนาว
 
โดนัทPresent project
byครูสม ฟาร์มมะนาว
 
บทที่ 5 การแปลง er diagram ให้เป็น table
byครูสม ฟาร์มมะนาว
 
รายงาน Power point
byThank Chiro
 
บทที่ 4 er diagram
byครูสม ฟาร์มมะนาว
 

Similar to ตัวอย่าง 027 โครงการ wesite เหนือ เหนือ yummy กมลชนกก จันจิรา อัจฉราพรรณ 56

PDF
ตัวอย่าง 001 โครงการ paopao กมลวรรณ,ศราวุฒิ,เอกราช 56
byครูสม ฟาร์มมะนาว
 
PDF
Singha Biz Course Entrepreneur
byWirawat Lian-udom
 
PPTX
JD (job description)
byGoal Maria
 
PDF
ทักษะการพัฒนาอาชีพ ม.ต้น อช21002
byThidarat Termphon
 
PDF
3211 2011
byสุภาวดี แก้วเก้า
 
PDF
คอศ.1 คอมพิวเตอร์ธุรกิจ...1 ต.ค.55
bykvcthidarat
 
PDF
Qfd@nsc
byTeeranan
 
PDF
การเชื่อมโยงปัจจัยสำคัญ Key factors linkage
bymaruay songtanin
 
PDF
นักพัฒนาการท่องเที่ยว(ปฏิบัติการ เชี่ยวชาญ)
byประพันธ์ เวารัมย์
 
PDF
อช21002
bypatara4
 
PDF
Singha Biz Course Entrepreneur
byWirawat Lian-udom
 
PDF
Singha Biz Course Entrepreneur
byWirawat Lian-udom
 
PDF
ท่องเที่ยวไทย พร้อมเข้าสู่ AEC หรือยัง
bynattatira
 
PDF
การบูรณาการหัวข้อและผลลัพธ์ Item integration & expected results
bymaruay songtanin
 
PDF
Orchor21002
byNatnichachotchaithan
 
PDF
Thailand Quality Award 2553
byAreté Partners
 
PDF
การเขียนรายงาน How to write application report (part 1 of 4)
bymaruay songtanin
 
PPT
ตัวอย่างรายงานกลุ่ม
bythanapat yeekhaday
 
DOC
ขอเรียนเชิญ ท่านผู้ที่สนใจเข้าร่วมสัมมนาฟังข้อมูลเกี่ยวกับหลักสูตรการศึกษาบริ...
byEkthana Hospitality Education Services
 
DOC
Seminar Dct University Center Swiss
byEkthana Hospitality Education Services
 
ตัวอย่าง 001 โครงการ paopao กมลวรรณ,ศราวุฒิ,เอกราช 56
byครูสม ฟาร์มมะนาว
 
Singha Biz Course Entrepreneur
byWirawat Lian-udom
 
JD (job description)
byGoal Maria
 
ทักษะการพัฒนาอาชีพ ม.ต้น อช21002
byThidarat Termphon
 
3211 2011
byสุภาวดี แก้วเก้า
 
คอศ.1 คอมพิวเตอร์ธุรกิจ...1 ต.ค.55
bykvcthidarat
 
Qfd@nsc
byTeeranan
 
การเชื่อมโยงปัจจัยสำคัญ Key factors linkage
bymaruay songtanin
 
นักพัฒนาการท่องเที่ยว(ปฏิบัติการ เชี่ยวชาญ)
byประพันธ์ เวารัมย์
 
อช21002
bypatara4
 
Singha Biz Course Entrepreneur
byWirawat Lian-udom
 
Singha Biz Course Entrepreneur
byWirawat Lian-udom
 
ท่องเที่ยวไทย พร้อมเข้าสู่ AEC หรือยัง
bynattatira
 
การบูรณาการหัวข้อและผลลัพธ์ Item integration & expected results
bymaruay songtanin
 
Orchor21002
byNatnichachotchaithan
 
Thailand Quality Award 2553
byAreté Partners
 
การเขียนรายงาน How to write application report (part 1 of 4)
bymaruay songtanin
 
ตัวอย่างรายงานกลุ่ม
bythanapat yeekhaday
 
ขอเรียนเชิญ ท่านผู้ที่สนใจเข้าร่วมสัมมนาฟังข้อมูลเกี่ยวกับหลักสูตรการศึกษาบริ...
byEkthana Hospitality Education Services
 
Seminar Dct University Center Swiss
byEkthana Hospitality Education Services
 

More from ครูสม ฟาร์มมะนาว

PPTX
Presentation rvc2
byครูสม ฟาร์มมะนาว
 
PDF
แบบร่างเขียนรายงานโครงการ
byครูสม ฟาร์มมะนาว
 
PDF
Joomla 56 km
byครูสม ฟาร์มมะนาว
 
PDF
บทที่ 3 ฐานข้อมูลเชิงสัมพันธ์
byครูสม ฟาร์มมะนาว
 
PDF
บทที่ 2 สถาปัตยกรรมและแบบจำลองฐานข้อมูล
byครูสม ฟาร์มมะนาว
 
PDF
หน่วยการเรียนที่ 1 เริ่มต้นโปรแกรม vb 2013 express
byครูสม ฟาร์มมะนาว
 
PDF
หน่วยการเรียนที่ 1 เริ่มต้นโปรแกรม vb 2013 express
byครูสม ฟาร์มมะนาว
 
PPTX
หน่วยการเรียนที่ 4 การใช้คำสั่งควบคุมและการตัดสินใจ vb2013 express
byครูสม ฟาร์มมะนาว
 
PDF
หลักการเขียนผังงาน(Flow chart)
byครูสม ฟาร์มมะนาว
 
PPT
บทที่ 2 สถาปัตยกรรมและแบบจำลองฐานข้อมูล
byครูสม ฟาร์มมะนาว
 
PDF
ตัวอย่าง 012 vdo teaching how to thai carving ณัฐพล,อนันต์ 56
byครูสม ฟาร์มมะนาว
 
Presentation rvc2
byครูสม ฟาร์มมะนาว
 
แบบร่างเขียนรายงานโครงการ
byครูสม ฟาร์มมะนาว
 
Joomla 56 km
byครูสม ฟาร์มมะนาว
 
บทที่ 3 ฐานข้อมูลเชิงสัมพันธ์
byครูสม ฟาร์มมะนาว
 
บทที่ 2 สถาปัตยกรรมและแบบจำลองฐานข้อมูล
byครูสม ฟาร์มมะนาว
 
หน่วยการเรียนที่ 1 เริ่มต้นโปรแกรม vb 2013 express
byครูสม ฟาร์มมะนาว
 
หน่วยการเรียนที่ 1 เริ่มต้นโปรแกรม vb 2013 express
byครูสม ฟาร์มมะนาว
 
หน่วยการเรียนที่ 4 การใช้คำสั่งควบคุมและการตัดสินใจ vb2013 express
byครูสม ฟาร์มมะนาว
 
หลักการเขียนผังงาน(Flow chart)
byครูสม ฟาร์มมะนาว
 
บทที่ 2 สถาปัตยกรรมและแบบจำลองฐานข้อมูล
byครูสม ฟาร์มมะนาว
 
ตัวอย่าง 012 vdo teaching how to thai carving ณัฐพล,อนันต์ 56
byครูสม ฟาร์มมะนาว
 

ตัวอย่าง 027 โครงการ wesite เหนือ เหนือ yummy กมลชนกก จันจิรา อัจฉราพรรณ 56

  • 1.
    1 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เหนือ เหนือ Yummy (เว็บไซด์) North North yummy (Website) รหัสประจาตัว 0021243 นางสาวกมลชนก คงอยู่ รหัสประจาตัว 0021329 นางสาวจันจิรา ดวนลี รหัสประจาตัว 0021374 นางสาวอัจฉราพรรณ แซ่ลิ้ม โครงการนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพ คณะอุตสาหกรรมการบริการ สาขาการโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระอุปถัมภ์ สมเด็จพระเจ้าภคินีเธอเจ้าฟ้าเพชรรัตนราชสุดา สิริโสภาพัณณวดี ภาคเรียนที่ 1 ปีการศึกษา 2556
  • 2.
    2 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เหนือ เหนือ Yummy (เว็บไซด์) North North yummy (Website) รหัสประจาตัว 0021243 นางสาวกมลชนก คงอยู่ รหัสประจาตัว 0021329 นางสาวจันจิรา ดวนลี รหัสประจาตัว 0021374 นางสาวอัจฉราพรรณ แซ่ลิ้ม โครงการนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพ คณะอุตสาหกรรมการบริการ สาขาการโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระอุปถัมภ์ สมเด็จพระเจ้าภคินีเธอเจ้าฟ้าเพชรรัตนราชสุดา สิริโสภาพัณณวดี ภาคเรียนที่ 1 ปีการศึกษา 2556
  • 3.
    3 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ใบรับรองโครงการ วิทยาลัยสยามธุรกิจ ในพระอุปถัมภ์ฯ เรื่อง เหนือ เหนือ YUMMY เว็บไซด์ โดย 1.นางสาวกมลชนก คงอยู่ เลขประตัว 0021243 2.นางสาวจันจิรา ดวนลี เลขประตัว 0021329 3.นางสาวอัจฉราพรรณ แซ่ลิ้ม เลขประตัว 0021374 ได้รับอนุมัติให้นับเป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพ คณะอุตสาหกรรมการโรงแรม สาขาการโรงแรม ______________________________ ______________________________ (อาจารย์จารัส รู้สมัย) (อาจารย์ธนศักดิ์ ตั้งทองจิตร) อาจารย์ประจารายวิชา หัวหน้าคณะอุตสาหกรรมการโรงแรม คณะกรรมการบริหารวิทยาลัย ______________________________ ________________________________ ( อาจารย์สุชาติ เกตุกุล) (อาจารย์ปัญจพร เอื้อจงประสิทธิ์) รองผู้อานวยการฝ่ายวิชาการ ผู้อานวยการ ____________________________________ (ผู้ช่วยศาสตรจารย์ดร.ผจญ ขันธะชวนะ) ประธานกรรมการบริหารวิทยาลัย วันที่………เดือน…..………….พ.ศ………
  • 4.
    4 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ กิตติกรรมประกาศ โครงการเหนือ เหนือ YUMMY เว็บไซด์ เกิดขึ้นได้ด้วยความอุปการะทางด้านต่างๆ ทั้ง ด้านข้อมูลเอกสาร ด้านการสารวจแบบประเมิน และด้านสถานที่ดาเนินการ ขอขอบคุณ อาจารย์จารัส รู้สมัย ที่ให้ข้อมูลการดาเนินการ และสละเวลาส่วนตัว เพื่อเป็นที่ ปรึกษาให้ในตลอดระยะเวลาการดาเนินโครงการ ขอขอบคุณ อาจารย์พรชิตา เทือกทา , อาจารย์สันติ ทองประสูติ ที่ช่วยให้คาแนะนาในการ ทาเว็บไซด์ และให้คาแนะนาเพื่อให้สมาชิกผู้จัดทานาไปทาการปรับปรุงแก้ไข ขอขอบคุณ รุ่นพี่ทุกคน ที่ให้ความช่วยเหลือ เป็นที่ปรึกษาในการทาเว็บไซด์โครงการครั้งนี้ สุดท้ายนี้ขอขอบคุณทุกท่านที่มีส่วนร่วม ช่วยเหลือ และสนับสนุน ให้โครงการบรรลุผล สาเร็จได้ด้วยดี คณะผู้จัดทา 19 กันยายน 2556
  • 5.
    5 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ชื่อ 1.นางสาวกมลชนก คงอยู่ 2.นางสาวจันจิรา ดวนลี 3.นางสาวอัจฉราพรรณ แซ่ลิ้ม ชื่อเรื่อง : เรื่องเหนือ เหนือ YUMMY เว็บไซด์ สาขาวิชา : การโรงแรม คณะวิชา : อุตสาหกรรมการบริการ ที่ปรึกษา : อาจารย์จารัส รู้สมัย ปีการศึกษา : 2556 บูรณาการจากรายวิชา : ครัวและอุปกรณ์งานครัว, ภาษาอังกฤษภาษาไทย,เทคโนโลยีสารสนเทศ บทคัดย่อ โครงการเหนือ เหนือ YUMMY เว็บไซด์ มีจุดประสงค์เพื่อส่งเสริมและสนับสนุนการปรับเปลี่ยน รูปแบบเว็บไซด์ให้เกิดความแปลกใหม่ และทาให้หันมาสนใจในอาหารภาคเหนือมากขึ้น โดยการ นาเสนอข้อมูลผ่านในรูปแบบของเว็บไซด์ โดยเนื้อหาในเว็บไซด์จะมีทั้ง ภาษาไทยและ ภาษาอังกฤษ นามาทาการสารวจและประเมินผล โดยมีผลการดาเนินการเว็บไซด์ มีรูปแบบมีความ น่าสนใจ เนื้อหาและรูปภาพมีความสัมพันธ์กัน อยู่ในเกณฑ์การประเมินระดับ มากที่สุด เนื่องจากมี ความแปลกใหม่ แต่ยังคงต้องปรับปรุงเนื้อหาที่ต้องเพิ่มและผู้ชมมีความพึงพอใจกับการชมผลงาน ส่วนมาก แต่ต้องปรับปรุงเรื่องของเพลงของผลงานให้มีความเหมาะสม และมีความน่าสนใจมาก ขึ้น โครงการเหนือ เหนือ yummy เว็บไซด์ใช้ระยะเวลาดาเนินการทั้งสิ้น 3 เดือน เริ่มจากเดือน กรกฎาคม จนถึงเดือนกันยายน คณะผู้จัดทา _________________________________ _________________________________ ( อาจารย์สุชาติ เกตุกุล) (อาจารย์ปัญจพร เอื้อจงประสิทธิ์) รองผู้อานวยการฝ่ายวิชาการ ผู้อานวยการ __________________________________ (ผู้ช่วยศาสตรจารย์ดร.ผจญ ขันธะชวนะ) ประธานกรรมการบริหาร วันที่………เดือน…..………….พ.ศ………
  • 6.
    6 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ คานา โครงการเหนือ เหนือ YUMMY เว็บไซด์นี้จัดทาขึ้นเพื่อการเรียนรู้พัฒนาองค์ความรู้จาก การศึกษาในสาขาวิชาการโรงแรมคณะอุตสาหกรรมบริการโดยนาความรู้ในรายวิชาต่างๆนามา บูรณาการโดย คณะผู้จัดทา ได้ดาเนินการทา โครงการเหนือ เหนือ YUMMY เว็บไซด์ เนื้อหา ภายในโครงการแสดงถึงความเป็นมาของโครงการ วัตถุประสงค์ เอกสารที่เกี่ยวข้อง วิธีดาเนินการ การประเมิน และการวิเคราะห์ผลดาเนินการ ทั้งนี้การดาเนินการทาโครงการขึ้น จัดเป็นส่วนหนึ่งของรายวิชาโครงการ ในระดับชั้น ประกาศนียบัตรวิชาชีพ ปีที่ 3 รวมทั้งเป็นส่วนส่งเสริมให้นักศึกษาได้นาความรู้จากการปฏิบัติงาน ไปประยุกต์ใช้จริงกับการทางาน สามารถวางแผนการปฏิบัติงานร่วมกันอย่างเป็นขั้นตอนได้ ทั้งยัง ฝึกการแก้ไขปัญหา พัฒนาความรับผิดชอบต่อหน้าที่ที่ได้รับมอบหมาย ส่งผลต่อการนาความรู้ที่ได้ จากการปฏิบัติงานไปประยุกต์ใช้กับการทางานที่ดีในอนาคต ซึ่งการปฏิบัติงานทั้งหมดนี้ อยู่ในการ ควบคุมดูแลของอาจารย์ที่ปรึกษาโครงการ คณะผู้จัดทา
  • 7.
    7 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สารบัญ เรื่อง หน้า กิตติกรรมประกาศ 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.
    8 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สารบัญ (ต่อ) เรื่อง หน้า - ตัวอย่างแบบประเมิน 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.
    9 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 1 บทนา 1.ความเป็นมาและความสาคัญของปัญหา ในปัจจุบันมีการนาเทคโนโลยีที่ เรียกว่าอินเทอร์เน็ตเข้ามาใช้กันออย่างกว้างขวางแทบทุกหลังคา บ้านทาให้แหล่งข่าวทางการสื่อสารและการกระจายข่าวข้อมูลทางอินเทอร์เน็ตได้ดีขึ้นจึงจะมีการ นาเว็บไซด์โดยการใช้อินเทอร์เน็ตในการกระจายข่าวสารหรือข้อมูลต่างๆผ่านเว็บไซด์ต่างๆ ผู้จัดทาจึงจัดทาโครงการนี้ขึ้น เพื่อศึกษาและค้นคว้าการทาเว็บไซด์อาหารประจา ภาคเหนือและเพื่อเผยแพร่ข้อมูล วิธีการทาอาหารภาคเหนือให้สะดวกและรวดเร็วขึ้นเพื่อให้ผู้เข้ามา ดูเว็บไซด์ได้รับรู้ข้อมูลอาหารประจาภาคเหนือมากขึ้น 2. วัตถุประสงค์ของโครงการ 2.1 เพื่อให้นักศึกษานาความรู้ที่ได้เรียนในสาขาวิชาการโรงแรม มาบูรณาการให้เกิดองค์ความรู้ใหม่ 2.2 เพื่อพัฒนารูปแบบเว็บไซด์ของอาหารประจาภาคเหนือให้มีความน่าสนใจมากขึ้น 2.3 เพื่อเป็นการเผยแพร่อาหารประจาภาคเหนือผ่านเว็บไซด์ ทาให้มีคนรู้จักมากขึ้น 2.4 เพื่อนาไปใช้ในชีวิตประจาวันในการประกอบอาหารและการเรียนรู้ได้อย่างเหมาะสม 2.5 เพื่อทาให้คนหันมาสนใจอาหารของภาคเหนือมากยิ่งขึ้น โดยการนาเสนอผ่านทางเว็บไซด์ 3. ขอบเขตการดาเนินโครงการ สร้างเว็บไซด์อาหารประจาภาคเหนือขึ้นเพื่อให้เว็บไซด์ที่สร้างขึ้น มีความน่าสนใจและ โดดเด่นจากเว็บไซด์อื่น 4.คานิยาม เว็บไซด์ (Web Site) คือ แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ภาคเหนือ/เหนือ : บริเวณที่อยู่ทางเหนือของประเทศ YUMMY : เป็นคาแสลง slang หมายถึง : อร่อย คาที่เกี่ยวข้อง : รสเด็ด, รสเยี่ยม
  • 10.
    10 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 5.วิธีการดาเนินการ 6.ประโยชน์ที่คาดว่าจะได้รับ 6.1 สามารถนาความรู้ที่ได้จากหาข้อมูลอาหารประจาภาคเหนือไปใช้ได้ในชีวิตประจา 6.2 รู้จักการสร้างเว็บไซด์ให้มีความน่าสนใจมากยิ่งขึ้น 6.3 สามารถค้นคว้าหาข้อมูลเพิ่มเติมได้จากเว็บไซด์นี้แล้วนาไปประยุกต์ใช้ในการเข้าสู่สมาคม อาเซียน 6.4 รู้จักวิธีการสร้างเว็บไซด์โดยใช้โปรแกรม Dream weaver cs6 มากยิ่งขึ้น 6.5 มีการจัดแจงและแบ่งงานในการช่วยเหลือและร่วมมือกันในการทางาน
  • 11.
    11 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 2 เอกสารและทฤษฎีที่เกี่ยวข้อง จากการศึกษา อาหารของภาคเหนือ ผู้จัดทาโครงการได้ศึกษาข้อมูลในการสร้างเว็บไซต์ ผู้จัดทาได้รวบรวมข้อมูลเอกสารและงานวิจัยที่เกี่ยวข้องซึ่งประกอบด้วย 2.1 หนังสือการสร้างเว็บไซต์ 2.2 โปรแกรม Dreamweaver CS6 2.3 โปรแกรม Photoshop CS6 2.1 การสร้างเว็บไซด์ การสร้างเว็บไซด์ให้ออกมาดูดีแบบมืออาชีพและมีคุณภาพนั้นสิ่งที่สาคัญที่สุดไม่ได้อยู่ที่ เทคโนโลยีหรือลูกเล่นในเว็บไซด์แต่สิ่งที่สาคัญที่สุดก็คือการนาเสนอข้อมูลหลักของเว็บไซด์ให้ ตรงกับเป้ าหมายและสื่อสารได้ตามความต้องการของเจ้าของเว็บดังนั้นก่อนที่เราจะเริ่มสร้างเว็บ ไซด์เราควรที่จะเตรียมตัวและวางแผนให้ดีเสียก่อนเพื่อจะได้ประหยัดเวลาและได้เว็บไซด์ที่ ตอบสนองความต้องการได้มากที่สุด การที่เราจะสามารถใช้งานเว็บไซด์ให้ เกิดประโยชน์สูงสุดได้นั้น จาเป็นอย่างยิ่งที่เรา จะต้องเข้าใจถึงลักษณะทั่วไปของเว็บไซด์และจาแนกแยก แยะได้ว่าเว็บไซด์เหล่านั้นมีความ แตกต่างหรือเหมือนกันอย่างไร รวมถึงมีหน้าที่หลักเฉพาะตัวอย่างใดบ้าง ทั้งนี้ เพื่อให้เรามองเห็น ภาพรวมของเว็บไซต์ได้ดียิ่งขึ้น เราอาจแบ่งเว็บไซต์ออกเป็นกลุ่มใหญ่ ๆ ได้ 8 ประเภท ตาม ลักษณะของเนื้อหาและรูปแบบของเว็บไซต์ ซึ่งกลุ่มเว็บไซต์ทั้ง 8 ประเภทนั้น ได้แก่ 1. เว็บท่า (Portal Site) อาจเรียกอีกชื่อหนึ่งว่า เว็บวาไรตี้ ซึ่งหมายถึงเว็บที่ให้บริการต่างๆ ไว้มากมาย มักประกอบ ไปด้วยบริการ เสิร์ชเอ็นจิ้น ที่รวมลิงค์ของเว็บไซต์ที่น่าสนใจไว้มากมายให้เราได้ค้นหา รวมถึง บริการที่เกี่ยวกับเรื่องราวที่มีสาระและบันเทิงหลากหลายประเภท ดูหนังฟังเพลง ดูดวง ท่องเที่ยว ไอที เกม สุขภาพ ฯลฯ 2. เว็บข่าว (News Site) เป็นเว็บที่สร้างขึ้นโดยองค์กรข่าวหรือสถาบันสื่อสาร มวลชนต่างๆ ที่มีสื่อมวลชนประเภท ต่างๆ ของตนอยู่เป็นหลัก เช่น สถานีโทรทัศน์ สถานีวิทยุ หนังสือพิมพ์ นิตยสาร วารสาร หรือ แม้กระทั่ง กระทรวง ทบวง กรมต่างๆ ซึ่งผู้ใช้สามารถค้นหาข้อมูลและติดตามข่าวได้ทุกเวลา
  • 12.
    12 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 3. เว็บข้อมูล (Information Site) เป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้น ข้อมูลข่าวสาร หรือข้อเท็จจริงต่างๆ ที่น่าสนใจ องค์กรต่างๆ มักสร้างเว็บข้อมูลของตนขึ้นมาเพื่อเป็นช่องทางให้ประชาชนหรือกลุ่มบุคคลที่ สนใจ เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตน 4. เว็บธุรกิจหรือการตลาด (Business/Marketing Site) สร้างขึ้นโดย องค์กรธุรกิจต่าง ๆ มีจุดประสงค์ในการประชาสัมพันธ์องค์กรและเพิ่มผล กาไรทางการค้าด้วย โดยเนื้อหาส่วนใหญ่หรือเกือบทั้งหมดมักจะเป็นการนาเสนอเกี่ยวกับ รายละเอียด และความน่าสนใจของสินค้าและบริการ 5. เว็บการศึกษา (Educational Site) ส่วนใหญ่สร้างขึ้นโดยสถาบันการศึกษาต่างๆ หรือองค์กรทั้งของภาครัฐและเอกชนที่มี นโยบายในการเผยแพร่ความรู้ และให้โอกาสในการค้นคว้าหาข้อมูลเพื่อการศึกษาแก่นักเรียน นิสิต นักศึกษา รวมถึงประชาชนทั่วไป เว็บการศึกษาให้ข้อมูลเกี่ยวกับการเรียนรู้ที่เป็นทางการและไม่ เป็นทางการ บริการการเรียนรู้แบบออนไลน์ หรือที่เรียกว่า อีเลิร์นนิ่ง (E-Learning) ต่าง ๆ 6. เว็บบันเทิง (Entertainment Site) เป็นเว็บนาเสนอและให้บริการต่างๆ เพื่อเสริมสร้างความบันเทิง จะเป็นเรื่องราวเกี่ยวกัน ดนตรี ภาพยนตร์ ดารา กีฬา เกม ความรัก บทกลอน การ์ตูน เรื่องขาขัน รวมถึงบริการดาวน์ โหลดโลโก้และริงโทนสาหรับโทรศัพท์เคลื่อนที่ด้วย 7. เว็บองค์กรที่ไม่แสวงหาผลกาไร (Non-profit Organization Site) ส่วนใหญ่สร้างขึ้นโดยบุคคลหรือองค์การต่าง ๆ ที่มีนโยบายในการสร้างและช่วยเหลือ สังคมโดยที่ไม่หวังผลกาไรหรือค่าตอบแทน ซึ่งกลุ่มบุคคลหรือองค์การเหล่านี้ได้แก่ สมาคม ชมรม มูลนิธิ และโครงการต่างๆ โดยอาจจะมีจุดประสงค์เฉพาะที่แตกต่างกันเช่น เพื่อทาความดี สร้างสรรค์สังคม พิทักษ์สิ่งแวดล้อม ปกป้ องสิทธิมนุษยชน รณรงค์ไม่สูบบุหรี่ เป็นต้น
  • 13.
    13 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    14 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ Dreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้นโดยมีเครื่องมือ 1. FTP เราสามารถแก้ไข หน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ Dreamweaver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไข ได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ ของเราสารองไว้ในเครื่องเราได้ 2. Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดง ให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทาการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้ว เราต้องแก้เว็บเพจของเราตลอดช่วยให้เราทาเว็บได้ง่ายขึ้น
  • 15.
    15 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สาหรับคนที่ไม่เคยทาเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อ พัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสาหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทาให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamweaver มีเครื่องมือมากมายและ ทางานเชื่อมต่อกับโปรแกรมดังๆมากมายเช่น Photoshop, Illustrator, Flash หรือแม้แต่กระทั่งการ ใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งาน ในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ, หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้คงทาให้มองภาพของ Dreamweaver ว่าเป็นเครื่องมือที่อานวยความสะดวก มากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆที่ออกมา และ ช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก
  • 16.
    16 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เครื่องมือต่างๆในโปรแกรม Dreamweaver สาหรับ Dreamweaver เป็นโปรแกรมสร้างโฮมเพจแบบเสมือนจริง โดยไม่ต้อง เขียนภาษา HTML เองหรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG" เราสามารถใช้หน้าจอเสมือนจริงของ Dreamweaver ในการทา เว็บเพจได้เลย โดยใช้เครื่องมือต่างๆที่มีมาให้ดังแสดงในรูปด้านล่าง หน้าตาของโปรแกรม Dreamweaver และชื่อเรียกเครื่องมือต่างๆ
  • 17.
    17 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ อธิบายเครื่องมือต่างๆ 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.
    18 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 3. Property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็ จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จานวนแถวและหลักของตาราง เป็นต้น 4.docking panels เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซด์ ไฟล์ CSS และ ใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดย การคลิกที่รูปลูกศรด้านซ้ายมือของ panels
  • 19.
    19 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    20 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    21 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    22 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เริ่มต้นด้วยการสร้างหน้าเว็บเพจ การสร้างเอกสารใหม่ของ Dreamweaver นั้นทาได้ง่ายมากเมื่อเปิด โปรแกรมขึ้นมาจะเห็นว่ามีหน้าจอดังภาพ เราสร้างเอกสารได้จากหน้าจอนี้ดังรูป จากหน้าจอจะเห็นว่ามีชนิดไฟล์มากมายที่เราสามารถสร้างได้แต่ในบทนี้จะขอพูดถึงแค่ HTML เท่านั้น นอกเหนือจากการใช้หน้าจอเริ่มต้นเมื่อเปิดโปรแกรมเรายังสามารถสร้างเอกสารใหม่ได้
  • 23.
    23 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การตั้งชื่อให้กับเว็บเพจนั้นจะต้องตั้งเป็นภาษาอังกฤษเท่านั้น และการตั้งชื่อห้ามมีการเว้นวรรคใน ชื่อ เราอาจใช้เครื่องหมาย 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.
    24 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สามารถเปลี่ยน 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.
    25 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ จากบทความเรื่องการกาหนด 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.
    26 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เครื่องมือที่ใช้ปรับแต่งภาพ เมื่อเราคลิกที่ภาพ ที่ 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.
    27 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    28 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สร้าง 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.
    29 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    30 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สร้างลิงค์ไปยังเว็บไซต์อื่น 1. เปิดหน้าที่ต้องการสร้างลิงค์ขึ้นมา 2. เลือกตัวอักษร หรือรูปภาพที่ต้องการสร้างลิงค์ 3. ที่ Property inspector ให้ใส่ชื่อเว็บที่ต้องการลิงค์ไป เช่น ในรูปเลือกภาพเป็นลิงค์ 3.1.ช่องลิงค์ใส่ http://www.hellomyweb. 3.2.จากนั้นที่ช่อง border ให้ใส่ค่า 0 เพื่อไม่ให้มีขอบรูปเมื่อรูปเป็ นลิงค์ แค่นี้ก็สามารถสร้างลิงค์ไปยังเว็บไซต์อื่น และไฟล์ต่างๆในเว็บไซต์ของตัวเองได้แล้ว ปรับแต่งเว็บเพจด้วย Page Properties Page propertiese สามารถทาให้เราปรับแต่งเว็บเพจ ของเราได้ทั้งพื้นหลัง, ชนิดตัวอักษร, รูปแบบของ hyperlink และอื่นๆ อีกมากที่เราสามารถปรับได้ ด้วยเครื่องมือนี้
  • 31.
    31 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การใช้งานเครื่องมือ Page Properties สามารถทาได้ดังนี้ 1.เปิดเว็บเพจที่ต้องการปรับแต่ง 2.ไปที่ Menu เลือก Modify > Page Properties 3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง ทดลองเปลี่ยน พื้นหลัง , ชนิดของ font , สีของตัวอักษร , ระยะห่างของวัตถุกับหน้าเว็บเพจ 1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง 2.ไปที่ Menu เลือก Modify > Page Properties 3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง 4.ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับดังรูป
  • 32.
    32 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    33 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink เราสามารถเปลี่ยนสี ขนาด การขีดเส้นใต้ของตัวอักษรที่เป็น Hyperlink ได้ตามขั้นตอนด้านล่าง 1.เปิดหน้าเว็บเพทที่ต้องการปรับแต่ง 2.ไปที่ Menu เลือก Modify > Page Properties 3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง 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.
    34 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    35 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    36 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การแทรก 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.
    37 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ อยู่แล้วซึ่งถ้าเราต้องการจะแสดงผลหน้าเว็บเพจที่เราทาอยู่ก็สามารถ กดปุ่ม F12 ที่คีย์บอร์ด หรือ ไปที่ Document tool bar จะเห็นรูปลูกโลกเมื่อคลิกก็จะเป็นการแสดงเว็บเพจของเราใน Browser ในกรณีที่เราต้องการตั้งค่า Browser ที่ใช้ในการแสดงผลเองก็สามารถทาได้โดยไปที่ Menu ไปที่คา ว่า File > Preview in Browser > Edit browser list ก็จะมีหน้าต่างขึ้นมาดังรูปให้เราสามารถแก้ไข เพิ่ม Browser ที่ใช้ในการแสดงผลได้ 2.3 โปรแกรม Photoshop CS6 โปรแกรม Photoshop CS6 มีส่วนสาคัญหลักที่ต้องทาความรู้จัก
  • 38.
    38 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เมนูของโปรแกรม 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.
    39 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ เทคนิค : ต้องให้แน่ใจว่าได้ทาเครื่องหมายในช่องของ 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.
    40 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ วิธีกาหนดค่าการเปิดแสดงภาพ โดยไปที่ Preference ของโปรแกรม Photoshop กาหนดค่า Interface โดยเลือกที่ช่อง Open Document as Tabs ซึ่งเป็นการกาหนดเพื่อให้เปิดแสดงภาพในรูปแบบของ Tabs ถ้าเราไม่ เลือกช่องนี้ ภาพที่เปิดจะแสดงเป็นแบบ Window คุณสมบัติพิเศษ ถ้าเลือกที่ Enable Floating Document Window Docking ซึ่งอยู่ถัดจากช่อง ของ Open Document as Tabs เป็นการตั้งค่าเพื่อให้สามารถลาก Window ไปยังแถบของ Tab และ เปลี่ยนลักษณะจาก Window เป็น Tab ได้
  • 41.
    41 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การเปิด preference / กด Ctrl + K การเปลี่ยนการแสดงภาพแบบ Tab เป็น Window เวลาที่เราทางาน อาจต้องการสลับการแสดงภาพ จาก Tab ให้เป็น Window หรือ กลับกันสามารถใช้คาสั่งโดยใช้เมนูโปรแกรม เลือก Window – Arrange (ภาพซ้าย) เมื่อกด Arrange แล้ว ก็จะมีรายการหลักสองส่วน (ภาพขวา) ให้ เลือกว่าต้องการแสดงโดยการเรียงภาพแบบไหน เช่น แนวตั้ง หรือ แนวนอนและ การแสดงภาพ แบบไหน ถ้าต้องการเปลี่ยนการแสดงภาพแบบ Window ให้เป็น Tab ทั้งหมด ก็เลือก Consolidate All to Tabs แต่ถ้าต้องการเพียง บางภาพ ทาโดย นาเม้าส์คลิกที่ Window นั้นแล้วลากไปที่แผงของ
  • 42.
    42 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    43 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ อีกวิธีหนึ่งทาได้โดยกดปุ่ม Workspace Bar จะมีรายการรูปแบบทั้งเจ็ดเลื่อนลงมาให้เลือก การกาหนดพื้นที่ทางานของเราเอง ทาได้เพราะโปรแกรม Photoshop CS6 มีระบบที่ทาให้เรา กาหนดเองได้โดยใช้เมนูโปรแกรม เลือก Window - เลือก Panel ที่ต้องการ (ภาพด้านขวา เริ่มตั้งแต่ 3D panel ) ให้แสดงอยู่ในพื้นที่การทางาน เมื่อจัดตาแหน่งเรียบร้อยแล้ว ให้กดปุ่ม Workspace Bar - เลือก New Workspace - ทาการตั้งชื่อพื้นที่ทางานของเรา - แล้วทาการ Save (ช่อง Keyboard Shortcuts / Menus จะเลือกหรือไม่ก็ได้ถ้าเราไม่มีการปรับตั้งค่าใหม่ในสองส่วนนี้ก็ไม่ต้องเลือก) หลังจากทาการบันทึกแล้ว ถ้าเรากดปุ่ม Workspace Bar ก็จะมีรายชื่อที่เราบันทึกไว้แสดงรวมอยู่ กับรายการพื้นที่อื่นๆ (ชื่อที่เห็นบนปุ่ม Workspace Bar นี้จะเปลี่ยนไปตามการแสดงชื่อพื้นที่ ปัจจุบันที่เราเลือก)
  • 44.
    44 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ การลบพื้นที่การทางาน ถ้าคิดว่าไม่ต้องการใช้รูปแบบพื้นที่เรา กาหนดขึ้นเอง อีกต่อไปแล้ว ก็ให้กด ปุ่ม 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.
    45 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ  กดปุ่ม 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.
    46 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ  กดปุ่ม Space Bar ค้างไว้ เมาส์จะเปลี่ยนเป็นรูปมือ คลิกค้างไว้ที่ภาพแล้วเลื่อนภาพได้ ตามที่ต้องการ  Bird Eye View เป็นเครื่องมือซึ่งใช้ในกรณีพิเศษ เป็นการใช้ขณะที่เราทาการขยายภาพใหญ่ มากๆ เพื่อดูเฉพาะจุดนั้น แล้วต้องการเปลี่ยนจุดที่ต้องการดูไปยังจุดอื่น ให้คลิกเครื่องมือ Hand Tool หรือ กด H คลิกเมาส์ค้างไว้ที่ภาพ เมาส์จะมีสัญญาลักษณ์สี่เหลี่ยมแสดงขึ้น ล้อมรอบเมาส์ พร้อมทั้งภาพจะลดขนาดลงไปให้เราเห็นทั้งภาพ ทาการเลื่อนเมาส์ไปยังจุด ที่เราต้องการดู ปล่อยเมาส์ ภาพจะขยายขึ้นมาตามขนาดเดิม และส่วนที่เราเลือกจะอยู่ กึ่งกลางหน้าจอทางานพอดี เทคนิค ขณะที่แสดงภาพเป็นแบบ 2 Up Vertical ให้กดShift + Space Bar ค้างไว้แล้วใช้เมาส์ คลิกค้างไว้ที่ภาพใดภาพหนึ่ง ทาการเลื่อนภาพ ภาพทั้งสองจะทาการเลื่อนไปในทิศเดียวกัน และ พร้อมกัน การทาแบบนี้เหมาะกับการดูภาพที่เหมือนกันสองภาพ เช่น ภาพก่อนแต่ง หรือ หลังแต่ง ภาพ เพื่อเปรียบเทียบการเปลี่ยนแปลง การปรับหน้าจอแสดงภาพ (Screen Mode) จอแสดงภาพของโปรแกรม Photoshop CS6 มีด้วยกัน 3 แบบ การเลือกแต่ละแบบทาได้โดย คลิกที่ ไอคอน Change Screen Mode (รูปสี่เหลี่ยมซ้อนกันสองรูป) ที่แถบเครื่องมือ หรือ จะกดคีย์ลัด F ก็
  • 47.
    47 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ได้ กด 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.
    48 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ โปรแกรม Photoshop สามารถกาหนดขนาดของภาพ และความละเอียดได้ขณะที่สร้างงานใหม่ ขึ้นมา สามารถกาหนดขนาด Width and Height เป็น Pixels, Inches, Centimeters, Millimeters, Points,Picas,Columns ถ้าต้องการเปลี่ยนแปลงขนาด หรือ ความละเอียดของชิ้นงานหลังจากที่ได้กาหนดไว้แล้วตั้งแต่ต้น ขั้นแรกจะต้องเปิดหน้า Image Size โดยใช้เมนูโปรแกรม Image เลือก Image size ก็จะได้หน้าต่าง ดังกล่าว สามารถทาการปรับแต่งได้เป็น 3 ส่วน
  • 49.
    49 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ส่วนที่หนึ่ง 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.
    50 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บันทึกงานเป็นไฟล์ TIFF (สาหรับงานพิมพ์) ก่อนบันทึกงาน ให้ทาการรวมเลเยอร์ให้เป็น Flat Layer ก่อน เพื่อลดขนาดไฟล์ เพราะไฟล์ประเภทนี้จะมีขนาดค่อนข้างใหญ่ แต่อย่าลืมขณะบันทึก ต้องแน่ใจว่าได้เลือกที่ช่อง Layer ไว้ด้วย กรณีนี้จะสามารถเปิดไฟล์เพื่อมาแก้ไขในโปรแกรม Photoshop ได้อีก แต่ถ้าแน่ใจว่าไม่ต้องการกลับมาแก้ไขอีก ให้บันทึกโดยไม่ต้องเลือกช่อง Layer และให้กาหนดค่าใน TIFF Option แทนเพื่อให้เหมาะกับความต้องการ
  • 51.
    51 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บันทึกงานเป็นไฟล์ PNG การบันทึกงานประเภทนี้จะมีขนาดไฟล์ที่ค่อนข้างเล็ก แต่ไม่สามารถเรียก กลับมาแก้ไขใน Photoshop ได้อีก เหมาะกับงานประเภทที่ใช้แสดงผลบนเว็บไซด์
  • 52.
    52 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บันทึกงานเป็นไฟล์ JPEG ไฟล์ประเภทนี้จะให้ภาพที่ค่อนข้างสวยงาม แต่ก็จะมีขนาดของไฟล์ใหญ่ พอสมควร ก่อนที่จะบันทึกก็ลองปรับค่าคุณภาพของภาพตามประเภทของงานที่จะนาไปใช้ต่อไปดู นะครับ สามารถปรับได้ตั้งแต่ 0 - 12 เรียกจากความละเอียดของภาพจากน้อยไปหามาก
  • 53.
    53 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ โปรแกรม Photoshop มีจุดเด่นที่ให้เราเรียกงานก่อนหน้านั้นกลับคืนมาได้ โดยการใช้ History panel โดยเลือกขั้นตอน Open ชิ้นงานของเรา ทุกสิ่งก็จะกลับมาที่ขั้นเริ่มต้นที่เราเปิดภาพ หรือชิ้นงานนั้นขึ้นมา แต่ครั้งนี้เราจะต้องทาการบันทึกใหม่นะ เพราะไม่นั้นชิ้นงานของเราก็จะเป็น ชิ้นงานที่แก้ไขโดยไม่ได้ตั้งใจชิ้นนั้นเหมือนเดิม
  • 54.
    54 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 3 วิธีดาเนินการ จากที่สมาชิกในกลุ่ม ได้ศึกษาข้อมูลที่เกี่ยวข้องในการดาเนินโครงการเรื่อง เหนือ เหนือ YUMMY จากทางเว็บไซด์ หนังสือเกี่ยวกับอาหารทางภาคเหนือ หนังสือการทาเว็บไซด์ ในกลุ่มได้ มีความคิดเห็นว่า อาหารทางภาคเหนือมีความน่าสนใจ และมีเอกลักษณ์ประจาท้องถิ่นนั้นๆ จึง ศึกษาเพิ่มเติมและเกิดความคิดสร้างสรรค์ในการทาเว็บไซด์ เหนือ เหนือ YUMMY ขึ้นมา จุดประสงค์หลักเพื่อที่จะให้อาหารทางภาคเหนือมีความน่าสนใจและเป็นที่รู้จักกันอย่างแพร่หลาย มากยิ่งขึ้น ดังนั้นสมาชิกในกลุ่มจึงมีความคิดเห็นที่จะสร้างเว็บไซด์เกี่ยวกับอาหารทางภาคเหนือขึ้น โดยมีข้อสรุปที่จะใช้วัสดุ อุปกรณ์ และดาเนินการตามขั้นตอน ดังต่อไปนี้ วิธีการทา “YUMMY” 3.1 วัสดุ/อุปกรณ์ ลาดับ วัสดุ/อุปกรณ์ จานวน 1. เครื่องคอมพิวเตอร์ (Computer) 1 2. อินเทอร์เน็ต (Internet) 1 3. โปรแกรมการสร้างเว็บไซด์ Dreamweaver cs6 1 4. โปรแกรม Photoshop CS6 1 5. ปริ้นเตอร์(Printer) 1
  • 55.
    55 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 3.2 ขั้นตอนการดาเนินงาน Step 1 เปิดโปรแกรมขึ้นมา สร้างหน้ากระดาษเปล่า New > Custom เลือดขนาดตามต้องการ Step 2 ได้ขนาดมาแล้วจัดการเท่สีที่เราจะทา พอเท่สีเสร็จให้เราพิมพ์ตัวหนังสืออะไรก็ได้ใส่เข้าไป เลือกขนาด เลือกสี เลือกฟอนท์ที่ต้องการ
  • 56.
    56 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ
  • 57.
    57 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ
  • 58.
    58 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ Step 3 สร้าง เลเยอร์เพิ่มโดยการคลิ้กขวาที่เลเยอร์ตัวหนังสือเลือก Duplicate layer กด Ok ตามภาพ
  • 59.
    59 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 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.
    60 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 3.3 ขั้นตอนการสร้างเว็บไซด์ รูปที่ 1 หารูปภาพ Background ที่เราต้องการ รูปที่ 2 หา Icons ที่เราต้องการ
  • 61.
    61 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 3 เปิดหน้าต่างโปรแกรม Photoshop รูปที่ 4 ขั้นตอนการออกแบบหัวเว็บไซด์
  • 62.
    62 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 5 ขั้นตอนการออกแบบปุ่มตัวเลือก รูปที่ 6 ขั้นตอนการออกแบบหน้าแรก “อาหารภาคเหนือ”
  • 63.
    63 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 7 ขั้นตอนการออกแบบรูปภาพ รูปที่ 8 ขั้นตอนการออกแบบ “ภูมิประเทศ”
  • 64.
    64 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 9 ขั้นตอนการออกแบบ “คาขวัญ” รูปที่ 10 ขั้นตอนการออกแบบ ลิงค์ “คาขวัญ”
  • 65.
    65 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 11 ขั้นตอนการออกแบบ “ประเพณีการรับประทานอาหาร” รูปที่ 12 ขั้นตอนการออกแบบ “เมนูอาหาร”
  • 66.
    66 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 13 ขั้นตอนการออกแบบ ลิงค์ “เมนูอาหาร” รูปที่ 14 ขั้นตอนการออกแบบ ลิงค์ “ส่วนผสม”
  • 67.
    67 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 15 ขั้นตอนการออกแบบ ลิงค์ “วิธีการทา” รูปที่ 16 ขั้นตอนการออกแบบ ลิงค์ “คุณค่าทางโภชนาการ”
  • 68.
    68 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 17 ขั้นตอนการออกแบบ“กล่องข้อความ” รูปที่ 18 เปิดหน้าต่างโปรแกรม Dream Weaver
  • 69.
    69 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 19 เริ่มออกแบบและสร้าง header ของเว็บไซด์ รูปที่ 20 ออกแบบหน้าแรก ของเว็บไซด์
  • 70.
    70 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 21 ออกแบบ "คาขวัญ" ของเว็บไซด์ รูปที่ 22 ออกแบบ ลิงค์ "คาขวัญ" ของเว็บไซด์
  • 71.
    71 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 23 ออกแบบ "ประเพณี" ของเว็บไซด์ รูปที่ 24 ออกแบบ "อาหาร" ของเว็บไซด์
  • 72.
    72 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 25 ออกแบบ "ส่วนผสม" ของเว็บไซด์ รูปที่ 26 ออกแบบ "วิธีทา" ของเว็บไซด์
  • 73.
    73 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รูปที่ 27 ออกแบบ "คุณค่าทางอาหาร" ของเว็บไซต์ รูปที่ 28 การใส่เพลงในเว็บไซต์
  • 74.
    74 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ผลสรุปการทดลองจากการประเมินภายในกลุ่ม รายการ ครั้งที่ 1 ครั้งที่ 2 1. รูปแบบ เว็บไซด์ มีความน่าสนใจ ตัวหนังสือเล็กเกินไป ควรปรับให้ใหญ่กว่านี้ ปรับขนาดตัวหนังสือ ให้ใหญ่กว่าเดิม 2. รูปภาพและสีสันใน เว็บไซด์ มีความสวยงาม มีสีสันมากเกินไป ทาให้ ลายตา ลดสีสันให้น้อยลง ดู แล้วสบายตา 3. รูปภาพกับเนื้อหาสัมพันธ์กัน รูปภาพน้อยเกินไป ใส่รูปภาพเพิ่มเติม 4. ใช้ภาษาได้อย่างถูกต้องและเหมาะสม ควรใส่ภาษาอังกฤษเพิ่ม เพิ่มเติมภาษาอังกฤษ 5. เพลงที่ใช้ในการประกอบเว็บไซด์ มีความเหมาะสม เพลงเร็วเกินไป ไม่เข้ากับ เว็บไซด์ เปลี่ยนเพลงใหม่ให้ช้า ลงกว่าเดิม 6. เนื้อหามีความน่าสนใจและเหมาะสม เนื้อหาน้อยเกินไป ใส่เนื้อหาเพิ่ม 7. รายละเอียดครอบคลุมกับเว็บไซด์ ข้อมูลน้อยเกินไป เพิ่มข้อมูลที่เกี่ยวข้อง
  • 75.
    75 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ หลังจากการดาเนินการแล้ว สมาชิกภายในกลุ่มมีความเห็นว่า ต้องการให้บุคคลภายนอกทา การประเมินผลการดาเนินการให้ เพื่อสารวจความนิยม และนาผลการประเมินมาทาการปรับปรุง ผลิตภัณฑ์ จึงได้จัดทาคาถามสาหรับการประเมินผล ดังนี้ 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.
    76 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ผลสรุปการทดลองจากการประเมินภายในกลุ่ม รายการ ครั้งที่ 1 ครั้งที่ 2 8. รูปแบบ เว็บไซด์ มีความน่าสนใจ ตัวหนังสือเล็กเกินไป ควรปรับให้ใหญ่กว่านี้ ปรับขนาดตัวหนังสือ ให้ใหญ่กว่าเดิม 9. รูปภาพและสีสันใน เว็บไซด์ มีความสวยงาม มีสีสันมากเกินไป ทาให้ ลายตา ลดสีสันให้น้อยลง ดู แล้วสบายตา 10. รูปภาพกับเนื้อหาสัมพันธ์กัน รูปภาพน้อยเกินไป ใส่รูปภาพเพิ่มเติม 11. ใช้ภาษาได้อย่างถูกต้องและเหมาะสม ควรใส่ภาษาอังกฤษเพิ่ม เพิ่มเติมภาษาอังกฤษ 12. เพลงที่ใช้ในการประกอบเว็บไซด์ มีความเหมาะสม เพลงเร็วเกินไป ไม่เข้ากับ เว็บไซด์ เปลี่ยนเพลงใหม่ให้ช้า ลงกว่าเดิม 13. เนื้อหามีความน่าสนใจและเหมาะสม เนื้อหาน้อยเกินไป ใส่เนื้อหาเพิ่ม 14. รายละเอียดครอบคลุมกับเว็บไซด์ ข้อมูลน้อยเกินไป เพิ่มข้อมูลที่เกี่ยวข้อง
  • 77.
    77 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 4 การสารวจ และประเมินผล จากที่ได้จัดทาแบบสอบถามเพื่อทาการประเมินผล จากประชากรเป็นนักศึกษาภาคปกติ ภายในวิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระอุปถัมภ์ฯ ทั้งหมด 1,200 คน โดยใช้วิธีการสุ่ม ตัวอย่าง(Sampling) จึงได้จานวนกลุ่มตัวอย่างทั้งสิ้น 50 คน ใช้หลักการคานวณสูตรของ ทาโร ยามา เน่ (Taro Yamane , 1973 : 727-728) และ ของ R. VKrejcie and D.W. Morgan เพื่อป้ องกันการผิดพลาดจึงกาหนดให้ทาการสารวจจากกลุ่มตัวอย่างทั้งหมดจานวน100 คน แต่ทั้งนี้ ทางสมาชิกเห็นว่าจะเป็นการใช้งบประมาณมากเกินไป เพื่อให้การประเมินมีความพึงพอใจ จึงได้ทาการสารวจทั้งหมด 50 คน แต่ทาแบบกระจายกลุ่มตัวอย่าง
  • 78.
    78 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระอุปถัมภ์ฯ แบบประเมินความพึงพอใจโครงการ “เหนือ เหนือ YUMMY” เว็บไซด์ รายวิชา “โครงการ” ภาคเรียนที่ 1 ปีการศึกษา 2556 คาชี้แจงแบบสอบถามสารวจเพื่อพัฒนาการเรียนการสอนในสาขาการโรงแรม ตอนที่ 1 ข้อมูลผู้ตอบแบบสอบถาม เพศ ชาย หญิง ตาแหน่งหน้าที่ / ระดับการศึกษา อาจารย์ นักศึกษาระดับชั้น ปวช. ................ นักศึกษาระดับชั้น ปวส. ................. ตอนที่ 2 ให้ทาเครื่องหมาย √ ในช่องที่ตรงกับความคิดเห็น หมายเหตุ ระดับความคิดเห็น 5 หมายถึงเหมาะสมมากที่สุด ระดับความคิดเห็น 4 หมายถึงเหมาะสมมาก ระดับความคิดเห็น 3 หมายถึงเหมาะสมปานกลาง ระดับความคิดเห็น 2 หมายถึงเหมาะสมน้อย ระดับความคิดเห็น 1 หมายถึงเหมาะสมน้อยที่สุด ตอนที่ 3 ข้อเสนอแนะ ……………………………………................................................................ …………………………………….................................................................................................... รายการ ระดับความคิดเห็น 5 4 3 2 1 15. รูปแบบ เว็บไซด์ มีความน่าสนใจ 16. รูปภาพและสีสันใน เว็บไซด์ มีความสวยงาม 17. รูปภาพกับเนื้อหาสัมพันธ์กัน 18. ใช้ภาษาได้อย่างถูกต้องและเหมาะสม 19. เพลงที่ใช้ในการประกอบเว็บไซด์ มีความเหมาะสม 20. เนื้อหามีความน่าสนใจและเหมาะสม 21. รายละเอียดครอบคลุมกับเว็บไซด์
  • 79.
    79 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รวมภาพผลการประเมิน รูปที่1.ประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยคณะอาจารย์
  • 80.
    80 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รวมภาพผลการประเมิน รูปที่ 2 ประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยนักศึกษาของวิทยาลัยเทคโนโลยีสยาม ธุรกิจ ในพระอุปถัมภ์ฯ
  • 81.
    81 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ตารางสรุปผลการประเมิน ตารางที่ 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.
    82 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ตารางที่ 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.
    83 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ โดยนาผลคะแนนที่ได้จากการทา 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.
    84 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ มีเกณฑ์การประเมินผล ดังนี้ คะแนนเฉลี่ย 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.
    85 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ สรุปผลการประเมิน โครงการ “เหนือ เหนือ YUMMY” เว็บไซด์ มีรูปแบบมีความน่าสนใจ เนื้อหาและรูปภาพ มีความสัมพันธ์กัน อยู่ในเกณฑ์การประเมินระดับ มากที่สุด ซึ่งถือเป็นจุดเด่นของผลงาน เนื่องจาก มีความแปลกใหม่ แต่ยังคงต้องปรับปรุงเนื้อหาที่ต้องเพิ่มและผู้ชมมีความพึงพอใจกับการชมผลงาน ส่วนมาก โดยอาจศึกษาขั้นตอนการทาผลงานเพิ่มเติมจากแหล่งความรู้ต่างๆที่เกี่ยวข้อง และต้อง ปรับปรุงเรื่องของเพลงของผลงานให้มีความเหมาะสม และมีความน่าสนใจมากขึ้น การนาเสนอ ผลงานสื่อการเรียนการสอน “เหนือ เหนือ YUMMY” เว็บไซด์ เป็นที่นิยมในกลุ่มผู้ชมส่วนใหญ่ โดยที่ยังเนื้อหาเรื่องราวให้เกิดประโยชน์ต่อผู้ชมมากที่สุด ผลการประเมินโครงการ เหนือ เหนือ YUMMY” เว็บไซด์ ถือว่าอยู่ในเกณฑ์ที่สมาชิก กลุ่มผู้จัดทาโครงการพึงพอใจ และจะนาไปปรับปรุงในส่วนที่ต้องพัฒนา และแก้ไข เพื่อให้ผู้ชม เกิดพึงพอใจสูงสุดต่อผลงานสื่อการเรียนการสอน “เหนือ เหนือ YUMMY” เว็บไซด์ ทั้งหมด นักศึกษาระดับชั้น ปวช.1 5 คน คิดเป็นร้อยละ 10 ของจานวนผู้ตอบ แบบสอบถามทั้งหมด ปวช.2 4 คน คิดเป็นร้อยละ 8 ของจานวนผู้ตอบแบบสอบถามทั้งหมด ปวช.3 17 คนคิดเป็นร้อยละ 34 ของจานวนผู้ตอบแบบสอบถามทั้งหมดและนักศึกษาระดับชั้น ปวส.1 9 คน คิดเป็นร้อยละ 18 ของจานวนผู้ตอบแบบสอบถามทั้งหมด ปวส.2 5 คน คิดเป็น ร้อยละ 10 ของจานวนผู้ตอบแบบสอบถามทั้งหมด เมื่อได้ทาการสารวจกลุ่มตัวอย่างเรียบร้อยแล้ว สมาชิกในกลุ่มนาแบบสอบถามทั้งหมดมาทา การนับคะแนน โดยวิธีการ Tally สรุปได้ผลดังตารางต่อไปนี้
  • 86.
    86 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บทที่ 5 สรุป วิเคราะห์ผลการดาเนินการ วัตถุประสงค์ของการวิจัย เพื่อให้นักศึกษานาความรู้ที่ได้เรียนในสาขาวิชาการโรงแรม มาบูรณาการให้เกิดองค์ความรู้ใหม่ 1. เพื่อพัฒนารูปแบบเว็บไซด์ของอาหารประจาภาคเหนือให้มีความน่าสนใจมากขึ้น 2. เพื่อเป็นการเผยแพร่อาหารประจาภาคเหนือผ่านเว็บไซด์ ทาให้มีคนรู้จักมากขึ้น 3. เพื่อนาไปใช้ในชีวิตประจาวันในการประกอบอาหารและการเรียนรู้ได้อย่างเหมาะสม 4. เพื่อทาให้คนหันมาสนใจอาหารของภาคเหนือมากยิ่งขึ้น โดยการนาเสนอผ่านทางเว็บไซด์ ประชากรและกลุ่มตัวอย่าง (ในการสารวจ) นักศึกษาและอาจารย์วิทยาลัยเทคโนโลยี สยามธุรกิจในพระอุปถัมภ์ฯ จานวน 50คน จาก 1,200 คน ภาคปกติ เครื่องมือที่ใช้ในการวิจัย (ในการสารวจ) 1. แบบสอบถาม 2. เครื่องคอมพิวเตอร์ การเก็บรวบรวมข้อมูล (วิธีขั้นตอนการได้มา) การเก็บรวบรวมข้อมูลที่ได้มานั้น ได้มาจากเสนอเว็บไซด์กับผู้ทาแบบประเมิน โดยการเสนอ เว็บไซด์อาหารภาคเหนือให้กับผู้ทาแบบประเมิน และให้ผู้ประเมินทาการชมและกรอก แบบสอบถามโดยวิธีเช็ค โดยการสุ่มผู้ทาแบบประเมินเป็นอาจารย์และนักศึกษาระดับ ปวช,ปวส ระดับความพึงพอใจจากระดับดีมาก-ควรปรับปรุง เปรียบเป็น5-1 ข้อจากัดของการวิจัย (ในการสารวจ) 1. ผู้ทาแบบประเมินมีเวลาจากัดในการประเมินแบบสอบถาม 2. ขาดความรู้อย่างละเอียดในการทาเว็บไซด์
  • 87.
    87 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ปัญหาและอุปสรรค 1. ขาดความรู้ความเข้าทางด้านอาหารภาคเหนือ 2. ไม่มีความรู้ทางด้านการสร้างเว็บไซด์โดยการใช้โปรแกรม Dreamweaver cs6 3. ไม่มีความรู้ด้านการใช้โปรแกรม Photoshop CS6 4. ข้อมูลของอาหารภาคเหนือในสื่อแต่ละเว็บไซด์ มีข้อมูลที่ไม่ค่อยตรงกัน แนวทางการแก้ไข 1. ศึกษาจากหนังสือ นิตยสาร และเว็บไซด์ที่เกี่ยวกับการสร้างเว็บไซด์ 2. ศึกษาจากหนังสือ เว็บไซด์และผู้เชี่ยวชาญด้านการสร้างเว็บไซด์เพิ่มเติม 3. ศึกษาจากหนังสือและเว็บไซด์ในการใช้โปรแกรม Photoshop CS6 4. นาข้อมูลแต่ละเว็บไซด์มาเปรียบเทียบกันว่าข้อมูลมีความตรงกันมากน้อยเพียงใด และเว็บ ไซด์ไหนมีความเชื่อถือมากที่สุด วิเคราะห์ผลการดาเนินการ โครงการเว็บไซด์ เหนือ เหนือ YUMMY เกิดขึ้นเพราะเห็นถึงความสาคัญของเว็บไซด์ใน ปัจจุบันมากขึ้น ในปัจจุบันมีการนาเทคโนโลยีที่ เรียกว่าอินเทอร์เน็ตเข้ามาใช้กันออย่างกว้างขวาง แทบทุกหลังคาบ้านทาให้แหล่งข่าวทางการสื่อสารและการกระจายข่าวข้อมูลทางอินเทอร์เน็ตได้ดี ขึ้นจึงจะมีการนาเว็บไซด์โดยการใช้อินเทอร์เน็ตในการกระจายข่าวสารหรือข้อมูลต่างๆผ่านเว็บ ไซด์ต่างๆ โดยการนาเสนอข้อมูลอาหารภาคเหนือ วิธีการทา ส่วนผสมในการประกอบอาหาร ภาคเหนือ นาเสนอข้อมูลผ่านทางเว็บไซด์ เพื่อที่จะให้ผู้คนหันมาสนใจในอาหารภาคเหนือมากขึ้น เพราะผู้คน ในปัจจุบัน ใช้อินเทอร์เน็ตในการติดต่อสื่อสาร และค้นหาข้อมูล หลังจากการดาเนินการและนาผลงานเว็บไซด์ เหนือ เหนือ YUMMY มาให้กลุ่มตัวอย่าง ประเมินแล้ว พบเรื่องที่ต้องปรับปรุงคือ เรื่องเนื้อหาในเว็บไซด์ เพลงประกอบในเว็บไซด์ ซึ่ง ผลงานเว็บไซด์เหนือ เหนือ YUMMY เป็นที่พอใจมากกับผู้ชม เนื้อหาของเว็บไซด์ยังไม่เป็นที่พึง พอใจสูงสุดต่อกลุ่มผู้ชม อาจต้องมีการปรับเปลี่ยนเนื้อหา หาเนื้อหามาเพิ่มเติมในเว็บไซด์ เพื่อให้ เกิดความน่าสนในกลุ่มผู้ชมมากขึ้น แต่ต้องยังคงเนื้อหาเรื่องราวที่สาคัญเอาไว้เพื่อให้เกิดประโยชน์ ต่อผู้ชมมากที่สุด
  • 88.
    88 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ทั้งนี้การดาเนินการโครงการเว็บไซด์ เหนือ เหนือ YUMMY ถือว่ามีผลเป็นที่พึงพอใจต่อกลุ่ม ผู้จัดทา ที่ได้เผยแพร่ข้อมูลอาหารภาคเหนือผ่าทางรูปแบบเว็บไซด์และมีส่วนร่วมให้ผู้ชมหันมาใส่ ใจต่อการเรียนรู้เกี่ยวกับการทาอาหารภาคเหนือที่ให้คุณประโยชน์กับผู้ชมมากขึ้น และพร้อมที่จะ นาผลการประเมินไปปรับปรุง พัฒนาเพื่อให้เกิดผลงานที่มีคุณภาพสูงสุดต่อไป สรุปผลการวิจัย/ทดลอง (จากการทดลองเปรียบเทียบกับผลสารวจความพึงพอใจกลุ่มตัวอย่าง) เหนือ เหนือ yummy เว็บไซด์มีรูปแบบเว็บไซด์อยู่ในเกณฑ์การประเมินระดับดีมาก ซึ่ง ถือเป็นจุดเด่นของเว็บไซด์ เนื่องจากมีความน่าสนใจมาก แต่ยังคงต้องปรับปรุงเรื่องของสีสันและ ความสวยงานของเว็บไซด์ ให้มีสีสันที่สวยงานมากกว่าเดิม โดยอาจศึกษาขั้นตอนการทาเว็บไซด์ เพิ่มเติมจากแหล่งความรู้ต่าง ๆ ที่เกี่ยวข้อง และต้องปรับปรุงเรื่องข้อมูล เนื้อหาให้มีความน่าเชื่อถือ มากกว่าเดิม และเป็นที่นิยมในกลุ่มผู้ชมเว็บไซด์หรือใช้บริการเว็บไซด์ โดยที่ยังคงเนื้อหาเดิม ให้ เกิดประโยชน์ต่อผู้รับชมมากที่สุด ผลการประเมิน เหนือ เหนือ yummy เว็บไซด์ถือว่าอยู่ในเกณฑ์ที่สมาชิกกลุ่มผู้จัดทา โครงการพึงพอใจ และจะนาไปปรับปรุงในส่วนที่ต้องพัฒนา และแก้ไข เพื่อให้ผู้รับชมเกิดความพึง พอใจสูงสุดต่อ เหนือ เหนือ yummy เว็บไซด์ อภิปรายผลการทดลอง/ผลการสารวจ (ผลที่ได้ตรงตามที่คาดหวัง/สิ่งไม่ตรงไปตามที่ตั้งเป้ าไว้ใน ผลงาน) การทาเว็บไซด์ เหนือ เหนือ yummy เป็นการดัดแปลงเว็บไซด์ ให้มีความแปลกใหม่และ น่าสนใจ โดยการใช้โปรแกรม โปรแกรม Dreamweaver CS6 ,โปรแกรม Photoshop CS6 ในการ สร้างเว็บไซด์นี้ขึ้นมา แต่เนื่องจากขาดความรู้ในด้านการทาเว็บไซด์ และประสบการณ์การทาเว็บ ไซด์ ทาให้ค้นคว้าจากหนังสือและอินเทอร์เน็ต และผู้เชี่ยวชาญทาให้ได้เว็บไซด์ที่มีความน่าสนใจ และแปลกใหม่ขึ้นมา ข้อเสนอแนะจากผู้ทดลอง/ผู้เชี่ยวชาญ/กลุ่มตัวอย่าง จากการทดลองในครั้งแรกทาให้เว็บไซด์ออกมาไม่ค่อยดีมากเนื่องจากเกิดปัญหาการใส่เพลง เพราะใส่เพลงเข้าไปในเว็บไซด์แล้วเพลงไม่เล่นตามที่กาหนด จึงปรึกษาผู้เชี่ยวชาญโดยการให้ แปลงไฟล์เพลงก่อน โดยใช้โปรแกรมแปลงไฟล์เพลงก่อนแล้วนามาใส่ในเว็บไซด์จึงประสบ ผลสาเร็จ
  • 89.
    89 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ แนวทางการพัฒนาผลงาน จากการที่ได้ดาเนินการวางแผนการนาเสนอผลงานและประเมินผลโครงการเว็บไซด์ เกี่ยวกับอาหารภาคเหนือแล้ว สมาชิกผู้จัดทามีความเห็นว่า หากมีการนาผลงานไปพัฒนาต่อใน อนาคต จะต้องปรับปรุงในเรื่องต่าง ๆ ดังนี้ 1. การใส่ข้อมูล รายละเอียดในการเว็บไซด์ต้องมีการเพิ่มเติมและมีความน่าสนใจมากกว่านี้ 2. วางแผน วิธีการทาโปรแกรม Dreamweaver CS6 ทุกขั้นตอนอย่างละเอียด เพื่อผลงานที่มี คุณภาพและมาตรฐาน 3. เรียนรู้เทคโนโลยีใหม่ๆเพื่อนามาปรับปรุงผลงานให้น่าสนใจ 4. ในเว็บไซด์จะมีเกมตอบคาถามเกี่ยวกับอาหารภาคเหนือมาเพื่อเพิ่มความบันเทิง 5. ออกแบบผลงานให้มีความน่าสนใจมากขึ้นและสามารถนาข้อมูลไปประยุกต์ใช้ในการ สร้างเว็บไซด์ได้ 6. สามารถนาเว็บไซด์ไปอัพโหลดเพื่อให้ใช้งานได้มากขึ้น 7. ใช้เป็นสื่อการเรียนการสอน ในการประกอบอาหารได้
  • 90.
    90 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ บรรณานุกรม เว็บไซด์ 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://www.hellomyweb.com/index.php/main/content/47 http://www.hellomyweb.com/index.php/main/content/48 http://www.hellomyweb.com/index.php/main/content/49 http://www.hellomyweb.com/index.php/main/content/50 http://www.hellomyweb.com/index.php/main/content/51 http://www.hellomyweb.com/index.php/main/content/52 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.
    91 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ภาคผนวก การประเมินแบบสอบถาม การประเมินแบบสอบถาม ประเมินแบบสอบถามโดยนักศึกษาปวช. ประเมินแบบสอบถามโดยอาจารย์
  • 92.
    92 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ประเมินแบบสอบถามโดยนักศึกษาปวช ประเมินแบบสอบถามโดยนักศึกษาปวช ประเมินแบบสอบถามโดยนักศึกษาปวช. ประเมินแบบสอบถามโดยนักศึกษาปวช
  • 93.
    93 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี ดัชนีรูปภาพ หน้า รูปที่ 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.
    94 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 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.
    95 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 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.
    96 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 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.
    97 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 75 เริ่มออกแบบและสร้าง header ของเว็บไซด์ 68 รูปที่ 76 ออกแบบหน้าแรกของเว็บไซด์ 69 รูปที่ 77 ออกแบบคาขวัญของเว็บไซด์ 70 รูปที่ 78 ออกแบบลิงค์คาขวัญของเว็บไซด์ 70 รูปที่ 79 ออกแบบประเพณีของเว็บไซด์ 71 รูปที่ 80 ออกแบบอาหารของเว็บไซด์ 71 รูปที่ 81 ออกแบบส่วนผสมของเว็บไซด์ 72 รูปที่ 82 ออกแบบวิธีทาของเว็บไซด์ 72 รูปที่ 83 ออกแบบคุณค่าทางอาหารของเว็บไซด์ 73 รูปที่ 84 การใส่เพลงในเว็บไซด์ 73 รูปที่ 85 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยอาจารย์ 79 รูปที่ 86 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยอาจารย์ 79 รูปที่ 87 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยอาจารย์ 79 รูปที่ 88 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยนักศึกษา 80 รูปที่ 89 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยนักศึกษา 80 รูปที่ 90 การประเมินโครงการเหนือ เหนือ Yummy เว็บไซด์ โดยนักศึกษา 80 รูปที่ 91 การประเมินแบบสอบถาม 91
  • 98.
    98 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี (ต่อ) ดัชนีรูปภาพ หน้า รูปที่ 92 การประเมินแบบสอบถาม 91 รูปที่ 93 ประเมินแบบสอบถามโดยนักศึกษา 91 รูปที่ 94 ประเมินแบบสอบถามโดยอาจารย์ 91 รูปที่ 95 ประเมินแบบสอบถามโดยนักศึกษา ปวช. 91 รูปที่ 96 ประเมินแบบสอบถามโดยนักศึกษา ปวช 92 รูปที่ 97 ประเมินแบบสอบถามโดยนักศึกษา ปวช 92 รูปที่ 98 ประเมินแบบสอบถามโดยนักศึกษา ปวช 92 รูปที่ 99 รูปผู้จัดทา 100 รูปที่ 100 รูปผู้จัดทา 101 รูปที่ 101 รูปผู้จัดทา 102
  • 99.
    99 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ดัชนี ดัชนีตาราง หน้า ตารางที่ 1 งบประมาณการดาเนินการ 67 ตารางที่ 2 สรุปผลการทดลองจากการประเมินผลในกลุ่ม 76 ตารางที่ 3 ตารางสรุปผลการประเมิน 81 ตารางที่ 4 ตารางสรุปความถี่ของสถานะผู้ตอบแบบสอบถาม 81 ตารางที่ 5 ตารางสรุปผลคะแนน 82 ตารางที่ 6 ตารางสรุปผลความคิดเห็น 84
  • 100.
    100 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ประวัติผู้จัดทา ชื่อ – นามสกุล นางสาว กมลชนก คงอยู่ ประวัติ ประวัติส่วนตัว วันเกิด 02 มิถุนายน พ.ศ.2538 อายุ 18 ปี ที่อยู่ 1614/21 นิคมมักกะสัน เขตราชเทวี แขวงมักกะสัน ถนนเพชรบุรีตัดใหม่ กรุงเทพมหานคร 10400 ประวัติการศึกษา - ประถมศึกษา โรงเรียนวัดดิสหงสาราม พ.ศ. 2550 - มัธยมศึกษา โรงเรียนจานงค์วิทยา พ.ศ. 2553 - ประกาศนียบัตรวิชาชีพ สาขาการกาโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระ อุปถัมภ์ฯ
  • 101.
    101 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ประวัติผู้จัดทา ชื่อ – นามสกุล นางสาว จันจิรา ดวนลี อายุ 19 ปี ประวัติ ประวัติส่วนตัว วันเกิด 05 เมษายน พ.ศ.2537 อายุ 19 ปี ที่อยู่ 191 หมู่3 ตาบลพุทธบาท อาเภอชนแดน จังหวัด เพชรบูรณ์ 10670 ประวัติการศึกษา - ประถมศึกษา โรงเรียนเสรีศึกษา พ.ศ. 2549 - มัธยมศึกษา โรงเรียนเสรีศึกษา พ.ศ. 2552 - ประกาศนียบัตรวิชาชีพ สาขาการกาโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระ อุปถัมภ์ฯ
  • 102.
    102 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ประวัติผู้จัดทา ชื่อ – นามสกุล นางสาว อัจฉราพรรณ แซ่ลิ้ม ประวัติ ประวัติส่วนตัว วันเกิด 21 พฤศจิกายน พ.ศ.2538 อายุ 18 ปี ที่อยู่ 112/11 ซ. อนามัยงานเจริญ 31 ถ. พระราม 2 เขตท่าข้าม แขวงบางขุนเทียน กรุงเทพมหานคร 10150 ประวัติการศึกษา - ประถมศึกษา โรงเรียนวัดช่องลม พ.ศ. 2550 - มัธยมศึกษา โรงเรียนเจ้าพระยาวิทยาคม พ.ศ. 2553 - ประกาศนียบัตรวิชาชีพ สาขาการกาโรงแรม วิทยาลัยเทคโนโลยีสยามธุรกิจ ในพระ อุปถัมภ์ฯ
  • 103.
    103 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ โครงร่างในการจาทาโครงการ 1. ชื่อโครงการงานค้นคว้าวิจัย เหนือ เหนือ Yummy Website 2. ความเป็นมาและความสาคัญของปัญหา (ความสนใจ, ต้องการพัฒนา, สร้างสรรค์ผลงาน) ในปัจจุบันมีการนาเทคโนโลยีที่ เรียกว่าอินเทอร์เน็ตเข้ามาใช้กันออย่างกว้างขวางแทบทุกหลังคา บ้านทาให้แหล่งข่าวทางการสื่อสารและการกระจายข่าวข้อมูลทางอินเทอร์เน็ตได้ดีขึ้นจึงจะมีการ นาเว็บไซด์โดยการใช้อินเทอร์เน็ตในการกระจายข่าวสารหรือข้อมูลต่างๆผ่านเว็บไซด์ต่างๆ ผู้จัดทาจึงจัดทาโครงการนี้ขึ้น เพื่อศึกษาและค้นคว้าการทาเว็บไซด์อาหารประจาภาคเหนือ และเพื่อเผยแพร่ข้อมูล วิธีการทาอาหารภาคเหนือให้สะดวกและรวดเร็วขึ้นเพื่อให้ผู้เข้ามาดูเว็บไซด์ ได้รับรู้ข้อมูลอาหารประจาภาคเหนือมากขึ้น 3. วัตถุประสงค์ของโครงการ 3.1 เพื่อให้นักศึกษานาความรู้ที่ได้เรียนในสาขาวิชาการโรงแรม มาบูรณาการให้เกิดองค์ความรู้ใหม่ 3.2 เพื่อพัฒนารูปแบบเว็บไซด์ของอาหารประจาภาคเหนือให้มีความน่าสนใจมากขึ้น 3.3 เพื่อเป็นการเผยแพร่อาหารประจาภาคเหนือผ่านเว็บไซด์ ทาให้มีคนรู้จักมากขึ้น 3.4 เพื่อนาไปใช้ในชีวิตประจาวันในการประกอบอาหารและการเรียนรู้ได้อย่างเหมาะสม 3.5 เพื่อทาให้คนหันมาสนใจอาหารของภาคเหนือมากยิ่งขึ้น โดยการนาเสนอผ่านทางเว็บไซด์ 4. ขอบเขตการวิจัย สร้างเว็บไซด์อาหารประจาภาคเหนือขึ้นเพื่อให้เว็บไซด์ที่สร้างขึ้น มีความน่าสนใจและโดดเด่น จากเว็บไซด์อื่น 5. คานิยาม 5.1 เว็บไซด์ (Web Site) คือ แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ
  • 104.
    104 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ ภาคเหนือ/เหนือ : บริเวณที่อยู่ทางเหนือของประเทศ 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.
    105 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 7.5 Microsoft Word 2010 8. ประโยชน์ที่คาดว่าจะได้รับ 8.1 สามารถนาความรู้ที่ได้จากหาข้อมูลอาหารประจาภาคเหนือไปใช้ได้ในชีวิตประจา 8.2 รู้จักการสร้างเว็บไซด์ให้มีความน่าสนใจมากยิ่งขึ้น 8.3 สามารถค้นคว้าหาข้อมูลเพิ่มเติมได้จากเว็บไซด์นี้แล้วนาไปประยุกต์ใช้ในการเข้าสู่สมาคม อาเซียน 8.4 รู้จักวิธีการสร้างเว็บไซด์โดยใช้โปรแกรม Dream weaver cs6 มากยิ่งขึ้น 8.5 มีการจัดแจงและแบ่งงานในการช่วยเหลือและร่วมมือกันในการทางาน 9. กรอบแนวความคิด (Conceptual) ต้องการให้นักศึกษารู้จักอาหารภาคเหนือมากขึ้น ว่ามีลักษณะ รสชาติอาหารอย่างไร มีวัฒนธรรม ในการกินอย่างไร จึงได้จัดทาเว็บไซด์นี้ขึ้นมาให้มีความน่าสนใจต่างจากเว็บไซด์อื่น
  • 106.
    106 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ 10. ขั้นตอนดาเนินการและระยะเวลา 11. งบประมาณ รายละเอียด ราคา ค่า Internet 613 บาท คู่มือใช้งาน Photoshop CS6 250 บาท คู่มือใช้งาน Dreamweaver CS6 250 บาท ค่าใบประเมิน 55 บาท ค่าจัดทารูปเล่มโครงการ 585 บาท
  • 107.
    107 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ รวม 1698 บาท 12.ผู้จัดทา 1.นางสาวกมลชน คงอยู่ 2.นางสาวจันจิรา ดวนลี 3.นางสาวอัจฉราพรรณ แซ่ลิ้ม 13.อาจารย์ที่ปรึกษาโครงการ 13.1 อาจารย์จารัส รู้สมัย ( อาจารย์คณะอุตสาหกรรมบริการ ) 13.2 อาจารย์พรชิตา เทือกทา ( อาจารย์คณะเทคโนโลยีสารสนเทศ ) 13.3 อาจารย์สันติ ทองประสูตร ( อาจารย์คณะเทคโนโลยีสารสนเทศ ) 14.ปัญหา อุปสรรคที่คาดว่าจะพบ และแนวทางแก้ไข ปัญหา / อุปสรรค แนวทางแก้ไข 1.ความรู้ในการสร้างเว็บไซด์มีน้อยไป 1.ไปเรียนรู้วิธีการสร้างเว็บไซด์เพิ่มเติม 2. เว็บไซด์ที่สร้างออกมมาอาจจะไม่ค่อยดึงดูดใจ 2.พยายามหาจุดเด่นให้คนเข้ามาชมเว็บไซด์มากขึ้น 3.เว็บไซด์อาหารประจาภาคเหนือจานวนมากแล้ว 3. หาช่องทางในการนาเสนอเว็บไซด์ให้มีความ น่าสนใจจากเว็บไซด์อื่น
  • 108.
    108 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ จัดนิทรรศการนาเสนอผลโครงงานค้นคว้าวิจัย (Research & Study Presentation Exhibition) ขั้นตอนดำเนินกำรจัดทำโครงกำรค้นคว้ำวิจัย สารวจความสนใจและแรงบันดาลใจของตน SWOT ศึกษาค้นคว้า เอกสาร ข้อมูล งานวิจัยที่เกี่ยวข้อง/ปรึกษา ผู้เชี่ยวชาญ โครงร่างงานค้นคว้าวิจัย (Research & Study Proposal) ขอรับข้อเสนอแนะและแนวความคิดจาก ผู้เชี่ยวชาญ/ที่ ปรึกษา ส่งตรวจ พร้อมอธิบายและตอบข้อซักถาม จากที่ปรึกษา ดาเนินการจัดทา บทที่ 1-5 โดยนามาปรึกษา เป็นระยะๆ หรือให้เสร็จสิ้นในแต่ละบท ขอรับข้อเสนอแนะและแนวความคิดจาก ผู้เชี่ยวชาญ/ที่ ปรึกษา นาเสนอสรุปผลโครงงานค้นคว้าวิจัย (Presentation Research & Study) ขอรับข้อเสนอแนะและแนวความคิดจาก ผู้เชี่ยวชาญ/ที่ ปรึกษา จัดทารูปเล่ม/ส่งตรวจโครงงานค้นคว้าวิจัย นาเข้ารูปเล่ม (Research & Study Text) 2 สิงหาคม 2556
  • 109.
    109 Modern Merit Professional: วิชาการทันสมัย ใฝ่ใจคุณธรรม น้อมนาปฏิบัติการ