|
网页设计中菜单的创建应用
Dreamweaver是一款专门用于网页设计与制作的软件，无论是作为Dreamweaver的初学者，还是专业的网页设计师，在进行网页设计时，经常需要创建菜单。网页菜单可以通过编写Javascript程序实现，但需要掌握复杂的编程语言，这对初学者掌握菜单设计会造成一定的困难。要想设计出效果满意且操作不复杂的网页菜单，利用Dreamweaver中的行为等属性，可以制作出从“导航条菜单”到“下拉菜单”等各种与众不同的特殊菜单。
1 导航条菜单
导航（Navigation）原意为“航行、航海”的意思，导航条（Navigation Bar）指的是可以为网络起到导航作用的条形菜单栏。导航条菜单可以是图像，也可以是文本。在Dreamweaver中与轮换图像一起使用的菜单称为“导航条”，通常的轮换图像菜单都是光标移动到菜单上方时菜单的图像发生变换，而光标离开菜单上方时，再返回到原来的图像。
导航条可以分为水平导航条和垂直导航条两种，以创建垂直导航条菜单为例，先在Common面板中单击Image菜单旁的小三角，从弹出菜单中选择Navigation Bar按钮，输入菜单名称，指定打开文档时显示的原图像；单击Up image文本框右侧的按钮，在Select image source对话框中选择轮换图像文件地址。接着单击Add item按钮可以添加多个导航条菜单项，单击按钮。
2 跳转菜单
网页文件中菜单只是在需要时使用，因此最好在尽量缩小菜单显示空间的同时，为内容分割出更多的空间，当网页内某一个主题连接了多个文档，但只选择其中一项来连接相关文档的时候，通常会使用到跳转菜单。
2.1 插入跳转菜单
以制作电子期刊的跳转菜单为例，在跳转菜单中选择想要查的过去期刊的月份，就可以链接到该月的相关内容上。首先显示Forms面板，单击Insert面板的子面板按钮，在弹出的菜单中选择Forms命令，出现Form面板后，单击Jump Menu按钮。接着为文档中插入跳转菜单。
修改跳转菜单的背景色
在网页上使用了背景颜色或背景图像时，利用样式表，就可以给跳转菜单加入背景色，可以提高整体统一性。首先在CSS面板中单击CSS Styles标签打开CSS Styles面板，单击“创新新样式”按钮，在Type选项组中选择Class单选按钮创建类样式，然后在Name文本框中输入jumpbg，再在Define in选项且中选择This document only单选按钮；在Category列表框中单击Background选项面板中的“背景色”按钮，在弹出的颜色选择器上选择所需的颜色；单击选中文档窗口中的跳转菜单后，在属性面板的Class下拉列表中选择jumpbg，就可以以跳转菜单上应用背景色。
创建下拉菜单
下拉菜单，是指当光标移动到主菜单上方时，在下面出现垂直方向的子菜单；当光标离开主菜单上方后，子菜单也会随之消失。
4.1 创建垂直方向的下拉菜单
在Behaviors面板中单击Add behavior按钮 ，在弹出的行为菜单中选择Show Pop-Up Menu行为，在Text文本框中输入第1个子菜单的名称，在Link文本框中正确输入与第1个子菜单相链接的网页地址。接着依次创建第2、第3个子菜单，单击Add item按钮，在Text文本框中输入第2、第3子菜单的名称，Link一项保存不变。
|
