******職業技術學院單元教學設計

一、教案頭

本次課標題：第3講網頁超鏈接

課程名網頁設計授課老師所屬系信息工程

稱部系

授課班上課時間2學時授課地

級點

實力目標學問目標

教

①用超鏈接實現網頁頁面的聯①駕馭內部鏈接的形式與創建

學

系②駕馭外部鏈接、郵件鏈接、

目

標②用各種鏈接技術實現頁面的錨點鏈接下載鏈接

跳轉

實

力

任務一：制作學校網站招生信息欄欄目

訓

任務二：制作美食網站鏈接頁面

練

的

任

務

與

案

例

參趙峰.網頁設計與制作(html5+CSS+Javascript).北京:清華高

考

校出版社,2010

資

料劉瑞新等.網頁設計與制作.北京:機械工業出版社,2013

互聯網上的各種相關網站和網頁

二、教學設計

生

步驟教學內容教學方教學學時間

動

活

法手段安排

1、超鏈接在網頁制作中

演

索

思

的重要性？示

發

討

探

講授問

5分鐘

回

概

答

引入2、展不各種超鏈接述

設問

3、交待本節課任務和實

力目標

本節課的主要內容是駕

馭各種超鏈接的制作方

告知講授課件5分鐘

法與運用，并能獨立設

計制作鏈接頁面

第一步：新建網站欄目

其次步：新建欄目主頁

第三步：設置頁面屬性

第四步：制作欄目的信

息欄

演

蓄五步：制作欄目主體示范

索

思20分

發

啟

示

學

信息自鐘

個

導

縈會步：制作欄目最新誘

作

操

講

解

操練別課件

提

問

點

輔

新聞重

探

討

第七步：制作更多信息導

頁面

第八步：制作新聞具體

信息內容頁面

第九步：制作招生信息

欄目頁面之間的超鏈接

學生完成招生信息頁面個別探討30分

深化操練

的制作輔導操作鐘

1、內部鏈接：同一書

目、下一級書目、上

件

課

一級書目、同級書目

軟

或

、文字鏈接

2操

件思索

歸納總分鐘

歸納、圖片鏈接界5

3結作回答

4、外部鏈接面

5、郵件鏈接

6、錨點鏈接

7、下載鏈接

訓練項目：能學校網站啟發誘

任務10分

訓練招生信息頁面制作導個別操作

驅動鐘

輔導

本次課主要講解超鏈課件

總結講授5分鐘

接在網頁中的應用或案例

作業完成美食網站的超鏈接5分鐘

小結

******職業技術學院單元教學設計

一、教案頭

本次課標題：第4講表格網頁布局

課程名網頁設計授課老師所屬系信息工程

稱部系

授課班上課時間2學時授課地

級點

教實力目標學問目標

學①用表格布局制作一個網頁①駕馭表格的屬性

目②用內部連接技術實現頁面的②駕馭單元格的行列屬性

標跳轉③駕馭表格的基本屬性

實

力

任務一：制作學校網站就業信息展示頁面

訓

任務二：制作美食圖庫頁面

練

的

任

務

與

案

例

參

趙峰.網頁設計與制作(html5+CSS+Javascript).北京:清華高

考

校出版社,2010

資

料劉瑞新等.網頁設計與制作.北京:機械工業出版社,2013

互聯網上的各種相關網站和網頁

二、教學設計

法驟教學內容教學方教學學生時間

法手段潔動安排

1、表格在網頁制作中的

演

索

示

思

運用？講授

發

討

問

探

問

、展示表格布局的網頁設5分鐘

述

2回

概

引入答

3、交待本節課任務和實

力目標

本節課的主要內容是駕

馭表單的制作方法與屬

告知講授課件5分鐘

性，并能獨立設計制作

表單頁面

第一步：新建網站欄目

其次步：新建欄目主頁

第三步：設置頁面屬性

第四步：利用表格制作

欄目的信息欄

演

示范

索

第五步：制作欄目最新思20分

發

啟

示

學

新聞自鐘

重

導

誘

作

第六步：制作更多信息操

解

講

操練點課件

提

問

輔

別

頁面個

探

討

第七步：制作新聞具體導

內容頁面

第八步：制作就業信息

欄目之間的超連接

第八步：保存并預覽網

頁

學生完成就業信息頁面個別探討30分

深化操練

的制作輔導操作鐘

1、表格屬性：

