《网页设计与制作(HTML+CSS)》教学大
纲
精品好资料-如有侵权请联系网站删除 《网页设计与制作(HTML+CSS)》课程教学大纲
（课程英文名称）
课程编号：201409210011 学 分：5学分
学 时： 64学时 （其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计 javascript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系
一、课程的性质与目标
《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课，涉及计算机基础、互联网等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业，门户，电商类网站。
二、课程的主要内容及基本要求
第一章 HTML与CSS网页设计概述（4学时）
[知 识 点] ➢ ➢ ➢ ➢ ➢ ➢
Web的基础知识 HTMLl简介 CSS简介
常用浏览器介绍
Dreamweaver 工具使用
利用Dreamweaver创建第一个页面
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 [重 点]
➢ HTML简介
➢ 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图像标记及相关标记的属性实现网页中常见的图文混排效果，如下图所示。
第三章 CSS 入门（8学时）
[知 识 点] ➢ ➢ ➢ ➢ ➢ ➢ ➢ ➢
[重 点]
➢ CSS样式规则
➢ CSS基础和复合选择器 ➢ CSS层叠性和优先级
[难 点]
精品好资料-如有侵权请联系网站删除
CSS入门知识 CSS样式规则
CSS样式表书写位置 CSS基础选择器 CSS字体样式属性 CSS样式外观属性 CSS复合选择器 CSS层叠性和优先级
精品好资料-如有侵权请联系网站删除 ➢ CSS复合选择器 ➢ CSS优先级 [基本要求]
➢ 理解CSS语法结构 ➢ 了解CSS在网页中的重要性 ➢ 熟悉CSS书写的位置 ➢ 掌握CSS基础和复合选择器 ➢ 掌握CSS层叠性和优先级 [阶段案例]
通过CSS文本样式属性控制网页中的文本，制作网页中常见的新闻页面，效果如下图所示。
第四章 盒子模型（6学时）
[知 识 点] ➢ ➢ ➢ ➢ ➢
盒子模型理论知识 CSS盒子模型属性 元素类型的分类 元素类型的相互转换 盒子外边距合并问题
[重 点]
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 ➢ 盒子模型属性 ➢ 元素类型分类 ➢ 元素类型相互转换
[难 点]
➢ 盒子模型复合属性 ➢ 盒子模型总的宽度和高度 ➢ 元素类型及其转换 [基本要求] ➢ 理解盒子模型 ➢ 掌握盒子模型属性
➢ 掌握盒子模型中复合属性的写法 ➢ 掌握元素类型及其转换方法 [阶段案例]
综合运用盒子模型的相关属性，制作网页中常见的盒子效果，如下图所示。
第五章 列表与超链接（4学时）
[知 识 点] ➢ ➢ ➢ ➢ ➢
有序列表 无序列表 自定义列表
CSS控制列表样式 超链接
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 ➢ 锚点链接
➢ CSS控制链接样式
[重 点]
➢ 无序列表 ➢ 自定义列表
➢ CSS控制列表样式
[难 点]
➢ CSS控制列表样式 [基本要求]
➢ 掌握列表的三种分类 ➢ 熟悉列表的嵌套
➢ 熟练掌握CSS控制列表样式 ➢ 掌握链接标记的使用 ➢ 掌握结构与样式相分离的写法 [阶段案例]
使用列表与超链接标记组织页面，并通过CSS控制列表与超链接的样式实现网页中常见的新闻列表效果，如下图所示。
新闻列表效果展示
鼠标以上链接文本效果
第六章 表格与表单（4学时）
[知 识 点]
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 ➢ ➢ ➢ ➢ ➢ ➢
表格标记 表格结构 CSS控制表格 表单标签 表单控件 CSS控制表单
[重 点]
➢ 表格标签
➢ CSS控制表格和表单 ➢ 表单标签
[难 点] ➢ 表单标签 ➢ CSS控制表单
[基本要求]
➢ 掌握表格标记的使用 ➢ 了解表格结构 ➢ 掌握表单标记的使用 ➢ 掌握CSS控制表单标记 [阶段案例]
使用表格与表单组织页面，并通过CSS控制表格与表单的显示样式，制作网页中常见的注册界面，效果如下图所示。
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除
第七章 浮动与定位（8学时）
[知 识 点] ➢ ➢ ➢ ➢ ➢
元素的浮动 清除浮动
Overflow属性 元素的定位 z-index属性
[重 点] ➢ 元素浮动 ➢ 元素定位
[难 点] ➢ 清除浮动
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 ➢ 元素定位的分类 [基本要求] ➢ 掌握元素浮动 ➢ 熟悉清除浮动的方法 ➢ 掌握元素定位及其分类 ➢ 熟悉z-index设置层的叠放次序 [阶段案例]
综合运用元素的浮动与定位，制作传智播客设计学院首页banner，效果如下图所示。
第八章 CSS高级技巧（6学时）
[知 识 点]
➢ CSS精灵技术 ➢ CSS滑动门技术 ➢ margin负值的应用
[重 点]
➢ CSS精灵技术 ➢ CSS滑动门技术 ➢ margin负值的应用
[难 点]
➢ CSS精灵原理分析
➢ CSS滑动门原理分析与切图
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 ➢ 运用margin负值综合运用 [基本要求]
➢ 掌握精灵图的制作
➢ 掌握利用CSS对精灵图片进行背景设置 ➢ 掌握常见滑动门布局
➢ 掌握利用margin负值进行布局技巧 [案例实战1]
使用CSS精灵，制作精品课程模块，效果如下图所示。
[案例实战2]
使用CSS滑动门，制作梯形网站导航，效果如下图所示。
[案例实战3]
应用margin的负值，制作压线效果，如下图所示。
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除
第九章 CSS布局与浏览器兼容性（6学时）
[知 识 点] ➢ ➢ ➢ ➢ ➢ ➢
常见CSS网页布局 通栏布局
CSS hack 分类 IE条件注释 常见IE6 BUG 盒子外边距合并
[重 点] ➢ 通栏布局 ➢ CSS hack
➢ 常见IE6 BUG
[难 点] ➢ CSS hack [基本要求]
➢ 熟悉网页常见的布局 ➢ 掌握网页通栏布局技巧 ➢ 掌握 CSS hack ➢ 熟悉 IE6 下常见的BUG
第十章 实战开发(上)—传智播客设计学院首页面（6学时）
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 [知 识 点] ➢ ➢ ➢ ➢ ➢ ➢ ➢
建立站点 页面分析 首页切图 制作头部 制作banner 制作主体 制作底部版权
[重 点] ➢ 制作页面首页
[难 点] ➢ 制作页面首页 [基本要求]
➢ 了解一个网站制作流程 ➢ 熟悉根据效果图分析页面布局 ➢ 掌握切图技巧 ➢ 掌握首页布局 [实战开发]
综合运用HTML与CSS的基础知识，制作传智播客设计学院首页，效果如下图所示。
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除
第十一章 实战开发(下)—传智播客设计学院子页面（6学时）
[知 识 点] ➢ ➢ ➢ ➢
利用Dreamweaver制作模板文件 使用模板文件 引用模板文件
利用模板文件制作列表文件
[重 点]
➢ 利用Dreamweaver制作模板文件 ➢ 利用模板文件生成列表页面
[难 点]
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 ➢ 利用Dreamweaver制作模板文件 [基本要求]
➢ 掌握利用Dreamweaver制作模板文件 ➢ 熟悉模板文件引用
➢ 掌握利用模板文件生成其他页面 [实战开发]
综合运用HTML与CSS的基础知识，制作关于我们页面、课程介绍页面、课程介绍详情页面，效果图分别如下。
关于我们页面效果图
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除
课程介绍页面效果图
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 课程介绍详情页面效果图
三、学时分配
章目 第一章 概述 第二章 HTML入门 第三章 CSS入门 第四章 盒子模型 第五章 列表与超链接 第六章 表格和表单 第七章 浮动和定位 第八章 CSS高级技巧 第九章 CSS布局与兼容性 第十章 实战开发1 第十一章 实战开发2 合计 讲课 3学时 4学时 6学时 4学时 3学时 3学时 6学时 4学时 4学时 4学时 4学时 45学时 实验 上机 1学时 2学时 2学时 2学时 1学时 1学时 2学时 2学时 2学时 2学时 2学时 19学时 合计 4学时 6学时 8学时 6学时 4学时 4学时 8学时 6学时 6学时 6学时 6学时 64学时
四、考核模式与成绩评定办法
本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。
五、选用教材和主要参考书
本大纲是根据教材《网页设计与制作(HTML+CSS)》所设计的。
六、大纲说明
精品好资料-如有侵权请联系网站删除
精品好资料-如有侵权请联系网站删除 本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。
撰写人： 审定人： 批准人： 执行时间：
精品好资料-如有侵权请联系网站删除
因篇幅问题不能全部显示，请点此查看更多更全内容