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