第18讲 ：CSS+DIV布局网站2主页面

学时：2

任务目标

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

l  根据效果图分解图片并设计样式

l  使用CSS+DIV布局网站主页

知识内容

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

项目 4 任务4.2

重  点

CSS+DIV的应用

难  点

导航层次的分解和样式设计、播放器层的引入

教学方法

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

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

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

学习方法

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

资源

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

教学过程

知识点

基本内容

教学过程

建议时长（分钟）

知识点1：外部样式、容器和页眉层设计

1．复习 上节内容

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

2

2．创建网站、网页和外部样式文件，引用外部样式文件

通过实际操作讲解

3

3．容器层设计

通过实际操作讲解

2

4.页眉层设计

通过实际操作讲解

3

知识点2：导航层设计

1.导航背景的分解

通过PPT和页面效果图讲解

5

2.导航样式设计

通过实际操作讲解

10

3.导航层和间隔层代码编写

通过实际操作讲解

5

知识点3：内容区设计

1.内容区容器层和样式设计

通过实际操作讲解

3

2. 内容区左侧栏设计

通过实际操作讲解左侧栏过渡层、左侧内容区容器层、图片播放器层设计

12

上机练习

1.学生课堂练习

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

40

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

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

5