网页制作实例.doc

《网页制作实例.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实例1制作弹出菜单弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也好。　　效果说明　　本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图17-1和图17-2所示。　　创作思想　　本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用DreamweaverMX2004自带的行为制作弹出菜单。　　操作步骤　　（1）输入文字并设置超链接。在网页中输入文字，因为单独的文本文字是无法添加行为的，按照Dreamweaver中的约定，将文字的超链接设置为“jav

2、ascript:;”才能够添加行为。所以将文字的超链接设为“javascript:;”，并执行【显示弹出式菜单】行为，如图17-3所示。　　（2）设置菜单项和子菜单项，并为菜单设置超链接，然后安排好各个菜单的次序，如图17-4所示。（3）设置页面元素。将菜单设置为垂直菜单，并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态，如图17-5所示。　　（4）设置【高级】标签。在【高级】标签选项中设置菜单的延迟时间，以及是否显示菜单边框。然后设置边框的宽度、颜色、阴影、高亮，如图17-6所示。　　注意：【菜

3、单延迟】中时间的单位是毫秒（ms），1000毫秒等于1秒，在设置时注意换算。　　（5）设置的x轴和y轴参数。在【位置】标签选项中设置弹出菜单的x轴和y轴参数，这两个参数表示弹出菜单左上角到网页左上角的距离，如图17-7所示。　　（6）保存网页文件，然后在浏览器中打开该网页，将鼠标光标移动到文字上方时即可看到有菜单弹出，本实例操作完毕。通过Dreamweaver，可以快速制作出以往只能用复杂代码才能实现的弹出菜单，这样可以实现复杂菜单的弹出和收缩，方便使用又能让页面美观、整洁。实例2制作滑动折叠菜单在网页展示平面有

4、限的情况下，折叠菜单是一个很不错的选择。这种菜单在一般情况下是折叠起来的，只有当浏览者将鼠标移动到菜单上时，菜单才会滑动展开。　　效果说明　　当鼠标不在菜单上时，菜单处于折叠状态，看起来是很普通的一个菜单栏，如图18-1所示。当鼠标移动到菜单栏上时，该菜单的子菜单就会慢慢滑动展开，如图18-2所示。　　创作思想　　先在一个图层中输入文字，形成菜单折叠时的状态，再使用图层展开时间轴动画来实现滑动展开菜单的效果。　　操作步骤　　（1）新建文件并添加层。新建一个网页文件，在网页中添加一个父层（第一级的层）和一个子层（第

5、二级的层），分别设置两个图层的大小和位置，如图18-3所示。　　（2）设置表格和文字。在layer1层中插入表格，设置好表格的高度和背景，然后在表格内输入文字并设置好文字的格式，如图18-4所示。（3）设置layer2层。设置layer2层的背景颜色，然后在其上输入文本并设置超链接，再将layer2层添加到时间轴上，以后便可对layer2层进行时间轴动画操作，如图18-5所示。　　（4）新建一个时间轴Timeline2，然后将layer2层添加到新的时间轴上，如图18-6所示。　　提示：不同的时间轴可以实现对不同

6、对象的控制，也可以实现多个不同动画。　　（5）设置时间轴。分别对时间轴Timeline1的第1帧和时间轴Timeline2的第15帧进行设置（这里以第15帧作为动画的最后一帧），如图18-7所示。　　提示：只需要改变时间轴的关键帧，就可以直接生成动画效果，本例将时间轴Timeline1第1帧中Layer2层的高设置为0px，这样就生成了层慢慢滑出的动画效果。　　（6）添加行为。选择表格中的第一个单元格，然后为单元格添加onMouseOver（鼠标移到单元格上面时）时的行为到播放时间轴Timeline1，如图18-

7、8所示。（7）继续添加行为。再为该单元格添加4个onMouseOut（鼠标移开时）行为，参数设置如图18-9所示。　　（8）添加2个行为。选择layer2层，并分别添加两个onMouseOver和两个onMouseOut，具体操作如图18-10所示。　　（9）保存网页文件，然后在IE中进行预览，本实例操作完毕。通过时间轴上不同对象在不同时间的状态，再结合时间轴的播放、停止和跳转是Dreamweaver中实现动画效果的最基本方法，读者可以充分利用这些功能来实现更精彩的效果。实例3网页过渡特效网页中经常会有一些像动画

8、那样的刷新效果，如卷动、百页窗等。这样的网页看起来会更有动感，不过也要注意适可而止，否则太花哨的变化也容易引起浏览者的反感。　　效果说明　　建立两个页面，并在两个页面之间建立超链接，当单击超链接时，即可以动画的形式进入到另一个页面，如图40-1所示。　　创作思想　　打开DreamweaverMX2004软件，新建两个页面，然后分别为其建立对应的超链接并插入图片，执行【插入