網(wǎng)頁(yè)設(shè)計(jì)-職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

******職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

一、教案頭

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

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

稱(chēng)部系

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

級(jí)點(diǎn)

實(shí)力目標(biāo)學(xué)問(wèn)目標(biāo)

教

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

學(xué)

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

目

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

跳轉(zhuǎn)

實(shí)

力

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

訓(xùn)

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

練

的

任

務(wù)

與

案

例

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

考

校出版社,2010

資

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

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

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

生

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

動(dòng)

活

法手段安排

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

演

索

思

的重要性？示

發(fā)

討

探

講授問(wèn)

5分鐘

回

概

答

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

設(shè)問(wèn)

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

力目標(biāo)

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

馭各種超鏈接的制作方

告知講授課件5分鐘

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

計(jì)制作鏈接頁(yè)面

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

其次步：新建欄目主頁(yè)

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

第四步：制作欄目的信

息欄

演

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

索

思20分

發(fā)

啟

示

學(xué)

信息自鐘

個(gè)

導(dǎo)

縈會(huì)步：制作欄目最新誘

作

操

講

解

操練別課件

提

問(wèn)

點(diǎn)

輔

新聞重

探

討

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

頁(yè)面

第八步：制作新聞具體

信息內(nèi)容頁(yè)面

第九步：制作招生信息

欄目頁(yè)面之間的超鏈接

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

深化操練

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

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

目、下一級(jí)書(shū)目、上

件

課

一級(jí)書(shū)目、同級(jí)書(shū)目

軟

或

、文字鏈接

2操

件思索

歸納總分鐘

歸納、圖片鏈接界5

3結(jié)作回答

4、外部鏈接面

5、郵件鏈接

6、錨點(diǎn)鏈接

7、下載鏈接

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

任務(wù)10分

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

驅(qū)動(dòng)鐘

輔導(dǎo)

本次課主要講解超鏈課件

總結(jié)講授5分鐘

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

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

小結(jié)

******職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

一、教案頭

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

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

稱(chēng)部系

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

級(jí)點(diǎn)

教實(shí)力目標(biāo)學(xué)問(wèn)目標(biāo)

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

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

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

實(shí)

力

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

訓(xùn)

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

練

的

任

務(wù)

與

案

例

參

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

考

校出版社,2010

資

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

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

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

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

法手段潔動(dòng)安排

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

演

索

示

思

運(yùn)用？講授

發(fā)

討

問(wèn)

探

問(wèn)

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

述

2回

概

引入答

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

力目標(biāo)

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

馭表單的制作方法與屬

告知講授課件5分鐘

性，并能獨(dú)立設(shè)計(jì)制作

表單頁(yè)面

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

其次步：新建欄目主頁(yè)

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

第四步：利用表格制作

欄目的信息欄

演

示范

索

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

發(fā)

啟

示

學(xué)

新聞自鐘

重

導(dǎo)

誘

作

第六步：制作更多信息操

解

講

操練點(diǎn)課件

提

問(wèn)

輔

別

頁(yè)面?zhèn)€

探

討

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

內(nèi)容頁(yè)面

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

欄目之間的超連接

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

頁(yè)

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

深化操練

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

1、表格屬性：

件

課

行、歹U、填充、間距、

軟

或

對(duì)齊、邊框、類(lèi)等等

操

件思索

、單元格屬性：對(duì)齊、歸納總分鐘

歸納2界5

結(jié)作回答

背景顏色、合并單元面

格拆分單元格

3、表格基本操作

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

任務(wù)10分

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

驅(qū)動(dòng)鐘

輔導(dǎo)

本次課主要講解表格

課件

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

或案例

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

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

作業(yè)5分鐘

一節(jié)

小結(jié)

******職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

一、教案頭

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

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

稱(chēng)部系

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

級(jí)點(diǎn)

教實(shí)力目標(biāo)學(xué)問(wèn)目標(biāo)

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

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

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

實(shí)

力

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

訓(xùn)

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

練

的

任

務(wù)

與

案

例

參

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

考

校出版社,

資2010

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

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

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

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

法手段潔動(dòng)安排

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

演

索

思

運(yùn)用？示

發(fā)

探討

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

引入2分鐘

回

概

答

述5

案設(shè)問(wèn)

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

力目標(biāo)

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

馭表格制作頁(yè)面框架的

告知講授課件5分鐘

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

站首頁(yè)頁(yè)面制作

在畫(huà)好表格布局的前提

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

講解和個(gè)示范

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

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

第三步：制作首頁(yè)廣告

范演

示

索

條第四步：利用首思20分

啟發(fā)

示

自

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

導(dǎo)個(gè)

誘

操

第五步：制作歡迎信息作

講解

別

操練課件提

問(wèn)

點(diǎn)輔

欄重

探

討

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

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

第七步：制作用戶登陸

欄目

第八步：制作欄目之間

的分隔空隙

第九步：制作有情連接

等等

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

深化操練

作輔導(dǎo)操作

完成

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

確：

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

重要

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

歸納5分鐘

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

4、不同欄目之間的表格

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

5、頁(yè)面中正文字體大小

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

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

任務(wù)10分

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

驅(qū)動(dòng)鐘

輔導(dǎo)

本次課主要講解利用課件

總結(jié)講授5分鐘

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

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

作業(yè)5分鐘

一節(jié)

小結(jié)

******職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

一、教案頭

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

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

稱(chēng)部系

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

級(jí)點(diǎn)

教實(shí)力目標(biāo)學(xué)問(wèn)目標(biāo)

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

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

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

實(shí)

力

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

訓(xùn)

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

練

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

的

任

務(wù)

與

案

例

參

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

考

校出版社,2010

資

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

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

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

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

法手段潔動(dòng)安排

