******職業(yè)技術(shù)學(xué)院單元教學(xué)設(shè)計

一、教案頭

本次課標(biāo)題：第3講網(wǎng)頁超鏈接

課程名網(wǎng)頁設(shè)計授課老師所屬系信息工程

稱部系

授課班上課時間2學(xué)時授課地

級點

實力目標(biāo)學(xué)問目標(biāo)

教

①用超鏈接實現(xiàn)網(wǎng)頁頁面的聯(lián)①駕馭內(nèi)部鏈接的形式與創(chuàng)建

學(xué)

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

目

標(biāo)②用各種鏈接技術(shù)實現(xiàn)頁面的錨點鏈接下載鏈接

跳轉(zhuǎn)

實

力

任務(wù)一：制作學(xué)校網(wǎng)站招生信息欄欄目

訓(xùn)

任務(wù)二：制作美食網(wǎng)站鏈接頁面

練

的

任

務(wù)

與

案

例

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

考

校出版社,2010

資

料劉瑞新等.網(wǎng)頁設(shè)計與制作.北京:機(jī)械工業(yè)出版社,2013

互聯(lián)網(wǎng)上的各種相關(guān)網(wǎng)站和網(wǎng)頁

二、教學(xué)設(shè)計

生

步驟教學(xué)內(nèi)容教學(xué)方教學(xué)學(xué)時間

動

活

法手段安排

1、超鏈接在網(wǎng)頁制作中

演

索

思

的重要性？示

發(fā)

討

探

講授問

5分鐘

回

概

答

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

設(shè)問

3、交待本節(jié)課任務(wù)和實

力目標(biāo)

本節(jié)課的主要內(nèi)容是駕

馭各種超鏈接的制作方

告知講授課件5分鐘

法與運(yùn)用，并能獨立設(shè)

計制作鏈接頁面

第一步：新建網(wǎng)站欄目

其次步：新建欄目主頁

第三步：設(shè)置頁面屬性

第四步：制作欄目的信

息欄

演

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

索

思20分

發(fā)

啟

示

學(xué)

信息自鐘

個

導(dǎo)

縈會步：制作欄目最新誘

作

操

講

解

操練別課件

提

問

點

輔

新聞重

探

討

第七步：制作更多信息導(dǎo)

頁面

第八步：制作新聞具體

信息內(nèi)容頁面

第九步：制作招生信息

欄目頁面之間的超鏈接

學(xué)生完成招生信息頁面?zhèn)€別探討30分

深化操練

的制作輔導(dǎo)操作鐘

1、內(nèi)部鏈接：同一書

目、下一級書目、上

件

課

一級書目、同級書目

軟

或

、文字鏈接

2操

件思索

歸納總分鐘

歸納、圖片鏈接界5

3結(jié)作回答

4、外部鏈接面

5、郵件鏈接

6、錨點鏈接

7、下載鏈接

訓(xùn)練項目：能學(xué)校網(wǎng)站啟發(fā)誘

任務(wù)10分

訓(xùn)練招生信息頁面制作導(dǎo)個別操作

驅(qū)動鐘

輔導(dǎo)

本次課主要講解超鏈課件

總結(jié)講授5分鐘

接在網(wǎng)頁中的應(yīng)用或案例

作業(yè)完成美食網(wǎng)站的超鏈接5分鐘

小結(jié)

******職業(yè)技術(shù)學(xué)院單元教學(xué)設(shè)計

一、教案頭

本次課標(biāo)題：第4講表格網(wǎng)頁布局

課程名網(wǎng)頁設(shè)計授課老師所屬系信息工程

稱部系

授課班上課時間2學(xué)時授課地

級點

教實力目標(biāo)學(xué)問目標(biāo)

學(xué)①用表格布局制作一個網(wǎng)頁①駕馭表格的屬性

目②用內(nèi)部連接技術(shù)實現(xiàn)頁面的②駕馭單元格的行列屬性

標(biāo)跳轉(zhuǎn)③駕馭表格的基本屬性

實

力

