網頁教案,針對初學者的教案

2020-03-22 19:24:26

字體：大中小

來源：轉載

供稿：網友

了解網頁、主頁、網站的基本概念以及它們之間的關系，理解靜態網頁和動態網頁的概念，了解靜態網頁和動態網頁的技術，能解釋其工作過程

凡是接觸過因特網的同學，都應該訪問過網站、看到過網頁。大家所看到的網頁，一般都有一些固定的格式的，比如說標題、網站標志等，而就網頁的分類來說，一般來說可以分為兩類，一類是不隨用戶的操作而變化的，叫做靜態網頁，另一類是隨著用戶的操作而變化的，這類網頁叫動態網頁。
今天我就來討論一下關于網頁的問題。
二、教學內容：
通過搜索引擎搜索一些典型的網站，展示給學生。
1．網站、網頁、主頁的概念及三者關系
當今人們訪問的國際互聯網，是由一個個的網站組成的，而網站是由一張張具體的網頁組成的，主頁則相當于網站的起始頁，起著引導連接作用，一般來說，用戶可以通過主頁訪問到網站的大部分網頁。

設問：什么是網站？什么是網頁？什么是主頁？
活動：教師講解網站、網頁、主頁的含義及三者間的關系。

2．網頁頁面結構
常見網站的頁面結構一般由頁面標題、網站標志（LOGO）、頁眉區、導航欄、登錄區、搜索區、推薦熱點區、主要內容區、頁腳區等組成。

3．靜態網頁的概念
靜態網頁是在服務器上以文件形式存放并以相同格式發送給客戶的網頁。
靜態網頁是用超文本標記語言寫的文件。

設問：我們平常在因特網上看到的網頁是由什么組成的?
活動：教師講解靜態網頁的組成，超文本標記語言（HTML）的特點。
探索：學生操作，瀏覽一張網頁時查看網頁的源文件。

4．靜態網頁顯示在瀏覽器中的原理
靜態網頁從服務器上以相同格式發送給客戶的文件，但這個文件在到達瀏覽器后，瀏覽器需要查找文件中的HTML代碼，然后將特定的HTML代碼用特定的形式顯示出來，形成用戶所看到的網頁。

設問：靜態網頁是如何顯示在瀏覽器中的？
活動：教師講解瀏覽器對超文本標記語言的解釋過程和效果。

5、動態網頁的概念
動態網頁是指在用戶用戶瀏覽過程中由計算機系統自動創建的網頁，通常用于顯示實時信息或按照用戶交互顯示特定的內容。
動態網頁的特點：交互性、可自動更新、因地因時因人而變
動態網頁的常見形式：計數器、聊天室、討論區、BBS、校友錄等。
構成動態網頁的常見的兩種情況：純客戶端方式構成的動態網頁與客戶端服務器模式構成的動態網頁

設問：那些有交互操作的網頁是由什么組成的？
活動：教師講解，常見的構成動態網頁的兩種情況，純客戶端方式構成的動態網頁與瀏覽器/服務器模式構成的動態網頁各自的組成方式與特點。
交流：如何利用系統調色板精確調色

6、動態網頁顯示的原理
純客戶端方式構成的動態網頁：這種方式不需要與服務器交互，通常采用JAVA小程序和腳本語言形式直接嵌在網頁中。它的動態表現在：用戶通過各種由比如javascript、javaapplet等技術支持的操作網頁的顯示內容或形式。

1．輸入如下的一段動態網頁的源代碼，在瀏覽器上觀察并體驗該代碼段生成的網頁動態效果。
html
head
meta http-equiv= Content-Type content= text/html; charset=gb2312
title 一個文字的動態效果 /title
/head
body
marquee his.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=50 direction=up height=116 width=188 border=1 bgcolor=Olive 鼠標移上時將停止，移開時繼續移動，不妨試一下 /marquee
/body
/html
2．描述以上代碼所能實現的動態效果：

3．實際運用：根據表格中的要求，分別對代碼中不同的屬性值進行分析、修改，并通過瀏覽器觀察個性的效果，比較修改前后的變化，根據自己的觀察結果把表格填完整。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：提高用戶體驗與新窗口打開網頁的關系

下一篇：網頁注釋在IE中產生文字溢出