แผนการสอนเว็บแผนการสอนสำหรับผู้เริ่มต้น

หัวข้อการสอน

หน้าเว็บ

เกรดที่เกี่ยวข้อง

ปีที่สอง

เวลาเรียนสอน

1 บทเรียน

การวิเคราะห์ตำราเรียน

โฟกัส: วิธีสร้างหน้าเว็บแบบคงที่และหน้าเว็บแบบไดนามิกและกระบวนการทำงานของพวกเขา

ความยาก: กระบวนการทำงานของหน้าเว็บแบบไดนามิก

วัตถุประสงค์การเรียนรู้

ทำความเข้าใจแนวคิดพื้นฐานของหน้าเว็บหน้าแรกเว็บไซต์และความสัมพันธ์เข้าใจแนวคิดของหน้าเว็บคงที่และหน้าเว็บแบบไดนามิกทำความเข้าใจเทคโนโลยีของหน้าเว็บคงที่และหน้าเว็บแบบไดนามิกและอธิบายกระบวนการทำงาน

ทรัพยากรและสิ่งแวดล้อมที่จำเป็น

ทรัพยากรดิจิทัล

1. เครื่องมือค้นหา (www.google.com, www.baidu.com)

2. หน้าเว็บสาธิตหลายหน้า (หน้าเว็บคงที่และหน้าเว็บแบบไดนามิก)

ทรัพยากรทั่วไป

1. บทที่ 5 ส่วนที่ 1 ของตำราเรียน "แอปพลิเคชันเทคโนโลยีเครือข่าย"; ซีดีรองรับ

2. สื่อการสอนที่สนับสนุนหนังสือของครู

3. รายการงานการเรียนรู้ "หน้าเว็บ"

สภาพแวดล้อมการสนับสนุนการสอน

ห้องเรียนเครือข่ายคอมพิวเตอร์ซอฟต์แวร์ห้องเรียนเครือข่ายมัลติมีเดียหรือโปรเจ็กเตอร์แอลซีดี

การออกแบบการสอน

คำถาม

วัตถุประสงค์

ประเด็นสำคัญ/ปัญหา/ประเด็นสำคัญ

การออกแบบปัญหาการแนะนำการสอน

เว็บไซต์คืออะไร? หน้าเว็บคืออะไร? โฮมเพจคืออะไร?

ทำความเข้าใจความหมายของเว็บไซต์หน้าเว็บและหน้าแรก

เว็บไซต์ประกอบด้วยอะไร?

ทำความเข้าใจกับองค์ประกอบต่าง ๆ ของเว็บไซต์

โลโก้เว็บไซต์พื้นที่ส่วนหัวพื้นที่แนะนำร้อน

หน้าเว็บที่เรามักจะเห็นบนอินเทอร์เน็ตคืออะไร?

ให้นักเรียนเข้าใจรหัสองค์ประกอบของหน้าเว็บคงที่ - HTML

ทำความเข้าใจโครงสร้างและแท็กพื้นฐานของภาษา HTML

หน้าเว็บคงที่ปรากฏในเบราว์เซอร์อย่างไร

เป็นหลักกระบวนการทำงานของหน้าเว็บคงที่ในเบราว์เซอร์

เบราว์เซอร์ตีความรหัส HTML

เว็บเพจแบบอินเทอร์แอคทีฟทำมาจากอะไร?

ให้นักเรียนเข้าใจองค์ประกอบของหน้าเว็บคงที่

เข้าใจภาษาสคริปต์

เว็บเพจแบบไดนามิกจะปรากฏในเบราว์เซอร์ภายใต้การโต้ตอบของผู้ใช้อย่างไร

เป็นหลักกระบวนการทำงานของหน้าเว็บแบบไดนามิกในเบราว์เซอร์

กระบวนการดำเนินการของหน้าเว็บแบบไดนามิก

กระบวนการสอน

1. บทเรียนใหม่บทเรียน:

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

วันนี้ฉันจะหารือเกี่ยวกับปัญหาเกี่ยวกับหน้าเว็บ

2. เนื้อหาการสอน:

ค้นหาเว็บไซต์ทั่วไปบางแห่งผ่านเครื่องมือค้นหาเพื่อแสดงให้นักเรียนเห็น

1. แนวคิดของเว็บไซต์หน้าเว็บหน้าแรกและความสัมพันธ์ระหว่างสาม

อินเทอร์เน็ตระหว่างประเทศที่ผู้คนเข้าชมในวันนี้ประกอบด้วยเว็บไซต์และเว็บไซต์ประกอบด้วยหน้าเว็บเฉพาะ โฮมเพจเทียบเท่ากับหน้าเริ่มต้นของเว็บไซต์และมีบทบาทนำทางและเชื่อมต่อ โดยทั่วไปผู้ใช้สามารถเข้าถึงหน้าเว็บส่วนใหญ่ของเว็บไซต์ผ่านหน้าแรก

