收藏 分享(赏)

第4章 基本网页编辑.ppt

上传人:jw66tk88 文档编号:10200778 上传时间:2019-10-18 格式:PPT 页数:168 大小:1.90MB
下载 相关 举报
第4章  基本网页编辑.ppt_第1页
第1页 / 共168页
第4章  基本网页编辑.ppt_第2页
第2页 / 共168页
第4章  基本网页编辑.ppt_第3页
第3页 / 共168页
第4章  基本网页编辑.ppt_第4页
第4页 / 共168页
第4章  基本网页编辑.ppt_第5页
第5页 / 共168页
点击查看更多>>
资源描述

1、第4章 基本网页编辑,4.1 网页文本的处理 4.2 使用样式表控制文本外观 4.3 表格布局 4.4 超链接概述 实训四,4.1 网页文本的处理,网页是构成站点的主要元素,在站点的建设过程中,大 量的工作是对网页进行编辑、修饰。而对文本的处理则是网页编辑的基础。网页文本的处理通常体现在两个方面,即文字的属性设置以及文字的风格统一。首先,网页文字主要是提供给用户浏览的,因此使用在网页上的文字应该美观、大方,符合人们的阅读习惯。,其次,在同一个站点中的网页,应该保持前后一致的风格特点。这不仅要体现在网页的整体布局上,而且要体现在文本的样式上。例如,可以对同一级别的标题在不同的网页中使用相同的字体

2、、字号和颜色等。,4.1.1 文本属性的设置1. 文字属性的设置文字属性的设置主要包括对字体、字形、字号、字体颜色以及字体效果的设置。文字属性的设置步骤如下。(1) 在普通“网页”视图中,单击“格式”菜单“字体”命令或者单击鼠标右键。(2) 在弹出的快捷菜单上单击“字体”命令,这时将显示“字体”对话框,如图4-1所示。(3) 在“字体”对话框中单击“字体”选项卡。,图4-1 设置文本属性,在“字体”选项卡中可以进行如下的设置。 设置字体在FrontPage 2002中,能够设定的字体类型与编辑网页时所使用的计算机系统中安装的字体类型有关。而网络用户在浏览网页时所使用的字体,取决于他们使用的计算

3、机中所安装的字体。当用户浏览网页时,如果遇到网页中出现某种特殊的字体,而用户的计算机上又不存这种字体时,浏览器就无法正常地显示,网页上就会显示出乱码。,为了使网页能够在其他人的计算机上正确地显示,因此在设计网页时,应该尽可能地使用标准的、常用的字体。要设置字体,单击“字体”选项卡,在“字体”滚动框中设置字体,如宋体、楷体或者其他字体,并且可以在“预览”框中进行预览。, 设置字形通过对字形的设置,可以使文字具有不同的表现力。FrontPage 2002中提供了常规、倾斜、加粗和加粗倾斜4种字形。 要设置字形,可以在“字形”列表框中选择“字形”,如粗体、斜体等。 设置字号在FrontPage 20

4、02中,字号共分为17级。要设置字号,可单击“字号”,可以在“字号”列表框中选择所需的字号。, 设置字体的颜色对网页文本适当地使用颜色,可以修饰和美化网页。在FrontPage 2002中,网页文字可以使用的颜色达224种。要设置文字的颜色,可以在“颜色”下拉列表框中选择需要的字体颜色,如图4-2所示。如果希望选择更多的颜色,可单击“其他颜色”按钮,此时将显示“其他颜色”对话框。,图4-2 设置字体的颜色,在“其他颜色”对话框中,单击“选择”按钮,使用“吸管”工具,可以在图片、图像中吸取颜色并定义为字体的颜色。也可以使用“自定义功能”,在打开的“颜色”对话框中选择需要的颜色,并将其设为字体的颜

5、色。如图4-3所示。, 字体效果在文本中适当地使用字体效果可以起到突出和强化内容的作用。要使用字体效果,可以在“效果”复选框中选择设置若干个字体效果,如给字体添加下划线,为字体设置上、下标等。在“字体”选项卡中设置所需的若干项字体属性之后,单击“确定”按钮,即可将字体的属性(如字体、字号、颜色和效果)应用到所选的文本中。,图4-3 字体颜色的高级设置,2. 使用工具栏设置字体属性使用“格式”工具栏,可以快速地选择字体、字号,添加文字的强调效果。1) 选择字体在“字体”下拉列表框中,单击表框右侧的按钮,然后从中选择所需要的字体。2) 给文本加下划线选择要加下划线的文本,再单击“下划线”图标 。,

