使用实时视图和 CSS 检查 - Dreamweaver CS5
- Dreamweaver CS5 & CS5.5
借助 Dreamweaver 的实时视图和 CSS 检查功能，聚焦特定内容区域，精确编辑网页。修改样式表并预览效果，无需离开应用程序。
实时视图
要打开实时视图，请点击文档工具栏中的 实时视图 按钮。
实时视图允许您：
- 以大多数现代浏览器的显示方式查看网站
- 测试元素和布局的功能
- 按住控制键点击链接以浏览网站
- 导航栏使您像在浏览器中一样轻松前进、后退或回到主页
- 实时视图选项 按钮允许用户在新标签页中编辑页面
实时视图的工作原理
实时视图基于 Webkit 构建。Webkit 是一种渲染引擎，驱动着大多数移动浏览器以及一些最流行的浏览器，如 Google Chrome 和苹果的 Safari。
Webkit 引擎确保用户获得尽可能准确的预览，并允许创作比以往 Dreamweaver 版本更丰富的基于 HTML5 和 CSS3 的体验。
CSS 检查工具
CSS 检查工具帮助用户管理页面的基于 CSS 的元素，并确定需要修改哪个元素以达到预期效果。
通过点击文档工具栏中 实时视图 旁的 检查 按钮即可激活 CSS 检查工具。
注意： 请确保已开启实时视图，以便更好地使用 CSS 检查工具。
CSS 检查工具的工作原理
激活后，CSS 检查工具会在用户鼠标悬停页面元素时高亮显示各个元素。
元素以三种不同颜色高亮显示：
- 青色 表示元素的总高度和宽度
- 洋红色 表示元素的内边距（padding）
- 黄色 表示元素的外边距（margin）
专业提示： 在页面上导航时使用左箭头键，可以在文档树中导航到父元素。右箭头键则有助于进入文档树的子元素。
找到需要修改的元素并确定问题后，打开代码导航器继续操作。
代码导航器
代码导航器允许您浏览需要修改的元素的代码。点击代码导航器中的元素，将在代码视图中打开该元素的 CSS 代码。
打开代码导航器的方法如下：
- Mac 用户 ：按住 Opt 键并点击需要编辑 CSS 的元素
- Windows 用户 ：按住 Alt 键并点击需要编辑 CSS 的元素
入门教程
- 什么是 Dreamweaver CS5？
- 定义新站点
- 创建新文档
- 为文本添加结构
- 管理资源
- 在页面上放置图片
- 创建链接
- 理解样式表（CSS）
- 通过属性检查器控制 CSS
- 使用实时视图和 CSS 检查
Dreamweaver 是 Adobe 的一款流行网站和应用程序创建软件。它支持 HTML5、CSS3、PHP、FTP、jQuery 等，并兼容 HostGator 网络托管。
您可以访问 Adobe 官网或 Dreamweaver 教程学习门户，了解更多关于 Dreamweaver 的信息。