分享

更多

   

用DreamWeaver打造留言板网页设计5

2010-08-11  惊讶空间
对一个站点来说,导航系统是很重要的。如果你的站点导航系统设计得好,访问你的网站的用户就会感到特别方便,反之,用户会感到无所适从。本次课程我们要讨论如何在页面插入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按钮

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    类似文章 更多
    喜欢该文的人也喜欢 更多