5.1 Dreamweaver制作基本标签

在上一章中已介绍了CSS样式表，不仅介绍了样式表的基本语法，还讲解了如何使用常用的样式属性对网页的字体、背景、各种表单元素和超链接等进行美化，最后简单地介绍了3种不同的样式表应用场合。

本章开始讲解使用Dreamweaver制作网页，其中重点是使用Dreamweaver实现各类HTML标签和CSS样式，难点是如何制作样式。为了使我们制作的页面更规整，我们还要研究使用Dreamweaver如何实现表格对图文进行布局、表格对表单进行布局和框架页面。

HTML基本标签在此前我们都学过，怎么在这里又提起？不知大家发现没有，我们在前面都是手写HTML代码，速度很慢，效率很低，而且容易出错。那有没有一种比较好的编写HTML代码的工具？它既能提高速度，又能提高效率，还不容易出错。有！这个工具就是Dreamweaver，它不仅提供了强大的设计功能，而且还提供了自动代码提示功能。下面我们就使用Dreamweaver通过可视化操作来实现HTML基本标签，也就是在不写一行代码的情况下，能够快速、高效地实现各类HTML标签。

一、什么是基本标签

基本标签就是我们在制作网页时，常用的一些标签，如页面背景、标题、图片、换段、换行、超链接、颜色、字号大小、对齐、空格、列表，这些都是基本标签，也是常用的标签，如图1所示。在前面已经学过这些标签，那为什么还要学呢？原因很简单，就是我们要用Dreamweaver通过可视化操作来实现这些标签，而不是手写代码，这样能大大提高开发效率，减轻网页设计人员、开发人员的负担。

图1 基本标签

二、如何使用基本标签

在使用基本标签前，我们必须先创建一个HTML文档，否则，我们的HTML标签就无处安身。

1.新建一个HTML页面

在Dreamweaver中新建页面，可采取以下3个步骤：

(1) 选择“文件”一“新建”命令或按快捷键CtrI+N，弹出“新建文档”对话框。

(2) 从“类别”列表框中选择“基本页”选项，然后从右侧的列表中选择“HTML”选项。

(3)再单击“创建”按钮。

新文档在“文档”窗口中打开，如图2所示。

2.设置页面标题和背景

指定在浏览器窗口的标题栏中出现的网页标题，可帮助网站访问者了解网页内容的主题，很多搜索引擎（如Google、百度等）也是根据网页的标题进行搜索的。

每张页面都应该设定一个标题。

要设定标题，请在“文档”工具栏（如图2所示）的“标题：”文本框中输入标题，或者从菜单中选择“修改”一“页面属性”命令。

要设定背景，请在图2所示的“属性”面板中选择“页面属性”一“背景颜色”命令。

图2 Dreamweaver CS3 新建文档界面

3.插入图片

要插入图像，请执行以下步骤。

(1) 将插入点放置在“文档”窗口中要显示图像的位置。

(2) 选择“插入”一“图像”命令。此时，弹出“选择图像源文件”对话框，您可以在此对话框中浏览要插入到网页的图像。该对话框还包含“图像预览”选项。选择该选项可以在插入图像前，先查看该图像的缩略图。

(3) 选择要插入的图像，然后单击“确定”按钮。图像即被插入到“文档”窗口中。

4.插入Flash

无论Flash文件是广告条、按钮，还是交互式动画，都可以转换为.swf格式。这种格式比标准GIF动画有更多功能，包括高级动画、下载速度更快和流功能。要插入Flash，

请执行以下步骤。

(1) 在“文档”窗口中，将插入点放置在要插入Flash的地方。

(2) 选择“插入”一“媒体”一“Flash”命令。即会出现“选择文件”对话框（如图3所示）。

(3) 选择一个影片文件。

(4) 单击“确定”按钮。

此Flash文件即被插入“文档”窗口中，并显示为灰色矩形，矩形中间是Flash徽标。在“属性”检查器中可以设置影片的宽度和高度。

图3 “选择文件”对话框

5.创建超链接

超级链接（简称为超链接）是指向到另一文件（图形、音频、视频）或同一文档的另一个部分的链接。当用户单击超级链接时，就会跳转到链接中指定的网址(URL)。

第一种：使用Dreamweaver链接到其他文档

(1) 在“文档”窗口中选择文本或某个图像作为链接。

(2) 打开“属性”检查器（选择“窗口”一“属性”命令）。

(3) 单击“链接”字段右边的文件夹（“浏览文件”）图标进行浏览，然后选择一个文件。

(4) 此时将弹出“选择文件”对话框。在此可以浏览并选择想要链接打开的文件。

(5) 在“选择文件”对话框中，到链接文档的路径显示在URL字段中。从“相对于”下拉列表框中选择路径是否相对于文档。