6、3) 将文本设为粗体 选择需要设为粗体的文本,再单击“粗体”图标 。 4) 将文本设为斜体 选择需要设为斜体的文本,再单击“斜体”图标 。,3. 字符间距的设置 在“字体”对话框中,单击“字符间距”选项卡,如图4-4所示。在“间距”框中,单击“加宽”或“紧缩”来更改文本的间距。在“间距大小”框中,以像素为单位指定要增加或减小的字符间距。,图4-4 设置字符间距,4.1.2 段落和段落格式1. 插入换行符在文本编辑过程中,当一个句子很长时就需要换行。在FrontPage 2002的普通“网页”视图中,要插入一个换行符,先要将插入点放在需要插入换行符的位置上,然后单击“插入”菜单“换行符”命令。这

7、时将打开“换行符”属性对话框,如图4-5所示。,图4-5 “换行符”属性对话框,在“换行符”属性对话框中,可以设置以下4种换行形式。 普通换行符:与使用Shift+Enter键的功能相同,将保持上一个换行的属性。 清除左边距:如果在网页中设置了左边距,则将取消左边距。 清除右边距:如果在网页中设置了右边距,则将取消右边距。 清除左右边距:如果在网页中设置了左右边距,则将取消左右边距。,2. 设置段落格式网页文本中的段落格式是指段落的外观,包括段缩进量、行间距、段间距、对齐方式等。在FrontPage 2002中可以设置不同的段落格式,以获得不同的段落外观。要设置段落格式,可以在普通“网页”视图

8、中,选择一个或多个需要设置格式的段落,单击“格式”菜单“段落”命令,或者单击鼠标右键,然后单击快捷菜单上的“段落”命令。这时屏幕将显示“段落”对话框,如图4-6所示。,图4-6 设置段落格式,在“段落”选项卡中可以设置以下几个方面的属性。 设置段落或行的缩进量。在“段落”对话框的“缩进”文本框中,可以作如下的设置。如果要缩进段落的左边,可在“文本之前”文本框中键入要缩进的像素值。 如果要缩进段落的右边,可在“文本之后”文本框中键入要缩进的像素值。如果要缩进段落中文本的首行,可在“首行缩进”文本框中键入要缩进的像素值。, 设置段落间距。在“段落间距”文本框中,可以作如下的设置。 如果要设置每个段

9、落之上的间距,可在“段前”文本框中键入所需要的段前像素值。如果要设置每个段落之下的间距,可在“段后”文本框中键入所需要的段后像素值。如果要设置文本行之间的垂直间距,可在“行距大小”文本框中选择所需的选项。 若要设置字间距,可在“单字间距”框中键入像素值。, 设置段落的对齐方式。若需要设置段落的对齐方式,可在“对齐方式”文本框中选择一种需要的对齐方式。在以上的设置完成之后,单击“确定”按钮,即可将所设定的格式应用到选定的段落中。,4.1.3 项目符号和编号列表以列表的形式组织信息,具有简洁、直观、条理清晰的特点,因此在网页的设计中也经常被使用。在FrontPage 2002中可使用的列表有6种:

10、项目符号列表、自定义项目符号列表、编号列表、定义列表、大纲和多层次列表、可折叠列表。,1. 项目符号列表项目符号列表主要用于那些不分先后次序、不需要编号的项目。例如,对于电子系、经济系、外语系、文史系等内容上为并列关系的情况,就可以使用项目符号列表。在FrontPage 2002中,可以在现有的文本行中插入项目符号,或者在键入文本时自动创建项目符号,还可以使用图片作为项目符号。,插入项目符号的步骤如下。(1) 在普通“网页”视图中,将插入点放在要创建项目符号列表的位置。(2) 单击“格式”菜单“项目符号和编号”命令。 (3) 在打开的“列表属性”对话框中,单击“无格式项目列表”选项卡,再单击包

11、含要使用项目符号的框,然后单击“确定”按钮,如图4-7所示。,图4-7 创建无格式项目列表,(4) 在项目符号旁边键入要添加的文本,然后按“确定”按钮。 (5) 若要结束列表,再按一次“确定”按钮。 注意,如果网页中使用了主题,则“无格式项目列表”选项卡不可用。,2. 图片项目符号列表在FrontPage 2002中可以创建图片来用作项目符号,而不使用默认的标准项目符号(圆圈或方点)。使用图片创建项目符号的步骤如下。 (1) 单击“格式”菜单“项目符号和编号”命令。(2) 在打开的“列表属性”对话框中选择“图片项目符号”选项卡,并选中“指定图片”单选按钮,然后单击“浏览”按钮,如图4-8所示。

12、,图4-8 创建图形项目符号,(3) 在打开的“选择图片”对话框中,选择所需要的图片,然后单击“打开”按钮。(4) 在“图片项目符号”选项卡上单击“确定”按钮。(5) 在项目符号旁边键入要添加的文本,再按“确定”按钮。(6) 若要结束列表,在“列表属性”对话框中再按“确定”按钮。,3. 编号列表编号列表主要应用在有顺序要求的列表中。例如,按高、低顺序组织的列表,或者按主、次顺序组织的列表。创建一个编号列表的步骤与创建一个无符号项目列表时的步骤基本相同。可以在打开的“列表属性”对话框中选择“编号”选项卡,并选择一种编号的样式,还可以在“起始编号”文本框中指定序列的起始编号,如图4-9所示。,4.

