一、课程描述及课程目标

（一）课程描述

《网站设计》课程是面向电气学院非计算机类专业的一门专业选修课，涉及网页基础、html 标记、css 样式、网页布局、javascript 编程基础与事件处理等内容。通过本课程的学习，学生能够熟悉dreamweaver cs6环境，学会使用html设计网站的基本页面，掌握网站发布和推广的方法；通过css实现网站的整体变化上的美化和优化，从而改善网站的整体效果；可以使用javascript提升网站的灵活性和交互性，学会制作各种企业、门户、电商类网站。

（二）课程目标

本课程为计算机类专业的专业基础课程，要求学生能够应用网站设计的基本知识及技能解决实际问题，通过本课程的学习，学生应达到下列学习目标:

1.掌握网站设计的基本知识及技能，核心能力1.1。

2.具备使用html5 css3的基本技能进行网页程序设计的能力，核心能力2.1。

3.具备选择合适的开发平台进行程序设计的能力，核心能力2.2。

4.具备初步的计算机应用程序的设计能力，核心能力3.1。

5.能够将实验结果，通过文字、图、表的形式撰写实验报告，从而能够完整表达对实验原理及实验内容的理解，核心能力4.1。

6.了解前端网站设计所涉及到的新技术和方法及在实际项目中的应用，核心能力6.1。

7.能够主动做好课前预习和课后实践，养成自主学习的意识和提高不断学习的能力，核心能力6.2。

8.在教师的指导下，通过综合实验训练遵守职业规范和道德，训练严谨的专业学习及工作习惯，核心能力7.1。

网站设计（2019）-凯发k8官网下载客户端

（一）项目1网页制作基础知识

主要知识点:

【任务1-1】 了解web基本概念

【任务1-2】　网页制作入门

【任务1-3】　dreamweaver工具的使用

教学要求:通过本章的学习，使学生了解 web 标准及基本概念，熟悉 html、css 及 javascript 语言的发展历史，掌握 dreamweaver 工具的基本操作，能够使用 dreamweaver 创建简单的网页。

重点:web标准、html语言、css语言和javascript语言简介、创建第一个网页

采用的教学方法:任务驱动式教学。

讲授学时:1学时

实践学时:0.5学时

（二）项目2　“说旅游”专题页制作

主要知识点:

【任务2-1】认识html

【任务2-2】html文本控制标记

【任务2-3】html图像标记

教学要求:通过本章的学习，使学生掌握 html 文档结构，了解 html 文档头部相关标记，熟悉 html 文本控制标记，熟悉 html 文本控制标记，掌握图文混排页面的制作技巧，学会制作图文混排页面。，

重点:html 标记（单标记与双 标记，标题和段落标记，div标记，常用图像格式，切片。

难点:标记属性，div标记。

采用的教学方法:任务驱动式教学。

讲授学时:1学时

实践学时:0.5学时

（三）项目3　 “网上花店”专题页制作

主要知识点:

【任务3-1】css核心基础

【任务3-2】css控制文本

【任务3-3】css高级特性

教学要求:通过本章的学习，使学生了解 css 样式规则，掌握 css 字体样式及文本外观属性，熟悉 css 复合选择器，掌握 css 层叠性、继承性与优先级，掌握引入 css 样式表的不同方式，学会控制页面中的文本外观样式。

重点:引入 css 样式表（行内、 内嵌、链入），css 基础选择器，css 字体样式属性，css 文本外观属性，css 定义背景颜色，css 复合选择器（标签指 定、后代、并集），css 优先级。

难点:css 层叠性与继承性， css 优先级。

采用的教学方法:任务驱动式教学。

讲授学时:3学时

实践学时:3学时

（四）项目4　“青春树儿童摄影网”凯发k8凯发k8官网下载客户端官网下载客户端首页

主要知识点:

【任务4-1】认识盒子模型

【任务4-2】盒子模型相关属性

【任务4-3】元素的类型与转换

【任务4-4】元素的浮动

【任务4-5】元素的定位

教学要求:通过本章的学习，使学生了解盒子模型的概念，掌握盒子的相关属性，熟悉元素的类型与转换，掌握元素的浮动与定位，掌握清除浮动的方法，能够使用 div 标记与浮动样式对页面进行布局，

