Dreamweaver:[44]怎么在网页中设置动态导航

 时间:2024-11-06 08:11:30

动态很炫的导航栏是网页制作中最常见的,怎么实现如下图所示的动态导航栏呢?一起来学习吧。

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

工具/原料

Dreamweaver

方法/步骤

1、制作导航栏,创建一个AP图层,设置好图层的背景颜色。

Dreamweaver:[44]怎么在网页中设置动态导航

2、在AP图层内,新建一个一行四列的表格,输入文本,输入高值,居中对齐。再设置图层的高与表格一样。

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

3、在每个菜单下面,创建一个图层,比如新闻下面,并在图层下面插入一个一列三行的表格。

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

4、设置新闻下的AP层为隐藏,点击预览就看不到这个图层。

Dreamweaver:[44]怎么在网页中设置动态导航

5、选中新闻菜单所在的单侍厚治越元格,点击行为窗口,添加行为\显示隐藏元素。在弹出的对话框中选择刚才隐藏的层,并点击显示,确定,改变其事件为onmouseover。

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

6、再根据刚才同样的方法,设置一个当鼠标移开,图层隐藏的行为。更改事件为onmouseout.

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

7、为了确保鼠标能够点击到蛴蛩钔淞下面图层内表格的内容链接,需要再进一步设置,把下面的图层移动到新闻表格的下方,并对齐,不留缝隙。

Dreamweaver:[44]怎么在网页中设置动态导航

8、设置下面图层的属性,点击行为,藜局腑载添加行为,显示、隐藏元素,在对话框中点击显示,更改事件为onmouseover。同样也要设置一个鼠标移开隐藏元素的行为,在这里就不在演示了。

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

Dreamweaver:[44]怎么在网页中设置动态导航

9、其他菜单一样设置。这样,整个动态导航栏就设置好了。

Dreamweaver文档中如何插入Div标签? 在Dreamweaver文档中如何插入记录集导航条? Dreamweaver cs6中AP div的使用方法 dw如何调整网页里的字间距 DW软件怎么设置图片布局
热门搜索
心型图片 热吻图片 斗罗大陆2图片 花卉图片大全 枪图片大全