大学计算机基础大学计算机基础————系统工具与环境系统工具与环境（文科用）（文科用）

赵 欢 肖德贵 杨小林 陈 娟 吴蓉晖编著

第三部分 网页设计与制作第三部分 网页设计与制作第第 99 章网页制作基础章网页制作基础

大学计算机基础——系统工具与环境（文科用）

2大学计算机基础——系统工具与环境

大学计算机基础——系统工具与环境 3

文字在网站的设计中包括正文、标题、特殊字符、滚动文字等，是网页设计最基本的元素之一。文字的颜色、大小、间距等可任意设置。

4大学计算机基础——系统工具与环境

输入文字时，将视图切换为设计模式，然后在可视化编辑窗口中，将光标定位在适当的位置，直接输入文字。中间要分段的地方，直接按回车键。也可以从外部导入文本。打开记事本、 Word 等应用程序，复制文本，在 Dream weaver 编辑窗口粘贴即可。 Dream weaver CS4 不保留其他程序的文本格式。但是从浏览器窗口的网页中所复制的文本，粘贴到 Dream weaver 编辑窗口中，会保留大小、颜色等大部分格式。

5大学计算机基础——系统工具与环境

在可视化编辑窗口输入文字的长度超过了 Dream weave 窗口的显示范围， 文字将自动换到下一行。如果用 Enter 键换行，则将对文本进行分段，换行的行距较大。而用 Shift+Enter 组合键换行，将在文本中插入换行符，文本的行距为正常行距。或选择“插入栏”的“文本”类的“字符”按钮 菜单下的 ，也可以插入换行符。

6大学计算机基础——系统工具与环境

在在 Dream weaver 中，连续敲击空格键时仅仅只输入一个空格。若要输入多个连续的空格，可以选择“插入栏”的“文本”类的“字符”按钮下的 。或切换到中文输入状态，设置为全角输入状态，再敲击空格键。

大学计算机基础——系统工具与环境 7

如果属性面板没有显示，可以使用组合键 [Ctrl]+[F3] 或菜单【窗口】的【属性】命令打开属性面板。或在选中文字后，单击右键，选择快捷菜单的【属性】命令打开属性面板。

大学计算机基础——系统工具与环境 8

Dream weaver 中定义了七种段落格式，使用属性面板中的格式下拉列表框，可以将所选的文本应用一种段落格式。选择“段落”，则文本应用 P 标签的默认格式， 选择“标题1” ，则文本添加 <H1> 标签，应用标题 1 格式……。

大学计算机基础——系统工具与环境 9

添加中文字体：选择主菜单【格式】的【字体】的【编辑字体列表】命令

大学计算机基础——系统工具与环境 10

可以选择文字大小以像素（ px ）、点数（ pt ）、英寸、厘米、毫米、 12pt 字、字体高度中的一种为度量单位，然后在“大小”下拉菜单选择一种适当的大小

大学计算机基础——系统工具与环境 11

选中文字后，在文本属性面板上单击 按钮文字变为粗体，单击 按钮文字变为斜体。

大学计算机基础——系统工具与环境 12

对齐方式的作用对象是整个段落文字，将光标放在一个段落文字中的任意位置，单击属性面板的 按钮实现左对齐。 按钮实现居中对齐， 按钮实现右对齐， 按钮实现两端对齐。选中多个段落，可同时设置这些段落的对齐方式。

大学计算机基础——系统工具与环境 13

选中文字后，在文本属性面板上单击 按钮文字变为粗体，单击 按钮文字变为斜体。

大学计算机基础——系统工具与环境 14

当显示多个相关的条目时，使用列表方式可以清楚地表示出各个条目的并列关系。项目列表按序可分为无序列表和有序列表两种形式。无序列表通常用各种几何符号来表示其列表关系，主要用于一种并列关系的元素组合，各列表项之间并不存在先后主次的顺序。选中要设为无序列表的多个段落，单击 按钮将其变为项目列表，每个段落的前面自动加上项目符号。

有序列表通常用数字或字母来表示各个条目的先后关系。选择要应用有序项目符号的所有段落，单击 按钮可将其变为编号列表，每个段落的前面自动加上编号。默认状态下使用的编号为“数字序列”，用户可以根据需要更改编号的样式。要改变编号或列表的样式，选中定义为列表的文字，单击右键，在快捷菜单中选择【列表】的【属性】，打开“列表属性”对话框。在样式下拉列表中，用户可选择编号的样式。

大学计算机基础——系统工具与环境 15

