自己动手用Dreamweaer制作活动菜单条_主页制作_网上学园_科技时代_新浪网
自己动手用Dreamweaer制作活动菜单条
.cn &09:24 赛迪网--中国电脑教育报
　　文/吴起　　用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。
　　第1步：制作菜单外貌
　　在Dreamweaer中新建一个文件，绘制一个层，在该层中插入一个表格(如图1)，对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”，将“Hover”的“Color(颜色)”设置为红色，最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果)。
　　第2步：设计菜单的动态效果
　　1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界)，在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置(如图2)。在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。
　　2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图3)。
　　3、现在还要设置一个行为让时间线停止后能继续播放。我的设想是这样的：在一般状态下菜单条弹回但仅保留下方的“校园大观”字样，而菜单条再次弹出和弹回则由鼠标是否经过了菜单条上的“校园大观”来控制。如此可以这样继续进行：选定菜单条中的“校园大观”(要确保该字样的超链接地址为“#”，即空链接)字样，单击行为面板中的“+”按钮，在弹出的菜单中选择“Timeline/Play Timeline”，在接着弹出的对话框中选择“Timeline1”后单击确定按钮，这时行为面板中将增加一个行为，在其“Events”下拉列表中选择“onMouseOver”事件，表示当鼠标处于该字样上方时播放动画(如图4)。
　　至此，一个活动菜单条制作完成了。可以按“F12”键预览其效果。
　　但这个菜单条还有一点美中不足的是，它的消失必须在鼠标经过了菜单条下方的特定区域(本例中为“校园大观”字样)时才行，要想在菜单条弹出后，只要把鼠标从该菜单条上移开即可使菜单消失，可能就要借助Fireworks或Flash了，如果你有什么好方法，不妨来信和我们一起交流一下。
【】【】【】【】
新 闻 查 询
　相关链接
　***：010-8　　　欢迎批评指正 |
Copyright & 1996 - 2003 SINA Inc. All Rights Reserved　新浪网您所在位置： &
 &  & 
dreamweaer入门图文详细教程.doc83页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
文档加载中...广告还剩秒
需要金币：150 &&
dreamweaer入门图文详细教程
你可能关注的文档：
dreamweaver8.0入门图文教程：Dreamweaver?8?操作环境
第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来了解Dreamweaver8的操作环境，完成站点的创建。　　一、Dreamweaver8 的操作环境　　在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。　　在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。　　新建或打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
　　1、标题显示栏 启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。
　　Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。
　　文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。　　编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。　　查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。　　插入：用来插入各种元素，例如图片、多媒体组件，表格、框架
正在加载中，请稍后...dreamweaer使用技巧六则，公司建立网站，DREAMWE***ER教程，建个人网站，创建网站，专业网页制作
定制***:&售后***:&购买***:
搜发国际官方网站全面改版升级....
您当前的位置：&>&&>&&>&&>&
dreamweaer使用技巧六则
用TracingImage免费创建网站匡助定位网页中各元素位置　　TracingImage是Dreamweaver2新增一个非常有效功能，它允许用户在网页中将原来图案设计搞作为辅助背景。这么一来，拥护就可以非常网页制作工具利便地定位文字、图象、表格、层等网页元素在该页面中位置了。TracingImage网页制作工具详细使用是这样：首先使用各种绘图软件作出一个想象中网页排版格局图，然后将此图网页制作工具保留为网络图象网站制作格局（包括gif,jpg,jpeg和png）。用Dreamweaver打开你所免费做网站编纂网页，在页面空白区单击右键，选择"Page Properties..."，然后在弹出对话框中Tracing Image项中输入刚才创建网页排版格局图所在位置。再在Image Transparen中设定TracingImage透明度，OK。这样你就可以在当前网页中网页制作工具利便地定位各个网页元素位置了。使用了TracingImage网页在用Dreamweaver免费做网站编纂时不会再显示背景图案，但当使用浏览器浏览时正好相反TracingImage不见了，所见就是免费创建网站经由免费做网站编纂网页（当然能够显示背景图案）。关于"Convert Table widths to Pixels"和"Convert Table widths to Percent"　　 "Convert Table widths to Pixels"和"Convert Table widths to Percent"是Dreamweaver2新增两个设置表格宽度重要功能。当你打开一个带有表格网页时，在状态栏中点中〈table〉标签，在随后显示出表格属性工具面板中就能到这两个按钮了。顾名思义"Convert Table widths to Pixels"就是将表格中所有单元宽度以象素表示，而"Convert Table widths to Percent"是将表格中所有单元宽度以百分比表示。仔细想想他们作用，如果将一个表格宽东以象素表示，但浏览窗口被放大时，表格就不会随之放大单元格宽度。而使用了"Convert Table widths to Percent"后能够使你在640*480分辨率下建立100%宽表格在更高分辨率下依旧保持100%宽度。所以活用这两个功能可以是网页排版事半功倍。隐藏不必要标签　　当用户在网页中插入了不可见元素时，Dreamweaver会庄在页面上添加一个与之相应元素标签，以便于用户选择不可见元素。但这并不全是件好事，学做网站好比你在一个有免费创建网站良多层页面中第一行便插入一个表格，就会发现免费创建网站因为首行排列了太多层元素标签而使得表格庄退到了页面第二行，虽然在浏览时并不影响效果，但这确确实实会阻碍你工作。所以当你觉得某个元素标签碍手碍脚时，就索性将之屏蔽掉。方法是按Ctrl+U打开Preferences面板，在Category中选中Invisibel Elements，在面板右边将会网站制作泛起所有元素标签。只要将讨你厌元素标签前勾掉，以后它就保证不会再网站制作泛起了。调用Style而不致使网页原代码混乱不堪　　调用Style方法免费创建网站良多，你可以单击右键选择Custon Style来调用Style规范，也可以在状态栏中元素列表上单击右键来调用Style。虽然不同方法达掸果似一样，但实际上产生HTML代码则完全不同。学做网站好比用Custon Style来调用Style规范，在网页代码中就生成一个〈span〉标签，这样标签一多就会使文件十分臃肿而且影响浏览器解析速度，所以我建议尽量使用状态栏中元素列表来调用Style。还有一个小技巧，如果你要使用一个Style定义某表格单元中所有文字，只要在〈td〉标签中调用Style就行了，而不需要在一个个定义〈p〉标签。注意这个方法不使用与〈table〉标签，因为在〈table〉标签网站制作顶用Style定义文字网站制作格局会被Netscape忽略。使用定制窗口功能测试网页　　在不同分辨率下效果我想谁都不愿意自己辛辛苦苦做网页在不同分辨率下面目全非吧，所以测试网页在不同分辨率下浏览效果是网页制作中很重要一步。而Dreamweaver2让拥护十分轻松地实现测试，还记得第二免费申请网页部门中对状态拦介绍吗？对就是选择状态栏中间数字可以调节窗口大小了，这招一定要勤用哦。上传网站时无需使用第三方FTP软件　　Macromedia开发人员真是想学做网站殷勤，不仅在Dreamweaver2Site模块中融入了FTP功能，而且这个FTP功能完全可以说是为网站上传而度身定制！我们可以做一个免费网站申请简朴比较，当你使用一般FTP软件上传网站时，是不是都按本地机上网站目录在服务器中新建目录，然后再一个个文件上传。这种做法免费创建网站其实没错，但免费创建网站因为本地机中网站目录中并不是每个文件都被网页调用（学做网站好比在建网页时留下备分文件），所以筛选文件繁重工作量只有拥护自己知道。但使用Dreamweaver2Site上传网页就可以网页制作工具利便得多，免费创建网站因为Site中FTP功能在幕后为拥护行了许多必要工作，所以用户只要将网站地图内相关HTML文件上传Dreamweaver就会庄将与此HTML文件相关所以其他本地文件一并上传（如图象、ZIP文件、FLAS***件甚至是各种REAL文件）。使用Dreamweaver2内带FTP功能网页制作工具详细做法是：免费做网站编纂已经定义过SITE，在“Site Definition for...”面板中选择“Web Server Info”。如果网页是通过FTP方式上传话，将“Server Access”设为FTP，在FTP Host中添入FTP服务器地址，在Host Directory中添入程登入目录，在Login中添入用户名，在添好Password，OK。免费创建网站经由了以上设定，就可以在Site面板中按Connect按钮，当Dreamweaver成功连入服务器后，Connect按钮会庄变为Disconnect，并且在一旁亮起一个小绿灯。接着要做事就是在要上传HTML文件上单击右键，选择“Put”即可。当此HTML文件上传成功后，状态条中将显示Put Depanding File,网站制作仿单Dreamweaver正在上传这个HTML文件所调用其他本地文件。不仅免费做网站如斯，Dreamweaver还可以直接下载服务器上文件行修改，方法么，只要使免费做网站尝尝Put旁Get按钮就明白了。
上一篇文章：
下一篇文章：
"Copyright
搜发国际网络科技有限公司 版权所有
为您提供最优质的建站服务 QQ即时沟通：&&