(6) 单击“确定”按钮应用该链接。

(7) 在“属性”检查器中，从“目标”下拉列表框中选择要打开文件的位置。要使链接的文档显示在除当前窗口或框架以外的其他位置，请从“目标”下拉列表框中选择一个选项。

第二种：使用Dreamweaver链接到同一文档的特定位置

通过首先创建命名锚记（通常也简称锚），然后使用“属性”检查器链接到文档的特定部分。

创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

创建命名锚记，请执行以下操作。

(1) 在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方。

(2) 执行下列操作之一：

● 选择菜单“插入”一“命名锚记”命令。

● 按下CtrI+Alt+A组合键。

● 在插入栏的“常用”类别中，单击“命名锚记”按钮。

此时将显示“命名锚记”对话框，如图4所示。

图4 ”命名锚记”对话框

(3) 为锚记命名。在此示例中，锚记名称设置为“helpme”。

锚记标记将会显示在插入点上。以类似方法在文档中创建任意多个锚记，如图5所示。

图5 在文档中创建命名锚记

链接到命名锚记，请执行以下操作。

(1) 在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。

(2) 在“属性”检查器的“链接”文本框中，输入一个数字符号(#)和锚记名称。

例如：

要链接到当前文档中名为“helpme”的锚记，输入#helpme。

小经验：由于锚记名称区分大小写，请在链接选项中仔细输入锚记名称。还需记住，在“链接”文本框中输入的名称必须与锚记的名称完全一致。

6.换段、换行

要将段落格式应用于文本块，请执行以下步骤。

(1) 将插入点放置在文本块的任一位置。

(2) 然后执行以下步骤之一：

●  从“属性”检查器中的“格式”下拉列表框中选择“段落”选项。

●  选择“文本”一“段落格式”一“段落”命令。

要将换行格式应用于文本块，请执行以下操作。

(1) 将插入点放置在该文本块的需要换行的位置。

(2) 然后按下Shift+Enter组合键。

7.格式化文本

在文档中输入文本后，若对文本的格式不满意，可在“属性”面板中设置文本的相关属性，如图6所示。设置文本属性具体操作步骤如下。

图6 “属性”面板

(1) 选中要设置属性的文本，选择“窗口”一“属性”命令，打开“属性”面板如图6所示。

(2) 选中文本后，在“属性”面板中单击“大小”右边的下拉列表框可改变字体的 大小。

(3) 选中文本后，然后执行以下步骤之一可改变文本对齐方式：

●  在“属性”面板中，单击“文本对齐”按钮。

●  选择“文本”一“对齐”命令，选择对齐方式。

(4) 要改变文本的颜色，单击“属性”面板中的文本颜色卡右下甬的下三角按钮，选择您喜好的颜色即可。

8.插入特殊字符

要在Dreamweaver中添加空格，请执行以下步骤。

(1) 将插入点放置在要添加空格的位置。

(2) 选择“插入”一“HTML”一“特殊字符”一“不换行空格”命令。

9.创建列表

列表可有效地将主题或数据与文档的其他部分分开。最常用的列表类型有两种：项目列表和编号列表。项目列表也称为“无序列表”，编号列表也称为“有序列表”。

创建列表时，既可以先输入列表文本，再将其没置为项目列表／编号列表，也可以在输入文本时将其设置为项目列表／编号列表。通过“列表属性”对话框，可以应用不同的项目符号或编号样式。项目列表共有两种样式：项日符号（圆圈）和正方形。编号列表则有多种编号样式，如罗马字母和字母等。

要创建列表，请执行以下步骤。

(1) 在文档中，将插入点放置在要显示第一个列表项的位置。

(2) 请执行以下步骤之一：

● 在“属性”检查器中，单击“项目列表”或“编号列表”按钮麓幽，即出现项目符号或编号。

● 选择“文本”一“列表”一“项目列表”或“编号列表”命令。

(3 )输入项目名称，然后按Enter键。

(4) 输入下一个项目，再按Enter键。重复以上操作，直到完成添加所有列表项。

要改变整个列表的样式，请执行以下步骤。

(1) 将插入点放置在列表中的任意位置。

(2) 选择“文本”一“列表”一“属性”命令，或者单击“属性”检查器上的“列表项目”按钮隔蒸藤瑟囊，即出现“列表属性”对话框。

(3) 从“列表类型”下拉列表框中选择一种列表类型。

(4) 当“列表类型”为“编号列表”时，在“开始计数”文本框中，输入列表的起始编号。

(5) 单击“确定”按钮应用修改。

本节作业：

制作如下图网页。

注意事项：

1.全部在Dreamweaver环境下完成，观察Dreamweaver自动生产的代码。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第五章案例及作业资源 返回《HTML入门经典》教程列表