第 5 章网页制作基础

第第 55 章网页制作基础章网页制作基础

——《大学计算机信息科技教程（第二版）》第 5 章网页制作基础 2

5.3 5.3 编辑网页编辑网页文本编辑文本编辑表格使用表格使用图像应用图像应用多媒体的应用多媒体的应用页面属性设置页面属性设置


5.3 5.3 编辑网页编辑网页文本编辑

输入文本内容设置文本格式文本拼写检查、查找和替换

表格使用插入表格（（导入表格））编辑表格编辑表格

选定、、插入行列、、删除行列、、合并拆分、、移动复制、、表格大小格式化表格设置表格属性

图像应用插入图像（（图像占位符、、鼠标经过图像））编辑图像（使用属性检查器）（使用属性检查器）

多媒体的应用插入Flash动画

插入Flash文本

插入Flash按钮

插入Flash视频

页面属性设置（属性检查器（属性检查器““页面属性页面属性””按钮）按钮）

①“插入”工具栏“常用” ② “插入” /“媒体”


5.3.2 5.3.2 表格使用表格使用插入表格表格是由若干个单元格组成的，每个单元格中可以表格是由若干个单元格组成的，每个单元格中可以插入文字、图片等各种元素，甚至可以在单元格插入文字、图片等各种元素，甚至可以在单元格中再插入另一个表格。中再插入另一个表格。


5.3.2 5.3.2 表格使用表格使用在文档中插入表格在文档中插入表格

②“插入” /“表格”

①插入工具栏 : 常用


5.3.2 5.3.2 表格使用表格使用 •建立了表格以后，将插入点定位于单元格中，建立了表格以后，将插入点定位于单元格中，可以像非表格区域一样直接输入文本或插入图可以像非表格区域一样直接输入文本或插入图像等网页元素。像等网页元素。

•输入一个单元格的内容后，还可以使用键盘上输入一个单元格的内容后，还可以使用键盘上的方向键将插入点移到相邻的单元格，按的方向键将插入点移到相邻的单元格，按TabTab 键将插入点移到下一个单元格，而按键将插入点移到下一个单元格，而按Shift+TabShift+Tab 键将插入点移到上一个单元格。键将插入点移到上一个单元格。

返回


5.3.2 5.3.2 表格使用表格使用导入表格式数据导入表格式数据•在导入之前先将数据源文件中的数据按指定格在导入之前先将数据源文件中的数据按指定格式编排：每行数据以式编排：每行数据以 EnterEnter 键结束，同一行键结束，同一行中的各项数据之间用某一中的各项数据之间用某一定界符定界符（如（如 TabTab 、、逗号、分号等）进行分隔，并保存为文本文件逗号、分号等）进行分隔，并保存为文本文件（（ .txt.txt 文件）。文件）。

①准备工作


5.3.2 5.3.2 表格使用表格使用 • 选择选择““文件文件”” //““导入导入”” //““表格式数据表格式数据””命令；命令；• 选择选择““插入插入”” //““表格对象表格对象”” //““导入表格式数据导入表格式数据””命命令，打开令，打开““导入表格式数据导入表格式数据””对话框。对话框。

②导入

返回


5.3.2 5.3.2 表格使用表格使用编辑表格

选定表格元素选定表格元素 •选定整张表格选定整张表格

– 单击表格中的边框线– 将插入点定位于表格中任意单元格后，单击文档窗

口左下方状态行上的 <table> 标签；– 两次选择“编辑” /“全选”命令；– 连续按两次 Ctrl+A 键；– 选择“修改” /“表格” /“选择表格”命令；– 右单击后，在快捷菜单中选择“表格” /“选择表

格”。

①单击表格中的边框线②<table>


5.3.2 5.3.2 表格使用表格使用 •选定表格行的方法选定表格行的方法

– 将插入点定位于要选定的表格行中任意单元格后，单击文档窗口左下方状态行上的 <tr> 标签；

– 将鼠标移到表格行的左边框附近位置，当鼠标指针呈指向右方的黑色水平箭头形状、并且相应行的单元格外框呈红色时，单击后便选中相应的行。

– 选定表格行后上下拖动鼠标，则选中相邻的多行表格。

