第17讲 ：CSS+DIV布局网站1主页和内容页内容区设计

学时：2

任务目标

l   掌握CSS样式在WEB窗体页面的应用

l   设计主页内容页内容和样式

l   使用CSS+DIV布局网站内容页

知识内容

参考教材：《ASP.NET动态网页设计项目教程》，科学出版社2016.2出版，郭建东主编

项目 4 任务4.1

重  点

CSS样式的应用

难  点

DIV层次设计

教学方法

教师：理论与实际操作讲解相结合

学生：预习、课堂学习与课堂练习相结合

师生：教师通过课程引导启发提问、疑难解答、学生练习点评进行互动

学习方法

阅读教材、PPT、播放视频进行项目学习，然后通过实际操作完成知识学习过程

资源

PPT、电子教材、教学视频、网络课程（http://jx.gdgm.cn/skills/wv/13876336）

教学过程

知识点

基本内容

教学过程

建议时长（分钟）

知识点1：主页右侧栏设计

1．复习 上节内容

通过PPT和运行网页讲解复习

3

2．右侧栏样式设计

通过实际操作讲解右侧栏样式设计

8

3．右侧栏代码视图内容设计

通过实际操作讲解右侧栏添加样式引用和内容

15

知识点2：页脚设计

1.设计页脚样式

通过实际操作讲解body\img\a\chearfix等公共样式设计

4

2．添加页脚层并引用样式

通过实际操作讲解总容器层居中和宽带，并引用到容器层

3

知识点3：网站1内容页设计

1.复制主页的结构到内容页

通过实际操作讲解

5

2.修改右侧栏内容和样式

通过实际操作讲解

8

上机练习

1.学生课堂练习

学生练习，教师答疑练习中出现的问题

40

2.教师点评学生练习并总结

对学生练习中出现的问题进行总结点评

5