2.广州市交通技师学院网站焦点图的制作过程

步骤1：启动Axure RP pro 7.0，从元件库面板中拖放一个动态面板元件到默认的index页面，设置动态面板的元件的名称为gzjtjx，如图3-6所示。

步骤2：单击选中gzjtjx动态面板，在工具栏的位置尺寸输入框中，输入面板的高度和宽度（根据准备的图片素材尺寸确定），如图3-7所示。

步骤3：双击gzjtjx动态面板，打开动态面板状态管理器，插入四个状态页面，如图3-8所示。

步骤4：在打开的动态面板管理器中，鼠标双击“State1”，进入State1的编辑页面。

步骤5：拖入“image”元件，设置元件属性，将准备好的第一张图片素材导入；调整图像的位置，使其正好放置在动态面板的虚框内，如图3-9所示。

步骤6：插入四个按钮形状元件，宽和高设置为30，显示文本分别输入1、2、3、4，设置每一个按钮形状的名称与显示的数字一致。

步骤7：设置按钮1的样式，字体颜色为白色，填充颜色为浅蓝色；其他三个按钮均设置为白底黑字；调整四个按钮的位置，如图3-10所示。

步骤8：为按钮1添加“鼠标移入时”用例，设置鼠标移入时，将gzjtjx动态面板的状态切换到State1，进入动画选择“向右滑动”，时间间隔输入500毫秒，如图3-11所示。

步骤9：为按钮1添加“鼠标移出时”事件的用例，“选择状态为”下拉框选择“Next”，选中“向后循环”和“循环间隔”两个复选框，间隔输入1000毫秒，如图3-12所示。

步骤10：重复步骤8、步骤9，为其他三个导航指示按钮设置相应的事件用例，设置好之后如图3-13所示。

步骤11：关闭State1编辑页面，重复步骤4至步骤10，设置gzjtjx动态面板的其他三个状态，最终效果如图3-14、3-15、3-16所示。

步骤12：关闭当前状态编辑页面，返回index页面，在交互面板选中“页面载入时”事件，添加“设置动态面板状态”用例，在“选择状态为”下拉框中，选择“Next”，选中“向后循环”和“循环间隔”两个复选框，循环间隔输入1000毫秒，如图3-17所示。

步骤13：从文件菜单中保存项目，按F5快捷键预览最终效果；页面启动时动态面板每秒切换状态，实现预期效果。