重点:边框属性，内边距属性，外边距属性，背景属性，标记，元素的浮动属性，清除浮动，元素的定位属性，相对定位，绝对定位。，

难点:元素的浮动属性，清除浮动。

采用的教学方法:任务驱动式教学。

讲授学时:3学时

实践学时:3学时

（五）项目5　“穿搭速递”凯发k8凯发k8官网下载客户端官网下载客户端首页制作

主要知识点:

【任务5-1】列表标记

【任务5-2】css控制列表样式

【任务5-3】超链接标记

教学要求:通过本章的学习，使学生掌握无序列表、有序列表及定义列表，熟悉列表的嵌套，掌握超链接标记，掌握链接伪类，能够使用无序列表、有序列表及定义列表对页面进行布局，学会使用链接伪类控制页面中超链接的样式。

重点:无序列表

，有序列表
，定义列表

北京图像定义列表项目符号，创建超链接（超练级标记a），链接伪类控制超链接。

难点:背景图像定义列表项目符号，链接伪类控制超链接。

采用的教学方法:任务驱动式教学。

讲授学时:2学时

实践学时:1学时

（六）项目6　“千年之恋”注册页面制作

主要知识点:

【任务6-1】认识表格相关标记

【任务6-2】css控制表格样式

【任务6-3】认识表单

【任务6-4】表单控件

【任务6-5】css控制表单样式css控制表单样式

【任务6-6】布局及定义基础样式

【任务6-7】制作头部及导航模块

【任务6-8】制作“banner”及“内容”

【任务6-9】制作“页脚”模块

教学要求:通过本章的学习，使学生理解表格的创建，掌握表格样式的控制，掌握表单相关标记，熟悉表单样式的控制，能够创建具有相应功能的表单控件，学会通过控制表单样式美化表单界面。

重点:css 控制表格边框，css 控制单元格边距，css 控制单元格的宽高，input 控件。

难点:input 控件，css 控制表单样式。

采用的教学方法:任务驱动式教学。

讲授学时:5学时

实践学时:4学时

（七）项目7　“赶快回家网”凯发k8凯发k8官网下载客户端官网下载客户端首页制作

主要知识点:

【任务7-1】javascript概述

【任务7-2】javascript语言基础

【任务7-3】流程控制语句

【任务7-4】函数

【任务7-5】布局及定义基础样式

【任务7-6】制作“头部”模块

【任务7-7】制作“导航”模块

【任务7-8】制作“banner”和“时间”

【任务7-9】制作“客运信息”模块

【任务7-10】制作“底部”模块

教学要求:通过本章的学习，使学生掌握 javascript 基本语法，掌握运算符和表达式的使用方法，掌握条件语句、循环语句及跳转语句，掌握 javascript 中函数的调用及变量的作用域，能够通过运算符和表达式进行简单计算，学会使用流程控制语句编写 javascript 程序。

重点:javascript 引入方式，javascript 基本语法，变量和数据类型，条件语句，条件语句，函数及其调用，。

难点:函数变量的作用域。

采用的教学方法:任务驱动式教学。

讲授学时:3学时

实践学时:3学时

（八）补充内容:html5中的音视频、过渡和动画。

主要知识点:

1.audio和video标签的使用

2.css中的过渡属性及其应用

3.css3中的变形属性及其应用

4. css3中的动画及动画效果的应用。

教学要求:通过本章的学习，使学生掌握 audio和video标签的使用，理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果，掌握css3中的变形属性，能够制作2d转换、3d转换效果，掌握css3中的动画，能够熟练制作网页中常见的动画效果。

重点:css3中的过渡、变形与动画效果。

难点:css3中的过渡、变形与动画效果

采用的教学方法:任务驱动式教学。

讲授学时:2学时

实践学时:1学时

在本门课程结束时，学生应该能够:

1、熟悉网页制作流程

2、掌握常见的网页布局效果

3、掌握各类网页的制作。

（一）出勤

学生应积极参与课堂教学并完成相关的作业、实验内容。

（二）阅读资料

学生应认真进行课前预习，阅读教材和指定参考书及重要的参考文献。

（三）课堂展示

根据时间及课堂班人数，在可能的情况下安排小组实验课程讨论与效果演示。

