第第33章输入和编辑网页中的基本元素章输入和编辑网页中的基本元素
网页中文本的操作
本节课堂目标：
熟练掌握网页文本的操作方法和技巧
本节教学内容：
1：文本对象的插入和格式设置（重点）
2：设置文本标题（难点）
3：段落的设置效果 （难点）
4：项目符号和编号的插入使用
5：历史记录面板的使用
•思考题：根据以前所学知识说出文本的编辑和设置属性
各包括几个方面？
•文本插入栏的按钮和属性面板的功按钮相似。
３.１.１ 认识文本按钮及属性面板
３.１.２ 插入文本和对象
１.文本是网页中最基础的载体；纯文本网页占用的存储空间
小，占用的网络带宽较少，打开速度快。
将文本（英文、中文、数字）添加到文档中的方法有以下
三种：直接输入、粘贴剪贴板中的文字、导入word格式
的文档。
复制/粘贴，巧妙使用“选择性粘贴”命令。
导入其他格式的文本（需要清理word生成的无关html
代码）
• 文件－导入－word／excel 文档
• 也可拖动文件放入网页的适当位置，将文档链接
到网页中（链接文本是链接文件的名称）。
２.插入特殊字符：在html中它被称作实体，以
名称或数字的形式出现。特殊字符如右所
示。
操作方法分别是：
– 菜单法：插入－html－特殊字符
– 插入栏按钮法：插入－文本－字符按钮
默认情况下Html中只允许字符之间包含一
个空格，输入连续的多个空格的方法：
① 设置首选参数改变默认设置
② 在输入法为全角状态下输入多个空格
３.水平线（垂直线）
插入水平线以可视方式分割文本和对象来组织信息。
插入－html－水平线
可在属性检查器中修改水平线（宽、高等）
４.插入日期：
– 菜单法；
– 插入栏按钮法
5.对插入的文本也可以执行删除、搜索、替换、检查拼
写（文本－检查拼写／shift+f7）等操作。
３.１.３ 设置文本格式
字符的样式指的是字符的外观显示方式。利用Dw可
以设置多种字符样式，如字体、加粗 、倾斜 、 下
划线 、 删除线 、 打字型 、 强调等 。
默认时 Dreamweaver使用css设置文本的格式,当
使用命令来设置格式和对齐文本 时， css规则将嵌
入到当前文档中；
也可以使用标签来对齐文本（div标签）和设置文
本格式（font标签等），但要在首选参数中进行设置。
３.１.４ 设置文本标题
文本标题来强调段落要表现的内容。在HTML中，定义了6
级标题，从1到6级，每级标题的字体大小依次递减。一段
文字只能设置一个标题级别。
在HTML中，采用如下的标记来定义标题：
<h1>和</h1> 定义标题1
<h2>和</h2> 定义标题2
<h3>和</h3> 定义标题3
每级标题的字符大小并没有一个实际上的固定的值，它
是由浏览器所决定的，为标题定义的级别只决定了标题之
间的相互大小。
3.１.５ 设置段落效果
1.设置段落格式的方法
– 使用【属性】面板的【格式】弹出式菜单
– 选择【文本】|【段落格式】菜单
2.缩进段落
所谓缩进，主要是相对于文档窗口（或浏览器窗口）左端
而言的。
– 属性检查器：“缩进”、“凸出”按钮
– 文本菜单：“缩进”、“凸出”命令
３.对齐段落
段落的对齐方式，指的是段落相对文档窗口（或浏览器窗
口）在水平位置的对齐方式。有四种对齐方式：左对齐、
居中对齐、右对齐、两端对齐。
关于文本对齐，源代码设置为：
<div align=“center / right /left /justify "> …</div>
４.添加段间距：通过添加换行符在段间添加空行
– 添加段落换行符：按enter键
– 添加换行符：按shift+enter键／添加特殊字符/换行符
换行与分段的区别：文本换行时，按Enter键换行的行距较
大（在代码区生成< p>< /p>标签），按Enter＋Shift键换
行的行间距较小（在代码区生成< br>标签）。
３.１.６创建项目列表
１. 在HTML中，从总体上分有两种类型的项目列表，一种是无
序项目列表（使用项目符号来标记项目，产生ul标签） ，另
一种是有序项目列表（使用编号来标记项目顺序，产生ol标
签）。
２.在Dreamweaver 中，一旦插好一个，下一个列表只需按
enter键即可；列表可以嵌套。
３. 创建项目列表的步骤：
① 选中要转换为项目列表的所有段落。
② 单击“属性”面板上的“项目列表”按钮或“编号列表
”按钮；也可以单击“文本”→“列表”菜单项，选择
相应的“无序列表” 、“有序列表”菜单项。
③ 这时被选中的段落文字就被转换为项目列表的形式。
本节习题和作业
1. 填空题
（1）使用属性检查器或【文本】菜单中的选项可以设置或
更改所选文本的字体特性。可以设置字体、字形（如粗
体或斜体） ______ 、和______。
（2）若要插入更多的特殊字符，请选择______ | ______ |
______或在______栏中选择______图标，选择一个字符
，然后单击【确定】。
2 . 选择题（多选）
（1）设置文本属性可以通过_______来设置。
A．属性面板 B．控制面板
C．启动面板 D．文本菜单
（2）在网页中连续输入空格的方法是_______。
A．连续按空格键
B．按下Ctrl键再连续按空格键
C．转换到中文的全角状态下连续按空格键
D．按下Shift键再连续按空格键
3.简答题：
（1）下图所示情况何时出现？
(2)如何将已经加入了粗、斜体的文字改为正常字体？
(3)如何使日期保持在页面右下角？
(4)如何使编号呈下图所示的样式？（属性面板—列表
项目按钮）
4.操作题（1）将页面中添加如下图所示的表格（暂时
可以通过导入word文档的方法实现）
（2.）制作如下的文字页面
３.２网页图像的运用
本节内容和目标：
■ 了解GIF、PNG和JPEG三种图像格式 的异同点和
使用环境。(重点、难点)
■ 掌握在Dreamweaver 中使用图像的一些基本方
法和技巧（重点）
■ 掌握编辑和设置图像的方法
■ 掌握创建图像映射和电子相册的方法
３.２.１网页中图像格式简介
图像在网页中通常起到画龙点睛的作用，它能装饰网页，表
达个人的情趣和风格，恰到好处地使用图像能使网页更加地
生动、形象和美观 。图像比文本更能直观地表达信息。
网页中图像格式有： GIF 、JPEG 、PNG 、TIFF、BMP等，
而最常用图像格式有：GIF 、JPEG 、PNG
图1 JPEG 图2 GIF 图3 PNG
1．GIF（Graphics Interchange Format）格式 (图形交换
格式)：使用最早、应用最广泛。
a.无损压缩、跨平台兼容；
b .占用磁盘空间小、支持动画，交织下载、支持透明背景
图像。
c.支持8位(256色）图像，能够很好地表现不连续色调和大
面积色彩统一的图像，如：导航条、按钮、图标、广告
条（banner）、徽标等对色彩要求不高的图像格式。
2. JPEG：Joint Photographic Expert Group（联合图
像专家组） 格式：目前最受欢迎。
a.采用特殊的压缩算法，在失真较小的前提下，对图片
进行有损压缩；
b .用来表现较为专业的或有连续色调的图像．可包含
数百万种色彩. 分辨率较高，可用于处理照片。
c. JPEG格式不支持透明色，也没有动画的概念;采用
JPEG格式对图像进行压缩后，不能再重新打开图像。
：Portable Network Graphic(便携或可移植网络
图形格式，开发于1995年)：使用量逐渐增多。
a .采用与GIF图像格式类似的压缩算法，能真实地显
示原始图像，支持透明背景，可控制压缩比，文件小,
灵活性强,完全可替代GIF格式,是fireworks软件自身
的文件格式，其扩展名为.png, 只有带扩展名dw才能
识别.
b .支持真彩色，与JPEG格式没有太大的差别，目前在
网络上得到大力推广。
c .但只有Microsoft IE (及以上版本)和Netscape
Navigator(及以上版本)才支持， GIF和JPEG不受
浏览器限制，应用较广泛。
支持监视器的伽码设置修正，可跨平台兼容。
总结：
• 当只需要静态图像且色彩要求也不高时：当所选用图像较
小时用gif格式文件小；而当所选用图像大时用jpg格式文
件小。此时png格式不具备优势。
• GIF、JPEG 、PNG这几种格式都是标准的位图格式.所谓位
图格式就是指用图片上每一点的信息来描述图像；而矢量
格式则是用线条和填充色等数学信息来描述图像。矢量格
式的文件要比位图格式的文件小得多，可表现一般的静态
画面也可以表现动画.
在Web页上显示图片之前，通常需要考虑下列三个问题：
① 确保文件较小:采用正确的格式进行优化处理 ,使图像具
有所需的像素大小
② 控制图像的数量和质量；
③ 合理使用动画。
３.２.２在网页中使用图像
1．插入图像：为了保证参数的正确，图象文件必须保存
在当前站点的images文件夹中，否则dw提示将其复制
到当前站点目录下。插入后产生img标签。
具体操作步骤：单击插入---图像命令/常用插栏的插入图像
按钮 。
2.插入图像占位符：暂时为图片占个位置，在浏览器中不
显示，在发布网站之前需用具体图象替换它，在属性检
查器中（源文件）完成替换更新。一旦插入在html代码
中自动产生一个包含属性的图象标签src和替换文本标签
（alt）。
src表示要插入图像的文件名，必须包含绝对路径或相对路
径，图像可以是GIF文件、JPEG文件或PNG文件。alt表
示图像的简单文本说明，用于不能显示图像的浏览器或浏
览器能显示图像但显示时间过长时先显示，以帮助访问者
了解图像的信息。
具体操作步骤 ：单击“插入---图像对象—图像占位符”命
令/常用插栏的插入图像—图像占位符 按钮。
在名称框中给占位符取名的命名规则：字母开头，只能包
含字母和数字，不能使用空格和ASCII字符。
3.创建鼠标经过图象（轮换图像）：只能在浏览器中查看
（在文档窗口中不能查看效果）并使用鼠标指针移过它
时发生变化的图像，由主图像（即页面首次装载时所显
示出的图像）和翻转图像（当鼠标指针掠过时所显示的
图像）组成，二者大小要一样。一旦插入在html代码中
自动产onmouseover事件。
4. 在dw中图像的编辑功能仅适用于GIF 和JPEG 图像格式。
– 在属性检面板中编辑图像
在其中可设置图像的属性参数（宽、高、替代）、对齐图
像（左、右、居中对齐）、边距、边框、改变图像的尺
寸 （也可直接拖动调整控制点）、裁剪图像、调整其对
比度、锐化图像。
– 上述设置也可通过菜单实现：修改---图像
– 用fireworks优化图像：
要方便地完成相关的处理工作，则需要图形图像处理软件的
协助。 具体操作：修改—图像---在fireworks优化图像。
在页面中合理地使用图形图像已经成为网页制作的一个
基本要求。但是并非所有图形图像都可以直接用在网页中，
大多数情况下，需要对原始图像素材进行一些处理，例如
图像优化、添加特效等，然后再在网页中使用。
５．为图像添加热点
热点即图像上不可见的区域，该区域分配了一个超链接。
为图像添加热点就是在图像上划分区域，从而设定图像上
制作超链接的范围。使用图像或图像中的某些区域来创建
超链接，为网页设计增色不少。如果我们不建立链接，只
是当鼠标移到图像的某些区域时，能显示一些提示信息或
对图的注释，那么效果也一定不错。
在Dream weaver中为图像添加热点的方法为： 选定图像，
打开图像属性面板，选择设置热点按钮，单击鼠标左键并
拖动， 在图像中设置热点形状。
６.设置图文混排和图像边距
的效果。
图像和文字的对齐有：
对齐时要先选择图像，
再选对齐方式。
设置图像边距，
可以使图像和相邻的
文字或其他图片之间
有一个间距。
7.制作电子相册：命令——创建网站相册
本节习题和作业
1填空题
（1）在计算机领域中，图像分为________和________2大
类。
（2）GIF图像采用的是________压缩格式。
2 选择题
（2）网页通常可以支持的图像格式有___________。
A．GIF B．BMP C．AVI
D．PSD E．PNG F．JPEG。
3简答题
（1）网页中常用的图像格式有哪些？各有什么特点？
如果在网页中添加动画格式的浮动广告，采用何种格
式？为什么？电子相册，应该用哪种格式最好？
(2)如何创建鼠标变换图像和图像热点？
4操作题：
搜集自己的喜爱的图片，制作一个电子相册。
上机练习
练习1 美化文字格式
制作一个文字网页，效果如图1-80所示。请按照图中的
提示信息进行制作。
设置为标题2
设置为标题3
设置为项目列
表
插入水平线
插入版权符号
图1-80 美化文字格式
练习2 图文并茂
制作一个图文并茂的网页，效果如图1-81所示。注意这里
要应用图像属性中的左对齐和右对齐项设置图文并茂的网页
效果。
图1-81 图文并茂
３３..３网页多媒体的运用（参阅教材第四章）３网页多媒体的运用（参阅教材第四章）
本节内容和目标本节内容和目标
.了解网页多媒体的文件类型了解网页多媒体的文件类型 （难点）（难点）
.了解多媒体属性的设置了解多媒体属性的设置 （重点）（重点）
.对媒体对象使用参数和行为（重点）对媒体对象使用参数和行为（重点）
在网页中使用视频和flash格式
一个优秀的网站应该不仅仅是由文字和图片组成
的，而是动态的、多媒体。为了增强网页的表现力，
丰富文档的显示效果，需用向网页中插入Flash动画、
Shockwave动画、QuickTime 影片文件、Java小程
序、mp3音频播放插件等多媒体内容。
1.网页中可用的视频文件格式有：DAT、AVI、RM、
WMV、 MPEG格式、ASF、RMVB等，通过“插入
—媒体—插件”完成这些视频文件的插入，插入后设
置hidden为false即可。经常使用的视频文件有RM 、
MPEG等。
2.常见的flash文件格式：
•flash（.fla格式）:是flash软件中创建的各种项目的
源文件。只能在flash中打开,输出成SWF或SWT文件，
才能在浏览器中使用。
•flash影片文件（.swf格式）：是经过压缩和优化了
的.fla格式文件，可在浏览器中播放。
•flash模板文件（swt格式）可以让用户修改和替换
swf 文件中的信息，使用在 flash按钮中，用户可以
使用自己的文字或链接修改模板，来创建字定义的
swf 文件并使用。
•使用flash按钮和文本：这两种对象所创建的文件格
式也是.swf，经过优化的文件的压缩版本可在浏览器
和dw中播放预览，也可在dw中编辑。
• flash动画： Flash动画以小巧、动感、富有交互
性而风靡网络。在制作网页时，将Flash动画应用
到网页中，能使网页更具动感，更富有感染力。在
网页设计中的使用非常普遍。
• flash视频文件（.flv格式）：Flash视频是
Macromedia推出的视频格式，是一种有经过编码
的音频和视频数据、适用于网络应用的媒体格式，
播放品质高，同时文件的体积比较小，通过flash
player传送。Flash视频文件的扩展名为.FLV。
• flash元素文件（.swc格式）：是一种特殊类型的flash
文件，通过将此类文件合并到网页，可以创建丰富的
internet应用程序；有可自定义的参数。
• flashpaper文件：是经过转换软件Flash Paper转换后
的文件，该软件允许把任何的可打印的文档直接转换成
Flash文档或PDF文档，并且保持原来的文件的排版格
式。 转换后的文件也可以直接插入到网页中，在网页中
可以直接阅读、搜索或打印。
总结：Flash格式虽多，但在网页中用得较多的还是.swf
格式。
3.各种格式flash的插入和属性设置
（1）插入和编辑flash动画、 flash影片和 flash模板。
• 方法有菜单法或按钮法： 插入—媒体—flash—设置
参数（autoplay、loop、volume）
• 参数设置：Flash动画控制参数的设计稍微有点难度，
不能在【属性】面板中直接设置，需要打开【参数】
对话框进行设置。
– 设置参数为menu，值为false，作用是让浏览器不
显示flash的控制菜单。
– 使Flash的背景变为透明。 单击属性面板中的“参数
”按钮，打开“参数”对话框，设置参数为wmode，
• 为transparent，这样在任何背景下，Flash动画都
能实现透明背景的显示；
• 若其值为 Window用来在网页上用影片自己的矩形
窗口来播放应用程序，表明flash应用程序与html
的层没有任何交互，并始终位于最顶层；
• 若值为opaque使应用程序隐藏页面上位于它后面
的所有显示内容。
(2)使用flash按钮（基于flash 模板的可更新按钮）：插
入—媒体—flash按钮
创建、插入、设置各选项 ——修改 ——播放预览。
在“插入Flash按钮”对话框中“样式”用来选择按
钮的外观，“按钮文本”用来输入按钮上的文字，“
字体”和“大小”用于设置按钮上文字的字体和大小，
字号变大，按钮并不会跟着改变。
注意：确认flash 按钮和html文件放在同一个文件夹下，
浏览器可以辨认文档相对连接，保存在同一文件夹下可以
保证这些链接工作正常。因为浏览器不能在flash影片中
识别站点根目录相对路径。
插入 Flash 按钮
• Flash 按钮可根据鼠标指针位置和状态的不
同，显示不同的图像，并且会在鼠标单击
时执行超链接跳转的动作。
• 定位插入点，在“插入”栏的“媒体”面
板中单击“Flash 按钮”按钮，打开“插入
Flash 按钮”对话框。
插入flash按钮效果
(3)使用flash文本
用Flash文本制作导航栏目
插入—媒体—flash文本——设置参（autoplay、loop、
volume）
确认flash文本和html文件放在同一个文件夹下，浏览器
可以辨认文档相对连接，保存在同一文件夹下可以保证这
些链接工作正常。
flash文本效果
(4)插入flashpaper文件
在浏览器中打开包含 FlashPaper 文档的页面时，浏览者
能够浏览 FlashPaper 文档中的所有页面，而无需加载新
的 Web 页。也可以搜索、打印和缩放该文档。
选择“插入”>“媒体”>“FlashPaper”。
在“插入 FlashPaper”对话框中，输入宽度和高度（以
像素为单位）指定 FlashPaper 对象在网页上的尺寸，
FlashPaper 将缩放文档以适合宽度。 单击“确定”在页
面中插入文档。
由于 FlashPaper 文档是 Flash 对象，因此页面上将出现
一个 Flash 占位符。 如果需要，在属性检查器中设置其
他属性。
(5)使用flash元素（图像查看器）：
插入、编辑
可以用来查看图像，但图需要在flash元素属性的
imgURLS中设置各个图像路径。
具体设置看下页。
通过该法可以用来制作电子相册
(6)在网页中使用shockwave动画/影片
插入—媒体—shockwave （选择*.dcr 或shockwave小
游戏）
shockwave是专门的Flash动画升级插件， shockwave
动画是用Director制作，文件后缀名是dcr。
播放shockwave动画需要安装shockwave player插件
(7)使用flash视频（ . Flv，仅 能实现）
在使用插入前，必须有一个经过编码生成的视频（ .
flv）文件。
主要有以下2种视频形式
a累进式下载视频：先下载到浏览者的电脑上，再进行播
放
b流视频：经过很短的时间缓冲后在网页上播放。
插入—媒体—flash视频
4.控制flash动画
在属性检查其中分别给插入到网页中的flash动画命名，如
图命名为main。
在网页中添加文字“播放”和“停止”或类似的按钮，
分别加上空链接（#），然后添加行为“控制
shockwave或flash”，在弹出的对话框中选择要进行控
制的flash名即可实现。
在网页中使用音频
添加音频能极好地吸引读者,烘托良好的艺术氛围,但是添加
音乐后,会让网页文件变大,增加网页下载的时间,所以在添加
音乐时,需要考虑声音文件的大小、声音品质和在不同浏览
器中的差异,适时适度的增加。
1.在网页中添加音频文件的2种方式：
•链接到音频文件：主要使用超级链接实现，提供音乐下载
或在线播放，但在线打开播放时需要读者安装好相应的播
放器。
•嵌入声音文件：可以设置网页的背景音乐,也可以提供音乐
在线播放。但在线播放时，需要浏览器安装相应的插件，
可以显示其外观及进行相应的播放、暂停和音量控制。本
章着重讲解嵌入声音文件。
2.网页中添加背景音乐的文件格式有:mid、wmv、mp3、
wav等。
mid/midi格式：音质好、文件小、反应快、可重复
播放、被多数浏览器支持，是网页中默认的背景音乐
格式，也是设计者的首选。但录制要求较高，且依赖
于声卡，多用于器乐。
MP3压缩率最高、音质最好。
WMV：
wav和aif（aiff）文件：二者相似：音质好、被多数
浏览器支持，录制。
3.嵌入声音文件的几种方式和操作思路
方法1：插入—媒体—插件
将鼠标定位到需要插入音频文件的位置，执行插入—媒
体—插件-——选择一个音频文件—设置（hidden、loop、
autostart等）参数。 如果访问者安装有能播放相应格式
文件的插件（例如 RealMedia 或 QuickTime 插件），
那么可以通过嵌入的方式将声音与视频直接插入页面中，
从而获得更多对媒体的控制（例如，可选择是否播放和
设置音量。
插件的位置和播放效果如图所示：
方法2：下载安装插件，然后选择常用插入
栏上安装的小喇叭按钮，即打开下面对话框，完成设置
即可。
Forever：设置无限循环播放
Never：不循环播放，即只播放一次
NO of times：设置播放的次数
点击“Browser”按钮选择好声音文件。
使用这种方法插入的音乐文件，其相关属性值都为
“true ”,可以实现“自动循环播放效果”。
方法3：在HTML语言中，通过<BGSOUNG>这个标记
可以嵌入多种格式的音乐文件。这是最基本的方法，也
是最常用的方法，支持现在大多的主流音乐格式，如
WAV、MID、MP3、WMA、WMV、DAT等。
具体操作是： 切换到DW的“代码”视图，将光标定位
到 </body>之前的位置，在光标的位置写下下面这段代
码： <bgsound src=“med/” ，loop=“true” /
>，可以实现音乐循环播放。
方法4：使用<embed>标签可添加的音乐格式有：RM、
WAV、WMV、MP3、WMA、MID等。使用这种方法
设置的背景音乐，只要不将窗口关闭，它会一直播放。
插入的视频和背景音乐，若能正常播放，不但取决于插
入的方式，还取决于pc机中安装的播放器，以及这些多
媒体文件和当前网页的位置关系（不在同一个文件夹也
不能保证正常播放）。
本节习题：
1网页中常用的视频文件、flash文件和声音文件分别有哪些？
各有什么特点？
2如何插入flash, flash元素,flash 按钮,flash文本？
3课后所有习题。
练习1 插入Flash并使动画背景透明
配套光盘上提供了一个Flash动画文件
（samples\part4\），这是一个白色背景的文字动画。
要求制作一个网页，设置网页背景为蓝色，将这个Flash动画插
入到网页中，并设置这个Flash动画的背景透明，这样可以和网
页背景融合在一起。效果如图所示。
练习2 Flash导航条
利用在Dreamweaver中直接制作Flash按钮的功能，制
作一个动感的Flash导航条，效果如图所示。
练习3 循环播放的网页背景音乐
利用在Dreamweaver中插入插件的功能，制作
一个网页，使这个网页具备循环播放背景音乐
的功能。
本章到处结束，谢谢合作！
预习内容：第三章 网页中的表格
