1202 106 วิชา การพัฒนาและการบริหารเว็บไซต์ (Web Development and Administration)

คำอธิบายรายวิชา
	หลักการออกแบบ การเผยแพร่เอกสารบนเว็บด้วยการใช้ภาษาเอชทีเอ็มแอล, ซีเอสเอส, จาวาสคริป และรูปแบบภาษาอื่น ตลอดจนการประยุกต์ใช้เครื่องมือในการสร้างเว็บ ประโยชน์และการประยุกต์ใช้งานเว็บ การจัดการ และการเผยแพร่สารสนเทศบนเว็บ การสร้างเครื่องมือช่วยสืบค้นบนเว็บ การคัดเลือก และประเมินคุณค่าเว็บไซต์	

	Principles of web design, document dissemination on the World Wide Web using HTML, CSS, JavaScript and various styling languages and tools, implications of web design and usability

ดาวน์โหลด มคอ.3 ที่นี่

เกณฑ์การประเมินผล

คะแนน
» การประเมินเข้าชั้นเรียนและจิตพิสัย		5%
» สอบกลางภาค					25 %
» สอบปลายภาค					25 %
» งานพัฒนาเว็บไซต์ตามที่มอบหมาย		40 %
» จิตพิสัย                                             10 %
หมายเหตุ : หากไม่ส่งโครงงานประจำรายจะไม่มีสิทธิ์สอบปลายภาค

การประเมิน
» คะแนน 80 – 100  		เกรด A
» คะแนน 75 – 79  		เกรด B+
» คะแนน 70 – 74  		เกรด B
» คะแนน 65 – 69  		เกรด C+
» คะแนน 60 – 64 		เกรด C
» คะแนน 55 – 59  		เกรด D+
» คะแนน 50 – 54  		เกรด D
» คะแนนต่ำกว่า 50 		เกรด F



หลวงพ่อสดพระอภิญญาสอนลูกหลานถึงหลักการของคนมีปัญญาและเป็นคนฉลาด

» หลวงพ่อสดพระอภิญญา : เพราะฉะนั้นการเรียนวิชาใด ๆ เราจะต้องใช้วิชานั้นได้นะ ใช้วิชานั้น ๆ ไม่ได้ เราก็จะเรียนทำไม เสียเวลาเปล่า ๆ ต้องเรียนวิชาไหนต้องใช้วิชานั้นได้นะ เอาล่ะพึ่งได้ เอาล่ะนั่นล่ะวิชานั้นใช้ได้ เหมือนกับเราเรียนวิชาวันนี้ เราจะต้องเรียนจริงทำจริง ต้องพึ่งวิชาที่เราเรียนนี่ล่ะให้ได้ ให้ศักดิ์สิทธิ์ทีเดียว ครูใช้ได้ยังไงเราจะใช้ได้เหมือนครู อย่างนี้เรียกว่าคนมีปัญญา เรียกว่าคนฉลาด

ปฏิทินการศึกษาระดับปริญญาตรี มหาวิทยาลัยมหาสารคาม

»  ดาวน์โหลดปฏิทินการศึกษาระดับปริญญาตรี 2567
»  ดาวน์โหลดปฏิทินการศึกษาระดับปริญญาตรี 2566

สัปดาห์ที่ 1 : แนะนำรายวิชาการพัฒนาและการบริหารเว็บไซต์ (Web Development and Administration)

» แนะนำรายวิชา 
» ภาษา HTML
» ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
» ส่วนประกอบของเว็บเพจ
» แนะนำการใช้งานเครื่องมือในการออกแบบเว็บไซต์
» แท็กพื้นฐาน ได้แก่ H, br, p, center, blockquote, pre และ hr
» แท็กพื้นฐานรูปแบบตัวอักษร ได้แก่ b, i, u, s, sub, sup, mark, font-face, font-size และ font-color
» แท็กพื้นฐานการใส่ image, table, link และ multimedia
» คำสั่งประเภท inline และ block
» กิจกรรม 1: การใช้งาน ftp ด้วยโปรแกรม winscp 
» กิจกรรม 2: การติดตั้งใช้งาน visual studio code
» กิจกรรม 3: การเขียนเอกสาร HTML ตามรูปแบบที่กำหนด
» กิจกรรม 4: การเขียนเอกสาร HTML การเปลี่ยนฟอนต์
» กิจกรรม 5: การเขียนเอกสาร HTML เพื่อแสดงแสดงรูปแบบเอกสารราชการที่กำหนด
» กิจกรรม 6: การเขียนภาษา HTML เพื่อสร้างตารางที่กำหนด
» กิจกรรม 7: การเขียนภาษา HTML เพื่อแสดงรายการ Unorder List และ Order List

