网页编辑ppt课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
33
34
23
创建超链接
将鼠标移到一个超链接上方时，鼠标指针会变成手形。同时，与 这个超链接相对应的URL会在窗口底部的状态栏显示出来。 选定要定义超链接的文本或图片，从“插入”菜单中选择“超 链接”命令，打开“插入超链接”对话框， 在“插入超链接”对话框中选择要链接的目标网页，单击“确 定”按钮。插入超链接后，文本为蓝色且带下划线。
5
FrontPage基础
自定义浏览器分辨率预览检查 描摹图像 层功能 行为的应用 使用网页重定向 检查页面错误 插入交互式按钮 优化HTML代码
6
FrontPage 2003中的视图
FrontPage 2003提供了以下几种视图以方便用户对
站点的管理，用户可以在不同的Fro视nt图Pag中e提进供行相应的
要修改水平线的外观，可以双击水平线，打开“水平线属性” 对话框。
19
插入图片
在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式， 文件的信息量小，适合于网络传输，因此被广泛地应用在Web站点的 设计中。 GIF（Graphical Interchange Format，图形交换格式）采用无损 压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF图 像包含的颜色不能超过256种。 JPEG（Joint Photograph Expert Group，联合图像专家组）格式 是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式， 以牺牲图片质量换取大的压缩比例。JPEG格式支持真彩色（24位
26
创建和使用表格
表格由单元格构成的行和列组成，单元格中可以插入文本、图片 以及其他对象。利用表格可以有条理地排列数据或组织网页布局。 表格的行、列和单元格都可以进行复制、粘贴，在表格中还可以 插入表格，一层层的表格嵌套使设计更加方便。FrontPage 2003提 供了与Word字处理软件类似的表格处理功能，在网页中可以轻松 地创建和编辑表格。
段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如 下： 将插入点移动到要设置格式的段落中，或是选中该段落，单击“格式”菜单 的“段落”命令，在弹出的“段落”对话框中进行各种段落格式属性的设置。
15
设置网页属性
网页属性包括网页的标题、格式、页边距等。要设置网页属性， 用户可以使用“文件”菜单的“属性”命令，或者在网页的任意 地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令， FrontPage 2003将显示“网页属性”对话框。
27
创建和使用框架
框架的使用是进行网页布局设计的一种重要手段。框架将浏览 器窗口划分为几个区域，每个框架中都可以显示一个独立的网 页。浏览器窗口中显示的网页实际是这些框架的集合，因此被 称为框架网页。框架网页并不包含显示的内容，只是记录了该 框架网页包含几个框架、其拆分方式以及每个框架中显示哪个 网页（与其他网页的超链接）等。
16
预览网页
方法1：使用预览视图 方法2：文件菜单——在浏览器中预览
17
插入对象
插入水平线 插入图片 插入字幕 插入交互式按钮
18
插入水平线
水平线将网页分割成几个部分，使得网页更具条理性。具体操 作步骤如下： （1）在准备插入水平线的位置设置插入点； （2）单击“插入”菜单的“水平线”命令，插入水平线。
31
提交表单
用户结束表单操作后，单击“提交”按钮，当“提交”按钮设置了表单结果送 至何处后可以正常处理。表单处理程序对表单的处理可以是将表单结果保存为 文件，或将表单结果发送至一个电子邮件地址。
在表单上单击鼠标右键，在弹出的右键菜单中选择“表单属性”命令，打开 “表单属性”对话框。
要使用FrontPage默认的表单处理程序，Web服务器必须安装FrontPage服务器 扩展（FrontPage Server Extension），否则表单功能将不会产生任何效用。要 将表单结果发送至电子邮件，还需将服务器配置为可发送电子邮件的服务器。
32
网页的发布
所谓发布网站，就是把网站中的内容上传到Web服务器上。为了便于 用户发布网站，FrontPage 2003提供了相当方便的发布工具。常用的 通过FTP发布网站的操作步骤如下： 打开要发布的网站，从“文件”菜单中选择“发布网站”命令。 然后在下方的“远程网站位置”框中输入远程网站的位置。 切换到“发布”选项卡，可以进行发布网站的相应设置。 单击“确定”按钮
放置不能被站点访问者查看
的 文 件 夹 images ， 你 可 以打 开 index.的h用tm户进文行件 编 辑 ，也 可 以 进
一步根据网站规划创建文件夹和新建其他网页。
放置站点中使用的图片文件
站点主页
11
新建网页
要根据“网页模板”创建一个新的网页，可以按下面的步骤：
（1）单击“文件”菜单的“新建”命令，在“新建”任务窗
13
设置文字格式
设置文字格式的一般操作步骤是：选中文字，单击“格式”菜
单的“字体”命令，在弹出的“字体”对话框中设置字体的各
种属性，也可以使用“格式”工具栏中相应的命令按钮。
格式
字体
14
设置段落格式
文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2003通过 按Enter键划分段落。如果只是需要换行，按Shift+Enter键即可。实际上，按 Enter键在HTML代码中插入的是<p>标记，而按Shift+Enter键则插入的是<br> 标记。
21
插入字幕
在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效 果，使网页更加形象生动。具体操作步骤如下：
将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本，单击 “插入”菜单的“Web组件”命令，弹出“插入Web组件”对话框，在对话框的
插“组入件类型”列表W框e中b组选择件“动态效果”，在“选择一种效果”列表中选择
3
9.1 HTML概述
HTML文件结构
文件开始 头部
<html>
<head> <title> </head>
</title>
主题
<body> </body>
文件结束
</html>
4
9.1 HTML概述
1、HTML文件的三个基本特征 文件扩展名为htm或html HTML文件由标记命令和文本组成 <标记名>文本内容</标记名> 标记名写在“< >”内。多数HTML标记同时具有起始和结 束标记，并且成对出现，但也有些HTML标记没有结束标记。另 外，HTML标记不区分大小写。 文件中含有热点文本
格中选择“新建网页”中的“其他网页模板”。
（2）在弹出的“网页模板”对话框中选择所需的网页模板，
可以在“说明”及“预览”区域查看该模板的说明及预览图。
（3）单击“确定”按钮，系统新建一个基于所选模板的网页。
（4）单击“文件”菜单，选择“保存”命令，弹出“另存为”
12
对话框。在此对话框中，输入文件名进行保存。
24
使用书签
对于网页的超链接，往往使用户跳转到目标网页的顶端，应用书 签能够更严格地控制用户到达网页内的某个具体位置。书签是网 页中被标记的位置或被标记的文本。单击书签超链接，将直接跳 转到该书签所在的位置。
25
网页布局
网页的布局设计，是将文字、图片等网页元素，根据特定的内 容和主题，在网页所限定的范围中进行视觉的关联与配置，从 而将设计意图以视觉形式表现出来。网页的布局一般使用表格 或框架来实现。
30
创建表单页面
表单是Web服务器与客户交互的手段。表单的作用就是收集用户的输入信 息，从而实现网站与用户的交互。
表单作用：使Web服务器与客户进行交互。 收集浏览者的输入信息，从而实现网站与浏览者的交互。
表单组成 表单由表单域组成，表单域是客户输入信息的区域。常用的表单域有； 单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮。
第九章 网页制作
1
本章内容
9.1 HTML概述 9.2 FrontPage 2003及应用
2
9.1 HTML概述
HTML简介 HTML即超文本标记语言，简单易学。用HTML语言编
写的网页实际上是一种文本文件，它以.htm或.html为扩 展名，我们可以使用任何文本处理软件（例如：记事本、 写字板）编写。
“字幕”，单击“完成”按钮， “字幕属性”对话框。
22
插入交互式按钮
交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互 式按钮会改变颜色或形状。默认情况下，交互式按钮是一个带有彩色 方框的文字按钮，也可以应用图片创建交互式按钮。
将插入点设置在要插入交互式按钮的位置，单击“插入”菜单的 “Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件 类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择 “交互式按钮”，单击“完成”按钮，打开对话框。
28
保存框架网页
保存框架网页需要保存框架和各个框架中的网页。 框架网页并不包含内容，只记录了该框架网页包含几个
框架、拆分方式以及每个框架中显示哪个网页。
29
删除框架
可以从框架结构中删除指定的框架。此时系统只是把框架从框 架网页中删去，而此框架中的网页文件仍然存在。删除了一个 框架后，其余框架会加宽以填充删除框架留下的空间。若框架 网页只有一个框架，则不能删除该框架。删除框架的具体操作 方法是：选择要删除的框架，在“框架”菜单中选择“删除框 架”命令。
打开网页
在FrontPage 2003中，编辑某个网页之前，需要先打开该网页。 打开网页的方法有多种，常用的有以下几种：
（1）使用“文件”菜单的“打开”命令，或“常用”工具栏的 “打开”按钮，在弹出的“打开文件”对话框中选择相应的网 页；
（2）如需要打开的文件已在打开的网站中，在文件夹视图中 双击该网页图标即可将其打开。实际上，在其他视图中双击网 页图标，同样会打开指定网页。
操作。
了7种视图模式
7
FrontPage 2003中的视图
网页视图：创建、编辑、预览网页 文件夹视图：创建、移动和删除文件和文件夹 报表视图：了解站点的文件内容、更新链接情况、组建错误、
所有文件列表及变化情况等信息 导航视图：以层次结构图形式显示了站点的链接结构 超链接视图：表示了各个网页间的链接关系 任务视图：创建和管理任务 远程网站视图（2003特有）：发布网站
20
色），并且在压缩大的图像方面已被证明很有效。
插入图片
插入图片的步骤： 移动光标至插入图像的位置； 单击“插入”菜单的“图片”命令，在子菜单中选择“来自文件”， 弹出“图片”对话框； 利用“图片”对话框选取需要插入的图片文件，单击“插入”按钮， 即可将图片插入网页中。
设置图片属性 在“图片属性”对话框的“外观”选项卡中，可以设置图片的环绕 方式、布局、大小等。
8
网页制作
创建站点 网页编辑 插入对象 创建超链接
9
创建站点
使用FrontPage 2003的模板和向导，用户可以轻松地创建出各 种用途和风格的站点。
新建站点时，可以根据自己的需求选择不同的模板和向导。对 于不同的模板和向导，其新建站点的步骤略有不同。
创建站点
该站点只有一个空白网页index.htm（主页）和用于存储图片
34
23
创建超链接
将鼠标移到一个超链接上方时，鼠标指针会变成手形。同时，与 这个超链接相对应的URL会在窗口底部的状态栏显示出来。 选定要定义超链接的文本或图片，从“插入”菜单中选择“超 链接”命令，打开“插入超链接”对话框， 在“插入超链接”对话框中选择要链接的目标网页，单击“确 定”按钮。插入超链接后，文本为蓝色且带下划线。
5
FrontPage基础
自定义浏览器分辨率预览检查 描摹图像 层功能 行为的应用 使用网页重定向 检查页面错误 插入交互式按钮 优化HTML代码
6
FrontPage 2003中的视图
FrontPage 2003提供了以下几种视图以方便用户对
站点的管理，用户可以在不同的Fro视nt图Pag中e提进供行相应的
要修改水平线的外观，可以双击水平线，打开“水平线属性” 对话框。
19
插入图片
在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式， 文件的信息量小，适合于网络传输，因此被广泛地应用在Web站点的 设计中。 GIF（Graphical Interchange Format，图形交换格式）采用无损 压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF图 像包含的颜色不能超过256种。 JPEG（Joint Photograph Expert Group，联合图像专家组）格式 是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式， 以牺牲图片质量换取大的压缩比例。JPEG格式支持真彩色（24位
26
创建和使用表格
表格由单元格构成的行和列组成，单元格中可以插入文本、图片 以及其他对象。利用表格可以有条理地排列数据或组织网页布局。 表格的行、列和单元格都可以进行复制、粘贴，在表格中还可以 插入表格，一层层的表格嵌套使设计更加方便。FrontPage 2003提 供了与Word字处理软件类似的表格处理功能，在网页中可以轻松 地创建和编辑表格。
段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如 下： 将插入点移动到要设置格式的段落中，或是选中该段落，单击“格式”菜单 的“段落”命令，在弹出的“段落”对话框中进行各种段落格式属性的设置。
15
设置网页属性
网页属性包括网页的标题、格式、页边距等。要设置网页属性， 用户可以使用“文件”菜单的“属性”命令，或者在网页的任意 地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令， FrontPage 2003将显示“网页属性”对话框。
27
创建和使用框架
框架的使用是进行网页布局设计的一种重要手段。框架将浏览 器窗口划分为几个区域，每个框架中都可以显示一个独立的网 页。浏览器窗口中显示的网页实际是这些框架的集合，因此被 称为框架网页。框架网页并不包含显示的内容，只是记录了该 框架网页包含几个框架、其拆分方式以及每个框架中显示哪个 网页（与其他网页的超链接）等。
16
预览网页
方法1：使用预览视图 方法2：文件菜单——在浏览器中预览
17
插入对象
插入水平线 插入图片 插入字幕 插入交互式按钮
18
插入水平线
水平线将网页分割成几个部分，使得网页更具条理性。具体操 作步骤如下： （1）在准备插入水平线的位置设置插入点； （2）单击“插入”菜单的“水平线”命令，插入水平线。
31
提交表单
用户结束表单操作后，单击“提交”按钮，当“提交”按钮设置了表单结果送 至何处后可以正常处理。表单处理程序对表单的处理可以是将表单结果保存为 文件，或将表单结果发送至一个电子邮件地址。
在表单上单击鼠标右键，在弹出的右键菜单中选择“表单属性”命令，打开 “表单属性”对话框。
要使用FrontPage默认的表单处理程序，Web服务器必须安装FrontPage服务器 扩展（FrontPage Server Extension），否则表单功能将不会产生任何效用。要 将表单结果发送至电子邮件，还需将服务器配置为可发送电子邮件的服务器。
32
网页的发布
所谓发布网站，就是把网站中的内容上传到Web服务器上。为了便于 用户发布网站，FrontPage 2003提供了相当方便的发布工具。常用的 通过FTP发布网站的操作步骤如下： 打开要发布的网站，从“文件”菜单中选择“发布网站”命令。 然后在下方的“远程网站位置”框中输入远程网站的位置。 切换到“发布”选项卡，可以进行发布网站的相应设置。 单击“确定”按钮
放置不能被站点访问者查看
的 文 件 夹 images ， 你 可 以打 开 index.的h用tm户进文行件 编 辑 ，也 可 以 进
一步根据网站规划创建文件夹和新建其他网页。
放置站点中使用的图片文件
站点主页
11
新建网页
要根据“网页模板”创建一个新的网页，可以按下面的步骤：
（1）单击“文件”菜单的“新建”命令，在“新建”任务窗
13
设置文字格式
设置文字格式的一般操作步骤是：选中文字，单击“格式”菜
单的“字体”命令，在弹出的“字体”对话框中设置字体的各
种属性，也可以使用“格式”工具栏中相应的命令按钮。
格式
字体
14
设置段落格式
文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2003通过 按Enter键划分段落。如果只是需要换行，按Shift+Enter键即可。实际上，按 Enter键在HTML代码中插入的是<p>标记，而按Shift+Enter键则插入的是<br> 标记。
21
插入字幕
在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效 果，使网页更加形象生动。具体操作步骤如下：
将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本，单击 “插入”菜单的“Web组件”命令，弹出“插入Web组件”对话框，在对话框的
插“组入件类型”列表W框e中b组选择件“动态效果”，在“选择一种效果”列表中选择
3
9.1 HTML概述
HTML文件结构
文件开始 头部
<html>
<head> <title> </head>
</title>
主题
<body> </body>
文件结束
</html>
4
9.1 HTML概述
1、HTML文件的三个基本特征 文件扩展名为htm或html HTML文件由标记命令和文本组成 <标记名>文本内容</标记名> 标记名写在“< >”内。多数HTML标记同时具有起始和结 束标记，并且成对出现，但也有些HTML标记没有结束标记。另 外，HTML标记不区分大小写。 文件中含有热点文本
格中选择“新建网页”中的“其他网页模板”。
（2）在弹出的“网页模板”对话框中选择所需的网页模板，
可以在“说明”及“预览”区域查看该模板的说明及预览图。
（3）单击“确定”按钮，系统新建一个基于所选模板的网页。
（4）单击“文件”菜单，选择“保存”命令，弹出“另存为”
12
对话框。在此对话框中，输入文件名进行保存。
24
使用书签
对于网页的超链接，往往使用户跳转到目标网页的顶端，应用书 签能够更严格地控制用户到达网页内的某个具体位置。书签是网 页中被标记的位置或被标记的文本。单击书签超链接，将直接跳 转到该书签所在的位置。
25
网页布局
网页的布局设计，是将文字、图片等网页元素，根据特定的内 容和主题，在网页所限定的范围中进行视觉的关联与配置，从 而将设计意图以视觉形式表现出来。网页的布局一般使用表格 或框架来实现。
30
创建表单页面
表单是Web服务器与客户交互的手段。表单的作用就是收集用户的输入信 息，从而实现网站与用户的交互。
表单作用：使Web服务器与客户进行交互。 收集浏览者的输入信息，从而实现网站与浏览者的交互。
表单组成 表单由表单域组成，表单域是客户输入信息的区域。常用的表单域有； 单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮。
第九章 网页制作
1
本章内容
9.1 HTML概述 9.2 FrontPage 2003及应用
2
9.1 HTML概述
HTML简介 HTML即超文本标记语言，简单易学。用HTML语言编
写的网页实际上是一种文本文件，它以.htm或.html为扩 展名，我们可以使用任何文本处理软件（例如：记事本、 写字板）编写。
“字幕”，单击“完成”按钮， “字幕属性”对话框。
22
插入交互式按钮
交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互 式按钮会改变颜色或形状。默认情况下，交互式按钮是一个带有彩色 方框的文字按钮，也可以应用图片创建交互式按钮。
将插入点设置在要插入交互式按钮的位置，单击“插入”菜单的 “Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件 类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择 “交互式按钮”，单击“完成”按钮，打开对话框。
28
保存框架网页
保存框架网页需要保存框架和各个框架中的网页。 框架网页并不包含内容，只记录了该框架网页包含几个
框架、拆分方式以及每个框架中显示哪个网页。
29
删除框架
可以从框架结构中删除指定的框架。此时系统只是把框架从框 架网页中删去，而此框架中的网页文件仍然存在。删除了一个 框架后，其余框架会加宽以填充删除框架留下的空间。若框架 网页只有一个框架，则不能删除该框架。删除框架的具体操作 方法是：选择要删除的框架，在“框架”菜单中选择“删除框 架”命令。
打开网页
在FrontPage 2003中，编辑某个网页之前，需要先打开该网页。 打开网页的方法有多种，常用的有以下几种：
（1）使用“文件”菜单的“打开”命令，或“常用”工具栏的 “打开”按钮，在弹出的“打开文件”对话框中选择相应的网 页；
（2）如需要打开的文件已在打开的网站中，在文件夹视图中 双击该网页图标即可将其打开。实际上，在其他视图中双击网 页图标，同样会打开指定网页。
操作。
了7种视图模式
7
FrontPage 2003中的视图
网页视图：创建、编辑、预览网页 文件夹视图：创建、移动和删除文件和文件夹 报表视图：了解站点的文件内容、更新链接情况、组建错误、
所有文件列表及变化情况等信息 导航视图：以层次结构图形式显示了站点的链接结构 超链接视图：表示了各个网页间的链接关系 任务视图：创建和管理任务 远程网站视图（2003特有）：发布网站
20
色），并且在压缩大的图像方面已被证明很有效。
插入图片
插入图片的步骤： 移动光标至插入图像的位置； 单击“插入”菜单的“图片”命令，在子菜单中选择“来自文件”， 弹出“图片”对话框； 利用“图片”对话框选取需要插入的图片文件，单击“插入”按钮， 即可将图片插入网页中。
设置图片属性 在“图片属性”对话框的“外观”选项卡中，可以设置图片的环绕 方式、布局、大小等。
8
网页制作
创建站点 网页编辑 插入对象 创建超链接
9
创建站点
使用FrontPage 2003的模板和向导，用户可以轻松地创建出各 种用途和风格的站点。
新建站点时，可以根据自己的需求选择不同的模板和向导。对 于不同的模板和向导，其新建站点的步骤略有不同。
创建站点
该站点只有一个空白网页index.htm（主页）和用于存储图片