Dreamweaver制作基本标签.doc

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所示。WANGYEXX.COM2.设置页面标题和背景指定在浏览器窗口的标题栏中出现的网页标题，可帮助网站访问者了解网页内容的主题，很多搜索引擎（如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) 单击“确定”按钮应