大阳城娱乐网址

您的位置:网站建设 > 建站教程 > 面包屑导航怎么做,有哪些注意事项

面包屑导航怎么做,有哪些注意事项

日期:2018-05-12 09:26 阅读:162 来源:
  1. 首先,大家打开自己电脑上的网页编辑器,我以DWApp为例。大家新建一个HTML文档。

    面包屑导航的制作
  2. 然后大家在HTML的body部分开始写大家的代码。面包屑导航是横排的几个文字和图片的组合。

    面包屑导航的制作
  3. 大家可以用ul>li,或者dl>dt>dd来实现。因为这两个都可以横着在一行显示。

    面包屑导航的制作
  4. 我以dl>dt>dd为例。大家在html页面中写入dl和dd标签。这个导航的class大家一般使用breadcrumb,这个比较通用。

    面包屑导航的制作
  5. 大家在dd标签中输入部分文字。按下F12,查看不写样式页面在浏览器中的效果。可以看到不写样式,三段文字是竖着排列的。

    面包屑导航的制作
  6. 大家需要让三个dd标签横着排列,大家在style中将dd标签设为行内元素。默认情况下dd是有margin-left的,大家需要将其设为0;

    面包屑导航的制作
    面包屑导航的制作
  7. 这样一个简单的面包屑导航就做好了,一般导航是可以点击的链接,大家可以再为其添加上a标签。

    面包屑导航的制作
    面包屑导航的制作

网站设计中面包屑导航设计的注意事项


很多网站在设计的时候,都会考虑面包屑导航。那么面包屑导航有哪些作用呢?面包屑导航可以明确告诉用户现在所在的位置,从而减少用户的操作次数,所占的空间比较小。但是面包屑导航在设计的时候要注意几个方面,下面东莞做网站就来详细分析一下。


第一、面包屑导航不能代替主导航。要分清面包屑导航的地位,仅仅是作为一个辅助性质的导航,并不能代替主导航。面包屑导航的主要作用就是快速到达其他页面,方便用户选择上一级的栏目。


第二、不建议将当前页面的链接加入到面包屑导航中。面包屑导航的最后一个链接就是当前页面,但是在设计的时候,并不建议加入到面包屑导航中。制作面包屑导航体现的是定位的作用,加入链接并没有好处。


第三、面包屑导航设计时的分隔符的使用。常见的分隔符有>,但是要注意,分隔符并没有具体的硬性规定,因此,站长在设计面包屑导航的时候,可以结合网站的风格选择合适的分隔符。


第四、面包屑导航的尺寸以及间距。设计面包屑的时候,要结合页面的大小,而且不能比主体导航大。同时层级之间的距离也要控制好,不能太远也不能太紧,要方便、快捷。


第五、面包屑导航并不能成为视觉的焦点。站长要清晰地知道,面包屑导航只是一个辅助导航,并不能作为主导航。因此,选择的字体不能太花俏,也不能选择鲜艳的颜色,否则很容易就成为视觉的焦点,这样就会抢了主导航的风头。整个网站也会没有层次,给用户不专业的感觉。


前篇文章大家就讲到如何做好手机网站的优化,面包屑导航对网站优化也是很有帮助的,网站设计过程中,面包屑导航设计的时候要注意的事项就是以上几个方面,各位站长可以参考一下。


大家在做网站的时候是希翼量身定制网站建设呢还是企业宣传网站模板建设呢?


新手建站,面包屑导航是一门功课


  面包屑来源于一个童话故事,两个小孩为了避免在森林迷路,沿路洒下面包屑,帮助自己找到回家的路。因此,面包屑导航的作用就是帮助用户明确所在的位置,并快速返回上级路径,是一种辅助和补充的导航方式。接下来,大家就详细了解下面建设网站包屑导航。


  面包屑导航是一种线性的导航方式,显示方式为:主分类>一级分类>二级分类>......>最终内容页面。一般对面包屑的设计不需要太突出,只要用户方便找到就可以了,色彩上多以黑、灰为主,通常出现在内容区上方。


  一、面包屑导航的作用


  1.让访客明确所在位置,以及页面在整个网站中的位置;


  2.为访客提供返回各层级的入口,方便用户操作;


  3.体现网站的架构层次,对搜索引擎友好,搜索引擎可以沿着面包屑导航抓取信息,也能帮助用户快速进入网站页面;


  4.减低页面跳出率,面包屑导航的路径可以引领访客进入网站的其他页面;


  5.可以增加网站内链,由于内链建设,提高访客的体验感。


  二、面包屑适用哪些网站


  1.适用层级较深的网站。如果网站只有一级分类,那么只需要有主导航就可以满足访客的定位需求,因此扁平架构的网站没有适用面包屑的必要。


  2.适用导航路径是线性结构的网站。网站内容划分清晰,下级分类必定只属于上级分类,不存在交叉。否则,面包屑导航的路径是不唯一,同一分类可能会出现不同路径,让访客迷惑。


  面包屑导航并非是网站的必需品,多用于门户类、政府类、电子商务类网站,以符合其内容分类清晰,相互间独立不交叉的要求。所以,站长还是根据自己网站的实际情况判断是否需要。



TAG标签: 小程序 网站建设 网站优化 微信吸粉 网站设计 外贸网站建设 模板网站建设 网页制作 企业网站 SEO优化
更多>>相关文章
no cache
Processed in 0.302959 Second.
XML 地图 | Sitemap 地图