说到Web，你可能想到网页（不管是静态的，还是动态的），但实际上它包含更多的内容。Web直译为环球网（也就是互联网），对于Web开发和设计师来说，它是一系列技术的总称。例如，网站前台布局、后台程序、网页美工、数据库构建和管理等技术。

开发和设计Web的工具有很多，但是Dreamweaver绝对是众多工具中的主力，占据了国内网页编辑和开发的大部分市场份额。从功能上审视，Dreamweaver集成了网页编辑、网站开发和网站管理，以及网页编辑辅助功能和扩展工具三大部分。本书将探索如何挖掘Dreamweaver CS3网页编辑工具的潜能，并围绕CSS、Ajax和ASP技术来讲解如何快速开发动态网站。

1.1.1  简析Dreamweaver的网页编辑功能

网页编辑是Dreamweaver的核心功能，从网页内容编辑、网页布局到网页多媒体功能实现，所有这些都可以在Dreamweaver中轻松完成。

当启动Dreamweaver CS3之后，你可以在主界面中看到Dreamweaver的概貌（如图1­-1所示）。Dreamweaver CS3依然保留着传统桌面应用程序的经典布局。也就是说主窗口从上到下按顺序排列着：标题栏、菜单栏、工具栏、编辑窗口、状态栏。窗口的左右两侧或底部是各种功能面板。这种桌面布局和操作习惯对于广大初学者来说是非常熟悉的，因此你能够快速融入到这个编辑环境中。有一次我曾与网友开玩笑说：我能闭着眼睛操作Dreamweaver。话虽然有点狂，无它，只是想说明Dreamweaver界面的易用性，以及在操作中熟能生巧的道理。

图 1-1

根据一般操作习惯，你可以在【文件】主菜单中执行网页文档的新建、打开和保存等工作。然后在【插入记录】主菜单中选择要插入到网页中的各种对象。

插入对象之后，你可以借助【编辑】和【修改】主菜单来编辑或修改已选中的网页对象。另外，你还应该养成使用主菜单下面的各种工具栏、主窗口底部的【属性】面板，以及窗口右侧的功能面板（如果窗口视图是【编码器】状态，则会显示在左侧），这样能够帮助你快速完成各种操作任务。相信这些操作对于阅读本书的读者来说已经不算是什么问题了，故不再罗嗦。

另外还想提一点，Dreamweaver提供的【代码】、【拆分】和【设计】视图是一个非常棒的功能，你可以利用这三个视图在网页源代码和设计效果之间快速切换，以实现网页的快速编辑和准确操作。

1.1.2  简析Dreamweaver的网站开发和管理功能

网站开发与管理是Dreamweaver另一个核心功能，也是本书要讲解的主要内容。你可以借助【站点】主菜单来完成与网站开发和管理相关的大部分任务，同时结合【文件】面板来具体编辑和管理网站内容，利用【应用程序】面板组来快速实现动态网站的开发。

当然Dreamweaver仅是一个工具，它不提供动态网站的技术支持，所以要开发动态网站你还必须安装Windows附带的IIS组件（该组件支持ASP动态网站），如何安装IIS请参阅第3.2.2节内容。下面我们假设你的系统中已经安装了IIS，在此基础上来讲解如何定义一个本地动态站点，第2章的实例也将以这个站点为操作起点，带你进入梦幻般的动态网站开发体验之中。

建设网站或者开发Web应用程序的第一步，当然是要定义一个本地动态站点。下面就来讲解如何利用Dreamweaver CS3提供的针对初学者而设计的定义站点向导来实现这个任务。

 启动Dreamweaver CS3，选择【站点】|【新建站点】菜单命令，将打开【站点定义为】对话框（如图1-2所示）。利用【基本】选项卡提供的向导，你可以轻松建立一个简单的本地站点。

 在【编辑文件】窗口的第一步界面内为站点命名（如图1-2所示），该名字仅在Dreamweaver编辑环境中起到识别站点的目的，没有其他作用，因此你可以随意起一个名字。

 单击【下一步】按钮，进入【编辑文件】的第2部分。在此设置本地站点的服务器技术，所谓服务器技术就是提供对动态网站支持的环境。学习ASP网站开发，自然我们应该选择ASP VBScript或者ASP JavaScript技术。本书全部选用ASP VBScript技术进行讲解和实战（如图1-3所示）。

 如果你仅建立一个静态站点，不希望获得服务器技术的支持，则直接选择【否，我不想使用服务器技术】单选按钮即可。

 单击【下一步】按钮，打开【编辑文件】的第3部分，在此设置如何编辑你的站点，也就是说把本地站点存放在什么位置。Dreamweaver CS3提供了三个选项（如图1-4所示）。

l         在本地进行编辑和测试（我的测试服务器是这台计算机）：默认选项，网站开发和测试都在本地计算机中进行，当然前提是要安装IIS组件。

