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

《人机交互界面设计》课程教学大纲

课程编号：48172

制定单位：软件与通信工程学院

制定人（执笔人）：汪彩霞

审核人：王颖

制定（或修订）时间：2014年6月 28号

江西财经大学教务处

《人机交互界面设计》课程教学大纲一、课程总述

二、教学时数分配

三、单元教学目的、教学重难点和内容设置

第一部分人机交互与界面设计基础知识

【教学目的】掌握界面设计的基本原则，概念设计和逻辑设计。

【重点难点】手机端网页的界面设计

【教学内容】

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.7 css3属性：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-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 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(255,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-mask-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); /*横向渐变*/

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.距离