Dreamweaver_8_网页设计培训教程_第3章

（时间：3次课，6学时）教学提示：本章还将介绍如何利用Dreamweaver8在文档中实现超链接，其中包括链接到文档或其他页面、链接到指定的锚、链接到电子邮件地址和链接到空链接等各种超链接，并将详细讲述改变这些超链接的属性设置和测试链接的方法，以便用户能创建一个具有各种超链接的网站，而且能使网站中的所有超链接都能保持完全正确的链接，从而使访问者可以方便地穿梭于网站中。教学目标：文档操作是设计网页的基本操作，它包括打开和编辑文档、设置文档属性、定义文档标题等多个方面，在设计网页时都是必须考虑到的。Dreamweaver8提供了强大的页面图像控制能力，能够帮助用户创建专业的图文并茂的页面。本章将介绍如何利用Dreamweaver8创建文档，并在文档中添加和控制图像。能否掌握好这些网页基本元素的制作，对制作网页至关重要。3.1制作文本特效3.2设置图像效果3.3映射图的应用3.4导航条的使用3.5创建与管理链接3.6上机实战3.1.1创建文档3.1.2添加文本3.1.3设置文本格式3.1.4设置字符格式文本是网页中最基本的元素。好的文本格式，能够充分体现文档要表述的意图，激发读者的阅读兴趣。在网页中设置丰富的字体、多种的段落格式以及赏心悦目的文本效果，对于一个专业的网站来说，是必不可少的要求之一。在本节中将讲述如何创建一个文档，并在文档中添加各种各样的文字。在Dreamweaver中，用户可以从一个空白的HTML页面创建新文档，也可以从模板创建，还可以打开并修改其他应用程序创建的HTML文档。1.创建新文档启动Dreamweaver8后，就可直接创建一个空文档。如果已经启动Dreamweaver8，要创建空白文档，可以在菜单栏中选择【文件】|【新建】命令，则会出现如图3.1所示的【新建文档】对话框。该对话框中默认显示的是【常规】选项卡，可以在其中选择不同的文档格式。在【类别】列表框中选择【框架集】选项，在【框架集】列表框中选择【上方固定，左侧嵌套】选项，在右边的【预览】框中可以预览新建文档的结构。单击并打开该对话框的【模板】选项卡，对话框如图3.2所示。可以在其中选择不同的模板，在右边的【预览】框中可以预览新建文档的结构。【新建文档】对话框://www.wenyuan.com.cn/webnew/3.1.1创建文档图3.3所示为新建的一个框架结构类型的空文档，其中包含3个框架，分别为：上框架、左框架和主框架。在创建一个新文档后，如果打开HTML源代码检视器，实际上Dreamweaver已经为用户打开了一个名为“Default.htm”的模板，每次开始新建网页时，Dreamweaver都会将它打开。单击文档编辑窗口上的【代码】按钮查看，源代码如图3.4所示。在这段源代码中设置了网页的一些基本属性如页名、标题、正文和页面背景色等。2.保存文档当创建一个新的文档并编辑后，就要保存该文档。保存文档可以单击【文件】|【保存】命令，或是按下Ctrl+S组合键。如果文档尚未被保存，则会出现如图3.5所示的【另存为】对话框。选择路径并输入文件名，单击【保存】按钮，即可保存文档。如果文档已经被保存过，则会直接保存文档，不会出现该对话框。://www.wenyuan.com.cn/webnew/3.1.1创建文档图3.4查看新建文档的源代码【另存为】对话框3.设置文档的页面属性文档的页面属性包括文档的标题、文档的文字编码方式、文档正文中各个元素的颜色等。正确设置文档属性是成功编写网页的必要前提。要设置文档的页面属性，其具体操作如下。(1)选择【修改】|【页面属性】命令，或在文档窗口中右击，然后从快捷菜单中选择【页面属性】命令。这时会打开如图3.6所示的对话框，设置文档页面的外观属性。(2)利用【文本颜色】文本框可以设置文档中文字的前景颜色。在Dreamweaver中选择颜色的方法很简单，单击【文本颜色】文本框旁边的色块，会弹出一个调色板，如图3.7所示，在所需的颜色上单击就可以选定这种颜色。(2)利用【文本颜色】文本框可以设置文档中文字的前景颜色。在Dreamweaver中选择颜色的方法很简单，单击【文本颜色】文本框旁边的色块，会弹出一个调色板，如图3.7所示，在所需的颜色上单击就可以选定这种颜色。://www.wenyuan.com.cn/webnew/3.1.1创建文档图3.7选择文本颜色图3.8选择更精确的文本颜色://www.wenyuan.com.cn/webnew/3.1.1创建文档利用【链接颜色】文本框可以设置文档页面中尚未访问过的超链接的文字颜色。利用【已访问链接】文本框可以设置文档页面中已经访问过的超链接的文字颜色。利用【下划线形式】文本框可以设置文档页面中超链接的文字是否有下划线等。(5)设置完页面的链接属性后，选择【分类】列表框中的【标题/编码】选项，在如图3.10所示的对话框中设置标题/编码属性。在【标题】文本框中，输入文档的页面标题。在浏览页面时，它会显示在浏览器的标题栏上。这里输入“物理篇—不知道的世界”。(6)设置完毕后，单击【确定】按钮。://www.wenyuan.com.cn/webnew/3.1.2添加文本Dreamweaver是一种“所见即所得”的网页创作工具，插入文本非常方便，可以直接在文档窗口中输入，也可以把其他应用程序，(如Word、InternetExplorer等)中的文本粘贴到文档窗口。1.在文档窗口直接输入文本在文档窗口中直接输入文本时，其操作和Word中的操作类似，只需正常输入文本即可，如图3.11所示。Dreamweaver是一种“所见即所得”的网页创作工具，插入文本非常方便，可以直接在文档窗口中输入，也可以把其他应用程序，(如Word、InternetExplorer等)中的文本粘贴到文档窗口。1.在文档窗口直接输入文本在文档窗口中直接输入文本时，其操作和Word中的操作类似，只需正常输入文本即可，如图3.11所示。当选择【编辑】|【选择性粘贴】时，将出现如图3.13对话框，在此对话框中可设置粘贴格式。选择【仅文本】选项，则原文档所有格式清除，结果如图3.14所示。当选择【带结构的文本(段落、列表、表格等)】，则原文档相应的格式都保留。://www.wenyuan.com.cn/webnew/3.1.2添加文本图3.12选择【编辑】|【粘贴】图3.13【选择性粘贴】对话框【选择性粘贴】结果Dreamweaver是一种“所见即所得”的网页创作工具，这意味着对文本格式进行设置时可以直接从屏幕上看到设置结果。Dreamweaver提供了强大的文本格式化功能，用户可以随意地对文档进行各种格式化操作。在Dreamweaver8中，文本的格式化操作是非常简单的。Dreamweaver像是一个普通的文字处理程序，就像Word，用户很容易就可以完成对文本的格式化操作。1.设置段落格式在HTML中，段落主要由标记p和/p定义，在Dreamweaver的文档窗口中，每按一次Enter键，都会自动为上面键入的段落加上p和/p标记。要设置段落格式，只需将插入点置于段落中的任意位置，然后设置段落格式即可，即只要确保插入点位于该段落的p和/p之间即可。使用HTML标记格式化文本，这是最为“正统”的格式化方式。利用HTML标记，可以对段落和字符进行丰富的格式化设置。用户可以按照如下方法进行操作。(1)在文档中，将插入点置于要设置标题的段落中，如果希望将多个段落设置为标题，也可以选中多个段落。(2)选择【文本】|【段落格式】命令，再选择相应的标题选项，如图3.15所示。可选的标题格式包括【标题1】～【标题6】。2.对齐段落段落的对齐方式，指的是段落相对文档窗口(或浏览器窗口)在水平位置的对齐方式。对齐的方式有三种：左对齐、居中和右对齐。对齐段落的具体步骤如下。(1)将插入点放在要设置对齐方式的文档中，如果要设置多个文档段落的对齐方式，可以同时选中这些段落。(2)选择【文本】|【对齐】命令，再选择如图3.17所示的对齐方式。【左对齐】选项设置段落相对文档窗口左对齐；【居中对齐】选项设置段落相对文档窗口居中对齐；【右对齐】选项设置段落相对文档窗口右对齐；【两端对齐】选项设置段落。相对文档窗口两端对齐。://www.wenyuan.com.cn/webnew/3.1.3设置文本格式图3.16利用【属性】面板设置段落格式://www.wenyuan.com.cn/webnew/3.1.3设置文本格式如果说段落格式能够从整体上把握文档的结构，使文档便于阅读理解，那么合适的字符格式则能够为文档带来美感，进一步突出文档要表达的中心思想。在Dreamweaver中，用户可以对字符的字体、字号、颜色和样式等进行深入的设置。如果希望设置文本的字符格式，则需要选中这些文字，使这些文字高亮显示。1.设置字符的字体要为字符设置字体，首先得选中要设置字体的文字，然后选择【文本】|【字体】命令，再选择相应的字体。如图3.19所示。如果在【字体】菜单中没有用户需要的字体，可以自行编辑字体列表，编辑字体列表的具体操作如下。(1)如图3.19或图3.20所示选择菜单中的【编辑字体列表】选项。这时会打开如图3.17所示的【编辑字体列表】对话框，在这里用户可以对字体列表进行设置。(2)要在【字体】列表框中添加新字体，可以单击对话框左上角的