slide1 l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
????????????????? PowerPoint Presentation
Download Presentation
?????????????????

Loading in 2 Seconds...

play fullscreen
1 / 32

????????????????? - PowerPoint PPT Presentation


  • 248 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '?????????????????' - betty_james


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

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

อาจารย์กรรณิการ์ มาระโภชน์

slide2
วัตถุประสงค์

เมื่อจบบทเรียนนี้แล้วนักศึกษาสามารถ

  • บอกองค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ได้อย่างถูกต้อง
  • ออกแบบเว็บไซต์ได้อย่างถูกต้อง และเหมาะสม
slide3
เนื้อหา
  • องค์ประกอบพื้นฐานของการออกแบบ
  • วิธีการสร้างเว็บเพจ
  • กระบวนการ 13 ขั้นตอนในการออกแบบ
  • หลักการออกแบบเว็บไซต์
  • รูปแบบของเว็บไซต์
slide4
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
  • ความเรียบง่าย (Simplicity)
    • มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก
    • สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบเสริมที่จำเป็นเท่านั้น
  • ความสม่ำเสมอ (Consistency)
    • สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี
    • ถ้าลักษณะของแต่ละหน้าในเว็บไซต์เดียวกัน แตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้
slide5
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
  • ความเป็นเอกลักษณ์ (Identity)
    • การออกแบบต้องคำนึงถึงลักษณะขององค์กร
    • รูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ขององค์กร
  • เนื้อหาที่มีประโยชน์ (Useful Content)
    • ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์
    • ควรมีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ
slide6
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
  • ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Naviagtion)
    • ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน
    • มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ
  • มีลักษณะที่น่าสนใจ (Visual Appeal)
    • ความน่าในใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น
slide7
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
  • การใช้งานอย่างไม่จำกัด (Compatibility)
    • ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด
    • ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้บราวเซอร์ชนิดใดชนิดหนึ่ง
    • สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา
  • คุณภาพในการออกแบบ (Design Stability)
    • ควรให้ความสำคัญกับการออกแบบเว็บไซต์
    • ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูล
slide8
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
  • ระบบการใช้งานที่ถูกต้อง (Functional Stability)
    • ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น
    • ควรมีการตรวจสอบการทำงานอยู่เสมอ
slide9
ปัจจัยสำคัญที่ผู้ใช้ต้องการจากเว็บไซต์ปัจจัยสำคัญที่ผู้ใช้ต้องการจากเว็บไซต์
  • มีเนื้อหาที่เป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ
  • มีการปรับปรุงเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ
  • ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว
  • การใช้งานที่สะดวก เข้าใจง่าย
slide10
ทีมงานพัฒนาเว็บไซต์
  • Webmaster
    • เป็นผู้ควบคุมในเรื่องการออกแบบ เนื้อหา และรายละเอียดทางเทคนิค
  • Information Architect
    • ทำหน้าที่จัดระเบียบข้อมูลและทดสอบประสิทธิภาพในการใช้งาน
  • Designer
    • เป็นผู้ออกแบบลักษณะหน้าตาของเว็บไซต์ และองค์ประกอบต่าง ๆ
  • HTML and JavaScript Coder
    • รับผิดชอบการสร้างเว็บเพจโดยอาศัยเครื่องมือต่าง ๆ
    • ปรับปรุง เปลี่ยนแปลงข้อมูล รวมถึงการอัพโหลดไฟล์
slide11
ทีมงานพัฒนาเว็บไซต์
  • Developer/Programmer
    • เป็นผู้เขียนสคริปต์และโปรแกรมต่าง ๆ
    • อาจต้องเกี่ยวข้องกับระบบฐานข้อมูล
  • System Administrator
    • ทำหน้าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึงฮาร์ดแวร์และซอฟต์แวร์อื่นที่เกี่ยวข้อง
    • สามารถวิเคราะห์และปรับตั้งระบบเพื่อการทำงานที่มีประสิทธิภาพ
  • Content Editor/Writer
    • เป็นบรรณาธิการ โดยรับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกต้อง
slide12
วิธีการสร้างเว็บเพจ
  • สร้างด้วยภาษา HTMLโดยการใช้โปรแกรมสร้างเอกสาร (Text Editor) โดยทั่วไป เช่น โปรแกรม NotePad โดยการใส่คำสั่ง (Tag) ของภาษา HTML เข้าไปโดยตรง วิธีนี้ผู้สร้างต้องมีประสบการณ์และการเรียนรู้ภาษา HTML มาก่อน
  • สร้างด้วยโปรแกรมประยุกต์เป็นการสร้างแบบที่เรียกว่า WYSIWYG (What-You-See-Is- What-You-Get) เช่น Dreamweaver, FrontPage เป็นต้น