大学计算机基础——系统工具与环境 16

文本属性面板上的 按钮和 按钮可设置列表文字的凸出和缩进。设置多级编号时，可使用这两个按钮来升高或降低编号的级别。

大学计算机基础——系统工具与环境 17

水平线可用于页面上内容的分隔。单击“插入栏”的“常用类”的水平线按钮 ，或选择主菜单【插入】的【 HTML】的【水平线】命令，在编辑窗口会加入一条水平线。单击该水平线 ,可在属性面板中设置水平线的属性，如宽度、高度、对齐方式等

大学计算机基础——系统工具与环境 18

单击“插入栏”的“常用类”的日期按钮 ，打开“插入日期”对话框。用户可以选择日期格式，还可以选择是否每次保存文件时都自动更新该日期。

大学计算机基础——系统工具与环境 19

单击主菜单【插入】的【 HTML】的【特殊字符】菜单命令，可以在光标位置插入所选择的字符。

20大学计算机基础——系统工具与环境

实训任务：在站点“我的主页”中建立网页“ xg” ，并编辑以下内容：将文本文件“校歌”的文字复制到网页中。在网页开始处插入文字“湖南大学校歌”，并设置其为黑体， 36号，红色，居中。在第一句的结尾处（萧友梅先生作曲）加上换行符。在第一句和第二句的开头处各插入四个空格。在“校歌歌词”和“歌词注释”前插入水平线在“校歌歌词”和“歌词注释”前设置项目符号在校歌的歌词（从“麓山巍巍”到“扬我国光”）前加入项目符号，并设置文本缩进一层。在歌词的注释（从“泱泱”到“治国平天下”）前加入列表符号，并设置文本缩进一层。

21大学计算机基础——系统工具与环境

大学计算机基础——系统工具与环境 22

图像是网页中重要的元素之一。在 Dream weaver 中可以方便地将图像插入到网页并进行各种处理，用来展示照片、图画或者修饰页面，也可以将图像作为背景图像。

大学计算机基础——系统工具与环境 23

网页中的图像分为正文图像和装饰图像。正文图像一般是照片，尺寸较大，是网页内容的一部分。装饰图像用于提供网页的美化效果，如边框、艺术字、小点缀、作为页面或局部的背景，在页面上面起导航作用，制作时应避免使用过大的图像。Dream weaver 和大多数浏览器一样，支持使用JPG 、 PNG 、 GIF 格式的图像。

大学计算机基础——系统工具与环境 24

GIF 格式GIF 格式一般只支持 256 色，不能用于存储真彩的图像文件，是存储非连续色调图像或颜色比较单一的图像。但GIF支持透明色，可以使图像浮现在背景之上，且GIF89A 格式的 GIF 图像可以产生动画效果。 GIF 图像文件扩展名为 .gif 。 GIF 图像的制作软件较为多，例如Photoshop 、 Animagic GIF 、 Ulead Gif Animator 等。

大学计算机基础——系统工具与环境 25

JPEG 格式JPEG 格式支持 24bit真彩色，是存储照片或连续色调图像的较好格式。在图像处理软件中，以 JPEG 格式储存时，提供多级压缩级别。由于文件经过压缩，可减少网络的传输时间，适合应用于互联网。 JPEG 图像文件的扩展名为JPG 或 JPEG 。

大学计算机基础——系统工具与环境 26

PNG 格式PNG 格式是采用无损压缩方式的可携式网络图像，是目前最不失真的格式，具有 gif 和 jpg 的色彩模式。 PNG 格式同样支持透明图像的制作，但不支持动画应用效果。在Fireworks软件中，文件的默认格式就是 PNG 。

大学计算机基础——系统工具与环境 27

网页中的图像不是保存在网页文件中，而是单独的图像文件。在网页中要使用的图像文件必须保存在站点文件夹中。大多数网站会将图像文件保存在专门的文件夹中，常见的是将图像文件保存在 images 文件夹中。

大学计算机基础——系统工具与环境 28

选择【插入】菜单的【图像】命令，或单击“插入栏”中“常用类”的“图像”按钮 ，打开“选择图像源文件”对话框。

大学计算机基础——系统工具与环境 29

在“选择图像源文件”对话框中，选择要插入的图像文件。在文件列表中单击图像文件时，图像预览区会显示这个图像的缩略图。若图像没有存放在站点所在的文件夹下，在“选择图像源文件”对话框的“ URL” 文本框中，显示的是本地计算机硬盘中的绝对路径。否则，“ URL” 选项就变成相对于文档或站点根目录的路径名。