13、 创建大纲或多层次列表(1) 在“网页”视图下,将插入点放在要创建大纲的位置。 (2) 单击“格式”菜单“项目符号和编号”命令,再单击“编号”选项卡。(3) 在“编号”选项卡上,单击开始要使用的号码或字母样式框,然后单击“确定”按钮。,图4-9 创建编号列表,(4) 依次输入大纲中的每一个项目,再按回车。 (5) 当输入最后一个项目之后,按两次回车结束列表。(6) 根据大纲的各层次要求,选择以下步骤之一: 若要将项目移到下一个编号层次,选中该项目,再单击“增加缩进”图标 两次。 若要把项目的格式设为当前层次上的段落(不加项目符号或编号),请选中该项目,再单击“增加缩进”图标一次。, 如果要将项

14、目移到上一个层次,请选中该项目,然后根据需要单击“减少缩进”图标 一次或多次。如果要将不同的编号、字母或项目符号样式应用到其他层次,可以在选中层次或子层次上的项目后,再单击鼠标右键,然后单击快捷菜单上的“列表属性”命令,在“编号”、“图片项目符号”、“无格式项目符号”选项卡中任选一个,单击包含要使用的样式框即可。各类列表的实例如图4-10所示。,图4-10 各类列表实例,5. 可折叠大纲所谓可折叠大纲是指具有类似于菜单特点的列表。当单击列表中某个含有子项目的项目符号时该项目能够被展开或者收缩。创建可折叠大纲的步骤如下。(1) 在“网页”视图下,将插入点放在要创建大纲的位置。(2) 单击“格式”

15、菜单“项目符号和编号”命令,再单击“编号”选项卡。,(3) 在“编号”选项卡上,单击开头要使用的号码或字母样式框,并选中“启用可折叠大纲”和“开始时折叠”两个复选框,然后单击“确定”按钮,如图4-11所示。,图4-11 创建可折叠大纲列表,(4) 依次键入大纲中每一个项目,再按回车。(5) 键入最后一个项目之后,按两次回车结束列表。(6) 根据大纲的各层次要求,选择以下步骤之一: 若要将项目移到下一个编号层次,可以选中该项目,然后再单击“增加缩进”图标 两次。, 若要把项目的格式设为当前层次上的段落(不加项目符号或编号),请选中该项目,再单击“增加缩进”图标 一次。 若要将项目移到上一个层次,

16、请选中该项目,再根据需要单击“减少缩进”图标 一次或多次。,如果要将编号、字母或项目符号样式应用到其他层次,如中层次或子层次上的项目,可以单击鼠标右键,然后单击快捷菜单上的“列表属性”命令,在“编号”、“图片项目符号”、“无格式项目符号”选项卡中任选一个,单击包含要使用的样式框即可。创建了可折叠式大纲列表之后,可以在浏览器中浏览其结果,如图4-12所示。,图4-12 浏览器中的折叠式大纲列表,4.1.4 FrontPage 2002中的特殊元素1. 关于符号和特殊字符在网页的编辑中有时需要使用一些特殊的字符和符号。例如,省略号()、小节号()、注册号()、一些国际通用字符(、)、国际通用货币符

17、号(、)等,以及一些附加的装饰性符号(例如Wingdings中的、等)。这些特殊字符和符号虽然不能显示在键盘上,但是在屏幕上和打印时都可以显示。,在网页中插入符号可以按以下步骤进行。(1) 在普通“网页”视图中,将插入点放在要插入符号或特殊字符的位置上。(2) 单击“插入”菜单“符号”命令,打开“符号”对话框,如图4-13所示。,图4-13 “符号”对话框,(3) 在打开的“符号”对话框中,选择以下操作之一: 单击要插入的符号或特殊字符,再单击“插入”。 如果没有看到所要的符号,可以单击“字体”或“子集”,再单击“插入”。(4) 单击“关闭”,即可将所需的符号插入到网页中。,2. 水平线在网页

18、中水平线通常被用于分隔主题、章节和其他网页元素。 插入水平线可按以下步骤进行。(1) 在“网页”视图中,将插入点放在要插入水平线的位置上。 (2) 单击“插入”菜单“水平线”命令,就可以在插入点上放置一条水平线。,图4-14 设置水平线属性,(3) 要设置或修改水平线的属性,可以先使用鼠标左键单击水平线,然后单击鼠标右键,在弹出的快捷菜单中选择“水平线属性”命令,将打开“水平线属性”对话框,如图4-14所示。在“水平线属性”对话框中可以作如下设置。“宽度”:可以在“宽度”文本框中设置水平线的宽度(以像素为单位),也可以按窗口宽度的百分比设置水平线的宽度。,“高度”:可以在“高度”文本框中设置水

