平面设计网站导航栏的设计案例教程
制作首页导航条
活动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 属性综合设置列表项的样式，格式如下。
任务小结
任务小结
本任务围绕学院网站导航条的实现，介绍了无序列表和超链接的样式设置方 法、元素的类型与类型转换等，最后综合利用所学知识实现了带有下拉菜单的 导航条。本任务介绍的主要知识点如下表所示。
响应式网页设计中常见的导航栏设计技巧(九)
响应式网页设计中常见的导航栏设计技巧随着移动设备的普及和互联网的快速发展，响应式网页设计已经成为设计师们必备的技能。
而在响应式网页设计中，导航栏的设计显得尤为重要。
一个好的导航栏设计可以提升用户的体验，使用户更加方便地浏览网页内容。
本文将介绍一些常见的导航栏设计技巧，帮助设计师们在响应式网页设计中实现出色的导航栏设计。
首先，导航栏的布局应简洁明了。
在响应式网页设计中，导航栏的主要目的是为用户提供导航链接，因此应将导航链接放置在用户易于发现和点击的位置。
一种常见的方式是将导航链接放置在页面的顶部，使其位于视线焦点的位置。
此外，导航链接之间的间距应适度，不要过于拥挤，避免用户误触。
在导航栏的设计中，响应式布局是必不可少的。
由于移动设备屏幕较小，所以在手机等移动设备上显示导航栏时，应该采用更紧凑的布局方式，以节约空间。
一种流行的响应式导航栏布局是使用折叠菜单。
折叠菜单将导航链接隐藏在一个按钮中，用户可以点击按钮展开或收起导航菜单，从而节约了屏幕空间。
此外，设计师们也可以考虑根据不同设备的屏幕大小和方向，调整导航栏的布局，保证用户在不同设备上都能够方便地使用导航栏。
导航栏的样式与网页整体风格应保持一致。
导航栏是网页的重要组成部分，它的样式应与网页的整体风格相协调。
例如，如果网页采用了扁平化的设计风格，那么导航栏的样式也应该是扁平化的；如果网页采用了渐变色的设计风格，那么导航栏的样式也应具有相应的渐变效果。
通过保持一致的风格，可以提升用户对网页的整体印象，增强用户对网页内容的信任感。
在导航栏的设计中，颜色的运用是一个关键点。
通过合理运用颜色，可以使导航栏更加突出和吸引人。
一种常见的方法是使用鲜明明亮的颜色来设计导航链接，以吸引用户的注意力。
此外，设计师们还可以通过改变导航链接的颜色和样式，来提示用户当前所处的页面或选中的链接。
例如，在用户所处的页面的导航链接上添加一个下划线、改变链接的颜色等，来明确告诉用户当前所处的位置。
响应式网页设计中常见的导航栏设计技巧(八)
响应式网页设计已经成为当今Web设计的重要趋势。
作为一个常见的界面元素，导航栏设计在响应式网页中扮演着至关重要的角色。
导航栏在不同设备的屏幕尺寸上需具备良好的适应性和易用性，本文将从几个常见的导航栏设计技巧来探讨响应式网页设计中的一些实践经验。
一、折叠式导航栏设计在小屏幕设备上，传统的水平导航栏往往会导致页面排版混乱，因此，折叠式导航栏设计是一种常见的解决方案。
通过在页面加载时隐藏导航栏，点击菜单按钮后展开导航栏，可以节省空间并使用户体验更友好。
然而，在设计折叠式导航栏时，要注意菜单按钮的设计。
一个较大的按钮可以在触摸屏设备上更易于点击，而一个具有合适颜色和形状的图标则可以增加用户的易用性。
此外，要确保展开后的导航栏能够清晰地显示链接，以方便用户导航。
二、优化导航链接布局在响应式网页设计中，尺寸有限的小屏幕设备要求我们仔细考虑导航链接的布局。
一种常见的方法是将导航链接堆叠在一起，以节省空间。
然而，这种设计可能会导致不必要的滚动，从而降低用户体验。
因此，我们可以考虑使用分组的方式来优化导航链接的布局。
将相关的链接分组，可以使用户快速找到所需的信息，并且减少滚动的需要。
此外，使用合适的间距和字体大小，以及省略不必要的链接，也可以提高导航栏的可读性和用户友好性。
三、多级导航设计技巧对于包含大量链接的网站，多级导航是一个常见的设计需求。
在响应式网页设计中，如何在有限的屏幕空间中显示多级导航成为了一项具有挑战性的任务。
一种解决方案是使用下拉菜单。
通过在主菜单上设置下拉按钮，用户可以展开或折叠多级导航，以便更好地浏览各个子链接。
在设计下拉菜单时，要注意按钮和子菜单的对齐，以及子菜单的可见性。
另外，使用面包屑导航也是一个优化多级导航的方式。
面包屑导航以层级结构显示当前页面的位置，使用户可以快速导航到其他页面。
在响应式网页设计中，可以考虑隐藏面包屑导航，点击按钮后展开，以节省空间。
通过以上的设计技巧，我们可以为响应式网页设计中的导航栏提供更好的用户体验。
83网站导航栏制作案例
本案例将练习 Dreamweaver 中行为的使用。
案例的制作思路：(1) 向预留的导航栏位置插入嵌套表格。
(2) 插入导航栏图片。
(3) 对图片添加“交换图像”行为，使得鼠标移到图片上时文字发光，如图所示，鼠标移开图片时文字恢复，如图所示。
图鼠标移到导航栏上图鼠标从导航栏移开在介绍案例的具体实现之前，先来介绍相关的知识。
8.3.1 行为概述Dreamweaver 提供了一种称为“行为”的机制，帮助用户构建页面中的交互行为。
行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互，是一个带有面向对象设计思想的工具。
事实上，行为是由预先书写好的JavaScript 代码构成的，使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。
利用Dreamweaver 中的行为，不需要书写代码，就可以实现丰富的动态页面效果。
行为有 3 个重要的组成部分：对象、事件和行为。
对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。
事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到 HTML 标记中。
不同的浏览器支持的事件种类和数量不一样，通常高版本浏览器支持更多的事件。
行为通过动作来完成动态效果。
例如，弹出信息、改变属性、交换图像等都是动作。
动作是一段JavaScript 代码，在Dreamweaver CS3 中使用内置的行为，系统会自动往页面中添加JavaScript 代码，用户完全不必自己编写。
Dreamweaver 内置了很多行为动作，形成一个JavaScript 程序库，用户还可以到官方网站下载并安装更多的行为。
另外，如果精通JavaScript 语言，也可以编写自己的行为，添加到Dreamweaver CS3 中。
选择“窗口”→“行为”可以显示“行为”面板。
在网页中添加行为时，首先需选择要添加行为的对象，然后在“行为”面板中单击按钮打开“动作”菜单，如图所示。
第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. 简洁明了的导航栏布局导航栏应该尽可能简洁明了，避免过多的文字和图标，以免给用户造成困扰。
一般来说，最好将导航栏限制在四到七个链接，如果超过这个数量，可以考虑使用下拉菜单或者折叠菜单来展示更多的选项。
2. 提供页面内导航在长页面中，为用户提供页面内导航可以方便他们快速定位所需内容。
可以通过在导航栏中添加锚点链接或者在页面滚动时悬浮显示一个固定位置的导航栏来实现。
这样可以大大提升用户的使用体验。
3. 使用图标替代文字链接在移动设备上，屏幕空间有限，因此建议使用图标代替文字链接，以节省空间和提升可用性。
常见的图标包括首页、搜索、购物车等。
此外，为了避免用户的困惑，建议在图标旁边添加简短的文字描述，以确保用户能理解每个图标的含义。
4. 响应式下拉菜单如果导航栏中的链接数量较多，可以考虑使用响应式下拉菜单来展示更多的选项。
在移动设备上，用户可以点击导航栏上的菜单图标，然后展开一个下拉菜单，其中包含更多的链接选项。
通过这种方式，可以充分利用有限的屏幕空间，同时确保用户能够方便地浏览所有的链接。
5. 固定导航栏在网页滚动时，导航栏可能会消失在页面顶部，使用户在需要导航时不方便操作。
为了解决这个问题，可以考虑将导航栏固定在页面顶部或底部，让用户随时可以访问。
这样不仅方便了用户的导航操作，还增强了用户对网站的整体印象。
6. 导航栏透明化透明导航栏是一种流行的设计趋势，通过使导航栏背景透明或半透明，可以增强用户对页面内容的关注。
透明导航栏可以与页面顶部的背景图片或者视频相结合，营造出独特的视觉效果和沉浸式的浏览体验。
7. 设定合理的响应式断点在响应式网页设计中，设定合理的断点非常重要。