slide13
โปรแกรมช่วยในการสร้างเว็บโปรแกรมช่วยในการสร้างเว็บ
  • Macromedia Dreamweaver
  • Microsoft FrontPage
  • Allaire HomeSite
  • CoffeeCup
  • GoLive
  • HotDog Pro
  • HotMetaPro
  • NetObjects Fusion
macromedia dreamweaver
Macromedia Dreamweaver
  • สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัยเครื่องมือต่าง ๆ โดยไม่จำเป็นต้องรู้เกี่ยวกับภาษา HTML
  • มีหน้าจอในการแสดงหน้าจอการออกแบบและหน้าจอคำสั่ง
  • มีระบบเทมเพลตที่จะทำให้ผู้ออกแบบสามารถใช้โครงสร้างเดียวกันทั้งเว็บไซต์
  • มีเครื่องมือเพื่อช่วยในการดาวน์โหลดและอัพโหลดไฟล์ระหว่างเครื่องเซิร์ฟเวอร์กับเครื่องที่ใช้พัฒนาเว็บเพจ
microsoft frontpage
Microsoft FrontPage
  • ลักษณะการทำงานใกล้เคียงกับโปรแกรมอื่น ๆ ที่อยูในชุด Office
  • มีระบบอำนวยความสะดวกแบบ Wizard
  • มีระบบในการบริหารจัดการเว็บไซต์ เช่น ระบบรายงานเกี่ยวกับหน้าเว็บเพจที่แสดงผลช้า เว็บเพจที่ถูกเพิ่มเข้าไป ลิงค์ที่ใช้งานไม่ได้
  • สามารถเชื่อมโยงกับระบบฐานข้อมูลได้โดยสะดวก
  • บางครั้งอาจมีคำสั่งเพิ่มเติมเข้ามาเกินความจำเป็น หรืออาจเปลี่ยนแปลงโค้ดโดยไม่รู้ตัว
allaire homesite
Allaire HomeSite
  • ช่วยในการเขียนโค้ดภาษา HTML ด้วยคุณสมบัติที่เรียกว่า Tag Insight และ Function Insight ซึ่งจะแสดงแอตตริบิวต์ที่เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่กำลังเขียน
  • เหมาะสำหรับนักออกแบบเว็บที่ถนัดในการใช้ภาษา HTML
slide17
กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์

Phase 1 สำรวจปัจจัยสำคัญ (Research)

1. รู้จักตัวเอง –กำหนดเป้าหมายและสำรวจความพร้อม

2. เรียนรู้ผู้ใช้ –ระบุกลุ่มผู้ใช้และศึกษาความต้องการ

3. ศึกษาคู่แข่ง –สำรวจการแข่งขันและเรียนรู้คู่แข่งสิ่งที่ได้รับ

สิ่งที่ได้รับ

1. เป้าหมายหลักของเว็บไซต์

2. ความต้องการของผู้ใช้

3. กลยุทธ์ในการแข่งขัน

slide18
กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์

Phase 2 : พัฒนาเนื้อหา (Site Content)

4. สร้างกลยุทธ์การออกแบบ

5. หาข้อสรุปขอบเขตเนื้อหา

สิ่งที่ได้รับ

  • แนวทางการออกแบบเว็บไซต์
  • ขอบเขตเนื้อหาและการใช้งาน
  • ข้อมูลที่ถูกจัดอย่างเป็นระบบ
slide19
กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์

Phase 3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure)

6. จัดระบบข้อมูล

7. จัดทำโครงสร้างข้อมูล

8. พัฒนาระบบเนวิเกชัน

สิ่งที่ได้รับ

  • แผนผังโครงสร้างข้อมูล
  • แนวทางการท่องเว็บ
  • ระบบเนวิเกชัน
slide20
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual design)

9. ออกแบบลักษณะหน้าตาเว็บเพจ

10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย

สิ่งที่ได้รับ

  • ลักษณะหน้าตาของเว็บไซต์
  • เว็บเพจต้นแบบที่จะใช้ในการพัฒนา
  • รูปแบบโครงสร้างของเว็บไซต์
  • ข้อกำหนดในการพัฒนาเว็บไซต์
slide21
กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์

Phase 5 : พัฒนาและดำเนินการ (Production and Operation)

11. ลงมือพัฒนาเว็บเพจ

12. เปิดตัวเว็บไซต์

13. ดูแลและพัฒนาต่อเนื่อง

สิ่งที่ได้รับ

  • เว็บไซต์ที่สมบูรณ์
  • เปิดตัวเว็บไซต์และทำให้เป็นที่รู้จัก
  • แนวทางการดูแลและพัฒนาต่อไป