19、平线的高度(以像素为单位)。对齐方式:为水平线选择对齐方式。“颜色”:在“颜色”下拉列表框中可以设置水平线的颜色。“样式”:单击“样式”按钮可打开“修改样式”对话框,可以进一步设置水平线。,在FrontPage 2002中还可以使用插入图像的方法来插入水平线。将插入点放在要插入水平线的位置上,然后在确定要插入水平线的点后单击“插入”菜单“图片”“来自文件”命令,这时将打开“图片”对话框,可以选择需要的图片。例如,在Microsoft Officemediaoffice10 lines下提供了许多可作为水平线的图片。,4.2 使用样式表控制文本外观,通过对网页中文本属性、段落属性以及其他元素的属

20、性设置,可以控制网页的显示外观。这种方法通常对文本块、段落或者单个的网页很有效。但是要使用这种方法为一个包含有很多网页的大型站点设置统一的风格,显然是比较麻烦的。为了能够高效地控制网页的外观,FrontPage 2002使用了“级联样式表”(Cascading Style Sheet,简称CSS技术)。,“级联样式表”实际上与前面介绍过的网页模板很类似,是一个定义了网页中各种元素样式的文本文件。在新建网页时,可以使用样式表来统一网页中文本的字体、大小、颜色,以及网页的背景、列表、网页上标题的布局、段落等等。,4.2.1 创建和使用“内嵌级联样式表”在FrontPage 2002中,可以创建两种

21、形式的级联样式表,即“内嵌级联样式表”和“外部级联样式表”。“内嵌级联样式表”的应用分为两步,即创建“内嵌级联样式表”和使用“内嵌级联样式表”。1. 创建“内嵌级联样式表”创建“内嵌级联样式表”是在“网页”视图中进行的,其步骤如下。 (1) 在普通“网页”视图中,单击“格式”菜单“样式”命令,打开“样式”对话框(如图4-15所示)。,图4-15 “样式”对话框,(2) 单击“新建”按钮,然后在“名称(选择器)”框中键入新样式的名称,如图4-16所示。,图4-16 自定义样式表,(3) 在“样式类型”文本框中,选择“段落”或“字符”样式。 (4) 再单击“格式按钮,在“格式”菜单中分别定义新样式

22、: 设置字体属性(如字体、颜色或字符间距等),可单击“字体”。 设置对齐方式、缩进或段落间距,可单击“段落”。 设置边框和底纹,可单击“边框”。 设置项目符号和编号的样式,可单击“编号方式”。 设置定位属性(如环绕样式等),可单击“定位”。,例如,在如图4-16所示的“新样式”对话框的“名称(选择器)”框中,键入新样式的名称为“Mystyle”,将字体定义为“黑体”,大小为“24 pt”,颜色为“红色”,对齐方式为“居中”,边框为“虚线”。然后按“确定”按钮关闭“新样式”及“样式”对话框。单击“网页”视图底部的“HTML”按钮,将视图窗口切换到HTML窗口。这时可以看到,新建的名称为Mysty

23、le的样式已经嵌入到当前的HTML文档中,在之间,即,2. 应用样式表要在网页中使用“内嵌式级联样式表”(如新建的Mystyle),首先要在“网页”视图中选中需要应用该样式的文本,然后单击“格式”工具栏上的“样式”下拉菜单,从中选择Mystyle样式即可。,除了可以使用上述自定义的方法创建样式表外,还可以用修改HTML标记的方法来创建样式表。如果要修改HTML标记,可以在图4-15所示的“样式”对话框中选择一种HTML标记,然后单击“修改”按钮,在打开的“修改样式”对话框中,单击“格式”按钮,然后按照与上面相同的方法进行定义和使用。,4.2.2 “外部级联样式表”以上介绍的“内嵌式级联样式表”

24、是直接在网页中定义的,这种样式表的缺点是,只能在创建它的网页中使用,不能应用于其他的网页。而“外部级联样式表”不仅可以被当前站点内的所有Web页所引用,还可以被其他的站点所引用。这种样式表是一个独立的样式表文件,扩展名为.css。“外部级联样式表”的使用也分为两步,即创建样式表和链接样式表。,1. 创建“外部级联样式表”创建“外部级联样式表”的步骤如下。(1) 在普通“网页”视图中,单击“文件”菜单“新建”,再单击“网页或站点”命令。(2) 在“新建网页或站点”任务窗格中,在“根据模板新建”标签之下,单击“网页模板”命令,如图4-17所示。,图4-17 创建外部样式表,(3) 在“网页模板”对

