Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

นำเสนอพื้นฐานการออกแบบเว็บไซต์-ความหมาย-โครงสร้าง-

วิชาการออกแบบและการสร้างเว็บไซต์เพื่อการศึกษา

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of นำเสนอพื้นฐานการออกแบบเว็บไซต์-ความหมาย-โครงสร้าง-

การออกแบบและการสร้างเว็บไซต์เพื่อการศึกษา
เว็บไซต์ (อังกฤษ: website, web site, Web site)
หมายถึงหน้าเว็บเพจหลายหน้าซึ่งเชื่อมโยงกันผ่านทาง
ไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บนิยมเรียกดูผ่านซอฟต์แวร์ใน
ลักษณะของ เว็บเบราว์เซอร์

เว็บไซต์

โฮมเพจ (Home Page) คือเว็บเพจหน้าแรกซึ่งเป็นทางเข้าหลักของเว็บไซต์ปกติเว็บเพจทุกๆ หน้าในเว็บไซท์จะถูกลิงค์ (โดยตรงหรือโดยอ้อมก็ตาม) มาจากโฮมเพจ 

โฮมเพจ
เว็บเพจ (Web Page) หมายถึง  หน้าเอกสารของบริการ  WWW  ซึ่งตามปกติจะถูกเก็บอยู่ในรูปแบบไฟล์ HTML (Hyper Text Markup Language)  โดยไฟล์  HTML  1  ไฟล์ก็คือเว็บเพจ  1  หน้านั่นเอง  ภายในเว็บเพจอาจประกอบไปด้วยข้อความ  ภาพ  เสียง วิดีโอ  และภาพเคลื่อนไหวแบบมัลติมีเดีย นอกจากนี้เว็บเพจแต่ละหน้าจะมีการเชื่อม
โยงหรือ “ลิงค์” (Link)  

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

โครงสร้างเว็บไซต์
การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
หมายความของเว็บไซต์
โครงสร้างเว็บไซต์
ประเภทของเว็บไซต์
เว็บไซต์ทางการศึกษา
การออกแบบเว็บไซต์
ทฤษฏีสี

ผู้สอน อ.อนล สวนประดิษฐ์
   1. รวบรวมข้อมูล  เนื้อหาที่จะนำมาสร้างเว็บ  แล้วนำมาจัดหมวดหมู่ และลำดับเนื้อหาก่อนหลัง(ตัดส่วนที่ไม่จำเป็นออก) แล้ววางโครงสร้างเว็บไซต์ในภาพรวมทั้งหมด
 2. จัดทำแผนผังโครงสร้างการเชื่อมโยงไฟล์  เป็นแผนผังที่แสดงโครงสร้างข้อมูล  ลำดับชั้น   และการเชื่อมโยงส่วนต่างๆ อย่างชัดเจน
  3. ออกแบบหน้าแรกของเว็บไซต์  หรือที่เรียกว่า  Home  page

ประเภทของเว็บไซต์