slide22
หลักในการออกแบบเว็บไซต์
  • การออกแบบโครงสร้างเว็บไซต์ (Website Structure Design)
  • การออกแบบหน้าตาเว็บไซต์ (Website Interface Design)
slide23
การออกแบบโครงสร้างเว็บไซต์การออกแบบโครงสร้างเว็บไซต์
  • Site Map
    • เป็นการวางแผนเนื้อหาของเว็บไซต์ เพื่อเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด
    • เปรียบเสมือนแผนที่ที่ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์
    • ช่วยในการออกแบบเว็บไซต์เพื่อไม่ให้หลงทาง หรือการเชื่อมโยงแต่ละหน้า
    • เป็นการนำเสนอแนวความคิดแบบลำดับชั้นจากส่วนใหญ่ไปหาส่วนย่อย หรือที่เรียกว่าแบบบนลงล่าง (Top Down Thinking)
slide24
การออกแบบโครงสร้างเว็บไซต์การออกแบบโครงสร้างเว็บไซต์
  • Site Map ที่ดี
    • ทุก ๆ เว็บเพจจะต้องมีลิงก์ทางออกเสมอ
    • ทุก ๆ เว็บเพจควรมีลิงก์กลับหน้าโฮมเพจ หรือจุดเริ่มต้น
    • ควรมีหน้าแสดง Site Map ในกรณีที่เว็บไซต์มีจำนวนหน้ามาก ๆ
  • สามารถประเมินราคาจาก Site Map ได้
slide25
การออกแบบหน้าเว็บไซต์การออกแบบหน้าเว็บไซต์
  • ใช้งานง่ายและสะดวก โดยมีระบบ Navigation หรือระบบนำทางที่ดี
    • เข้าใจง่าย การใช้งานไม่ซับซ้อน
    • มองเห็นได้ชัด ควรวางไว้ด้านซ้าย หรือด้านบน
    • อย่าเคลื่อนย้ายไปมา
    • ควรมีลิงก์กลับไปยังโฮมเพจ
  • มีการออกแบบกราฟิกที่สวยงาม สื่อความหมาย
slide26
การออกแบบหน้าเว็บไซต์การออกแบบหน้าเว็บไซต์
  • ไม่ควรเสียเวลาโหลดภาพมากเกินไป
    • ขนาดกราฟิกรวมกันไม่ควรเกิน 75 KB
    • เป็น Flash ไม่ควรเกิน 120 KB
  • ภาพรวมทั้งหมดควรออกมาในอารมณ์เดียวกัน (Theme) หรือโครงเดียวกัน แนวความคิดเดียวกัน
slide27
รูปแบบของเว็บไซต์
  • แบบ Content
  • แบบ Image
  • แบบผสม
content
แบบ Content
  • ลักษณะงานจะเป็นภาพกราฟิกเล็ก ๆ มาเรียงกันเป็นหน้าเว็บเพจ
  • จะมีเนื้อหามากกว่ารูป
  • พัฒนามาจากการเขียนด้วยภาษา HTML
  • มีข้อดีคือ ความเร็วในการโหลด
image
แบบ Image
  • เป็นภาพกราฟิกขนาดใหญ่เต็มหนึ่งหน้า แล้วตัดแบ่งเป็นชิ้นเล็ก ๆ (Slice Image) มาวางเรียงกัน เพื่อความเร็วในการดาวน์โหลด และแสดงผล
  • มีรูปแบบที่สวยงามและหลายหลาย โดยจะทำการสร้างจากโปรแกรมสร้างรูป หรือตกแต่งรูปโดยทั่วไป
  • เหมาะกับหน้าที่มีเนื้อหาน้อย ต้องการความสวยงามเป็นหลัก
  • หากภาพใหญ่จะทำให้การดาวน์โหลดช้า
slide30
แบบผสม
  • เป็นการผสมผสานระหว่างแบบ Content และแบบ Image
slide31
ความผิดพลาดในการออกแบบเว็บไซต์ความผิดพลาดในการออกแบบเว็บไซต์
  • ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม
  • ใช้เทคโนโลยีชั้นสูงโดยไม่จำเป็น
  • ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา
  • มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำและพิมพ์
  • ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ
  • มีความยาวของหน้ามากเกินไป
  • ขาดระบบเนวิเกชันที่มีประสิทธิภาพ
slide32
ความผิดพลาดในการออกแบบเว็บไซต์ความผิดพลาดในการออกแบบเว็บไซต์
  • ใช้สีของลิงค์ไม่เหมาะสม
  • ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย
  • เว็บเพจแสดงผลช้า
    • มีรายงานวิจัยว่า ถ้าเกิน 8 วินาที ผู้ใช้กว่า 90% จะเปลี่ยนไปดูเว็บอื่นแทน