任務(wù)一：制作學(xué)校網(wǎng)站就業(yè)信息展示頁面

訓(xùn)

任務(wù)二：制作美食圖庫頁面

練

的

任

務(wù)

與

案

例

參

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

考

校出版社,2010

資

料劉瑞新等.網(wǎng)頁設(shè)計與制作.北京:機(jī)械工業(yè)出版社,2013

互聯(lián)網(wǎng)上的各種相關(guān)網(wǎng)站和網(wǎng)頁

二、教學(xué)設(shè)計

法驟教學(xué)內(nèi)容教學(xué)方教學(xué)學(xué)生時間

法手段潔動安排

1、表格在網(wǎng)頁制作中的

演

索

示

思

運(yùn)用？講授

發(fā)

討

問

探

問

、展示表格布局的網(wǎng)頁設(shè)5分鐘

述

2回

概

引入答

3、交待本節(jié)課任務(wù)和實

力目標(biāo)

本節(jié)課的主要內(nèi)容是駕

馭表單的制作方法與屬

告知講授課件5分鐘

性，并能獨立設(shè)計制作

表單頁面

第一步：新建網(wǎng)站欄目

其次步：新建欄目主頁

第三步：設(shè)置頁面屬性

第四步：利用表格制作

欄目的信息欄

演

示范

索

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

發(fā)

啟

示

學(xué)

新聞自鐘

重

導(dǎo)

誘

作

第六步：制作更多信息操

解

講

操練點課件

提

問

輔

別

頁面?zhèn)€

探

討

第七步：制作新聞具體導(dǎo)

內(nèi)容頁面

第八步：制作就業(yè)信息

欄目之間的超連接

第八步：保存并預(yù)覽網(wǎng)

頁

學(xué)生完成就業(yè)信息頁面?zhèn)€別探討30分

深化操練

的制作輔導(dǎo)操作鐘

1、表格屬性：

件

課

行、歹U、填充、間距、

軟

或

對齊、邊框、類等等

操

件思索

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

歸納2界5

結(jié)作回答

背景顏色、合并單元面

格拆分單元格

3、表格基本操作

訓(xùn)練項目：能學(xué)校網(wǎng)站啟發(fā)誘

任務(wù)10分

訓(xùn)練就業(yè)信息頁面導(dǎo)個別操作

驅(qū)動鐘

輔導(dǎo)

本次課主要講解表格

課件

總結(jié)在網(wǎng)頁中的應(yīng)用，包括講授5分鐘

或案例

利用表格布局網(wǎng)頁

完成課后練習(xí)并預(yù)習(xí)下

作業(yè)5分鐘

一節(jié)

小結(jié)

******職業(yè)技術(shù)學(xué)院單元教學(xué)設(shè)計

一、教案頭

本次課標(biāo)題：第5講表格布局網(wǎng)頁綜合

課程名網(wǎng)頁設(shè)計授課老師所屬系信息工程

稱部系

授課班上課時間4學(xué)時授課地

級點

教實力目標(biāo)學(xué)問目標(biāo)

學(xué)①用表格布局制作網(wǎng)站首頁①駕馭表格的寬度的固定

目②用表格嵌套技術(shù)的運(yùn)用留意②駕馭單元格的對齊方式

標(biāo)事項③駕馭表格布局的具體流程

實

力

任務(wù)一：制作學(xué)校網(wǎng)站首頁頁面

訓(xùn)

任務(wù)二：制作美食圖庫首頁頁面

練

的

任

務(wù)

與

案

例

參

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

考

校出版社,

資2010

料劉瑞新等.網(wǎng)頁設(shè)計與制作.北京:機(jī)械工業(yè)出版社,2013

互聯(lián)網(wǎng)上的各種相關(guān)網(wǎng)站和網(wǎng)頁

二、教學(xué)設(shè)計

法驟教學(xué)內(nèi)容教學(xué)方教學(xué)學(xué)生時間

法手段潔動安排

1、表格在網(wǎng)頁布局中的

演

索

思

運(yùn)用？示

發(fā)

探討