件

課

行、歹U、填充、間距、

軟

或

對齊、邊框、類等等

操

件思索

、單元格屬性：對齊、歸納總分鐘

歸納2界5

結作回答

背景顏色、合并單元面

格拆分單元格

3、表格基本操作

訓練項目：能學校網站啟發誘

任務10分

訓練就業信息頁面導個別操作

驅動鐘

輔導

本次課主要講解表格

課件

總結在網頁中的應用，包括講授5分鐘

或案例

利用表格布局網頁

完成課后練習并預習下

作業5分鐘

一節

小結

******職業技術學院單元教學設計

一、教案頭

本次課標題：第5講表格布局網頁綜合

課程名網頁設計授課老師所屬系信息工程

稱部系

授課班上課時間4學時授課地

級點

教實力目標學問目標

學①用表格布局制作網站首頁①駕馭表格的寬度的固定

目②用表格嵌套技術的運用留意②駕馭單元格的對齊方式

標事項③駕馭表格布局的具體流程

實

力

任務一：制作學校網站首頁頁面

訓

任務二：制作美食圖庫首頁頁面

練

的

任

務

與

案

例

參

趙峰.網頁設計與制作(html5+CSS+Javascript).北京:清華高

考

校出版社,

資2010

料劉瑞新等.網頁設計與制作.北京:機械工業出版社,2013

互聯網上的各種相關網站和網頁

二、教學設計

法驟教學內容教學方教學學生時間

法手段潔動安排

1、表格在網頁布局中的

演

索

思

運用？示

發

探討

、展示網站表格布局方講授問

引入2分鐘

回

概

答

述5

案設問

3、交待本節課任務和實

力目標

本節課的主要內容是駕

馭表格制作頁面框架的

告知講授課件5分鐘

方法，并能獨立完成網

站首頁頁面制作

在畫好表格布局的前提

下對各欄目進行規劃性

講解和個示范

第一步：新建網頁

其次步：設置頁面屬性

第三步：制作首頁廣告

范演

示

索

條第四步：利用首思20分

啟發

示

自

頁的導航欄學鐘

導個

誘

操

第五步：制作歡迎信息作

講解

別

操練課件提

問

點輔

欄重

探

討

第六步：制作主體內容導

左側欄目的布局表格

第七步：制作用戶登陸

欄目

第八步：制作欄目之間

的分隔空隙

第九步：制作有情連接

等等

學生完成首頁頁面的制個別探討

深化操練

作輔導操作

完成

1、網頁寬度確定要精

確：

2、最%卜層表格的寬度很

重要

3、單元格垂直對齊方式歸納總案例思索

歸納5分鐘

很重要結展示回答

4、不同欄目之間的表格

布局應預留肯定空隙

5、頁面中正文字體大小

設置統一

訓練項目：能完成美食啟發誘

任務10分

訓練網站首頁布局導個別操作

驅動鐘

輔導

本次課主要講解利用課件

總結講授5分鐘

表格進行布局網頁或項目

完成課后練習并預習下

作業5分鐘

一節

小結

******職業技術學院單元教學設計

一、教案頭

本次課標題：第6講表單頁面

課程名網頁設計授課老師所屬系信息工程

稱部系

授課班上課時間2學時授課地

級點

教實力目標學問目標

學①用表格布局制作一個網頁①駕馭表格的插入

目②用表格嵌套與疊加制作困難②駕馭單元格的相關操作

標網頁

實

力

任務一：搭建web網站

訓

任務二：網上商城注冊頁面

練

任務三：自己選擇一個注冊頁面的設計與制作

的

任

務

與

案

例

參

趙峰.網頁設計與制作(html5+CSS+Javascript).北京:清華高

考

校出版社,2010

資

料劉瑞新等.網頁設計與制作.北京:機械工業出版社,2013

互聯網上的各種相關網站和網頁

二、教學設計

法驟教學內容教學方教學學生時間

法手段潔動安排

演

索

思

1、表單頁面的意義？示

發

探討

、表單的用途講授問

2分鐘

回

概述

引入答5

3、交待本節課案例任務設問

和實力目標

本節課的主要內容是駕

馭表單的制作方法與屬

告知講授課件5分鐘

性，并能獨立設計制作

表單頁面

第一步：演示并講解注

演

分

示范

索

冊網頁。思40

鐘

發

啟

示

自

其次步：分步演示并講學

重

