第17章 在Dreamweaver中编辑HTML网页

1、Dreamweaver是一个可视化的网页设计和网站管理工具。它提供了强大的设计工具，在不用书写一行代码的情况下，就能够快速创建各种极具动态HTML特性的网页。Dreamweaver是完全可定制的，用户可以通过书写JavaScript代码为Dreamweaver创建新的行为和属性面板，以增强Dreamweaver本身的功能。了解Dreamweaver的基本操作界面 掌握在网页中使用文本 插入图像 插入多媒体 掌握链接的设置 网页的布局 掌握表单的使用 使用CSS样式表 使用行为 Dreamweaver 的操作界面主要由标题栏、菜单栏、文档窗口、属性面板、插入栏以及浮动面板组成，如图17.1所示。

2、文本是网页中十分重要的部分，担负着传递信息的重要作用。虽然图像及多媒体效果在网页中所占的比例越来越大，但是在一些大型网站中，文字的主导地位是无可替代的。这是因为文字所占的存储空间非常小，这样以文本为主体的页面下载速度很快，可以最佳地利用网络带宽。在文档中插入文本的具体操作步骤如下。17.2.1 17.2.1 插入文本插入文本在文档中输入文本后，如果对文本的样式不满意，可在【属性】面板中设置文本的相关属性。设置文本属性的具体操作步骤如下。17.2.2 17.2.2 设置文本属性设置文本属性17.2.3 17.2.3 插入特殊字符插入特殊字符特殊字符一般不能从键盘上直接输入，Dreamweaver

3、中提供了各种特殊字符和符号，其中特殊字符包括标准7位ASCII码字符集以外的字符。在这里以插入版权符号为例讲述插入特殊字符的方法，具体操作步骤如下。17.2.4 17.2.4 插入水平线插入水平线水平线在网页文档中经常用到，它主要用于分隔文档内容，使文档结构清晰明了，合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档，如果合理放置水平线，会变得层次分明，易于阅读。下面通过实例讲述在网页中插入水平线的效果，插入水平线的具体操作步骤如下。图像和文字是网页中最重要的两个元素。一个高质量的网页是离不开图像的，制作精良的图像可以大大增强网页的美观性，使网页更加生动多彩。在页面中如何用漂亮的图像来吸引

4、浏览者的视线是每个网站制作者都需要面对的问题。17.3.1 17.3.1 在网页中插入图像在网页中插入图像在网页中插入图像的具体操作步骤如下。17.3.2 17.3.2 设置图像属性设置图像属性仅仅将图像直接插入到网页中，并不能达到正确使用图像的目的。只有了解了图像的属性以及如何设置、修改这些属性，才能创建出图文并茂的网页。设置图像属性的具体操作步骤如下 。可以在【属性】面板中编辑图像，这里集合了一些常用的图像编辑工具，其中从左往右依次如下。17.3.3 17.3.3 使用图像编辑器使用图像编辑器17.3.4 17.3.4 插入鼠标经过图像插入鼠标经过图像鼠标经过图像是一种在浏览器中查看并使鼠

5、标指针移过它时发生变化的图像。插入鼠标经过图像，必须准备两幅图像：主图像（当首次载入页面时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两幅图像应大小相等，如果这两幅图像大小不同，Dreamweaver将自动调整第二幅图像的大小以匹配第一幅图像的属性。插入鼠标经过图像的具体操作步骤如下。在使用Dreamweaver制作网页时可以快速、方便地为网页添加声音、影片等多媒体内容，使网页更加生动。还可以插入和编辑多媒体文件和对象，这些文件和对象主要包括Flash类、Java Applet类、ActiveX控件类，以及各种音频、视频文件。随着宽带在线点播技术的发展，多媒体在

6、网络上得到了更广泛的应用，对网页设计也提出了更高的要求，再不是以前在网页中制作多媒体效果时仅插入一些简单的背景音乐和音效。插入Flash的具体操作步骤如下。17.4.1 17.4.1 插入插入FlashFlash17.4.2 17.4.2 打开浏览器窗口打开浏览器窗口使用【打开浏览器窗口】动作在打开当前网页的同时，还可以再打开一个新的窗口。同时还可以编辑浏览窗口的大小、名称、状态栏菜单栏等属性。打开浏览器窗口的具体操作步骤如下。17.4.3 17.4.3 插入插入Java AppletJava AppletJava Applet是一种镶嵌在HTML网页中，由支持Java的浏览器启动运行的Jav

7、a程序。插入Java Applet制作水中倒影的具体操作步骤如下 。每个网站实际上都是由众多的网页组成，网页之间通常都是通过超链接方式相互建立关联。在Dreamweaver中，超链接的应用范围是很广的，利用它不仅可以链接到其他页面，还可以链接到其他图像文件、多媒体文件等 。文字超链接是网页中最常见的超链接，它能给浏览者很直观的主题信息，对它所包含的信息一目了然。创建文字链接的具体操作步骤如下。17.5.1 17.5.1 创建文字链接创建文字链接可以将图像作为链接的对象，使网页更加美观。建立图像超链接与建立文本超链接的方法很相似。创建图像链接的具体操作步骤如下。17.5.2 17.5.2 创建图

8、像链接创建图像链接17.5.3 17.5.3 创建锚点链接创建锚点链接添加锚点链接就是创建命名锚记。锚点是一种定位的标记，可以在文档中设置这种标记，并给该标记设置一个名称，以便引用。创建锚点链接的具体操作步骤如下。本节主要介绍制作网页时的版式布局，Dreamweaver中布局网页的常见工具是表格和Div。17.6.1 17.6.1 使用表格使用表格表格是网页设计制作时不可缺少的重要元素。无论是用于对齐数据还是在页面中对文本进行排版，表格都体现出强大的功能。它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。17.6.2 17.6.2 使用使用

