文章教程

3.7.1使用Dreamweaver设计网页

9/17/2020 9:38:49 PM 人评论 次浏览

3.7 开发与调试PHP程序

程序员在使用PHP开发Web应用程序时,通常需要先设计网页界面,然后在网页里添加PHP代码。本节介绍使用Dreamweaver 设计网页和使用EclipsePHP Studio 3开发PHP程序的方法。

3.7.1 使用Dreamweaver设计网页

设计网页界面包含很多工作,如设计各种图片、Flash、网页的框架等。设计各种图片、Flash属于美工的工作,不在本书的讨论范围之内;而设计网页则是开发应用程序所必备的技能。本小节介绍使用Dreamweaver 8设计网页的基本方法。

1.设置网页背景和颜色

设计网页时,经常需要设置网页的属性。常见的网页属性是网页的颜色和背景图片。

打开Dreamweaver,首先弹出向导对话框,如图3-23所示。

单击“创建新项目”栏目中的HTML项,可以创建一个HTML文件。Dreamweaver提供了代码、拆分和设计3种设计模式,如图3-24所示。

figure_0065_0083

图3-23 Dreamweaver向导对话框

figure_0065_0084

图3-24 使用Dreamweaver设计网页

切换到设计模式,右键单击网页,在弹出菜单中选择“页面属性”,打开“页面属性”对话框,如图3-25所示。在“分类”列表框中选择“外观”,可以在右侧设置页面中使用的字体、页面的背景颜色和背景图像等。

单击“浏览”按钮,打开“选择图像源文件”对话框,选择指定的背景图像。在选择背景图片时,请注意选择网站目录下的图片文件,通常需要创建一个目录专门保存网站中所有网页使用的图片,如images。

figure_0065_0085

图3-25 设置网页的颜色和背景图片等属性

2.设置字体属性

在Dreamweaver中,可以直接在属性窗口中设置字体属性,如图3-26所示。

选中一段文本,在菜单中选择“文本”→“样式”命令,可以选择文本的样式,包括加粗、倾斜、下画线等,如图3-27所示。

3.超级链接

超级链接(也称超链接)是网页中一种特殊的文本,通过单击超级链接可以方便地转向本地或远程的其他文档。超级链接可分为两种,即本地链接和远程链接。本地链接用于指向本地计算机的文档,而远程链接则用于指向远程计算机的文档。

figure_0066_0086

图3-26 设置字体属性

figure_0066_0087

图3-27 选择字体样式

在菜单中选择“插入”→“超级链接”命令,打开“超级链接”对话框,如图3-28所示。在“文本”文本框中输入超级链接的显示文本,然后在下面选择链接的文档。可以选择本地的文档,也可以在地址栏中直接输入一个网址。

figure_0066_0088

图3-28 “超级链接”对话框

在菜单中选择“插入”/“电子邮件链接”命令,打开插入电子邮件链接的对话框,如图3-29所示。

在超级链接中还可以定义在本网页内跳转,从而实现类似目录的功能。比较常见的应用包括在网页底部定义一个超级链接,用于返回网页顶端。首先需要在跳转到的位置定义一个标识,在Dreamweaver中这种定义位置的标识被称为命名锚记(在FrontPage中被称为书签)。

在Dreamweaver的设计视图中,在菜单中选择“插入记录”→“命名锚记”命令,打开“命名锚记”对话框,如图3-30所示。

figure_0066_0089

图3-29 插入电子邮件链接

figure_0066_0090

图3-30 插入命名锚记

4.图像

在页面中添加图像和动画可以使网页更加丰富多彩。在Dreamweaver的系统菜单中选择“插入记录”→“图像”命令,可以打开选择图像文件对话框,在网页中插入图像。

5.表格

在 Dreamweaver 的设计视图中,将光标移至要添加表格的位置,在菜单中选择“插入”→“表格”命令,打开“表格”对话框,如图3-31所示。

figure_0067_0091

图3-31 “表格”对话框

在“表格”对话框中,用户可以设置表格的行数、列数、宽度、边框粗细、单元格边距、单元格间距等属性。通常,在插入表格时需要指定行数和列数,其他属性可以在表格产生后再设置。

