2.5 Dreamweaver开发工具

专题讲座：光盘\MR\Video\2\初学者最好的PHP编辑工具Dreamweaver.exe

视频速递：详细讲解Dreamweaver的基本工具

Dreamweaver是Macromedia公司开发的Web站点和应用程序的专业开发工具。它将可视布局工具、应用程序开发功能和代码编辑组合在一起，是一款非常适合初学者使用的PHP程序开发工具。

2.5.1 情景应用一——Dreamweaver中编码格式的选择

应用Dreamweaver开发网站，首先必须考虑网页的编码格式的选择。因为如果网页的编码格式有局限性，那么将导致网站在一些特定的情况下运行时会出现乱码，不利于网站程序的后期更新和维护。例如，如果网站在编写时使用gb2312编码，而当程序在中文繁体的操作系统中运行时就会出现乱码。查看源文件的运行结果，如图2.20所示。

对于网站的开发，编码格式的选择很重要。如果使用Dreamweaver开发网站，那么可以在Dreamweaver编辑菜单的“首选参数”/“新建文档”/“默认编码”中设置新建文件的编码格式。这样就不必在为创建的每个文件的编码而担心了，因为它们的编码格式是统一的。

统一Dreamweaver创建文件编码格式的方法如下。

（1）打开Dreamweaver开发工具，选择“编辑”菜单命令，单击“首选参数”选项，将弹出如图2.21所示的页面。

（2）在图2.21所示的页面中，指定默认编码，最后单击“确定”按钮。

在Dreamweaver的“首选参数”设置中，不但可以设置默认编码格式，而且可以进行其他的一些设置，例如，CSS样式、站点和字体等。

对于文件编码格式的选择，强烈建议读者使用UTF-8作为网页文件的编码，因为这样可以与国际接轨，如果单纯地使用GB2312编码，那么一旦程序要更改编码格式，将会导致网页出现乱码。如果使用UTF-8编码格式，就不会出现任何问题，因为这个编码格式是通用的。

2.5.2 情景应用二——Dreamweaver创建表格

在本小节中我们将向大家介绍Dreamweaver开发工具的基本应用，包括表格的创建、向表格中添加图像、为表格添加背景颜色和设置表格的边框样式。

在Dreamweaver中创建表格有两种方法：第一种，单击菜单中的“插入”命令，在弹出的列表中选择“表格”命令，在弹出的表格对话框中完成表格的创建操作。第二种，选择“常用”工具栏，直接单击“ ”表格按钮，在弹出的表格对话框中完成表格的创建操作。

【例2.2】 单击“ ”表格按钮，在弹出的表格对话框中完成表格的创建，具体步骤如下。

实例位置：光盘\MR\ Instance\2\2.2

（1）打开Dreamweaver开发工具，单击“文件”按钮，选择“新建”命令，在弹出的“新建文档”对话框中创建一个“动态页”/“PHP”文件，最后单击“创建”按钮，完成动态PHP文件的创建，如图2.22所示。

（2）如图2.23所示，在创建的Untitled-1文件中，首先切换到设计模式下，然后，在工具栏中选择“常用”，单击“ ”按钮，在弹出的表格对话框中完成表格的创建。

（3）表格创建对话框如图2.24所示，其中可以设置表格的行数、列数、表格宽度、边框粗细、单元格边距和单元格间距等。设置完成后单击“确定”按钮，完成表格的创建。

（4）表格创建完成后，将在设计界面中输出如图2.25所示的内容。

（5）接着向表格中插入图片，先将要使用的图片复制到实例根目录的images文件夹下。

（6）在创建的表格中，将光标定位到指定要插入图片的单元格中，单击Dreamweaver开发工具中的“插入”按钮，在弹出的列表框中选择“图像”命令，在弹出的“选择图像源文件”对话框中，选择要插入的图片，如图2.29所示。

（7）确定要插入的图片之后，在图2.29中单击“确定”按钮，即完成图片的插入操作。

在Dreamweaver的设计模式下，当选中插入的图片时，在开发工具的下方将出现图像的属性对话框，如图2.31所示。通过这个属性对话框可以设置图像的宽度、高度、链接及是否添加地图等。

（8）表格和图片插入完成后，单击“文件”按钮，选择“保存”命令，将其存储在Apache服务器指定的文件夹下，命名为index.php，运行结果如图2.32所示。

