如何使用dreamweaver制作一个网页

如何使用 Dreamweaver 制作一个网页? 创建网页页面 1、在 Dreamveaver“文件新建常规基本页HTML”，这样就建 好了一个页面，英文版的默认的文件名为 untitled.htm。中文版的的 默认的文件名为“无标题文档”。htm 就表示这个网页文件是一个静态 的 HTML 文件。给它改名为 index.htm。 注：网站第一页的名字通常是 index.htm 或 index.html。其它页面的 名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。 2、在标题空格里输入网页名称，点击修改页面属性，打开“页面属 性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级 链接的颜色（一般默认即可），其他都保持默认即可。 3此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。 选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为 6， 再使文字居中，然后在文字前用几个回车使其位于页面中间等。 4如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在 对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中 的一种字体，点击中间的按钮就可以加入了。 注：在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用， 因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使 用。 注：在网页上打入空格的办法是：把输入法调为全角。 注：在网页上换行的办法是：shift+Enter。只按 Enter 则为换段。 下面拿一个现成的例子来给大家讲解一下： 现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图： 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用 到了哪些东西。 网页顶端的标题“我的主页”是一段文字。 网页中间是一幅图片。 最下端的欢迎词是一段文字。 网页背景是一深紫红颜色。 构思好这个网页的结构，我们就可以开始制作了。 首先启动 Dreamweaver，确保你已经用站点管理器建立好了一个网站 （根目录）。 为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网 站目录 images 文件夹内。 进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光 标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中 插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页” 四个字。字小不要紧，我们可以对它进行设置。 【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成 默认字体，大小可任意更改字号。并选中“B”将字体变粗。 【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图 标，在弹出的颜色选择器中用滴管选取颜色即可。 【设置网页的标题和背景颜色】 点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下 图） 请在标题输入框填入标题“我的主页”。 设置背景颜色： 网页背景可以是图片，也可以是颜色。此例是颜色。 如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背 景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件， 点击确定按钮。 设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一 行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以 通过属性面板中的左对齐按钮让其居左安放。 【插入图像】选择以下任意一种方法： （1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源 文件”对话框，选中该图像文件，单击确定。如下图： （2）使用插入栏：单击插入栏对象按钮选 按钮，弹出“选择图像源 文件”对话框，其余操作同上。 （3）使用面板组“资源”面板（如下图）：点按钮，展开根目录的图 片文件夹，选定该文件，用鼠标拖动至工作区合适位置。 注：为了管理方便，我们把图片放在“images”文件夹内。如果图片 少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字 命名 而且使用小写，不能用中文，否则要出现一些麻烦。 一个图片就插入完毕了。（插入*.swf 动画文件，选择“插入”菜单 媒体Flash）。 【输入欢迎文字】 在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字 “欢迎您”然后，利用属性面板对文字进行设置。 保存页面。 一个简单的页面就这样编辑完毕了。 【预览网页】在页面编辑器中按 F12 预览网页效果。 网站中的第一页，也就是首页，我们通常在存盘时取名为 index.htm。 【小结】我们制作了一个简单的网页。 内容有四： 图片插入和对齐设置； 文字的格式、颜色和加粗等设置； 背景颜色的设置； 预览网页，查看实际效果。 不仅要掌握还要举一反三反复练习。 表格设计 表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定 位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在 开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。（看下图） 一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。 单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做 边框。 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。 实际上是用两行两列的表格来制作。 1、 在插入栏中选择按钮或“插入”菜单选“表格”。系统弹出表格对话框如下图。这些参数我们都 已经认识了。行：2。列：2。其余的参数都保留其默认值。 2、 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。 当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（如下图） 3、 在表格的第一格按住左键不放，向下拖拽选中二格单元格。（如下图） 然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。将表格的单元格合并。如果要分割单 元格，则可以用合并单元格按钮右边的按钮。 合并结果如下图。 4、 用鼠标拖拽表格的边框调整到适当的大小。 5、 单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。 如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。 6、 在右边上下单元格内分别插入图片和文本。页面的基本样子有了。 7、 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中 将“边框”值设置适合的值，如果为 0，边框在编辑状态，为虚线显示，浏览时就看不见了。 一个符合要求的页面在表格的帮助下做好了。 通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格 操作的时候，相应的属性面板是不同的。 表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。 鼠标在需要设置的单元格点一下，其余操作同上。 下面我们就来看看这些属性面板的区别。 表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项 中填入需要的参数。如下图： 选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图： 对表格操作的几种常用方式： 合并：将选中的连续单元格合并成为一个单元格。 分割：将一个单元格分割成若干单元格。 水平对齐方式：分为（左）（中）（右）三种。 垂直对齐方式：分为（顶）（居中）（居底）（基线对齐） 表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项选择 “插入行或列”。系统会弹出对话框如下。 在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法： 选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。 选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。 选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表 格会在周围出现一个黑框表示整张表格选中了。请看如下示意： 选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按 shift 键 不放，选取最后一个单元格。选不连续的单元格。按住 Ctrl 键，点取所需要的单元格即可。 我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充 框架技术框架技术 在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接做在左边单击以后链接的目 标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。为 了更好的理解什么是框架。我们画一张示意图来进行讨论。 这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个 文件，图中我们用 index.htm 命名。框架中左边命名为 A，指向的是一个网页 A.htm。右边命名为 B，指 向的是一个网页 B.htm。 下面我们就来从头开始制作一个框架。（以左右框架结构为例） 1、点“文件”菜单新建，弹出“新建文档”对话框如下图： 或在插入栏布局选框架：左框架如下图： Dreamweaver MX 2004 生成一个空白的框架页面，如下图： 2、选择窗口菜单“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。 左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了 解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。 3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我 们按照惯例都命名为 index.htm。 保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图） 虚线笼罩在右边就是保存框架中右边网页。（如下图） 虚线笼罩在左边就是保存框架中左边的网页：（如下图） 三个页面保存完毕。 4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指 向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为 mainFrame。(如下图） 6、设置完毕，保存全部，按 F12 预览网页。链接指向的页面出现在右边框架中。 7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。 框架有很多优点，但是若理解不很透彻，容易搞混。如果您的网站页面不多， 可以创建一个不使用框架的 Web 页面来完成框架的功能。例如，如果您想让导航条 显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而 不使用框架。 Dreamweaver 教程：层及其应用教程：层及其应用 2006-07-01 08:30 作者：龙犊整理出处：天极网责作者：龙犊整理出处：天极网责 任编辑：龙犊任编辑：龙犊 层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像 或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。 首先，请看下图： 我们首先来做一个层 1、 在窗口菜单选“层”，或点插入菜单布局对象选“层”。 2、 在页面中显示一个层。 3、 通过周围的黑色调整柄拖动控制层的大小 4、 拖动层左上角的选择柄可以移动层的位置。 5、 单击层标记可以选中一个层。 6、 在层中可以插入其他任何元素包括图片文字链接表格等。 一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过 菜单窗口菜单选“层”打开。 这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行 为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显 示和隐藏。 层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。 比如层数为的层在层 数为的层的上面。改变层数就可以改变层的重叠顺序。 层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。 层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。 图中 Layer2 挂在 Layer1 的下面。Layer1 为父层，Layer2 为子层。在页面中拖动 Layer1，Layer2 也跟着动起来。因为他们已经链在一起了，并且 Layer2 隶属于 Layer1。父层移动会影响到子层。移动 layer2 层，Layer1 层不动。也就是子层不会影响到父层。 要建立这样的一种隶属关系方法很简单。在层面板中按 Ctrl 键将子层拖拽到父层即可。 层和表格之间转换层和表格之间转换 由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面， 而是喜欢通过层来进行设计。Dreamweaver MX 2004 可以使用层来创建自己的布局，然后将它们转换为 表格。 在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”“转换”“层到表格”。即可 显示“转换层为表格”对话框。 选择所需的选项。单击“确定”。 若要将表转换为层，请选择“修改”“转换”“表格到层”。即可显示“转换表格为层。对话框。 选择所需的选项。单击“确定”。 层及应用我们就简单介绍到这里。 Dreamweaver 教程：操作框架教程：操作框架 2006-07-01 07:00 作者：龙犊整理出处：天极网责作者：龙犊整理出处：天极网责 任编辑：龙犊任编辑：龙犊 本文介绍操作框架的一些方面：拆分框架，查看和设置框架集属性，设置链接的目标框架。 拆分框架拆分框架 1.在框架页面中，将插入点放在边框上，出现双向箭头。 2.拖动边框，产生一个新的框架文件。 3.在属性面板上，为新框架命名，并且点击“浏览文件”，选择一个文件作为框架的“源文件”。 4.选择“文件”“保存全部”。 注：要使用不在“设计”视图边缘的框架边框拆分一个框架，在按住 Alt 键的同时拖动框架边框。 查看和设置框架集属性查看和设置框架集属性 选择“窗口”“其他”“框架”,打开“框架”面板。 在“框架”面板中单击环绕框架集的边框，选中框架集。 在属性面板上，选中框架区，然后修改框架集属性。 使用类似的方法修改框架文件的属性。 设置链接的目标框架设置链接的目标框架 在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。 _blank 在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。 _parent 在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。 _self 在当前框架中打开链接，同时替换该框架中的内容。 _top 在当前浏览器窗口中打开链接的文档，同时替换所有框架。 如果链接需要在框架页之外打开，使用 target=“_top“ 或 target=“_blank“。 Dreamweaver 教程：添加背景音乐教程：添加背景音乐 2006-06-30 15:52 作者：龙犊整理出处：天极网责作者：龙犊整理出处：天极网责 任编辑：龙犊任编辑：龙犊 1. 打开一个网页文档，在文档左下角的“标签选择器”中选择“ body ”标签。 2. 打开行为面板，点击“”按钮添加行为。 3. 选择“播放声音”。 4. 选择声音文件。一个网页的背景音乐就添加好了。 如果要修改背景音乐属性 1. 在文档中选择背景音乐的图标。 2. 在属性检查器中，点击“参数”按钮。 3. 修改参数。 自己动手用自己动手用 Dreamweaver 制作活动菜制作活动菜 单条单条 2006-06-19 10:44 作者：龙犊整理出处：天极网责作者：龙犊整理出处：天极网责 任编辑：龙犊任编辑：龙犊 用 QQ 聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔 者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用 Dreamweaer 就可以实现这种 效果，下面我们通过一个活动菜单条的制作来看看吧。 第 1 步：制作菜单外貌 图 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 2、用同样的方法在时间线的第 30 帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹 出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交 互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图 3)。 图 3 3、现在还要设置一个行为让时间线停止后能继续播放。我的设想是这样的：在一般状态下菜单条弹 回但仅保留下方的“校园大观”字样，而菜单条再次弹出和弹回则由鼠标是否经过了菜单条上的“校园大观” 来控制。如此可以这样继续进行：选定菜单条中的“校园大观”(要确保该字样的超链接地址为“#”，即空链 接)字样，单击行为面板中的“+”按钮，在弹出的菜单中选择“Timeline/Play Timeline”，在接着弹出的对话 框中选择“Timeline1”后单击确定按钮，这时行为面板中将增加一个行为，在其“Events”下拉列表中选择 “onMouseOver”事件，表示当鼠标处于该字样上方时播放动画(如图 4)。 图 4 至此，一个活动菜单条制作完成了。可以按“F12”键预览其效果。 但这个菜单条还有一点美中不足的是，它的消失必须在鼠标经过了菜单条下方的特定区域(本例中为 “校园大观”字样)时才行，要想在菜单条弹出后，只要把鼠标从该菜单条上移开即可使菜单消失，可能就要 借助 Fireworks 或 Flash 了，如果你有什么好方法，不妨来信和我们一起交流一下。 用 Dreamweaer 制作活动菜单条欢迎访问天极软件 Dreamweaver 教程专区 Dreamweaver 超级技巧之文字特效超级技巧之文字特效 2007-02-28 08:19 作者：龙犊整理出处：天极作者：龙犊整理出处：天极 yesky 责任编辑：龙犊责任编辑：龙犊 应用目标：制作文字特效 应用软件：Dreamweaver MX 操作难度： 我们常用的网页制作工具 Dreamweaver MX 不仅可以制作网页，而且利用其中的 CSS 滤镜我们还可 以对文字或图片进行简单的特效处理。下面我们就通过几个例子来看一看在 Dreamweaver 中是如何制作 特效文字的。 光晕字光晕字 首先启动 Dreamweaver，在新文档中插入一个 11 的表格，边框设置为 0，然后在其中输入需要修 饰的文字。 单击右面的浮动面板中的“设计CSS 样式”打开这一浮动面板。 面板右下角的四个按钮分别是：添加、新建、编辑以及删除 CSS 样式。 注意：在 Dreamweaver 中，CSS 滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而 不能直接用于文字，所以我们要把所需要增加特效的文字事先放在表格中，然后对表格应用 CSS 样式， 从而使文字产生特殊效果。 图 1 新建 CSS 样式 单击新建 CSS 样式按钮，弹出如图 1 的对话框。 “类型”项选择“创建自定义样式”，“定义在”选择“仅对该文档”，点确定后弹出 CSS 样式定义对话框(如 图 2)，在类型面板中我们可以定义字体、字号、颜色等内容，本例中我们选择字体为隶书，大小 50 像素， 颜色为白色。 图 2 定义 CSS 样式 在在 Dreamweaver 中精细化你的表格外中精细化你的表格外 观观 2006-03-01 13:34 作者：龙犊整理出处：天极网责作者：龙犊整理出处：天极网责 任编辑：龙犊任编辑：龙犊 表格无疑是网页制作中最为重要的一个对象，因为通常的网页都是依靠表格来进行版面布局和各元素 组织的，它直接决定了网页是否美观，内容组织是否清晰。但很多朋友常常忽视对表格的研究，而把目光 投向其他的层、图片、特效等等，其实合理的利用表格可以方便的美化你得页面，我们也常常听到有朋友 抱怨表格作出的页面单调、粗糙、缺乏变化，也常常听到有人问如何作出 1 个像素的表格边框。其实在 Dreamweaver 中我们可以非常方便的精细化你的表格，从而使你的网页更加美观精细。我们将分下面三 个方面介绍如何在 Dreamweaver 中精细化你的表格。 一、利用属性面板。一、利用属性面板。 图一 首先我们需要了解两个表格属性面板上的参数:CellPad 和 CellSpace。如图一所示，CellPad 是指表 格中两个单元格之间的距离，CellSpace 是指每个单元格与它中间的内容之间的间隔距离。通过改变这两 个参数，并配合背景色彩的变化，可以方便的做出 1 像素的表格边框。 1、使用 Object 面板插入一个表格，定义表格宽、高及行数和列数。注意此时 Dreamweaver 中插入 表格的默认 CellPad 和 CellSpace、Border 都为 0。如图二： 图二 2、在属性面板中定义表格的 Border 为 0，CellPad 为 5(这项可使单元格中的内容与单元格边缘之间 保持 5 个像素);CellSpace 为 1(此项使得单元格之间保持 1 个项素的间距)。如图三; 图三 3、设置表格的背景色#999999，如图四; 图四 4、设置单元格的背景色#FFFFFF，如图五; 图五 5、在浏览器中预览一下效果，我们可以看到表格呈现一个像素的边框，如图六; 图六 二、利用表格嵌套。二、利用表格嵌套。 还是上面的主要原理，我们在利用表格之间的互相嵌套，就可以实现更多的效果。 1、首先我们绘制一个表格，参照前面的例子设定此表格的 CellPad 和 CellSpace 的数值和颜色。具 体效果如图七; 图七 2、接下来绘制另一个单行单列的表格，设置 CellPad=2，CellSpace=1 具体参数如图八; 图八 3、将第一步中作好的表格移动到第二步中的表格中，此时的表格外观如图九; 图九 我们看到此表格具有双线外框，单线内框。 4、再修改第二步中的表格为单行双列，在每个单元格中都放置一个第一步中的表格，最后的表格外 观如图十; 三、利用样式表美化表格。三、利用样式表美化表格。 1、直接重新定义，样式表的详细定义我不作介绍，定义表格边框主要是在样式编辑器的 Border 选项 中，如图十一; 图十一 Width 代表上下左右的边框宽度;Color 可以分别定义上下左右边框的颜色;Style 可以丁一边框的样式， 常用的为 solid(实线)，其它类型还有:dotted(点线)、dashed(虚线)、double(双线)、groove(槽线)、 ridge(脊线)、inset(内陷)、outset(外陷)。不过有几个类型必须是 IE5.5 以上版本才可以看到的。 2、重新定义了后的表格外观如图十二; 图十二 3、我们取消对的重新定义，单独定义一个.tdstyle 样式，具体参数如图十三; Dreamweaver 制作复杂交换图像制作复杂交换图像 2006-06-19 10:40 作者：龙犊整理出处：天极网责作者：龙犊整理出处：天极网责 任编辑：龙犊任编辑：龙犊 制作效果 我们要制作出一列 7 个按钮的图片，并且在这一列的按钮图片的前面加上一个指针，我 们要实现的效果是当我们在将鼠标移向某一个按钮图片的时候，这个按钮上面的文字变换颜色。并且指针 指向这张图片(效果如图 1 所示)。 图 1 制作原理 交换图像的制作原理是应用到 Dreamweaver 中的行为面板上的翻转图像(Swap image)这一个工具。 将它设置成为当产生鼠标悬停在某一个按钮图片的动作的时候，让按钮本身实现一个图像的交换(交换成 为黄色文字的图片)，与此同时设计指针图像的交换(交换成为指针指向当前按钮的指针图片)，以实现上述 效果的实现。 -：其实网页上的一些东西看起来似乎很神秘，可究其根源它也只不过是几张图片或几个图层的简 单变化而已。 制作材料 这里演示的是 7 张按钮图片的翻转，所以，我们需要 14 张按钮图片和 7 张指针图片共 21 张图片的 制作来实现所示效果。其中 7 张前台按钮图片分别命名为 B1-1B1-7，7 张后台按钮图片分别命名为 B2- 1B2-7，其中 7 张指针图片分别命名为 Z1Z7，它们的指针分别指向第一到第七个按钮。您可以用 Fireworks 等图片制作软件来制作按钮图片。 制作方法 1、建立网页文件。 2、插入一个 7 乘 2 的表格，并且把左面的一列表格合并，用来插入指针图片。而右面的七个表格用 来插入按钮图片。 3、在左面的表格中插入第一张指针图片 Z1，在右面的 7 行单元格中分别插入蓝色的前台按钮 B1- 1B1-7(效果如图 2 所示)。 图 2 4、点击“窗口(Windows)行为”，调出行为面板。 5、选中第一个要设置行为的图片，这里是写有“指导思想”的按钮图片，即图片 B1-1。 6、点击加号按钮，在弹出菜单下选择交换图像(Swap image)，弹出交换图像对话框。我们的主要部 分的设置将在这个对话框中进行。 7、点击对话框当中的浏览按钮，然后选择好这张按钮图片将要翻转成的目的图片，在本例中是带有 黄色文字的按钮图片，即图片 B2-1。然后点击确定。 8、重复第 6 步的操作，在图像的文本框中选中指针图片 Z1，然后，再次点击浏览按钮，把它翻转成 第 1 个指针文件，即 Z1。点击确定。完成上述操作后，行为面板上的显示结果如图 3 所示。 图 3 9、选中第 2 张按钮图片 B1-2，按照上面的方法将它本身翻转成按钮 B2-2，并且将指针图片翻转成 第 2 号指针图片 Z2。 10、依以上步骤，分别将下面 5 张图片分别设置成为交换图像的行为。 11、按 F12 预览，