平面设计网站导航栏的设计案例教程
制作首页导航条
活动1 实现网站导航条的布局
【小助手2】导航条设计原则 （1） 对商务网站的导航进行适当的组织与分类。 （2） 导航利于蜘蛛的识别，不用图片导航，优先选 取文字导航。 （3） 导航栏目设置不宜过多，依据围绕网站主题的 用户需求来制定，切忌放入相关性很低的栏目。
项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局
项目3 制作网站导航系统
——任务3.1 制作首页导航条
任务3.1 制作首页导航条
目录
01 活动1 实现网站导航条的布局 02 活动2 制作鼠标经过效果
任务1 制作首页导航条
01 活动1 实现网站导航条的布局
活动3.1 实现网站导航条的布局
【网站航】
网站建设中，导航栏的设计是关键。一个好的导航栏设计不仅能 更好地提升用户体验，还有利于搜索引擎蜘蛛抓取。导航栏的设置是 为了更方便顾客在更短的时间里找到他们需要的产品。
项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局
活动1 实现网站导航条的布局
【知识链接】如何让蜘蛛更容易抓取页面 （4）导入链接数量与质量 一个网站导入链接多，蜘蛛就会认为这个网站对人们有用，会 给予很高的权重，抓取更多更深入的页面。 （5）与首页点击距离 网站的首页有大量的外部链接，内部链接也有大量的锚文本指 向首页，并且更新的时候一般都注重首页的更新，所以一般情 况下首页的权重都比较高蜘蛛，抓取的频率比较高。
海澜之家首页导航
项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局
活动1 实现网站导航条的布局
【作业步骤】 （1）打开浏览器。 （2）点开链接。 （3）浏览网页。
项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局
响应式网页设计中常见的导航栏设计技巧(六)
响应式网页设计中常见的导航栏设计技巧随着移动设备的普及和互联网的发展，越来越多的人开始使用手机或平板电脑浏览网页。
这给网页设计师带来了新的挑战：如何在各种屏幕尺寸下提供一种优雅而实用的导航栏设计。
本文将介绍一些响应式网页设计中常见的导航栏设计技巧，并讨论它们的优点和缺点。
1. 固定导航栏固定导航栏是最常见的导航栏设计之一。
它常常出现在页面的顶部或边缘，并在用户滚动页面时保持可见。
这种设计可以让用户随时访问导航栏，并提供一种稳定的导航体验。
然而，在小屏幕上，固定导航栏可能占据了宝贵的空间，限制了内容的展示。
2. 折叠导航栏折叠导航栏适用于小屏幕设备，如手机。
它通过点击菜单按钮展开或折叠导航栏项，以节省屏幕空间。
这种设计可以确保页面上的内容充分展示，但在用户体验方面可能存在一些问题。
用户需要通过菜单按钮来访问导航项，这可能需要额外的点击步骤，增加了用户的操作复杂性。
3. 下拉菜单下拉菜单是导航栏设计中常见的元素之一。
它允许用户通过鼠标悬停或点击导航栏项来访问更多的子菜单项。
下拉菜单可以有效地组织复杂的导航结构，并提供更多的导航选项。
然而，下拉菜单在触摸设备上的操作可能不太友好，并且用户可能难以预测下拉菜单的行为。
4. 隐藏导航栏隐藏导航栏是一种越来越流行的导航栏设计。
它将导航栏项隐藏在页面的边缘，并通过滑动或点击来展示。
这种设计可以提供更大的屏幕空间，但可能需要用户一些时间来适应和发现隐藏的导航栏。
在选择导航栏设计时，设计师需要综合考虑用户体验、页面结构和内容展示等因素。
一个好的导航栏设计应该能够提供简洁的导航体验，同时保持页面的整洁和内容的可访问性。
在实际设计过程中，设计师还可以根据具体的需求和目标受众进行定制化的设计，以提供更好的用户体验。
总之，响应式网页设计中的导航栏设计技巧多种多样，每种设计都有其优点和缺点。
设计师应该根据页面的特点和用户需求，选择合适的导航栏设计，并在实际应用中进行不断优化和改进。
平面设计：网站导航栏的设计案例教程
图11-14 最终效果
平面设计典型实例
实验要点与注意事项
【渐变】编辑器参数的设置 【滤镜】菜单【渲染】命令【镜头光晕】效果
（10）单击工具箱中【矩形选框】工具，绘制矩形并填充 【径向渐变】，设置不透明度为“90%”，调整大小和 位置，如图11-10所示。
图11-10 透明的矩形
平面设计典型实例
（11）选择工具箱中【文字工具】输入文字所需文字，调 整大小和位置，所图11-11所示。
图11-11 输入文字
平面设计型实例
网站导航栏设计
平面设计案例 所有权：长沙新华电脑学院
平面设计典型实例
实验名称：网站导航栏设计 实验编号：XHJC-SY-016-11 实验目的：
1. 熟练掌握Photoshop的常用操作方法及技巧 2. 了解网站导航栏的设计规范及注意事项
考核点：
1. 滤镜效果的应用 2. 图层样式的应用
图11-7 绘制矩形
平面设计典型实例
（8）依次绘制一个三角型和圆型并填充渐变色，调整大 小和位置，如图11-8所示。
图11-8 绘制的几何图形
平面设计典型实例
（9）单击工具箱中【矩形选框】工具，在页面中绘制矩 形并填充渐变颜色，调整合适位置，如图11-9所示。
图11-9 渐变的矩形
平面设计典型实例
（12）选择【矩形选框】工具，绘制其余的几何图形，如 图11-12所示。
图11-12 绘制几何图形
平面设计典型实例
（13）选择工具箱中【圆角矩形】工具绘制圆角矩形，设 置不透明度为“60%”，执行菜单命令【滤镜】→【渲 染】→【镜头光晕】，如图11-13所示。
传智播客网页平面设计学院-网页设计-网页导航制作 2
导航在网站设计中占有举足轻重的地位，导航是整个站点中（特别是门户站）视觉的焦点和中心，其影响力仅次于Banner!导航的成败直接影响了整个站点的表现，不管是企业站，还是Flash站点，都不应该轻视导航的设计！在这里我就大概讲一下质感类导航的制作方式！我们可以把导航的质感分为几层，例如高光，泛光，点光，投影等，也就是基本一个实物应该具备的一些效果，把他们综合到界面上，就可以比较好的展现出界面的质感，详细请看下图！当然这种效果的制作的方法很多，那么我就按着我的个人经验和制作习惯为大家讲解一下制作的步骤第一步：绘制背景1、选择圆角矩形工具绘制背景2、双击背景层弹出图层样式，给背景增加投影来体现一下质感第二步：增加高光效果1、按住CTRL键点击点击背景层小窗口把背景层的形状提取出来，绘制高光2、出现选区3、新建图层，命名高光4、选择渐变工具，绘制高光5、快捷键ctrl+D 去掉选区 点击矩形选择工具删除多余的部分显示最终效果6、增加高光线步骤同上把中间多余的部分删掉第三步:增加泛光1、选择椭圆选框工具绘制一个选区2、选择渐变，这个步骤之前已经介绍，我们通过变形工具来进行压缩实现我们需要的泛光效果3、给泛光增加滤镜，高斯模糊放到上面显示最终效果第四步:增加内透光1、制作步骤和增加泛光步骤基本一致，不用加滤镜，把下面的部分删除显示最终效果第五步:增加投影1、把泛光层从新复制一层来做投影（命名投影层）2、修改投影层样式，将颜色叠加颜色调成黑色显示最终效果第六步：增加logo投影及文字1、导入logo图片调整大小2、选择logo层增加图层蒙版3、选择渐变工具，将渐变调成黑白4、把背景选区的形状点出，前面有介绍5、ctrl+shift+I进行反选删除多余的部分6、选择横排文字工具输入文字，我用的文字是微软雅黑，字号14点现在就大功告成了。
Web前端开发案例教程5制作学院网站导航条
5.2.3 元素的类型与转换
元素的转换
display 属性常用的属性值及含义如下。
➢ inline：行内元素，该值是行内元素的默认属性值。 ➢ block：块元素，该值是块元素的默认属性值。 ➢ inline-block：行内块元素，可以对其设置宽度、高度和对齐方式等属
list-style: 列表项目符号 列表项目符号的位置 列表项目图像;
5.2.1 无序列表样式设置
无序列表样式设置 example超链接默认的文字颜色为蓝色且带有下划线，这种单调的样 式并不好看。实际上，为了使超链接看起来更加美观，经常需 要为超链接指定不同的状态，使得超链接在单击前、单击后和 鼠标指针悬停时的样式不同。在 CSS 中，通过超链接伪类可以 实现不同的超链接状态。
超链接样式设置
example02. html
5.2.3 元素的类型与转换
HTML 提供了丰富的标记，用于组织页面结构。为了使页 面结构的组织更加清晰、合理，HTML 标记被定义成了不同的 类型，一般分为块标记和行内标记，也称块元素和行内元素。 块元素和行内元素还能根据实际需求进行类型转换。
5.2.3 元素的类型与转换
（3）list-style-image 属性：设置列表项的项目图像，使列表的样式更加美观， 其取值为图像的URL。
5.2.1 无序列表样式设置
无序列表样式设置
（4）list-style 属性：综合设置列表样式，可以代替上面 3 个属性。使用 liststyle 属性综合设置列表项的样式，格式如下。
任务小结
任务小结
本任务围绕学院网站导航条的实现，介绍了无序列表和超链接的样式设置方 法、元素的类型与类型转换等，最后综合利用所学知识实现了带有下拉菜单的 导航条。本任务介绍的主要知识点如下表所示。
响应式网页设计中常见的导航栏固定效果实现技巧(十)
响应式网页设计中常见的导航栏固定效果实现技巧在当今互联网时代，网页设计已经成为了企业以及个人展示自己形象和吸引用户的重要手段。
而在网页设计中，导航栏是用户浏览网页的重要入口，因此其设计与实现就显得尤为重要。
为了提升用户体验，固定导航栏效果逐渐成为了响应式网页设计的主流。
一、利用CSS定位实现固定效果在实现固定导航栏效果时，利用CSS定位是一种常见且简单的方式。
通过设置导航栏的position属性为fixed，即可让导航栏固定在浏览器视口的某个位置。
此时，用户无论往下滚动页面到哪个位置，导航栏都会保持在屏幕上方。
二、利用JavaScript实现滚动效果除了使用CSS定位，利用JavaScript实现滚动效果也是实现固定导航栏的常见方式之一。
通过监听滚动事件，当用户滚动到一定位置时，通过修改导航栏的样式或添加.fixed类来实现固定效果。
三、结合CSS和JavaScript实现混合效果为了兼顾性能和用户体验，可以结合CSS和JavaScript实现混合效果。
通过CSS控制导航栏的显示与隐藏，再通过JavaScript监听滚动事件，根据滚动位置来添加或删除CSS类，实现导航栏的固定效果。
四、实现导航栏下拉菜单在响应式网页设计中，导航栏下拉菜单的使用也非常普遍。
用户可以在导航栏上hover或点击，弹出下拉菜单，进一步方便用户浏览网页。
实现导航栏下拉菜单的方式有很多种，可以利用CSS和JavaScript的组合，也可以使用框架或库，例如Bootstrap。
五、实现导航栏的折叠与展开在移动设备上，由于屏幕尺寸的限制，导航栏通常需要折叠以节省空间。
用户可以通过点击图标或按钮展开导航栏，并浏览各个页面。
此时，实现导航栏的折叠与展开效果就成为了一个必备的技巧。
可以使用CSS3的transition属性实现平滑的过渡效果，也可以利用JavaScript来实现动画效果。
六、优化导航栏的交互体验在实现固定导航栏效果时，还需要注意优化用户的交互体验。
响应式网页设计中常见的导航栏设计技巧(九)
响应式网页设计中常见的导航栏设计技巧随着移动设备的普及和互联网的快速发展，响应式网页设计已经成为设计师们必备的技能。
而在响应式网页设计中，导航栏的设计显得尤为重要。
一个好的导航栏设计可以提升用户的体验，使用户更加方便地浏览网页内容。
本文将介绍一些常见的导航栏设计技巧，帮助设计师们在响应式网页设计中实现出色的导航栏设计。
首先，导航栏的布局应简洁明了。
在响应式网页设计中，导航栏的主要目的是为用户提供导航链接，因此应将导航链接放置在用户易于发现和点击的位置。
一种常见的方式是将导航链接放置在页面的顶部，使其位于视线焦点的位置。
此外，导航链接之间的间距应适度，不要过于拥挤，避免用户误触。
在导航栏的设计中，响应式布局是必不可少的。
由于移动设备屏幕较小，所以在手机等移动设备上显示导航栏时，应该采用更紧凑的布局方式，以节约空间。
一种流行的响应式导航栏布局是使用折叠菜单。
折叠菜单将导航链接隐藏在一个按钮中，用户可以点击按钮展开或收起导航菜单，从而节约了屏幕空间。
此外，设计师们也可以考虑根据不同设备的屏幕大小和方向，调整导航栏的布局，保证用户在不同设备上都能够方便地使用导航栏。
导航栏的样式与网页整体风格应保持一致。
导航栏是网页的重要组成部分，它的样式应与网页的整体风格相协调。
例如，如果网页采用了扁平化的设计风格，那么导航栏的样式也应该是扁平化的；如果网页采用了渐变色的设计风格，那么导航栏的样式也应具有相应的渐变效果。
通过保持一致的风格，可以提升用户对网页的整体印象，增强用户对网页内容的信任感。
在导航栏的设计中，颜色的运用是一个关键点。
通过合理运用颜色，可以使导航栏更加突出和吸引人。
一种常见的方法是使用鲜明明亮的颜色来设计导航链接，以吸引用户的注意力。
此外，设计师们还可以通过改变导航链接的颜色和样式，来提示用户当前所处的页面或选中的链接。
例如，在用户所处的页面的导航链接上添加一个下划线、改变链接的颜色等，来明确告诉用户当前所处的位置。
响应式网页设计中常见的导航栏设计技巧(八)
响应式网页设计已经成为当今Web设计的重要趋势。
作为一个常见的界面元素，导航栏设计在响应式网页中扮演着至关重要的角色。
导航栏在不同设备的屏幕尺寸上需具备良好的适应性和易用性，本文将从几个常见的导航栏设计技巧来探讨响应式网页设计中的一些实践经验。
一、折叠式导航栏设计在小屏幕设备上，传统的水平导航栏往往会导致页面排版混乱，因此，折叠式导航栏设计是一种常见的解决方案。
通过在页面加载时隐藏导航栏，点击菜单按钮后展开导航栏，可以节省空间并使用户体验更友好。
然而，在设计折叠式导航栏时，要注意菜单按钮的设计。
一个较大的按钮可以在触摸屏设备上更易于点击，而一个具有合适颜色和形状的图标则可以增加用户的易用性。
此外，要确保展开后的导航栏能够清晰地显示链接，以方便用户导航。
二、优化导航链接布局在响应式网页设计中，尺寸有限的小屏幕设备要求我们仔细考虑导航链接的布局。
一种常见的方法是将导航链接堆叠在一起，以节省空间。
然而，这种设计可能会导致不必要的滚动，从而降低用户体验。
因此，我们可以考虑使用分组的方式来优化导航链接的布局。
将相关的链接分组，可以使用户快速找到所需的信息，并且减少滚动的需要。
此外，使用合适的间距和字体大小，以及省略不必要的链接，也可以提高导航栏的可读性和用户友好性。
三、多级导航设计技巧对于包含大量链接的网站，多级导航是一个常见的设计需求。
在响应式网页设计中，如何在有限的屏幕空间中显示多级导航成为了一项具有挑战性的任务。
一种解决方案是使用下拉菜单。
通过在主菜单上设置下拉按钮，用户可以展开或折叠多级导航，以便更好地浏览各个子链接。
在设计下拉菜单时，要注意按钮和子菜单的对齐，以及子菜单的可见性。
另外，使用面包屑导航也是一个优化多级导航的方式。
面包屑导航以层级结构显示当前页面的位置，使用户可以快速导航到其他页面。
在响应式网页设计中，可以考虑隐藏面包屑导航，点击按钮后展开，以节省空间。
通过以上的设计技巧，我们可以为响应式网页设计中的导航栏提供更好的用户体验。
83网站导航栏制作案例
本案例将练习 Dreamweaver 中行为的使用。
案例的制作思路：(1) 向预留的导航栏位置插入嵌套表格。
(2) 插入导航栏图片。
(3) 对图片添加“交换图像”行为，使得鼠标移到图片上时文字发光，如图所示，鼠标移开图片时文字恢复，如图所示。
图鼠标移到导航栏上图鼠标从导航栏移开在介绍案例的具体实现之前，先来介绍相关的知识。
8.3.1 行为概述Dreamweaver 提供了一种称为“行为”的机制，帮助用户构建页面中的交互行为。
行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互，是一个带有面向对象设计思想的工具。
事实上，行为是由预先书写好的JavaScript 代码构成的，使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。
利用Dreamweaver 中的行为，不需要书写代码，就可以实现丰富的动态页面效果。
行为有 3 个重要的组成部分：对象、事件和行为。
对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。
事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到 HTML 标记中。
不同的浏览器支持的事件种类和数量不一样，通常高版本浏览器支持更多的事件。
行为通过动作来完成动态效果。
例如，弹出信息、改变属性、交换图像等都是动作。
动作是一段JavaScript 代码，在Dreamweaver CS3 中使用内置的行为，系统会自动往页面中添加JavaScript 代码，用户完全不必自己编写。
Dreamweaver 内置了很多行为动作，形成一个JavaScript 程序库，用户还可以到官方网站下载并安装更多的行为。
另外，如果精通JavaScript 语言，也可以编写自己的行为，添加到Dreamweaver CS3 中。
选择“窗口”→“行为”可以显示“行为”面板。
在网页中添加行为时，首先需选择要添加行为的对象，然后在“行为”面板中单击按钮打开“动作”菜单，如图所示。
--制作导航栏
步骤 04 保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。
— 13 —
案例一 制作简单纵向导航栏
支撑知识点
使用CSS的一些小技巧 1. 合理利用display:block属性
display属性规定元素的显示类型，其具有多个不同的属性值，其中display:block 表示将元素转换为块级元素。
<style type="text/css"> <!---> </style>
— 10 —
案例一 制作简单纵向导航栏
案例步骤
步骤 02 设置超链接样式，包括纵向排列，消除下划线，设置文字大小和颜色，设置背景颜 色和内边距等。在步骤1输入的标签对之间输入代码。
提示
设置各超链接块高度为30像素，再设置行高为30像素，目的是让 文字可以在块中纵向居中，这也是使用line-height实现内容纵向居中 的方法。
案例步骤
步骤 06 参考步骤5的操作，依次为“心情日记”“学习心得”“工作笔记”“生活琐碎”和 “联系我们”这些文字添加超链接。
— 8—
案例一 制作简单纵向导航栏
案例步骤
步骤 07 保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。 此时网页的结构部分制作完成，涉及的HTML标签如表5-1所示。
添加超链接，即为文字添加超链接标签<a>。选中“我的首页”文字，单击“插入” 面板“常用”类别中的“Hyperlink”按钮，打开“Hyperlink”对话框。由于现在还 没有需要跳转的页面，所以在“链接”编辑框中输入“#”符号（表示插入空链接）， 然后单击“确定”按钮。
面包屑网页导航设计参考实例和最佳方案
面包屑网页导航设计参考实例和最佳方案当我沉浸在回忆的海洋中，那些关于网页导航设计的点点滴滴像是面包屑一般，引领着我回到那些充满挑战与创新的岁月。
今天，我就来和大家分享一下我的经验，给出一些参考实例，以及我个人认为的最佳方案。
先从一个简单的例子说起。
想象一下，你正在一家电商网站上购物，首页上琳琅满目的商品让你眼花缭乱。
你点进了一个分类，比如“服装”，然后又点进了“男装”，接着是“T恤”。
这时候，页面上方出现了一串面包屑：“首页>服装>男装>T恤”。
这就是面包屑导航的一个典型应用，它能让你清楚地知道自己的位置，也能方便地返回之前的分类。
现在，让我们来谈谈面包屑导航的设计原则。
1.清晰性：面包屑导航要简洁明了，让用户一眼就能看懂。
避免使用过于复杂的词汇和符号，以免引起混淆。
2.一致性：面包屑导航在整个网站中要保持一致的风格和布局，让用户在浏览过程中产生熟悉感。
下面，我将给出几个参考实例。
实例一：电商网站首页>分类>子分类>商品详情在这个例子中，用户可以通过面包屑导航清晰地了解自己的位置，同时可以快速返回之前的分类。
还可以在面包屑中加入商品的品牌、价格等信息，以便用户在浏览过程中做出决策。
实例二：新闻网站首页>新闻>分类>子分类>文章详情在这个例子中，用户可以通过面包屑导航了解新闻的分类和子分类，同时可以快速返回新闻首页或相关分类。
还可以在面包屑中添加新闻发布的时间，让用户了解新闻的时效性。
实例三：企业官网首页>关于我们>公司简介在这个例子中，面包屑导航简洁明了，用户可以清楚地知道自己的位置。
同时，企业官网的面包屑导航可以突出企业文化，如加入企业愿景、价值观等信息。
1.用户需求分析：在设计面包屑导航之前，要了解用户的需求。
可以通过问卷调查、数据分析等方式，收集用户在网站中的行为习惯和偏好，为面包屑导航的设计提供依据。
2.个性化设计：根据用户需求，为不同类型的网站设计个性化的面包屑导航。
《网页设计与制作——Dreamweaver CS3》项目05 制作导航网页
操作二 设置图像链接
项目五：
制作导航网页
本操作将通过图像【属性】面板来设置页眉中的图像超级链 接。通过本操作的学习，应该掌握的内容主要有：
任务一 任务二 任务三 实训 小结
1.设置图像超级链接的方法
首先选中图像，然后在图像【属性】面板的【链接】文本框 中输入图像的链接地址，在【目标】下拉列表中选择目标窗口的 打开方式。
在主菜单中选择【插入】／【图像对像】／【导航条】命令 或者在【插入】／【常用】面板中单击 （导航条）按钮，打 开【插入导航条】对话框进行设置即可。
网页设计与制作
Dreamweaver CS3
项目五：
制作导航网页
任务一 任务二 任务三 实训 小结
操作三 设置导航条
3.修改导航条的方法
如果要对导航条进行修改，可以通过【设置导航栏图像】行为进 行修改。方法是在导航条中选中其中一个按钮，打开【行为】面 板，在【行为】面板的动作栏中，双击事件下方的名称，打开 【设置导航栏图像】对话框，在该对话框中可以重新设置图像的 源文件及所指向的URL。这个对话框和当初插入导航条的对话框 是一样的，但又多了一个【高级】选项卡。如果焦点在当前的按 钮，而其他的按钮同时也发生变化，那么就必须设置【变成图像 文件】和【按下时，变成图像文件】这两项。由此看来，【设置 导航栏图像】动作是导航条功能的一个补充和延伸，是为方便导 航条创建后的修改而设立的。
网页设计与制作
（3）按下图像：按钮被单击后显现的状态。例如，当用户 单击按钮时，新页面被载入且导航条仍是显示的；但被单击过的 按钮会变暗或者凹陷，以表明此按钮已被按下。
（4）按下时鼠标经过图像：按钮被单击后，鼠标指针移动 到被按下元素上时显现的图像。例如，按钮可能变暗或变灰，可 以用这个状态暗示用户：在站点的这个部分该按钮已不能被再次 单击。
网页设计教程：侧边栏与导航设计
网页设计教程：侧边栏与导航设计导航在网页设计中的地位向来是举足轻重的，侧边栏同样也是不可忽略的。
火星时代网页设计教程为您分享网站侧边栏与导航的设计事项。
简单的说，侧边栏的设计与其大小、形式、色彩、排版等密不可分。
一般来说，侧边导航的宽度尺寸控制在内容部分宽度的三分之一左右；主要表现形式有抽屉式导航、固定式侧边导航和隐藏式侧边导航等；色彩上要与页面整体风格互相协调融合，避免过于亮眼的颜色。
虽然导航应该显眼，但通过色彩来实现却不是一个好方法，通过排版、形式、字体等方式同样能达到目的；侧边导航的排版布局比较简单，分为左侧导航和右侧导航。
一般将导航置于左侧的居多，这样能获得更多的关注度。
以下是为大家收集的关于网站侧边导航的使用案例，希望能为大家带来灵感。
1.逼真的拟物化设计加上木质纹理背景，案例网站中的侧边导航应用变得格外应景。
导航与网页整体设计风格很融合，同时用纹理的细微变化以示区别，不仅让用户获得视觉上的舒适感，也让导航更加与众不同。
2.这个案例中体现的是导航设计中的惯用手法，使用与背景色反差较大的颜色来点缀页面中的重要元素，同时起到提亮导航的作用。
由于背景色选择了深沉的闷黑色，所以导航的颜色也选用了同色系的黑色，但相对亮一些，整体效果既不唐突，也能很快速、自然的吸引用户视线。
3.比较单一的网站配色，导航设计的比较随性，所以让整体效果神秘中带着休闲。
设计师将网页打造成少线框的体验，让页面更加自由而无拘束，同时突出了右上角“LOGIN”幽灵按钮的设计，引导用户登录点击。
4.纯手绘风格的网页设计可能会让网站显得太过童真，而下面的案例却表现出了手绘风格的另一种形态。
设计师没有将网站中的文字都设置成手写涂鸦的状态，因此网站的用户体验并没有因为风格的原因受到任何影响。
尤其导航部分，与底色同色系的浅灰色底纹将导航和背景很好的区分开来，视觉流畅不违和。
5.TONYMOL Y的网站导航采用了双层设计，再加以简单的图标设计，这样的好处是让用户更清晰的查看到网站的内容分类。
Web设计基础教程 第4章 网页导航栏的设计与制作
文字样式效果
“渐变叠加”样式参数设置
4.1 实例1：横向导航栏设计与制作
【Step4】按住【Ctrl】键，在图层面板中单击文字图层的缩略图，创建一个文字选区，执 行【选择】/【修改】/【扩展】命令，设置扩展量为5像素，单击【确定】按钮，得到如图所示 的选区。
扩展选区
获得选区
4.1 实例1：横向导航栏设计与制作
【Step7】选择“投影”样式，设置不透明度为39%，其他参数设置如图所 示 ，单击【确定】按钮 ，完成图层样式的添加。效果如图所示。
“投影”参数设置
样式效果
4.1 实例1：横向导航栏设计与制作
【Step8】选择“多边形套索工具”，在图像上单击鼠标，创建出一个如图所示的选区。按【 Delete】键，删除选取中的图形，显示出背景色。
设置左色标颜色
设置右色标颜色
渐变编辑器
4.1 实例1：横向导航栏设计与制作
【Step4】用鼠标从图像的上端拖动到下 端，对图层进行渐变填充。
渐变填充
【Step5】选择“多边形套索工具”，在图像上 单击鼠标，创建出一个如图所示的选区。按【 Delete】键，删除选取中的图形，显示出背景色， 按Ctrl+D，取消选区。
图层样式效果
“渐变叠加”样式对话框
4.1 实例1：横向导航栏设计与制作
2、制作文字效果 【 Step1】选择”横排文字工具”，输入文字
“Hosting”，选中文字，在“工具选项栏”上设置文 字的属性，如字体、大小和颜色等。选择“移动 工具”，将文字调整到合适的位置。
【Step2】右键单击文字所在图层，从弹出的 菜单中选择“删格化文字”命令，将文字图层转化 为普通图层。双击文字图层的缩略图，打开图层 样式对话框，选择“外发光”样式，将“混合模式” 改为正常，颜色设置为黑色，其他参数设置如图 所示。
Web设计基础教程 第4章 网页导航栏的设计与制作
“描边”样式
4.2 实例2：纵向导航栏设计与制作
【Step4】选择“内发光”样式，参数设置如图所示。
【Step5】选择“外发光”样式，参数设置如图所示。
“内发光”样式
“内发光”样式
4.2 实例2：纵向导航栏设计与制作
【Step6】选择“渐变叠加”样式，单击渐变条，在“ 渐变编辑器”中，将左色标设置为白色，右色标颜色设 置为（R：230，G：232，B：220），角度为-90度，其 他参数如图所示。单击【确定】按钮。
Web美工基础教程
第4章 网页导航栏的设计与制作
目录
1 横向导航栏的设计与制作 2 纵向导航栏的设计与制作 3 水晶导航栏的设计与制作 4 导航栏图片在网站中的应用
第4章
导航栏是网站的重要组成部分，直接影响网站的可用性和用户体验。一个好 的导航栏不仅让网站看起来生动有趣，而且可以帮助用户访问网站当中的资源。
“外发光”参数设置
4.1 实例1：横向导航栏设计与制作
【Step9】选择“斜面和浮雕”样式，在高 光模式设置颜色为（R：255，G：253，B： 221），其他参数设置如图所示。
“斜面和浮雕”样式参数
4.1 实例1：横向导航栏设计与制作
【Step10】选择“渐变叠加”样式，单击渐变色条，打开渐变编辑器对话框，拖动左侧的色标到中间的位置上 ，设置颜色为（R：255，G：166，B：30），选择右侧的色标，设置颜色为（R：255，G：210，B：81），如图 所示，其他参数设置如图所示。
新建文件
4.2 实例2：纵向导航栏设计与制作
【Step2】选择“圆角矩形工具”并在其选项 栏中设置半径为30像素，按住【Shift】在画布 中拖拽一个大小合适的圆角矩形。在图层中右 键执行“栅格化图层”将形状转化为普通图层。
网页美工导航栏ppt课件
精选课件
30
它可以与子导航菜单一起使用，也可以单独使用。它很容易用于
包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种
精选课件
31
类的多列布局中。
精选课件
32
精选课件
精选课件
10
（1）能简不繁 交互设计主要体现指示、易用、美观性。
（2）能少勿多 设计网页交互就像设计电视遥控器按钮一样，不会把电视每
一个命令都做在遥控器上。在设计中，我们在一个页面中尽量 只保留必需的、主要的交互，使网页更易用和美观。 （3）能显勿藏
网页的交互是生命，没有交互网页就没有了意义。在设计网 页时一定要处理好交互的“显”，同时又能与整体协调。
精选课件
5
精选课件
6
（4）图像热点式 通常一般一张图像只能链接一个文件路径。
精选课件
7
（5）锚记交互式 锚记交互是网页制作中超交互的一种，又叫命名锚记。
（6）空交互式 空交互式是未指派的交互式。空交互式用于向页面上的对象
或文本附加行为。
精选课件
8
（7）框架交互式 框架常用在需要导航的网页结构中，比如一个窗口分为两
精选课件
21
1.顶部水平栏导航
• 顶部水平栏导航是当前两种最流行地网站导航菜单设计模 式之一。它最常用于网站的主导航菜单，且最通常地放在 网站所有页面的网站头的直接上方或直接下方。
精选课件
22
顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个 项上时弹出它下面的二级子导航项。
精选课件
23
第5章 制作导航栏
设置超链接在hover状态下的效果。在步骤3输入的代码下方添加如下代码。 /*设置超链接在hover状态下的背景色*/ /*设置超链接在hover状态下的文字颜色*/
#topmenu a:hover { background:#f00; color: #fff; }
— 23 —
案例二 制作简单横向导航栏
— 3—
案例一 制作简单纵向导航栏
案例步骤
在HTML 5中，导航栏是由<nav>标签定义的。导航栏一般分为横向和纵向，针对 使用<nav>制作的导航栏，横向菜单无须改变结构，只需设置样式的变化即可；此处 制作的纵向菜单，需要使用“display: block;”属性改变超链接列表的结构。
1.
构建HTML结构
contentspage目录页制作导航栏案例一制作简单纵向导航栏案例二制作简单横向导航栏案例三制作带图像效果的横向导航栏案例四制作带下拉菜单的横向导航栏案例一制作简单纵向导航栏案例说明案例说明导航栏的主要功能是通过超链接实现从本页面跳转到浏览者想要查看的其他页面其中鼠标移动到导航栏上的某个菜单项时一般会有变色效果
/*将超链接块设置为向左浮动*/ /*设置超链接的宽度为100像素*/ /*设置超链接的文字颜色*/ /*去掉超链接的下划线*/ /*设置超链接块的文字对齐方式为居中*/ /*设置超链接块的行高为27像素*/
— 22 —
案例二 制作简单横向导航栏
案例步骤
当设置行内元素的属性为float:left以后，就不需要再设置display:block属性，除非这 个元素有显示和隐藏状态的切换，即display:hidden属性和display:block属性的切换。
— 18 —
实验八制作网页导航条
实验八制作网页导航条实验八制作网页导航条使用实验八给的实验素材建立站点文件夹，然后制作如下的导航条。
一、利用列表制作垂直方向的导航栏步骤：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 导航栏最终效果提示：（1）将左侧导航栏的ul项目列表标签设置一个id值是nav。
（2）设置如下CSS样式:#nav li {行高: 54px;列表项目符号: none;文本对齐方式:居中;背景图像: url(images/sec_menu_bg_b.jpg);背景图像不重复;}#nav li a {字体颜色黑色;去掉超链接下划线（文本修饰设置为无）;}将#nav的第一个列表项li的class值设置为first，再继续设置如下CSS样式：#nav .first a {字体颜色: 白色;}#nav .first {背景图像: url(images/sec_menu_bg_a.jpg);背景图像不重复;}思考题：你能继续完善这个导航栏，使得当鼠标经过导航栏的超链接时，当前列表项变为蓝色背景图白色文字吗？三、按钮式的超链接在Dreamweaver CC打开实验素材文件夹中的nav03.html文件，设置CSS样式，实现如下图的按钮式超链接效果：（1）a {字体: #000000、12px、粗体;下划线: 无;显示（display）: 块（block）;左边界（margin-right）: 20px;填充（padding）：25px浮动（float）: left;文本对齐: 居中;背景颜色：#d4d0c8上、左边框：1px #EEEEEE（浅灰色）实线右、下边框：1px #808080（深灰色）实线}（2）a:hover{背景颜色: #eee9e0;}（3）a:active{背景颜色：#d4d0c8上、左边框：1px #808080（深灰色）实线右、下边框： 1px #EEEEEE（浅灰色）实线}思考：网页中共有4个超链接，如果只希望其中两个呈现按钮的效果，其余两个仍保持超链接的普通样式，应该如何设计CSS样式？四、为超链接设置背景图片利用文件夹“nav04”中的素材，完成如下网页：banner1_bg.jpgbutton1_bg.jpg Button2.jpg button1.jpg五、打开文件夹“nav05”中的页面，按照以下步骤完成，效果如下：1.设置背景颜色：#666666；2.为列表UL添加ID样式：#list（1）高度26px；（完成全部样式设置后，尝试把此行代码删除，观察导航的变化，并思考原因；（2）项目列表符号：无；（3）底部边框：2px solid #0F3BA；3.把li设置为左浮动；4.为超链接a设置样式：样式内容自己思考；5.为超链接设置鼠标经过状态的样式a:hover鼠标经过超链接背景图片为hover.gif；6.第一个超链接“首页”表示当前页面，其背景图片与其他超链接不一样，请添加一个样式完成此效果。