《网页设计与制作HTMLCSS》教学大纲.docx

1、网页设计与制作HTMLCSS教学大纲网页设计与制作(HTML+CSS)课程教学大纲（课程英文名称）课程编号：201409210011学 分：5学分学 时： 64学时 （其中：讲课学时：45 上机学时： 19 ）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计 javascript网页特效适用专业：信息及其计算机相关专业开课部门：计算机系一、课程的性质与目标网页设计与制作(HTML+CSS)是面向计算机相关专业的一门专业基础课，涉及计算机基础、互联网等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业

2、，门户，电商类网站。二、课程的主要内容及基本要求第一章 HTML与CSS网页设计概述（4学时）知 识 点 Web的基础知识 HTMLl简介 CSS简介 常用浏览器介绍 Dreamweaver 工具使用 利用Dreamweaver创建第一个页面重 点 HTML简介 Dreamweaver工具使用难 点 Dreamweaver工具 创建第一个页面基本要求 了解HTML版本的发展历程 掌握Dreamweaver工具的使用，能够使用Dreamweaver创建一个包含html结构和CSS样式的简单网页。第二章 HTML入门（6学时）知 识 点 HTML基本语法结构 HTML 标记属性 HTML 常用文本

3、控制标记 HTML 文本格式化标记 HTML 图像标记 HTML 相对路径和绝对路径 HTML 图文混排技巧重 点 HTML基本语法结构 HTML 常用文本控制标记 HTML 图像标记 HTML 相对路径和绝对路径难 点 HTML 标记属性的使用 HTML 相对路径和绝对路径基本要求 掌握HTML基本语法结构 掌握HTML中常用的文本标记 区分什么是相对路径和绝对路径 掌握HTML图像标记的使用 掌握图片混排常用技巧阶段案例使用HTML文本控制标记、HTML图像标记及相关标记的属性实现网页中常见的图文混排效果，如下图所示。第三章 CSS 入门（8学时）知 识 点 CSS入门知识 CSS样式规则

4、 CSS样式表书写位置 CSS基础选择器 CSS字体样式属性 CSS样式外观属性 CSS复合选择器 CSS层叠性和优先级重 点 CSS样式规则 CSS基础和复合选择器 CSS层叠性和优先级难 点 CSS复合选择器 CSS优先级基本要求 理解CSS语法结构 了解CSS在网页中的重要性 熟悉CSS书写的位置 掌握CSS基础和复合选择器 掌握CSS层叠性和优先级阶段案例通过CSS文本样式属性控制网页中的文本，制作网页中常见的新闻页面，效果如下图所示。第四章 盒子模型（6学时）知 识 点 盒子模型理论知识 CSS盒子模型属性 元素类型的分类 元素类型的相互转换 盒子外边距合并问题重 点 盒子模型属性

5、元素类型分类 元素类型相互转换难 点 盒子模型复合属性 盒子模型总的宽度和高度 元素类型及其转换基本要求 理解盒子模型 掌握盒子模型属性 掌握盒子模型中复合属性的写法 掌握元素类型及其转换方法阶段案例综合运用盒子模型的相关属性，制作网页中常见的盒子效果，如下图所示。第五章 列表与超链接（4学时）知 识 点 有序列表 无序列表 自定义列表 CSS控制列表样式 超链接 锚点链接 CSS控制链接样式重 点 无序列表 自定义列表 CSS控制列表样式难 点 CSS控制列表样式基本要求 掌握列表的三种分类 熟悉列表的嵌套 熟练掌握CSS控制列表样式 掌握链接标记的使用 掌握结构与样式相分离的写法 阶段案例

6、使用列表与超链接标记组织页面，并通过CSS控制列表与超链接的样式实现网页中常见的新闻列表效果，如下图所示。新闻列表效果展示鼠标以上链接文本效果第六章 表格与表单（4学时）知 识 点 表格标记 表格结构 CSS控制表格 表单标签 表单控件 CSS控制表单重 点 表格标签 CSS控制表格和表单 表单标签难 点 表单标签 CSS控制表单 基本要求 掌握表格标记的使用 了解表格结构 掌握表单标记的使用 掌握CSS控制表单标记阶段案例使用表格与表单组织页面，并通过CSS控制表格与表单的显示样式，制作网页中常见的注册界面，效果如下图所示。第七章 浮动与定位（8学时）知 识 点 元素的浮动 清除浮动 Ove

7、rflow属性 元素的定位 z-index属性重 点 元素浮动 元素定位难 点 清除浮动 元素定位的分类基本要求 掌握元素浮动 熟悉清除浮动的方法 掌握元素定位及其分类 熟悉z-index设置层的叠放次序 阶段案例综合运用元素的浮动与定位，制作传智播客设计学院首页banner，效果如下图所示。第八章 CSS高级技巧（6学时）知 识 点 CSS精灵技术 CSS滑动门技术 margin负值的应用重 点 CSS精灵技术 CSS滑动门技术 margin负值的应用难 点 CSS精灵原理分析 CSS滑动门原理分析与切图 运用margin负值综合运用基本要求 掌握精灵图的制作 掌握利用CSS对精灵图片进行背

8、景设置 掌握常见滑动门布局 掌握利用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第十章 实战开

9、发(上)传智播客设计学院首页面（6学时）知 识 点 建立站点 页面分析 首页切图 制作头部 制作banner 制作主体 制作底部版权重 点 制作页面首页难 点 制作页面首页基本要求 了解一个网站制作流程 熟悉根据效果图分析页面布局 掌握切图技巧 掌握首页布局实战开发综合运用HTML与CSS的基础知识，制作传智播客设计学院首页，效果如下图所示。第十一章 实战开发(下)传智播客设计学院子页面（6学时）知 识 点 利用Dreamweaver制作模板文件 使用模板文件 引用模板文件 利用模板文件制作列表文件重 点 利用Dreamweaver制作模板文件 利用模板文件生成列表页面难 点 利用Dreamw

10、eaver制作模板文件 基本要求 掌握利用Dreamweaver制作模板文件 熟悉模板文件引用 掌握利用模板文件生成其他页面实战开发综合运用HTML与CSS的基础知识，制作关于我们页面、课程介绍页面、课程介绍详情页面，效果图分别如下。 关于我们页面效果图 课程介绍页面效果图课程介绍详情页面效果图三、学时分配章目讲课实验上机合计第一章 概述3学时1学时4学时第二章 HTML入门4学时2学时6学时第三章 CSS入门6学时2学时8学时第四章 盒子模型4学时2学时6学时第五章 列表与超链接3学时1学时4学时第六章 表格和表单3学时1学时4学时第七章 浮动和定位6学时2学时8学时第八章 CSS高级技巧4

11、学时2学时6学时第九章 CSS布局与兼容性4学时2学时6学时第十章 实战开发14学时2学时6学时第十一章 实战开发24学时2学时6学时合计45学时19学时64学时四、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。五、选用教材和主要参考书本大纲是根据教材网页设计与制作(HTML+CSS)所设计的。六、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。撰写人： 审定人：批准人： 执行时间：