下载掌阅APP，畅读海量书库
立即打开
在网站制作过程中，当网页效果图设计完毕并且得到客户的认可后，就可以根据网页的效果图来生成网站页面了，这时就需要使用Dreamweaver CS5来完成这项工作。虽然现在有很多软件都可以制作网站页面，但是Dreamweaver CS5是目前为止功能最强大、操作界面最人性化的一个网页排版软件。并且Dreamweaver CS5和Fireworks CS5、Flash CS5之间结合得非常紧密，可以更好地协同完成工作。利用Dreamweaver CS5中的可视化编辑功能，用户可以快速创建网站页面而无须编写任何代码，同时可以查看所有站点元素或资源并将它们从浮动面板直接拖到文档中。
Dreamweaver CS5是一个网页排版工具，在排版过程中所使用的素材都是在Fireworks或者Photoshop中根据事先制作好的效果图切片而来的。也就是说，Dreamweaver CS5主要负责内容的组织工作，但是并不参与页面效果的设计。同时，网页中的一些特效可以通过使用Dreamweaver CS5在网页中添加JavaScript脚本来实现，如图1-1所示。
图1-1 Dreamweaver CS5的启动界面
Drea mweaver CS5和以往版本的软件比较起来，在界面上并没有明显的变化，熟悉Dreamweaver CS5的用户可以轻松上手，但是Dreamweaver CS5针对目前较为流行的Web标准和样式表CSS的应用进行了相应的改进，使其始终处于网页排版软件中的领先地位。
1．Adobe BrowserLab
Adobe BrowserLab是Adobe 推出的一款基于Flash技术的在线跨浏览器页面预览工具。通过Adobe BrowserLab我们可以生成网站或者博客在不同浏览器下的网页快照，从而很方便地测试网站的兼容性，如图1-2所示。
图1-2 Adobe BrowserLab主界面
BrowserLab支持Windows XP和MAC OS X上的绝大多数主流浏览器，目前支持Windows平台的IE 6/7/8、Firefox 2.0/3.0/3.6、Chrome 3.0；Mac平台上的Firefox 2.0/3.0/3.6以及Safari 3.0/4.0，如图1-3所示。
图1-3 Adobe BrowserLab主界面
如果需要使用Adobe BrowserLab，应该首先登录Adobe BrowserLab的网站进行注册，网址为https://browserlab.adobe.com，如图1-4所示。
可以单击页面右上角的“Sign In”链接进行登录，如果之前在Adobe的官方网站注册过Adobe ID，可以直接登录，而没有注册的用户则需要在Adobe的网站上注册了Adobe ID以后才能够进行登录，如图1-5所示。
图1-4 Adobe BrowserLab网站首页
图1-5 Adobe BrowserLab登录界面
确定登录Adobe BrowserLab之后，就可以在Dreamweaver CS5中打开需要进行兼容性测试的网页，如图1-6所示。
图1-6 在Dreamweaver CS5中打开页面
选择“文件”→“在浏览器中预览”→“Adobe BrowserLab”菜单命令（快捷键为“Ctrl+Shift+F12”组合键），这时Dreamweaver CS5会打开“Adobe BrowserLab”面板，在这个面板中会显示需要测试文档的上传进度，如图1-7所示。
图1-7 使用Adobe BrowserLab预览页面
当全部文档上传完毕后，就可以在Adobe BrowserLab网站中预览生成的页面效果了，如图1-8所示。
图1-8 在Adobe BrowserLab网站中预览页面
Adobe BrowserLab提供了水平两栏对比和洋葱皮（onion skin）对比，可以将不同网页渲染模式下的结果重叠在一起，以便查看网页在不同浏览器下的区别，如图1-9所示。
图1-9 多窗口预览
如果需要测试不同浏览器中的预览效果，可以在Adobe BrowserLab网站页面左上角的位置来选择相应的浏览器，如图1-10所示。
图1-10 选择不同的测试浏览器
如果需要对服务器中的网页进行测试，可以直接在页面顶端的地址栏中输入需要进行测试的页面地址，如图1-11所示。
图1-11 对服务器中的页面进行测试
Adobe BrowserLab的出现对于广大Web前端工程师来说确实是一个非常有利的工具，但是由于Adobe BrowserLab是一种在线服务，对于带宽有限的用户来说浏览速度有待提高，并且最终生成的预览只是一张静态的图像，页面中所有的交互功能都不能进行验证，只能用来检测页面元素的位置和状态，希望Adobe能够在下个版本中进行相应的改进。
2．CSS的禁用/启用
在使用Dreamweaver进行Web标准化布局的过程中，如果我们需要对某些代码部分进行检测，或者需要修改某些代码，但是又不希望删除原有的代码片段，这个时候就能够让Dreamweaver CS5的启用/禁用样式表功能派上用场，打开Dreamweaver CS5的样式表面板，如图1-12所示。
可以在样式表面板中选择相应的选择器，并且找到需要禁用的样式表属性行，将鼠标指针移动到样式表属性行最右侧的空白部分，这时会出现禁用提示信息，如图1-13所示。
图1-12 样式表面板
图1-13 禁用样式提示
单击鼠标左键，这样所选定的样式表属性就会被禁用，如图1-14所示。
图1-14 禁用样式表属性
如果在浏览器中预览网页，所看到的效果也是禁用了相应属性后的效果。其原理是把所需要禁用的代码转换为注释，如图1-15所示。
图1-15 代码转换为注释
当然，如果需要启用该样式，只需单击禁用的图标即可。
3．CSS检查功能
Dreamweaver CS5的检查模式以可视化方式详细显示CSS框模型属性，包括填充、边框和边距，无须读取代码，也不需要独立的第三方实用程序（如Firebug）。检查模式与实时视图一起使用有助于快速识别(X)HTML元素及其关联的CSS样式。打开检查模式后，将鼠标指针悬停在页面元素上方即可查看任何块级元素的CSS盒模型属性。检查模式对边框、边距、填充和内容高亮显示不同颜色。
在Dreamweaver CS5的“文档”窗口中打开文档后，单击“检查”按钮（在“文档”工具栏中的“实时视图”按钮旁），如图1-16所示。
图1-16 启用CSS检查功能
除了在检查模式下能见到盒模型的可视化表示形式外，将鼠标指针悬停在“文档”窗口中的元素上方也可以打开“CSS样式”面板。当鼠标指针悬停在页面元素上方时，“CSS样式”面板中的规则和属性将自动更新，以显示该元素的规则和属性，如图1-17所示。
图1-17 启用CSS检查功能
此外，将鼠标指针悬停在页面元素关联的任何视图或面板中，如代码视图、标签选择器、属性检查器等时也会立即更新相关信息。
提示
按键盘上的左箭头键，可以高亮显示当前元素的父级；按右箭头键，可以对子元素进行高亮显示。
4．实时视图导航
实时视图与传统Dreamweaver设计视图的不同之处在于它提供页面在某一浏览器中非可编辑的、更逼真的呈现外观。实时视图不替换“在浏览器中预览”命令，而是在不离开Dreamweaver工作区的情况下提供另一种“实时”查看页面外观的方式。
在Dreamweaver CS5中打开网页文件，单击Dreamweaver软件窗口上方的“实时视图”按钮，即可以“实时视图”的方式来浏览页面，如图1-18所示。
图1-18 以“实时视图”方式浏览页面
提示
实时视图在“设计视图”或“代码和设计视图”状态中才有效。
进入实时视图后设计视图保持冻结，代码视图保持可编辑状态，因此可以更改代码，然后刷新实时视图以查看所进行的更改是否生效。处于实时视图时，可以使用其他用于查看实时代码的选项。实时代码视图类似于实时视图，前者显示浏览器为呈现页面而执行的代码版本。与实时视图类似，实时代码视图是非可编辑视图。
实时视图的另一优势是能够冻结JavaScript。用户可以切换到实时视图并悬停在由于用户交互而更改颜色的基于Spry的表格行上。冻结JavaScript时，实时视图会将页面冻结在其当前状态，然后用户可以编辑CSS或JavaScript并刷新页面以查看更改是否生效。如果要查看并更改无法在传统设计视图中看到的弹出菜单或其他交互元素的不同状态，则在实时视图中冻结JavaScript很有用。
可以选择“查看”→“实时视图选项”→“冻结JavaScri pt”菜单命令（快捷键为“F6”）来冻结页面中的JavaScript特效，如图1-19所示。
图1-19 冻结JavaScript功能
5．其他新功能
“动态相关文件”功能允许用户搜索所有必要的外部文件和脚本，以组合基于PHP的内容管理系统（CMS）页面，以及在“相关文件”工具栏中显示其文件名。在默认情况下，Dreamweaver 支持Wordpress、Drupal和Joomla! CMS框架的文件。
PHP自定义类代码提示显示PHP函数、对象和常量的正确语法，有助于键入更准确的代码。代码提示还使用自定义函数和类，以及第三方框架（如Zend框架）。
重新设计的“站点定义”对话框（即现在的“站点设置”对话框）使设置本地Dreamweaver站点更简单，以便用户可以立即开始构建Web页。“远程服务器”类别允许在一个视图中指定远程服务器和测试服务器。
“站点特定的代码提示”功能允许在使用第三方PHP库和CMS框架（如Word Press、Drupal、Joomla!或其他框架）时自定义编码环境。可以将博客的主题文件以及其他自定义PHP文件和目录，包含或排除作为代码提示的源。
Dreamweaver CS5扩展了对Subversion的支持，使用户可以在本地移动、复制和删除文件，然后将更改与远程SVN存储库同步。新的还原命令允许快速更正树冲突或回退到以前版本的文件。此外，新扩展允许用户指定要在给定项目中使用的Su bversion版本。
安装好Dreamweaver CS5以后，可以单击桌面上的快捷方式
或者选择“开始”→“程序”→“Adobe”→“Adobe Dreamweaver CS5”菜单项启动Dreamweaver CS5程序，打开Dreamweaver CS5的程序界面，如图1-20所示。
图1-20 Dreamweaver CS5的程序界面
Dreamweaver CS5的启动界面上有三个选项：打开最近项目、创建新项目和从范例创建。因为是第一次使用Dreamweaver CS5软件，所以可以选择“新建”→“HTML”，这样就新建了一个网页文件，并且进入了Dreamweaver CS5的操作界面，如图1-21所示。
图1-21 Dreamweaver CS5的操作界面
可以根据自己的习惯来选择设计器还是编码器，如果需要重新设置工作区，可以选择“窗口”→“工作区布局”菜单命令来进行调整。
Dreamweaver应用程序的外观同其异常灵活的功能特性是分不开的，对于不同级别和经验的用户，都能够通过这种应用程序的外观显著提高工作效率。
Dreamweaver CS5应用程序的操作环境包括以下几部分。
标题栏：
显示当前所编辑的文档名称。
菜单栏：
所有的工作将通过菜单栏来完成，虽然利用浮动面板可以减少操作时间，但有时候为了有更大的屏幕空间，会将浮动面板关闭，这样的话利用菜单就显得很重要了。
文档窗口：
文档窗口显示当前所创建和编辑的(X)HTML文档内容。
插入面板：
在插入面板上包含了多种不同类型的按钮，用于在文档中创建不同类型的对象，如表格、图像、层、表单等。
属性面板：
在属性面板中显示文档窗口中选中对象（如表格、文字、图像等）的属性，并且可以对这些被选中对象的属性进行修改。
文件面板：
可以管理站点内的所有文件，包括站点上传、远程维护等功能。