在Dreamweaver中编辑HTML网页

教学重点了解Dreamweaver的基本操作界面掌握在网页中使用文本插入图像插入多媒体掌握链接的设置网页的布局掌握表单的使用使用CSS样式表使用行为

第一页，共42页。17.1Dreamweaver的操作界面Dreamweaver的操作界面主要由标题栏、菜单栏、文档窗口、属性面板、插入栏以及浮动面板组成，如图17.1所示。第二页，共42页。文本是网页中十分重要的部分，担负着传递信息的重要作用。虽然图像及多媒体效果在网页中所占的比例越来越大，但是在一些大型网站中，文字的主导地位是无可替代的。这是因为文字所占的存储空间非常小，这样以文本为主体的页面下载速度很快，可以最佳地利用网络带宽。17.2在网页中使用文本第三页，共42页。在文档中插入文本的具体操作步骤如下。17.2.1插入文本第四页，共42页。在文档中输入文本后，如果对文本的样式不满意，可在【属性】面板中设置文本的相关属性。设置文本属性的具体操作步骤如下。17.2.2设置文本属性第五页，共42页。17.2.3插入特殊字符特殊字符一般不能从键盘上直接输入，Dreamweaver中提供了各种特殊字符和符号，其中特殊字符包括标准7位ASCII码字符集以外的字符。在这里以插入版权符号为例讲述插入特殊字符的方法，具体操作步骤如下。第六页，共42页。17.2.4插入水平线水平线在网页文档中经常用到，它主要用于分隔文档内容，使文档结构清晰明了，合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档，如果合理放置水平线，会变得层次分明，易于阅读。下面通过实例讲述在网页中插入水平线的效果，插入水平线的具体操作步骤如下。第七页，共42页。图像和文字是网页中最重要的两个元素。一个高质量的网页是离不开图像的，制作精良的图像可以大大增强网页的美观性，使网页更加生动多彩。在页面中如何用漂亮的图像来吸引浏览者的视线是每个网站制作者都需要面对的问题。17.3插入图像第八页，共42页。17.3.1在网页中插入图像在网页中插入图像的具体操作步骤如下。第九页，共42页。17.3.2设置图像属性仅仅将图像直接插入到网页中，并不能达到正确使用图像的目的。只有了解了图像的属性以及如何设置、修改这些属性，才能创建出图文并茂的网页。设置图像属性的具体操作步骤如下。第十页，共42页。可以在【属性】面板中编辑图像，这里集合了一些常用的图像编辑工具，其中从左往右依次如下。17.3.3使用图像编辑器第十一页，共42页。17.3.4插入鼠标经过图像鼠标经过图像是一种在浏览器中查看并使鼠标指针移过它时发生变化的图像。插入鼠标经过图像，必须准备两幅图像：主图像（当首次载入页面时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两幅图像应大小相等，如果这两幅图像大小不同，Dreamweaver将自动调整第二幅图像的大小以匹配第一幅图像的属性。插入鼠标经过图像的具体操作步骤如下。第十二页，共42页。在使用Dreamweaver制作网页时可以快速、方便地为网页添加声音、影片等多媒体内容，使网页更加生动。还可以插入和编辑多媒体文件和对象，这些文件和对象主要包括Flash类、JavaApplet类、ActiveX控件类，以及各种音频、视频文件。随着宽带在线点播技术的发展，多媒体在网络上得到了更广泛的应用，对网页设计也提出了更高的要求，再不是以前在网页中制作多媒体效果时仅插入一些简单的背景音乐和音效。17.4插入多媒体第十三页，共42页。插入Flash的具体操作步骤如下。17.4.1插入Flash第十四页，共42页。17.4.2打开浏览器窗口使用【打开浏览器窗口】动作在打开当前网页的同时，还可以再打开一个新的窗口。同时还可以编辑浏览窗口的大小、名称、状态栏菜单栏等属性。打开浏览器窗口的具体操作步骤如下。第十五页，共42页。17.4.3插入JavaAppletJavaApplet是一种镶嵌在HTML网页中，由支持Java的浏览器启动运行的Java程序。插入JavaApplet制作水中倒影的具体操作步骤如下。第十六页，共42页。每个网站实际上都是由众多的网页组成，网页之间通常都是通过超链接方式相互建立关联。在Dreamweaver中，超链接的应用范围是很广的，利用它不仅可以链接到其他页面，还可以链接到其他图像文件、多媒体文件等。17.5设置链接第十七页，共42页。文字超链接是网页中最常见的超链接，它能给浏览者很直观的主题信息，对它所包含的信息一目了然。创建文字链接的具体操作步骤如下。17.5.1创建文字链接第十八页，共42页。可以将图像作为链接的对象，使网页更加美观。建立图像超链接与建立文本超链接的方法很相似。创建图像链接的具体操作步骤如下。17.5.2创建图像链接第十九页，共42页。17.5.3创建锚点链接添加锚点链接就是创建命名锚记。锚点是一种定位的标记，可以在文档中设置这种标记，并给该标记设置一个名称，以便引用。创建锚点链接的具体操作步骤如下。第二十页，共42页。本节主要介绍制作网页时的版式布局，Dreamweaver中布局网页的常见工具是表格和Div。17.6布局网页第二十一页，共42页。17.6.1使用表格表格是网页设计制作时不可缺少的重要元素。无论是用于对齐数据还是在页面中对文本进行排版，表格都体现出强大的功能。它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。第二十二页，共42页。17.6.2使用DIVDIV是一种HTML页面元素，可以理解为浮动在网页上的一个页面，它可以准确地定位到页面上的任意位置，并可以规定它的大小，通过DIV可以对网页进行精确定位。不仅如此，通过对DIV与行为的综合使用，还可以创作出赏心悦目的动作效果。第二十三页，共42页。使用表单可以制作简单的交互式页面，收集来自用户的信息。表单是网站管理者与浏览者之间沟通的桥梁。收集、分析用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。有了表单，网站不仅是“信息提供者”，同时也是“信息收集者”。一个完整的表单有两个重要的组成部分，一是页面中进行描述的HTML代码，二是服务器的应用程序或客户端脚本，用于分析处理用户在表单中输入的信息。17.7使用表单第二十四页，共42页。17.7.1插入表单表单可在文档中定义一个表单区域，表单对象都是插入在这个表单区域中的。插入表单的具体操作步骤如下。第二十五页，共42页。17.7.2插入文本域文本域可用来接受任何类型的字母、数据文本输入内容。文本域非常有用，大多数信息都可以以文本域的形式输入。文本可以以单行或多行显示，也可以以密码的形式显示，在这种情况下，输入的文本将被替换为星号或项目符号。插入文本域的具体操作步骤如下。第二十六页，共42页。17.7.3插入单选按钮和复选框单选按钮代表互相排斥的选择，在单选按钮组中选择一个按钮，就会取消选择该组中的所有其他的按钮。在复选框组中，可以同时选择任意多个使用的选项。复选框可以单独使用，也可成组使用。第二十七页，共42页。17.7.4插入列表和菜单列表框可以以列表的方式显示一组选项，根据设置的不同，可以在其中选择一项或多项。下拉列表框是列表框中的一种特例，它通常显示为一行，单击右侧的箭头，则展开下拉列表，允许进行选择，通常这种下拉列表称为“下拉菜单”。第二十八页，共42页。17.7.5插入跳转菜单跳转菜单可建立URL与列表/菜单中选项之间的关联。通过在列表中选择一项，浏览器将跳转到指定的URL。插入跳转菜单的具体操作方法如下。第二十九页，共42页。17.7.6插入按钮表单按钮可控制表单操作，使用表单按钮将输入的表单数据提交到服务器或者重置该表单，还可以将其他已经在脚本中定义的处理任务分配给按钮。插入按钮的具体操作步骤如下。第三十页，共42页。CSS样式是一组可以控制文本块或文本区域外观的格式属性。使用样式可以控制文档的格式。使用外部样式表可以控制若干文档的格式。17.8使用CSS样式表第三十一页，共42页。17.8.1CSS的基本概念所谓样式就是层叠样式表，用来控制一个文档中的某一文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载显示速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。样式表是对HTML语法的一次重大革新。如今网页的排版格式越来越复杂，很多效果需要通过CSS来实现，AdobeDreamweaverCS5在CSS功能设计上做了很大的改进。同HTML相比，使用CSS样式表的好处除了在于它可以同时链接多个文档之外，当CSS样式更新或修改后，所有应用了该样式表的文档都会被自动更新。第三十二页，共42页。17.8.2建立标签样式定义新的CSS的时候，会看到Dreamweaver提供的4种选择方式：类样式、标签样式ID和复核内容样式。第三十三页，共42页。17.8.3建立类样式类定义了一种通用的方式，所有应用了该方式的元素在浏览器中都遵循该类定义的规则。类名称必须以句点开头，可以包含任何字母和数字组合（如.mycss）。如果没有输入开头的句点，Dreamweaver将自动输入。在【新建CSS规则】对话框的【选择器类型】选项组中选择【类】选项，在【选择器名称】中输入名称。第三十四页，共42页。17.8.4建立复合内容样式复合内容样式重新定义特定元素组合的格式，或其他CSS允许的选择器表单的格式（例如，每当h2标题出现在表格单元格内时，就会应用选择器tdh2）。复合内容样式还可以重定义包含特定id属性的标签的格式（例如，由#myStyle定义的样式可以应用于所有包含属性/值对id="myStyle"的标签）。第三十五页，共42页。利用CSS可以固定字体大小，使网页中的文本始终不随浏览器改变而发生变化，总是保持着原有的大小，CSS固定字体大小的效果如图17.112所示，具体操作步骤如下。17.8.5应用CSS固定字体大小第三十六页，共42页。行为是用来动态响应用户操作、改变当前页面效果或执行特定任务的一种方法。使用行为可以使访问者与网页之间产生一种交互，以改变页面或触发任务。Dreamweaver中的行为是一个带有面板对象设计思想的工具。它事实上是由预先编写好的JavaScript代码构成。17.9使用行为第三十七页，共42页。行为由事件和动作组成，在Dreamweaver中，事件是一个具有交互性的事物，也可以是一件具有某种自动化的事情。行为被规定为依附于访问者页面上的某个特定的元素，可以是一个文本或者一个图像标记。行为有3个重要组成部分：对象、事件和动作。17.9.1行为的基本知识第三十八页，共42页。【设置状态栏文本】动作用于在浏览器窗口底部左侧的状态栏中显示消息。设置状态栏文本的具体操作步骤如下。17.9.2使用行为制作特效第三十九页，共42页。在网页中添加脚本的具体操作步骤如下。17.10在网页中添加脚本第四十页，共42页。17.11经典习题1.填空题（1）Dreamweaver的操作界面主要由_________