第7章 网页设计与制作剖析.ppt

第 7 章 Dreamweaver 的基本应用 本章知识技能要点： Dreamweaver中各个控制面板的作用 站点的创建与管理 页面的各个属性及其设置方法 网页中文本的格式化方法 CSS样式的概念 设置CSS样式，并用其统一网站的风格 在Dreamweaver中创建超级链接的方法 制作网页中的导航栏 7.1 初识Dreamweaver 7.1.1 Dreamweaver简介 Dreamweaver是Macromedia公司推出的一套专业的Web站点开发程序。是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。Dreamweaver拥有诸多优点，不论是手工编写 HTML 代码还是在可视化编辑环境中工作， Dreamweaver 都提供了非常有用的工具，使使用者拥有更加完美的 Web 创作体验。例如，它是第一个利用最新一代浏览器性能的Web开发程序，并且非常便于开发者利用诸如层叠样式单(Cascading Style Sheets)和动态HTML等先进特性。 7.1 初识Dreamweaver Dreamweaver 8 包括许多新增功能，使用者只需花费最少的时间和精力便可生成 Web 站点和应用程序。下面是 Dreamweaver 8 中的一些主要新增功能： “缩放”工具和辅助线 可视化 XML 数据绑定 新的 CSS 样式面板 CSS 布局的可视化 代码折叠 “编码”工具栏 后台文件传输 “插入 Flash 视频”命令 7.1 初识Dreamweaver 7.1.2 Dreamweaver 8 的工作环境 启动Dreamweaver 8之后，进入下图所示画面。在此画面上，可以选择各种进入Dreamweaver 8的方式。 7.1 初识Dreamweaver 7.1 初识Dreamweaver 插入工具栏 插入栏包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。允许在插入它时设置不同的属性。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。 标准工具栏 标准工具栏包含对文档的一些基本操作命令，例如“新建”、“保存”、“剪切”、“复制”、“粘帖”、“撤销”、“重做”等等。 文档工具栏 文档工具栏中包含视图切换按钮，这些按钮可以在“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 7.1 初识Dreamweaver “文档”窗口 “文档”窗口显示当前创建和编辑的网页文档。 属性检查器 属性检查器是一个很有用的面板，用于查看和更改当前所选对象或文本的各种属性。在编辑网页时，在文档窗口中正在编辑的是哪个对象，属性检查器就自动显示关于这个对象的各个属性。 “文件”面板 “文件”面板用于管理当前站点的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还可以用来访问本地磁盘上的全部文件，它的显示方式和使用方法非常象Windows的资源管理器。 7.1 初识Dreamweaver 状态栏 状态栏提供与您正创建的文档有关的其它信息。 面板组 “面板组”是在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。 7.1 初识Dreamweaver 菜单概述 　　下面就Dreamweaver 8中各菜单的功能进行简要的说明。 “文件”菜单：包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。 “编辑”菜单：包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。 “查看”菜单：使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。 “插入”菜单：提供“插入”栏的替代项，用于将对象插入您的文档。 “修改”菜单：使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。 7.1 初识Dreamweaver “文本”菜单：使您可以轻松地设置文本的格式。 “命令”菜单：提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。 “站点”菜单：提