กลุ่ม3
-
Upload
benz-lovestory -
Category
Documents
-
view
251 -
download
1
description
Transcript of กลุ่ม3
![Page 1: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/1.jpg)
![Page 2: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/2.jpg)
1.นางสาวพชัราภรณ ์สอนอ่่า รหัส533410080318
2.นางสาวเสาวลักษณ ์แก้วเกต รหัส533410080331
3.นายนิรันดร์ กิริยาดี รหัส533410080338
4.นายพัฒพล วรรณสัมผัส รหัส533410080339
สาขาคอมพิวเตอร์ศึกษา
คณะ ครุศาสตร์
![Page 4: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/4.jpg)
ส่วนหัว
1.Logo ซึ่งเป็นส่วนส าคัญที่จะท าให้ผู้เข้าชมทราบถึงเอกลักษณ์ และความน่าเช่ือถือของมหาวิทยาลัย
2.Navigation เป็นส่วนที่จะน าผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของเว็บไซต์
![Page 5: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/5.jpg)
ส่วนเนื้อหา
3. Content เป็นเว็บไซต์ที่มีเนื้อหาเก่ียวกับการศึกษา ซึ่งจะท าให้ผู้ที่ต้องการค้นคว้าเข้าถึงเนื้อหาได้เร็วขึ้น
![Page 6: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/6.jpg)
ส่วนท้าย
4. Whitespace มีพื้นที่ว่างในเว็บไซต์ ท าให้ได้พักสายตา
![Page 7: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/7.jpg)
5. Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงกต์่างๆเอาไว้ หรือเป็นเนื้อหาที่เก่ียวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ
![Page 8: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/8.jpg)
1. มีข้อความทักทายต้อนรับ เพื่อให้ผู้เข้าชมรู้สึกว่าเป็นเว็บไซต์ใส่ใจแม้ในรายละเอียดเล็กน้อย
![Page 9: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/9.jpg)
2. มีกล่องส่าหรับใส่ชื่อผู้เรยีนและรหสัผา่น เพื่อจะได้พิสูจน์ตัวตน
https://w3.tue.nl/en/login/
![Page 10: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/10.jpg)
3. แสดงรายวิชาต่างๆ เพื่อให้ผู้ใช้สามารถเลือกเรียนรู้ได้ตามต้องการ
http://w3.tue.nl/en/navigate/ portals/student/
![Page 11: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/11.jpg)
4.มีภาพกราฟิก เพื่อช่วยดึงดูดความสนใจแก่ผู้เยี่ยมชม
![Page 12: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/12.jpg)
1.รูปแบบตัวอักษรและขนาด เลือกรูปแบบของตัวอักษรได้อย่างเหมาะสม เหมาะกับงานที่เป็นทางการ ขนาดของตัวอักษรพอเหมาะ ซึ่งเหมาะกับกลุ่มนักศึกษา
![Page 13: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/13.jpg)
2.การก่าหนดระยะห่างและพืน้ที่ว่าง ระยะห่างระหว่างตัวอักษรมีขนาดพอเหมาะ ไม่แออัดจนเกินไป มีที่ว่างส าหรับพักสายตา
3.การก่าหนดโครงสี สีบนตัวภาพ พื้นภาพ และบนตัวอักษรมีความโดดเด่นชัดเจน
![Page 14: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/14.jpg)
4.การจัดวางต่าแหน่ง มีการวางโลโก้ไว้มุมบนซ้ายซึ่งเป็นจุดสนใจมากที่สุด มีการเน้นภาพกราฟิกไว้ในที่สะดุดตาคนมองเห็นง่าย มีการจัดวางเนื้อหาไว้ใกล้ภาพทีมีเนื้อหาสัมพันธ์กัน
![Page 15: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/15.jpg)
ทฤษฏีการก่าหนดรูปภาพประกอบ
เว็บไซต์ของมหาวิทยาลัยสอดคล้องกับทฤษฎีของ จาตุพล ค ารงค์ ที่กล่าวว่า การวางต าแหน่งภาพที่ดีจะท าให้ชวนมอง การสร้างจุดสนใจของภาพ วิธีที่ง่ายที่สุดคือวางไว้ตรงกลางภาพ หรือที่เรียกว่าบริเวณจุดศูนย์กลางความสนใจการมอง
![Page 16: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/16.jpg)
ทฤษฎีการเน้นจุดสนใจ
เว็บไซต์ของมหาวิทยาลัยสอดคล้องกับทฤษฎีของ Herman F Brandt ซึ่งท่านได้ศึกษาทดลองของต าแหน่งที่เด่นที่สุดในการจัดวางโลโก้ จากการมองในกรอบสี่เหลี่ยมของจอคอมพิวเตอร์หรือกระดาษ
41% มีความสนใจมากที่สุด 20% สนใจอันดับ 3
25% สนใจอันดับ 2 14% สนใจอันดับ 4
![Page 17: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/17.jpg)
ทฤษฎีเกี่ยวกับตัวอักษร
เว็บไซต์ของมหาวิทยาลัยสอดคล้องกับทฤษฎีของ ทิพย์สุดา ปทุมานนท์ได้บอกทฤษฏีเกี่ยวกับตัวอักษรไว้ดังนี้
1.ขนาดของตัวอักษร จะต้องสัมพันธ์กับอายุของผู้ใช้ ซึ่งได้ก าหนดได้อย่างถูกต้อง ซึ่งนักศึกษาอยู่ในวัยผู้ใหญ่ปกต ิ
อายุ ขนาดอักษรโรมัน/point อักษรไทย/point
5-7 ปี 18 24-30
7-10 ปี 12-14 18-30
10-12 ปี 16-18 16-18
12 ปีข้ึนไป 11-12 16-18
ผู้ใหญ่ปกต ิ 10-12 14-16
คนสูงอายุ 11-12 16-18
![Page 18: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/18.jpg)
2. รูปแบบตัวอักษร จะต้องเลือกใช้ Font ได้ตรงตามชนิดของเว็บไซต์ ซึ่งมหาวิทยาลัยได้ใช้ Font แบบ Serif ซึ่งเป็นระเบียบ เป็นทางการ เหมาะที่จะใช้ในงานที่เป็นทางการ และต้องการความน่าเช่ือถือมากๆ
![Page 19: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/19.jpg)
ทฤษฎีการใช้ส ี เว็บไซต์ของมหาวิทยาลัยสอดคล้องกับทฤษฎีของ มาโนชน ์กงกะนันทน์
กล่าวว่า สีพื้นหลังควรเป็นสีที่สว่าง ดูเย็นตาสบายตา ส่วนตัวอักษรจะต้องเป็นสีที่ทึบ สีพื้นและตัวอักษรควรเป็นสีที่ตัดกัน ขัดแย้งกันมากที่สุด เพราะจะท าให้ตัวอักษรเด่นชัดขึ้น
1.สีของพื้นหลัง มหาวิทยาลัยได้ใช้สีขาวเป็นพื้นหลังจึงท าให้ดูสบายตา 2.สีตัวอักษร มหาวิทยาลัยได้ใช้สีด า ซึ่งท าให้ตัวหนังสือดูเด่นชัด อีกทั้งตัด
กันกับสีพื้น
![Page 20: กลุ่ม3](https://reader034.fdocument.pub/reader034/viewer/2022042713/545536a1af795974408b70c2/html5/thumbnails/20.jpg)