网络系统集成技术课程设计题目.docx
《网络系统集成技术课程设计题目.docx》由会员分享，可在线阅读，更多相关《网络系统集成技术课程设计题目.docx（13页珍藏版）》请在冰豆网上搜索。
网络系统集成技术课程设计题目
《人机交互界面设计》
课程教学大纲
课程编号：
48172
制定单位：
软件与通信工程学院
制定人（执笔人）：
汪彩霞
审核人：
王颖
制定（或修订）时间：
2014年6月28号
江西财经大学教务处
《人机交互界面设计》课程教学大纲
一、课程总述
本课程大纲是以2014年软件工程本科专业人才培养方案为依据编制的。
课程名称
人机交互界面设计
课程代码
48172
英文名称
humancomputerinteractioninterfacedesign
课程性质
选修
先修课程
计算机应用（软件）
总学时数
32
周学时数
2
开课学院
软件与通信工程学院
任课教师
汪彩霞
编写人
汪彩霞
编写时间
2014年6月28日
课程负责人
汪彩霞
大纲主审人
汪彩霞
使用教材
无教材
教学参考资料
[1]孟祥旭.李学庆主编.人机交互技术原理与应用.清华大学出版社[M]，2004年9月；
[2]孙悦红.主编.面向用户的软件界面设计.清华大学出版社,2013
[3]罗仕鉴.朱上上.孙守迁.人机界面设计.北京.机械出版社,2002
[4]（美）施奈德曼（Shneiderman,B.）等著.用户界面设计：
有效的人机交互策略.电子工业出版社,2006
课程教学目的
本课程属于软件工程专业选修课。
目的是研究“以人为本”的人机交互，有效地解决由于界面所带来的用户使用问题。
通过课程学习，主要达到以下目的：
1、通过学习界面设计的动机心理和认知心理，设计具体的技术方案并加以实施。
2、理解和掌握人机交互与界面设计中的各个方面的知识与技能，灵活运用，更好的培养实践能力。
3、围绕标准Web的各项技术（Css、Html）予以展开，循序渐进地介绍Web浏览器的相关技术，具备JavaScript的编程技巧和编程步骤。
4、通过大量实例对JavaScript、CSS3、DOM、Ajax等Web关键技术进行深入浅出的分析，具备JavaScript在Web中的运用技巧。
课程教学要求
1、掌握交互界面的概念设计和逻辑设计。
采用HBuilder,DreamWeaverr等，借助交互界面的概念设计和逻辑设计方法，完成界面建立和界面效果实现的工作。
2、采用CSS，JavaScript，等脚本语言完成移动端和PC端界面设计和制作。
3、根据所学的界面设计步骤、程序设计以及软件工程的知识，对设计交互界面系统，进行可用性评估。
4、学会团队协作解决问题的方法，增强学生自信心与团队责任心、培养学生的主动性思考能力和自主学习能力。
本课程的重点和难点
重点：
1、CSS（层叠样式列表）的引入方式，选择器与优先级（包括CSS3选择器），CSS字体（含本地地体），布局设置，盒模型
2、相对路径与绝对路径、CSS字体设置，表格设置，列表设置，流布局，盒模型
3、阴影、渐变、投影、圆角等常用CSS3属性
4、CSS3-transform。
3D空间坐标系的布局思想
5、CSS3-transition。
实现CSS属性的渐变动画，通过hover等触发
6、CSS3-animaition。
实现3D动画
7、JS历史，JS引入方式，数据类型，变量，运算符
8、赋值运算，表达式，分支语句与循环语句，函数
9、字符串&数组常用操作方法
难点：
1、常见动画效果开发，作用域，计时器，TAB切换，大图滚动，碰壁反弹
2、DOM、BOM及相关效果开发，图片预加载
3、JS常用内置函数：
Math对象，Date对象理论与实战
4、正则表达式进行数据验证
5、熟练使用JavaScript快速开发各种用户体验交互、展现动画以及前后台数据异步交互，熟练使用常用的JS框架如jQuery等
课程考试
总成绩=考勤（20分）+作业（40分）+期末大作业（40分）
二、教学时数分配
章目
教学内容
教学时数分配
课堂讲授
实验（上机）
1
第1章：
人机交互基础知识
2
0
2
第2章：
界面设计基础知识
2
0
3
第3章：
CSS3入门及选择器
实验：
选择器
1
1
4
第4章：
CSS3边框及阴影
实验：
图片的边框和阴影
1
1
5
第5章：
CSS3背景&渐变&蒙版
实验：
照片墙
1
1
6
第6章：
CSS3分栏与弹性布局
实验：
手机阅读器
1
1
7
第7章：
CSS3倒影&变形
实验：
照片墙
1
1
8
第8章：
CSS3过渡&动画
实验：
碰壁反弹
1
1
9
第9章：
css3响应式
实验：
响应式
1
1
10
第10章：
javascriptTab切换效果
实验：
TAB切换效果
1
1
11
第11章：
Javascript无缝滚动效果
实验：
图片滚动
1
1
12
第12章：
Javascript拖拽、放大镜效果
实验：
淘宝放大镜
1
1
13
第13章：
Javascript新浪微博发布效果
实验：
新浪微博、留言板
1
1
14
项目实训
1
5
合计
16
16
三、单元教学目的、教学重难点和内容设置
第一部分人机交互与界面设计基础知识
【教学目的】掌握界面设计的基本原则，概念设计和逻辑设计。
【重点难点】手机端网页的界面设计
【教学内容】
1、用户界面设计的原则
1.1原则一：
美学完整性
1.2原则二：
一致性
1.3原则三：
直接操作
1.4原则四：
隐喻
1.5原则五：
用户控制
2、手机ui界面设计的要点
2.1手机启动界面
2.2手机使用界面
3、手机网站动态界面设计的方式
【课时要求】
4节
第二部分CSS3基础知识
【教学目的】学习CSS3的各种界面及样式效果
【重点难点】渐变、倒影、响应式
【教学内容】
1、显示属性，自身属性，文本属性
1.1显示属性：
display，list-style，position，float，clear[注意按照横着的顺序]
1.2 自身属性（合模型）：
width，height，margin，padding，border，background（第3点）
1.3背景：
background
1.4行高：
line-height
1.5文本属性：
color,font，text-decoration，text-align，vertical-align，white-space，content
1.6其他cursor/z-index/zoom
1.7css3属性：
trandsform/transition/animation/box-shadow/border-radius
2、CSS3属性（内核前缀）
Mozilla内核 css前缀-moz;
WebKit 内核 css前缀-webkit;（谷歌已换用blink内核）
Opera 内核 css前缀-o; （欧朋已换用blink内核）
Trident内核 css前缀-ms;
CSS3新属性：
1）边框
①border-colors
相关属性
border-top-colors border-right-colors border-bottom-colors border-left-colors
②border-image ：
stretch拉伸方式来填充边框背景图 |
repeat平铺图片碰到边界时超出截断|
round平铺，图片会工具边框的尺寸动态调整图片大小直至刚好铺满整个边框
③border-radius
相关属性
border-radius:
1-4length|%/1
border-radius数值为 合模型 的一半就变成圆，记住：
不是相对于合模型的width（如：
965 x 1611），而是整个框才是。
2）阴影
1.文本阴影text-shadow（不需要判断浏览器）
text-shadow:
2px3px2px#000;
文字阴影的结构是按照以下顺序：
X--偏移，Y--偏移，模糊，和颜色;
text-shadow:
-2px-3px2pxrgba（0,118,160,.25）;
设置为负值，X-偏移阴影转移到左侧。
设置为负值偏移Y-转移阴影顶端。
颜色可以用RGBA值。
text-shadow:
0px1px0px#fff,0px-p 1 x0px#000；
文字阴影的列表（以逗号分隔）,1px的顶部和底部1px的阴影。
text-shadow：
水平偏移量垂直偏移量阴影模糊值颜色，
水平偏移量垂直偏移量阴影模糊值颜色； （多个阴影用，隔开）
2.盒阴影box-shadow（不需要判断浏览器）
盒阴影的使用语法结构与文本阴影类似，如box-shadow:
5px5px5pxrgba（255,15,255,0.5）;
但是，盒阴影多了个属性：
外延值， inset ，
如box-shadow:
5px5px25pxrgba（0,0,255,0.5）inset;
补充知识点：
background:
transparent ;等价 background:
rgba（0,0,0,0）;
color:
transparent ; 等价 color:
rgba（0,0,0,0）;
3） 背景图
1. CSS3蒙版 （需要判断浏览器）
缩写：
-webkit-mask:
url（pro_pho_show_pic.png）50%50% no-repeat;
-webkit-mask-clip蒙版裁剪位置
-webkit-mask-origin蒙版原点位置
蒙版是能够应用渐变的。
但是因为浏览器兼容的问题比较严重，通常不使用渐变作为蒙版的属性值，而是使用有“透明度梯度”的图片替代掉渐变，产生同样的功能。
2.多重背景 background-image:
url（teacher_li.jpg）,url（teacher_li.jpg）;
3.CSS3渐变
css3实现背景颜色线性渐变
div{
width:
500px;
border:
1pxsolid#FA0;
background:
-webkit-linear-gradient（left,#f00,#ff025%,#0ff55%,#00f70%,#f00）; /*横向渐变*/
background:
-webkit-gradient-gradient（left,#f00,#ff025%,#0ff55%,#00f70%,#f00）;/*纵向渐变*/
-webkit-background-clip:
text ;
/*只有webkit内核支持text的剪切模式*/
color:
transparent;
}
4.CSS3倒影 -webkit-box-reflect
1.方向-webkit-box-reflect:
below/above/left/right
2.距离
3.透明度
-webkit-box-reflect:
below10px-webkit-linear-gradient（top,rgb
升级会员 