ขอต้อนรับเข้าสู่รายวิชา
การสร้างเว็บไซต์
รหัสวิชา ว 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"> <!-- ใส่ 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" width = "" height = "" alt="เข้าร่วมกลุ่ม" width="240" height="300"> <!-- ใส่ id ของรูปภาพ ที่นำมาจาก Google Drive -->
</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>



<meta name="viewport" content="width=device-width, initial-scale=1">

<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>

<center>

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

<!--<h4>Hover over the box below:</h4>-->


<div class="flip-box">

  <div class="flip-box-inner">

    <div class="flip-box-front"><br><br><br>

    

    </div>

    <div class="flip-box-back"><br><br><br>

      <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>

  </div>

</div>

</center>

</body>

</html>



4. การแทรกโค๊ดภาพสั่น อัตโนมัติ
<!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>

<!-- ถ้าเอา :hover ออกจะเป็นการเล่นอัตโนมัติ -->

<p>Hover over the image:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">


</body>

</html>



ลิงก์เว็บไซต์ของนักเรียน ปีการศึกษา 2565

แบบฟอร์มส่งลิงก์ เว็บไซต์ ม.3 (การตอบกลับ)

ลิงก์เว็บไซต์ของนักเรียน

แบบฟอร์มส่งลิงก์ เว็บไซต์ ม.3 (การตอบกลับ)

คลิปวิดีโอทบทวนเนื้อหา

การสร้างเว็บไซต์ 3/12 (2021-06-29 at 23:47 GMT-7)

การสร้างเว็บไซต์เบื้องต้นด้วย google sites (ตอนที่1) 30/06/64 

การสร้างเว็บไซต์ 3/12 ภาคเรียนที่ 1-64 (2021-07-06 at 23:58 GMT-7)

ลิงก์เรียนออนไลน์ 07/07/64
(ทบทวน การสร้างเว็บไซต์เบื้องต้นด้วย google sites ตอนที่2) 

การสร้างเว็บไซต์ 3/12 ภาคเรียนที่ 1-64 (2021-07-13 at 23:55 GMT-7)

ลิงก์เรียนออนไลน์ 14/07/64
(ทบทวน การสร้างเว็บไซต์เบื้องต้นด้วย google sites ตอนที่3) 

การสร้างเว็บไซต์ 3/12 ภาคเรียนที่ 1-64 (2021-07-20 at 23:58 GMT-7)

ลิงก์เรียนออนไลน์ 14/07/64
(ทบทวน การสร้างเว็บไซต์เบื้องต้นด้วย google sites ตอนที่ 4) การเพิ่มหน้าเว็บ การเผยแพร่เว็บและการส่งลิงก์เว็บไซต์

ตัวอย่างผลงานนักเรียนบางส่วน (บูรณาการร่วมกับรายวิชาสังคมศึกษา)

เด็กหญิงเปมิกา  แก้วสายทับ
เด็กชายณัฐวุฒิ  กระแจะจันทร์
ลิงก์เว็บไซต์ https://sites.google.com/skburana.ac.th/pamika-312

เด็กหญิงอวิกา  ปานมีศรี
เด็กชายวิชญานนท์  ปานมีศรี
ลิงก์เว็บไซต์
https://sites.google.com/skburana.ac.th/dew8awika36-312

เด็กหญิงนิชา  รุ่งเรือง

ลิงก์เว็บไซต์
https://sites.google.com/skburana.ac.th/nicha23312

เด็กหญิงชนิดา  ต้นสำโรง
เด็กหญิงภาสินี  จารุปราโมทย์
ลิงก์เว็บไซต์
https://sites.google.com/skburana.ac.th/m-a-y-312


เด็กหญิงกนกวรรณ  ยิ้มทะโชติ
เด็กหญิงชลธิชา  สุคนธ์น้อย
ลิงก์เว็บไซต์
https://sites.google.com/skburana.ac.th/kwang15andhunin

เด็กชายธรรมนูญ  เหมาะสิงห์

ลิงก์เว็บไซต์
https://sites.google.com/skburana.ac.th/thammanoon3

File Slides

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

ในการเผยแพร่เว็บไซต์ นักเรียนต้องกำหนดการเผยแพร่ดังนี้

2.1 ฉบับร่าง เปลี่ยนเป็น จำกัด 

2.2 ช่องเว็บไซต์ที่เผยแพร่ เปลี่ยนเป็น สาธารณะ