|
对一个站点来说，导航系统是很重要的。如果你的站点导航系统设计得好，访问你的网站的用户就会感到特别方便，反之，用户会感到无所适从。本次课程我们要讨论如何在页面插入Dreamweaver的导航条，并对页面中的导航条的创建方法进行总结。另外，还顺便讨论一下如何插入flash动画等页面元素的方法。
一、规划和创建页面导航元素 1、打开留言板站点主页面文档（main.asp）。将页面顶部的表格重新拆分调整为如图1所示的效果。  图1 main.asp页面顶部表格 2、根据图1所示的表格尺寸，在Fireworks MX和Flash MX中创建图像和动画。（在这里下载） 你下载的是一个rar压缩包（image5.rar），其中包括以下内容： △一个宽300像素、高120像素的图像文件（top001.gif），在Fireworks MX制作完成。 △一个宽455像素、高90像素的flash动画文件（top1.swf），在Flash MX制作完成。 △5组共10个宽91像素、高30像素的图像文件（daohang*_*），在Fireworks MX制作完成。 3、将图像top001.gif插入到图1中①所标示的单元格。 4、将flash动画top1.swf插入到图1中②所标示的单元格，具体步骤是： ⑴将光标定位到图1中②所标示的单元格中。 ⑵单击插入栏中的“插入flash”命令，弹出如图2所示的“选择文件“对话框。在其中浏览选择需要插入的flash动画文件。  图2 选择要插入的flash动画文件 ⑶选中插入的flash动画，在属性面板可以对它进行设置和操作，如图3所示。  图3 flash动画属性面板 二、插入导航条 1、将鼠标光标定位到图1中③所标示的单元格，然后单击插入栏中的“插入导航条”命令，如图4所示。  图4 插入导航条 2、单击“插入导航条”命令以后，会弹出如图5所示的“插入导航条“对话框。  图5 插入导航条对话框 3、在如图5所示的插入导航条对话框中，我们要定义5个导航项目，将来得到的是5个水平排列的导航按钮。每个导航项目分别使用前面下载的在Fireworks MX制作完成5组图像文件。 ▲完成以后的留言板站点主页面效果：单击这里观看 三、创建页面导航条方法总结 1、自定义简单导航条 ①布局表格，导航条中有几个项目，就创建几个单元格。 ②在单元格中输入文本或者插入图像。 ③分别定义每个单元格中的文本或者图像的超级链接。 2、创建Dreamweaver导航条（方法请参考前面） 3、通过插入“代码面板/代码片段/导航”创建常见的导航条，如图5所示。 代码片段中有很多常用的导航条代码模板，利用它我们可以很容易的创建一些常见的导航条。  图6 代码片段：导航 4、创建Fireworks MX导航条 Fireworks MX中也提供了创建导航条的具体工具和方法，我们在Fireworks MX中设计导航条，然后再插入到Dreamweaver MX中进行编辑。 如图7所示，单击插入栏中的插入Fireworks HTML命令可以实现Fireworks HTML文档的插入。  图7 插入Fireworks HTML文档 5、创建Flash按钮导航条 如图8所示，单击插入栏下媒体标签下的Flash按钮命令可以实现在页面文档插入Flash按钮的目的。将多个Flash按钮集合在一起也能实现导航条的功能。  图8 插入Flash按钮 |
|
|
