网站设计与制作大纲.docx

1、网站设计与制作大纲网站设计与制作教学大纲课程编号：070662B课程类型：通识教育必修课 通识教育选修课专业必修课 专业选修课学科基础课总学时：32 讲课学时：16 实验（上机）学时：16学分：2适用对象：计算机科学与技术先修课程：无一、教学目标网站设计与制作培养学生掌握Web前端开发技术（HTML+CSS）的课程。通过本课程的学习，使学生深刻理解HTML和CSS技术。在实践训练中，使学生掌握HTML的基本结构、文本对象的格式化，图像、图形和链接的处理，CSS的基本概念、使用CSS进行格式化和页面布局的方法，动态效果的处理，以及列表、表格和表单的生成。目标1：掌握HTML的基本结构，文本对象和

2、非文本对象的处理目标2：CSS的基本概念，文本格式化和页面布局目标3：动态效果的处理，以及列表、表格和表单的生成二、教学内容及其与毕业要求的对应关系1、教学内容本课程侧重HTML和CSS两方面内容的讲解，Web开发概述可粗讲。HTML的基本结构需精讲，文本对象的格式化和图形、链接的处理需精讲，图形的处理可粗讲。CSS的基本概念需精讲，使用CSS进行格式化和页面布局的方法需精讲。动态效果的处理可粗讲。列表、表格和表单的生成需精讲粗讲。2、教学方法与手段根据教学目标，拟采用的教学方法有：课堂讲解基本概念和核心知识，讲授和讨论相结合领会知识要点，案例教学训练解决问题的能力。为使学生掌握快速Web前端

3、开发技术，上机实践需结合课堂教学内容，加大练习力度，并选用有针对性的案例，对学生进行训练。在上机实践的基础上，鼓励课下多加练习和应用。通过本课程的学习，使学生能够掌握Web前端技术基础知识，培养动手实践能力，为后续Web前后端开发打下基础。3、实践教学环节本课程有大量的内容需要借助于在线学习资源，课下多次反复亲自上机实践。建议自学时安装相关开发软件进行自学（教师应提示学生安装哪些软件）。通过上机学习本课程的知识点，掌握前端网页设计的技术与方法。4、课后作业及自学要求为有效学习本课程，要求学生首先具备计算机基础、程序设计基础等方面的基础知识。自学时应该熟读大纲，提纲挈领地掌握网页设计开发的内容，

4、随后，按照大纲熟读教参，还要参考大量的参考文献，通过课后思考和上机练习题进行多角度和层次的反复学习。5、与毕业要求的对应关系通过本课程的学习学生能够系统地掌握HTML5+CSS网页设计开发的基本理论及项目开发技术，具备利用现代化工具解决实际互联网应用工程前端项目的分析能力，具备互联网应用开发从业人员的专业素质和职业道德规范。毕业后能够迅速参与到互联网开发工程项目的研究、设计与管理的实际工作中去。6、教学中其它需要说明的问题课程学时较少，教师可根据实际情况选择授课内容和实践内容。三、各教学环节学时分配教学课时分配序号章节内容讲课实验其他合计1第一章 概论112第二章 Web页面构成1233第三章

5、 HTML基本结构2134第四章 文本对象1235第五章 图像与图形1236第六章 链接1127第七章 CSS基本概念2138第八章 应用CSS1129第九章 CSS页面布局12310第十章 列表21311第十一章 动态效果11212第十二章 表格11213第十三章 表单112合计161632四、教学内容第一章 概论第一节 Web开发概述1. 互联网、万维网概述2. Web服务器简述与网站类型3. Web浏览器简述第二节 超文本标记语言和级联样式表1. HTML发展和版本概述2. HTML构成和标签3. CSS概述第三节 网站开发工具和测试1. 开发工具简介2. 浏览器Web开发扩展3. 网站

6、校验与测试教学重点、难点：互联网、万维网的发展简史，常见的Web服务器与浏览器，常见的网站类型，HTML和CSS，主流的网站开发工具课程的考核要求：通过本章的学习，使学生了解互联网、万维网的发展简史；理解Web服务器与浏览器的构成和其之间的联系；了解常见的网站类型；理解HTML和CSS的基本结构，了解主流的网站开发工具。复习思考题：1. 简述Web前端开发的主要技术2. 列举常见的Web浏览器，并试述主要特征3. 什么是XHTML和DHTML？ 4. 简述HTML的构成5. 简述网站前端开发工具第二章 Web页面构成第一节 HTML标记1. 文档类型与HTML风格2. 对象、属性和值3. 对象

7、层级关系第二节 文本对象1. 文本编码2. 空格与空行3. 保留字符与特殊字符第三节 非文本对象1. 图形、图像与视频2. 链接3. 保留字符与特殊字符第四节 文件与资源1. 文件命名2. 统一资源定位教学重点、难点：HTML文档类型与风格，对象、属性和值的概念、对象的层级关系，文本对象与非文本对象，文件与资源课程的考核要求：通过本章的学习，使学生了解HTML文档类型与风格；掌握对象、属性和值的概念，理解对象的层级关系；理解文本类型文件和非文本类型文件的组成；能够对HTML文件进行命名和资源定位。复习思考题：1. 举例介绍对象、属性和值的概念2. 试述HTML中的对象层级关系3. 试列举3中常

