设计导航网页标签定义导航项目(网页中的页面导航链接用结构标签定义)
本文目录
- 设计制作网页导航时，可用（）标签定义导航项目，然后设置导航项的CSS样式
- 网页设计导航是怎么做的
- 网页导航栏的设计方式有哪些
- 如何设计网站导航系统
- 个人网页设计导航上面可以写些什么呢
- APP导航和页面设计样式
- 网站导航设计类型都有哪些
设计制作网页导航时，可用（）标签定义导航项目，然后设置导航项的CSS样式
答案：C《ul》《li》HOME《/li》《li》HOME《/li》《li》HOME《/li》《li》HOME《/li》《li》HOME《/li》《/ul》
网页设计导航是怎么做的
1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：
《html xmlns=“网址“》
《head》
《meta
4、然后将以下CSS代码加入到《head》《/head》之间：
《style type=“text/css“》
body {text-align:center;}
#navigation
{ list-style-type:none; height:auto;}
#navigation li { width:154px; height:60px; text-align:center;
float:left; padding-top:18px;font-size:20px; font-family:“微软雅黑“, “宋体“, “隶书“;
background-image:url(images/noactive.jpg);}
a {width:154px; height:72px;}
a:link { text-decoration:none; color:#FFFF00;}
a:visited { text-decoration:none; color:#FFFF00; }
#navigation li:hover { color:#CC0000; text-decoration:underline;
background-image:url(images/active.jpg);}
a:hover{ color:#CC0033;}
#left {background-image:url(images/left.jpg); width:22px;}
《/style》
5、在加入CSS代码之间，网页此时的效果如图：
网页导航栏的设计方式有哪些
导航栏的设计方式有很多种，通过专业的PS设计软件，可以结合自己的灵感设计，网上有很多可以做为参考或欣赏。
如何设计网站导航系统
导航模式
网站的导航如何设计，在设计网站导航时首先应该明确用户的浏览习惯，根据用户的浏览习惯，首先会先大概地扫视一遍页面，其次则会开始寻找导航栏，快速从导航栏上找到主要信息，引导用户寻找网站对他有用的信息。一般来说左边的权重要比右边的权重要高一些。
网站的导航信息应该明确，，设计一个有魅力的导航还能留住用户浏览更多的内容信息，带给用户良好的体验。在网站导航设计上应该主要关注一下几点：导航的模式常见的导航模式有很多，例如顶部水平横栏式，垂直导航栏，侧边固定式，滑出或者弹出窗口导航等，通常网站是根据所要展示的内容要点来选择不同的导航。如果网站的内容较少，在网站导航上可以选取水平式导航，这样既可以重点内容而且简单清晰，网站内容较多的时候可以选择抽屉式的导航，用户在浏览网站时各种信息都很明确。如果网站的显示页过长，比较试用的是垂直式导航，方便用户在浏览内容时导 航信息始终保持在一个位置可以被快速找到。
导航内容
网站的导航应该是对整个网站想要展示的信息总结，导航的信息要与详细页面符合，标题的总结要精简，注意网站小内容最好不要以导航的总标题形式出现，可通过细分的下拉菜单，或者以更多形式的小菜单栏里出现。
导航细节
在导航设计时可以设置一个“到顶部” 的标志，以便用户快速到达头部的导航位置。这样对于网站内容较多用户下滚的内容过长时就可以快速的到顶部了。
导航创意
我们都喜欢新的东西，在看惯了千篇一律的导航形式如果能给导航加点创意，那么肯定会非常吸引人眼球。
网站的导航在网站设计中有着举足轻重的地位，好的网站导航是成功的一半，所以在网站的导航设置上更加注意。
个人网页设计导航上面可以写些什么呢
基本的一些导航要有，比如首页、关于我、联系我们等，其它的元素根据自己的需要加上，一般的个人站的导航为：首页、个人介绍、相册、日志、联系我们，具体可参考QQ空间和一些门户网站的博客
APP导航和页面设计样式
页面导航的分布如下所示 将入口放在页面的底部，形成标签导航。目前这种导航的设计方式在app设计中非常常见，其优点十分明显，即用户可以非常直接的看到该app的功能结构。而缺点是这些功能并没有非常清晰的主次关系，同时扩展性差。因此目前标签导航建议底部的标签不超过5个，如果超过5个建议使用其他方式。 该类导航与标签导航相似，不同的是中间的导航标签会蕴含更多的操作选项，即该标签中包含了更多的二级导航。以小红书为例，其底部导航就是典型的舵式导航，点击“+”标签会直接唤醒相机并可以导入图片/视频等内容 对于舵式导航里的扩展二级标签，这些二级标签可以形成一种单独的导航- 点聚导航 ，从Bilibili的底部导航可以看出，点击中间的导航会弹出4个二级标签：开直播、拍摄、上传和模板创作。舵式和点聚导航的方式往往适用于产品需要特殊引导或者是凸显核心功能的场景。其缺点是功能之间无主次，扩展性差，不利于后期的功能拓展。 将标签放到界面的上方，就会形成tab标签导航，这种导航适用于类目较多的APP作为二级导航梳理页面逻辑，布局清晰。作为一个二级导航，顶部标签导航应用于多种情境下，可以固定数量，展示有限的几个标签。也可以扩大一定的数量，变成向左滑动展现更多标签，十分灵活，但是因为在手机中左右滑动不如上下滑动方便，因此，个人认为还是不要展开太多标签。以微博和下厨房为例，这两个APP都采用了Tab页导航。 抽屉导航是将菜单隐藏在当前页面后，点击导航入口即可像拉抽屉一样拉出菜单。抽屉导航一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，优点是可以节省页面空间，比较适合于不那么需要频繁切换内容的应用，例如对设置、关于、个人信息等内容的隐藏。以网易云音乐为例，其采用了非常标准的抽屉式导航，目前更多APP会采用抽屉导航的变式，即点击导航入口以后，以向右滑动的方式，整个抽屉页将滑动出现并且占据整个屏幕，例如小红书app的抽屉导航。 一般位于产品顶部，通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层，可通过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置。但由于是位于屏幕上方，相对隐蔽而且不能结合手势操作，所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多。 主要功能入口全部聚合在页面，让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作，用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务，从而选择自己所需要的那个服务。这种导航于一些提供的服务较多或者类目较多的APP，例如支付宝、淘宝等。 宫格导航的应用很广泛，也产生了很多变种，以百度贴吧为例，其在应用宫格导航的时候，将功能进行了分类并且用标题加以区分，使用户更容易从众多功能中找到需要使用的功能。 还有一种变式，是可滑动的宫格，这种设计适合于宫格内容较多，但是不想占用太多屏幕空间，于是用户可以左右滑动来查看功能内容。以小米app为例，由于功能较多，但是不希望占用较多屏幕面积，因此导航只放了两行功能，但是用户可以向右滑动找到更多的功能。在宫格区域下方采用了指示器来告知客户滑动的范围。 通过列表指示类目，在右侧显示箭头表示有二级内容，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。 同样可以对列表进行分类产生变式，这样逻辑会更清晰，不知道如何确定分类名称。把分类名称去掉也是可以的。只是用间距将每一组列表隔开也能起到梳理逻辑的作用。每一个页面就代表一个导航入口，这就是轮播导航，适用于比较简单或者结构比较扁平的APP。轮播导航能够最大程度的保证应用的页面简洁性，操作也是最方便的，只需要手指左右滑动。缺点也很明显：承载入口的数量有限，超过10个可能就多了。这种导航常见于查看图片，也经常与其他导航模式结合，作为banner广告呈现。
网站导航设计类型都有哪些
全站导航：通常出现在页面较为显著的区 域，以静态或动态图片、图文结合或flash动画的 菜单或栏目链接的形式出现，体现的是整个网站最 基本、最核心的内容。
局部导航：在全站导航的基础上提供一个 层级式的链接方式，帮助用户更加深入地浏览网 站信息，通常也是以静态或动态图片、图文结合或flash动画的栏目链接的形式出现，在编排层次上 次于全站导航
辅助导航：提供一些全站快速到达文章页的快捷途径，以各种设计精 美的静态或动态图标的形式出现较多。
上下文导航：主要用来帮助用户更好地翻阅 一些包含多个页面的内容项目，功能类似于辅助导 航，以文本和数字链接形式出现较多。
友情导航：主要是用于一些浏览者通常很少使用的链接内容，这些链接在浏览者需要的时候 能提供快速有效的帮助，例如在线帮助、联系信息 等，基本以文字链接的形式出现。
望采纳~
