28、Dreamweaver CC实用功能全解析

Dreamweaver CC实用功能全解析

1. Live Code的强大功能

Live Code能将相关HTML标记为粉色，帮助你精准定位动态创建页面的代码。例如，在Dreamweaver的Split视图中，左边是HTML代码，右边是Live视图显示的页面。当浏览器加载页面时，JavaScript程序会重写页面的部分HTML代码。如一个 <h1> 标题，原本在Split视图中看不出交互效果，但开启Live Code后，能看到它添加了内联样式 style="cursor: pointer; " ，当鼠标指向标题时，光标会变成手指形状，点击标题，JavaScript会再次重写HTML，标题内容变为“Got clicked”。

Live Code的优势在于能实时重写HTML和CSS，你可以通过内联样式或动态分配类和ID来改变页面上任何元素的颜色、大小、位置和外观。PHP脚本也会重写页面，常使用服务器端包含技术。借助Live Code，你能看到网页浏览器显示页面所遵循的实际指令，这对于排查问题至关重要。

即使你不是JavaScript程序员，如果你使用他人的JavaScript代码或在线找到的程序，如jQuery插件，Live Code也很有用。通过它，你能看到JavaScript生成的HTML以及创建的类和ID名称，进而推断出一些用于格式化页面的CSS，如类样式、ID样式和后代选择器。

此外，按下F6键可以冻结当前运行的JavaScript程序，让下拉菜单在鼠标指向时“固定”，方便你查看JavaScript编程对页面HTML的影响。

2. 利用快速标签编辑器添加标签 </