zoukankan      html  css  js  c++  java
  • Axure RP 6.5学习记录(3)网页头Header可复用组件设计

      在网页设计中,有些页面时可以复用的,比如说网页头部和底部等,就可以设计组件Master。

      先看看Axure RP中的复用组件管理区域:

                                                             

      1、设计博客园首页头部Header。

      1)在复用组件管理区域点击添加文件夹图标,添加一个文件夹,并重命名为博客园。

                                                                   

      2)选中博客园文件夹,点击添加组件图标,添加一个组件,并重命名为Header。                  

                                                             

      3)双击Header组件,使Header组件在原型设计区域处于编辑状态。

      4)我们添加Header第一行的"代码改变世界"标签和"登录"、"注册"链接。这些都是使用Text Panel控件完成。直接拖动Text Panel控件到设计区域的Header页面中。

                      

      5)Header第二行的Logo设计。先拖动一个Rectangle控件到Header页面中的合适位置,调整好大小,在Rectangle控件上点击右键"Edit Button Shape"--->"Select Shape"--->"Rounded Rectangle"将其变成圆角矩形;将一个Image控件拖动到Rectangle控件的左边,调整好大小,在Image控件上点击右键"Edit Image"--->"Import Image"选择Logo图片,Image控件会自动适应Logo图片的大小。

                      

      6)Header第三行的菜单设计。先推动一个Rectangle控件到Header页面中,调整到合适的大小,并设置好控件的背景颜色。然后拖动Text Panel控件到页面中设计菜单文字。

      7)最后看一下效果。                         

                                    

  • 相关阅读:
    7款纯CSS3实现的炫酷动画应用
    9款基于HTML5/SVG/Canvas的折线图表应用
    8款耀眼的jQuery/HTML5焦点图滑块插件
    10款很酷的HTML5动画和实用应用 有源码
    13款精彩实用的最新jQuery插件
    9款超绚丽的HTML5/CSS3应用和动画特效
    8款最受欢迎的HTML5/CSS3应用及源码
    Zookeeper可以干什么
    MySQL数据库优化
    SQL语句的执行过程
  • 原文地址:https://www.cnblogs.com/luxh/p/2573837.html
Copyright © 2011-2022 走看看