网络系统集成技术课程设计题目.pdf

《网络系统集成技术课程设计题目.pdf》由会员分享，可在线阅读，更多相关《网络系统集成技术课程设计题目.pdf（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 人机交互界面设计 课程教学大纲 课程编号：48172 制定单位：软件与通信工程学院 制 定 人（执笔人）：汪彩霞 审 核 人：王颖 制定（或修订）时间：2014 年 6 月 28 号 江西财经大学教务处 人机交互界面设计课程教学大纲 一、课程总述 本课程大纲是以2014 年软件工程本科专业人才培养方案为依据编制的。课程名称 人机交互界面设计 课程代码 48172 英文名称 human computer interaction interface design 课程性质 选修 先修课程 计算机应用（软件）总学时数 32 周学时数 2 开课学院 软件与通信工程学院 任课教师 汪彩霞 编写人 汪彩

2、霞 编写时间 2014年 6 月 28 日 课程负责人 汪彩霞 大纲主审人 汪彩霞 使用教材 无教材 教学参考资料 1 孟祥旭.李学庆主编.人机交互技术原理与应用.清华大学出版社M，2004 年 9 月；2 孙悦红.主编.面向用户的软件界面设计.清华大学出版社,2013 3 罗仕鉴.朱上上.孙守迁.人机界面设计.北京.机械出版社,2002 4(美)施奈德曼(Shneiderman,B.)等著.用户界面设计：有效的人机交互策略.电子工业出版社,2006 课程教学目的 本课程属于软件工程专业选修课。目的是研究“以人为本”的人机交互，有效地解决由于界面所带来的用户使用问题。通过课程学习，主要达到以下

3、目的：1、通过学习界面设计的动机心理和认知心理，设计具体的技术方案并加以实施。2、理解和掌握人机交互与界面设计中的各个方面的知识与技能，灵活运用，更好的培养实践能力。3、围绕标准 Web 的各项技术（Css、Html）予以展开，循序渐进地介绍 Web 浏览器的相关技术，具备 JavaScript 的编程技巧和编程步骤。4、通过大量实例对 JavaScript、CSS3、DOM、Ajax 等 Web 关键技术进行深入浅出的分析，具备 JavaScript 在 Web 中的运用技巧。课程教学要求 1、掌握交互界面的概念设计和逻辑设计。采用HBuilder,DreamWeaverr 等，借助交互界面

4、的概念设计和逻辑设计方法，完成界面建立和界面效果实现的工作。2、采用 CSS，JavaScript，等脚本语言完成移动端和 PC 端界面设计和制作。3、根据所学的界面设计步骤、程序设计以及软件工程的知识，对设计交互界面系统，进行可用性评估。4、学会团队协作解决问题的方法，增强学生自信心与团队责任心、培养学生的主动性思考能力和自主学习能力。本课程的重点和难点 重点：1、CSS（层叠样式列表）的引入方式，选择器与优先级（包括CSS3 选择器），CSS 字体（含本地地体），布局设置，盒模型 2、相对路径与绝对路径、CSS 字体设置，表格设置，列表设置，流布局，盒模型 3、阴影、渐变、投影、圆角等常用

5、 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、熟练使用 Java

6、Script 快速开发各种用户体验交互、展现动画以及前后台数据异步交互，熟练使用常用的 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 分栏与弹性布局 实

7、验：手机阅读器 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 三、单元

8、教学目的、教学重难点和内容设置 第一部分 人机交互与界面设计基础知识【教学目的】掌握界面设计的基本原则，概念设计和逻辑设计。【重点难点】手机端网页的界面设计【教学内容】1、用户界面设计的原则 1.1原则一：美学完整性 1.2原则二：一致性 1.3原则三：直接操作 1.4原则四：隐喻 1.5原则五：用户控制 2、手机ui 界面设计的要点 2.1手机启动界面 2.2手机使用界面 3、手机网站动态界面设计的方式【课时要求】4 节 第二部分 CSS3 基础知识【教学目的】学习CSS3 的各种界面及样式效果【重点难点】渐变、倒影、响应式【教学内容】1、显示属性，自身属性，文本属性 1.1 显示属性：di

9、splay，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.7 css3 属性：trandsform/transition/animati

10、on/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 拉伸方式来填充边框