1. เว็บท่า (Portal Site)
อาจเรียกอีกชื่อหนึ่งว่า เว็บวาไรตี้ ซึ่งหมายถึงเว็บที่ให้บริการต่างๆ ไว้มากมาย มักประกอบไปด้วยบริการ เสิร์ชเอ็นจิ้น ที่รวมลิงค์ของเว็บไซต์ที่น่าสนใจไว้มากมายให้เราได้ค้นหา รวมถึงบริการที่เกี่ยวกับเรื่องราวที่มีสาระและบันเทิงหลากหลายประเภท ดูหนังฟังเพลง ดูดวง ท่องเที่ยว ไอที เกม สุขภาพ ฯลฯ
2. เว็บข่าว (News Site)
เป็นเว็บที่สร้างขึ้นโดยองค์กรข่าวหรือสถาบันสื่อสาร มวลชนต่างๆ ที่มีสื่อมวลชนประเภทต่างๆ ของตนอยู่เป็นหลัก เช่น สถานีโทรทัศน์ สถานีวิทยุ หนังสือพิมพ์ นิตยสาร วรสาร หรือแม้กระทั่ง กระทรวง ทบวง กรมต่างๆ ซึ่งผู้ใช้สามารถค้นหาข้อมูลและติดตามข่าวได้ทุกเวลา
3. เว็บข้อมูล (Information Site)
เป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้น ข้อมูลข่าวสาร หรือข้อเท็จจริงต่างๆที่น่าสนใจองค์กรต่างๆมักสร้างเว็บข้อมูลของตนขึ้นมาเพื่อเป็นช่องทางให้ประชาชนหรือกลุ่มบุคคลที่ สนใจ เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตน
4. เว็บธุรกิจหรือการตลาด (Business/Marketing Site)
สร้างขึ้นโดยองค์กรธุรกิจต่างๆมีจุดประสงค์ในการประชาสัมพันธ์องค์กรและเพิ่มผลกำไรทางการค้าด้วยโดยเนื้อหาส่วนใหญ่หรือเกือบทั้งหมดมักจะเป็นการนำเสนอเกี่ยวกับรายละเอียด และความน่าสนใจของสินค้าและบริการ
5. เว็บการศึกษา (Educational Site)
ส่วนใหญ่สร้างขึ้นโดยสถาบันการศึกษาต่างๆ หรือองค์กรทั้งของภาครัฐและเอกชนที่มีนโยบายในการเผยแพร่ความรู้ และให้โอกาสในการค้นคว้าหาข้อมูลเพื่อการศึกษาแก่นักเรียน นิสิต นักศึกษา รวมถึงประชาชนทั่วไป
เว็บการศึกษาให้ข้อมูลเกี่ยวกับการเรียนรู้ที่เป็นทางการและไม่เป็นทางการ บริการการเรียนรู้แบบออนไลน์ หรือที่เรียกว่า อีเลิร์นนิ่ง (E-Learning) ต่าง ๆ
6. เว็บบันเทิง (Entertainment Site)
เป็นเว็บนำเสนอและให้บริการต่างๆ เพื่อเสริมสร้างความบันเทิง จะเป็นเรื่องราวเกี่ยวกัน ดนตรี ภาพยนตร์ ดารา กีฬา เกม ความรัก บทกลอน การ์ตูน เรื่องขำขัน รวมถึงบริการดาวน์โหลดโลโก้และริงโทนสำหรับโทรศัพท์เคลือนที่ด้วย
7. เว็บองค์กรที่ไม่แสวงหาผลกำไร (Non-profit Organization Site)
ส่วนใหญ่สร้างขึ้นโดยบุคคลหรือองค์การต่าง ๆ ที่มีนโยบายในการสร้างและช่วยเหลือสังคมโดยที่ไม่หวังผลกำไรหรือค่าตอบแทน ซึ่งกลุ่มบุคคลหรือองค์การเหล่านี้ได้แก่ สมาคม ชมรม มูลนิธี และโครงการต่างๆ โดยอาจจะมีจุดประสงค์เฉพาะที่แตกต่างกันเช่น เพื่อทำความดี สร้างสรรค์สังคม พิทักษ์สิ่งแวดล้อม ปกป้องสิทธิมนุษยชน รณรงค์ไม่สูบบุหรี่ เป็นต้น
8. เว็บส่วนตัว (Personal Site)
บางครั้งอาจเป็นเว็บของคนๆ เดียว เพื่อนฝูง หรือครอบครัวก็ได้ โดยอาจจะจัดทำขึ้นด้วยเหตุผลที่แตกต่างกัน เช่น แนะนำตนเอง แนะนำกลุ่มเพื่อน โชว์รูปภาพ แสดงความคิดเห็น เขียนไดอารี่ประจำวัน นำเสนอผลงาน ถ่ายทอดประสบการณ์เกี่ยวกับสิ่งที่เชี่ยวชาญหรือสนใจ
เว็บไซต์เพื่อการศึกษา
ประกอบด้วย 1) เผยแพร่ข้อมูลขององค์กรทางการศึกษา 2) เผยแพร่ข้อมูลความรู้ 3)ฝึกอบรม/เพิ่มเติมความรู้
เว็บไซต์เพื่อการเรียนรู้ หมายถึง เว็บไซต์ที่มีเนื้อหาเกี่ยวกับการส่งเสริมการเรียนรู้ การสร้างองค์ความรู้ การสร้างความรู้ความเข้าใจในเรื่องราวต่าง ๆ เพื่อให้ผู้สนเรื่องราวการเรียนรู้นั้น ๆ เกิดความรู้ความเข้าใจและรับรู้ข้อมูล สามารถนำข้อมูลที่ได้ไปประยุกต์ใช้ได้อย่างเหมาะสมตามอัตภาพ ปัจจุบันเว็บไซต์เพื่อการเรียนรู้กำหนดขึ้นมากมากหลากจำแนกเป็นหมวดหมู่ นับว่ามีมากมายมหาศาล
ยกตัวอย่าง เช่น
เว็บความรู้เกี่ยวกับการทำเว็บไซต์
เว็บความรู้เกี่ยวกับอาหาร
เว็บความรู้เกี่ยวกับการศึกษา
เว็บความรู้เกี่ยวกับวิชาต่าง ๆ
เว็บความรู้เกี่ยวกับการแนะแนว
เว็บความรู้เกี่ยวกับเทคโนโลยี ฯลฯ
ด้วยเหตุนี้เองบทบาทสำคัญในส่งเสริมการเรียนรู้ที่สะดวกและรวดเร็ว เข้าถึงได้ง่ายก็คือ เว็บไซต์
รวดเร็ว ใช้ง่าย ได้ความรู้ ตอบสนองต่อความต้องการ
การออกแบบเว็บไซต์
ทฤษฎีสี (Color Theory) สำหรับงานออกแบบเว็บไซต์
Primary Colors (สีขั้นที่ 1 แม่สีวัตถุธาตุ)
สีขั้นที่ 1 คือ แม่สีเป็นสีชุดแรกที่เมื่อนำมาผสมกันจะได้สีอีกมากมายสีกลุ่มนี้ได้แก่สีเหลือง แดงและน้ำเงิน

