用DreamWeaver打造留言板(全)

用DreamWeaver打造留言板第一课在这一课，我们首先讨论一下DreamweaverMX的工作环境以及如何在我们的本地pws服务器建立站点和初步管理站点的文件。一、DreamweaverMX的工作环境在Windows中首次启动DreamweaverMX时，会出现一个对话框，您可以从中选择一种工作区布局。如果您以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。如图1是选择工作区布局的对话框。图1选择工作区布局对话框●DreamweaverMX工作区是一个使用MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。DreamweaverMX建议大多数用户使用它。本教程也使用的是这种工作区模式。●HomeSite/代码编写者样式的DreamweaverMX工作区是同样的集成工作区，但是将面板组停靠在左侧，“文档”窗口在默认情况下显示“代码”视图。DreamweaverMX建议HomeSite或ColdFusionStudio用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。若要选择这种布局，请选择“DreamweaverMX工作区”选项，然后选择“HomeSite/代码编写者样式”选项。●Dreamweaver4工作区是一种与Dreamweaver4中所用布局相类似的工作区布局，其中每个文档都位于自己的独立浮动窗口中。面板组停靠在一起，但并不是停靠在一个更大的应用程序窗口中。仅建议喜欢使用更熟悉的工作区的Dreamweaver4用户使用这种布局。▲教程副页：DreamweaverMX工作环境简介页面二、建立第一个站点（无服务器端脚本的普通静态站点）下面我们建立一个没有服务器端脚本的普通静态站点，具体建立步骤如下：1、选择“站点/新建站点”。（即从“站点”菜单中选择“新建站点”命令。）即会出现“站点定义”对话框。2、如果对话框显示的是“高级”选项卡，则单击“基本”。出现“站点定义向导”的第一个屏幕，要求您为站点输入一个名称。3、在文本框中，输入一个名称以在Dreamweaver中标识该站点。该名称可以是任何所需的名称。例如，您可以将站点命名为“mysit”。如图2所示。图2建站向导——站点起名4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技术。选择“否”选项指示目前该站点是一个静态站点，没有动态页。如图3所示。图3建站向导——静态和动态网站选择5、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您要如何使用您的文件，如图4所示。●选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。●文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver将在其中存储站点文件的本地版本。若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框，在对话框中浏览到本地磁盘上可以存放所有站点的文件夹。然后单击“确定”。图4建站向导——定义站点文件的存储位置6、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。▲如果你有远程的FTP服务器空间，在这一步骤可以按照如图5所示进行连接到远程服务器的设置。图5建站向导——连接到远程服务器的设置7、单击“下一步”进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。单击“完成”完成设置。▲完成站点的建立之后，在文件面板中你会看到如图6所示的类似结果（本地视图）。图6文件面板中的本地视图三、用系统模板创建站点的第一个页面上面我们利用建站向导创建了一个站点，下面我们在这个站点中创建一个页面。先查看这个页面的效果：lesson1_mo.htm这个页面是用DreamweaverMX的系统模板创建的，以下是创建步骤：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。第二课经过上一课的学习，我们对DreamweaverMX的工作环境以及如何创建一个站点和编辑页面文档有了一个初步的认识。从这次课开始我们要系统的来学习如何创建一个留言板站点。通过这个留言板站点的建立，我们要讨论在DreamweaverMX中经常用到的一些工具和命令。一、创建留言板动态站点上一次课我们建立了一个静态的站点，这一课我们首先建立一个包含服务器端脚本（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就可以了，扩展名是系统自动加上的。第三课本次课开始我们要设计留言板的主页面了。复杂的页面一般都要先用表格布局，我们就从留言板主页面的表格布局开始学习。除了表格布局，利用层布局页面也是一种选择。但层的兼容性和可控制性就比表格差多了，本次课也要讨论DreamweaverMX中有关层布局，以及层和表格相互转换的知识。首先让我们先看看留言板站点主页面将来大概是个什么摸样。单击这里打开页面效果，具体设计步骤如下：1、创建主页面新文档（main.asp）这个主页面将来是个包含ASP脚本的动态页面。所以它的类型是动态脚本页面文档，文件扩展名是asp。你可以选择以下两种方法中的任意一种创建它：●执行“文件/新建”命令，在弹出的新建文档对话框中做如图1所示的操作。保存文档时，文件命名为main。图1新建ASPVBScript动态文档●打开站点面板，在留言板站点本地视图下面的窗口中右键单击站点名，在弹出的快捷菜单中执行“新建文件”命令，然后将文件名的主文件名改为main。2、创建表格在DreamweaverMX中创建表格有两种模式，一种是在标准视图下插入表格，一种是在布局视图下直接画表格。▲在标准视图下插入表格：“标准”视图是默认的DreamweaverMX设计视图。若要在“标准”视图中创建表格，可以使用“插入表格”命令。Dreamweaver将根据您在“插入表格”对话框中选择的选项创建一个表格，如图2所示。图2插入表格和定义表格在本例中我们插入两个表格：一个是1行1列，宽度是755像素。另一个是3行3列，宽度是600像素。▲在布局视图下绘制表格：在“布局”视图中，可以绘制布局单元格或布局表格以定义文档的设计区域。这给了我们更大的灵活性，想一想在页面上画表格的滋味吧！我们需要在插入栏中切换到布局标签下，并单击布局视图，如图3所示。单击绘制布局表格或单元格按钮以后就可以用鼠标直接绘制了。图3布局视图3、编辑表格通过合并和拆分单元格以及插入行和列，可以很