11、背景图|repeat 平铺 图片碰到边界时超出截断|round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框 border-radius 相关属性 border-radius:1-4 length|%/1 border-radius 数值为 合模型 的一半就变成圆，记住：不是相对于合模型的width（如：965 x 1611），而是整个框才是。2）阴影 1.文本阴影 text-shadow（不需要判断浏览器）text-shadow:2px 3px 2px#000;文字阴影的结构是按照以下顺序：X-偏移，Y-偏移，模糊，和颜色;text-shadow:-2px-3px 2px

12、 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.盒阴影 box-shadow（不需要判断浏览器）盒 阴 影 的 使 用 语 法 结 构 与 文 本 阴 影 类 似，如box-shadow:5px 5px 5px rgba(25

13、5,15,255,0.5);但是，盒阴影多了个属性：外延值，inset，如 box-shadow:5px 5px 25px rgba(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-mas

14、k-origin 蒙版原点位置 蒙版是能够应用渐变的。但是因为浏览器兼容的问题比较严重，通常不使用渐变作为蒙版的属性值，而是使用有“透明度梯度”的图片替代掉渐变，产生同样的功能。2.多重背景 background-image:url(teacher_li.jpg),url(teacher_li.jpg);3.CSS3 渐变 css3 实现背景颜色线性渐变 div width:500px;border:1px solid#FA0;background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00);/*横向渐变

15、*/background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#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:below 10px-webkit-linear-gr

16、adient(top,rgba(0,0,0,0)20%,rgba(0,0,0,0.6)100%)4）CSS3 变形 transform 二，三维变形 的变形方式：四种方法 旋转缩放平移扭曲 旋转：-webkit-transform:rotate(120deg);平移：-webkit-transform:translate(20px,10px);-moz-transform:translateX(20px);缩放：-webkit-transform:scale(1.1,0.5);X 方向缩放 1.1 倍，Y 方向缩放 0.5 倍 scale(1,1);scale(-1,1);scale(1,-1

17、);scale(-1,-1);等价 scale(-1);transform：变形种类；的名称（对应的属性值），多个种类之间使用空格分隔。一个（）中的属性值之间用逗号分隔。二维平面的旋转，旋转围绕点进行，而旋转正方向默认为顺时针方向 默认的旋转中心就是这个块的正中心，可以通过 transform-origin 去改变旋转中心，通过 left top、数值、百分比 改变旋转中心 scale(,);表示使元素在 X 轴和 Y 轴同时缩放。表示缩放倍数，可以是正数，负数和小数。负数是先翻转元素然后再缩放。包含两个参数，如果缺少第二个参数，那么第二个参数的值等于第一个参数。scaleX():表示只在 X

18、 轴(水平方向)缩放元素。scaleY():表示只在 Y 轴(垂直方向)缩放元素。scaleZ():表示只在 Z 轴缩放元素。前提是元素本身或者元素的父元素设定了透视值（perspective：100;）5.视角：-webkit-persepective：0；0 没设置（值）800px;通常在 body 元素下 CSS3 perspective 属性：目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的-webkit-perspective 属性。6.backface-visibility:visible|hidden;定义当元素不面向屏幕时是否可见。可

19、用在扑克牌旋转上。7）CSS3 过渡 trabsition 参与过渡的属性、过渡时间、过渡方式（动画类型）延迟时间【需要写前缀】一般情况下，transition 添加在基本效果上，而不是 hover 效果中。css 原状态和 hover 状态设置为两种不同的样式，然后通过 CSS3 过渡进行渐变处理 padding、color 所有浏览器都支持渐变 transition 属性是一个简写属性，用于设置四个过渡属性：transition-property 哪个属性实现过渡如：width transition-duration 完成过渡效果需要多少秒/毫秒 transition-timing-fun

20、ction 速度效果的运动曲线，如 linear、ase-in、ease、ease-out、ease-in-out、cube-bezier（贝塞尔曲线）transition-delay 规定过渡开始前等待几秒 简写：transition：width 2s ease；8）CSS3 动画 animation animation 基本参数与 transition 完全相同，第一个参数表示的是调用哪个动画 infinite 表示无限循环.wrap height:100px;margin:10px;-webkit-animation:colorChange 10s linear 1.5s infinit

21、e;-webkit-keyframes colorChange 0%background:#f00;10%background:#ff0;CSS3 过渡与动画的区别：transition animation 1、animation 多两个参数，循环和动画的方式 2、transition不能自行触发，通过 hover等动作或结合 JS进行触发。anmiation可以自行运行。3、transition可控性较弱，只能指定起始状态和结束状态，而 animation可以定义多个关键帧。4、动画在运行结束之后，需要回到初始状态 5、transition的作用，可以用一句话来概括，平滑改变 CSS样式 9

22、.HTML5 新增加标签：优势：语义性好 少类名 有利于 SEO 代码少 文档易读、搜索引擎能够更好的理解页面中的内容、作为开发者，能够更快更准确的搜索到信息 article 定义文章、帖子、用户评论、代表文档、页面或者应用程序中独立、完整、可以独自被外部引用的内容 header 定义页眉 aside 定义文章的侧边栏 figure 一组媒体对象的以及文字 nav 定义导航 figcaption 定义figure 的标题 section 定义文档中的区段 footer 定义页脚 time 定义日期和时间 vidio 定义视频 canvas 定义图形，提供画布 audio 定义音频 comman

23、d 表示命令按钮 embed 插入各种多媒体 details 表示用户要求得到并可以得到的详细信息 mark 定义需要突出显示或者高亮的文本 wbr 表示软换行 progress 显示js 中耗费的函数进程 hgroup 定义对网页标题的组合 新增的input 元素类型 输入E-mail 地址的文本输入框 输入URL 地址 输入数值的文本输入框 表示必须输入一定范围内的数字值的文本输入框 artical：定义文章 代表文档、页面或者应用程序中独立、完整、可以独自被外部引用的内容 section：用于对网站或应用程序中的页面上的内容进行分块，一个section 元素通常由内容以及标题组成。但se

24、ction 元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div 而非section 元素。【课时要求】14 节 第三部分 javascript 基础知识【教学目的】1.围绕标准Web 的各项技术（Css、Html）予以展开，循序渐进地介绍Web 浏览器的相关技术，具备JavaScript 的编程技巧和编程步骤。2.通过大量实例对JavaScript、CSS、DOM、Ajax 等 Web 关键技术进行深入浅出的分析，具备JavaScript 在 Web 中的运用技巧。3.结合常用界面效果讲解，了解JavaScript 的高级应用。【重点难点】1.docu

25、ment 对象的属性、方法 2.Navigator 对象层析模型 3.界面的多适应问题【教学内容】1.JavaScript 概述 1）了解JavaScript 脚本的基本概念、发展历程、作用及其主要特点。2）熟悉JavaScript 的应用范围、与Java 的区别、开发环境及部署问题。3）掌握JavaScript 在 HTML 页面中的应用。2.JavaScript 基础与核心语法 1）掌握JavaScript 脚本语法、变量与常量、保留字、表达式与运算符。2）掌握JavaScript 基本语句，流程控制和函数。3）熟悉JavaScript 正则表达式的应用，了解Javascript 的正则表

26、达式编写。4）掌握JavaScript 中数组和对象的创建及应用。5）熟悉类、构造函数和继承的应用。3.JavaScript 文档对象篇 1）熟练使用窗口（window）、文档（document）、location、body、form、screen 等对象。2）利用窗体、对象设计并实现简单的JavaScript 功能，从而掌握书写JavaScript 的书写技巧。4.客户端JavaScript 1）熟悉脚本化浏览器窗口。2）掌握HTML+CSS+JavaScript 的动态数据交互页面制作。3）掌握不同浏览器的JS 开发调试的方法。4）通过对浏览器的各种特效实例的修改、书写，掌握数据客户端Ja

27、vaScript 脚本。5）了解JavaScript 在各浏览器的兼容性和安全性。5.Javascript 开发、调试 JavaScript 编程的具体应用 1）修改Javascript 常用特效，掌握修改开源Js 的方法和技巧。2）效仿和制作Javascript 常用特效，掌握JavaScript 动态程序编写的方法和技巧。3）根据网页功能需要，书写Js 代码，掌握JavaScript 网站设计方法。6.Javascript 在 Web 中的实际应用 1）掌握JavaScript 窗口与框架在Web 中的应用，熟悉框架的设计和应用。2）熟悉屏幕对象与浏览器对象、历史对象与地址对象。3）掌握表单对象及JavaScript 和 cookie 数据交互的应用。4）通过JavaScript 在 Web 中各种应用实例的修改、效仿，掌握Javascript 在 Web 中的实际应用。7.DOM 对象 1）了解DOM 概念，熟悉DOM 基础。2）熟悉JavaScript 在 DOM 中的应用。3）了解DOM 客户端编程。【课时要求】8 节