第 03 章 创建与设置文档

24

Click here to load reader

description

第 03 章 创建与设置文档. 文档的创建与设置是 Dreamweaver 的基本操作。用户创建了本地站点后,就可以创建文档并将其保存在站点文件夹中。用户可以通过 Dreamweaver 8 所提供的友好操作界面方便地制作出包含文本、图像、动画、录像以及链接的文档。同时, Dreamweaver 会在用户创建文档的同时自动生成相应的 HTML 代码。 。. 3.1 教学目标. 掌握知识: 通过本章的学习,读者应掌握在 Dreamweaver 8 中创建网页文档、编辑文档内容,设置文档属性以及使用网页可视化工具的方法。 - PowerPoint PPT Presentation

Transcript of 第 03 章 创建与设置文档

Page 1: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

第第 0303 章 创建与设置文档章 创建与设置文档

文档的创建与设置是文档的创建与设置是 DreamweaverDreamweaver 的基本操作。用户创建了本地站点后,的基本操作。用户创建了本地站点后,就可以创建文档并将其保存在站点文件夹中。用户可以通过就可以创建文档并将其保存在站点文件夹中。用户可以通过 Dreamweaver 8Dreamweaver 8所提供的友好操作界面方便地制作出包含文本、图像、动画、录像以及链接的所提供的友好操作界面方便地制作出包含文本、图像、动画、录像以及链接的文档。同时,文档。同时, Dreamweaver Dreamweaver 会在用户创建文档的同时自动生成相应的会在用户创建文档的同时自动生成相应的 HTMLHTML代码。代码。 。。

Page 2: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.1 3.1 教学目标教学目标

掌握知识:掌握知识:通过本章的学习,读者应掌握在 通过本章的学习,读者应掌握在 Dreamweaver 8Dreamweaver 8 中创建网页中创建网页文档、编辑文档内容,设置文档属性以及使用网页可视化工具的方法。文档、编辑文档内容,设置文档属性以及使用网页可视化工具的方法。 重点学习:重点学习:本章重点讲解了创建、打开、设置和保存文档的操作方法,课本章重点讲解了创建、打开、设置和保存文档的操作方法,课后读者应结合上机操作进行强化练习。后读者应结合上机操作进行强化练习。

Page 3: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.2 3.2 理论指导 理论指导 创建网页文档创建网页文档 打开和保存网页文档打开和保存网页文档 设置文档属性设置文档属性 设置颜色设置颜色 选择文档中的元素选择文档中的元素 使用可视化向导设计网页使用可视化向导设计网页 查看和编辑头部内容查看和编辑头部内容

Page 4: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

33.2.1.2.1 创建网页文档创建网页文档 在在 Dreamweaver 8Dreamweaver 8 中用户可以通过中用户可以通过 33 种方式创建文档:创建新的空白文档、种方式创建文档:创建新的空白文档、创建以模板为基础的文档,以及创建基于创建以模板为基础的文档,以及创建基于 Dreamweaver 8Dreamweaver 8 设计文件的文档。设计文件的文档。

创建空白文档创建空白文档 创建基于创建基于 Dreamweaver 8Dreamweaver 8 设计文件的文档设计文件的文档 创建模板文档创建模板文档 通过“导入”创建文档通过“导入”创建文档

Page 5: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

选择“文件”|“新建”命令或按选择“文件”|“新建”命令或按 Ctrl+NCtrl+N 键,在打开的“新建文档”对话键,在打开的“新建文档”对话框中选择要创建的文档类型框中选择要创建的文档类型后 , 单击“创建”按钮即可 在“创建”按钮即可 在 Dreamweaver 8Dreamweaver 8 中中创建一个空白网页文档。创建一个空白网页文档。

Page 6: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

在“新建文档”对话框中选择合适的设计文件,作为要设计页面的“模在“新建文档”对话框中选择合适的设计文件,作为要设计页面的“模板”板” ,, 然后单击然后单击””创建“按钮创建“按钮 ,, 可以创建基于可以创建基于 Dreamweaver 8Dreamweaver 8 设计文件的网页设计文件的网页文档。文档。

