| 教學主題 | 網頁 | |||||||||||
| 適用年級 | 高二年級 | 教學課時 | 1課時 | |||||||||
| 教材分析 | 重點：靜態網頁和動態網頁的組成方式及其工作過程 難點：動態網頁的工作過程 | |||||||||||
| 學習目標 | 了解網頁、主頁、網站的基本概念以及它們之間的關系，理解靜態網頁和動態網頁的概念，了解靜態網頁和動態網頁的技術，能解釋其工作過程 | |||||||||||
| 所需資源和環境 | ||||||||||||
| 數字化資源 | 1. 搜索引擎(www.google.com,www.baidu.com) 2. 若干演示網頁（靜態網頁和動態網頁） | |||||||||||
| 常規資源 | 1. 教材《網絡技術應用》第五章第1節；配套光盤 2. 教材配套教師用書 3. 《網頁》學習任務單 | |||||||||||
| 教學支撐環境 | 計算機網絡教室、多媒體網絡教室軟件或液晶投影儀 | |||||||||||
| 教學設計 | ||||||||||||
| | 問題 | 目的 | 重點/難點/關鍵點 | |||||||||
| 教學引導問題設計 | 什么是網站？什么是網頁？什么是主頁？ | 了解網站、網頁、主頁的含義 | | |||||||||
| 網站由什么構成的？ | 了解網站的各個組成部分 | 網站標志，頁眉區，熱點推薦區 | ||||||||||
| 我們平常在因特網上看到的網頁是由什么組成的? | 讓學生了解靜態網頁的組成代碼——html | 了解html語言的結構及基本標簽 | ||||||||||
| 靜態網頁是如何顯示在瀏覽器中的？ | 掌握靜態網頁在瀏覽器中的工作過程 | 瀏覽器對html代碼的解釋過程 | ||||||||||
| 那些有交互操作的網頁是由什么組成的？ | 讓學生了解靜態網頁的構成 | 理解腳本語言 | ||||||||||
| 動態網頁是如何在用戶的交互下顯示在瀏覽器中的？ | 掌握動態網頁在瀏覽器中的工作過程 | 動態網頁的執行過程 | ||||||||||
| 教學過程 | ||||||||||||
| 一、 新課引入： 凡是接觸過因特網的同學，都應該訪問過網站、看到過網頁。大家所看到的網頁，一般都有一些固定的格式的，比如說標題、網站標志等，而就網頁的分類來說，一般來說可以分為兩類，一類是不隨用戶的操作而變化的，叫做靜態網頁，另一類是隨著用戶的操作而變化的，這類網頁叫動態網頁。 今天我就來討論一下關于網頁的問題。 二、 教學內容： 通過搜索引擎搜索一些典型的網站，展示給學生。 1．網站、網頁、主頁的概念及三者關系 當今人們訪問的國際互聯網，是由一個個的網站組成的，而網站是由一張張具體的網頁組成的，主頁則相當于網站的起始頁，起著引導連接作用，一般來說，用戶可以通過主頁訪問到網站的大部分網頁。 設問：什么是網站？什么是網頁？什么是主頁？ 活動：教師講解網站、網頁、主頁的含義及三者間的關系。 2．網頁頁面結構 常見網站的頁面結構一般由頁面標題、網站標志（logo）、頁眉區、導航欄、登錄區、搜索區、推薦熱點區、主要內容區、頁腳區等組成。 3．靜態網頁的概念 靜態網頁是在服務器上以文件形式存放并以相同格式發送給客戶的網頁。 靜態網頁是用超文本標記語言寫的文件。 設問：我們平常在因特網上看到的網頁是由什么組成的? 活動：教師講解靜態網頁的組成，超文本標記語言（html）的特點。 探索：學生操作，瀏覽一張網頁時查看網頁的源文件。 4．靜態網頁顯示在瀏覽器中的原理 靜態網頁從服務器上以相同格式發送給客戶的文件，但這個文件在到達瀏覽器后，瀏覽器需要查找文件中的html代碼，然后將特定的html代碼用特定的形式顯示出來，形成用戶所看到的網頁。 設問：靜態網頁是如何顯示在瀏覽器中的？ 活動：教師講解瀏覽器對超文本標記語言的解釋過程和效果。 5、動態網頁的概念 動態網頁是指在用戶用戶瀏覽過程中由計算機系統自動創建的網頁，通常用于顯示實時信息或按照用戶交互顯示特定的內容。 動態網頁的特點：交互性、可自動更新、因地因時因人而變 動態網頁的常見形式：計數器、聊天室、討論區、bbs、校友錄等。 構成動態網頁的常見的兩種情況：純客戶端方式構成的動態網頁與客戶端服務器模式構成的動態網頁 設問：那些有交互操作的網頁是由什么組成的？ 活動：教師講解，常見的構成動態網頁的兩種情況，純客戶端方式構成的動態網頁與瀏覽器/服務器模式構成的動態網頁各自的組成方式與特點。 交流：如何利用系統調色板精確調色 6、動態網頁顯示的原理 純客戶端方式構成的動態網頁：這種方式不需要與服務器交互，通常采用java小程序和腳本語言形式直接嵌在網頁中。它的動態表現在：用戶通過各種由比如javascript、javaapplet等技術支持的操作網頁的顯示內容或形式。 |
| |||||||||||
| 課后反思 |
| |||||||||||
| |
| |||||||||||
| 教案設計者 |
| 單位/地址/郵編 |
|
| ||||||||
| 電子郵件 |
| 聯系電話 |
|
| ||||||||
“網頁”學習任務單
一、 網頁相關概念
學生瀏覽網頁，查看一個頁面布局清晰、合理、有特色的網站，完成以下操作。
網站名稱：
主頁網址：
頁面標題：
二、 靜態網頁與動態網頁
1、 靜態網頁是用什么語言編寫的?_________________________________________
2、 動態網頁具有哪些特性? ____________________________________
3、 常見的動態網頁技術有哪些? _____________________________________________
三、 實驗:體驗客戶端動態網頁效果
實驗要求:
(1) 通過下面幾個簡短的動態網頁的實例，了解一些實現客戶端網頁動態效果的簡單方法。
(2) 通過對程序中某些對象屬性的修改，掌握對網頁動態效果簡單的修改方法。
(3) 通過在網頁代碼中插入網頁特效代碼的體驗活動，掌握制作動態網頁的一種簡易方法。
實驗步驟示例：
1．輸入如下的一段動態網頁的源代碼，在瀏覽器上觀察并體驗該代碼段生成的網頁動態效果。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title> 一個文字的動態效果</title>
</head>
<body>
<marquee onmouseover=this.stop() onmouseout=this.start() scrollamount=1 scrolldelay=50 direction=up height=116 width=188 border=1 bgcolor=olive>鼠標移上時將停止，移開時繼續移動，不妨試一下</marquee>
</body>
</html>
2．描述以上代碼所能實現的動態效果：
3．實際運用：根據表格中的要求，分別對代碼中不同的屬性值進行分析、修改，并通過瀏覽器觀察個性的效果，比較修改前后的變化，根據自己的觀察結果把表格填完整。
| | 動態網頁中的代碼 | 代碼所起的作用 |
| 1 | onmouseover=this.stop() onmouseout=this.start() | |
| 2 | | 表示文字移動速度 |
| 3 | direction=up（可改成：direction=right direction=left） | |
| 4 | height=116 width=188 | |
| 5 | | 表示移動文字背景色（可改成下列一些顏色：red,yellow,blue,silver等） |
4．實驗評價：
| | 評價指標 | 自我評價 | |
| 活動質量 | 客戶端網頁中代碼的作用分析，十分明確 | 6 | |
| 客戶端網頁中代碼的作用分析，較為清楚 | 5 | | |
| 客戶端網頁中代碼的作用分析，大體了解 | 3 | | |
| 客戶端網頁中代碼的作用分析，有待提高 | 2 | | |
四、 通過學習，你還有那些疑惑？
________________________________________
________________________________________
________________________________________
________________________________________
五、 通過學習，你對靜態網頁與動態網頁的相關知識有哪些新的設想？
________________________________________
________________________________________
_________________________________________________________
_________________________________________________________
新聞熱點
疑難解答
