Dreamweaver框架教程如何快速上手？-建站教程-锦华智联科技

Dreamweaver 框架教程：从入门到精通

第一部分：理解框架

在开始操作之前，最重要的一步是理解框架到底是什么,以及它的优缺点。

（图片来源网络，侵删）

什么是框架？

网页框架是一种将浏览器窗口划分为多个独立区域（这些区域被称为 框架 Frame）的技术，每个框架都是一个独立的 HTML 文档，但它们被一个叫做 框架集 的主 HTML 文档组合在一起。

你可以把框架集想象成一个画框,而每个框架就是画框里的一幅独立的画。

框架的优缺点

优点（过去）：

重用导航栏： 网站的导航栏可以放在一个框架中，当用户点击链接时，只有内容框架会刷新，而导航栏保持不变，这大大提升了用户体验（在当时）。
保持页面状态： 用户在浏览内容时,导航菜单的位置不会丢失。

缺点（：

（图片来源网络，侵删）

SEO（搜索引擎优化）友好度差： 搜索引擎很难抓取和索引框架页面内容，因为它们将每个框架视为一个独立的页面,难以理解页面之间的整体结构。
URL 问题： 用户很难收藏或分享页面中的某个具体内容，因为浏览器地址栏显示的是框架集的 URL，而不是当前内容的 URL。
移动设备兼容性差： 在小屏幕的移动设备上，框架布局很容易被破坏,导致用户体验极差。
打印困难： 打印时可能会只打印到当前激活的框架,而不是整个页面。
现代技术的替代方案： 现在我们可以使用 服务器端包含、PHP/ASP/JSP 等后端技术，或者更简单、更灵活的 CSS 和 JavaScript（如动态加载内容）来实现类似的效果,而且效果更好。

重要提示： 由于上述缺点，在现代网页开发中，框架技术已经非常罕见了，甚至被认为是过时的实践。 本教程主要是为了帮助你理解旧网站的工作方式，或者在特定维护需求下使用，对于新项目，强烈建议不使用框架。

第二部分：在 Dreamweaver 中创建框架

使用预设布局创建框架

Dreamweaver 提供了几种预设的框架布局,这是最简单的创建方式。

新建文件： 打开 Dreamweaver，选择 文件 > 新建。
选择类型： 在弹出的窗口中，选择 示例中的页 > 框架集。
（图片来源网络，侵删）
选择布局： 你会看到多种预设布局，
- 上方固定，左侧嵌套： 最常见的布局，顶部是导航，左侧是子菜单,右侧是主内容。
- 左侧固定，上方嵌套： 左侧是主导航，顶部是二级导航,右侧是内容。
- 上方和左侧固定： 顶部和左侧都是固定的导航栏。
- 下方固定： 底部是版权或信息栏。
选择你需要的布局，然后点击 创建。

Dreamweaver 会自动生成框架集 HTML 文件和各个框架的初始 HTML 文件。

手动创建框架

如果你需要更精确的控制,可以手动创建。

创建一个空白 HTML 文件： 文件 > 新建，选择 HTML,然后创建。
插入框架：
- 将光标放在文档中你想要分割的位置。
- 在菜单栏中选择 修改 > 框架集，然后选择分割方向：
  - 拆分左框架
  - 拆分右框架
  - 拆分上框架
  - 拆分下框架
- 你也可以使用 插入 > HTML > 框架 子菜单。

每执行一次操作,就会在当前光标位置创建一个新的框架。

第三部分：编辑和管理框架

创建框架后,你经常需要在不同的框架之间进行操作。

选择框架和框架集

这是最关键的一步,选错了对象就无法进行正确的编辑。

选择框架：
- 方法一（可视化）： 按住 Alt 键（Windows）或 Option 键（Mac）,然后在框架内的任意位置单击。
- 方法二（属性检查器）： 在 窗口 > 属性 打开属性检查器后，点击框架内的任意位置，属性检查器左上角会出现一个下拉菜单,你可以在这里精确选择某个框架。
选择框架集：
- 方法一（可视化）： 在框架与框架之间的边框线上单击。
- 方法二（标签选择器）： 在文档窗口底部，点击 <frameset>


设置框架属性
选择框架后,在属性检查器中你可以设置其属性：