、展示網(wǎng)站表格布局方講授問

引入2分鐘

回

概

答

述5

案設(shè)問

3、交待本節(jié)課任務(wù)和實

力目標(biāo)

本節(jié)課的主要內(nèi)容是駕

馭表格制作頁面框架的

告知講授課件5分鐘

方法，并能獨立完成網(wǎng)

站首頁頁面制作

在畫好表格布局的前提

下對各欄目進(jìn)行規(guī)劃性

講解和個示范

第一步：新建網(wǎng)頁

其次步：設(shè)置頁面屬性

第三步：制作首頁廣告

范演

示

索

條第四步：利用首思20分

啟發(fā)

示

自

頁的導(dǎo)航欄學(xué)鐘

導(dǎo)個

誘

操

第五步：制作歡迎信息作

講解

別

操練課件提

問

點輔

欄重

探

討

第六步：制作主體內(nèi)容導(dǎo)

左側(cè)欄目的布局表格

第七步：制作用戶登陸

欄目

第八步：制作欄目之間

的分隔空隙

第九步：制作有情連接

等等

學(xué)生完成首頁頁面的制個別探討

深化操練

作輔導(dǎo)操作

完成

1、網(wǎng)頁寬度確定要精

確：

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

重要

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

歸納5分鐘

很重要結(jié)展示回答

4、不同欄目之間的表格

布局應(yīng)預(yù)留肯定空隙

5、頁面中正文字體大小

設(shè)置統(tǒng)一

訓(xùn)練項目：能完成美食啟發(fā)誘

任務(wù)10分

訓(xùn)練網(wǎng)站首頁布局導(dǎo)個別操作

驅(qū)動鐘

輔導(dǎo)

本次課主要講解利用課件

總結(jié)講授5分鐘

表格進(jìn)行布局網(wǎng)頁或項目

完成課后練習(xí)并預(yù)習(xí)下

作業(yè)5分鐘

一節(jié)

小結(jié)

******職業(yè)技術(shù)學(xué)院單元教學(xué)設(shè)計

一、教案頭

本次課標(biāo)題：第6講表單頁面

課程名網(wǎng)頁設(shè)計授課老師所屬系信息工程

稱部系

授課班上課時間2學(xué)時授課地

級點

教實力目標(biāo)學(xué)問目標(biāo)

學(xué)①用表格布局制作一個網(wǎng)頁①駕馭表格的插入

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

標(biāo)網(wǎng)頁

實

力

任務(wù)一：搭建web網(wǎng)站

訓(xùn)

任務(wù)二：網(wǎng)上商城注冊頁面

練

任務(wù)三：自己選擇一個注冊頁面的設(shè)計與制作

的

任

務(wù)

與

案

例

參

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

考

校出版社,2010

資

料劉瑞新等.網(wǎng)頁設(shè)計與制作.北京:機(jī)械工業(yè)出版社,2013

互聯(lián)網(wǎng)上的各種相關(guān)網(wǎng)站和網(wǎng)頁

二、教學(xué)設(shè)計

法驟教學(xué)內(nèi)容教學(xué)方教學(xué)學(xué)生時間

法手段潔動安排

演

索

思

1、表單頁面的意義？示

發(fā)

探討

、表單的用途講授問

2分鐘

回

概述

引入答5

3、交待本節(jié)課案例任務(wù)設(shè)問

和實力目標(biāo)

本節(jié)課的主要內(nèi)容是駕

馭表單的制作方法與屬

告知講授課件5分鐘

性，并能獨立設(shè)計制作

表單頁面

第一步：演示并講解注

演

分

示范

索

冊網(wǎng)頁。思40

鐘

發(fā)

啟

示

自

其次步：分步演示并講學(xué)

重

導(dǎo)

誘

操

作

解、制作表單元素。）解

講

點

操練課件提

問

輔

第三步：分析并制作網(wǎng)別

個

探

討

頁。第四步：操作導(dǎo)

小結(jié)。

探討

學(xué)生完成表單頁面制作個別

深化操練操作5分鐘