选中表格的一行,单击鼠标右键,在弹出的快捷菜单中选择“表格”→“插入行”命令,可以在表格中插入一个空行;选择“表格”→“删除行”命令,可以删除当前行。选中表格的一列,单击鼠标右键,在弹出的快捷菜单中选择“表格”→“插入列”命令,可以在表格中插入一个空列;选择“表格”→“删除列”命令,可以删除当前列。

右键单击单元格,在弹出菜单中选择“表格”→“拆分单元格”命令,打开“拆分单元格”对话框。用户可以将当前单元格按行或按列拆分。

选中多个单元格,单击鼠标右键,在弹出的快捷菜单中选择“合并单元格”命令,可以将选择的单元格合并。

6.使用框架

框架(Frame)可以将浏览器的窗口分成多个区域,每个区域可以单独显示一个HTML文件,各个区域也可以相关联地显示某一个内容。

在编辑网页时,在工具栏中选择“布局”,然后单击“框架”图标,可以在下拉菜单中选择网页的框架格式,如图3-32所示。

figure_0067_0092

图3-32 选择网页的框架

例如,选择“左侧框架”,在“设计”视图中查看效果,如图3-33所示。

可以看到,网页被分为左右两个部分。

figure_0068_0093

图3-33 在“设计”视图中查看框架的效果

3.7.2 创建PHP工程

PHP工程是管理PHP应用程序的容器,它用于组织应用程序中的PHP文件和其他资源文件。因此,开发 PHP 应用程序的第 1 件事就是创建PHP工程。

EclipsePHP在工作空间(workspace)中存储PHP工程,工作空间实际上就是操作系统中的一个目录。默认情况下,启动 EclipsePHP 时会弹出如图 3-34 所示的对话框,要求用户选择工作空间目录。本书假定设置工作空间目录为C:\workspace,单击“确定”按钮保存。

figure_0068_0094

图3-34 选择workspace目录

单击工具栏最左侧的“新建”按钮figure_0068_0095,打开“新建”对话框,如图3-35所示。在类型列表中展开PHP目录,选中PHP Project,然后单击“下一步”按钮,打开New PHP Project对话框,如图3-36所示。

figure_0068_0096

图3-35 “新建”对话框

figure_0069_0097

图3-36 New PHP Project的对话框

输入工程名(这里假定为test),单击“完成”按钮完成创建。创建完成后,在左侧的Project Explore窗口中,可以看到新建的工程,如图3-37所示。

figure_0069_0098

图3-37 在Project Explore窗口中查看新建的工程

新建工程后,会在workspace目录下创建一个与工程同名的目录,用于存储工程中的文件。

3.7.3 创建和编辑PHP文件

在左侧的Project Explore窗口中选中要创建PHP文件的工程,然后单击工具栏最左侧的“新建”按钮figure_0070_0099,打开“新建”对话框。在类型列表中展开PHP目录,选中PHP File,然后单击Next按钮,打开New PHP File对话框,如图3-38所示。

figure_0070_0100

图3-38 New PHP File对话框

输入文件名(这里假定为 hello.php),单击“完成”按钮完成创建。创建完成后,在左侧的Project Explore窗口中展开工程test,可以看到新建的PHP文件hello.php。同时,在中间的编辑窗口中,会打开hello.php文件供用户编辑,如图3-39所示。

figure_0070_0101

图3-39 新建的PHP文件

可以看到,在新建的PHP文件中包括PHP程序的开始标记,内容如下:

<?php

figure_0070_0102

在EclipsePHP中,使用不同颜色的字体显示程序的不同部分。例如,默认情况下,开始标记(<?php)和结束标记(?>)使用粉色字体显示;注释部分使用淡绿色字体显示;如果输入PHP函数echo,则会以紫色字体显示。这样很便于读者阅读程序。

EclipsePHP Studio还可以帮助程序员完成输入,例如输入“echo(”,Eclipse会自动在后面添加一个“)”,输入一个半角的双引号,Eclipse也会自动在后面添加一个半角的双引号,方便程序员输入字符串。

EclipsePHP Studio可以自动检查PHP 语法,这对程序员来说是很方便的,他们可以很快速地发现程序中的语法错误。为了演示 Eclipse 自动检查 PHP 语法的效果,在编辑窗口中输入如下代码:

<?php

echo(,"欢迎使用PHP!");

?>

