点击阅读配套资源:
微课视频 辅助视频 素材下载 查看PPT 电子教材 上机练习 拓展学习1 拓展学习2
第4讲 :使用css+div制作一列自适应宽度布局页面 |
学时:2 |
||
任务目标 |
l 了解自适应宽度布局形式 l 使用css+div制作一列自适应宽度布局页面 l 掌握字体属性设置 |
||
知识内容 |
第2.2.2节-2.3节 |
||
教材信息 |
《网页设计与制作案例教程》科学出版社出版,主编郭建东 |
||
重 点 |
使用css+div制作一列自适应宽度布局页面和字体属性的设置 |
||
难 点 |
段落的设置和列表文字设置 |
||
教学方法 |
教师:理论与实际操作讲解相结合 学生:预习、课堂学习与课堂练习相结合 师生:教师通过课程引导启发提问、疑难解答、学生练习点评进行互动 |
||
学习方法 |
PPT和知识讲解进行理论学习、播放微课进行案例学习,然后进行案例实操练习、课后习题等练习完成知识学习过程 |
||
资源 |
PPT、电子教材、微课视频、网络课程(http://jx.gdgm.edu.cn/skills/wv/30764673) |
||
教学过程 |
|||
知识点 |
基本内容 |
教学过程 |
建议时长(分钟) |
复习 |
复习上一节课内容 |
运行上一节课案例,并强调重点完成复习 |
2 |
知识点1:制作宽度自适应的一列布局页面 |
1. 自适应布局概述 |
通过PPT结合电子教材讲解网页的基本概念 |
3 |
2.【案例2-3】 |
通过PPT结合电子教材详细讲解网页的基本元素 |
15 |
|
3.学生课堂练习 |
学生课堂练习,完成自适应布局页面的创建 |
18 |
|
4.教师点评练习 |
对学生练习中出现的问题进行总结点评 |
7 |
|
知识点2:设置文本和段落格式,添加列表文字
|
1、添加文本内容 |
通过PPT结合知识讲解电子教材详细讲解在网页中导入文本的多种方法 |
5 |
2. 设置文本格式 |
通过PPT结合知识讲解电子教材详细讲解设置各类文本属性 |
5 |
|
3、设置分段及行距 |
通过PPT结合知识讲解电子教材详细讲解段落的设置方法 |
5 |
|
4.设置文字的列表显示方式 |
通过PPT结合知识讲解电子教材详细讲解列表文字的创建 |
7 |
|
5.学生课堂练习,导入文本、设置分段等 |
学生课堂练习,在空白页面中添加文字、段落,并设置格式 |
15 |
|
6.教师点评总结 |
对学生练习中出现的问题进行总结点评 |
8 |
|
课后作业 |
学生完成课后习题练习 |
布置课后作业 |
|