Dreamweaver ASP教程从零开始怎么学？

Dreamweaver 本身不是 ASP，而是一个强大的网页开发工具，ASP (Active Server Pages) 是由微软开发的一种服务器端脚本技术，Dreamweaver 通过其直观的界面，极大地简化了编写、测试和管理 ASP 页面的过程。

这份教程将引导您从零开始,使用 Dreamweaver 创建一个功能完整的动态 ASP 网站。

教程核心流程

我们将遵循以下步骤来完成整个教程：

1. 环境准备：搭建本地服务器和数据库。
2. 站点创建：在 Dreamweaver 中定义和管理站点。
3. 静态页面设计：使用 Dreamweaver 的可视化工具创建网页布局。
4. 数据库连接：让 Dreamweaver 连接到我们的数据库。
5. 数据绑定：将数据库中的数据显示在网页上。
6. 创建插入/更新/删除页面：实现完整的增删改查功能。

第一步：环境准备

在开始之前,您需要一个本地的 Web 服务器环境来运行 ASP，最经典和推荐的是集成环境。

推荐软件：AppServ

AppServ 是一个将 Apache 服务器、PHP、MySQL 等集成在一起的安装包，虽然它主要用于 PHP，但它同样可以完美支持 ASP，只要您安装了 Microsoft 的 ASP 组件。

1. 下载与安装 AppServ：

   • 前往 AppServ 官网或可靠的下载源下载安装包。
   • 运行安装程序,按照向导进行，在安装过程中，它会要求您设置服务器根目录（默认通常是 C:\AppServ\www）、管理员邮箱和密码等，记住这些信息。

2. 安装 ASP 组件：

   • AppServ 默认不包含 ASP 支持，您需要手动安装 Microsoft Windows Script 组件。
   • 前往微软官网搜索 "Windows Script 5.6 for Windows Server 2003" 或类似版本下载并安装，这个组件让 Windows 操作系统能够识别和执行 ASP 代码。

3. 验证安装：

   • 在 C:\AppServ\www 目录下，新建一个文本文档，重命名为 test.asp。
   • 用记事本打开它,输入以下代码：

     <%
       Response.Write("Hello, World! Your ASP server is working!")
     %>

   • 保存文件,打开浏览器，访问 http://localhost/test.asp。
   • 如果看到 "Hello, World! Your ASP server is working!" 的字样，说明您的 ASP 环境已经成功搭建。

数据库准备

我们将创建一个简单的 Access 数据库来存储文章信息。

1. 打开 Microsoft Access。
2. 选择“空白数据库”，创建一个名为 articles.mdb 的文件，并保存在您的网站根目录（如 C:\AppServ\www）下。
3. 在“创建”选项卡中，点击“表设计”。
4. 创建以下字段：
   • id：自动编号，主键。
   • title：文本，用于文章标题。
   • content：备注，用于文章内容。
   • post_date：日期/时间，用于发布日期。
5. 保存表名为 tb_articles。
6. 向表中手动添加几条测试数据。

第二步：在 Dreamweaver 中创建站点

这是在 Dreamweaver 中工作的基础。

1. 打开 Dreamweaver，选择“站点” -> “新建站点”。
2. 在弹出的窗口中,切换到“站点”选项卡。
   • 站点名称：为您的站点起一个名字，"My ASP Blog"。
   • 本地站点文件夹：点击文件夹图标，选择您的网站根目录，即 C:\AppServ\www。
3. 切换到“服务器”选项卡，点击 号添加新服务器。
   • 服务器名称：起个名字，如 "Local Testing Server"。
   • 连接方法：选择 本地/网络。
   • 服务器文件夹：同样选择 C:\AppServ\www。
   • Web URL：输入 http://localhost/。
   • 勾选“测试”按钮，Dreamweaver 会尝试连接，如果成功会提示。
4. 点击“保存”，您的站点已经设置完成，Dreamweaver 左侧的“文件”面板会显示您 www 目录下的所有文件。

第三步：创建静态页面布局

我们将使用 Dreamweaver 的模板功能来创建一个统一的页面布局。