大学计算机基础——系统工具与环境 30

如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。如果图像文件没有在站点文件夹中，就会打开对话框询问是否将图片文件复制到站点所在的文件夹。单击“是”按钮，系统打开“复制文件为”对话框，用户可指定图片文件的复制位置。通常，把图片文件复制到站点文件夹的 images子文件夹中。

大学计算机基础——系统工具与环境 31

在编辑窗口中单击插入的图像，图像周围出现 3 个控制点，同时在属性面板中可以设置图像的各种属性。面板左上方是图像预览方式，可以大致看到图像的内容。预览图像的右边说明了所插入图像的大小，此图像的大小是 201K 。

大学计算机基础——系统工具与环境 32

在未调节图像大小时，“宽”与“高”显示的是图像原始宽度与高度，单位是像素点。如果用手动方式，拖动图像右下角的黑色控制点来调整图像的大小，“宽” 与“高”栏中的数值也随着改变（拖动结束后数值也变成了粗体数字）。倘若改变图像大小后 ,希望回复到原图像的大小，单击“重设大小”按钮 即可。如果要维持原图像的宽度与高度之比例不变，按住 Shift 键拖动图像右下角的黑色控制点来调整图像大小。

大学计算机基础——系统工具与环境 33

在版面安排上，若图像和文字贴得太近，容易使人产生压迫感。因此，适当地调整图像间距可以使浏览者在浏览网页时更加舒适。“垂直边距”设置图像和周围文字的上下距离，“水平边距”设置图像和周围文字的水平距离，单位为像素。

大学计算机基础——系统工具与环境 34

在“替换”中输入文字说明。用户若关闭了浏览器中的图像显示，在浏览网页时，图像处会显示一个带图像标志的方框，上面显示所设置的替代文字。

大学计算机基础——系统工具与环境 35

为图像加上适当的边框线，可以使图像产生一种立体感。在“边框”输入数值即可设置图像的边框线的宽度。若要取消边框，只需删除“边框”的数值。

大学计算机基础——系统工具与环境 36

在图像的对齐属性下拉列表中有 10 个选项。在网页制作的实际应用中，使用最多的是左对齐和右对齐。

大学计算机基础——系统工具与环境 37

选中要裁剪的图像，单击“属性”面板中的“裁剪”按钮 ，在其四周将出现一个裁剪控制框。将鼠标指针指向控制点，拖动鼠标可以改变裁剪框的大小。将鼠标指针移到裁剪框中拖动鼠标可以移动裁剪框的位置。在裁剪框中双击鼠标或按 Enter 键，就可以剪切掉裁剪框以外的图像。

大学计算机基础——系统工具与环境 38

在 Dream weaver 中，选中图像，单击“属性”面板中的“亮度和对比度”按钮 ，打开“亮度 / 对比度”对话框。在“亮度”和“对比度”中，输入合适的数值，可改变图像的亮度和对比度。

大学计算机基础——系统工具与环境 39

通过扫描得到的图像，其边缘常常是模糊的，可以通过Dream weaver提供的锐化图像功能提高图像的质量。选中要锐化的图像，单击“属性”面板中的“锐化”按钮 ，打开“锐化”对话框，输入合适的数值。锐化的数值越大，则锐化程度就越高。

大学计算机基础——系统工具与环境 40

在实际制作网页的过程中，当网页的整体排版已经完成，但是需要插入的图像还没有制作出来时，可以插入一个图像占位符，来配合排版的需要，等到图像制作出来后，再将图像占位符替换掉。

大学计算机基础——系统工具与环境 41

在【插入】菜单中选择【图像对象】下的【图像占位符】命令，或单击“插入栏”的“常用类”的“图像”下的“图像占位符”按钮 ，打开“图像占位符”对话框

大学计算机基础——系统工具与环境 42

鼠标经过图像实际上由两幅图像组成：初始图像（页面初次装载时显示的图像）和替换图像（当鼠标指针掠过时显示的图像），两幅图像的大小必须相同。在【插入】菜单中选择【图像对象】下的【鼠标经过的图像】命令，或单击“插入栏”的“常用类”的“图像”下的“鼠标经过的图像”按钮 。

大学计算机基础——系统工具与环境 43

选择【修改】菜单的【页面属性】命令，或单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，在“背景图像”文本框中，输入作为背景图片文件的路径和文件名，或单击“浏览”按钮，在“选择图像源文件”对话框中选择图片。

大学计算机基础——系统工具与环境 44