25、话框中,单击“样式表”选项卡,选择“普通样式表”图标,然后单击“确定”按钮。这时FrontPage将创建一个文件扩展名为 .css的新网页,并且显示在“网页”视图窗口中以供编辑。(4) 单击“格式”菜单“样式”命令,打开“样式”对话框(如图4-15所示)。在“样式”对话框中,可以按前述方法选择修改或者新建样式表。,(5) 保存该样式表文件。下面以修改HTML标记中的p标记为例,创建一个“外部级联样式表”。p标记在网页中的作用是控制网页中普通段落的样式。可以在图4-15所示的“样式”对话框中选择p标记,然后单击“修改”按钮,如图4-18所示。这时,p标记自动出现在打开的“修改样式”对话框的“名称

26、(选择器)”文本框中。,图4-18 定义外部样式表,单击“格式”按钮,将字体定义为“黑体”,大小为“36 pt”,颜色为“红色”,然后按“确定”按钮关闭“修改样式”对话框、“样式”对话框。这时,在“网页”视图窗口中将显示修改后的p标记属性,如图4-19所示。单击“常用”工具栏上“保存”图标,保存该文件并命名为Mycss。,图4-19 修改p标记,2. 使用“外部级联样式表”要把 “外部级联样式表”应用到Web站点中,还需要把样式表链接到所需站点的网页上。把“外部级联样式表”链接到网页可按以下步骤进行。(1) 在普通“网页”视图中单击“格式”菜单“样式表链接”命令,出现一个“链接样式表”对话框(

27、如图4-20所示)。,图4-20 “链接样式表”对话框,(2) 在“链接样式表”对话框中单击“添加”按钮,将打开“选择样式表”对话框。在“选择样式表”对话框中单击 图标,打开“选择文件”对话框,从中选择要链接的样式表文件(如Mycss.css),然后单击“确定”按钮,关闭“选择文件”对话框。这时,所选择的样式表将出现在“链接样式表”对话框中。再按“确定”按钮关闭“链接样式表”对话框,切换到HTML窗口视图。可以看到,样式表已经被链接到当前HTML文档中,其格式为: ,(3) 如果要将样式表应用到站点中的所有网页上,可在“链接样式表”对话框中,选择“所有网页”单选按钮。如果要使用位于某个站点中的

28、样式表文件,可以单击图标。,4.3 表 格 布 局,目前,在网页的设计、制作过程中,普遍采用表格进行排版、组织和布局网页上的各种元素。在网页中使用表格的主要原因是,表格具有精确的定位功能和灵活的属性控制特性。图4-21所示,就是一个在网页中使用表格布局的实例。,图4-21 表格布局实例,从这个实例中可以看到,网页上的各种文本、图片以及其他元素,都被组织在了表格中。表格由单元格构成的行与列所组成,单元格中可以插入文本或图形。表格中的文本也可以像其他文本一样设置格式,可以更改字体样式、字号、颜色以及其他属性。通过指定每个单元格中文本的显示方式,可以控制单元格中边框与文本之间的间距大小,也可以设置文

29、本的水平和垂直对齐方式。,通过将一个单元格拆分为两个或更多的单元格,可以在表格中创建更多的单元格,也可以将相邻的单元格合并为一个,还可以方便地控制表格的高度和宽度。一旦在表格中确定了所需的所有行与列之后,就可以根据需要设置行高和列宽。 可以用整个表格的百分比或以像素为单位的特定尺寸来定义行高和列宽,或者也可以让所有行和列的间距一致。,可以在某些单元格或者整个表格中应用背景色或图片。背景色可用来给特定的行或列添加底纹,从而起到强调作用。背景图片则可以增加表格的视觉吸引力。事实上,在图4-21中看到的这些虚线表格,它们的边框属性值为0。它们的作用就是定位、安排网页上的内容。因为当表格边框的属性值设

30、为0时,在浏览器中将不显示这些表格的边框。在这个例子中,正是利用表格的这一属性特点,既合理安排了网页内容,又获得了良好的布局结构和整洁、美观的页面。,4.3.1 在网页中创建表格在FrontPage 2002中创建表格与在Word中创建表格很类似,也有多种创建表格的方法。比如,可以使用“表格”菜单上的“插入”命令插入表格;也可以使用“手绘表格”命令创建表格;还可以使用“常用”工具栏上的“插入表格”图标 快速地创建表格。,1. 使用菜单创建表格(1) 在普通“网页”视图中,将插入点放在要插入表格的位置。 (2) 单击“表格”菜单“插入”命令,再单击“表格”命令,这时将打开“插入表格”对话框,如图

31、4-22所示。,图4-22 “插入表格”对话框,(3) 在“插入表格”对话框的“行数”框中键入需要的行数。(4) 在“列数”框中键入需要的列数。(5) 在“对齐方式”框中选择表格在网页上的位置。 (6) 在“边框粗细”框中以像素为单位键入需要的表格边框宽度。如果不要表格边框,可以键入0。 (7) 如要更改表格的单元格边距(单元格边框和内容之间的间距),可以在“单元格边距”框中键入数字。(8) 如要更改表格的单元格间距(单元格之间的间距),可以在“单元格间距”框中键入数字。,(9) 如要更改表格宽度,可以在以下单选按钮中选择: “像素”:以像素为单位定义表格宽度。 “按百分比”:以屏幕宽度的百分

