第03章_文档操作ppt课件

1、中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训第第3章章 文文 档档 操操 作作 当用户创建了本地站点后，就可以创建文档并将其保存在站点文件夹中。在创建和编辑文档时，Dreamweaver 8会自动生成文档的HTML代码和JavaScript代码，使用Dreamweaver代码编辑器可以测试和编辑这些代码。本章将主要介绍Dreamweaver 8创建不同类型文档的方法，以及网页制作的常用操作。其中包括设置页面属性、使用颜色、使用“标尺”、“网格和跟踪图像等，以及头部内容的查看与编辑。 中文版中文版Dreamweaver Dreamweaver 8基础

2、与上机实训基础与上机实训通过本章的理论学习和上机实训，读者应了解和掌握以下内容:创建、打开和保存文档 设置文档属性 使用颜色 在文档窗口中选择元素 使用可视化向导设计网页 查看和编辑头部内容 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训本章章节内容安排如下:3.1 创建、打开和保存文档 3.2 设置文档属性 3.3 使用颜色 3.4 在文档窗口中选择元素 3.5 使用可视化向导设计网页 3.6 查看和编辑头部文件 3.7 思考与练习中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训3.1 创建、打开和保存文档

3、 Dreamweaver 8提供了多种创建文档的方法，用户可以创建一个新的空白HTML文档，或使用模板创建新文档。同时，Dreamweaver 8提供了功能强大的“新建文档对话框来满足用户创建不同类型的文档的需求。 在Dreamweaver 8中，用户除了打开常用的HTML文本文件外，还可以打开很多相关类型的文件，如JavaScript文件、XML文件及各种纯文本文件。实际上，Dreamweaver 8可以打开所有与网页制作相关的文件。 创建新的空白文档 创建基于Dreamweaver设计文件的文档 创建模板文档 打开与保存文档 中文版中文版Dreamweaver Dreamweaver 8基

4、础与上机实训基础与上机实训创建新的空白文档 用户要在Dreamweaver 8的文档窗口中创建一个空白文档，可以选择“文件”“新建命令或按下Ctrl+N快捷键，在打开的“新建文档对话框中选择要创建的文档类型，如下图所示。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建基于Dreamweaver设计文件的文档 与其他常用软件一样，Dreamweaver 8也附带了多种以专业水准开发的页面布局和设计元素文件。用户可在“新建文档对话框中选择合适的设计文件作为自己所要设计页面的“模板”。 设计文件包括具有辅助功能标准的文档和模板、基于表格的页面布局文档和

5、 CSS 样式表。对于“CSS 样式表”、“框架集”、“页面设计和“页面设计(有辅助功能的)”类别中的项目，可在“新建文档对话框中预览文档并阅读关于文档设计元素的简要说明。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建模板文档 Dreamweaver模板是一种特殊类型的文档，用于创建具有相同页面布局的统一页面。模板设计者通过设计页面布局，并在模板中设置可进行编辑的区域供用户使用。 创建空白模板：在文档窗口中，选择“文件”“新建命令或按下Ctrl+N快捷键，翻开“新建文档对话框，在“类别列表框中选择“基本页选项，然后在 “基本页列表框中选择“HT

6、ML模板选项，并单击“创建按钮。 创建基于现存文档的模板：在文档窗口中，选择“文件”“新建命令或按下Ctrl+N快捷键，翻开“新建文档对话框，在“类别列表框中选择 “页面设计(有辅助功能的)”选项，然后在“网页设计列表框中选择所需的选项，在“创建选项区域中选择“模板单选按钮，并单击“创建按钮。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训打开与保存文档 在Dreamweaver 8中要打开现有文档，可以选择“文件”|“翻开命令或按下Ctrl+O快捷键，翻开“翻开对话框，在“文件类型下拉列表框中选择要打开的文件类型，然后选择一个已存在的文档，如下图所