導

誘

操

作

解、制作表單元素。）解

講

點

操練課件提

問

輔

第三步：分析并制作網別

個

探

討

頁。第四步：操作導

小結。

探討

學生完成表單頁面制作個別

深化操練操作5分鐘

作業輔導

表單屬性：

1、文字域text

2、密碼域password

3、文件域file

索

4、復選框checkbox思

歸納總

歸納5、單選按鈕radio課件回答5分鐘

結

6、一般按鈕button

7、提交按鈕submit

8、重置按鈕reset

9、菜單與下拉列表

select、option

訓練項目：能制作高校啟發誘

10分

訓練網站用戶注冊頁面導個別課件操作

鐘

輔導

本次課主要講解表單

總結在網頁中的應用，包括講授課件5分鐘

表單元素的各項屬性

完成課后練習并預習

作業課件5分鐘

CSS

后記

******職業技術學院單元教學設計

一、教案頭

本次課標題：第講css網頁內部樣式

課程名網頁設計授課老師所屬系信息工程

稱部系

授課班上課時間2學時授課地

級山

實力目標學問目標

教

①用css進行改善現有網站①駕馭CSS的基本概念

學

②用樣式表進行導航菜單②駕馭樣式定義

目cssCSS

標制作③駕馭CSS常用屬性與值

實

力

任務一：制作學校網站導航條菜單

訓

任務二：給美食的網站運用所學的CSS樣式進行導航菜單改善

練

的

任

務

與

案

例

參

考趙峰.網頁設計與制作(html5+CSS+Javascript).北京:清華高

資校出版社,2010

料劉瑞新等.網頁設計與制作.北京:機械工業出版社,2013

互聯網上的各種相關網站和網頁

二、教學設計

步驟教學內容教學方教學學生時間

法手段潔動安排

演

索

思

1、網頁布局css+div?示

發

討

探

、內部樣式的學習講授問

2Css分鐘

回

概述

引入答5

3、交待本節課案例任務設問

和實力目標

本節課的主要內容是駕

馭CSS樣式的優勢與運

告知講授課件5分鐘

用，并能獨立設計運用

它改善已有網站

第一步：演示并講解用

范演

CSS樣式制作的網頁示

索

思20分

發

啟

其次步：分步演示并講示

自

學鐘

重

導

解CSS樣式的基本概念誘

操

作

解

講

第三步：講解并分析CSS點

操練課件提

問

輔

別

個

探

常用屬性與值討

第四步：結合CSS內部導

樣式的運用制作網頁

探討

學生完成css內部樣式個別30分

深化操練操作

制作網頁輔導鐘

一、CSS規則

二、CSS樣式定義

1、CSS的類型

2、定義內部樣式表

、鏈接樣式表

3歸納總思索

歸納4、CSS的基本寫法課件5分鐘

結回答

三、CSS常用屬性與值

1、字體屬性2、

顏色與背景屬性3、

文本屬性4、邊框

和布局屬性

訓練項目：對學校網站啟發誘

15分

訓練進行內部樣式運用導個別課件操作

CSS鐘

輔導

本次課主要講解CSS內

部樣式在網頁中的應

總結講授課件5分鐘

用，包括CSS的樣式與

屬性

運用css內部樣式美食

作業課件

網站導航菜單的制作

后記

******職業技術學院單元教學設計

一、教案頭

本次課標題：第講css網頁外部樣式

課程名網頁設計授課老師所屬系信息工程

稱部系

授課班上課時間2學時授課地

級點

實力目標學問目標

教①用CSS外部樣式改善網站樣①駕馭CSS的外部樣式創建

學式②駕馭CSS外部樣式的鏈接

目②能嫻熟進行css外部與內部③駕馭html標簽樣式

標樣式的轉換

實

力

任務一：創建學校網站樣式

訓

任務二：創建美食網站樣式

練

的

任

務

與

案

例

參

趙峰.網頁設計與制作(html5+CSS+Javascript).北京:清華高

考

校出版社

資,2010

料劉瑞新等.網頁設計與制作.北京:機械工業出版社,2013

互聯網上的各種相關網站和網頁

二、教學設計

學

步驟教學內容教學方學生時間

a-段

法手潔動安排

演

索

思

1、什么是外部樣式，他示

發

討

探

的優勢？講授問

分鐘

概

答

回

引入述5

2、交待本節課案例任務設問

和實力目標