– 按住 Ctrl 键，然后在表格左边框附近位置单击，则选中不相邻的表格行。

①鼠标移到表格左边框单击

②<tr>


5.3.2 5.3.2 表格使用表格使用 •选定表格列的方法选定表格列的方法

– 将鼠标移到表格列的顶部边框附近位置，当鼠标指针呈指向下的黑色垂直箭头形状时单击，便选中相应的列。

– 选定表格列后左右拖动鼠标，则选中相邻的多列表格。

– 按住 Ctrl 键，然后在表格顶部边框附近位置单击，则选中不相邻的表格列。

鼠标移到表格顶部边框单击


5.3.2 5.3.2 表格使用表格使用 •选定单元格的基本方法选定单元格的基本方法

– 按住 Ctrl 键单击要选定的单元格。– 将插入点定位于要选定的单元格，单击文档窗口左

下方状态行上的 <td> 标签；– 将插入点定位于要选定的单元格，选择“编

辑” /“全选”命令；– 将插入点定位于要选定的单元格，按 Ctrl+A 键。

<td>


5.3.2 5.3.2 表格使用表格使用 •选定相邻的单元格（选定相邻的单元格（ Shift Shift ））

– 将鼠标指向要选定的第一个单元格，单击后拖到最后一个单元格；

– 选定第一个单元格后，按住 Shift 键单击最后一个单元格。

•选定若干个不相邻的单元格（选定若干个不相邻的单元格（ Ctrl Ctrl ））– 选定一个单元格后，按住 Ctrl 键然后选择其余单

元格，可以同时选定若干个不相邻的单元格。•取消选定状态取消选定状态

– 选定整张表格、表格行、列或单元格后，单击任意一个单元格，或者单击表格以外部分，便取消选定状态。

返回


5.3.2 5.3.2 表格使用表格使用插入行与列插入行与列•选择选择““修改修改”” //““表格表格”” //““插入行插入行””命令；命令；•选择选择““修改修改”” //““表格表格”” //““插入列插入列””命令；命令；•选择选择““修改修改”” //““表格表格”” //““插入行或列插入行或列””命令；命令；•选择选择““插入插入”” //““表格对象表格对象”” //““在上面插入在上面插入行行””、、““在下面插入行在下面插入行””、、““在左边插入在左边插入列列””或或““在右边插入列在右边插入列””命令。命令。

返回

“修改” /“表格”


5.3.2 5.3.2 表格使用表格使用删除行与列删除行与列•选择选择““修改修改”” //““表格表格”” //““删除行删除行””或或““删除删除列列””命令；命令；

•按按 DeleteDelete 键；键；•但是，若选定单元格后按但是，若选定单元格后按 DeleteDelete 键，则删除键，则删除单元格的内容。单元格的内容。

返回

选择→ “修改” /“表格”


5.3.2 5.3.2 表格使用表格使用拆分单元格拆分单元格 •选定选定一个单元格后，选择一个单元格后，选择““修改修改”” //““表表格格”” //““拆分单元格拆分单元格””命令；命令；

•单击单元格属性检查器中的单击单元格属性检查器中的““拆分单元格为拆分单元格为行或列行或列””按钮，打开按钮，打开““拆分单元格拆分单元格””对话框。对话框。

①“修改” /“表格”②属性检查器


5.3.2 5.3.2 表格使用表格使用合并单元格合并单元格•选定相邻的几个单元格后，选择选定相邻的几个单元格后，选择““修改修改”” //““表格表格”” //““合并单元格合并单元格””命令；命令；

•单击单元格属性检查器中的单击单元格属性检查器中的““合并所选单元合并所选单元格格””按钮。按钮。

返回

①“修改” /“表格”

②属性检查器


5.3.2 5.3.2 表格使用表格使用移动和复制行与列移动和复制行与列 • 选择选择““编辑编辑”” //““剪切剪切””命令或单击标准工具栏上的命令或单击标准工具栏上的““剪切剪切””按钮，然后将插入点定位于新的位置，选择按钮，然后将插入点定位于新的位置，选择““编辑编辑”” //““粘贴粘贴””命令或单击标准工具栏上的命令或单击标准工具栏上的““粘粘贴贴””按钮，便将整行内容移动到选定位置所在行的上按钮，便将整行内容移动到选定位置所在行的上方，或者将整列内容移动到选定位置所在列的左面。方，或者将整列内容移动到选定位置所在列的左面。

