网页设计-职业技术学院单元教学设计

******职业技术学院单元教学设计

一、教案头

本次课标题：第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

互联网上的各种相关网站和网页

二、教学设计

学生

步骤教学内容教学方教学时间

动

活