第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

课后作业

学生完成课后习题练习

布置课后作业