第 5 章 网页制作基础

32
5 5 第 第第第第第第 第 第第第第第第

Upload: roth-pittman

Post on 03-Jan-2016

74 views

Category:

Documents


0 download

DESCRIPTION

第 5 章 网页制作基础. 5.3 编辑网页. 文本编辑 表格使用 图像应用 多媒体的应用 页面属性设置. 5.3 编辑网页. 文本编辑 输入文本内容 设置文本格式 文本拼写检查、查找和替换 表格使用 插入表格 ( 导入表格 ) 编辑表格 选定 、 插入行列 、 删除行列 、 合并拆分 、 移动复制 、 表格大小 格式化表格 设置表格属性. 图像应用 插入图像 ( 图像占位符 、 鼠标经过图像 ) 编辑图像 (使用属性检查器) 多媒体的应用 插入 Flash 动画 插入 Flash 文本 插入 Flash 按钮 插入 Flash 视频 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 第 5 章 网页制作基础

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

Page 2: 第 5 章 网页制作基础

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

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

Page 3: 第 5 章 网页制作基础

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

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

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

表格使用插入表格 ( (导入表格))编辑表格编辑表格

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

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

多媒体的应用插入Flash动画

插入Flash文本

插入Flash按钮

插入Flash视频

页面属性设置(属性检查器(属性检查器““页面属性页面属性””按钮)按钮)

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

Page 4: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑输入文本内容

添加文本• EnterEnter 、、 ShiftShift + + EnterEnter• 输入多个空格:输入多个空格:

– 代码窗口输入 “ &nbsp”,复制多个– “ 编辑” /“首选参数” /“常规”分类 /“允许输

入多个连续的空格”复选框

Page 5: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑输入文本内容

插入特殊符号•插入工具栏 :文本

插入水平线•插入工具栏 : HTML

插入日期•插入工具栏 :常用 / 日期

移动和复制• ““ 剪切剪切””、、““复制复制””和和““粘贴粘贴””导入W ord文档•文件 / 导入 /Word 文档 返回

Page 6: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑输入文本内容

添加文本 添加文本

Shift+Enter换行

Enter换行

添加空格

“编辑” /“首选参数”

返回

Page 7: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑插入特殊符号插入特殊符号•选择选择““插入插入””工具栏中的工具栏中的““文本文本””选项卡,选项卡,单击单击““字符字符””按钮旁边的下拉箭头,在弹出按钮旁边的下拉箭头,在弹出的菜单中选择要插入的字符。的菜单中选择要插入的字符。

插入工具栏 :文本

Page 8: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑•如果没有要插入符号,选择如果没有要插入符号,选择““其他字符其他字符””选选项,在弹出的项,在弹出的““插入其他字符插入其他字符””对话框中选对话框中选择字符。择字符。

Page 9: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑•由于文档编码方式不同,某些特殊字符可能不由于文档编码方式不同,某些特殊字符可能不能显示出来, 此时会出现警告信息对话框,能显示出来, 此时会出现警告信息对话框,单击单击““确定确定””按钮。按钮。

•在设计视图中选定特殊符号,设置为西文字体,在设计视图中选定特殊符号,设置为西文字体,即可显示相应的符号。 即可显示相应的符号。

返回

Page 10: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑插入水平线插入水平线 插入工具栏 : HTML

“插入” /“HTML”/“水平线”

返回

属性检查器

Page 11: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑插入日期插入日期•选择选择““插入插入”” //““日期日期””命令,或者在命令,或者在““插插入入””栏的栏的““常用常用””选项卡中单击选项卡中单击““日期日期””按按钮,打开钮,打开““插入日期插入日期””对话框。对话框。

①插入工具栏 :常用 / 日期

返回

②“插入” /“日期”

Page 12: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑移动和复制 移动和复制 •选定 -选定 -““编辑编辑”” //““剪切剪切””    ““编辑编辑”” //““粘粘贴贴””

•复制:复制:““编辑编辑”” //““拷贝拷贝””  ““编辑编辑””//““粘粘贴贴””命令。命令。

返回

Page 13: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑导入导入 WordWord 文档 文档