作業(yè)輔導(dǎo)

表單屬性：

1、文字域text

2、密碼域password

3、文件域file

索

4、復(fù)選框checkbox思

歸納總

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

結(jié)

6、一般按鈕button

7、提交按鈕submit

8、重置按鈕reset

9、菜單與下拉列表

select、option

訓(xùn)練項目：能制作高校啟發(fā)誘

10分

訓(xùn)練網(wǎng)站用戶注冊頁面導(dǎo)個別課件操作

鐘

輔導(dǎo)

本次課主要講解表單

總結(jié)在網(wǎng)頁中的應(yīng)用，包括講授課件5分鐘

表單元素的各項屬性

完成課后練習(xí)并預(yù)習(xí)

作業(yè)課件5分鐘

CSS

后記

******職業(yè)技術(shù)學(xué)院單元教學(xué)設(shè)計

一、教案頭

本次課標(biāo)題：第講css網(wǎng)頁內(nèi)部樣式

課程名網(wǎng)頁設(shè)計授課老師所屬系信息工程

稱部系

授課班上課時間2學(xué)時授課地

級山

實力目標(biāo)學(xué)問目標(biāo)

教

①用css進(jìn)行改善現(xiàn)有網(wǎng)站①駕馭CSS的基本概念

學(xué)

②用樣式表進(jìn)行導(dǎo)航菜單②駕馭樣式定義

目cssCSS

標(biāo)制作③駕馭CSS常用屬性與值

實

力

任務(wù)一：制作學(xué)校網(wǎng)站導(dǎo)航條菜單

訓(xùn)

任務(wù)二：給美食的網(wǎng)站運(yùn)用所學(xué)的CSS樣式進(jìn)行導(dǎo)航菜單改善

練

的

任

務(wù)

與

案

例

參

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

資校出版社,2010

料劉瑞新等.網(wǎng)頁設(shè)計與制作.北京:機(jī)械工業(yè)出版社,2013

互聯(lián)網(wǎng)上的各種相關(guān)網(wǎng)站和網(wǎng)頁

二、教學(xué)設(shè)計

步驟教學(xué)內(nèi)容教學(xué)方教學(xué)學(xué)生時間

法手段潔動安排

演

索

思

1、網(wǎng)頁布局css+div?示

發(fā)

討

探

、內(nèi)部樣式的學(xué)習(xí)講授問

2Css分鐘

回

概述

引入答5

3、交待本節(jié)課案例任務(wù)設(shè)問

和實力目標(biāo)

本節(jié)課的主要內(nèi)容是駕

馭CSS樣式的優(yōu)勢與運(yùn)

告知講授課件5分鐘

用，并能獨立設(shè)計運(yùn)用

它改善已有網(wǎng)站

第一步：演示并講解用

范演

CSS樣式制作的網(wǎng)頁示

索

思20分

發(fā)

啟

其次步：分步演示并講示

自

學(xué)鐘

重

導(dǎo)

解CSS樣式的基本概念誘

操

作

解

講

第三步：講解并分析CSS點

操練課件提

問

輔

別

個

探

常用屬性與值討

第四步：結(jié)合CSS內(nèi)部導(dǎo)

樣式的運(yùn)用制作網(wǎng)頁

探討

學(xué)生完成css內(nèi)部樣式個別30分

深化操練操作

制作網(wǎng)頁輔導(dǎo)鐘

一、CSS規(guī)則

二、CSS樣式定義

1、CSS的類型

2、定義內(nèi)部樣式表

、鏈接樣式表

3歸納總思索

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

結(jié)回答

三、CSS常用屬性與值

1、字體屬性2、

顏色與背景屬性3、

文本屬性4、邊框

和布局屬性

訓(xùn)練項目：對學(xué)校網(wǎng)站啟發(fā)誘

15分

訓(xùn)練進(jìn)行內(nèi)部樣式運(yùn)用導(dǎo)個別課件操作

CSS鐘

輔導(dǎo)

本次課主要講解CSS內(nèi)

部樣式在網(wǎng)頁中的應(yīng)

