实战——淘宝登录页签的切换效果.pptxVIP

实战—— 淘宝登录页签的切换效果;淘宝登录页签的切换效果，两张图摞在一起，单击“账户密码登录”将图1放在最上面显示，单击“快速登录”将图2放在最上面显示，即可模拟淘宝登录页签的切换效果。这就是动态面板模拟交互效果的基本原理。;实战——淘宝登录页签的切换效果;登录页签标题设计;拖曳两个标题2元件到工作区域，分别命名为“快速登录”和“账户密码登录”，字号设置为18号字，账户密码登录的字体颜色设置为灰色（999999），以区分当前选中的页签。 4. 拖曳一个横线元件，放到矩形边框的最上方，宽度设置为314，调整一下线宽。;5. 拖曳一个水平线元件，放到“快速登录”标题的下方，调整一下位置和宽度，颜色设置为黑色（333333）。再拖曳一个水平线元件，放到“账号密码登录”标题的下方，同样需要调整一下位置和宽度，将它的颜色设置为灰色（CCCCCC），作一个区分。 ;快速登录页面设计;账号密码登录页面设计; 3. 用户名输入框里有提示信息“手机号/会员名/邮箱”，在检视区域里选择“属性”，“类型”选择“文本类型”，“提示文字”里输入“手机号/会员名/邮箱”，给提示文字设置一个样式，设置字体颜色为灰色（999999），并且将边框隐藏起来。;选中用户名输入框的边框、图标及文本输入框，按住Ctrl键向下拖曳，复制一份，作为密码的输入框。 去掉密码输入框里的提示信息，文本输入框的边框要去掉，设置一下密码输入框的属性，将它的类型设置为密码类型，这样可以保护密码的安全。;忘记密码与免费注册;拖曳一个图片元件，作为微博的图标，宽度设置为17、高度设置为17。拖曳一个文本标签元件，文本内容命名为“微博登录”，标签命名为“微博” 。 拖曳一个图片元件，作为支付宝登录的图标，宽度设置为17、高度设置为17。拖曳一个文本标签元件，文本内容命名为“支付宝登录”，标签命名为“支付宝” 。 ;页签交互效果设置;再拖曳一个图像热区元件，调整大小，放置在账户密码登录的上方。 设置一个鼠标单击时触发事件，在“添加动作”下面单击“设置面板状态”，在“配置动作”下面勾选登录方式的动态面板，选择动态面板的状态为“账户密码登录” 。 按F5键发布看一下效果，单击“快速登录”和“账户密码登录”这两个页签，可以实现两个页面内容的切换效果。  ;小结;感谢您的观看