演

索

思

1、表單頁(yè)面的意義？示

發(fā)

探討

、表單的用途講授問(wèn)

2分鐘

回

概述

引入答5

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

和實(shí)力目標(biāo)

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

馭表單的制作方法與屬

告知講授課件5分鐘

性，并能獨(dú)立設(shè)計(jì)制作

表單頁(yè)面

第一步：演示并講解注

演

分

示范

索

冊(cè)網(wǎng)頁(yè)。思40

鐘

發(fā)

啟

示

自

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

重

導(dǎo)

誘

操

作

解、制作表單元素。）解

講

點(diǎn)

操練課件提

問(wèn)

輔

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

個(gè)

探

討

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

小結(jié)。

探討

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

深化操練操作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)練項(xiàng)目：能制作高校啟發(fā)誘

10分

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

鐘

輔導(dǎo)

本次課主要講解表單

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

表單元素的各項(xiàng)屬性

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

作業(yè)課件5分鐘

CSS

后記

******職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

一、教案頭

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

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

稱(chēng)部系

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

級(jí)山

實(shí)力目標(biāo)學(xué)問(wèn)目標(biāo)

教

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

學(xué)

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

目cssCSS

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

實(shí)

力

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

訓(xùn)

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

練

的

任

務(wù)

與

案

例

參

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

資校出版社,2010

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

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

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

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

法手段潔動(dòng)安排

演

索

思

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

發(fā)

討

探

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

2Css分鐘

回

概述

引入答5

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

和實(shí)力目標(biāo)

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

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

告知講授課件5分鐘

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

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

第一步：演示并講解用

范演

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

索

思20分

發(fā)

啟

其次步：分步演示并講示

自

學(xué)鐘

重

導(dǎo)

解CSS樣式的基本概念誘

操

作

解

講

第三步：講解并分析CSS點(diǎn)

操練課件提

問(wèn)

輔

別

個(gè)

探

常用屬性與值討

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

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

探討

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

深化操練操作

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

一、CSS規(guī)則

二、CSS樣式定義

1、CSS的類(lèi)型

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

、鏈接樣式表

3歸納總思索

歸納4、CSS的基本寫(xiě)法課件5分鐘

結(jié)回答

三、CSS常用屬性與值

1、字體屬性2、

顏色與背景屬性3、

文本屬性4、邊框

和布局屬性

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

15分

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

CSS鐘

輔導(dǎo)

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

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

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

用，包括CSS的樣式與

屬性

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

作業(yè)課件

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

后記

******職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

一、教案頭

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

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

稱(chēng)部系

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

級(jí)點(diǎn)

實(shí)力目標(biāo)學(xué)問(wèn)目標(biāo)

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

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

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

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

實(shí)

力

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

訓(xùn)

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

練

的

任

務(wù)

與

案

例

參

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

考

校出版社

資,2010

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

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

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

學(xué)

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

a-段

法手潔動(dòng)安排

演

索

思

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

發(fā)

討

探

的優(yōu)勢(shì)？講授問(wèn)

分鐘

概

答

回

引入述5

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

和實(shí)力目標(biāo)

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

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

告知講授課件5分鐘

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

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

第一步：演示并講解用

范演

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

索

思30分

啟發(fā)

其次步：分步演示并講示

學(xué)

自鐘

導(dǎo)重

解鏈接外部樣式誘

作

操

講解

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

操練課件提

問(wèn)

別輔

個(gè)

探

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

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

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

討

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

作

深化操練操

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

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

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

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

建與重定義歸納總思索

歸納課件5分鐘

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

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

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

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

15分

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

鐘

輔導(dǎo)

本次課主要講解CSS樣

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

括CSS的樣式與屬性

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

作業(yè)課件

考機(jī)械出版社）

后記

******職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

一、教案頭

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

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

稱(chēng)部系

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

級(jí)點(diǎn)

實(shí)力目標(biāo)學(xué)問(wèn)目標(biāo)

教

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

學(xué)

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

目

absolute與relative

標(biāo)頁(yè)布局

③邊框邊距填充

實(shí)

力

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

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

練

的

任

務(wù)

與

案

例

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

考

校出版社,2010

資

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

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

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

生

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

動(dòng)

活

法手段安排

演

索

思

1、Float>position在示

發(fā)

探

討

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

5分鐘

回

述

概

引入答

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

和實(shí)力目標(biāo)

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

馭float定位與

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

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

面布局

第一步：演示并講解用

div元素定位的方法

演

示范

索

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

發(fā)

啟

示

學(xué)

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

重

導(dǎo)

誘

作

定位和positon屬性定操

解

講

操練點(diǎn)課件

提

問(wèn)

輔

別

位的方法個(gè)

探

討

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

布局的效果

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

賜

予

分

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

個(gè)別探討間

深化布局操練時(shí)

輔導(dǎo)操作頡

1、Float屬性值left、

right、none>inherit

2、position屬性

absolute、relative歸納總思索

歸納課件5分鐘

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

4、margin邊距

5、padding填充

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

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

鐘

輔導(dǎo)

本次課主要講解DIV定

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

應(yīng)用

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

作業(yè)課件

考機(jī)械出版社）

后記

******職業(yè)技術(shù)學(xué)院?jiǎn)卧虒W(xué)設(shè)計(jì)

一、教案頭

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

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

稱(chēng)部系

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

級(jí)點(diǎn)

實(shí)力目標(biāo)學(xué)問(wèn)目標(biāo)

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

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

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

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

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

③駕馭尊航菜單與超鏈接

實(shí)

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

訓(xùn)

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

練

的

任

務(wù)

與

案

例

參

考

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

資

校出版社,2010

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

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

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

學(xué)生

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

動(dòng)

活