การออกแบบเว็บไซต์.


3 views
Uploaded on:
Category: People / Lifestyle
Description
การออกแบบเว็บไซต์. อาจารย์กรรณิการ์ มาระโภชน์. วัตถุประสงค์. เมื่อจบบทเรียนนี้แล้วนักศึกษาสามารถ บอกองค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ได้อย่างถูกต้อง ออกแบบเว็บไซต์ได้อย่างถูกต้อง และเหมาะสม. เนื้อหา. องค์ประกอบพื้นฐานของการออกแบบ วิธีการสร้างเว็บเพจ กระบวนการ 13 ขั้นตอนในการออกแบบ
Transcripts
Slide 1

การออกแบบเว็บไซต์ อาจารย์กรรณิการ์ มาระโภชน์

Slide 2

วัตถุประสงค์ เมื่อจบบทเรียนนี้แล้วนักศึกษาสามารถ บอกองค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ได้อย่างถูกต้อง ออกแบบเว็บไซต์ได้อย่างถูกต้อง และเหมาะสม

Slide 3

เนื้อหา องค์ประกอบพื้นฐานของการออกแบบ วิธีการสร้างเว็บเพจ กระบวนการ 13 ขั้นตอนในการออกแบบ หลักการออกแบบเว็บไซต์ รูปแบบของเว็บไซต์

Slide 4

องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ความเรียบง่าย ( Simplicity) มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบเสริมที่จำเป็นเท่านั้น ความสม่ำเสมอ ( Consistency) สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี ถ้าลักษณะของแต่ละหน้าในเว็บไซต์เดียวกัน แตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้

Slide 5

องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ความเป็นเอกลักษณ์ ( Identity) การออกแบบต้องคำนึงถึงลักษณะขององค์กร รูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ขององค์กร เนื้อหาที่มีประโยชน์ ( Useful Content) ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ ควรมีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ

Slide 6

องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ระบบเนวิเกชันที่ใช้งานง่าย ( User-Friendly Naviagtion) ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ มีลักษณะที่น่าสนใจ ( Visual Appeal) ความน่าในใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น

Slide 7

องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ การใช้งานอย่างไม่จำกัด ( Compatibility) ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้บราวเซอร์ชนิดใดชนิดหนึ่ง สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา คุณภาพในการออกแบบ ( Design Stability) ควรให้ความสำคัญกับการออกแบบเว็บไซต์ ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูล

Slide 8

องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ระบบการใช้งานที่ถูกต้อง ( Functional Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น ควรมีการตรวจสอบการทำงานอยู่เสมอ

Slide 9

ปัจจัยสำคัญที่ผู้ใช้ต้องการจากเว็บไซต์ มีเนื้อหาที่เป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ มีการปรับปรุงเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว การใช้งานที่สะดวก เข้าใจง่าย

Slide 10

ทีมงานพัฒนาเว็บไซต์ Webmaster เป็นผู้ควบคุมในเรื่องการออกแบบ เนื้อหา และรายละเอียดทางเทคนิค Information Architect ทำหน้าที่จัดระเบียบข้อมูลและทดสอบประสิทธิภาพในการใช้งาน Designer เป็นผู้ออกแบบลักษณะหน้าตาของเว็บไซต์ และองค์ประกอบต่าง ๆ HTML and JavaScript Coder รับผิดชอบการสร้างเว็บเพจโดยอาศัยเครื่องมือต่าง ๆ ปรับปรุง เปลี่ยนแปลงข้อมูล รวมถึงการอัพโหลดไฟล์

Slide 11

ทีมงานพัฒนาเว็บไซต์ Developer/Programmer เป็นผู้เขียนสคริปต์และโปรแกรมต่าง ๆ อาจต้องเกี่ยวข้องกับระบบฐานข้อมูล System Administrator ทำหน้าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึงฮาร์ดแวร์และซอฟต์แวร์อื่นที่เกี่ยวข้อง สามารถวิเคราะห์และปรับตั้งระบบเพื่อการทำงานที่มีประสิทธิภาพ Content Editor/Writer เป็นบรรณาธิการ โดยรับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกต้อง

Slide 12

วิธีการสร้างเว็บเพจ สร้างด้วยภาษา HTML โดยการใช้โปรแกรมสร้างเอกสาร (Text Editor) โดยทั่วไป เช่น โปรแกรม NotePad โดยการใส่คำสั่ง (Tag) ของภาษา HTML เข้าไปโดยตรง วิธีนี้ผู้สร้างต้องมีประสบการณ์และการเรียนรู้ภาษา HTML มาก่อน สร้างด้วยโปรแกรมประยุกต์ เป็นการสร้างแบบที่เรียกว่า WYSIWYG (What-You-See-Is-What-You-Get) เช่น Dreamweaver, FrontPage เป็นต้น

Slide 13

โปรแกรมช่วยในการสร้างเว็บ Macromedia Dreamweaver Microsoft FrontPage Allaire HomeSite CoffeeCup GoLive HotDog Pro HotMetaPro NetObjects Fusion

Slide 14

Macromedia Dreamweaver สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัยเครื่องมือต่าง ๆ โดยไม่จำเป็นต้องรู้เกี่ยวกับภาษา HTML มีหน้าจอในการแสดงหน้าจอการออกแบบและหน้าจอคำสั่ง มีระบบเทมเพลตที่จะทำใ�

Recommended
View more...