网站设计与制作大纲Word文档格式.docx
《网站设计与制作大纲Word文档格式.docx》由会员分享,可在线阅读,更多相关《网站设计与制作大纲Word文档格式.docx(14页珍藏版)》请在冰豆网上搜索。
3、实践教学环节
本课程有大量的内容需要借助于在线学习资源,课下多次反复亲自上机实践。
建议自学时安装相关开发软件进行自学(教师应提示学生安装哪些软件)。
通过上机学习本课程的知识点,掌握前端网页设计的技术与方法。
4、课后作业及自学要求
为有效学习本课程,要求学生首先具备计算机基础、程序设计基础等方面的基础知识。
自学时应该熟读大纲,提纲挈领地掌握网页设计开发的内容,随后,按照大纲熟读教参,还要参考大量的参考文献,通过课后思考和上机练习题进行多角度和层次的反复学习。
5、与毕业要求的对应关系
通过本课程的学习学生能够系统地掌握HTML5+CSS网页设计开发的基本理论及项目开发技术,具备利用现代化工具解决实际互联网应用工程前端项目的分析能力,具备互联网应用开发从业人员的专业素质和职业道德规范。
毕业后能够迅速参与到互联网开发工程项目的研究、设计与管理的实际工作中去。
6、教学中其它需要说明的问题
课程学时较少,教师可根据实际情况选择授课内容和实践内容。
三、各教学环节学时分配
教学课时分配
序号
章节内容
讲课
实验
其他
合计
1
第一章概论
第二章Web页面构成
3
第三章HTML基本结构
4
第四章文本对象
5
第五章图像与图形
6
第六章链接
7
第七章CSS基本概念
8
第八章应用CSS
9
第九章CSS页面布局
10
第十章列表
11
第十一章动态效果
12
第十二章表格
13
第十三章表单
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.简述网站前端开发工具
第一节HTML标记
1.文档类型与HTML风格
2.对象、属性和值
3.对象层级关系
第二节文本对象
1.文本编码
2.空格与空行
3.保留字符与特殊字符
第三节非文本对象
1.图形、图像与视频
2.链接
第四节文件与资源
1.文件命名
2.统一资源定位
HTML文档类型与风格,对象、属性和值的概念、对象的层级关系,文本对象与非文本对象,文件与资源
通过本章的学习,使学生了解HTML文档类型与风格;
掌握对象、属性和值的概念,理解对象的层级关系;
理解文本类型文件和非文本类型文件的组成;
能够对HTML文件进行命名和资源定位。
1.举例介绍对象、属性和值的概念
2.试述HTML中的对象层级关系
3.试列举3中常见的文本编码方式
4.如何显示保留字符&
、<
和>
?
5.简述网页命名的基本规范
第一节文档类型与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构成
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.复杂选择器
第二节样式格式化
2.行距与字符间距
3.段落缩进与对齐
4.字符大小写
5.文本修饰
6.颜色与背景色
7.背景图像与属性
CSS的选择器;
使用CSS格式化样式
通过本章的学习,使学生理解CSS中的选择器;
能够使用CSS格式化样式。
1.试列举3种CSS选择器,并举例说明
2.解释子选择器和兄弟选择器的作用和用法
3.解释伪类选择器和伪对象选择器的作用和用法
4.解释组选择器和复杂选择器的作用和用法
5.试列举5种样式格式化的方法,并举例说明
第一节页面布局概述
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.构造有标号列表
第三节嵌套列表
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.
执笔人:
周晓磊
教研室主任:
徐天晟
系教学主任审核签名: