软件设计

Software Design

一、课程的性质和目的

课程性质：本课程是电子信息工程专业的一门实践课程。

目的：随着网络信息技术的不断发展，网站已成为人们获取和交换信息的最有效途径。网站除了在Internet中得到广泛应用之外，也可在企业内部被用来解决内部管理与信息交流等问题。因此，无论网站管理专业人士还是网站建设爱好者，都应掌握一定的网站建设与管理技术。本课程是一门重要的技能课程，要求学生已经具备一定的计算机基础知识和动手能力。通过本课程的学习，能较快地掌握网页设计的各种知识，并运用所学知识做出具有特色的网站，同时培养学生的综合职业能力和创新精神，成为社会所需人才。

二、课程教学内容及基本要求

本课程采用任务驱动的案例教学方式，以网站建设和网页设计为中心，以实例为引导，把理论知识与实例设计、制作、分析融于一体。本课程教学的主要任务：理论课教学从网页实例展开，逐步深入学习网页建设与设计过程中所涉及到的主要技术。主要包括，HTML基础及其应用，CSS样式的应用，JavaScript脚本语言，手持设备可访问页面的设计。同时，合理设置实验内容以配合理论课的教学，明确每一个实验的训练目标。通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态网页，具备网站的建立和维护能力。

（一）课程教学内容及知识模块顺序

1、第一讲：Web前端开发基础知识介绍（2学时）

（1）知识点一：浏览器基本工作原理

（2）知识点二：浏览器兼容性

（3）知识点三：前端标准/规范

（4）知识点四：开发工具（Dreamweaver、Notepad++）

（5）知识点五：调试工具（Firebug、IEDeveloper、IETester）

教学基本要求：了解浏览器的工作原理与兼容性，理解前端标准/规范，掌握网页设计基本开发工具与调试工具，提出HTML、CSS、Javascript学习要领。

2、第二讲：HTML概念及基础（2学时）

（1）知识点一：HTML的概念与角色

（2）知识点二：HTML文档的结构

（3）知识点三：HTML文档标题

（4）知识点四：HTML元信息

（5）知识点五：HTML基本语法

教学基本要求：理解HTML概念与角色，掌握HTML文档的结构、标题、元信息及HTML基本语法，了解编写HTML文档的注意事项。

3、第三讲:HTML文本与段落（2学时）

（1）知识点一：HTML文本（富有意义的元素，短语元素，表现性元素）

（2）知识点二：HTML段落

教学基本要求：掌握HTML文本与段落，理解元素的语义。

4、第四讲: HTML列表的应用（2学时）

（1）知识点一：列表类型

（2）知识点二：嵌套列表

教学基本要求：重点掌握定义列表、有序列表、无序列表。掌握嵌套列表使用方法。

5、第五讲:图像、超链接与图像映射（2学时）

（1）知识点一：HTML图像

（2）知识点二：超链接的路径

（3）知识点三：文本超链接

（4）知识点四：图像超链接

（5）知识点五：锚点

（6）知识点六：图像映射

教学基本要求：重点掌握HTML图像、绝对路径、相对路径、文本超链接、图像超链接、锚点。了解设置图像映射的原理。

6、第六讲：HTML表格的应用（2学时）

（1）知识点一：表格概述

（2）知识点二：设插入表格

（3）知识点三：设置表格标记属性

（4）知识点四：设置表格行与单元格

（5）知识点五：表格嵌套

教学基本要求：重点掌握表格标记的使用方法，了解常用属性的含义与使用方法。能够熟练运用表格的嵌套。

7、第七讲：HTML层，块元素与内联元素（2学时）

（1）知识点一：图层的创建

（2）知识点二：创建嵌套图层

（3）知识点三：层的属性设置

（4）知识点四：块元素与内联元素

教学基本要求：重点掌握层标记的使用方法，熟练使用层的嵌套，了解常见属性设置。理解块元素与内联元素的特性。

8、第八讲:框架的应用（2学时）

（1）知识点一：框架概述

（2）知识点二：框架的基本结构

（3）知识点三：设置框架

（4）知识点四：设置框架集<frameset>

（5）知识点五：浮动框架<iframe>

（6）知识点六：在框架上建立链接

教学基本要求：理解框架使用场景及应用。

9、第九讲:表单的应用（2学时）

（1）知识点一：表单概述

（2）知识点二：表单标记<form>

（3）知识点三：文本框

（4）知识点四：密码框

（5）知识点五：文件域

（6）知识点六：复选框

（7）知识点七：单选按钮

（8）知识点八：标准按钮

（9）知识点九：提交按钮

（10）知识点十：重置按钮

（11）知识点十一：图像域

（12）知识点十二：隐藏域

（13）知识点十三：多行文本域

（14）知识点十四：下拉菜单

教学基本要求：重点掌握表单的基本标记及其应用。

10、第十讲：滚动字幕与HTML多媒体（2学时）

（1）知识点一：滚动字幕

（2）知识点二：HTML多媒体概述

（3）知识点三：HTML Object

（4）知识点四：HTML音频

（5）知识点五：HTML音频

教学基本要求：了解滚动字幕，理解HTML多媒体如何使用。

11、第十一讲：HTML布局（2学时）

（1）知识点一：使用表格布局

（2）知识点二：使用层布局

教学基本要求：理解表格布局的原理，掌握层布局方式。

12、综合练习一：HTML标记综合练习（2学时）

教学基本要求：综合运用HTML标记完成内容。

13、第十二讲：CSS概念及基础（2学时）

（1）知识点一：CSS的概念与角色

（2）知识点二：创建CSS

（3）知识点三：CSS基础语法

教学基本要求：掌握CSS样式表基本使用方法。

14、第十三讲：CSS选择器（2学时）

（1）知识点一：元素选择器

（2）知识点二：选择器分组

（3）知识点三：类选择器

（4）知识点四：ID选择器

（5）知识点五：属性选择器

（6）知识点六：子元素选择器

（7）知识点七：相邻兄弟选择器

（8）知识点八：伪类

教学基本要求：掌握各类CSS选择器的用法。

15、第十四讲：CSS样式一（2学时）

（1）知识点一：CSS背景

（2）知识点二：CSS文本

（3）知识点三：CSS字体

教学基本要求：掌握CSS背景、文本与字体的用法。

16、第十五讲：CSS样式二（2学时）

（1）知识点一：CSS链接

（2）知识点二：CSS列表

（3）知识点三：CSS表格

（4）知识点四：CSS轮廓

教学基本要求：掌握CSS链接、列表、表格与轮廓的用法。

17、第十六讲：CSS盒模型（2学时）

（1）知识点一：CSS盒模型概述

（2）知识点二：CSS内边距

（3）知识点三：CSS边框

（4）知识点四：CSS外边距

（5）知识点五：CSS外边距合并

教学基本要求：理解CSS盒模型，掌握CSS内外边距，边框以及外边距合并。

18、第十七讲：CSS定位与浮动（2学时）

（1）知识点一：CSS定位概述

（2）知识点二：CSS相对定位

（3）知识点三：CSS绝对定位

（4）知识点四：CSS固定定位

（5）知识点五：CSS浮动

教学基本要求：理解CSS定位，掌握CSS相对定位、绝对定位、固定定位与浮动。

19、第十八讲： CSS高级语法（2学时）

（1）知识点一：CSS对齐

（2）知识点二：CSS尺寸

（3）知识点三：clear清除浮动

（4）知识点四：display设置是否及如何显示元素

（5）知识点五：visibility设置元素是否可见

（6）知识点六：cursor显示的指针类型

（7）知识点七：CSS导航栏

（8）知识点八：CSS Sprites

（9）知识点九：CSS元素透明

教学基本要求：掌握CSS对齐、CSS尺寸clear、display、CSS导航栏，理解visibility、cursor，了解CSS Sprites、CSS元素透明。

20、综合练习二：CSS综合练习（2学时）

教学基本要求：综合运用CSS完成页面格式化、美化。

21、第十九讲：Javascript基础（2学时）

