รายวิชาการสร้างเว็บไซต์ ว30239 ระดับชั้น ม.5
นักเรียนสามารถดูประมวลรายวิชา และโครงสร้างเนื้อหาได้จากส่วนล่าง
วิธีการเรียน
นักเรียนสามารถเรียนรู้ด้วยตนเองโดยการคลิกปุ่ม รายวิชา เพื่อดูสื่อ VDO เอกสาร และทำแบบทดสอบ/แบบฝึกหัด
นักเรียนสามารถดูประมวลรายวิชา และโครงสร้างเนื้อหาได้จากส่วนล่าง
วิธีการเรียน
นักเรียนสามารถเรียนรู้ด้วยตนเองโดยการคลิกปุ่ม รายวิชา เพื่อดูสื่อ VDO เอกสาร และทำแบบทดสอบ/แบบฝึกหัด
เกณฑ์การวัดผล
1) ผู้เรียนเข้าเรียนเนื้อหาครบทุก Unit
2) แบบตรวจสอบตนเอง (Checklist)
3) แบบฝึกหัดหลังชั่วโมงเรียนรู้
4) แบบทดสอบหลังเรียน
การประกาศคะแนนเก็บ
หลังจากที่ท่านเรียนครบทุกบทแล้ว คลิกที่แถบเมนู Course
หากคะแนนท่านผ่านเกณฑ์ 50% ขึ้นไปแล้ว จะมีผลการเรียนผ่านในแต่ละใบงาน
ช่องทางติดต่อทีมผู้สอน : wutthikrai@skburana.ac.th
รายวิชาการสร้างเว็บไซต์ ว30239 ระดับชั้น ม. 5
หลักสูตรรายวิชาการสร้างเว็บไซต์ ว30239
คำอธิบายรายวิชา
ศึกษาและฝึกทักษะเกี่ยวกับการสร้างเว็บเพจด้วยโปรแกรม Adobe Dreamweaver ในเรื่อง หน้าตาของหน้าต่างออกแบบเว็บเพจ ส่วนประกอบของหน้าจอหลัก การสร้าง Site ก าหนดคุณสมบัติของ Site สร้างStatic Page กำหนดคุณสมบัติของหน้าเพจ ตั้งชื่อเพจ จัดรูปแบบตัวอักษร การสร้างตาราง การใส่รูปภาพ ปรับรูปพื้นหลัง การสร้างเลเยอร์ การสร้างลิงค์ การใช้มัลติมีเดีย และตรวจหน้าเพจบน Browser ทดสอบการสร้างเว็บเพจอย่างง่าย โดยใช้กระบวนการทางเทคโนโลยีสารสนเทศ กระบวนการสร้างความคิดรวบยอด กระบวนการฝึกปฏิบัติ กระบวนการออกแบบ กระบวนการจัดการ กระบวนการแก้ปัญหา กระบวนการคิดวิเคราะห์ เพื่อให้ผู้เรียนมีนิสัยรักการทำงาน รักการค้นคว้า มีความรับผิดชอบ รู้จักรักษาทรัพย์สินส่วนรวม ทำงานร่วมกับผู้อื่นได้อย่างมีความสุขมีสมาธิในการทำงานสามารถนำทักษะปฏิบัติงานไปใช้ในชีวิตประจำวันได้
ผลการเรียนรู้
๑ . เข้าใจกระบวนการและโครงสร้างการทำงานของเว็บเบื้องต้น
๒ . เข้าใจโครงสร้างและไวยากรณ์ของโปรแกรมภาษาหรือกระบวนการ การใช้เครื่องมือการสร้างเว็บเพจ
๓ . ออกแบบและกำหนดส่วนประกอบที่จำเป็นของเว็บเพจได้ถูกต้องและเหมาะสม
๔ . มีทักษะในการใช้โปรแกรมสำเร็จรูป สำหรับสร้างเว็บเพจ
๕ . ปฏิบัติงานอย่างมีคุณธรรม จริยธรรม มีค่านิยมที่พึงประสงค์ นำหลักปรัชญาเศรษฐกิจพอเพียงและสินค้าตามมาตรฐานอุตสาหกรรม และนำมาประยุกต์ใช้ในการพัฒนาโครงสร้างได้
หน่วยการเรียนรู้ / โครงสร้างรายวิชา
หน่วยการเรียนรู้ การสร้างเว็บไซต์ Dreamweaver
1. รู้จักกับโปรแกรม Dreamweaver
2. เริ่มต้นการใช้งานโปรแกรม
3. ส่วนประกอบของ Dreamweaver
4. การสร้างเว็บไซตืเบื้องต้น
- การกำหนดโครงสร้างของไฟล์และโฟลเดอร์ในเว็บไซต์
- การสร้างและจัดการไซต์
- การจัดการเว็บเพจ
5. การสร้างข้อความ
- เริ่มต้นใส่ข้อความ
- การตกแต่งและจัดรูปแบบให้ข้อความ
- การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ
- การนำเอกสารอื่นมาใช้ร่วมกับ Dreamweaver
6. การตกแต่งด้วยภาพ
- การเตรียมรูปภาพสำหรับใช้ในเว็บเพจ
- การใส่รูปภาพลงในเว็บเพจ
- การกำหนดคุณสมบัติของรูปภาพ
- การตกแต่งภาพพื้นหลังหรือการแสดงภาพเป็นพื้นหลัง
7. การใส่ตาราง
- โครงสร้างและส่วนประกอบของตาราง
- การใส่ตารางลงในเว็บเพจ
- การปรับแต่งคุณสมบัติของตาราง
- การแทรกข้อความและรูปภาพลงในตาราง
8. การเชื่อมโยงข้อมูลในเว็บ
- การเชื่อมโยงภายในหน้าเว็บเพจ
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงภายนอกเว็บไซต์
- การเชื่อมโยงไปยังอีเมล
- การเชื่อมโยงเพื่อดาวน์โหลด
ที่มา: http://www.geog.pn.psu.ac.th/ComGeo60/DreamCS6%E0%B8%A1%E0%B8%B1%E0%B8%98%E0%B8%A2%E0%B8%A1.pdf
โครงสร้างรายวิชา : https://drive.google.com/file/d/1kwjmmiQ0QirREWXcxayGnmNcEI7VYq-4/view
ลงทะเบียนเรียน
แบบทดสอบก่อนเรียน - หลังเรียน
ภาระงาน / ใบงาน
ภาระงานที่ 1 การสร้าง Sites
ภาระงานที่ 2 การออกแบบตาราง
ภาระงานที่ 3 การแทรกเนื้อหาในเว็บไซต์ (รูปภาพ, Banner, Footer, Button)
ภาระงานที่ 4 การเพิ่มหน้าเว็บ, การใส่ภาพสไลด์, แกลอรี่
ภาระงานที่ 5 การเพิ่มวิดีโอ, เสียง
ภาระงานที่ 6 การสร้างการเชื่อมโยงภายในเว็บเพจ ภายในเว็บไซต์ และระหว่างเว็บ (Link, Aunchor)
ภาระงานที่ 7 การเพิ่มหน้าเว็บ,
ภาระงานที่ 8 โปรเจ็กเว็บไซต์โดยรวมข้อมูลจาก ภาระงานที่ 1 ถึง 7 (20 คะแนน)
สอบกลางภาค 20 คะแนน
สอบปลายภาค 20 คะแนน
ใบความรู้ / สไลด์
พื้นฐานการสร้างเว็บไซต์ ม.5.pdf02.โครงสร้างของเว็บไซต์.pdfสื่อ วิดีโอ ออนไลน์
ความรู้เพิ่มเติม
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>