• 若选定位置在表格之外，则粘贴的行或列作为一个新若选定位置在表格之外，则粘贴的行或列作为一个新的表格内容，放置在表格之后。的表格内容，放置在表格之后。

• 选定行或列后，选择选定行或列后，选择““编辑编辑”” //““拷贝拷贝””命令或单击标命令或单击标准工具栏上的准工具栏上的““拷贝拷贝””按钮，然后选择按钮，然后选择““粘贴粘贴””命令，命令，可以将选定行或列复制到指定位置的上方或左面。可以将选定行或列复制到指定位置的上方或左面。

返回

剪切、拷贝、粘贴


5.3.2 5.3.2 表格使用表格使用调整表格大小调整表格大小• 改变表格的宽度：拖动表格右边的控制点。改变表格的宽度：拖动表格右边的控制点。• 改变表格的高度：拖动表格底部的控制点。改变表格的高度：拖动表格底部的控制点。• 同时改变表格高度和宽度：拖动表格右下角的控制点。同时改变表格高度和宽度：拖动表格右下角的控制点。• 改变某一行高度：拖动某一行单元格下方的边框线。改变某一行高度：拖动某一行单元格下方的边框线。• 改变某一列宽度：拖动某一列单元格右面的边框线。改变某一列宽度：拖动某一列单元格右面的边框线。• 在在属性检查器属性检查器的的““宽宽””和和““高高””文本框中列宽和行高的精文本框中列宽和行高的精确数值。确数值。

①拖曳控制点

②属性检查器（精确）


5.3.2 5.3.2 表格使用表格使用•调整表格的大小时，各列的宽度按原来比例自调整表格的大小时，各列的宽度按原来比例自动调整。没有设置行高的各行也按原来比例调动调整。没有设置行高的各行也按原来比例调整高度，而对于设置过行高的行，其高度不会整高度，而对于设置过行高的行，其高度不会改变。改变。

返回


5.3.2 5.3.2 表格使用表格使用格式化表格

套用现有表格格式套用现有表格格式选择选择““命令命令”” //““格式化表格格式化表格””命令。命令。

“命令” /“格式化表格”

返回


5.3.2 5.3.2 表格使用表格使用设置表格属性设置表格属性选定表格后，在表格的属性检查器中设置。选定表格后，在表格的属性检查器中设置。

设置单元格、行和列的属性设置单元格、行和列的属性 • 选定行、列或单元格后，在行或列的属性检查器中设置。选定行、列或单元格后，在行或列的属性检查器中设置。

属性检查器

返回

属性检查器


5.3.3 5.3.3 图像应用图像应用插入图像在在WebWeb 页中通常使用三种：页中通常使用三种： GIFGIF、、 JPEGJPEG和和PNGPNG ，这三种格式的共同特点是压缩率较高。，这三种格式的共同特点是压缩率较高。目前，目前， GIFGIF和和 JPEGJPEG 文件格式的支持情况最好，文件格式的支持情况最好，大多数浏览器都可以查看它们，因此通常在网页大多数浏览器都可以查看它们，因此通常在网页中插入的图像都使用中插入的图像都使用 GIFGIF和和 JPEGJPEG 文件格式。文件格式。


5.3.3 5.3.3 图像应用图像应用插入图像插入图像 •选择选择““插入插入”” //““图像图像””命令；命令；•单击单击““插入插入””工具栏的工具栏的““常用常用””选项卡中的选项卡中的““图像图像””按钮旁的下拉箭头，选择按钮旁的下拉箭头，选择““图像图像””命令。命令。

①“插入”工具栏的“常用”

② “插入” /“图像”

“复制文件吗？”对话框单击“是”按钮


5.3.3 5.3.3 图像应用图像应用•如果插入的图像文件不在站点文件夹中，单击如果插入的图像文件不在站点文件夹中，单击““确定确定””按钮后将出现提示信息框，提示按钮后将出现提示信息框，提示““是是否愿意否愿意将该文件复制到根文件夹中吗？将该文件复制到根文件夹中吗？””。通。通常单击常单击““是是””按钮，出现按钮，出现““复制文件为复制文件为””对话对话框，选择保存文字并输入文件名后单击框，选择保存文字并输入文件名后单击““保保存存””按钮。按钮。

