Dreamweaver创建导航条

如果不使用框架,可以在每个页面设置导航条,导航条设一组链接按钮,供浏览者选择使用。按钮有多种形式,下边介绍由鼠标经过图像变换按钮的组成的导航条制作:(导航条在页面顶部)

    “鼠标经过图像”是当访问者用鼠标指针指向该图像时,该图像发生变化。

    “鼠标经过图像”由两个图片组成:页面最初载入时显示的原始图像,访问者将鼠标指针移到原始图像上时显示另一幅图像。

    提示:事先您要制作好按钮图像,确保每个按钮的图像都具有相同的宽度和高度(以像素为单位)。

    请执行以下操作:

    打开主页 (index.htm)

    在“文档”窗口中,将插入点放置在要显示导航条的位置。一般在导航条上边要放置一个横幅图像(logo),导航条就安排在logo下边的位置。

    选择“插入”>“图像对象”>“导航条”。弹出对话框如下:

    在“插入导航条”对话框中,单击顶部加号“+”按钮,按照上图所示①②③④⑤对应的文本框,填入相应的文件。即完成了一个按钮的添加。

    然后,单击页面顶部的加号“+”按钮,添加另一个按钮。重复以上步骤,直至您所需的按钮添加完毕。

    勾选“预先载入图像”,在对话框底部的“插入”菜单中,选中“水平”。勾选“使用表格”。

    单击“确定”关闭该对话框,成功创建了导航条。

    保存页面。

    按F12,预览一下你的导航条,如果满意了,可以将该页面多次“另存为”其它页面,分别指定不同的名称。比如:p1.htm、p2.htm.....等。保存多少次视您的按钮数量而定。然后,分别打开其它页面进行编辑。

    【注】:鼠标指针经过按钮,图像变化,只能在浏览器中看到效果。

时间: 2024-07-29 03:59:20

Dreamweaver创建导航条的相关文章

Dreamweaver网页制作教程:创建导航条

dreamweaver|创建|导航|教程|网页 创建导航条 如果不使用框架,可以在每个页面设置导航条,导航条设一组链接按钮,供浏览者选择使用.按钮有多种形式,下边介绍由鼠标经过图像变换按钮的组成的导航条制作:(导航条在页面顶部) "鼠标经过图像"是当访问者用鼠标指针指向该图像时,该图像发生变化. "鼠标经过图像"由两个图片组成:页面最初载入时显示的原始图像,访问者将鼠标指针移到原始图像上时显示另一幅图像. 提示:事先您要制作好按钮图像,确保每个按钮的图像都具有相同的

Dreamweaver教程:创建导航条

  创建导航条 如果不使用框架,可以在每个页面设置导航条,导航条设一组链接按钮,供浏览者选择使用.按钮有多种形式,下边介绍由鼠标经过图像变换按钮的组成的导航条制作:(导航条在页面顶部) "鼠标经过图像"是当访问者用鼠标指针指向该图像时,该图像发生变化. "鼠标经过图像"由两个图片组成:页面最初载入时显示的原始图像,访问者将鼠标指针移到原始图像上时显示另一幅图像. 提示:事先您要制作好按钮图像,确保每个按钮的图像都具有相同的宽度和高度(以像素为单位). 请执行以下操作

基于jquery的一个OutlookBar类,动态创建导航条_jquery

图示效果:演示地址:http://demo.jb51.net/js/menu_jquery/index.html下载地址:http://xiazai.jb51.net/201011/yuanma/menu_jquery.rarOutlookBar.js 复制代码 代码如下: function OutlookBar(targetName)//targetName:右侧iframe的name { //创建标题 this.AddTitle=function(menuid,menutitle,openo

Dreamweaver 入门教程之创建导航条

如果不使用框架,可以在每个页面设置导航条,导航条设一组链接按钮,供浏览者选择使用.按钮有多种形式,下边介绍由鼠标经过图像变换按钮的组成的导航条制作:(导航条在页面顶部) "鼠标经过图像"是当访问者用鼠标指针指向该图像时,该图像发生变化. "鼠标经过图像"由两个图片组成:页面最初载入时显示的原始图像,访问者将鼠标指针移到原始图像上时显示另一幅图像. 提示:事先您要制作好按钮图像,确保每个按钮的图像都具有相同的宽度和高度(以像素为单位). 请执行以下操作: 打开主页 (

第十三节 创建导航条

创建 在很多时候,一个网站的不同页面都使用了同一导航条.导航条一般由几个图像构成,点击不同的图像,将链接到网站不同的页面.通过统一导航条的方法,我们可以实现网站风格的统一,同时也方便了访问者在不同页面间的跳转.用Dreamweaver可做出比较复杂的导航条.导航条由一个或几个部位组成,每个部位均由图像构成,链接到不同的网页页面.每部分,最多可设四个状态下的图像,开始是一个初始图像,当鼠标移动到这个部位上时显示另一个图像,还可设置当鼠标点击后的初始图像,以及鼠标点击后当鼠标再次移动到这个部位上的图

创建按钮(Buttons)和导航条(Navigation Bars)

按钮|创建 创建按钮(Buttons)和导航条(Navigation Bars)(下) 刚才我们创建了一个按钮,接下来我们就可以利用这个按钮方便的创建导航条了.在Fireworks中你可以利用同一个按钮反复衍生出一系列类似的按钮来组成导航条,而无需重复创建多个类似的按钮,大大减少了工作量,这就是Fireworks神奇的地方!!!现在我们就去看看是怎么做的吧. 打开Library面版,将Home按钮拖到画板中,重复这个动作几次,使画板中有多个Home按钮,在这里我一共放了4个相同的按钮. 将这些按

创建一个纯CSS的水平导航条

css|创建 按照传统的方法,导航条由放在一行表格单元里的图形图像构成.由于人们不再推荐用表格来定位任何非表格的页面内容,所以很多制作Web的人正在寻找(新的)方法,用结构化的XHTML标记和CSS格式来创建导航条. 一个简单的CSS导航条 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,就像例A里的一样. 这种方法看起来很合理也很直观.但问题是,把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入

BootStrap创建响应式导航条实例代码_javascript技巧

首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www

创建按钮(Buttons)和导航条(Navigation Bars)(上)

按钮|创建 创建按钮(Buttons)和导航条(Navigation Bars)(上) 按钮是网页中应用极多的元素,众多的按钮就形成了导航条,导航条的作用就是要让浏览者清楚知道当前所处的位置,并且通过导航条可以方便的将浏览者带到其他的地方而不会迷失.因此按钮表现有以下几中状态: Up:默认状态,即通常的状态,这时的鼠标是不在按钮范围之内的. Over:鼠标滑过按钮时的状态. Down:按钮被点击后的状态,通常它是出现在目标网页中的. Over While Down:鼠标滑过处于Down状态下按钮