默认情况下，当网页尺寸比背景图像大，会重复显示背景图像。在“重复”下拉列表中选择“ no-repeat” ，背景图像只显示一次；选择“ x-repeat” ， 背景图像在水平方向上重复；选择“ y-repeat” ， 背景图像在垂直方向上重复；选择“ repeat” ，则背景图像在水平和垂直方向上均重复。

大学计算机基础——系统工具与环境 45

实训任务：在网页“ xg” 中完成以下操作：在“歌词注释”旁插入图像文件“ hndx.jpg” ，设置图像右对齐，垂直和水平边距为 50 。设置图像的边框为 3 ，颜色为蓝色。设置图像的锐化值为 5 。设置页面的背景图像为“ bj.gif”

大学计算机基础——系统工具与环境 46

大学计算机基础——系统工具与环境 47

在 Dream weaver 中，可以快速、方便地向网页中添加音频、视频等多媒体内容，使网页更加生动。

大学计算机基础——系统工具与环境 48

大学计算机基础——系统工具与环境 49

midi 或 mid(Music Instrument Digital Interface,乐器数字接口 )此格式用于器乐，很小的 MIDI 文件就可以提供较长时间的声音剪辑。许多浏览器都支持MIDI 文件，并且不需要插件。但是 MIDI 文件不能通过录制获取，并且必须使用特殊的硬件和软件在计算机上合成。

大学计算机基础——系统工具与环境 50

wav （波形扩展 )此格式具有良好的声音品质，许多浏览器都支持 wav 格式文件，并且不需要插件。可以从 CD 、磁带、麦克风等录制自己的 WAV 文件。但是，此格式文件较大，会影响在网页的传输速度。

大学计算机基础——系统工具与环境 51

mp3(Motion Picture Experts Group Audio Layer-3 ，运动图像专家组音频第 3层，或称为 MPEG 音频第 3 层 )mp3 是一种压缩格式，它可使声音文件明显缩小，且其声音品质较好。 mp3技术可以对文件进行“流式处理”，使访问者不必等待整个文件下载完成，即可收听文件。若要播放mp3 文件，访问者必须下载并安装辅助应用程序或插件，例如 QuickTime 、 Windows Media Player 或 Real Player 。

大学计算机基础——系统工具与环境 52

ra 、 .ram. 、 rpm 或 Real Audio此格式具有非常高的压缩度， 比mp3 格式文件还要小。因为可以在普通的服务器上对这些文件进行“流式处理”，所以访问者在文件完全下载之前，就可听到声音。但是，访问者必须下载并安装 Real Player辅助应用程序或插件，才可以播放这种文件。

大学计算机基础——系统工具与环境 53

qt 、 .qtm. 、 mov 或 Quick Time此格式是由苹果公司开发的音频和视频格式。 Apple Macintosh操作系统中包含了 Quick Time ，并且大多数使用音频、视频或动画的 Macintosh 应用程序都使用 Quick Time 。 PC 也可播放 Quick Time 格式的文件，但是需要特殊的Quick Time驱动程序。

大学计算机基础——系统工具与环境 54

选择要进行链接的文本，在文本属性的“链接”文本框中键入文件的路径和名称，或单击文本框右边的“文件夹”按钮 ，打开“选择文件”对话框以定位文件。当浏览网页时，单击该链接，浏览器打开对话框询问用户是要打开该文件，还是要将该文件保存到本机。若用户选择打开，将启动相应的播放程序播放该文件；若选择保存，在“另存为”对话框中指定保存的位置后，相应的音频文件就开始下载。

大学计算机基础——系统工具与环境 55

通过嵌入一个音频文件，可以将其集成到网页中。但要求浏览器具有所选音频文件的播放器插件时，音频才可以播放。将光标放在网页文档中要放置音频文件的位置，选择“插入栏”的“常用类”的“媒体”下的“插件”按钮 ，打开“选择文件”对话框。在“选择文件”对话框中，选择音频文件。

大学计算机基础——系统工具与环境 56

当插入插件对象后， Dream weaver 会显示一个通用的插件占位符。选中插件对象，在“属性”面板中，可设置宽度、高度和源文件名等选项。在浏览器中显示网页时，此处会显示播放器，并播放该音频文件。

大学计算机基础——系统工具与环境 57

如果要使用背景音乐，可以在代码中使用 <bgsound> 标记进行设置。其语法是 <bgsound src=“背景声音文件” loop= 数值 > loop= 正整数表示背景音乐重复的次数， loop=-1 则表示无限重复 当窗口最小化时，背景音乐自动暂停播放，窗口恢复时，继续播放。

