网页设计实用教程.pdf

《网页设计实用教程.pdf》由会员分享，可在线阅读，更多相关《网页设计实用教程.pdf（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第第 3 章章 Dreamweaver CS5 基本操作基本操作 在学习过程中，不可避免的需要应用到一些基本的操作，例如新建、打开和保存文件等操作。为了更顺畅的学习 Dreamweaver CS5，我们应该了解一些基本操作，对这些操作有个基本的认识。【本章学习目标】【本章学习目标】?掌握设置首选参数?熟悉新建、保存和关闭 HTML 文档?理解设置网页的页面属性?熟悉添加文字和图像的基本操作 3.1 首选参数设置首选参数设置 为了使Dreamweaver CS5更加适合工作的需要，在正式使用前需要进行一些基础设置。如是否打开或关闭一些即时提示信息框、选择默认的网页语言版本等。（1）启动 Drea

2、mweaver CS5，执行“编辑/首选参数”命令，打开如图 3-1 所示的“首选参数”对话框。图 3-1 “首选参数”对话框 第 3 章 Dreamweaver CS5 基本操作 19-（2）选择分类栏中的“辅助功能”，分别单击表单对象、框架、媒体和图像前面的复选框，将复选框中的去掉，如图 3-2 所示。图 3-2 分类栏中的“辅助功能”这样设置可以阻止在插入表单、框架、媒体和图像时弹出属性提示框，简化操作步骤。（3）如图 3-3 所示，选择分类栏中的“新建文档”，根据需要设置默认文档的类型。图 3-3 分类栏中的“新建文档”本例中选择默认文档为 HTML，默认扩展名为.html，默认编码为

3、简体中文（GB2312）。默认编码可以根据实际工作的需要进行选择，例如制作英文网页可以选择 UTF-8 编码。中文网页默认的编码为 GB2312，所以这里选择 GB2312 编码。（4）单击“确定”按钮，完成首选参数设置。中文版 Dreamweaver CS5 网页设计实用教程 20-3.2 文档的基本操作文档的基本操作 3.2.1 新建文档新建文档（1）启动 Dreamweaver CS5，显示如图 3-4 所示的起始页面。图 3-4 Dreamweaver CS5 的起始页面（2）单击新建栏中的“HTML”，新建 HTML 文档并进入到编辑界面。也可以单击菜单“文件/新建”，打开图 3-5

4、 所示的“新建文档”对话框。在新建文档对话框中选择“空白页”中的“HTML”，单击“创建”按钮，新建 HTML 文档。图 3-5 “新建文档”对话框 3.2.2 保存和关闭文档保存和关闭文档 执行“文件/保存”命令，可以保存当前文档。第一次执行“文件/保存”命令时，会弹出如图 3-6 所示的“另存为”对话框。在“另第 3 章 Dreamweaver CS5 基本操作 21-存为”对话框中设置文件的保存路径和文件名，单击“保存”按钮完成文档保存。图 3-6 “另存为”对话框 当再次保存文件时，会以现有的路径和名称覆盖保存该文件。需要将文件以不同路径或名称保存时，可以执行“文件/另存为”命令，在弹

5、出的“另存为”对话框中设置新的路径和名称保存文件。执行“文件/关闭”命令，或单击 Dreamweaver CS5 窗口右上角“关闭”按钮，关闭程序。3.2.3 打开文档打开文档 打开文档的方法有多种，下面以实例进行介绍。（1）启动 Dreamweaver CS5 程序，起始页面中显示了最近编辑过的文件，如图 3-7所示。（2）单击目标文件，即可将其打开。也可以单击“打开”按钮或执行“文件/打开”命令，在弹出的如图 3-8 所示的“打开”对话框中选择目标文件，然后单击“打开”按钮。图 3-7 最近编辑过的文件 图 3-8 在“打开”对话框中选择目标文件 中文版 Dreamweaver CS5 网

6、页设计实用教程 22-3.3 制作网页的基本操作制作网页的基本操作 在深入学习制作网页前，需要了解设置页面、添加头部信息和文本、插入图像等基本操作。3.3.1 设置网页属性设置网页属性 制作网页时，首先需要设置文档的页面属性，它包括网页标题、背景图像、背景颜色、文本颜色、链接颜色、页边距等。图 3-9 所示为在浏览器中打开的一个网页。图 3-9 在浏览器中打开的一个网页 网页具有标题、页边距、链接样式、背景颜色和字体样式等页面属性。在建立网页时，可以通过设置页面属性来制定网页的这些样式。设置页面属性的操作如下：（1）执行“修改/页面属性”命令，打开如图 3-10 所示的“页面属性”对话框。图

