课程简介
Course Introduction
教学大纲
Teaching Syllabus
一、课程描述及课程目标
（一）课程描述
《网站设计》课程是面向全院专业的一门通识任选课，涉及网页基础、HTML 标记、CSS 样式、网页布局、Javascript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解 HTML、CSS 及 Javascript 语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种网页。
（二）课程目标
1. 熟悉网页的制作流程，掌握常用的网页布局效果，能够制作各种类型的网页。
2. 能够对具体问题进行分析，找到解决该问题所用的方法。
3. 能够综合运用所学网站设计的基本知识，使用任务驱动式的项目开发方法，编写程序完成专项实验和综合实验；设计能够解决实际问题的小型网站；将实验的完成情况，撰写一份完整的实验报告。
（一）项目1网页制作基础知识
主要知识点:
【任务1-1】 了解Web基本概念
【任务1-2】 网页制作入门
【任务1-3】 Dreamweaver工具的使用
教学要求:通过本章的学习，使学生了解 Web 标准及基本概念，熟悉 HTML、CSS 及 Javascript 语言的发展历史，掌握 Dreamweaver 工具的基本操作，能够使用 Dreamweaver 创建简单的网页。
重点:Web标准、HTML语言、CSS语言和Javascript语言简介、创建第一个网页
采用的教学方法:任务驱动式教学。
讲授学时:3学时
实践学时:0学时
（二）项目2 “说旅游”专题页制作
主要知识点:
【任务2-1】认识HTML
【任务2-2】HTML文本控制标记
【任务2-3】HTML图像标记
教学要求:通过本章的学习，使学生掌握 HTML 文档结构，了解 HTML 文档头部相关标记，熟悉 HTML 文本控制标记，熟悉 HTML 文本控制标记，掌握图文混排页面的制作技巧，学会制作图文混排页面。，
重点:HTML 标记（单标记与双 标记，标题和段落标记，div标记，常用图像格式，切片。
难点:标记属性，div标记。
采用的教学方法:任务驱动式教学。
讲授学时:3.5学时
实践学时:2.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.5学时
实践学时:2.5学时
（四）项目4 “青春树儿童摄影网”首页
主要知识点:
【任务4-1】认识盒子模型
【任务4-2】盒子模型相关属性
【任务4-3】元素的类型与转换
【任务4-4】元素的浮动
【任务4-5】元素的定位
教学要求:通过本章的学习，使学生了解盒子模型的概念，掌握盒子的相关属性，熟悉元素的类型与转换，掌握元素的浮动与定位，掌握清除浮动的方法，能够使用 DIV 标记与浮动样式对页面进行布局，
重点:边框属性，内边距属性，外边距属性，背景属性，标记，元素的浮动属性，清除浮动，元素的定位属性，相对定位，绝对定位。 ，
难点:元素的浮动属性，清除浮动。
采用的教学方法:任务驱动式教学。
讲授学时:7学时
实践学时:5学时
（五）项目5 “穿搭速递”首页制作
主要知识点:
【任务5-1】列表标记
【任务5-2】CSS控制列表样式
【任务5-3】超链接标记
教学要求:通过本章的学习，使学生掌握无序列表、有序列表及定义列表，熟悉列表的嵌套，掌握超链接标记，掌握链接伪类，能够使用无序列表、有序列表及定义列表对页面进行布局，学会使用链接伪类控制页面中超链接的样式。
重点:无序列表，有序列表
，定义列表
北京图像定义列表项目符号，创建超链接（超练级标记a），链接伪类控制超链接。
难点:背景图像定义列表项目符号，链接伪类控制超链接。
采用的教学方法:任务驱动式教学。
讲授学时:3.5学时
实践学时:2.5学时
（六）项目6 “千年之恋”注册页面制作
主要知识点:
【任务6-1】认识表格相关标记
【任务6-2】CSS控制表格样式
【任务6-3】认识表单
【任务6-4】表单控件
【任务6-5】CSS控制表单样式CSS控制表单样式
教学要求:通过本章的学习，使学生理解表格的创建，掌握表格样式的控制，掌握表单相关标记，熟悉表单样式的控制，能够创建具有相应功能的表单控件，学会通过控制表单样式美化表单界面。
重点:CSS 控制表格边框，CSS 控制单元格边距，CSS 控制单元格的宽高，input 控件。
难点:input 控件，CSS 控制表单样式。
采用的教学方法:任务驱动式教学。
讲授学时:7学时
实践学时:5学时
在本门课程结束时，学生应该能够:
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:熟悉Dreamweaver工具，利用该工具制作一个简单的网页 |
项目2 “说旅游”专题制作 | 1,2,3,4,5,6,7 | 实验2:制作“说旅游”专题页 |
项目3: “网上花店”专题页制作 | 1,2,3,4,5,6,7 | 实验3:制作“网上花店”专题页 |
项目4 “青春树儿童摄像网”首页 | 1,2,3,4,5,6,7 | 实验4:制作“青春树儿童摄影网”首页 |
项目5 “穿搭速递”首页制作 | 1,2,3,4,5,6,7 | 实验5: 制作“穿搭速递”首页 |
项目6 “千年之恋”注册页面制作 | 1,2,3,4,5,6,7 | 实验6:制作“千年之恋”注册页面 |
（一）评分体系
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工具的使用 | 3 | 0 | 0 |
2 | 理论: 项目2 “说旅游”专题页制作 【任务2-1】认识HTML 【任务2-2】HTML文本控制标记 【任务2-3】HTML图像标记 | 3 | 0 | 0 |
3 | 实验1:熟悉Dreamweaver工具的使用，练习文本控制标记和图像标记的使用，制作“说旅游”专题页 | 0.5 | 2.5 | |
4 | 理论: 项目3 “网上花店”专题页制作 【任务3-1】CSS核心基础 【任务3-2】CSS控制文本 【任务3-3】CSS高级特性 【任务3-4】布局及定义基础样式 | 3 | 0 | 0 |
5 | 实验2: 制作“网上花店”专题页 | 0.5 | 2.5 | 0 |
6 | 理论: 项目4 “青春树儿童摄影网”首页 【任务4-1】认识盒子模型 【任务4-2】盒子模型相关属性 【任务4-3】元素的类型与转换 实验4-1:练习课堂中的例子，并重写个人简历页面（需用到盒子模型） | 3 | 0 | 0 |
7 | 实验3:利用文本控制标记、图片标记等制作个人简历页面，并利用盒子模型进行布局。 | 0.5 | 2.5 | |
8 | 理论: 项目4 “青春树儿童摄影网”首页 【任务4-4】元素的浮动 【任务4-5】元素的定位 | 3 | 0 | 0 |
9 | 实验4:制作“青春树儿童摄影网”首页 | 0.5 | 2.5 | 0 |
10 | 理论: 项目5 “穿搭速递”首页制作 【任务5-1】列表标记 【任务5-2】CSS控制列表样式 【任务5-3】超链接标记 | 3 | 0 | |
11 | 实验5: 制作“穿搭速递”首页 | 0.5 | 2.5 | |
12 | 理论: 项目6 “千年之恋”注册页面制作 【任务6-1】认识表格相关标记 【任务6-2】CSS控制表格样式 | 3 | 0 | 0 |
13 | 实验6:利用表格重新制作个人简历，并用CSS控制其样式 | 0.5 | 2.5 | 0 |
14 | 理论: 项目6 “千年之恋”注册页面制作 【任务6-3】认识表单 【任务6-4】表单控件 【任务6-5】CSS控制表单样式CSS控制表单样式 实验6-2:利用表单控件制作简单的网页表单 | 3 | 0 | 0 |
15 | 实验6: 制作“千年之恋”注册页面 | 0.5 | 2.5 | 0 |
16 | 课程设计 | 0 | 3 | 0 |
17 | ||||
18 | ||||
19 | ||||
20 | ||||
总学时 | 26.5 | 21.5 | 0 | |