大学计算机基础——系统工具与环境 58

大学计算机基础——系统工具与环境 59

Microsoft 的 ASF 文件格式Microsoft 的 ASF 是 Advanced stream Format 。微软将ASF 定义为同步媒体的统一容器文件格式。 ASF 是一种数据格式，音频、视频、图像以及控制命令脚本等多媒体信息通过这种格式，以网络数据包的形式传输，实现流式多媒体内容发布。ASF 最大优点就是体积小，因此适合网络传输，使用微软公司的最新媒体播放器 Window Media Player 可以直接播放该格式的文件。用户可以将图形、声音和动画数据组合成一个 ASF 格式的文件，当然也可以将其他格式的视频和音频转换为 ASF 格式， 而且用户还可以通过声卡和视频捕获卡将诸如麦克风、录像机等外设的数据保存为 ASF格式。另外， ASF 格式的视频中可以带有命令代码，用户指定在到达视频或音频的某个时间后触发某个事件或操作。

大学计算机基础——系统工具与环境 60

Real System 的 Real Media 文件格式Real Network公司的 Real Media 包括 Real Audio 、 Real Video 和 Real Flash 三类文件，其中 Real Audio 用来传输接近 CD音质的音频数据， Real Video 用来传输不间断的视频数据， 它使得 Real System 可以通过各种网络传送高质量的多媒体内容。第三方开发者可以通过 Real Network提供的 SDK 将它们的媒体格式转换成 Real Media 文件格式。

大学计算机基础——系统工具与环境 61

Apple公司的 QuickTime 文件格式Apple公司的 QuickTime电影文件现已成为数字媒体领域的工业标准。 QuickTime电影文件格式定义了存储数字媒体内容的标准方法，使用这种文件格式不仅可以存储单个的媒体内容（如视频或音频采样），而且能保存对该媒体作品的完整描述。此文件格式还被设计用来适应与数字化媒体一同工作需要存储的各种数据。因为这种文件格式能用来描述几乎所有的媒体结构，所以它是应用程序间〈不管运行平台如何）交换数据的理想格式。 QuickTime 文件格式中媒体描述和媒体数据是分开存储的，媒体描述或元数据（ meta-data)叫做电影 (movie ），包含轨道数目、视频压缩格式和时间信息。同时 movie 包含媒体数据存储区域的索引。媒体数据是所有的采样数据，如视频帧和音频采样，媒体数据可以与 QuickTime movie存储在同一个文件中，也可以在一个单独的文件或者在几个文件中。

大学计算机基础——系统工具与环境 62

选择“插入栏”的“常用类”的 “媒体”下的“插件”按钮 ，在弹出的“选择文件”对话框中选择要插入的视频文件，再单击“确定”按钮。当插入插件对象后， Dream weaver 会显示一个通用的插件占位符。选择插件图标，在属性面板中将其“宽”和“高”设为合适的值。完成后，在浏览器中浏览该网页时，该视频将自动播放。注意，在网页中，如果想播放流媒体文件，用户必须使用辅助应用程序（如插件）。

大学计算机基础——系统工具与环境 63

Flash 是 Macromedia公司出品的，用在互联网上动态的、可互动的 Shockwave 。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。但是，要在浏览器中播放 Flash 动画，浏览器中必须集成有 Flash播放器。最新的 Navigator 和 IE 中，都集成了 Flash播放器。其中， Navigator 通过相应的插件来实现， IE 则是通过ActiveX控件来实现。

大学计算机基础——系统工具与环境 64

FLA 文件（ .fla ）所有项目的源文件，使用 Flash创作工具创建。此类型的文件只能在 Flash 中打开（而无法在 Dream weaver 或浏览器中打开）。可以在 Flash 中打开文件，然后将它发布为 SWF 文件或 SWT 文件以在浏览器中使用。SWF 文件 FLA 文件的编译版本，己进行优化，可以在WEB上查看。此文件可以在浏览器中播放并且可以在Dream weaver 中进行预览，但不能在 Flash 中编辑此文件。FLV 文件（ .flv) 一种视频文件，它包含经过编码的音频和视频数据，用于通过 Flash Player 进行传送。例如，如果有QuickTime 或 Window Media 视频文件，则可以使用编码器 ( 如 Flash CS4 Video Encoder 或 Sorensen Squeeze ) 将视频文件转换为 FLV 文件。

大学计算机基础——系统工具与环境 65

