网络系统集成技术课程设计题目文档格式.docx
《网络系统集成技术课程设计题目文档格式.docx》由会员分享,可在线阅读,更多相关《网络系统集成技术课程设计题目文档格式.docx(13页珍藏版)》请在冰豆网上搜索。
![网络系统集成技术课程设计题目文档格式.docx](https://file1.bdocx.com/fileroot1/2022-10/13/1f8b1fc5-66aa-4290-bf9c-b6fafdb23163/1f8b1fc5-66aa-4290-bf9c-b6fafdb231631.gif)
周学时数
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章:
界面设计基础知识
3
第3章:
CSS3入门及选择器
实验:
选择器
4
第4章:
CSS3边框及阴影
图片的边框和阴影
5
第5章:
CSS3背景&
渐变&
蒙版
照片墙
6
第6章:
CSS3分栏与弹性布局
手机阅读器
7
第7章:
CSS3倒影&
变形
8
第8章:
CSS3过渡&
动画
碰壁反弹
9
第9章:
css3响应式
响应式
10
第10章:
javascriptTab切换效果
TAB切换效果
11
第11章:
Javascript无缝滚动效果
图片滚动
12
第12章:
Javascript拖拽、放大镜效果
淘宝放大镜
13
第13章:
Javascript新浪微博发布效果
新浪微博、留言板
14
项目实训
合计
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--偏移,模糊,和颜色;
-2px-3px2pxrgba(0,118,160,.25);
设置为负值,X-偏移阴影转移到左侧。
设置为负值偏移Y-转移阴影顶端。
颜色可以用RGBA值。
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
;
等价
rgba(0,0,0,0);
color:
等价
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;
-webkit-linear-gradient(left,#f00,#ff025%,#0ff55%,#00f70%,#f00);
/*横向渐变*/
-webkit-gradient-gradient(left,#f00,#ff025%,#0ff55%,#00f70%,#f00);
/*纵向渐变*/
-webkit-background-clip:
text
/*只有webkit内核支持text的剪切模式*/
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