|
|
|
| 第5课 创建留言板站点主页面导航元素 |
| www.study51.com |
| 【字体：大 中 小】【打印】【关闭】 |
|
|
对一个站点来说，导航系统是很重要的。如果你的站点导航系统设计得好，访问你的网站的用户就会感到特别方便，反之，用户会感到无所适从。本次课程我们要讨论如何在页面插入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按钮 |
|
|
| 【字体：大 中 小】【打印】【关闭】 |
|
|
|
