《网页设计与制作(HTMLCSS)》教学大纲

本文格式为Word版，下载可任意编辑——《网页设计与制作(HTMLCSS)》教学大纲博学谷——让IT教学更简单，让IT学习更有效

《网页设计与制作(HTML+CSS)》课程教学大纲

（课程英文名称）

课程编号：202309210011学分：5学分

学时：64学时（其中：讲课学时：45上机学时：19）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计javascript网页特效适用专业：信息及其计算机相关专业开课部门：计算机系

一、课程的性质与目标

《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课，涉及计算机基础、互联网等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、把握网络中常见的网页布局效果、学会制作各种企业，门户，电商类网站。

二、课程的主要内容及基本要求

第一章HTML与CSS网页设计概述（4学时）

[知识点]

??????

Web的基础知识HTMLl简介CSS简介

常用浏览器介绍

Dreamweaver工具使用

利用Dreamweaver创立第一个页面

[重点]

?HTML简介

博学谷——让IT教学更简单，让IT学习更有效

?Dreamweaver工具使用

[难点]

?Dreamweaver工具创立第一个页面

[基本要求]

?了解HTML版本的发展历程

?把握Dreamweaver工具的使用，能够使用Dreamweaver创立一个包含html结

构和CSS样式的简单网页。

其次章HTML入门（6学时）

[知识点]

???????

HTML基本语法结构HTML标记属性

HTML常用文本控制标记HTML文本格式化标记HTML图像标记

HTML相对路径和绝对路径HTML图文混排技巧

[重点]

????

HTML基本语法结构

HTML常用文本控制标记HTML图像标记

HTML相对路径和绝对路径

[难点]

?HTML标记属性的使用?HTML相对路径和绝对路径

[基本要求]

?把握HTML基本语法结构?把握HTML中常用的文本标记?区分什么是相对路径和绝对路径?把握HTML图像标记的使用?把握图片混排常用技巧

[阶段案例]

使用HTML文本控制标记、HTML图像标记及相关标记的属性实现网页中常见的图文混排效果，如下图所示。

博学谷——让IT教学更简单，让IT学习更有效

第三章CSS入门（8学时）

[知识点]

????????

CSS入门知识CSS样式规则

CSS样式表书写位置CSS基础选择器CSS字体样式属性CSS样式外观属性CSS复合选择器CSS层叠性和优先级

[重点]

?CSS样式规则

?CSS基础和复合选择器?CSS层叠性和优先级

[难点]

?CSS复合选择器?CSS优先级

[基本要求]

?理解CSS语法结构

?了解CSS在网页中的重要性?熟悉CSS书写的位置

?把握CSS基础和复合选择器?把握CSS层叠性和优先级

[阶段案例]

通过CSS文本样式属性控制网页中的文本，制作网页中常见的新闻页面，效果如下图所示。

博学谷——让IT教学更简单，让IT学习更有效

第四章盒子模型（6学时）

[知识点]

?????

盒子模型理论知识CSS盒子模型属性元素类型的分类元素类型的相互转换盒子外边距合并问题

[重点]

?盒子模型属性?元素类型分类?元素类型相互转换

[难点]

?盒子模型复合属性

?盒子模型总的宽度和高度?元素类型及其转换

[基本要求]

????

理解盒子模型把握盒子模型属性

把握盒子模型中复合属性的写法把握元素类型及其转换方法

[阶段案例]

综合运用盒子模型的相关属性，制作网页中常见的盒子效果，如下图所示。

博学谷——让IT教学更简单，让IT学习更有效

第五章列表与超链接（4学时）

[知识点]

???????

有序列表无序列表自定义列表

CSS控制列表样式超链接锚点链接

CSS控制链接样式

[重点]

?无序列表?自定义列表

?CSS控制列表样式

[难点]

?CSS控制列表样式

[基本要求]

?????

把握列表的三种分类熟悉列表的嵌套

熟练把握CSS控制列表样式把握链接标记的使用

把握结构与样式相分开的写法

[阶段案例]

使用列表与超链接标记组织页面，并通过CSS控制列表与超链接的样式实现网页中常见的新闻列表效果，如下图所示。

博学谷——让IT教学更简单，让IT学习更有效

新闻列表效果展示

鼠标以上链接文本效果

第六章表格与表单（4学时）

[知识点]

??????

表格标记表格结构

CSS控制表格表单标签表单控件

CSS控制表单

[重点]

?表格标签

?CSS控制表格和表单?表单标签

[难点]

?表单标签

?CSS控制表单

[基本要求]

????

把握表格标记的使用了解表格结构

把握表单标记的使用把握CSS控制表单标记

[阶段案例]

使用表格与表单组织页面，并通过CSS控制表格与表单的显示样式，制作网页中常见的注册界面，效果如下图所示。

博学谷——让IT教学更简单，让IT学习更有效

第七章浮动与定位（8学时）

[知识点]

?????

元素的浮动清除浮动

Overflow属性元素的定位z-index属性

[重点]

?元素浮动?元素定位

[难点]

?清除浮动

?元素定位的分类

博学谷——让IT教学更简单，让IT学习更有效

[基本要求]

????

把握元素浮动

熟悉清除浮动的方法把握元素定位及其分类

熟悉z-index设置层的叠放次序

[阶段案例]

综合运用元素的浮动与定位，制作传智播客设计学院首页banner，效果如下图所示。

第八章CSS高级技巧（6学时）

[知识点]

?CSS精灵技术?CSS滑动门技术?margin负值的应用

[重点]

?CSS精灵技术?CSS滑动门技术?margin负值的应用

[难点]

?CSS精灵原理分析

?CSS滑动门原理分析与切图?运用margin负值综合运用

[基本要求]

????

把握精灵图的制作

把握利用CSS对精灵图片进行背景设置把握常见滑动门布局

把握利用margin负值进行布局技巧

[案例实战1]

使用CSS精灵，制作精品课程模块，效果如下图所示。

博学谷——让IT教学更简单，让IT学习更有效

[案例实战2]

使用CSS滑动门，制作梯形网站导航，效果如下图所示。

[案例实战3]

应用margin的负值，制作压线效果，如下图所示。

第九章CSS布局与浏览器兼容性（6学时）

[知识点]

?????

常见CSS网页布局通栏布局

CSShack分类IE条件解释常见IE6BUG

博学谷——让IT教学更简单，让IT学习更有效

?盒子外边距合并

[重点]

?通栏布局?CSShack

?常见IE6BUG

[难点]

?CSShack

[基本要求]

????

熟悉网页常见的布局把握网页通栏布局技巧把握CSShack

熟悉IE6下常见的BUG

第十章实战开发(上)—传智播客设计学院首页面（6学时）

[知识点]

???????

建立站点页面分析首页切图制作头部制作banner制作主