（四）课外实践

本课程是实践类课程，不单独安排课外实践。

（五）小考与期末考

无小考，期末以课程设计的方式进行考核。

（六）课程论文

以平时作业为主，安排小案例实验作为期中检查。

（七）学术诚信

按中山大学南方学院相关规定执行。

（八）剽窃的定义以及相应的惩罚

剽窃是严重违反学校规章制度的行为。一经发现，将上报相关部门，并受到包括开除学籍在内的严厉处罚。

（一）教科书-必读

黑马程序员.网页设计与制作项目教程（html css javascript）.人民邮电出版社.2017.1.1

（二）教科书-强烈推荐

[1]黑马程序员.网页设计与制作项目教程（html css javascript）.人民邮电出版社.2017.1.1

[2]郑娅峰、张永强. 郑娅峰、张永强.清华大学出版社.2016.01

[3]传智播客高教产品研发部. html5 css3网站设计基础教程[m]. 人民邮电出版社, 2016.

[4]黄睿. 网站设计项目化教程[m]. 人民邮电出版社, 2015.

（三）文章-必读

[1] 狐狸不归.网站建设步骤详解.http://jingyan.baidu.com/article/c35dbcb0270a0e8917fcbc7f.html.2011.12.16

[2] 戴宏明. 营销型网站规划六步法[j]. 现代计算机, 2013(6):55-57.

（四）文章-强烈推荐

[1]梁银妮. web网站中动态网页设计技术的应用和实现[j]. 数字技术与应用, 2017(1):83-83.

[2]杨远峰. flash交互性动画在网页设计中的应用与研究[j]. 电脑知识与技术, 2017, 13(4):197-198.

[3]孙晗. 网页设计中计算机多媒体技术的应用[j]. 无线互联科技, 2018(4):133-134.

[4]最好用的10种html5应用开发工具推荐.http://www.php.cn/html5-tutorial-360161.html

（五）其他参考资料

[1][美] 达科特（jon duckett） 著；刘涛，陈学敏 译.web设计与前端开发秘籍:html css javascript jquery 构建网站（套装共2册）.北京.清华大学出版社.2015.06

[2]刘西杰，张婷 著. html css javascript 网页制作从入门到精通 第3版.北京.人民邮电出版社.2016.07

[3]html系列教程.http://www.w3school.com.cn/

（一）教学活动

1、个人预习

2、课堂讲授

3、课堂问答

4、实验讲解

5、案例讨论

6、课后实验

7、期末课程设计

（二）对预期学习成果的考察

预期学习成果	教学活动	学习成果考察内容:作业/课程实验
项目1 网页制作基础知识	1,2,3,4,5,6,7	实验1-1: 熟悉dreamweaver工具的使用，利用文本控制标记和图像标记制作一个简单的个人简历页面
项目2 “说旅游”专题制作	1,2,3,4,5,6,7	实验1-2:制作“说旅游”专题页
项目3: “网上花店”专题页制作	1,2,3,4,5,6,7	实验2:利用css相关知识，对个人简历页面的样式进行设置，并重新对个人简历页面进行美化和设计。 实验3:制作“网上花店”专题页
项目4 “青春树儿童摄像网”凯发k8凯发k8官网下载客户端官网下载客户端首页	1,2,3,4,5,6,7	实验4:练习课堂中的例子，并重写个人简历页面（需用到盒子模型） 实验5:制作“青春树儿童摄影网”凯发k8凯发k8官网下载客户端官网下载客户端首页
项目5　“穿搭速递”凯发k8凯发k8官网下载客户端官网下载客户端首页制作	1,2,3,4,5,6,7	实验6: 制作“穿搭速递”凯发k8凯发k8官网下载客户端官网下载客户端首页
项目6 “千年之恋”注册页面制作	1,2,3,4,5,6,7	实验7:利用表格重新制作个人简历，并用css控制其样式 实验8:制作“千年之恋”注册页面
项目7　“赶快回家网”凯发k8凯发k8官网下载客户端官网下载客户端首页制作	1,2,3,4,5,6,7	实验9:练习课堂实例 实验10: 制作“赶快回家网”凯发k8凯发k8官网下载客户端官网下载客户端首页
html5中的音视频、过渡和动画	1,2,3,4,5,6,7	实验11:制作“工作日天气预报”

