用DreamWeaver打造留言板(全)

用DreamWeaver打造留言板第一课在这一课，我们首先讨论一下Dreamweaver MX的工作环境以及如何在我们的本地pws服务器建立站点和初步管理站点的文件。

一、Dreamweaver MX的工作环境在 Windows 中首次启动 Dreamweaver MX时，会出现一个对话框，您可以从中选择一种工作区布局。

如果您以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。

如图1是选择工作区布局的对话框。

图1 选择工作区布局对话框●Dreamweaver MX工作区是一个使用 MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。

Dreamweaver MX建议大多数用户使用它。

本教程也使用的是这种工作区模式。

●HomeSite/代码编写者样式的Dreamweaver MX工作区是同样的集成工作区，但是将面板组停靠在左侧，“文档”窗口在默认情况下显示“代码”视图。

Dreamweaver MX建议HomeSite或ColdFusion Studio用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。

若要选择这种布局，请选择“Dreamweaver MX 工作区”选项，然后选择“HomeSite/代码编写者样式”选项。

●Dreamweaver 4工作区是一种与 Dreamweaver 4中所用布局相类似的工作区布局，其中每个文档都位于自己的独立浮动窗口中。

面板组停靠在一起，但并不是停靠在一个更大的应用程序窗口中。

仅建议喜欢使用更熟悉的工作区的 Dreamweaver 4 用户使用这种布局。

▲教程副页：Dreamweaver MX工作环境简介页面二、建立第一个站点（无服务器端脚本的普通静态站点）下面我们建立一个没有服务器端脚本的普通静态站点，具体建立步骤如下：1、选择“站点/新建站点”。

（即从“站点”菜单中选择“新建站点”命令。

）即会出现“站点定义”对话框。

2、如果对话框显示的是“高级”选项卡，则单击“基本”。

出现“站点定义向导”的第一个屏幕，要求您为站点输入一个名称。

3、在文本框中，输入一个名称以在Dreamweaver中标识该站点。

该名称可以是任何所需的名称。

例如，您可以将站点命名为“mysit”。

如图2所示。

图2 建站向导——站点起名4、单击“下一步”进入下一个步骤。

出现向导的下一个屏幕，询问您是否要使用服务器技术。

选择“否”选项指示目前该站点是一个静态站点，没有动态页。

如图3所示。

图3 建站向导——静态和动态网站选择5、单击“下一步”进入下一个步骤。

出现向导的下一个屏幕，询问您要如何使用您的文件，如图4所示。

●选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。

●文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver 将在其中存储站点文件的本地版本。

若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请单击该文本框旁边的文件夹图标。

随即会出现“选择站点的本地根文件夹”对话框，在对话框中浏览到本地磁盘上可以存放所有站点的文件夹。

然后单击“确定”。

图4 建站向导——定义站点文件的存储位置6、单击“下一步”进入下一个步骤。

出现向导的下一个屏幕，询问您如何连接到远程服务器。

从弹出式菜单中选择“无”。

▲如果你有远程的FTP服务器空间，在这一步骤可以按照如图5所示进行连接到远程服务器的设置。

图5 建站向导——连接到远程服务器的设置7、单击“下一步”进入下一个步骤。

该向导的下一个屏幕将出现，其中显示您的设置概要。

单击“完成”完成设置。

▲完成站点的建立之后，在文件面板中你会看到如图6所示的类似结果（本地视图）。

图6 文件面板中的本地视图三、用系统模板创建站点的第一个页面上面我们利用建站向导创建了一个站点，下面我们在这个站点中创建一个页面。

先查看这个页面的效果：lesson1_mo.htm这个页面是用Dreamweaver MX的系统模板创建的，以下是创建步骤：1、执行“文件/新建”命令，弹出“新建文档对话框”。

在此对话框中选择“常规/页面设计/文本：文章C”，然后单击“创建”按钮，如图7是示意图。

图7 利用模板创建新文档示意图2、现在我们在页面编辑区得到一个新页面，并且页面中已包含了一些模板内容。

这个页面很简单，包括一些文本和一个图像。

我们首先将那些英文文本换成一些中文文本（你可以将教程中示例页面中的文本复制过来）。

3、对图像进行处理。

我们在页面中看到的是一个图像占位符，下面我们要用一个具体的图像替换它。

单击这个图像占位符，并展开相应的占位符属性面板，如图8所示。

●如果图像已经创建好，就在占位符属性面板中的源文件处进行设置。

●如果图像还没有创建，就单击占位符属性面板中的创建按钮，在FireworksMX中创建。

图8 占位符属性面板4、在属性面板中设置文本的属性，由于我们的页面上的文本实际上都是在表格中，所以实际上是设置表格的单元格属性，如图9所示。

图9 单元格属性面板5、关于图像和文本的距离的设置。

我们以后在编辑网页时会经常遇到图像和文本之间的距离问题，如图10所示。

我们可以先选中图像，然后在图像属性面板中设置图像和文本之间的距离，如图11所示。

图10 图像和文本间的距离示意图图11 设置图像和文本距离6、保存文件。

执行“文件/保存”命令，将文档保存到我们站点文件夹中。

