网站设计与制作大纲.docx
《网站设计与制作大纲.docx》由会员分享，可在线阅读，更多相关《网站设计与制作大纲.docx（14页珍藏版）》请在冰豆网上搜索。
网站设计与制作大纲
《网站设计与制作》教学大纲
课程编号：
070662B
课程类型：
□通识教育必修课□通识教育选修课
□专业必修课☑专业选修课
□学科基础课
总学时：
32讲课学时：
16实验（上机）学时：
16
学 分：
2
适用对象：
计算机科学与技术
先修课程：
无
一、教学目标
网站设计与制作培养学生掌握Web前端开发技术（HTML+CSS）的课程。
通过本课程的学习，使学生深刻理解HTML和CSS技术。
在实践训练中，使学生掌握HTML的基本结构、文本对象的格式化，图像、图形和链接的处理，CSS的基本概念、使用CSS进行格式化和页面布局的方法，动态效果的处理，以及列表、表格和表单的生成。
目标1：
掌握HTML的基本结构，文本对象和非文本对象的处理
目标2：
CSS的基本概念，文本格式化和页面布局
目标3：
动态效果的处理，以及列表、表格和表单的生成
二、教学内容及其与毕业要求的对应关系
1、教学内容
本课程侧重HTML和CSS两方面内容的讲解，Web开发概述可粗讲。
HTML的基本结构需精讲，文本对象的格式化和图形、链接的处理需精讲，图形的处理可粗讲。
CSS的基本概念需精讲，使用CSS进行格式化和页面布局的方法需精讲。
动态效果的处理可粗讲。
列表、表格和表单的生成需精讲粗讲。
2、教学方法与手段
根据教学目标，拟采用的教学方法有：
课堂讲解基本概念和核心知识，讲授和讨论相结合领会知识要点，案例教学训练解决问题的能力。
为使学生掌握快速Web前端开发技术，上机实践需结合课堂教学内容，加大练习力度，并选用有针对性的案例，对学生进行训练。
在上机实践的基础上，鼓励课下多加练习和应用。
通过本课程的学习，使学生能够掌握Web前端技术基础知识，培养动手实践能力，为后续Web前后端开发打下基础。
3、实践教学环节
本课程有大量的内容需要借助于在线学习资源，课下多次反复亲自上机实践。
建议自学时安装相关开发软件进行自学（教师应提示学生安装哪些软件）。
通过上机学习本课程的知识点，掌握前端网页设计的技术与方法。
4、课后作业及自学要求
为有效学习本课程，要求学生首先具备计算机基础、程序设计基础等方面的基础知识。
自学时应该熟读大纲，提纲挈领地掌握网页设计开发的内容，随后，按照大纲熟读教参，还要参考大量的参考文献，通过课后思考和上机练习题进行多角度和层次的反复学习。
5、与毕业要求的对应关系
通过本课程的学习学生能够系统地掌握HTML5+CSS网页设计开发的基本理论及项目开发技术，具备利用现代化工具解决实际互联网应用工程前端项目的分析能力，具备互联网应用开发从业人员的专业素质和职业道德规范。
毕业后能够迅速参与到互联网开发工程项目的研究、设计与管理的实际工作中去。
6、教学中其它需要说明的问题
课程学时较少，教师可根据实际情况选择授课内容和实践内容。
三、各教学环节学时分配
教学课时分配
序号
章节内容
讲课
实验
其他
合计
1
第一章概论
1
1
2
第二章Web页面构成
1
2
3
3
第三章HTML基本结构
2
1
3
4
第四章文本对象
1
2
3
5
第五章图像与图形
1
2
3
6
第六章链接
1
1
2
7
第七章CSS基本概念
2
1
3
8
第八章应用CSS
1
1
2
9
第九章CSS页面布局
1
2
3
10
第十章列表
2
1
3
11
第十一章动态效果
1
1
2
12
第十二章表格
1
1
2
13
第十三章表单
1
1
2
合计
16
16
32
四、教学内容
第一章概论
第一节Web开发概述
1.互联网、万维网概述
2.Web服务器简述与网站类型
3.Web浏览器简述
第二节超文本标记语言和级联样式表
1.HTML发展和版本概述
2.HTML构成和标签
3.CSS概述
第三节网站开发工具和测试
1.开发工具简介
2.浏览器Web开发扩展
3.网站校验与测试
教学重点、难点：
互联网、万维网的发展简史，常见的Web服务器与浏览器，常见的网站类型，HTML和CSS，主流的网站开发工具
课程的考核要求：
通过本章的学习，使学生了解互联网、万维网的发展简史；理解Web服务器与浏览器的构成和其之间的联系；了解常见的网站类型；理解HTML和CSS的基本结构，了解主流的网站开发工具。
复习思考题：
1.简述Web前端开发的主要技术
2.列举常见的Web浏览器，并试述主要特征
3.什么是XHTML和DHTML？
4.简述HTML的构成
5.简述网站前端开发工具
第二章Web页面构成
第一节HTML标记
1.文档类型与HTML风格
2.对象、属性和值
3.对象层级关系
第二节文本对象
1.文本编码
2.空格与空行
3.保留字符与特殊字符
第三节非文本对象
1.图形、图像与视频
2.链接
3.保留字符与特殊字符
第四节文件与资源
1.文件命名
2.统一资源定位
教学重点、难点：
HTML文档类型与风格，对象、属性和值的概念、对象的层级关系，文本对象与非文本对象，文件与资源
课程的考核要求：
通过本章的学习，使学生了解HTML文档类型与风格；掌握对象、属性和值的概念，理解对象的层级关系；理解文本类型文件和非文本类型文件的组成；能够对HTML文件进行命名和资源定位。
复习思考题：
1.举例介绍对象、属性和值的概念
2.试述HTML中的对象层级关系
3.试列举3中常见的文本编码方式
4.如何显示保留字符&、<和>？
5.简述网页命名的基本规范
第三章HTML基本结构
第一节文档类型与HTML框架
1.文档类型
2.html、head和body标签
3.标题、命名与注释
第二节页面分割
1.div标签
2.HTML5新标签
3.可访问的互联网应用程序
教学重点、难点：
HTML的框架结构，HTML中的标题、命名与注释，页面的分割，可访问的互联网应用程序
课程的考核要求：
通过本章的学习，使学生了解HTML的框架结构；掌握HTML中的标题、命名与注释；能够进行页面的分割；理解可访问的互联网应用程序。
复习思考题：
1.简述HTML的框架结构
2.列举HTML中标题对应的标签
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对象；页面校验
课程的考核要求：
通过本章的学习，使学生掌握常见的文本格式化方法；能够对本文进行特殊格式处理；理解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中常用图像格式；图像大小与分辨率的概念；图像标签与属性；可缩放矢量图形
课程的考核要求：
通过本章的学习，使学生了解Web中常用图像格式；理解图像大小与分辨率；能够利用图像编辑器进行简单编辑，掌握图像标签与属性，了解可缩放矢量图形。
复习思考题：
1.试列举3种Web中常用图像格式
2.试列举3种图像编辑器
3.简述设置图像宽、高和边框的方法
第六章链接
第一节链接概述
1.链接的构成
2.链接到页面
3.链接到锚点
4.其它类型的链接
第二节链接属性与高级技巧
1.标题与rel属性
2.链接定位
3.键盘快捷键
4.Tab顺序
5.图像作为链接
6.缩略图
7.图像地图
教学重点、难点：
链接的构成；链接的类型；链接属性；链接的快捷键；链接的Tab顺序；图像作为链接；缩略图和图像地图
课程的考核要求：
通过本章的学习，使学生了解链接的构成；理解链接的类型；能够建立链接，理解链接的属性，掌握如何建立链接的快捷键，调整链接的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.媒体特定的样式表
教学重点、难点：
CSS基本规则和结构；CSS的继承和属性值；CSS的规则冲突和调试；CSS的使用；备用样式表；媒体特定的样式表
课程的考核要求：
通过本章的学习，使学生了解CSS基本规则和结构；理解CSS的继承关系和属性值设置；能够利用CSS的问题调试，掌握行内样式表、内部样式表、外部样式表的使用方法，了解备用样式表和媒体特定的样式表。
复习思考题：
1.试举例说明CSS的基本规则
2.试列举5种CSS属性和对应的可取值
3.简述2种外部样式表的使用方法
第八章应用CSS
第一节选择器
1.标签选择器
2.类选择器
3.ID选择器
4.选择器的混合
5.选择器的继承
6.属性选择器
7.伪类选择器与动态链接
8.伪对象选择器
9.组选择器
10.复杂选择器
第二节样式格式化
1.字体、字号与字形
2.行距与字符间距
3.段落缩进与对齐
4.字符大小写
5.文本修饰
6.颜色与背景色
7.背景图像与属性
教学重点、难点：
CSS的选择器；使用CSS格式化样式
课程的考核要求：
通过本章的学习，使学生理解CSS中的选择器；能够使用CSS格式化样式。
复习思考题：
1.试列举3种CSS选择器，并举例说明
2.解释子选择器和兄弟选择器的作用和用法
3.解释伪类选择器和伪对象选择器的作用和用法
4.解释组选择器和复杂选择器的作用和用法
5.试列举5种样式格式化的方法，并举例说明
第九章CSS页面布局
第一节页面布局概述
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.构造有标号列表
2.改变无标号列表样式
第三节嵌套列表
1.构造嵌套列表
2.改变嵌套列表样式
教学重点、难点：
无标号列表；有标号列表；嵌套列表
课程的考核要求：
通过本章的学习，使学生理解无标号列表、有标号列表和嵌套列表；能够构造无标号列表、有标号列表和嵌套列表，并改变其样式。
复习思考题：
1.举例简述改变无标号列表样式的方法
2.举例简述改变有标号列表样式的方法
第十一章动态效果
第一节元素的动态效果
1.显示隐藏元素
2.rollover效果
3.格式化链接列表
4.下拉菜单效果
5.Fahrner图像替换
第二节增强效果
1.提供者前缀
2.梯度背景
3.多重背景图像
4.圆角
5.文本阴影
6.背景阴影
教学重点、难点：
显示、隐藏元素；rollover效果；格式化链接列表；下拉菜单效果；Fahrner图像替换；梯度背景和多重背景图像；圆角、文本阴影和背景阴影
课程的考核要求：
通过本章的学习，使学生能够实现元素的动态效果和增强效果。
复习思考题：
1.试列举3种元素的动态效果的控制方法，举例说明
2.简述提供者前缀的作用和用法
第十二章表格
第一节表格的构成与控制
1.表格的基本结构
2.边框样式
3.宽度控制
4.标题与表头
5.表格对齐
6.表格背景
7.文本混排
第二节单元格控制
1.单元格填充与留白
2.单元格宽高控制
3.单元格对齐
4.单元格背景
5.单元格边框
6.跨行与列
教学重点、难点：
表格的构成与控制；单元格控制
课程的考核要求：
通过本章的学习，使学生了解表格的构成；掌握表格和单元格的控制方法。
复习思考题：
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.分组
教学重点、难点：
表单的构成与控制
课程的考核要求：
通过本章的学习，使学生了解表单的构成；掌握表单的控制方法。
复习思考题：
1.简述表单的构成
2.举例介绍5种表单控件
五、考核方式、成绩评定
本课程考核分为平时考核及期末考核两种形式。
本课程平时成绩占30%，期末成绩占70%。
平时考核采用课堂案例讨论和上机操作实践等方式。
平时成绩的分配比例为：
课堂测验、案例讨论、上机操作实践成绩各占10%。
期末考核采用考查方式，形式为提交网页设计作品和课程设计报告。
六、主要参考书及其他内容
[1]李东博．HTML5+CSS3从入门到精通．北京：
清华大学出版社．2013.6
[2]ElizabethCastro,BruceHyslop著,望以文译．HTML5与CSS3基础教程．北京：
人民邮电出版社．2014.5
[3]BenFrain著,奇舞团译．响应式Web设计:
HTML5和CSS3实战．北京：
人民邮电出版社．2017.2
[4]AndyHarris著.HTML5andCSS3All-in-ONEforDummies（3rdEdition）.JohnWiley&Sons,Inc.
执笔人：
周晓磊
教研室主任：
徐天晟
系教学主任审核签名：
升级会员 