總結(jié)講授課件5分鐘

用，包括CSS的樣式與

屬性

運(yùn)用css內(nèi)部樣式美食

作業(yè)課件

網(wǎng)站導(dǎo)航菜單的制作

后記

******職業(yè)技術(shù)學(xué)院單元教學(xué)設(shè)計

一、教案頭

本次課標(biāo)題：第講css網(wǎng)頁外部樣式

課程名網(wǎng)頁設(shè)計授課老師所屬系信息工程

稱部系

授課班上課時間2學(xué)時授課地

級點

實力目標(biāo)學(xué)問目標(biāo)

教①用CSS外部樣式改善網(wǎng)站樣①駕馭CSS的外部樣式創(chuàng)建

學(xué)式②駕馭CSS外部樣式的鏈接

目②能嫻熟進(jìn)行css外部與內(nèi)部③駕馭html標(biāo)簽樣式

標(biāo)樣式的轉(zhuǎn)換

實

力

任務(wù)一：創(chuàng)建學(xué)校網(wǎng)站樣式

訓(xùn)

任務(wù)二：創(chuàng)建美食網(wǎng)站樣式

練

的

任

務(wù)

與

案

例

參

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

考

校出版社

資,2010

料劉瑞新等.網(wǎng)頁設(shè)計與制作.北京:機(jī)械工業(yè)出版社,2013

互聯(lián)網(wǎng)上的各種相關(guān)網(wǎng)站和網(wǎng)頁

二、教學(xué)設(shè)計

學(xué)

步驟教學(xué)內(nèi)容教學(xué)方學(xué)生時間

a-段

法手潔動安排

演

索

思

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

發(fā)

討

探

的優(yōu)勢？講授問

分鐘

概

答

回

引入述5

2、交待本節(jié)課案例任務(wù)設(shè)問

和實力目標(biāo)

本節(jié)課的主要內(nèi)容是駕

馭CSS外部樣式的創(chuàng)建

告知講授課件5分鐘

與運(yùn)用，并能獨立設(shè)計

運(yùn)用它改善已有網(wǎng)站

第一步：演示并講解用

范演

CSS外部樣式的創(chuàng)建示

索

思30分

啟發(fā)

其次步：分步演示并講示

學(xué)

自鐘

導(dǎo)重

解鏈接外部樣式誘

作

操

講解

第三步：演示學(xué)校網(wǎng)站點

操練課件提

問

別輔

個

探

CSS樣式的運(yùn)用步驟討

第四步：結(jié)合CSS內(nèi)外導(dǎo)

部樣式的特點進(jìn)行轉(zhuǎn)換

討

學(xué)生完成css內(nèi)部外部個別探20分

作

深化操練操

樣式的轉(zhuǎn)換輔導(dǎo)鐘

1、僅應(yīng)用于一個HTML

元素樣式的創(chuàng)建

2、html標(biāo)簽樣式的創(chuàng)

建與重定義歸納總思索

歸納課件5分鐘

3、創(chuàng)建鏈接樣式結(jié)回答

4、樣式的應(yīng)用

5、創(chuàng)建自定義樣式

訓(xùn)練項目：能制作美食啟發(fā)誘

15分

訓(xùn)練網(wǎng)站的CSS美化導(dǎo)個另U課件操作

鐘

輔導(dǎo)

本次課主要講解CSS樣

總結(jié)式在網(wǎng)頁中的應(yīng)用，包講授課件5分鐘

括CSS的樣式與屬性

完成課后練習(xí)P166（參

作業(yè)課件

考機(jī)械出版社）

后記

******職業(yè)技術(shù)學(xué)院單元教學(xué)設(shè)計

一、教案頭

本次課標(biāo)題：第講DIV元素定位和布局

課程名網(wǎng)頁設(shè)計授課老師所屬系信息工程

稱部系

授課班上課時間2學(xué)時授課地

級點

實力目標(biāo)學(xué)問目標(biāo)

教

①用浮動定位進(jìn)行網(wǎng)頁布局①駕馭浮動定位與清除