8、见的文本编码方式4. 如何显示保留字符&、？5. 简述网页命名的基本规范第三章 HTML基本结构第一节 文档类型与HTML框架1. 文档类型2. html、head和body标签3. 标题、命名与注释第二节 页面分割1. div标签2. HTML5新标签3. 可访问的互联网应用程序教学重点、难点：HTML的框架结构，HTML中的标题、命名与注释，页面的分割，可访问的互联网应用程序课程的考核要求：通过本章的学习，使学生了解HTML的框架结构；掌握HTML中的标题、命名与注释；能够进行页面的分割；理解可访问的互联网应用程序。复习思考题：1. 简述HTML的框架结构2. 列举HTML中标题对应的标签

9、3. 简述HTML中的命名方法4. 试列举5种HTML中的页面分割方法，并简述功能5. 试列举3种HTML中的role属性对应的值，并简述功能第四章 文本对象第一节 文本格式化1. 字体、字号与字形2. 段落与对齐3. 换行4. span标签与预格式化5. 作者联系信息6. 时间与日期第二节 特殊格式1. 等宽字体2. 文本删除线3. 角标4. 引用5. 缩写6. 高亮第三节 高级内容1. flow与phrasing对象2. 页面校验教学重点、难点：常见的文本格式化方法；特殊格式的处理；flow与phrasing对象；页面校验课程的考核要求：通过本章的学习，使学生掌握常见的文本格式化方法；能够

10、对本文进行特殊格式处理；理解flow与phrasing对象；能够进行页面校验。复习思考题：1. 列举3中控制文本斜体的方法2. 简述span标签的作用3. 简述高亮文本与在文本上加删除线的方法4. 试述flow与phrasing对象的区别第五章 图像与图形第一节 图像概述1. Web中常用图像格式2. 图像大小与分辨率3. 图像编辑器4. 图像路径与命名第二节 图像标签与属性1. alt属性2. 图像宽、高和边框3. 图像对齐4. 网站图标5. 背景图像6. 花式字体7. 图标题第三节 图形1. 可缩放矢量图形2. svg标签教学重点、难点：Web中常用图像格式；图像大小与分辨率的概念；图像标

11、签与属性；可缩放矢量图形课程的考核要求：通过本章的学习，使学生了解Web中常用图像格式；理解图像大小与分辨率；能够利用图像编辑器进行简单编辑，掌握图像标签与属性，了解可缩放矢量图形。复习思考题：1. 试列举3种Web中常用图像格式2. 试列举3种图像编辑器3. 简述设置图像宽、高和边框的方法第六章 链接第一节 链接概述1. 链接的构成2. 链接到页面3. 链接到锚点4. 其它类型的链接第二节 链接属性与高级技巧1. 标题与rel属性2. 链接定位3. 键盘快捷键4. Tab顺序5. 图像作为链接6. 缩略图7. 图像地图教学重点、难点：链接的构成；链接的类型；链接属性；链接的快捷键；链接的Ta

12、b顺序；图像作为链接；缩略图和图像地图课程的考核要求：通过本章的学习，使学生了解链接的构成；理解链接的类型；能够建立链接，理解链接的属性，掌握如何建立链接的快捷键，调整链接的Tab顺序；了解以图像作为链接、缩略图和图像地图。复习思考题：1. 列举链接的target类型2. 解释rel属性的含义3. 如何设置链接的快捷键4. 如何设置链接的Tab顺序第七章 CSS基本概念第一节 CSS构成1. CSS基本规则2. CSS规则结构3. 注释4. CSS继承5. 属性值第二节 CSS实战1. 规则冲突2. CSS问题调试3. 行内样式表4. 内部样式表5. 外部样式表6. 备用样式表7. 媒体特定的

13、样式表教学重点、难点：CSS基本规则和结构；CSS的继承和属性值；CSS的规则冲突和调试；CSS的使用；备用样式表；媒体特定的样式表课程的考核要求：通过本章的学习，使学生了解CSS基本规则和结构；理解CSS的继承关系和属性值设置；能够利用CSS的问题调试，掌握行内样式表、内部样式表、外部样式表的使用方法，了解备用样式表和媒体特定的样式表。复习思考题：1. 试举例说明CSS的基本规则2. 试列举5种CSS属性和对应的可取值3. 简述2种外部样式表的使用方法第八章 应用CSS 第一节 选择器1. 标签选择器2. 类选择器3. ID选择器4. 选择器的混合5. 选择器的继承6. 属性选择器7. 伪类

