本文关键词：dw做网站的导航栏怎么做
很多新手刚上手Dreamweaver，打开软件一看，满屏的代码和属性面板，脑子直接嗡嗡的。做网站最怕什么？不是写不出代码，而是做出来的东西像十年前的盗版软件。今天不扯那些虚头巴脑的理论，直接聊dw做网站的导航栏怎么做，怎么让它既好看又实用，还能让百度蜘蛛喜欢爬。
先说个真事儿。上个月有个朋友找我改站，他自己在网上找了个模板，导航栏做得那叫一个复杂，鼠标放上去还得转个圈，底下还带个下拉菜单，结果手机上一看，全挤在一起，根本点不动。这种导航，用户看一眼就关，百度收录也低，因为爬虫根本解析不清结构。咱们做站，核心就俩字：清晰。
我一般建议，别一上来就搞特效。DW里做导航，最稳的还是用表格或者div+css，但现在主流肯定是css。为啥？因为代码轻量，加载快。你想想，用户打开网页，如果导航栏要加载好几秒，谁等得及？
具体怎么弄？第一步，先把结构搭好。别用那些复杂的嵌套，越简单越好。比如，就是一个ul标签套几个li，每个li里放个a标签。这样语义化好，百度蜘蛛最喜欢这种结构，觉得你正规。我见过太多人用table做导航，那是上个世纪的事儿了，现在用table，不仅代码臃肿，还容易被百度降权。
第二步，样式美化。别一上来就搞渐变、阴影，先保证文字清晰，间距合适。我有个习惯，导航栏的高度控制在40到50像素之间，字体大小14到16像素，颜色对比度要高。比如背景深蓝，文字白色，这样用户一眼就能看清。别搞那些灰底白字，看着费劲。
第三步，交互效果。鼠标放上去变色，这个必须有，但别搞太花哨。我一般就用简单的背景色变化，或者下划线移动。别搞那种弹跳、旋转的动画，除非你是做儿童网站。对于大多数企业站、博客，简洁就是王道。
这里有个坑，很多人喜欢在DW里直接拖拽组件，看着挺方便，但生成的代码一堆垃圾，什么font标签啊，align属性啊，全是过时的。你得手动写css，虽然刚开始慢点，但后期维护方便，代码也干净。我见过太多人因为偷懒用拖拽，结果后期改个颜色，找半天找不到代码在哪，哭都来不及。
再说说响应式。现在手机流量比电脑还多，你的导航栏在手机上能显示吗？别搞那种需要左右滑动的导航，用户没耐心。最好是汉堡菜单，或者垂直排列。在DW里，你可以用媒体查询@media来写不同屏幕下的样式。比如，屏幕宽度小于768像素时，导航栏变成垂直列表，字体变小。这样不管用户用什么设备看，体验都好。
最后，测试。做完别急着上线，多浏览器测试，Chrome、Firefox、Edge，甚至IE（虽然没人用了，但有些老客户还在用）。看看有没有错位，有没有重叠。我有一次做完导航，在Chrome上好好的，到Safari上文字就换行了，查了半天发现是字体的问题。这种细节，只有真刀真枪干过才知道。
总之，dw做网站的导航栏怎么做，核心就是：结构简单、样式简洁、交互自然、适配移动端。别整那些花里胡哨的，用户喜欢，百度喜欢，你就成功了。记住，做网站不是做艺术展，是解决问题。把导航做好，用户才能找到他想找的东西，这才是硬道理。
