在 Dreamweaver 生成主页和详细页

  1. Dreamweaver 用户指南
  2. 简介
    1. 响应式网页设计基础知识
    2. Dreamweaver 中的新增功能
    3. 使用 Dreamweaver 进行 Web 开发 - 概述
    4. Dreamweaver/常见问题
    5. 键盘快捷键
    6. Dreamweaver 系统要求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 将 Dreamweaver 设置与 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 文件
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 从库提取 Web 优化的 SVG 文件
  4. Dreamweaver 工作区和视图
    1. Dreamweaver 工作区
    2. 为可视化开发优化 Dreamweaver 工作区
    3. 根据文件名或内容搜索文件 | Mac OS
  5. 设置站点
    1. 关于 Dreamweaver 站点
    2. 设置站点的本地版本
    3. 连接到发布服务器
    4. 设置测试服务器
    5. 导入和导出 Dreamweaver 站点设置
    6. 将现有网站从远程服务器下载到您的本地站点根目录
    7. Dreamweaver 中的辅助功能
    8. 高级设置
    9. 设置用于传输文件的站点偏好设置
    10. 在 Dreamweaver 中指定代理服务器设置
    11. 将 Dreamweaver 设置与 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理文件
    1. 创建和打开文件
    2. 管理文件和文件夹
    3. 从服务器获取文件和将文件上传到服务器
    4. 存回和取出文件
    5. 同步文件
    6. 比较文件的差别
    7. 遮盖 Dreamweaver 站点中的文件和文件夹
    8. 为 Dreamweaver 站点启用设计备注
    9. 防止潜在的 Gatekeeper 漏洞
  7. 布局和设计
    1. 使用可视化助理进行布局
    2. 关于使用 CSS 来设计页面布局
    3. 使用 Bootstrap 设计响应式网站
    4. 在 Dreamweaver 中创建和使用媒体查询
    5. 使用表格显示内容
    6. 颜色
    7. 使用流式网格布局的响应式设计
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解层叠样式表
    2. 使用 CSS Designer 进行页面布局
    3. 在 Dreamweaver 中使用 CSS 预处理器
    4. 如何在 Dreamweaver 中设置 CSS 样式偏好设置
    5. 在 Dreamweaver 中移动 CSS 规则
    6. 在 Dreamweaver 中将内联 CSS 转换为 CSS 规则
    7. 使用 div 标签
    8. 向背景应用渐变效果
    9. 在 Dreamweaver 中创建和编辑 CSS3 过渡效果
    10. 设置代码格式
  9. 页面内容和资源
    1. 设置页面属性
    2. 设置 CSS 标题属性和 CSS 链接属性
    3. 使用文本
    4. 查找和替换文本、标签和属性
    5. DOM 面板
    6. 在实时视图中编辑
    7. 在 Dreamweaver 中对文档编码
    8. 在“文档”窗口中选择和查看元素
    9. 在属性检查器中设置文本属性
    10. 对网页进行拼写检查
    11. 在 Dreamweaver 中使用水平线
    12. 在 Dreamweaver 中添加和修改字体组合
    13. 使用资源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中创建和管理收藏资源
    16. 在 Dreamweaver 中插入和编辑图像
    17. 添加媒体对象
    18. 在 Dreamweaver 中添加视频
    19. 插入 HTML5 视频
    20. 插入 SWF 文件
    21. 添加音频效果
    22. 在 Dreamweaver 中插入 HTML5 音频
    23. 使用库项目
    24. 在 Dreamweaver 中使用阿拉伯语和希伯来语文本
  10. 链接与导航
    1. 关于链接与导航
    2. 链接
    3. 图像地图
    4. 链接疑难解答
  11. jQuery 构件和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和移动构件
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 对网站进行编码
    1. 关于在 Dreamweaver 中编码
    2. Dreamweaver 中的编码环境
    3. 设置编码偏好设置
    4. 自定义代码颜色
    5. 编写和编辑代码
    6. 代码提示和代码完成
    7. 折叠和展开代码
    8. 使用代码片段重用代码
    9. 使用 linting 检查代码
    10. 优化代码
    11. 在设计视图中编辑代码
    12. 使用页面的头内容
    13. 在 Dreamweaver 中插入服务器端包含
    14. 在 Dreamweaver 中使用标签库
    15. 将自定义标签导入 Dreamweaver
    16. 使用 JavaScript 行为(一般说明)
    17. 应用内置 JavaScript 行为
    18. 关于 XML 和 XSLT
    19. 在 Dreamweaver 中执行服务器端 XSL 转换
    20. 在 Dreamweaver 中执行客户端 XSL 转换
    21. 在 Dreamweaver 中为 XSLT 添加字符实体
    22. 设置代码格式
  13. 跨产品工作流
    1. 安装和使用 Dreamweaver 的扩展
    2. Dreamweaver 中的应用程序内更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文档(仅限 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 编辑 Dreamweaver 站点中的内容
    6. Dreamweaver 和 Business Catalyst 集成
    7. 创建个性化的电子邮件营销活动
  14. 模板
    1. 关于 Dreamweaver 模板
    2. 识别模板和基于模板的文档
    3. 创建 Dreamweaver 模板
    4. 在模板中创建可编辑区域
    5. 在 Dreamweaver 中创建重复区域和表格
    6. 在模板中使用可选区域
    7. 在 Dreamweaver 中定义可编辑的标签属性
    8. 如何在 Dreamweaver 中创建嵌套模板
    9. 编辑、更新和删除模板
    10. 在 Dreamweaver 中导出和导入 xml 内容
    11. 在现有文档中应用或删除模板
    12. 在 Dreamweaver 模板中编辑内容
    13. Dreamweaver 中模板标签的语法规则
    14. 设置模板区域的高亮显示偏好设置
    15. 在 Dreamweaver 中使用模板的好处
  15. 移动设备和多屏幕
    1. 创建媒体查询
    2. 更改移动设备的页面方向
    3. 使用 Dreamweaver 创建适用于移动设备的 Web 应用程序
  16. 动态网站、页面和 Web 表单
    1. 了解 Web 应用程序
    2. 设置计算机以进行应用程序开发
    3. 数据库连接疑难解答
    4. 在 Dreamweaver 中删除连接脚本
    5. 设计动态页
    6. 动态内容源概述
    7. 定义动态内容源
    8. 向页面添加动态内容
    9. 在 Dreamweaver 中更改动态内容
    10. 显示数据库记录
    11. 在 Dreamweaver 中提供动态数据和进行疑难解答
    12. 在 Dreamweaver 中添加自定义服务器行为
    13. 使用 Dreamweaver 生成表单
    14. 使用表单从用户处收集信息
    15. 在 Dreamweaver 中创建和启用 ColdFusion 表单
    16. 创建 Web 表单
    17. 增强了对表单元素的 HTML5 支持
    18. 使用 Dreamweaver 开发表单
  17. 以可视化方式生成应用程序
    1. 在 Dreamweaver 中生成主页和详细页
    2. 生成搜索页和结果页
    3. 生成记录插入页
    4. 在 Dreamweaver 中生成更新记录页
    5. 在 Dreamweaver 中生成记录删除页
    6. 在 Dreamweaver 中使用 ASP 命令修改数据库
    7. 生成注册页
    8. 生成登录页
    9. 生成只有授权用户才能访问的页面
    10. 使用 Dreamweaver 保护 Coldfusion 中的文件夹
    11. 在 Dreamweaver 中使用 ColdFusion 组件
  18. 测试、预览和发布网站
    1. 预览页面
    2. 在多个设备上预览 Dreamweaver 网页
    3. 测试 Dreamweaver 站点
  19. 疑难解答
    1. 已修复的问题
    2. 已知问题

 

 

注意:

用户界面已经在 Dreamweaver CC 和更高版本中做了简化。因此,您可能在 Dreamweaver CC 和更高版本中找不到本文中描述的一些选项。有关详细信息,请参阅此文章

关于主页和详细页

主页和详细页是用于组织和显示记录集数据的页面集。这些页面为您的站点的访问者提供了概要视图和详细视图。主页中列出了所有记录并包含指向详细页的链接,而详细页则显示每条记录的附加信息。

主页

详细页

可以通过插入数据对象在一个操作中生成主页和详细页,也可以通过使用服务器行为以更加个性化的方式来生成主页和详细页。使用服务器行为生成主页和详细页时,首先创建列出记录的主页,然后添加从列表到详细页的链接。

生成主页

在开始前,请确保为站点定义了一个数据库连接。

  1. 若要创建空白页,请选择“文件”>“新建”>“空白页”,选择一种页面类型,然后单击“创建”。该页将成为主页。
  2. 定义记录集。

    在“绑定”面板(“窗口”>“绑定”)中,单击加号 (+) 按钮,选择“记录集”,然后选择各个选项。如果要编写自己的 SQL 语句,请单击“高级”。

    确保记录集包含创建主页所需的所有表列。记录集还必须包含含有每条记录的唯一键的表格列,即记录 ID 列。在下面的示例中,CODE 列包含了每条记录的唯一键。

    为主页选择的记录集列

    通常,主页上的记录集提取数据库表中的少数几列,而详细页上的记录集提取同一表格中的更多列以提供额外的详细信息。

    用户可以在运行时定义记录集。有关详细信息,请参阅生成搜索页和结果页

  3. 插入显示记录的动态表格。

    将插入点放置在页面上希望出现动态表格的位置。选择“插入”>“数据对象”>“动态数据”>“动态表格”,设置各个选项,然后单击“确定”。

    如果不打算向用户显示记录 ID,可以从动态表格中删除该列。在页面上任意位置单击,将焦点移至页面。将光标移动到动态表格中该列的顶部附近直到列单元格外框为红色,然后单击选择该列。按 Delete 将该列从表格中删除。

生成主页并添加记录集后,创建用于打开详细页的链接。然后修改链接以便传递用户所选择记录的 ID。详细页将使用此 ID 在数据库中查找请求的记录并显示该记录。

注意:

可使用相同的过程创建指向更新页的链接。结果页与主页类似,更新页与详细页类似。

打开详细页并传递记录 ID(ColdFusion、PHP)

  1. 在动态表格中,选择将用作链接的文本的内容占位符。
    应用于所选占位符的链接。

  2. 在属性检查器中,单击“链接”框旁边的文件夹图标。
  3. 浏览找到并选择该详细页。该详细页随即出现在属性检查器的“链接”框中。

    在动态表格中,所选文本显示为已被链接。当该页面在服务器上运行时,该链接将应用于表格每一行中的文本。

  4. 在主页上,选择动态表格中的链接。
  5. (ColdFusion) 在属性检查器的“链接”框中,将下面的字符串添加到 URL 的末尾:
    ?recordID=#recordsetName.fieldName#

    问号将告知服务器接下来是一个或多个 URL 参数。单词“recordID”是 URL 参数的名称(您可以指定任何所需的名称)。记下该 URL 参数的名称,因为接下来会在详细页中用到它。

    等号后的表达式是该参数的值。在本例中,该值由从记录集返回记录 ID 的 ColdFusion 表达式生成。它将为动态表格中的每一行生成一个不同的 ID。在 ColdFusion 表达式中,用您的记录集的名称替换 recordsetName,用记录集中唯一标识每条记录的字段的名称来替换 fieldName。大多数情况下,该字段将由一个记录 ID 号组成。在下例中,该字段由唯一位置代码组成:

    locationDetail.cfm?recordID=#rsLocations.CODE#

    当该页运行时,记录集的 CODE 字段的值将插入到动态表格相应的行中。例如,如果澳大利亚堪培拉 (Canberra) 的租位代码为 CBR,则动态表格中有堪培拉 (Canberra) 的行将使用如下 URL:

    locationDetail.cfm?recordID=CBR
  6. (PHP) 在属性检查器的“链接”字段中,将下面的字符串添加到 URL 的末尾处:
    ?recordID=<?php echo $row_recordsetName['fieldName']; ?>

    问号将告知服务器接下来是一个或多个 URL 参数。单词 recordID 是 URL 参数的名称(您可以使用任何喜欢的名称)。记下该 URL 参数的名称,因为接下来会在详细页中用到它。

    等号后的表达式是该参数的值。在本例中,该值由从记录集返回记录 ID 的 PHP 表达式生成。它将为动态表格中的每一行生成一个不同的 ID。在 PHP 表达式中,用您的记录集的名称替换 recordsetName,用记录集中唯一标识每条记录的字段的名称来替换 fieldName。大多数情况下,该字段将由一个记录 ID 号组成。在下例中,该字段由唯一位置代码组成:

    locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

    当该页运行时,记录集的 CODE 字段的值将插入到动态表格中相应的行中。例如,如果澳大利亚堪培拉 (Canberra) 的租位代码为 CBR,则动态表格中有堪培拉 (Canberra) 的行将使用如下 URL:

    locationDetail.php?recordID=CBR
  7. 保存该页面。

打开详细页并传递记录 ID (ASP)

  1. 选择兼具链接功能的动态内容。
  2. 在“服务器行为”面板(“窗口”>“服务器行为”)中,单击加号 (+) 按钮,然后从弹出菜单中选择“转到详细页面”。
  3. 在“详细页”框中,单击“浏览”并定位该页。
  4. 从记录集和列弹出菜单中选择记录集和列,以指定要传递到详细页的值。通常,该值对于记录是唯一的,如记录的唯一键 ID。
  5. 如果需要,可选择“URL 参数”或“表单参数”选项将现有的页面参数传递到详细页。
  6. 单击“确定”。

    会出现一个围绕所选文本的特殊链接。当用户单击该链接时,“转到详细页面”服务器行为将一个包含记录 ID 的 URL 参数传递到详细页。例如,如果 URL 参数的名称为 id,详细页的名称为 customerdetail.asp,则当用户单击该链接时,URL 将类似于:

    http://www.mysite.com/customerdetail.asp?id=43

    URL 的第一部分 http://www.mysite.com/customerdetail.asp 用于打开详细页。第二部分 ?id=43 是 URL 参数。它告诉详细页要查找和显示哪个记录。术语 id 是 URL 参数的名称,43 是它的值。在本例中,URL 参数包含记录的 ID 号,即 43。

查找请求的记录并在详细页上显示

要显示主页所请求的记录,必须定义一个用来存放单个记录的记录集并将该记录集的列绑定到详细页。

  1. 切换到详细页。如果您还没有详细页,请创建一个空白页(“文件”>“新建”)。
  2. 在“绑定”面板(“窗口”>“绑定”)中,单击加号 (+) 按钮并从弹出菜单中选择“记录集(查询)”或“数据集(查询)”。

    将出现简单的“记录集”或“数据集”对话框。如果出现的是高级对话框,请单击“简单”。

  3. 命名该记录集,然后选择一个数据源和将向记录集提供数据的数据库表。
  4. 在“列”区域中,选择要包括在记录集中的表列。

    详细页上的记录集可以与主页上的记录集相同,也可以不同。通常,详细页记录集的列数更多,可以显示更多的详细信息。

    如果记录集不同,则请确保详细页上的记录集至少包含一个与主页上的记录集相同的列。这个公共列通常是记录 ID 列,但也可以是相关表格的连结字段。

    若要使记录集中只包括某些表列,请单击“已选定”,然后按住 Ctrl 单击 (Windows) 或按住 Command 单击 (Macintosh) 列表中所需的列。

  5. 如下所示完成“筛选”部分,以便查找和显示主页所传递的 URL 参数中指定的记录:
    • 从筛选区域的第一个弹出菜单中选择记录集中的列,该列包含与主页传递的 URL 参数值相匹配的值。例如,如果 URL 参数包含一个记录 ID 号,则选择包含记录 ID 号的列。在上一节讨论的示例中,记录集列 CODE 包含与通过主页传递的 URL 参数值相匹配的值。

    • 从第一个菜单旁边的弹出菜单中选择等号(它应该已被选定)。

    • 从第三个弹出菜单中选择“URL 参数”。主页使用 URL 参数将信息传递到详细页。

    • 在第四个框中,输入主页传递的 URL 参数的名称。

  6. 单击“确定”。记录集随即出现在“绑定”面板中。
  7. 通过下面的方法将记录集列绑定到详细页:在“绑定”面板(“窗口”>“绑定”)上选择列,然后将其拖到页面上。

    将主页和详细页上传到服务器后,您可以在浏览器中打开主页。单击主页上的详细链接,会打开详细页,其中显示所选记录的更多信息。

查找特定记录并在页面 (ASP) 上显示该记录

可以添加一个可在记录集中查找特定记录的服务器行为,以便在页面上显示此记录数据。仅当使用 ASP 服务器模型时,服务器行为才可用。

  1. 创建一个满足以下前提条件的页面:
  2. 添加服务器行为以查找 URL 参数所指定的记录,方法是:单击“服务器行为”面板(“窗口”>“服务器行为”)上的加号 (+) 按钮并选择“记录集分页”>“移至特定记录”。
  3. 在“移至记录”弹出菜单中,选择为该页定义的记录集。
  4. 在“其中的列”弹出菜单中,选择包含由另一个页传递的值的列。

    例如,如果另一个页传递一个记录 ID 号,则选择包含记录 ID 号的列。

  5. 在“匹配 URL 参数”框中,输入另一个页所传递的 URL 参数的名称。

    例如,如果另一个页用于打开详细页的 URL 是 id=43,则在“匹配 URL 参数”框中输入 id

  6. 单击“确定”。

    浏览器下次请求该页面时,该服务器行为将读取另一个页所传递的 URL 参数中的记录 ID,并移动到记录集中的指定记录。

在一次操作中生成主页和详细页

开发 Web 应用程序时,使用“主详细页集”数据对象可以快速生成主页和详细页。

  1. 若要创建空白动态页,请选择“文件”>“新建”>“空白页”,从“页面类型”列表中选择一个动态页,然后单击“创建”。

    该页将成为主页。

  2. 为该页面定义记录集。

    确保该记录集不仅包含主页所需的所有列,而且包含详细页所需的所有列。通常,主页上的记录集提取数据库表中的少数几列,而详细页上的记录集提取同一表格中的更多列以提供额外的详细信息。

  3. 在“设计”视图中打开主页,然后选择“插入”>“数据对象”>“主详细页集”。
  4. 在“记录集”弹出菜单中,确保已选择了包含要在主页上显示的记录的记录集。
  5. 在“主页字段”区域,选择要在主页上显示的记录集列。

    默认情况下,会选择记录集中的所有列。如果记录集包含唯一键列,如 recordID,则将其选定并单击减号 (-) 按钮使之不在页面上显示。

  6. 若要更改列在主页上的显示顺序,请选择列表中的列并单击向上或向下箭头。

    在主页上,记录集列在表格中水平排列。单击向上箭头可将列向左移动;单击向下箭头可将列向右移动。

  7. 在“以此链接到详细信息”弹出菜单中,选择记录集中的一个列,其中将显示一个值,该值还用作指向详细页的链接。

    例如,如果要使主页上的每个产品名称都有一个指向详细页的链接,请选择包含产品名称的记录集列。

  8. 在“传递唯一键”弹出菜单中,选择记录集中包含标识记录的值的列。

    通常,所选的列就是记录 ID 号。此值被传递到详细页使之能够标识用户所选的记录。

  9. 如果唯一键列不是数字,请取消选择“数字”选项。
    注意:

    默认情况下选择此选项;并非所有型号的服务器都显示该选项。

  10. 指定要在主页上显示的记录数。
  11. 在“详细页名称”框中,单击“浏览”并找到已创建的详细页文件,或输入一个名称让数据对象创建一个详细页文件。
  12. 在“详细页字段”区域,选择要在详细页上显示的列。

    默认情况下,会选择主页的记录集中的所有列。如果该记录集包含唯一键列,如 recordID,则将其选定并单击减号 (-) 按钮使之不在详细页上显示。

  13. 若要更改列在详细页上的出现顺序,请选择列表中的列并单击向上或向下箭头。

    在详细页上,记录集列在表格中垂直排列。单击向上箭头可将列向上移动;单击向下箭头可将列向下移动。

  14. 单击“确定”。

    数据对象创建一个详细页(如果尚未创建),并且同时向主页和详细页中添加动态内容和服务器行为。

  15. 自定义主页和详细页的布局以符合需要。

    可以使用 Dreamweaver 页面设计工具完全自定义每个页面的布局。还可以在“服务器行为”面板中双击服务器行为对其进行编辑。

    使用数据对象创建主页和详细页后,使用“服务器行为”面板(“窗口”>“服务器行为”)来修改由数据对象插入到页面中的各种构造块。

更快、更轻松地获得帮助

新用户?