如果我们文件的存储路径是:c:\Inetpub\wwwroot\mysite1\lesson1_mo.htm，则可以在浏览器中用以下地址访问它：http://localhost/mysite1/lesson1_mo.htm或者http://127.0.0.1/mysite1/lesson1_mo.htm。

第二课经过上一课的学习，我们对Dreamweaver MX的工作环境以及如何创建一个站点和编辑页面文档有了一个初步的认识。

从这次课开始我们要系统的来学习如何创建一个留言板站点。

通过这个留言板站点的建立，我们要讨论在Dreamweaver MX中经常用到的一些工具和命令。

一、创建留言板动态站点上一次课我们建立了一个静态的站点，这一课我们首先建立一个包含服务器端脚本（ASP）的动态站点。

以下是创建步骤：1、执行“站点/新建站点”命令，得到建站向导，在第1步中，给你的站点起个名字。

比如是：liuyanban。

2、单击下一步，在下一个步骤画面中进行服务器脚本技术的有关设置，如图1所示。

图1 建站向导——服务器脚本技术设置3、单击下一步，进入到建站向导的下一个画面，这个步骤是关于站点的URL的内容，如图2所示。

图2 建站向导——站点URL4、以下步骤按照建站向导的默认设置。

最后单击完成按钮即可。

二、在站点中创建资源文件夹▲在创建了本地站点之后，如果您已为该站点创建了资源（图像、Flash动画或其他内容片断），则将这些资源放置在本地站点根文件夹内的一个文件夹中。

那么当您要向页中添加内容时，这些资源将随时可用。

现在我们就在留言板站点根文件夹中创建新文件夹，并把相应的资源文件复制到资源文件夹中。

1、假设我们的留言板站点的根文件夹路径为：c:\Inetpub\wwwroot\liuyanban\。

2、打开站点面板，展示留言板站点的本地视图，右键单击留言板站点，在弹出的快捷菜单中执行“新建文件夹”命令。

如图3所示。

按照这种方法，先创建两个文件夹：images（用来放图像文件）和swf（用来放Flash 动画）。

图3 在站点视图创建新文件夹▲请下载以下资源，并把它们放在相应的文件夹中。

在站点面板中可以象资源管理器一样管理文件和文件夹。

●留言板系统用户头像图像(10个图像文件)。

放在images文件夹中。

下载（rar文件）●留言板系统导航条图像。

放在images文件夹中。

下载●Flash动画文件(1个)。

放在swf文件夹中。

下载按照上面的步骤把站点中的资源文件部署好以后，在资源面板中就可以看到我们部署好的相应的资源，如图4所示。

我们可以将资源面板中的资源直接拖放到站点文档中使用。

图4 资源面板三、创建留言板站点的第一个页面（文件名：shuoming.htm）下面我们创建留言板站点的第一个页面，这个页面是个普通的不包含服务器脚本的静态页面。

它用来对我们的留言板系统进行说明。

1、执行“文件/新建”命令，在弹出的新建文档对话框中选择“基本页/html”，然后单击“创建”按钮，如图5所示。

图5 新建基本html文档2、编辑页面文档（页面效果参考）●输入页面标题“留言板系统说明”。

如图6所示。

图6 定义页面标题●输入页面文字内容并定义它们的字体、颜色等属性。

具体的属性设置可以在属性面板中实现。

●关于连续空格的输入：执行“编辑/参数选择”命令，在弹出的参数选择对话框中选择“允许多个连续空格”复选框，如图7所示。

图7 参数选择——允许多个连续空格●对于中文用户来说，我们习惯于中文的段落格式，比如段前空两格。

可以这样实现：将中文输入法切换到“全角”方式，然后连续按两次空格，完了以后再切换到“半角”方式进行文字内容的输入。

●关于段落：每按一次Enter（回车）键就代表一个新段落的开始。

如果你想在段落中换行，请按“Shift+Enter”组合键。

●关于图像的插入，我们可以用以下两种方法中的任意一种：①将光标定位到要插入图像的位置。

用鼠标单击“插入栏”中“常用”标签下的图像按钮，如图8所示。

然后找到要插入的图像文件。

图8 插入图像和水平线②打开资源面板，单击图像资源类别，选择要插入的具体图像资源，用鼠标拖放到插入处。

●关于水平线的插入，如图8所示。

我们还可以在属性面板设置它的简单属性，但不能直接在属性面板设置它的颜色。

插入的水平线默认是灰色的，要更改它的颜色，我们需要这样操作：选中水平线，切换到代码视图。

将光标定位在br标签后，单击空格键，这时会弹出一个下拉菜单，如同9所示，我们再在其中双击color属性标签，这样就会弹出调色板，在其中选择你需要的颜色就可以了。

图9 在代码视图设置水平线颜色属性3、保存页面文档。

执行“文件/保存”命令，把文档保存到站点的根目录下。

文件名：shuoming.htm。

只须输入主文件名 shuoming 就可以了，扩展名是系统自动加上的。

第三课本次课开始我们要设计留言板的主页面了。

复杂的页面一般都要先用表格布局，我们就从留言板主页面的表格布局开始学习。

除了表格布局，利用层布局页面也是一种选择。

但层的兼容性和可控制性就比表格差多了，本次课也要讨论Dreamweaver MX中有关层布局，以及层和表格相互转换的知识。

首先让我们先看看留言板站点主页面将来大概是个什么摸样。