32、比定义表格的宽度。注: 如果表格的大小以像素为单位,那么无论显示表格的网页是多大,该表格的大小都会维持不变。 如果表格的大小以屏幕宽度的百分比为单位,则其大小会随浏览器窗口的大小而变化。,2. 使用“手绘表格”命令创建表格使用“手绘表格”命令创建表格不需要指定行数和列数。(1) 单击“表格”菜单“插入”命令,再单击“手绘表格”命令,这时将打开“手绘表格”的“表格”工具栏(如图4-23所示)。,图4-23 “表格”工具栏,(2) 在“表格”工具栏上单击图标,然后在网页中要插入表格的位置上,使用鼠标从表格的左上角向右下角拖动,以绘制表格的外边框。(3) 如果要生成单元格,可以在表格内绘制水平线和垂

33、直线。(4) 如果要删除任何不想要的线,可以单击“表格”工具栏上的“擦除”图标,再按住鼠标拖过不想要的线段。当此线段变为红色时放开鼠标按钮,即可擦除。(5) 完成绘制表格后,单击“表格”工具栏上的“手绘表格”按钮,关闭“表格”工具栏。,4.3.2 表格的编辑在表格的使用过程中,经常需要对表格进行修改。比如,增加行或列,调整表格的大小,拆分或者合并表格,嵌套表格等。,1. 选择表格元素1) 选择全部表格 在表格中的任意位置单击鼠标,然后单击“表格”菜单“选择”命令,再单击“表格”命令,即可选择全部表格。 将鼠标移到表格的左上角,然后双击鼠标,亦可选择全部表格。,2) 选择单元格 (1) 将鼠标的

34、插入点放在单元格中。 (2) 单击“表格”菜单“选择”,再单击“单元格”命令,即可选择该单元格。 注:如果要选择多个单元格,可以用以上方法,先选择其中一个单元格,再按下Ctrl键,然后单击要选择的其他各单元格。,3) 选择行或列 (1) 将插入点放在要选择的行或列的单元格中。 (2) 单击“表格”菜单“选择”,再单击“行”或“列”命令。或将鼠标移到要选择的“行”的左面或“列”的上面,当光标变成向“右”或向“下”的黑色箭头时单击鼠标。注:要选择多行或多列,可在选中一行或一列后,再按下Ctrl键,然后按以上方法选择其他的行或列。,2. 增加表格的行或列(1) 将插入点放在要插入行或列的旁边的单元格

35、中。(2) 单击“表格”菜单“插入”,再单击“行或列”命令。这时将打开“插入行或列”对话框。(3) 在对话框中,单击“行”或“列”单选框,在“行数”或“列数”文本框中键入要插入的行数或列数。(4) 在“位置”标签下,单击要放置行或列的单选框。,3. 全部或部分删除表格1) 删除全部表格(1) 在要删除的表格的任意位置单击鼠标左键。(2) 单击“表格”菜单“选择”,再单击“表格”命令。(3) 在表格的任意位置单击鼠标右键,再单击快捷菜单上的“删除单元格”命令。,2) 删除行或列(1) 将插入点放在要删除行或列的单元格中。(2) 单击“表格”菜单“选择”,再单击“行”命令。(3) 在选中的行上单击

36、鼠标右键,再单击快捷菜单上的“删除单元格”命令。,3) 删除单元格(1) 将插入点放在要删除的单元格中。(2) 单击“表格”菜单“选择”,再单击“表格”命令。(3) 在单元格上单击鼠标右键,再单击快捷菜单上的“删除单元格”命令。,4. 合并和拆分单元格合并单元格就是将多个连续分布在一个矩形区域中的单元格合并为一个单元格,而拆分单元格则是将一个单元格拆分为若干行或若干列。1) 合并单元格(1) 在表格中选择要合并的矩形区域。(2) 单击“表格”菜单“合并单元格”命令。,2) 拆分单元格(1) 选择要拆分的单元格,单击“表格”菜单“拆分单元格”命令。(2) 在打开的“拆分单元格”对话框中,单击要拆

37、分为“行”或“列”的单选框。(3) 在“行数”或“列数”文本框中键入需要的行、列数。,5. 嵌套表格嵌套表格就是在现有的表格内插入表格。(1) 将光标放在要插入表格的单元格中。(2) 单击“表格”菜单“插入表格”命令,打开“插入表格”对话框,如图4-22所示。(3) 在图4-22所示的对话框中根据需要定义要嵌入的表格。,4.3.3 表格属性设置表格具有很多的属性,通过对表格属性的设置可以控制表格的外观。当表格应用在网页中时,表格的属性将直接影响网页的外观。设置表格属性的步骤如下。(1) 在“网页”视图中,用鼠标右键单击表格。(2) 单击快捷菜单上的“表格属性”命令,这时将打开“表格属性”对话框