7、示。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训 在Dreamweaver 8中保存文档有两种情况。如果是第一次保存，可以选择“文件”|“保管命令或按下Ctrl+S快捷键，翻开“另存为对话框，如图3-5所示，在对话框中选择文档存放位置并输入文件名称，单击“保管按钮即可。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训3.2 设置文档属性 文档的属性包括页面标题、背景图像、背景颜色、文本和链接颜色、边距等。其中，“页面标题确定和命名了文档的名称，“背景图像和“背景颜色决定了文档显示的外观，“文本颜色和“链

8、接颜色帮助站点访问者区别文本和超文本链接等。 要设置文档的属性，可以选择“修改”|“页面属性命令，翻开“页面属性对话框，如下图所示。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训3.3 使 用 颜 色 颜色是美化页面不可缺少的部分，使用Dreamweaver 8可以非常方便地修改各种网页元素的颜色。 在Dreamweaver 8中设置颜色有两种方法。其中，使用“颜色选择器是最常用的方法。在Dreamweaver 8中，很多对话框和属性检查器一样，都包含了可打开“颜色选择器的颜色框，使用“颜色选择器可以设置页面元素的颜色。了解网页安全色 定义默认文本

9、颜色 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训了解网页安全色 在 HTML 的定义中，颜色可以表示成十六进制值(如#FF0000)或者表示为颜色名称(如red、green等)。网页安全色是指在以256色模式运行时，无论在 Windows 系统的Microsoft Internet Explorer 中，还是在 Macintosh 系统的Netscape Navigator 中都显示相同的颜色。根据传统经验，共有 256 种常见颜色，任何结合了 00、33、66、99、CC和FF(对应RGB的相应值分别为 0、51、102、153、204 和 2

10、55)的十六进制值都代表网页安全色。 Dreamweaver 8中的“立方色和“连续色调调色板使用的都是256色的网页安全调色板，从这些调色板中选择颜色会显示颜色的十六进制值。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训定义默认文本颜色 在Dreamweaver 8中要定义默认文本的颜色，可以打开“页面属性对话框，在对话框左侧的“分类列表框中选择“外观和“链接选项，分别设置关于文本和链接的颜色参数。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训3.4 在文档窗口中选择元素 选择元素操作是使用Dream

11、weaver 8编辑文档的最基本操作之一。在文档窗口的设计视图中选择文档元素时，只需单击该元素即可，如果元素不可见，在选择它之前必须使该元素可见。 认识不可见元素 选择元素 显示不可见元素 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训认识不可见元素 许多在HTML代码中显示的内容，实际上并不能直接显示在浏览器中，例如，注释标记不能显示在浏览器中。然而，用户可以在页面上选择这些不可见元素，并且编辑、移动或删除它们。Dreamweaver 8允许用户指定是否在文档窗口的设计视图中显示图标来标记不可见元素位置。显示或隐藏不可见元素的标记图标可以选择“查看

12、”|“可视化助理”|“不可见元素命令。当不可见元素显示时，用户根据需要可选择它们并使用属性面板改变它们的属性。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训选择元素 要在Dreamweaver 8的文档窗口中选择元素，共有以下4种方法。在文档窗口中要选择可见元素，可以直接单击该元素进行选择。这是最常用的选择操作，在设计网页时会经常用到。在选择不可见元素时，应先选择“查看”|“可视化助理”|“不可见元素命令，以显示这些元素，然后在文档窗口中单击元素标记即可。如果要选择的是文档中的整个标记，可单击文档窗口底部标记选择器上的标记。对于比较熟悉HTML标记

13、的用户，可以直接通过选择相应的HTML标记来选择相应的元素。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训显示不可见元素 用户可以在Dreamweaver 8的“首选参数对话框中设置文档中不可见元素的显示属性。要改变不可见元素参数设置，可以选择“编辑”|“首选参数命令，翻开“首选参数对话框，在“分类列表框中选择“不可见元素选项，在“不可见元素选项区域中设定在文档中不可见的元素，如下图所示。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训3.5 使用可视化向导设计网页 Dreamweaver 8提供了3种可视

