热门标签 | HotTags
当前位置:  开发笔记 > 程序员 > 正文

[Axure]导航栏的制作:使用Axure制作面包屑导航栏

导航栏在网页设计中很常见,主要用于引导网站访问者浏览,也可以清晰地告诉搜索引擎网站内部目录所在。面包屑导航栏就是类似于这样的导航栏:主页>博客>移动专栏&g

导航栏在网页设计中很常见,主要用于引导网站访问者浏览,也可以清晰地告诉搜索引擎网站内部目录所在。

面包屑导航栏就是类似于这样的导航栏:

主页 > 博客 > 移动专栏 > 发表博文

大致有一下几点好处:

1.面包屑作为用户寻找路径的一种辅助手段,能方便他们定位和导航。

2.面包屑可以减少的用户返回上一级页面的所需的操作次数。

3.临时性,动态性,占用屏幕空间小,干扰性小。

4.降低网站访问者的总体跳出率。

下面就来看下如何制作面包屑导航栏。

(至于它为什么叫做面包屑导航栏,我想可能是源于那个童话故事,用面包屑做线索留下踪迹之类的)

你可以点击这里下载元件库,有一个雅虎元件库中包含了很多常用元件,比如日历啊,导航栏之类。

我们先用它的元件来制作一个面包屑导航。

首先,因为导航栏每个页面基本都会用到,所以添加一个母板:

接下来就是载入雅虎的导航栏元件库,在元件面板点击左上角,选择载入元件库:

载入完成就可以看到很多新增的元件了:

接下来我们把Breadcrumbs拖动到面板上:


但是这样的导航没有任何效果,我们先做一个二级页面的导航。

将右边的面包屑删减至两个,选中左侧的,双击OnClick添加用例:

接下来就是给导航栏添加链接:



然后选中第二个文本标签,选择OnPageLoad:


选择设置变量/元件值:


在依次部署好相关的选项。点击编辑:

其内容改为PageName,也就是当前页面的名称:

这是基本就设置完毕了,我们把第一个标签的内容改成主页,以便更为和谐,然后选择添加页面:

点击全选按钮应用到所有页面:

这是就会发现所有的页面都有导航栏了

运行的时候,TopicName的字样会自动变成当前页面的名称。




当然这只是二级页面的导航,比较复杂的多级页面就不能这样操作了,在此提供一个思路:

1.使用母板做好首页的导航,只有一个标签。

2.在每个二级页面中创建单独的标签,并将文字内容设置为OnPageLoad的时候就变成当前页面的名称。

3.在每个三级页面像是首页一样做一个便签实现到二级页面的跳转,紧跟在首页标签的后面,同时三级标签中创建单独的标签,并将文字内容设置为OnPageLoad的时候就变成当前页面的名称。

4.后面级别的页面以此类推。






推荐阅读
  • 搜索大文件(20G左右) ... [详细]
  • 本文深入探讨了二叉搜索树(Binary Search Tree, BST)及其操作,包括查找、插入和删除节点。同时,文章还介绍了平衡二叉树(AVL树)的概念及调整方法,并详细讨论了如何判断两个序列是否构成相同的二叉搜索树。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 本文详细介绍了HTML中标签的使用方法和作用。通过具体示例,解释了如何利用标签为网页中的缩写和简称提供完整解释,并探讨了其在提高可读性和搜索引擎优化方面的优势。 ... [详细]
  • 本文介绍了如何在最新版本的Visual Studio Code中配置中文语言包,使用户能够更便捷地使用中文界面。文章详细描述了安装和配置步骤,并提供了相关补充说明。 ... [详细]
  • 在哈佛大学商学院举行的Cyberposium大会上,专家们深入探讨了开源软件的崛起及其对企业市场的影响。会议指出,开源软件不仅为企业提供了新的增长机会,还促进了软件质量的提升和创新。 ... [详细]
  • 新冠肺炎疫情期间,各大银行积极利用手机银行平台,满足客户在金融与生活多方面的需求。线上服务不仅激活了防疫相关的民生场景,还推动了银行通过互联网思维进行获客、引流与经营。本文探讨了银行在找房、买菜、打卡、教育等领域的创新举措。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 360SRC安全应急响应:从漏洞提交到修复的全过程
    本文详细介绍了360SRC平台处理一起关键安全事件的过程,涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例,展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 如何在PHPCMS V9中实现多站点功能并配置独立域名与动态URL
    本文介绍如何在PHPCMS V9中创建和管理多个站点,包括配置独立域名、设置动态URL,并确保各子站能够正常运行。我们将详细讲解从新建站点到最终配置路由的每一步骤。 ... [详细]
  • 本文详细解析了Python中的os和sys模块,介绍了它们的功能、常用方法及其在实际编程中的应用。 ... [详细]
  • 离线环境下的Python及其第三方库安装指南
    在项目开发中,有时会遇到电脑只能连接内网或完全无法联网的情况。本文将详细介绍如何在这种环境下安装Python及其所需的第三方库,确保开发工作的顺利进行。 ... [详细]
  • 掌握远程执行Linux脚本和命令的技巧
    本文将详细介绍如何利用Python的Paramiko库实现远程执行Linux脚本和命令,帮助读者快速掌握这一实用技能。通过具体的示例和详尽的解释,让初学者也能轻松上手。 ... [详细]
author-avatar
憐海周_472_151
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有