7、3-10 “页面属性”对话框 标题上边距左边距链接样式正文字体样式右边距第 3 章 Dreamweaver CS5 基本操作 23-（2）设置各类参数，单击“确定”按钮完成设置。页面属性对话框中各选项的含义如下：?外观：外观：在外观选项中可以设置页面的默认字体、背景颜色和页面边距等。单击目标选择框会弹出相应的提示，选择目标项设置即可。如图 3-10 所示。图 3-11 页面属性中的“链接”?链接：链接：在链接选项中可以设置链接的字体、颜色和下划线样式等。如图 3-11 所示。?标题：标题：标题类别栏用于设置当前网页的文本格式。标题是 HTML 文档默认保留的文本体例，可以在这里重新定义各级标题

8、的格式，然后在工作中直接应用这些标题，定义文本的样式。如图 3-12 所示。图 3-12 页面属性中的“标题”?标题标题/编码：编码：标题”显示在浏览器的标题栏和状态栏中，当网页被收藏时，标题显示在收藏项目中；“编码”用来设置当前网页文字采用的编码种类。计算机中显示的每种文字都需要对应的编码支持，才能正确显示，否则会出现乱码，即无法正确显示文字的现象。在中文模式下默认编码为简体中文 GB2312。如图 3-13 所示。?跟踪图像：跟踪图像：可在设计页面时插入用作参考的图像文件。如图 3-14 所示。中文版 Dreamweaver CS5 网页设计实用教程 24-图 3-13 页面属性中的“标题

9、/编码”图 3-14 页面属性中的“跟踪图像”跟踪图像栏指定在复制设计时作为参考的图像。该图像只供参考，当文档在浏览器中显示时并不出现。图像透明度确定跟踪图像的不透明度，从完全透明到完全不透明。设定完成后，若想查看实际效果，可以单击“应用”按钮，即时查看设定的效果，而不用退出页面属性设置面板。3.3.2 编辑头部信息编辑头部信息 头部信息中包含了网页的许多属性信息，除网页标题外，还包括网页关键字、网页描述等。头部信息虽不直接显示在网页中，但可以通过其他方式起作用。如许多搜索引擎都是根据网页关键字来查询网页的。下面我们就简单介绍插入网页关键字的方法。（1）如图 3-15 所示，单击插入面板的“常

10、用”选项卡，切换到“常用”选项卡。（2）单击“文件头”按钮，弹出图 3-16 所示的菜单。（3）单击菜单中的“关键字”选项，打开“关键字”对话框。输入站点或网页的关键字，即网站中关键内容描述，如图 3-17 所示，单击“确定”按钮，关闭对话框。第 3 章 Dreamweaver CS5 基本操作 25-图 3-15 “常用”选项卡 图 3-16 “文件头”按钮 图 3-17 “关键字”对话框 3.3.3 添加网页内容添加网页内容 1添加文本 文字是构成网页的重要组成部分，在 Dreamweaver CS5 中可以像使用文字排版软件一样，进行文字的输入和编辑。直接添加文本的操作如下：（1）启动

11、Dreamweaver CS5，单击起始页面中创建新项目下的 HTML，新建 HTML文档。（2）单击编辑窗口内部，然后输入目标文字即可。拷贝文件的操作如下：（1）新建 HTML 文档。（2）使用 Word 或其他文字编辑软件打开一段含有文字内容的文档。（3）选取目标文本，执行“编辑/复制”命令（或按【Ctrl+C】组合键），复制该文本。（4）在 Dreamweaver CS5 文档窗口执行“编辑/粘贴”命令（或按【Ctrl+V】组合键），完成文本拷贝。粘贴到 Dreamweaver CS5 的文本，原文本字体被 Dreamweaver CS5 默认的字体所代替。中文版 Dreamweaver

