计算机网络技术专业1《网页布局-教学设计2》
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-4
微课名称
混合布局视频长度1源自分钟总学时64知识点
识点描述
布局中既有固定宽度布局，又有自适应宽度布局。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
案例分析，操作演示。
教学过程
内容
时间
认识网页布局—微课教学设计
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-1
微课名称
认识网页布局
视频长度
7分钟
总学时
64
知识点
识点描述
对页面的文字、图像或表格进行格式化版式排列。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
提出任务、分析任务、实现任务。
自适应宽度布局—微课教学设计
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-3
微课名称
自适应宽度布局
视频长度
10分钟
总学时
64
知识点
识点描述
网页根据浏览器窗口大小自适应变化。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
案例分析、设计演示。
教学过程
内容
时间
课程导入
自适应布局的原因
1
正文讲解
自适应布局方式
1
等比例两栏
1
左定宽、有自动
1
Hbuilder操作演示。
5
结尾
等宽两栏、一列固定，一定自适应。
1
教学反思
网页的布局方式其实就是指浏览器是如何对网页中的元素是如何排版的，常见的布局方式有，固定宽度布局，自适应宽度布局。
混合布局—微课教学设计
固定宽度布局—微课教学设计
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-2
微课名称
固定宽度布局
视频长度
12分钟
总学时
64
知识点
识点描述
对页面的文字、图像或表格进行格式化版式排列。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
实例分析、布局演示。
课程导入
混合布局，兼并两种布局优点，更符合实际应用！
1
正文讲解
混合布局效果图
1
效果图分析
2
操作演示
8
结尾
混合布局是固定、自适应相结合。
1
教学反思
混合布局是固定、自适应相结合。完美利用有效空间展现最正确效果；只是混合像素、和百分比两种单位作为页面单位。
教学过程
内容
时间
课程导入
固定宽度布局的优越性
1
正文讲解
一列宽度布局
1
两列宽度布局
1
HBuilder下布局演示
8
结尾
固定宽度布局，一列通过margin居中，两列采用浮动方法。
1
教学反思
将整个页面宽度设置为具体像素值例如120211400等。并利用margin：0 auto;实现网页页面的水平居中显示；两列宽度主要是内容局部分为两列，分别给具体的像素值，且让它们左右浮动。
教学过程
内容
时间
课程导入
为什么要网页布局，实际网站案例分析。
1
正文讲解
布局时通常需要遵守一定的布局流程。
1
网页中的主要组成局部
2
常见的布局方式
2
结尾
固定宽度布局和自适应宽度布局。
1
教学反思
网页的布局方式其实就是指浏览器是如何对网页中的元素是如何排版的，常见的布局方式有，固定宽度布局，自适应宽度布局。
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-4
微课名称
混合布局视频长度1源自分钟总学时64知识点
识点描述
布局中既有固定宽度布局，又有自适应宽度布局。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
案例分析，操作演示。
教学过程
内容
时间
认识网页布局—微课教学设计
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-1
微课名称
认识网页布局
视频长度
7分钟
总学时
64
知识点
识点描述
对页面的文字、图像或表格进行格式化版式排列。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
提出任务、分析任务、实现任务。
自适应宽度布局—微课教学设计
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-3
微课名称
自适应宽度布局
视频长度
10分钟
总学时
64
知识点
识点描述
网页根据浏览器窗口大小自适应变化。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
案例分析、设计演示。
教学过程
内容
时间
课程导入
自适应布局的原因
1
正文讲解
自适应布局方式
1
等比例两栏
1
左定宽、有自动
1
Hbuilder操作演示。
5
结尾
等宽两栏、一列固定，一定自适应。
1
教学反思
网页的布局方式其实就是指浏览器是如何对网页中的元素是如何排版的，常见的布局方式有，固定宽度布局，自适应宽度布局。
混合布局—微课教学设计
固定宽度布局—微课教学设计
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-2
微课名称
固定宽度布局
视频长度
12分钟
总学时
64
知识点
识点描述
对页面的文字、图像或表格进行格式化版式排列。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
实例分析、布局演示。
课程导入
混合布局，兼并两种布局优点，更符合实际应用！
1
正文讲解
混合布局效果图
1
效果图分析
2
操作演示
8
结尾
混合布局是固定、自适应相结合。
1
教学反思
混合布局是固定、自适应相结合。完美利用有效空间展现最正确效果；只是混合像素、和百分比两种单位作为页面单位。
教学过程
内容
时间
课程导入
固定宽度布局的优越性
1
正文讲解
一列宽度布局
1
两列宽度布局
1
HBuilder下布局演示
8
结尾
固定宽度布局，一列通过margin居中，两列采用浮动方法。
1
教学反思
将整个页面宽度设置为具体像素值例如120211400等。并利用margin：0 auto;实现网页页面的水平居中显示；两列宽度主要是内容局部分为两列，分别给具体的像素值，且让它们左右浮动。
教学过程
内容
时间
课程导入
为什么要网页布局，实际网站案例分析。
1
正文讲解
布局时通常需要遵守一定的布局流程。
1
网页中的主要组成局部
2
常见的布局方式
2
结尾
固定宽度布局和自适应宽度布局。
1
教学反思
网页的布局方式其实就是指浏览器是如何对网页中的元素是如何排版的，常见的布局方式有，固定宽度布局，自适应宽度布局。