第7章 在网页内插入对象

第7章
在网页内插入对象
7.1 【案例 34】“中国长城名胜”网页
相关知识 1．创建网页文字的其他方法 （1）键盘输入和复制粘贴文字。最简单和最直接的输入方法是键盘输入，也可以在其他的程序或窗口中选中 一些文字，按【Ctrl+C】组合键，将文字复制到剪贴板上；然后，返回 Dreamweaver CS3“设计”视图的文档窗 口中，按【Ctrl+V】组合键，将其粘贴到光标所在位置。在 Dreamweaver CS3 中，不仅可以保留文字，而且还可 以保留部分段落的格式和文字的样式。
的颜色。
◎ 文字的对齐设置：文字的对齐是指一行或多行文字在水平方向的位置。在选中页面内的文字后，单击文字
“属性”面板中的 （左对齐）、 （居中对齐）和 （右对齐）按钮来实现。如果文字是直接被输入页
面中，则会以浏览器的边界线进行对齐。 ◎ 文字的缩进设置：要改变段落文字缩进量，可选中文字，再单击文字“属性”面板中的“文本凸出”按钮
选中文字段，单击文字“属性”面板中的 按钮，可设置有序列表。
◎ 定义列表方式：选中要排列的文字段，再单击“文本”→“列表”→“定义列表”命令。这种列表方式的
效果是：奇数行靠左，偶数行向右缩进，如图 7-1-12 所示。
（2）修改列表属性。 ◎ 首先将列表的文字按照无序或有序列表方式排列，再将鼠标指针移到文字中，单击“文本”→“列表”→
（2）使用“插入”面板。单击“插入”面板中的“文本”标签，如图 7-1-9 所示。面板中有许多文本格式控 制按钮，使用这些按钮可以方便地设置文本的格式。
图 7-1-8
设置边距
图 7-1-9 “插入”面板
2．设置文字属性 文本的属性可以通过图 7-1-5 所示的文本“属性”面板和“文本”菜单来设定。 （1）文字标题格式的设置。文本有 6 种标题格式，它们对应的字号大小和段落对齐方式都是设定好的。在“格 式”下拉列表框中可以选择各种格式，各选项的含义如下：
7.2 【案例 35】“中国布达拉宫名胜”网页 相关知识
1．插入图像
（1）用鼠标拖曳图像：拖曳一个图像文件的图标到网页文档窗口中，即可将图像添加到页面内的指定位置。 双击图像，弹出“选择图像源文件”对话框，参见图 7-1-6。 （2）利用“插入图像”工具插入图像：单击“插入”面板中的“常用”选项卡中的“图像”按钮 ，或拖曳 按钮到网页内，都可以弹出“选择图像源文件”对话框。如果“图像”按钮处显示的不是“图像”按钮 ，可 以单击其右侧的下拉按钮，弹出其下拉菜单，单击其中的“图像”按钮。 在“选择图像源文件”对话框中选中图像文件后，单击“确定”按钮，即可将选定的图像加入页面的光标处。 通常，所选图像应放在站点文件夹下的图像文件夹中。
“属性”命令，弹出“列表属性”对话框，如图 7-1-13 所示。
图 7-1-12
奇数行靠左，偶数行向右缩进
图 7-1-13 “列表属性”对话框
图 7-1-14
有序列表的 “列表属性”对话框
◎“列表类型”下拉列表框用来设置列表类型，有项目、编号、目录和菜单 4 种列表类型。项目列表的段首
为图案标志，是无序列表；编号列表的段首为数字，是有序列表。选择“编号列表”选项后，“列表属性”
置光标所在段和以下各段的列表为另一种新属性。在“重设计数”文本框中输入光标所在段和以下各段的
列表的起始数字或字母。 4．文字的复制与移动、拼写检查
（1）文字的复制与移动。在网页文档的“显示设计视图”和“显示代码视图”状态的文档窗口中，可以进 行文字的复制与移动操作，其方法与 Word 中的方法基本相同。按住【Ctrl】键的同时用鼠标拖曳选中的文字，
2．图像的移动、复制、删除和调整大小 （1）移动和复制图像：单击选中要编辑的图像，这时图像周围会出现几个黑色方形的控制柄。如果要移动或
复制图像，像移动文字那样，用鼠标拖曳图像到目标位置即可移动图像；按住【Ctrl】键并用鼠标拖曳图像到 目标位置，即可复制图像。
（2）删除图像：选中要删除的图像，再按【Delete】键即可；也可以将其剪切到剪贴板中。
“选择图像源文件”对话框中的 URL 文本框中会给出该图像的路径。如果在“相对于”下拉列表框中选择“文
档”选项，则 URL 文本框中会给出该图像文件的相对于当前网页文档的路径和文件名，例如“PIC/ BEIJING.jpg”；
如果选择“站点根目录”选项，则 URL 文本框中会给出以站点目录为根目录的路径，例如“/PIC/ BEIJING.jpg”。
（4）“替换”列表框：用来输入要替换的字符或选择要替换的字符。
（5）“选项”选项组：其内有 4 个复选框。选中“区分大小写”复选框后，可区分大小写；选中“忽略空白” 复选框后，可忽略文本中的空格；选中“全字匹配”复选框后，查找的内容必须和被查内容完全匹配；选中“使
用正则表达式”复选框后，可使用规定的表达式。
像与文字相对位置的调整。它们的含义如下所述：
◎“默认值”：使用浏览器默认的对齐方式，不同的浏览器会稍有不同。
◎“基线”：图像下沿与文字的基线水平对齐。基线不到文字的最下方。 ◎“顶端”：图像顶端与当前行中最高对象（图像或文本）的顶端对齐。
◎“居中”：图像中线与文字基线水平对齐。
◎“底部”：图像下沿与文字基线水平对齐。 ◎“文本上方”：图像的顶端与文本行中最高字符的顶端对齐。 ◎“绝对居中”：图像中线与文字中线水平对齐。 ◎“绝对底部”：图像下沿与文字下沿水平对齐。文字的下沿是指文字的最下方。 ◎“左对齐”：图像在文字的左边缘，文字从右侧环绕图像。 ◎“右对齐”：图像在文字的右边缘，文字从左侧环绕图像。 （2）图像与文字的间距的调整：是指图像与文字水平方向和垂直方向的间距。可以通过改变“水平边距”和 “垂直边距”文本框中的数值来实现，数值的单位是像素。如果在“对齐”下拉列表框中选择“右对齐”选项， 在“水平边距”文本框中输入 20，“垂直边距”文本框中输入 30，则图文混排的效果如图 7-1-1 所示。
的 按钮，可删除一个字体组合。
◎ 单击“编辑字体列表”对话框中的 按钮，使“字体列表”列表框中增加“（在以下列表中添加字体）” 选项，可以增加字体组合。 （3）文字其他属性的设置。设置文字大小、颜色和风格等属性的方法如下： ◎ 文字大小的设置：字号越大，文字也越大。默认字号是 13。在文字“属性”面板中的“大小”下拉列表 框中选择一种字号，完成字号的设定。在“大小”下拉列表框中还可以选择“极小”到“极大”及“较小” 和“较大”选项，来设置文字的大小。 ◎ 文字颜色的设置：单击文字“属性”面板中的“文本颜色”按钮 ，弹出颜色面板，利用它可以设置文字
图 7-1-15 “查找和替换”对话框 6．图文混排 当网页内有文字和图像混排时，系统默认的状态是图像的下沿和它所在的文字行的下沿对齐。如果图像较大， 则页面内的文字与图像的布局会很不协调，因此需要调整其布局。调整图像与文字混排的布局需要使用图像“属 性”面板。 （1）图像与文字相对位置的调整：图像“属性”面板中的“对齐”下拉列表框内有 10 个选项，用来进行图
依次往“选择的字体”列表框中加入字体组合中的各种字体。同时，会在“字体列表”列表框内最下方显示
新的字体。单击“确定”按钮，完成字体组合的创建。
图 7-1-10
字体组合列表项
图 7-1-11 “编辑字体列表”对话框
◎ 单击选中“编辑字体列表”对话框中“选择的字体”列表框中某字体的名称，再单击 按钮，可删除字体 组合中的一种字体；单击选中“字体列表”列表框中的一种字体组合，再单击“编辑字体列表”对话框中
或“文本缩进”按钮 。 ◎ 文字风格的设置：选中网页中的文字，单击按下“粗体”按钮 ，即可将选中的文字设置为粗体；单击按
下“斜体”按钮 ，即可将选中的文字设置为斜体。
利用命令也可以改变文字风格。单击“文本”→“样式”子菜单中的某一个命令，可以使选中的文字样式作 相应的改变。 ◎ 文字样式设置：在“样式”下拉列表框中选择“管理样式”命令，可以弹出“编辑样式表”对话框。单击 “新建”按钮就可以为文字添加样式设置。 3．设置文字列表 （1）设置列表。 ◎ 设置无序列表和有序列表：选中要排列的文字段，再单击文字“属性”面板中的 按钮，可设置无序列表；
对话框中的不可编辑选项会变为有效。 ◎ 在“列表属性”对话框的“样式”下拉列表框中可以选择列表的风格，其中各选式，段首标记为实心圆点；“项目符号”选项是段首标记为项目的图案符号；“正方形”选
项是段首标记为实心方块。 ◎ 在“列表属性”对话框的“新建样式”下拉列表框内也有上述 3 个选项，用来设置光标所在段和以下各段 的列表属性。 ◎ 在“列表类型”下拉列表框中选择“编号列表”选项后，“列表属性”对话框如图 7-1-14 所示。在“样式” 下拉列表框中可以选择列表风格。选择“[默认]”选项和“数字”选项，段首标记为阿拉伯数字；选择其他 选项，段首标记分别为大、小写罗马字母等。 ◎ 在“列表属性”对话框的“开始计数”文本框中可输入起始的数字或字母，以后各段将根据起始数字或字 母自动排列。 ◎ 在“列表属性”对话框的“列表项目”选项组中，“新建样式”下拉列表框内也有上述 6 个选项，用来设
◎“无”选项：无特殊格式的规定，仅取决于浏览器本身。 ◎“段落”选项：正文段落，在文字的开始与结尾处有换行，各行的文字间距较小。
◎“标题 1”至“标题 6”选项：标题 1 至标题 6，约为中文 1 至 6 号字大小。
◎“预先格式化的”选项：预定义的格式。 （2）创建字体组合。Dreamweaver 使用了字体组合的方法，取代了简单地给文本指定一种字体的方法。字体 组合就是多种不同字体依次排列的组合。在设计网页时，可以为文本指定一种字体组合。在浏览器中浏览该网页 时，系统会按照字体组合中指定的字体顺序自动寻找用户计算机中安装的字体，可以照顾各种浏览器和安装不同 的计算机。 ◎“字体”下拉列表框：可以弹出各种字体组合选项，如图 7-1-10 所示。 ◎ 选择图 7-1-10 中的“编辑字体列表”命令，弹出“编辑字体列表”对话框，如图 7-1-11 所示。选择其中 的“字体列表”列表框内的“（在以下列表中添加字体）”选项，双击“可用字体”列表框中的字体名称， 在“选择的字体”列表框中显示相应的字体名称；也可以单击选中某一个字体名称，再单击 按钮。