添加网页元素

1、1第第4 4章章 添加网页元素添加网页元素 网页中最基本的元素为文本与图像，这两种元素可以组成最简单的网页。要想使网页的视觉效果更加丰富，那么Flash动画的加入必不可少。其中文本能够直接在Dreamweaver中创建与编辑，而图像和Flash动画则需要通过插入的方式显示在其中。本章学习要点：本章学习要点：2 输入文本 创建段落 插入图像对象 插入Flash元素 创建超级链接4.1 4.1 网页文本网页文本3 文本是网页中不可缺少的内容之一，是网页中最基本的元素。由于其存储空间非常小，所以在一些大型网站中，文字的主导地位是无可替代的。而网页中的文本一般以普通文字、段落或者各种项目符号等形式显示

2、。输入各种文本输入各种文本4 在网页中，文本以多种形式展示，来表达不同的信息。最常见的为词组或者一句话，有时也会出现注册商标或者版权符号等特殊符号等。下面详细介绍各种类型的文本输入方法。1 1输入文本输入文本52 2插入特殊符号插入特殊符号3 3插入水平线插入水平线创建段落与列表创建段落与列表 对于文字信息较多的网页，文本以段落形式显示，使网页的美观、易读性大大增加。而文本除了简单的文本段落，还有一种排列方式，就是项目符号。数据信息以后者形式显示，能够更加方便查询。671 1创建文本段落创建文本段落 段落指的是一段格式上统一的文本。在文档窗口中，每输入一段文字，按下Enter键后，已经输入的文

3、字转换为段落，在光标后再次输入的文字自动生成一个段落。2 2创建项目符号创建项目符号 在Dreamweaver中包含两种项目列表，一种是有序项目列表（编号列表），另外一种是无序项目列表。使用不同的列表形式，能够有效地将网页中相关的项目组织在一起。4.2 4.2 网页图像网页图像 网页中有了图像才显得生动，并且图像还具有直观、生动的特点。图像还能够跨越语言、编码标准、人种、地域和年龄的差异。但是图像的增加，也会使网页的下载时间大大增加，所以设计网页时要整体考虑图像的数目和大小。8插入普通图像插入普通图像 网页中最常见的图像是直接插入式图像，该图像插入网页以后，在正常情况下不可以在相同的位置输入文

4、本，或者再次插入图像。还有一种是为插入式图像做准备的图像，就是占位图像。占位图像其实是图形，是在准备好将最终图像添加到Web页面之前使用的图形。9101插入式图像插入式图像 在网页中插入图像的方法非常简单，将光标放置在文档空白位置后，将【插入】面板切换到【常用】选项卡，单击其中的【图像】按钮 ，选择图片即可插入到网页中。112占位图像占位图像 在设计网页的时候，往往会遇到这样的情况：已经有了网页的整体构图，但是图像还没有准备好。这时候可以使用图像占位符插入到需要插入图像的位置，等以后图像制作完成再插入图像。插入鼠标经过图像插入鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针经过时发

5、生变化的图像。若要插入鼠标经过图像，必须具有两幅图像：主图像和次图像，并且两幅图像尺寸相同。12插入导航条插入导航条 导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。虽然鼠标经过图像也可以制作导航条，但是通过【插入】|【图像对象】|【导航条】命令创建的导航条，可以包括4种状态：【状态图像】、【鼠标经过图像】、【按下图像】和【按下时鼠标经过图像】。13插入插入PhotoshopPhotoshop智能图像智能图像 在旧版本的基础上，Dreamweaver CS4不仅能够插入PSD格式的图像，还能够在修改PSD图像文档后，允许在Dreamweaver中以简单的方法直接更新输出的图像。并且

6、还提供了各种方式，插入Photoshop中的图像。144.3 4.3 图像属性图像属性 插入网页中的图像，在默认状态下使用的是原图片的大小、颜色等属性。而根据不同的网页要求，需要适当地重新调整图像属性。图像属性中既包括基本属性，比如大小、对齐方式等，也包括改变图像本身的属性，比如亮度/对比度、锐化等。15图像基本属性图像基本属性 Dreamweaver中的【属性】检查器是相对应的，选中不同的元素会显示相应的属性参数。如果选中图片后，【属性】检查器中就会显示该图片的各个属性参数。其中图像【属性】检查器中各项参数设置如表所示。16图像编辑功能图像编辑功能 Dreamweaver提供的图像编辑功能，