38、,如图4-24所示。(3) 在这个对话框中可以作如下属性设置。, 设置表格的布局。表格的布局属性包括以下选项。对齐方式:设置表格在网页中水平方向的对齐方式。浮动:设置文本与表格之间的环绕方式。类似于文本与图片之间的环绕。,图4-24 设置表格属性,单元格间距:设置表格中单元格之间的间距。单元格间距是指围绕在每个单元格周围的框的厚度(以像素为单位)。单元格边距:设置表格单元格内容和内边缘之间的间距(以像素为单位)。指定宽度:设置表格的宽度。可以按像素或百分比为单位设置列的宽度。高度:设置表格的高度。可以按像素或百分比为单位设置列的高度。, 设置表格的边框。表格的边框属性包括以下选项。粗细:设置以

39、像素为单位的表格边框宽度。粗细为0时,在浏览器中将不显示表格。颜色:设置表格边框的颜色。亮边框和暗边框:设置表格具有三维效果的双色边框。显示单元格和表格边框:设置将颜色应用到单元格和边框。, 设置表格的背景。表格的背景包括背景图片和背景颜色两个属性。背景可以用于整个表格,也可以用于若干个单元格。设置表格背景图片的方法是,在“背景”标签下选择“使用背景图片”复选框,再单击“浏览”按钮打开“选择背景图片”对话框,并选择要作为背景的图片。,如果知道图片的名称,可在“文件名称”框中键入名称,再单击“打开”。如果图片是在本地驱动器或网络上,在“搜索”框中找到所需的图片;或者单击对话框左边的按钮之一来找到

40、图片,再单击“打开”,背景图片即显示在所选的表格中。,4.4 超链接概述,超链接是Web开发中的一个重要概念。超链接是从文本、图片、图形或图像映射指向万维网上的网页或文件的指针。在万维网上,超链接是在网页和Web站点之间导航的主要方法。当站点的访问者单击超链接时,被链接的目标将显示在Web浏览器中。,例如,指向网页的超链接将在Web浏览器中显示该网页,指向AVI文件的超链接将在媒体播放器中打开该文件。超链接的目标可以是一个站点、一个Web页、一个电子邮件地址或者是一个Office文档、一幅图片、一个多媒体文件,甚至是一段程序。,4.4.1 超链接的各种形式在FrontPage中创建的超链接形式

41、包括文本的超链接、图片的超链接、书签的超链接、电子邮件的超链接以及脚本的超链接等。在建立一个超链接时,必须确定被链接的目标URL。URL有绝对URL和相对URL之分。绝对URL包含完整的地址,包括协议、Web服务器、路径和文件名。,例如,http:/ 创建文本和图片的超链接1. 创建文本超链接文本的超链接,是指在选定的文本上定义的超链接。当用鼠标单击该文本时,浏览器就会根据超链接目标的URL,跳转到目标文件上。创建文本超链接的步骤如下。,(1) 在普通“网页”视图中,选择要设置为超链接的文本。(2) 单击“插入”菜单“超链接”命令,或单击“常用”工具栏上的“超链接”图标 ,将打开“插入超链接”

42、对话框,如图4-25所示。,图4-25 创建文本或图像的超链接,(3) 这时要设置超链接的文本出现在了“要显示的文字”文本框中。也可以在该文本框中直接键入要设置为超链接的文本。 (4) 在“地址”(URL)文本框中指定超链接的目标位置;或者单击“浏览文件”图标 在磁盘中选择要链接的目标文件;或者单击“浏览Web”图标 ,在万维网中选择要链接的目标文件。然后单击“确定”按钮。,(5) 这时被设置为超链接的文本变为蓝色,并且带有下划线,表明已经建立了超链接。(6) 保存网页。这样在浏览器中,当鼠标移动到该链接时,即变成“手形”光标,单击鼠标即可链接到目标。,2. 删除超链接如果要删除不需要的超链接

43、,可以先选中要删除的超链接,然后单击“插入”菜单“超链接”命令。或单击鼠标右键,在快捷菜单上单击“超链接属性”命令。此时被选中的超链接显示在“编辑超链接”对话框中,单击“删除链接”按钮,即可删除该超链接。,3. 图片的超链接建立图片超链接有两种方法。第1种方法是,为整个图片设置超链接。用这种方式创建的超链接,在浏览器中单击图片上任一部分,都可以显示其链接的目标。第2种方法是,为图片分配一个或多个热点,热点是图片上的超链接区域。包含热点的图片称为图像映射。有关创建热点和图像映射的详细内容请参考第6章。,用第1种方法创建图片超链接的步骤如下。(1) 在普通“网页”视图中,选择要设置为超链接的图片。