12、 CS5 网页设计实用教程 26-2插入图像 图像是网页中的重要元素，它能给网页增加美感。插入图像的具体操作方法如下：（1）新建 HTML 文档。（2）在文本的末尾处按回车键，确定插入图像的位置。单击“插入/图像”，弹出“选择图像源文件”对话框。（3）在图 3-18 所示的“选择图像源文件”对话框中选择目标文件，单击“确定”按钮，导入图像。图 3-18 “选择图像源文件”对话框（4）如果当前新建网页没有被保存，那么会弹出如图 3-19 所示的提示框。图 3-19 提示框（5）单击“确定”按钮后，如果没有设置首选参数的辅助功能项，那么在默认参数下，会打开如图 3-20 所示的“图像标签辅助功能属

13、性”对话框。该对话框不用设置，直接单击“确定”按钮或者“取消”按钮将图像导入即可。图 3-20 “图像标签辅助功能属性”对话框 第 3 章 Dreamweaver CS5 基本操作 27-（6）如不想在插入图像时弹出该对话框，可单击图 2-20 中最下边带有下划线的链接文字，打开图 3-21 所示的“首选参数”对话框，单击“图像”复选框，去掉该复选框中的“”。图 3-21 “首选参数”对话框（7）如图 3-22 所示，在属性面板中设置导入图像的大小和位置。图 3-22 设置导入图像的大小和位置 3建立超链接 建立超链接可通过属性面板来完成，下面以建立文字超链接为例，说明具体方法。（1）使用鼠标

14、框选链接的文字。（2）将鼠标指针移到属性面板中的链接栏右侧的指向文件图标，按住鼠标左键拖动到文件面板中的目标文件，如图 3-23 所示。也可以在链接栏中直接输入链接网页的地址，中文版 Dreamweaver CS5 网页设计实用教程 28-例如输入 http:/，完成链接设置。图 3-23 设置超链接（3）按【F12】键预览网页，如图 3-24 所示。将鼠标指针指向链接文件，鼠标指针变为手指形状，单击链接文字会跳转至链接页。图 3-24 预览网页 4预览及检验相关操作 编辑网页的过程中，经常需要在浏览器中预览和检验相关操作。预览网页时，需要先保存网页，然后按【F12】键，在浏览器中预览编辑结果

15、。执行“窗口/结果/验证”，打开如图 3-25 所示的结果面板。使用结果面板的各项检验功能，可以执行检验操作并在面板中列出检验结果。第 3 章 Dreamweaver CS5 基本操作 29-图 3-25 结果面板 3.4 辅助操作辅助操作 在 Dreamweaver CS5 中有 3 个辅助工具。这 3 个工具从左向右依次是选取工具、手形工具和缩放工具，使用鼠标单击就可以选取目标工具。如图 3-26 所示。图 3-26 Dreamweaver CS5 中的 3 个辅助工具（1）选取工具可以选择目标对象和位置。（2）手形工具可以移动页面的显示中心。（3）缩放工具可以放大和缩小页面的显示比例。选

16、择缩放工具，移动到页面位置单击可放大页面，按住【Alt】键单击则缩小页面。也可以单击缩放工具右侧的缩放比率框，在弹出的菜单中选择页面的缩放比率。3.5 本章小结本章小结 本章主要讲解了 Dreamweaver CS5 的一些基本操作。通过本章的学习，读者应该掌握首选参数的设置，学会新建、保存和关闭文档的方法，清楚如何向网页中添加简单的文字和图像内容，灵活地使用 Dreamweaver CS5 提供的辅助工具。中文版 Dreamweaver CS5 网页设计实用教程 30-3.6 本章练习本章练习 一、填空题一、填空题（1）为了使 Dreamweaver CS5 更加适合工作的需要，在正式使用前需要在进行 一些基本设置。（2）制作中文网页时，默认的编码为 。（3）当使用浏览器打开网页时，网页的标题显示在浏览器的 和 中，当网页被收藏时，标题显示在收藏项目中。二、问答题二、问答题（1）如何打开“首选参数”对话框？（2）如何向网页中插入文本？（3）如何在网页中插入图像？三、上机练习三、上机练习（1）新建一个网页，并保存和关闭该网页。（2）新建一个网页，并设置网页的标题、边距属性。（3）向新建网页中导入一个图像，并使用缩放工具执行放大和缩小操作。放大图像时使用手形工具移动图像到屏幕中心。