在 echo()函数中多了一个逗号。按 Ctrl+S 组合键保存程序。在该行代码的前面会出现一个红叉(figure_0071_0103)图标,在代码中的逗号下面出现红色波浪线。将鼠标停留在红色波浪线上,会出现错误提示,如图3-40所示。删除逗号后,再按Ctrl+S组合键保存程序,红叉(figure_0071_0104)图标和逗号下面出现的红色波浪线都会消失。

figure_0071_0105

图3-40 自动检查PHP语法

EclipsePHP Studio还可以在输入程序时为程序员提供语法提示。例如,输入echo,EclipsePHP Studio会自动弹出浮动窗口,提示echo()函数的语法,如图3-41所示。

figure_0071_0106

图3-41 语法提示

3.7.4 运行PHP程序

为了验证PHP程序的效果,需要运行PHP程序。可以将PHP文件复制到ApacheHTTP Server的网站根目录下,在浏览器中浏览此文件。但总是复制文件比较麻烦,本小节介绍在Eclipse中运行PHP程序的方法。

1.配置EclipsePHP

在运行PHP程序之前,首先要对EclipsePHP进行配置。选择“窗口”→“首选项”菜单项,打开“首选项”窗口。在左侧列表中选择PHP→PHP executables,如图3-42所示。

单击右侧的Add按钮,打开Add new PHP Executables对话框,如图3-43所示。

在Name文本框中输入PHP5,选择PHP可执行文件(例如,C:\PHP\php.exe),选择PHP配置文件(例如,C:\PHP\php.ini),设置SAPI Type为CLI,设置PHP debugger为XDubug,然后单击“完成”按钮保存。

figure_0072_0107

图3-42 配置PHP可执行文件

figure_0072_0108

图3-43 Add new PHP Executables对话框

2.以脚本方式运行PHP程序

以脚本方式运行比较简单,不启动浏览器,只在EclipsePHP解析PHP文件,并在控制台窗口中显示运行结果。选择“运行”→“运行配置”菜单项,打开“运行配置”对话框,如图3-44所示。在左侧列表中右击PHP Script,在快捷菜单中选择“新建”,新建一个运行配置。首先设置PHP调试器(PHP Debugger)、PHP运行文件(PHP Executables)和要运行的PHP文件;然后输入配置名,如myRunConf,在运行和调试时需要指定配置名。

figure_0072_0109

图3-44 “运行配置”对话框

配置完成后单击“应用”按钮保存配置。单击“运行”按钮,可以直接运行程序,也可以单击Close按钮关闭对话框,以后再运行。

单击工具栏上“运行”按钮figure_0072_0110后面的下拉箭头,在下拉菜单中选择前面创建的运行配置myRunConf,即可运行当前的PHP程序。在Eclipse的下部有一个“控制台”窗口,用于显示PHP程序的输出。例如,运行例3-1的结果如图3-45所示。

figure_0073_0111

图3-45 以脚本方式运行例3-1的结果

3.以网页方式运行PHP程序

以脚本方式运行PHP程序虽然简单,但PHP毕竟是用于开发Web应用程序的,里面可能包含HTML代码,不启动浏览器很难看到真实的运行界面。下面介绍以网页方式运行PHP程序。

首先参照2.1.2小节设置Apache网站的根目录为EclipsePHP的工作空间目录C:\workspace,然后重新启动Apache服务,这样就可以方便地在浏览器中浏览工程的PHP文件了。

在EclipsePHP Studio中选择“运行”→“运行配置”菜单项,打开运行配置窗口,在左侧列表中右击PHPWeb Page,在快捷菜单中选择“新建”命令,新建一个运行配置。首先选择服务器调试器(Server debugger)、PHP Server和要运行的PHP文件,然后输入配置名,如RunWebpage,如图3-46所示。

figure_0073_0112

图3-46 “运行配置”对话框

配置完成后单击“应用”按钮保存配置。单击“运行”按钮,可以直接运行程序,也可以单击Close按钮关闭对话框,以后再运行。

单击工具栏上“运行”按钮figure_0074_0113后面的下拉箭头,在下拉菜单中选择前面创建的运行配置RunWebpage,即可运行当前的PHP程序。在Eclipse的下部有一个“内部Web浏览器”窗口,用于显示PHP程序的输出。例如,运行例3-1的结果如图3-47所示。

figure_0074_0114

图3-47 以网页方式运行例3-1的结果

3.7.5 调试PHP程序