คำถาม: เว็บไซต์คืออะไร? หน้าเว็บคืออะไร? โฮมเพจคืออะไร?

กิจกรรม: ครูอธิบายความหมายของเว็บไซต์หน้าเว็บและหน้าแรกและความสัมพันธ์ระหว่างทั้งสาม

2. โครงสร้างหน้าเว็บ

โครงสร้างหน้าของเว็บไซต์ทั่วไปประกอบด้วยชื่อหน้าโลโก้เว็บไซต์ (โลโก้), พื้นที่ส่วนหัว, แถบนำทาง, พื้นที่เข้าสู่ระบบ, พื้นที่ค้นหา, พื้นที่คำแนะนำฮอตสปอต, พื้นที่เนื้อหาหลัก, พื้นที่ส่วนท้าย ฯลฯ

3. แนวคิดของหน้าเว็บคงที่

หน้าเว็บคงที่คือหน้าเว็บที่เก็บไว้ในรูปแบบของไฟล์บนเซิร์ฟเวอร์และส่งไปยังลูกค้าในรูปแบบเดียวกัน

หน้าเว็บคงที่เป็นไฟล์ที่เขียนด้วยภาษามาร์กอัปไฮเปอร์เท็กซ์

คำถาม: หน้าเว็บที่เรามักจะเห็นบนอินเทอร์เน็ตคืออะไร?

กิจกรรม: ครูอธิบายองค์ประกอบของหน้าเว็บคงที่และลักษณะของภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML)

สำรวจ: นักเรียนทำงานดูไฟล์ต้นฉบับของหน้าเว็บเมื่อเรียกดูหน้าเว็บ

4. หลักการของหน้าเว็บคงที่แสดงในเบราว์เซอร์

หน้าเว็บคงที่จะถูกส่งไปยังไคลเอนต์ในรูปแบบเดียวกันจากเซิร์ฟเวอร์ แต่หลังจากไฟล์นี้มาถึงเบราว์เซอร์เบราว์เซอร์จะต้องค้นหารหัส HTML ในไฟล์แล้วแสดงรหัส HTML เฉพาะในรูปแบบเฉพาะเพื่อสร้างเว็บเพจที่ผู้ใช้เห็น

คำถาม: หน้าเว็บคงที่ปรากฏในเบราว์เซอร์อย่างไร

กิจกรรม: ครูอธิบายกระบวนการตีความของเบราว์เซอร์และผลกระทบของภาษามาร์กอัปไฮเปอร์เท็กซ์

5. แนวคิดของหน้าเว็บแบบไดนามิก

หน้าเว็บแบบไดนามิกอ้างถึงหน้าเว็บที่สร้างขึ้นโดยอัตโนมัติโดยระบบคอมพิวเตอร์ในระหว่างการท่องเว็บของผู้ใช้ พวกเขามักจะใช้เพื่อแสดงข้อมูลแบบเรียลไทม์หรือแสดงเนื้อหาเฉพาะตามการโต้ตอบของผู้ใช้

คุณสมบัติของหน้าเว็บแบบไดนามิก: การอัพเดทแบบโต้ตอบอัตโนมัติเปลี่ยนจากสถานที่เป็นครั้งคราว

รูปแบบทั่วไปของหน้าเว็บแบบไดนามิก: เคาน์เตอร์, ห้องสนทนา, พื้นที่สนทนา, BBS, บันทึกศิษย์เก่า ฯลฯ

สองสถานการณ์ทั่วไปสำหรับการสร้างหน้าเว็บแบบไดนามิก: หน้าเว็บแบบไดนามิกประกอบด้วยวิธีไคลเอนต์บริสุทธิ์และเว็บเพจแบบไดนามิกที่ประกอบด้วยโหมดเซิร์ฟเวอร์ไคลเอนต์

คำถาม: เว็บเพจแบบอินเทอร์แอคทีฟทำมาจากอะไร?

กิจกรรม: ครูอธิบายสองสถานการณ์ทั่วไปของการสร้างหน้าเว็บแบบไดนามิกองค์ประกอบและลักษณะของหน้าเว็บแบบไดนามิกที่ประกอบด้วยวิธีไคลเอนต์บริสุทธิ์และโหมดเบราว์เซอร์/เซิร์ฟเวอร์

การสื่อสาร: วิธีใช้จานสีเพื่อปรับสีอย่างแม่นยำ