14、选择器与动态链接8. 伪对象选择器9. 组选择器10. 复杂选择器第二节 样式格式化1. 字体、字号与字形2. 行距与字符间距3. 段落缩进与对齐4. 字符大小写5. 文本修饰6. 颜色与背景色7. 背景图像与属性教学重点、难点：CSS的选择器；使用CSS格式化样式课程的考核要求：通过本章的学习，使学生理解CSS中的选择器；能够使用CSS格式化样式。复习思考题：1. 试列举3种CSS选择器，并举例说明2. 解释子选择器和兄弟选择器的作用和用法3. 解释伪类选择器和伪对象选择器的作用和用法4. 解释组选择器和复杂选择器的作用和用法5. 试列举5种样式格式化的方法，并举例说明第九章 CSS页面布局

15、第一节 页面布局概述1. CSS盒子模型2. 页面的基本结构3. 页面布局的向前兼容性第二节 CSS布局1. 浮动对象的清除2. 宽高与溢出3. 边距与边框4. 填充5. 垂直对齐方式6. 光标样式7. 定位教学重点、难点：CSS盒子模型；页面的基本结构；CSS布局课程的考核要求：通过本章的学习，使学生了解CSS盒子模型；理解页面的基本结构；能够利用CSS进行页面布局。复习思考题：1. 试述CSS盒子模型2. 试述页面的基本结构3. 试列举5种利用CSS进行页面布局的方法，并举例说明第十章 列表第一节 无标号列表1. 构造无标号列表2. 改变无标号列表样式第二节 有标号列表1. 构造有标号列表

16、2. 改变无标号列表样式第三节 嵌套列表1. 构造嵌套列表2. 改变嵌套列表样式教学重点、难点：无标号列表；有标号列表；嵌套列表课程的考核要求：通过本章的学习，使学生理解无标号列表、有标号列表和嵌套列表；能够构造无标号列表、有标号列表和嵌套列表，并改变其样式。复习思考题：1. 举例简述改变无标号列表样式的方法2. 举例简述改变有标号列表样式的方法第十一章 动态效果第一节 元素的动态效果1. 显示隐藏元素2. rollover效果3. 格式化链接列表4. 下拉菜单效果5. Fahrner图像替换第二节 增强效果1. 提供者前缀2. 梯度背景3. 多重背景图像4. 圆角5. 文本阴影6. 背景阴影

17、教学重点、难点：显示、隐藏元素；rollover效果；格式化链接列表；下拉菜单效果；Fahrner图像替换；梯度背景和多重背景图像；圆角、文本阴影和背景阴影课程的考核要求：通过本章的学习，使学生能够实现元素的动态效果和增强效果。复习思考题：1. 试列举3种元素的动态效果的控制方法，举例说明2. 简述提供者前缀的作用和用法第十二章 表格第一节 表格的构成与控制1. 表格的基本结构2. 边框样式3. 宽度控制4. 标题与表头5. 表格对齐6. 表格背景7. 文本混排第二节 单元格控制1. 单元格填充与留白2. 单元格宽高控制3. 单元格对齐4. 单元格背景5. 单元格边框6. 跨行与列教学重点、难

18、点：表格的构成与控制；单元格控制课程的考核要求：通过本章的学习，使学生了解表格的构成；掌握表格和单元格的控制方法。复习思考题：1. 试述表格的构成，并举例2. 试列举3种表格的控制方法，并举例3. 试列举3种单元格的控制方法，并举例第十三章 表单第一节 表单的构成与控制1. 表单的基本结构2. 提交按钮3. 文本域4. 密码域5. 邮箱、电话、URL与必须文本域6. 文本区域7. 复选框8. 单选按钮9. 选择菜单和列表10. 隐藏域11. 文件上传域12. 复位按钮13. 按钮上的图像第二节 表单控制1. Tab顺序2. 键盘导航与快捷键3. 禁用表单元素4. 只读元素5. 分组教学重点、难

19、点：表单的构成与控制课程的考核要求：通过本章的学习，使学生了解表单的构成；掌握表单的控制方法。复习思考题：1. 简述表单的构成2. 举例介绍5种表单控件五、考核方式、成绩评定本课程考核分为平时考核及期末考核两种形式。本课程平时成绩占30%，期末成绩占70%。平时考核采用课堂案例讨论和上机操作实践等方式。平时成绩的分配比例为：课堂测验、案例讨论、上机操作实践成绩各占10%。期末考核采用考查方式，形式为提交网页设计作品和课程设计报告。六、主要参考书及其他内容1 李东博HTML5+CSS3从入门到精通北京：清华大学出版社2013.62 Elizabeth Castro, Bruce Hyslop 著, 望以文 译HTML5与CSS3基础教程北京：人民邮电出版社2014.53 Ben Frain 著, 奇舞团 译响应式Web设计:HTML5和CSS3实战北京：人民邮电出版社2017.24 Andy Harris 著. HTML5 and CSS3 All-in-ONE for Dummies(3rd Edition).John Wiley&Sons, Inc.执笔人：周晓磊 教研室主任：徐天晟系教学主任审核签名：