สัปดาห์ที่ 2 : ภาษา CSS (Cascading Style Sheet)

» สไตล์ชีต คืออะไร ?
» การจัดตำแหน่งการแสดงผล ลักษณะตัวอักษร ระยะอักษร ระยะห่างบรรทัด เงาตัวอักษร ฟอนต์
» รหัสสี
» ฟอนต์ไอคอน ได้แก่ Font Awesome, Bootstrap Icon และ Google Icons
» การกำหนดสไตล์ให้กับลิงค์
» การกำหนดสไตล์ให้กับลีสต์
» การกำหนดสไตล์ให้ตาราง
» การกำหนดตำแหน่งแบบ static, Relative, Absolute , fixed และ sticky
» การวางเลย์เอาท์ด้วย float และ clear
» การจัดตำแหน่งแนวนอนและแนวตั้ง

สัปดาห์ที่ 3 :

- คำสั่งแสดงรายการ List
- คำสั่งจัดรูปแบบอักษร ได้แก่ b, I, u, s, sub, sup, mark, font-face, font-size, basefont-size และ font-color
- คำสั่งใส่รูปภาพ
- คำสั่งใส่ตาราง (table)
- คำสั่งการใส่ลิงค์ (Link)
- การแทรกไฟล์มัลติมีเดีย

สัปดาห์ที่ 4 : ภาษา CSS (Cascading Style Sheet)

- ความหมาย 
- ส่วนประกอบของสไตล์ชีต Selector และ Declaration
- การกำหนดสไตล์ให้กับตัวอักษร
- การกำหนดย่อหน้าและข้อความ
- การใส่สไตล์ชีตด้วย inline
- การใช้ฟอนต์ภาษาไทย 12 ชนิด
- ความแตกต่างระหว่าง inline และ block 
- คำสั่งประเภท inline และคำสั่งประเภท block
- รหัสสีของสไตล์ชีต
- การกำหนดสีพื้นหลัง
- การใส่ภาพพื้นหลัง
- การกำหนดตำแหน่งการแสดงผลพื้นหลัง
- การกำหนดขอบแบบต่าง ๆ
- การกำหนดสีขอบ
- การกำหนด margin
- การกำหนดระยะ padding
- การกำหนดความกว้างและสูง
- การวางเลย์เอาท์ (Box Model)
- การกำหนด outline

สัปดาห์ที่ 5 : ภาษา CSS (Cascading Style Sheet) (ต่อ)

ภาษา CSS (ต่อ)
- การจัดตำแหน่งการแสดงผล
- การกำหนดลักษณะตัวอักษร
- การกำหนดระยะอักษร
- การกำหนดระยะห่างบรรทัด
- การแสดงตัวอักษรสลับทิศ
- การใส่เงาให้ข้อความ
- การจัดการฟอนต์
- การใส่ไอคอนด้วย Font Awesome, Bootstrap Icon และ Google Icons
- การกำหนดสไตล์ให้ลิงค์
- การกำหนดสไตล์ให้รายการลีสต์
- การกำหนดสไตล์ให้ตาราง
- การกำหนดการแสดงหรือไม่แสดงผล
- การกำหนดความกว้างด้วย width และ max-width
- การกำหนดตำแหน่งแบบ static, relative, absolute , fixed และ sticky
- การควบคุมการล้นพื้นที่แสดงผล (overflow)
- การวางเลย์เอาท์ด้วย float และ clear properties
- การจัดตำแหน่งแนวตั้งและแนวนอน

สัปดาห์ที่ 6 : ภาษา CSS (Cascading Style Sheet) (ต่อ)

