实验八 制作网页导航条
- 格式:docx
- 大小:1.71 MB
- 文档页数:7
导航条制作【实训目标】导航条制作1.在网页中插入标题、文字。
2. CSS对HTML标签的美化。
【实训课时】2学时【背景资料】导航条是网页设计中不可缺少的部分,它是指通过一定的技术手段,为网站的访问者提供一定的途径,使其可以方便地访问到所需的内容,是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。
利用导航条,我们就可以快速找到我们想要浏览的页面。
导航条的目的是让网站的层次结构以一种有条理的方式清晰展示,并引导用户毫不费力地找到并管理信息,让用户在浏览网站过程中不至迷失。
为了让网站信息可以有效地传递给用户,导航一定要简洁、直观、明确。
作用就是你有什么需要如浏览新闻,你可以直接点击“新闻”便可进入新闻页面。
在企业网站上,导航条上常见的有:产品介绍,公司简介,最新产品,联系我们等。
【实训环境】一、PC最低配置要求如下——操作系统:Windows XP / Windows Vista / Windows 7CPU:英特尔奔腾4 3.0 GHz 或AMD 速龙3200+物理内存:512M硬盘空间:12 GB显卡:带有256 MB 显存、支持DirectX 9.0c、核心达到NVIDIA GeForce 6600 GT 或ATI Radeon X1600 XT 级别声卡:支持DirectX 9.0c二、PC软件要求如下——安装Dreamweaver CS4版本,安装office2003以上版本【实训内容】本节实训课的安排是完成导航条的制作。
导航栏是一个网站的大纲,可以引导浏览者快速到达所要访问的页面。
在大多数的网站导航中都使用项目列表来制作。
任务实施步骤:1. 主导航条制作(1)启动Dreamweaver CS5,打开index.html页面。
(2)新建CSS文件。
执行菜单栏上的“文件”→“新建”。
在弹出的“新建文档”对话框中,选择新建“空白页”,在“页面类型”中选择CSS,单击“创建”,建立文件。
本案例将练习 Dreamweaver 中行为的使用。
案例的制作思路:(1) 向预留的导航栏位置插入嵌套表格。
(2) 插入导航栏图片。
(3) 对图片添加“交换图像”行为,使得鼠标移到图片上时文字发光,如图所示,鼠标移开图片时文字恢复,如图所示。
图鼠标移到导航栏上图鼠标从导航栏移开在介绍案例的具体实现之前,先来介绍相关的知识。
8.3.1 行为概述Dreamweaver 提供了一种称为“行为”的机制,帮助用户构建页面中的交互行为。
行为,就是在网页中进行一系列动作,通过这些动作实现用户与页面的交互,是一个带有面向对象设计思想的工具。
事实上,行为是由预先书写好的JavaScript 代码构成的,使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。
利用Dreamweaver 中的行为,不需要书写代码,就可以实现丰富的动态页面效果。
行为有 3 个重要的组成部分:对象、事件和行为。
对象是产生行为的主体,许多网页元素都可以成为对象,如图片、文字、多媒体文件等。
事件是触发动态效果的条件,它可以被添加到各种页面元素上,也可以被添加到 HTML 标记中。
不同的浏览器支持的事件种类和数量不一样,通常高版本浏览器支持更多的事件。
行为通过动作来完成动态效果。
例如,弹出信息、改变属性、交换图像等都是动作。
动作是一段JavaScript 代码,在Dreamweaver CS3 中使用内置的行为,系统会自动往页面中添加JavaScript 代码,用户完全不必自己编写。
Dreamweaver 内置了很多行为动作,形成一个JavaScript 程序库,用户还可以到官方网站下载并安装更多的行为。
另外,如果精通JavaScript 语言,也可以编写自己的行为,添加到Dreamweaver CS3 中。
选择“窗口”→“行为”可以显示“行为”面板。
在网页中添加行为时,首先需选择要添加行为的对象,然后在“行为”面板中单击按钮打开“动作”菜单,如图所示。
自己制作动感的flash导航条最近做网页美化的时候自己做了一个flash的导航条,由于看到目前网上的一些有关此类的教程太过复杂而且问题交待不是很清楚,因此在这里再跟大家分享一下一个基本的flash导航条的制作方法:所谓“导航条”就是指一般置于网页上方、可以链接到不同网页位置的按钮菜单。
所谓“动感效果”,是指可以响应鼠标在各个按钮图标上移动和点击时产生不同的画面显示效果,此外还可以添加音频等多媒体效果。
下手开始制作之前,首先需要筹划一下,导航条在原始状态、鼠标移动到按钮上方时、以及点击时究竟需要显示怎样的效果。
从简单的来说,我可以设置两种显示状态,一种就是上面图中所示的原始状态,另一种就是文字呈反白显示,按钮图标更突出显示(从原有的水晶覆盖层下显示改为到覆盖层上方显示)。
这就需要准备两套不同显示状态下的图片(如果你愿意,当然也可以只用一套图片,而用flash中编辑图片效果的方式来改变另一种状态下的显示效果)。
因为原有的静态导航条是我用Photoshop做的,因此准备两套图片不需要新找素材制作,现成就可以拿来使用。
打开flash mx,文件—导入—导入到库,把需要使用的图片都导入到当前的库中,其中一张底图如下:其他图片则是各个按钮的原始图标图片。
按<F11>可以显示库中的内容,如下图:接下来,从库中将那张长条形的底图拖入到场景中,并且设置背景文档的大小与底图大小相同:下面制作各个按钮,插入—新建元件,“行为”选择“按钮”,名字可命名为“首页”,单击确定按钮进入按钮的编辑界面,在上方选中第一帧“弹起”帧(即导航条的原始显示状态),然后将之前导入到库中的代表“首页”的按钮图标拖入到编辑区中,然后添加静态文字,设置字体样式,字体颜色为黑色,将文字和图片的相对位置设置整齐,如下图所示:然后在上方选中“弹起”帧,右键选择“复制帧”,再选中第二帧“指针经过”帧(即响应鼠标动作的显示状态),右键选择“粘贴帧”,然后在“指针经过”帧的编辑区内将文字颜色改为浅蓝色,如下图所示:再将这个“指针经过”帧复制一下,粘贴到“按下”和“点击”两个帧中。
【第一步】我们要先做一个容器(要求:ID为“nav”,宽度为960px,高度为:35px,位于页面水平正中,与浏览器顶部的距离是30px;),这个容器就是放我们的导航的哟~代码如下:HTML代码:<div id="nav"></div>CSS代码:#nav{width:960px;height:35px;background:#CCC;/*为了便于查看区域范围大小,故而加个背景色*/margin:0 auto;/*水平居中*/margin-top:30px;/*顶部30px*/}还有一点需要提醒的是,为了页面在浏览器的兼容性,不要忘记在CSS文件顶部加入标签重置代码哟~代码:body,div{padding:0; margin:0;}这里就不多说了,不明白的就看,课程顶部的课程关键词怎么样,作出来了没有,效果是不是一个灰色条,位于页面的正中间,并且所有浏览器效果一样呢~呵呵(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的,本身我把整个XHTML+CSS的理论都压缩到教程里了,或者说教程的“知识点浓度”很高,有时需要你一字不漏的去品我说的话,不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了,KwooJan保证你以后只要做出个页面就很Easy 的兼容各种浏览器,并且代码绝对的精简!CSS文件加载速度大大提升哟~)【第二步】盒子做好了,我们就要往里面放导航条中的内容了“CSS学习学前准备入门教程提高教程布局教程精彩应用”,如果我们把这内容(目前有6个),当成酒杯的话,如果直接放到盒子里面的话,肯定会乱,并且还会东倒西歪,一点顺序都没有,但是我们平时会用一个隔板将每个酒杯隔开,这样就是酒杯很有序的放入盒子,并且牢稳而且防震,方便使用!现在我们把这个隔板叫做“有序列表”起个英文名字叫:ul,里面的每个单元格我们也给起个英文名字叫“li”,大家想想里面的这个ul是不是和盒子里面的空间一样大,小了,酒杯放不进去,大了杯子就会不稳,所以我们定义UL的时候大小一定也要和外面的盒子一样大哟~,所以呢,我们的代码就知道怎么写了吧HTML代码<div id="nav"><ul><li>CSS学习</li><li>学前准备</li><li>入门教程</li><li>提高教程</li><li>布局教程</li><li>精彩应用</li></ul></div>CSS代码:#nav ul{width:960px;height:35px;}效果作出来了没有,下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试,总结规律):效果不一样吧,没关系,IE6中盒子被撑大,FF中却没有,但是我们的“酒杯”却出来了,还有我们不希望我们的酒杯纵向排列,而是横向排列,怎么办呢?给大家一分钟时间想~~~想出来了没有?什么没有?没关系,我带着大家想想,因为<li>标签也是块状元素,所以他也有块状元素的“霸道”,不允许其他元素和自己处于同一行,总共六个<li>,所以他们六个就像台阶似的纵向排列起来了,我提示到这里,大家应该知道怎么做才能让这些“酒杯”横向排列了吧!^_^对喽~用浮动Float!可是让谁浮动呢,当然是<li>标签喽~代码如下:#nav ul li{ float:left;}效果是不是和下面的一样呢大家会发现虽然“酒杯”横向排列了,但IE6和FF中的效果还是不一样的1)盒子(#nav)高度不一样2) 在FF中“酒杯”前面有个大黑圆点,而IE6中却没有!解决上面这两个问题,也很容易,如下1)做到这里标签ul和li有没有进行重置?只要我们在页面中新写一个标签,就要进行重置,做法是,将ul、li标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”2)“酒杯”前面的大黑圆点,是FF给li标签定义的默认样式,我们只需要将li的默认样式去掉就是了,在li标签的CSS属性中加入“list-style:none;”就OK了现在在瞅瞅,两种浏览器的显示效果是不是和下图一样了呢~如果你做到这里的效果和我说的不一样,没关系,我把做到目前第二步的代码发出来,你对着上面说的再看看,绝对可以学会【第三步】第二步的效果还不是我们想要的,所有的“酒杯”都没有保持“车距”,后面的文字全部贴着前面的文字。
Bootstrap教程第二课:制作网站导航条上一课介绍了用Bootstrap前端框架制作一个简易的主页,其中介绍了使用Bootstrap框架所需要的准备工作,以及文档格式要求,在这里及以后将不再复述,如有不明白的地方,可以查看上一节的内容(Bootstrap教程第一课:简单的Bootstrap主页(1))。
制作网站的导航条,先从导航开始,导航的结构代码很简单,如下:<ul class="nav"><li><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul>添加了.nav样式的导航,将会像如下图样显示:要把这个导航变成网站的横排导航条,需要继续给 ul 添加 .navbar-nav 样式,代码如下:<ul class="nav navbar-nav"><li><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul>显示结果如下:导航的栏目默认提供了两种,一种是.navbar-default 默认样式,另一种是 .navbar-inverse 黑色底色样式,我们可以分别给上面的ul外层添加一个DIV,然后加入两个样式,同时还要给这个DIV添加 .navbar 导航条样式,并给导航中的li添加当前高亮样式.active,代码如下:<div class="navbar navbar-default"><ul class="nav navbar-nav"><li class="active"><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul></div>navbar-default样式如下:navbar-inverse样式如下:接下来,我们需要给导航添加自适应的导航隐藏展开按钮,同时给导航添加一个文字LOGO,代码如下:<div class="navbar navbar-inverse"><div class="navbar-header"><!-- 自适应隐藏导航展开按钮 --><button type="button" class="navbar-togglecollapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><!-- 导航条LOGO --><a class="navbar-brand" href="#">Brand</a></div><div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="">首页</a></li> <li><a href="">博文</a></li><li><a href="">留言</a></li></ul></div></div>导航条隐藏时显示效果如下:导航条显示时如下:接着,我们可以在导航后面添加一个搜索框,搜索框代码添加在</ul>下面,代码如下:<form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control"placeholder="Search"></div><button type="submit" class="btnbtn-default">Submit</button></form>效果如下:我们还可以在导航上添加右边的功能导航,这个代码添加在刚刚添加的form表单后面,代码如下:<ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul>显示效果如下:最后,在导航中添加一个下拉菜单功能,我们可以把这个代码添加在留言的后面,代码如下:<li class="dropdown"><a href="#" class="dropdown-toggle"data-toggle="dropdown">下拉菜单 <spanclass="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">导航一</a></li><li><a href="#">导航二</a></li><li><a href="#">导航三</a></li></ul></li>显示效果:一个完整的带有LOGO、主导航、功能导航、搜索框、下拉菜单的导航条就制作完成了,下面贴出完整的代码供大家参考,Bootstrap很强大,需要大家在实践中去学习,所以,简单的复制粘贴,很快就能见到效果,但不如手写一篇来得印象深刻。
实验八制作网页导航条实验八制作网页导航条使用实验八给的实验素材建立站点文件夹,然后制作如下的导航条。
一、利用列表制作垂直方向的导航栏步骤: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.第一个超链接“首页”表示当前页面,其背景图片与其他超链接不一样,请添加一个样式完成此效果。
04导航条设计(一)导航条的制作并不是几款按钮的简单组合,他们需要与logo和背景元素结合起来。
通过学习,能够掌握导航条的制作全过程以及各种处理的方法。
1、制作底板第一步:新建一个图像文件,宽度为780象素,高度为100像素第二步:按快捷键Ctrl+A,将图像全部选中,在工具箱中设置前景色(如:R:54,G:62,B:89),按快捷键Alt+Delete,将前景色填充到背景中,Ctrl+D取消选择。
在工具选项栏上单击“渐变色条”,打开渐变编辑器对话框第四步:选择黑色和白色渐变,选中左侧的色标,设置一种颜色(R:114,G:128,B:164)第五步:选中右侧的色标,设置颜色(R:72,G:85,B:117),单击确定按钮,完成设置。
第六步:用鼠标从图像的上端拖动到下端,对图层进行渐变填充第七步:选取多边形套索工具,在图像上单击鼠标,创建出一个选区第八步:按Delete键,删除选取中的图形,显示出背景色第九步:按Ctrl+D,取消选择,双击“导航底图”图层,打开图层样式对话框,选择“斜面和浮雕”样式,在“高光模式”中设置一种颜色(R:255,G:253,B:221),设置好其他参数数,单击确定按钮,完成图层样式的添加。
第十一步:选取多边形套索工具,在图像的上端选取一个选区,按Delete键,删除选区中的图形第十二步:执行“选择”—〉“修改”—〉“收缩”命令,打开“收缩选区”对话框,设置“收缩量”为1像素第十三步:新增一个图层,设置前景色为白色,按Alt+Dlete,将选取填充为白色,按Ctrl+D取消选择第十四步:双击新增图层的缩略图,打开“图层样式”对话框,选择“渐变叠加”选项,单击“渐变色条”,打开“渐变编辑器”对话框,选中左侧的色标,设置一种颜色(R:96,G:98,B:120),选中右侧的色标,设置一种颜色(R:120,G:120,B:138),单击确定按钮,完成样式的设计。
2、制作文字效果第一步:选取横排文字工具,在窗口中单击,输入文字“Hosting”,选中文字,在“工具选项栏”上设置文字的属性,选取移动工具,调整好文字的位置将文字图层转化为普通图层第三步:双击图层的缩略图,打开图层样式对话框,选择“外发光”样式,选择混合模式为正常,选择颜色为黑色第四步:选择渐变叠加样式,单击渐变色条,打开渐变编辑器对话框,选中左侧的色标,设置颜色为黑色,在中间位置处单击,加入一个色标,给他设置一个颜色(R:159,G:139,B:105),选中右侧的色标,为他设置颜色(R:255,G:251,B:229),单击确定按钮,返回到图层样式对话框,设置其他参数,单击确定按钮,完成图层样式的设置。
顶部水平栏导航顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。
它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。
顶部水平栏导航设计模式有时伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。
顶部水平栏导航一般特征导航项是文字链接,按钮形状,或者选项卡形状水平栏导航通常直接放在邻近网站logo的地方它通常位于折叠之上顶部水平栏导航的缺点顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。
对于只有几个页面或类别的网站来说,这不是什么问题,但是对于有非常复杂的信息结构且有很多模块组成的网站来说,如果没有子导航的话,这并不是一个完美的主导航菜单选择。
何时使用顶部水平栏导航顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。
这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。
当它与下拉子导航结合时,这种设计模式可以支持更多的链接。
竖直/侧边栏导航侧边栏导航的导航项被排列在一个单列,一项在一项的上面。
它经常在左上角的列上,在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究,左边的竖直导航栏比右边的竖直导航表现要好。
侧边栏导航设计模式随处可见,几乎存在于各类网站上。
这有可能是因为竖直导航是当前最通用的模式之一,可以适应数量很多的链接。
它可以与子导航菜单一起使用,也可以单独使用。
它很容易用于包含很多链接的网站主导航。
侧边栏导航可以集成在几乎任何种类的多列布局中。
侧边栏导航的一般特征文字链接作为导航项很普遍(包含或不包含图标)很少使用选项卡(除了堆叠标签导航模式)竖直导航菜单经常含有很多链接竖直/侧边栏导航缺点因为可以处理很多链接,当竖直菜单太长时有时可能将用户淹没。
尝试限制你引入的链接数,取而代之可以使用飞出式子导航菜单以提供网站的更多信息。
同时考虑将链接分放在直观的类别当中,以帮助用户很快地找到感兴趣的链接。
头部导航条标签化方法制作第一种显示方式(简单导航条):结合CSS控制,可以实现如下效果:HTML代码:$metnavtopcss代码:.nav{ width:100%; height:30px; background:url(../navblue.gif) repeat-x 0px 0px;}.nav1{height:30px; width:1000px; margin:0 auto; display: block;overflow:hidden; color:#FFFFFF; text-align:left;line-height:30px; font-size:13px;}.nav1 a{ color:#FFFFFF; padding:0px 21px 0px 21px;}.nav1 a:hover{ color:#003366; background-color:#ffffff;}第二种显示方式(带切换特效):结合CSS控制,可以实现如下效果:HTML代码:$metnavtopcss代码:.nav{ position:absolute; right:0px; bottom:0px; width:100%;height:25px; }.nav li{ list-style:none; float:left;}.nav .navdown{ width:99px; text-align:center; float:left;background-image:url(../nav2.gif);height:25px; border-left:1px solid #FFFFFF;line-height:25px; color:#003399; font-weight:bold;}.nav .navdown a{color:#003399;}.nav .navup{ width:99px; text-align:center; float:left;background-image:url(../nav1.gif);height:25px; border-left:1px solid #FFFFFF;line-height:25px; color:#FFFFFF; font-weight:bold;}.nav .navup a{color:#FFFFFF;}第三种显示方式(纵向显示二级导航):结合CSS控制,可以实现如下效果:HTML代码:$mettopnavcss代码:.nav1{float:left; width:75px; height:35px; text-align:center; position:relative; padding-left:2px;background:url(../menu_line.gif) no-repeat left top; }.nav1 a{display:block; color:#FFFFFF; font-weight:bold;padding-right:2px; }.nav1 a:hover{ background:url(../lia_bg.gif) repeat-x; color:#FFFFFF;} .nav2{position:absolute; top:34px; left:0px; *left:-14px; }*+html .nav2{top:30px;}.nav2 li{list-style-type:none; width:120px; height:25px;border-bottom:1px solid #FFFFFF;}*+html .nav2 li{margin-bottom:-9px;}.nav2 li a{background:#045aa7; color:#FFFFFF; height:25px;border-top:none; line-height:25px; font-weight:normal;}.nav2 li a:hover{font-weight:bold; background:#045aa7;border-top:none;}a.navdown{background:url(../lia_bg.gif) repeat-x 0px 0px;}第四种显示方式(横向显示二级导航):结合CSS控制,可以实现如下效果:HTML代码:$mettopnavcss代码:.nav{height:73px; background:url(../menu_bg.gif) repeat-x bottom left; position:relative; }.nav ul{overflow:hidden; margin-left:5px;}.nav ul li.navl{float:left; height:35px;}.nav ul li.navl a{float:left; display:block; padding-left:6px; height:35px;background:url(../menu_on_left.gif) no-repeat left top; cursor:pointer; text-decoration:none;}.nav ul li.navl a span{float:left; padding:11px 14px 10px 10px;line-height:14px;background:url(../menu_on_right.gif)no-repeat right top; font-size:14px; font-weight:bold;color:#FFFBF0;text-decoration:none; }li.navl a.navdown{background-position:left 100% !important; }li.navl a.navdown span{background-position:right 100% !important; color:#333333 !important; text-decoration:none!important; padding:14px 14px 7px10px !important;}ul.nav2{position:absolute !important; left:20px !important;bottom:8px !important; }ul.nav2 li{float:left !important; height:22px !important;}ul.nav2 li a span{float:left !important; display:block !important; padding:6px 10px 4px 10px !important;line-height:12px !important;background:url(../menu_on_right2.gif) no-repeat right top !important;} ul.nav2 li a span{font-weight:normal !important;color:#333333 !important; font-size:12px !important;}ul.nav2 li a{display:block !important; float:left !important;background:url(../menu_on_left2.gif) no-repeat lefttop !important;cursor:pointer !important;padding-left:3px !important;}ul.nav2 li a{padding-bottom:0px !important;padding-right:0px !important; padding-top:0px !important;height:22px !important;}ul.nav2 li a:hover{text-decoration:none !important;background:url(../menu_on_left2.gif) no-repeat leftbottom !important; }ul.nav2 li a:hover span{background:url(../menu_on_right2.gif) no-repeat right bottom !important; color:#FF6600 !important; }标准PHP代码方法制作以显示纵向二级栏目导航条制作为例:{$lang_home}//首页$val[name]返回顶部尾部导航条结合CSS控制,可以实现如下效果:HTML代码:{$metfootnav}css代码:.footnav{ width:1000px; height:20px; border-bottom:1px solid #8B0000; padding-top:10px; margin-top:3px; }返回顶部横向导航条(当前位置)结合CSS控制,可以实现如下效果:HTML代码:{$lang_home} > $nav_x[name]css代码:.nav_x{ width:100%; font-size:13px; height:30px; font-weight:bold;text-align:left;line-height:30px; background-color:#E9E9E9; color:#990000;border-bottom:1px solid #8B0000;}.nav_x a{color:#990000;}更换$nav_x[name]中的元素可以控制导航显示的内容,如$nav_x[2]只显示当前栏目。
网页导航条制作教程网页导航条对于一个网页的设计非常重要,它能够帮助用户快速找到他们所需要的内容,提高网站的易用性。
下面是一个简单的网页导航条制作教程。
首先,你需要决定导航条的位置和样式。
通常,导航条位于页面的顶部或侧边,并且使用水平的菜单栏。
你可以使用HTML和CSS来创建导航条的基本结构和样式。
其次,你需要创建一个HTML文件,并在其中添加导航条的代码。
例如:```<nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">产品</a></li><li><a href="#">联系我们</a></li></ul></nav>```这段代码创建了一个包含四个链接的无序列表。
你可以根据你的需求修改链接的文本和URL。
接下来,你可以使用CSS来样式化导航条。
例如,你可以为导航条设置背景颜色、字体样式、边框等。
你可以使用一些CSS属性来改变导航条的外观,比如`background-color`、`font-family`、`border`等。
你还可以使用CSS选择器来选择导航条中的元素,并针对每个元素设置不同的样式。
最后,你可以为导航条中的链接添加交互效果。
例如,你可以在鼠标悬停时改变链接的颜色或添加动画效果。
你可以使用CSS的伪类选择器,如`:hover`来实现这些效果。
完成以上步骤后,你就成功地创建了一个简单的网页导航条。
你可以在不同页面中重用这个导航条,或者根据需要进行修改和扩展。
总结起来,制作网页导航条需要以下步骤:确定导航条的位置和样式、创建HTML结构、使用CSS样式化导航条、为链接添加交互效果。
一款精致的水晶风格按钮的制作网站制作中导航栏的设置非常重要。
漂亮的导航按钮和菜单会给网站增色不少。
下面介绍一款精致的水晶风格按钮的制作。
作者不仅介绍了按钮的制作还介绍了文字部分的制作方法,非常值得学习。
最终效果1、创建一个新文件600 * 140px。
现在选择圆角矩形工具制作一个圆角矩形如下图。
2、应用层样式:内发光,混合模式:滤色,方法:柔和。
3、渐变叠加:颜色设置为:#5e80a3,#839db8,#b8c7d6。
4、描边: #5e80a3。
5、这就是它应该呈现的样子。
6、现在打上菜单文字,字体Segoe,大小:14 pt,颜色白色#ffffff。
7、给字体链接应用层效果:描边 #53769a。
8、创建一个新层。
选择矩形选框工具,绘制1px宽度的线条并使用# ffffffs填充。
9、复制这个层接着在每个链接之间添加每个线条。
现在选择矩形选框工具选取线条底部的区域覆盖到所有的线条,然后使用选择- >修改- >羽化和应用5px半径。
按下Del然后采取相同的方法处理上方的线条。
10、将线条图层的混合模式改为柔光。
11、使用矩形选框工具选取你链接的内部区域(在两个线条之间)然后填充任何你想要的颜色。
12、现在给这个层应用混合模式渐变叠加使用颜色: #567595, #728fae #b3c3d3。
13、这就是它应该呈现的样子。
14、现在使用矩形选框工具2px的半径绘制一个小矩形使用#ffffff填充。
15、应用如下的层效果到形状图层: 内发光(混合模式:叠加)。
16、渐变叠加: #e6e6e6 和 #ffffff。
17、描边: #5e80a3。
18、这就是它应该呈现的样子。
19、在形状内输入“search”使用Segoe字体,大小为 12pt 颜色#7b7b7b。
最终效果:Photoshop制作一个精美的透明导航这photoshop教程介绍非常精致的导航栏的制作方法。
大致过程:先用做出自己想要的导航栏形状,然后分别对导航栏的高光及背景部分设置图层样式,做出水晶质感。
怎样制作浏览导航第一步:在编辑日志窗口按你文章的类别归类做文字链接。
其步骤如下: 1、点击日志----点击写日志,进入编辑日志窗口; 2、在编辑日志窗口的右上角点击“全部功能”----找到<>按钮,点击进入HTML代码编辑窗口; 3、在代码编辑窗口中做文字链接: A、输入文字链接代码:<a href="相关地址" target="_blank">相关文字</a> B、“相关地址”处粘贴你一篇日志的网址。
注意:不能在日志分类中打开你的日志,要在你最近发表的日志那个模块中打开你的日志,然后在顶上面的网址栏中把日志网址复制,再粘贴在“相关地址”处。
C、“相关文字”处填你那篇日志的名称,如:1、中秋情思 D、一类中有几篇日志就按上述方法依次反复做几次,编上序号。
E、每个日志标题的换行,方法很简单,就是在文字链接代码的前面加一个换行代码<br>如: <br><a href="相关地址" target="_blank">相关文字</a> F、如果想字大一点,那就在所有代码的前后各加一个放大字体的代码<h2> 如: <h2><a href="相关地址" target="_blank">相关文字</a><h2> 4、点击编辑窗口的<>按钮,回到日志编辑窗口;(点那个预览可以看编辑状况) 5、日志标题栏中填你日志类别的名称,类别栏中填浏览导航; 6、到此为止,你就做好了一个类别的文字链接,点击“发表日志”完成。
第二步:在自定义模块中做文字链接,这个文字链接是指浏览导航的类别名称地址的链接。
1、怎样进入自定义模块?请参看我写的“所有代码的粘贴法”这一章,请点击:所有代码的粘贴法 2、文字链接的方法按第一步中第三小点的所有步骤依次操作。
实验八制作网页导航条
使用实验八给的实验素材建立站点文件夹,然后制作如下的导航条。
一、利用列表制作垂直方向的导航栏
步骤:
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.jpg
button1_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.第一个超链接“首页”表示当前页面,其背景图片与其他超链接不一样,请添加一个样式完成此效果。
六、(选做)超链接案例
利用文件夹“nav06”中的素材,根据效果图,完成网页的制作。
如果认为网页布局有难度,可将效果图中的几个超链接分在不同的网页中完
成。
鼠标经过边框颜色:
文字颜色:#60B0E6
#60B0E6
鼠标经过背景颜色:#60B0E6
鼠标经过文字颜色:#ca670c。