（一）评分体系

1、出勤率: 20%

2、课堂参与:加分

3、课堂实验及作业: 30%

4、期末课程设计: 50%

（二）考试内容及要求

考试包含以下内容:

1.网站设计的基础知识及使用（核心能力1.1）；

2.能够选用合适的程序开发工具（核心能力2.2）；

3.能够根据实际问题，对开发环境进行环境的配置（核心能力2.2）；

4.根据实际问题的需求，设计并完成综合实验（核心能力3.1）；

5.能够根据课程要求，通过文字、图、表的形式撰写实验报告，并进行简单的分析（核心能力4.1、6.2）；

6.能够按照综合实验要求，按时完成综合实验，并培养良好的职业习惯（核心能力7.1）。

周次	课程要点	理论学时	实验学时	习题学时
1	理论: 项目1 网页制作基础知识 【任务1-1】 了解web基本概念 【任务1-2】　网页制作入门 【任务1-3】　dreamweaver工具的使用 项目2　“说旅游”专题页制作 【任务2-1】认识html 【任务2-2】html文本控制标记 【任务2-3】html图像标记 实验1-1: 熟悉dreamweaver工具的使用，利用文本控制标记和图像标记制作一个简单的个人简历页面 实验1-2:制作“说旅游”专题页	2	1	0
2	理论: 项目3　 “网上花店”专题页制作 【任务3-1】css核心基础 【任务3-2】css控制文本 实验2:利用css相关知识，对个人简历页面的样式进行设置，并重新对个人简历页面进行美化和设计。	2	1	0
3	理论: 【任务3-3】css高级特性 实验3:制作“网上花店”专题页	1	2	0
4	理论: 项目4　“青春树儿童摄影网”凯发k8凯发k8官网下载客户端官网下载客户端首页 【任务4-1】认识盒子模型 【任务4-2】盒子模型相关属性 【任务4-3】元素的类型与转换 实验4:练习课堂中的例子，并重写个人简历页面（需用到盒子模型）	2	1	0
5	理论: 项目4　“青春树儿童摄影网”凯发k8凯发k8官网下载客户端官网下载客户端首页 【任务4-4】元素的浮动 【任务4-5】元素的定位 【任务4-6】布局及定义基础样式 实验5:制作“青春树儿童摄影网”凯发k8凯发k8官网下载客户端官网下载客户端首页。	1	2	0
6	理论: 项目5　“穿搭速递”凯发k8凯发k8官网下载客户端官网下载客户端首页制作 【任务5-1】列表标记 【任务5-2】css控制列表样式 【任务5-3】超链接标记 实验6:制作“穿搭速递”凯发k8凯发k8官网下载客户端官网下载客户端首页	2	1	0
7	理论: 项目6　“千年之恋”注册页面制作 【任务6-1】认识表格相关标记 【任务6-2】css控制表格样式 实验7:利用表格重新制作个人简历，并用css控制其样式	2	1	0
8	理论: 项目6　“千年之恋”注册页面制作 【任务6-3】认识表单 【任务6-4】表单控件 【任务6-5】css控制表单样式css控制表单样式 实验8:制作“千年之恋”注册页面	1	2	0
9	理论: 项目7　“赶快回家网”凯发k8凯发k8官网下载客户端官网下载客户端首页制作 【任务7-1】javascript概述 【任务7-2】javascript语言基础 【任务7-3】流程控制语句 【任务7-4】函数 实验9:练习课堂实例	2	1	0
10	理论: 项目7　“赶快回家网”凯发k8凯发k8官网下载客户端官网下载客户端首页制作 【任务7-5】布局及定义基础样式 【任务7-6】制作“头部”模块 【任务7-7】制作“导航”模块 【任务7-8】制作“banner”和“时间” 【任务7-9】制作“客运信息”模块 【任务7-10】制作“底部”模块 实验10: 制作“赶快回家网”凯发k8凯发k8官网下载客户端官网下载客户端首页	1	2	0
11	html5中的音视频、过渡和动画（补充） 实验11:制作“工作日天气预报”	2	1	0
12	课程设计	0	3	0
13
14
15
16
17
18
19
20
总学时		18	18