การออกแบบ และ การสราง้ website...
TRANSCRIPT
![Page 1: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/1.jpg)
การออกแบบ และ การสราง Website
BI Systems Services Ltd.,Part
![Page 2: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/2.jpg)
การออกแบบ และ การสราง Website
• ตวอยาง Website ทใชส าหรบการออกแบบ
http://www.textures.com/ เปนการใชลายไม หรอ ลายทางเปน
background
https://www.pexels.com/การหาภาพฟร
http://www.123rf.com/
https://color.adobe.com/c
reate/color-wheel/ทฤษฎส
http://www.f0nt.com/ เตมวญญาณใสงานอกษร
![Page 3: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/3.jpg)
หลกการออกแบบเวบไซต
♦ การก าหนดขนาดเวบเพจ ♦
ขนาดของเวบไซตทนยมในปจจบนม 2 ขนาด คอ
1. ขนาดเวบไซตแบบ 800 X 600 pixels เปนขนาดทสามารถใชไดกบหนาจอทกขนาด
ในปจจบนเปนขนาดของการออกแบบเวบไซตทใชในอดต เนองจากอดตขนาดของ
จอคอมพวเตอรมขนาดเลก
2. ขนาดเวบไซตแบบ 1024 X 768 pixels เปนขนาดทนยมในปจจบน เนองจากผใช
นยมใชจอคอมพวเตอรขนาดใหญขนเนองมาจากราคาจอคอมพวเตอรทถกลง
การออกแบบ และ การสราง Website
![Page 4: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/4.jpg)
หลกการออกแบบเวบไซต♦ รปแบบการออกแบบเวบไซต ♦
เวบไซตในปจจบนจะมการออกแบบทแตกตางกนไมมากนก ซงการออกแบบหนาตาเวบไซตสวนใหญ
จะมองดองคประกอบขององคกร หนวยงาน หรอเนอหาเรองทน าเสนอเปนหลก ซงการออกแบบ
หนาตของเวบไซตมอย 3 แบบ คอ
1. การออกแบบเวบไซตทเนนการน าเสนอเนอหา
เปนการออกแบบเวบไซตทเนนการน าเสนอเนอหามากกวารปภาพ โดยโครงสรางใชรปแบบตาราง
เปนหลก มการออกแบบหนาตารปแบบงาย เชน มเมนสารบญ และเนอหา
2. การออกแบบเวบไซตทเนนภาพกราฟก
เปนการออกแบบเวบไซตทเนนภาพกราฟกทสวยงาม ซงอาจจะใชโปรแกรม Photoshop ส าหรบ
การตกแตงภาพ ขอด สวยงาม นาสนใจ ขอเสย อาจจะใชเวลาในการโหลดเวบนาน
3.การออกแบบเวบไซตทมทงภาพและเนอหา
เปนการออกแบบเวบทนยมในปจจบนซงประกอบดวยขอความ รปภาพ โดยมการจดองคประกอบ
ตาง ๆ เพอใหเวบนาสนใจ
การออกแบบ และ การสราง Website
![Page 5: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/5.jpg)
ก าหนด
วตถประสงค
และ ก าหนด
กลมเป าหมาย
กลมเป าหมายใด
ทผสรางตองการ
สอสาร
วางแผนเกยวกบ
การจดรปแบบ
โครงสรางเนอหา
สาระ
ก าหนด
รายละเอยด
ใหกบ
โครงสราง
ท าการสราง
เวบไซตแลวน าไป
ทดลองเพอหา
ขอผดพลาดและท า
การแกไขปรบปรง
หลกในการออกแบบโครงสรางเวบไซต ควรพจารณาดงน
การออกแบบ และ การสราง Website
![Page 6: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/6.jpg)
การออกแบบ และ การสราง Website
โครงสรางทชดเจน
จดโครงสรางหรอ
จดระเบยบของขอมล
ทชดเจน แยกยอย
เนอหาออกเปนสวน
ตาง ๆ ทสมพนธกน
และใหอยใน
มาตรฐานเดยวกน
การใชงานทงาย
ลกษณะของเวบทม
การใชงานงายจะ
ชวยใหผใชรสกสบาย
ใจตอการอานและ
สามารถท าความ
เขาใจกบเนอหาได
อยางเตมท
การเชอมโยงทด
ลกษณะไฮเปอรเทกซ
ทใชในการเชอมโยง
ควรอยในรปแบบท
เปนมาตรฐาน
ความเหมาะสมในหนาจอ
เนอหาทน าเสนอใน
แตละหนาจอควรสน
กระชบ และทนสมย
หลกเลยงการใช
หนาจอทมลกษณะ
การเลอนขนลง
(Scrolling)
ความรวดเรว
ความรวดเรวเปนสง
ส าคญประการหนงท
สงผลตอการเรยนร
ผใชจะเกดอาการเบอ
หนายและหมดความ
สนใจกบเวบทใชเวลา
ในการแสดงผลนาน
องคประกอบทดของการออกแบบเวบไซต
![Page 7: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/7.jpg)
แนวทางการ Design Website ยคใหม
• สวนหว (Header)
• สวนเนอหา (Content Area)
• เมนหลก (Primary Navigation)
• เมนรอง (Secondary Navigation)
• หวเรอง (Headlines)
• สวนทายของบทความ (Post’s Footer)
• สวนทายของเวบไซด (Footer)
• โฆษณา (Advertisements)
การออกแบบ และ การสราง Website
![Page 8: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/8.jpg)
สวนหว (Header)
• ผเยยมชมสวนใหญจะเหนเปนสวนแรก
• เปนสวนทส าคญทสด มนเปนสงเดยวทจะแยก ใหเหนถงความ
แตกตางระหวางเวบของคณกบเวบอน ๆ นบลานเวบ
• เปนสงทสดงถงเอกลกษณของเวบคณเพอใหเกดการจดจ า
การออกแบบ และ การสราง Website
![Page 9: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/9.jpg)
ส ‹‹Çนเนอหา (Content Area)
• สวนเนอหาเปนสวนทผอานหรอผเยยมชม ใชเวลาจดจออยนาน
ทสด
• สวนเนอหางายตอการอาน
• ไมควรมสงทดงความสนใจผอานมากจนเกนไป
• สงส าคญอกสงหนงคอ ตองวางโครงสรางเนอหาใหดกวา อะไร
ส าคญทสด ไปจนถง ส าคญนอยทสด
การออกแบบ และ การสราง Website
![Page 10: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/10.jpg)
เมนหลก (Primary Navigation)
• เมนหลก คอ ชดของลงคทจะน าพาไปสสวนอน ๆ ของเวบท
แตกตางกนอยางชดเจน
• วางไวใกลกบสวนหว เพราะผเยยมชมสวนใหญจะคาดหวงวา
เมนหลกจะตองอยแถวน
การออกแบบ และ การสราง Website
![Page 11: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/11.jpg)
เมน Ù รอ§ (Secondary Navigation)
• เมนรอง คอ ชดของลงคทน าพาผเยยมชมไปยง สวนยอยอน ๆ
ของเนอหาทอยในขอบเขตเดยวกน (section)
• อยในรปแบบสวนดานขาง (sidebar)
• เมนรองทดควรจะเปนลงคไปยงบทความ ทผเยยมชมคลกดมาก
ทสด
การออกแบบ และ การสราง Website
![Page 12: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/12.jpg)
การออกแบบ และ การสราง Website
หวเรอง (Headlines)
• หวเรองของแตละบทความมไวเพอดงดดความสนใจผกาน
• ยวเยาใหอานเนอหาทงหมดในทสด
• หวเรองของคณจะตองเดน โดยสามารถท าไดหลากหลายวธ
![Page 13: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/13.jpg)
การออกแบบ และ การสราง Website
สวนทายของบทความ (Post’s Footer)
• สวนทายของบทความจะอยระหวางดานลางบทความ บรรทด
สดทายกบสวนแสดงความคดเหน
• สวนทชกจงผเยยมชม/ผอาน ไปยงบทความอนๆ ทเกยวของ หรอ
บทความทส าคญ
![Page 14: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/14.jpg)
การออกแบบ และ การสราง Website
สวนทายของเวบ (Footer)• สามารภน าเมนรองมาใสไวได เพอลดความแออดของลงค ในเมนรองดานขางเวบ
• ผอาน อานเนอหาจบแลว หรอ อานสวนแสดงความคดเหนเสรจแลว นบเปนชวงเวลาทด
ทสดทตณจะได น าเสนอบทความอนๆ ดวยการวางเมนรองไวในสวนทายเวบน
• ลงคทนาจะน ามาใสควรเปน บทความทมผอานมากทสด บทความแนะน า คณอาจจะใส
ลงค เกยวกบเรา และ การตดตอไปดวย ถาหากเปาหมายของคณคอ ผเยยมชมเวปคณ
![Page 15: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/15.jpg)
การออกแบบ และ การสราง Website
ตงชอเวป
สราง Framework layout
เปรยบเทยบขอมลกบเวปคแขง
เลอก Hosting และ จด Domain
name
จด Domain name กอน แลวคอย
สราง website
กระบวนการสรางเวปไซต
![Page 16: การออกแบบ และ การสราง้ Website Design/การออกแบบ Website1.pdf · การออกแบบ และ การสร้าง](https://reader030.vdocuments.site/reader030/viewer/2022040401/5e784b07e52c68716227c7c7/html5/thumbnails/16.jpg)
การออกแบบ และ การสราง Website