首先选择“插入栏”的“常用类”的“媒体”按钮下的“ SWF” 按钮 ，打开“选择文件”对话框。在对话框中，选择所要插入的 Flash 文件，单击“确定”按钮。当插入该对象后，网页中会显示一个 swf占位符 。在网页中选择该占位符，可以在属性面板中设置各选项

大学计算机基础——系统工具与环境 66

宽和高：以像素为单位指定动画的宽度和高度。文件：指定 SWF 文件或 Shock Wave 文件的路径。可键入路径或单击“文件夹”按钮以定位到文件。源文件：指定源文档（ FLA 文件）的路径（如果计算机上同时安装了 Dream weaver 和 Flash ）。若要编辑 SWF 文件，需设置影片的源文档。背景：指定影片区域的背景颜色。在不播放影片时（在加载时和在播放后）也显示此颜色。编辑：启动 Flash 以更新 FLA 文件 ( 使用 Flash创作工具创建的文件 ) 。如果计算机上没有安装 Flash ，则会禁用此选项。

大学计算机基础——系统工具与环境 67

循环：使影片连续播放。如果没有选择循环，则影片将播放一次，然后停止。自动播放：在加载页面时自动播放影片。品质：低品质设置会首先照顾到显示速度， 然后才考虑外观；而高品质设置首先照顾到外观，然后才考虑显示速度；自动低品质会首先照顾到显示速度，但会在可能的情况下改善外观。比例：确定影片如何适合在宽度和高度文本框中设置的尺寸。默认设置为显示整个影片。对齐：确定影片在页面上的对齐方式。播放：在“文档”窗口中播放影片

大学计算机基础——系统工具与环境 68

实训任务：在网页“ xg” 中完成以下操作：在第二句的后面插入新的段落，输入文字“下载歌曲”，并链接到音频文件“ xg.mp3” 。在标题的下面插入视频文件“ xg.asf” ，设置其宽度为 320 ，高度为 240 。

大学计算机基础——系统工具与环境 69

表格在网页制作的用途主要有两个方面： 一是显示表格式数据。二是对网页中的文本、图像、视频等网页元素进行布局。

大学计算机基础——系统工具与环境 70

选择主菜单【插入】的【表格】菜单项，或单击“插入栏”的“常用类”的“表格”按钮 ，打开“表格”对话框

大学计算机基础——系统工具与环境 71

表格行数：确定表格行的数目。列数：确定表格列的数目。表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。边框粗细：指定表格边框的宽度。单元格边距：确定单元格边框与单元格内容之间的像素数。单元格间距：决定相邻的单元格之间的像素数。标题：“无标题”对表格不启用列或行标题；“左列标题”将表格的第一列作为标题列；“首行标题”将表格的第一行作为标题行；“左侧和顶部标题” 将表格的第一行作为行标题，第一列作为列标题。辅助功能：“标题”提供一个显示在表格上部的标题。 “摘要”对表格进行注释，但不会在浏览器中显示使用表格进行布局时，通常不显示表格边框，可设置边框粗细、单元格边距、间距为 0 。

大学计算机基础——系统工具与环境 72

用下列方法可选择表格，选中的表格会在表格右侧和下侧显示三个黑色的锚点。

单击表格的下侧或右侧外边框单击表格内单元格边框单击表格某个单元格，然后在“文档”窗口左下角中选择 <table> 标签。

单击表格某个单元格，然后选择主菜单【修改】的【表格】的【选择表格】菜单项。

大学计算机基础——系统工具与环境 73

其中，清除列宽 和清除行高按钮，用于从表格中删除所有明确指定的行高或者列宽。将表格宽度转化为像素按钮 用于将表格中每一列的宽度设置为以像素为单位的当前宽度。将表格宽度转化为百分比按钮 用于将表格中每一列的宽度设置为按占文档窗口宽度百分比表示的当前宽度。

大学计算机基础——系统工具与环境 74

选择单元格鼠标拖动法：将光标放在单元格中，然后按住鼠标左键拖动，水平拖动可选择一行， 纵向拖动可选择一列，斜线方向拖动，可选择矩形区域内的所有单元格。使用 Ctrl 键和鼠标配合选择，按住 Ctrl 键，在需要的单元格内点击，即可选择所需的单元格。该方法所选单元格既可以是相邻的，也可以是不相邻的。使用 Shift 键和鼠标配合选择，将光标置于开始选择的单元格内，按住 Shift 键，在需要的单元格内点击，即可选择所需的连续单元格。该方法只能选择连续单元格。

