HTML5 CSS3网页设计与制作教学导航
单元1站点创建与制作商品简介页面【教学导航】
单元2超链接应用与制作帮助信息页面【教学导航】
单元3表格应用与制作购物车页面【教学导航】
单元4表单应用与制作注册登录页面【教学导航】
单元5网页布局与制作商品筛选页面【教学导航】
单元6模板应用与制作商品推荐页面【教学导航】
单元7网页特效与制作商品详情页面【教学导航】
单元8网站整合与制作购物网站首页【教学导航】
10个导航栏的设计技巧
10个导航栏设计技巧 想要全面掌握UI设计技能，需要自己付出更多的努力，除了专业的学习，在平常还要多看书，多动手，进行一些实践训练，这样才能更好地提升自己的能力，在工作中游刃有余，推荐10个导航栏设计技巧，希望对学习UI的你有所帮助！ 1、超大菜单栏 即使许多设计师不喜欢这样的设计，但是对于许多客户而言，它依然是一个客户反响很好的设计方案。 不过过大的导航栏可能还是存在一些可用性问题的。通常，超大的导航栏存在的主要原因在于，导航栏项目很多难以缩减。对于网站的运营者而言需要仔细考量这件事情，或者通过搜集来的数据来做设计决策的论据。 2、加入显眼的搜索框 用户常常使用搜索来筛选信息，更快更直接地获取重要的信息，所以，搜索框应该突出展示。它应该出现在每个页面上，应该和主导航栏一起存在，应该够大也易于访问。 用户对于搜索的需求是刚性的，不要试图打破这种客观存在的规律，尽量让搜索融入到主导航当中来吧。（确保输入框足够大，可以输入，并且足以一次显示常见的搜索内容） 3、限制导航内条目数量 作为设计师，你需要预测用户经常访问的内容，将最重要、最常用到的条目置于导航栏当中。值得一提的是，几乎每个网站的导航中都会包含搜索、关于我们、首页，而电商类网站则通常会包含购物车、购买的按钮。 但是无论如何，永远将最关键、最重要的导航类目让用户看到，才是导航所应该做到的事情，换句话来说，就是关键内容驱动导航分类。
4、更聪明的导航机制 好的导航设计，能让用户能在页面和页面之间合理快速切换，网站不同的内容和功能之间是有一定的自然逻辑的，这个自然逻辑可以作为导航设计的一个重要参考。 在这个用户体验高度个性化的时代，网页导航的玩法可以更加多样。以Amazon 为例，当你登录了之后，会发现导航开始围绕着你的信息进行了调整，导航栏从通用的条目变为更贴近你的个人情况的样式，其中包括最近的购买记录，信用额度和Amazon 的服务信息等。 5、正确地排布导航内的条目 导航内的元素的排布顺序和条目内容同样重要。导航栏两头的条目是最引人注意的，并且也通常是用户点击最多的，所以作为设计者，你需要特别注意这些条目的设计。 对于这一点，还有不少科学研究和理论支持。比如，序列位置效应指的就是人会更容易记住列表的开头和结尾的条目。新近效应说的是用户更容易记住最新看到的条目，而首位效应说的是，相比于列表中间的内容，用户更容易记住列表开头的几个条目。 6、垂直导航 垂直导航设计也是目前越来越流行的设计之一。最常见的是垂直导航，是侧边栏导航，它和许多软件的UI设计不谋而合。侧边栏导航对于如今的许多网站是个合理的选择，尤其是诸如长滚动式的页面。 侧边栏导航通常为常驻式的，让用户可以随时定位，快速跳转，并且其中所能承载的元素相对比顶部导航更多。垂直导航尤其要注意条目之间的空间间隔。 7、长滚动页面上使用悬浮导航 对于长滚动页面而言，导航设计是否可靠是一件颇为重要的事情，无论导航是在顶部、侧边栏还是在底部，它最好能够悬浮置顶，不论用户滚动到哪个
如何做好网站导航设计
如何做好网站导航设计集团档案编码：[YTTR-YTPT28-YTNTL98-UYTYNN08]
是网站中一个很重要的因素，一个合理的导航设计不但利于搜索引擎优化，还对提升用户体验至关重要，迅速了解自己所处的位置，这对提高用户的转化率十分有用。在中做好各类导航设计对网站后期的优化推广十分有利。那如何做好网站导航设计 1、辅助网站指引用户 为了给用户提供直观的显示，让用户知道他们所处的位置，以便每个级别的位置名称都可以链接，每个页面必须包含辅助导航和站点的左上角的logo标识。 2、网站logo 在中，指向网站主页的链接将添加到站点logo出现的每个站点上，很多用户习惯于单击网站logo作为返回网站主页的标记。 3、导航跳跃的位置 主导航栏应位于顶部附近，或位于站点左侧。如果需要子导航，因为内容太多，用户可以容易地告诉哪个是主导导航栏，哪个是某个导航的辅助导航栏。 4、导航的简单性 在时，尽量简单，避免使用下拉菜单导航或弹出菜单导航，因为导航不是网站的主流，它只是网站的指南。主要功能是让用户在网站上迷路，可以快速找到方向，这对用户来说是方便的，而不是给用户增加负担。 5、网页指示 用户应该知道网页现在是什么，现在浏览网页的相关网页是什么，例如，例如通过辅助导航“首页→新闻频道→新闻全名”里面的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。 6、页面提示 有些网站有太多的信息，此时让用户浏览和没有浏览区别，最简单的方法是让已经浏览过的网页被浏览，如果不是在一个统一的网页锚文本页面中，你可以显示用户已经在其他地方已经浏览过的内容。 7、登录并退出 登录入口和退出登录出口可在整个站点的每个页面上使用，允许用户登录和退出任何网页。
实验八 制作网页导航条
实验八制作网页导航条 使用实验八给的实验素材建立站点文件夹，然后制作如下的导航条。 一、利用列表制作垂直方向的导航栏 步骤： 1.在站点中新建nav01.html，页面设置如下。 2.在“插入”菜单中选择“Div”命令，在弹出的对话框中设置如下： 3.在插入的Div标签中输入如下段落文字，给文字设置空链接并应用项目列表， 如下图所示效果： 4.打开【CSS样式】面板，新建以下CSS规则，保存在当前文档，具体设置如 下： 1)新建“ID”的样式#navigation，属性设置如下： 2)新建“复合内容“样式#navigationul，属性设置如下： 3)新建“复合内容”样式#navigation li ，属性设置如下
4)新建“复合内容”样式#navigation li a ，属性设置如下 5)新建“复合内容”样式#navigation li a：hover ，属性设置如下 6)保存并预览该页面，最终效果图如下： 7)可修改其中相应样式的属性，将导航菜单变为水平排列的菜单，操作参 考如下： 选择【CSS样式】面板中的#navigation样式，将【方框】分类中的“width”属性改为600px。
选择【CSS样式】面板中#navigationli样式，将【方框】分类中的“width”属性设置为100px。“float(浮动)”属性设为：left(左对齐)，单击【应用】按钮查看效果。继续将“margin”的右right、左left属性分别设为5px，单击【应用】按钮查看效果。最后单击【确定】按钮，则可看到垂直导航菜单变为水平导航菜单。 二、制作垂直方向的导航栏 在Dreamweaver CC打开实验素材文件夹中的nav02文件夹中的nav02.html 文件，将图1左侧竖排的导航栏制作成如2的效果： 图1 初始竖排导航栏图2 导航栏最终效果
如何有效利用dw制作漂亮的导航栏效果
目录 目录 (1) 增加新框架 (1) 如何有效利用dw制作漂亮的导航栏效果 (1) 建立CSS 导航代码 (6) Dreamweaver网页设计技巧 (7) 怎样用Dreamweaver制作导航栏下拉菜单 (11) 增加新框架 如何有效利用dw制作漂亮的导航栏效果 最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿super大餐。Let’s Go！ 一、进门点心：利用Dreamweaver MX制作最基本的下拉菜单 实现下拉菜单的思路是首先建立一个相对定位的层，调整其位置，并设置其显示属性为隐藏，然后通过给链接文本或图象添加onclick（点击）或者onmouseover（鼠标划过）的事件来触发“显示-隐藏层”的行为，显示隐藏的层，并且在鼠标划出层时隐藏层，实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤： 1．使用菜单在页面中插入一个层，这个层是相对定位的层，然后再在其中插入一个子层，因为子层的位置是相对于父层而言，所以只要父层的位置不发生变化，改变子层的位置和大小不会改变其相对性，效果如图1所示。 图片如下： 图1 为了父层不占据页面空间，可以设置其宽和高为0，因为以后要调整子层的位置，所以先不设定子层的显示属性为隐藏，而是到确定子层到合适位置后再设置。
2．选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板，单击行为面板中的加号按钮，在弹出的行为下拉菜单中选择“显示-隐藏层”，在弹出的设置对话框中选中子层，单击显示按钮，如图2所示。 图片如下： 图2 显示层 设置完毕后单击确定按钮，修改其触发事件为onmouseover，即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为，继续使用行为面板，选择“显示-隐藏层”，在弹出的对话框中选中子层，单击隐藏按钮，如图3所示。 图片如下： 图3 隐藏层 设置完毕后单击确定按钮，在行为面板中修改该行为的触发事件为onmouseout，即鼠标划出时隐藏子层。 3．拖动子层，调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的，所以需要多次调整并在浏览器中预览效果，只到达到合适的位置。 4．设置子层的显示属性为隐藏。 按F12键在浏览器中预览页面，下拉菜单效果如图4所示。 图片如下：
基于CSS技术的网页导航栏制作
基于CSS技术的网页导航栏制作 摘要：CSS的开发技术已成为现如今网页前台开发的主要应用技术，导航栏作为整个网站的向导，用途至关重要，基于CSS技术开发的导航栏能在各类浏览器中正常使用，解决了浏览器不兼容的情况，从而解决了网页开发的难题。 关键词：CSS；网页制作；导航栏；浏览器兼容 对网页前台设计师而言，网页的兼容性至关重要，用户的体验是设计师设计的出发点，随着浏览器的更新，许多网页的导航栏无法正常使用，导致网站浏览异常，使得网页需要频繁地更新维护。而使用CSS技术进行开发的网页导航栏，在多个浏览器中都可正常使用，并且还能在网页开发中广泛应用。 1 CSS简介 1.1 CSS概述 CSS（Cascading Style Sheet，层叠样式表）是用于控制网页元素显示样式的标记语言，是目前流行的网页设计技术，与传统使用的HTML技术布局网页相比，CSS可以实现网页分离，同一个网页应用不同的CSS，会呈现不同的效果的特点。同时，CSS可以支持几乎所有的字号和字体，对网页中的对象可以进行精确到像素为单位的排版，是目前最主流的
设计语言之一，并且具有较强的易读性，可针对各类人群。 1.2 CSS语法 CSS样式表分为嵌入式样式表、外部样式表和内联样式表3种，其中，优先级：内联式>嵌入式>外联式，本文所采用的主要为外部样式表设计，更加方便应用、修改。 CSS基本语法：td{ text-align：center；}，td为选择器，text-align为属性，center为值。期中，选择器分为类选择器、标签选择器、ID选择器和复合内容，属性与属性值之间使用“：”隔开，多个属性之间使用“；”隔开。 2 CSS技术的导航栏制作 2.1 使用Photoshop设计导航栏美工 在使用CSS制作网站导航栏之前，首先使用Photoshop 制作网站导航栏的美工设计，根据网站整体风格以及色彩搭配，设计好网页所需的一级菜单和二级菜单的图片样式。要注意视觉区域的划分、重点主题突出等特点。并且使用Photoshop保存出透明无底色的背景图片作为备用，以我校实验教学部网站为例（见图1-2）。 2.2 使用CSS和表格布局制作导航栏初步结构 使用DIV+CSS的布局方式设置导航栏的位置，布局好整体架构，并使用表格的布局方法完成导航栏内部文字的布局设计。代码如图3所示。 设置ID选择器dh和类选择器mainMenu属性，完成导
网页导航设计的常见样式
网页导航设计的常见样式 导航是指引用户找到自己所需内容的一个入口，对于导航栏目的设计，自然也有一套方法。让用户能够快速、便捷的找到所需，让用户能够清晰明了的了解到导航条的内容，让用户能够青睐于导航栏目结构的设置，从视觉上做到醒目的效果。 对于导航栏目的最佳设计就是采用文本链接的方式，文本链接方式便于人们了解，直接的看到内容，更醒目，提高了网站的易用性。对用户来说，易用，易理解，易操作的网站比较重要，而那些因为花哨而制作的导航栏目是不会受用户所喜爱的。 在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式，我们将讨论它的一般特征，它的缺点，以及什么时候使用它最好。 顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。顶部水平栏导航一般特征：导航项是文字链接，按钮形状，或者选项卡形状，水平栏导航通常直接放在邻近网站logo的地方，它通常位于折叠之上。 顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包 含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。 顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常 好的。这也是单列布局的网站的主导航的唯一选择（除了通常用于二级导航系统的底部导航）。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。 竖直/侧边栏导航，侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征：文字链接作为导航项很普遍（包含或不包含图标），很少使用选项卡（除了堆叠标签导航模式），竖直导航菜单经常含有很多链接。
83网站导航栏制作案例
本案例将练习 Dreamweaver 中行为的使用。案例的制作思路： (1) 向预留的导航栏位置插入嵌套表格。 (2) 插入导航栏图片。 (3) 对图片添加“交换图像”行为，使得鼠标移到图片上时文字发光，如图所示，鼠标移开图片时文字恢复，如图所示。 图鼠标移到导航栏上 图鼠标从导航栏移开 在介绍案例的具体实现之前，先来介绍相关的知识。 8.3.1 行为概述 Dreamweaver 提供了一种称为“行为”的机制，帮助用户构建页面中的交互行为。行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互，是一个带有面向对象设计思想的工具。事实上，行为是由预先书写好的JavaScript 代码构成的，使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。利用Dreamweaver 中的行为，不需要书写代码，就可以实现丰富的动态页面效果。 行为有 3 个重要的组成部分：对象、事件和行为。
对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。 事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到 HTML 标记中。不同的浏览器支持的事件种类和数量不一样，通常高版本浏览器支持更多的事件。 行为通过动作来完成动态效果。例如，弹出信息、改变属性、交换图像等都是动作。动作是一段JavaScript 代码，在Dreamweaver CS3 中使用内置的行为，系统会自动往页面中添加JavaScript 代码，用户完全不必自己编写。Dreamweaver 内置了很多行为动作，形成一个JavaScript 程序库，用户还可以到官方网站下载并安装更多的行为。另外，如果精通JavaScript 语言，也可以编写自己的行为，添加到Dreamweaver CS3 中。 选择“窗口”→“行为”可以显示“行为”面板。在网页中添加行为时，首先需选择要添加行为的对象，然后在“行为”面板中单击按钮打开“动作”菜单，如图所示。因为浏览器版本或选择对象的不同，在“动作”菜单中有些选项呈灰色状态，表明当前情况下不能使用该动作。设定好动作以后还需要在“行为”面板中选择相应的事件，如图所示。
网页设计-导航条
顶部水平栏导航 顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。 顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。 顶部水平栏导航一般特征 导航项是文字链接，按钮形状，或者选项卡形状 水平栏导航通常直接放在邻近网站logo的地方 它通常位于折叠之上
顶部水平栏导航的缺点 顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。 何时使用顶部水平栏导航 顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。 竖直/侧边栏导航 侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。 侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。
它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征 文字链接作为导航项很普遍(包含或不包含图标) 很少使用选项卡(除了堆叠标签导航模式) 竖直导航菜单经常含有很多链接
如何做好网站导航设计
是网站中一个很重要的因素，一个合理的导航设计不但利于搜索引擎优化，还对提升用户体验至关重要，迅速了解自己所处的位置，这对提高用户的转化率十分有用。在中做好各类导航设计对网站后期的优化推广十分有利。那如何做好网站导航设计? 1、辅助网站指引用户 为了给用户提供直观的显示，让用户知道他们所处的位置，以便每个级别的位置名称都可以链接，每个页面必须包含辅助导航和站点的左上角的logo标识。 2、网站logo 在中，指向网站主页的链接将添加到站点logo出现的每个站点上，很多用户习惯于单击网站logo作为返回网站主页的标记。 3、导航跳跃的位置 主导航栏应位于顶部附近，或位于站点左侧。如果需要子导航，因为内容太多，用户可以容易地告诉哪个是主导导航栏，哪个是某个导航的辅助导航栏。 4、导航的简单性 在时，尽量简单，避免使用下拉菜单导航或弹出菜单导航，因为导航不是网站的主流，它只是网站的指南。主要功能是让用户在网站上迷路，可以快速找到方向，这对用户来说是方便的，而不是给用户增加负担。 5、网页指示 用户应该知道网页现在是什么，现在浏览网页的相关网页是什么，例如，例如通过辅助导航“首页→新闻频道→新闻全名”里面的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。 6、页面提示
有些网站有太多的信息，此时让用户浏览和没有浏览区别，最简单的方法是让已经浏览过的网页被浏览，如果不是在一个统一的网页锚文本页面中，你可以显示用户已经在其他地方已经浏览过的内容。 7、登录并退出 登录入口和退出登录出口可在整个站点的每个页面上使用，允许用户登录和退出任何网页。 汇桔网设计服务提供，打造店铺个性。专业设计大咖操刀，为您提供有创意的原创设计，让设计更简单，登录汇桔网咨询吧。
利用dw制作漂亮的导航栏效果
利用dw制作漂亮的导航栏效果 最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿super大餐。Let’s Go！ 一、进门点心：利用Dreamweaver MX制作最基本的下拉菜单 实现下拉菜单的思路是首先建立一个相对定位的层，调整其位置，并设置其显示属性为隐藏，然后通过给链接文本或图象添加onclick（点击）或者onmouseover（鼠标划过）的事件来触发“显示-隐藏层”的行为，显示隐藏的层，并且在鼠标划出层时隐藏层，实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤： 1．使用菜单在页面中插入一个层，这个层是相对定位的层，然后再在其中插入一个子层，因为子层的位置是相对于父层而言，所以只要父层的位置不发生变化，改变子层的位置和大小不会改变其相对性，效果如图1所示。 图片如下： 图1 为了父层不占据页面空间，可以设置其宽和高为0，因为以后要调整子层的位置，所以先不设定子层的显示属性为隐藏，而是到确定子层到合适位置后再设置。 2．选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板，单击行为面板中的加号按钮，在弹出的行为下拉菜单中选择“显示-隐藏层”，在弹出的设置对话框中选中子层，单击显示按钮，如图2所示。 图片如下： 图2 显示层 设置完毕后单击确定按钮，修改其触发事件为onmouseover，即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为，继续使用行为面板，选择“显示-隐藏层”，
在弹出的对话框中选中子层，单击隐藏按钮，如图3所示。 图片如下： 图3 隐藏层 设置完毕后单击确定按钮，在行为面板中修改该行为的触发事件为onmouseout，即鼠标划出时隐藏子层。 3．拖动子层，调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的，所以需要多次调整并在浏览器中预览效果，只到达到合适的位置。 4．设置子层的显示属性为隐藏。 按F12键在浏览器中预览页面，下拉菜单效果如图4所示。 图片如下： 默认状态 图片如下：
利用dw制作漂亮的导航栏效果
利用dw制作漂亮的导航栏效果 浏览：1031 次最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿super大餐。Let’s Go！ 一、进门点心：利用Dreamweaver MX制作最基本的下拉菜单 实现下拉菜单的思路是首先建立一个相对定位的层，调整其位置，并设置其显示属性为隐藏，然后通过给链接文本或图象添加onclick（点击）或者onmouseover（鼠标划过）的事件来触发“显示-隐藏层”的行为，显示隐藏的层，并且在鼠标划出层时隐藏层，实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤： 1．使用菜单在页面中插入一个层，这个层是相对定位的层，然后再在其中插入一个子层，因为子层的位置是相对于父层而言，所以只要父层的位置不发生变化，改变子层的位置和大小不会改变其相对性，效果如图1所示。 图片如下： 图1 为了父层不占据页面空间，可以设置其宽和高为0，因为以后要调整子层的位置，所以先不设定子层的显示属性为隐藏，而是到确定子层到合适位置后再设置。 2．选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板，单击行为面板中的加号按钮，在弹出的行为下拉菜单中选择“显示-隐藏层”，在弹出的设置对话框中选中子层，单击显示按钮，如图2所示。 图片如下： 图2 显示层 设置完毕后单击确定按钮，修改其触发事件为onmouseover，即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为，继续使用行为面板，选择“显示-隐藏层”，在弹出的对话框中选中子层，单击隐藏按钮，如图3所示。 图片如下：
网站制作导航栏种类汇总
网站制作导航栏种类汇总 我们知道，网站建设中，导航栏的设计是关键，如果用户查找什么信息大都是通过导航栏，一个好的导航栏设计不仅能更好的提升用户体验，还能有利于搜索引擎蜘蛛抓取。导航的设置是为了更方便的帮助用户在更短的时间找到他们需要的内容，起到的是一个引导作用。那么，通常情况下网站建设中导航栏制作的种类有哪几种呢?下面就跟大家聊聊这个问题。 首先，我们需要了解一下网站建设中导航栏的作用： 网站导航布局的逻辑性 上面已经说了是帮助用户快速找到信息的，起到一个引导作用的，因此你就不应该把同等级别的目录放到下一级目录下。比如说你公司业务是网站建设，网络营销这两块，那么这两个就是同一级的目录，是同级别的，你就不能把网络营销放在网站建设的二级目录下面。如果你要在导航上放上关于公司或者关于我们这么一个导航模块，那么比如说公司介绍，荣誉资质，企业文化，公司优势这类的就可以作为关于公司的一个二级目录。 网站导航设置的合理性 例如你网站可以用一排导航去显示的内容，但却使用了两排，这样完全就是多余的，一丁点必要都没有。你本身只有7-8个产品，但是却使用了2排导航，我真不知道你第二排的导航对用户有多大的意义或者说价值! 打开网站眼看到的就是导航栏的部分，因此导航栏通常都设置的非常醒目。清楚了导航的作用，下面来了解一下网站建设导航栏的种类： 1、图标导航的使用比较灵活，可以用于一些空间有限，但内容比较繁琐的情况，可以放在网站任何位置，图标导航也没有固定类型。
2、弹出导航。常用导航条结合横向子菜单组成的弹出导航条，这种导航条形式可以有效节约空间，对于一些子类比较多的导航条是个不错选择。 3、双选项卡导航条，用TAB选项卡形式的导航条，具有很清晰的分层结构，一般此类导航条的二级子菜单的字体都要小于主菜单字体。 4、垂直导航条，横向导航条一般是网站最常用的导航形式，而垂直导航条是另一种比较方便的导航条形式，使用垂直导航条的好处是，可以无限增加网站分类，毕竟网站宽度是有限的，而高度是可以调整的。 5、扩展菜单。除了主菜单，有时候网站也有一些其他子类菜单，但并不适合放在主菜单中，所以就有了扩展菜单。扩展菜单相当于另一套菜单。 6、下拉框导航，通过下拉框直接连接到对应的页面。 7、滚动菜单导航，可以结合图片，是比较生动有趣的导航形式，对于一些图片类网站很实用，一般这类导航条都以中心为原点，左右移动鼠标进行滚动。 8、伸缩导航条。当网页屏幕空间有限时，伸缩导航条就是不错的选择，同时这种导航形式也可以用于辅助导航。 9、图片类导航，导航菜单全部由图片组成，多见于FLASH这类网站中，是比较酷的一类导航形式。
Photoshop制作简洁网页导航
【PConline 教程】本PS教程将介绍使用Photoshop制作非常简洁的网页。作者重点介绍顶部及导航栏的制作。打造过程：首先是渲染背景和底纹，然后再制作顶部装饰和文字。可以根据实际需要加入自己喜欢的图案或素材。 最终效果图 图00 1、创建一个1000×750像素大小的文件，双击背景图层将其变为可编辑的图层，并打开图层样式>颜色叠加，用#47382e叠加。
图01 2、打开标尺（视图 > 标尺），按下图添加一些参考线。 图02 3、用矩形工具创建一个矩形，将该图层命名为header.
图03 4、将前景色设为黑色，选择椭圆工具创建一个阴影区域，大小要高于白色的矩形。将椭圆形图层命名为shadow，并将其置于header图层下面。然后打开滤镜>转换智能滤镜，之后滤镜>模糊>高斯模糊，半径为10像素，并把不透明度设为60%，得到下图效果： 图04 图05
5、选中header图层，双击打开图层样式，选择渐变叠加，按照下图参数设置。 图06 6、使用直线工具画一条亮红色直线，然后再用黑色画另外一条直线（1像素），之后将红线和黑线图层编组，组命名为 vDivider。打开图层>图层蒙版> 现实全部。使用径向渐变工具，从黑色到白色，自上而下拉去，在组上添加渐变效果。
图07 7、使用文字工具创建导航栏（字体白色）。然后将所有标签编组，命名为White Links。复制这个组，将其置于white links组下面，将字体颜色设为黑色，然后将其向上和向左移动1像素大小的位置。这样是为了制作3D效果。
图08 8、按照第六步的方法制作分栏线。 图09 9、选择所有分栏线图层将其编组，并命名为hDividers，然后打开图层>图层蒙版>显示全部。使用线性渐变（黑-白）在蒙版做渐变效果。
网页制作导航栏代码