Page 7: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

DreamweaverDreamweaver 的模板是一种特殊类型的文档,用于创建具有相同页面布局的模板是一种特殊类型的文档,用于创建具有相同页面布局的统一页面。模板设计者通过设计页面布局,并在模板中设置可以进行编辑的的统一页面。模板设计者通过设计页面布局,并在模板中设置可以进行编辑的区域供用户使用。区域供用户使用。 用户要在用户要在 Dreamweaver 8Dreamweaver 8 的文档窗口中创建模板文档,可以使用以下两种的文档窗口中创建模板文档,可以使用以下两种方法。方法。

在文档窗口中选择“文件”|“新建”命令或按在文档窗口中选择“文件”|“新建”命令或按 Ctrl+NCtrl+N 键,打开“新建键,打开“新建文档”对话框,在打开的对话框中选择“基本页”选项,然后在对话框的“基文档”对话框,在打开的对话框中选择“基本页”选项,然后在对话框的“基本页”列表中选择“本页”列表中选择“ HTMLHTML 模板”选项,并单击“创建”按钮。 创建基于模板”选项,并单击“创建”按钮。 创建基于Dreamweaver 8Dreamweaver 8 设计文件的文档 设计文件的文档 创建基于现有文档的模板:在文档窗口中选择“文件”|“新建”命令或创建基于现有文档的模板:在文档窗口中选择“文件”|“新建”命令或按按 Ctrl+NCtrl+N 键,打开“新建文档”对话框,在打开的对话框中选择“页面设键,打开“新建文档”对话框,在打开的对话框中选择“页面设计”及“页面设计计”及“页面设计 (( 有辅助功能的有辅助功能的 )”)” 这两个选项,然后在对话框中间列表中选这两个选项,然后在对话框中间列表中选择适合的选项,并在对话框右下方的“创建”选项区域中选择“模板”单选按择适合的选项,并在对话框右下方的“创建”选项区域中选择“模板”单选按钮,然后单击“创建”按钮。钮,然后单击“创建”按钮。

Page 8: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

如果要使用如果要使用 DreamweaverDreamweaver 的“导入”功能创建网页文档的“导入”功能创建网页文档 , , 必须先新建一必须先新建一个个 HTMLHTML 文件,然后选择“文件”文件,然后选择“文件” | “| “ 导入”命令,将相应类型的文件导入到导入”命令,将相应类型的文件导入到文档中。文档中。

Page 9: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.2.2 3.2.2 打开和保存网页文档打开和保存网页文档 在使用在使用 Dreamweaver 8Dreamweaver 8 制作网页时,打开和保存文档是最常用的操作命制作网页时,打开和保存文档是最常用的操作命令令 ,, 用户可以通过执行这些命令用户可以通过执行这些命令 ,, 实现不同文档之间的调用和网页效果的保存实现不同文档之间的调用和网页效果的保存。 打开现有文档打开现有文档 打开最近使用的文档打开最近使用的文档 保存文档

Page 10: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

选择“文件”选择“文件” |“|“ 打开”命令或按打开”命令或按 Ctrl+OCtrl+O 键,在打开的“打开”对话框中选键,在打开的“打开”对话框中选择需要打开的网页文件后,单击“打开”按钮即可打开一个现有的网页文档。择需要打开的网页文件后,单击“打开”按钮即可打开一个现有的网页文档。

Page 11: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

选择“文件”选择“文件” |“|“ 打开最新的文件”命令,从弹出的菜单中选择打开最新的文件”命令,从弹出的菜单中选择 DreamweaDreamweaver 8ver 8 最近打开过的文档名称即可打开最近打开过的文档名称即可打开 DreamweaverDreamweaver 最近被打开过的网页文档最近被打开过的网页文档 。。

Page 12: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