大学计算机基础——系统工具与环境 75

选中单元格后，属性面板，可设置水平对齐方式、垂直对齐方式、是否为标题行、背景颜色等选项

大学计算机基础——系统工具与环境 76

调整表格大小主要有两种方法：一是鼠标拖动法，首先选择整个表格，将鼠标指针指向锚点，按住鼠标左键，即可沿上下、左右方向移动，改变表格的大小；二是使用表格属性面板，首先选择整个表格，设置属性“宽”的值，即可改变宽度。注意：在表格属性面板中不能设置表的高度。

大学计算机基础——系统工具与环境 77

调整单元格大小可通过鼠标拖动来实现。将鼠标指针置于单元格的边框线，如果鼠标指针显示为双向箭头，按住鼠标左键拖动，可改变单元格的高度和宽度。或选择需要改变大小的单元格，设置单元格属性面板中属性“宽”和“高”的值也可改变单元格大小。

大学计算机基础——系统工具与环境 78

插入行单击要插入行位置的下方相邻单元格。选择主菜单【修改】的【表格】的【插入行】命令。插入列单击要插入列位置的右方相邻单元格。选择主菜单【修改】的【表格】的【插入列】命令。

大学计算机基础——系统工具与环境 79

插入指定数量指定位置的行或列单击需要插入行或列的单元格。选择主菜单【修改】的【表格】的【插入行或列】命令，打开“插入行或列”对话框。

大学计算机基础——系统工具与环境 80

删除行选择要删除的行，或选择该行内的任意单元格。选择主菜单【修改】的【表格】的【删除行】命令。删除列选择要删除的列，或选择该列内的任意单元格。选择主菜单【修改】的【表格】的【删除列】命令。

大学计算机基础——系统工具与环境 81

合并单元格时所选择的单元格必须是连续的、相邻的矩形区域中的单元格。选择要合并的单元格，选择主菜单【修改】的【表格】的【合并单元格】命令，可将多个单元格合并为一个单元格。选择要拆分的单元格，选择主菜单【修改】的【表格】的【拆分单元格】菜单项，打开“拆分”单元格对话框。

大学计算机基础——系统工具与环境 82

选择需删除的整个表格，按“ Delete” 键。

大学计算机基础——系统工具与环境 83

表格嵌套是在一个表格的单元格中插入另外一个表格。在网页设计中，使用表格的嵌套技术，就可以设计更为复杂的表格结构，从而使页面内容排列的更条理、更紧凑。

大学计算机基础——系统工具与环境 84

插入表格后，可将文字和图片素材添加到表格中。将光标定位到单元格中，可直接输入文字。在输入时，按 Tab 键可将光标移到下一个单元格。按方向键，则在相应方向上移动插入点。若要插入图像，定位到单元格，选择主菜单【插入】的【图像】命令，在弹出的对话框中，选择需要插入的图像文件。

大学计算机基础——系统工具与环境 85

实训任务：在网页“ xg” 中插入表格，对页面重新布局。插入一个六行二列的表格。将表格第一行、第二行、第三行、第五行的单元格分别合并。将表格第四行第一列的单元格拆分为上下两个单元格，再将下面的单元格拆分为左右两个单元格。设置表格的宽度为 800 ，边框为 0 ，对齐方式为居中对齐。将文字、图片、插件、水平线移动到对应的单元格。设置图片对象的垂直和水平边距为 0 ，对齐方式为默认。调整单元格的宽度和高度。设置“下载歌曲”和图片所在的单元格的水平对齐方式为居中。

大学计算机基础——系统工具与环境 86

大学计算机基础——系统工具与环境 87

超级链接（ Hyperlink) ，简称超链接、链接，是指从一个网页指向一个目标的连接关系。 这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经建立链接的文字或图片后，浏览器将根据目标的类型来打开链接目标。

大学计算机基础——系统工具与环境 88

所谓文字链接，就是以文字为媒介所建立起来的超级链接形式。它是所有网页超级链接中运用最为广泛的链接之一。选取作为链接的文字，在属性面板的“链接”文本框中输入链接目标。

大学计算机基础——系统工具与环境 89

或单击文本框旁的“浏览文件”按钮 ，在弹出的对话框中定位到链接的文件。也可以单击文本框旁的“指向文件”按钮 ，将鼠标指向文件面板的链接目标字，就会跳转到链接目标

大学计算机基础——系统工具与环境 90