导入导入 WordWord 文档时,可以选择导入的格式:文档时,可以选择导入的格式:•仅包含文本内容仅包含文本内容•带有段落、列表和表格等结构带有段落、列表和表格等结构•带有基本格式、全部格式带有基本格式、全部格式

“文件” /“导入” /“Word文档”

Page 14: 第 5 章 网页制作基础

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

先新建网页 单击…

返回

Page 15: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑设置文本格式

设置文本字体设置文本字体 ★ 属性检查器

① ② ③

④⑤

★“文本”菜单

返回

Page 16: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑设置文本格式

设置文本字体 设置文本字体 •选中 选中 ----““字体字体””下拉列表; 下拉列表; ““文本文本”” //““字字体体””子菜单 子菜单 • ““ 字体字体””下拉列表中列出的是由多种字体构下拉列表中列出的是由多种字体构成的字体组合。浏览网页时,浏览器按组合中成的字体组合。浏览网页时,浏览器按组合中的字体顺序在用户计算机系统上进行查找并显的字体顺序在用户计算机系统上进行查找并显示字体。 示字体。

Page 17: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑• ““字体字体””下拉列表下拉列表选择选择““编辑字体列表编辑字体列表””选项,选项,打开打开““编辑字体列表编辑字体列表””对话框,从中对话框,从中添加添加或修或修改改““字体字体””下拉列表中的字体组合。 下拉列表中的字体组合。

返回

“字体”下拉列表选择“编辑字体列表”

Page 18: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑设置文本大小设置文本大小• 选定文本 ,选定文本 ,““大小大小””下拉列表下拉列表中选择中选择• 设置文本大小有设置文本大小有两种方式两种方式::

1. 用数值来设置文本的绝对大小。2. 设置文本的相对大小:极小、特小、小、中、大、

特大、极大、较小、较大等。用浏览器查看网页时,用数值设置大小的文本用浏览器查看网页时,用数值设置大小的文本

能保持设计时的大小;能保持设计时的大小;设置相对大小的文本将随着浏览器的设置而改设置相对大小的文本将随着浏览器的设置而改

变文本的大小。 变文本的大小。

返回

Page 19: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑设置文本颜色 设置文本颜色 •单击属性检查器中的单击属性检查器中的““文本颜色文本颜色””按钮按钮•单击单击““调色盘调色盘””按钮,出现按钮,出现““颜色颜色””对话框对话框•选择选择““文本文本”” //““颜色颜色””命令 ,出现命令 ,出现““颜色颜色””对对话框话框

“调色盘”按钮

返回

Page 20: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑设置文本的其他格式 设置文本的其他格式 •选定文本后,选择选定文本后,选择““文本文本”” //““样式样式””子菜单子菜单中:中:粗体、斜体、下划线、删除线、打字型、粗体、斜体、下划线、删除线、打字型、强调、加强强调、加强等命令。等命令。

•属性检查器中属性检查器中““粗体粗体””按钮和按钮和““斜体斜体””按钮。 按钮。

返回

Page 21: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑编排段落格式

段落格式包括段落的对齐方式、段落的缩进和段落格式包括段落的对齐方式、段落的缩进和突出突出

标准格式,用于统一设置段落中字符的大小和颜色标准格式,用于统一设置段落中字符的大小和颜色段落格式作用于整个段落,因此段落格式作用于整个段落,因此不必选定整个段落不必选定整个段落

的内容,只要将插入点定位于段落中的任何位置,的内容,只要将插入点定位于段落中的任何位置,设置的格式将会作用于整个段落。 设置的格式将会作用于整个段落。

Page 22: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑应用标准格式 应用标准格式 •DreamweaverDreamweaver 提供了多种标准格式,它包提供了多种标准格式,它包括:括:““段落段落””、、““预先格式化的预先格式化的””、、““标题标题11”……“”……“标题标题 66””等。等。

•定位于段落中,在 定位于段落中,在 ““格式格式””下拉列表中选择 下拉列表中选择 • ““ 文本文本”” //““段落格式段落格式””子菜单中列出的标准子菜单中列出的标准格式。 格式。

返回

Page 23: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑设置对齐方式设置对齐方式•段落的对齐方式有:左对齐、居中对齐、右对段落的对齐方式有:左对齐、居中对齐、右对齐和两端对齐。齐和两端对齐。

