计算机网页布局任务分析,KC003050000006

KC003050000006单元设计-任务6运用盒模型网页布局..doc

上传人：1709****072

文档编号：54131964

上传时间：2020-03-05

格式：DOC

页数：8

大小：222KB

下载提示(请认真阅读)1.请仔细阅读文档，确保文档完整性，对于不预览、不比对内容而直接下载带来的问题本站不予受理。

2.下载的文档，不会出现我们的网址水印。

3、该文档所得收入(下载+内容+预览)归上传者、原创作者；如果您是本文档原作者，请点此认领！既往收益都归您。

文档包含非法信息？点此举报后获取现金奖励！

下载文档到电脑，查找使用更方便

15

积分

还剩页未读，继续阅读

关 键 词：KC003050000006

单元

设计

任务

运用

模型

网页

布局

资源描述：

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院

《网页设计与制作》课程教学单元设计

单元6 运用盒模型网页布局

授课教师：网页设计与制作

授课班级:

学时：10

教学条件

实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络

教学素材

教材、课件、实训项目单、授课录像、案例库、教学网站等

教学目标设计

知识目标：

(1)掌握盒子模型的原理；

(2)掌握盒子模型的层次与的宽高计算；

(3)掌握盒子的border、margin、padding的使用；

(4)掌握盒子的CSS3新增属性；

(5)掌握元素的类型与转换；

(6)掌握浮动属性、清除属性、溢出处理；

(7)掌握元素的定位方式。

能力目标：

(1)能正确应用盒子模型布局网页页面；

(2)能根据网页页面效果，运用盒子模型与定位技术布局页面。

任务描述

本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。

教学内容

(1)盒子模型的原理；

(2)盒子的border、margin、padding的使用；

(3)盒子的CSS3新增属性；

(4)元素的类型与转换；

(5)浮动属性、清除属性、溢出处理；

(6)元素的定位方式。

重点：

(1)盒子模型的原理；

(2)盒子border、margin、padding的使用；

(3)盒子的CSS3新增属性；

(4)元素的类型与转换；

(5)浮动属性、清除属性、溢出处理；

(6)元素的定位方式。

难点：

(1)盒子的CSS3新增属性；

(2)元素的类型与转换；

(3)浮动属性、清除属性、溢出处理；

(4)元素的定位方式。

任务分析与实现

(1)任务分析；

(2)任务实现代码。

教学过程设计