14、化向导，用于辅助用户设计网页和估计网页在浏览器中的外观，分别是“标尺”、“网格和“跟踪图像”。 使用“标尺和“网格” 使用“跟踪图像” 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训使用“标尺和“网格” 用户在设计页面时需要设置页面元素的位置或对齐页面元素，Dreamweaver 8为用户提供了这方面的功能。选择“查看”|“标尺”|“显示命令和“查看”|“网格”|“显示网格命令，可以在网页文档中显示标尺和网格，如图3-11所示。同时用户还可通过该菜单来执行显示或隐藏标尺、复位标尺原点，以及设置标尺单位等操作。 中文版中文版Dreamweaver Dr

15、eamweaver 8基础与上机实训基础与上机实训使用“跟踪图像” 在Dreamweaver 8中，使用跟踪图像功能可以载入某个比较欣赏的网页布局(或图片)，然后借助该网页的布局(或图片)安排自己的网页布局。 跟踪图像仅供用户参考，在浏览器中是不显示的。此外，选择“查看”|“跟踪图像菜单中的其他命令可执行以下操作。选择“显示命令：用于显示或隐藏跟踪图像。选择“对齐所选范围命令：用于跟踪图像与某个选中对象(如图层、对象等)对齐。选择“调整位置命令：用于调整跟踪图像位置。选择“重设位置命令：用于复位跟踪图像位置。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上

16、机实训3.6 查看和编辑头部文件 通常一个HTML文件主要包含两个主要部分，一个是和标记之间的头部，另一个是和标记之间的正文部分。正文部分是文档的主要部分，包括可见的文本、图形等。 在HTML文件的头部中，除了文档Title外都是不可见的。但是头部包含许多重要的信息，如文档类型、语言编码、JavaScript和VBScript函数和变量、关键字和搜索引擎指示器、样式定义等，但并不是所有文档都需要设置全部的头部信息。要查看这些头部内容，可选择“查看”|“代码命令，或文档窗口的代码视图。 显示文档 在文档头部插入元素 使用头部元素 中文版中文版Dreamweaver Dreamweaver 8基础

17、与上机实训基础与上机实训显示文档 要显示文档头部中的元素，文档窗口必须显示“设计视图或“拆分视图。选择“查看”|“文件头内容命令，在文档中，文档头部中的元素将以图标的形式显示在文档窗口的设计视图上边，如下图所示。 文档头部 的元素标志 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训在文档头部插入元素 要在网页中插入头部元素，可以选择“插入工具栏中的HTML选项卡，单击“文件头按钮旁边的下拉箭头，选择要插入的对象，如下图。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训使用头部元素 文档的头部元素包括META

18、、“关键字”、“描绘”、“刷新”、“根底和“链接”。其中，META是HTML头部的主要组成部分，用于记录一个文档的页面信息，这些信息可被计算机识别，用于某些特定的场合。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训3.7 思考与练习 填空题填空题 1. 在在 HTML 的定义中，颜色可以表示成的定义中，颜色可以表示成 或者表示为或者表示为 。 。 2. 在在Dreamweaver 8中，设置颜色最常用的方中，设置颜色最常用的方法是使用法是使用 。 3. 在在Dreamweaver 8中，可视化设计向导有中，可视化设计向导有3种，它们是种，它们是 、

19、 和和 。 4. 网页安全色共有网页安全色共有 种常见颜色，而且任种常见颜色，而且任何结何结合合 、 、 、 、 、 _的十六进制值都代表网页安全色。的十六进制值都代表网页安全色。 5. 在在HTML文件的头部中，除了文件的头部中，除了 外都是不外都是不可见的。可见的。 6. 文档的头部元素包括文档的头部元素包括 、 、“描描绘绘”、 、“根底和根底和“链接链接”。其中，。其中， 是是 HTML头部的主要组成部分，主要用于记头部的主要组成部分，主要用于记录一个文档的页面信息。录一个文档的页面信息。 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训3.7 思考与练习 选择题选择题 7. ( )不是不是Dreamweaver 8设计文件文档。设计文件文档。 A. HTM文档文档B. HTML文档文档 C. ASP文档文档D. TXT文档。文档。8. 在在Dreamweaver 8中，不能被导入的文档是中，不能被导入的文档是( )。 A. Word文档文档B. XML