- การกำหนดความโปร่งแสง
- เมนู Navigation Bar
- เมนู Drop Down
- การแสดง Tooltip
- การแสดง Image Gallery
- การทำขอบมน
- การกำหนดลายกรอบด้วยภาพ
- การใส่พื้นหลังแบบปรับขนาด
- การกำหนดสีพื้นหลัง
- การไล่เฉดสี
- การใส่เงาให้ตัวอักษร
- การใส่เงาให้กล่องข้อความ
- การใส่กรอบและเงา
- การจัดตัวอักษรด้วย clipped , ellipsis และ word-wrap / break
- การทรานสฟอร์มสองมิติ ย้าย ย่อขยาย หมุน และเฉือน
- การใส่ Transition 
- การกำหนดระยะ space bar
- การจัดลำดับความลึกของการแสดงผลด้วย z-index
- การกำหนดสไตล์ให้ปุ่มกด
- การกำหนดเลขหน้า Pagination

สัปดาห์ที่ 7 : ภาษา XML (eXtension Markup Language)

- เอกสารภาษา XML
- การเข้าถึงอิลิเมนต์ด้วย XPath
- การใช้งาน XPath

สัปดาห์ที่ 8 : สอบกลางภาค

การสอบกลางภาคแบ่งเป็น 2 ส่วน 1) ทฤษฎี  2) ปฏิบัติ
» ทฤษฎี สอบตามตารางสอบ เนื้อหาสัปดาห์ที่ 1-6
» ปฏิบัติ ให้นิสิตพัฒนาเว็บไซต์เพื่อให้บริการข้อมูลข่าวสาร (web content) โดยภายในเว็บประกอบด้วย
  1) เมนูส่วนบน ประกอบด้วยรูปภาพส่วนบนของเว็บไซต์ เมนูต่าง ๆ ไอคอนต่าง ๆ
  2) เมนูด้านล่าง ประกอบด้วยชื่อผู้จัดทำเว็บไซต์และข้อมูลการติดต่อผู้พัฒนาเว็บไซต์
  3) เนื้อหาข้อมูล ประกอบด้วยรายละเอียดต่าง ๆ ที่เกี่ยวข้อง อาทิ ประวัติความเป็นมา รายละเอียดต่าง ๆ แผนที่และสถานที่ตั้ง รูปภาพแสดงรายละเอียด อย่างน้อย 5 หน้า
» การส่งงาน ให้นิสิตใช้พื้นที่ของ Google Site (sites.google.com)
หมายเหตุ : ให้นิสิตเพิ่มลิงค์อีก 1 ลิงค์สำหรับส่งการบ้านสัปดาห์ที่ 1-6 ลงใน google site ที่ส่งงานภาคปฏิบัติ

สัปดาห์ที่ 9 : การจัดรูปแบบเว็บด้วย Style Sheet (ต่อ)

» สัปดาห์ที่ 9 เป็นวันหยุดไม่มีการเรียนการสอน นำเนื้อหามาสอนในสัปดาห์นี้
» การวางเลย์เอาท์ 2 คอลัมน์
» การวางเลย์เอาท์ 3 คอลัมน์ 3 แถว
» การวางเลย์เอาท์ตามรูปแบบที่กำหนด
» การวางเลย์เอาท์ตามรูปแบบที่กำหนด

สัปดาห์ที่ 10 : การออกแบบเว็บด้วย Bootstrap

» การออกแบบเว็บด้วย Bootstrap
» Bootstrap 
» การประกาศขอใช้งาน Bootstrap
» ใบงาน 1 : ปุ่ม (Button)
»  ใบงาน 2 : Bootstrap Layout 2 คอลัมน์
» ใบงาน 3 : Bootstrap Layout 3 คอลัมน์
»  ใบงาน 4 : Bootstrap วางกริดซ้อนในเลย์เอาท์
» ใบงาน 5 : สกัดสไตล์ชีตของแท็ก pre จาก dsdi.msu.ac.th
» ใบงาน 6 : ตาราง
» ใบงาน 7 : GroupList
» ใบงาน 8 : ฟอร์มรับค่า

สัปดาห์ที่ 11 : การออกแบบเว็บด้วย Bootstrap และ Jquery

» ใบงาน 1 : การใช้งาน Code Highlighter (Button)
» ใบงาน 2 : การออกแบบเว็บตามเลย์เอาท์ที่กำหนด
» ใบงาน 3 : การใช้งาน Jquery เปลี่ยนภาพเมื่อกดปุ่ม
» ใบงาน 4 : การใช้งาน Jquery แสดงและซ่อนภาพ
» ใบงาน 5 : การปรับความสว่างภาพด้วย Jquery
» ใบงาน 6 : การปรับสีเงาด้วย Jquery
» ใบงาน 7 : การปรับความกว้างของภาพด้วย Jquery