框架名称： 非常重要！ 这是给框架起的名字，以便在其他框架的链接中能够指定目标，命名规则通常是简单的英文，如 mainFrame, leftFrame, topFrame。
源文件： 指定该框架中显示的 HTML 文件，你可以点击文件夹图标浏览并选择一个已有的 HTML 文件,或者直接输入文件路径。
滚动： 设置当内容超出框架大小时是否显示滚动条，选项有 是（总是显示）、否（从不显示）、自动（默认，内容超出时显示）和 默认（由浏览器决定）。
边框： 设置框架是否显示边框，通常设为 否 以获得更现代的视觉效果。
调整行/列： 在属性检查器中，你可以直接输入数值来精确设置框架的高度或宽度,你也可以拖动框架之间的边框来手动调整大小。

设置框架集属性
选择框架集后,在属性检查器中你可以设置整个框架集的属性：

边框： 控制整个框架集是否显示边框，设为 否 可以隐藏所有边框。
边框宽度： 当边框设置为 是 时，可以设置边框的粗细（以像素为单位）。
边框颜色： 设置边框的颜色。
行/列： 在这里你可以精确控制所有框架的行高或列宽，你可以选择 值（像素）、百分比（相对于浏览器窗口）或 单位（相对比例）。


第四部分：框架的核心应用——链接
框架最强大的功能就是链接目标，当你点击一个框架中的链接时,可以让打开的页面显示在另一个框架中。
关键属性：target
target 属性就是实现这一功能的关键,它告诉浏览器在哪个窗口或框架中打开链接的文档。
预定义的目标值
Dreamweaver 和 HTML 提供了一些预定义的目标值,非常方便：

_blank：在新浏览器窗口中打开链接。
_parent：在父框架集中打开链接，如果当前框架没有嵌套，则等同于 _self。
_self：默认值,在当前框架中打开链接。
_top：在整个浏览器窗口中打开链接,从而清除所有框架。

使用自定义框架名称
这是框架链接最核心的用法。
假设你的布局是：

左侧框架： leftFrame (包含导航链接)
右侧框架： mainFrame (用于显示内容)

操作步骤：

设置左侧框架的名称： 选中左侧框架，在属性检查器中将其 框架名称 设置为 leftFrame。
设置右侧框架的名称： 选中右侧框架，将其 框架名称 设置为 mainFrame。
创建链接：
在左侧框架中，选中一个链接（指向 about.html 的文字）。
打开属性检查器，在 链接 框中输入 about.html。
在 目标 下拉菜单中，选择 mainFrame。



当用户点击左侧的链接时，about.html 页面就会在右侧的 mainFrame 框架中打开,而左侧的导航栏保持不变。

第五部分：保存框架
这是初学者最容易出错的地方，一个框架集包含多个文件,因此需要分别保存。


保存框架集：

点击 文件 > 保存框架集，或者，如果文件尚未保存过，Dreamweaver 会提示你。
这时会弹出一个保存对话框，文件名通常是 index.html 或 frameset.html,这个文件定义了页面的整体结构。



保存单个框架：

将光标放入要保存的框架中（右侧的内容框架）。
点击 文件 > 保存框架。
这时会弹出另一个保存对话框，为这个框架内的内容文件命名（main.html）。
你需要为每个框架都执行一次 保存框架 的操作。



提示： 你也可以使用 文件 > 保存全部 命令，Dreamweaver 会依次提示你保存框架集和所有未保存的框架文件。

第六部分：常见问题与解决方案


问题： 为什么我设置的边框颜色不显示？

解决： 确保在框架集属性检查器中，边框 选项没有被设置为 否，如果边框被禁用,颜色自然无效。



问题： 链接没有在指定的框架中打开,而是新开了一个窗口。

解决： 检查两点：1. 目标框架的 框架名称 是否拼写正确且没有空格，2. 链接的 target 属性是否正确选择了该框架名称。



问题： 页面在浏览器中显示错乱。

解决： 检查框架集的行/列设置是否合理，使用 像素 作为单位时，要确保总宽度/高度不超过浏览器窗口大小，使用 百分比 通常更灵活。




第七部分：总结与最佳实践

框架是过时的技术： 再次强调，除非你需要维护一个非常古老的网站,否则在新项目中应避免使用框架。
现代替代方案：
PHP/SSI/JSP/ASP Includes： 将导航栏、页脚等公共部分做成独立的 HTML 文件，然后在服务器端动态包含到每个页面中，这是最常用、最专业的做法。
CSS + JavaScript (AJAX)： 使用 CSS 布局页面，使用 JavaScript（如 jQuery 或 Fetch API）动态加载内容到页面的特定区域，实现无刷新效果，这种方法非常灵活,用户体验也很好。



希望这份详细的教程能帮助你全面了解 Dreamweaver 中的框架技术！