Dreamweaver制作基本标签16.docVIP

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.COM 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) 在“属性”检查器中，从“目标”下拉列表框中选择要打开文件的位置。要使链接的文档显示在除当前窗口或框架以