dreamweaver笔记.docx

dreamweaver笔记

第一篇：dreamweaver笔记弹出菜单弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很好。效果说明本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图17-1和图17-2所示。创作思想本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用DreamweaverMX2004自带的行为制作弹出菜单。操作步骤（1）输入文字并设置超链接。在网页中输入文字，因为单独的文本文字是无法添加行为的，按照Dreamweaver中的约定，将文字的超链接设置为“javascript:;”才能够添加行为。所以将文字的超链接设为“javascript:;”，并执行【显示弹出式菜单】行为，如图17-3所示。（2）设置菜单项和子菜单项，并为菜单设置超链接，然后安排好各个菜单的次序，如图17-4所示。（3）设置页面元素。将菜单设置为垂直菜单，并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态，如图17-5所示。（4）设置【高级】标签。在【高级】标签选项中设置菜单的延迟时间，以及是否显示菜单边框。然后设置边框的宽度、颜色、阴影、高亮，如图17-6所示。注意：【菜单延迟】中时间的单位是毫秒（ms），1000毫秒等于1秒，在设置时注意换算。（5）设置的x轴和y轴参数。在【位置】标签选项中设置弹出菜单的x轴和y轴参数，这两个参数表示弹出菜单左上角到网页左上角的距离，如图17-7所示。（6）保存网页文件，然后在浏览器中打开该网页，将鼠标光标移动到文字上方时即可看到有菜单弹出，本实例操作完毕。通过Dreamweaver，可以快速制作出以往只能用复杂代码才能实现的弹出菜单，这样可以实现复杂菜单的弹出和收缩，方便使用又能让页面美观、整洁。滑动折叠菜单在网页展示平面有限的情况下，折叠菜单是一个很不错的选择。这种菜单在一般情况下是折叠起来的，只有当浏览者将鼠标移动到菜单上时，菜单才会滑动展开。效果说明当鼠标不在菜单上时，菜单处于折叠状态，看起来是很普通的一个菜单栏，如图18-1所示。当鼠标移动到菜单栏上时，该菜单的子菜单就会慢慢滑动展开，如图18-2所示。创作思想先在一个图层中输入文字，形成菜单折叠时的状态，再使用图层展开时间轴动画来实现滑动展开菜单的效果。操作步骤（1）新建文件并添加层。新建一个网页文件，在网页中添加一个父层（第一级的层）和一个子层（第二级的层），分别设置两个图层的大小和位置，如图18-3所示。（2）设置表格和文字。在layer1层中插入表格，设置好表格的高度和背景，然后在表格内输入文字并设置好文字的格式，如图18-4所示。3）设置layer2层。设置layer2层的背景颜色，然后在其上输入文本并设置超链接，再将layer2层添加到时间轴上，以后便可对layer2层进行时间轴动画操作，如图18-5所示。（4）新建一个时间轴Timeline2，然后将layer2层添加到新的时间轴上，如图18-6所示。提示：不同的时间轴可以实现对不同对象的控制，也可以实现多个不同动画。（5）设置时间轴。分别对时间轴Timeline1的第1帧和时间轴Timeline2的第15帧进行设置（这里以第15帧作为动画的最后一帧），如图18-7所示。提示：只需要改变时间轴的关键帧，就可以直接生成动画效果，本例将时间轴Timeline1第1帧中Layer2层的高设置为0px，这样就生成了层慢慢滑出的动画效果。（6）添加行为。选择表格中的第一个单元格，然后为单元格添加onMouseOver（鼠标移到单元格上面时）时的行为到播放时间轴Timeline1，如图18-8所示。（7）继续添加行为。再为该单元格添加4个onMouseOut（鼠标移开时）行为，参数设置如图18-9所示。（8）添加2个行为。选择layer2层，并分别添加两个onMouseOver和两个onMouseOut，具体操作如图18-10所示。（9）保存网页文件，然后在IE中进行预览，本实例操作完毕。通过时间轴上不同对象在不同时间的状态，再结合时间轴的播放、停止和跳转是Dreamweaver中实现动画效果的最基本方法，读者可以充分利用这些功能来实现更精彩的效果。全景图浏览效果是否有见过游戏中的全景图效果，充满动画与真实感，让人难以忘怀。在本例中就介绍如何制作这样的网页。效果说明建立文件，选择一张全景图素材，然后插入少量的代码就可以实现全景图浏览效果，如图43-1所示。实际效果请浏览随书光盘中《源文件》目录下的相关文件。创作思想打开DreamweaverMX2004软件新建页面并插入表格，在表格的HTML代码中插入标签，实现全景图浏览。操作步骤（1）新建一个基本的html文件，然后保存页面为“43.htm”。（2）插入表格。要