2.5.3 情景应用三——Dreamweaver创建表单

本节讲解在Dreamweaver中创建表单。表单是网站与客户沟通的一座桥梁，通过它可以直接将客户的信息反馈给网站的管理者，达到企业与网站浏览者更好交互的效果。

在Dreamweaver中创建表单，首先要在工具栏中选择“表单”，然后就可以通过不同的按钮创建不同的表单元素，其中每个按钮对应的功能如表2.3所示。

【例2.3】 在Dreamweaver中创建表单，操作步骤如下。

实例位置：光盘\MR\ Instance\2\2.3

（1）首先新建一个动态PHP文件，切换到设计模式下。

（2）然后，在工具栏中选择“表单”，如图2.33所示。

（3）接着，添加一个form表单，如图2.34所示。

（4）最后，根据实际的需要，添加不同的表单元素，并设置相应的名称和值，如图2.35所示。

最终创建的表单元素设计效果如图2.36所示。

本实例的运行结果，如图2.37所示。

在通过表单中的元素进行传递值时，一定要正确地书写表单元素的名称，其中不应该有空格存在；在获取表单元素的值时，表单元素的名称一定要与form中设置的名称相同；同时还要注意大小写的统一，否则将不能获取到表单元素的值。

2.5.4 情景应用四——Dreamweaver创建站点

本小节中讲解如何在Dreamweaver中创建站点。有了站点就不必在IE浏览器中输入地址，只须单击键盘中的F12键，即可完成对所创建程序的浏览操作。

在Dreamweaver中创建站点和配置测试服务器时，一定要注意将本地的HTTP地址与测试服务器中的URL前缀统一，即都指定到站点的根目录下。例如，指定HTTP地址是http://localhost//MR/Instance/，那么测试服务器的URL前缀也必须是http://localhost//MR/Instance/或者http://127.0.0.1//MR/Instance/。

在Dreamweaver中创建站点的操作步骤如下。

（1）打开Dreamweaver开发工具，选择菜单栏中的“站点”/“新建站点”命令，在如图2.38所示的对话框中，添加站点名称。

（2）单击图2.38所示页面中的“高级”按钮，将弹出如图2.39所示的对话框。设置本地根文件夹，链接相对的“站点根目录”，设置HTTP地址。

（3）在图2.39中，单击左侧的“测试服务器”，弹出如图2.40所示的测试服务器对话框，选择服务器模型：PHP MySQL，访问：本地/网络，测试服务器文件夹：E:\AppServ\www\MR\Instance\，URL前缀：http://localhost/mr/Instance/，最后单击“确定”按钮。

（4）mr站点和测试服务器设置完毕，然后就可以在Dreamweaver下直接使用快捷键F12来浏览程序。

在Dreamweaver中创建站点和配置测试服务器时，如果本地的HTTP地址与测试服务器中的URL前缀不统一，那么就不能够通过F12键直接浏览程序。

2.5.5 情景应用五——Dreamweaver创建第一个PHP程序

前面章节中讲解了Dreamweaver自身功能的运用，在本实例中应用Dreamweaver开发一个最简单的PHP程序，输出一段欢迎信息。其目的：一是了解PHP的语法规则，二是熟悉Dreamweaver开发工具的使用。

【例2.4】 通过Dreamweaver开发工具编写第一个PHP程序，操作步骤如下。

实例位置：光盘\MR\ Instance\2\2.4

（1）打开Dreamweaver开发工具，新建一个PHP项目，如图2.41所示。

（2）单击图2.41中的PHP项目图标，打开一个PHP项目文件夹，如图2.42所示。

（3）在图2.42所示的文件中，首先定义文件的标题，<title>为第一个PHP程序</title>；然后，编写PHP代码。代码如下。

PHP代码分析如下。

“<?php”和“?>”是PHP的标记对。在这对标记中的所有代码都被当做PHP代码来处理。

echo是PHP中的输出语句，与ASP中的response.write、JSP中的out.print含义相同，输出字符串或者变量值，每行代码都以分号“；”结尾。

（4）保存文件，单击图2.42中的“文件”按钮，选择另存为，将编写的文件保存在Apache服务器的指定目录下，并命名为index.php，最后单击“保存”按钮，如图2.43所示。

运行结果，如图2.44所示。