More Related Content
Similar to หน่วยการเรียนรู้ที่ 2
Similar to หน่วยการเรียนรู้ที่ 2 (20)
หน่วยการเรียนรู้ที่ 2
- 1. หน่วยการเรียนรู้ที่ 2
เว็บเพจ เว็บไซต์ และโครงสร้างเว็บไซต์
กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี
ระดับชั้น มัธยมศึกษาปีที่ 5
รายวิชา การเขียนเว็บไซต์ ง 30245
จำานวน 4 ชั่วโมง
ส อ น วั น
ที...................................................................................
่
มาตรฐานการเรียนรู้
มาตรฐานที่ 4.1 ข้ อ 4 เข้ า ใจข้ อ กำา หนดของคอมพิ ว เตอร์ แ ละ
อุปกรณ์ที่เกี่ยวข้อง
ข้อ 5 จัดเก็บและบำารุงรักษาสารสนเทศให้ถูกต้องและ
เป็นปัจจุบันอยู่เสมอ
ผลการเรียนรู้ที่คาดหวัง
1. เข้ า ใจความหมายของเว็ บ เพจ เว็ บ ไซต์ แ ละอุ ป กรณ์ ที่
เกี่ยวข้องได้
2. สามารถสังเคราะห์โครงสร้างเว็บไซต์ รวมถึงออกแบบได้
จุดประสงค์การเรียนรู้
จุดประสงค์นำาทาง
- บอกความหมายของเว็บเพจ เว็บไซต์และอุปกรณ์ที่เกี่ยวข้อง
ได้
- สังเคราะห์โครงสร้างของเว็บไซต์ และออกแบบได้
จุดประสงค์ปลายทาง
- เข้ า ใจความหมายของเว็ บ เพจ เว็ บ ไซต์ แ ละอุ ป กรณ์ ที่
เกี่ยวข้อง
- สามารถสังเคราะห์โครงสร้างเว็บไซต์ และออกแบบได้
จำานวน 2 แผน 4 ชั่วโมง
- 2. หน่วยการเรียนรู้ที่ 2
แผนการจัดการเรียนรู้ที่ 1
เรื่อง ความหมายของเว็บเพจ และเว็บไซต์
กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี
ระดับชั้น มัธยมศึกษาปีที่ 5
รายวิชา การเขียนเว็บไซต์ ง 30245
จำานวน 4 ชั่วโมง
ส อ น วั น
ที...................................................................................
่
จุดประสงค์นำาทาง
- บอกความหมายของเว็บเพจ เว็บไซต์และอุปกรณ์ที่เกี่ยวข้อง
ได้
เนื้อหาสาระ
- ความหมายของคำาว่า “เว็บเพจ” และ “เว็บไซต์”
- ความแตกต่างของคำาว่า “เว็บเพจ” และ “เว็บไซต์”
- บทบาทของ เว็บไซต์ในอดีต ปัจจุบัน และอนาคต
การจัดกระบวนการเรียนรู้
ขันเตรียมหรือขั้นนำาเข้าสู่บทเรียน
้
1. ครู แ จ้ ง จุ ด ประสงค์ ก ารเรี ย นรู้ และวิ ธี ก ารเรี ย นรู้ แล้ ว
ทดสอบก่อนเรียน
2. นักเรียนร่วมแสดงความรู้เดิมเพื่อพิจารณาความหมาย
ของคำาว่า “เว็บเพจ” และ “เว็บไซต์” และร่วมกันแสดงความคิด
เห็นถึงข้อแตกต่างของคำาว่า “เว็บเพจ” และ “เว็บไซต์”
ขันสอน
้
3. ครู อธิ บ ายเกี่ ยวกั บ ความหมายของคำา ว่ า “เว็ บ เพจ”
และ “เว็ บ ไซต์ ” และข้ อ แตกต่ า งของคำา ว่ า “เว็ บ เพจ” และ
“เว็บไซต์” พร้อมนักเรียนจดบันทึกบทเรียน พร้อมอธิบายบท
เรียนในรูปแบบ PowerPoint
- 3. 4. ครูแจกใบความรู้ที่ 2 เรื่อง เว็บเพจ และเว็บไซต์
5. นักเรียนสรุปความรู้จากการอ่านใบความรู้ที่ 2 แล้วให้
นักเรียนเขียนลงสมุดบันทึก
6. นักเรียนรับใบงานที่ 2 แล้วลงมือทำา
7. ครูตรวจผลการสรุปโดยตรวจจากสมุดนักเรียน และใบ
งานที่ 2
ขันสรุป
้
8. ครูเปิดโอกาสให้นักเรียนซักถามข้อสงสัยเกี่ยวกับเรื่อง
ทียังไม่เข้าใจ และร่วมกันสรุปเนื้อหาบทเรียน
่
สื่อและแหล่งการเรียนรู้ (มีจำานวนเท่ากับจำานวนนักเรียน)
- ใบความรู้ที่ 2 เรื่อง เว็บเพจ และเว็บไซต์
- ชิ้นงานนำาเสนอบทเรียน (PowerPoint)
- เว็บไซต์ประกอบการเรียนรู้
- ใบงานที่ 2
กระบวนการวั ด และประเมิ น ผล (มี จำา นวนเท่ า กั บ จำา นวน
นักเรียน)
วิธีวัดผล
- ตรวจผลงานจากความตั้งใจขณะอยู่ภายในสังคมห้องเรียน
- การให้ความร่วมมือในการแสดงความคิดเห็น
- การทำาแบบทดสอบ และการจดบันทึก
เครื่องมือวัด
- ใบงานที่ 2
เกณฑ์การประเมิน
- คะแนนแบบทดสอบก่อนเรียนและหลังเรียน
1-3 คะแนน กลุ่มตำ่า
4-6 คะแนน กลุ่มปานกลาง
7-10 คะแนน กลุ่มสูง
- 5. ลงชื่อ............................................
( )
ผู้อำานวยการโรงเรียนวัดธรรมจริยาภิรมย์
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
............
ลงชื่อ............................................
( )
บันทึกผลหลังการสอน
1. ผลการสอน
1.1ด้านความรู้
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
..........................
1.2ด้ า น
ทักษะ.................................................................................
- 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. ให้ จากนั้นก็กรอกรายละเอียดต่างๆตามแบบฟอร์ม เพียงเท่านี้เราก็
จะสามารถสร้างโฮมเพจในรูปแบบง่ายๆได้ตามต้องการ แต่การสร้าง
โฮมเพจด้วยโปรแกรมของ Web Hosting นี้ ก็มีข้อเสีย คือ มีรูปแบบ
ให้ เลื อกน้ อยและไม่ ส ามารถออกแบบลั ก ษณะของโฮมเพจได้ ตาม
ต้องการ
2. ใช้โปรแกรมสำาหรับสร้างเว็บไซต์
ปั จ จุบั น ได้ มี การพั ฒนาโปรแกรมที่ ใ ช้ ใ นการสร้ างเว็ บ ไซต์ กั น อย่ า ง
มากมาย เช่ น FrontPage , GoLive และ HomeSite เป็ น ต้ น แต่
โปรแกรมสร้ า งเว็ บ ไซต์ ที่ นิ ย มใช้ กั น มากที่ สุ ด ก็ ค งจะหนี ไ ม่ พ้ น
โปรแกรม Dreamweaver
Dreamweaver เป็นโปรแกรมที่ใช้งานง่ายและไม่จำา เป็น
ต้องมีความรู้ในเรื่องของภาษา HTML ถึงแม้วิธีการสร้างโฮมเพจนั้น
อาจจะไม่ง่ายดายเท่าการสร้างโฮมเพจด้วยเว็บ Hosting แต่เราก็จะ
สามารถออกแบบความสวยงามของโฮมเจได้ตามต้องการ
3. การใช้ภาษา HTML และ JavaScript
การสร้างโฮมเพจด้วยภาษา HTML และ JavaScript นั้นจะต้อง
ใช้ความสามารถและความชำา นาญในการเขี ยนโปรแกรมพอสมควร
เนื่องจากการสร้างโฮมเพจด้วยวิธีนี้ จะใช้วิธีการพิมพ์ข้อความที่เป็น
คำาสั่งลงไป จากนั้นโปรแกรมจะทำาการแปลงข้อมูลให้กลายเป็นภาพ
หรื อ ข้ อ ความที่ ต้ อ งการ โดยทั่ ว ไปเรามั ก ใช้ ภ าษา HTML และ
JavaScript ในการตกแต่ ง โฮมเพจ โดยตั ว อย่ า งที่ พ บเห็ น การใช้
ภาษา HTML และ JavaScript ได้ แก่ การกำา หนดให้ มีตัวหนัง สือ วิ่ง
การเปลียนแถบสีของ Scroll Bar เป็นต้น
่
- 9. ใบงานที่ 2
เว็บเพจ เว็บไซต์และโครงสร้างเว็บฯ
1.เ ว็ บ เ พ จ
คื อ .....................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
...........................................
.........................................................................................
.........................................................................................
.........................................................................................
.....................................................
2. เว็บไซต์คือ
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
........................................
.........................................................................................
.........................................................................................
.........................................................................................
......................................................
- 11. ส อ น วั น
ที...................................................................................
่
จุดประสงค์นำาทาง
- สังเคราะห์โครงสร้างของเว็บไซต์ และออกแบบได้
เนื้อหาสาระ
- องค์ประกอบโครงสร้างเว็บเพจ และเว็บไซต์
- การกำาหนดรูปแบบของเว็บไซต์
- การออกแบบโครงสร้างเว็บ
การจัดกระบวนการเรียนรู้
ขันเตรียมหรือขั้นนำาเข้าสู่บทเรียน
้
1. ครูแจ้งจุดประสงค์การเรียนรู้ และวิธีการเรียนรู้
2. นักเรียนร่วมแสดงความคิดเห็นเกี่ยวกับโครงสร้างของ
เว็บไซต์ตามที่ตนเองเข้าใจแล้วร่วมกันวิเคราะห์ถึงองค์ประกอบ
ของโครงสร้างเว็บ
ขันสอน
้
3. ครูอธิบายเกี่ยวกับ ส่วนประกอบของโครงสร้างในหน้า
เว็บเพจ และโครงสร้าง
เว็ บ ไซต์ เสนอพร้ อ มกั บ โปรแกรม PowerPoint
นักเรียนจดบันทึก
4. ครูแจกใบความรู้ที่ 3 เรื่อง โครงสร้างเว็บ
5. นั กเรีย นสรุ ป ความรู้ จ ากการอ่ า นใบความรู้ ที่ 3 แล้ ว
ตอบคำาถามจากใบความรู้
6. นักเรียนรับใบงานที่ 3 ลงมือปฏิบัติ และประเมินผลการ
ทำางานลักษณะกลุ่ม
ขันสรุป
้
7. ครูเปิดโอกาสให้นักเรียนซักถามข้อสงสัยเกี่ยวกับเรื่อง
ทียังไม่เข้าใจ และร่วมกันสรุปเนื้อหาบทเรียน
่
สื่อและแหล่งการเรียนรู้ (มีจำานวนเท่ากับจำานวนนักเรียน)
- ใบความรู้ที่ 3 เรื่อง โครงสร้างเว็บฯ
- ชิ้นงานนำาเสนอบทเรียน (PowerPoint)
- ใบงานที่ 3
- แบบประเมินการทำางานเป็นกลุม ่
- เว็บไซต์ประกอบการเรียนรู้
- ตัวอย่างเว็บไซต์ที่ใช้เรียนรู้เกี่ยวกับด้านโครงสร้างเว็บฯ
- 12. กระบวนการวั ด และประเมิ น ผล (มี จำา นวนเท่ า กั บ จำา นวน
นักเรียน)
วิธีวัดผล
- ตรวจผลงานจากความตั้งใจขณะอยู่ภายในสังคมห้องเรียน
- การให้ความร่วมมือในการแสดงความคิดเห็น
- การทำา ใบงานที่ 3 และแบบประเมิ น ผลการทำา งานแบบ
กลุม่
เครื่องมือวัด
- แบบประเมินการทำางานแบบกลุ่ม
เกณฑ์การประเมิน
- คะแนนแบบทดสอบหลังเรียน
คะแนนการประเมินการทำางานแบบกลุ่ม 0 – 50
คะแนน ไม่ผ่าน
51 – 100 คะแนน ผ่าน
หัวหน้ากลุ่มสาระการงานอาชีพและเทคโนโลยี
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
- 14. ลงชื่อ............................................
( )
บันทึกผลหลังการสอน
1. ผลการสอน
1.1ด้านความรู้
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
..........................
1.2ด้ า น
ทักษะ.................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
..................................
1.3ด้ า น
คุ ณ ลั ก ษณะ.........................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
- 15. .........................................................................................
..........................................
2. ปัญหา / อุปสรรค
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
..........................
3. ข้อเสนอแนะ / แนวทางแก้ไข
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
.........................................................................................
..........................
ลงชื่อ……………………………………..ผู้สอน
(นางสาวอุไรวรรณ เทียนทอง)
ใบงานที่ 3
เรื่อง การออกแบบโครงสร้างเว็บ
ก ลุ่ ม ที่ ............จำา น ว น ส ม า ชิ ก ใ น ก ลุ่ ม ...............ค น
ชั้น...................วัน/เดือน/ปี............................
1. ชื่ อ .........................................................................
เลขที่ .......................
2. ชื่ อ .........................................................................
เลขที่ .......................
จุดประสงค์
- 16. 1. เพื่ อ ให้ ผู้ เ รี ย นเข้ า ใจความหมายของการออกแบบโครงสร้ า ง
เว็บไซต์จากจินตนาการของตนเอง
2. เกิดทักษะการคิดอย่างมีหลักการ
3. เกิดทักษะการทำางานเป็นกลุ่ม
คำาชี้แจง
1. แบ่งนักเรียนเป็นกลุ่ม กลุ่มละ 2 คน แล้วให้แต่ละกลุ่มทำา การ
ศึกษาค้นคว้าเกี่ยวกับรูปแบบการออกแบบโครงสร้างเว็บไซต์
ในอุดมคติของนักเรียน
2. ให้สมาชิกในกลุ่มตกลงแบ่งงานศึกษาโครงสร้างของเว็บไซต์ที่
ถูกต้อง
3. จากนั้นช่วยกันนำา ข้อมูลที่ค้นคว้า นำา มาสรุปโครงสร้างและร่วม
กันออกแบบโครงสร้างเว็บไซต์ในอุดมคติของตนเองให้ถูกต้อง
และสวยงานที่สุด
4. บันทึกข้อมูลลงในสื่อบันทึก
แบบประเมินการทำางาน
ระดับคุณภาพ
รายการประเมิน ต้ อ ง พอใช้ ดี ดีมาก
ปรับปรุง (2 (3 (4
(1 คะแนน) คะแนน) คะแนน)
คะแนน)
ก า ร ป ร ะ เ มิ น ก า ร
- 17. ทำางาน
1. ทำา งานสำา เร็ จ ตาม
เป้าหมาย
2. ทำา งานตามวิ ธี ก าร
และขั้นตอน
3. การออกแบบถูกต้อง
ครอบคลุมเนื้อหา
5. ความสวยงามและ
สัดส่วน
4. การสรุปความหมาย
การประเมินนิ สัยการ
ทำางาน
1. ความรับผิดชอบและ
เอาใจใส่
2. การทำา งานร่ว มกั บผู้
อื่น
3. ความซื่อสัตย์
4. ความอดทน
5. ความประหยัด
ผู้ ป ร ะ เ มิ น
..............................................................................
วั น ที่ ............เ ดื อ น
...................................พ.ศ. ...............
ใบความรู้ที่ 3 โครงสร้างเว็บไซต์
- 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. ของผู้เข้าชมได้อีกด้วย แต่ก็ไม่ควรให้มีโฆษณามากเกินไปและควร
จัดวางตำาเเหน่งให้เหมาะสมด้วย
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. เป็นสีของท้องฟ้าจึงช่วยให้เรารู้สึกปลอดโปร่งโล่งสบาย สี
ฟ้ า นั้ น เป็ น สี ที่ ดู แ ล้ ว สบายตาและนอกจากนี้ ยั ง รู้ สึ ก นุ่ ม นวลและสุ ข
สบายอีกด้วย
สีนำ้าเงิน
ให้ ค วามรู้ สึ ก ถึ ง ความจริ ง จั ง มั่ ง คงและจริ ง จั ง สงบและ
ปลอดภัย นอกจากนี้แล้วยังให้ ความรู้สึกหรูหรา มีระดับ มีราคาและ
ความเป็นชายอีกด้วย
สีเขียว
สีเขียวเป็นสีของต้นไม้ใบหญ้าทำาให้เรารู้สึกสดชื่นเย็นสบาย
เเละชวนให้นึกถึงความเป็นธรรมชาติ สีเขียวนั้นเป็นสีที่สบายตามาก
ทีสุดสีหนึ่ง
่
สีเเดง
ให้ความรู้สึกร้อนเเรง ความรุนแรงความมีพลังและความตื่น
เต้นสนุกสนานนอกจากนี้เเล้วเป็นสีมงคลของคนจีนอีกด้วย
สีเหลืองและสีส้ม
สีเหลืองนั้นให้อารมณ์สดใสเเละดึงดูดสายตาเเต่บางครั้งอาจ
ทำาให้รูสึกเหนื่อย ส่วนสีส้มนั้นทำาให้ความรู้สึกอบอุ่นกระตือรือร้นและ
นอกจากนี้แล้วยังดูทันสมัยอีกด้วย
สีเทา
ให้ความรู้สึกสุภาพสุขุม สงบ เเละมั่นคง และยังให้ความรู้สึก
หม่อนหมอง และโศกเศร้าอีกด้วย
สีขาว
ให้ความรู้สึกเรียบง่าย สะอาดสะอ้าน โล่งสบายและบริสุทธิ์
2.มีความเป็นเอกลักษณ์
เราสามารถออกเเบบเว็บไซต์ให้มีความเป็นเอกลักษณ์ย่าง
ง่าย ๆ ด้วยการเลือกใช้สีฟอนต์และภาพประกอบที่มีความคล้ายคลึง
กันทุก ๆ หน้าของเว็บไซ๖ เนื่องจากเว็บไซต์ที่มีเอกลักษณ์มักทำาให้
ผู้ใช้จดจำา ได้ง่าย นอกจากนี้ยังมีจุดสนใจอื่น ๆ เป็นส่วนประกอบอีก
เช่น โลโก้ สี เเละ ความคล้ายคลึงกัน
3. ต้องสามารถใช้งานได้อย่างเหมาะสม
หากเว็บไซต์ของคุณนั้นมีการใช้งานที่สลับซับซ้อนจนเกินไป
อาจมี ผ ลทำา ให้ ผู้ ที่ ม าใช้ บ ริ ก ารหงุ ด หงิ ด รำา คาญใจได้ แ ละทำา ให้ ไ ม่
อยากกลับมาใช้บริการที่เว็บไซต์ของเราอีกโดยเฉพาะหากเว็บไซต์
ของคุณเป็นเว็บไซต์เพื่อการบริการซื้อขายแล้วล่ะก็จะยิ่งเป็นผลเสีย
อย่างมากในการสั่งซื้อสินค้าและใช้บริการ
- 21. 4.สามารถแสดงผลได้อย่างรวดเร็ว
ในการออกแบบหน้าโฮมเพจนั้นนอกจากจะเน้นหน้าตาที่น่า
สนใจแล้ว การแสดงผลที่รวดเร็วก็จะทำาให้เว็บไซต์ไม่น่าเบื่อ ดังนั้น
การใช้ภาพหรือกราฟิกประกอบจึงควรคำา นึงถึงเรื่องระยะเวลาในการ
แสดงผลเว็บไซต์ ด้ว ย เนื่ องจากยิ่งมี ภาพประกอบมากเวลาในการ
แสดงผลก็จะยิ่งมากด้วยไปด้วย
นอกจากหัวข้อต่าง ๆ ที่กล่าวมาแล้วลักษณะของตัวอักษรที่
ใช้ประกอบก็เป็นส่วนสำาคัญอีกอย่างหนึ่งที่จะช่วยให้โฮมเพจของเรา
ดูทันสมัย น่าเชื่อถือหรือสนุกสนานมากยิ่งขึ้น เนื่องจากตัวหนังสือ
แต่ละลักษณะนั้นจะให้ความรู้สึกแตกต่างกันไป
ตัวหนังสือแบบ Serif (มีเชิง)
ให้ความรู้สึกของความคลาสสิค ดูเก่าแก่ และค่อนข้างเป็น
ทางการ
ตัวหนังสือแบบ San Serif (ไม่มีเชิง)
ให้ความรู้สึกเรียบง่าย มีความทันสมัยและนอกจากนี้แล้วยัง
ช่วยให้อ่านง่ายอีกด้วย
Script (ตัวอักษรแบบลายมือ)
ให้ความรู้สึกสนุกสนานเป็นกันเองและดูไม่เป็นทางการ มัก
ใช้กับคำาโฆษณาสั้น ๆ
ตัวอักษรแบบมีหัว
มักใช้กับบทความยาว ๆ เพราะช่วยให้อ่านง่าย เช่น หนังสือ
เรียน แต่ในขณะเดียวกันก็ดูโบราณ
ตัวอักษรแบบไม่มีหว ั
ตัวหนังสือแบบนี้ค่อนข้างที่จะอ่านยาก มักใช้กับข้อความสั้น
ๆ แต่ก็ให้ความรู้สึกทีทันสมัย ่
ทั้ ง หมดนี้ เ ป็ น เพี ย งพื้ น ฐานเล็ ก ๆ น้ อ ย ๆ ที่ จ ะช่ ว ยให้ คุ ณ
สามารถเข้ า ใจวิ ธี ก ารง่ า ย ๆ ในการออกแบบเพื่ อ ที่ จ ะนำา ไปใช้ กั บ
โฮมเพจของคุ ณ โดยการศึก ษาหาความรู้ใ นสิ่ งที่ตนเองสนใจเป็ น
พิเศษ การ
ดู ตั ว อย่ า งโฮมเพจอื่ น ๆ และการฝึ ก ฝนการใช้ ค วามคิ ด สร้ า งสรรค์
จากนั้นจึงนำามาประยุกต์ใช้ สิ่งเหล่านี้จะช่วยให้คุณสามารถออกแบบ
โฮมเพจได้อย่างสร้างสรรค์และสวยงามมากขึ้นนั่นเอง
ขั้นตอนสำาคัญในการสร้างโฮมเพจ
ในการสร้างโฮมเพจนั้นมีขั้นตอนที่สลับซับซ้อนพอสมควรแต่
ก็ไม่ยากจนเกินไป ผู้เขียนจึงขอเสนอแนวทางง่าย ๆ ที่จะทำาให้เรา
- 22. สามารถสร้างโฮมเพจได้ อย่ างเป็ นขั้ นตอนและมีความเข้าใจในการ
สร้างโฮมเพจมากขึ้นดังวิธีการต่อไปนี้
1.ขอพื้นที่โฮมเพจจาก Web Hosting
ในการขอพื้นที่โฮมเพจเราจะต้องเลือก Web Hosting เสีย
ก่อน โดยการเปรียบเทียบข้อดีข้อเสียต่าง ๆ รวมถึงขนาดของพื้นที่
ให้บริการด้วย จากนั้นจึงลงทะเบียนขอพื้นที่โฮมเพจ (ผู้อ่านควรคิด
ลั ก ษณะและชื่ อ โฮมเพจที่ ต้ อ งการสร้ า งไว้ ใ นใจเสี ย ก่ อ นเพื่ อ ให้
ลักษณะของโฮมเพจและชื่อที่ตั้งสัมพันธ์กัน)
2.กำาหนดลักษณะของโฮมเพจ
เมื่อเราขอพื้นที่โฮมเพจแล้ว ขั้นตอนต่อไปคือ การกำาหนด
ลักษณะโฮมเพจของเรา โดยในตอนนี้เราต้องคิดและตัดสินใจว่าเรา
าจะสร้างโฮมเพจเกี่ยวกับอะไรดี มีลักษณะโทนสีอะไร และใครจะ
เข้ามาเยี่ยมชมในโฮมเพจของเราบ้าง เมื่อตัดสินใจได้แล้วก็จะเข้าสู่
ขั้นตอนต่อไป
3.ออกแบบหน้าโฮมเพจด้วย Photoshop
ในขั้นตอนนี้เราจะต้องมีภาพของหน้าโฮมเพจลาง ๆ ไว้ในใจ
แล้วว่าจะมีลักษณะอย่างไร มีส่วนประกอบอะไรบ้าง จากนั้นเราจึงมา
เริ่มต้นออกแบบและสร้างส่วนประกอบต่าง ๆ ในหน้าโฮมเพจ ซึ่งผู้
เขียนจะได้อธิบายรายละเอียดเพิ่มเติมในตอนต่อไป
4.สร้างโฮมเพจให้สมบูรณ์ด้วย Dreamweaver 8
เมื่อเราได้ออกแบบส่วนประกอบต่าง ๆ ของหน้าโฮมเพจด้วย
โปรแกรม Photoshop เสร็จเรียบร้อยแล้ว ต่อไปเราจะเข้าสู่การสร้าง
โฮมเพจด้ ว ยโปรแกรม Dreamweaver 8 เพื่ อ ให้ ไ ด้ โ ฮมเพจที่
สมบูรณ์ซึ่งเราก็จะได้เรียนรู้ในตอนต่อไปเช่นกัน
5.อัพโหลดโฮมเพจขึ้นอินเตอร์เน็ต
เมื่ อ เราสร้ า งโฮมเพจเรี ย บร้ อ ยแล้ ว ก็ จ ะเข้ า สู่ ก ระบวนการ
อัพโหลดโฮมเพจเข้าสู่ Web Hosting ที่เราได้ขอพื้นที่โฮมเพจไว้
เรียบร้อยแล้วด้วยโปรแกรม Cute_FTP หรือโปรแกรมทีทาง เว็บไซต์ ่
มีให้บริการขึ้นโหลดข้อมูล เพียงเท่านี้เราก็จะสามารถสร้างโฮมเพจ
ได้อย่างสมบูรณ์แบบแล้ว
การสร้างและออกแบบเว็บ
กระบวนการในการสร้างและออกแบบเว็บจะมีกระบวนการพื้นฐานอยู่
ด้วยกัน 5 ขั้นตอนคือ
- 23. 1. การวางแผน (Planning) เป็ น ขั้ น ตอนที่ ผู้ ส ร้ า งเว็ บ จะต้ อ ง
รวบรวมข้อมูลที่ต้องการจะนำา
มาสร้างเว็บ กำา หนดวัตถุประสงค์และกลุ่มเป้าหมาย จากนั้นกำา หนด
ขอบเขตและความต้องการของเว็บว่าจะต้องมีอะไรบ้าง เช่น ขนาด
ของหน้าจอภาพ บราวเซอร์ที่จะใช้ ฯลฯ องค์ประกอบและเครื่องมือที่
จะต้อ งใช้ ต้องการมีกระดานข่าว ห้ องสนทนา ฯลฯ รวมถึ ง ขั้ น ตอน
และกระบวนการในการบำารุงรักษาอย่างเป็นระบบ
การวางแผนเบื้องต้นของการสร้างเว็บสำาหรับ Dreamweaver คือ
- กำาหนดพื้นที่จัดเก็บเว็บในเครื่องคอมพิวเตอร์
- กำาหนดพื้นที่ติดตั้งเว็บเมื่อสร้างเสร็จ
2. การออกแบบ (Design) เป็ น ขั้ น ตอนที่นำา ข้ อ มู ล และแผนที่
วางไว้ไปปฏิบัติ โดยการลง
มือปฏิบัติโดยจัดพิมพ์เนื้อหา กำาหนดการเชื่อมโยง และคุณลักษณะ
อื่นที่ต้องใช้ในเว็บ การออกแบบก็จะเน้นที่การจัดหน้าจอของเว็บให้
สอดคล้องกันและระมัดระวังปัญหาต่าง ๆ ในการออกแบบ
3. การพัฒนา (Development) เป็นขั้นตอนที่ต่อเนื่องจากการ
ออกแบบและการสร้าง โดย
เน้นไปที่การตกแต่งและเสริมเครื่องมือต่าง ๆ สำา หรั บเว็ บ เช่ น การ
กำาหนดสี ภาพ การใช้ Flash ช่วยให้เว็บเร้าความสนใจ และเพิ่มเติม
เทคนิคต่าง ๆ ของโปรแกรมสนับสนุนการสร้างเว็บ
4. การติ ด ตั้ ง (Publishing) เป็ น ขั้ น ตอนที่ จ ะนำา เอาเว็ บ ที่ ไ ด้
สร้างขึ้นเข้าไปติดตั้งในเว็บ
เซอร์เวอร์เพื่อให้แสดงผลได้ในระบบอินเทอร์เน็ต หรือจะเรียกว่า การ
อับโหลด (Up load) ซึ่งเป็นขั้นตอนที่จะต้องดำาเนินการอยู่เสมอเมื่อ
สร้างเว็บเสร็จ
5. การบำารุงรักษา (Maintenance) เป็นขั้นตอนประเมินผลและ
ติดตามผลการติดตั้งเว็บไซต์
ว่ามีข้อขัดข้องหรือต้องปรับปรุงเปลี่ยนแปลงเว็บเพิ่มเติมให้ทันสมัย
อยู่เสมอ อาจจะเรียกได้ว่าขั้นตอนการอับเดท (Up date)
การกำาหนดรูปแบบเว็บไซต์ (Web-site)
เว็บไซต์ (Web-site) หมายถึง เว็บที่ประกอบด้วยเว็บเพจหลาย
ๆ เว็บเพจมารวมกัน อยู่ภายในพื้นที่เดียวกันและเชื่อมโยงระหว่างกัน
ภายใต้โดเมนเนมเดียวกัน โดยมีโฮมเพจเป็นหน้าแรกของเว็บไซต์
ทำาหน้าที่เชื่อมโยงไปยังเว็บเพจต่าง ๆ
- 24. โฮมเพจ (Homepage) หมายถึ ง เว็ บ เพจที่ เ ป็ น หน้ า แรกของ
เว็บไซต์ ที่เข้าถึงได้ทันทีเมื่อเข้าสู่ระบบอินเทอร์เน็ตโดยการพิมพ์โด
เมนเนมหรือยูอาร์แอลซึ่งเป็นที่ติดตั้งของเว็บไซต์
เว็ บ เพจ (Web page) หมายถึ ง เอกสารที่ ส ร้ า งขึ้ น โดยในรู ป
แบบของ HTML หรือโปรแกรมการสร้างเว็บโดยเฉพาะ จะแสดงผล
ได้ เ ฉพาะโปรแกรมบราวเซอร์ และต้ อ งติ ด ตั้ ง ในเว็ บ เซอร์ เ วอร์ เ พื่ อ
เข้ า ไปอ่ า นข้ อ มู ล ได้ โ ดยผ่ า นระบบอิ น เทอร์ เ น็ ต เว็ บ เพจจะมี 2
ลักษณะใหญ่คือ
- เว็ บ เพจแบบหน้ า เดี ย ว (Single page) หรื อ แบบสั้ น (Short
page) หมายถึง เว็บเพจที่แสดงผลข้อมูลหรือเนื้อหาเพียงหน้าเดียว
มีขนาดเท่ากับหน้าจอคอมพิวเตอร์พอดี หรือมีแถบเลื่อนลงมาด้าน
ล่างสั้น ๆ หรือมีรูปแบบเป็นกรอบพอดีหน้าจอภาพ
- เว็ บ เพจแบบแถบเลื่ อ น (Scroll page) หรื อ แบบยาว (Long
page) หมายถึ ง เว็ บ เพจที่ แ สดงผลข้ อ มู ล หรื อ เนื้ อ หาเป็ น แนวยาว
จากด้านบนลงมายังด้านล่างของหน้าจอภาพ โดยมีแถบเลื่อนอยู่ด้าน
ข้างสำาหรับเลื่อนหน้าจอภาพ เพื่อดูข้อมูลที่แสดงผลหน้าจอภาพ
การออกแบบโครงสร้างเว็บ
สิ่งที่ต้องพิจารณาในการสร้างเว็บเพื่อการศึกษาคือ โครงสร้าง
หลักของเว็บ เนื่องจากการจัดการข้อมูลเพื่อการเรียนการสอนมีความ
แตกต่ า งกั น กลุ่ ม ผู้ เ รี ย นที่ แ ตกต่ า งและเนื้ อ หาของเว็ บ แตกต่ า งกั น
โ ค ร ง ส ร้ า ง ข อ ง เ ว็ บ ก็ จ ะ มี ผ ล ต่ อ ก า ร เ รี ย น ก า ร ส อ น เ ช่ น กั น
(McCormack and Jones, 1998)
โครงสร้างของเว็บโดยพื้นฐานจะมี 2 ลักษณะคือ
1. โครงสร้างเว็บแบบตื้น เป็นโครงสร้างเว็บในลักษณะที่มีการ
เชื่อมโยงจากหน้าแรกหรือหน้าที่หลักไปยังเนื้อหาโดยตรง โดยไม่มี
เว็บ เพจที่ เ ป็ น เนื้ อหาเชื่ อมโยงต่ อ ไปอี ก มากนั ก สามารถกลั บ มายั ง
หน้าแรกหรือหน้าหลักของของเว็บไซต์ได้ในทันที อาจจะมีการเชื่อม
โยงของเนื้อหาต่อไปอีกบ้างแต่ไม่ต่อเนื่องเป็นลำาดับลึกลงไปเหมือน
กับโครงสร้างของเว็บแบบลึก โครงสร้างลักษณะนี้จึงเป็นโครงสร้างที่
มีเนื้อหาแยกเป็นหน่วยย่อย ๆ หรือมีเนื้อหาเฉพาะเรื่องไม่เกี่ยวข้อง
กัน ทำาให้ไม่ต้องเชื่อมโยงเว็บเพจต่อไปเรื่อย ๆ เว็บแบบตื้นอาจจะมี
เนื้ อ หามากก็ ไ ด้ แต่ ไ ม่ เ ชื่ อ มโยงลึ ก ลงไปอี ก การออกแบบเว็ บ เพจ
อาจเป็นแบบหน้าเดียวสั้น ๆ หรือแบบแถบเลื่ อนยาวลงไปมากก็ไ ด้
เนื้อหาจบในหน้านั้นและไม่เชื่อมโยงไปอีก
- 25. โฮมเพจ
เว็บไซต์
เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา
เว็บไซต์ เว็บไซต์ เว็บไซต์ เว็บไซต์ เว็บไซต์
รูปแสดง ลักษณะโครงสร้างเว็บแบบตื้น
1. โครงสร้างเว็บแบบลึก เป็นโครงสร้างที่มีการเชื่อมโยงต่อเนื่องกัน
ไปในเนื้อหาเดียวกันโดยตลอดหลาย ๆ เว็บ เนื่องจากมีเนื้อหามาก
และเป็นลำาดับต่อเนื่อง ทำาให้โครงสร้างของเว็บต้องลงลึกไปเรื่อย ๆ
โฮมเพจ
เว็บไซต์
หัวเรื่อง หัวเรื่อง
เว็บไซต์ เว็บไซต์
เนื้อหา เนื้อหา เนื้อหา เนื้อหา
เว็บไซต์ เว็บไซต์ เว็บไซต์ เว็บไซต์
เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา
เว็บไซ เว็บไซ เว็บไซ เว็บไซ เว็บไซ เว็บไซ เว็บไซ เว็บไซ
- 26. สำา หรับการเลื่อนแถบเลื่อนด้านขวาของหน้าจอไม่ได้หมายความว่า
โครงสร้างเว็บนั้นจะเป็นแบบลึก เพราะการเลื่อนแถบเลื่อนด้านข้าง
ขวาของจอภาพเป็ น การออกแบบหน้ า จอเว็ บ ไม่ ใ ช่ โ ครงสร้ างภาพ
รวมของเว็ บ การเลื่ อ นแถบเลื่ อ นด้ า นขวาของหน้ า จอภาพเป็ น การ
ออกแบบเว็ บ แบบแถบเลื่ อ น เรี ย กได้ ว่ า การออกแบบหน้ า จอภาพ
แบบแถบเลื่อน เป็นแผ่นเดียวยาวจากด้านบนลงมาด้านล่าง แต่การ
ออก แบบโครงสร้างเว็บแบบลึก เป็นการออกแบบที่มีเว็บเพจหลาย ๆ
เว็บเพจต่อเนื่องจากเป็นจำานวนมาก
องค์ประกอบที่ควรมีในเว็บเพจ
องค์ประกอบทั่วไป
1. ชื่อของเว็บเพจ (Title) 2.ประวั ติแ ละรู ป ภาพผู้
จัดทำา (Profile/Picture)
3. การเชื่อมโยงภายในและภายนอกเว็บ (Links) 4. ก า ร
แสดงที่อยู่ของเว็บ : URL
5. วัน/เวลาที่สร้างเว็บ (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. ฝากข้อความ (Web
board)
3. กระดานข่าว (Bulletin Board) 4. กระทู้
5. แบบสำารวจ (Web poll) 6. จำา น ว น ผู้ เ ข้ า ช ม
(Counter)
7. ห้องสนทนา (Chat Room) 8. ส ถิ ติ ทุ ก
ประเภท (Web state)
9. เทคนิ ค พิ เ ศษด้ ว ยโปรแกรมสคริ ป ต์ (Java script, VBscript ,
cgi,asp,php)
- 27. 10. โปรแกรมพิเศษสนับสนุน (Download) 11. ส ไ ล ด์
สรุปบรรยาย (Presentation)
องค์ประกอบเฉพาะสำาหรับ E-learning
1. คำาอธิบายรายวิชา 2. วั ต ถุ ป ร ะ ส ง ค์
รายวิชา
3. คุณสมบัติของกลุ่มผู้เรียน 4. การลงทะเบียน
5. ตารางเรียน 6. ผู้บริหารหลักสูตร
7. กิจกรรม 8. ข่าวสาร/ประกาศ
9. ตารางสอน/ตารางเรียน 10. ป ฏิ ทิ น ก า ร
ศึกษา
11. แผนภูมิแสดงโครงสร้างรายวิชา 12. ส า ร บั ญ
เนื้อหา
13. เนื้อหารายละเอียด 14. แบบทดสอบ
ก่อนเรียน
15. แบบฝึกหัดระหว่างเรียน 16. สรุปสาระสำาคัญ
17. ข้อสอบท้ายการเรียน 18. โ ค ร ง ส ร้ า ง
หลักสูตร
19. บรรณานุกรม/รายการอ้างอิง 20. เ ว็ บ ไ ซ ต์ ที่
เกี่ยวข้อง
