Dreamweaver-cs5标准实例课件第2章-Dreamweaver-CS5简介.ppt

1、第2章 Dreamweaver CS5简介 lDreamweaver最早是 Macromedia 公司开发的用于网页制作和站点管理的一款“所见即所得”的网页编辑工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能够快速创建界面精美的、基于标准的网站和应用程序，其直观性与高效性是很多网页编辑工具无法比拟的，与Flash、Fireworks 并称为网页制作梦幻组合。l最新推出的Dreamweaver CS5趋向于易用快捷，开发环境精简而高效，由于与Adobe CS Live 在线服务Adobe Browser Lab 集成，开发人员能以可视方式或直

2、接在代码中进行设计，使用内容管理系统开发页面并实现精确的浏览器兼容性测试。学习要点l初次启动Dreamweaver CS5lDreamweaver CS5的窗口组成l文件操作2.1 初次启动Dreamweaver CS5 l双击桌面上的Adobe Dreamweaver CS5图标l执行“开始”/“程序”/“Adobe Dreamweaver CS5”命令，即可启动Dreamweaver CS5简体中文版。 第一次启动Dreamweaver CS5时，会弹出如图2-1所示的“默认编辑器”对话框，用户可以根据个人喜好将Dreamweaver CS5设置为指定文件类型的默认编辑器。2.1 Drea

3、mweaver CS5的窗口组成 该界面用于打开最近使用过的文档或创建新文档，还可以从中通过产品介绍或教程了解关于 Dreamweaver 的更多信息。如果不希望每次启动时都打开这个界面，可以在“首选参数”对话框中修改设置。2.2.3 “插入”面板单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面板。 “插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数据、Spry、InContext Editing、文本和收藏夹。“插入”面板的初始视图为“常用”面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉列表中选择需要的面板，从而在不同的

4、面板之间进行切换。如图所示。 2.2.4 工作区 2.2.5 状态栏 Dreamweaver CS5的状态栏位于文档窗口底部，嵌有三个重要的工具：标签选择器、窗口大小弹出菜单和下载指示器，分别用于显示和控制文档源代码、显示页面大小、查看传输时间等。如图所示。2.2.6 属性面板 在Dreamweaver CS5中，选中某一个对象之后，“属性”面板将显示被选中对象的属性。用户还可以在属性面板中修改被选对象的各项属性值。如上图所示。2.2.7 浮动面板 在Dreamweaver CS5工作环境的右侧存在着许多浮动面板。启动Dreamweaver CS5后，有些浮动面板已经打开，更多的则没有显示。这

5、些面板可以自由地在界面上拖动，也可以将多个面板组合在一起，成为一个选项卡组，在默认的情况下，Dreamweaver CS5中的浮动面板都是成组排列于工作环境的右侧，并且自动排齐。2.2.8 标尺、网格与辅助线 使用标尺、网格和辅助线可以很方便地布局对象，并能了解编辑对象的位置。1标尺 选择“查看”/“标尺”/“显示”命令即可显示标尺。在文档编辑窗口拖动鼠标时，在标尺上能查看到当前鼠标位置的坐标。再次选择“查看”/“标尺”命令可以隐藏标尺。在“查看”/“标尺”命令的子命令中，还可以根据设计需要设置标尺的原点位置和单位。2网格 网格是文档窗口中纵横交错的直线，通过网格可以精确定位图像对象。 选择“

6、查看”/“网格”/“显示网格”命令，即可在文档编辑窗口中显示网格。 选择“查看”/“网格”/“靠齐到网格”命令，在文档中创建或移动对象时，就会自动对齐距离最近的网格线。 选择“查看”/“网格”/“网格设置”命令，在弹出的“网格设置”对话框中可以设置网格的参数，如颜色、间隔和线型。3辅助线 使用辅助线可以更精确地排列图像，标记图像中的重要区域。将鼠标移到标尺上，按住鼠标左键并拖动到文档中合适的位置释放，即可添加辅助线。2.3 文件操作 Dreamweaver的文件操作可以看作是制作网页的基本操作，它包括新建文件、打开文件、导入文件、保存和关闭文件、设置文档属性等。 2.3.1 新建、打开文档执行

7、“文件”/“新建”命令，在弹出的 “新建文档”对话框中，选择想要创建文件的类型和布局，然后单击“创建”按钮，即可创建新文件。 打开网页文件可以分为直接打开网页文件和在框架中打开网页文件两种。 （1）直接打开文件 选择“文件”/“打开”命令，弹出“打开”对话框。用户也可在对话框中双击所需文件来打开。如果Dreamweaver CS5还没有启动，可以右击要打开的文件，在弹出的菜单中执行“使用Dreamweaver CS5编辑”命令来打开文件。 （2）在框架中打开文件 如果已打开框架集文件，要在框架集中某一个框架打开文件，可以先把光标定位在需要打开文件的框架内，选择“文件”/“在框架中打开”命令，则

8、会打开“选择HTML文件”对话框。在此方式下，只能打开以html为扩展名的文件。 2.3.2 导入、保存、关闭文档l执行“文件”/“导入”命令下的子命令，然后找到需要导入的文件，单击“打开”命令，即可导入相应的文件。l如果同时打开了多个网页文件，则执行“文件”/“保存”或“文件”/“另存为”命令只保存当前编辑的页面。l若要保存打开的所有页面，则须执行“文件”/“保存全部”命令。l若是第一次保存该文件，则执行“文件”/“保存”命令会弹出“另存为”对话框。若文件已保存过，则执行“文件”/“保存”命令时，直接保存文件。l如果希望将一个网页文档以模板的形式保存，切换到要保存的文档所在的窗口，执行“文件”/“另存为模板”命令，则会打开“另存模板”对话框。在该对话框的“站点”下拉列表框中选择一个保存该模板文件的站点，然后在“另存为”后面的文本框中输入文件的名称，最后单击“保存”按钮完成文件的保存。 提示：第一次保存模板文件时，Dreamweaver CS5将自动为站点创建Templates文件夹，并把模板文件存放在Templates文件夹中。请不要把非模板文件存放到此文件夹中。2.3.4 设置文档属性页面标题、背景图像和颜色、文本和链接颜色以及边距是每个Web文档的基本属性。