หน่วยการเรียนรู้ที่ 2

3,140 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,140
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

หน่วยการเรียนรู้ที่ 2

  1. 1. หน่วยการเรียนรู้ที่ 2เว็บเพจ เว็บไซต์ และโครงสร้างเว็บไซต์กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยีระดับชั้น มัธยมศึกษาปีที่ 5รายวิชา การเขียนเว็บไซต์ ง 30245จำานวน 4 ชั่วโมงส อ น วั นที................................................................................... ่มาตรฐานการเรียนรู้มาตรฐานที่ 4.1 ข้ อ 4 เข้ า ใจข้ อ กำา หนดของคอมพิ ว เตอร์ แ ละอุปกรณ์ที่เกี่ยวข้อง ข้อ 5 จัดเก็บและบำารุงรักษาสารสนเทศให้ถูกต้องและเป็นปัจจุบันอยู่เสมอผลการเรียนรู้ที่คาดหวัง 1. เข้ า ใจความหมายของเว็ บ เพจ เว็ บ ไซต์ แ ละอุ ป กรณ์ ที่เกี่ยวข้องได้ 2. สามารถสังเคราะห์โครงสร้างเว็บไซต์ รวมถึงออกแบบได้จุดประสงค์การเรียนรู้ จุดประสงค์นำาทาง - บอกความหมายของเว็บเพจ เว็บไซต์และอุปกรณ์ที่เกี่ยวข้องได้ - สังเคราะห์โครงสร้างของเว็บไซต์ และออกแบบได้ จุดประสงค์ปลายทาง - เข้ า ใจความหมายของเว็ บ เพจ เว็ บ ไซต์ แ ละอุ ป กรณ์ ที่เกี่ยวข้อง - สามารถสังเคราะห์โครงสร้างเว็บไซต์ และออกแบบได้จำานวน 2 แผน 4 ชั่วโมง
  2. 2. หน่วยการเรียนรู้ที่ 2 แผนการจัดการเรียนรู้ที่ 1เรื่อง ความหมายของเว็บเพจ และเว็บไซต์กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยีระดับชั้น มัธยมศึกษาปีที่ 5รายวิชา การเขียนเว็บไซต์ ง 30245จำานวน 4 ชั่วโมงส อ น วั นที................................................................................... ่จุดประสงค์นำาทาง - บอกความหมายของเว็บเพจ เว็บไซต์และอุปกรณ์ที่เกี่ยวข้องได้เนื้อหาสาระ - ความหมายของคำาว่า “เว็บเพจ” และ “เว็บไซต์” - ความแตกต่างของคำาว่า “เว็บเพจ” และ “เว็บไซต์” - บทบาทของ เว็บไซต์ในอดีต ปัจจุบัน และอนาคตการจัดกระบวนการเรียนรู้ ขันเตรียมหรือขั้นนำาเข้าสู่บทเรียน ้ 1. ครู แ จ้ ง จุ ด ประสงค์ ก ารเรี ย นรู้ และวิ ธี ก ารเรี ย นรู้ แล้ ว ทดสอบก่อนเรียน 2. นักเรียนร่วมแสดงความรู้เดิมเพื่อพิจารณาความหมาย ของคำาว่า “เว็บเพจ” และ “เว็บไซต์” และร่วมกันแสดงความคิด เห็นถึงข้อแตกต่างของคำาว่า “เว็บเพจ” และ “เว็บไซต์”ขันสอน ้ 3. ครู อธิ บ ายเกี่ ยวกั บ ความหมายของคำา ว่ า “เว็ บ เพจ” และ “เว็ บ ไซต์ ” และข้ อ แตกต่ า งของคำา ว่ า “เว็ บ เพจ” และ “เว็บไซต์” พร้อมนักเรียนจดบันทึกบทเรียน พร้อมอธิบายบท เรียนในรูปแบบ PowerPoint
  3. 3. 4. ครูแจกใบความรู้ที่ 2 เรื่อง เว็บเพจ และเว็บไซต์ 5. นักเรียนสรุปความรู้จากการอ่านใบความรู้ที่ 2 แล้วให้ นักเรียนเขียนลงสมุดบันทึก 6. นักเรียนรับใบงานที่ 2 แล้วลงมือทำา 7. ครูตรวจผลการสรุปโดยตรวจจากสมุดนักเรียน และใบ งานที่ 2 ขันสรุป ้ 8. ครูเปิดโอกาสให้นักเรียนซักถามข้อสงสัยเกี่ยวกับเรื่อง ทียังไม่เข้าใจ และร่วมกันสรุปเนื้อหาบทเรียน ่สื่อและแหล่งการเรียนรู้ (มีจำานวนเท่ากับจำานวนนักเรียน) - ใบความรู้ที่ 2 เรื่อง เว็บเพจ และเว็บไซต์ - ชิ้นงานนำาเสนอบทเรียน (PowerPoint) - เว็บไซต์ประกอบการเรียนรู้ - ใบงานที่ 2กระบวนการวั ด และประเมิ น ผล (มี จำา นวนเท่ า กั บ จำา นวนนักเรียน)วิธีวัดผล - ตรวจผลงานจากความตั้งใจขณะอยู่ภายในสังคมห้องเรียน - การให้ความร่วมมือในการแสดงความคิดเห็น - การทำาแบบทดสอบ และการจดบันทึกเครื่องมือวัด - ใบงานที่ 2เกณฑ์การประเมิน - คะแนนแบบทดสอบก่อนเรียนและหลังเรียน 1-3 คะแนน กลุ่มตำ่า 4-6 คะแนน กลุ่มปานกลาง 7-10 คะแนน กลุ่มสูง
  4. 4. หัวหน้ากลุ่มสาระการงานอาชีพและเทคโนโลยี............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. ลงชื่อ............................................ ( )รองผู้อำานวยการฝ่ายวิชาการ.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
  5. 5. ลงชื่อ............................................ ( )ผู้อำานวยการโรงเรียนวัดธรรมจริยาภิรมย์............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. ลงชื่อ............................................ ( )บันทึกผลหลังการสอน1. ผลการสอน1.1ด้านความรู้.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................1.2ด้ า นทักษะ.................................................................................
  6. 6. ........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................1.3ด้ า นคุ ณ ลั ก ษณะ.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................2. ปัญหา / อุปสรรค.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................3. ข้อเสนอแนะ / แนวทางแก้ไข.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
  7. 7. ลงชื่อ……………………………………..ผู้สอน (นางสาวอุไรวรรณ เทียนทอง) ใบความรู้ที่ 2 ความหมายของเว็บเพจ และเว็บไซต์อะไรคือโฮมเพจ อะไรคือเว็บเพจ หลายคนคงคุ้นเคยกับคำา ว่าโฮมเพจ เว็บเพจและเว็บไซต์กั น มาบ้ า งแล้ ว แต่ คงมี ห ลายคนที่ ยั ง สั บ สนว่ า อะไรคื อ เว็ บ เพจและอะไรคือเว็บไซต์ คำา 3 คำานี้เหมือนหรือแตกต่างกันอย่างไรโฮมเพจ (Home Page) โฮมเพจ คือคำา ที่ใช้เรียกหน้าแรกของเว็บไซต์ ซึ่งประกอบไปด้ ว ยเมนู ต่ า งๆและเรื่ อ งราวต่ า งๆมากมายคล้ า ยกั บ หน้ า ปกนิ ต ยสารบ้านเรา ดังนั้นหากเราออกแบบหน้าโฮมเพจให้สวยงามและน่าสนใจโอกาสที่ผู้ชมจะแวะเข้ามาเยี่ยมเยียนโฮมเพจของเราก็จะยิ่งมากตามไปด้วยเว็บเพจ (Web Page) เว็บเพจ คือ คำาที่ใช้เรียกหน้าเอกสารต่างๆ ที่อยู่ในรูปแบบไฟล์ HTML (Hyper Text Markup Language) เปรี ย บเสมื อ นหน้ ากระดาษแต่ละหน้าที่มีเรื่องราวต่างๆมากมายบรรจุอยู่ในนิตรสาร แต่แตกต่างกันตรงที่มีการเชื่อมโยง (Link) ซึ่งเราสามารถคลิกไปที่หน้าใดของโฮมเพจก็ได้เว็บไซต์ (Web Site) เว็บไซต์ คือ คำา ที่ใช้เรียกกลุ่มของเว็บเพจ (ดังนั้นภายในเว็บไซต์จะประกอบไปด้วยโฮมเพจและเว็บเพจ) โดยเรามักใช้เรียกเว็ บ ที่ มี ข นาดใหญ่ แ ละมี ก ารจดทะเบี ย นชื่ อ เว็ บ ไซต์ นั้ น ๆไว้ แ ล้ ว(Domain Name) เ ช่ น http://www.geocities.com ,http://www.sanook.com , http://www.yahoo.com เป็นต้นเราสามารถสร้างโฮมเพจด้วยวิธีการอย่างไรบ้าง ในการสร้างโฮมเพจนั้นมีอยู่หลายวิธีด้วยกัน โดยแต่ละวิธีการก็ มี ค วามยากง่ า ยแตกต่ า งกั น ไป สามารถแบ่ ง วิ ธี ก ารสร้ า งโฮมเพจออกเป็น 3 วิธีใหญ่ๆ ดังนี้1.สร้างโฮมเพจด้วยโปรแกรมของ Web Hosting Web Hosting คื อ เว็ บ ไซต์ ที่ ทำา หน้ า ที่ ใ ห้ บ ริ ก ารจั ด เก็ บข้อมูล โดยบางเว็บไซต์นั้นมีการให้บริการสร้างโฮมเพจสำาเร็จรูปให้แก่ผู้ที่ต้องการสร้างโฮมเพจแบบง่ายๆ โดยการคลิกเลือกรูปแบบของโฮมเพจจากรูปแบบที่ทางเว็บไซต์กำาหนด
  8. 8. ให้ จากนั้นก็กรอกรายละเอียดต่างๆตามแบบฟอร์ม เพียงเท่านี้เราก็จะสามารถสร้างโฮมเพจในรูปแบบง่ายๆได้ตามต้องการ แต่การสร้างโฮมเพจด้วยโปรแกรมของ Web Hosting นี้ ก็มีข้อเสีย คือ มีรูปแบบให้ เลื อกน้ อยและไม่ ส ามารถออกแบบลั ก ษณะของโฮมเพจได้ ตามต้องการ 2. ใช้โปรแกรมสำาหรับสร้างเว็บไซต์ปั จ จุบั น ได้ มี การพั ฒนาโปรแกรมที่ ใ ช้ ใ นการสร้ างเว็ บ ไซต์ กั น อย่ า งมากมาย เช่ น FrontPage , GoLive และ HomeSite เป็ น ต้ น แต่โปรแกรมสร้ า งเว็ บ ไซต์ ที่ นิ ย มใช้ กั น มากที่ สุ ด ก็ ค งจะหนี ไ ม่ พ้ นโปรแกรม Dreamweaver Dreamweaver เป็นโปรแกรมที่ใช้งานง่ายและไม่จำา เป็นต้องมีความรู้ในเรื่องของภาษา HTML ถึงแม้วิธีการสร้างโฮมเพจนั้นอาจจะไม่ง่ายดายเท่าการสร้างโฮมเพจด้วยเว็บ Hosting แต่เราก็จะสามารถออกแบบความสวยงามของโฮมเจได้ตามต้องการ 3. การใช้ภาษา HTML และ JavaScript การสร้างโฮมเพจด้วยภาษา HTML และ JavaScript นั้นจะต้องใช้ความสามารถและความชำา นาญในการเขี ยนโปรแกรมพอสมควรเนื่องจากการสร้างโฮมเพจด้วยวิธีนี้ จะใช้วิธีการพิมพ์ข้อความที่เป็นคำาสั่งลงไป จากนั้นโปรแกรมจะทำาการแปลงข้อมูลให้กลายเป็นภาพหรื อ ข้ อ ความที่ ต้ อ งการ โดยทั่ ว ไปเรามั ก ใช้ ภ าษา HTML และJavaScript ในการตกแต่ ง โฮมเพจ โดยตั ว อย่ า งที่ พ บเห็ น การใช้ภาษา HTML และ JavaScript ได้ แก่ การกำา หนดให้ มีตัวหนัง สือ วิ่งการเปลียนแถบสีของ Scroll Bar เป็นต้น ่
  9. 9. ใบงานที่ 2 เว็บเพจ เว็บไซต์และโครงสร้างเว็บฯ1.เ ว็ บ เ พ จคื อ ....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................2. เว็บไซต์คือ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
  10. 10. 3. ความแตกต่างระหว่างเว็บเพจและเว็บไซต์................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................ หน่วยการเรียนรู้ที่ 2 แผนการจัดการเรียนรู้ที่ 2เรื่อง โครงสร้างเว็บไซต์กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยีระดับชั้น มัธยมศึกษาปีที่ 5รายวิชา การเขียนเว็บไซต์ ง 30245จำานวน 2 ชั่วโมง
  11. 11. ส อ น วั นที................................................................................... ่จุดประสงค์นำาทาง - สังเคราะห์โครงสร้างของเว็บไซต์ และออกแบบได้เนื้อหาสาระ - องค์ประกอบโครงสร้างเว็บเพจ และเว็บไซต์ - การกำาหนดรูปแบบของเว็บไซต์ - การออกแบบโครงสร้างเว็บการจัดกระบวนการเรียนรู้ ขันเตรียมหรือขั้นนำาเข้าสู่บทเรียน ้ 1. ครูแจ้งจุดประสงค์การเรียนรู้ และวิธีการเรียนรู้ 2. นักเรียนร่วมแสดงความคิดเห็นเกี่ยวกับโครงสร้างของ เว็บไซต์ตามที่ตนเองเข้าใจแล้วร่วมกันวิเคราะห์ถึงองค์ประกอบ ของโครงสร้างเว็บขันสอน ้ 3. ครูอธิบายเกี่ยวกับ ส่วนประกอบของโครงสร้างในหน้า เว็บเพจ และโครงสร้าง เว็ บ ไซต์ เสนอพร้ อ มกั บ โปรแกรม PowerPoint นักเรียนจดบันทึก 4. ครูแจกใบความรู้ที่ 3 เรื่อง โครงสร้างเว็บ 5. นั กเรีย นสรุ ป ความรู้ จ ากการอ่ า นใบความรู้ ที่ 3 แล้ ว ตอบคำาถามจากใบความรู้ 6. นักเรียนรับใบงานที่ 3 ลงมือปฏิบัติ และประเมินผลการ ทำางานลักษณะกลุ่ม ขันสรุป ้ 7. ครูเปิดโอกาสให้นักเรียนซักถามข้อสงสัยเกี่ยวกับเรื่อง ทียังไม่เข้าใจ และร่วมกันสรุปเนื้อหาบทเรียน ่สื่อและแหล่งการเรียนรู้ (มีจำานวนเท่ากับจำานวนนักเรียน) - ใบความรู้ที่ 3 เรื่อง โครงสร้างเว็บฯ - ชิ้นงานนำาเสนอบทเรียน (PowerPoint) - ใบงานที่ 3 - แบบประเมินการทำางานเป็นกลุม ่ - เว็บไซต์ประกอบการเรียนรู้ - ตัวอย่างเว็บไซต์ที่ใช้เรียนรู้เกี่ยวกับด้านโครงสร้างเว็บฯ
  12. 12. กระบวนการวั ด และประเมิ น ผล (มี จำา นวนเท่ า กั บ จำา นวนนักเรียน)วิธีวัดผล - ตรวจผลงานจากความตั้งใจขณะอยู่ภายในสังคมห้องเรียน - การให้ความร่วมมือในการแสดงความคิดเห็น - การทำา ใบงานที่ 3 และแบบประเมิ น ผลการทำา งานแบบ กลุม่เครื่องมือวัด - แบบประเมินการทำางานแบบกลุ่มเกณฑ์การประเมิน - คะแนนแบบทดสอบหลังเรียน คะแนนการประเมินการทำางานแบบกลุ่ม 0 – 50 คะแนน ไม่ผ่าน 51 – 100 คะแนน ผ่านหัวหน้ากลุ่มสาระการงานอาชีพและเทคโนโลยี....................................................................................................................................................................................................................................................................................................................................................................
  13. 13. ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................... ลงชื่อ............................................ ( )รองผู้อำานวยการฝ่ายวิชาการ............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. ลงชื่อ............................................ ( )ผู้อำานวยการโรงเรียนวัดธรรมจริยาภิรมย์.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
  14. 14. ลงชื่อ............................................ ( )บันทึกผลหลังการสอน1. ผลการสอน1.1ด้านความรู้.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................1.2ด้ า นทักษะ.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................1.3ด้ า นคุ ณ ลั ก ษณะ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
  15. 15. ...................................................................................................................................2. ปัญหา / อุปสรรค.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................3. ข้อเสนอแนะ / แนวทางแก้ไข......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... ลงชื่อ……………………………………..ผู้สอน (นางสาวอุไรวรรณ เทียนทอง) ใบงานที่ 3เรื่อง การออกแบบโครงสร้างเว็บก ลุ่ ม ที่ ............จำา น ว น ส ม า ชิ ก ใ น ก ลุ่ ม ...............ค นชั้น...................วัน/เดือน/ปี............................ 1. ชื่ อ ......................................................................... เลขที่ ....................... 2. ชื่ อ ......................................................................... เลขที่ .......................จุดประสงค์
  16. 16. 1. เพื่ อ ให้ ผู้ เ รี ย นเข้ า ใจความหมายของการออกแบบโครงสร้ า ง เว็บไซต์จากจินตนาการของตนเอง 2. เกิดทักษะการคิดอย่างมีหลักการ 3. เกิดทักษะการทำางานเป็นกลุ่มคำาชี้แจง 1. แบ่งนักเรียนเป็นกลุ่ม กลุ่มละ 2 คน แล้วให้แต่ละกลุ่มทำา การ ศึกษาค้นคว้าเกี่ยวกับรูปแบบการออกแบบโครงสร้างเว็บไซต์ ในอุดมคติของนักเรียน 2. ให้สมาชิกในกลุ่มตกลงแบ่งงานศึกษาโครงสร้างของเว็บไซต์ที่ ถูกต้อง 3. จากนั้นช่วยกันนำา ข้อมูลที่ค้นคว้า นำา มาสรุปโครงสร้างและร่วม กันออกแบบโครงสร้างเว็บไซต์ในอุดมคติของตนเองให้ถูกต้อง และสวยงานที่สุด 4. บันทึกข้อมูลลงในสื่อบันทึกแบบประเมินการทำางาน ระดับคุณภาพรายการประเมิน ต้ อ ง พอใช้ ดี ดีมาก ปรับปรุง (2 (3 (4 (1 คะแนน) คะแนน) คะแนน) คะแนน)ก า ร ป ร ะ เ มิ น ก า ร
  17. 17. ทำางาน1. ทำา งานสำา เร็ จ ตามเป้าหมาย2. ทำา งานตามวิ ธี ก ารและขั้นตอน3. การออกแบบถูกต้องครอบคลุมเนื้อหา5. ความสวยงามและสัดส่วน4. การสรุปความหมายการประเมินนิ สัยการทำางาน1. ความรับผิดชอบและเอาใจใส่2. การทำา งานร่ว มกั บผู้อื่น3. ความซื่อสัตย์4. ความอดทน5. ความประหยัด ผู้ ป ร ะ เ มิ น.............................................................................. วั น ที่ ............เ ดื อ น...................................พ.ศ. ............... ใบความรู้ที่ 3 โครงสร้างเว็บไซต์
  18. 18. ส่วนประกอบสำาคัญ ๆ ในหน้าโฮมเพจ ในหน้ า โฮมเพจ (หน้ า เเรกของเว็ บ ไซต์ ) นั้ น ควรมี ส่ ว นประกอบสำาคัญ ๆ อย่างครบถ้วน เพื่อให้ผู้ชมสามารถเข้ามาใช้งานได้สะดวก ซึ่งหน้าโฮมเพจส่วนใหญ่มักมีส่วนประกอบที่สำาคัญ ดังนี้ 1.โลโก้ ( Logo) สิ่งสำาคัญที่จะช่วยให้ผู้เข้าเว็บจดจำา เว็บไซต์ขอฃเราได้ก็คือ“โล โ ก้ ” น อกจ า ก นี้ เ เล้ ว โ ล โ ก้ ยั ง ช่ ว ย ใ ห้ เ ว็ บ ไ ซ ต์ ข อ ฃ เ ร า ดู มีเอกลั ก ษณ์ อี ก ด้ ว ย โดยรานิ ย มวางตำา เเหน่ ง โลโก้ ไ ว้ ที่ มุ ม บนซ้ า ยเพราะเป็ น จุ ด ที่ ส ามารถสั ง เกตุ ไ ด้ ง่ า ย ซึ่ ง จากการวิ จั ย พบว่ า วางตำาเเหน่งโลโก้ที่มุมบนซ้ายนั้นช่วยให้ผู้ชมสามารถจดจำาเว็บไซต์ของเราได้ถึง 84% เลยที่เดียว คุณค่าของการวางตำาแหน่งโลโก้ บนซ้าย (Upper Left) = 84% บนขวา (Upper Right) = 6% บนกลาง (Upper Center) = 6% ทีอื่น ๆ (Other Position) = 4% ่จะสังเกตได้ว่าการออกแบบโลโก้ของเเต่ละเว็บไซต์นั้จะไม่ซับซ้อนมากนั้ น แต่ จ ะเน้ น ไปในทางด้ า นการออกแบบให้ เ รี ย บง่ า ยและสามารถอ่านชื่อเว็บไซต์ได้ชัดเจนมากกว่า เนื่อฃจากใช้ภาพโลโก้ที่ซับซ้อนอาจส่งผลให้ผู้เข้าชมไม่สามารถจดจำาชื่อเว็บไซต์ของเราได้นั่นเอง2.เมนูหลัก (Link Menu) เมนูหลักเป็นจุดเชื่อมโยงสิ่งสำาคัญ ๆ ที่รวบรวมไว้ในรูปแบบของเมนู ปุ่ ม หรื อ ข้ อ ความ โดยผู้ เ ข้ า ชมจะสามารถรั บ รู้ ไ ด้ ว่ า ภายในเว็ บ ไซต์ นี้ มี เ รื่ อ งราวที่ น่ า สนใจอย่ า งไรบ้ า ง เช่ น News (ข่ า วใหม่ๆ) ,Shoooing และ Link (เชื่อมโยงเว็บที่เกี่ยวข้อง) เป็นต้น รูปแบบของเมนู ห ลั กที่ นิ ย มใช้ กั น มั ก เป็ น เมนู แ บบแนวตั้ ง และเมนุ แ บบแนวนอนตามลำาดับ3.โฆษณา (Banner) โฆษณานั้นเป็นส่วนที่สำาคัญอีกเช่นเดียวกัน เพราะเว็บไซต์ที่มีโฆษณาจะช่วยส่งเสริมภาพลักษณ์ ความน่าเชื่อถือ และช่วยกระตุ้นความสนใจเพราะมั ก มี ก ารใช้ ภ าพเคลื่ อ นไหว (Gif animation)ประกอบซึ่งจะทำาให้เว็บไซต์ของเราดูตื่นตาตื่นใจมากยิ่งขึ้น จากการวิจัยพบว่าภาพเคลื่อนไหวยังช่วยให้เว็บไซต์ของเราดูน่าสนใจมากยิ่งขึ้น 30% เลยที่เดียว นอกจากนี้แล้วยัง สามารถเเสดงถึง ความนิ ยม
  19. 19. ของผู้เข้าชมได้อีกด้วย แต่ก็ไม่ควรให้มีโฆษณามากเกินไปและควรจัดวางตำาเเหน่งให้เหมาะสมด้วย4.ภาพประกอบเเละเนื้อหา (Content) เนื้อหาสาระที่น่ารู้เป็นส่วนสำาคัญอย่างยิ่งที่จะทำาให้ผู้เข้าชมอยากจะเข้ า เยี่ ย มชมเว็ บ ไซต์ ข องเรามากขึ้ น เเละใช้ บ ริ ก ารอย่ า งสมำ่า เสมอ เราจึงควรอัพเดจเนื้อหาให้ใหม่สด มีรูปเเบบการจัดวางที่อ่านง่าย เนื้อหาไม่ยาวหรือสั้นจนเกินไป นอกจากนี้หากเราใช้ภาพประกอบที่สวยงามก็จะช่วยให้เนื้อหาดูดึงดุดใจมากยิ่งขึ้น ซึ่งการใช้ภาพประกอบที่สวยงามและฟอนต์ที่อ่านง่ายจะช่วยให้เนื้อหาของเราน่าสนใจเพิ่มมากยิงขึ้นถึง 40-45% ่การเเบ่งพื้นที่การใช้งานในหน้าโฮมเพจ หลังจากที่เราได้รู้จักกับส่วนประกอบสำา คัญ ๆ ในหน้าโฮมเพจเเล้ ว ผู้ อ่ า นหลายท่ า นจะเริ่ ม สั ง สั ย ว่ า ในเมื่ อ มี ส่ ว นประกอบมากมายขนาดนี้เราควรจะจัดวางตำาแหน่งอย่างไรดี ตัวอย่างข้างล่างนี้เป็นตัวอย่างหนึ่งที่นิยมใช้กันมากในการจัดวางหน้าโฮมเพจ เรามักพบเห็นการเเบ่งพื้นที่ในรูปเเบบ 3 ส่วน และ 2 ส่วน การใช้งานกับเว็บไซต์ขององกรและเว็บไซต์ที่มีขนาดใหญ่ เนื่องจากเป็นรู ป แบบที่ ใ ช้ ง านง่ า ย และมี ก ารแบ่ ง สั ด ส่ ว นอย่ า งชั ด เจน เช่ นwww.siemens.com, www.msn.com, www.sanook.com สำาหรับรูปเเบบการเเบ่งพื้นที่ 1 ส่วนหรือเเบบอิสระนั้น เรามักพบเห็นกับเว็บไซต์ที่เน้นการออกแบบให้สวยงานมากกว่าเน้นการใช้งาน และมักมีการออกแบบที่สลับซับซ้อน เช่น www.qooclup.com,www.rustboy.com, www.hardldbelker.comทำาอย่างไรให้โฮมเพจดูดี ในความเป็นจริงแล้วการออกเเบบเว็บไซต์ไม่ได้มีรูปเเบบที่ตายตั ว และเเน่ น นอนเเต่ ก็ มี อ งค์ ป ระกอบหลายอย่ า งที่ จ ะช่ ว ยให็เว็บไซต์เราดูดีเเละน่าใช้ ผู้เขียนจึงมีข้อเเนะนำาและวิธีการง่าย ๆ ทีจะ ่ช่วยให้โฮมเพจของคุณดูดีขึ้น1. เลือกใช้สีให้เหมาะสม การเลือกใช้สีนั้นมีผลอย่างมากในภาพรวมของเว็ บไซต์ เนื่อ งจากสีเเต่ละสีนั้นมีผลต่ออารมณ์เเละความรู้สึกกับผู้ที่เข้ามาใช้บริการดังนั้นเราจึงควรเลือกใช้สีให้เหมาะสมกับเว็บไซต์ โดยเเต่ละประเภทของสีนั้นจะให้ความหมายและความรู้สึกที่ต่าง ๆ กันนี้ สีฟ้า
  20. 20. เป็นสีของท้องฟ้าจึงช่วยให้เรารู้สึกปลอดโปร่งโล่งสบาย สีฟ้ า นั้ น เป็ น สี ที่ ดู แ ล้ ว สบายตาและนอกจากนี้ ยั ง รู้ สึ ก นุ่ ม นวลและสุ ขสบายอีกด้วย สีนำ้าเงิน ให้ ค วามรู้ สึ ก ถึ ง ความจริ ง จั ง มั่ ง คงและจริ ง จั ง สงบและปลอดภัย นอกจากนี้แล้วยังให้ ความรู้สึกหรูหรา มีระดับ มีราคาและความเป็นชายอีกด้วย สีเขียว สีเขียวเป็นสีของต้นไม้ใบหญ้าทำาให้เรารู้สึกสดชื่นเย็นสบายเเละชวนให้นึกถึงความเป็นธรรมชาติ สีเขียวนั้นเป็นสีที่สบายตามากทีสุดสีหนึ่ง ่ สีเเดง ให้ความรู้สึกร้อนเเรง ความรุนแรงความมีพลังและความตื่นเต้นสนุกสนานนอกจากนี้เเล้วเป็นสีมงคลของคนจีนอีกด้วย สีเหลืองและสีส้ม สีเหลืองนั้นให้อารมณ์สดใสเเละดึงดูดสายตาเเต่บางครั้งอาจทำาให้รูสึกเหนื่อย ส่วนสีส้มนั้นทำาให้ความรู้สึกอบอุ่นกระตือรือร้นและนอกจากนี้แล้วยังดูทันสมัยอีกด้วย สีเทา ให้ความรู้สึกสุภาพสุขุม สงบ เเละมั่นคง และยังให้ความรู้สึกหม่อนหมอง และโศกเศร้าอีกด้วย สีขาว ให้ความรู้สึกเรียบง่าย สะอาดสะอ้าน โล่งสบายและบริสุทธิ์2.มีความเป็นเอกลักษณ์ เราสามารถออกเเบบเว็บไซต์ให้มีความเป็นเอกลักษณ์ย่างง่าย ๆ ด้วยการเลือกใช้สีฟอนต์และภาพประกอบที่มีความคล้ายคลึงกันทุก ๆ หน้าของเว็บไซ๖ เนื่องจากเว็บไซต์ที่มีเอกลักษณ์มักทำาให้ผู้ใช้จดจำา ได้ง่าย นอกจากนี้ยังมีจุดสนใจอื่น ๆ เป็นส่วนประกอบอีกเช่น โลโก้ สี เเละ ความคล้ายคลึงกัน3. ต้องสามารถใช้งานได้อย่างเหมาะสม หากเว็บไซต์ของคุณนั้นมีการใช้งานที่สลับซับซ้อนจนเกินไปอาจมี ผ ลทำา ให้ ผู้ ที่ ม าใช้ บ ริ ก ารหงุ ด หงิ ด รำา คาญใจได้ แ ละทำา ให้ ไ ม่อยากกลับมาใช้บริการที่เว็บไซต์ของเราอีกโดยเฉพาะหากเว็บไซต์ของคุณเป็นเว็บไซต์เพื่อการบริการซื้อขายแล้วล่ะก็จะยิ่งเป็นผลเสียอย่างมากในการสั่งซื้อสินค้าและใช้บริการ
  21. 21. 4.สามารถแสดงผลได้อย่างรวดเร็ว ในการออกแบบหน้าโฮมเพจนั้นนอกจากจะเน้นหน้าตาที่น่าสนใจแล้ว การแสดงผลที่รวดเร็วก็จะทำาให้เว็บไซต์ไม่น่าเบื่อ ดังนั้นการใช้ภาพหรือกราฟิกประกอบจึงควรคำา นึงถึงเรื่องระยะเวลาในการแสดงผลเว็บไซต์ ด้ว ย เนื่ องจากยิ่งมี ภาพประกอบมากเวลาในการแสดงผลก็จะยิ่งมากด้วยไปด้วย นอกจากหัวข้อต่าง ๆ ที่กล่าวมาแล้วลักษณะของตัวอักษรที่ใช้ประกอบก็เป็นส่วนสำาคัญอีกอย่างหนึ่งที่จะช่วยให้โฮมเพจของเราดูทันสมัย น่าเชื่อถือหรือสนุกสนานมากยิ่งขึ้น เนื่องจากตัวหนังสือแต่ละลักษณะนั้นจะให้ความรู้สึกแตกต่างกันไปตัวหนังสือแบบ Serif (มีเชิง) ให้ความรู้สึกของความคลาสสิค ดูเก่าแก่ และค่อนข้างเป็นทางการตัวหนังสือแบบ San Serif (ไม่มีเชิง) ให้ความรู้สึกเรียบง่าย มีความทันสมัยและนอกจากนี้แล้วยังช่วยให้อ่านง่ายอีกด้วย Script (ตัวอักษรแบบลายมือ) ให้ความรู้สึกสนุกสนานเป็นกันเองและดูไม่เป็นทางการ มักใช้กับคำาโฆษณาสั้น ๆ ตัวอักษรแบบมีหัว มักใช้กับบทความยาว ๆ เพราะช่วยให้อ่านง่าย เช่น หนังสือเรียน แต่ในขณะเดียวกันก็ดูโบราณ ตัวอักษรแบบไม่มีหว ั ตัวหนังสือแบบนี้ค่อนข้างที่จะอ่านยาก มักใช้กับข้อความสั้นๆ แต่ก็ให้ความรู้สึกทีทันสมัย ่ ทั้ ง หมดนี้ เ ป็ น เพี ย งพื้ น ฐานเล็ ก ๆ น้ อ ย ๆ ที่ จ ะช่ ว ยให้ คุ ณสามารถเข้ า ใจวิ ธี ก ารง่ า ย ๆ ในการออกแบบเพื่ อ ที่ จ ะนำา ไปใช้ กั บโฮมเพจของคุ ณ โดยการศึก ษาหาความรู้ใ นสิ่ งที่ตนเองสนใจเป็ นพิเศษ การดู ตั ว อย่ า งโฮมเพจอื่ น ๆ และการฝึ ก ฝนการใช้ ค วามคิ ด สร้ า งสรรค์จากนั้นจึงนำามาประยุกต์ใช้ สิ่งเหล่านี้จะช่วยให้คุณสามารถออกแบบโฮมเพจได้อย่างสร้างสรรค์และสวยงามมากขึ้นนั่นเองขั้นตอนสำาคัญในการสร้างโฮมเพจ ในการสร้างโฮมเพจนั้นมีขั้นตอนที่สลับซับซ้อนพอสมควรแต่ก็ไม่ยากจนเกินไป ผู้เขียนจึงขอเสนอแนวทางง่าย ๆ ที่จะทำาให้เรา
  22. 22. สามารถสร้างโฮมเพจได้ อย่ างเป็ นขั้ นตอนและมีความเข้าใจในการสร้างโฮมเพจมากขึ้นดังวิธีการต่อไปนี้ 1.ขอพื้นที่โฮมเพจจาก Web Hosting ในการขอพื้นที่โฮมเพจเราจะต้องเลือก Web Hosting เสียก่อน โดยการเปรียบเทียบข้อดีข้อเสียต่าง ๆ รวมถึงขนาดของพื้นที่ให้บริการด้วย จากนั้นจึงลงทะเบียนขอพื้นที่โฮมเพจ (ผู้อ่านควรคิดลั ก ษณะและชื่ อ โฮมเพจที่ ต้ อ งการสร้ า งไว้ ใ นใจเสี ย ก่ อ นเพื่ อ ให้ลักษณะของโฮมเพจและชื่อที่ตั้งสัมพันธ์กัน) 2.กำาหนดลักษณะของโฮมเพจ เมื่อเราขอพื้นที่โฮมเพจแล้ว ขั้นตอนต่อไปคือ การกำาหนดลักษณะโฮมเพจของเรา โดยในตอนนี้เราต้องคิดและตัดสินใจว่าเราาจะสร้างโฮมเพจเกี่ยวกับอะไรดี มีลักษณะโทนสีอะไร และใครจะเข้ามาเยี่ยมชมในโฮมเพจของเราบ้าง เมื่อตัดสินใจได้แล้วก็จะเข้าสู่ขั้นตอนต่อไป 3.ออกแบบหน้าโฮมเพจด้วย Photoshop ในขั้นตอนนี้เราจะต้องมีภาพของหน้าโฮมเพจลาง ๆ ไว้ในใจแล้วว่าจะมีลักษณะอย่างไร มีส่วนประกอบอะไรบ้าง จากนั้นเราจึงมาเริ่มต้นออกแบบและสร้างส่วนประกอบต่าง ๆ ในหน้าโฮมเพจ ซึ่งผู้เขียนจะได้อธิบายรายละเอียดเพิ่มเติมในตอนต่อไป 4.สร้างโฮมเพจให้สมบูรณ์ด้วย Dreamweaver 8 เมื่อเราได้ออกแบบส่วนประกอบต่าง ๆ ของหน้าโฮมเพจด้วยโปรแกรม Photoshop เสร็จเรียบร้อยแล้ว ต่อไปเราจะเข้าสู่การสร้างโฮมเพจด้ ว ยโปรแกรม Dreamweaver 8 เพื่ อ ให้ ไ ด้ โ ฮมเพจที่สมบูรณ์ซึ่งเราก็จะได้เรียนรู้ในตอนต่อไปเช่นกัน 5.อัพโหลดโฮมเพจขึ้นอินเตอร์เน็ต เมื่ อ เราสร้ า งโฮมเพจเรี ย บร้ อ ยแล้ ว ก็ จ ะเข้ า สู่ ก ระบวนการอัพโหลดโฮมเพจเข้าสู่ Web Hosting ที่เราได้ขอพื้นที่โฮมเพจไว้เรียบร้อยแล้วด้วยโปรแกรม Cute_FTP หรือโปรแกรมทีทาง เว็บไซต์ ่มีให้บริการขึ้นโหลดข้อมูล เพียงเท่านี้เราก็จะสามารถสร้างโฮมเพจได้อย่างสมบูรณ์แบบแล้วการสร้างและออกแบบเว็บกระบวนการในการสร้างและออกแบบเว็บจะมีกระบวนการพื้นฐานอยู่ด้วยกัน 5 ขั้นตอนคือ
  23. 23. 1. การวางแผน (Planning) เป็ น ขั้ น ตอนที่ ผู้ ส ร้ า งเว็ บ จะต้ อ งรวบรวมข้อมูลที่ต้องการจะนำามาสร้างเว็บ กำา หนดวัตถุประสงค์และกลุ่มเป้าหมาย จากนั้นกำา หนดขอบเขตและความต้องการของเว็บว่าจะต้องมีอะไรบ้าง เช่น ขนาดของหน้าจอภาพ บราวเซอร์ที่จะใช้ ฯลฯ องค์ประกอบและเครื่องมือที่จะต้อ งใช้ ต้องการมีกระดานข่าว ห้ องสนทนา ฯลฯ รวมถึ ง ขั้ น ตอนและกระบวนการในการบำารุงรักษาอย่างเป็นระบบการวางแผนเบื้องต้นของการสร้างเว็บสำาหรับ Dreamweaver คือ - กำาหนดพื้นที่จัดเก็บเว็บในเครื่องคอมพิวเตอร์ - กำาหนดพื้นที่ติดตั้งเว็บเมื่อสร้างเสร็จ 2. การออกแบบ (Design) เป็ น ขั้ น ตอนที่นำา ข้ อ มู ล และแผนที่วางไว้ไปปฏิบัติ โดยการลงมือปฏิบัติโดยจัดพิมพ์เนื้อหา กำาหนดการเชื่อมโยง และคุณลักษณะอื่นที่ต้องใช้ในเว็บ การออกแบบก็จะเน้นที่การจัดหน้าจอของเว็บให้สอดคล้องกันและระมัดระวังปัญหาต่าง ๆ ในการออกแบบ 3. การพัฒนา (Development) เป็นขั้นตอนที่ต่อเนื่องจากการออกแบบและการสร้าง โดยเน้นไปที่การตกแต่งและเสริมเครื่องมือต่าง ๆ สำา หรั บเว็ บ เช่ น การกำาหนดสี ภาพ การใช้ Flash ช่วยให้เว็บเร้าความสนใจ และเพิ่มเติมเทคนิคต่าง ๆ ของโปรแกรมสนับสนุนการสร้างเว็บ 4. การติ ด ตั้ ง (Publishing) เป็ น ขั้ น ตอนที่ จ ะนำา เอาเว็ บ ที่ ไ ด้สร้างขึ้นเข้าไปติดตั้งในเว็บเซอร์เวอร์เพื่อให้แสดงผลได้ในระบบอินเทอร์เน็ต หรือจะเรียกว่า การอับโหลด (Up load) ซึ่งเป็นขั้นตอนที่จะต้องดำาเนินการอยู่เสมอเมื่อสร้างเว็บเสร็จ 5. การบำารุงรักษา (Maintenance) เป็นขั้นตอนประเมินผลและติดตามผลการติดตั้งเว็บไซต์ว่ามีข้อขัดข้องหรือต้องปรับปรุงเปลี่ยนแปลงเว็บเพิ่มเติมให้ทันสมัยอยู่เสมอ อาจจะเรียกได้ว่าขั้นตอนการอับเดท (Up date)การกำาหนดรูปแบบเว็บไซต์ (Web-site) เว็บไซต์ (Web-site) หมายถึง เว็บที่ประกอบด้วยเว็บเพจหลายๆ เว็บเพจมารวมกัน อยู่ภายในพื้นที่เดียวกันและเชื่อมโยงระหว่างกันภายใต้โดเมนเนมเดียวกัน โดยมีโฮมเพจเป็นหน้าแรกของเว็บไซต์ทำาหน้าที่เชื่อมโยงไปยังเว็บเพจต่าง ๆ
  24. 24. โฮมเพจ (Homepage) หมายถึ ง เว็ บ เพจที่ เ ป็ น หน้ า แรกของเว็บไซต์ ที่เข้าถึงได้ทันทีเมื่อเข้าสู่ระบบอินเทอร์เน็ตโดยการพิมพ์โดเมนเนมหรือยูอาร์แอลซึ่งเป็นที่ติดตั้งของเว็บไซต์ เว็ บ เพจ (Web page) หมายถึ ง เอกสารที่ ส ร้ า งขึ้ น โดยในรู ปแบบของ HTML หรือโปรแกรมการสร้างเว็บโดยเฉพาะ จะแสดงผลได้ เ ฉพาะโปรแกรมบราวเซอร์ และต้ อ งติ ด ตั้ ง ในเว็ บ เซอร์ เ วอร์ เ พื่ อเข้ า ไปอ่ า นข้ อ มู ล ได้ โ ดยผ่ า นระบบอิ น เทอร์ เ น็ ต เว็ บ เพจจะมี 2ลักษณะใหญ่คือ - เว็ บ เพจแบบหน้ า เดี ย ว (Single page) หรื อ แบบสั้ น (Shortpage) หมายถึง เว็บเพจที่แสดงผลข้อมูลหรือเนื้อหาเพียงหน้าเดียวมีขนาดเท่ากับหน้าจอคอมพิวเตอร์พอดี หรือมีแถบเลื่อนลงมาด้านล่างสั้น ๆ หรือมีรูปแบบเป็นกรอบพอดีหน้าจอภาพ - เว็ บ เพจแบบแถบเลื่ อ น (Scroll page) หรื อ แบบยาว (Longpage) หมายถึ ง เว็ บ เพจที่ แ สดงผลข้ อ มู ล หรื อ เนื้ อ หาเป็ น แนวยาวจากด้านบนลงมายังด้านล่างของหน้าจอภาพ โดยมีแถบเลื่อนอยู่ด้านข้างสำาหรับเลื่อนหน้าจอภาพ เพื่อดูข้อมูลที่แสดงผลหน้าจอภาพการออกแบบโครงสร้างเว็บ สิ่งที่ต้องพิจารณาในการสร้างเว็บเพื่อการศึกษาคือ โครงสร้างหลักของเว็บ เนื่องจากการจัดการข้อมูลเพื่อการเรียนการสอนมีความแตกต่ า งกั น กลุ่ ม ผู้ เ รี ย นที่ แ ตกต่ า งและเนื้ อ หาของเว็ บ แตกต่ า งกั นโ ค ร ง ส ร้ า ง ข อ ง เ ว็ บ ก็ จ ะ มี ผ ล ต่ อ ก า ร เ รี ย น ก า ร ส อ น เ ช่ น กั น(McCormack and Jones, 1998)โครงสร้างของเว็บโดยพื้นฐานจะมี 2 ลักษณะคือ 1. โครงสร้างเว็บแบบตื้น เป็นโครงสร้างเว็บในลักษณะที่มีการเชื่อมโยงจากหน้าแรกหรือหน้าที่หลักไปยังเนื้อหาโดยตรง โดยไม่มีเว็บ เพจที่ เ ป็ น เนื้ อหาเชื่ อมโยงต่ อ ไปอี ก มากนั ก สามารถกลั บ มายั งหน้าแรกหรือหน้าหลักของของเว็บไซต์ได้ในทันที อาจจะมีการเชื่อมโยงของเนื้อหาต่อไปอีกบ้างแต่ไม่ต่อเนื่องเป็นลำาดับลึกลงไปเหมือนกับโครงสร้างของเว็บแบบลึก โครงสร้างลักษณะนี้จึงเป็นโครงสร้างที่มีเนื้อหาแยกเป็นหน่วยย่อย ๆ หรือมีเนื้อหาเฉพาะเรื่องไม่เกี่ยวข้องกัน ทำาให้ไม่ต้องเชื่อมโยงเว็บเพจต่อไปเรื่อย ๆ เว็บแบบตื้นอาจจะมีเนื้ อ หามากก็ ไ ด้ แต่ ไ ม่ เ ชื่ อ มโยงลึ ก ลงไปอี ก การออกแบบเว็ บ เพจอาจเป็นแบบหน้าเดียวสั้น ๆ หรือแบบแถบเลื่ อนยาวลงไปมากก็ไ ด้เนื้อหาจบในหน้านั้นและไม่เชื่อมโยงไปอีก
  25. 25. โฮมเพจ เว็บไซต์ เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา เว็บไซต์ เว็บไซต์ เว็บไซต์ เว็บไซต์ เว็บไซต์ รูปแสดง ลักษณะโครงสร้างเว็บแบบตื้น 1. โครงสร้างเว็บแบบลึก เป็นโครงสร้างที่มีการเชื่อมโยงต่อเนื่องกัน ไปในเนื้อหาเดียวกันโดยตลอดหลาย ๆ เว็บ เนื่องจากมีเนื้อหามาก และเป็นลำาดับต่อเนื่อง ทำาให้โครงสร้างของเว็บต้องลงลึกไปเรื่อย ๆ โฮมเพจ เว็บไซต์ หัวเรื่อง หัวเรื่อง เว็บไซต์ เว็บไซต์ เนื้อหา เนื้อหา เนื้อหา เนื้อหา เว็บไซต์ เว็บไซต์ เว็บไซต์ เว็บไซต์เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหาเว็บไซ เว็บไซ เว็บไซ เว็บไซ เว็บไซ เว็บไซ เว็บไซ เว็บไซ
  26. 26. สำา หรับการเลื่อนแถบเลื่อนด้านขวาของหน้าจอไม่ได้หมายความว่าโครงสร้างเว็บนั้นจะเป็นแบบลึก เพราะการเลื่อนแถบเลื่อนด้านข้างขวาของจอภาพเป็ น การออกแบบหน้ า จอเว็ บ ไม่ ใ ช่ โ ครงสร้ างภาพรวมของเว็ บ การเลื่ อ นแถบเลื่ อ นด้ า นขวาของหน้ า จอภาพเป็ น การออกแบบเว็ บ แบบแถบเลื่ อ น เรี ย กได้ ว่ า การออกแบบหน้ า จอภาพแบบแถบเลื่อน เป็นแผ่นเดียวยาวจากด้านบนลงมาด้านล่าง แต่การออก แบบโครงสร้างเว็บแบบลึก เป็นการออกแบบที่มีเว็บเพจหลาย ๆเว็บเพจต่อเนื่องจากเป็นจำานวนมาก องค์ประกอบที่ควรมีในเว็บเพจองค์ประกอบทั่วไป1. ชื่อของเว็บเพจ (Title) 2.ประวั ติแ ละรู ป ภาพผู้จัดทำา (Profile/Picture)3. การเชื่อมโยงภายในและภายนอกเว็บ (Links) 4. ก า รแสดงที่อยู่ของเว็บ : URL5. วัน/เวลาที่สร้างเว็บ (Date/Time) 6. ก า ร ป รั บ ป รุ งครั้งล่าสุด (Update)7. ผู้จัดทำาเว็บ : (created by) 8. ก า ร ส ง ว นลิขสิทธิ์ (Copy right)9. การติดต่อผู้จัดทำาเว็บ (contract /e-mail) 10. ส ถ า นทีติดต่อของเว็บ (Address) ่11. บราวเซอร์ที่เหมาะสมสำาหรับการชม (Browser ) 12. ข น า ดหน้าจอที่เหมาะสมในการชม13. คำา ถามที่ถู กถามบ่ อย FAQ (Frequency Asked Question) 14.ความช่วยเหลือ (Help)องค์ประกอบพิเศษ1. สมุดเยี่ยม (Guest book) 2. ฝากข้อความ (Webboard)3. กระดานข่าว (Bulletin Board) 4. กระทู้5. แบบสำารวจ (Web poll) 6. จำา น ว น ผู้ เ ข้ า ช ม(Counter)7. ห้องสนทนา (Chat Room) 8. ส ถิ ติ ทุ กประเภท (Web state)9. เทคนิ ค พิ เ ศษด้ ว ยโปรแกรมสคริ ป ต์ (Java script, VBscript ,cgi,asp,php)
  27. 27. 10. โปรแกรมพิเศษสนับสนุน (Download) 11. ส ไ ล ด์สรุปบรรยาย (Presentation)องค์ประกอบเฉพาะสำาหรับ E-learning1. คำาอธิบายรายวิชา 2. วั ต ถุ ป ร ะ ส ง ค์รายวิชา3. คุณสมบัติของกลุ่มผู้เรียน 4. การลงทะเบียน5. ตารางเรียน 6. ผู้บริหารหลักสูตร7. กิจกรรม 8. ข่าวสาร/ประกาศ9. ตารางสอน/ตารางเรียน 10. ป ฏิ ทิ น ก า รศึกษา11. แผนภูมิแสดงโครงสร้างรายวิชา 12. ส า ร บั ญเนื้อหา13. เนื้อหารายละเอียด 14. แบบทดสอบก่อนเรียน15. แบบฝึกหัดระหว่างเรียน 16. สรุปสาระสำาคัญ17. ข้อสอบท้ายการเรียน 18. โ ค ร ง ส ร้ า งหลักสูตร19. บรรณานุกรม/รายการอ้างอิง 20. เ ว็ บ ไ ซ ต์ ที่เกี่ยวข้อง

×