要保存制作好的网页要保存制作好的网页 ,, 可以选择“文件”可以选择“文件” |“|“ 保存”命令,然后在打开的“另保存”命令,然后在打开的“另存为” 对话框中单击“保存”按钮 即可。存为” 对话框中单击“保存”按钮 即可。

Page 13: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.2.3 3.2.3 设置文档属性设置文档属性 要修改 要修改 DreamweaverDreamweaver 中被打开的网页文档属性中被打开的网页文档属性 ,, 可以选择“修改”可以选择“修改” |“|“ 页面页面属性”命令,打开“页面属性”对话框进行设置。属性”命令,打开“页面属性”对话框进行设置。

Page 14: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.2.4 3.2.4 设置颜色设置颜色 在制作网页的过程中,使用颜色美化网页效果是必不可少的操作,在在制作网页的过程中,使用颜色美化网页效果是必不可少的操作,在 DreaDreamweaver 8mweaver 8 中用户可以借助属性检查器非常方便地修改各种网页元素的颜色。中用户可以借助属性检查器非常方便地修改各种网页元素的颜色。

认识网页安全色认识网页安全色 定义文本颜色定义文本颜色

选项按钮

默认颜色 系统颜色拾取器

颜色预览

Page 15: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

网页安全色指的是以网页安全色指的是以 256256 色模式运行时,无论在 色模式运行时,无论在 WindowsWindows 系统的系统的Microsoft Internet ExplorerMicrosoft Internet Explorer 中,还是在 中,还是在 Macintosh Macintosh 系统的系统的 Netscape Netscape NavigatorNavigator 中都显示相同的颜色。用户在制作网页时,共有 中都显示相同的颜色。用户在制作网页时,共有 216 216 种常见颜色,种常见颜色,而且任何结合了 而且任何结合了 0000 、、 3333 、、 6666 、、 9999 、、 CC CC 或 或 FF FF 对对 (RGB(RGB 的相应值分别为 的相应值分别为 00 、、 5151 、、 102102 、、 153153 、、 204 204 和 和 255)255) 的十六进制值都代表网页安全色。的十六进制值都代表网页安全色。 在在 DreamweaverDreamweaver 中,“立方色”和“连续色调”调色板使用的是中,“立方色”和“连续色调”调色板使用的是 216216 色的色的网页安全调色板,从这些调色板中选择颜色会显示颜色的十六进制值。网页安全调色板,从这些调色板中选择颜色会显示颜色的十六进制值。

Page 16: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

如果要设置网页文档中文本对象的颜色如果要设置网页文档中文本对象的颜色 ,, 用户可以选择“修改”用户可以选择“修改” |“|“ 页面属页面属性”命令,打开“页面属性”对话框,在“分类”列表框中选择“外观”和性”命令,打开“页面属性”对话框,在“分类”列表框中选择“外观”和“链接”选项,分别进行设置“链接”选项,分别进行设置 。。

Page 17: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.2.5 3.2.5 选择文档中的元素选择文档中的元素 如果用户要在如果用户要在 DreamweaverDreamweaver 的文档中选择某个元素,只要在文档窗口的的文档中选择某个元素,只要在文档窗口的设计视图中选择文档元素时,单击该元素即可,如果元素不可见,在选择它之设计视图中选择文档元素时,单击该元素即可,如果元素不可见,在选择它之前必须使其可见。前必须使其可见。

选择可见元素选择可见元素 认识不可见元素认识不可见元素 显示不可见元素显示不可见元素

Page 18: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

要在要在 Dreamweaver 8Dreamweaver 8 的文档窗口中选择可见元素,有以下的文档窗口中选择可见元素,有以下 33 种方法。种方法。

在文档窗口中单击要选择的元素,这是最常用的选择操作,在设计网页时在文档窗口中单击要选择的元素,这是最常用的选择操作,在设计网页时会经常用到。会经常用到。 单击文档窗口底部标记选择器上的标记。单击文档窗口底部标记选择器上的标记。 对于比较熟悉对于比较熟悉 HTMLHTML 标记的用户,直接通过选择相应的标记的用户,直接通过选择相应的 HTMLHTML 标记来选标记来选择相应的元素。择相应的元素。

