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

博学谷——让IT教学更简单，让IT学习更有效《网页设计与制作(HTML+CSS)》课程教学大纲（课程英文名称）课程编号：201409210011学分：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制作主体制作底部版权[重点]制作页面首页[难点]制作页面首页[基本要求]了解一个网站制作流程熟悉根据效果图分析页面布局掌握切图技巧掌握首页布局[实战开发]综合运用HTML与CSS的基础知识，制作传智播客设计学院首页，效果如下图所示。博学谷——让IT教学更简单，让IT学习更有效第十一章实战开发(下)—传智播客设计学院子页面（6学时）[知识点]利用Dreamweaver制作模板文件使用模板文件引用模板文件利用模板文件制作列表文件[重点]利用Dreamweaver制作模板文件利用模板文件生成列表页面[难点]利用Dreamweaver制作模板文件[基本要求]博学谷——让IT教学更简单，让IT学习更有效掌握利用Dreamweaver制作模板文件熟悉模板文件引用掌握利用模板文件生成其他页面[实战开发]综合运用HTML与CSS的基础知识，制作关于我们页面、课程介绍页面、课程介绍详情页面，效果图分别如下。关于我们页面效果图博学谷——让IT教学更简单，让IT学习更有效课程介绍页面效果图博学谷——让IT教学更简单，让IT学习更有效博学谷——让IT教学更简单，让IT学习更有效课程介绍详情页面效果图三、学时分配章目讲课实验上机合计第一章概述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学时2学时6学时第九章CSS布局与兼容性4学时2学时6学时第十章实战开发14学时2学时6学时第十一章实战开发24学时2学时6学时合计45学时19学时64学时四、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、实验和上机成绩（20%）。五、选用教材和主要参考书本大纲是根据教材《网页设计与制作(HTML+CSS)》所设计的。六、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。撰写人：审定人：批准人：执行时间：