ขอต้อนรับเข้าสู่รายวิชา การสร้างเว็บไซต์ 

รหัสวิชา ว 30239 ระดับชั้น ม. 5

ผู้เรียนสามารถดูประมวลรายวิชา และโครงสร้างเนื้อหาได้จากส่วนล่าง 

วิธีการเรียน

นักเรียนสามารถเรียนรู้ด้วยตนเองโดยการคลิกปุ่ม รายวิชา เพื่อดูสื่อ VDO เอกสาร และทำแบบทดสอบ/แบบฝึกหัด

เกณฑ์การวัดผล

1) ผู้เรียนเข้าเรียนเนื้อหาครบทุก Unit

2) แบบตรวจสอบตนเอง (Checklist)

3) แบบฝึกหัดหลังชั่วโมงเรียนรู้

4) แบบทดสอบหลังเรียน

การประกาศคะแนนเก็บ

หลังจากที่ท่านเรียนครบทุกบทแล้ว คลิกที่แถบเมนู Course 

 หากคะแนนท่านผ่านเกณฑ์ 50% ขึ้นไปแล้ว จะมีผลการเรียนผ่านในแต่ละใบงาน

ช่องทางติดต่อทีมผู้สอน : wutthikrai@skburana.ac.th

คะแนน ว30239 ม.5 การสร้างเว็บไซต์ ภาคเรียนที่ 1-66

รายวิชาการสร้างเว็บไซต์ ว30239  ระดับชั้น ม. 5

หลักสูตร การพัฒนาเว็บไซต์ด้วย Google Sites (Google Sites  Development Course with Google Sites)

-- ทำความเข้าใจรายวิชาก่อนเรียน --

- การใช้งานอีเมล์โรงเรียน

- สมัครใช้งานเว็บไซต์ CANVA  https://www.canva.com/ (ด้วยบัญชีอีเมล์ของโรงเรียน)

หน่วยที่ 1 รู้จัก Google Sites

หน่วยที่ 2 การออกแบบโครงสร้างเว็บไซต์และการสร้างเว็บไซต์

หน่วยที่ 3 การจัดการหน้าเว็บไซต์และเมนูเว็บไซต์

หน่วยที่ 4 การแทรกเนื้อหาในหน้าเว็บไซต์

หน่วยที่ 5 การแทรกเนื้อหาจากแอปพลิเคชั่นของ Google

หน่วยที่ 6 การเผยแพร่เว็บไซต์

แบบทดสอบวัดผลประมวลผลความรู้

แบบสำรวจหลังเรียน

ภาระงาน (พัฒนาเว็บไซต์ด้วย Google Sites จำนวน 1 เว็บ)

ภาระงานที่ 1 การออกแบบโครงสร้างเว็บไซต์ (ส่งใน Google Classroom)  (10 คะแนน)

ภาระงานที่ 2 การออกแบบแบนเนอร์ด้วย CANVA  (10 คะแนน)

ภาระงานที่ 3 การออกแบบปุ่มด้วย CANVA  (10 คะแนน)

ภาระงานที่ 4 การแทรกเนื้อหาในเว็บไซต์ (รูปภาพ,วิดีโอ,แผนที่,ฯลฯ)  (10 คะแนน)

ภาระงานที่ 5 โปรเจ็กเว็บไซต์โดยรวมข้อมูลจาก ภาระงานที่ 1 ถึง 4  (20 คะแนน)

สอบกลางภาค 20 คะแนน

สอบปลายภาค 20 คะแนน

ตกแต่งเว็บ ใส่ลูกเล่นเพิ่มเติม

1. การแทรกโค๊ด ตัวอักษรวิ่ง คลิกลิงก์
ตัวอย่างโค๊ดนำไปใช้งานได้เลย

<marquee bgcolor="#A9E0B8" direction="left" scrollamount="5" behavior ="alternate">

<font color ="red" size = "5">

ยินดีต้อนรับเข้าสู่เว็บไซต์ของฉัน

</font>     

</marquee>


2. การแทรกโค๊ด รูปภาพวิ่ง
<img src = "https://docs.google.com/uc?id=148cIJFx3XrKZ_CSv4R197LNbZp12fB1B" width = "50" height = "50"> <!-- ใส่ id ของรูปภาพ ที่นำมาจาก Google Drive -->

3. การแทรกโค๊ดภาพสั่น
 <!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img:hover {

  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

}

</style>
</head>
<body>
<a href ="https://www.facebook.com/groups/2491891937740722" > <!-- ใส่ url ของเว็บไซต์ปลายทาง -->
<img src="https://docs.google.com/uc?id=10q7ASAjEYMpJg69lebb-Wv6QfMpPa6Vm" alt="เข้าร่วมกลุ่ม" width="240" height="300"> <!-- ใส่ id ของรูปภาพ ที่นำมาจาก Google Drive --
</a>
</body>
</html>


ลิงก์เข้าร่วม Classroom

ส่งลิงก์เว็บไซต์ 

File Slides

พื้นฐานการสร้างเว็บไซต์ ม.5.pdf
02.โครงสร้างของเว็บไซต์.pdf