ขอต้อนรับเข้าสู่รายวิชา
การสร้างเว็บไซต์
รหัสวิชา ว 23215 ระดับชั้น ม. 3

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

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

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

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

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

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

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

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

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

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

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

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

รายชื่อนักเรียน / คะแนน

ว23215 ม.3 การสร้างเว็บไซต์ คะแนน 1-66

รายวิชาการสร้างเว็บไซต์ ว23215 ระดับชั้น ม. 3 ภาคเรียนที่ 1/2564

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

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

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

- การสมัครใช้งานเว็บไซต์ CANVA

หน่วยที่ 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">

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" > 
<img src="https://docs.google.com/uc?id=10q7ASAjEYMpJg69lebb-Wv6QfMpPa6Vm" width = "" height = "" alt="เข้าร่วมกลุ่ม" width="240" height="300"> 
</a>
</body>
</html>

4. การแทรกโค๊ดภาพพลิก คลิก

<!DOCTYPE html>

<html>

<head>

<style>

<!--

A:link {text-decoration: none; Color: white}

A:visited {text-decoration: none; Color: white}

A:hover {text-decoration: none; font-weight: underline; Color: #black}

// -->

</style>

<style>

body {

font-family: Arial, Helvetica, sans-serif;

}

.flip-box {

background-color: transparent;

width: 300px;

height: 200px;

border: 1px solid #f1f1f1;

perspective: 1000px;

}

.flip-box-inner {

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: transform 0.8s;

transform-style: preserve-3d;

}

.flip-box:hover .flip-box-inner {

transform: rotateX(180deg);

}

.flip-box-front, .flip-box-back {

position: absolute;

width: 100%;

height: 100%;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.flip-box-front {

background-image: url('https://docs.google.com/uc?id=1pqeRDciobXL_DnF8TeaiJa0_aXTXXmuB');

background-repeat: no-repeat;

background-color: #bbb;

color: white;

}

.flip-box-back {

background-color: #3300FF;

color: white;

transform: rotateX(180deg);

}

</style>

</head>

<body>

<h3>รหัสวิชา ว23215 การสร้างเว็บไซต์ ม.3</h3>

</div>

<a href="https://kruwoot.skburana.ac.th/course/%E0%B8%A723215-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95-%E0%B8%A1-3-%E0%B8%9B-64"><H2>คลิกเข้าสู่บทเรียน</H2></a>

</div>

</center>

</body>

</html>

4. การแทรกโค๊ดภาพสั่น อัตโนมัติ
<!DOCTYPE html>

<html>

<head>

<style>

img:hover

{

animation: shake 0.5s;

animation-iteration-count: infinite;