•单击属性检查器中的对齐单击属性检查器中的对齐按钮按钮• ““ 文本文本”” //““段落格式段落格式””子菜单中的对齐格式。子菜单中的对齐格式。

返回

Page 24: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑文本缩进和突出 文本缩进和突出 •文本缩进:将整个段落的左右边界分别向中央文本缩进:将整个段落的左右边界分别向中央缩进一段距离;缩进一段距离;

•文本凸出:将段落的左右边界向外扩展一段距文本凸出:将段落的左右边界向外扩展一段距离。离。

•单击单击属性检查器属性检查器中的中的““文本缩进文本缩进””按钮和按钮和““文文本突出本突出””按钮;按钮;

•选择选择““文本文本”” //““缩进缩进””和和““突出突出””命令;命令;•按按 TabTab 键,设置段落缩进。 键,设置段落缩进。

返回

Page 25: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑制作列表 列表分为两种:项目列表和编号列表。 列表分为两种:项目列表和编号列表。

文本缩进

项目列表 Shift+Enter换行

Page 26: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑项目列表 项目列表 •单击单击属性检查器属性检查器中的中的““项目列表项目列表””按钮;按钮;•选择选择““文本文本”” //““列表列表”” //““项目列表项目列表””命令。命令。•项目列表是作用于段落的,因此项目符号项目列表是作用于段落的,因此项目符号仅显仅显示在段落的开头示在段落的开头。。

•改变列表的层次:改变列表的层次:单击属性检查器中的单击属性检查器中的““文本文本缩进缩进””按钮和按钮和““文本突出文本突出””按钮按钮。。

•清除项目列表形式:清除项目列表形式:再次单击再次单击““项目列表项目列表””按按钮,或选择钮,或选择““文本文本”” //““列表列表”” //““无无””命令。 命令。

Page 27: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑编号列表 编号列表 •单击单击属性检查器属性检查器中的中的““编号列表编号列表””按钮;按钮;•选择选择““文本文本”” //““列表列表”” //““编号列表编号列表””命令。 命令。 •改变编号列表的层次:改变编号列表的层次:设置文本的缩进和突出设置文本的缩进和突出•清除编号:清除编号:再次单击再次单击““编号列表编号列表””按钮,或选按钮,或选择择““文本文本”” //““列表列表”” //““无无””命令。 命令。

Page 28: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑修改列表属性 修改列表属性 •默认的项目符号是默认的项目符号是““●●””,编号是,编号是““ 1. 2. 3.1. 2. 3.””。。•选择选择““文本文本”” //““列表列表”” //““属性属性””命令(若未激命令(若未激活先选一次项目列表),在打开的活先选一次项目列表),在打开的““列表属列表属性性””对话框中可以重新设置列表的外观。 对话框中可以重新设置列表的外观。

返回

Page 29: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑文本拼写检查、查找和替换

拼写检查 拼写检查 选择选择““文本文本”” //““检查拼写检查拼写””命令,便对页面中命令,便对页面中的文本进行拼写检查。当遇到无法识别的单词的文本进行拼写检查。当遇到无法识别的单词时,将出现时,将出现““检查拼写检查拼写””对话框。对话框。

Page 30: 第 5 章 网页制作基础

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

5.3.1 5.3.1 文本编辑文本编辑查找和替换 查找和替换 选择选择““编辑编辑”” //““查找和替换查找和替换””命令,打开命令,打开““查查找和替换找和替换””对话框。对话框。

返回

Page 31: 第 5 章 网页制作基础

演示演示通过“首选参数”修改“默认编码”先复制文本内容,再设定格式先消除 <br /> ,再用 <p>选中文本再设置样式 ( 字体、大小、颜色 )单击段落再设置缩进,包括项目列表段。通过“首选参数”选中“允许多个连续的空格”项目列表中每个项目事先作为一个段落。设置页面背景、页边距插入水平线给标题加上水平线添加版权信息

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

Page 32: 第 5 章 网页制作基础

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

作业作业 01——01—— 效果如下,素材见效果如下,素材见 elearningelearning

华文中宋, 36号,白色

楷体,中号,黄色隶书,特大号,黄色

方正姚体,中号,白色

华文中宋,中号,黄色