在网页开发中， 框架是一种将浏览器窗口划分为多个独立区域的技术，每个区域可加载不同的HTML页面。虽然现代Web开发更推荐使用Flexbox或Grid布局，但Dreamweaver中的框架设置仍是处理特定需求的重要技能。本文将详细讲解Dreamweaver中框架属性的设置方法、 实用技巧及“钩子”，帮助新手快速掌握框架布局的核心操作。

一、 框架与框架集：基础概念辨析

在开始设置前，需先明确两个核心概念：框架和框架集。框架集是定义框架结构的HTML文件， 而框架则是框架集中单个显示区域的载体，每个框架对应一个独立的HTML页面。比方说常见的“左右分栏”布局由1个框架集和2个框架组成。

在Dreamweaver中， 创建框架集后实际会生成3个文件：框架集文件、左侧框架文件、右侧框架文件。理解这一文件结构，是后续设置属性的基础。

二、 创建框架集：两种常用方法

1. 通过预设模板快速创建

Dreamweaver内置了多种框架集模板，适合快速搭建基础布局。操作步骤如下：

新建HTML文件， 点击菜单栏「插入」→「HTML」→「框架」，选择预设框架集；

在弹出的“框架标签辅助功能属性”对话框中，可为每个框架设置标题，完成后点击“确定”；

此时页面会显示框架边框，若未显示，可通过菜单栏「查看」→「可视化助理」→「框架边框」开启。

2. 手动绘制自定义框架

当预设模板无法满足需求时 可手动绘制框架：

将光标置于页面中，按住Alt键或Option键的一边，用鼠标拖动页面边框；

重复操作可创建复杂框架结构；

绘制完成后需通过「文件」→「保存全部」保存框架集及所有框架文件。

三、 框架集属性设置：全局布局控制

选中框架集后Dreamweaver底部属性面板会显示框架集属性，

1. 边框

控制框架集是否显示边框，可选值：

- 是显示所有框架边框；

- 否隐藏所有边框；

- 默认由浏览器决定。

技巧若需隐藏边框， 需一边将“边框宽度”设为0，否则部分浏览器仍会显示1px边框。

2. 边框宽度

设置边框像素值， 建议：隐藏边框时设为0；需显示边框时设为1-2px。

3. 边框颜色

设置边框颜色， 点击色块选择颜色，或直接输入十六进制值。若未设置，默认为系统灰色。

4. 行/列

定义框架集的行列分布， 格式为“数值1,数值2,数值3...”，数值支持三种类型：

- 像素值固定高度/宽度；

- 百分比按比例分配；

- 星号自适应剩余空间。

案例创建“上中下”布局， 设置“行”为“80,*,100”，表示顶部导航栏80px，中间内容区自适应，底部页脚100px。

四、 框架属性设置：单区域精细控制

选中单个框架，属性面板会显示框架属性，

1. 源文件

指定框架加载的HTML页面点击文件夹图标选择本地文件，或直接输入URL。若需修改，可点击“浏览”重新选择。

2. 滚动条

控制是否显示滚动条，可选值：

- 是始终显示滚动条；

- 否始终不显示；

- 自动内容超出时显示。

3. 边距

设置框架内容与边框的水平/垂直间距，默认为0。建议根据设计需求调整，如导航框架可设置“边距高度”为10px，增加文字与顶部边距的间距。

4. 调整大小

勾选此项后用户无法通过拖动边框调整框架大小。若需允许用户调整，取消勾选。

与框架集边框颜色不同，此处设置的是单个框架的边框颜色。可实现“不同框架不同边框色”的特殊效果。

6. 框架名称

为框架命名， 命名规则：

- 仅允许字母、数字、下划线；

- 避免使用JavaScript保留字；

- 名称需唯一，便于链接时设置target属性。

钩子框架名称是框架跳转的关键， 比方说点击左侧导航链接时需设置target="main"使页面在名为“main”的框架中打开。

五、实用技巧：提升框架布局效率

1. 快捷键操作

- 创建框架集：Ctrl+Alt+F/ Cmd+Option+F；

- 选中框架集：点击页面边框或按Ctrl+Alt+Space/ Cmd+Option+Space；

- 保存全部框架：Ctrl+Shift+S/ Cmd+Shift+S。

2. 框架跳转：Target属性的妙用

框架布局的核心是页面跳转控制， 通过链接的target属性指定打开目标：

- _self在当前框架打开；

- _blank在新窗口打开；

- _parent在父级框架集打开；

- _top跳出所有框架，在浏览器窗口打开；

- 框架名称在指定框架打开。

案例左侧导航栏链接设置target="main"点击后右侧内容框架会加载目标页面。

3. 响应式框架适配

传统框架本身不支持响应式， 但可通过CSS和JavaScript实现适配：

- CSS方案：为框架内页面添加width:100%; height:100%确保内容撑满框架；

- JavaScript方案：监听窗口大小变化，框架集行列值。

4. SEO优化：Noframes标签的应用

由于搜索引擎对框架的索引能力较弱，需添加标签为不支持框架的浏览器提供替代内容。在Dreamweaver中， 切换到“代码”视图，在框架集代码的标签内添加：

<p>您的浏览器不支持框架，请点击查看无框架版本。</p>

六、常见问题与解决方案

1. 框架边框显示异常？

检查框架集“边框”是否设为“是”， “边框宽度”是否为0；若仍异常，尝试在代码中手动添加framesetborder="1"。

2. 链接跳转错误？

检查链接的target属性是否正确，避免误用_top或_blank；确认框架名称是否与target值一致。

3. 框架内容显示不全？

调整“滚动条”为“自动”， 或修改“边距”减少内容占用空间；若仍无效，检查框架源文件中是否存在固定宽高样式。

七、框架设置的核心要点

Dreamweaver框架属性设置的核心可概括为“三步走”：创建框架集→设置全局属性→配置单框架属性。通过掌握“框架命名+target跳转”的组合技巧，可复杂布局。尽管框架布局在现代开发中逐渐式微，但其“区域隔离、独立控制”的思想仍对理解页面结构有重要价值。建议新手在掌握基础后尝试结合CSS Grid或Flexbox替代框架，实现更灵活的响应式布局。

---