ใบงานที่ 5

เรื่อง Layout หน้า Webpage

ระดับชั้นมัธยมศึกษาปี ที่ 3
รหัสวิชา ง 33101 รายวิชา การงานอาชีพและเทคโนโลยี 3 กลุ่ม
สาระการเรียนร้้การงานอาชีพและเทคโนโลยี

ชื่อ ด.ช.ต่ลธร สก่ล สอดศรี ชั้น

ม. 3/3 เลขที่ 4
ชื่อ ด.ญ.บ่ษราคัม สก่ล อินทามระ ชั้น
ม. 3/3 เลขที่ 21
ชื่อ ศกลวรรณ สก่ล ไพศาลอ่ดมศิลป์
ชั้นม. 3/3 เลขที่ 23
ชื่อ ด.ญ.จันทกานต์ สก่ล เตชะอนันตานนท์
ชั้นม. 3/3 เลขที4
่ 1
ชื่อ ด.ญ.วชิราภรณ์ สก่ล ร่จิภิญโญโสภานนท์
ชั้นม. 3/3 เลขที่ 49
ชื่อ ด.ญ.ศ่ภาพิชญ์ สก่ล ตัณฑเวชกิจ ชั้น
ม. 3/3 เลขที่ 51

ร.ร.บ.ด.๒ \ ใบความรู้ 1-1

ฉบับที่ 1 : 17 พฤษภาคม 2553

ws 08-3-03
คำาสัง่
1. ใหูนักเรียนเขูาเว็บไซต์ท่ีไดูจากการโหวตเสียงขูางมากในหูอง
แลูวทำาการวิเคราะห์ว่า เว็บไซต์
ดังกล่าวมีการจัดวาง Layout หนูาเว็บเพจอย่างไร แต่ละ
ส่วนจัดวางขูอม้ลอะไร และจัดวางขูอม้ล
อย่างไร
ตอบ http://www3.ipst.ac.th/index2.php

เว็บเพจถ้กจัดวางไวูชิดฝั ่ งหนูาเว็บดูานซูาย
1. ส่วนหัวของเนื้ อหา(page header) บนสุดมีโลโกูขอ
พระองค์ทรงพระเจริญ
และ พระราชดำารัสเป็ นตัวอักษรเคลื่อนไหว
2. ส่วนหัวของเนื้ อหา รองลงมา เป็ นโลโกูเว็บไซต์
สถาบันส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี
3. ส่วน Header menu ประกอบดูวย หนูาหลัก รู้จัก
สสวท. แนะนำาผู้บริหาร หน่วยงานสสวท. ข่าวและกิจกรรม แผนผัง
เว็บไซต์ และ ติดต่อเรา
4. Left column ประกอบดู ว ย menu ต่ า งๆ ไดู แ ก่
บริก ารของ สสวท . (ฐานขู อ ม้ ล สื่ อสาระน่ า รู้ /งานวิ จั ย นิ ตยสาร
สสวท. หู อ งสมุ ด ออนไลน์ ชุ ม ชนแลกเปลี่ ย น คลั ง ภาพกิ จ กรรม)
Web Link ของ สสวท.และ Check Email
5. Right column เป็ น Accessories menu ไดูแก่ เปลี่ยน
ภาษา คูนหาในเว็บ สสวท. บริการสมาชิกเว็บท่า หนั งสือเรียนและ
ค่้มือคร้ โครงการ/กิจกรรมที่น่าสนใจ รับสมัครงาน ขูอแนะนำา
ร.ร.บ.ด.๒ \ ใบความรู้ 1-1
ฉบับที่ 1 : 17 พฤษภาคม 2553

ws 08-3-03
 6. Center column ประกอบด้ วย เนื้ อหา(page body) มี
ข่ า วประชาสั ม พั น ธ์ หลั ก ส้ ต รแกนกลาง การศึ ก ษาขั้ นพื้ นฐาน
พุทธศักราช 2551 แนวทางการจัดการเรียนรู้วิทยาศาสตร์ปฐมวัย ฝึ ก
อบรม/สัมมนาวิชาการ บทความประชาสัมพันธ์ วีดีทัศน์รายการพลัง
คิด เรื่องทัว่ ไปที่น่าสนใจ
7. ส่ ว นทู า ยของหนู า (Page Footer) ประกอบดู ว ย เจู า ของ
เว็บไซต์,วิธีการติดต่อกับผู้ด้แลเว็บไซต์ คือ สถาบันส่งเสริมการสอน
วิทยาศาสตร์และเทคโนโลยี (สสวท.)
924 ถนนสุขุมวิท แขวงพระโขนง เขตคลองเตย กรุงเทพฯ 10110
โทร 0-2392-4021 โทรสาร 0-2381-0750

2. ให้ทำาการวาด Layout ที่ได้จากการวิเคราะห์ลงในใบงานให้อยุ้ใน

ร้ปของตาราง

ตาราง

Header 1.สุวนหัวของเนื้ อหา โลโก้ ขอพระองค์ทรงพระเจริญ

2.โลโก้ สสวท.

Header menu(เมน้ บาร์ต่างๆ)

Left Center Column Right Column
Column ส่วนของเนื้ อหา (page body) มี Accessories
ประกอบ menu

ร.ร.บ.ด.๒ \ ใบความรู้ 1-1

ฉบับที่ 1 : 17 พฤษภาคม 2553

ws 08-3-03
ดูวย
เมน้

Footer สุวนท้ายของหน้า ประกอบด้วย

เจูาของเว็บไซต์,วิธีการติดต่อกับผู้ด้แลเว็บไซต์

หนูา weppage และส่วนประกอบ จริงๆ

ร.ร.บ.ด.๒ \ ใบความรู้ 1-1

ฉบับที่ 1 : 17 พฤษภาคม 2553

ws 08-3-03
ร.ร.บ.ด.๒ \ ใบความรู้ 1-1
ฉบับที่ 1 : 17 พฤษภาคม 2553

ws 08-3-03
 3. ส่งใบงานทางเว็บไซต์ http://www.akcom7.wordpress.com

ร.ร.บ.ด.๒ \ ใบความรู้ 1-1

ฉบับที่ 1 : 17 พฤษภาคม 2553

ws 08-3-03