本節課的主要內容是駕

馭CSS外部樣式的創建

告知講授課件5分鐘

與運用，并能獨立設計

運用它改善已有網站

第一步：演示并講解用

范演

CSS外部樣式的創建示

索

思30分

啟發

其次步：分步演示并講示

學

自鐘

導重

解鏈接外部樣式誘

作

操

講解

第三步：演示學校網站點

操練課件提

問

別輔

個

探

CSS樣式的運用步驟討

第四步：結合CSS內外導

部樣式的特點進行轉換

討

學生完成css內部外部個別探20分

作

深化操練操

樣式的轉換輔導鐘

1、僅應用于一個HTML

元素樣式的創建

2、html標簽樣式的創

建與重定義歸納總思索

歸納課件5分鐘

3、創建鏈接樣式結回答

4、樣式的應用

5、創建自定義樣式

訓練項目：能制作美食啟發誘

15分

訓練網站的CSS美化導個另U課件操作

鐘

輔導

本次課主要講解CSS樣

總結式在網頁中的應用，包講授課件5分鐘

括CSS的樣式與屬性

完成課后練習P166（參

作業課件

考機械出版社）

后記

******職業技術學院單元教學設計

一、教案頭

本次課標題：第講DIV元素定位和布局

課程名網頁設計授課老師所屬系信息工程

稱部系

授課班上課時間2學時授課地

級點

實力目標學問目標

教

①用浮動定位進行網頁布局①駕馭浮動定位與清除

學

②能用position屬性進行網②駕馭postion屬性中的

目

absolute與relative

標頁布局

③邊框邊距填充

實

力

任務一：運用浮動定位進行相冊頁面的設計

訓任務二：運用position定位實現頂部頁面效果

練

的

任

務

與

案

例

參趙峰.網頁設計與制作(html5+CSS+Javascript).北京:清華高

考

校出版社,2010

資

料劉瑞新等.網頁設計與制作.北京:機械工業出版社,2013

互聯網上的各種相關網站和網頁

二、教學設計

生

步驟教學內容教學方教學學時間

動

活

法手段安排

演

索

思

1、Float>position在示

發

探

討

網頁布局中的重要性講授問

5分鐘

回

述

概

引入答

2、交待本節課案例任務設問

和實力目標

本節課的主要內容是駕

馭float定位與

告知position布局方法，并講授課件5分鐘

能運用獨立設計網站頁

面布局

第一步：演示并講解用

div元素定位的方法

演

示范

索

其次步：分步演示并講思30分

發

啟

示

學

解博客網站運用float自鐘

重

導

誘

作

定位和positon屬性定操

解

講

操練點課件

提

問

輔

別

位的方法個

探

討

第三步：演示案例網站導

布局的效果

第四步：網站發布測試

賜

予

分

學生完成學校網站DIV充

個別探討間

深化布局操練時

輔導操作頡

1、Float屬性值left、

right、none>inherit

2、position屬性

absolute、relative歸納總思索

歸納課件5分鐘

3、borderstyle屬性值結回答

4、margin邊距

5、padding填充

訓練項目：學校網站的啟發誘15分

訓練div元素定位導個另IJ課件操作

鐘

輔導

本次課主要講解DIV定

總結位元素在網頁布局中的講授課件5分鐘

應用

完成課后練習P181（參

作業課件

考機械出版社）

后記

******職業技術學院單元教學設計

一、教案頭

本次課標題：第講DIV+CSS布局頁面

課程名網頁設計授課老師所屬系信息工程

稱部系

授課班上課時間4學時授課地

級點

實力目標學問目標

①用DIV+CSS進行網頁布局①駕馭div單行單列、兩列式、

教②能嫻熟進行CSS進行網頁美三列式布局

學化②駕馭CSS網頁美化如：背景

目樣式限制、段落與字體樣式

標設計、圖片樣式限制、多種

③駕馭尊航菜單與超鏈接

實

力任務一：運用css+div進行個人博客頁面布局的設計

訓

任務二：美食網站導航區創建與css美化

練

的

任

務

與

案

例

參

考

趙峰.網頁設計與制作(html5+CSS+Javascript).北京:清華高

資

校出版社,2010

料劉瑞新等.網頁設計與制作.北京:機械工業出版社,2013

互聯網上的各種相關網站和網頁

二、教學設計

學生

步驟教學內容教學方教學時間

動

活