在开发应用程序或解决程序问题时,程序员需要对程序进行调试。调试程序可以在运行程序时查看大多数源代码信息(如行数、变量信息、函数等)。在Eclipse中调试PHP程序需要依赖第3方插件(如xdebug),本小节介绍利用xdebug插件调试PHP程序的方法。

1.安装xdebug插件

参照附录C下载xdebug插件php_xdebug-2.2.1-5.4-vc9.dll。将其复制到C:\PHP\ext目录下,并将其重命名为php_xdebug.dll。在php.ini中添加如下内容:

[Xdebug]

zend_extension="C:\php\ext\php_xdebug.dll"

xdebug.remote_enable=on

xdebug.profiler_enable=on

XDEBUG.TRACE_OUTPUT_DIR="c:\workspace\XDEBUG"

xdebug.profiler_output_dir="C:\workspace\xdebug"

xdebug.auto_trace = On

xdebug.show_exception_trace = On

xdebug.remote_autostart = On

参数说明如下。

• zend_extension:指定xdebug插件的位置。

• xdebug.remote_enable:指定是否开启远程调试。

• xdebug.profiler_enable:指定是否开启性能评测。

• XDEBUG.TRACE_OUTPUT_DIR:指定保存跟踪文件的位置。

• xdebug.profiler_output_dir:指定保存性能评测文件的位置。

• xdebug.auto_trace:指定是否开启自动跟踪。

• xdebug.show_exception_trace:指定是否开启异常跟踪。

• xdebug.remote_autostart:指定是否开启远程调试自动启动。

figure_0075_0115

保存后,将php.ini复制到Windows目录下,然后重新启动Apache服务。

打开浏览器,访问包含如下内容的PHP文件。

<?PHP

PHPInfo();

?>

如果能找到如图3-48所示的有关xdebug的信息,就说明xdebug已经安装成功了。

figure_0075_0116

图3-48 PHP配置信息中有关xdebug的信息

2.配置EclipsePHP

在运行PHP程序之前,同样要对EclipsePHP进行配置。请参照3.7.6小节配置EclipsePHP。

3.调试PHP程序

如果已经参照3.7.6小节配置了以脚本方式运行PHP程序,单击工具栏上“调试”按钮figure_0075_0117后面的下拉箭头,在下拉菜单中选择前面创建的运行配置myRunConf,即可调试当前的PHP程序。EclipsePHP会自动切换到调试视图,并且暂停在第1行代码处,如图3-49所示。

figure_0075_0118

图3-49 调试视图

当前中断运行的程序行显示为淡绿色背景条,并且该行代码前会出现一个“箭头”图标figure_0075_0119。单击调试工具栏上的“继续”按钮figure_0076_0120可以继续运行程序,单击调试工具栏上的“终止”按钮figure_0076_0121可以终止运行程序。

结束调试后,可以选择“窗口”→“打开透视图”→“PHP”菜单项,切换回编辑PHP程序的PHP视图。

4.设置和应用断点

断点是调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析。将光标移动至要设置断点的程序行,选择“运行”→“切换断点”菜单项,会在当前行设置断点,该行代码前会出现一个“圆点”图标figure_0076_0122,代表断点,如图3-50所示。

figure_0076_0123

图3-50 设置断点

将光标移动至已经设置断点的程序行,选择“运行”→“切换断点”菜单项,会取消当前行的断点。双击断点的圆点图标位置,也可以切换断点。

5.查看变量值

在调试PHP程序时,将鼠标移至变量名,可以弹出浮动窗口,显示程序运行到当前位置时该变量的值,如图3-51所示。

figure_0076_0124

图3-51 查看变量值

6.单步运行

单步运行就是一步一步地运行程序,程序员可以使用单步运行跟踪程序的运行轨迹。选择“运行”→“单步跳过”菜单项(或按 F6 键)可以执行单步运行,程序行前面的“箭头”图标figure_0076_0125会移动到下一行程序。

figure_0076_0126

如果觉得安装和配置xdebug插件比较麻烦,还可以使用一种相对简单的调试PHP程序的方法,就是在程序中需要设置断点的地方使用echo()函数打印关心的变量值(或使用 print_r()函数打印数组的内容,具体情况请参见第4章),然后使用 exit()函数中断程序的运行。

EclipsePHP Studio的功能很强大,对PHP提供了很多个性化的支持,由于篇幅所限,这里就不详细介绍了,有兴趣的读者可以查阅相关资料理解。

教程类别