《计算机技术与计算思维》17.教案-原型设计2.docx

时间

分配

教学过程

Min:90

学生讨论：

1、如何设计出一个软件的原型？

2、如何绘制百度UI的站点地图?

3、Axure线框图如何使用？

4、什么是动态面板？

5、动态面板如何使用?

6、如何通过动态面板做学校主页的“教师风采/教研动态/学生风采”？如何通过动态面板制作导航下拉菜单？

7、内联框架如何使用？

老师讲授：

1、Axure操作界面

2、Axure站点地图基本操作

3、Axure线框图的使用

教授内容：

1、Axure线框图基本概念

（1）矩形组件：代表要执行的处理动作，用作执行框使用。

（2）圆角矩形组件：代表流程的开始或者结束，用作起始框或者结束框。

（3）菱形组件：代表决策或者判断，用作判断框。

（4）文件组件：代表一个文件，用作以文件方式输入或者以文件方式输出。

（5）括弧组件：代表说明一个流程的操作或者特殊行为。

（6）平行四边形组件：代表数据的操作，用作数据的输入或者输出操作。

（7）角色组件：代表流程的执行角色，角色可以是人也可以是系统。

（8）数据库组件：代表系统的数据库。

2、图片组件的使用

3、标题组件的使用

4、矩形和占位符的使用

5、图像热区的使用

6、轮播图的制作

7、Axure动态面板基本概念

8、动态面板的使用

9、通过动态面板做学校主页的“教师风采/教研动态/学生风采”

10、内联框架的使用

2.添加注释和交互

创建自定义元件库是可以给元件添加注释和交互，当使用该元件时，注释和交互也会被添加到设计区域。比如，使用动态面板创建一个有交互效果的开关按钮，当把这个自定义按钮拖入到工作区域时，它的交互效果依然存在。

3.组织元件库到文件夹

与【站点地图】面板中组织管理页面一样，自定义元件也可以添加到不同的文件夹进行分类管理。在自定义元件面板中点击文件夹小图标，可以添加文件夹，然后拖放自定义元件到文件夹中，或者使用箭头来移动元件

4.使用自定义样式

自定义元件可以指定自定义样式。设计自定义元件时，可以给元件填充颜色、边框、字体、阴影等样式。当自定义元件添加到项目时，它的样式也被同步导入项目文件

5.编辑自定义元件属性

教师演示：

学院网页关键元素设计

实践练习

制作局部放大的图片效果

制作一个轮播图

作业：制作局部放大的图片效果

制作一个轮播图

通过动态面板做学校主页的“教师风采/教研动态/学生风采”效果

通过内联框架加载网络视频

作业：通过动态面板做学校主页的“教师风采/教研动态/学生风采”效果

通过内联框架加载网络视频

作业布置

完成三个页面的网站设计

课

后

反

思