1. 在 Dreamweaver 中，新建一个 HTML 文件，命名为 template.dwt。
2. 使用 Dreamweaver 的可视化工具（插入表格、div、CSS 等）设计一个简单的页面布局，
   • 顶部一个 header）
   • 中间一个 mainContent（用于显示文章列表或文章详情）
   • 底部一个 footer（版权信息）
3. 设置可编辑区域：这是模板的核心，在 mainContent 区域，您需要将这部分设置为可编辑，以便每个页面都可以有不同的内容。
   • 将光标放在 mainContent 区域内。
   • 在菜单栏选择“插入” -> “模板对象” -> “可编辑区域”。
   • 给区域命名,EditRegion1。
4. 基于模板创建页面：
   • 在“文件”面板中，右键点击 template.dwt，选择“从模板新建”。
   • 创建两个页面：index.asp（首页，显示文章列表）和 detail.asp（详情页，显示单篇文章）。

第四步：创建数据库连接

这是连接静态页面和数据库的关键步骤。

1. 打开 index.asp 页面。
2. 在右侧的“应用程序”面板中，选择“数据库”选项卡。
3. 点击 号，选择“数据源名称 (DSN)”。
   • 数据源名称 (DSN)：起一个名字，如 connArticles。
   • 连接名称：Dreamweaver 会自动生成一个，保持默认即可。
   • 数据源：选择“使用 DSN”。
   • DSN：点击“使用 DSN”旁边的“建立”按钮，在弹出的窗口中，选择“系统 DSN”选项卡，点击“添加”。
   • 在“新建数据源”窗口中：
     • 名称：输入 myAccessDB。
     • 说明：可以写“我的文章数据库”。
     • 数据库：选择“Microsoft Access Driver (.mdb, .accdb)”。
     • 点击“选择...”，找到您之前创建的 C:\AppServ\www\articles.mdb 文件。
     • 点击“确定”。
   • 回到 Dreamweaver 的“数据源名称”窗口，您应该能在下拉列表中看到 myAccessDB，选中它。
   • 点击“测试”，如果成功，会提示“成功连接到测试服务器”。
   • 点击“确定”保存。

您的数据库连接已经建立,在“数据库”面板中，您应该能看到 tb_articles 表及其所有字段。

第五步：数据绑定 - 显示文章列表

我们将把 index.asp 页面变成一个动态列表页。

1. 打开 index.asp 页面，确保光标在模板的可编辑区域 EditRegion1 内。
2. 在“应用程序”面板中，选择“绑定”选项卡。
3. 点击 号，选择“记录集 (查询)”。
4. 在“记录集”对话框中设置：
   • 名称：rsArticles。
   • 连接：选择我们之前创建的 connArticles。
   • 表格：选择 tb_articles。
   • 排序：选择 post_date，并选择“降序”，这样最新的文章会排在最前面。
   • 显示：选择“所有记录”。
5. 点击“测试”，会弹出一个窗口显示查询结果，确认无误后点击“确定”。
6. rsArticles 记录集已经绑定到页面，在页面上显示数据。
   • 在设计视图中,输入“文章列表”作为标题。
   • 将光标放在标题下方,点击“绑定”面板中的 title 字段，然后点击“插入”按钮，或者，直接将字段拖到页面上。
   • Dreamweaver 会插入类似这样的代码：<%=(rsArticles.Fields.Item("title").Value)%>。
   • 为了让每篇文章标题看起来像列表,我们可以在它外面加上 <li>
7. 重复区域：默认情况下，Dreamweaver 只会显示第一条记录，我们需要设置一个“重复区域”来显示所有记录。
   • 在设计视图中,选中您刚刚插入的文章标题（包括 <li> 标签）。
   • 在“应用程序”面板中，选择“服务器行为”选项卡。
   • 点击 号，选择“重复区域”。
   • 在弹出的窗口中,选择记录集 rsArticles。
   • 点击“确定”，您会看到 <li> 标签上多了一个灰色的小标签，表示这是一个重复区域。
8. 添加分页：如果文章很多，可以添加分页功能。
   • 将光标放在重复区域之外,比如列表下方。
   • 在“服务器行为”面板中，点击 号，选择“记录集分页” -> “记录集导航条”。
   • 选择您想显示的导航按钮类型（如“文本”或“图像”），并选择记录集 rsArticles。
   • 点击“确定”。