44、(2) 单击“插入”菜单“超链接”命令,或单击“常用”工具栏上的“超链接”图标 ,将打开“插入超链接”对话框,如图4-25所示。,(3) 在“地址”(URL)文本框中指定超链接的目标位置,然后单击“确定”按钮即可。图片上的超链接通常是不可见的,为了验证图片超链接的正确性,可以在普通“网页”视图中,将鼠标移动到设置了超链接的图片上。这时如果在状态栏上显示目标文件的URL,则表示图片的超链接是正确的。另一种验证超链接的方法是,在普通“网页”视图下,按下Ctrl键,然后用鼠标单击图片,这时将在FrontPage 2002的普通“网页”视图下显示链接目标。,4.4.3 书签的超链接在FrontPage

45、 2002中,书签是指网页中被定义的位置或被定义的选中文本,它可以用作超链接的目标。书签通常用于一些特殊的网页(比如一个专题网页,可能由十几页甚至更多网页组成,非常庞大)。为了便于浏览,通常在网页中,按照不同的标题或者分类,设置若干个书签超链接。这样通过书签,就可以方便、快速地定位到所需要的内容上。事实上,书签的超链接与超链接是同一个概念下的两种不同的表现形式。超链接用于在不同的网站、不同的网页或文件中导航,而书签超链接则用于在同一个文件的不同位置中定位。,1. 创建和使用书签超链接在网页中使用书签需要两个步骤。第1步,创建书签,即在需要使用书签的位置上定义书签;第2步,创建书签的超链接,即将

46、一个超链接定义到书签。 创建书签的步骤如下。(1) 在普通“网页”视图中,将插入点放在要创建书签的位置,或者选择要定义为书签的文本。(2) 单击“插入”菜单“书签”命令,打开“书签”对话框,如图4-26所示。,图4-26 定义书签超连接,(3) 在“书签名称”框中键入书签的名称。注意,如果一个位置(而不是文本)被定义为书签,则该书签将表示为图标 ;如果文本被定义为书签,则该文本将以当前默认的超链接颜色加亮并具有下划线。除以上两种标签形式外,还可以插入图片并定义为书签。,创建书签超链接的步骤如下。(1) 在普通“网页”视图中,选择要建立书签超链接的文本。(2) 单击“插入”菜单“超链接”命令,或

47、单击“常用”工具栏上的“超链接”图标 。(3) 在“创建超链接”对话框中,单击“书签 ”按钮,这时将打开“在文档中选择位置”对话框,如图4-27所示。,图4-27 选择书签,(4) 在这个对话框中,选择需要链接到的书签名,单击“确定”按钮。这时被置为超链接的文本变为蓝色,并且带有下划线,表明已经建立了到书签的超链接。(5) 保存网页后,可以在浏览器中使用书签。例如,建立一个本章导航。第1步,定义书签:分别在2.1、2.2、2.3标题的前面,插入shuqian1、shuqian2、shuqian3三个书签。第2步,创建到书签的超链接:分别选中标题2.1、2.2、2.3并将它们分别链接到shuqi

48、an1、shuqian2、shuqian3,如图4-28所示。,图4-28 书签应用实例,2. 删除书签(1) 在普通“网页”视图中,单击要删除的书签。 (2) 单击“插入”菜单上的“书签”命令,或单击鼠标右键,在弹出的菜单中单击“书签属性”命令。 (3) 在打开的“书签”对话框中单击“清除”按钮,即可删除选定的书签。,4.4.4 创建电子邮件链接利用网页发送电子邮件的最大特点是快速、方便。在网页中创建发送电子邮件链接的步骤如下。 (1) 在普通“网页”视图中,选择要设置为超链接的文本或图像。 (2) 单击“插入”菜单“超链接”命令,或单击“常用”工具栏上的“超链接”图标 ,在“插入超链接”对

49、话框中,单击“电子邮件地址”按钮。这时将打开“创建电子邮件”窗口,如图4-29所示。,图4-29 创建电子邮件超链接对话框,(3) “在电子邮件地址”文本框中键入收件人的地址,在“主题”文本框中键入邮件所需要的主题文本。按“确定”按钮后,即可在“网页”视图中“预览”,如图4-30所示。,图4-30 电子邮件链接,4.4.5 创建脚本链接FrontPage中的脚本,通常是指使用时直接嵌入到HTML代码中,并由支持脚本的浏览器解释并执行的计算机语言。如VBScript、JavaScript等。脚本语言在网页的设计、制作中非常有用,特别是在制作动态网页方面,可以实现动态图文效果。例如,自动滚屏、状态栏动态信息、蝴蝶飞舞、飞行的图片等等。在FrontPage 2002中,Microsoft提供了一个Microsoft脚本编辑器(如图4-31所示),用于编制脚本程序。,

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 管理学资料

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报