Page 19: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

要显示文档中的不可见元素要显示文档中的不可见元素 ,, 可以选择“编辑”可以选择“编辑” ||““参数选择”命令,打开参数选择”命令,打开“首选参数”对话框,并在“分类”列表框中选择“不可见元素”选项,然后“首选参数”对话框,并在“分类”列表框中选择“不可见元素”选项,然后在对话框右侧的在对话框右侧的““显示”选项区域中即可设置显示在文档中不可见元素显示”选项区域中即可设置显示在文档中不可见元素 。。

Page 20: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.2.6 3.2.6 使用可视化向导设计网页使用可视化向导设计网页 DreamweaverDreamweaver 中提供了“标尺”、“网格”和“跟踪图像”中提供了“标尺”、“网格”和“跟踪图像” 33 种可视化向种可视化向导供设计者使用,用户可以使用它们帮助设计网页和估计网页在浏览器中的外导供设计者使用,用户可以使用它们帮助设计网页和估计网页在浏览器中的外观。观。

使用“标尺”和“网络”使用“标尺”和“网络” 使用“跟踪图像”使用“跟踪图像”

Page 21: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程 用户可以选择“查看” |“ 标尺” |“ 显示”命令,在网页文档中显示标尺。

选择“查看” |“ 网络” |“ 显示网络”命令,在网页文档中显示网格。

Page 22: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程 要使用“跟踪图像”功能要使用“跟踪图像”功能 .. 可以选择“查看”可以选择“查看” |“|“跟踪图像”跟踪图像” |“|“载入”命令,载入”命令,

在打开的“选择图像源文件”对话框中选择合适的图片后,单击“确定”按钮在打开的“选择图像源文件”对话框中选择合适的图片后,单击“确定”按钮即可。即可。

Page 23: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.2.6 3.2.6 查看和编辑头部内容查看和编辑头部内容 HEMLHEML 文件由文件由 <head><head> 和和 </head></head> 标记之间的头部和标记之间的头部和 <body><body> 和和 </body></body>标记之间的正文部分组成。其中,正文部分标记之间的正文部分组成。其中,正文部分 (( 包括可见文本、图形等内容包括可见文本、图形等内容 )) 是是文档的主要部分。头部包含如文档类型、语言编码、文档的主要部分。头部包含如文档类型、语言编码、 JavaScriptJavaScript 和和 VBScriptVBScript函数和变量、关键字和搜索引擎指示器、样式定义等许多重要的信息。函数和变量、关键字和搜索引擎指示器、样式定义等许多重要的信息。 另外另外 ,, 头部除了文档头部除了文档 TitleTitle 外都是不可见的,要查看这些头部内容,用户可外都是不可见的,要查看这些头部内容,用户可以使用“查看”菜单,或文档窗口的代码视图。以使用“查看”菜单,或文档窗口的代码视图。

显示文档显示文档 在文档头部插入元素在文档头部插入元素 设置头部元素

Page 24: 第 03 章  创建与设置文档

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

3.3 3.3 上机实验上机实验 本章的上机实验主要练习在本章的上机实验主要练习在 Dreamweaver 8Dreamweaver 8 中使用“导入”功能创建网页中使用“导入”功能创建网页文档,并设置文档头部元素。其中,对头部内容的编辑是重点,用户在创建网文档,并设置文档头部元素。其中,对头部内容的编辑是重点,用户在创建网页文档后,应根据需要适当对其进行编辑。在修改头部内容时应注意各个对话页文档后,应根据需要适当对其进行编辑。在修改头部内容时应注意各个对话框选项的功能。对于本章中的其他内容,可根据理论指导部分进行练习。 框选项的功能。对于本章中的其他内容,可根据理论指导部分进行练习。