Dreamweaver入门1.doc

Dreamweaver升级到8.0.2后，插入Flash时的代码会有所改变，这是Macromedia为解决IE中的Flash会出现控件激活框而作的更新。要为Flash添加透明等参数有两种方法。用Dreamweaver的属性面板为插入的Flash添加透明属性，此方法简单实用。使插入的Flash处于选择状态，点击属性面板中的“参数”，在随即弹出的参数表中添加一行，参数名为“wmode”，值为“transparent”。使用此方法时注意，若页面中有人工输入的Flash ID，此ID将被删除，请在添加完参数后重新输入ID。在HTML代码中为插入的Flash添加透明属性。同样是添加值为“transparent”的“wmode”参数Dreamweaver中怎样才能插入有色的直线首先,在document window(网页编辑窗口)中的适当位置，插入Horizontal Rule，按ctrl + F3 调出 Property inspector(属性面板)如图：在这个属性面板中，把shading(阴影)前的勾去掉。在W中输入像素值(pixels)或者百分比，可以设置这条线的长度。在H中，输入 1，都可以使这根线变得很细，细到一个像素。如果想要的是粗线，可以在H中，输入更大的值。这样细线就插好了，但你会发现，这根线是灰色的，在属性面板中，并不可以设置颜色。如果想要设置其他颜色，可以通过CSS来控制。在Dreamweaver中可以非常容易地设置css，你甚至完全不需要了解css 的语法。选择Text菜单下的CSS style | New Style ，在“New Style (新样式)”对话框中，在name(名称)栏中输入一个名称，如colorline，并在Define(定义)单选框中选择“This document only(只用于此页)”，然后点ok。随后会弹出的Style definition for .colorline对话框:在type项目中，选择想要的颜色，比如说红色，然后点ok，再点done，于是一个新的样式就建好了。选定网页编辑窗口中的细线，点 Text | CSS style | colorline(colorline就是刚才建立的那个新样式)，在网页编辑窗口中，线的颜色依然还是灰色，但按F12预览，在浏览器中就可以看到所插入细线的颜色已经变成了你想要的红色。还有一种办法可以插入有颜色的细线,甚至细到一个像素.首先在网页编辑窗口中插入一个一行一列的表格,然后在这个表格中插入一个1pixel 1Pixel的透明图像(在dreameaver4中控制页面布局所使用的spacer image正是这样的图像，所以如果你不会用软件制作这样的图像，可在dreameaver4中如此生成：Object面板首先点选Objiect面板的View 中的layout view(布局视图)，再点draw layout table，在网页编辑窗口中拖动生成一个布局表格(layout table)，点表格头的下拉菜单中的Add spacer image，创建并保存spacer image,这个spaceer image 就是一个1像素 1像素的透明图像)。然后在表格的属性中设置为:H(高度)为1 pixel(1像素)，W(宽度)为想要的宽度(可输入像素值或者百分比)，cellpad、 cellspace、border中都输入0，然后在Bg Color(背景颜色)中选择想要的颜色，带颜色的水平细线就这样被插入了。如果把H值增大，那么这条线会变粗。如果要插入带颜色的垂直细线，则把H设置为想要的高度值，W设置为0，其他设置同上，即可插入垂直细线。在网页编辑窗口中,这的颜色仍是灰色的,但按F12预览，在浏览器中就可以看到所插入的细线的颜色已经变成了你想要的颜色。Dreamweaver 入门教程之窗口布局Dreamweaver 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框（如下图）：您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如下图：【栏目说明】 “插入”栏（如下图）：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。“文档”窗口 显示您当前创建和编辑的文档。 “属性检查器”（如下图）： 用于查看和更改所选对象或文本的各种属性。“面板组”（如下图） 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。“文件”面板（如下图） 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。Dreamweaver MX 2004提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。Dreamweaver 入门教程之常用工具栏“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。“插入”栏按以下的类别进行组织：“常用”类别使您可以创建和插入最常用的对象，例如图像和表格。 “布局”类别使您可以插入表格、标签、层和框架。您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。 “表单”类别包含用于创建表单和插入表单元素的按钮。 “文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 “服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。 “应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。“Flash 元素”类别使您可以插入 Flash 元素。“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。文档工具栏 文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。以下对选项进行说明：显示代码视图仅在“文档”窗口中显示“代码”视图。显示代码视图和设计视图在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。显示设计视图仅在“文档”窗口中显示“设计”视图。标题允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。没有浏览器/检查错误使您可以检查跨浏览器兼容性。文件管理显示“文件管理”弹出菜单。在浏览器中预览/调试在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。刷新设计视图当您在“代码”视图中进行更改后刷新文档的“设计”视图。视图选项允许您为“代码”视图和“设计”视图设置选项。 状态栏状态栏提供与您正创建的文档有关的其它信息。标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。窗口大小 弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。Dreamweaver 入门教程之定义站点Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。 请执行以下操作：启动 Dreamweaver：选择“站点”“管理站点”（即，从“站点”菜单选择“管理站点”）。 出现“管理站点”对话框。在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。该名称可以是任何所需的名称。 单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。选择“否”选项，指示目前该站点是一个静态站点，没有动态页。 单击“下一步”。出现向导的下一个界面，询问您要如何使用您的文件。选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。单击“下一步”， 出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。单击“完成”完成设置。 随即出现“管理站点”对话框，显示您的新站点。单击“完成”关闭“管理站点”对话框。 现在，已经为您的站点定义了一个本地根文件夹。下一步，可以编辑自己的网页了。Dreamweaver 入门教程之创建页面本节介绍如何应用Dreamweaver创建自己的网页。从头创建自己的页面，可以使用 Dreamweaver起始页创建新页，或者可以选择“文件”“新建”，弹出如下对话框：从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。Dreamweaver MX 2004即展开工作区界面（一个空白页）：您可以在这个空白页添加表格和输入文本进行编辑。如果您要向页面添加图片或其它元素，应先保存这个空白页。选择“文件”“另存为”，在“另存为”对话框中，浏览到站点本地根文件夹下。填入文件名，保存退出。Dreamweaver 入门教程之页面制作现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图： 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西。网页顶端的标题“我的主页”是一段文字。网页中间是一幅图片。最下端的欢迎词是一段文字。网页背景是一深紫红颜色。知道了这个网页的结构以后我们就来可以制作了。首先启动Dreamweaver MX 2004，确保你已经用站点管理器建立好了一个网站（根目录）。为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。 【插入标题文字】进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。【设置网页的标题和背景颜色】 点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图）请在标题输入框填入标题“我的主页”。设置背景颜色：网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。【插入图像】选择以下任意一种方法：（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：（2）使用插入栏（如下图）：单击插入栏对象按钮选 按钮，弹出“选择图像源文件”对话框，其余操作同上。（3）使用面板组“资源”面板（如下图）：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。 一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单媒体Flash）。【输入欢迎文字】在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您”然后，利用属性面板对文字进行设置。保存页面。一个简单的页面就这样编辑完毕了。【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。 【小结】在今天的教程中我们制作了一个简单的网页。内容有四：图片插入和对齐设置；文字的格式、颜色和加粗等设置；背景颜色的设置；预览网页，查看实际效果。 不仅要掌握还要举一反三反复练习。Dreamweaver 入门教程之超级链接作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址等等。下边我们就来讨论怎样在网页中创建超级链接。 【页面之间的超级连接】 在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。 1、在网页中选中要做超级链接的文字或者图片。2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。（如下图）3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。 提示你也可以手工在链接输入框中输入地址。给图片加上超级链接的方法和文字完全相同。如果超级链接指向的不是一个网页文件。而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。例如，在链接框里写上那么，单击链接就可以跳转到老小孩网站。 【邮件地址的超级连接】 在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。 （如下图）创建完成后，保存页面，按F12预览网页效果。【制作图片上的超级链接】注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热区。为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。【制作方法】1、首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入你的提示文字说明。目标框：不作选择则默认在新浏览器窗口打开。3、保存页面， 按F12预览，用鼠标在设置的热区检验效果。提示：对于复杂的热区图形我们可以直接选择多边形工具来进行描画。替代框填写了说明文字以后，光标移上热区就会显示出相应的说明文字。 超级链接属性面板中的目标选项。“目标”我们称它为目标区。也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项。_blank ：单击链接以后，指向页面出现在新窗口中。_parent：用指向页面替换他外面所在的框架结构。_self：将连接页面显示在当前框架中。_top： 跳出所有框架，页面直接出现在浏览器中。【小结】本节教程主要探讨创建页面的链接。1、内部链接：链接到本站点的其他文档。2、外部链接：链接到本站点以外的其他文档。3、E-Mail链接：单击该链接，可以打开浏览者的邮件系统。4、图片热区链接：使你的链接更灵活更有个性。Dreamweaver 入门教程之表格设计表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。（看下图）一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。下面看看我们使用表格制作的页面的实例这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。1、在插入栏中选择按钮或“插入”菜单选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。2、在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（如下图）3、在表格的第一格按住左键不放，向下拖拽选中二格单元格。（如下图）然后在展开的属性面板中选择合并单元格按钮（如下图红框所示）。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。 合并结果如下图。4、用鼠标拖拽表格的边框调整到适当的大小。5、单击左边的单元格，然后输入“摄影作品赏析”文字，并调整大小，因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。6、在右边上下单元格内分别插入图片和文本。页面的基本样子有了。7、光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。一个符合要求的页面在表格的帮助下做好了。通过上面的操作我们对于表格有了一个初步的认识。还要提示一点，对整幅表格操作和对一个单元格操作的时候，相应的属性面板是不同的。 表格颜色设置，选择整幅表格后，利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下，其余操作同上。下面我们就来看看这些属性面板的区别。表格的属性面板，要出现这个面板必须先选中整幅表格，方法上面已经提到过了。您可以在众多选项中填入需要的参数。如下图：选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图：对表格操作的几种常用方式：合并：将选中的连续单元格合并成为一个单元格。分割：将一个单元格分割成若干单元格。水平对齐方式：分为（左）（中）（右）三种。垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项选择“插入行或列”。系统会弹出对话框如下。在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法：选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状。单击就可以选中一行。选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。选中整张表格，把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意：选中单元格。单元格可以同时选中多个。选择连续的单元格，光标先选中的一个单元格，按shift键不放，选取最后一个单元格。选不连续的单元格。按住Ctrl键，点取所需要的单元格即可。 我们对于表格的使用就讲到这里，表格是网页制作的基本技术，只有通过不断实践才能充分掌握。Dreamweaver 入门教程之框架技术在浏览网页的时候，我们常常会遇到这样的一种导航结构。就是超级连接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，必须使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。 这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用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 入门教程之创建导航条如果不使用框架，可以在每个页面设置导航条，导航条设一组链接按钮，供浏览者选择使用。按钮有多种形式，下边介绍由鼠标经过图像变换按钮的组成的导航条制作：（导航条在页面顶部） “鼠标经过图像”是当访问者用鼠标指针指向该图像时，该图像发生变化。 “鼠标经过图像”由两个图片组成：页面最初载入时显示的原始图像，访问者将鼠标指针移到原始图像上时显示另一幅图像。 提示：事先您要制作好按钮图像，确保每个按钮的图像都具有相同的宽度和高度（以像素为单位）。 请执行以下操作： 打开主页 (index.htm) 在“文档”窗口中，将插入点放置在要显示导航条的位置。一般在导航条上边要放置一个横幅图像（logo），导航条就安排在logo下边的位置。 选择“插入”“图像对象”“导航条”。弹出对话框如下： 在“插入导航条”对话框中，单击顶部加号“”按钮，按照上图所示对应的文本框，填入相应的文件。即完成了一个按钮的添加。 然后，单击页面顶部的加号“+”按钮，添加另一个按钮。重复以上步骤，直至您所需的按钮添加完毕。 勾选“预先载入图像”，在对话框底部的“插入”菜单中，选中“水平”。勾选“使用表格”。 单击“确定”关闭该对话框，成功创建了导航条。 保存页面。 按F12，预览一下你的导航条，如果满意了，可以将该页面多次“另存为”其它页面，分别指定不同的名称。比如：p1.htm、p2.htm.等。保存多少次视您的按钮数量而定。然后，分别打开其它页面进行编辑。 【注】：鼠标指针经过按钮，图像变化，只能在浏览器中看到效果Dreamweaver CS3中Spry详细区域功能Dreamweaver CS3中集成了Spry功能我们都知道，Spry具有对XML数据处理的功能我们也见识过，不过对于Spry的详细区域功能似乎很少见。 Spry详细区域有点类似于新闻系统中的新闻列表页和主详细页的功能。比如我们看新闻时，其中有一个页面只会显示所有新闻的标题，当对该标题感兴趣时可以单击该标题打开一个新的网页，就可以查看到该新闻的全部内容了。那么显示所有标题列表的页面我们称为“主页”，而显示具体新闻内容的页面称为“详细页”。 很显然，这个主详细页最起码得是两页。而我们使用的Spry详细区域可以在一张网页上显示，并且是无刷新的。 一，新建网页，绑定Spry XML 数据集 在网页中打开【插入】面板，单击【Spry】标签下的【Spry XML 数据集】 二，选择XML数据源 弹出【Spry XML 数据集】对话框，【XML源】可以是本地目录下的XML数据，也可以是跨域的远程XML数据。 单击【获取架构】按钮在【行元素】列表框中选择XML数据中有价值的重复元素，这里就是选择的“item”元素（标志右上角有+号表示循环的多个）。 P.S 如果制作纯粹的XML数据聚合的页面，还可以选择【禁用XML数据缓存】，并选择自动刷新数据的时间以自动获得远程数据同步。 三，插入Spry表，显示Spry XML数据在页面 单击【插入】面板【Spry】标签下的【Spry 表】按钮，弹出的对话框中将不需要显示的【列】进行删除。 很重要的一个操作就是一定要选择 单击行时将使用“更新”详细区域。 【确定】插入Spry表，提示需要插入Spry区域。因为所有的Spry XML 数据必须在 Spry区域中才能显示。四，插入Spry详细区域 首先，鼠标光标停留在已经插入在页面中的“Spry表”之后，继续单击【插入】面板【Spry】标签下的【Spry 区域】按钮。 弹出的对话框中【类型】一定要选择为“详细区域”才表示当前是Spry详细区域。 五，将“详细内容”插入Spry详细区域 鼠标光标停留在Spry详细区域内，打开【绑定】面板，选择“description”元素【插入】到Spry详细区域中。 保存网页会提示我们保存Spry效果文件，记得上传的时候要连同这些文件一起上传。 六，预览效果 跨域显示远程XML数据，同时单击每行标题都能在当前页无刷新打开内容查看，甚好。Dreamweaver快速图片链接处理方法对于网页制作者来说，最烦琐的事情可能就是给页面中的图片或文字加链接了。假如页面内容很多的话，那么所做的工作只能用恐怖来形容。记得几天前，笔者就曾在很短的时间内为一个客户做了300个图片和相应的链接。正好是Dreamweaver和Fireworks结合的一个很好的实例典范，下面我们就来学习一下自动制作许多链接并处理图片的方法。 首先启动Dreamweaver，建立好站点后，选择Command（命令）Create Web Photo Album（制作Web影集），打开Create Web Photo Album。 然后在Photo Album Title后的文本输入框中输入影集的名称。在这里输入的文字我们建议最好输入英文字母，不要输入汉字，因为输入汉字后，在Dreamweaver的编辑区中显示的并不十分正常。Subheading Info和Other Info后输入副标题或其他标题，在Photo Album Title后输入“Photo”。 接下来就在Source Images Folder后的“Browse”按钮中选择目标图片所在的目录，然后单击“保存”按钮，这里选择Boats目录。 点击Destination Folder后的“Browser”按钮，选择好处理后的文件所在的目录，一般我们要选择自己站点所在的目录，（在本例中我们的站点目录就是目标图片目录Boats），然后单击“打开”按钮。 在Thumbnail Size后的下拉列表中选择好Fireworks处理后的图片大小。 在Columns后选择每行图片排列的个数，在Thumbnail Format后的下拉列表中选择索引图片的压缩格式，在Photo Frmat后的下拉列表中可以选择原图片的压缩格式。 对于Create Navigation Page for Each Photo的单选框中的对号不做选择。它作用是是否给所有的图片创建一个索引页。如果勾选了该项，则在浏览该图片的时候，每个图片的页面都会有向前、向后、或回到主页面的链接；如果不勾选该项，则没有这些链接，这在选择的时候可以根据自己的需要来确定。 作好上面的工作之后，单击“OK”按钮，接下来Fireworks就启动起来了（机器里要装有FireWorks），在Fireworks的窗口里将出现窗口，这是Fireworks中处理图片的进度。 返回Dreamweaver的工作区，按下键盘的F12键，测试一下页面，看看效果，如图5，这么多链接仅仅两分钟就做好了，是不是很容易。 点击图片，会自动跳转到放大后的图片，也就是原图片的页面。 用完Dreamweaver的Create Web Photo Album功能后，感觉它实在是减轻我们劳动量的好帮手，但是在处理过程中有时候结果并不十分让人满意，因为它的计算功能有点问题，假如图片取的文件名为001.jpg，002.jpg.，在制作后，它们的排列顺序并不完全按照001.jpg、002.jpg那样的顺序排列好，可能会出现点问题，目前笔者还没找到合适的解决办法，如果读者有好的办法请给我来信交流 dreamweaver怎么删除所有的链接?利用则表达式删除所有的链接最近有网友问题如何在dreamweaver中批量删除超级链接。我在这里一并回答。今天我要讲解的是利用dreamweaver则表达式删除所有的链接。使用方法：1.请在dreamweaver里使用Ctrl+F呼出“查找和替换”，在其中录入：as*href=(|).*?注意复制的时候要没有空格，然后在“查找和替换”中的“选项”中选择“使用正则表达式”复选框，且不要选择“区分大小写”复选框，然后选择“替换”，或“全部替换”即可（如下图）。