9、DIVDIVDIV是一种HTML页面元素，可以理解为浮动在网页上的一个页面，它可以准确地定位到页面上的任意位置，并可以规定它的大小，通过DIV可以对网页进行精确定位。不仅如此，通过对DIV与行为的综合使用，还可以创作出赏心悦目的动作效果。使用表单可以制作简单的交互式页面，收集来自用户的信息。表单是网站管理者与浏览者之间沟通的桥梁。收集、分析用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。有了表单，网站不仅是“信息提供者”，同时也是“信息收集者”。一个完整的表单有两个重要的组成部分，一是页面中进行描述的HTML代码，二是服务器的应用程序或客户端脚本，用于分析处理用户在表单中输入

10、的信息。17.7.1 17.7.1 插入表单插入表单表单可在文档中定义一个表单区域，表单对象都是插入在这个表单区域中的。插入表单的具体操作步骤如下。17.7.2 17.7.2 插入文本域插入文本域文本域可用来接受任何类型的字母、数据文本输入内容。文本域非常有用，大多数信息都可以以文本域的形式输入。文本可以以单行或多行显示，也可以以密码的形式显示，在这种情况下，输入的文本将被替换为星号或项目符号。插入文本域的具体操作步骤如下。17.7.3 17.7.3 插入单选按钮和复选框插入单选按钮和复选框单选按钮代表互相排斥的选择，在单选按钮组中选择一个按钮，就会取消选择该组中的所有其他的按钮。在复选框组中

11、，可以同时选择任意多个使用的选项。复选框可以单独使用，也可成组使用。17.7.4 17.7.4 插入列表和菜单插入列表和菜单列表框可以以列表的方式显示一组选项，根据设置的不同，可以在其中选择一项或多项。下拉列表框是列表框中的一种特例，它通常显示为一行，单击右侧的箭头，则展开下拉列表，允许进行选择，通常这种下拉列表称为“下拉菜单”。17.7.5 17.7.5 插入跳转菜单插入跳转菜单跳转菜单可建立URL与列表/菜单中选项之间的关联。通过在列表中选择一项，浏览器将跳转到指定的URL。插入跳转菜单的具体操作方法如下。17.7.6 17.7.6 插入按钮插入按钮表单按钮可控制表单操作，使用表单按钮将输

12、入的表单数据提交到服务器或者重置该表单，还可以将其他已经在脚本中定义的处理任务分配给按钮。插入按钮的具体操作步骤如下。CSS样式是一组可以控制文本块或文本区域外观的格式属性。使用样式可以控制文档的格式。使用外部样式表可以控制若干文档的格式。17.8.1 CSS17.8.1 CSS的基本概念的基本概念所谓样式就是层叠样式表，用来控制一个文档中的某一文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载显示速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。样式表是对HTML语法的一次重大革新。如今网页的排版格式越来越复杂，很多效果需要通过CSS来实现，Adobe Dreamw

13、eaver CS5在CSS功能设计上做了很大的改进。同HTML相比，使用CSS样式表的好处除了在于它可以同时链接多个文档之外，当CSS样式更新或修改后，所有应用了该样式表的文档都会被自动更新 。17.8.2 17.8.2 建立标签样式建立标签样式定义新的CSS的时候，会看到Dreamweaver提供的4种选择方式：类样式、标签样式ID和复核内容样式。17.8.3 17.8.3 建立类样式建立类样式类定义了一种通用的方式，所有应用了该方式的元素在浏览器中都遵循该类定义的规则。类名称必须以句点开头，可以包含任何字母和数字组合（如.mycss）。如果没有输入开头的句点，Dreamweaver将自动输

14、入。在【新建CSS规则】对话框的【选择器类型】选项组中选择【类】选项，在【选择器名称】中输入名称 。17.8.4 17.8.4 建立复合内容样式建立复合内容样式复合内容样式重新定义特定元素组合的格式，或其他CSS允许的选择器表单的格式（例如，每当h2标题出现在表格单元格内时，就会应用选择器tdh2）。复合内容样式还可以重定义包含特定id属性的标签的格式（例如，由#myStyle定义的样式可以应用于所有包含属性/值对id=myStyle的标签）。利用CSS可以固定字体大小，使网页中的文本始终不随浏览器改变而发生变化，总是保持着原有的大小，CSS固定字体大小的效果如图17.112所示，具体操作步骤

15、如下。17.8.5 17.8.5 应用应用CSSCSS固定字体大小固定字体大小行为是用来动态响应用户操作、改变当前页面效果或执行特定任务的一种方法。使用行为可以使访问者与网页之间产生一种交互，以改变页面或触发任务。Dreamweaver中的行为是一个带有面板对象设计思想的工具。它事实上是由预先编写好的JavaScript代码构成。行为由事件和动作组成，在Dreamweaver中，事件是一个具有交互性的事物，也可以是一件具有某种自动化的事情。行为被规定为依附于访问者页面上的某个特定的元素，可以是一个文本或者一个图像标记。行为有3个重要组成部分：对象、事件和动作。17.9.1 17.9.1 行为的基本知识行为的基本知识【设置状态栏文本】动作用于在浏览器窗口底部左侧的状态栏中显示消息。设置状态栏文本的具体