7、可以直接在该软件中编辑图像，而无需使用外部图像编辑应用程序（比如Fireworks）。例如亮度和对比度、锐化、裁切和图像的重新取样等。171 1裁剪编辑功能裁剪编辑功能182 2亮度编辑功能亮度编辑功能 修正过暗或者过亮的图像时通常使用【亮度和对比度】，这将影响图像的高亮显示、阴影和中间色调。193 3锐化编辑功能锐化编辑功能 锐化可以通过增加图像边缘的对比度来调整图像的焦点。204 4使用外部软件编辑图像使用外部软件编辑图像 虽然在Dreamweaver中可以进行简单地图像编辑，但是不能够做进一步详细地编辑，这时就可以通过第三方软件来编辑图像，其方法与PSD智能对象修改相似。4.4 4.4

8、插入插入FlashFlash元素元素 网页中常见的、具有动画效果的Banner或者导航条，都是通过Dreamweaver插入的Flash动画。而常见的Flash动画包括两种，一种是普通动画，另一种是透明动画。21221 1普通普通FlashFlash动画动画 普通Flash动画的插入方法非常简单，将光标放置在将要插入动画的位置，单击【常用】选项卡中的【Flash】按钮，选择Flash文件，即可在文档中显示为一个灰色的方框，其中有Flash标志。Flash动画的属性设置232 2透明动画透明动画 当插入的Flash动画没有背景图像时，就可以通过【属性】检查器中的【参数】选项将其设置为透明动画。创

9、建创建FlashFlash视频视频 FLV流媒体格式是一种新的视频格式，全称为Flash Video。从Flash MX 2004开始就对其提供了完美的支持，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。在Dreamweaver中可以直接导入Flash Video。244.5 4.5 超级链接载体超级链接载体 网络中的所有资源都是通过超级链接联系在一起的。链接能使网页从一个页面跳转到另一个页面。成功地运用链接可以使网页变得更方便、更清晰和更富有灵性。 所谓链接，就是当鼠标移动到某些文字或者图片上时，单击就会跳转到其他的页面。这些文字或者

10、图片称为热点，跳转到的页面称为链接目标，热点与链接目标相联系的就是链接路径。链接路径分为绝对路径和相对路径。25文本链接文本链接 要想创建超级链接，首要前提是准备要链接的文件，这里同样准备的是网页，然后开始创建链接。要创建文本链接，首先要选中文本，接着单击【常用】选项卡中的【超级链接】按钮 ，然后在【链接】文本框右侧单击【浏览】按钮 ，选择要链接的文件。26图像链接图像链接 网页中的图像除了具有装饰效果外，还可以添加超级链接。在Dreamweaver中，图像有两种链接，一种为普通链接，另一种为具有翻转效果的链接。27281具有翻转效果的链接具有翻转效果的链接 在网页中插入图像时介绍了一种鼠标经

11、过图像，该图像在插入的对话框中即使没有设置链接选项，但是为了具有经过效果为其添加了空链接，这在鼠标经过图像的【属性】检查器中可以看到。2 2普通链接普通链接 图像的普通链接方法简单，只要选中插入的图像后，在【属性】检查器中单击【链接】文本框右侧的【浏览文件】按钮，选择要链接的文件即可，这里的链接文件选择的是一幅图像。294.6 4.6 超级链接方式超级链接方式 虽然网页中的链接载体为文本与图像，但是链接文件的不同，其链接方式也会有所不同。比如在同一个网页中实现链接，或者在一幅图像中实现局部链接，以及常见的邮件链接等。30锚点链接锚点链接 创建命名锚记（简称锚点）就是在文档中设置位置标签，并给该位置设置一个名称，以便引用。通过创建锚点，可以使链接指向当前文档或者不同文档中的指定位置。锚点常常被用来实现到特定的主题或者文档顶部的跳转链接，使访问者能够快速浏览到选定的位置，加快信息检索速度。创建锚点链接，要设置一个命名锚点，该命名锚点就是链接目标。31热点链接热点链接 要想在一幅图像中打开不同的网页，就需要在一幅图像中同时添加不同的超级链接。