Dreamweaver CC教程:快速编辑代码

Dreamweaver CC教程:快速编辑代码

快速编辑
Dreamweaver 中的“快速编辑”模式可放置上下文特定的内联代码和工具,可让您快速获取所需的代码片段,而不是在编码环境中放置大量面板和图标。
可通过以下方式进入“快速编辑”模式:

右键单击代码片段并从显示的上下文菜单中选择“快速编辑” 按 Ctrl+E(在 Windows 上)或 Cmd+E(在 Mac 上)

使用“快速编辑”模式处理 HTML 文件
在 HTML 文件中,将光标置于类或 ID 属性(名称或值)内或标签名称中。“快速编辑”将向您显示项目中匹配的所有 CSS、SCSS 和 LESS 规则。您可以甚至在不退出 HTML 文件上下文的情况下以内联方式直接编辑这些规则。
使用“快速编辑”模式处理 HTML 文件
使用快速编辑模式处理 HTML 文件

当多个规则匹配时,使用右侧列表(或使用 Alt-向上/向下键)在它们之间进行导航。
若要在内联编辑器中直接创建 CSS 规则,请单击“新建规则”或按 Ctrl-Alt-N(在 Windows 上)或 Cmd-Opt-N(在 Mac 上)。
使用“快速编辑”模式处理 JavaScript 文件
在 JavaScript 文件中,将光标置于函数名称上。“快速编辑”将向您显示函数的主体(即使函数存在于由 require() 语句引用的其他文件中)。
使用“快速编辑”模式处理 JavaScript 文件
使用快速编辑模式处理 JavaScript 文件

使用“快速编辑”模式处理 CSS、SCSS 或 LESS 文件
如果当光标在颜色值中时显示“快速编辑”,则可以访问拾色器并快速修改在 CSS 代码中使用的颜色。
在 CSS 文件中访问拾色器
CSS 文件中访问拾色器

在 CSS、LESS 或 SCSS 文件中,将光标置于 cubic-bezier() 或 steps() 过渡计时函数上,“快速编辑”将显示图形过渡曲线编辑器。
预定义的计时函数 ease、ease-in、ease-out、ease-in-out、step-start 和 step-end 也是有效的起始点。
使用“快速编辑”操作贝赛尔曲线
使用快速编辑操作贝赛尔曲线

 

推荐阅读