（1）知识点一：Javascript的概念与角色

（2）知识点二：Javascript实现

（3）知识点三：Javascript输出

（4）知识点四：Javascript注释

（5）知识点五：Javascript变量

（6）知识点六：Javascript数据类型

教学基本要求：掌握Javascript基础内容。

22、第二十讲：Javascript运算符（2学时）

（1）知识点一：一元运算符

（2）知识点二：位运算符

（3）知识点三：逻辑运算符

（4）知识点四：乘性运算符

（5）知识点五：加性运算符

（6）知识点六：关系运算符

（7）知识点七：等性运算符

（8）知识点八：条件运算符

（9）知识点九：赋值运算符

（10）知识点十：逗号运算符

教学基本要求：掌握Javascript一元运算符、位运算符、逻辑运算符、乘性运算符、加性运算符、关系运算符、等性运算符、赋值运算符、逗号运算符，理解条件运算符。

23、第二十一讲：Javascript语句与函数（2学时）

（1）知识点一：if语句

（2）知识点二：迭代语句

（3）知识点三：break语句

（4）知识点四：continue语句

（5）知识点五：with语句

（6）知识点六：switch语句

（7）知识点七：函数概述

（8）知识点八：闭包（closure）

教学基本要求：掌握if语句、迭代语句、break语句、continue语句、switch语句、函数概述、闭包（closure），了解with语句。

24、第二十二讲：Javascript HTML DOM（2学时）

（1）知识点一：DOM简介

（2）知识点二：DOM HTML

（3）知识点三：DOM CSS

（4）知识点四：DOM事件

（5）知识点五：DOM节点

教学基本要求：理解HTML DOM，掌握DOM HTML、DOM CSS、DOM事件、DOM节点。

25、第二十三讲：Javascript对象（2学时）

（1）知识点一：Javascript本地对象和内置对象

（2）知识点二：Browser 对象（BOM）

（3）知识点三：HTML DOM 对象

（4）知识点四：HTML对象

教学基本要求：掌握Javascript本地对象和内置对象，理解BOM、HTML DOM对象、HTML对象。

26、第二十四讲：JQuery基础（2学时）

（1）知识点一：JQuery语法

（2）知识点二：JQuery选择器

（3）知识点三：JQuery事件

教学基本要求：理解JQuery语法、JQuery选择器、JQuery事件。

27、第二十五讲：JQuery高级（4学时）

（1）知识点一：JQuery 效果

（2）知识点二：JQuery HTML

（3）知识点三：JQuery 遍历

教学基本要求：理解JQuery 效果、JQuery HTML、JQuery 遍历。

28、综合练习三：Javascript综合练习（2学时）

教学基本要求：综合运用Javascript完成页面交互。

29、第二十六讲:网页案例分析与设计（6学时）

（1）知识点一：站点规划与分析

（2）知识点二：页面配色方案分析

（3）知识点三：网页规范化设计

（4）知识点四：网页交互设计

教学基本要求：针对模拟项目进行训练，依据功能定义站点结构，分析常见的配色方案，进行规范化设计与交互设计。

30、第二十七讲：手持设备可访问页面的设计（2学时）

（1）知识点一：手持设备标记

（2）知识点二：手持设备可访问页面的规划与设计。

教学基本要求：理解手持设备可访问页面的规划与设计。

（二）课程的重点、难点及解决办法

重点：Web前端开发技术；HTML基础及其应用，使用HTML来定义页面结构；CSS样式的应用，通过样式表来进行页面的表现及美化；利用DIV+CSS完成页面布局；JavaScript脚本的应用；使用网页编辑工具Dreamweaver进行开发。

难点：利用DIV+CSS完成页面布局，这两者的结合是现代网页设计中最为常见的，体现了Web标准中所追求的结构与表现分离的形式，但并不容易控制，而且要考虑很多浏览器兼容问题，是初学者最难理解和把握的内容。利用Javascript实现用户与浏览器的交互，Javascript学习内容较多，需要逐步积累，也是初学者很难把握的内容。

解决办法：

