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

《《网页设计与制作(HTML+CSS)》教学大纲.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、博学谷——让IT教学更简单，让IT学习更有效《网页设计与制作(HTML+CSS)》课程教学大纲（课程英文名称）课程编号：1学分：5学分学时：64学时（其中：讲课学时：45上机学时：19）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计javascript网页特效适用专业：信息及其计算机相关专业开课部门：计算机系一、课程的性质与目标《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课，涉及计算机基础、互联网等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来

2、方向，熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业，门户，电商类网站。二、课程的主要内容及基本要求第一章HTML与CSS网页设计概述（4学时）[知识点]ØWeb的基础知识ØHTMLl简介ØCSS简介Ø常用浏览器介绍ØDreamweaver工具使用Ø利用Dreamweaver创建第一个页面[重点]ØHTML简介博学谷——让IT教学更简单，让IT学习更有效ØDreamweaver工具使用[难点]ØDreamweaver工具创建第一个页面[基本要求]Ø了解HTML版本的发展历程Ø掌握Dre

3、amweaver工具的使用，能够使用Dreamweaver创建一个包含html结构和CSS样式的简单网页。第二章HTML入门（6学时）[知识点]ØHTML基本语法结构ØHTML标记属性ØHTML常用文本控制标记ØHTML文本格式化标记ØHTML图像标记ØHTML相对路径和绝对路径ØHTML图文混排技巧[重点]ØHTML基本语法结构ØHTML常用文本控制标记ØHTML图像标记ØHTML相对路径和绝对路径[难点]ØHTML标记属性的使用ØHTML相对路径和绝对路径[基本要求]Ø掌握HTML基本语法结构Ø掌握

4、HTML中常用的文本标记Ø区分什么是相对路径和绝对路径Ø掌握HTML图像标记的使用Ø掌握图片混排常用技巧[阶段案例]使用HTML文本控制标记、HTML图像标记及相关标记的属性实现网页中常见的图文混排效果，如下图所示。博学谷——让IT教学更简单，让IT学习更有效第三章CSS入门（8学时）[知识点]ØCSS入门知识ØCSS样式规则ØCSS样式表书写位置ØCSS基础选择器ØCSS字体样式属性ØCSS样式外观属性ØCSS复合选择器ØCSS层叠性和优先级[重点]ØCSS样式规则ØCSS基础和复合选择器ØCSS层叠

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

6、难点]Ø盒子模型复合属性Ø盒子模型总的宽度和高度Ø元素类型及其转换[基本要求]Ø理解盒子模型Ø掌握盒子模型属性Ø掌握盒子模型中复合属性的写法Ø掌握元素类型及其转换方法[阶段案例]综合运用盒子模型的相关属性，制作网页中常见的盒子效果，如下图所示。博学谷——让IT教学更简单，让IT学习更有效第五章列表与超链接（4学时）[知识点]Ø有序列表Ø无序列表Ø自定义列表ØCSS控制列表样式Ø超链接Ø锚点链接ØCSS控制链接样式[重点]Ø无序列表Ø自定义列表ØCSS控制列表样式[难点]ØCSS控制列表样式[基本要求]Ø

7、掌握列表的三种分类Ø熟悉列表的嵌套Ø熟练掌握CSS控制列表样式Ø掌握链接标记的使用Ø掌握结构与样式相分离的写法[阶段案例]使用列表与超链接标记组织页面，并通过CSS控制列表与超链接的样式实现网页中常见的新闻列表效果，如下图所示。博学谷——让IT教学更简单，让IT学习更有效新闻列表效果展示鼠标以上链接文本效果第六章表格与表单（4学时）[知识点]Ø表格标记Ø表格结构ØCSS控制表格Ø表单标签Ø表单控件ØCSS控制表单[重点]Ø表格标签ØCSS控制表格和表单Ø表单标签[难点]Ø表单标签ØCSS控制表单[基本要

8、求]Ø掌握表格标记的使用Ø了解表格结构Ø掌握表单标记的使用Ø掌握CSS控制表单标记[阶段案例]使用表格与表单组织页面，并通过CSS控制表格与表单的显示样式，制作网页中常见的注册界面，效果如下图所示。博学谷——让IT教学更简单，让IT学习更有效第七章浮动与定位（8学时）[知识点]Ø元素的浮动Ø清除浮动ØOverflow属性Ø元素的定位Øz-index属性[重点]Ø元素浮动Ø元素定位[难点]Ø清除浮动Ø元素定位的分类博学谷——让IT教学更简单，