网页制作实例

网页制作实例 实例1 制作弹出菜单 弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也好。 效果说明 本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图 17-1 和图 17-2 所示。 创作思想 本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用 Dreamweaver MX 2004 自带的行为制作弹出菜单。 操作步骤 ( 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 ，可以快速制作出以往只能用复杂代码才能实现的弹出菜单，这样可以实现复杂菜单的弹出和收缩，方便使用又能让页面美观、整洁。 实例2 制作滑动折叠菜单 在网页展示平面有限的情况下，折叠菜单是一个很不错的选择。这种菜单在一般情况下是折叠起来的，只有当浏览者将鼠标移动到菜单上时，菜单才会滑动展开。 效果说明 当鼠标不在菜单上时，菜单处于折叠状态，看起来是很普通的一个菜单栏，如图 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 中实现动画效果的最基本方法，读者可以充分利用这些功能来实现更精彩的效果。 实例3 网页过渡特效 网页中经常会有一些像动画那样的刷新效果，如卷动、百页窗等。这样的网页看起来会更有动感，不过也要注意适可而止，否则太花哨的变化也容易引起浏览者的反感。 效果说明 建立两个页面，并在两个页面之间建立超链接，当单击超链接时，即可以动画的形式进入到另一个页面，如图 40-1 所示。 创作思想 打开 Dreamweaver MX 2004 软件，新建两个页面，然后分别为其建立对应的超链接并插入图片，执行【插入】 | 【 HTML 】 | 【文件头标签】 | 【 Meta 】命令，在打开的【 META 】对话框中输入参数，最后保存文件完成制作。 操作步骤 ( 1 )打开 Dreamweaver MX 2004 软件新建两个基本的 HTML 文件。为了在插入图片时不提示相对路径，可以先保存页面为“ 40.htm ”和“ 41.htm ”。 ( 2 )添加超链接并插入图片。在页面中添加“网页过渡”字样，并设置超链接链接到“ 41.htm ”页面，然后插入图片使网页过渡特效更加清晰，如图 40-2 所示。 ( 3 )然后对“ 41.htm ”文件执行相同的操作，不过文字的超链接网址为“ 40.htm ”。 ( 4 )插入代码。下面将实现网页过渡特效并在页面中插入 META 代码，如图 40-3 所示。 提示:图 40-3 中添加的 Revealtrans(Duration=4,Transition=2),Duration=4 代码是网页过渡特效的参数。 ( 5 )对照上一步，对“ 41.htm ”文件执行相同的操作，但输入的内容为“ Revealtrans(Duration=4, Transition=7),Duration= 4 ” 。 ( 6 )保存文件，完成特效制作。 实现网页过渡特效，可以增加网页的动态，但它也有弊端，会减慢浏览速度，所以应适当使用。 提示:特效有 24 种可供选择，只要将 Transition 值改为相应的效果代号即可，具体效果和设置如表 40-1 所示。 实例4 用Dreamweaver制作电子相册 在网络中经常可以见到一些类似 Flash 的电子相册，方便又专业。本例将介绍如何使用 Dreamweaver MX2004 制作出漂亮的电子相册。 效果说明 建立文件，插入 Flash 元素，人性化的操作界面使读者可以十分轻松地制作出电子相册，如图 52-1 所示。实际效果请浏览随光盘中的源文件。 创作思想 Dreamweaver MX 2004 软件新建页面，选择【 Flash 元素】选项，输 打开 入相应的参数，就可以制作出动感的电子相册。 操作步骤 ( 1 )打开 Dreamweaver MX 2004 软件，新建文件并保存页面。 ( 2 )插入 Flash 。在工具栏中转到“ Flash 元素”工具条，插入 Flash 元素并保存文件，如图 52-2 所示。 ( 3 )接着设置 Flash 元素的参数，如图 52-3 所示。 ( 4 )保存文件，完成操作。注意在使用该功能时，不要使用过多的图片， 因为这样会让电脑出现缓慢情况。有了这个功能，就不必为了制作精美的电子相 册，而去学复杂的 Flash 知识了。