สัปดาห์ที่ 12 : การออกแบบโครงสร้างเว็บร่วมกับภาษา PHP

» ใบงาน 1 : การใช้งานตัวแปร
» ใบงาน 2 : การรับค่าด้วยเมธอด GET
» ใบงาน 3 : การรับค่าด้วยเมธอด POST
» ใบงาน 4 : การวนรอบสร้างแม่สูตรคูณ
» ใบงาน 5 : การวางโครงเว็บเพจและรีเควส
» ใบงาน 6 : การใช้รีเควสร่วมกับการ include เอกสารเว็บ
» ใบงาน 7 : การใส่ลิงค์ให้กับเว็บเพจและแสดงเนื้อหาภายในเลย์เอาท์หลัก

สัปดาห์ที่ 13 : การออกแบบโครงสร้างเว็บร่วมกับภาษา PHP (ต่อ)

» ใบงาน 1 : การอ่านไฟล์ด้วยคำสั่ง file_get_contents()
» ใบงาน 2 : การเขียนไฟล์ด้วยคำสั่ง file_put_contents()
» ใบงาน 3 : การบันทึกตัวแปรคุ๊กกี้
» ใบงาน 4 : การอ่านค่าตัวแปรคุ๊กกี้
» ใบงาน 5 : การเก็บข้อมูลลงในตัวแปร Session 
» ใบงาน 6 : การอ่านข้อมูลจากตัวแปร Session
» ใบงาน 7 : การลบตัวแปร Session

สัปดาห์ที่ 14-15 : การออกแบบเว็บคอนเทนส์

» ให้นิสิตทำเว็บคอนเทนส์ โดยประกอบด้วย
1. ส่วนหัว ดูตัวอย่างเว็บ 202.28.34.200:8083
2. มีส่วนการสไลด์ ที่หน้าเว็บ
3. เมนูด้านบนและไอคอน
4. เมื่อคลิ๊กเข้าไปแต่ละเมนู ให้มีรายละเอียดเนื้อหาพอสังเขป
5. ให้ใส่ภาพนิ่ง
6. ให้ใส่วีดีโอ ซึ่งสามารถฝังลิงค์จาก Youtube ได้
7. ใช้ฟอนต์ True Type Font ลงในเว็บคอนเทนส์ที่สร้างขึ้นได้

สัปดาห์ที่ 16 : สอบปลายภาค

» สอบปลายภาคแบ่งเป็น 2 ส่วน 1) ภาคทฤษฎี 2) ภาคปฏิบัติ
» ข้อสอบภาคปฏิบัติ ให้นิสิตสร้างเว็บคอนเทนส์ โดยใช้เทมเพลต www-template2.zip โดยภายในเว็บไซต์ที่สร้างขึ้นจะต้องประกอบด้วยรายละเอียดดังนี้
1. ส่วนหัว ดูตัวอย่างเว็บ https://dsdi.msu.ac.th
2. มีส่วนการสไลด์ ที่หน้าเว็บ
3. เมนูด้านบนและไอคอน
4. เมื่อคลิ๊กเข้าไปแต่ละเมนู ให้มีรายละเอียดเนื้อหาพอสังเขป
5. ให้ใส่ภาพนิ่ง
6. ให้ใส่วีดีโอ ซึ่งสามารถฝังลิงค์จาก Youtube ได้
7. ใช้ฟอนต์ True Type Font ลงในเว็บคอนเทนส์ที่สร้างขึ้นได้
8. ให้ใส่แผนที่ลงในเว็บไซต์

การส่งงาน ให้นิสิตทำการ zip ไฟล์ทั้งหมดของเว็บไซต์ จากนั้น ตั้งชื่อไฟล์ด้วยรหัสนิสิต และอัพขึ้น google classroom

แหล่งข้อมูลเพิ่มเติม

» ตัวอย่างเว็บการเรียนออนไลน์
» https://www.skilllane.com/
» https://mooc.chula.ac.th/
» https://www.skooldio.com/
» https://edumall.co.th/
» https://www.starfishlabz.com/