網頁教案,初學者的教案_HTML/Xhtml_網頁製作

教學主題
網頁
適用年級
高二年級
教學課時
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．輸入如下的一段動態網頁的原始碼，在瀏覽器上觀察並體驗該程式碼段所產生的網頁動態效果。