Dreamweaver cs5标准实例教程 第2章 Dreamweaver CS5简介

第2章DreamweaverCS5简介

Dreamweaver最早是

Macromedia公司开发的用于网页制作和站点管理的一款“所见即所得”的网页编辑工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能够快速创建界面精美的、基于标准的网站和应用程序，其直观性与高效性是很多网页编辑工具无法比拟的，与Flash、Fireworks并称为网页制作梦幻组合。最新推出的DreamweaverCS5趋向于易用快捷，开发环境精简而高效，由于与AdobeCSLive在线服务AdobeBrowserLab集成，开发人员能以可视方式或直接在代码中进行设计，使用内容管理系统开发页面并实现精确的浏览器兼容性测试。学习要点初次启动DreamweaverCS5DreamweaverCS5的窗口组成文件操作2.1初次启动DreamweaverCS5

双击桌面上的AdobeDreamweaverCS5图标执行“开始”/“程序”/“AdobeDreamweaverCS5”命令，即可启动DreamweaverCS5简体中文版。第一次启动DreamweaverCS5时，会弹出如图2-1所示的“默认编辑器”对话框，用户可以根据个人喜好将DreamweaverCS5设置为指定文件类型的默认编辑器。2.1DreamweaverCS5的窗口组成

该界面用于打开最近使用过的文档或创建新文档，还可以从中通过产品介绍或教程了解关于Dreamweaver的更多信息。如果不希望每次启动时都打开这个界面，可以在“首选参数”对话框中修改设置。单击欢迎界面上“新建”栏目下的文档类型，或执行“文件”/“新建”命令，在打开的“新建文档”对话框中选择“空白页”类别的HTML基本项，然后选择布局栏的“无”，单击“创建”按钮进入DreamweaverCS5中文版的工作界面，如图所示。2.2.1菜单栏2.2.2文档工具栏：切换到代码视图，显示当前文档的代码。：切换到设计视图，显示的内容与浏览器中显示的内容相同。：在同一屏幕中显示代码和设计视图。：在“设计”视图或“折分”视图下，单击该按钮可以在不打开一个新的浏览器窗口的情况下实时预览页面的效果。再次单击该按钮，即可返回到可编辑的“设计”视图或“折分”视图。：在“实时视图”中单击该按钮，Dreamweaver将以黄色突出显示浏览器为呈现该页面而执行的代码版本，此代码是不可编辑的。再次单击该按钮，即可返回到可编辑的“代码”视图。2.2.3“插入”面板单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面板。“插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数据、Spry、InContextEditing、文本和收藏夹。“插入”面板的初始视图为“常用”面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。

2.2.4工作区

2.2.5状态栏

DreamweaverCS5的状态栏位于文档窗口底部，嵌有三个重要的工具：标签选择器、窗口大小弹出菜单和下载指示器，分别用于显示和控制文档源代码、显示页面大小、查看传输时间等。如图所示。2.2.6属性面板

在DreamweaverCS5中，选中某一个对象之后，“属性”面板将显示被选中对象的属性。用户还可以在属性面板中修改被选对象的各项属性值。如上图所示。2.2.7浮动面板

在DreamweaverCS5工作环境的右侧存在着许多浮动面板。启动DreamweaverCS5后，有些浮动面板已经打开，更多的则没有显示。这些面板可以自由地在界面上拖动，也可以将多个面板组合在一起，成为一个选项卡组，在默认的情况下，DreamweaverCS5中的浮动面板都是成组排列于工作环境的右侧，并且自动排齐。2.2.8标尺、网格与辅助线

使用标尺、网格和辅助线可以很方便地布局对象，并能了解编辑对象的位置。1．标尺选择“查看”/“标尺”/“显示”命令即可显示标尺。在文档编辑窗口拖动鼠标时，在标尺上能查看到当前鼠标位置的坐标。再次选择“查看”/“标尺”命令可以隐藏标尺。在“查看”/“标尺”命令的子命令中，还可以根据设计需要设置标尺的原点位置和单位。2．网格网格是文档窗口中纵横交错的直线，通过网格可以精确定位图像对象。选择“查看”/“网格”/“显示网格”命令，即可在文档编辑窗口中显示网格。选择“查看”/“网格”/“靠齐到网格”命令，在文档中创建或移动对象时，就会自动对齐距离最近的网格线。选择“查看”/“网格”/“网格设置”命令，在弹出的“网格设置”对话框中可以设置网格的参数，如颜色、间隔和线型。3．辅助线使用辅助线可以更精确地排列图像，标记图像中的重要区域。将鼠标移到标尺上，按住鼠标左键并拖动到文档中合适的位置释放，即可添加辅助线。2.3文件操作

Dreamweaver的文件操作可以看作是制作网页的基本操作，它包括新建文件、打开文件、导入文件、保存和关闭文件、设置文档属性等。

2.3.1新建、打开文档执行“文件”/“新建”命令，在弹出的“新建文档”对话框中，选择想要创建文件的类型和布局，然后单击“创建”按钮，即可创建新文件。打开网页文件可以分为直接打开网页文件和在框架中打开网页文件两种。（1）直接打开文件选择“文件”/“打开”命令，弹出“打开”对话框。用户也可在对话框中双击所需文件来打开。如果DreamweaverCS5还没有启动，可以右击要打开的文件，在弹出的菜单中执行“使用DreamweaverCS5编辑”命令来打开文件。（2）在框架中打开文件如果已打开框架集文件，要在框架集中某一个框架打开文件，可以先把光标定位在需要打开文件的框架内，选择“文件”/“在框架中打开”命令，则会打开“选择HTML文件”对话框。在此方式下，只能打开以html为扩展名的文件。2.3.2导入、保存、关闭文档执行“文件”/“导入”命令下的子命令，然后找到需要导入的文件，单击“打开”命令，即可导入相应的文件。如果同时打开了多个网页文件，则执行“文件”/“保存”或“文件”/“另存为”命令只保存当前编辑的页面。若要保存打开的所有页面，则须执行“文件”/“保存全部”命令。若是第一次保存该文件，则执行“文件”/“保存”命令会弹出“另存为”对话框。若文件已保存过，则执行“文件”/“保存”命令时，直接保存文件。如果希望将一个网页文档以模板的形式保存，切换到要保存的文档所在的窗口，执行“文件”/“另存为模板”命令，则会打开“另存模板”对话框。在该对话框的“站点”下拉列表框中选择一个保存该模板文件的站点，然后在“另存为”后面的文本框中输入文件的名称，最后单击“保存”按钮完成文