學(xué)

②能用position屬性進(jìn)行網(wǎng)②駕馭postion屬性中的

目

absolute與relative

標(biāo)頁布局

③邊框邊距填充

實

力

任務(wù)一：運(yùn)用浮動定位進(jìn)行相冊頁面的設(shè)計

訓(xùn)任務(wù)二：運(yùn)用position定位實現(xiàn)頂部頁面效果

練

的

任

務(wù)

與

案

例

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

考

校出版社,2010

資

料劉瑞新等.網(wǎng)頁設(shè)計與制作.北京:機(jī)械工業(yè)出版社,2013

互聯(lián)網(wǎng)上的各種相關(guān)網(wǎng)站和網(wǎng)頁

二、教學(xué)設(shè)計

生

步驟教學(xué)內(nèi)容教學(xué)方教學(xué)學(xué)時間

動

活

法手段安排

演

索

思

1、Float>position在示

發(fā)

探

討

網(wǎng)頁布局中的重要性講授問

5分鐘

回

述

概

引入答

2、交待本節(jié)課案例任務(wù)設(shè)問

和實力目標(biāo)

本節(jié)課的主要內(nèi)容是駕

馭float定位與

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

能運(yùn)用獨立設(shè)計網(wǎng)站頁

面布局

第一步：演示并講解用

div元素定位的方法

演

示范

索

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

發(fā)

啟

示

學(xué)

解博客網(wǎng)站運(yùn)用float自鐘

重

導(dǎo)

誘

作

定位和positon屬性定操

解

講

操練點課件

提

問

輔

別

位的方法個

探

討

第三步：演示案例網(wǎng)站導(dǎo)

布局的效果

第四步：網(wǎng)站發(fā)布測試

賜

予

分

學(xué)生完成學(xué)校網(wǎng)站DIV充

個別探討間

深化布局操練時

輔導(dǎo)操作頡

1、Float屬性值left、

right、none>inherit

2、position屬性

absolute、relative歸納總思索

歸納課件5分鐘

3、borderstyle屬性值結(jié)回答

4、margin邊距

5、padding填充

訓(xùn)練項目：學(xué)校網(wǎng)站的啟發(fā)誘15分

訓(xùn)練div元素定位導(dǎo)個另IJ課件操作

鐘

輔導(dǎo)

本次課主要講解DIV定

總結(jié)位元素在網(wǎng)頁布局中的講授課件5分鐘

應(yīng)用

完成課后練習(xí)P181（參

作業(yè)課件

考機(jī)械出版社）

后記

******職業(yè)技術(shù)學(xué)院單元教學(xué)設(shè)計

一、教案頭

本次課標(biāo)題：第講DIV+CSS布局頁面

課程名網(wǎng)頁設(shè)計授課老師所屬系信息工程

稱部系

授課班上課時間4學(xué)時授課地

級點

實力目標(biāo)學(xué)問目標(biāo)

①用DIV+CSS進(jìn)行網(wǎng)頁布局①駕馭div單行單列、兩列式、

教②能嫻熟進(jìn)行CSS進(jìn)行網(wǎng)頁美三列式布局

學(xué)化②駕馭CSS網(wǎng)頁美化如：背景

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

標(biāo)設(shè)計、圖片樣式限制、多種

③駕馭尊航菜單與超鏈接

實

力任務(wù)一：運(yùn)用css+div進(jìn)行個人博客頁面布局的設(shè)計

訓(xùn)

任務(wù)二：美食網(wǎng)站導(dǎo)航區(qū)創(chuàng)建與css美化

練

的

任

務(wù)

與

案

例

參

考

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

資

校出版社,2010

料劉瑞新等.網(wǎng)頁設(shè)計與制作.北京:機(jī)械工業(yè)出版社,2013

互聯(lián)網(wǎng)上的各種相關(guān)網(wǎng)站和網(wǎng)頁

二、教學(xué)設(shè)計

學(xué)生

步驟教學(xué)內(nèi)容教學(xué)方教學(xué)時間

動

活