Secondary Colors (สีขั้นที่ 2)
สีขั้นที่ 2 เป็นสีที่เกิดจากการผสมกันของแม่สีขั้นที่ 1 ซึ่งจะได้สี ดังต่อไปนี้
สีส้ม สีแดง + เหลือง
สีเขียว สีเหลือง + สีน้ำเงิน
สีม่วง สีน้ำเงิน + แดง

Tertiary Colors (สีขั้นที่ 3)
สีขั้นที่ 3 เป็นสีที่เกิดจากการผสมกันระหว่างสีขั้นที่ 1 กับสีขั้นที่ 2 ซึ่งจะมีชื่อเรียกตามคู่ที่ผสมกัน เป็นสีใหม่ขึ้นมา 6 สีดังนี้
สีเหลือง – ส้ม, แดง – ส้ม, แดง – ม่วง, น้ำเงิน – ม่วง, น้ำเงิน – เขียว และ เหลือง – เขียว
วรรณะสี (Tone)
วรรณะสีแบ่งได้ 2 ประเภท ได้แก่ วรรณสีร้อน กับ วรรณสีเย็น โดยสามารถใช้วรรณะสีในการออกแบบให้ได้ความรู้สึกร้อนและเย็นได้ดังนี้
วรรณะสีเย็น (Cold Tone)
วรรณสีเย็นมีอยู่ 7 ชนิด ได้แก่สีเหลือง เหลืองเขียว เขียว เขียวน้ำเงิน น้ำเงิน น้ำเงินม่วง ม่วง สีกลุ่มนี้เมื่อใช้ในงานจะได้ความรู้สึกสดชื่น เย็นสบาย เป็นต้น

วรรณะสีร้อน (Warm Tone)
วรรณสีร้อนมีอยู่ 7 สี ได้แก่ม่วง ม่วงแดง แดง แดงส้ม ส้ม ส้มเหลือง เหลือง สีกลุ่มนี้เมื่อใช้ในงานจะรู้สึกอบอุ่น ร้อนแรง สนุกสนาน เป็นต้น

Color : สีที่เป็นทั้งวรรณะร้อนและวรรณะเย็น
สีเหลืองและม่วงจะอยู่ได้ทั้งสองวรรณะขึ้นอยู่กับสีแวดล้อม เช่น หากนำสีเหลืองไปไว้กับสีแดงและส้มก็กลายเป็นสีโทนร้อน แต่หากนำมาไว้กับสีเขียวก็จะเป็นสีโทนเย็นทันที

สีกลาง (Muddy Colors)
สีกลาง ในความหมายนี้เป็นสีที่เข้ากับสีได้ทุกสี ได้แก่ สีน้ำตาล สีขาว สีเทาและดำ สีเหล่านี้เมื่อนำไปใช้งานลดความรุนแรงของสีอื่นและจะเสริมให้งานดูเด่นยิ่ง ขึ้น
Full transcript