l         在本地进行编辑，然后上传到远程测试服务器：采用这种方式，可以先制作站点内容，然后上传到远程服务器上进行测试。这种方式比较麻烦，不能够快速测试动态网页效果，所以不建议使用。

l         使用本地网络直接在远程测试服务器上进行编辑：如果网速比较快，采用这种方式也可以，前提是你需要购买虚拟空间。对于初学者来说，使用这种方式是一种奢侈的举措，浪费时间，操作也比较麻烦，所以也不建议使用。

 因此，建议初学者保持默认的选择，即在本地编辑和测试网站。然后在下面的文本框中设置本地站点的存放位置，默认为“c:\inetpub\wwwroot\mysite”，其中mysite是你定义的站点名称。当然你也可以选择其他位置，单击文本框后面的【选择文件】图标（），在打开的对话框中选择相应的文件夹即可。

 如果文件夹位于c:\inetpub\wwwroot目录以外，你还需要定义一个虚拟目录来指向该文件夹（具体说明和操作请参阅第3.3.1节内容）。如果你是第一次接触这些概念，会感觉操作起来有点难度，甚至不可理解。其实你完全可以不管这些设置，保持默认值即可。Dreamweaver CS3将自动在c:\inetpub\wwwroot\mysite目录存放网站内容并进行测试。

 单击【下一步】按钮进入【测试文件】部分。在此设置访问站点的URL（网址）。实际上当你选择在本地进行编辑和测试选项之后，Dreamweaver CS3已经帮助你设置了一个本地的URL（如图1-5所示）。这个http://localhost/mysite/也是固定的URL，你不能够随意改动，否则是无法访问你的站点。单击其中的【测试URL】按钮可以测试该URL是否已经打通。

 单击【下一步】按钮，进入【共享文件】部分。在此设置当你编辑完一个文件后，是否将该文件复制到远程服务器中，要开发动态网页并进行测试当然要勾选【是的，我要使用远程服务器】单选按钮选项（如图1-6所示）。当文件上传到Web服务器或模拟调试服务器后，团队开发成员之间就可以共享文件。如果浏览者知道远程服务器的地址，他们还可以访问该站点和站点内的文件。

 然后单击【下一步】按钮，进入【共享文件】第2部分。设置如何连接到远程服务器，以及远程服务器的位置，对于初学者来说，仅希望在本地进行测试，因此我们可以把本地计算机当作远程服务器来进行设置，故选择【本地/网络】选项，当然在第3章中我们还将详细讲解其他连接方法。然后在下面的文本框中设置远程服务器的位置，这里设置为c:\inetpub\wwwroot\mysite\，与本地文件夹相同，这样便于管理（如图1-7所示）。

 单击【下一步】按钮，进入【共享文件】第3部分。Dreamweaver CS3会询问是否启动存回和取出功能，由于开始学习，不是多人合作开发，所以可以勾选【否，不启用存回和取出】单选按钮选项（如图1-8所示）。

 单击【下一步】按钮，将进入【总结】部分，在这里总结显示定义站点的本地、远程和测试服务器的相关信息（如图1-9所示）。如果对相关技术比较熟悉，你可以查看所有设置，并能够及时进行调整。

 最后单击【完成】按钮结束站点的定义。如果此时或者前面操作中出现如图1-10所示的提示对话框。你应该返回到如图1­-2所示的第一步，然后在站点HTTP地址文本框中输入http://localhost/mysite/访问地址（仅就本例来说）。

图 1-10

定义站点是所有Web应用开发的第一步，当然也是最重要的一步。你必须从这一点开始，否则后面的所有讲解将无法进行。我们将在第二章中详细剖析一个Deno实例的全部过程，该实例就是建立在上面定义的站点基础之上。

定义站点之后，你可能还会面临很多难题和挑战（如站点建设、测试和管理工作等），当然这些技术有待于本书后面各章逐一进行讲解和突破。

1.1.3  Dreamweaver的辅助功能和工具

Dreamweaver所提供的网页编辑辅助功能和扩展工具包含两个层面：第一个层面是Dreamweaver编辑环境的设置，虽然这些功能与网页编辑没有直接关系，但是它们却能够帮助你高效完成任务。你可以在【编辑】|【首选参数】菜单中设置所有的环境参数，同时利用【查看】和【窗口】主菜单来配置你的Dreamweaver CS3操作环境。熟练了解这些功能的使用绝对能够提高你的Web设计和开发效率。

另一个层面就是Dreamweaver提供的许多辅助命令或扩展工具。你可以在【命令】主菜单中完成这些操作。利用【命令】|【扩展管理】菜单，你还可以扩展Dreamweaver的功能，设计出许多Dreamweaver自身很难实现的功能。

• Dreamweaver