6. หลักการของการแสดงหน้าเว็บแบบไดนามิก

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

สะท้อนหลังเลิกเรียน

นักออกแบบแผนการสอน

หน่วย/ที่อยู่/รหัสไปรษณีย์

อีเมล

หมายเลขติดต่อ

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

ชื่อเว็บไซต์:

URL หน้าแรก:

ชื่อหน้า:

1. หน้าเว็บคงที่เขียนไว้ในภาษาใด _________________________________________________________________________

2. คุณลักษณะของหน้าเว็บแบบไดนามิกคืออะไร ______________________________________________

3. เทคโนโลยีเว็บแบบไดนามิกทั่วไปคืออะไร? -

ข้อกำหนดการทดลอง:

(1) เรียนรู้เกี่ยวกับวิธีง่ายๆในการบรรลุเอฟเฟกต์แบบไดนามิกของหน้าเว็บลูกค้าผ่านตัวอย่างสั้น ๆ ของหน้าเว็บแบบไดนามิกต่อไปนี้

(2) โดยการปรับเปลี่ยนคุณสมบัติของวัตถุบางอย่างในโปรแกรมวิธีการปรับเปลี่ยนอย่างง่าย ๆ หลักไปยังเอฟเฟกต์แบบไดนามิกของหน้าเว็บ

(3) หลักวิธีง่ายๆในการสร้างหน้าเว็บแบบไดนามิกโดยการแทรกรหัสเอฟเฟกต์พิเศษของหน้าเว็บลงในรหัสหน้าเว็บ

ตัวอย่างขั้นตอนการทดลอง:

1. ป้อนซอร์สโค้ดของหน้าเว็บแบบไดนามิกดังนี้และสังเกตและสัมผัสกับเอฟเฟกต์แบบไดนามิกของหน้าเว็บที่สร้างขึ้นโดยเซ็กเมนต์รหัสบนเบราว์เซอร์

<html>

<head>

<meta http-equiv = เนื้อหาประเภทเนื้อหา = text/html; charset = gb2312>

<title> เอฟเฟกต์แบบไดนามิกของข้อความ </title>

</head>

<body>

<Marquee onMouseOver = this.stop () onMouseOut = this.start () scrolllamount = 1 scrolldelay = 50 ทิศทาง = ความสูงขึ้น = 116 ความกว้าง = 188 ชายแดน = 1 bgcolor = มะกอก> เมาส์จะหยุดเมื่อมันถูกขยับขึ้นและเคลื่อนที่ต่อไป คุณอาจลองใช้ </ marquee>

</body>

</html>

2. อธิบายเอฟเฟกต์แบบไดนามิกที่สามารถทำได้โดยรหัสด้านบน:

3. แอปพลิเคชันที่ใช้งานได้จริง: ตามข้อกำหนดในตารางวิเคราะห์และแก้ไขค่าแอตทริบิวต์ที่แตกต่างกันในรหัสและสังเกตเอฟเฟกต์ส่วนบุคคลผ่านเบราว์เซอร์เปรียบเทียบการเปลี่ยนแปลงก่อนและหลังการดัดแปลงและกรอกแบบฟอร์มอย่างเต็มรูปแบบตามผลการสังเกตของคุณเอง

รหัสในหน้าเว็บแบบไดนามิก

รหัสเล่นอะไร

1

onMouseOver = this.stop () onMouseOut = this.start ()

2

ระบุความเร็วของการเคลื่อนไหวของข้อความ

3

ทิศทาง = UP (สามารถเปลี่ยนเป็น: ทิศทาง = ทิศทางขวา = ซ้าย)

4

ความสูง = 116 ความกว้าง = 188

5

หมายถึงสีพื้นหลังของข้อความที่เคลื่อนไหว (สามารถเปลี่ยนเป็นสีต่อไปนี้: สีแดง, เหลือง, น้ำเงิน, เงิน ฯลฯ )

4. การประเมินผลการทดลอง:

ตัวบ่งชี้การประเมินผล

การประเมินตนเอง

คุณภาพของกิจกรรม

การวิเคราะห์ฟังก์ชั่นของรหัสในหน้าเว็บหน้าไคลเอนต์ชัดเจนมาก

6

การวิเคราะห์ฟังก์ชั่นของรหัสในหน้าเว็บหน้าไคลเอนต์นั้นชัดเจนขึ้น

5

การวิเคราะห์บทบาทของรหัสในหน้าเว็บของลูกค้าและความเข้าใจทั่วไป

3

การวิเคราะห์ฟังก์ชั่นของรหัสในหน้าเว็บหน้าไคลเอนต์จำเป็นต้องได้รับการปรับปรุง

2

-

-

-

-

-

-

-

-