《网络系统集成技术课程设计题目》由会员分享，可在线阅读，更多相关《网络系统集成技术课程设计题目（13页珍藏版）》请在金锄头文库上搜索。
1、人机交互界面设计课程教学大纲课程编号：48172 制定单位：软件与通信工程学院 制 定 人（执笔人）：汪彩霞 审 核 人： 王颖 制定（或修订）时间：2014年 6月 28号江西财经大学教务处k西財徒Jt屋人机交互界面设计课程教学大纲一、课程总述本课程大纲是以 2014年软件工程本科专业人才培养方案为依据编制的课程名称人机交互界面设计课程代码48172英文名称huma n computer in teractio n in terface desi gn课程性质选修先修课程计算机应用（软件）总学时数32周学时数2开课学院软件与通信工程学院任课教师汪彩霞编写人汪彩霞编写时间2014年6月28日课
2、程负责人汪彩霞大纲主审人汪彩霞使用教材无教材教学参考资料1 孟祥旭李学庆主编人机交互技术原理与应用清华大 学出版社M, 2004年9月；2 孙悦红.主编.面向用户的软件界面设计清华大学出版 社,20133 罗仕鉴.朱上上.孙守迁.人机界面设计.北京机械出版 社,20024 （美）施奈德曼（Shneiderman,B.）等者.用户界面设计：有效 的人机交互策略.电子工业出版社,2006课程教学目的本课程属于软件工程专业选修课。目的是研究“以人为本” 的人机交互，有效地解决由于界面所带来的用户使用问题。通过 课程学习，主要达到以下目的：1、通过学习界面设计的动机心理和认知心理，设计具体的技术 方案
3、并加以实施。2、理解和掌握人机交互与界面设计中的各个方面的知识与技能，灵活运用，更好的培养实践能力。3、围绕标准Web的各项技术（Css、Htm 1）予以展开，循序渐进 地介绍Web浏览器的相关技术，具备JavaScript的编程技巧和编 程步骤。4、通过大量实例对JavaScript、CSS3、DOM、Ajax等 Web关键 技术进行深入浅出的分析，具备JavaScript在Web中的运用技巧。课程教学要求1、掌握交互界面的概念设计和逻辑设计。采用HBuilder,DreamWeaverr等，借助父互界面的概念设计和逻 辑设计方法，完成界面建立和界面效果实现的工作。2、采用CSS, Java
4、Script,等脚本语言完成移动端和PC端 界面设计和制作。3、根据所学的界面设计步骤、程序设计以及软件工程的知识， 对设计交互界面系统，进行可用性评估。4、学会团队协作解决问题的方法，增强学生自信心与团队责 任心、培养学生的主动性思考能力和自主学习能力。本课程的重点和难点重点:1、CSS （层叠样式列表）的引入方式，选择器与优先级（包括 CSS3选择器），CSS字体（含本地地体），布局设置，盒模型2、相对路径与绝对路径、CSS字体设置，表格设置，列表设置， 流布局，盒模型3、阴影、渐变、投影、圆角等常用CSS3属性4、CSS3-transform。3D空间坐标系的布局思想5、CSS3-tra
5、nsition。实现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分
6、）+作业（40分）+期末大作业（40分）二、教学时数分配早目教学内容教学时数分配课堂讲授实验（上机）1第1章：人机交互基础知识202第2章：界面设计基础知识203第3章：CSS3入门及选择器实验：选择器114第4章：CSS3边框及阴影 实验：图片的边框和阴影115第5章：CSS3背景&渐变&蒙版实验：照片墙116第6章：CSS3分栏与弹性布局实验：手机阅读器117第7章：CSS3倒影&变形实验：照片墙118第8章：CSS3过渡&动画实验：碰壁反弹119第9章：css3响应式实验：响应式1110第10章：javascriptTab切换效果 实验：TAB切换效果1111第11章：Javascrip
7、t无缝滚动效果11实验：图片滚动12第12章：Javascript拖拽、放大镜效果 实验：淘宝放大镜1113第13章：Javascript新浪微博发布效果 实验：新浪微博、留言板1114项目实训15合计1616三、单元教学目的、教学重难点和内容设置第一部分 人机交互与界面设计基础知识 【教学目的】掌握界面设计的基本原则，概念设计和逻辑设计。 【重点难点】手机端网页的界面设计【教学内容】1、用户界面设计的原则1.1原则一：美学完整性1.2原则二：一致性1.3原则三：直接操作1.4原则四：隐喻1.5原则五：用户控制2、手机ui界面设计的要点2.1手机启动界面2.2手机使用界面3、手机网站动态界面设
8、计的方式【课时要求】4节第二部分 CSS3 基础知识【教学目的】学习CSS3的各种界面及样式效果【重点难点】 渐变、倒影、响应式【教学内容】1、显示属性，自身属性，文本属性1.1 显示属性：display，list-style，position, float, clear 注意按照横着的顺序1.2 自身属性（合模型）：width，height，margin，padding，border，background （第 3点）1.3 背景：background1.4 行高：line-height1.5 文本属性:color,font,text-decoration,text-align,vertic
9、al-align,white-space, content1.6 其他 cursor/z-index/zoom1.7 css3 属性：trandsform/transition/animation/box-shadow/border-radius2、CSS3属性（内核前缀）Mozilla 内核 css 前缀-moz;WebKit内核 css前缀-webkit ;（谷歌已换用blink内核）Opera 内核 css前缀-o ; （欧朋已换用blink内核）Tride nt 内核 css 前缀-ms ;CSS3新属性：1）边框 border-colors相关属性border-top-colors
10、border-right-colors border-bottom-colors border-left-colors border-image :stretch拉伸方式来填充边框背景图|repeat平铺图片碰到边界时超出截断|round平铺，图片会工具边框的尺寸动态调整图片大小直至刚好铺满整个边框 border-radius相关属性border-radius: 1-4 length I % / 1border-radius数值为合模型的一半就变成圆，记住：不是相对于合模型的width（如：965 x 1611）,而是整个框才是。2）阴影1文本阴影text-shadow （不需要判断浏览器）t
11、ext-shadow:2px 3px 2px #000;文字阴影的结构是按照以下顺序：X-偏移，Y-偏移，模糊，和颜色；text-shadow:-2px -3px 2px rgba（0, 118, 160, .25）;设置为负值,X -偏移阴影转移到左侧。设置为负值偏移Y -转移阴影顶端。颜色可以用RGBA 值。text-shadow:0px 1px 0px #fff,0px -p 1 x 0px #000；文字阴影的列表（以逗号分隔）,1px的顶部和底部1px的阴影。text-shadow：水平偏移量垂直偏移量阴影模糊值颜色，水平偏移量垂直偏移量阴影模糊值 颜色；（多个阴影用，隔开）2盒阴影
12、box-shadow (不需要判断浏览器)盒阴影的使用语法结构与文本阴影类似，如box-shadow: 5px 5px 5px rgba(255,15,255,0.5);但是，盒阴影多了个属性：外延值，inset，如 box-shadow: 5px 5px 25px rgba(0,0,255,0.5) in set;补充知识点：background: transparent ;等价 background:rgba(0,0,0,0);color: transparent ;等价 color:rgba(0,0,0,0);3) 背景图1. CSS3蒙版(需要判断浏览器)缩写：-webkit-mask
13、: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实现背景颜色线性渐变divwidth:500px;border:1px solid #FA0;backgr
14、ound:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00);/*横向渐变*/background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /* 纵向渐变*/-webkit-backgro un d-clip: text ;/*只有webkit内核支持text的剪切模式*/color:transparent;4. CSS3 倒影-webkit-box-reflect1. 方向-webkit-box-reflect: below/above/left/right2. 距离3.透明度 -webkit-box-reflect: below 10px -webkit-li near-gradie nt(top,rgba(0,0,0,0) 20%, rgba(0,0,0,0.6) 100%) 4) CSS3 变形 transform二，三维变形的变形方式：四种方法旋转缩放一平移一扭曲旋转:-webkit-transform: rotate(120deg);平移：-webkit-transform: transl