6.1 盒子模型(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

任务描述

本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。

讲授法

多媒体

教师：分析任务

学生：信息交流

知识讲授

讲解：盒子模型的原理、盒子模型的层次与宽高

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践盒子模型的原理、盒子模型的层次与宽高计算机方法

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解盒子模型的常用属性：

边框border属性

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践边框border属性

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解盒子模型的常用属性：

边距属性

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践padding内边距属性、margin外边距属性。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

课堂

总结

盒子模型的原理；

盒子模型的常用属性：边距属性、边距属性的使用方法

教师讲解

多媒体

课件演示

整理笔记

引导创新

任务拓展

浏览当当网，认识购物页面中盒子模型的使用方法与技巧。

教师指导

学生自学

多媒体

布置作业

提出要求

教学过程设计

6.2 盒子的CSS3新增属性、类型与转换(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

知识讲授

讲解 CSS3新增属性：圆角边框、图片边框

语法：border-radius: 半径值1/半径值2;

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践圆角边框、图片边框的使用方法。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解 CSS3新增属性： 阴影效果box-shadow 、阴影效果box-shadow

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

学生创建一个新页面进行实践阴影效果box-shadow 、阴影效果box-shadow 的使用方法。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解 元素的类型与转换：

元素的类型块级元素、行内元素、行内元素的区别与相互转化

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

学生创建一个新页面进行实践元素的类型与转换方法

实验教学法

多媒体

教师：辅导交流

学生：实践练习

课堂

总结

(1)CSS3新增属性

(2)元素的类型与转换方法

教师讲解

多媒体

课件演示

整理笔记

引导创新

任务拓展

综合实例：电商产品分类列表展示

教师指导

学生自学

多媒体

布置作业

提出要求

教学过程设计

6.3 浮动属性、清除属性、溢出处理(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

知识讲授

讲解 浮动属性：float

语法：float: none | left | right;

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践 float 属性。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解 清除浮动属性clear

语法：clear: left | right | both;

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践 clear属性。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解 溢出处理 overflow：

语法：overflow: visible | hidden | auto | scroll;

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

学生创建一个新页面进行实践 overflow

实验教学法

多媒体

教师：辅导交流

学生：实践练习

课堂

总结

(1)浮动属性float

(2)清除浮动属性clear

(3)溢出处理 overflow

教师讲解

多媒体

课件演示

整理笔记

引导创新

任务拓展

综合实例：电商商品展示页面

教师指导

学生自学

多媒体

布置作业

提出要求

教学过程设计

6.4 定位方式(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

知识讲授

讲解元素的定位：

语法：position: static | relative | absolute | fixed;

方式一：静态定位static

方式二：相对定位relative

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

创建一个新页面进行实践方式一：静态定位static、方式二：相对定位relative

实验教学法

多媒体

教师：辅导交流

学生：实践练习

知识讲授

讲解

方式三：绝对定位absolute

方式四：固定定位fixed

讲授法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

学生创建一个新页面进行实践 方式三：绝对定位absolute、方式四：固定定位fixed 。

实验教学法

多媒体

教师：辅导交流

学生：实践练习

项目案例

综合实例：数字化教学资源平台网站布局

案例演示法

多媒体

课件演示

教师：讲授知识

学生：边听边练

学生实践

自行完成数字化教学资源平台网站布局

实验教学法

多媒体

教师：辅导交流

学生：实践练习

课堂

总结

方式一：静态定位static

方式二：相对定位relative

方式三：绝对定位absolute

方式四：固定定位fixed

教师讲解

多媒体

课件演示

整理笔记

引导创新

任务拓展

综合实例：数字化教学资源平台网站布局

教师指导

学生自学

多媒体

布置作业

提出要求

教学过程设计

6.5 任务实施：使用盒模型布局网站banner部分(学时数：2)

主要步骤

教学内容

教学方法

教学手段

师生活动

任务描述

在任务5实现banner区域的基础上，综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。

任务驱动教学法

多媒体

教师：分析任务

学生：信息交流

任务分析

综合应用CSS中盒布局的方法与思维进行页面布局。

任务驱动教学法

多媒体

教师：辅助分析

学生：交流讨论

任务计划

小组讨论，将任务分解

任务驱动教学法

多媒体

课件演示

教师：辅助分析

学生：交流讨论

任务实施

完成项目要分为以下几步。

第一步：编写区域的HTML结构代码。

第二步：编写区域的CSS代码，通过定位确定3幅图片的位置，通过box-shadow属性设置图片的阴影效果。

任务驱动教学法

多媒体

教师：辅导交流

学生：实践练习

任务汇报

完成任务后，简短的交流

任务驱动教学法

多媒体

课件演示

教师：点评优化

学生：汇报交流

课堂

总结

综合使用HTML5+CSS3实现页面效果。

任务驱动教学法

多媒体

课件演示

整理笔记

引导创新

任务拓展

页面主体区域的实现、页脚区域的实现。

任务驱动教学法

多媒体

拓展提高

课外实训

运用盒子模型与定位布局企业网站

项目教学法

网络环境

布置作业

提出要求

第 8 页 共 8 页

展开阅读全文

温馨提示:

1: 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。

2: 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。

3.本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。

4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。

5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。

6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。

7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

 

人人文库网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：KC003050000006单元设计-任务6运用盒模型网页布局..doc

链接地址：https://www.renrendoc.com/p-54131964.html