在属性栏中的“目标”下拉列表中，可选择链接目标打开的窗口。_blank ：在新的窗口中打开链接的网页，原来的浏览窗口仍然存在。_self ：在当前窗口中打开链接网页。_parent ：通常用于框架页面中，在上一级窗口中打开。_top ：通常用于框架页面中，在最高等级的窗口中打开链接网页。设置完超级链接后，当浏览网页时，若鼠标指向链接的文字，鼠标指针就会变成手掌的图标。单击这些文字，就会跳转到链接目标

大学计算机基础——系统工具与环境 91

图片也是经常被使用的链接媒介。选择图片后，在属性面板中设置链接目标。浏览网页时，单击图片后，网页就会跳转到链接目标。

大学计算机基础——系统工具与环境 92

图像链接是整张图像与一个目的地进行链接，而图像地图链接是在一张图像上建立多个热点，每个热点指向一个链接目标。图像地图链接又称为热点链接或热区链接。选中图像文件，在属性面板中单击“热点工具”，将鼠标指向图像，鼠标指针变为十字架形状，在图像上拖曳鼠标以形成热点。选中热点后，在属性面板中指定链接目标。

大学计算机基础——系统工具与环境 93

电子邮件链接，是指在单击该链接之后，直接触发启动Outlook Express发送电子邮件软件，并默认打开新建的一个空白的新的电子邮件，提供给用户撰写。选择要进行链接的文字，在“插入栏”的“常用类”中选择“电子邮件链接”按钮 ，或选择主菜单【插入】的【电子邮件链接】命令，打开“电子邮件链接”对话框

大学计算机基础——系统工具与环境 94

对文字或图片建立电子邮件链接后，属性面板的链接栏中显示“ mail to: 电子邮件地址”。当浏览网页时，单击建立了链接的文字或图片后，就会打开电子邮件撰写软件，并新建一个空白邮件，收件人地址为链接中所设置的邮件地址

大学计算机基础——系统工具与环境 95

浏览大量信息内容的网页时，滚动条变得很长，使用鼠标很不方便。使用命名锚记链接，可以很好地解决这一问题。当单击它时，可以跳到页面中指定的位置。命名锚记链接的制作过程通常可以分为两大步骤：创建命名锚记和链接命名锚记。

大学计算机基础——系统工具与环境 96

要创建命名锚记，将光标移到需要插入命名锚记的位置，选择主菜单【插入】的【命名锚记】命令，或者单击“插入栏”的“常用”选项卡的“命名锚记”按钮 ，打开“命名锚记”对话框。在“锚记名称”文本框中输入锚记的名称。建立锚记后，在指定的位置插入一个锚记符号 ，这一位置也就是后面单击链接之后要跳转的位置。

大学计算机基础——系统工具与环境 97

创建命名锚记后，选择要跳转到锚记位置的文字或图像，在属性面板的链接文本框中输入锚记的名称。在浏览网页时，单击这些文字或图像，就会跳转到锚记所建立的位置。

大学计算机基础——系统工具与环境 98

所谓文件下载链接，就是链接的目标不是网页，而是文件。单击此类链接时，如果链接指向的是 GIF 、 JPG 或 PNG图像，则会在浏览器中显示图像。如果是其他类型的文件，就会打开对话框询问用户打开或保存文件。选择“保存”选项，则可将文件下载到本机上。

大学计算机基础——系统工具与环境 99

打开网页“ xyfg” ，建立命名锚记链接，实现页面跳转，在表格第一行的“美丽校园”处插入名为“ top” 的命名锚记。在图片 上插入到“ top” 的链接。在文字“南校区风光”处插入“ nxq”锚记 , 文字“北校区风光”处插入“ bxq”锚记 , 文字“岳麓书院风光”处插入“ ylsy”锚记。在表格的第一行文字上插入到对应锚记的链接，“南校区” 链接到“ nxq” ，“北校区”链接到“ bxq” ，“岳麓书院” 链接到“ ylsy” 。

大学计算机基础——系统工具与环境 100

打开网页“ wddx” ，在文字上建立链接。在文字“校园风光”处插入链接，链接到本站点的网页“ xyfg” ，要求在新的窗口中打开网页。在文字“大学校歌”处插入链接，链接到本站点的网页“ xg” ，要求在当前窗口中打开网页。在文字“校园主页”处插入链接，链接到湖南大学网站www.hnu.cn 。在图片 上插入链接，链接到邮箱账户 cj7428@163.com 。打开网页“ xg” ，输入文字“返回”，在文字上建立到网页“ wddx” 的链接。