理论课的课堂教学要充分利用多媒体课件辅助课堂教学。采用任务驱动的案例教学方式，让学生在实践过程中将知识融会贯通。及时与学生交流沟通，对于重点内容着重讲解，对于难点内容从简单到复杂，逐步深入讲解。

三、实验实践环节及基本要求

1．实验实践教学环节在本课程中的作用及要求（实验教学大纲单独编写）

本课程是重要的技能课程，实践性很强。上机实验环节对于整个课程的学习至关重要。学生通过上机实验才能更好地理解理论知识，将这些理论知识真正用于网页设计中解决问题。学会使用HTML来定义页面结构，通过CSS来进行页面的表现及美化，用Javascript来控制页面的行为。学会使用前端技术创建静态网页模型，利用Javascript来实现前端交互。

2．实验项目(具体要求见实验教学大纲)

实验一：Web前端开发的环境、开发工具、调试工具（1学时）

实验二：HTML基础语法与文档设置（1学时）

实验三：文本与段落标记的使用（1学时）

实验四：使用列表标记（1学时）

实验五：超链接的应用与图像映射（1学时）

实验六：表格的应用（1学时）

实验七：层的应用（1学时）

实验八：普通框架与浮动框架的使用（1学时）

实验九：创建复杂的表单（1学时）

实验十：使用滚动字幕与多媒体（1学时）

实验十一：表格布局与层布局（1学时）

综合练习一：HTML标记综合练习（2学时）

实验十二：创建CSS与基本代码编写（1学时）

实验十三：CSS选择器的用法（1学时）

实验十四：CSS背景、文本与字体的用法（1学时）

实验十五：CSS链接、列表、表格与轮廓的用法（1学时）

实验十六：创建CSS盒模型（1学时）

实验十七：CSS定位与浮动的用法（1学时）

实验十八：CSS高级语法的应用（1学时）

综合练习二：CSS综合练习（2学时）

实验十九：Javascript基础语法（1学时）

实验二十：Javascript运算符的使用（1学时）

实验二十一：Javascript语句与函数（1学时）

实验二十二：Javascript HTML DOM，事件分析（1学时）

实验二十三：Javascript对象的分析（1学时）

实验二十四：JQuery基础语法（1学时）

实验二十五：JQuery高级语法（1学时）

综合练习三：Javascript综合练习

实验二十六：网页案例分析与设计（4学时）

实验二十七：手持设备可访问页面的设计（1学时）

四、本课程与其它课程的联系与分工

《Web设计基础》课程与计算机基础、计算机网络技术、Web开发技术等课程互相联系、互相补充。该课程是JSP，ASP.NET，PHP等Web高级程序开发的基础课程。

五、对学生能力培养的要求

通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计与制作基本的网页，让学生具备建站和维护能力。

六、课程学时分配

总学时64，其中讲课28学时，上机36学时。课程主要内容和学时分配见课程学时分配表。

课程学时分配表

七、主要教学方法

1、每节课应有重点，围绕中心，触类旁通。关键是备好课。

2、教育语言、板书语言、肢体语言和多媒体语言的有机结合，取长补短。教育语言、板书语言、肢体语言适合逻辑推理的、计算的、操作的内容；多媒体语言适合说明性的、图示的、演示的内容，并根据不同的教育内容制作了不同类型的课件。

3、每次实验课布置任务，做完上交作为平时分考核依据。

八、建议教材和教学参考书目

1．教材

《HTML、CSS、JavaScript标准教程》，电子工业出版社，2010年

2．主要参考书

[1]《Web程序设计（第2版）》，吉根林，崔海源等，电子工业出版社，2009年

[2]《网站规划与网页设计（第2版）》，张兵义，吴燕军，袁彩虹等，电子工业出版社，2009年

九、课程考核

本课程采用开卷考试方式（笔试+上机），总评成绩由平时成绩和期末成绩组成，无期中考试。平时成绩占总评的40%，期末成绩占总评的60%。平时成绩从作业、上课出勤率、实验等几方面进行考核。

十、说明

  无

执笔人：顾问审核人：赵航教学院长：王芳