课程简介
Course Introduction
教学大纲
Teaching Syllabus
一、课程描述及课程目标
（一）课程描述
《网站设计》课程是面向电气学院非计算机类专业的一门专业选修课，涉及网页基础、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。
（一）项目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 “青春树儿童摄影网”首页
主要知识点:
【任务4-1】认识盒子模型
【任务4-2】盒子模型相关属性
【任务4-3】元素的类型与转换
【任务4-4】元素的浮动
【任务4-5】元素的定位
教学要求:通过本章的学习，使学生了解盒子模型的概念，掌握盒子的相关属性，熟悉元素的类型与转换，掌握元素的浮动与定位，掌握清除浮动的方法，能够使用 DIV 标记与浮动样式对页面进行布局，
重点:边框属性，内边距属性，外边距属性，背景属性，标记，元素的浮动属性，清除浮动，元素的定位属性，相对定位，绝对定位。 ，
难点:元素的浮动属性，清除浮动。
采用的教学方法:任务驱动式教学。
讲授学时:3学时
实践学时:3学时
（五）项目5 “穿搭速递”首页制作
主要知识点:
【任务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 “赶快回家网”首页制作
主要知识点:
【任务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 “青春树儿童摄像网”首页 | 1,2,3,4,5,6,7 | 实验4:练习课堂中的例子，并重写个人简历页面（需用到盒子模型） 实验5:制作“青春树儿童摄影网”首页 |
项目5 “穿搭速递”首页制作 | 1,2,3,4,5,6,7 | 实验6: 制作“穿搭速递”首页 |
项目6 “千年之恋”注册页面制作 | 1,2,3,4,5,6,7 | 实验7:利用表格重新制作个人简历，并用CSS控制其样式 实验8:制作“千年之恋”注册页面 |
项目7 “赶快回家网”首页制作 | 1,2,3,4,5,6,7 | 实验9:练习课堂实例 实验10: 制作“赶快回家网”首页 |
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 “青春树儿童摄影网”首页 【任务4-1】认识盒子模型 【任务4-2】盒子模型相关属性 【任务4-3】元素的类型与转换 实验4:练习课堂中的例子，并重写个人简历页面（需用到盒子模型） | 2 | 1 | 0 |
5 | 理论: 项目4 “青春树儿童摄影网”首页 【任务4-4】元素的浮动 【任务4-5】元素的定位 【任务4-6】布局及定义基础样式 实验5:制作“青春树儿童摄影网”首页。 | 1 | 2 | 0 |
6 | 理论: 项目5 “穿搭速递”首页制作 【任务5-1】列表标记 【任务5-2】CSS控制列表样式 【任务5-3】超链接标记 实验6:制作“穿搭速递”首页 | 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 “赶快回家网”首页制作 【任务7-1】Javascript概述 【任务7-2】Javascript语言基础 【任务7-3】流程控制语句 【任务7-4】函数 实验9:练习课堂实例 | 2 | 1 | 0 |
10 | 理论: 项目7 “赶快回家网”首页制作 【任务7-5】布局及定义基础样式 【任务7-6】制作“头部”模块 【任务7-7】制作“导航”模块 【任务7-8】制作“banner”和“时间” 【任务7-9】制作“客运信息”模块 【任务7-10】制作“底部”模块 实验10: 制作“赶快回家网”首页 | 1 | 2 | 0 |
11 | HTML5中的音视频、过渡和动画（补充） 实验11:制作“工作日天气预报” | 2 | 1 | 0 |
12 | 课程设计 | 0 | 3 | 0 |
13 | ||||
14 | ||||
15 | ||||
16 | ||||
17 | ||||
18 | ||||
19 | ||||
20 | ||||
总学时 | 18 | 18 | ||