•然后出现然后出现““图像标签辅助功能属性图像标签辅助功能属性””对话框，。对话框，。在在““替换文本替换文本””组合框中可以输入一段简短描组合框中可以输入一段简短描述，以后浏览网页时当鼠标指向该图像，在鼠述，以后浏览网页时当鼠标指向该图像，在鼠标指针下方将显示这段描述。标指针下方将显示这段描述。

返回


5.3.3 5.3.3 图像应用图像应用

插入图像占位符插入图像占位符• 图像占位符是在图像占位符是在准备准备将最终图像添加到将最终图像添加到 WebWeb 页之前页之前使用的使用的临时图形临时图形。。

• 选择选择““插入插入”” //““图像对象图像对象”” //““图像占位符图像占位符””命令；命令；• 单击单击““插入插入””工具栏的工具栏的““常用常用””选项卡中的选项卡中的““图像图像””按钮旁的下拉箭头，选择按钮旁的下拉箭头，选择““图像占位符图像占位符””命令。命令。

• 当当找到合适的图像找到合适的图像素材后，素材后，双击双击图像占位符，打开图像占位符，打开““选择图像源文件选择图像源文件””对话框，选择图像文件；对话框，选择图像文件；

• 也可以选定图像占位符，在也可以选定图像占位符，在属性检查器属性检查器中单击中单击““源文源文件件””文本框旁的按钮，选择图像文件。文本框旁的按钮，选择图像文件。

• 添加图像后，图像占位符对象变为图像对象，其大小添加图像后，图像占位符对象变为图像对象，其大小由添加图像的大小决定。由添加图像的大小决定。

返回

临时图形


5.3.3 5.3.3 图像应用图像应用创建鼠标经过图像创建鼠标经过图像 •包括主图像（原始图像）和次图像（鼠标经过图像）两包括主图像（原始图像）和次图像（鼠标经过图像）两个对象。个对象。

•选择选择““插入插入”” //““图像对象图像对象”” //““鼠标经过图像鼠标经过图像””命令；命令；•单击单击““插入插入””工具栏的工具栏的““常用常用””选项卡中的选项卡中的““图像图像””按按钮旁的下拉箭头，选择钮旁的下拉箭头，选择““鼠标经过图像鼠标经过图像””命令。命令。

返回

①“插入”工具栏的“常用”

② “插入” /“图像对象”


5.3.3 5.3.3 图像应用图像应用编辑图像

设置图像属性设置图像属性 •选中图像后，在属性检查器中可以设置和修选中图像后，在属性检查器中可以设置和修改图像的各个属性。改图像的各个属性。

属性检查器

裁剪重新取样★


5.3.3 5.3.3 图像应用图像应用使用内部图像编辑器使用内部图像编辑器 •裁剪裁剪

选定图像后，选择“修改” /“图像” /“裁剪”命令或单击属性检查器中的“裁剪”按钮，弹出提示信息框。单击“确定”按钮后，拖动图像周围出现用于裁剪的控制点。双击边界框内部或者按 Enter 键，图像缩小为指定区域大小。

•重新取样重新取样————更改图像大小后一般要重新取样更改图像大小后一般要重新取样选择“修改” /“图像” /“重新取样”命令或单击“重新取样”按钮。

属性检查器


5.3.3 5.3.3 图像应用图像应用•修改亮度和对比度修改亮度和对比度

–选择“修改” /“图像” /“亮度 / 对比度”命令–单击“亮度和对比度”按钮

属性检查器


5.3.3 5.3.3 图像应用图像应用•锐化图像锐化图像

– 选择“修改” /“图像” /“锐化”命令– 单击“锐化”按钮

属性检查器

返回

作业作业 02——02—— 网页效果图网页效果图


蓝色，华文仿宋背景： #77FFFF

方正姚体，红色

背景： #CCFFFF 鼠标移上去则文字变成红色

背景： #DDDDDD

背景： #FF6633

36号， #660000

高 60，宽 60

高 25，宽 60

Documents

第 5 章 网页制作基础

第 5 章网页制作基础