macromedia
Dreamweaver MX
入门
2
商标
Afterburner、AppletAce、Attain、Attain Enterprise Learning System、Attain Essentials、Attain Objects for Dreamweaver、
Authorware、Authorware Attain、Authorware Interactive Studio、Authorware Star、Authorware Synergy、Backstage、Backstage
Designer、Backstage Desktop Studio、Backstage Enterprise Studio、Backstage Internet Studio、Design in Motion、Director、
Director Multimedia Studio、Doc Around the Clock、Dreamweaver、Dreamweaver Attain、Drumbeat、Drumbeat 2000、
Extreme 3D、Fireworks、Flash、Fontographer、FreeHand、FreeHand Graphics Studio、Generator、Generator Developer's
Studio、Generator Dynamic Graphics Server、Knowledge Objects、Knowledge Stream、Knowledge Track、Lingo、Live Effects、
Macromedia、Macromedia M Logo & Design、Macromedia Flash、Macromedia Xres、Macromind、Macromind Action、
MAGIC、Mediamaker、Object Authoring、Power Applets、Priority Access、Roundtrip HTML、Scriptlets、SoundEdit、
ShockRave、Shockmachine、Shockwave、Shockwave Remote、Shockwave Internet Studio、Showcase、Tools to Power Your Ideas、
Universal Media、Virtuoso、Web Design 101、Whirlwind 和 Xtra 是 Macromedia,Inc,的商标,并且可能已在美国或其他司法管辖区域(包括国际法管辖区域)内注册。本出版物涉及的其他产品名称、徽标、图案、标题、文字或短语可能是 Macromedia,
Inc,或其他实体的商标、服务标志或商品名称,并且可能已在某些司法管辖区域(包括国际法管辖区域)内注册。
本指南包含指向第三方 Web 站点的链接,这些站点不受 Macromedia 的控制,并且 Macromedia 不对所链接的任何站点上的内容负责。如果您访问本指南中提到的第三方 Web 站点,则一切风险均由您自己承担。Macromedia 提供这些链接仅仅是为了提供方便,并不意味着 Macromedia 认可这些第三方站点的内容或同意对其负有任何责任。
Apple 免责声明对于所提供的计算机软件包、任何针对特殊目的的适销性或适用性,APPLE COMPUTER,INC,不做任何明示或暗示的担保。
某些州不允许排除暗示担保,因此以上排除条款可能对您不适用。本担保为您提供特定的法律权利。根据各个州的不同情况,您也可能拥有其他法律权利。
版权所有? 2002 Macromedia,Inc,保留所有权利。未经 Macromedia,Inc,事先书面许可,不得将本手册的全部或部分拷贝、
影印、复制、翻译或转换为任何电子形式或可用机器读取的形式。
在 http://www.macromedia.com/go/thirdparty/ 上可以找到第三方软件通知和/或附加条款和条件。
部件号ZDW60M100X
鸣谢项目管理:Sheila McGinn
撰写:Chris Bedford、Kim Diezel、Jed Hartman、Charles Nadeau、Jennifer Rowe
编辑:Mary Ferguson、Mary Kraemer、Lisa Stanziano
产品管理:Patrice O'Neill
多媒体设计和制作:Aaron Begley、Benjamin Salles、Noah Zilberberg
打印和帮助设计和制作:Chris Basmajian、Caroline Branch、John Francis
Web 编辑和制作:George Brown、Rebecca Godbois、Jeff Harmon、Jon Varese
本地化项目经理,Bonnie Loo
特别感谢:Jake Cockrell、Kristin Conradi、George Comninos、David Deming、Tonya Estes、Stephanie Goss、David
Halbakken、Nick Halbakken、Wanda Huang、Narciso (nj) Jaramillo、Craig Jennings、Ken Karleskint、Sho Kuwamoto、David
Lenoe、Jay London、Sam Mathews、Larry McLister、Susan Morrow、Masayo Noda、Dan Radigan、Mike Sundermeyer、Heidi
Bauer Williams、Jorge Taylor、Lawrence Teschmacher、Venu Venugopal,Luciano Arruda、Raymond Lim、Nivesh
Rajbhandari、Scott Richards、Yoko Vogt、Vincent Truong、Ya Yang、Arky Tan、Jerry Wang、Masayo Noda、Yoko Shindo、
Tim Hussey 和全体 Dreamweaver 工程和质量控制小组成员。
第一版:2002 年 7 月
Macromedia,Inc.
600 Townsend St.
San Francisco,CA 94103
第 3 章在 Dreamweaver 中编辑代码,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,49
切换到编码工作区,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,49
将文件夹拷贝到您的站点,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,51
查看已完成的页面,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,51
打开多个页面.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,52
通过拖动添加图像,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,52
目 录第 I 部分入门第 1 章简介,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9
学习 Dreamweaver 基础知识,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9
安装和运行 Dreamweaver.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,11
首次探讨Dreamweaver 工作区.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,12
查看示例站点.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,16
第 2 章在 Dreamweaver 中创建您的第一个 Web 站点,,,,,,,,,,,,,,,,,,,,,,,,,17
设置本地站点.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,18
创建并保存新页,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,24
调整布局.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,27
设置页面标题.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,33
添加具有样式的文本.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,33
添加图像.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,37
设置背景颜色.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,38
查看代码.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,40
创建第二页.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,41
添加页之间的文本链接.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,42
为图形化链接创建鼠标经过图像.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,43
拷贝导航条.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,44
在浏览器中预览,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,45
设置远程站点,然后发布,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,45
其他参考资料.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,47
3
使用标签选择器添加链接,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,53
编辑标签.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,54
查找与标签有关的信息.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,55
使用代码提示添加图像.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,56
检查您的更改,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,57
使用“插入”栏添加链接.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,57
打印您的代码,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,58
其他参考资料,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,58
第 4 章了解 Web 应用程序.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,59
Web 应用程序是什么?.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,59
Web 应用程序如何工作.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,61
创作动态页.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,66
选择服务器技术,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,67
常用术语.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,67
第 5 章在 Dreamweaver MX 中开发 Web 应用程序,,,,,,,,,,,,,,,,,,,,,,,,,,,71
开始前的准备工作.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,71
打开要使用的文档.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,72
定义记录集.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,73
显示数据库记录,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,76
向表格添加动态域.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,77
设置重复的区域,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,78
查看您的页面,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,79
创建插入记录表单.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,79
将文件拷贝到服务器.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,83
其他参考资料,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,84
第 6 章在 Windows 中安装 Web 服务器.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,85
入门,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,86
安装 Personal Web Server,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,86
安装 Internet Information Server,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,87
测试 Web 服务器,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,87
Web 服务器基础.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,88
第 7 章示例 ColdFusion 站点的设置,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,91
ColdFusion 开发人员的设置清单,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,91
配置您的系统,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,92
定义 Dreamweaver 站点,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,94
连接到示例数据库.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,98
第 8 章示例 ASP.NET 站点的设置,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,101
ASP.NET 开发人员的设置清单.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,101
配置您的系统,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,102
定义 Dreamweaver 站点,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,104
连接到示例数据库(本地配置).,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,107
连接到示例数据库(远程服务器配置),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,108
目 录4
第 9 章示例 ASP 站点的设置.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,111
ASP 开发人员的设置清单.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,111
配置您的系统.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,112
定义 Dreamweaver 站点.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,116
连接到示例数据库(本地配置).,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,120
连接到示例数据库(远程服务器配置),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,121
第 10 章示例 JSP 站点的设置,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,123
JSP 开发人员的设置核对表.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,123
配置您的系统.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,124
定义 Dreamweaver 站点.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,127
连接到示例数据库(本地配置).,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,131
连接到示例数据库(远程服务器配置),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,133
第 11 章示例 PHP 站点的设置.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,135
PHP 开发人员的设置核对表.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,136
配置您的系统.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,137
定义 Dreamweaver 站点.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,140
连接到示例数据库,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,143
第 12 章数据库连接答疑,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,147
Microsoft 错误信息答疑.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,147
ColdFusion 错误信息答疑,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,151
权限问题答疑.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,152
第 II 部分教程第 13 章
Dreamweaver MX 教程,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,157
学习内容.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,157
第 14 章使用表格设计页面布局教程,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,159
开始前的准备工作,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,160
在“标准”视图中创建和修改表格,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,160
向表格添加颜色,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,165
在“标准”视图中设置相对宽度的表格.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,166
创建其宽度基于像素的表格,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,167
在“布局”视图中设计页面.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,168
绘制一个布局单元格.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,168
添加多个布局单元格.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,170
移动布局单元格或调整其大小,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,171
向表格中添加颜色,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,172
在“布局”视图中设置相对宽度的表格.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,173
执行下一个步骤,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,174
目 录5
第 15 章图像对齐和图像地图教程,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,175
开始前的准备工作.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,175
设置图像对齐方式.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,176
设置图像边距,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,178
创建图像地图,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,179
继续下面的学习,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,182
第 16 章使用 Dreamweaver 设计文件教程,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,183
开始前的准备工作.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,184
使用代码片断,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,184
插入代码片断,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,184
添加内容代码片断.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,187
添加脚注代码片断.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,188
修改代码片断内容.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,188
将代码保存为代码片断.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,189
继续下面的学习,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,190
第 17 章使用层叠样式表进行设计教程.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,191
开始前的准备工作.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,192
打开“CSS 样式”面板,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,193
重定义 HTML 标签,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,194
设置页面背景颜色.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,195
设置链接样式,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,196
导出样式以创建外部样式表,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,197
附加外部样式表,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,198
继续下面的学习,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,198
第 18 章创建主详细页集教程.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,199
开始前的准备工作.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,200
创建主详细页集,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,200
创建数据库记录集.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,202
插入主详细页集应用程序对象.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,205
查看页面.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,207
继续下面的学习,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,208
第 19 章建立插入记录页教程.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,209
开始前的准备工作.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,209
创建插入页.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,210
添加表单对象,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,211
定义“插入记录”服务器行为,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,215
测试您的插入页,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,217
继续下面的学习,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,217
索 引,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,219
目 录6

I
部分第 I 部分入门通过创建简单但功能齐全的 Web 站点,使您熟悉
Dreamweaver MX 可视化设计、手工编码和各种应用程序开发工具。
此部分包含以下各章:
第 1 章第9页的“简介”
第 2 章第17页的“在 Dreamweaver 中创建您的第一个
Web 站点”
第 3 章第49页的“在 Dreamweaver 中编辑代码”
第 4 章第59页的“了解 Web 应用程序”
第 5 章第71页的“在 Dreamweaver MX 中开发 Web 应用程序”
第 6 章第85页的“在 Windows 中安装 Web 服务器”
第 7 章第91页的“示例 ColdFusion 站点的设置”
第 8 章第101页的“示例 ASP.NET 站点的设置”
第 9 章第111页的“示例 ASP 站点的设置”
第 10 章第123页的“示例 JSP 站点的设置”
第 11 章第135页的“示例 PHP 站点的设置”
第 12 章第147页的“数据库连接答疑”
第 1 章简介本指南旨在介绍如何使用 Macromedia Dreamweaver MX,其对象是对本软件主要特性尚不熟悉的用户。本指南中的课程引导您完成创建一个简单但具备一定功能的 Web 站点的过程。
Macromedia Dreamweaver MX 是一种专业的 HTML 编辑器,用于对 Web 站点、Web 页和
Web 应用程序进行设计、编码和开发。无论您喜欢直接编写 HTML 代码的驾驭感还是偏爱在可视化编辑环境中工作,Dreamweaver 都会为您提供帮助良多的工具,丰富您的 Web 创作体验。
利用 Dreamweaver 中的可视化编辑功能,您可以快速地创建页面而无需编写任何代码。不过,
如果您更喜欢用手工直接编码,Dreamweaver 还包括许多与编码相关的工具和功能。并且,借助 Dreamweaver,您还可以使用服务器语言(例如 ASP、ASP.NET、ColdFusion 标记语言
(CFML)、JSP 和 PHP)生成支持动态数据库的 Web 应用程序。
注意,本指南并不是一本诠释 Dreamweaver MX 所有功能的全面的说明手册,而且也不是介绍 Web 设计的入门教材。
有关 Dreamweaver 的更详细信息,请参见 Dreamweaver“帮助”(从“帮助”菜单选择“使用 Dreamweaver”)。
学习 Dreamweaver 基础知识要开始学习使用 Dreamweaver,请首先从这一《入门》指南开始。然后继续学习其他资源,例如教程、帮助系统和支持中心。
如何使用本指南本指南分为若干章节。您不妨按顺序依次阅读各章节;要么,您亦可以阅读本简介的其余部分,
然后开始阅读最符合您的兴趣和经验的章节。在每一章中,我们建议您按课程顺序阅读各课程,
这些课程的顺序是经过精心设计的,大略模拟创建一个 Web 站点的常见工作流程。
下列清单描述了每一章的内容:
本简介说明如何安装 Dreamweaver 并介绍 Dreamweaver 工作区。请首先阅读本章,然后阅读您感兴趣的其他任何章节。
注意,在此版本的 Dreamweaver 中,对工作区的许多方面都进行了更改,因此,即使您以前曾使用过
Dreamweaver,也最好阅读本简介。
第 2 章第17页的“在 Dreamweaver 中创建您的第一个 Web 站点”面向以前曾创建过 Web
页但从未使用过 Dreamweaver 的人士。该章节提供一些基础知识,介绍如何使用
9
Dreamweaver 的可视化创作工具创建小型但具有一定功能的静态 Web 站点。
第 3 章第49页的“在 Dreamweaver 中编辑代码”主要面向手工编码人员(例如 Macromedia
HomeSite 用户),但它还适用于已使用可视化工具并想要开始编辑代码的人士。该章节提供与使用 Dreamweaver 的代码编辑工具有关的基础知识。
第 4 章第59页的“了解 Web 应用程序”提供与 Web 应用程序有关的概念性背景知识。
第 5 章第71页的“在 Dreamweaver MX 中开发 Web 应用程序”面向以前已创建过静态页面
(无论是否使用 Dreamweaver)并希望学习使用 Dreamweaver 创建数据库驱动的 Web 应用程序的人士。它引导您完成创建一个简单 Web 应用程序的过程。
设置指导集提供与安装 Web 服务器和使用各种服务器语言设置动态站点有关的信息。
教程集提供与实现某些常见任务有关的详细指导。
本指南中的这些课程使用随 Dreamweaver 提供的页面布局和示例内容。如果喜欢用自己的布局和内容创建第一个 Dreamweaver 站点,您可以这样做,但如果使用所提供的示例内容将会更容易学习这些课程。
其他资源
Dreamweaver 包括了多种资源,将帮助您快速了解该程序并熟练创建您自己的 Web 站点和页面。这些资源包括:
一套教程,它提供与特定主题有关的更深入的课程,并且对于特定领域所提供的信息要比《入门》指南中的其余部分所提供的信息更详尽。
Dreamweaver“帮助”,包括与使用 Dreamweaver 的所有方面有关的全面信息,并且包括
《入门》和教程的 HTML 版本。Dreamweaver“帮助”在操作系统提供的帮助查看器中显示:Microsoft HTML 帮助 (Windows) 或 Apple 帮助 (Macintosh)。
,使用 Dreamweaver”是 Dreamweaver“帮助”(不包括《入门》和教程)的内容的 PDF
版本,提供与使用 Dreamweaver 命令和功能有关的信息。在该 PDF 版本中不包括某些参考主题;有关这些主题的信息,请参见 Dreamweaver“帮助”。在您的 Dreamweaver CD 中提供该 PDF 文件。
此外,您还可在 Dreamweaver支持中心 (http://www.macromedia.com/support/dreamweaver/)
找到定期更新的提示、技术说明、示例、教程和信息。
有关 Dreamweaver 的其他信息性和指导性资源的信息,请参见 Dreamweaver“帮助”。
字形约定
本指南中采用以下字形约定:
菜单项按如下格式显示:“菜单名称”>“菜单项名称”。子菜单中的项按如下格式显示:“菜单名称”>“子菜单名称”>“菜单项名称”。
Code 字体:指示 HTML 标签和属性的名称以及在示例中使用的文字。
Italic code 字体:指示代码中可替换的项(有时称作元符号)。
Bold roman 文本:指明让您逐字输入的文本。
第 1 章10
安装和运行 Dreamweaver
此节描述运行 Dreamweaver并解释如何安装 Dreamweaver。它还解释如何在多用户操作系统
(例如 Windows XP 或 Mac OS X)。
系统要求
以下硬件和软件是运行 Dreamweaver 所必需的。
Microsoft Windows 的系统要求,
Intel Pentium II 处理器或等效处理器,300 MHz 或更快
Windows 98、Windows 2000、Windows NT(具有 Service Pack 3 或更高版本)、Windows
ME 或 Windows XP
Netscape Navigator 4.0 版或更高版本或 Microsoft Internet Explorer
96 MB 的可用内存 (RAM)(建议采用 128 MB 内存)
275 MB 的可用磁盘空间
分辨率可达 800 x 600 像素的 256 色显示器(建议颜色为百万颜色,分辨率达到
1024 x 768像素)
CD-ROM 驱动器
Apple Macintosh 系统要求,
Power Macintosh G3 或更高版本
Mac OS 9.1、Mac OS 9.2.1 或 Mac OS X 10.1 或更高版本
Mac OS Runtime for Java (MRJ) 2.2 或更高版本(包括于 Dreamweaver MX CD 中)
Netscape Navigator 4.0 版或更高版本或 Microsoft Internet Explorer
96 MB 的可用内存 (RAM)(建议采用 128 MB 内存)
275 MB 的可用磁盘空间
分辨率可达 800 x 600 像素的 256 色显示器(建议颜色为百万颜色,分辨率达到
1024 x 768像素)
CD-ROM驱动器安装 Dreamweaver
请遵循以下步骤在 Windows 或 Macintosh 计算机上安装 Dreamweaver。
注意,在某些操作系统中,只有在您对计算机具有管理权限后,才能安装或卸载 Dreamweaver。有关更多信息,请参见第12页的“在多用户环境中使用 Dreamweaver”。
要安装 Dreamweaver,请执行以下操作:
1将 Dreamweaver CD 插入计算机的 CD-ROM 驱动器。
2请从下列方法中选择其一:
简介11
在 Windows 中,选择“开始”>“运行”。单击“浏览”并从 Dreamweaver CD 上选择
Dreamweaver MX Installer.exe 文件。在出现“运行”对话框后,单击“确定”开始安装。
在 Macintosh 上,双击“Dreamweaver MX Installer”图标。
3按照屏幕上的指导执行。
4如果出现提示,则重新启动您的计算机。
在多用户环境中使用 Dreamweaver
在多用户操作系统(例如 Windows NT、Windows 2000、Windows XP 或 Mac OS X 中),
应用程序通常安装在所有用户都可以从该处运行这些应用程序的文件夹中,例如 C:\Program
Files (Windows) 或 Applications 文件夹 (Macintosh)。在多用户操作系统中,只有具有管理权限的用户才可以将应用程序安装到此类文件夹中。
您可以通过多种方式自定义 Dreamweaver。Dreamweaver 禁止任何用户的自定义配置影响任何其他用户的自定义配置。为了达到这个目的,当您首次在 Dreamweaver 可以识别的某个多用户操作系统中运行它时,该应用程序将为您创建各种配置文件的拷贝。这些用户配置文件存储在一个属于您的文件夹中。
注意,在较早的操作系统(Windows 98、Windows ME 和 Mac OS 9.x)中,即使将操作系统配置为支持多个用户,
所有用户仍共享一组 Dreamweaver 配置文件。
如果您在安装 Dreamweaver MX 后重新安装或升级了 Dreamweaver,Dreamweaver 会自动制作现有用户配置文件的备份拷贝;这样一来,如果您已手工自定义了这些文件,仍然可以访问已做的更改。有关手工自定义配置文件的信息,请参阅“Macromedia 支持中心”上的“自定义
Dreamweaver”,网址是 http://www.macromedia.com/go/customizing_dreamweaver。
在从多用户系统卸载 Dreamweaver 时,Dreamweaver 可以为您删除每一用户配置文件夹。
注册 Dreamweaver MX
若要获得更多的 Macromedia 支持,最好以电子方式或通过邮件注册您的 Macromedia
Dreamweaver MX 的拷贝。
在注册后,您可以登录以接收与 Macromedia 升级产品和新产品有关的最新通知。您还可以登录,以获得与 www.macromedia.com 和 www-euro.macromedia.com Web 站点上提供的产品更新和新内容有关的即时电子邮件通知。
若要注册 Macromedia Dreamweaver MX,请执行以下操作之一,
选择“帮助”>“联机注册”并填写电子表格。
选择“帮助”>“书面注册”,打印该表格,并将表格邮寄到表格中所示的地址处。
首次探讨Dreamweaver 工作区在 Windows 中,Dreamweaver MX 提供了两种可供选择的工作区布局:一种将全部元素置于一个窗口中的集成布局和一种非常类似于 Dreamweaver 4 的浮动布局。
在 Macintosh 中,只能使用浮动布局。
第 1 章12
此节说明如何在 Windows 中选择初始工作区布局。此节还描述了 Windows 和 Macintosh 中工作区的主要元素。
选择工作区布局(仅适用于 Windows)
在 Windows 中首次启动 Dreamweaver 时,会出现一个对话框,您可以从中选择一种工作区布局。如果您以后改变了主意,可以使用“参数选择”对话框切换到一种不同的工作区。
若要选择工作区布局,请执行以下操作:
选择下列布局之一:
Dreamweaver MX 工作区是一个使用 MDI(多文档界面)的集成工作区,其中全部“文档”
窗口和面板被集成在一个更大的应用程序窗口中,并将面板组停靠在右侧。建议大多数用户使用它。
注意,本指南中的大部分内容假定您使用的是集成 Dreamweaver MX 工作区。
HomeSite/代码编写者样式的 Dreamweaver MX 工作区是同样的集成工作区,但是将面板组停靠在左侧,布局类似于 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所用的布局,
而且“文档”窗口在默认情况下显示“代码”视图。建议 HomeSite 或 ColdFusion Studio 用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。若要选择这种布局,请选择“Dreamweaver MX 工作区”选项,然后选择“HomeSite/代码编写者样式”选项。
注意,在这两种集成工作区布局的任何一种布局中,您都可以在工作区的任何一侧停靠面板组。
Dreamweaver 4 工作区是一种与 Dreamweaver 4 中所用布局相类似的工作区布局,其中每个文档都位于自己的独立浮动窗口中。面板组停靠在一起,但并不是停靠在一个更大的应用程序窗口中。仅建议喜欢使用更熟悉的工作区的 Dreamweaver 4 用户使用这种布局。
简介13
窗口和面板概述以下是 Dreamweaver 的工作区中提供的窗口和其他元素的简要说明。与如何使用这些窗口有关的某些细节在本指南的后面提供;有关更详细信息,请参见 Dreamweaver“帮助”(“帮助”>
“使用 Dreamweaver”)。
“欢迎使用”窗口提供有关针对各种目的设置工作区的提示,并为使用过 Dreamweaver 早期版本的用户提供有关新功能的信息。
“插入”栏包含用于将各种类型的对象(如图像、表格和层)插入到文档中的按钮。每个对象都是一段 HTML 代码,允许您在插入它时设置不同的属性。例如,您可以在“插入”栏中单击
“图像”图标插入一个图像。如果您愿意,可以不使用“插入”栏而使用“插入”菜单插入对象。
“文档”工具栏包含按钮和弹出式菜单,它们提供各种“文档”窗口视图(如“设计”视图和
“代码”视图)、各种查看选项和一些普通操作(如在浏览器中预览)。
“文档”窗口显示您当前创建和编辑的文档。
属性检查器用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。
文档工具栏属性检查器标签选择器
“欢迎使用”窗口站点面板文档窗口插入栏面板组第 1 章14
面板组是一组停靠在某个标题下面的相关面板的集合。若要展开一个面板组,请单击组名称左侧的展开箭头;若要取消停靠一个面板组,请拖动该组标题条左边缘的手柄。
“站点”面板使您可以管理组成站点的文件和文件夹。有关更多信息,请参见第18页的“设置本地站点”。它还提供了本地磁盘上全部文件的视图,非常类似于 Windows 资源管理器
(Windows) 或 Finder (Macintosh)。
Dreamweaver 提供了许多此处未说明的其它面板、检查器和窗口,如“历史记录”面板和代码检查器。若要打开 Dreamweaver 面板、检查器和窗口,请使用“窗口”菜单。
菜单概述此节提供 Dreamweaver 中各菜单的简要概述。
“文件”菜单和“编辑”菜单包含用于“文件”菜单和“编辑”菜单的标准菜单项,例如“新建”、“打开”、“保存”、“剪切”、“拷贝”和“粘贴”。“文件”菜单还包含各种其他命令,
用于查看当前文档或对当前文档执行操作,例如“在浏览器中预览”和“打印代码”。“编辑”
菜单包括选择和搜索命令,例如“选择父标签”和“查找和替换”,并且提供对键盘快捷方式编辑器和标签库编辑器的访问。“编辑”菜单还提供对 Dreamweaver 菜单中“参数选择”的访问,但对 Mac OS X 系统的 Macintosh 除外。
“查看”菜单使您可以看到文档的各种视图(例如“设计”视图和“代码”视图),并且可以显示和隐藏不同类型的页面元素以及不同的 Dreamweaver 工具。
“插入”菜单提供插入栏的替代项,以用于将对象插入您的文档。
“修改”菜单使您可以更改选定页面元素或项的属性。使用此菜单,您可以编辑标签属性,更改表格和表格元素,并且为库项和模板执行不同的操作。
“文本”菜单使您可以轻松地设置文本的格式。
“命令”菜单提供对各种命令的访问;包括根据您的格式参数选择设置代码格式的命令、创建相册的命令,以及使用 Macromedia Fireworks 优化图像的命令。
“站点”菜单提供一些菜单项,这些菜单项可用于创建、打开和编辑站点,以及用于(在
Macintosh 上)管理当前站点中的文件。
“窗口”菜单提供对 Dreamweaver 中的所有面板、检查器和窗口的访问。
“帮助”菜单提供对 Dreamweaver 文档的访问,包括用于使用 Dreamweaver 以及创建对
Dreamweaver 的扩展的帮助系统,并且包括各种语言的参考材料。
除了菜单栏菜单外,Dreamweaver 还提供多种上下文菜单,您可以利用它们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单,右击 (Windows) 或在按住 Control 键的同时单击 (Macintosh) 窗口中的某一项。上下文菜单中的所有项都可以在菜单栏菜单中找到。
简介15
查看示例站点本指南中使用的示例出自一个名叫 Global Car Rentals (全球租车公司)的虚构公司的小型示例站点。在开始学习这些课程前,请在浏览器中查看示例站点,以了解在您的整个课程学习期间将创建哪些内容。
若要在浏览器中查看示例站点,请执行以下操作:
1打开 Dreamweaver 应用程序文件夹中的 Samples 文件夹。然后依次打开 GettingStarted 文件夹和 FinalSite 文件夹。
2双击 FinalSite 文件夹中的 index.htm 文件以在浏览器中查看该站点。
3在查看了示例站点后,请继续阅读本指南中您感兴趣的任一章节。
第 1 章16
第 2 章在
Dreamweaver
中创建您的第一个
Web
站点本章提供一系列简短的课程,指导您完成在 Macromedia Dreamweaver MX 中使用可视化创作工具创建简单的静态 Web 站点的过程。有关在 Dreamweaver 中使用手工编码工具的信息,请参见第 3 章第49页的“在 Dreamweaver 中编辑代码”;有关创建数据库驱动动态 Web 应用程序的信息,请参见第 4 章第59页的“了解 Web 应用程序”。
本章中课程的顺序是按照创建一个站点可能的工作流程安排的。当创建自己的站点时,您可以按照任何最适合您的工作流程进行。
若要创建静态 Web 站点,请执行以下操作:
1规划和准备(请参见第18页的“设置本地站点”和第23页的“将资源添加到您的站点”)。
2创建页(请参见第24页的“创建并保存新页”)。
3对页进行布局和设置(请参见第27页的“调整布局”和第33页的“设置页面标题”)。
4向页中添加内容(请参见第33页的“添加具有样式的文本”和第37页的“添加图像”)。
5将页链接在一起(请参见第42页的“添加页之间的文本链接”和第43页的“为图形化链接创建鼠标经过图像”)。
6发布您的站点(请参见第45页的“在浏览器中预览”和第45页的“设置远程站点,然后发布”)。
17
设置本地站点使用 Dreamweaver 创建 Web 站点最常见的方法就是在您的本地磁盘上创建并编辑页,然后将这些页的拷贝上传到一个远程 Web 服务器使公众可以访问它们。可以通过其他方法(例如在您的本地计算机上运行 Web 服务器,或将文件上传到模拟调试服务器,或像使用本地磁盘一样使用安装的磁盘)使用 Dreamweaver,但本指南中的课程假设您在本地磁盘上进行操作,然后上传到远程服务器。
在 Dreamweaver 中,站点 是下列任意一项的简称:
Web 站点:一组位于服务器上的页,使用 Web 浏览器访问该站点的访问者可以对其进行浏览。
远程站点:服务器上组成 Web 站点的文件,这是从您的(创作者的)角度而不是访问者的角度来看的。
本地站点:与远程站点上的文件对应的本地磁盘上的文件。您在本地磁盘上编辑文件,然后将它们上传到远程站点。
Dreamweaver站点定义:本地站点的一组定义特性,以及有关本地站点和远程站点对应方式的信息。
通常,创建 Web 站点是从对其进行规划开始的:决定要创建多少页、每页上显示什么内容以及页是如何互相连接起来的。不过,在本课中,您将创建一个非常简单的站点,因此不需要太多的规划:它将只包含两个 Web 页,其间具有链接。因此,对于此站点,您可以跳过规划,进入创建站点定义阶段。
您将使用“站点定义”对话框创建站点定义。您可以以两种视图中的任意一种来填写此对话框:
“基本”或“高级”。“基本”方法指导您一步一步地完成站点设置。如果您宁愿在没有指导的情况下编辑站点信息,则可以随时单击“高级”选项卡。
以下过程介绍如何设置“基本”版本对话框中的选项,该版本的对话框也叫做“站点定义向导”。如果需要有关如何在“高级”版本中设置选项的详细信息,请单击“高级”选项卡,然后单击“帮助”按钮。
若要定义站点,请执行以下操作:
1选择“站点”>“新建站点”。(即从“站点”菜单中选择“新建站点”。)
即会出现“站点定义”对话框。
2如果对话框显示的是“高级”选项卡,则单击“基本”。
出现“站点定义向导”的第一个屏幕,要求您为站点输入一个名称。
第 2 章18
3在文本框中,输入一个名称以在 Dreamweaver 中标识该站点。该名称可以是任何所需的名称。例如,您可以将站点命名为“Global Car Rental”。
4单击“下一步”进入下一个步骤。
出现向导的下一个屏幕,询问您是否要使用服务器技术。
在 Dreamweaver 中创建您的第一个 Web 站点19
5选择“否”选项指示目前该站点是一个静态站点,没有动态页。
如果要设置站点来创建 Web 应用程序,则需要选择动态文档类型,例如 Macromedia
ColdFusion、Microsoft Active Server Page (ASP)、Microsoft ASP.NET、Sun JavaServer Page
(JSP) 或 PHP Hypertext Preprocessor (PHP),然后提供有关应用程序服务器的信息(有关更多信息,请参见第 5 章第71页的“在 Dreamweaver MX 中开发 Web 应用程序”)。
6单击“下一步”进入下一个步骤。
出现向导的下一个屏幕,询问您要如何使用您的文件。
7选择标有“编辑我的计算机上的本地拷贝,完成后再上传到服务器(推荐)”的选项。
在站点开发过程中有多种使用文件的方式,但为了学习本课程,请选择此选项。
8文本框允许您在本地磁盘上指定一个文件夹,Dreamweaver 将在其中存储站点文件的本地版本。若要指定一个准确的文件夹名称,通过浏览指定要比键入路径更加简便易行,因此请单击该文本框旁边的文件夹图标。
随即会出现“选择站点的本地根文件夹”对话框。
9在“选择站点的本地根文件夹”对话框中,先浏览到本地磁盘上可以存放所有站点的文件夹。
现在不要单击“确定”。
第 2 章20
注意,此站点文件夹最后将包含多个站点,因此不要选择站点文件夹作为本地根文件夹。马上您将在站点文件夹中为该特定站点创建一个本地根文件夹。
如果您尚未创建站点文件夹,现在就可以创建一个(使用“选择站点的本地根文件夹”对话框中的文件夹创建按钮),并将该文件夹命名为“Sites”。站点文件夹的推荐位置取决于您的操作系统:
在 Windows 中,如果您还没有用来存储站点文件的位置,则在 C 驱动器根目录创建一个文件夹并将其命名为“Sites”。即该文件夹的路径是 C:\Sites。
在 Mac OS 9 中,如果您还没有存储站点的位置,则在磁盘驱动器的根目录创建一个文件夹并将其命名为“Sites”。
在 Mac OS X 中,您的主文件夹 (/Users/your_user_name) 包含一个名为“Documents”的文件夹。定位到该文件夹,并且在其中创建名为“Sites”的文件夹。
10还是在“选择站点的本地根文件夹”对话框中,在您的 Sites 文件夹中创建一个新文件夹。将这个新文件夹命名为“GettingStarted”,然后单击“确定”退出“选择站点的本地根文件夹”对话框。
这个新文件夹就是您的站点的本地根文件夹。
11单击“下一步”进入下一个步骤。
出现向导的下一个屏幕,询问您如何连接到远程服务器。
在 Dreamweaver 中创建您的第一个 Web 站点21
12现在,从弹出式菜单中选择“无”。单击“下一步”进入下一个步骤。
该向导的下一个屏幕将出现,其中显示您的设置概要。
13单击“完成”完成设置。
您可以稍后设置有关远程站点的信息(请参见第45页的“设置远程站点,然后发布”);
目前,本地站点信息对于开始创建页已经足够了。
将出现一个警告,通知您 Dreamweaver 将创建站点缓存。站点缓存是 Dreamweaver 存储有关站点信息的一种方式,可以使多个站点操作速度更快。
14单击“确定”允许 Dreamweaver 创建站点缓存。
“站点”面板现在显示当前站点的新本地根文件夹,同时显示一个图标允许您以分层树视图查看所有本地磁盘。该图标标为“桌面”(Windows) 或“计算机”(Macintosh)。
“站点”面板通常显示您站点中的所有文件和文件夹,但是目前站点中不包含任何文件或文件夹。当站点中存在文件时,“站点”面板中的文件列表将充当文件管理器,允许您拷贝、粘贴、
删除、移动和打开文件,就象在计算机桌面上一样。
如果您已经具有一组要用来创建 Web 站点的本地 HTML 文件,则可以使用“站点”面板中的文件浏览器将这些文件拷贝到新创建站点的文件夹中。但是,在开始使用自己的文件之前,您可能要使用 Dreamweaver 附带的文件来完成本指南中的课程。
如果您在远程服务器上已经具有了一个 Web 站点并要使用 Dreamweaver 来编辑该站点,请参见 Dreamweaver“帮助”(“帮助”>“使用 Dreamweaver”)。
第 2 章22
将资源添加到您的站点在创建了本地站点之后,如果您已为该站点创建了资源(图像或其他内容片断),则将这些资源放置在本地站点根文件夹内的一个文件夹中。那么当您要向页中添加内容时,这些资源将随时可用。
Dreamweaver 附带“Global Car Rental”站点的图像和文本文件。如果要创建“Global Car
Rental”的页,您必须将站点的图像拷贝到您的站点的本地根文件夹中。可以使用“站点”面板完成此操作。
这些资源在一个名为“Design”的文件夹中。为了简单起见并和本《入门》指南中其余的部分保持一致,请将整个 Design 文件夹拷贝到您的站点中,然后在该文件夹中进行操作。
若要将图像的文件夹拷贝到您的站点的本地根文件夹中,请执行以下操作:
1如果尚未打开“站点”面板,则选择“窗口”>“站点”将其打开。
即会显示“站点”面板。(如果“站点”面板已经打开,则执行该步骤后不会显示“站点”
面板。如果未显示“站点”面板,则再次选择“窗口”>“站点”显示该面板。)
2在“站点”面板中,展开“桌面”(Windows) 或“计算机”(Macintosh) 图标以查看可用的磁盘。
3按需要展开文件夹以打开 Dreamweaver 应用程序文件夹。
4展开 Samples 文件夹。
5展开 Samples 文件夹中的 GettingStarted 文件夹。
6选择 GettingStarted 文件夹中的 Design 文件夹,然后按 Ctrl+C 组合键 (Windows) 或
Command+C 组合键 (Macintosh) 拷贝该文件夹。
Design 文件夹包含一个名为“Assets”的文件夹,而 Assets 文件夹又包含与站点相关的多个资源(其中包括一个 images 子文件夹)。
7还是在“站点”面板中,滚动到您的站点的本地根文件夹(您在定义站点时创建的文件夹)
并选择该文件夹。然后按 Ctrl+V 组合键 (Windows) 或 Command+V 组合键 (Macintosh) 将
Design 文件夹的拷贝粘贴到您的站点中。
在 Dreamweaver 中创建您的第一个 Web 站点23
创建并保存新页设置完站点后,您就可以创建 Web 页来填充站点了。
当启动 Dreamweaver 时,将自动创建一个空的 HTML 文档。在继续之前,请关闭该文档。
若要关闭默认的空文档,请执行以下操作:
选择“文件”>“关闭”。
若要创建新页,请执行以下操作:
1选择“文件”>“新建”。
即会出现“新建文档”对话框。
2在左边的类别列表中,选择“页面设计”类别。
对话框内中间列的列表重新标为“页面设计”。即会出现一组预先设计的页面设计。
3在“页面设计”列表中向下滚动,选择名为“文本:文章 D(具有导航条)”的项。
注意,还有一项具有相似的名称。一定不要选择名为“文本:文章 D”的项,该项没有导航条。
第 2 章24
在对话框的右侧显示该页的一个小预览图像。
如果愿意,您可以使用所提供的任何其他页面设计创建页,或通过从“基本页”类别中选择一项创建没有预设格式的页。本课的其余部分假设您正在使用“文本:文章 D(具有导航条)”页面设计。
4确保选择了该对话框右下角的“文档”单选按钮。
在 Dreamweaver 中创建您的第一个 Web 站点25
5单击“创建”。
新文档窗口中将出现一个新页,该页使用您选择的布局。该页填有占位符“Lorem ipsum”
文本以显示当添加了实际文本后页面设计的外观。
6保存您的文档。
若要保存新页,请执行以下操作:
1选择“文件”>“保存”。
2在“保存为”对话框中,浏览到站点根文件夹中的 Design 文件夹。
提示:站点根文件夹是您在第18页的“设置本地站点”中设置站点时创建的文件夹。
3输入文件名“index.htm”。
4单击“保存”。
文件名现在显示在文档窗口标题条上“无标题文档”名称后的括号中。
第 2 章26
调整布局预先设计的页提供了一个起始点,但是它们不太可能完全符合您自己的页所需要的布局。
若要修改页的布局,请使用 Dreamweaver 的布局工具。本指南将提及某些工具,但若要获得更多信息,请参见Dreamweaver“帮助”(“帮助”>“使用 Dreamweaver”)。
首先,删除您不需要的布局元素。为了创建“Global Car Rental”页布局,请删除若干多余的表格和单元格。
然后添加图像占位符并调整表格列的宽度(使用 Dreamweaver 的布局视图)使所有内容正好合适。
删除多余的元素在任何预先设计的页面设计中都可能存在最终页不需要的元素。您可以选择这些元素并将它们删除。
如果您正在创建“Global Car Rental”页,标准页面设计中以下元素是多余的:
页顶部导航链接中的两个链接
主文本列上面的标题区域
侧栏列中标题旁边的小框
页底部的版权栏删除元素的一般步骤是选择该元素然后按Backspace 键 (Windows) 或 Delete 键 (Macintosh)。
以下步骤说明如何选择并删除每个多余的元素。完成后,检查以确保已删除了所有要删除的元素,然后保存该文档。
若要删除多余的导航链接,请执行以下操作:
1选择“查看”>“表格视图”>“标准视图”以确保您正在以标准视图查看表格。
2在文档的导航条中,将鼠标指针从具有“Sic Amet”链接的表格单元格拖到具有
“Consectetur”链接的表格单元格。
两个表格单元格都将高亮显示,指示它们已被选中。
3按Backspace 键 (Windows) 或 Delete 键 (Macintosh)。
表格单元格即被删除。其他的表格单元格(“Lorem”、“Ipsum”和“Dolor”链接)自动扩展以填满表格的宽度。
在 Dreamweaver 中创建您的第一个 Web 站点27
若要删除多余的文本列标题,请执行以下操作:
1在文本列的顶部,单击单词“Title”。
2在“文档”窗口底部的标签选择器中,单击最左侧的 <table> 标签,该标签出现在 <body>
标签的右侧,与它紧挨着。(如果在浮动工作区中无法看到 <body> 标签,则加宽文档窗口。)
3按Backspace 键 (Windows) 或 Delete 键 (Macintosh) 删除包含标题的表格。
注意,标签选择器中有两个 <table> 标签,这是因为标题区域是一个嵌套在另一个表格中的表格。在本例中,您应该删除外面的表格,它是由最左边的 <table> 标签表示的。
若要删除侧栏标题中多余的框,请执行以下操作:
1在右侧列中单词“News”的左侧,在包含感叹号的框中单击。
2在标签选择器中,单击最右边的 <td> 标签以选择感叹号周围的框。
3按Backspace 键 (Windows) 或 Delete 键 (Macintosh)。
第 2 章28
若要删除多余的版权栏,请执行以下操作:
1滚动到页的底部。单击底部版权栏中的任意位置。
2在标签选择器中,单击最左边的 <table> 标签,即紧靠 <body> 标签右边显示的那个标签。
然后按 Delete 键删除包含版权信息的表格。
若要检查并保存页,请执行以下操作:
1查看页以确保您已删除了多余的元素。
您的页看起来应该和下面的图像类似:
2保存您的文档。
在 Dreamweaver 中创建您的第一个 Web 站点29
添加图像占位符现在创建占位符来代替您将在稍后添加的图像。
若要添加图像占位符,请执行以下操作:
1单击主文本列的开始位置(即文本顶部左侧,正好在文本第一个黑体字之前)。然后按Enter
键 (Windows) 或 Return 键 (Macintosh) 在文本之前放置一个空行。然后单击这个新的空行。
插入点现在应该单独在一行上。如果不是,请将插入点放置在空行上。
2选择“插入”>“图像占位符”。
3在“图像占位符”对话框中,输入占位符的名称(例如“SplashImage”)以及宽度和高度。
对于“Global Car Rental”页,输入的宽度为 523,高度为 220。
注意,占位符名称必须以字母开头,只能包含字母和数字。
第 2 章30
4单击“确定”。
随即会出现一个具有指定尺寸的灰色框。这就是图像的占位符,用于帮助您对页进行布局,而无需使用最终的图像。
5您可能需要加宽文档窗口以查看右侧的文本列。
列设置为自动伸展
index.htm 页中右边的侧栏文本列是固定宽度的。要使它随着访问者调整浏览器窗口的大小改变宽度,请让该列设置为自动伸展。然后调整包含图像占位符的宽列的宽度。
若要使左边的列设置为自动伸展,请执行以下操作:
1如果未显示插入栏,则选择“窗口”>“插入”显示插入栏。
2在插入栏上,单击“布局”选项卡。
3单击“布局视图”按钮切换到布局视图。
4阅读信息对话框,然后单击“确定”。
对于页中的每个表格,都会在表格的左上角显示一个绿色的选项卡。该选项卡上标有“布局表格”。
5在文档窗口中,单击您插入的图像占位符上方左侧的“布局表格”选项卡,选择包含两个文本列的表格。
两个文本列中每列的上方都有一个列标题,显示每列的宽度。
在 Dreamweaver 中创建您的第一个 Web 站点31
6如果文档窗口太窄以致于无法显示右侧列的全部内容,则加宽您的文档窗口。
即使在您加宽了文档窗口之后,其他“布局表格”选项卡也可能遮住右侧列标题中显示宽度的数字。不要单击其他的“布局表格”选项卡。
7小心地单击右侧列上的列标题。(一定要单击右侧列中绿色“布局表格”选项卡顶部的上方。)
随即会出现一个弹出式菜单。
8在弹出式菜单中选择“列设置为自动伸展”。
出现一个标题为“选择间隔图像”的对话框,提示您选择一个间隔图像。
注意,如果您已经选择了间隔图像,则不出现此对话框;在本例中,右边的列现在已设置为自动伸展的列。如果不显示该对话框,则跳过此过程其余的步骤。
9在“选择间隔图像”对话框中,选择“使用现存的间隔图像文件”选项并单击“确定”。
出现另一个对话框,标题为“选择间隔图像文件”。
10在“选择间隔图像文件”对话框中,浏览到您的本地根文件夹并打开 Assets文件夹。然后打开 Images 文件夹并选择 spacer.gif,随后单击“确定”(Windows) 或“打开”(Macintosh)。
右侧的列现在已设置为自动伸展列;在浏览器中,在以固定的宽度绘制左侧的列之后,右侧列的宽度将尽可能地伸展。
若要调整主文本列的宽度,请执行以下操作:
1单击左侧列上方的列标题,并从出现的弹出式菜单中选择“使单元格宽度一致”。
左侧的列现在已设置为固定的宽度(等于图像的宽度加上单元格填充和单元格间距)。
2单击插入栏中的“标准视图”按钮切换回标准视图。
3保存您的文档。
第 2 章32
设置页面标题您可以设置页面的多种属性,包括其标题、背景颜色、文本颜色等。(若要设置页面属性,请选择“修改”>“页面属性”。)但是如果您只想设置页面标题(显示在浏览器标题条中的标题),
则可以在文档工具栏中完成该操作。
若要为您的文档设置页面标题,请执行以下操作:
1如果文档工具栏不可见,则选择“查看”>“工具栏”>“文档”。
即会出现 Dreamweaver 的文档工具栏。在集成工作区中,默认情况下它显示在文档区域的顶部;在浮动工作区中,它显示为文档窗口的一部分。
2在“标题”文本框中(其中显示“无标题文档”),键入该页的标题,例如“Global Car
Rental 主页”。然后按Enter 键 (Windows) 或 Return 键 (Macintosh) 查看文档窗口标题条中页面标题的更新。
3保存您的文档。
添加具有样式的文本您可以在文档窗口中键入文本,或从另一个源(例如 Microsoft Word 文件)拷贝并粘贴文本。
然后,您可以使用“CSS 样式”面板对文本进行格式设置。
在输入文本之前,通过选择“查看”>“设计”确保您正在设计视图中。
添加文本当您在设计视图中输入文本并对其进行格式设置时,Dreamweaver 创建基础 HTML 代码。若要直接输入代码,请使用代码视图。有关代码视图的信息,请参见第 3 章第49页的“在
Dreamweaver 中编辑代码”。
Dreamweaver 附带的预先设计的页包含占位符“Lorem ipsum”文本,如果您的页基于预先设计的页,则当准备好开始添加内容时,您将需要用自己的文本替换占位符文本。但是,在您完成设计和布局之前在适当的位置保留占位符文本将非常有用,这样您或您的客户可以查看布局,而不会被文本分散注意力。
显示代码视图显示设计视图文档标题刷新设计视图参考代码导航视图选项在浏览器中预览/调试文件管理实时数据视图显示代码视图和设计视图在 Dreamweaver 中创建您的第一个 Web 站点33
若要将文本添加到您的页,请执行以下操作:
1单击三下左边列顶部(图像占位符下面)的粗体占位符文本以选择整个粗体段落。
2键入“Safety Tips”(或者,如果愿意,可以键入您自己的标题文本)。
3选择水平线下面的三个占位符文本段落。
4键入以下文本(或者,如果愿意,可以键入您自己的文本):
The safety of our loyal customers is important to us,Read these safety tips to ensure that
your next trip goes off without a hitch!
5在右边的列中,单击三下单词“News”并键入“Globe-Trotter Promotions”将其替换。
6在“站点”面板中,在您的 Assets 文件夹中找到 promotions.txt 文件。双击该文件的图标将其打开。
此文件包含 Global Car Rentals 特别促销的拷贝。
注意,在此示例站点中,包含该拷贝的文件是一个文本文件。对于其他站点,提供给您的可能是 Microsoft Word 生成的 HTML 文档;您可以导入该 HTML 并使用 Dreamweaver 的“导入 Word HTML”命令对其进行清理。有关更多信息,请参见 Dreamweaver“帮助”(“帮助”>“使用 Dreamweaver”)。
请注意,该文本文件显示在新的文档窗口中,沿左侧显示一个深色的竖条。此窗口在代码视图中,因为该文件不是 HTML 文件,所以不能切换到设计视图。
注意,如果愿意,可以在页上使用您自己的文本,而不使用所提供的文本。
7在 promotions.txt 文档窗口中,按 Control+A 组合键 (Windows) 或 Command+A 组合键
(Macintosh) 选择所有文本,然后选择“编辑”>“拷贝”来拷贝该文本。
8在 index.htm 文档窗口中,选择右侧列下面单元格中的所有占位符文本,然后选择“编辑”
>“粘贴”。
文本被粘贴到表格中。
9在单词“Rent”(您刚粘贴的文本的第二段)之前单击,然后选择“插入”>“水平线”以便在两个促销之间放置一条水平线。
10保存您的文档。
11切换到 promotions.txt 文件。选择“文件”>“关闭”关闭该文件。
第 2 章34
将样式添加到文本在 HTML 中设计文本的样式有多种方法。一种方法是使用层叠样式表 (CSS) 来定义特定的
HTML 标签以按照特定方式设置格式。
本课说明如何从预先设计的样式表创建简单的 CSS 样式表,然后将新样式表应用于文本并修改样式。
若要创建 CSS 样式表,请执行以下操作:
1选择“文件”>“新建”。
2在“新建文档”对话框中,从左边的类别列表中选择“CSS 样式表”类别。
对话框内中间列的列表重新标为“CSS 样式表”。随即会出现一组预先设计的样式表。
3在“CSS 样式表”列表中,选择一个样式表。对于“Global Car Rental”站点,选择“基本:Verdana”,该样式表通过指定 body、td 和 th 标签的字体对它们进行重新定义。然后单击“创建”。
Dreamweaver 将创建一个新的文本文件,该文件包含一小组预先定义的 CSS 样式。
4选择“文件”>“保存”来保存新的 CSS 文件。将其保存在站点的 Assets 文件夹中并命名为
“text.css”(或任何其他所需的名称)。
5选择“文件”>“关闭”以关闭该 CSS 文件。
在 Dreamweaver 中创建您的第一个 Web 站点35
若要使用 CSS 样式设置文本的样式,请执行以下操作:
1在“窗口”菜单中,选择一个 HTML 文件(例如 index.htm)。
注意,如果您的系统参数选择设置为不显示文件扩展名,则 index.htm 文件在“窗口”菜单中显示时其名称为
“index”。
2选择“窗口”>“CSS 样式”以显示“CSS 样式”面板。
3在“CSS 样式”面板的顶部,单击“编辑样式”单选按钮显示可用的样式。
如果以前没有为该文档定义样式,则没有样式可用。
4在“CSS 样式”面板的底部,单击“附加样式表”按钮。
即会出现“链接外部样式表”对话框。
5在“链接外部样式表”对话框中,单击“浏览”定位一个样式表。
6在“选择样式表文件”对话框中,浏览到并选择您在 Assets 文件夹中创建的新样式表,然后单击“确定”(Windows) 或“选择”(Macintosh) 附加该样式表。
7在“链接外部样式表”对话框中,单击“确定”附加该样式表。
该样式表的名称和内容显示在“CSS 样式”面板中。样式表中定义的样式将应用到 HTML
文档的文本中。例如,正文文本以 Verdana 显示。
8保存您的文档。
若要编辑样式表中的样式,请执行以下操作:
1在“CSS 样式”面板的顶部,单击“编辑样式”单选按钮显示可用的样式。
2在“CSS 样式”面板中选择 CSS 文件的名称,然后单击“CSS 样式”面板底部的“编辑样式表”按钮。
即会出现一个对话框,显示该样式表中样式的名称。
第 2 章36
3选择其中的一个样式,例如 body,然后单击“编辑”。
即会出现“CSS 样式定义”对话框。
4输入文本的大小,例如 13 像素。按需要调整其他选项。
5单击“确定”重新定义样式。
6编辑其他的样式。为了创建“Global Car Rental”站点中使用的样式,请将 body、td 和 th
样式的大小设置为 13 像素。
7编辑完样式后,单击“保存”按钮保存您的更改并关闭样式表对话框。
更改后的样式将应用于您的文档。例如,正文文本以 13 像素的 Verdana 显示。
添加图像在本课中,您可以将图像添加到正在处理的页。如果您具有自己的图像,则可以改用这些图像,
但是第一次尝试添加图像时,我们建议使用 Dreamweaver 的示例站点提供的图像。
如果您尚未按照第23页的“将资源添加到您的站点”中说明的过程将“Global Car Rental”站点的资源拷贝到您的站点的本地根文件夹,现在请完成该操作。
若要将图像添加到您的文档,请执行以下操作:
1如果您尚未保存文档,请保存您的文档。
您可以将图像插入未保存的文档中,但是如果这样做,将出现一个对话框,通知您用于图像的 URL 将是到该图像的完整本地路径。如果您采取此方法,Dreamweaver 将在您保存文档时修复 URL,但是在添加图像之前保存文档是最简单的方法。
2若要插入图像以代替现有的图像占位符,请双击该占位符。例如,若要在“Global Car
Rental”页的左上角插入公司徽标,请双击标有“image (100 x 50)”的小占位符。
即会出现“选择图像源”对话框。
在 Dreamweaver 中创建您的第一个 Web 站点37
3在靠近此对话框的底部,确保“相对于”弹出式菜单设置为“文档”。
有关文档相对 URL 和根目录相对 URL 的信息,请参见 Dreamweaver“帮助”(“帮助”>
“使用 Dreamweaver”)。
4浏览到 Assets 文件夹中的某个图像(例如 logo.jpg)。
5单击“确定”或“选择”(Windows) 或者“打开”或“选择”(Macintosh) 插入该图像。
在文档窗口中,该图像显示在刚才占位符所在的位置。
6单击您在第30页的“添加图像占位符”中创建的大图像占位符将其选中。(不要双击该占位符。)
您可以使用与用于另一个占位符的相同方法用图像替换此占位符,但是以下说明提供了一种替代方法。
7确保“站点”面板和属性检查器正在显示(如果它们不可见,则选择“窗口”>“站点文件”和“窗口”>“属性”)。
8在属性检查器中,从“源文件”文本框的“指向文件”图标拖到“站点”面板。(确保是从
“源文件”文本框旁边的“指向文件”图标而不是“链接”文本框旁边的那个“指向文件”
图标开始拖动的。)当您指向 Assets 文件夹时继续按住鼠标按钮(如果该文件夹关闭);该文件夹将打开。当您指向 images 文件夹时仍继续按住鼠标按钮;该文件夹也将打开。继续按住鼠标按钮,直到鼠标指针在 vintage.jpg 文件上为止。松开鼠标按钮以选择 vintage.jpg。
在文档窗口中,该图像显示在刚才占位符所在的位置。如果显示错误的图像,则查看“源文件”文本框中的文件名;如果您选择了错误的文件,则再次拖动“指向文件”图标。
9若要在没有插入占位符的位置插入图像,请在设计视图中单击将插入点放置在需要显示图像的位置,然后选择“插入”>“图像”。
如果您插入一个图像,而该图像的图像文件不在您的站点的本地根文件夹中,则
Dreamweaver 提供选项自动将该图像拷贝到站点中。
10保存您的文档。
设置背景颜色在 Dreamweaver 附带的预先设计的页中,表格单元格的背景颜色大多设置为灰色;对于大多数站点,您将需要更改颜色来匹配站点的颜色方案。
若要设置表格单元格的背景颜色,请执行以下操作:
1如果未打开属性检查器,则选择“窗口”>“属性”将其打开。
2如果属性检查器已折叠(只显示其标题条),则单击标题条中的扩展箭头将其展开。
第 2 章38
3如果属性检查器未显示所有属性,则单击属性检查器右下角的扩展箭头查看所有属性。
4按住 Ctrl 键 (Windows) 或 Command 键 (Macintosh) 单击某个单元格以选择该单元格。例如,在“Global Car Rental”示例页中,现在有一个表格单元格包含汽车租赁公司的徽标图像;按住 Ctrl 键或 Command 键单击这个包含徽标图像的单元格。
属性检查器的下半部分显示单元格属性。如果属性检查器的下半部分不可见,则单击属性检查器右下角的扩展箭头查看所有属性。
5在属性检查器中,单击显示在两个“背景”标签中下面那个标签旁边的“背景颜色”按钮。
即会出现颜色选择器,鼠标指针变为滴管的形状。
6选择一种颜色。您可以在颜色选择器的调色板中选择颜色,或单击显示上的任意位置来选择所单击像素的颜色。例如,单击 Global 徽标图像的背景使表格单元格的背景颜色与图像的背景颜色一致。
表格单元格的背景颜色变为您所选择的颜色。
7为每个要更改其背景颜色的表格单元格重复该过程。在“Global Car Rental”示例页中,更改所有导航条表格单元格和第二列文本中标题单元格(该单元格现在包含文本“Globe-
Trotter Promotions”)的背景颜色,使它们都与 Global 徽标的背景颜色一致。
8保存您的文档。
在 Dreamweaver 中创建您的第一个 Web 站点39
查看代码让我们暂时休息一下看看当您将内容添加到页时 Dreamweaver 在执行哪些操作。当您添加文本、图像和其他内容时,Dreamweaver 生成 HTML 代码。
Dreamweaver 允许您以下面两种方式中的任意一种查看文档:设计视图(在设计视图中文档看起来与它在浏览器中的外观非常相似)和代码视图(您可以在代码视图中看到基础 HTML 代码)。您还可以使用同时显示代码视图和设计视图的拆分视图。
若要查看文档的 HTML 代码,请执行以下操作:
1如果文档工具栏尚不可见,则选择“查看”>“工具栏”>“文档”。
2在文档工具栏中,单击“显示代码视图和设计视图”按钮。
窗口拆分,显示基础 HTML 代码。
您可以在代码视图中编辑代码。对代码进行的更改在您刷新视图之前不会出现在设计视图中。
若要让代码更改显示在设计视图中,请执行以下操作之一:
单击设计视图中的任意位置。
单击文档工具栏中的“刷新”按钮。
Dreamweaver 提供了许多高级功能帮助您在代码视图中进行编码,有关更多信息,请参见第 3
章第49页的“在 Dreamweaver 中编辑代码”。
当您处理自己的页时,您可以使用任何一个最适合的视图。我们假设在本章剩下的部分中您将使用设计视图。
若要只显示设计视图,请执行以下操作:
1如果文档工具栏尚不可见,则选择“查看”>“工具栏”>“文档”。
2在文档工具栏中,单击“设计视图”按钮。
第 2 章40
创建第二页在本课中,您将为您的站点创建第二页;在下一课(第42页的“添加页之间的文本链接”)
中,您将创建页之间的链接。
创建第二页可以使用多种方法。在本课中,您将通过拷贝第一页来创建第二页,因此第二页将与第一页具有相同的布局。
注意,如果您要从头开始创建自己的布局,则可以使用 Dreamweaver 表格编辑工具或布局视图。其他的布局方法包括框架和层。但是,本课中不涉及这些可选方法。
在一个较复杂的站点中,确保所有页都具有相同布局的最佳方式就是使用模板。有关阅读哪些部分来了解表格编辑、布局视图、框架、层和模板的信息,请参见第47页的“其他参考资料”。
您在“Global Car Rental”站点中创建的第二页是客户服务页。您将通过以下方法创建客户服务页:制作主页 (index.htm) 的拷贝,然后删除不应该出现在客户服务页上的内容,最后添加新内容。
有关如何添加文本和对文本进行格式设置的更多信息,请参见第33页的“添加具有样式的文本”。
若要创建第一页 (index.htm) 的拷贝,请执行以下操作:
1在“站点”面板中,右击 (Windows) 或按住 Control 键单击 (Macintosh) 您创建的第一页的文件名,即 index.htm(或您为该文件指定的任何其他名称)。
2从上下文菜单中选择“复制”。
随即会显示该文件的拷贝。
提示,如果拷贝没有立即显示,则单击“站点”面板中的“刷新”按钮使其显示出来。
3选择新的复制文件。稍停片刻,然后再次单击它使文件名可以编辑(这与在 Windows 资源管理器和 Finder 中使用的方法相同)。
4为新文件指定一个新名称,例如 customerService.htm。
若要从新页中删除多余的内容,请执行以下操作:
1通过在“站点”面板中双击新的 customerService.htm 页将其打开。
查看文档窗口的标题条以确保您正在查看 customerService.htm 文件。标题条应该显示
“Global Car Rental 主页”,然后是一个文件夹名称和一个文件名;文件名应该是
customerServe.htm(或您在前面的步骤中为其命名的任何其他名称)。
2在 customerService.htm 页中,通过单击大图像(在主文本列中显示汽车的图像)将其选中。
3在标签选择器中,单击 <td> 标签。
4按Backspace 键 (Windows) 或 Delete 键 (Macintosh)。
将删除该表格单元格中的所有内容,包括图像和文本。
5保存您的文档。
在 Dreamweaver 中创建您的第一个 Web 站点41
若要将文本添加到新页,请执行以下操作:
1在“站点”面板中,找到 Assets 文件夹中的 custServInfo.htm 文件。双击该文件的图标将其打开。
此文件包含要添加到客户服务页的内容。如果您在创建自己的站点,您将在此处添加自己的内容,但是为了本课程的需要,为您提供了此内容。
2在 custServInfo.htm 文档窗口中,选择“查看”>“代码”查看 HTML 代码。
3还是在 custServInfo.htm 文档窗口中,按 Control+A 组合键 (Windows) 或 Command+A 组合键 (Macintosh) 选择文件中的全部内容。
如果在进行此操作时您不在代码视图中,则可能需要多次按 Control+A 组合键或
Command+A 组合键才能选中全部内容;如果插入点在一个表格单元格中,“全选”最初只是选择该单元格。为了简单起见,在选择全部内容之前先切换到代码视图。
4按 Control+C 组合键 (Windows) 或 Command+C 组合键 (Macintosh) 拷贝所有内容。
5切换回 customerService.htm 文档。在现在为空的主文本列(左边的宽列)中单击。
6选择“编辑”>“粘贴 HTML”。
您从 custServInfo.htm 文件拷贝的 HTML 代码被粘贴到此文档中。(如果您选择“编辑”>
“粘贴”而不是“编辑”>“粘贴 HTML”,则 HTML 代码会被当作文本粘贴到设计视图中。如果在此步骤中 HTML 代码显示在设计视图中,则选择“编辑”>“撤消”并重试。)
已将 text.css 样式表附加到此页上,因此将自动对文本进行格式设置。
添加页之间的文本链接您可以在站点创建过程的任何阶段创建链接。如果您按顺序学习本指南中的课程,那么您现在应该已经掌握了如何创建页并在页中放置内容;接下来在本课中您将学习在已创建的页之间创建链接。
以下是另外两种为站点创建链接的常见方法:
先创建一组空白页,然后在它们之间添加链接,最后向页中添加内容。
在您创建页时,指定链接至尚不存在的页;随后,以您已链接的文件名创建页。
若要创建从客户服务页到 index.htm 的链接,请执行以下操作:
1如果客户服务页不是当前页,则切换到该页。(如果该页未打开,则在“站点”面板中双击它的图标将其打开。)
2在左边宽文本列的底部,选择单词“Home Page”。
如果在创建页时没有向客户服务页左边的列中添加文本,则在该文本列中输入单词“Home
Page”并将其选中。
3如果属性检查器未打开,则选择“窗口”>“属性”将其打开。
4单击属性检查器中“链接”文本框旁边的文件夹图标。浏览到站点本地根文件夹中的
index.htm 文件。
第 2 章42
为图形化链接创建鼠标经过图像鼠标经过图像是当站点的访问者用鼠标指针指向该图像时发生变化的图像。例如,当访问者指向页上的某个按钮时该按钮可能会变亮。
鼠标经过图像由两个图像组成:当页最初载入浏览器时显示的图像,以及鼠标指针移到原始图像上时显示的图像。
注意,当创建鼠标经过图像时,确保使用两个具有相同尺寸的图像。
若要创建鼠标经过图像,请执行以下操作:
1如果主页 (index.htm) 不是当前页,则切换到主页。(如果该页未打开,则在“站点”面板中双击它的图标将其打开。)
2在文档窗口中,将插入点放置在要显示鼠标经过图像的位置。例如,在“Global Car Rental”
主页上,双击标有“Lorem”的导航条表格单元格并按Backspace 键 (Windows) 或 Delete 键
(Macintosh) 删除该文本,并将插入点保留在该单元格中。
3选择“插入”>“交互式图像”>“插入鼠标经过图像”。
4在“插入鼠标经过图像”对话框中,在“图像名称”文本框中为该图像键入一个名称,例如
“home-image”。
这样就为该图像指定了一个专用的名称,可以在 HTML 代码中方便地识别该图像。
5在“原始图像”文本框中,单击“浏览”;然后浏览到站点 images 文件夹(Assets 文件夹中)中的 btnHome.jpg 文件。确保“相对于”弹出式菜单设置为“文档”;然后单击“确定”或“选择”(Windows),或者单击“打开”或“选择”(Macintosh)。
“原始图像”文本框指示当页最初在浏览器中显示时显示哪个图像。
6在“鼠标经过图像”文本框中,单击“浏览”;然后浏览到站点 images 文件夹中的
btnHome_on.jpg。确保“相对于”弹出式菜单设置为“文档”;然后单击“确定”或
“选择”(Windows),或者单击“打开”或“选择”(Macintosh)。
“鼠标经过图像”文本框指示当鼠标指针指向浏览器中的图像时显示哪个图像。
7确保选择了“预载鼠标经过图像”选项,这样当在浏览器中打开该页时就载入鼠标经过图像,
保证了当用户将鼠标指针移到原始图像时图像间的快速转换。
在 Dreamweaver 中创建您的第一个 Web 站点43
8在“按下时,前往的 URL:”文本框中,单击“浏览”按钮并浏览到 index.htm。
index.htm 文件就是您正在编辑的文件,因此该步骤使鼠标经过图像链接到您在其上放置鼠标经过图像的页。让链接指向该链接所在的页看上去可能是多余的,但是您还将在其他页上使用同一组导航鼠标经过图像,因此该链接将允许访问者从其他包含此导航条的页返回
index.htm 页。
9单击“确定”关闭该对话框。
指定的原始图像显示在文档中。
10保存您的文档。
注意,在 Dreamweaver 文档窗口中用鼠标指针指向鼠标经过图像时它们不会发生变化;鼠标经过图像只在浏览器中起作用。为了确保鼠标经过图像正常工作,您应该在浏览器中预览您的文档。
对于“Global Car Rental”站点,在另外两个导航条表格单元格(分别标有“Ipsum”和“Dolor”
的两个单元格)中再创建两个鼠标经过图像:一个鼠标经过图像使用 btnCustomerService.jpg 和
btnCustomerService_on.jpg 图像,链接到 customerService.htm;另一个鼠标经过图像使用
btnLocations.jpg 和 btnLocations_on.jpg 图像,链接到 locations.htm.。请注意,您尚未创建
locations.htm 文件;只是在“插入鼠标经过图像”对话框的“单击时,转到 URL”文本框中键入该文件名。
拷贝导航条创建了工作的导航条之后,您便可以在所有页上重复使用它了。在本课中,您将拷贝导航条表格单元格并将它们粘贴到您的第二个页中。
有多种在 Dreamweaver 中重复使用内容的方法,包括库项目、模板和代码片断。
若要将导航条拷贝到另一页中,请执行以下操作:
1在 index.htm 文件中,单击包含“Home”鼠标经过图像的表格单元格。
2在标签选择器中,选择最右侧的 <tr> 标签。
将选中包含三个导航条鼠标经过图像的表格行。
3选择“编辑”>“拷贝”。
4切换到 customerService.htm 文件。
5单击标有“Lorem”的导航条表格单元格。
6在标签选择器中,选择最右侧的 <tr> 标签。
7选择“编辑”>“粘贴”。
即会粘贴导航条鼠标经过图像代替现有的表格单元格。
8保存您的文档。
第 2 章44
在浏览器中预览设计视图可以使您对页在浏览器中的外观有一个大概的了解,但如果要确切地了解页的外观,只能在浏览器中进行预览。每种浏览器的每个版本都有其自身的特点;Dreamweaver 力求生成在不同的浏览器间显示时外观尽可能相似的 HTML,但有时差异是无法避免的。(这正是为什么
Dreamweaver 不直接显示预览的原因;Dreamweaver 不可能模仿所有不同浏览器的全部不同的行为。)
“在浏览器中预览”显示当您发布这些页时它们的外观。
若要预览页,请执行以下操作:
1如果 index.htm 不是当前文档,则切换到该文档。(如果它未打开,则将其打开。)
2按 F12 键。
如果您的主浏览器没有运行,则它将启动。它显示索引页。
注意,Dreamweaver 应该自动检测到您的主浏览器并使用它来进行预览。如果不显示预览,或者如果它未显示在您预期的浏览器中,则切换回 Dreamweaver(如果需要)并选择“文件”>“在浏览器中预览”>“编辑浏览器列表”。即会显示“在浏览器中预览”参数选择对话框;将正确的浏览器添加到列表中。有关更多信息,请单击“参数选择”对话框中的“帮助”按钮。
3移动鼠标指针指向鼠标经过图像查看图像是否变化。单击链接确保它们正常工作。
设置远程站点,然后发布现在,您已创建了一个小型且功能齐全的 Web 站点。下一步就是通过将文件上传到远程 Web
服务器来发布该站点。
在继续之前,您必须具有对远程 Web 服务器(例如您的 ISP 的服务器、您的客户所拥有的服务器、公司中的 Intranet 服务器,或者 Windows 计算机上的 IIS 或 RWS 服务器)的访问权。如果您尚不具有对这样一个服务器的访问权,请与您的 ISP、客户或系统管理员联系。
您的远程根文件夹为空时最适合以下过程的进行。如果您的远程站点已经包含文件,则在远程站点(在服务器上)中创建一个空文件夹,然后将该空文件夹用作您的远程根文件夹。
以下过程假设您已经设置了一个本地站点。有关更多信息,请参阅第18页的“设置本地站点”。
若要连接到远程站点,请执行以下操作:
1选择“站点”>“编辑站点”。
2选择一个站点(例如“Global Car Rental”),然后单击“编辑”。
3单击对话框顶部的“基本”选项卡。
在 Dreamweaver 中创建您的第一个 Web 站点45
4当设置本地站点时,您已填写了“基本”选项卡中的前几个步骤,因此单击几次“下一步”,
直到向导顶部高亮显示“正在共享文件”步骤。
5在标有“您如何连接到远程服务器?”的弹出式菜单中,选择一种连接到远程站点的方法。
连接到 Internet 上的服务器的最常见方法是使用“FTP”;连接到您的 Intranet 上的服务器的最常见方法是使用“本地/网络”。如果您不确定此处要选择哪种方法,请询问服务器的系统管理员。
6如果您选择“FTP”,则输入以下选项:
输入服务器的主机名(例如 ftp.macromedia.com)。
在询问哪个文件夹包含您的文件的文本框中,输入服务器上从 ftp 根文件夹到远程站点的根文件夹的路径。如果您不确定,请咨询您的系统管理员。
在许多情况下,此文本框应该留空。
在相应的文本框中输入您的用户名和密码,然后单击“测试连接”。
如果连接不成功,请咨询您的系统管理员。
7如果您选择“本地/网络”,则单击文本框旁边的文件夹图标,然后浏览到远程站点的根文件夹。
8单击“下一步”。
9不要启用该站点的存回和取出。
如果您和您的同事正在创建一个较大的站点,则存回和取出功能可帮助您防止互相覆盖彼此的文件。但是,对于此站点,您不需要此功能。
10单击“下一步”。
11单击“完成”以完成远程站点的设置。
12再次单击“完成”完成对站点的编辑。
第 2 章46
若要将您的页上传到远程站点,请执行以下操作:
1在“站点”面板中,选择站点的本地根文件夹。
2单击“上传文件”按钮。
所有站点文件将被上传到远程站点。
3在浏览器中打开您的远程站点以确保正确上传了所有内容。
其他参考资料
Dreamweaver 是一个庞大的应用程序,具有许多强大的功能。本指南只涉及一些基础知识。
《入门》这一章着重介绍使用设计视图创建静态站点。有关代码视图和在 Dreamweaver 中手工编码的信息,请参见第 3 章第49页的“在 Dreamweaver 中编辑代码”。有关创建数据库驱动
Web 应用程序基础知识的信息,请参见第 4 章第59页的“了解 Web 应用程序”和第 5 章第
71页的“在 Dreamweaver MX 中开发 Web 应用程序”。
有关《入门,这一章中所涉及主题的更多详细信息,请参见 Dreamweaver“帮助”(“帮助”>
“使用 Dreamweaver”)。
除了有关特定主题的信息之外,Dreamweaver“帮助”还提供有关其他资源的信息,例如
Macromedia 支持中心和在线论坛。
在 Dreamweaver 中创建您的第一个 Web 站点47
第 2 章48
第 3 章在
Dreamweaver
中编辑代码尽管 Web 开发人员可以利用 Macromedia Dreamweaver MX 提供的各种可视化工具,但许多开发人员还是使用编码工具来完成工作。Dreamweaver 具有许多新功能,为您提供了所需的专业编码环境。
本章简要介绍了 Dreamweaver 所提供的新的专业编码环境。有关更多信息,请参见
Dreamweaver 帮助(“帮助”>“使用 Dreamweaver”)。
切换到编码工作区如果您在安装期间没有这么做的话,您现在可以使工作区在外观和感觉上类似于 HomeSite 和
ColdFusion Studio 的流行编码环境。
注意,Macintosh 用户不能更改工作区。
49
若要采用新的编码工作区,请执行以下操作,
1选择“编辑”>“参数选择”,然后从左侧的分类列表中选择“常规”。
即会显示“常规”分类。
2单击“更改工作区”按钮。
即会显示“工作区设置”对话框。
3选择“Dreamweaver MX 工作区”选项,然后选择“HomeSite/代码编写者样式”选项。
4单击“确定”两次以关闭“参数选择”对话框。
5关闭 Dreamweaver,然后重新启动它。
第 3 章50
将文件夹拷贝到您的站点在开始这些课程前,您需要设置站点并将文件夹拷贝到该站点。“站点”面板中的集成文件浏览器使您可以查看本地硬盘和网络。当所处理的文件不在“站点”面板上显示的当前站点中时,
这一功能将十分有用。
若要将页面拷贝到您的站点中,请执行以下操作:
1如果“站点”面板尚未打开,则选择“窗口”>“站点”以打开它。
2在“站点”面板中,从“站点”弹出式菜单中选择您已在上一章中定义的站点的名称。
如果您尚未定义一个站点,请参见第18页的“设置本地站点”。您需要在继续前定义一个站点。
从弹出式菜单中选择站点名称后,Dreamweaver 将显示该站点中的文件。
3展开“桌面”(Windows) 或“计算机”(Macintosh) 图标可以看到可用的磁盘。
4根据需要展开文件夹以访问 Dreamweaver 应用程序文件夹,然后展开 Samples 文件夹。
5在 Samples 文件夹中,展开 GettingStarted 文件夹,然后选择 Code 文件夹,并且按 Ctrl+C
组合键 (Windows) 或 Command+C 组合键 (Macintosh) 以拷贝它。
6滚动回“站点”面板的顶部,然后选择站点文件夹。
7按 Ctrl+V 组合键 (Windows) 或 Command+V 组合键 (Macintosh) 将文件夹的拷贝粘贴到您的站点中。
查看已完成的页面在您开始前,可以查看已完成的页面以查看页面的大致情形。当然,页面可能会发生变化。
若要查看已完成的页面,请执行以下操作:
1如果“站点”面板尚未打开,则选择“窗口”>“站点”以打开它。
2展开“桌面”(Windows) 或“计算机”(Macintosh) 图标可以看到可用的磁盘。
3根据需要展开文件夹以访问 Dreamweaver 应用程序文件夹,然后展开 Samples 文件夹。
4在 Samples 文件夹中,展开 GettingStarted 文件夹,然后展开 FinalSite 文件夹。
5在 FinalSite 文件夹中,双击 index.htm 以打开它,然后双击 location_comp.htm。
Dreamweaver 将在“文档”窗口中显示这些页面。
6在完成后关闭这些页面。
在 Dreamweaver 中编辑代码51
打开多个页面使用“站点”面板打开本课所需的多个页面。
若要打开多个页面,请执行以下操作:
1如果“站点”面板尚未打开,则选择“窗口”>“站点”以打开它。
2在您的站点中,展开 Code 文件夹。
3双击 index.htm 以打开它,然后双击 location_start.htm。
这两个文件是本课所需的文件。
4在“文档”窗口中,单击工具栏上的“显示代码视图”按钮,或者选择“查看”>“代码”
以切换到“代码”视图并查看文件的源代码。
5若要在各页面间迅速切换,请按下 Ctrl+Tab 组合键或单击页面底部的选项卡(仅限 Windows)。
注意,您必须最大化页面才可以看到这些选项卡。
通过拖动添加图像在本课中,您将为“位置”页向主页添加一个按钮,这类似于用于“主页”和“客户服务”的按钮。可以在页面上直接输入代码,单击“插入”栏中的图像图标,或者使用图像 (IMG) 标签编辑器(选择该图像,右键单击 (Windows) 或按住 Control 键的同时单击 (Macintosh),然后选择“编辑标签”)。
另一个选择是从图像的文件夹拖动图像。
若要通过拖动添加一个图像,请执行以下操作:
1如果 index.htm 尚未打开,则在“代码”视图中打开它。
2在“文件”面板组中,打开“资源”面板(“窗口”>“资源”)。
3选择用于 btnLocations.jpg 的图像文件。
4将该图像文件拖入页代码中,然后将其放置在代码中以用于第一个表格中的第三个单元格。
提示,查找用于“主页”和“客户服务”按钮的代码。在用于上述两个按钮的两个单元格后面的表格单元格的结束 </
td> 标签前放置“位置”图像。
Dreamweaver 在插入点处插入代码以创建图像。
5选择“文件”>“保存”。
第 3 章52
使用标签选择器添加链接现在,您将使添加的按钮链接到“位置”页。除了手动输入用于链接的代码和使用“插入”栏添加链接外,您还可以使用标签选择器添加链接。
若要借助于标签选择器编写代码,请执行以下操作:
1如果 index.htm 尚未打开,则在“代码”视图中打开它。
2在用于第一个表的代码中,查找并选择您在上一节中插入的“位置”按钮的代码。
注意,确保您高亮显示整个 <img> 标签。
3用右键单击 (Windows) 或在按住 Control 键的同时单击 (Macintosh) 选定文本,然后从弹出式菜单中选择“插入标签”。
随即会出现标签选择器。
4依次选择“HTML 标签”、“页元素”、“常规”,然后在右侧的窗格中选择“A”。
注意,您还可以选择“HTML 标签”,然后在右侧的窗格中选择“A”标签,而不必首先选择“页元素”、“常规”。
5单击“插入”。
即会出现锚标签 (<a>) 的标签编辑器。
6在“HREF”文本框中,输入 location_start.htm 或单击“浏览”按钮浏览到该文件。
注意,如果您想要链接到一个 Web 页,请输入该页的 URL。
7单击“确定”以关闭标签编辑器。
8单击“关闭”以关闭标签选择器。
Dreamweaver 将代码插入您的页面中以创建该链接。
9在“文档”窗口中,选择“文件”>“保存”。
在 Dreamweaver 中编辑代码53
编辑标签接下来,您将使用标签检查器查找“位置”页面中的特定标签并迅速对其进行更改。
若要使用标签检查器编辑一个标签,请执行以下操作:
1如果 location_start.htm 尚未打开,则在“代码”视图中打开它。
2如果标签检查器尚未打开,则执行以下操作之一打开它:
选择“窗口”>“标签检查器”。
在“代码”面板组中,单击“标签检查器”选项卡。
标签检查器向您提供您的页面中的所有标签的结构化视图。它还显示每一标签的属性。
3在“文档”窗口的“代码”视图中,找到标题为“Rental Locations”的文本。
第 3 章54
4在下面的标题后的段落标签之间选择不换行的空格实体 (&nbsp;):
<p><FONT SIZE="+2" COLOR="#FF6600">Rental Locations</FONT></p>
<p>
&nbsp;</p>
5选择“插入”>“表格”,然后在“插入表格”对话框中单击“确定”以接受默认值。
Dreamweaver 插入表格代码。
6单击工具栏上的“刷新”按钮。
“标签检查器”面板进行更新,这样焦点位于您刚插入的“Table”标签上。属性列表出现在该标签下。
7在“文档”窗口中,单击几个不同的标签以查看标签检查器是如何更新该标签以及该标签显示的属性的,然后再次单击“Table”标签以便其属性出现在标签检查器中。
8在“标签检查器”面板中,单击 align 属性旁边的空文本框。
随即出现弹出式菜单的箭头。
9单击弹出式菜单箭头,然后选择“center”。
Dreamweaver 在“文档”窗口中更改该代码。
10单击工具栏上的“显示设计视图”按钮或选择“查看”>“设计”以看到该表格。
11在“文档”窗口中,选择“文件”>“保存”。
查找与标签有关的信息如果您需要与标签的属性和属性值有关的帮助,则您可以在 Dreamweaver 中查找参考信息。
若要查找与一个标签有关的信息,请执行以下操作:
1如果 location_start.htm 尚未打开,则在“代码”视图中打开它。
2在“文档”窗口中,在 body 标签中选择文本“bgcolor”。
3用右键单击 (Windows) 或在按住 Control 键的同时单击 (Macintosh) 选定文本,然后从弹出式菜单中选择“参考”。
随即打开“参考”面板并显示与 bgcolor 属性有关的信息。
注意,您还可以选择“窗口”>“参考”以访问“参考”面板。此面板集成在“代码”组面板的开发环境中。
在 Dreamweaver 中编辑代码55
4有关特定标签属性的信息,请从弹出式菜单中选择该属性。
使用代码提示添加图像在此课程中,您将向“位置”页添加一个徽标。
若要手动将代码添加到页面上,只需在“文档”窗口中单击并开始键入即可。您还可以使用在
Dreamweaver 中提供的新的代码提示功能以加快工作速度。
若要借助于代码提示编写代码,请执行以下操作:
1如果 location_start.htm 尚未打开,则在“代码”视图中打开它。
2查找用于包含文本“The International Car Rental Specialists”的表格行的代码;在代码中为位于该文本前面的单元格选择非换行的空格实体 (&nbsp;):
<td rowspan="2" bgcolor="#424973">&nbsp;</td>
3键入图像标签的左尖括号 (<)。
在插入点处出现标签列表。
注意,您可以通过选择“编辑”>“参数选择”或“Dreamweaver”>“参数选择”(Mac OS X),然后从左侧的分类列表中选择“代码提示”,设置延迟的时间长度。您可以通过按空格键打开“代码提示”,并且您可以通过按 Esc 键随时关闭“代码提示”。
4从列表中选择 img 标签,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh) 以插入该标签。
提示,若要迅速滚动到一个标签,请键入该标签的第一个字母。
5按空格键可以显示该标签的属性列表。
6键入 src,然后按下 Enter 键 (Windows) 或 Return 键 (Macintosh)。
“浏览”按钮随即出现在您刚键入的代码下。
第 3 章56
7选择“浏览”按钮以定位到该图像文件,或者输入图像文件路径 Assets/images/logo.jpg。
8按下空格键,选择 alt 属性,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
9键入 Logo,然后将光标移到在单词Logo 后出现的引号的右侧。
10按空格键,选择 align 属性,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
即会显示 align 属性的已知值列表。
11从该列表中选择 top,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
12键入右尖括号 (>) 以完成该标签。
13在“文档”窗口中,选择“文件”>“保存”。
若要将属性添加到现有标签中,请将插入点置于恰好在该标签的结束尖括号 (>) 之前的地方并按空格键。即会显示属性列表。添加该属性并指定该属性的值(如果它具有值)。
检查您的更改在对您的代码进行任何更改后,您可以立即获得可视化的反馈。
若要看到您的代码的可视化表示形式,请执行以下两个操作之一:
单击工具栏上的“显示设计视图”按钮或选择“查看”>“设计”。
通过按 F12 键在 Web 浏览器中查看该页。若要关闭浏览器并返回到您的代码,请按 Alt-F4
组合键(仅限 Windows)。
使用“插入”栏添加链接现在,您将要添加指向您插入的徽标图像的链接,以便在用户单击该链接时打开主页。
用来创建链接的一个方法是,只需将锚标签 (<a>) 放置在代码中图像标签的周围,并且设置该锚标签的属性(可以借助于代码提示或不借助于代码提示)。添加链接的另一个方法是使用“插入”栏。
若要借助“插入”栏编写代码,请执行以下操作:
1如果 location_start.htm 尚未打开,则在“代码”视图中打开它。
2高亮显示您要插入的 logo.jpg 图像的代码。
注意,确保您高亮显示整个 <img> 标签。
在 Dreamweaver 中编辑代码57
3在“插入”栏的“常用”选项卡中,单击“超链接”按钮。
即会显示“超链接”对话框,同时显示已输入的图像标签。
4在“链接”文本框中,输入 index.htm 或单击文件夹图标以浏览到该文件。
注意,若要链接到一个 Web 页,请输入该页的 URL。
5单击“确定”。
Dreamweaver 在您的页面中插入该代码,以便创建环绕该图像的链接。
6选择“文件”>“保存”。
打印您的代码您可以打印您的代码以脱机编辑它、将它存档或分发它。
若要打印代码,请执行以下操作:
1在“代码”视图中打开一页。
2选择“文件”>“打印代码”。
提示,若要带行数一起打印,则在打印前选择“查看”>“代码视图选项”>“行数”。
其他参考资料有关 Dreamweaver 中手工编码功能的信息,请参见 Dreamweaver 帮助(“帮助”>“使用
Dreamweaver”)。
有关在 Dreamweaver 的可视化设计环境中工作时访问您的代码的信息,请参见 Dreamweaver 帮助(“帮助”>“使用 Dreamweaver”)。
第 3 章58
第 4 章了解
Web
应用程序
Web 应用程序是许多 Web 页的集合,这些 Web 页与用户进行交互、相互之间进行交互、并与
Web 服务器上的多种资源(包括数据库)进行交互。在开始建立您自己的 Web 应用程序之前,
您应该熟悉本章中讨论的主题。
本章包含以下主题:
第59页的“Web 应用程序是什么?”
第61页的“Web 应用程序如何工作”
第64页的“访问数据库”
第66页的“创作动态页”
第67页的“选择服务器技术”
第67页的“常用术语”
Web 应用程序是什么?
Web 应用程序是一个包含多个页的 Web 站点,这些页存储在 Web 服务器上,其部分内容或全部内容是未确定的。只有当用户请求 Web 服务器中的某个页时,才确定该页的最终内容。因为页的最终内容基于用户的操作随请求的不同而变化,所以这种页称为动态页。
建立 Web 应用程序就是为了解决多种问题。本节介绍 Web 应用程序的一般用途并给出一个简单的示例。
59
Web 应用程序的一般用途对于用户和开发人员,Web 应用程序都有许多用途,包括以下几方面,
使用户可以快速方便地在一个内容丰富的 Web 站点上查找信息。
这种 Web 应用程序使用户能够搜索、组织和浏览所需的内容。典型的示例包括公司的
Intranet、Microsoft MSDN (http://www.msdn.microsoft.com) 和 Amazon.com (http://
www.amazon.com)。
收集、保存和分析用户提供的数据。
过去,在 HTML 表单中输入的数据以电子邮件消息的形式发送给员工或 CGI 应用程序进行处理。而 Web 应用程序可以将表单数据直接保存到数据库,并且可以提取数据并创建基于
Web 的报表以进行分析。典型的示例包括网上银行页、商店结帐页、调查和用户反馈表单。
对内容不断变化的 Web 站点进行更新。
Web 应用程序使 Web 设计人员不需要再频繁地更新站点的 HTML。内容提供方(例如新闻编辑)向 Web 应用程序提供内容,Web 应用程序将自动更新站点。典型的示例包括 E
conomist (http://www.economist.com) 和 CNN (http://www.cnn.com)。
Web 应用程序示例
Clay 是一名专业的 Web 设计人员,同时也是 Dreamweaver 的长期用户,他负责为一个拥有
1000 名员工的中型公司维护 Intranet 和 Internet 站点。一天,人力资源部的 Jill 来询问 Clay 一个问题。人力资源部正在实施一个员工健身计划,该计划对员工完成的每英里步行、骑自行车或跑步进行积分。每个员工都必须通过电子邮件将他/她每月所完成的总英里数报告给 Jill。月末,
Jill 将收集所有电子邮件并根据每个员工的总积分奖励他们少量现金。
Jill 的问题是这个健身计划太成功了。参与这个计划的员工太多,以致于每个月末 Jill 都要被这些电子邮件淹没。Jill 询问 Clay 是否有一个基于 Web 的解决方案。
Clay 建议采用一个基于 Intranet 的 Web 应用程序来执行以下任务:
让员工使用简单的 HTML 表单在 Web 页上输入他们的英里数
将员工的英里数存储在数据库中
根据英里数数据计算健身积分
允许员工跟踪他们每月的进展情况
使 Jill 在每个月末只要点击一下就可以访问总积分
Clay 利用 Dreamweaver MX,使这个应用程序在午餐时间前便得以完成并开始运行,
Dreamweaver MX 中具有快速方便地建立此类应用程序所需的多种工具。
第 4 章60
应用程序如何工作Web
Web 应用程序是一组常规和动态 Web 页的集合。常规 Web 页是当接到用户请求时不会发生更改的页:Web 服务器将该页发送到请求 Web 浏览器,而不对其进行修改。相反,在将动态 Web
页发送到请求浏览器之前,服务器将对该页进行修改。页发生更改的特性便是称其为动态的原因。
例如,您可以设计一个页来显示健身结果,并让某些信息(例如员工姓名和结果)在接到员工请求时再确定。
处理常规 Web 页一般的 Web 站点由一组相关的 HTML 页和文件组成,这些页和文件驻留在运行 Web 服务器的计算机上。
Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。当用户单击 Web 页上的某个链接、在浏览器中选择一个书签、或在浏览器的“地址”文本框中输入一个 URL 并单击“转到”时,便生成一个页请求。
常规 Web 页的最终内容由网页设计人员确定,当接到请求时,内容不发生更改。这里有一个示例:
<html>
<head>
<title>Call Department</title>
</head>
<body>
<strong>Call Department</strong><br>
Talk to someone in Sales.
</body>
</html>
该页的每一行 HTML 代码都是在将页放置到服务器之前由设计人员编写的。因为 HTML 在放置到服务器后不发生更改,所以这种页称为静态页。
注意,严格来说,“静态”页可能不是完全静态的。例如,一个鼠标经过图像或一个 Flash 影片可以使静态页活动起来。因此,本指南所说的静态页是在发送到浏览器时不进行修改的页。
了解 Web 应用程序61
当 Web 服务器接收到对静态页的请求时,服务器将读取该请求,查找该页,然后将其发送到请求浏览器,如下图所示,
至于 Web 应用程序,当用户请求页时,代码的某些行尚未确定。必须先由某种机制确定这些行才能将该页发送到浏览器。这种机制将在下一节中进行讨论。
处理动态页当 Web 服务器接收到对常规 Web 页的请求时,服务器将该页发送到请求浏览器,而不进行进一步的处理。当 Web 服务器接收到对动态页的请求时,它将作出不同的反应:它将该页传递给一个负责完成页面的特殊软件扩展。这个特殊软件叫做应用程序服务器。
步骤 1,Web 浏览器请求静态页。
步骤 2,Web 服务器查找页。
步骤 3,Web 服务器将页发送到请求浏览器。
第 4 章62
应用程序服务器读取页上的代码,根据代码中的指令完成页,然后将代码从页上删除。所得的结果将是一个静态页,应用程序服务器将该页传递回 Web 服务器,然后 Web 服务器将该页发送到请求浏览器。当该页到达时,浏览器得到的全部内容都是纯 HTML。此图是流程的视图,
步骤 1,Web 浏览器请求动态页。
步骤 2,Web 服务器查找该页并将其传递给应用程序服务器。
步骤 3,应用程序服务器查找该页中的指令并完成页。
步骤 4,应用程序服务器将完成的页传递回
Web 服务器。
步骤 5,Web 服务器将完成的页发送到请求浏览器。
了解 Web 应用程序63
访问数据库应用程序服务器使您可以使用服务器端的资源,例如数据库。例如,动态页可以指示应用程序服务器从数据库中提取数据并将其插入页的 HTML 中。有关更多信息,请参见“帮助”中的“数据库的初学者指南”(“帮助”>“使用 Dreamweaver”)。
从数据库中提取数据的指令叫做数据库查询。查询是由名为 SQL(结构化查询语言)的数据库语言所表示的搜索条件组成的。SQL 查询被写入页的服务器端脚本或标签中。
应用程序服务器不能直接与数据库进行通信,因为数据库的专用格式所呈现的数据无法解密,这类似于在“记事本”中打开的 Word 文档无法解密。应用程序服务器只能通过数据库驱动程序作为媒介才能进行通信。数据库驱动程序是在应用程序服务器和数据库之间充当翻译程序的软件。
在驱动程序建立通信之后,将对数据库执行查询并创建一个记录集。记录集是从数据库的一个或多个表中提取的数据子集。记录集将返回给应用程序服务器,而数据将应用到动态页中。
这是一个用 SQL 编写的简单的数据库查询:
SELECT lastname,firstname,fitpoints
FROM employees
该语句将创建一个三列的记录集,并用包含数据库中所有员工的姓、名和健身积分的行填充该记录集。有关更多信息,请参见“帮助”中的“SQL 入门”(“帮助”>“使用 Dreamweaver”)。
第 4 章64
这是一个对数据库进行查询并将数据返回给浏览器的过程图解,
只要数据库有适当的数据库驱动程序,您几乎可以将任何数据库用于您的 Web 应用程序。
如果您计划建立小型低成本的应用程序,则可以使用基于文件的数据库,例如用 Microsoft
Access 创建的数据库。如果您计划建立稳定的、对业务至关重要的应用程序,则可以使用基于服务器的数据库,例如用 Microsoft SQL Server、Oracle 9i 或 MySQL 创建的数据库。
如果您的数据库位于 Web 服务器之外的系统上,则应确保两个系统间有快速连接,以便您的
Web 应用程序可以快速有效地工作。
步骤 2,Web 服务器查找该页并将其传递给应用程序服务器。
步骤 5,驱动程序对数据库执行查询。
步骤 6,记录集被返回给驱动程序。
步骤 4,应用程序服务器将查询发送到数据库驱动程序。
步骤 7,驱动程序将记录集传递给应用程序服务器。
步骤 8,应用程序服务器将数据插入页中,然后将该页传递给 Web 服务器。
步骤 1,Web 浏览器请求动态页。
步骤 3,应用程序服务器查找页中的指令。
步骤 9,Web 服务器将完成的页发送到请求浏览器。
了解 Web 应用程序65
创作动态页创作动态页就是先编写 HTML,然后将服务器端脚本或标签添加到 HTML 中,使该页成为动态页。当您查看结果代码时,将显示语言嵌入在页的 HTML 中。因此,这些语言称为 HTML
嵌入式编程语言。以下示例使用 ColdFusion 标记语言 (CFML):
<html>
<body>
<b>Call Department</b><br>
<!--- embedded instructions start here --->
<cfset department="Sales">
<"cfoutput">
Talk to someone in #department#.
<"cfoutput">
<!--- embedded instructions end here --->
</body>
</html>
此页中嵌入的指令执行以下操作,
1创建一个名为“department”的变量并为其分配字符串“Sales”。
2在 HTML 代码中编写变量的字符串值“Sales”。
应用程序服务器将以下页返回给 Web 服务器:
<html>
<body>
<b>Call Department</b><br>
Talk to someone in Sales.
</body>
</html>
Web 服务器将该页发送到请求浏览器,浏览器将其显示如下:
Call Department
Talk to someone in Sales.
所使用的脚本编制语言或基于标记的语言取决于服务器技术。以下是 Dreamweaver MX 所支持的五种服务器技术最常用的语言,
有关更多信息,请参见第67页的“选择服务器技术”。
Dreamweaver 可以编写让页面工作所必需的服务器端脚本或标签,您也可以在 Dreamweaver 编码环境中手工编写这些脚本或标签。
服务器技术语言
ColdFusion
ColdFusion 标记语言 (CFML)
ASP.NET Visual Basic
C#
ASP VBScript
JavaScript
JavaServer Page (JSP) Java
PHP PHP
第 4 章66
选择服务器技术您可以使用 Dreamweaver MX 通过这五种服务器技术生成 Web 应用程序:ColdFusion、
ASP.NET、ASP、JSP 或 PHP。每种技术都与 Dreamweaver 中的一种文档类型相对应。为您的
Web 应用程序选择一种技术取决于多个因素,其中包括您对各种脚本编写语言的熟悉程度以及所要使用的应用程序服务器。
如果对于 Web 应用程序开发或一般的应用程序开发而言您还是新手,您可能更倾向于使用
ColdFusion,因为它提供了同样与 Dreamweaver 紧密集成的易于学习的服务器脚本撰写环境。
如果您熟悉其他服务器技术,例如 JSP、PHP、ASP 或 ASP.NET,Dreamweaver 同时还提供对这些技术的极佳的支持。
您对服务器技术的选择同样取决于您计划用于 Web 应用程序的应用程序服务器。应用程序服务器是一种软件,它帮助 Web 服务器处理包含服务器端脚本或标签的 Web 页。例如,如果您具有 ColdFusion MX,则可以选择 ColdFusion 作为服务器技术。如果您具有对运行 Microsoft
Internet Information Server 5 (IIS)(与,NET 框架一起运行)的服务器的访问权限,则可以选择 ASP.NET。如果您具有对含有 PHP 应用程序服务器的 Web 服务器的访问权限,则可以选择
PHP;如果您具有对含有 JSP 应用程序服务器(例如 Macromedia JRun)的 Web 服务器的访问权限,则可以选择 JSP。
在 Dreamweaver MX CD(仅限 Windows 版本)和 Macromedia Web 站点(网址为 http://
www.macromedia.com/software/coldfusion/)上可获得 ColdFusion MX 的开发人员版本。
有关更多信息,请参见“帮助”中的“建立应用程序服务器”(“帮助”>“使用 Dreamweaver”)。
要了解有关 ColdFusion 的更多信息,请参见 Dreamweaver 中的 ColdFusion 文档(“帮助”>
“使用 ColdFusion”)或访问 Macromedia Web 站点,网址为 http://www.macromedia.com/
software/coldfusion/。
要了解有关 ASP.NET 的更多信息,请访问 Microsoft Web 站点,网址为 http://asp.net/。
要了解有关 ASP 的更多信息,请访问 Microsoft Web 站点,网址为 http://msdn.microsoft.com/
library/default.asp?URL=/library/psdk/iisref/aspguide.htm。
要了解有关 JSP 的更多信息,请访问 Sun Web 站点,网址为 http://java.sun.com/products/
jsp/。
要了解有关 PHP 的更多信息,请访问 PHP Web 站点,网址为 http://www.php.net/。
常用术语本节列出了常用的术语。
应用程序服务器是一种软件,它帮助 Web 服务器处理包含服务器端脚本或标签的 Web 页。当从服务器请求这样一个页时,Web 服务器先将该页传递给应用程序服务器进行处理,然后再将该页发送到浏览器。有关更多信息,请参见第61页的“Web 应用程序如何工作”。
常见的应用程序服务器包括 Macromedia ColdFusion、Macromedia JRun Server、Microsoft
.NET 框架、IBM WebSphere 和 Apache Tomcat。
了解 Web 应用程序67
数据库是存储在表中的数据的集合。表的每一行组成一个数据记录,每一列组成记录中的一个域,如下所示。
数据库驱动程序是在 Web 应用程序和数据库之间充当翻译程序的软件。数据库中的数据是以专用格式存储的。数据库驱动程序使 Web 应用程序可以读取和操作本来无法解密的数据。
数据库管理系统(DBMS,或数据库系统)是用于创建和操作数据库的软件。常见的数据库系统包括 Microsoft Access、Oracle 9i 和 MySQL。
数据库查询是从数据库中提取记录集的操作。查询是由名为 SQL 的数据库语言所表示的搜索条件组成的。例如,查询可以指定在记录集中只包含某些列或某些记录。
动态页是在发送到浏览器之前由应用程序服务器在运行时自定义的 Web 页。有关更多信息,请参见第61页的“Web 应用程序如何工作”。
记录集是从数据库中一个或多个表中提取的数据子集,如以下示例中所示,
Number LastName FirstName Position Goal
Number LastName FirstName Position Goals
LastName FirstName Position
第 4 章68
关系型数据库是包含两个或多个表的数据库,这些表共享数据。下面的数据库中有两个表共享
DepartmentID 列,所以是关系型数据库。
服务器技术是应用程序服务器用于在运行时修改动态页的技术。
Dreamweaver MX 开发环境支持以下服务器技术:
Macromedia ColdFusion
Microsoft ASP.NET
Microsoft ASP
Sun JavaServer Page (JSP)
PHP Hypertext Preprocessor (PHP)
您也可以使用 Dreamweaver 的编码环境为任何未列出的其他服务器技术开发页。
静态页是在发送到浏览器之前未由应用程序服务器在运行时修改的 Web 页。有关更多信息,请参见第61页的“处理常规 Web 页”。
Web 应用程序是一个包含多个页的 Web 站点,这些页存储在 Web 服务器上,其部分内容或全部内容是未确定的。只有当用户请求 Web 服务器中的某页时,才确定该页的最终内容。因为页的最终内容基于用户的操作,随请求的不同而变化,所以这种页称为动态页。
Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。当用户单击在浏览器中打开的 Web 页上的某个链接、在浏览器中选择一个书签,或在浏览器的“地址”文本框中输入一个
URL 并单击“转到”时,便生成一个页请求。
常见的 Web 服务器包括 Microsoft Internet Information Server、Microsoft Personal Web
Server、Apache HTTP Server、Netscape Enterprise Server 和 iPlanet Web Server。
了解 Web 应用程序69
第 4 章70
第 5 章在
Dreamweaver MX
中开发
Web
应用程序在本章中,您将了解如何使用 Dreamweaver MX 快速着手开发动态的数据库驱动的 Web 应用程序。动态 Web 应用程序开发的强大之处在于能够以 Web 形式提供数据库存储的信息。
在您完成此课程后,您将了解如何将数据库信息合并到您的 Web 站点中。您将使用包含三个数据表(位置、意见和区域)的现有数据库,为 Global Car Rental 站点开发 Web 应用程序。您还将使用 Dreamweaver 创建简单的 SQL 查询以从该数据库提取数据。
在此课程中,您将建立以下动态页:
允许站点访问者向公司发送意见的插入页
列出客户的意见和联系信息的详细信息页开始前的准备工作在《入门》指南的末尾提供了便捷的设置指南,可逐步引导您完成用于创建动态页的
Dreamweaver 工作环境的设置。
对于应用程序服务器,请参见相应的设置指南。
第 7 章第91页的“示例 ColdFusion 站点的设置”
第 8 章第101页的“示例 ASP.NET 站点的设置”
第 9 章第111页的“示例 ASP 站点的设置”
第 10 章第123页的“示例 JSP 站点的设置”
第 11 章第135页的“示例 PHP 站点的设置”
完成以下任务,
配置您的系统
配置 Dreamweaver 以用于您选定的应用程序服务器
定义与数据库的连接本章中的屏幕示例显示“Macromedia ColdFusion”对话框。不过,您可以在 Dreamweaver MX
支持的以下其他所有服务器模型中完成本章中的课程:ColdFusion、PHP、ASP.NET、ASP 和
71
JSP。
打开要使用的文档开发数据库应用程序的一个很好的起始点就是创建存储在数据库中的记录的列表。在本章建立的应用程序中,您将列出数据库的客户意见表中的信息。稍后,您将创建一个动态 Web 页,该
Web 页使客户可以将意见和问题直接插入数据库。
在创建这些页面时,让我们从确定您将使用的文档的位置开始。
1执行以下操作之一以打开“站点”面板:
在“文件”面板组中,单击扩展箭头以显示“站点”面板。
选择“窗口”>“站点”。
按 F8 键。
“站点”面板随即打开。
2在“站点”弹出式菜单中,选择为您的服务器页定义的“Global Car”站点。
3在“站点”面板中,双击 customerComment 文件以打开它。
该文档即会在文档窗口中打开。
4如果您当前正在“代码”视图中查看文档,则在文档工具栏中单击“显示设计视图”按钮或
“显示代码视图和设计视图”按钮,以便您在完成该课程时可以使用所提供的屏幕示例作为检查点。
您将编辑部分已完成的页面。
第 5 章72
定义记录集现在,您将创建一个记录集以选择您要显示的数据。记录集是数据库查询从数据库提取的信息的子集。(在 ASP.NET 中,记录集称为数据集。)数据库查询由搜索条件组成,搜索条件定义在记录集中所包含的内容。然后,您使用提取的信息作为您的动态页的内容的来源。
Dreamweaver MX 提供易于使用的接口以创建简单的 SQL 查询;因此,您不需要了解 SQL,就可以在 Dreamweaver 中创建记录集。
您将创建一个记录集,该记录集选择来自 Global 数据库的 COMMENTS 表中的所有值。
1在 Dreamweaver 中,通过执行以下操作之一打开“记录集”或“数据集”(ASP.NET) 对话框:
在插入栏的“应用程序”选项卡中,单击“记录集”或“数据集”(ASP.NET) 按钮。
选择“窗口”>“绑定”以打开“绑定”面板,然后单击加号 (+) 按钮并选择“记录集”或
“数据集”(ASP.NET)。
单击“应用程序”面板组的扩展箭头,然后在“绑定”面板中单击加号 (+) 按钮并选择“记录集”或“数据集”(ASP.NET)。
即会出现“记录集”或“数据集”对话框。如果您所看到的对话框看起来比下面的对话框更复杂,则单击“简单”按钮。
2在“名称”文本框中,输入 rsComments。
在 Dreamweaver MX 中开发 Web 应用程序73
3在“数据源”弹出式菜单 (ColdFusion) 或“连接”弹出式菜单(其他服务器页类型)中,
选择“connGlobal”。
“记录集”或“数据集”对话框根据来自数据库的数据更新。
4在“表格”弹出式菜单中,确保已选择“COMMENTS”。
5在“列”中,选择“全部”。
您将接受默认值以请求完整的记录集。
6在“排序”弹出式菜单中,选择“LAST_NAME”,然后在第二个弹出式菜单中选择“升序”。
检索出的记录按客户姓氏以字母顺序列出数据。
第 5 章74
7单击“测试”以测试记录集或数据集。
在“测试 SQL 指令”窗口中显示来自与您的记录集或数据集选择条件匹配的数据库的记录。
8单击“确定”关闭“测试 SQL 指令”窗口。
9单击“确定”关闭“记录集”或“数据集”对话框。
记录集即会出现在“绑定”面板中。
提示,如果您没有看到所有记录集域,则单击记录集 (rsComments) 前面的加号 (+) 按钮以展开记录集显示。
在 Dreamweaver MX 中开发 Web 应用程序75
显示数据库记录接下来,您将创建一页,该页列出当前存在于 COMMENTS 表中的记录。您将动态生成该页,
而不是手动输入相关信息。
您将从创建一个表来建立数据列表结构开始。
1在 customerComment 文档中,将插入点放置在“Customer Comments”后,然后按 Enter
键 (Windows) 或 Return 键 (Macintosh) 设置将在哪里插入该表。
2通过执行以下操作之一插入一个表:
在“插入”栏中,单击“常用”选项卡,然后单击“表格”按钮或将该按钮拖入文档中。
在“插入”栏中,单击“布局”选项卡,然后单击“表格”按钮或将该按钮拖入文档中。
选择“插入”>“表格”。
即会出现“插入表格”对话框。
3在该对话框中,设置以下选项:
在“行数”中,输入 2。
在“单元格填充”中,输入 2。
在“列数”中,输入 4。
在“单元格间距”中,输入 2。
在“宽度”中,输入 80。
完成后的对话框应类似于以下对话框:
第 5 章76
4单击“确定”。
该表格即会插入到文档中。
5在该表格的顶行中,添加用于表格项的标签文字:
在该表格的第一个单元格中,输入 First Name。
在下一个单元格中,输入 Last Name。
在随后的单元格中,输入 E-mail Address。
在最后的单元格中,输入 Comments。
6保存您的文档(“文件”>“保存”)。
向表格添加动态域您现在已作好准备,可以向表格添加记录集域了。
1如果“绑定”面板尚未打开,则通过执行以下操作之一打开“绑定”面板。
选择“窗口”>“绑定”。
单击“应用程序”面板组的扩展箭头,然后选择“绑定”面板。
2通过执行以下操作之一将“FIRST_NAME”域添加到该表格中:
将插入点置于“First Name”标签文字下的表格单元格中,然后在“绑定”面板中选择
“FIRST_NAME”并单击“插入”。
将“FIRST_NAME”从“绑定”面板中拖入表格单元格中。
3重复第 2 步以将“LAST_NAME”、“EMAIL”和“COMMENTS”添加到该表格中。
您的页面看起来应类似于下面的页面:
4保存您的文档。
在 Dreamweaver MX 中开发 Web 应用程序77
设置重复的区域您创建的表格只包含一行数据。若要看到所有记录,请将该表格行设置为重复的区域。该页将为匹配记录集搜索要求的每一记录重复日期记录。
1在文档窗口中,通过执行以下操作之一选择底部的表格行:
将指针置于第一个单元格中,然后向右拖动以选择该行中的所有单元格。
在其中一个单元格中单击,然后在标签选择器中单击 <tr> 标签。
将指针置于该表格行的左侧,在指针更改为箭头后单击表格行边框以选择该行。
2通过执行以下操作之一设置重复的区域,
在“服务器行为”面板中,单击加号 (+) 按钮,然后选择“重复区域”。
在插入栏的“应用程序”选项卡中,单击“重复区域”按钮。
选择“插入”>“应用程序对象”>“重复区域”。
随即会显示“重复区域”对话框。
3在该对话框中,接受默认设置,然后单击“确定”。
该表格行出现在选项卡式的轮廓中。
4保存您的文档。
第 5 章78
查看您的页面接下来,您将保存这些页面,然后您将查看这些页面以了解您开发的应用程序的工作方式。若要查看页面在服务器处理时的外观,您可以使用“实时数据”视图。
1在仍选择 customerComment 的情况下,执行以下操作之一查看您的页面中的数据:
在“文档”工具栏中,单击“实时数据视图”按钮。
选择“查看”>“实时数据”。
该页面根据从数据库提取的客户数据的列表更新。
创建插入记录表单您将为该 Global Web 站点创建的下一页是客户意见页。您希望客户输入意见并将它们直接插入在数据库中。您要将该页连接到 Global 数据库的 Comments 表中。
Dreamweaver 包括若干应用程序对象,它们可以帮助您迅速、方便地创建 Web 应用程序页面。
您将使用应用程序对象创建插入页。“插入记录”应用程序对象创建 HTML 表单、链接到(或绑定到)数据库的数据域以及创建动态页所必需的服务器脚本。
添加“插入记录表单”应用程序对象您可以使用“插入记录表单”应用程序对象创建链接到数据库的各域的表单。应用程序对象使您可以选择要包括在该表单中的域、标签文字域以及选择要插入的表单对象的类型。用户在表单域中输入数据并单击“提交”按钮后,新的记录即插入数据库中。您还可以设置在成功提交记录后要打开的页面,以使提交者知道该数据库已更新。
1在“站点”面板中,找到名为“customerInsert”的文件,然后双击该文件以打开它。
该文档即会在文档窗口中打开。
2将插入点置于文档中“possible”一词之后,然后按 Enter 键或 Return 键以设置该应用程序对象将被插入到的位置。
在 Dreamweaver MX 中开发 Web 应用程序79
3执行以下操作之一插入记录插入对象:
在插入栏的“应用程序”选项卡中,单击“插入记录表单”按钮。
选择“插入”>“应用程序对象”>“插入记录表单”。
即会显示“插入记录表单”对话框。
4在“数据源”(ColdFusion) 或“连接”弹出式菜单中,选择“connGlobal”。
5在“表格”弹出式菜单中,确保已选择“COMMENTS”。
6在“插入后,转到”或“如果成功,则转到”(ASP.NET) 文本框中,单击“浏览”。
7在出现的对话框中,选择名为 insertOK 的文件,然后单击“确定”以关闭该对话框。
您已选择了一页,该页显示给站点访问者以确认收到他们所提交的信息。
创建插入表单在“插入记录表单”对话框的“表单域”部分中,您定义访问者将数据输入到的表单。
1在“插入记录表单”对话框中,通过执行以下操作删除您不想包括在该表单中的域。
选择“COMMENT_ID”,然后单击减号 (-) 按钮。
选择“TELEPHONE”,然后单击减号 (-) 按钮。
选择“SUBMIT_DATE”,然后单击减号 (-) 按钮。
选择“ANSWERED”,然后单击减号 (-) 按钮。
2如果您为 ASP.NET 创建一页,则通过执行以下操作更改表单域的字母顺序:
在“列”列表中,选择“COMMENTS”,然后单击下箭头按钮以将 COMMENTS 置于
LAST_NAME 下。
在“列”列表中,选择“EMAIL”,然后单击下箭头按钮以将其置于 LAST_NAME 下。
第 5 章80
3在“表单域”列表中,选择 FIRST_NAME 以指定该域在表单中显示的方式。
4在“标签文字”域中,输入 First Name。
这是将显示在文本域旁的 HTML 表单中的标签文字。
5通过执行以下操作之一为域设置表单对象类型:
如果您使用 ASP.NET,则在“显示为”中接受默认值“文本域”,并且在“提交为”弹出式菜单中,将默认值 WChar 更改为 VARCHAR。
如果您使用其他服务器页类型,则在“显示为”中接受默认值“文本域”,并且在“提交为”
中接受默认值“文本”。
6在“默认值”域中,键入 Enter your first name 以设置该域中的初始文本,让用户知道要提供哪一类型的信息。
在您完成设置后,“FIRST_NAME”项应类似于以下情形。
7为 LAST_NAME 和 EMAIL 表单域重复第 3 步到第 6 步。
在“默认值”文本框中,输入您要在该域(当它在表单中显示时)中出现的初始文本。
8选择 COMMENTS 来设置该域的值。
9在“标签文字”域中,输入 Comments。
10通过执行以下操作之一设置“COMMENTS”表单域的值。
如果您正使用 ASP.NET,则在“显示为”弹出式菜单中选择“文本域”,然后在“提交为”
弹出式菜单中选择“VARCHAR”。
如果您正使用其他服务器页类型,则在“显示为”弹出式菜单中选择“文本域”,在“提交为”弹出式菜单中接受默认值“文本”。
在 Dreamweaver MX 中开发 Web 应用程序81
11在“默认值”文本框中,输入最初将在该表单的这一域中出现的文本,或者将此域保留为空白。
在您完成设置后,对话框应类似于以下情形:
12单击“确定”关闭该对话框。
“插入记录表单”应用程序对象即被插入文档中。
13保存您的文档。
第 5 章82
将文件拷贝到服务器下一步,您将保存所做的更改,并将已经更新的文件拷贝到服务器中。在拷贝了这些文件后,您将查看插入记录页,添加意见或问题,并提交数据以测试该应用程序。
1在“站点”面板中,选择 customerInsert,然后单击“上传文件”按钮(蓝色的上箭头)以将本地文件拷贝到您的服务器中。
2 Dreamweaver 将询问您是否要将关联文件拷贝到服务器,选择“是”。
注意,对于某些服务器模型,Dreamweaver 在您的本地文件夹中创建 Connections 文件夹。您还必须将该文件夹拷贝到远程服务器上,以使 Web 应用程序能够正常工作。在“站点”面板中,选择 Connections 文件夹,然后单击
“上传文件”按钮以将该文件夹拷贝到您的服务器。
3在选择了 customerInsert 的情况下,选择“文件”>“在浏览器中预览”或按 F12 键
(Windows) 以查看您的文档。
4在表单中输入测试数据,然后在文档中单击“插入记录”按钮以提交您的数据。
信息在数据库中进行更新,并且显示 insertOK 页。
查看更新现在,我们将查看您对数据库进行的更改。您可以通过打开在本课程的第一部分中创建的
customerComment 文档来查看更改,或者可以通过查看数据库来查看更改。
在 Dreamweaver 中,在“站点”面板中双击名为 customerComment 的文档,选择“文件”
>“在浏览器中预览”,然后选择要在其中查看页面的浏览器。
您输入的记录出现在“客户意见”列表中。
在 Dreamweaver 中,在“数据库”面板(“窗口”>“数据库”)内找到 connGlobal 数据库图标,单击“表格”前面的加号 (+) 按钮以查看数据库中表格的列表。右击 (Windows) 或在按住 Control 键的同时单击 (Macintosh) COMMENTS 表,然后选择“查看数据”。
数据库中记录的列表随即出现;您刚输入的意见作为表格中最后的项出现。
在 Dreamweaver MX 中开发 Web 应用程序83
其他参考资料
《入门》指南简单讲述了一小部分工具,可用来创建动态的、数据驱动的页。您已了解如何创建记录集来定义要在您的 Web 站点中使用的数据。您还使用 Dreamweaver 应用程序对象创建了有效的 Web 应用程序,您可以通过该应用程序与数据库存储的数据交互。
有关在 Dreamweaver 中建立 Web 站点的信息,请参见第 2 章第17页的“在 Dreamweaver 中创建您的第一个 Web 站点”。有关使用 Dreamweaver 编码功能的信息,请参见第 3 章第49页的“在 Dreamweaver 中编辑代码”。
有关《Dreamweaver MX 入门》指南中此部分涉及的主题的详细信息,请参见联机指南《使用
Dreamweaver MX》(“帮助”>“使用 Dreamweaver MX”)中的以下主题:
为您的页面存储和检索数据
定义动态数据的来源
向 Web 页添加动态内容
创建记录集导航链接
迅速建立插入页
逐块建立插入页第 5 章84
第 6 章在
Windows
中安装
Web
服务器要开发和测试动态 Web 页,您需要一个正常工作的 Web 服务器。本章介绍大多数 Windows 用户如何在本地计算机上安装和使用 Microsoft Web 服务器。
Macintosh 用户可以使用网络计算机公司或 Web 宿主公司的 Web 服务器。Macintosh OS X
10.1 用户可以在其本地计算机上使用 Apache Web 服务器。有关 Apache 服务器的更多信息,请访问 Apache Web 站点,网址为 http://httpd.apache.org/。但是请注意,Apache 服务器的根文件夹与本指南中讨论的 Microsoft 服务器的根文件夹 (Inetpub\wwwroot) 不同。
本章包含以下几节:
第86页的“入门”
第86页的“安装 Personal Web Server”
第87页的“安装 Internet Information Server”
第87页的“测试 Web 服务器”
第88页的“Web 服务器基础”
注意,Macromedia 不为第三方软件(例如Microsoft Personal Web Server)提供技术支持。如果您需要帮助,请与
Microsoft 技术支持联系。
85
入门如果您是一个 Windows 用户,您可以在计算机上安装并运行以下 Web 服务器:Microsoft
Personal Web Server (PWS) 或 Internet Information Server (IIS)(PWS 的全功能版本)。您还可以在联网的 Windows 计算机上安装 Web 服务器以供工作组中的其他开发人员使用。
注意,Windows Millennium Edition (Me) 不支持任何版本的 PWS 或 IIS。有关更多信息,请参见 Microsoft Web
站点,网址为 http://support.microsoft.com/default.aspx?scid=kb;EN-US;q266456。
您的计算机上可能已经安装了 PWS 或 IIS。请查看文件夹结构中是否包含一个 C:\Inetpub 或
D:\Inetpub 文件夹。PWS 和 IIS 在安装过程中将创建该文件夹。
如果该文件夹不存在,则执行以下操作之一:
Windows 98:将 PWS 安装文件从 Windows 98 光盘复制到您的硬盘上。该文件位于“Add-
Ons”文件夹下的“PWS”文件夹中。然后安装该 Web 服务器。有关说明,请参见第86页的“安装 Personal Web Server”。
Windows NT Workstation:从 Microsoft Web 站点 http://www.microsoft.com/ntserver/nts/
downloads/recommended/nt4optpk/default.asp 下载 NT 4.0 Option Pack。Option Pack 包括 PWS 安装文件。然后安装该 Web 服务器。有关说明,请参见第86页的“安装 Personal
Web Server”。
注意,要安装 NT 4.0 Option Pack,您的计算机上必须安装有 Service Pack 6 或更高版本。从 Microsoft Web
站点 http;//www.microsoft.com/ntserver/nts/downloads/default.asp 下载 Service Pack。
Windows NT Server:您的系统上应该已经安装并运行了 IIS。如果还没有,请进行安装或让系统管理员为您安装。
Windows 2000:您的系统上可能已安装了 IIS。如果还没有,则应进行安装。有关更多信息,
请参见第87页的“安装 Internet Information Server”。
Windows XP Professional:您的系统上可能已安装了 IIS。如果还没有,则应进行安装。有关更多信息,请参见第87页的“安装 Internet Information Server”。
安装 Personal Web Server
Windows 98 和 NT Workstation 用户应该安装 PWS。如果您是 Windows NT Server、
Windows 2000 或 Windows XP Professional 用户,则请安装 IIS。有关更多信息,请参见第87
页的“安装 Internet Information Server”。
注意,Windows Millennium Edition (Me) 不支持任何版本的 PWS。有关更多信息,请参见 Microsoft Web 站点,
网址为 http://support.microsoft.com/default.aspx?scid=kb;EN-US;q266456。
您可以将 PWS 和 Dreamweaver MX 安装在同一个 Windows 系统上。确保系统上安装了
Microsoft Internet Explorer 4.01 或更高版本,否则将不能安装 PWS。
第 6 章86
要安装 PWS,请执行以下操作:
1双击 Windows 98 光盘上的 PWS 安装文件或您从 Microsoft Web 站点下载的文件。
2按照安装向导进行操作。
3当询问您的默认 Web 发布主目录时,请接受默认目录:
C:\Inetpub\wwwroot
4单击“完成”结束安装过程。
安装了 Web 服务器后,您可以对其进行测试。请参见第87页的“测试 Web 服务器”。
安装 Internet Information Server
Windows NT Server、Windows 2000 和 Windows XP Professional 用户应该安装 IIS。如果您是 Windows 98 或 NT Workstation 用户,则请安装 PWS。有关更多信息,请参见第86页的
“安装 Personal Web Server”。
如果您是 Windows NT Server 用户,您的系统上应该已经安装并运行了 IIS。如果还没有,请进行安装或让系统管理员为您安装。
如果您是 Windows 2000 或 Windows XP Professional 用户,请确保您的系统上安装并运行了
IIS。方法是查找 C:\Inetpub 文件夹。如果该文件夹不存在,则您的系统上可能没有安装 IIS。
要在 Windows 2000 和 XP Professional 上安装 IIS,请执行以下操作:
1在 Windows 2000 中,选择“开始”>“设置”>“控制面板”>“添加/删除程序”;在
Windows XP 中,选择“开始”>“控制面板”>“添加/删除程序”。
2选择“添加/删除 Windows 组件”。
3选择 IIS 框并按照安装说明进行操作。
安装了 Web 服务器后,您可以对其进行测试。
测试 Web 服务器要测试 Web 服务器,请先创建一个简单的文件扩展名为,htm 或,html 的 HTML 页,并将其保存到计算机的 Inetpub\wwwroot 文件夹中。该 HTML 页可以由一行组成,例如:
<p>My web server is working.</p>
将该页另存为 myTestFile.htm。然后,通过一个 HTTP 请求在 Web 浏览器中打开该测试页。
如果 PWS 或 IIS 正在您的本地计算机上运行,则在 Web 浏览器中输入以下 URL:
http://localhost/myTestFile.htm
如果 PWS 或 IIS 运行在联网的计算机上,则将联网计算机名用作域名。例如,如果运行 PWS
或 IIS 的计算机的名称是“kojak-pc”,则在浏览器中输入以下 URL:
http://kojak-pc/myTestFile.htm
注意,有关计算机名的更多信息,请参见第88页的“Web 服务器基础”。
如果浏览器显示您的页,则说明 Web 服务器运行正常。
在 Windows 中安装 Web 服务器87
如果浏览器未能显示该页,请检查服务器是否正在运行。双击任务栏中的 Web 服务器图标(该图标的外观像握着 Web 页的手)。将出现“个人 Web 管理器”对话框。如果“发布”面板提示您 Web 发布已停止,请单击“启动”按钮。
如果仍无法打开该页,请检查您的测试页是否位于 Inetpub\wwwroot 文件夹中并且文件扩展名为,htm 或,html。
Web 服务器基础
Web 服务是响应来自 Web 浏览器的请求以提供 Web 页的软件。Web 服务器有时也叫做
HTTP 服务器。
假设您要使用 PWS 来开发 Web 应用程序。如果启动了服务器,那么桌面右下角的任务栏上将出现一个图标,提示您 PWS 正在运行。(该图标显示为握着 Web 页的手。)双击该图标将启动个人 Web 管理器,您可以使用它来管理您的 Web 页。个人 Web 管理器显示如下,
Web 服务器的默认名称是您的计算机名(在本例中为“cnadeau_pc1”)。您可以通过更改计算机名来更改服务器名称。如果您的计算机没有名称,则服务器使用“localhost”。
服务器名称代表服务器的根文件夹(或者是服务器根文件夹的别名),该根文件夹很可能是
C:\Inetpub\wwwroot。通过在计算机上运行的浏览器中输入以下 URL 可以打开存储在根文件夹中的任何 Web 页:
http://myServerName/myFileName
例如,如果服务器名称是“mer_noire”并且 C:\Inetpub\wwwroot\ 中存有名为“soleil.htm”
的 Web 页,则您可以通过在本地计算机上运行的浏览器中输入以下 URL 打开该页:
http://mer_noire/soleil.htm
第 6 章88
您还可以通过在 URL 中指定子文件夹来打开存储在根文件夹的任何子文件夹中的任何 Web
页。例如,假设 soleil.htm 文件存储在名为“gamelan”的子文件夹中,如下所示:
C:\Inetpub\wwwroot\gamelan\soleil.htm
您可以通过在计算机上运行的浏览器中输入以下 URL 打开该页:
http://mer_noire/gamelan/soleil.htm
如果 Web 服务器运行在您的计算机上,您可以用“localhost”来代替服务器名称。例如,以下两个 URL 在浏览器中打开同一页:
http://mer_noire/gamelan/soleil.htm
http://localhost/gamelan/soleil.htm
注意,除服务器名称或“localhost”之外,还可以使用另一种表示方式:127.0.0.1(例如 http://127.0.0.1/gamelan/
soleil.htm)。
在 Windows 中安装 Web 服务器89
第 6 章90
第 7 章示例
ColdFusion
站点的设置
Macromedia Dreamweaver MX 随附有示例 ColdFusion 页,可以帮助您建立一个小的 Web 应用程序。本章讲述了一种在同时使用 ColdFusion 和 Microsoft Internet Information Server (IIS)
或 Personal Web Server (PWS) 时设置示例应用程序的方法。有关这些 Web 服务器的更多信息,
请参见第85页的“在 Windows 中安装 Web 服务器”。如果将 ColdFusion MX 和其他 Web 服务器一起使用,请参见 Dreamweaver“帮助”中的“设置 Web 应用程序”(“帮助”>“使用
Dreamweaver”)。
设置 Web 应用程序的过程分为三步。第一步,配置您的系统。第二步,定义 Dreamweaver 站点。第三步,将应用程序连接到您的数据库。本设置指南按照该三步过程进行说明。
本章包含以下几节:
第91页的“ColdFusion 开发人员的设置清单”
第92页的“配置您的系统”
第94页的“定义 Dreamweaver 站点”
第98页的“连接到示例数据库”
ColdFusion 开发人员的设置清单若要设置 Web 应用程序,您必须配置系统、定义 Dreamweaver 站点并连接到数据库。本节提供每项任务的清单。本章的其余部分将对这些过程进行介绍。
配置您的系统:
1确保您具有 Web 服务器。
2安装 ColdFusion 应用程序服务器。
3创建根文件夹。
定义 Dreamweaver 站点:
1将示例文件拷贝到您硬盘上的文件夹中。
2将此文件夹定义为 Dreamweaver 本地文件夹。
91
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹。
4指定一个处理动态页的文件夹。
5将示例文件上传到 Web 服务器。
连接到数据库:
1如果您具有远程服务器配置,则将示例数据库拷贝到远程计算机。
2在“ColdFusion 管理员”中创建 ColdFusion 数据源。
3在 Dreamweaver 中查看连接。
配置您的系统本节提供两种常见系统配置的说明-其中一种情况是 Microsoft IIS 或 PWS 安装在您的硬盘上,
另一种情况是 IIS 或 PWS 安装在远程 Windows 计算机上。如果您不想使用这些配置,请参见
“帮助”中的“设置 Web 应用程序”(“帮助”>“使用 Dreamweaver”)。
下面的插图显示了本节中所介绍的两种配置,
第 7 章92
若要配置您的系统,请执行以下操作:
1确保您具有 Web 服务器(请参见第93页的“检查是否存在 Web 服务器”)。
2安装 ColdFusion 应用程序服务器(请参见第93页的“安装 ColdFusion MX”)。
3创建根文件夹(请参见第94页的“创建根文件夹”)。
注意,安装 Web 服务器和应用程序服务器是只需进行一次的任务。
检查是否存在 Web 服务器若要开发和测试动态 Web 页,您需要一个 Web 服务器。Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。
确保 Microsoft IIS 或 PWS 安装并运行在您的硬盘或远程 Windows 计算机上。(Macintosh 用户需要将 Microsoft IIS 或 PWS 安装在远程 Windows 计算机上。)通过查看文件夹的结构,可以快速检查系统上是否安装有 PWS 或 IIS。文件夹结构中是否包含 c:\Inetpub 或 d:\Inetpub 文件夹?PWS 和 IIS 在安装过程中会创建该文件夹。
如果系统上未安装 PWS 或 IIS,则现在进行安装。有关说明,请参见第85页的“在 Windows
中安装 Web 服务器”。
在安装了 Web 服务器之后,请安装应用程序服务器。
安装 ColdFusion MX
若要处理动态 Web 页,您需要应用程序服务器。应用程序服务器是一种软件,它帮助 Web 服务器处理包含服务器端脚本或标签的 Web 页。当从服务器请求这样一个页时,Web 服务器先将该页传递给应用程序服务器进行处理,然后再将该页发送到浏览器。
确保 ColdFusion MX 应用程序服务器安装并运行在运行 PWS 或 IIS 的系统上。(PWS 或 IIS
可能位于您的硬盘或远程 Windows 计算机上。)
您可以从 Macromedia Web 站点(网址为 http://www.macromedia.com/software/coldfusion/)
下载并安装 ColdFusion MX 的完全功能的开发人员版本。在 Dreamweaver CD 上也提供
ColdFusion MX Server Developer Edition 的拷贝(仅限 Windows 版本)。
若要安装 ColdFusion MX,请执行以下操作:
1关闭所有打开的应用程序。
2如果可行,使用管理员帐户登录到 Windows 系统。
3双击 ColdFusion MX 安装程序文件。
4按照安装说明进行操作。
有关更多信息,请参见 Dreamweaver 中的 ColdFusion 文档(“帮助”>“使用ColdFusion”)。
在安装并启动 ColdFusion 之后,为您的 Web 应用程序创建根文件夹。
示例 ColdFusion 站点的设置93
创建根文件夹安装了服务器软件之后,在运行 Microsoft PWS 或 IIS 的系统上为您的 Web 应用程序创建根文件夹,并确保该文件夹具有必要的权限。
若要为您的 Web 应用程序创建根文件夹,请执行以下操作:
1在运行 PWS 或 IIS 的系统上创建一个名为“MySampleApp”的文件夹。
创建该文件夹的合适位置是 C:\Inetpub\wwwroot\。默认情况下,您的 PWS 或 IIS Web 服务器安装在 Inetpub\wwwroot 文件夹中。Web 服务器将根据来自 Web 浏览器的 HTTP 请求提供此文件夹中的任何页或其子文件夹中的任何页。
2确保为该文件夹启用了读权限和脚本权限。
如果您正在使用 PWS,则双击任务栏中的 Web 服务器图标启动 Personal Web Manager。
(该图标显示为握着 Web 页的手。)在 Personal Web Manager 中,单击“高级”图标。随即会出现“高级选项”对话框。选择“主页”并单击“编辑属性”。即会出现“编辑目录”
对话框。确保选择了“读”和“脚本”选项。出于安全原因,您不应该选择“执行”选项。
如果您正在使用 IIS,则启动 IIS 管理工具(在 Windows XP 中,选择“启动”>“控制面板”
>“性能维护”>“管理工具”>“Internet 信息服务”)。在“Web 站点”>“默认 Web 站点”
下,右键单击您的 MySampleSite 文件夹并从弹出式菜单中选择“属性”。在“执行权限”文本框中,确保选择了“脚本”选项。出于安全原因,请不要选择“脚本和可执行文件”选项。
现在已完成了 Web 服务器的配置,它将根据来自 Web 浏览器的 HTTP 请求提供根文件夹中的
Web 页。
在配置完系统后,您必须定义 Dreamweaver 站点。
定义 Dreamweaver 站点在配置完系统后,您必须将示例文件拷贝到本地文件夹并定义 Dreamweaver 站点来管理这些文件。
注意,Macromedia HomeSite 和 ColdFusion Studio 用户可以将 Dreamweaver 站点视为 HomeSite 或 Studio 项目。
若要定义 Dreamweaver 站点,请执行以下操作:
1将示例文件拷贝到您硬盘上的文件夹中(请参见第95页的“拷贝示例文件”)。
2将此文件夹定义为 Dreamweaver 本地文件夹(请参见第95页的“定义本地文件夹”)。
3将 Web 服务器上的根文件夹定义为 Dreamweaver 远程文件夹(请参见第96页的“定义远程文件夹”)。
4指定一个处理动态页的文件夹(请参见第96页的“指定处理动态页的位置”)。
5将示例文件上传到 Web 服务器(请参见第97页的“上传示例文件”)。
第 7 章94
拷贝示例文件如果尚未进行此操作,则将示例文件从 Dreamweaver 应用程序文件夹拷贝到您硬盘上的文件夹中。
若要拷贝示例文件,请执行以下操作:
1在您的硬盘上创建一个名为“Sites”的新文件夹。
例如,创建 C:\Sites (Windows) 或 Hard Drive:Documents:Sites (Macintosh)。
2在硬盘上的 Dreamweaver 应用程序文件夹中找到 GettingStarted 文件夹。
该文件夹的路径如下所示:
\Macromedia\Dreamweaver MX\Samples\GettingStarted\
3将 GettingStarted 文件夹拷贝到 Sites 文件夹中。
拷贝 GettingStarted 文件夹之后,将该文件夹定义为 Dreamweaver 本地文件夹。
定义本地文件夹拷贝 GettingStarted 文件夹之后,将包含 ColdFusion 示例文件的文件夹定义为 Dreamweaver
本地文件夹。
若要定义 Dreamweaver 本地文件夹,请执行以下操作:
1在 Dreamweaver 中,选择“站点”>“新建站点”。
即会出现“站点定义”对话框。
2如果显示向导,则单击“高级”。
3在“站点名称”文本框中,输入 GlobalCar - ColdFusion。
该名称在 Dreamweaver 中标识您的站点。
4在“本地根文件夹”文本框中,指定 GettingStarted 文件夹中包含 ColdFusion 示例文件的文件夹。
您可以单击文本框旁边的文件夹图标查找并选择文件夹。在 Windows 中,该文件夹应该如下所示:
C:\Sites\GettingStarted\Develop\coldfusion
在 Macintosh 上,该文件夹应该如下所示:
Hard Drive:Documents:Sites:GettingStarted:Develop:coldfusion
将“站点定义”对话框保持为打开状态。接下来您需要将 Web 服务器文件夹定义为
Dreamweaver 远程文件夹。
示例 ColdFusion 站点的设置95
定义远程文件夹在定义了本地文件夹之后,将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹。
若要定义 Dreamweaver 远程文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“分类”列表中的“远程信息”。
即会出现“远程信息”屏幕。
2在“访问”文本框中,选择将文件移入和移出服务器的方式 - 直接移入移出(“本地/网络”
选项)还是“FTP”。
3输入您在第94页的“创建根文件夹”中创建的 Web 服务器文件夹的路径或 FTP 设置。
该文件夹可能位于您的硬盘或远程计算机上。即使您在硬盘上创建文件夹,该文件夹仍然是有效的“远程”文件夹。这里是当您选择“本地/网络”访问时的示例:
远程文件夹:c:\Inetpub\wwwroot\MySampleApp
有关 FTP 的更多信息,请参见“帮助”中的“设置 FTP 访问的远程信息选项”(“帮助”>
“使用 Dreamweaver”)。
将“站点定义”对话框保持为打开状态。接下来您需要定义处理动态页的文件夹。
指定处理动态页的位置在定义了 Dreamweaver 远程文件夹之后,请按照本节中介绍的步骤指定处理动态页的文件夹。
Dreamweaver 使用此文件夹显示动态页并在您工作时连接到数据库。
若要指定处理动态页的文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“分类”列表中的“测试服务器”。
即会出现“测试服务器”屏幕。Dreamweaver 需要测试服务器的服务以在您工作时生成和显示动态内容。测试服务器可以是您的本地计算机、开发服务器、模拟调试服务器或生产服务器。只要它能够处理 ColdFusion 页,选择哪个选项无关紧要。在本例中,您可以使用与“远程信息”类别相同的设置(请参见第96页的“定义远程文件夹”),因为它们指向能够处理
ColdFusion 页的服务器。
2选择 ColdFusion 作为您的服务器技术。
3在“访问”文本框中,选择您指定的访问远程文件夹的方法(“本地/网络”或“FTP”)。
Dreamweaver 输入您在“远程信息”类别中指定的设置。不要更改这些设置。
第 7 章96
4在“URL 前缀”文本框中,输入当在 Web 应用程序中请求页时您将在 Web 浏览器中输入的根 URL。
若要在您工作时在页中显示活动数据,Dreamweaver 将创建临时文件,将其拷贝到 Web 站点的根文件夹,然后尝试使用 URL 前缀请求该文件。
Dreamweaver 根据您在“站点定义”对话框中提供的信息对 URL 前缀进行最接近的推测。
例如,如果在“远程文件夹”文本框中指定的文件夹是 c:\Inetpub\wwwroot\MySampleApp,
则 URL 前缀应该如下所示:
http://localhost/MySampleApp/
提示,URL 前缀不应该指定站点上特定的页。
然而,建议的 URL 前缀可能并不正确。如果 Dreamweaver 的建议不正确,请更正该 URL 前缀或输入一个新的 URL 前缀。有关更多信息,请参见“帮助”中的“关于 URL 前缀”(“帮助”>“使用 Dreamweaver”)。
5单击“确定”,然后单击“完成”。
在指定了处理动态页的文件夹之后,请将示例文件上传到 Web 服务器。
上传示例文件在指定了处理动态页的文件夹之后,请按照本节中介绍的步骤将示例文件上传到 Web 服务器。
即使 Web 服务器运行在本地计算机上,您也必须“上传”这些文件。
如果不上传文件,则某些功能(例如“实时数据”视图和“在浏览器中预览”)对动态页可能不能正常工作。例如,由于图像文件尚未在服务器上,“实时数据”视图中的图像链接可能是断开的。同样,如果服务器上没有详细信息页,则在浏览器中预览主页时单击指向详细信息页的链接也将导致错误。
若要将示例文件上传到 Web 服务器,请执行以下操作:
1在“站点”面板(“窗口”>“站点”)中,选择“本地文件”窗格中的根文件夹。
根文件夹应该是列表中的第一个文件夹。
2单击工具栏上蓝色的向上箭头。
Dreamweaver 将所有文件拷贝到您在第96页的“定义远程文件夹”中定义的 Web 服务器文件夹。
这便完成了 Dreamweaver 站点的定义。下一步是连接到随 Dreamweaver 一起安装的示例数据库。
示例 ColdFusion 站点的设置97
连接到示例数据库在安装过程中,Dreamweaver 将示例 Microsoft Access 数据库拷贝到您的硬盘。本节介绍如何创建到示例数据库的连接。
注意,如果您要连接到另一个数据库,请参见“帮助”中的“用于 ColdFusion 开发人员的数据库连接”(“帮助”>“使用 Dreamweaver”)。
若要创建数据库连接,请执行以下操作:
1如果您具有远程服务器配置,则将示例数据库拷贝到远程计算机(请参见第98页的“设置数据库(远程服务器配置)”)。
2在“ColdFusion 管理员”中创建 ColdFusion 数据源(请参见第98页的“创建 ColdFusion
数据源”)。
3在 Dreamweaver 中查看连接(请参见第99页的“连接到数据库”)。
设置数据库(远程服务器配置)
本节只适用于您具有远程服务器配置的情况,即您的 Web 服务器运行在远程计算机上的情况。
如果您的 Web 服务器与 Dreamweaver 运行在同一台计算机上,则跳到第98页的“创建
ColdFusion 数据源”。
在尝试连接到示例数据库之前,请将数据库拷贝到远程计算机的硬盘。数据库文件 (global.mdb)
位于您本地硬盘上的以下文件夹中:
\Macromedia\Dreamweaver MX\Samples\Database\global.mdb
您可以将该文件上传到远程计算机上的任何文件夹中,或者可以为它创建一个新文件夹。
数据库准备就绪之后,在“ColdFusion 管理员”中创建 ColdFusion 数据源。
创建 ColdFusion 数据源在“ColdFusion 管理员”中创建一个名为“connGlobal”的 ColdFusion 数据源,该数据源指向示例数据库文件。
若要创建 ColdFusion 数据源,请执行以下操作:
1在 Dreamweaver 中,打开一个 ColdFusion 页。
2在“数据库”面板(“窗口”>“数据库”)中,单击“修改数据源”图标(面板工具栏上从右向左的第二个图标)。
“ColdFusion 管理员”在浏览器中打开。
第 7 章98
3登录到“ColdFusion 管理员”并创建一个名为“connGlobal”的数据源,该数据源指向
global.mdb 数据库文件。
如果 ColdFusion 运行在您的本地计算机上,则创建一个数据源指向以下文件夹中的数据库文件:
c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb
如果 ColdFusion 运行在远程计算机上,则创建一个数据源,该数据源指向您在第98页的
“设置数据库(远程服务器配置)”中上传到远程计算机上的数据库文件。
有关更多信息,请参见 Dreamweaver 中的 ColdFusion 文档(“帮助”>“使用 ColdFusion”)。
创建了 ColdFusion 数据源之后,就可以连接到 Dreamweaver 中的数据库了。
连接到数据库创建了 ColdFusion 数据源之后,您可以使用它连接到 Dreamweaver 中的数据库。
在 Dreamweaver 中打开任意 ColdFusion 页,然后打开“数据库”面板(“窗口”>“数据库”)。您的 ColdFusion 数据源会出现在该面板中。
如果您创建的数据源未出现在该面板中,请执行以下操作之一:
复查“ColdFusion 管理员”中的连接参数。
检查 Dreamweaver 用来处理动态页的文件夹的设置(请参见第96页的“指定处理动态页的位置”)。
查询第147页的“数据库连接答疑”。
如果名为“connGlobal”的数据源出现在该面板中,则为入门指南和教程设置示例 ColdFusion
应用程序即告完成。请参见第71页的“在 Dreamweaver MX 中开发 Web 应用程序”和
Dreamweaver“帮助”中的教程(“帮助”>“教程”)。
示例 ColdFusion 站点的设置99
第 7 章100
第 8 章示例
ASP.NET
站点的设置
Macromedia Dreamweaver MX 随附有示例 ASP.NET 页,可以帮助您建立一个小的 Web 应用程序。本章讲述了一种设置示例应用程序的方法。
本章适用于 ASP.NET 开发人员。如果您要研究 ASP,请参见第111页的“示例 ASP 站点的设置”。
设置 Web 应用程序的过程分为三步。第一步,配置您的系统。第二步,定义 Dreamweaver 站点。第三步,将应用程序连接到您的数据库。本设置指南按照该三步过程进行说明。
本章包含以下几节:
第101页的“ASP.NET 开发人员的设置清单”
第102页的“配置您的系统”
第104页的“定义 Dreamweaver 站点”
第107页的“连接到示例数据库(本地配置)”
第108页的“连接到示例数据库(远程服务器配置)”
ASP.NET 开发人员的设置清单若要设置 Web 应用程序,您必须配置系统、定义 Dreamweaver 站点并连接到数据库。本节提供每项任务的清单。本章的其余部分将对这些过程进行介绍。
配置您的系统:
1确保您具有 Web 服务器。
2安装 Microsoft,NET 框架。
3创建根文件夹。
定义 Dreamweaver 站点:
1将示例文件拷贝到您硬盘上的文件夹中。
2将此文件夹定义为 Dreamweaver 本地文件夹。
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹。
101
4指定一个处理动态页的文件夹。
5将示例文件上传到 Web 服务器。
连接到数据库(本地配置):
在 Dreamweaver 中创建连接。
连接到数据库(远程服务器配置):
将数据库拷贝到远程计算机并在 Dreamweaver 中创建连接。
配置您的系统本节提供两种常见系统配置的说明 - 其中一种情况是 Windows 2000 或 Windows XP
Professional 安装在您的硬盘上,另一种情况是 Windows 2000 或 Windows XP Professional 安装在远程计算机上。如果您不想使用这些配置,请参见“帮助”中的“设置 Web 应用程序”
(“帮助”>“使用 Dreamweaver”)。
下面的插图显示了本节中所介绍的两种配置,
第 8 章102
若要配置您的系统,请执行以下操作:
1确保您具有 Web 服务器(请参见第103页的“检查是否存在 Web 服务器”)。
2安装,NET 框架(请参见第103页的“安装,NET 框架”)。
3创建根文件夹(请参见第104页的“创建根文件夹”)。
注意,安装 Web 服务器和,NET 框架是只需进行一次的任务。
检查是否存在 Web 服务器
若要开发和测试动态 Web 页,您需要一个 Web 服务器。Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。
ASP.NET 页仅使用一个 Web 服务器:Microsoft IIS 5 或更高版本。不支持 PWS。此外,因为
IIS 5 是 Windows 2000 和 Windows XP Professional 操作系统提供的服务,所以您只能使用这两个版本的 Windows 来运行 ASP.NET 应用程序。不支持 Windows 98、ME 或 NT。
确保 IIS 5 安装并运行在 Windows 2000 或 Windows XP Professional 计算机上。IIS 5 可以安装在您的硬盘(如果具有 Windows 2000 或 Windows XP Professional)或远程计算机上。如果您是 Windows 98、Windows ME、Windows NT、Windows XP Home Edition 或 Macintosh
用户,则必须在远程 Windows 2000 或 Windows XP Professional 计算机上运行 IIS 5。
一种快速检查您的系统上是否安装有 IIS 的方法是查看文件夹结构。文件夹结构中是否包含
c:\Inetpub 或 d:\Inetpub 文件夹?IIS 在安装过程中将创建该文件夹。
如果未安装 IIS,则现在进行安装。有关说明,请参见第87页的“安装 Internet Information
Server”。
安装了 Web 服务器之后,安装,NET 框架。
安装,NET 框架
若要处理动态 Web 页,您需要应用程序服务器。应用程序服务器是一种软件,它帮助 Web 服务器处理包含服务器端脚本或标签的 Web 页。当从服务器请求这样一个页时,Web 服务器先将该页传递给应用程序服务器进行处理,然后再将该页发送到浏览器。
在 ASP.NET 中,应用程序服务器称为,NET 框架。确保,NET 框架安装并运行在运行 IIS 5 或更高版本的 Windows 2000 或 Windows XP Professional 系统上。(IIS 可能位于您的硬盘或远程计算机上。)
若要安装,NET 框架,请从 Microsoft Web 站点(网址为 http://www.asp.net/download.aspx)
下载框架并按照 Web 站点上的安装说明进行安装。如果您是 Windows 98、Windows ME、
Windows NT、Windows XP Home Edition 或 Macintosh 用户,则必须将,NET 框架安装在运行 IIS 5 的远程 Windows 2000 或 Windows XP Professional 计算机上。
在安装,NET 框架后,为您的 Web 应用程序创建根文件夹。
示例 ASP.NET 站点的设置103
创建根文件夹安装了服务器软件之后,在运行 Microsoft IIS 的系统上为您的 Web 应用程序创建根文件夹,并确保该文件夹具有必要的权限。
若要为您的 Web 应用程序创建根文件夹,请执行以下操作:
1在运行 IIS 的系统上创建一个名为“MySampleApp”的文件夹。
创建该文件夹的合适位置是 C:\Inetpub\wwwroot\。默认情况下,您的 IIS Web 服务器安装在 Inetpub\wwwroot 文件夹中。Web 服务器将根据来自 Web 浏览器的 HTTP 请求提供此文件夹中的任何页或其子文件夹中的任何页。
2确保为该文件夹启用了脚本权限。
启动 IIS 管理工具(在 Windows XP 中,选择“启动”>“控制面板”>“性能维护”>“管理工具”>“Internet 信息服务”)。在“Web 站点”>“默认 Web 站点”下,右键单击您的 MySampleSite 文件夹并从弹出式菜单中选择“属性”。在“执行权限”文本框中,确保选择了“脚本”选项。出于安全原因,请不要选择“脚本和可执行文件”选项。
现在已完成了 Web 服务器的配置,它将根据来自 Web 浏览器的 HTTP 请求提供根文件夹中的
Web 页。
在配置完系统后,您必须定义 Dreamweaver 站点。
定义 Dreamweaver 站点在配置完系统后,您必须将示例文件拷贝到本地文件夹并定义 Dreamweaver 站点来管理这些文件。
注意,Macromedia HomeSite 和 ColdFusion Studio 用户可以将 Dreamweaver 站点视为 HomeSite 或 Studio 项目。
若要定义 Dreamweaver 站点,请执行以下操作:
1将示例文件拷贝到您硬盘上的文件夹中(请参见第104页的“拷贝示例文件”)。
2将此文件夹定义为 Dreamweaver 本地文件夹(请参见第105页的“定义本地文件夹”)。
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹(请参见第105页的“定义远程文件夹”)。
4指定一个处理动态页的文件夹(请参见第106页的“指定处理动态页的位置”)。
5将示例文件上传到 Web 服务器(请参见第107页的“上传示例文件”)。
拷贝示例文件如果尚未进行此操作,则将示例文件从 Dreamweaver 应用程序文件夹拷贝到您硬盘上的文件夹中。
若要拷贝示例文件,请执行以下操作:
1在您的硬盘上创建一个名为“Sites”的新文件夹。
例如,创建 C:\Sites (Windows) 或 Hard Drive:Documents:Sites (Macintosh)。
第 8 章104
2在硬盘上的 Dreamweaver 应用程序文件夹中找到 GettingStarted 文件夹。
该文件夹的路径如下所示:
\Macromedia\Dreamweaver MX\Samples\GettingStarted\
3将 GettingStarted 文件夹拷贝到 Sites 文件夹中。
拷贝 GettingStarted 文件夹之后,将该文件夹定义为 Dreamweaver 本地文件夹。
定义本地文件夹拷贝 GettingStarted 文件夹之后,将包含 ASP.NET 示例文件的文件夹定义为 Dreamweaver 本地文件夹。
若要定义 Dreamweaver 本地文件夹,请执行以下操作:
1在 Dreamweaver 中,选择“站点”>“新建站点”。
即会出现“站点定义”对话框。
2如果显示向导,则单击“高级”。
3在“站点名称”文本框中,输入 GlobalCar - ASP.NET。
该名称在 Dreamweaver 中标识您的站点。
4在“本地根文件夹”文本框中,指定 GettingStarted 文件夹中包含 ASP.NET 示例文件的文件夹。
您可以单击文本框旁边的文件夹图标查找并选择文件夹。在 Windows 中,该文件夹应该如下所示:
C:\Sites\GettingStarted\Develop\aspnet
在 Macintosh 上,该文件夹应该如下所示:
Hard Drive:Documents:Sites:GettingStarted:Develop:aspnet
将“站点定义”对话框保持为打开状态。接下来您需要将 Web 服务器文件夹定义为
Dreamweaver 远程文件夹。
定义远程文件夹在定义了本地文件夹之后,请按照本节中介绍的步骤将 Web 服务器文件夹定义为 Dreamweaver
远程文件夹。
若要定义 Dreamweaver 远程文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“类别”列表中的“远程信息”。
即会出现“远程信息”屏幕。
2在“访问”文本框中,选择将文件移入和移出服务器的方式 - 直接移入移出(“本地/网络”
选项)还是“FTP”。
示例 ASP.NET 站点的设置105
3输入您在第104页的“创建根文件夹”中创建的 Web 服务器文件夹的路径或 FTP 设置。
该文件夹可能位于您的硬盘或远程计算机上。即使您在硬盘上创建文件夹,该文件夹仍然是有效的“远程”文件夹。这里是当您选择“本地/网络”访问时的示例:
远程文件夹:c:\Inetpub\wwwroot\MySampleApp
有关 FTP 的更多信息,请参见“帮助”中的“设置 FTP 访问的远程信息选项”(“帮助”>
“使用 Dreamweaver”)。
将“站点定义”对话框保持为打开状态。接下来您需要定义处理动态页的文件夹。
指定处理动态页的位置在定义了 Dreamweaver 远程文件夹之后,请按照本节中介绍的步骤指定处理动态页的文件夹。
Dreamweaver 使用此文件夹显示动态页并在您工作时连接到数据库。
若要指定处理动态页的文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“类别”列表中的“测试服务器”。
即会出现“测试服务器”屏幕。Dreamweaver 需要测试服务器的服务以在您工作时生成和显示动态内容。测试服务器可以是您的本地计算机、开发服务器、模拟调试服务器或生产服务器。只要它可以处理 ASP.NET 页,选择哪个选项都没有关系。在本例中,您可以使用与“远程信息”类别相同的设置(请参见第105页的“定义远程文件夹”),因为它们指向能够处理 ASP.NET 页的服务器。
2选择 ASP.NET VB 或 ASP.NET C# 作为您的服务器技术。
3在“访问”文本框中,选择您指定的访问远程文件夹的方法(“本地/网络”或“FTP”)。
Dreamweaver 输入您在“远程信息”类别中指定的设置。不要更改这些设置。
4在“URL 前缀”文本框中,输入当在 Web 应用程序中请求页时您将在 Web 浏览器中输入的根 URL。
若要在您工作时生成并显示动态内容,Dreamweaver 将创建临时文件,将其拷贝到 Web 站点的根文件夹,然后尝试使用 URL 前缀请求该文件。
Dreamweaver 根据您在“站点定义”对话框中提供的信息对 URL 前缀进行最接近的推测。
例如,如果在“远程文件夹”文本框中指定的文件夹是 c:\Inetpub\wwwroot\MySampleApp,
则 URL 前缀应该如下所示:
http://localhost/MySampleApp/
提示,URL 前缀不应该指定站点上特定的页。
然而,建议的 URL 前缀可能并不正确。如果 Dreamweaver 的建议不正确,请更正该 URL 前缀或输入一个新的 URL 前缀。有关更多信息,请参见“帮助”中的“关于 URL 前缀”(“帮助”>“使用 Dreamweaver”)。
5单击“确定”,然后单击“完成”。
在指定了处理动态页的文件夹之后,请将示例文件上传到 Web 服务器。
第 8 章106
上传示例文件在指定了处理动态页的文件夹之后,请按照本节中介绍的步骤将示例文件上传到 Web 服务器。
即使 Web 服务器运行在本地计算机上,您也必须“上传”这些文件。
如果不上传文件,则某些功能(例如“实时数据”视图和“在浏览器中预览”)对动态页可能不能正常工作。例如,由于图像文件尚未在服务器上,“实时数据”视图中的图像链接可能是断开的。同样,如果服务器上没有详细信息页,则在浏览器中预览主页时单击指向详细信息页的链接也将导致错误。
若要将示例文件上传到 Web 服务器,请执行以下操作:
1在“站点”面板(“窗口”>“站点”)中,选择“本地文件”窗格中的根文件夹。
根文件夹应该是列表中的第一个文件夹。
2单击工具栏上蓝色的向上箭头。
Dreamweaver 将所有文件拷贝到您在第105页的“定义远程文件夹”中定义的 Web 服务器文件夹。
这便完成了 Dreamweaver 站点的定义。下一步是连接到随 Dreamweaver 一起安装的示例数据库。如果您的 Web 服务器运行在本地计算机上,请参见第107页的“连接到示例数据库(本地配置)”。如果您的 Web 服务器运行在远程计算机上,请参见第108页的“连接到示例数据库(远程服务器配置)”。
连接到示例数据库(本地配置)
在安装过程中,Dreamweaver 将示例 Microsoft Access 数据库拷贝到您的硬盘。本节介绍在您具有本地配置的情况下(即您的 Web 服务器与 Dreamweaver 在同一台计算机上运行)如何创建到示例数据库的连接。如果您的 Web 服务器运行在远程计算机上,请参见第108页的“连接到示例数据库(远程服务器配置)”。
注意,如果您要连接到另一个数据库,请参见 Dreamweaver“帮助”中的“用于 ASP.NET 开发人员的数据库连接”
(“帮助”>“使用 Dreamweaver”)。
若要创建具有本地配置的连接,请执行以下操作:
1在 Dreamweaver 中打开任何一个 ASP.NET 页,然后打开“数据库”面板(“窗口”>“数据库”)。
2单击该面板上的加号 (+) 按钮,然后从弹出式菜单中选择“OLE DB 连接”。
随即出现“OLE DB 连接”对话框。
3输入 connGlobal 作为连接名称。
4单击“模板”按钮。
随即会出现“连接字符串模板”对话框。
示例 ASP.NET 站点的设置107
5从模板列表中选择“Microsoft Access 2000(Microsoft Jet 4.0 提供程序)”,然后单击“确定”。
Dreamweaver 随即在“OLE DB 连接”对话框中添加一个连接字符串模板。该模板包含连接字符串中所缺少信息的占位符。
6对于“数据源”值,输入到硬盘上示例数据库文件的完整路径。
例如,在安装过程中 Dreamweaver 将示例数据库文件 global.mdb 放置在本地硬盘的以下文件夹中:
c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb
注意,根据安装 Dreamweaver 位置的不同,该路径也有所不同。
输入此路径作为“数据源”的值:
Data Source=c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\
global.mdb;
7删除“用户 ID”和“密码”行。
Access 数据库不需要用户 ID 和密码。
8单击“测试”。
Dreamweaver 尝试连接到数据库。如果连接失败,请执行以下操作:
复查到数据库的路径。
检查 Dreamweaver 用来处理动态页的文件夹的设置(请参见第106页的“指定处理动态页的位置”)。
查询第147页的“数据库连接答疑”。
9单击“确定”。
新连接随即出现在“数据库”面板中。
为入门指南和教程设置示例 ASP.NET 应用程序即告完成。请参见第71页的“在 Dreamweaver
MX 中开发 Web 应用程序”和 Dreamweaver“帮助”中的教程(“帮助”>“教程”)。
连接到示例数据库(远程服务器配置)
在安装过程中,Dreamweaver 将示例 Microsoft Access 数据库拷贝到您的硬盘。本节介绍在您具有远程服务器配置的情况下(即您的 Web 服务器运行在远程计算机上)如何创建到示例数据库的连接。如果您的 Web 服务器与 Dreamweaver 运行在同一台计算机上,请参见第107页的“连接到示例数据库(本地配置)”。
注意,如果您要连接到另一个数据库,请参见 Dreamweaver“帮助”中的“用于 ASP.NET 开发人员的数据库连接”
(“帮助”>“使用 Dreamweaver”)。
第 8 章108
若要创建具有远程服务器配置的连接,请执行以下操作:
1将示例数据库文件拷贝到远程计算机。
数据库文件 (global.mdb) 位于您本地硬盘上的以下文件夹中:
\Macromedia\Dreamweaver MX\Samples\Database\global.mdb
您可以将该文件上传到远程计算机上的任何文件夹中,或者可以为它创建一个新文件夹。不管是哪种情况,都在一张纸上记下到数据库文件的完整路径。
2在 Dreamweaver 中打开任何一个 ASP.NET 页,然后打开“数据库”面板(“窗口”>“数据库”)。
3单击该面板上的加号 (+) 按钮,然后从弹出式菜单中选择“OLE DB 连接”。
随即出现“OLE DB 连接”对话框。
4输入 connGlobal 作为连接名称。
5单击“模板”按钮。
随即出现“连接字符串模板”对话框。
6从模板列表中选择“Microsoft Access 2000(Microsoft Jet 4.0 提供程序)”,然后单击“确定”。
Dreamweaver 随即在“OLE DB 连接”对话框中添加一个连接字符串模板。该模板包含连接字符串中所缺少信息的占位符。
7对于“数据源”值,输入到远程计算机上示例数据库文件的完整路径。
输入您在步骤 1 中记下的路径。例如,网络计算机上的路径可能如下所示,
Data Source=c:\users\Denman\Sites\data\global.mdb;
8删除“用户 ID”和“密码”行。
9单击“测试”。
Dreamweaver 尝试连接到网络计算机上的数据库。如果连接失败,请执行以下操作:
复查到数据库的路径。
检查 Dreamweaver 用来处理动态页的文件夹的设置(请参见第106页的“指定处理动态页的位置”)。
查询第147页的“数据库连接答疑”。
10单击“确定”。
新连接随即出现在“数据库”面板中。
为入门指南和教程设置示例 ASP.NET 应用程序即告完成。请参见第71页的“在 Dreamweaver
MX 中开发 Web 应用程序”和 Dreamweaver“帮助”中的教程(“帮助”>“教程”)。
示例 ASP.NET 站点的设置109
第 8 章110
第 9 章示例
ASP
站点的设置
Macromedia Dreamweaver MX 随附有示例 Microsoft Active Server Page (ASP),可以帮助您建立一个小的 Web 应用程序。本章讲述了一种使用 Microsoft Internet Information Server (IIS) 或
Personal Web Server (PWS) 设置示例应用程序的方法。有关这些 Web 服务器的更多信息,请参见第85页的“在 Windows 中安装 Web 服务器”。如果您正在使用其他 Web 服务器,请参见
“帮助”中的“设置 Web 应用程序”(“帮助”>“使用 Dreamweaver”)。
本章只适用于 ASP 开发人员。如果您要研究 ASP.NET,请参见第101页的“示例 ASP.NET 站点的设置”。
设置 Web 应用程序的过程分为三步。第一步,配置您的系统。第二步,定义 Dreamweaver 站点。第三步,将应用程序连接到您的数据库。本设置指南按照该三步过程进行说明。
本章包含以下几节:
第111页的“ASP 开发人员的设置清单”
第112页的“配置您的系统”
第116页的“定义 Dreamweaver 站点”
第120页的“连接到示例数据库(本地配置)”
第121页的“连接到示例数据库(远程服务器配置)”
ASP 开发人员的设置清单若要设置 Web 应用程序,您必须配置系统、定义 Dreamweaver 站点并连接到数据库。本节提供每项任务的清单。本章的其余部分将对这些过程进行介绍。
配置您的系统:
1确保您具有 Web 服务器。
2安装应用程序服务器。
3测试您的安装。
4创建根文件夹。
111
定义 Dreamweaver 站点:
1将示例文件拷贝到您硬盘上的文件夹中。
2将此文件夹定义为 Dreamweaver 本地文件夹。
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹。
4指定一个处理动态页的文件夹。
5将示例文件上传到 Web 服务器。
连接到数据库(本地配置):
1在 Dreamweaver 中创建连接。
连接到数据库(远程服务器配置):
1在运行 Web 服务器的计算机上设置示例数据库。
2在 Dreamweaver 中创建连接。
配置您的系统本节提供两种常见系统配置的说明 - 其中一种情况是 Microsoft IIS 或 PWS 安装在您的硬盘上,另一种情况是 IIS 或 PWS 安装在远程 Windows 计算机上。如果您不想使用这些配置,请参见“帮助”中的“设置 Web 应用程序”(“帮助”>“使用 Dreamweaver”)。
第 9 章112
下面的插图显示了本节中所介绍的两种配置,
若要配置您的系统,请执行以下操作:
1确保您具有 Web 服务器(请参见第113页的“检查是否存在 Web 服务器”)。
2如果需要,安装应用程序服务器(请参见第114页的“安装 ASP 应用程序服务器”)。
3测试您的安装(请参见第114页的“测试安装”)。
4创建根文件夹(请参见第116页的“创建根文件夹”)。
注意,安装 Web 服务器和应用程序服务器是只需进行一次的任务。
检查是否存在 Web 服务器若要开发和测试动态 Web 页,您需要一个 Web 服务器。Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。
确保 Microsoft IIS 或 PWS 安装并运行在您的硬盘或远程 Windows 计算机上。(Macintosh 用户需要将 Microsoft IIS 或 PWS 安装在远程 Windows 计算机上。)一种快速检查计算机上是否安装有 PWS 或 IIS 的方法是查看文件夹结构。文件夹结构中是否包含 c:\Inetpub 或 d:\Inetpub
文件夹?PWS 和 IIS 在安装过程中将创建该文件夹。
示例 ASP 站点的设置113
如果未安装 PWS 或 IIS,则现在进行安装。有关说明,请参见第85页的“在 Windows 中安装
Web 服务器”。
安装了 Web 服务器之后,您通常需要安装应用程序服务器。
安装 ASP 应用程序服务器若要处理动态 Web 页,您需要应用程序服务器。应用程序服务器是一种软件,它帮助 Web 服务器处理包含服务器端脚本或标签的 Web 页。当从服务器请求这样一个页时,Web 服务器先将该页传递给应用程序服务器进行处理,然后再将该页发送到浏览器。
如果在 Windows 计算机上安装了 PWS 或 IIS,则不需要单独的 ASP 应用程序服务器。PWS 和
IIS 也可以发挥 ASP 应用程序服务器的功能。有关安装和测试 PWS 或 IIS 的更多信息,请参见第85页的“在 Windows 中安装 Web 服务器”。
您可以测试服务器以确保它正常工作。
测试安装您可以按照本节中介绍的步骤通过运行测试页测试 PWS 或 IIS 的 ASP 引擎。
若要测试 PWS 或 IIS 的 ASP 引擎,请执行以下操作,
1在 Dreamweaver 或任何文本编辑器中,创建一个名为“timetest.asp”的纯文本文件。
2在该文件中,输入以下代码:
<p>This page was created at <b>
<%= Time %>
</b> on the computer running ASP.</p>
此代码显示在服务器上处理该页的时间。
3将此文件拷贝到运行 PWS 或 IIS 的 Windows 计算机上的 Inetpub\wwwroot 文件夹中。
4在您的 Web 浏览器中,输入测试页的 URL,然后按回车键。
如果 PWS 或 IIS 运行在您的本地计算机上,则可以输入以下 URL:
http://localhost/timetest.asp
第 9 章114
测试页应该打开并显示时间,如下所示,
该指定的时间通常叫作动态内容,因为您每次请求该页它都发生变化。单击浏览器上的“刷新”
生成具有不同时间的新页。
注意,查看源代码(Internet Explorer 中的“查看”>“源文件”)将确认该页没有使用任何客户端 JavaScript 实现此效果。
如果该页未按预期方式工作,则检查是否可能存在以下错误,
该文件不具有,asp 扩展名。
在浏览器的“地址”文本框中输入了该页的文件路径 (c:\Inetput\wwwroot\timetest.asp),而不是它的 URL(例如,http://localhost/timetest.asp)。
如果您(像处理普通 HTML 页那样)在浏览器中键入了文件路径,则将绕过 Web 服务器和应用程序服务器。结果,您的页将无法得到服务器的处理。
URL 中包含键入错误。检查是否存在错误并确保文件名后没有斜杠,例如 http://localhost/
timetest.asp/。
页代码中包含键入错误。
安装并测试服务器软件之后,为您的 Web 应用程序创建根文件夹。
示例 ASP 站点的设置115
创建根文件夹安装了服务器软件之后,在运行 Microsoft PWS 或 IIS 的系统上为您的 Web 应用程序创建根文件夹,并确保该文件夹具有必要的权限。
若要为您的 Web 应用程序创建根文件夹,请执行以下操作:
1在运行 PWS 或 IIS 的系统上创建一个名为“MySampleApp”的文件夹。
创建该文件夹的合适位置是 C:\Inetpub\wwwroot\。默认情况下,您的 PWS 或 IIS Web 服务器安装在 Inetpub\wwwroot 文件夹中。Web 服务器将根据来自 Web 浏览器的 HTTP 请求提供此文件夹中的任何页或其子文件夹中的任何页。
2确保为该文件夹启用了读权限和脚本权限。
如果您正在使用 PWS,则双击任务栏中的 Web 服务器图标启动 Personal Web Manager。
(该图标显示为握着 Web 页的手。)在 Personal Web Manager 中,单击“高级”图标。随即会出现“高级选项”对话框。选择“主页”并单击“编辑属性”。即会出现“编辑目录”
对话框。确保选择了“读”和“脚本”选项。出于安全原因,您不应该选择“执行”选项。
如果您正在使用 IIS,则启动 IIS 管理工具(在 Windows XP 中,选择“启动”>“控制面板”>“性能维护”>“管理工具”>“Internet 信息服务”)。在“Web 站点”>“默认 Web
站点”下,右键单击您的 MySampleSite 文件夹并从弹出式菜单中选择“属性”。在“执行权限”文本框中,确保选择了“脚本”选项。出于安全原因,请不要选择“脚本和可执行文件”选项。
现在已完成了 Web 服务器的配置,它将根据来自 Web 浏览器的 HTTP 请求提供根文件夹中的
Web 页。
在配置完系统后,您必须定义 Dreamweaver 站点。
定义 Dreamweaver 站点在配置完系统后,您必须将示例文件拷贝到本地文件夹并定义 Dreamweaver 站点来管理这些文件。
注意,Macromedia HomeSite 和 ColdFusion Studio 用户可以将 Dreamweaver 站点视为 HomeSite 或 Studio 项目。
若要定义 Dreamweaver 站点,请执行以下操作:
1将示例文件拷贝到您硬盘上的文件夹中(请参见第117页的“拷贝示例文件”)。
2将此文件夹定义为 Dreamweaver 本地文件夹(请参见第117页的“定义本地文件夹”)。
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹(请参见第118页的“定义远程文件夹”)。
4指定一个处理动态页的文件夹(请参见第118页的“指定处理动态页的位置”)。
5将示例文件上传到 Web 服务器(请参见第119页的“上传示例文件”)。
第 9 章116
拷贝示例文件如果尚未进行此操作,则将示例文件从 Dreamweaver 应用程序文件夹拷贝到您硬盘上的文件夹中。
若要拷贝示例文件,请执行以下操作:
1在您的硬盘上创建一个名为“Sites”的新文件夹。
例如,创建 C:\Sites (Windows) 或 Hard Drive:Documents:Sites (Macintosh)。
2在硬盘上的 Dreamweaver 应用程序文件夹中找到 GettingStarted 文件夹。
该文件夹的路径如下所示:
\Macromedia\Dreamweaver MX\Samples\GettingStarted\
3将 GettingStarted 文件夹拷贝到 Sites 文件夹中。
拷贝 GettingStarted 文件夹之后,将该文件夹定义为 Dreamweaver 本地文件夹。
定义本地文件夹拷贝 GettingStarted 文件夹之后,将包含 ASP 示例文件的文件夹定义为 Dreamweaver 本地文件夹。
若要定义 Dreamweaver 本地文件夹,请执行以下操作:
1在 Dreamweaver 中,选择“站点”>“新建站点”。
即会出现“站点定义”对话框。
2如果显示向导,则单击“高级”。
3在“站点名称”文本框中,输入 GlobalCar - ASP。
该名称在 Dreamweaver 中标识您的站点。
4在“本地根文件夹”文本框中,指定 GettingStarted 文件夹中包含 ASP 示例文件的文件夹。
您可以单击文本框旁边的文件夹图标查找并选择文件夹。在 Windows 中,该文件夹应该如下所示:
C:\Sites\GettingStarted\Develop\asp
在 Macintosh 上,该文件夹应该如下所示:
Hard Drive:Documents:Sites:GettingStarted:Develop:asp
将“站点定义”对话框保持为打开状态。接下来您需要将 Web 服务器文件夹定义为
Dreamweaver 远程文件夹。
示例 ASP 站点的设置117
定义远程文件夹在定义了本地文件夹之后,请按照本节中介绍的步骤将 Web 服务器文件夹定义为 Dreamweaver
远程文件夹。
若要定义 Dreamweaver 远程文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“类别”列表中的“远程信息”。
随即会出现“远程信息”屏幕。
2在“访问”文本框中,选择将文件移入和移出服务器的方式 - 直接移入移出(“本地/网络”
选项)还是“FTP”。
3输入您在第116页的“创建根文件夹”中创建的 Web 服务器文件夹的路径或 FTP 设置。
该文件夹可能位于您的硬盘或远程计算机上。即使您在硬盘上创建文件夹,该文件夹仍然是有效的“远程”文件夹。这里是当您选择“本地/网络”访问时的示例:
远程文件夹:c:\Inetpub\wwwroot\MySampleApp
有关 FTP 的更多信息,请参见“帮助”中的“设置 FTP 访问的远程信息选项”(“帮助”>
“使用 Dreamweaver”)。
将“站点定义”对话框保持为打开状态。接下来您需要定义处理动态页的文件夹。
指定处理动态页的位置在定义了 Dreamweaver 远程文件夹之后,请按照本节中介绍的步骤指定处理动态页的文件夹。
Dreamweaver 使用此文件夹显示动态页并在您工作时连接到数据库。
若要指定处理动态页的文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“类别”列表中的“测试服务器”。
随即会出现“测试服务器”屏幕。Dreamweaver 需要测试服务器的服务以在您工作时生成和显示动态内容。测试服务器可以是您的本地计算机、开发服务器、模拟调试服务器或生产服务器。只要它能够处理 ASP 页,选择哪个选项无关紧要。在本例中,您可以使用与“远程信息”类别相同的设置(请参见第118页的“定义远程文件夹”),因为它们指向能够处理 ASP
页的服务器。
2选择 ASP JavaScript 或 ASP VBScript 作为您的服务器技术。
3在“访问”文本框中,选择您指定的访问远程文件夹的方法(“本地/网络”或“FTP”)。
Dreamweaver 输入您在“远程信息”类别中指定的设置。不要更改这些设置。
第 9 章118
4在“URL 前缀”文本框中,输入当在 Web 应用程序中请求页时您将在 Web 浏览器中输入的根 URL。
若要在您工作时在页中显示活动数据,Dreamweaver 将创建临时文件,将其拷贝到 Web 站点的根文件夹,然后尝试使用 URL 前缀请求该文件。
Dreamweaver 根据您在“站点定义”对话框中提供的信息对 URL 前缀进行最接近的推测。
例如,如果在“远程文件夹”文本框中指定的文件夹是 c:\Inetpub\wwwroot\MySampleApp,
则 URL 前缀应该如下所示:
http://localhost/MySampleApp/
提示,URL 前缀不应该指定站点上特定的页。
然而,建议的 URL 前缀可能并不正确。如果 Dreamweaver 的建议不正确,请更正该 URL 前缀或输入一个新的 URL 前缀。有关更多信息,请参见“帮助”中的“关于 URL 前缀”(“帮助”>“使用 Dreamweaver”)。
5单击“确定”,然后单击“完成”。
在指定了处理动态页的文件夹之后,请将示例文件上传到 Web 服务器。
上传示例文件在指定了处理动态页的文件夹之后,请按照本节中介绍的步骤将示例文件上传到 Web 服务器。
即使 Web 服务器运行在本地计算机上,您也必须“上传”这些文件。
如果不上传文件,则某些功能(例如“实时数据”视图和“在浏览器中预览”)对动态页可能不能正常工作。例如,由于图像文件尚未在服务器上,“实时数据”视图中的图像链接可能是断开的。同样,如果服务器上没有详细信息页,则在浏览器中预览主页时单击指向详细信息页的链接也将导致错误。
若要将示例文件上传到 Web 服务器,请执行以下操作:
1在“站点”面板(“窗口”>“站点”)中,选择“本地文件”窗格中的根文件夹。
根文件夹应该是列表中的第一个文件夹。
2单击工具栏上蓝色的向上箭头。
Dreamweaver 将所有文件拷贝到您在第118页的“定义远程文件夹”中定义的 Web 服务器文件夹。
这便完成了 Dreamweaver 站点的定义。下一步是连接到随 Dreamweaver 一起安装的示例数据库。如果您的 Web 服务器运行在本地计算机上,请参见第120页的“连接到示例数据库(本地配置)”。如果您的 Web 服务器运行在远程计算机上,请参见第121页的“连接到示例数据库(远程服务器配置)”。
示例 ASP 站点的设置119
连接到示例数据库(本地配置)
在安装过程中,Dreamweaver 将示例 Microsoft Access 数据库拷贝到您的硬盘。本节介绍在您具有本地配置的情况下(即您的 Web 服务器与 Dreamweaver 在同一台计算机上运行)如何创建到示例数据库的连接。如果您的 Web 服务器运行在远程计算机上,请参见第121页的“连接到示例数据库(远程服务器配置)”。
注意,如果您要连接到另一个数据库,请参见“帮助”中的“用于 ASP 开发人员的数据库连接”(“帮助”>“使用
Dreamweaver”)。
对于本地配置,您可以使用 Dreamweaver 在安装过程中创建的数据源名称 (DSN) 快速连接到示例数据库。若要了解关于 DSN 的更多信息,请参见“帮助”中的“了解 DSN”(“帮助”>
“使用 Dreamweaver”)。
若要创建具有本地配置的连接,请执行以下操作:
1在 Dreamweaver 中打开任何一个 ASP 页,然后打开“数据库”面板(“窗口”>“数据库”)。
2单击该面板上的加号 (+) 按钮,然后从弹出式菜单中选择“数据源名称 (DSN)”。
出现“数据源名称 (DSN)”对话框。
3输入 connGlobal 作为连接名称。
4选择“使用本地 DSN”选项。
5从 DSN 列表中选择“GlobalCar”。
在安装过程中,Dreamweaver 创建名为“GlobalCar”的 DSN,该 DSN 指向 Dreamweaver
MX 应用程序文件夹内 Samples\Database 文件夹中的 Microsoft Access 数据库。
6单击“测试”。
Dreamweaver 尝试连接到数据库。如果连接失败,请执行以下操作:
复查 DSN。
检查 Dreamweaver 用来处理动态页的文件夹的设置(请参见第118页的“指定处理动态页的位置”)。
查询第147页的“数据库连接答疑”。
7单击“确定”。
新连接随即出现在“数据库”面板中。
为入门指南和教程设置示例 ASP 应用程序即告完成。请参见第71页的“在 Dreamweaver MX
中开发 Web 应用程序”和“帮助”中的教程(“帮助”>“教程”)。
第 9 章120
连接到示例数据库(远程服务器配置)
在安装过程中,Dreamweaver 将示例 Microsoft Access 数据库拷贝到您的硬盘。本节介绍在您具有远程服务器配置的情况下(即您的 Web 服务器运行在远程计算机上)如何创建到示例数据库的连接。如果您的 Web 服务器与 Dreamweaver 运行在同一台计算机上,请参见第120页的“连接到示例数据库(本地配置)”。
注意,如果您要连接到另一个数据库,请参见“帮助”中的“用于 ASP 开发人员的数据库连接”(“帮助”>“使用
Dreamweaver”)。
若要创建具有远程服务器配置的数据库连接,请执行以下操作:
1在运行 Web 服务器的计算机上设置示例数据库(请参见第121页的“在远程计算机上设置数据库”)
2在 Dreamweaver 中创建连接(请参见第122页的“创建数据库连接”)。
在远程计算机上设置数据库在创建到示例数据库的连接之前,请在运行 Web 服务器的远程计算机上执行以下任务:将示例数据库拷贝到计算机的硬盘并在计算机上创建指向该数据库的 DSN。
若要在远程计算机上设置示例数据库,请执行以下操作,
1将示例数据库文件拷贝到远程计算机。
数据库文件 (global.mdb) 位于您本地硬盘上的以下文件夹中:
\Macromedia\Dreamweaver MX\Samples\Database\global.mdb
您可以将该文件上传到远程计算机上的任何文件夹中,或者可以为它创建一个新文件夹。
2确保在远程计算机上安装了 Microsoft Access Driver 版本 4.0 或更高版本。
若要确定是否已经安装了该驱动程序,请参见“帮助”中的“查看安装在 Windows 系统上的 ODBC 驱动程序”(“帮助”>“使用 Dreamweaver”)。
如果未安装该驱动程序,请下载 Microsoft 数据访问组件 (MDAC) 2.5 和 2.6 软件包并将其安装在远程计算机上。您可以从 Microsoft Web 站点免费下载 MDAC,网址为 http://
www.microsoft.com/data/download.htm。这些软件包包含最新的 Microsoft 驱动程序,其中包括 Microsoft Access Driver。
注意,在安装 MDAC 2.6 前安装 MDAC 2.5
3设置名为“GlobalCar”的 DSN,该 DSN 指向远程计算机上的示例数据库。
有关说明,请参见“帮助”中的“在 Windows 中设置 DSN”(“帮助”>“使用
Dreamweaver”)。
在数据库、数据库驱动程序和 DSN 准备就绪之后,在Dreamweaver 中创建数据库连接。
示例 ASP 站点的设置121
创建数据库连接在远程计算机上设置了示例数据库之后,在Dreamweaver 中创建数据库连接。
若要在 Dreamweaver 中创建数据库连接,请执行以下操作:
1在 Dreamweaver 中打开任何一个 ASP 页,然后打开“数据库”面板(“窗口”>“数据库”)。
2单击该面板上的加号 (+) 按钮,然后从弹出式菜单中选择“数据源名称 (DSN)”。
出现“数据源名称 (DSN)”对话框。
3输入 connGlobal 作为连接名称。
4选择“使用测试服务器上的 DSN”选项。
Macintosh 用户可以忽略此步骤,因为所有数据库连接均使用测试服务器上的 DSN。
5单击“DSN”按钮并选择您在远程计算机上设置的 DSN。
6单击“测试”。
Dreamweaver 尝试连接到数据库。如果连接失败,请执行以下操作:
复查 DSN。
检查 Dreamweaver 用来处理动态页的文件夹的设置(请参见第118页的“指定处理动态页的位置”)。
查询第147页的“数据库连接答疑”。
7单击“确定”。
新连接随即出现在“数据库”面板中。
为入门指南和教程设置示例 ASP 应用程序即告完成。请参见第71页的“在 Dreamweaver MX
中开发 Web 应用程序”和 Dreamweaver“帮助”中的教程(“帮助”>“教程”)。
第 9 章122
第 10 章示例
JSP
站点的设置
Macromedia Dreamweaver MX 随附示例 JavaServer Page (JSP) 以帮助您建立一个小型 Web 应用程序。本章介绍使用 Microsoft Internet Information Server (IIS) 或 Personal Web Server
(PWS) 设置示例应用程序的一种方法。有关这些 Web 服务器的更多信息,请参见第85页的“在
Windows 中安装 Web 服务器”。如果您正在使用其他 Web 服务器,请参见“帮助”中的“设置 Web 应用程序”(“帮助”>“使用 Dreamweaver”)。
设置 Web 应用程序的过程分为三步。第一步,配置您的系统。第二步,定义 Dreamweaver 站点。第三步,将应用程序连接到您的数据库。本设置指南按照该三步过程进行说明。
本章包含以下几节:
第123页的“JSP 开发人员的设置核对表”
第124页的“配置您的系统”
第127页的“定义 Dreamweaver 站点”
第131页的“连接到示例数据库(本地配置)”
第133页的“连接到示例数据库(远程服务器配置)”
JSP 开发人员的设置核对表若要设置 Web 应用程序,您必须配置系统、定义 Dreamweaver 站点并连接到数据库。本节提供每项任务的核对表。本章的其余部分将对这些过程进行介绍。
配置您的系统,
1确保您具有 Web 服务器。
2安装 JSP 应用程序服务器。
3创建根文件夹。
定义 Dreamweaver 站点:
1将示例文件拷贝到您硬盘上的文件夹中。
2将此文件夹定义为 Dreamweaver 本地文件夹。
123
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹。
4指定一个处理动态页的文件夹。
5将示例文件上传到 Web 服务器。
连接到数据库(本地配置):
1安装 JDBC-ODBC Bridge 驱动程序。
2在 Dreamweaver 中创建连接。
连接到数据库(远程服务器配置):
1在运行 Web 服务器的计算机上设置示例数据库。
2在 Dreamweaver 中创建连接。
配置您的系统本节提供两种常见系统配置的说明 - 其中一种情况是 Microsoft IIS 或 PWS 安装在您的硬盘上,另一种情况是 IIS 或 PWS 安装在远程 Windows 计算机上。如果您不想使用这些配置,请参见“帮助”中的“设置 Web 应用程序”(“帮助”>“使用 Dreamweaver”)。
第 10 章124
下面的插图显示了本节中所介绍的两种配置,
若要配置您的系统,请执行以下操作:
1确保您具有 Web 服务器(请参见第126页的“检查是否存在 Web 服务器”)。
2安装 JSP 应用程序服务器(请参见第126页的“安装 JSP 应用程序服务器”)。
3创建根文件夹(请参见第127页的“创建根文件夹”)。
注意,安装 Web 服务器和应用程序服务器是只需进行一次的任务。
示例 JSP 站点的设置125
检查是否存在 Web 服务器
若要开发和测试动态 Web 页,您需要一个 Web 服务器。Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。
确保 Microsoft IIS 或 PWS 安装并运行在您的硬盘或远程 Windows 计算机上。(Macintosh 用户需要将 Microsoft IIS 或 PWS 安装在远程 Windows 计算机上。)一种快速检查计算机上是否安装有 PWS 或 IIS 的方法是查看文件夹结构。文件夹结构中是否包含 c:\Inetpub 或 d:\Inetpub
文件夹?PWS 和 IIS 在安装过程中将创建该文件夹。
如果未安装 PWS 或 IIS,则现在进行安装。有关说明,请参见第85页的“在 Windows 中安装
Web 服务器”。
在安装了 Web 服务器之后,请安装应用程序服务器。
安装 JSP 应用程序服务器
若要处理动态 Web 页,您需要应用程序服务器。应用程序服务器是一种软件,它帮助 Web 服务器处理包含服务器端脚本或标签的 Web 页。当从服务器请求这样一个页时,Web 服务器先将该页传递给应用程序服务器进行处理,然后再将该页发送到浏览器。
确保 JSP 应用程序服务器安装并运行在运行 PWS 或 IIS 的系统上。(PWS 或 IIS 可能位于您的硬盘或远程计算机上。)
如果您没有 JSP 应用程序服务器,则可以从 Macromedia Web 站点下载并安装 Macromedia
JRun 的试用版(全功能的 JSP 应用程序服务器),网址为 http://www.macromedia.com/
software/jrun/。
若要安装 JRun,请执行以下操作,
1关闭所有打开的应用程序。
2如果可行,使用管理员帐户登录到 Windows 系统。
3双击 JRun 试用版安装程序文件。
随即会出现启动屏幕。
4如果您的系统上没有 Java Runtime Environment(Java 运行时环境,JRE),则在启动屏幕上选择该选项进行安装。
因为 JRun 应用程序服务器依赖于 Java,所以必须首先在将要运行应用程序服务器的系统上安装 JRE。安装了 JRE 之后,您便可以安装 JRun 应用程序服务器了。
5在启动屏幕上选择该选项安装 JRun。
6按照屏幕上的说明完成安装和测试程序的步骤。
7创建到 IIS 或 PWS Web 服务器的 JRun 连接程序。
有关说明,请参见 JRun 文档。
在安装并启动 JRun 之后,为您的 Web 应用程序创建根文件夹。
第 10 章126
创建根文件夹安装了服务器软件之后,在运行 Microsoft PWS 或 IIS 的系统上为您的 Web 应用程序创建根文件夹,并确保该文件夹具有必要的权限。
若要为您的 Web 应用程序创建根文件夹,请执行以下操作:
1在运行 PWS 或 IIS 的系统上创建一个名为“MySampleApp”的文件夹。
创建该文件夹的合适位置是 C:\Inetpub\wwwroot\。默认情况下,您的 PWS 或 IIS Web 服务器安装在 Inetpub\wwwroot 文件夹中。Web 服务器将根据来自 Web 浏览器的 HTTP 请求提供此文件夹中或其子文件夹中的任何页。
2确保为该文件夹启用了读权限和脚本权限。
如果您正在使用 PWS,则双击任务栏中的 Web 服务器图标启动个人 Web 管理器。(该图标显示为握着 Web 页的手。)在个人 Web 管理器中,单击“高级”图标。即会出现“高级选项”对话框。选择“主页”并单击“编辑属性”。即会出现“编辑目录”对话框。确保选择了“读”和“脚本”选项。出于安全原因,您不应该选择“执行”选项。
如果您正在使用 IIS,则启动 IIS 管理工具(在 Windows XP 中,选择“启动”>“控制面板”>“性能维护”>“管理工具”>“Internet 信息服务”)。在“Web 站点”>“默认 Web
站点”下,右击您的 MySampleSite 文件夹并从弹出式菜单中选择“属性”。在“执行权限”
文本框中,确保选择了“脚本”选项。出于安全原因,请不要选择“脚本和可执行文件”选项。
现在已完成了 Web 服务器的配置,它将根据来自 Web 浏览器的 HTTP 请求提供根文件夹中的
Web 页。
在配置完系统后,您必须定义 Dreamweaver 站点。
定义 Dreamweaver 站点在配置完系统后,您必须将示例文件拷贝到本地文件夹并定义 Dreamweaver 站点来管理这些文件。
注意,Macromedia HomeSite 和 ColdFusion Studio 用户可以将 Dreamweaver 站点视为 HomeSite 或 Studio 项目。
若要定义 Dreamweaver 站点,请执行以下操作:
1将示例文件拷贝到您硬盘上的文件夹中(请参见第128页的“拷贝示例文件”)。
2将此文件夹定义为 Dreamweaver 本地文件夹(请参见第128页的“定义本地文件夹”)。
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹(请参见第129页的“定义远程文件夹”)。
4指定一个处理动态页的文件夹(请参见第129页的“指定处理动态页的位置”)。
5将示例文件上传到 Web 服务器(请参见第130页的“上传示例文件”)。
示例 JSP 站点的设置127
拷贝示例文件如果尚未进行此操作,则将示例文件从 Dreamweaver 应用程序文件夹拷贝到您硬盘上的文件夹中。
若要拷贝示例文件,请执行以下操作:
1在您的硬盘上创建一个名为“Sites”的新文件夹。
例如,创建 C:\Sites (Windows) 或 Hard Drive:Documents:Sites (Macintosh)。
2在硬盘上的 Dreamweaver 应用程序文件夹中找到 GettingStarted 文件夹。
该文件夹的路径如下:
\Macromedia\Dreamweaver MX\Samples\GettingStarted\
3将 GettingStarted 文件夹拷贝到 Sites 文件夹中。
拷贝 GettingStarted 文件夹之后,将该文件夹定义为 Dreamweaver 本地文件夹。
定义本地文件夹拷贝 GettingStarted 文件夹之后,将包含 JSP 示例文件的文件夹定义为 Dreamweaver 本地文件夹。
若要定义 Dreamweaver 本地文件夹,请执行以下操作:
1在 Dreamweaver 中,选择“站点”>“新建站点”。
即会出现“站点定义”对话框。
2如果显示向导,则单击“高级”。
3在“站点名称”文本框中,输入 GlobalCar - JSP。
该名称标识您在 Dreamweaver 中的站点。
4在“本地根文件夹”文本框中,指定 GettingStarted 文件夹中包含 JSP 示例文件的文件夹。
您可以单击文本框旁边的文件夹图标查找并选择文件夹。在 Windows 中,该文件夹应该如下所示:
C:\Sites\GettingStarted\Develop\jsp
在 Macintosh 上,该文件夹应该如下所示:
Hard Drive:Documents:Sites:GettingStarted:Develop:jsp
将“站点定义”对话框保持为打开状态。接下来您需要将一个 Web 服务器文件夹定义为
Dreamweaver 远程文件夹。
第 10 章128
定义远程文件夹在定义了本地文件夹之后,请按照本节中介绍的步骤将一个 Web 服务器文件夹定义为
Dreamweaver 远程文件夹。
若要定义 Dreamweaver 远程文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“类别”列表中的“远程信息”。
即会出现“远程信息”屏幕。
2在“访问”文本框中,选择将文件移入和移出服务器的方式 - 直接移入移出(“本地/网络”
选项)还是“FTP”。
3输入您在第127页的“创建根文件夹”中创建的 Web 服务器文件夹的路径或 FTP 设置。
该文件夹可能位于您的硬盘或远程计算机上。即使您在硬盘上创建文件夹,该文件夹仍然是有效的“远程”文件夹。这里是当您选择“本地/网络”访问时的示例:
远程文件夹:c:\Inetpub\wwwroot\MySampleApp
有关 FTP 的更多信息,请参见“帮助”中的“设置 FTP 访问的远程信息选项”(“帮助”>
“使用 Dreamweaver”)。
将“站点定义”对话框保持为打开状态。接下来您需要定义处理动态页的文件夹。
指定处理动态页的位置在定义了 Dreamweaver 远程文件夹之后,请指定处理动态页的文件夹。Dreamweaver 使用此文件夹显示动态页并在您工作时连接到数据库。
若要指定处理动态页的文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“类别”列表中的“测试服务器”。
即会出现“测试服务器”屏幕。Dreamweaver 需要测试服务器的服务以在您工作时生成和显示动态内容。测试服务器可以是您的本地计算机、开发服务器、模拟调试服务器或生产服务器。只要它能处理 JSP 页,选择哪个选项都可以。在本例中,您可以使用与“远程信息”类别相同的设置(请参见第129页的“定义远程文件夹”),因为它们指向能够处理 JSP 页的服务器。
2选择 JSP 作为您的服务器技术。
3在“访问”文本框中,选择您指定的访问远程文件夹的方法(“本地/网络”或“FTP”)。
Dreamweaver 输入您在“远程信息”类别中指定的设置。不要更改这些设置。
示例 JSP 站点的设置129
4在“URL 前缀”文本框中,输入在 Web 应用程序中请求页时您将在 Web 浏览器中输入的根 URL。
为了在您工作时在页中显示活动数据,Dreamweaver 将创建临时文件,将其拷贝到 Web 站点的根文件夹,然后尝试使用 URL 前缀请求该文件。
Dreamweaver 根据您在“站点定义”对话框中提供的信息对 URL 前缀进行最接近的推测。
例如,如果在“远程文件夹”文本框中指定的文件夹是 c:\Inetpub\wwwroot\MySampleApp,
则 URL 前缀应该如下所示:
http://localhost/MySampleApp/
提示,URL 前缀不应该指定站点上特定的页。
然而,建议的 URL 前缀可能并不正确。如果 Dreamweaver 的建议不正确,请更正该 URL 前缀或输入一个新的 URL 前缀。有关更多信息,请参见“帮助”中的“关于 URL 前缀”(“帮助”>“使用 Dreamweaver”)。
5单击“确定”,然后单击“完成”。
在指定了处理动态页的文件夹之后,请将示例文件上传到 Web 服务器。
上传示例文件在指定了处理动态页的文件夹之后,请按照本节中介绍的步骤将示例文件上传到 Web 服务器。
即使 Web 服务器运行在本地计算机上,您也必须“上传”这些文件。
如果不上传文件,则某些功能(例如“实时数据”视图和“在浏览器中预览”)对动态页可能不能正常工作。例如,由于图像文件尚未在服务器上,“实时数据”视图中的图像链接可能是断开的。同样,如果服务器上没有详细信息页,则在浏览器中预览主页时单击指向详细信息页的链接也将导致错误。
若要将示例文件上传到 Web 服务器,请执行以下操作:
1在“站点”面板(“窗口”>“站点”)中,选择“本地文件”窗格中的根文件夹。
根文件夹应该是列表中的第一个文件夹。
2单击工具栏上蓝色的向上箭头。
Dreamweaver 将所有文件拷贝到您在第129页的“定义远程文件夹”中定义的 Web 服务器文件夹。
这便完成了 Dreamweaver 站点的定义。下一步是连接到随 Dreamweaver 一起安装的示例数据库。如果您的 Web 服务器运行在本地计算机上,请参见第131页的“连接到示例数据库(本地配置)”。如果您的 Web 服务器运行在远程计算机上,请参见第133页的“连接到示例数据库(远程服务器配置)”。
第 10 章130
连接到示例数据库(本地配置)
在安装过程中,Dreamweaver 将示例 Microsoft Access 数据库拷贝到您的硬盘。本节介绍在您具有本地配置的情况下(即您的 Web 服务器与 Dreamweaver 运行在同一台计算机上)如何创建到示例数据库的连接。如果您的 Web 服务器运行在远程计算机上,请参见第133页的“连接到示例数据库(远程服务器配置)”。
注意,如果您要连接到另一个数据库,请参见“帮助”中的“用于 JSP 开发人员的数据库连接”(“帮助”>“使用
Dreamweaver”)。
若要创建具有本地配置的数据库连接,请执行以下操作:
1安装 Sun JDBC-ODBC Bridge 驱动程序(请参见第131页的“安装 Bridge 驱动程序”)。
2在 Dreamweaver 中创建连接(请参见第132页的“创建数据库连接”)。
安装 Bridge 驱动程序在创建到示例数据库的连接之前,请在运行 Web 服务器的计算机上安装 Sun JDBC-ODBC
Bridge 驱动程序。Bridge 驱动程序允许您使用 Windows 数据源名称 (DSN) 来创建连接。该驱动程序和用于 Windows 的 Sun Java 2 SDK 标准版一起提供。
若要确定是否已具有带有该驱动程序的 Java 2 SDK,请检查您的硬盘上是否有以下目录中的任何一个:
c:\jdk1.2.x
c:\jdk1.3.x
注意,Java 1.2.2 和 1.3 同于 Java 2。
如果没有 SDK,请从 Sun Web 站点(网址为 http://java.sun.com/j2se/)进行下载。下载完安装文件之后,双击该文件以运行安装程序。按照屏幕上的说明进行操作并确保在“选择组件”
对话框中选择了 Java 2 运行时环境组件。该组件应该是默认选中的。在安装 SDK 时将自动安装驱动程序。
尽管 Sun JDBC-ODBC Bridge 驱动程序用于开发低端数据库系统(例如 Microsoft Access)绰绰有余,但它不适用于进行生产。例如,该驱动程序一次只让一个 JSP 页连接到数据库(换言之,它不支持多个线程并发使用)。有关驱动程序限制的更多信息,请参见 Macromedia 支持中心上的文章 12409,网址为 http://www.macromedia.com/go/jdbc-odbc_problems。
安装了 Bridge 驱动程序之后,在 Dreamweaver 中创建数据库连接。
示例 JSP 站点的设置131
创建数据库连接在运行 Web 服务器的计算机上安装了 Sun JDBC-ODBC Bridge 驱动程序之后,请在
Dreamweaver 中创建数据库连接。
若要在 Dreamweaver 中创建数据库连接,请执行以下操作:
1在 Dreamweaver 中打开任何一个 JSP 页,然后打开“数据库”面板(“窗口”>“数据库”)。
2在该面板上单击加号 (+) 按钮并从弹出式菜单中选择“Sun JDBC-ODBC 驱动程序(ODBC
数据库)”。
即会出现“ODBC 数据库(Sun JDBC-ODBC 驱动程序)”对话框。
3输入 connGlobal 作为连接名称。
4选择“在此计算机上使用驱动程序”选项。
5用 GlobalCar 替换“URL”文本框中的 [odbc dsn] 占位符。
在安装过程中,Dreamweaver 创建名为“GlobalCar”的 DSN,该 DSN 指向 Dreamweaver
MX 应用程序文件夹内 Samples\Database 文件夹中的 Microsoft Access 数据库。
“URL”文本框应类似于:
jdbc:odbc:GlobalCar
6单击“测试”。
Dreamweaver 尝试连接到数据库。如果连接失败,请执行以下操作:
复查 DSN 和其他连接参数。
检查 Dreamweaver 用来处理动态页的文件夹的设置(请参见第129页的“指定处理动态页的位置”)。
查询第147页的“数据库连接答疑”。
7单击“确定”。
新连接随即出现在“数据库”面板中。
为入门指南和教程设置示例 JSP 应用程序即告完成。请参见第71页的“在 Dreamweaver MX
中开发 Web 应用程序”和“帮助”中的教程(“帮助”>“教程”)。
第 10 章132
连接到示例数据库(远程服务器配置)
在安装过程中,Dreamweaver 将示例 Microsoft Access 数据库拷贝到您的硬盘。本节介绍在您具有远程服务器配置的情况下(即您的 Web 服务器运行在远程计算机上)如何创建到示例数据库的连接。如果您的 Web 服务器与 Dreamweaver 运行在同一台计算机上,请参见第131页的“连接到示例数据库(本地配置)”。
注意,如果您要连接到另一个数据库,请参见“帮助”中的“用于 JSP 开发人员的数据库连接”(“帮助”>“使用
Dreamweaver”)。
若要创建具有远程服务器配置的数据库连接,请执行以下操作:
1在运行 Web 服务器的计算机上设置示例数据库(请参见第133页的“在远程计算机上设置数据库”)。
2在 Dreamweaver 中创建连接(请参见第134页的“创建数据库连接”)。
在远程计算机上设置数据库在创建到示例数据库的连接之前,请在运行 Web 服务器的远程计算机上执行以下任务:将示例数据库拷贝到计算机的硬盘,在计算机上创建指向该数据库的 DSN,然后在计算机上安装 Sun
JDBC-ODBC Bridge 驱动程序。
若要在远程计算机上设置示例数据库,请执行以下操作,
1将示例数据库文件拷贝到远程计算机。
数据库文件 (global.mdb) 位于您本地硬盘上的以下文件夹中:
\Macromedia\Dreamweaver MX\Samples\Database\global.mdb
您可以将该文件上传到远程计算机上的任何文件夹中,或者可以为它创建一个新文件夹。
2确保在远程计算机上安装了 Microsoft Access Driver 版本 4.0 或更高版本。
若要确定是否已经安装了该驱动程序,请参见“帮助”中的“查看安装在 Windows 系统上的 ODBC 驱动程序”(“帮助”>“使用 Dreamweaver”)。
如果未安装该驱动程序,请下载 Microsoft 数据访问组件 (MDAC) 2.5 和 2.6 软件包并将其安装在远程计算机上。您可以从 Microsoft Web 站点免费下载 MDAC,网址为 http://
www.microsoft.com/data/download.htm。这些软件包包含最新的 Microsoft 驱动程序,其中包括 Microsoft Access Driver。
注意,在安装 MDAC 2.6 前安装 MDAC 2.5
3在远程计算机上为示例数据库设置 DSN。
有关说明,请参见“帮助”中的“在 Windows 中设置 DSN”(“帮助”>“使用
Dreamweaver”)。
4确保在远程计算机上安装了 Sun JDBC-ODBC Bridge 驱动程序。
您将使用该驱动程序和 DSN 来创建到数据库的连接。有关说明,请参见第131页的“安装
Bridge 驱动程序”。
在数据库、DSN 和 Bridge 驱动程序准备就绪之后,在 Dreamweaver 中创建数据库连接。
示例 JSP 站点的设置133
创建数据库连接在远程计算机上设置了示例数据库之后,在 Dreamweaver 中创建数据库连接。
若要在 Dreamweaver 中创建数据库连接,请执行以下操作:
1在 Dreamweaver 中打开任何一个 JSP 页,然后打开“数据库”面板(“窗口”>“数据库”)。
2在该面板上单击加号 (+) 按钮并从弹出式菜单中选择“ODBC 数据库(Sun JDBC-ODBC
驱动程序)”。
即会出现“ODBC 数据库(Sun JDBC-ODBC 驱动程序)”对话框。
3输入 connGlobal 作为连接名称。
4选择“使用测试服务器上的驱动程序”选项。
Macintosh 用户可以忽略此步骤,因为所有数据库连接均使用测试服务器上的驱动程序。
5用您在远程计算机上定义的 DSN 替换“URL”文本框中的 [odbc dsn] 占位符。
“URL”文本框应类似于:
jdbc:odbc:myDSN
6单击“测试”。
Dreamweaver 尝试连接到数据库。如果连接失败,请执行以下操作:
复查 DSN 和其他连接参数。
检查 Dreamweaver 用来处理动态页的文件夹的设置(请参见第129页的“指定处理动态页的位置”)。
查询第147页的“数据库连接答疑”。
7单击“确定”。
新连接随即出现在“数据库”面板中。
为入门指南和教程设置示例 JSP 应用程序即告完成。请参见第71页的“在 Dreamweaver MX
中开发 Web 应用程序”和 Dreamweaver“帮助”中的教程(“帮助”>“教程”)。
第 10 章134
第 11 章示例
PHP
站点的设置
Macromedia Dreamweaver MX 随附示例 PHP 页以帮助您建立一个小型 Web 应用程序。本章介绍使用 Microsoft Internet Information Server (IIS) 或 Personal Web Server (PWS) 设置示例应用程序的一种方法。有关这些 Web 服务器的更多信息,请参见第85页的“在 Windows 中安装 Web 服务器”。如果您正在使用其他 Web 服务器,请参见“帮助”中的“设置 Web 应用程序”(“帮助”>“使用 Dreamweaver”)。
如果您是 Mac OS X 用户,则可以使用随您的操作系统一起安装的 Apache Web 服务器和 PHP
应用程序服务器在本地开发 PHP 站点。有关设置信息,请参见以下 Web 站点:
http://developer.apple.com/internet/macosx/php.html
http://www.entropy.ch/software/macosx/
http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html
设置 Web 应用程序的过程分为三步。第一步,配置您的系统。第二步,定义 Dreamweaver 站点。第三步,将应用程序连接到您的数据库。本设置指南按照该三步过程进行说明。
本章包含以下几节:
第136页的“PHP 开发人员的设置核对表”
第137页的“配置您的系统”
第140页的“定义 Dreamweaver 站点”
第143页的“连接到示例数据库”
135
开发人员的设置核对表PHP
若要设置 Web 应用程序,您必须配置系统、定义 Dreamweaver 站点并连接到数据库。本节提供每项任务的核对表。本章的其余部分将对这些过程进行介绍。
配置您的系统,
1确保您具有 Web 服务器。
2安装 PHP 应用程序服务器。
3测试您的安装。
4创建根文件夹。
定义 Dreamweaver 站点:
1将示例文件拷贝到您硬盘上的文件夹中。
2将此文件夹定义为 Dreamweaver 本地文件夹。
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹。
4指定一个处理动态页的文件夹。
5将示例文件上传到 Web 服务器。
连接到数据库:
1创建示例 MySQL 数据库。
2在 Dreamweaver 中创建数据库连接。
第 11 章136
配置您的系统本节提供两种常见系统配置的说明 - 其中一种情况是 Microsoft IIS 或 PWS 安装在您的硬盘上,另一种情况是 IIS 或 PWS 安装在远程 Windows 计算机上。如果您不想使用这些配置,请参见“帮助”中的“设置 Web 应用程序”(“帮助”>“使用 Dreamweaver”)。
注意,如果您是 Mac OS X 用户,则可以使用随您的操作系统一起安装的 Apache Web 服务器和 PHP 应用程序服务器。有关更多信息,请参见 Apple Web 站点(网址是 http://developer.apple.com/internet/macosx/php.html)。
其他有用的 Web 站点包括 http://www.entropy.ch/software/macosx/ 和 http://www.stepwise.com/Articles/
Workbench/2001-10-11.01.html。
下面的插图显示了本节中所介绍的两种配置,
若要配置您的系统,请执行以下操作:
1确保您具有 Web 服务器(请参见第138页的“检查是否存在 Web 服务器”)。
2安装 PHP 应用程序服务器(请参见第138页的“安装 PHP 应用程序服务器”)。
3测试您的安装(请参见第139页的“测试安装”)。
4创建根文件夹(请参见第140页的“创建根文件夹”)。
注意,安装 Web 服务器和应用程序服务器是只需进行一次的任务。
示例 PHP 站点的设置137
检查是否存在 Web 服务器若要开发和测试动态 Web 页,您需要一个 Web 服务器。Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。
确保 Microsoft IIS 或 PWS 安装并运行在您的硬盘或远程 Windows 计算机上。(Macintosh 用户需要将 Microsoft IIS 或 PWS 安装在远程 Windows 计算机上。)一种快速检查计算机上是否安装有 PWS 或 IIS 的方法是查看文件夹结构。文件夹结构中是否包含 c:\Inetpub 或 d:\Inetpub
文件夹?PWS 和 IIS 在安装过程中将创建该文件夹。
如果未安装 PWS 或 IIS,则现在进行安装。有关说明,请参见第85页的“在 Windows 中安装
Web 服务器”。
在安装了 Web 服务器之后,请安装应用程序服务器。
安装 PHP 应用程序服务器
若要处理动态 Web 页,您需要应用程序服务器。应用程序服务器是一种软件,它帮助 Web 服务器处理包含服务器端脚本或标签的 Web 页。当从服务器请求这样一个页时,Web 服务器先将该页传递给应用程序服务器进行处理,然后再将该页发送到浏览器。
确保 PHP 应用程序服务器安装并运行在运行 PWS 或 IIS 的系统上。(PWS 或 IIS 可能位于您的硬盘或远程 Windows 计算机上。)
如果您没有 PHP,则可以从 PHP Web 站点进行下载和安装,网址为 http://www.php.net/
downloads.php。选择 Windows 安装程序文件,该文件使用 InstallShield 安装PHP 并配置 IIS
或 PWS。
若要在 Windows 系统上安装 PHP,请执行以下操作:
1关闭所有打开的应用程序。
2如果可行,使用管理员帐户登录到 Windows 系统。
3双击从 PHP Web 站点下载的安装程序文件。
4按照屏幕上的说明安装该程序。
安装完成后,安装程序将通知您是需要重新启动系统、重新启动服务器还是直接开始使用
PHP。
有关配置服务器的更多信息,请参见 PHP 文档,您可以从 PHP Web 站点下载该文档,网址为
http://www.php.net/download-docs.php。
安装了 PHP 之后,您可以测试服务器以确保它正常工作。
第 11 章138
测试安装您可以按照本节中介绍的步骤通过运行测试页测试 PHP 应用程序服务器。
若要测试 PHP 应用程序服务器,请执行以下操作,
1在 Dreamweaver 或任何文本编辑器中,创建一个名为“timetest.php”的纯文本文件。
2在该文件中,输入以下代码,
<p>This page was created at <b>
<?php echo date("h:i:s a",time());?>
</b> on the computer running PHP.</p>
该代码显示在服务器上处理该页的时间。
3将此页拷贝到运行 PWS 或 IIS 的 Windows 计算机内硬盘上的 Inetpub\wwwroot 文件夹中。
4在您的 Web 浏览器中,输入测试页的 URL,然后按回车键。
如果您将 PHP 安装在本地计算机上,则可以输入以下 URL:
http://localhost/timetest.php
测试页应该打开并显示时间,如下所示,
该指定的时间称作动态内容,因为您每次请求该页它都发生变化。单击浏览器上的“刷新”生成具有不同时间的新页。
注意,查看源代码(Internet Explorer 中的“查看”>“源文件”)将确认该页没有使用任何客户端 JavaScript 实现此效果。
如果该页未按预期方式进行工作,则检查是否存在以下可能的错误,
该文件不具有,php 扩展名。
示例 PHP 站点的设置139
在浏览器的“地址”文本框中输入了该页的文件路径 (c:\Inetput\wwwroot\timetest.php),而不是它的 URL(例如,http://localhost/timetest.php)。
如果您(像处理普通 HTML 页那样)在浏览器中键入了文件路径,则将绕过 Web 服务器和应用程序服务器。结果,您的页将无法得到服务器的处理。
URL 中包含键入错误。检查是否存在错误并确保文件名后没有斜杠,例如 http://localhost/
timetest.php/。
安装并测试服务器软件之后,为您的 Web 应用程序创建根文件夹。
创建根文件夹安装了服务器软件之后,在运行 Microsoft PWS 或 IIS 的系统上为您的 Web 应用程序创建根文件夹,并确保该文件夹具有必要的权限。
若要为您的 Web 应用程序创建根文件夹,请执行以下操作:
1在运行 PWS 或 IIS 的系统上创建一个名为“MySampleApp”的文件夹。
创建该文件夹的合适位置是 C:\Inetpub\wwwroot\。默认情况下,您的 PWS 或 IIS Web 服务器安装在 Inetpub\wwwroot 文件夹中。Web 服务器将根据来自 Web 浏览器的 HTTP 请求提供此文件夹中或其子文件夹中的任何页。
2确保为该文件夹启用了读权限和脚本权限。
如果您正在使用 PWS,则双击任务栏中的 Web 服务器图标启动个人 Web 管理器。(该图标显示为握着 Web 页的手。)在个人 Web 管理器中,单击“高级”图标。即会出现“高级选项”对话框。选择“主页”并单击“编辑属性”。即会出现“编辑目录”对话框。确保选择了“读”和“脚本”选项。出于安全原因,您不应该选择“执行”选项。
如果您正在使用 IIS,则启动 IIS 管理工具(在 Windows XP 中,选择“启动”>“控制面板”>“性能维护”>“管理工具”>“Internet 信息服务”)。在“Web 站点”>“默认 Web
站点”下,右击您的 MySampleSite 文件夹并从弹出式菜单中选择“属性”。在“执行权限”
文本框中,确保选择了“脚本”选项。出于安全原因,请不要选择“脚本和可执行文件”选项。
现在已完成了 Web 服务器的配置,它将根据来自 Web 浏览器的 HTTP 请求提供根文件夹中的
Web 页。
在配置完系统后,您必须定义 Dreamweaver 站点。
定义 Dreamweaver 站点在配置完系统后,您必须将示例文件拷贝到本地文件夹并定义 Dreamweaver 站点来管理这些文件。
注意,Macromedia HomeSite 和 ColdFusion Studio 用户可以将 Dreamweaver 站点视为 HomeSite 或 Studio 项目。
若要定义 Dreamweaver 站点,请执行以下操作:
1将示例文件拷贝到您硬盘上的文件夹中(请参见第141页的“拷贝示例文件”)。
2将此文件夹定义为 Dreamweaver 本地文件夹(请参见第141页的“定义本地文件夹”)。
第 11 章140
3将 Web 服务器文件夹定义为 Dreamweaver 远程文件夹(请参见第142页的“定义远程文件夹”)。
4指定一个处理动态页的文件夹(请参见第142页的“指定处理动态页的位置”)。
5将示例文件上传到 Web 服务器(请参见第143页的“上传示例文件”)。
拷贝示例文件如果尚未进行此操作,则将示例文件从 Dreamweaver 应用程序文件夹拷贝到您硬盘上的文件夹中。
若要拷贝示例文件,请执行以下操作:
1在您的硬盘上创建一个名为“Sites”的新文件夹。
例如,创建 C:\Sites (Windows) 或 Hard Drive:Documents:Sites (Macintosh)。
2在硬盘上的 Dreamweaver 应用程序文件夹中找到 GettingStarted 文件夹。
该文件夹的路径如下:
\Macromedia\Dreamweaver MX\Samples\GettingStarted\
3将 GettingStarted 文件夹拷贝到 Sites 文件夹中。
拷贝 GettingStarted 文件夹之后,将该文件夹定义为 Dreamweaver 本地文件夹。
定义本地文件夹拷贝 GettingStarted 文件夹之后,将包含 PHP 示例文件的文件夹定义为 Dreamweaver 本地文件夹。
若要定义 Dreamweaver 本地文件夹,请执行以下操作:
1在 Dreamweaver 中,选择“站点”>“新建站点”。
即会出现“站点定义”对话框。
2如果显示向导,则单击“高级”。
3在“站点名称”文本框中,输入 GlobalCar - PHP。
该名称标识您在 Dreamweaver 中的站点。
4在“本地根文件夹”文本框中,指定 GettingStarted 文件夹中包含 PHP 示例文件的文件夹。
您可以单击文本框旁边的文件夹图标查找并选择文件夹。在 Windows 中,该文件夹应该如下所示:
C:\Sites\GettingStarted\Develop\php
在 Macintosh 上,该文件夹应该如下所示:
Hard Drive:Documents:Sites:GettingStarted:Develop:php
5将“站点定义”对话框保持为打开状态。接下来您需要将一个 Web 服务器文件夹定义为
Dreamweaver 远程文件夹。
示例 PHP 站点的设置141
定义远程文件夹在定义了本地文件夹之后,请按照本节中介绍的步骤将一个 Web 服务器文件夹定义为
Dreamweaver 远程文件夹。
若要定义 Dreamweaver 远程文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“类别”列表中的“远程信息”。
即会出现“远程信息”屏幕。
2在“访问”文本框中,选择将文件移入和移出服务器的方式 - 直接移入移出(“本地/网络”
选项)还是“FTP”。
3输入您在第140页的“创建根文件夹”中创建的 Web 服务器文件夹的路径或 FTP 设置。
该文件夹可能位于您的硬盘或远程计算机上。即使您在硬盘上创建文件夹,该文件夹仍然是有效的“远程”文件夹。这里是当您选择“本地/网络”访问时的示例:
远程文件夹:c:\Inetpub\wwwroot\MySampleApp
有关 FTP 的更多信息,请参见“帮助”中的“设置 FTP 访问的远程信息选项”(“帮助”>
“使用 Dreamweaver”)。
将“站点定义”对话框保持为打开状态。接下来您需要定义处理动态页的文件夹。
指定处理动态页的位置在定义了 Dreamweaver 远程文件夹之后,请按照本节中介绍的步骤指定处理动态页的文件夹。
Dreamweaver 使用此文件夹显示动态页并在您工作时连接到数据库。
若要指定处理动态页的文件夹,请执行以下操作:
1在高级“站点定义”对话框中,单击“类别”列表中的“测试服务器”。
即会出现“测试服务器”屏幕。Dreamweaver 需要测试服务器的服务以在您工作时生成和显示动态内容。测试服务器可以是您的本地计算机、开发服务器、模拟调试服务器或生产服务器。只要它能处理 PHP 页,选择哪个选项都可以。在本例中,您可以使用与“远程信息”类别相同的设置(请参见第142页的“定义远程文件夹”),因为它们指向能够处理 PHP 页的服务器。
2选择 PHP MySQL 作为您的服务器技术。
3在“访问”文本框中,选择您指定的访问远程文件夹的方法(“本地/网络”或“FTP”)。
Dreamweaver 输入您在“远程信息”类别中指定的设置。不要更改这些设置。
第 11 章142
4在“URL 前缀”文本框中,输入在 Web 应用程序中请求页时您将在 Web 浏览器中输入的根
URL。
为了在您工作时在页中显示活动数据,Dreamweaver 将创建临时文件,将其拷贝到 Web 站点的根文件夹,然后尝试使用 URL 前缀请求该文件。
Dreamweaver 根据您在“站点定义”对话框中提供的信息对 URL 前缀进行最接近的推测。
然而,建议的 URL 前缀可能并不正确。例如,如果在“远程文件夹”文本框中指定的文件夹是 c:\Inetpub\wwwroot\MySampleApp,则 URL 前缀应该如下所示:
http://localhost/MySampleApp/
提示,URL 前缀不应该指定站点上特定的页。
然而,建议的 URL 前缀可能并不正确。如果 Dreamweaver 的建议不正确,请更正该 URL 前缀或输入一个新的 URL 前缀。有关更多信息,请参见“帮助”中的“关于 URL 前缀”(“帮助”>“使用 Dreamweaver”)。
5单击“确定”,然后单击“完成”。
在指定了处理动态页的文件夹之后,请将示例文件上传到 Web 服务器。
上传示例文件在指定了处理动态页的文件夹之后,请按照本节中介绍的步骤将示例文件上传到 Web 服务器。
即使 Web 服务器运行在本地计算机上,您也必须“上传”这些文件。
如果不上传文件,则某些功能(例如“实时数据”视图和“在浏览器中预览”)对动态页可能不能正常工作。例如,由于图像文件尚未在服务器上,“实时数据”视图中的图像链接可能是断开的。同样,如果服务器上没有详细信息页,则在浏览器中预览主页时单击指向详细信息页的链接也将导致错误。
若要将示例文件上传到 Web 服务器,请执行以下操作:
1在“站点”面板(“窗口”>“站点”)中,选择“本地文件”窗格中的根文件夹。
根文件夹应该是列表中的第一个文件夹。
2单击工具栏上蓝色的向上箭头。
Dreamweaver 将所有文件拷贝到您在第142页的“定义远程文件夹”中定义的 Web 服务器文件夹。
这便完成了 Dreamweaver 站点的定义。下一步是连接到随 Dreamweaver 一起安装的示例数据库。
连接到示例数据库在安装过程中,Dreamweaver 将 SQL 脚本拷贝到您的硬盘。您可以使用此脚本自动创建示例
MySQL 数据库。本节介绍如何创建到示例数据库的连接。
本节假设您已在本地或远程计算机上安装并配置了 MySQL。若要下载和安装数据库系统,请访问 MySQL Web 站点,网址为 www.mysql.com。
示例 PHP 站点的设置143
第一步是使用 SQL 脚本创建示例 MySQL 数据库(请参见第144页的“创建 MySQL 数据库”)。创建了数据库之后,您必须在 Dreamweaver 中创建数据库连接(请参见第145页的“创建数据库连接”)。
创建 MySQL 数据库在安装过程中,Dreamweaver MX 拷贝能够创建和填充示例 MySQL 数据库的 SQL 脚本。
在开始之前,确保在本地或远程计算机上安装并配置了 MySQL。您可以从 MySQL Web 站点
(网址为 www.mysql.com)下载最新的版本。
若要创建示例 MySQL 数据库,请执行以下操作:
1将 SQL 脚本文件 (insert.sql) 拷贝到具有 MySQL 的计算机上的 MySql\Bin 文件夹中。
该脚本文件位于您硬盘上的以下文件夹中:
\Macromedia\Dreamweaver MX\Samples\Database\insert.sql
2在具有 MySQL 的计算机上,打开命令提示符窗口。
在 Windows 中,您可以通过选择“开始”>“程序”>“命令提示符”打开命令提示符。
注意,在某些系统上,“命令提示符”可能位于“开始”>“程序”菜单中的“附件”下。
3通过在命令提示符处输入以下命令更改为 mysql\bin 目录:
> cd\
> cd mysql\bin
4通过在 mysql\bin\ 提示符处输入以下命令启动 MySQL 客户端:
> mysql -uUser -pPassword
例如,如果您的 MySQL 用户名(也称作帐户名)和密码分别为“Tara”和“Te ll y 3”,则输入以下命令:
> mysql -uTara -pTelly3
如果您没有密码,则省略 -p 参数,如下所示:
> mysql -uTara
如果您在配置 MySQL 安装时未定义用户名,则输入“root”作为用户名,如下所示:
> mysql -uroot
即会显示 MySQL 客户端的命令提示符,如下所示:
mysql>
5通过在 MySQL 提示符处输入以下命令创建一个新数据库:
mysql>CREATE DATABASE GlobalCar;
MySQL 将创建一个新数据库,但它尚不包含任何表或记录。
6通过在提示符处输入以下命令从 MySQL 客户端注销:
mysql>quit
第 11 章144
7在系统命令提示符处,通过以下命令填充 MySQL 中的新 GlobalCar 数据库,
> mysql -uUser -pPassword GlobalCar < insert.sql
此命令使用 insert.sql 文件将表和记录添加到您在第 5 步中创建的 GlobalCar 数据库。
创建了 MySQL 数据库之后,在 Dreamweaver 中创建到该数据库的数据库连接。
创建数据库连接设置了示例数据库之后,您可以在 Dreamweaver 中创建数据库连接。
若要在 Dreamweaver 中创建数据库连接,请执行以下操作:
1在 Dreamweaver 中打开任何一个 PHP 页,然后打开“数据库”面板(“窗口”>“数据库”)。
2在该面板上单击加号 (+) 按钮并从弹出式菜单中选择“MySQL 连接”。
即会出现“MySQL 连接”对话框。
3输入 connGlobal 作为连接名称。
4在“MySQL 服务器”文本框中,指定承载 MySQL 的计算机。
输入 IP 地址或服务器名称。如果 MySQL 与 PHP 运行在同一台计算机上,则输入
localhost。
5输入您的 MySQL 用户名和密码。
如果在 Windows 计算机上配置 MySQL 安装时未定义用户名,则在“用户名”文本框中输入单词“root”。如果您没有密码,则将“密码”文本框留空。
6在“数据库”文本框中,输入 GlobalCar,或单击“选择”并从 MySQL 数据库列表中选择
“GlobalCar”。
GlobalCar 是您创建的示例 MySQL 数据库的名称(请参见第144页的“创建 MySQL 数据库”)。
7单击“测试”。
Dreamweaver 尝试连接到数据库。如果连接失败,请复查服务器名称、用户名和密码。如果连接仍失败,请检查 Dreamweaver 用来处理动态页面的文件夹的设置(请参见第142页的
“指定处理动态页的位置”)。
8单击“确定”。
新连接随即出现在“数据库”面板中。
为入门指南和教程设置示例 PHP 应用程序即告完成。请参见第71页的“在 Dreamweaver MX
中开发 Web 应用程序”和 Dreamweaver“帮助”中的教程(“帮助”>“教程”)。
示例 PHP 站点的设置145
第 11 章146
第 12 章数据库连接答疑本章介绍在创建数据库连接后遇到的一些常见问题,并介绍解决这些问题的方法。本章包括以下几节:
第147页的“Microsoft 错误信息答疑”
第151页的“ColdFusion 错误信息答疑”
第152页的“权限问题答疑”
Microsoft 错误信息答疑本节介绍一些常见的 Microsoft 错误信息以及修正这些错误的方法。如果您将 Internet
Information Server (IIS) 与 Microsoft 数据库系统(例如 Access 或 SQL Server)一起使用,则可能发生这些错误。这些错误通常在您从服务器中请求动态页时发生。
注意,Macromedia 不对 Microsoft Windows 和 IIS 等第三方软件提供技术支持。如果本节内容无法解决您的问题,请与 Microsoft 技术支持部门联系或访问 Microsoft 支持 Web 站点:http://support.microsoft.com/。
本节将讨论以下错误信息:
第148页的“80004005 - 未找到数据源名称并且未指定默认驱动程序”(此错误信息的其他形式包括“80004005 - 驱动程序的 SQLSetConnectAttr 失败”和“80004005 - 一般性错误:无法打开注册表项‘DriverId’”)
第148页的“80004005 - 无法使用“(未知)”;文件已在使用”
(另一形式为“80004005 - Microsoft Jet 数据库引擎无法打开文件(未知)”)
第149页的“80004005 - 登录失败()”
第149页的“80004005 - 操作必须使用可更新的查询”
第150页的“80040e07 - 条件表达式中分类不匹配”
第150页的“80040e10 - 参数太少”
第150页的“80040e10 - COUNT 域不正确”
第150页的“80040e14 - INSERT INTO 语句中出现语法错误”
第151页的“80040e21 - 插入或更新时出现 ODBC 错误”
147
第151页的“800a0bcd - BOF 或 EOF 为真”
有关 80004005 错误的更多信息,请参见“INFO:Troubleshooting Guide for 80004005 Errors
in Active Server Pages and Microsoft Data Access Components (Q306518)”(INFO:Active
Server Pages 和 Microsoft 数据访问组件中 80004005 错误的疑难解答 (CHS306518)),它位于
Microsoft Web 站点:http://support.microsoft.com/default.aspx?scid=kb;en-us;Q306518。
80004005 - 未找到数据源名称并且未指定默认驱动程序当您试图在 Web 浏览器中或以“动态数据”模式查看动态页时,此错误会出现。根据您的数据库和 Web 服务器的具体情况,该错误信息可能有所不同。其他形式包括,
80004005 - 驱动程序的 SQLSetConnectAttr 失败
80004005 - 一般性错误:无法打开注册表项"DriverId"
可能的原因和解决方案如下:
该页找不到 DSN。确保已经在 Web 服务器和本地计算机上创建 DSN。有关更多信息,请参见“帮助”中的“在 Windows 中设置 DSN”(“帮助”>“使用 Dreamweaver”)。
DSN 可能已设置为用户 DSN,而不是系统 DSN。请删除用户 DSN 并创建一个系统 DSN
取代它。
注意,如果不删除用户 DSN,则重复的 DSN 名称会产生新的 ODBC 错误。
如果使用 Microsoft Access,则可能数据库文件 (.mdb) 已锁定。此锁定可能是因 DSN 使用不同的名称访问该数据库引起的。在 Windows 资源管理器中,从包含数据库文件 (.mdb) 的文件夹中搜索锁定文件 (.ldb) 并删除该,ldb 文件。如果另一个 DSN 正指向同一数据库文件,
则最好删除该 DSN,以防止以后出错。进行以上更改后务必要重新启动计算机。
80004005 - 无法使用“(未知)”;文件已在使用当您使用 Microsoft Access 数据库并试图在 Web 浏览器中或以“动态数据”模式查看动态页时,此错误会出现。此错误信息的另一形式为“80004005 - Microsoft Jet 数据库引擎无法打开文件(未知)”。
可能的原因是存在权限问题。有关更多信息,请参见第152页的“权限问题答疑”。具体的原因和解决方案如下:
Internet Information Server 所使用的帐户(通常是 IUSR)对于某个基于文件的数据库或包含该文件的文件夹可能没有正确的 Windows NT 权限。请在 NT 用户管理器中检查该 IIS 帐户 (IUSR) 的权限。
您可能没有创建或销毁临时文件所需的权限。请检查对该文件和文件夹的权限。确保您具有创建或销毁任何临时文件所需的权限。临时文件通常创建在数据库所在的文件夹中,但也可能创建到其他文件夹(如 /Winnt)下。
在 Windows 2000 中,可能需要为 Access 数据库 DSN 更改超时值。若要更改超时值,请选择“开始”>“设置”>“控制面板”>“管理工具” >“数据源 (ODBC)”。单击“系统”
选项卡,突出显示正确的 DSN,然后单击“配置”按钮。单击“选项”按钮并将“页超时”
值更改为 5000。
第 12 章148
如果仍然有问题,请参见下面的 Microsoft 知识库文章,
PRB:80004005,Couldn't Use '(unknown)'; File Already in Use”(无法使用“(未知)”;文件已在使用),其网址为 http://support.microsoft.com/default.aspx?scid=kb;en-
us;Q174943。
PRB:Microsoft Access Database Connectivity Fails in Active Server Pages(Active Server
Pages 中的 Microsoft Access 数据库连接失败),其网址为 http://support.microsoft.com/
default.aspx?scid=kb;en-us;Q253604。
PRB:“Error "Cannot Open File Unknown" Using Access”(使用 Access 时出现“无法打开未知文件”错误),其网址为 http://support.microsoft.com/default.aspx?scid=kb;en-
us;Q166029。
80004005 - 登录失败()
当您使用 Microsoft SQL Server 并试图在 Web 浏览器中或以“动态数据”模式查看动态页时,
此错误会出现。
如果 SQL Server 不接受或不识别您所提交的登录帐户或密码(假定您使用的是标准安全机制),或者如果 Windows NT 帐户没有映射到 SQL 帐户(假定您使用的是集成安全机制),则
SQL Server 会发生此错误。
可能的解决方案如下:
如果使用标准安全机制,则可能是帐户名称和密码不正确。请使用系统管理员帐户和密码
(UID=“sa”且无密码)试一试,但这必须在连接字符串语句行中定义。(DSN 不存储用户名和密码。)
如果使用集成安全机制,则请检查调用该页的 Windows NT 帐户,并找到它的映射 SQL 帐户(如果存在)。
SQL Server 不允许在 SQL 帐户名中使用下划线。如果有人手动将 Windows NT
IUSR_machinename 帐户映射到同名的 SQL 帐户,则会失败。应该将任何使用下划线的帐户映射到 SQL 上不使用下划线的帐户名称。
80004005 - 操作必须使用可更新的查询当事件更新记录集或在记录集中插入数据时会发生此错误。
可能的原因和解决方案如下:
对包含数据库的文件夹所设置的权限具有太多限制。IUSR 特权必须设置为读/写。请参见第
152页的“权限问题答疑”。
对数据库文件本身的权限未使完全的读/写特权生效。请参见第152页的“权限问题答疑”。
数据库可能位于 Inetpub/wwwroot 目录之外。如果数据库不在 wwwroot 目录中,那么虽然您可以查看和搜索数据,但却不能更新它。
数据集基于不可更新的查询。联接是数据库中不可更新查询的很好的示例。请重新构造查询,
以使其可以更新。
数据库连接答疑149
有关此错误的更多信息,请参见“PRB:ASP 'Error The Query Is Not Updateable' When You
Update Table Record”(PRB:更新表记录时出现 ASP 错误“查询不可更新”),它位于
Microsoft 知识库中,网址为 http://support.microsoft.com/default.aspx?scid=kb;en-
us;Q174640。
80040e07 - 条件表达式中分类不匹配当服务器尝试处理包含“插入记录”或“更新记录”服务器行为的页,并且该服务器行为试图将 Microsoft Access 数据库中“日期/时间”列的值设置为空字符串 ("") 时,此错误会出现。
Microsoft Access 具有强大的数据分类功能;对于给定的列值有一套严格的规则。SQL 查询中的空字符串值不能存储在 Access“日期/时间”列中。目前已知的唯一解决方法是避免将空字符串 ("") 或其他任何与为该数据类型指定的值范围不对应的值插入 Access 中的“日期/时间”列或使用这种值更新“日期/时间”列。
80040e10 - 参数太少当数据库表中不存在 SQL 查询中所指定的列时,此错误会出现。请对照 SQL 查询检查数据库表中的列名称。此错误通常是因拼写错误引起。
80040e10 - COUNT 域不正确当您在 Web 浏览器中预览包含“插入记录”服务器行为的页并尝试使用它在 Microsoft Access
2000 数据库中插入记录时,此错误会出现。
您可能正在尝试将记录插入域名中包含问号 (?) 的数据库域。问号对于某些数据库引擎(包括
Microsoft Access)是特殊字符,不应将它用于数据库表格或域名称。
打开数据库系统并从域名中删除问号 (?),然后更新页上引用该域的服务器行为。
80040e14 - INSERT INTO 语句中出现语法错误当服务器尝试处理包含“插入记录”服务器行为的页时,此错误会出现。
此错误通常是因数据库中域、对象或变量的名称存在以下一个或多个问题所致:
将保留字用作名称。大多数数据库都有一组保留字。例如,“date”是保留字,因而不能用于数据库中的列名称。
名称中使用特殊字符。特殊字符的示例包括,
,/ *,! # & -?
在名称中使用空格。
当为数据库中的对象定义了输入掩码并且插入的数据与该掩码不符时,此错误也会出现。
若要修正此错误,请在指定数据库列名时避免使用“date”、“name”、“select”、“where”和
“level”等保留字。另外,请清除空格和特殊字符。
第 12 章150
有关常见数据库系统的保留字的列表,请参见以下 Web 页:
Microsoft Access,其网址为 http://support.microsoft.com/default.aspx?scid=kb;en-
us;Q209187
Microsoft SQL Server,其网址为 http://support.microsoft.com/support/sql/content/
inprodhlp/_reserved_keywords.asp?GSSNB=1
Oracle,其网址为 http://technet.oracle.com/doc/server.804/a58234/vol2_wor.htm#421705
MySQL,其网址为 http://www.mysql.com/doc/R/e/Reserved_words.html
80040e21 - 插入或更新时出现 ODBC 错误当服务器尝试处理包含“更新记录”或“插入记录”服务器行为的页时,此错误会出现。数据库无法处理该服务器行为尝试执行的更新或插入操作。
可能的原因和解决方案如下:
该服务器行为正尝试更新数据库表的自动编号域或者尝试在自动编号域中插入记录。由于自动编号域由数据库系统自动填充,因此任何用值填充这些域的尝试都会失败。
服务器行为正在更新或插入的数据对于该数据库域而言是错误的类型,例如将日期插入布尔型(是/否)域,将字符串插入数值域,或者将格式不正确的字符串插入“日期/时间”域。
800a0bcd - BOF 或 EOF 为真当您试图在 Web 浏览器中或以“动态数据”模式查看动态页时,此错误会出现。
该问题在动态页尝试显示空记录集中的数据时出现。若要解决该问题,请将“显示区域”服务器行为应用于要在页上显示的动态内容,如下所述,
1突出显示页上的动态内容。
2在“服务器行为”面板上,单击加号 (+) 按钮并选择“显示区域”>“如果记录集不为空则显示区域”。
3选择提供动态内容的记录集并单击“确定”。
4对于页上的每个动态内容元素重复步骤 1 至 3。
ColdFusion 错误信息答疑本节介绍 ColdFusion 产生的一些常见数据库错误信息,并提供解决问题的建议。
ColdFusion - 访问被拒绝对于 ColdFusion 4 或 5,当写入基于文件的数据库(如 Microsoft Access 或 Foxpro)并且
ColdFusion 正在通过数据源访问该数据库时,此错误会出现。此错误通常在您尝试通过 FTP 或通过复制来覆盖该文件时出现。
其解决方法是将“ColdFusion 管理员”中的“数据源”部分回收或禁用“维护数据库链接”。
数据库连接答疑151
ColdFusion -,操作必须使用可更新查询”错误对于 ColdFusion 4 或 5,当尝试运行从 Microsoft Access(或其他基于文件的)数据库中更新或删除的 ColdFusion 页时,此错误会出现。
出现此错误的原因通常是 ColdFusion 在网络操作系统级别不具有写入该数据库所需的正确权限。
若要在 Windows NT 中解决此问题,请单击“开始”>“设置”>“控制面板”>“服务”。双击“ColdFusion 应用程序服务器”服务并记下启动帐户。默认情况下,它应该是系统帐户。然后,转到包含该数据库文件的文件夹并明确地向记下的帐户提供对该文件夹的完全权限。即使该文件夹声明“每个人”都具有完全权限,仍要添加 ColdFusion 启动帐户。
权限问题答疑如果您的数据库位于 Windows NT、Windows 2000 或 Windows XP 计算机上,并且您在尝试从 Web 浏览器或以“动态数据”模式查看动态页时收到错误信息,则该错误可能是由权限问题引起的。
下面的错误消息可能是由权限问题导致的:
用于 ODBC 驱动程序的 Microsoft OLE DB 提供程序错误“80004005”[Microsoft][ODBC
Microsoft Access 97 驱动程序] 无法使用“(未知)”;文件已在使用。
用于 ODBC 驱动程序的 Microsoft OLE DB (0x80004005) [Microsoft][ODBC Microsoft
Access 驱动程序] Microsoft Jet 数据库引擎无法打开文件“(未知)”。它已被其他用户以独占方式打开,或者您缺少查看其数据的权限。
用于 ODBC 驱动程序的 Microsoft OLE DB 提供程序错误“80004005”[Microsoft][ODBC
Microsoft Access 97 驱动程序] 无法锁定文件。
试图访问该数据库的 Windows 帐户没有足够的权限。如果已针对经身份验证的访问对该页设置了保护,则该帐户可能是匿名 Windows 帐户(默认情况下为 IUSR_computername)或特定的用户帐户。
您必须更改权限,向 IUSR_computername 帐户提供正确的权限,这样 Web 服务器才能访问该数据库文件。此外,包含该数据库文件的文件夹还必须设置某些权限才能向该数据库写入。
如果该页本该以匿名方式来访问,则请向 IUSR_computername 帐户提供对该文件夹和数据库文件的完全控制权限,如以下过程所述。
此外,如果使用 UNC (\\Server\Share) 引用数据库的路径,请确保“共享权限”向
IUSR_computername 帐户提供完全访问权。即使共享位于本地 Web 服务器,此步骤仍然适用。
如果从另一个位置复制数据库,它可能不会自动从目标文件夹继承权限。您可能需要更改数据库的权限。
第 12 章152
若要检查或更改数据库文件权限,请执行以下操作:
1在 Windows 资源管理器中,定位该数据库文件或包含该数据库的文件夹,右击该文件或文件夹,然后选择“属性”。
2如果使用 Windows 2000,请选择“安全”选项卡;如果使用 Windows NT,请选择“安全”选项卡,然后单击“权限”按钮。
注意,只有在具有 NTFS 文件系统后,此步骤才适用。如果具有 FAT 文件系统,该对话框将没有“安全”选项卡。
3如果“文件权限”对话框中的 Windows 帐户中没有列出 IUSR_computername 帐户,请单击
“添加”按钮添加该帐户。
4在“添加用户和组”对话框中,从“列出的名称来自”弹出式菜单中选择计算机名称。
注意,如果使用 Windows 2000,则相应对话框名称为“选择用户、计算机或组”,相应弹出式菜单名为“查找范围:”。
出现与该计算机关联的帐户名称的列表。如果 IUSR 帐户没有出现在“名称”列表中,请单击“显示用户”按钮。
注意,Windows 2000 没有“显示用户”按钮。
5选择 IUSR_computername 帐户,然后单击“添加”。
6从“访问类型”弹出式菜单中选择“完全控制”,向 IUSR 帐户分配完全权限,然后单击
“确定”。
对于所添加的安全设置,可以设置权限,以便对包含该数据库的 Web 文件夹关闭读权限。浏览该文件夹的尝试将被拒绝,但 Web 页仍可以访问该数据库。
有关 IUSR 帐户和 Web 服务器权限的更多信息,请参见 Macromedia 支持中心上的技术说明:
Understanding anonymous authentication and the IUSR account(了解匿名身份验证和
IUSR 帐户),网址为 http://www.macromedia.com/go/authentication
Setting IIS web server permissions(设置 IIS Web 服务器权限),网址为 http://
www.macromedia.com/go/server_permissions
数据库连接答疑153
第 12 章154

II
部分第 II 部分教程学习如何在 Dreamweaver 中执行某些特定的常见任务。
此部分包含以下各章:
第 13 章第157页的“Dreamweaver MX 教程”
第 14 章第159页的“使用表格设计页面布局教程”
第 15 章第175页的“图像对齐和图像地图教程”
第 16 章第183页的“使用 Dreamweaver 设计文件教程”
第 17 章第191页的“使用层叠样式表进行设计教程”
第 18 章第199页的“创建主详细页集教程”
第 19 章第209页的“建立插入记录页教程”
第 13 章
Dreamweaver MX
教程
Dreamweaver MX 教程是循序渐进的课程,旨在教授 Dreamweaver MX 的基本使用常识。建议您充分使用在 Dreamweaver 应用程序文件夹中 GettingStarted 文件夹内安装的示例文件,通篇浏览本教程。
通过完成这些实践教程,您将学会如何在创建 Web 页和 Web 应用程序时使用 Dreamweaver 的可视化环境来添加设计元素。这些教程既适用于刚出道的新手,也适用于中级 Web 设计人员 --
他们在开发 Web 页和 Web 应用程序的过程中业已初窥门径,但寻求更上层楼。
每个教程都着重于某个特定的 Web 设计功能或主题。虽然您可以只选择浏览感兴趣的部分,但我们还是建议您按顺序完成所有教程。
您还可以在 Macromedia Web 站点 (http://www.macromedia.com/go/dreamweaver_tutorials)
找到其他教程。
学习内容完成每个教程大约需要 30 到 45 分钟,具体取决于您的经验。这些教程涵盖下列主题和任务,
第159页的“使用表格设计页面布局教程”,完成它大约需要 45 分钟,它着重于下列任务:
第160页的“在“标准”视图中创建和修改表格”
第165页的“向表格添加颜色”
第166页的“在“标准”视图中设置相对宽度的表格”
第168页的“在“布局”视图中设计页面”
第168页的“绘制一个布局单元格”
第175页的“图像对齐和图像地图教程”,完成它大约需要 20 到 30 分钟,它着重于下列任务:
第176页的“设置图像对齐方式”
第178页的“设置图像边距”
第178页的“设置边距和对齐选项”
第179页的“创建图像地图”
157
第180页的“设置图像地图区域”
第181页的“在新的窗口中打开链接的文件”
第183页的“使用 Dreamweaver 设计文件教程”,完成它大约需要 20 到 30 分钟,它着重于下列任务:
第184页的“使用代码片断”
第184页的“插入代码片断”
第188页的“修改代码片断内容”
第189页的“将代码保存为代码片断”
第191页的“使用层叠样式表进行设计教程”,完成它大约需要 30 分钟,它着重于下列任务:
第193页的“打开“CSS 样式”面板”
第192页的“打开工作文档”
第196页的“设置链接样式”
第197页的“导出样式以创建外部样式表”
第199页的“创建主详细页集教程”,完成它大约需要 30 分钟,它着重于下列任务:
第200页的“创建主详细页集”
第202页的“创建数据库记录集”
第205页的“插入主详细页集应用程序对象”
第207页的“查看页面”
第209页的“建立插入记录页教程”,完成它大约需要 40 分钟,它着重于下列任务:
第210页的“创建插入页”
第211页的“添加表单对象”
第215页的“定义“插入记录”服务器行为”
第217页的“测试您的插入页”
第 13 章158
第 14 章使用表格设计页面布局教程如果您熟悉 HTML 编码,就会知道除非您将添加到 Web 页中的文本或其他任何内容插入到一个“容器”(如层或表格)中,否则它将从一个边缘流向另一个边缘。HTML 表格是一种出色的用于设计 Web 页布局的解决方案,因为它们易于修改而且与大多数浏览器兼容。您可以使用表格来组织表格数据的布局或设置可视化元素(如 Flash 按钮、图像或文本段落)的显示。
Dreamweaver 有两种视图 -,标准”视图和“布局”视图,您可以在这些视图中设计表格。本教程中,您将学习在这两种视图中设计页面布局。在本教程的第一部分,您将在“标准”视图中工作并在页面中插入表格。在后面部分,您将在“布局”视图中工作,并且使用布局选项绘制表格和表格单元格以设计布局。
本教程着重于将表格作为一种页面布局元素来使用。通过学习本教程,您将学会如何完成下列任务:
第160页的“在“标准”视图中创建和修改表格”
第165页的“向表格添加颜色”
第166页的“在“标准”视图中设置相对宽度的表格”
第168页的“在“布局”视图中设计页面”
第168页的“绘制一个布局单元格”
第170页的“添加多个布局单元格”
第171页的“移动布局单元格或调整其大小”
第173页的“在“布局”视图中设置相对宽度的表格”
第168页的“在“布局”视图中设计页面”
159
开始前的准备工作在开始本教程之前,请先创建一个用来存储 GettingStarted 示例文件的新文件夹(如果尚未创建)。
1在您的本地磁盘的根目录下,创建一个新文件夹并将其命名为 Sites,例如 C:\Sites
(Windows) 或 Hard Drive:Sites (Macintosh)。
如果您使用的是 Windows XP 或 Macintosh OS X,请在您的用户文件夹内创建 Sites 文件夹。
2在硬盘上的 Dreamweaver 应用程序文件夹内找到 Tut or i als 文件夹。该文件夹的路径是:
\Macromedia|Dreamweaver MX\Samples\GettingStarted\ Tutorials
3将 Tu t o r i a l 文件夹复制到 Sites 文件夹中。
4在 Dreamweaver 中,将复制的 Tu t o r i a l s 文件夹定义为本地站点。如果您不知道如何在
Dreamweaver 中定义本地站点,可以参照第 2 章第17页的“在 Dreamweaver 中创建您的第一个 Web 站点”中提供的指导。
还可以使用 Dreamweaver“站点定义”向导来完成站点的设置过程。在 Dreamweaver 中,选择“站点”>“新建站点”,然后单击“基本”选项卡开始设置站点。
在“标准”视图中创建和修改表格
“标准”视图是典型的 Dreamweaver 设计视图。若要在“标准”视图中创建表格,可以使用
“插入表格”命令。Dreamweaver 将根据您在“插入表格”对话框中选择的选项创建一个表格。
通过合并和拆分单元格以及插入行和列,您可以很容易地修改初始表格结构以创建更复杂的设计。
可以使用表格单元格(在表格中每一行与列的交叉处所创建的框)来控制 Web 页中文本和图像的位置。因为您可以使表格的边框变得不可见,当观众在浏览器中查看页面时就不会看到设计的基础结构。
1在 Dreamweaver 中,选择“文件”>“新建”。
即出现“新建文档”对话框。
2在“空文档”列表中,选择“HTML”,然后单击“创建”以创建一个新的 HTML 文档。
3在“文档”工具栏的“标题”文本域中,输入“表格设计”为文档添加一个标题。
4选择“文件”>“保存”将该文档保存到本地站点文件夹中。将其命名为 tableModify.htm。
第 14 章160
插入表格现在您就可以在文档中插入表格了。
1在“文档”窗口,将插入点放到文档中,然后执行下列操作之一:
选择“插入”>“表格”。
在插入栏的“常用”类别中,单击“表格”图标。
出现“插入表格”对话框。
2在该对话框中,设置下列选项,
在“行数”文本框中,键入 2。
在“列数”文本框中,键入 2。
在“宽度”文本框中键入 600,然后在“宽度”文本框右边的弹出式菜单中选择像素。
将宽度设置为 600 像素将创建一个固定宽度的表格。稍后,我们将在本教程中更详细地讨论表格宽度。
在“边框”文本框中,键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。
使用表格设计页面布局教程161
3单击“确定”。
Dreamweaver 将该表格插入到文档中。
4执行下列操作之一来保存文档:
选择“文件”>“保存”。
按 Ctrl+S 组合键 (Windows) 或 Command+S 组合键 (Macintosh)。
修改表格下一步,您将修改表格的布局。您将在表格中添加行和列,并且学习如何合并和拆分单元格以创建所需的页面布局。
1在左上方的单元格中单击,然后向下拖动直到最下面的行以选择左边的一列。
2选择“修改”>“表格”>“插入列”。
现在该表格包含三列。
第 14 章162
3单击左下方的单元格,然后选择“修改”>“表格”>“插入行或列”。
即出现“插入行或列”对话框。
提示,如果您想要插入特定数目的行或列,或者要选择在表格中插入行或列的位置,请选择“插入行或列”选项。
4在该对话框中,设置下列选项:
对于“插入”,选择行。
在“行数”框中,键入 2。
对于“位置”,选择 所选之上。
5单击“确定”。
表格即会更新。现在您的表格为四行三列。
6保存所做的更改(“文件”>“保存”)。
合并和拆分单元格通过合并和拆分单元格,您可以自定义表格的设计以符合布局需要。接下来,您将看到如何使用菜单选项或属性检查器来合并或拆分表格单元格。
1在文档中,将指针从左上方的单元格拖到它下面的一个单元格,以选择表格左列的上面两个单元格。
拆分单元格合并单元格使用表格设计页面布局教程163
2选择“修改”>“表格”>“合并单元格”。
两个单元格合并成一个单元格。
3单击第二列的第三行,然后向右向下拖动以选择第二列和第三列中的最后两行单元格。
4在属性检查器中,单击“合并”按钮以合并单元格。
选定的单元格合并为一个单元格。
您可以拆分单个的单元格或列。
5单击左上方的单元格。
6在属性检查器中,单击“拆分单元格”按钮。
“拆分单元格”对话框出现。
7在该对话框中,设置下列选项:
对于“把单元格拆分”,选择列。
在“列数”框中,输入 2。
8单击“确定”。
表格即被修改。
第 14 章164
更改行高和列宽现在调整该表格的尺寸。您将要增加表格的行间距,并且调整表格列间距。
1沿表格底部边框移动指针直到指针变成一个边框选择器,然后向下拖动以调整表格大小。
如果您愿意,还可以使用此方法调整表格中的其他行高。
2沿一个列的边框移动指针直到指针变成一个边框选择器,然后向左或向右拖动它以更改列宽。
3调整完成后,保存文档。
向表格添加颜色您可以向表格的任何部分添加颜色。您将首先向整个表格添加背景颜色,然后对表格中的单元格应用不同的背景颜色。最后,您将更改边框颜色。
1在文档中,单击表格的任何一个单元格,然后在位于文档窗口左下方的标签选择器中单击
<table> 标签以选择整个表格。
2如果属性检查器尚未打开,则打开属性检查器(“窗口”>“属性”)。
属性检查器中出现所选表格的属性。
3在属性检查器中,执行下列操作之一,在“背景颜色”文本框中选择一种颜色:
单击颜色选择器弹出式菜单,然后从颜色选择器中选择一种颜色。
输入一个十六进制的颜色值,例如 #CC9933。
使用表格设计页面布局教程165
输入一个网页安全色名称,如 goldenrod。
将一种背景颜色应用到表格。
4用同样的方法可以将一种背景颜色应用到表格的单元格中。在左上方的单元格中单击,然后在属性检查器的“背景颜色”文本框中选择一种不同的颜色。
5如果需要,还可以向其他单元格中添加颜色。
添加边框颜色现在,您将设置表格边框的颜色。边框颜色同时应用于表格的外边框和内边框。
1在文档窗口中,选择表格。
2在属性检查器的“边框”文本框中,使用颜色选择器为表格选择一种边框颜色。
3完成后,请保存文档。
4按 F12 键(仅限于 Windows)或者选择“文件”>“在浏览器中预览”,然后选择一种浏览器以查看文档。
在“标准”视图中设置相对宽度的表格基于百分比的表格会根据浏览器窗口宽度的变化而伸展或收缩。(例如,如果您指定表格使用
75% 的宽度,则不管浏览器窗口有多大,表格都会伸展以填充 75% 的水平间距。这在某些情况下会很有用,例如,在调整窗口大小时确保导航菜单总能显示。
如果您想设置表格的大小而不管用户如何调整浏览器窗口的大小,可以使用基于像素的表格。如果您想让表格根据浏览器窗口的大小而伸缩,最好使用基于百分比的表格。
若要查看基于百分比的表格和基于像素的表格的不同之处,您可以在页面中分别添加这两种表格,然后在浏览器中查看。
1在 Dreamweaver 中,选择“文件”>“新建”。
2在“新建文档”对话框中,已经选定了“基本页”类别;在“基本页”列表中,双击“HTML”
创建一个新的 HTML 文档。
文档在文档窗口中打开。
第 14 章166
3将该文件保存到本地站点文件夹。将其命名为 tableWidth。
4将插入点放置在文档中。
5在插入栏的“常用”选项卡中,单击“表”按钮。
6在出现的对话框中,设置下列选项:
在“行数”文本框中,键入 2。
在“列数”文本框中,键入 3。
在“宽度”文本框中,键入 90,并在“宽度”文本框右边的弹出式菜单中选择百分比。
在“边框”文本框中,输入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。
7单击“确定”。
表格即出现在文档中。
8单击中间列最上方的单元格并拖动到最下方的单元格以选择中间列。
9在属性检查器中,使用颜色选择器将一种背景颜色应用于该列。
创建其宽度基于像素的表格现在您将添加另外一个表格。其宽度基于像素的表格被设置为某个特定宽度,并且不会随着浏览器窗口大小的改变而改变。
1在刚刚插入的表格后面插入一个段落回车。
2在插入栏的“常用”选项卡中,单击“表”按钮。
3在出现的对话框中,设置下列选项:
在“行数”文本框中,键入 2。
在“列数”文本框中,键入 3。
在“宽度”文本框中,键入 600,然后在“宽度”文本框右边的弹出式菜单中选择像素。
在“边框”文本框中,键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。
4单击“确定”。
表格即出现在文档中。
5单击中间列的最上方单元格并向下拖动到最下方的单元格以选择中间列。
6在属性检查器中,使用颜色选择器将一种背景颜色应用于该列。
使用表格设计页面布局教程167
7按 F12 键(仅限于 Windows)或者选择“文件”>“在浏览器中预览”,然后选择一种浏览器以查看文档。
调整浏览器窗口大小以查看在浏览器窗口改变时,这两个表格是怎样变化的。基于像素的表格保持大小不变,而基于百分比的表格则调整大小以符合浏览器大小。
8文档查看完毕后,请关闭浏览器窗口。
9保存文档。
在“布局”视图中设计页面现在,您已经学会了如何使用“插入表格”命令,让我们看看另外一种处理表格的方法,即绘制表格布局。
接下来,您将在“布局”视图中工作,该视图允许您绘制布局单元格或布局表格并在其中添加各种内容,例如图像、文本或其他媒体等。
在“布局”视图中,您可以绘制布局单元格或布局表格以定义文档的设计区域。您可以从插入一个表格单元格或布局单元格开始。当您首先插入一个布局单元格时,Dreamweaver 将自动创建一个表格来环绕该单元格。
创建和保存新文档
1在 Dreamweaver 中,选择“文件”>“新建”。
2在“新建文档”对话框中,已经选定“基本页”类别。在“基本页”列表中选择“HTML”,
然后单击“创建”创建一个新的 HTML 文档。
文档在文档窗口中打开。
3将该文档保存到您的本地站点文件夹中,并将其命名为 tableLayout.htm。
绘制一个布局单元格
1在插入栏中,单击“布局”选项卡,然后单击“布局视图”按钮从“标准”视图切换过来。
“从布局视图开始”对话框出现,描述了“布局”视图的选项。
2查看这些选项,然后单击“确定”关闭对话框。
3在插入栏中提供了两个可用的“布局”选项-,绘制布局单元格”和“绘制布局表格”;这两个选项在“标准”视图中不提供。
4如果属性检查器尚未打开,请选择“窗口”>“属性”将其打开。
5在插入栏中,单击“绘制布局单元格”按钮。
第 14 章168
6将指针移到文档窗口;鼠标指针变成一个绘制工具(看起来像一个小十字架)。单击文档的左上角,然后拖动以绘制一个布局单元格。
释放鼠标键后,布局表格中即出现一个布局单元格。
布局表格将扩展以符合文档窗口的大小,并设置页面的布局区域。白色的矩形是您刚绘制的布局单元格。您可以在布局表格的空区域内放置更多的布局单元格。
7绘制另外一个单元格以便在导航按钮的上方创建一个文本区域。
布局表格布局单元格使用表格设计页面布局教程169
添加多个布局单元格接下来,您将学会如何添加一系列的布局单元格。您将在刚才创建的单元格旁边再添加三个布局单元格,以便为页面的导航按钮创建布局。
1在插入栏中,单击“绘制布局单元格”按钮;然后,按住 Control 键 (Windows) 或 Command
键 (Macintosh),以便能在表格中绘制多个单元格。
2在文档窗口中,将指针放在最后绘制的那个单元格的下方,然后拖动以绘制一个布局单元格。
继续按住 Control 键 (Windows) 或 Command 键 (Macintosh),再绘制两个布局单元格。您的屏幕看起来应该与此相似:
3在插入栏的空白区域内单击,取消对“绘制布局单元格”工具的选择。(绘制工具将更改为选择箭头。)
第 14 章170
移动布局单元格或调整其大小如果您需要将单元格排成一行,您可以调整布局单元格的大小并移动它们。您可以使用布局单元格的任一调整大小手柄来改变它的大小。
只要布局表格中还有重新定位单元格所需的空间,您就可以将布局单元格移动到文档中的新位置。有时,为了进行所需的改动,您必须调整周围单元格的大小。如果您想移动一个布局单元格以在文档中重新定位,请遵循下列步骤。
1单击布局单元格的边框以选择它。
在所选布局单元格的周围出现手柄。
2执行下列操作之一:
拖动该布局单元格将其移动到另外一个位置。
如果布局单元格周围有空间,请相应使用向左、向右或向上箭头移动该单元格。
调整布局单元格的大小若要精确地设计页面,您可以设置添加到文档中的单元格的大小。还可以在页面中重新定位单元格。
1单击布局单元格的边框以选择它。
2若要调整布局单元格的大小,请执行以下操作,
在该布局单元格的属性检查器中,键入所需的单元格宽度和高度值。例如,在“高度”文本框中键入 200 将单元格的高度设置为 200 个像素,然后在文档中单击以查看单元格宽度的变化。
注意,如果您输入的以像素为单位的宽度或高度超过了布局表格的尺寸,或者导致该单元格覆盖了布局表格中的其他单元格,Dreamweaver 将会发出警告并将单元格宽度调整到一个有效的宽度。
使用表格设计页面布局教程171
向表格中添加颜色您可以向表格的任何部分添加颜色。您将首先向整个表格添加背景颜色,然后对表格中的单元格应用不同的背景颜色。最后,您将更改边框颜色。
1在文档中,单击表格的任何一个单元格,然后在位于文档窗口左下方的标签选择器中单击
<table> 标签以选择整个表格。
2如果属性检查器尚未打开,则打开属性检查器(“窗口”>“属性”)。
属性检查器中出现所选表格的属性。
3在属性检查器中的“背景颜色”文本框中,执行下列操作之一来选择一种颜色:
单击颜色选择器弹出式菜单,然后从颜色选择器中选择一种颜色。
输入一个十六进制的颜色值,例如 #CC9933。
输入一个网页安全色名称,如 goldenrod。
即将一种背景颜色应用到表格中。
4单击单元格边框以选择该单元格,然后在属性检查器中选择要应用到该单元格的颜色。
第 14 章172
5如果愿意,可以向表格中的其他单元格添加背景颜色。
6保存文档。
在“布局”视图中设置相对宽度的表格默认情况下,当您在“布局”视图中绘制表格或单元格时,Dreamweaver 将创建具有固定列宽的表格。您可以使用“自动伸展”功能将固定宽度的表格或单元格更改为相对宽度的表格或单元格。
“自动伸展”功能允许您创建一个相对宽度的表格,并对您设置的可伸展的列应用灵活的布局,
以便表格能够自动伸缩以符合浏览器窗口的大小。
有关列宽的信息出现在每个表格列上方的列标题区域。表格宽度信息出现在表格的列标题中。固定宽度的列具有特定的宽度值,如 200 像素,而自动伸展列的列标题则包含一条波浪线。在一个表格中,您只能让一个列自动伸展。您可以很容易地更改将自动伸展应用到哪个列。
您将把表格中的某一列设置为自动伸展,以便在查看表格时表格符合浏览器窗口的大小。
使用表格设计页面布局教程173
1在文档的列标题中,单击您想使其自动伸展的表格列。
2在出现的弹出式菜单中选择“列设置为自动伸展”。
即会出现“选择间隔图像”对话框。
3在该对话框中,选择“创建间隔图像文件”。
4出现“保存间隔图像文件为”对话框,接受默认值以将图像命名为 spacer.gif 并保存到一个相对于站点根目录的位置。
提示,如果您已有一个间隔图像,则可选择该图像,那样就不用为设计的每个表格创建不同的间隔图像。
列标题从数值更改为一条波浪线。属性检查器也将更新以反映对表格应用了自动伸展这一情况。
5保存文件。
6选择“文件”>“在浏览器中预览”,并选择用来查看页面的浏览器。
根据浏览器窗口大小的变化,列将自动伸展和收缩。
执行下一个步骤在本教程中,您已经学会了如何在 Dreamweaver 中创建表格。在学习过程中,您修改了表格行和列,为表格元素设置了背景颜色,并且学会了如何在“标准”视图和“布局”视图中创建
“灵活”的表格设计。
有关本教程涉及到的主题的详细信息,请参阅《使用 Dreamweaver MX,文档或 Dreamweaver
帮助中的下列主题:
设计页面布局
用表格展示内容第 14 章174
第 15 章图像对齐和图像地图教程在 Macromedia Dreamweaver MX 中处理图像非常容易。可使用各种 Dreamweaver 可视工具插入图像。本教程为您提供了图像选项,将图像插入页面后就可应用这些选项。您将学习如何对齐图像和文本以及如何设置图像周围的边距。您还将学习如何使用单个图像链接到多个 Web 页。
本教程专为第一次使用 Dreamweaver 的用户设计。它介绍了 Dreamweaver 中的一些基本功能,
并将帮助您了解如何对齐图像以及如何创建图像地图。
在本教程中,您将完成下列任务:
第176页的“设置图像对齐方式”
第178页的“设置图像边距”
第178页的“设置边距和对齐选项”
第179页的“创建图像地图”
第180页的“设置图像地图区域”
第181页的“在新的窗口中打开链接的文件”
开始前的准备工作在开始本教程之前,请先创建一个用来存储 GettingStarted 示例文件的新文件夹(如果尚未创建)。
1在本地磁盘的根目录下,创建一个新的文件夹并将其命名为 Sites,例如 C:\Sites (Windows)
或 Hard Drive:Sites (Macintosh)。
如果使用的是 Windows XP 或 Macintosh OS X,请在用户文件夹中创建 Sites 文件夹。
2在硬盘上的 Dreamweaver 应用程序文件夹中找到 Tut or i als 文件夹。此文件夹的路径是:
\Macromedia|Dreamweaver MX\Samples\GettingStarted\ Tutorials
3将 Tu t o r i a l 文件夹复制到 Sites 文件夹中。
4在 Dreamweaver 中,将复制的 Tu t o r i a l s 文件夹定义为本地站点。如果您不知道如何在
Dreamweaver 中定义本地站点,可以遵循第 2 章第17页的“在 Dreamweaver 中创建您的第一个 Web 站点”中提供的说明。
175
也可以使用 Dreamweaver 站点定义向导来指导您完成站点设置过程。在 Dreamweaver 中,选择
“站点”>“新建站点”,然后单击“基本”选项卡开始设置站点。
设置图像对齐方式与文本一样,图像也出现在页面中的正常 HTML 流中,并且可以单独显示为一个段落或者显示为文本段落的一部分。在属性检查器中,可以使用文本对齐控件或图像对齐控件,以两种方法设置图像的对齐方式。
“文本对齐方式”定位图像插入到的段落的位置,并且可用于将图像与左边距对齐、与右边距对齐或居中对齐。“图像对齐方式”使您可以设置图像与同一段落中的其他内容(包括另一个图像)之间的关系。在 Dreamweaver 中,“对齐”弹出菜单使您可以选择图像与文本对齐的方式。
注意,并不是所有的图像对齐选项在所有的浏览器中都有效。在本教程中,您将使用在 Microsoft Internet Explorer 和
Netscape Navigator 中有效的对齐选项。
查看已完成的文档开始前,请查看已完成的文件,了解您将在本教程中学习完成的内容。
1选择“文件”>“打开”,在出现的对话框中定位到所创建的 GettingStarted 文件夹,然后定位到 Tutorials/Completed 并打开名为 imageAlign_comp.htm 的文件。
此文件在“文档”窗口中打开。
2按 F12 键(仅限于 Windows)或选择“文件”>“在浏览器中预览”并选择一个要在其中查看文档的浏览器。
此文件同时显示三个示例,它们使用适用于图像和文本的图像对齐方式和边距。
3查看完此文件后关闭浏览器窗口。
打开工作文件您将在一个部分完成的文档中工作,它在一个表格中包含三个图像和文本。该表格限定了布局,
使您能够方便地看到不同的设置如何影响对齐方式。
1选择“文件”>“打开”并定位到位于 Tu t o r i a l s 文件夹中的 imageAlign.htm 文件。该文档与先前查看的已完成文件包含相同的图像和文本。
文本对齐方式图像对齐方式第 15 章176
在“文档”窗口中,单击第一个图像(在包含文本对齐方式的表格单元格旁边)。
图像在文本所在的同一段落中。
2如果属性检查器尚未打开,请将其打开(“窗口”>“属性”)。
在“对齐”文本框中,注意这是图像的默认对齐方式。它将图像放在文本行的基线上。
3在图像仍为选中的情况下,在“对齐”弹出菜单中选择“中间”来查看该设置的效果。
第一行文本与图像的中间对齐。
4在图像仍为选中时,在“对齐”弹出菜单中选择“左对齐”。
现在图像出现在左侧,文本环绕在其右侧。
提示,与图像位于同一段落中的文本环绕在图像周围然后流到图像的下方。如果在流动的段落中插入一个段落回车符,
则它不再与图像对齐,而是出现在图像下方的新段落中。如果想在不破坏文本环绕的情况下添加边距,请使用分段符
Control+Enter (Windows) 或 Command+Return (Macintosh)。
5选择“文件”>“保存”以保存更改。
6选择“文件”>“在浏览器中预览”,然后选择一个要在其中预览文档的浏览器,或者按 F12
键(仅限于 Windows)在浏览器窗口中查看文档。
您将看到图像和文本已对齐。
7查看完文件后,关闭浏览器窗口。
图像对齐和图像地图教程177
设置图像边距正如您所看到的,将图像放在段落中时,文本紧挨着图像的边缘显示。在下一步中,您将在图像和文本之间添加边距。
可以使用属性检查器中的水平和垂直边距属性在图像周围创建边距。水平边距属性在图像的左侧和右侧添加边距,而垂直边距在图像的上方和下方添加边距。
1在 image_align.htm 文档中,单击页面中的第二个图像(在包含文本“Spacing”的表格单元格旁边)。
2在属性检查器中,在“垂直边距”文本框中输入 10 设置垂直边距。
3将指针移到“水平边距”文本框中,输入 30,然后按 Enter 或 Return 键设置水平边距。
文本和图像之间随即创建一个边距。边距也影响图像和表格边框之间的距离。
设置边距和对齐选项作为本教程这一部分的最后一步,您将为图像设置对齐和边距属性。
1在 imageAlign.htm 文档中,单击页面中的第三个图像(在包含文本“Alignment and
Spacing”的表格单元格旁边)。
2在属性检查器中,在“对齐”弹出菜单中选择“右对齐”。
图像移到右侧。
3在“水平边距”文本框中,输入 30,然后在属性检查器或“文档”窗口中的其他某个位置单击以使值更新。
图像和文本之间随即添加边距。
第 15 章178
创建图像地图图像地图是作为导航设备使用的图像。使用图像地图,可以在单个图像中创建多个热点(可单击的区域)并使每一个热点链接到一个不同的要打开的 URL 或文件。也可以设置链接文档的打开位置,例如可以在框架页文档的特定框架中打开文档,或在一个新的浏览器窗口中打开它。
查看已完成的文件查看已完成的文件,了解将要创建的内容。完成的图像地图包含到其他文档的链接。您将在浏览器窗口中打开文档,查看链接是如何工作的。
1选择“文件”>“打开”,在出现的对话框中,定位到所创建的 GettingStarted 文件夹,然后定位到 Tutorials/Completed 并打开名为 imagemap_comp.htm 的文件。
文档随即在“文档”窗口中打开。
2按 F12 键(仅限于 Windows)或选择“文件”>“在浏览器中预览”,然后选择要在其中查看文档的浏览器。
3在淡紫色区域上滚动指针。指针变为一个手的图形,向您表明该区域链接到另一个文档。
4单击“North America”。
一个新的页面随即打开。
5单击浏览器的后退按钮返回到世界地图页面。
6单击另一个热点。
链接的文档在一个新的浏览器窗口中打开。
7查看完页面后,关闭浏览器。
图像对齐和图像地图教程179
设置图像地图区域您将创建一个图像地图,使单个图像链接到多个页面。
1在 Dreamweaver 中选择“文件”>“打开”,然后定位到并打开名为 imagemap_start.htm 的文件。
2在文档中单击世界地图的图像以选择它。
3如果属性检查器尚未打开,则将它打开。如有必要,可再单击属性检查器右下方的扩展箭头以查看所有图像属性。
图像地图选项随即出现在展开的属性检查器中。
4在“地图”文本框中,键入 Locations。
提示,如果在一个文档中创建多个图像地图,那么每个地图必须有一个唯一的名称。每个图像地图也可以有多个热点。
5单击“矩形热点工具”选择它。
6在“文档”窗口中,在“North America”上方和左侧的区域内单击,然后将指针向右下方拖动到图像上以创建热点区域。
一个蓝色的层出现在图像上,并且热点属性检查器出现。
图像地图选项第 15 章180
7在“链接”文本框中,单击文件夹图标。在出现的对话框中,定位到名为 location1.htm 的文件以设置到它的链接。
8在“替代”文本框中,键入 North America。
注意,应该始终为文档中的图像(包括图像地图)设置替换文本框,这样可以为使用纯文本浏览器的页面查看者提供有关图像的说明信息。
就是这样,您已设置了第一个热点。让我们再设置一个热点。
在新的窗口中打开链接的文件您已看到各种热点工具的不同之处,这次您将使用“多边形热点”工具定义热点区域。多边形工具使您能够设置连接点以定义热点区域。
您还将学习如何在新的窗口中打开链接的文档。
1在属性检查器中,单击“多边形热点工具”选择它。
2在“文档”窗口中,单击希望热点从其中开始的图像,并将指针移到下一个位置;两个点之间形成一条直线。
3继续在图形周围单击,将“Europe”定义为热点区域。
注意,图像地图区域随着您的单击不断地调整和填充,请在图形周围不停地单击以覆盖要包括的区域。
4绘制完图像地图后,单击属性检查器中的箭头按钮更改绘制工具的指针。
5在“链接”文本框中,单击文件夹图标,然后浏览到名为 location3.htm 的文件并在单击热点时打开该文件。
图像对齐和图像地图教程181
6在“目标”弹出菜单中,选择“_blank”。
当用户单击热点时,“Locations3”页将在新的窗口中打开。
7在“替代”文本框中,输入 Europe。
8按 F12 键(仅限于 Windows)或选择“文件”>“在浏览器中预览”,然后选择一个要在其中查看文档和测试链接的浏览器。
9保存和关闭文件。
继续下面的学习在本教程中您接触了图像的几个方面。您学习了如何使用属性检查器设置图像对齐方式、定义图像周围的边距以及创建图像地图。
有关本教程所讲述的主题的更多信息,请参阅“插入图像”一章和《使用 Dreamweaver MX》
文档和 Dreamweaver 帮助中的“链接和导航”一章。
您对下面的主题可能同样感兴趣:
层叠样式表(定位)
表格对齐
附加行为第 15 章182
第 16 章使用
Dreamweaver
设计文件教程
Macromedia Dreamweaver MX 随附了大量的专业化设计资源 - 页面布局文档、层叠样式表
(CSS) 和代码片断。可以使用这些资源快速学习如何创建专业化设计 Web 页。
在本教程中,您将创建一个新文档,然后插入和修改设计元素代码片断。您还将学习如何创建自己的代码片断。
本教程重点介绍以下任务:
第184页的“使用代码片断”
第184页的“插入代码片断”
第188页的“修改代码片断内容”
第189页的“将代码保存为代码片断”
183
开始前的准备工作在开始本教程之前,请先创建一个用来存储 GettingStarted 示例文件的新文件夹(如果尚未创建)。
1在本地磁盘的根目录下创建一个新文件夹,将其命名为 Sites,例如,C:\Sites (Windows) 或
Hard Drive:Sites (Macintosh)。
如果使用的是 Windows XP 或 Macintosh OS X,请在用户文件夹中创建 Sites 文件夹。
2在硬盘上的 Dreamweaver 应用程序文件夹中找到 Tut or i als 文件夹。该文件夹的路径为:
\Macromedia|Dreamweaver MX\Samples\GettingStarted\ Tutorials
3将 Tu t o r i a l 文件夹复制到 Sites 文件夹中。
4在 Dreamweaver 中,将复制的 Tu t o r i a l s 文件夹定义为本地站点。如果不知道如何在
Dreamweaver 中定义本地站点,请按照第 2 章第17页的“在 Dreamweaver 中创建您的第一个 Web 站点”中提供的说明进行操作。
还可以使用 Dreamweaver“站点定义”向导来完成站点的设置过程。在 Dreamweaver 中选择“站点”>“新建站点”,然后单击“基本”选项卡开始设置站点。
使用代码片断对于创建具有专业化外观的页面布局而言,使用代码片断可以说是一种真正省时的方法。代码片断是可重用的代码块。您既可以插入 Dreamweaver 随附的现有代码片断,也可以轻松地创建自己的代码片断以在站点的页面中重新使用。可以创建 HTML、JavaScript、CFML、ASP、JSP
以及其他格式的代码片断。
首先,您将使用 Dreamweaver 随附的一些代码片断。
可以在“新建文档”对话框中创建一个基于“页面设计”文档的新文档。
1选择“文件”>“新建”。
出现“新建文档”对话框。
2在“常规”选项卡中,“基本页”类别已被选中。
3在“基本页”文档列表中选择“HTML”,然后单击“创建”。
文档随即在“文档”窗口中打开。
4在站点中将文档保存为 myCodeSnippets(“文件”>“保存”)。
插入代码片断
Dreamweaver 随附了各种可供选择的代码片断。这些代码片断位于“代码”面板中。当完成本教程时,您将插入导航代码片断、内容代码片断和脚注代码片断。
1将插入点放在文档中希望插入代码片断的位置。
2执行下列操作之一打开“代码片断”面板:
选择“窗口”>“片断”。
第 16 章184
在“代码”面板中,单击扩展箭头(如果需要的话),然后选择“代码片断”。
出现“代码片断”面板。
3单击“导航”文件夹前面的加号 (+) 按钮查看其内容。
出现其他的文件夹。
4单击 Tab 文件夹前面的加号 (+) 按钮查看其内容,然后单击 Basic Tab 以选中它。
代码片断随即显示在预览窗格中。
使用 Dreamweaver 设计文件教程185
5在“代码片断”面板中,单击位于“代码片断”面板底部的“插入”按钮将代码片断插入到文档中。
代码片断随即出现在文档中。
6保存文档(“文件”>“保存”)。
第 16 章186
添加内容代码片断接下来,您将添加一个向其中添加内容的表格。您将在刚插入的导航表格代码片断的正下方插入代码片断。
1按 Enter 键或 Return 键将插入点移到下一行。
2在“代码片断”面板中,单击“内容表”文件夹前面的加号 (+) 按钮,然后单击“单像素宽的边框”文件夹前面的加号 (+) 按钮查看该文件夹中的代码片断。
3单击“文本 B”选中它,然后单击“插入”将代码片断插入到文档中。
代码片断随即出现在文档中。
4保存文档(“文件”>“保存”)。
使用 Dreamweaver 设计文件教程187
添加脚注代码片断现在,您将添加最后一种代码片断,即脚注内容代码片断。
1按 Enter 键或 Return 键将插入点移到下一行。
2在“代码片断”面板中,单击“页脚”文件夹前面的加号 (+) 按钮查看该文件夹中的代码片断。
3单击“基本:摘要文本”以选中它,然后单击“插入”将代码片断插入到文档中。
代码片断随即出现在文档中。
修改代码片断内容接下来,您将编辑占位符文本并应用颜色更改。您将对单元格应用背景颜色以设置您自己的配色方案。
1如果属性检查器尚未打开,请将其打开(“窗口”>“属性”)。
2将指针放在已插入的导航表格的第一个单元格中。该单元格包含文本“Lorem”。
3在属性检查器的“背景”文本框中,单击颜色样本上的箭头以打开颜色选择器,然后选择一种颜色将其应用于此单元格的背景。
这里我们使用了紫色 #9966FF。
4将指针放在包含文本“Ipsum”的单元格中。
5在属性检查器的“背景”文本框中,单击颜色样本上的箭头,然后选择一种不同的颜色应用于此单元格的背景。
这里我们使用了浅紫色 #9999FF。
第 16 章188
6重复第 5 步,将同一种颜色应用于包含文本“Dolor”和“Amit”的单元格。
7在包含文本内容的表格单元格中单击,然后选择一种颜色应用于该表格单元格。
8进行其他所需的更改。
9完成后保存文档。
10按 F12 键(仅限于 Windows)或选择“文件”>“在浏览器中预览”,然后选择要在其中查看文档的浏览器。
将代码保存为代码片断使用现有的代码片断非常容易,就象创建您自己的代码片断一样容易。例如,假设您想重新使用在刚创建的文档中更新的代码片断。
让我们将导航代码片断另存为新的代码片断。
1在“代码片断”面板中,定位到“导航”文件夹,然后定位到 Tab 文件夹以选择将保存代码片断的文件夹。
2在“文档”窗口中,单击包含文本“Lorem”的导航单元格。
3在位于文档窗口左下方的标签选择器中,单击 <table> 标签。
在“文档”窗口中,表格被选定。
使用 Dreamweaver 设计文件教程189
4执行下列操作之一将选定内容保存为代码片断:
右击 (Windows) 或按住 Control 键并单击 (Macintosh) 所选表格,然后选择“创建新代码片断”。
在“代码片断”面板中,单击位于面板底部的加号 (+) 按钮。
出现“代码片断”对话框。
5在“名称”文本框中,输入描述代码片断的名称。
这里我们将代码片断示例命名为 purple navigation。
6在“描述”中,输入关于代码片断的描述。
7在“代码片断”面板中的代码片断名称右侧可以查看代码片断描述。
8对于“代码片断类型”,选择“插入块”。这将插入完整代码块形式的代码片断,而不是环绕在应用于的文本周围的代码片断。
9单击“确定”。
10在“代码片断”面板中,新代码片断添加到 Tab 文件夹中。
继续下面的学习在本教程中,您学习了如何定位、查看和插入 Dreamweaver 随附的代码片断。您还了解到创建自己的代码片断是一项很容易完成的任务。
有关本教程所介绍的主题的更多信息,请参见 Dreamweaver“帮助”(“帮助”>“使用
Dreamweaver”)。
第 16 章190
第 17 章使用层叠样式表进行设计教程可以在 Macromedia Dreamweaver MX 中使用层叠样式表 (CSS),在站点的多个页面中以一致的方式应用样式元素。CSS 样式非常灵活,因为样式并不局限于文本对象。对于文本、图像、表格、层等都可以定义定位样式和格式化样式。
在本教程中,您可以试用几种样式,大概了解一下 CSS 为您提供的众多样式选项中的几种。
在本教程中,您将完成以下任务:
第193页的“打开“CSS 样式”面板”
第194页的“重定义 HTML 标签”
第196页的“设置链接样式”
第197页的“导出样式以创建外部样式表”
191
开始前的准备工作在开始本教程之前,请先创建一个用来存储 GettingStarted 示例文件的新文件夹(如果尚未创建)。
1在本地磁盘的根目录下创建一个新文件夹,并将其命名为 Sites,例如,C:\Sites (Windows)
或 Hard Drive:Sites (Macintosh)。
如果使用的是 Windows XP 或 Macintosh OS X,请在用户文件夹中创建 Sites 文件夹。
2在硬盘上的 Dreamweaver 应用程序文件夹中找到 Tut or i als 文件夹。该文件夹的路径为:
\Macromedia|Dreamweaver MX\Samples\GettingStarted\ Tutorials
3将 Tu t o r i a l s 文件夹复制到 Sites 文件夹中。
4在 Dreamweaver 中将复制的 Tut or i als 文件夹定义为本地站点。如果不知道如何在
Dreamweaver 中定义本地站点,可以按照第 2 章第17页的“在 Dreamweaver 中创建您的第一个 Web 站点”中提供的说明进行操作。
还可以使用 Dreamweaver“站点定义”向导来完成站点的设置过程。在 Dreamweaver 中选择“站点”>“新建站点”,然后单击“基本”选项卡开始设置站点。
打开工作文档首先,您将打开一个工作文档。
1在 Dreamweaver 中选择“文件”>“打开”。
2在出现的对话框中,定位到所定义的本地站点中的 Tu t o r i a l s 文件夹,然后双击名为
css_start.htm 的文件以选择它。
此文档随即在“文档”窗口中打开。
此文档包含几种元素 - 文本、表格和链接。页面中几乎没有一种元素应用了格式化样式。通过重定义 body 标签,您将定义对文档应用全局更改的样式。
第 17 章192
打开“样式”面板CSS
使用“CSS 样式”面板可以创建、查看、应用或编辑样式属性。
“CSS 样式”面板具有两种视图或模式。使用“应用样式”视图可应用自定义或类 CSS 样式;
使用“编辑样式”视图可以对已应用于文档的样式进行更改。在这两种视图中工作时都可以创建新样式。
1如果“CSS 样式”面板尚未打开,请打开它(“窗口”>“CSS 样式”)。
2在“CSS 样式”面板中,单击面板底部的“新建 CSS 样式”按钮 (+)。
“新建 CSS 样式”对话框随即出现。
使用层叠样式表进行设计教程193
重定义标签 HTML
对文档中的任何标签都可以应用 CSS 样式。您要创建的第一种样式将重定义 body 标签的样式属性。
1在“新建 CSS 样式”对话框中,对于“类型”选择“重定义 HTML 标签”。
2在“标签”弹出菜单中选择“body”。
3在“定义在”中选择“仅对该文档”。
从现在起,我们将对此文档应用该样式,稍后您会看到如何导出该样式,以便可以在站点的其他页面中使用它。您的对话框应类似于下面这样:
4单击“确定”。
“CSS 样式定义”对话框随即出现。
5设置下列“类型”设置:
在“字体”弹出菜单中选择“Arial,Helvetica,sans serif”。
6在“大小”弹出菜单中选择 12 和像素。
第 17 章194
7在“颜色”中单击颜色选择器,然后使用滴管选择白色。
设置页面背景颜色接下来,您将使用“CSS 样式”面板中的“背景”类别设置背景选项。
1在“分类”下选择“背景”。
CSS 背景属性随即出现。
2在“背景颜色”中,执行下列操作之一设置背景颜色:
单击颜色选择器,然后使用滴管选择深蓝色;或者将滴管移到“文档”窗口中,然后在“全局”徽标图像中选择蓝色。
在“背景颜色”文本框中输入 #333366。
使用层叠样式表进行设计教程195
3单击“确定”。
对话框关闭,样式立即应用于文档。
4在“CSS 样式”面板中选择“编辑样式”。
新样式连同样式属性说明一起出现在列表中。
设置链接样式应用新样式后,几乎区分不出文档中的超级链接。让我们创建一种链接样式。
1在“CSS 样式”面板中,单击位于面板底部的“新建 CSS 样式”按钮 (+)。
“新建 CSS 样式”对话框随即出现。
2在“类型”中选择“使用 CSS 选择器”。
3在“选择器”弹出菜单中选择“a:link”。
4在“定义在”中选择“仅对该文档”。
第 17 章196
5单击“确定”。
“CSS 样式定义”对话框随即出现。
6为链接设置下列“类型”属性:
在“修饰”中选择“上划线”。
在“颜色”中的文本框中输入 #FFCC99。
7单击“确定”。
8要看到应用于链接的样式,必须在浏览器中查看页面,按 F12 键可以预览页面。
导出样式以创建外部样式表您到目前为止所创建的 CSS 样式仅应用于此文档。内部样式表仅应用于用来创建它们的文档。
现在,您将学习如何创建一个外部样式表,它包含您在此文档中定义的样式。
1选择“文件”>“导出”>“导出 CSS 样式”。
“导出 CSS 样式”对话框随即出现。
2在该对话框的“保存在”(Windows) 或“位置”(Macintosh) 弹出式菜单中,定位到您的本地站点文件夹。
3在“文件名”(Windows) 或“另存为”(Macintosh) 中,将该文件命名为 mystyle.css。
注意,可以将 CSS 样式表命名为您希望的任何名称;但下面的情况除外,即名称必须小写并且不能包含空格。
4单击“保存”。
使用层叠样式表进行设计教程197
附加外部样式表您将把刚才创建的 CSS 样式表附加到站点内的另一个文档中。您将使用的文档与应用样式前的原始 css_start.htm 文件相同。
1在 Dreamweaver 中,如果“站点”面板尚未打开,请打开它(“窗口”>“站点”)。
2在“站点”面板中找到名为 css_start2.htm 的文件,然后双击它在“文档”窗口中将其打开。
3在“CSS 样式”面板中,单击位于面板底部的“附加样式表”按钮。
“链接外部样式表”对话框随即出现。
4在“文件/URL”文本框中输入 mystyle.css 的路径;或者单击“浏览”并在出现的对话框中定位到 mystyle.css 文件,然后单击“确认”选择它。
5在“链接外部样式表”对话框中,对于“添加为”选择“链接”。
6单击“确定”。
所选样式表随即链接到当前文档,而样式属性也立即应用。
继续下面的学习在本教程中,您学习了如何创建基本的 CSS 样式。还学习了如何导出在文档中应用的样式以创建外部 CSS 样式表。
有关本教程所讲述的主题的更多信息,请参阅 Dreamweaver 帮助中的下列主题(“帮助”>“使用 Dreamweaver”)。
关于层叠样式表创建新的 CSS 样式创建和链接到外部 CSS 样式表基于 Dreamweaver 设计文件创建文档第 17 章198
第 18 章创建主详细页集教程主详细页集是一种 Web 应用程序,它以两种格式提供从数据库中提取的信息。主页显示通过数据库搜索检索到的所有记录的列表。详细页从主页链接出来,通常提供有关主页中所选项目的更具体细节。
您可以在以下服务器模型中完成本教程:ColdFusion、ASP 和 JSP。
在本教程中,您将创建一个主详细页集。完成本教程大约需要 20 分钟(视您的经验而定),您将学习如何执行以下任务:
第200页的“创建主详细页集”
第202页的“创建数据库记录集”
第205页的“插入主详细页集应用程序对象”
第207页的“查看页面”
199
开始前的准备工作如果您完成了本指南《Dreamweaver MX 入门》小节中的第 5 章第71页的“在 Dreamweaver
MX 中开发 Web 应用程序”,那么完成本教程所需的文件已经位于您的本地站点和远程站点中。
如果您没有完成这节课,则需要将“示例”文件传送到您的本地驱动器和应用程序服务器中。
有关如何设置文件的说明,请参阅 Web 应用程序服务器的相关设置章节。
第 7 章第91页的“示例 ColdFusion 站点的设置”
第 9 章第111页的“示例 ASP 站点的设置”
第 10 章第123页的“示例 JSP 站点的设置”
在开始学习本教程之前,必须已经完成了下列任务:
配置好系统。
将 Dreamweaver 配置成与所选应用程序服务器一起运行。
定义好数据库连接。
创建主详细页集数据库应用程序开发的一个好的起点是显示存储在数据库中的记录列表。您开发的主详细页集将列出公司的汽车租位,以及有关每个位置的详细信息(如电话号码和地址)。
有关 Global 位置的所有信息都存储在 Microsoft Access 数据库文件 global.mdb 中。如果您遵循了本指南相关设置章节中的说明,则您应该已经与此数据库建立了连接。如果不连接到此数据库,Web 应用程序页面将不会更新。
让我们首先选择一个工作页面。
1执行下列操作之一打开“站点”面板:
在“文件”面板组中,单击扩展箭头,然后选择“站点”选项卡(如果尚未选择)。
选择“窗口”>“站点”。
第 18 章200
按 F8 键。
“站点”面板随即打开。
2在“站点”弹出菜单中,选择所定义的 GlobalCar 站点。
3在“站点”面板中,双击 locationMaster 文件将其打开。
文档随即在“文档”窗口中打开。您将对部分完成的页面进行编辑。
创建主详细页集教程201
创建数据库记录集现在您将创建一个记录集以显示存储在数据库中的数据。记录集是通过数据库查询从数据库中提取的信息的子集。(在 ASP.NET 中,记录集称为数据集。)数据库查询由搜索条件组成,后者定义记录集中包含的内容。然后您将使用提取的信息作为动态页面的数据源。
Dreamweaver MX 为创建简单的 SQL 查询提供了一个方便易用的界面 - 不懂 SQL 也可以在
Dreamweaver 中创建记录集。
您将创建一个记录集,它选择 Locations 表中的所有值。
1在 Dreamweaver 中,执行下列操作之一打开“记录集”或“数据集”(ASP.NET) 对话框:
在插入栏的“应用程序”选项卡中,单击“记录集”或“数据集”(ASP.NET) 按钮。
选择“窗口”>“绑定”以打开“绑定”面板,然后单击加号 (+) 按钮并选择“记录集”或
“数据集”。
在“应用程序”面板组中,选择“绑定”面板,然后单击加号 (+) 按钮并选择“记录集”或
“数据集”。
随即出现“记录集”或“数据集”对话框。下方的屏幕显示 ColdFusion 记录集对话框。(在
ASP.NET 中,这是“数据集”对话框;对于所有服务器模型,大多数记录集选项是相同的。)
2在“名称”文本框中,输入 rsLocations。
这是您正在定义的记录集的名称。
第 18 章202
3在“数据源”弹出式菜单 (ColdFusion) 或“连接”弹出式菜单(其他服务器页类型)中,
选择“connGlobal”。
“记录集”或“数据集”对话框将更新并显示 Global 数据库中第一个表格的信息。
注意,如果 connGlobal 连接没有出现在菜单中,单击“定义”按钮创建此连接。
4在“表格”弹出菜单中,选择“LOCATIONS”。
记录集用 LOCATIONS 表中的记录进行更新。
5对于“列”,接受默认设置“全部”。
提示,若要限制记录集包含的信息,可以选择“选定的”,然后选择要使用的列。
创建主详细页集教程203
6单击“测试”测试记录集。
与您的记录集请求相匹配的数据库记录显示在“测试 SQL 指令”窗口中。
7单击“确定”关闭“测试 SQL 指令”窗口。
8单击“确定”关闭“记录集”或“数据集”对话框,并将记录集代码添加到您的页面中。
Dreamweaver 确认记录集已添加到页面中,同时记录集出现在“绑定”面板中。
提示,如果没有看到所有的记录集域,单击加号按钮展开记录集的分支。
第 18 章204
插入主详细页集应用程序对象
Dreamweaver 包含几个帮助您快速方便地创建 Web 应用程序页面的应用程序对象。
下一步,您将使用应用程序对象创建主详细页集。应用程序对象为很多常见的 Web 应用程序创建布局和服务器端脚本。您选择了几个选项后,主详细页集应用程序对象会为主页列表和包含您的详细信息的页面都生成表单和脚本。另外,应用程序对象还在主页中创建记录导航和记录计数器。
1保存文档(“文件”>“保存”)。
2在“文档”窗口中,locationMaster 文件应该仍是打开的,这时将插入点放在“Rental
Locations”文本的后面,然后按 Enter 键或 Return 键设置应用程序对象的插入位置。
3执行下列操作之一插入数据,
在插入栏的“应用程序”选项卡中,单击“主详细页集”按钮或将其拖动到文档中。
选择“插入”>“应用程序对象”>“主详细页集”。
“主详细页集”对话框随即出现。
4在对话框的“记录集”弹出菜单中选择“rsLocations”。
5在“主页域”列表中,选择“CODE”然后单击减号 (-) 按钮,将其从出现在主页列表中的数据列表中删除。
创建主详细页集教程205
6删除“主页域”列表中除 LOCATION_NAME、CITY 和 STATE_COUNTRY 以外的所有域。
7在“以此连接到详细信息”弹出菜单中,选择“LOCATION_NAME”。
若要查看某个位置的详细页,需为出现在主页列表中的每个位置创建一个链接。当站点访问者单击主页中的“位置名称”时,相应的详细页将会打开。
8在“传递唯一键”弹出菜单中,接受默认值“代码”并确保没有选中“数字”。
CODE 域是 Locations 表中的唯一键或主键。此域包含每个记录的唯一代码(由三个字母组成)。
9在“显示”中接受默认设置,每次显示十条记录。
10在“详细页名称”中单击“浏览”,然后在“选择文件”对话框中定位到站点文件夹中的
locationDetail 文件。
11单击“确定”。
12在“详细页域”中,执行以下操作设置希望在详细页中出现的域:
在“详细页域”列表中,选择“CODE”,然后单击减号 (-) 按钮。
选择“REGION_ID”,然后单击减号 (-) 按钮。
13单击“确定”。
Dreamweaver 更新主页和详细页,并为列表页和详细页都添加所有必要的服务器脚本和查询。
主列表页更新。它包含一个数据库数据表(即记录集页导航表)和一个记录集计数器。
详细页也更新。它包含一个表,其中列出了主页中每个记录的详细信息。
第 18 章206
查看页面下一步,您将保存页面,然后查看它们以了解所开发的应用程序的运行情况。若要查看页面在被服务器处理时的外观,可以在浏览器中预览页面。
1在“文档”窗口中,选择 locationDetail 文档,然后选择“文件”>“保存”以保存工作。
2在“站点”面板中,选择 locationDetail 文档,然后单击“上传文件”按钮(蓝色的向上箭头)将本地文件复制到服务器。
3在“文档”窗口中,选择 locationMaster 文档,然后选择“文件”>“保存”保存它。
4在“站点”面板中,选择 locationMaster 文档,然后单击“上传文件”按钮(蓝色的向上箭头)将本地文件复制到服务器。
5在 locationMaster 仍被选定时,按 F12 键在浏览器中查看页面。测试主页到详细页的链接。
6在数据表下方,单击“下一个”查看下十条记录的设置。
数据表、导航条和记录计数器更新。
7单击位置名称之一查看详细页。
主页将唯一键传递给服务器,服务器处理查询,然后详细页打开并显示所选位置的数据。
8按位于页面顶部的“位置”按钮返回到位置列表。
9查看完页面后,关闭浏览器窗口。
10在 Dreamweaver 中,关闭页面。
创建主详细页集教程207
继续下面的学习在本教程中,您学习了如何在 Dreamweaver 中创建主详细页集。
有关本教程所讲述的主题的详细信息,请参阅《使用 Dreamweaver MX》文档或 Dreamweaver
帮助中的下列主题:
快速创建主/详细页
逐步创建主/详细页
修改主/详细页第 18 章208
第 19 章建立插入记录页教程本教程指导您逐步完成建立向数据库中插入信息的表单的过程。随着创建插入页,您将学习如何插入和定义表单域。还将学习如何创建表单域,使用户可以使用动态生成的菜单插入信息。
在 Dreamweaver MX 支持的所有服务器模型(ColdFusion、ASP、ASP.NET、JSP 和 PHP)
中都可以完成本教程。
在本教程中,您将完成以下任务:
第210页的“创建插入页”
第211页的“添加表单对象”
第215页的“定义“插入记录”服务器行为”
第217页的“测试您的插入页”
开始前的准备工作如果您已完成本指南的《Dreamweaver MX 入门》部分中的第 5 章第71页的“在 Dreamweaver
MX 中开发 Web 应用程序”,则您的本地站点和远程站点中已有完成本教程所需的文件。
如果您并未完成这一课,则需要将示例文件传输到本地驱动器和应用程序服务器中。有关如何设置文件的说明,请参见 Web 应用程序服务器的相应设置章节。
第 7 章第91页的“示例 ColdFusion 站点的设置”
第 8 章第101页的“示例 ASP.NET 站点的设置”
第 9 章第111页的“示例 ASP 站点的设置”
第 10 章第123页的“示例 JSP 站点的设置”
第 11 章第135页的“示例 PHP 站点的设置”
开始学习本教程之前,必须已完成了以下任务:
配置了系统。
将 Dreamweaver 配置为使用所选的应用程序服务器。
定义了数据库连接。
209
创建插入页使用下面将要创建的插入页,站点管理员可以将新的汽车出租位置信息插入到 Global Car
Rental 数据库中。
首先从一个部分完成的页面开始。在创建过程中,您还要将表单对象和动态内容添加到该页中。
首先选择一个工作页面。
1执行下列操作之一打开“站点”面板:
在“文件”面板组中,单击扩展箭头,然后选择“站点”选项卡(如果尚未选择)。
选择“窗口”>“站点”。
按 F8 键。
“站点”面板打开。
2在“站点”弹出式菜单中,选择为您的应用程序服务器类型定义的 Global Car 站点。
第 19 章210
3在“站点”面板中,双击 insertLocation 文档以打开它。
insertLocation 文档随即在“文档”窗口中打开。
添加表单对象本插入页中已经添加有一个表格和一些表单域。文档中出现一个红色的虚线矩形框,这是表单边界。当您插入表单对象后,Dreamweaver 会自动在文档中插入表单边界。
现在将添加插入页的其余表单域,包括三个文本域、一个列表/菜单域、一个“提交”按钮和一个“重置”按钮。
另外,您还要提供表单域的标签文字。对域进行命名后,如果以后将表单域连接到数据库域,会更容易识别所使用的域。
首先查看现有的表单域之一。
1如果属性检查器尚未打开,请打开它(“窗口”>“属性”)。
2将鼠标指针移到右上方的单元格中,单击表单域以选择它。
属性检查器更新表单域属性的显示。
“名称”域包含表单对象的名称;“字符宽度”域将域宽度设置为 30 个字符。您将在添加到表单的文本域中更新这两个域。
3在文档中,将插入点放在“State or Country”标签文字右侧的表格单元格中,然后执行下列操作之一插入文本域:
在插入栏中,单击“表单”选项卡,然后单击“文本域”按钮(左起第二个)或将其从插入栏拖到表格单元格中。
建立插入记录页教程211
选择“插入”>“表单对象”>“文本域”
文本域表单对象随即插入到文档中。
4当文本域仍被选定时,在属性检查器的“名称”文本框中输入 state_country,在“字符宽度”文本框中输入 30。
5在文档中,将插入点放在“State”标签文字右侧的表格单元格中,然后执行下列操作之一插入“列表/菜单”:
在插入栏的“表单”类别中,单击“列表/菜单”按钮或将其从插入栏拖到表格单元格中。
选择“插入”>“表单对象”>“文本域”
列表/菜单表单对象随即插入到文档中。
6在属性检查器的“名称”文本框中输入 region_id。
列表/菜单对象按列表或菜单中最长项的长度生成字符宽度。我们在稍后将定义此域的菜单项和值。
7插入“Tel ep ho ne”文本域,然后在属性检查器中将其命名为 telephone,在“字符宽度”域中输入 30。
8插入“Fax”文本域,然后在属性检查器中将其命名为 fax,在“字符宽度”域中输入 30。
9在文档中,将插入点放在底部的表格单元格中。
第 19 章212
10执行下列操作之一,为表单添加“提交”按钮:
在插入栏的“表单”类别中,单击“按钮”按钮或将其从插入栏拖到表格单元格中。
选择“插入”>“表单对象”>“按钮”。
“提交”按钮随即插入到文档中。在属性检查器中,该按钮已有标签文字,并且“动作”被设置为“提交表单”。
11重复第 10 步以向表单添加其他按钮。现在将添加“重置”按钮,以便用户在需要时可以重置表单。
12在属性检查器中,对于“动作”,选择“重设表单”。
13在“按钮名称”文本框中输入 Reset。
表单现在就完成了,它看起来象这样:
14保存文档。
建立插入记录页教程213
定义列表/菜单表单域现在,您将添加让用户选择区域的文本名称的信息,从而更新列表/菜单域,并且用其数值更新数据库。这样,用户就不必进行检查以确认数字与名称是否匹配了。
1在文档中,单击 Region_Id 列表/菜单表单域以选择它。
属性检查器随即用该对象的相关信息更新。
2在属性检查器中,单击“列表值”按钮。
随即出现“列表/菜单”对话框。
3在“列表值”对话框中,添加“项目标签”和“值”以匹配 REGIONS 数据库表中的数据。
4在“项目标签”中,输入 North America;然后按 Tab 键,在“值”中输入 1。
5单击加号 (+) 按钮以添加其他项,然后输入“South/Central America”,之后按 Tab 键,再输入“2”。
6重复第 4 步和第 5 步,直到如下面的对话框中所示输入了所有区域。
7单击“确定”关闭对话框。
第 19 章214
定义“插入记录”服务器行为您将使用服务器行为为应用程序创建所需的服务器脚本。您将创建表单域数据和数据库数据之间的连接,这样,完成表单并单击“提交”按钮时,信息便插入到数据库中。
1在“服务器行为”面板(“窗口”>“服务器行为”)中,单击加号 (+) 按钮并从弹出式菜单中选择“插入记录”。
出现“插入记录”对话框。
2在“数据源”(ColdFusion) 或“连接”弹出式菜单(其他服务器页类型)中,选择
“connGlobal”。
建立插入记录页教程215
3在“插入到表格”弹出式菜单中选择“LOCATIONS”。
“列”列表随即用表单域与数据库域的关联方式信息更新。
4确保 REGION_ID 的值设置为“数字”或“整数”(ASP.NET),因为“区域 ID”是数值,
而非文本值。
5在“插入后,转到”或“如果成功,则转到”(ASP.NET) 中,单击“浏览”并在出现的对话框中选择 LocationOK 文件,然后单击“确定”以关闭该对话框。
6单击“确定”关闭“插入记录”对话框。
在“文档”窗口中,表单随即更新,并且“服务器行为”面板显示“插入记录”行为已被添加。
7保存文档。
第 19 章216
测试您的插入页接下来,您将把已完成的页面拷贝到服务器,然后在浏览器中打开它并插入一些信息。
1在“站点”面板中选择“insertLocation”,然后单击“上传文件”按钮(蓝色的向上箭头)
将本地文件复制到服务器上。当询问您是否要复制相关文件时,请选择“是”。
2当 insertLocation 在“文档”窗口中被选定时,选择“文件”>“在浏览器中预览”或按 F12
键 (Windows) 查看文档。
3在表单中输入测试数据,然后单击“提交”按钮。
出现 locationOK 页,指示已在 Global 数据库中成功插入信息。
4若要查看您已添加到数据库中的项,请执行以下操作:
在“应用程序”面板组中,选择“数据库”面板。找到 connGlobal 数据库,然后单击数据库前面的加号 (+) 以展开它。单击“表格”前面的加号 (+) 以查看数据库的各表格。右击
(Windows) 或在按住 Control 键的同时单击 (Macintosh) LOCATIONS 表,然后选择“查看数据”。随即出现数据库记录;新记录是该数据库中的最后一项。
继续下面的学习在本教程中,您学习了如何在 Dreamweaver 中创建动态插入记录表单。有关本教程所讲述的主题的详细信息,请参见《使用 Dreamweaver MX,文档或 Dreamweaver 帮助中的下列主题:
创建交互表单
将动态内容添加到 Web 页中
建立要插入记录的页面
设置“插入记录表单”对话框选项建立插入记录页教程217
第 19 章218
“绑定”面板 73
帮助菜单 15
帮助系统 10
保留字 150
背景颜色,设置 38
调整 27
布局表格 31
布局视图,切换到 31
C
本地网络连接 46
本地文件夹定义 95,105,117,128,141
C#(语言) 66
CFML 中的变量 66
CFML(ColdFusion 标记语言) 66
索 引
A
Access。请参见 Microsoft Access
Active Server Page。请参见 ASP
Apache Tomcat 应用程序服务器 67
Apple。请参见 Mac OS X
ASP
答疑 115
时间,显示 114
Web 应用程序,设置 111
应用程序服务器,安装 114
ASP.NET
服务器,受支持的 103
.NET 框架 103
数据集 73
Web 应用程序,设置 101
语言,用于 66
安全和权限 153
安装
ColdFusion MX 93
Dreamweaver 11
IIS 87
.NET 框架 103
Web 服务器 86
应用程序服务器,ASP 114
应用程序服务器,JSP 126
应用程序服务器,PHP 138
B
编辑标签 54
样式 36
编辑菜单 15
编码工作区 49
表插入 76
表格标准视图 32
布局视图 31
单元格,背景颜色 38
单元格,删除 27
列,更改宽度 31
列,自动伸展 32
数据库 64
标签编辑 54
标签选择器 53
查找参考信息 55
服务器端 64
提示 56
标签编辑器 53
标签检查器 54
标签选择器 28,53
标题,设置页面 33
标准视图 32
布局标准视图 32
219
本地站点关于 18
设置 18
ColdFusion
安装 93
错误信息 151
Web 应用程序,设置 91创建语言,用于 66
ColdFusion 标记语言 (CFML) 66
ColdFusion 管理员 98
ColdFusion MX Server Developer Edition 93
ColdFusion Studio 13,49
“CSS 样式”面板 36
菜单 15
参考信息 55
“参考”面板 55
“参数选择”对话框
“常规”分类 50
“代码提示”分类 56
参数,太少 150
操作系统多用户 12
操作系统,要求 11
测试服务器 87
指定 96,106,118,129,142
“测试连接”按钮 46
查看鼠标经过图像 44
插入表 76
动态文本 77
鼠标经过图像 43
插入菜单 15
插入记录表单创建 79
“插入记录表单”对话框 80
插入记录对象 79
插入栏 14
“应用程序”选项卡 78,80
插入栏的“应用程序”选项卡 78,80
插入图像占位符菜单项 30
“插入”栏插入链接 57
查询 68
测试 75
答疑 150
可更新 152
联接 149
数据库 64
“常规”参数选择 50
常用 Web 应用程序术语词汇表 67
常用术语,定义 67
超级链接。请参见 链接超时值,Windows 2000 148
重复的区域,创建 78
重命名文件 41
CSS 样式表 35
重复的区域 78
根文件夹 (ASP) 116
根文件夹 (ASP.NET) 104
根文件夹 (ColdFusion) 94
根文件夹 (JSP) 127
根文件夹 (PHP) 140
记录集 73
临时文件 148
页 24
创建静态站点的工作流程 17
窗口菜单 15
窗口。请参见 面板磁盘,在“站点”面板中查看 51
从数据库提取数据 64
错误信息
ColdFusion 151
Microsoft,答疑 147
文件已在使用中 148
另请参见 答疑
D
DBMS(数据库管理系统) 68
打开属性检查器 38
Dreamweaver
安装 11
菜单 15
功能 47
注册 12
自定义 12
Dreamweaver 4 工作区布局 13
Dreamweaver 的功能 47
Dreamweaver“帮助” 10
DSN(数据源名称)答疑 148
答疑
ASP 115
BOF 151
ColdFusion 151
COUNT 域不正确 150
参数,太少 150
DSN 148
登录失败 149
动态页,在浏览器中预览 97,119,130,143
EOF 151
访问被拒绝 151
服务器 85,88
可更新查询 149,152
Microsoft 错误信息 147
ODBC 错误 151
PHP 139
索 引220
权限 152浮动工作区布局 13
实时数据视图 97,107,119,130,143
数据类型不匹配 150
文件在使用中 148
页面未打开 88
页未显示 115,139
语法错误 150
答疑动态页,在浏览器中预览 107
打印代码 58
代码打印 58
使用标签选择器创建 53
代码和设计视图 40
代码视图让更改显示在设计视图中 40
显示文本文件 34
代码提示 56
“代码”视图切换到 52
单元格 32
背景颜色 38
删除 27
选择 39
导航条拷贝 44
“导入 Word HTML”命令 34
登录失败 149
滴管指针 39
定义
CSS 样式 37
远程文件夹 96,105,118,129,142
动画和“静态”页 61
动态文本,插入 77
动态页处理 62,96,106,118,129,142
创建 66
关于 68
对话框
CSS 样式定义 37
链接外部样式表 36
新建文档 24
对页进行布局 27
多文档界面 (MDI) 13
多用户操作系统 12
F
FAT 文件系统 153
发布 45
FTP(文件传输协议) 46
“访问被拒绝”错误信息 151
附加 CSS 样式表 36
服务器
ASP.NET 支持 103
安装 86
测试 87
答疑 88
根文件夹 96,105,118,129,142
HTTP 88
基础 88
IP 地址 89
上传文件 97,107,119,130,143
设置 85
Web 服务器,已定义 61
Windows Me 86
选择 86
应用程序服务器 62
另请参见 Web 服务器,应用程序服务器服务器端脚本语言 66
服务器技术 66
选择 67
已定义 69
服务器模型。请参见 服务器技术
“服务器行为”面板 78
复制文件 41
G
概述菜单 15
个人 Web 管理器 88
启动 127,140
根目录相对链接 38
根文件夹 85
创建 94,104,116,127,140
定义 95,105,117,128,141
另请参见 本地文件夹更改背景颜色 38
页布局 27
“更改工作区”按钮 50
工具 47
工具栏文档 79
文档,显示 33
工作区布局编码 49
选择 13
关闭文档 34
关系型数据库,关于 69
索 引221
H
教程 10
HomeSite 13,49
HTML
导入 34
嵌入的编程语言 66
另请参见 代码
HTTP 服务器。请参见 服务器核对表
JSP 设置 123
PHP 设置 136
“欢迎使用”窗口 14
活动数据视图答疑 97
I
IBM WebSphere 应用程序服务器 67
IIS 45,67,86
ASP.NET 支持 103
安装 87
管理工具,启动 104
权限 148
INSERT 语句中的语法错误 150
Intranet 46
IP 地址 89
iPlanet Web Server 69
IUSR 帐户 148
J
Java 66
JavaScript 66
JavaServer Page (JSP) 66
集成的工作区布局 13
记录 64
插入 79
显示 76
记录集测试 75
创建 73
空,答疑 151
已定义 68
另请参见 数据库
JRun 67
JSP
Web 应用程序,设置 123
应用程序服务器,安装 126
技术支持 147
服务器 85
检查器。请参见 面板间隔图像 32
脚本服务器端 64
结构化查询语言 (SQL) 64
解释数据库数据 64
静态页 61
静态页,关于 69
静态站点,创建 17
K
拷贝导航条 44
文本 34
文件 41
“站点”面板中的文件和文件夹 51
宽度,使一致 32
L
localhost 88
“Lorem Ipsum”占位符文本 26
连接到数据库 (ASP) 120
到数据库 (ASP.NET) 107
到数据库 (ColdFusion) 98
到数据库 (JSP) 131
到数据库 (PHP) 143
到远程站点 46
链接插入 57
创建 42
图形化 43
文档相对和根目录相对 38
“链接外部样式表”对话框 36
列表格,更改宽度 31
表格中的自动伸展列 32
数据库中列的名称 150
列的宽度,更改 31
列的名称 150
列名称中的空格 150
列设置为自动伸展 32
浏览器之间的差异 45
M
Mac OS X 上的 Apache Web 服务器 85
Macintosh
服务器 85
Mac OS X 多用户环境 12
系统要求 11
运行 Apache 和 PHP 的 Mac OS X 137
Macromedia ColdFusion Studio 13
Macromedia HomeSite 13
索 引222
Macromedia JRun 67
Web 应用程序,设置 135
安装 126
MDI(多文档界面) 13
Microsoft Access 65
答疑 147
锁定的数据库文件 148
Microsoft 错误信息,答疑 147
Microsoft Internet Information Server (IIS)。请参见 IIS
Microsoft Personal Web Server (PWS) 69,86
Microsoft SQL Server 65
Microsoft Word HTML,导入 34
Microsoft 知识库文章 149
MySQL 65
下载 143
密码,不正确 149
面板
“绑定”面板 73
“CSS 样式”面板 36
“服务器行为”面板 78
属性检查器 38
说明 14
“站点”面板 72
面板组 15
文件 72
应用程序 73
命令菜单 15
命名文件 41
模板 41
N
.NET 框架 67
安装 103
Netscape Enterprise Server 69
NTFS 文件系统 153
NT。请参见 Windows NT
内容。请参见 文本、图像、动态页
O
ODBC 错误 151
Option Pack,Windows NT 4.0 86
Oracle 9i 65
P
PDF 文档 10
Personal Web Manager
启动 94,116
PHP 66
答疑 139
Mac OS X 137
时间,显示 139
应用程序服务器,安装 138
PWS 69,86
ASP.NET 支持 103
安装 86
配置
Dreamweaver 12
具有 ASP 应用程序服务器的系统 112
具有 ColdFusion MX 的系统 92
具有 JSP 应用程序服务器的系统 124
具有,NET 框架的系统 102
具有 PHP 应用程序服务器的系统 137
Q
其他资源 47
清单
ASP 设置 111
ASP.NET 设置 101
ColdFusion 设置 91
驱动程序数据库 64,68
未指定 148
区域重复的 78
权限安全 153
包含数据库的文件夹 149
创建和销毁临时文件 148
答疑 152
R
RWS 服务器 45
日期,答疑 150
S
Sequel (SQL) 64
SQL Server
答疑 147
动态页,答疑 149
SQL 帐户名称中的下划线 149
SQL(结构化查询语言) 64
删除表格单元格 27
上下文菜单 15
上传 45,83
上传文件 97,107,119,130,143
“上传文件”按钮 47,83
设计视图 40
设置
ASP 111
ASP,清单 111
索 引223
ASP.NET 101
驱动程序,概述 64
ASP.NET,清单 101
ColdFusion 91
ColdFusion,清单 91
JSP 123
JSP,核对表 123
PHP 135
PHP,核对表 136
页面属性 33
站点 18
设置背景颜色 39
设置文本的格式 35
“使单元格宽度一致”命令 32
时间,显示在 ASP 中 114
时间,显示在 PHP 中 139
示例数据库连接到 98,99,107,108,120,121,131,143
示例站点,查看 16
实时数据视图 79
答疑 107,119,130,143
视图标准视图 32
布局视图 31
代码视图 40
实时数据 79
视图菜单 15
“使用 Dreamweaver”用户指南 10
手柄,用于拖动面板组 15
手工编码 13
鼠标经过图像查看和预览 44
创建 43
数据,动态,插入 77
数据集(ASP.NET 记录集) 73
数据库表格 64
查询 64,68
关系型 69
关于 68
记录集 64
基于服务器 65
基于文件 65
连接到 (ASP) 120
连接到 (ASP.NET) 107
连接到 (ColdFusion) 98
连接到 (JSP) 131
连接到 (PHP) 143
列名称 150
驱动程序,已定义 68
权限,更改 153
锁定 148
文件位置 149
显示数据 64,76
选择 65
与 Web 应用程序一起使用 60
数据库管理系统 68
数据类型,不匹配 150,151
数据源
ColdFusion 98
数据源名称。请参见 DSN
属性参考信息 55
在代码提示中 56
属性检查器 14
打开 38
展开 38
数字地址 89
“刷新”按钮 40
锁定的数据库文件 148
T
Tomcat 应用程序服务器 67
特殊字符列名称 150
在 SQL 帐户名称中 149
域名称中的问号 150
添加文本到页 33
样式到文本 35
资源到站点 23
调整页布局 27
停靠和取消停靠面板组 15
图像插入 37
间隔 32
鼠标经过图像 43
添加 23
源文件,选择 38
站点外 38
占位符 30
图形化链接 43
U
UNC 152
“URL 前缀”选项 97,106,119,130,143
URL,文档相对和根目录相对 38
索 引224
V
问号 150
VBScript 66
Visual Basic 66
W
Web 服务器 45
检查 93,103,113,126,138
已定义 61,69
另请参见 服务器,应用程序服务器
Web 页上的按钮(鼠标经过图像) 43
Web 应用程序
ASP,设置 111
ASP.NET,设置 101
ColdFusion,设置 91
常用 60
概述 59
JSP,设置 123
开发 71
PHP,设置 135
术语定义 69
Web 应用程序的示例 60
WebSphere 67
Windows 11,12
Windows 2000 超时值 148
Windows Me 服务器 86
Windows NT 4.0 Option Pack 86
未保存的文档,插入图像 37
文本动态 77
设置格式 35
添加 33
选择 34
样式,应用 36
占位符 33
占位符文本 26
文本菜单 15
文本文件在代码视图中 34
文档 10
保存 26
重命名 41
复制 41
关闭 34
切换 52
未保存的 37
文档窗口 14
文档工具栏介绍 14
实时数据视图 79
显示 33
文档相对链接 38
文件上传 83,97,107,119,130,143
在“站点”面板中拷贝 51
文件菜单 15
文件夹根 85
在“站点”面板中拷贝 51
“文件已在使用中”错误信息 148
“文件”面板组 72
X
系统配置 92,102,112,124,137
系统 DSN 148
系统要求 11
显示文档工具栏 33
向导,站点定义 18
项目(HomeSite 和 ColdFusion Studio 术语)。请参见 站点销毁临时文件,权限 148
卸载 Dreamweaver 12
“新建文档”对话框 24
CSS 样式表,创建 35
修改标签 54
页布局 27
页面属性 33
修改菜单 15
选择标签 53
服务器技术 67
图像源文件 38
颜色 39
选择单元格 39
选择工作区布局 13
选择文本 34
选择颜色 39
Y
127.0.0.1 IP 号 89
颜色选择器 39
验证该 Web 服务器正在运行 93,103,113,126,
138
样式,CSS 36
要求 11
页布局 24,27
创建 24
索 引225
动态 59
动态,处理 62
动态,创建 66
静态 61
属性,设置 33
显示数据库数据 64
预先设计的 24
页布局调整 27
页面记录插入 79
页面设计,预先设计的 24
页面属性设置 33
应用程序,Web。请参见 Web 应用程序应用程序服务器
ColdFusion MX,安装 93
概述 62
关于 67
.NET 框架 (ASP.NET),安装 103
PHP,安装 138
用于 ASP,安装 114
用于 JSP,安装 126
“应用程序”面板组 73
用户 DSN 148
用户界面 12
域动态 77
预览概述 45
鼠标经过图像 44
预先设计的页面设计 24
语言,服务器端 66
远程 Web 服务器 45
远程文件夹定义 96,105,118,129,142
远程站点 45
关于 18
连接 46
约定,字形 10
Z
在浏览器中预览动态页答疑 97,107,119,130,143
站点定义 18,94,104,116,127,140
关于 18
静态,创建 17
设置 18
外部文件 51
远程 45
在“站点”面板中选择 51
资源,添加 23
站点菜单 15
站点定义向导 18
站点面板 15
“站点”面板 72
拷贝文件和文件夹 51
文件浏览器 51
“站点”面板中的文件浏览器 51
展开面板组 15
属性检查器 38
粘贴文本 34
占位符图像 30
图像,替换 37
文本 26
帐户
IIS,权限 148
帐户名称答疑 149
帐户名称中的非法字符 149
指定测试服务器 96,106,118,129,142
“指向文件”图标 38
指针,滴管 39
注册 Dreamweaver 12
术语 67
自定义
Dreamweaver 12
自动编号域,答疑 151
自动伸展列 32
域名称中的? 150
字符,在帐户名称中有效 149
字形约定 10
资源用于学习 Dreamweaver 10,47
资源,添加到站点 23
索 引226