网页制作计算机基础技术课件

上传人：无*** IP属地：河北上传时间：2024-06-26 格式：PDF 页数：99 大小：15.70MB 积分：12 举报 版权申诉

已阅读5页，还剩94页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

蜜

第九章网页制作

9.1HTML简介

9.2FrontPage2003概述

9.3网页制作

目录9.4网页布

卜一页9.5创建表单页面

下一页9.6网页的发布

结束

2010-5-24计算机文化基础1

9.1HTML简介

HTMLBPHypertextMarkupLanguage的缩写。它使

用一些约定的标记(Tag)对文本进行标注，定义网页

的数据格式，描述Web页中的信息，控制文本的显示。

我们把用HTML语言编写的文件称为HTML文件。它

通常被存储在Web服务器上，客户端通过浏览器向Web

服务器发出请求，服务器响应请求并将HTML文件发送

给浏览器，然后由浏览器对文件中的标记作出相应的解

释，以页面的形式呈现在用户屏幕上。因此，我们又把

工THTML文档称为网页(WebPage)。

结束

2010-5-24计算机文化基础2

9.1HTML简介

HTML语言是一种标记语言，简单易学。

用HTML语言编写的网页实际上是一种文本文件，

它以.htm或.html为扩展名，我们可以使用任何

文本处理软件（例如：记事本）编写。

卜一页9.1.1HTML语言概述

下一页9.1.2HTML语言的基本语法

结束

4问

2010-5-24计算机文化基础3

9.1.1HTML语言概述

HTML语言是由世界性的标准化组织W3C

(WorldWideWebConsortium)制定的，通过

浏览可以了解到HTML标准的

最新动态。

I-一页下面介绍HTML文件的基本构成和HTML文

下一页件的层次结构。

结束

2010-5-24计算机文化基础4

HTML文件的基本构成

1.HTML文件的基本构成

Internet中的每一个HTML文件都包括文本内

容和HTML标记两部分。其中，HTML标记负责

控制文本显示的外观和版式，并为浏览器指定各

种链接的图像、声音和其他对象的位置。多数

HTML标记的书写格式如下：

v标记名>文本内容v/标记名>

标记名写在“v/内。多数HTML标记同时具

」有起始和结束标记，并且成对出现，但也有些

工uHTML标记没有结束标记。另外，HTML标记不

结会区分大小写。

2010-5-24计算机文化基础5

HTML文件的基本构成

某些HTML标记还具有一些属性，这些属性指定

对象的特性，如背景颜色、文本字体及大小、对

齐方式等。属性一般放在“起始标记”中，格式

如下：

巨昱V标记名属性1=值1属性2=值2…〉文本内容V/标记名〉

I■一页

工n其中标记名和属性之间用空格分隔。如果标记

一有多种属性，属性之间也要用空格分隔。

2010-5-24计算机文化基础6

2.HTML网页的结构

现在我们先看一个简单的HTML文件，从中体会用

HTML语言编写网页时的层次结构。

【例9-1］用HTML语言编写一个简单的网页。

<html>

<head>

我的第一个Web页

</head>

<body>

vhl>欢迎进入HTML世界！</hl>

-vp>这里我们首先介绍HTML语言的基本知识和语法。

然后，讲授如何使用HTML语言编写您的Web页面。

曰

</body>

</html>

2010-5-24计算机文化基础7

HTML语言概述

将上述代码用文本编辑器编辑并保存为一个扩

展名为.htm的文件，双击该文件图标，在浏览器

中看到如下图所示的结果。

守我的第一个页—MicrosoftInterne-..|a||□|[*X|

文件但）编辑®查看也收藏®工具©帮助"/'*■

0痘埴＜0El国心|户行；”

他址；邑D：\FrontPage2003\ll.htm▼0转到送接》

欢迎进入HTML世界！八

卜一页

下一页这里我们首先介绍HTML语言的基本知识和语法。

然后，讲授如何使用HTML语言编写您的Web页面。v

结束⑥完毕i我的电脑

2010-5-24计算机文化基础8

从上例可以看出，一般HTML文件都是以

vhtml>开头，以v/html>结束。其文件结构由以

^^^下两部分组成：

1)头部(Head)

HTML文件的头部由vhead>和v/head>标记定

义。通常情况下，文件的标题、语言字符集信

一巨昱息等都放在头部信息中。最常用到的标记是

一页<title>...</title>,它用于定义网页文件的标题,

当该网页文件被打开后，网页文件的标题将出

一'现在浏览器的标题栏中。

2010-5-24计算机文化基础9

文件结构

2)正文主体(Body)

正文主体是HTML文件的核心内容，由vbody>和

v/body>标记定义。vbody>标记具有一些常用的属性,

格式如下：

<bodybgcolor=#ncolor=#n>...</body>

其中，bgcolor为背景颜色，color为文本颜色。n为六

位十六进制数。

如果网页使用背景图像，格式如下：

<bodybackground^路径/图片文件名”〉...v/body>

卜一页

HTML对格式的要求并不严格，当HTML文件被浏览

器扫描时，所有包含在文件中的空格、回车等均被忽

略。因此你可以将一行写成两行或多行，在浏览器中

步向结果是相同的。

2010-5-24计算机文化基础10

9.1.2HTML语言的基本语法

1.文本布局

1）段落标记vp>

vp>…V/R>标用揖定文档中一个独立的段落。通过设置

align庸性，建制段落的对齐方式，其值可以是left、

center>right>justify,分别表不左对齐、居中、右对

齐和两端瘠齐，默认值为左对齐。

使用格式如下：

।■一页<palign=对齐方式>...

下一页2）换行标记

vbr>标记可以强制文本换行。该标记只有起始标记。

结束

3）水平线标记<hr>

水平线标记vhr>用于在网页中插入一条水平线。

2010-5-24计算机文化基础11

2.文字格式

HTML语言中用于文字格式化的标记有：

1）标题标记vhn>

格式为：vhn属性=属性值,标题文字内容v/hn>

二录其中n说明大小级别，取值范围为1到6的数字。把

标题分为6级，即hl〜h6,其中hl文字最大，h6文

7T字最小。

结束

2010-5-24计算机文化基础12

文字格式

2)字体标记vfont>

字体标记用来对文字格式进行设置，主要具有以下属性：

(1)size属性：用来控制文字的大小，格式如下：

<fontsize=n>...

其中n的取值范围为1〜7的数字，默认值为3。

vfont>标记和vhn>标记都可以控制文字的大小。一般情况下,

文章的标题最好由vhn>标记控制,而其余的文字由vfont>标

记控制。相比较而言，对字体的控制更加灵活。

(2)color属性：用来控制文字的颜色，格式如下：

<fontcolor=#n或英文表示的颜色>…v/font>

其中n是一个十六进制的六位数。

:(3)face属性：用来指明文字使用的字体，格式如下：

乜〈fontface=字体名〉…v/font>

。其中字体名的选择由Windows操作系统安装的字体决定。如：

宋体、楷体GB2312、TimesNewRoman>Arial等。

2010-5-24计算机文化基础13

文字格式

3）字形标记

字形标记用于设置文字的粗体、斜体、下

划线、上标、下标等。

标记格式字形结果

...粗体

斜体

卜一页...下划线

下一页...</SU

上标

结束

...</SU

下标

2010-5-24计算机文化基础14

3.插入图片

vimg>标记将图片插入网页中，用于设置图片的大小以及

相邻文字的排列方式。该标记具有以下属性：

(1)src属性：指明图片文件所在的位置。格式如下：

<imgsrc=URL>

其中URL指图片文件存放的位置。

(2)alt属性：图片的文字说明，当鼠标指针指向图片时，

该图片的说明性文字弹出。格式如下：

目录<imgsrc=URLalt=说明文字〉

卜一页(3)width和height属性：设置图片显示区域的宽度和高度。

格式如下：

<imgsrc=URLwidth=nlheight=n2>

结束

其中width和height属性的取值nl和n2,可以是像素数或百

分比。

2010-5-24计算机文化基础15

插入图片

（4）border属性：设置图片文件的边框。格式

如下：

<imgsrc=URLborder=n>

其中n为像素数。

（5）align属性：设置图片相对于文本的位置关

系。格式为：vimgsrc=URLalign=对齐方式>

目录对齐方式可以是：top（顶端对齐）、middle

卜一页（相对垂直居中）、bottom（相对底边对齐）、

left（左对齐）、right（右对齐）、texttop（文

本上方）等。

结束

2010-5-24计算机文化基础16

4.插入超链接

在HTML语言中，va>和v/a>标记用于设置网页中

的超链接，href属性指明被超链接的文件地址。格

式如下：

<ahref=URL>超链接文本v/a>

用于表示超链接的文本一般显示为蓝色并且加下

划线。在浏览器中，当鼠标指针指向该文本时，箭

一'头变为手形，并在浏览器的状态栏中显示该超链接

卜一页的地址。

下一页若使用图片做超链接，可使用如下格式完成：

结束<ahref=URL1><imgsrc=URL2></a>

2010-5-24计算机文化基础17

5.使用表格

在网页中插入一个表格，需要用到一组

HTML标记。定义表格的有关标记如下：

<table>...</table>定义表格区域。

<caption>...v/caption>定义表格标题。

<th>...</th>定义表格头。

卜一页

<tr>...</tr>定义表格行。

<td>...</td>定义表格单元格。

结束

次问

2010-5-24计算机文化基础18

表格属性

常用的标记属性中，border属性用

于设置表格边框的宽度；width>height

属性用于设置表格或单元格的宽度、高

度；cellspacing和cellpadding属性分别用

于设置单元格之间的间隙和单元格内部

空白；align属性用于设置表格或单元格

卜一页

的对齐方式；bgcolor和background属性

分别用于设置表格的背景颜色和背景图

结束

像。

2010-5-24计算机文化基础19

9.2FrontPage2003概述

虽然使用一般的文本编辑器就可以编写

HTML文档，但是使用专门的HTML编辑器或

Web创作工具往往更加方便。具有“所见即所得”

功能的Web页面创作工具可以使Web创作人员直

接面对Web页面进行编辑修改，并且能立即看到

Web页面的显示效果。

一录FrontPage2003是微软公司开发的网页制作

和网站管理工具，它是MicrosoftOffice2003的组

二匚件之一，与Office的其他组件高度融合，界面友

结束好，功能强大，易学易用，是目前使用较为广泛

的网页制作、网站管理工具之一。

2010-5-24计算机文化基础20

9.2FrontPage2003概述

921FrontPage2003的主要功能

922FrontPage2003的启动与退出

923网页与网站

924FrontPage2003的网页视图模式

卜一页925FrontPage2003中的视图

结束

板间

2010-5-24计算机文化基础21

9.2.1FrontPage2003的主要功务巨

Frontpage2003的主要功能是制作网页和管理

站点。

使用Frontpage2003可以创建新的网页，也可

以打开并修改已经存在的网页。Frontpage2003

,提供了多种编辑网页的方式，不但可以直接修改

I'I

一HTML,而且可以采用“所见即所得”的方式编

辑网页，还可以使用菜单命令插入各种网页元素,

一使用对话框修改其属性，十分灵活。

议问

2010-5-24计算机文化基础22

FrontPage2003的主要功能

在FrontPage2003中，可以很容易地插入文本、

图片、表格、组件等元素；可以使用主题和样式

表、共享边框、框架等管理网页的外观；还可以

使用表单等元素设计出交互式网页。

FrontPage2003提供了强大的站点管理功能。

一组相关网页和有关文件组成一个站点，站点也

卜一页

下一页是FrontPage2003对网站进行管理的基本单位。

结束在FrontPage2003中可以轻松实现设计、管理、

分析、发布和维护站点等工作。

2010-5-24计算机文化基础23

9.2.3网页与网站

网页是全球广域网上的基本文档，用HTML书写，通

常以.htm或.html为扩展名。网页可以独立存在，但常常作

为网站的一部分。网站是一组相关网页和有关文件的组合，

一般有一个特殊的网页作为浏览的起始点，称为主页

(Homepage),用来引导用户访问其他网页。

网站通常位于Web服务器上，客户机通过网络向Web服

卜•一页

务器发送请求，Web服务器响应客户机的请求，并使用

HTTP协议将网页和有关文件通过网络传送回客户机，客户

结束

机端使用网页浏览器就能看到网页的内容了。

2010-5-24计算机文化基础24

网JAI网

在Frontpage2003中，可以建立和编辑独立的网

页，也可以设计和管理站点。在站点中可以包含大量

网页和各种文件，甚至可以包含子站点，而且只有在

使用站点时，Frontpage2003的许多特性才有效。

通常，在Frontpage2003中建立的站点需要发布到

目录Internet中的Web服务器上，成为真正意义上的网站，

Internet上的用户才能访问。有时，可以在同一台计算机上

卜一页

安装Web服务器端软件，从而将站点发布到本机进行测试。

用Frontpage2003也可以建立基于本地硬盘的站点，这

结束

种站点以本机文件夹的形式存在，不需要发布到服务器，这

4问时，需要服务器支持的功能是不可用的。

2010-5-24计算机文化基础25

9.2.4Frontpage2003的网页视图模式

Frontpage2003提供了四种网页视图模式：

＞设计视图是打开网页首先进入的视图，可以在其中

输入文本、插入图片、插入表格等，也可以任意进行

修改。

＞代码视图中，用户可以查看、编写和编辑HTML标

目录记。

「＞预览视图中可以看到网页在Web浏览器中的大体显

下一页示情况。

姑;Frontpage2003新增的拆分视图将窗口工作区拆分成上、

返国下两部分，上半部分是代码区，下半部分是设计区。无论对

哪一个区域进行修改，另一个区域都会做出相应的改变。

2010-5-24计算机文化基础26

9.2.5FrontPage2003中的视图

Frontpage2003提供了以下几种视图以方便用户

对站点的管理，用户可以在不同的视图中进行相应

的操作。

1.网页视图

2.文件夹视图

3.远程网站视图

4.报表视图

卜一页

导航视图

下一页5.

超链接视图

结束6.

7.任务视图

2010-5-24计算机文化基础27

9.3网页制作

Web站点的开发，首先应当根据其用途进

行规划，确定站点结构，在本地磁盘上创建站

点，然后再建立网页。

那么什么是“站点”呢？

其实站点就是一组相关网页和其他文件的

集合，这些网页在Internet中表现为一个完整

;结构就称为“站点”。在Frontpage2003中，

工片站点以一个特殊文件夹的形式存储。

结束

2010-5-24计算机文化基础28

9.3网页制作

9.3.1创建站点

9.3.2网页编辑

9.3.3插入对象

目录9.3.4创建超链接

卜一页

结束

板回

2010-5-24计算机文化基础29

9.3.1创建站点

使用Frontpage2003的模板和向导，用户可以轻松地创

建出各种用途和风格的站点。

新建站点时，可以根据自己的需求选择不同的模板和

向导。对于不同的模板和向导，其新建站点的步骤略有

不同。

下面以“由一个网页组成的网站”模板为例，介绍新

且最建站点的方法。

-一页(1)单击“文件”菜单的“新建”命令，在“新建”任

、—I)'务窗格中选择“新建网站”中的“由一个网页组成的网

站”；

-(2)在弹出的“网站模板”对话框的“指定新网站的位

置”框中输入新站点要保存的位置，也可使用“浏览”

按钮指定新站点的位置；

2010-5-24计算机文化基础30

_(3)单击“确定”按钮，新建站点如下图所

目录该站点只有一个空白网页index,htm(主页)和用

于存储图片的文件夹images,你可以打开

卜一页

index.htm进行编辑，也可以进一步根据网站规划

下一页创建文件夹和新建其他网页。

结束选择“文件”菜单的“退出”命令，可以关闭

次问FrontPage2003。

2010-5-24计算机文化基础31

9.3.2网页编辑

1.新建网页

2.打开/保存网页

3.预览网页

4.设置文字格式

5.设置段落格式

卜一页

6.设置网页属性

结束

2010-5-24计算机文化基础32

网页编辑

1.新建网页

要根据“网页模板”创建一个新的网页，可以

按下面的步骤：

(1)单击“文件”菜单的“新建”命令，在

“新建”任务窗格中选择“新建网页”中的“其

他网页模板”。

(2)在弹出的“网页模板”对话框中选择所需

二的网页模板，可以在“说明”及“预览”区域查

看该模板的说明及预览图。

(3)单击“确定”按钮，系统新建一个基于所

I选模板的网页。

(4)单击“文件”菜单，选择“保存”命令,

弹出“另存为”对话框。在此对话框中，输

入文件名进行保存。

2010-5-24计算机文化基础33

网页编辑

2.打开/保存网页

在Frontpage2003中，编辑某个网页之前，

需要先打开该网页。打开网页的方法有多种，

常用的有以下几种：

(1)使用“文件”菜单的“打开”命令，或“常

用”工具栏的“打开”按钮，在弹出的“打开文

件”对话框中选择相应的网页；

(2)如需要打开的文件已在打开的网站中，在文

件夹视图中双击该网页图标即可将其打开。实际

:上，在其他视图中双击网页图标，同样会打开指

下一页定网页。

「要保存一个网页，可以使用“文件”菜单的

二“保存”命令，或“常用”工具栏的“保存”按

」钮，如需另存可使用“文件”菜单的“另存为”

命令。

2010-5-24计算机文化基础34

网页编辑

3.预览网页

网页制作过程中，用户可以切换到“预览”

视图预览网页，也可以使用“文件”菜单的

“在浏览器中预览”命令预览网页。使用后者,

系统会打开浏览器显示网页，如果该网页尚未

二保存，会弹出对话框提示用户保存网页。

।■一页

结束

4同

2010-5-24计算机文化基础35

网页编辑

4.设置文字格式

同其他MicrosoftOffice组件一样，在网页中可以输入文字,

复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。

在Frontpage2003中，对文字的格式提供了相当完整的设

定功能，文字格式的变化也因此多种多样。可以使用工具栏

上的工具按钮或菜单命令快速地改变文字的外观。

设置文字格式的一般操作步骤是：选中文字，单击“格式”

菜单的“字体”命令，在弹出的“字体”对话框中设置字体

二的各种属性，也可以使用“格式”工具栏中相应的命令按钮。

虽然可以设置各种美观的字体，但是由于用户只能使用本

地计算机中安装的字体显示网页，因此还是使用常见的字体

为好。

结束

2010-5-24计算机文化基础36

网页编辑

5.设Jt段落格式

文字段落的格式编排对于一个网页的外观是至关重

要的。FrontPage2003通过按Enter键划分段落。值得

注意的是，段落之间插入了一个空行。如果只是需要

换行，而不是另起一个段落，按Shift+Enter键即可。

实际上，按Enter键在HTML代码中插入的是vp＞标记,

而按Shift+Enter键则插入的是vbr＞标记。

目录段落格式主要包括对齐方式、缩进和段落间距等。

设置段落格式的一般方法如下：

卜一页

下一页将插入点移动到要设置格式的段落中，或是选中该

段落，单击“格式”菜单的“段落”命令，在弹出的

“段落”对话框中进行各种段落格式属性的设置。

次问

2010-5-24计算机文化基础37

网页编辑

6.设置网页属性

网页属性包括网页的标题、格式、页边距等。

要设置网页属性，用户可以使用“文件”菜单的

“属性”命令，或者在网页的任意地方单击鼠标右

键，在弹出的右键菜单中选择“网页属性”命令,

目录Frontpage2003将显示“网页属性”对话框。

卜一页

结束

2010-5-24计算机文化基础38

网页编辑

1)“加规”属性

要设置网页的“常规”属性，单击“网页属性”对话框的

“常规”选项卡，如下图所示。“标题”框用于给出网页的

标题，网页标题将显示在浏览器的标题栏中。“背景音乐”

框用于指定网页的背景音乐，当用浏览器打开网页时，将自

动播放背景音乐。背景音乐区域的“位置”框用于指定声音

文件的位置，用户可以使用“浏览”按钮选择一个声音文件;

“循环次数”框用于指定声音要反复播放的次数，如果选中

“不限次数”复选框，表示一直不停地播放。

I一页

结束

2010-5-24计算机文化基础39

网页编辑

2)“格式”属性

要设置网页的背景、颜色，可以使用“网页

属性”对话框的“格式”选项卡，如下图所示。

用户可以选中“背景图片”复选框，指定一

个图片作为网页的背景图片。如果要将图片按

水印形式添加，需要选中“使其成为水印”复

选框。通过单击相应的下拉列表框，可以设置

二币网页的背景颜色、文本颜色以及超链接文字的

颜色。当同时设置背景图片和背景颜色时，背

景图片将覆盖背景色。

结束

2010-5-24计算机文化基础40

9.3.3插入对象

1.插入水平线

2.插入图片

3.插入字幕

4.插入交互式按钮

5.插入站点计数器

结束

板间

2010-5-24计算机文化基础41

1.插入水平线

在网页中输入文本内容后，还可在不同的段落、行之

间添加水平线，水平线将网页分割成几个部分，使得网

页更具条理性。具体操作步骤如下：

(1)在准备插入水平线的位置设置插入点；

(2)单击“插入”菜单的“水平线”命令，插入水平

线。

目录要修改水平线的外观，可以双击水平线，打开“水平

线属性”对话框。“宽度”框用于设置水平线的宽度，

卜一页

“高度”框用于设置水平线的高度，“对齐方式”用于

设置水平线在网页内水平对齐的方式，“颜色”列表框

结束用于设置水平线的颜色，选中“实线(无阴影)”复选

4问框时，水平线将被设成实心线。要为线条指定自定义样

式或其他格式，可以使用“样式”按钮进行设置。

2010-5-24计算机文化基础42

2.插入图片

图片可以使网页变得生动活泼，并能吸引用户的注意。

1）图片文件的格式

在WWW上常用的图像文件格式是JPEG和GIF,它们都

是压缩的图像格式，文件的信息量小，适合于网络传输，

因此被广泛地应用在Web站点的设计中。

>GIF（GraphicalInterchangeFormat,图形交换格式）采

用无损压缩方式，其主要特征是支持动画、透明度、图形

渐进，但GIF图像包含的颜色不能超过256种。

>JPEG（JointPhotographExpertGroup,联合图像专家组）

八格式是专为有几百万种颜色的照片和图形设计的，它采用

下一页有损压缩方式，以牺牲图片质量换取大的压缩比例。

JPEG格式支持真彩色（24位色），并且在压缩大的图像

一方面已被证明很有效。

2010-5-24计算机文化基础43

插入图片

2.插入图片

2)插入图片的步骤

(1)移动光标至插入图像的位置；

(2)单击“插入”菜单的“图片”命令，在子

菜单中选择“来自文件”，弹出“图片”对话

框；

(3)利用“图片”对话框选取需要插入的图片

目录文件，单击“插入”按钮，即可将图片插入网

卜一页页中。

T一页3)设置图片属性

结束在“图片属性”对话框的“外观”选项卡中,

可以设置图片的环绕方式、布局、大小等。

2010-5-24计算机文化基础44

插入图片

4）编辑图片

可以使用“视图”菜单的“工具栏”命令中的

“图片”子命令，使“图片”工具栏显示在屏

幕上。利用图片工具栏，可以对图片的亮度、

对比度进行调整，可以旋转、翻转图片，对图

片进行剪裁，设置透明颜色等操作。

5）保存图片

卜一页

插入图片后保存网页，如果图片不在网站文件

下一页夹中，将出现“保存嵌入式文件”对话框。如

结束果图片在网站文件夹中，就不会出现此对话框。

次问

2010-5-24计算机文化基础45

3.插入字幕

在制作网页时，可以将网页中的文字做成由左至

右，或由右至左移动的动态效果，使网页更加形象生

动。具体操作步骤如下：

（1）将插入点设置在要插入移动字幕的位置或者

选中作为移动字幕的文本，单击“插入”菜单的

正录“Web组件”命令，弹出“插入Web组件”对话框，

在对话框的“组件类型”列表框中选择“动态效果”，

；在“选择一种效果”列表中选择“字幕”，单击“完

二成"按钮，“字幕属性”对话框。

结束

2010-5-24计算机文化基础46

插入字幕2

(2)如果已经选择了作为移动字幕的文本，此文本

就会出现在“文本”框中，如果没有选择文本，可

在“文本”框中输入作为移动字幕的文本。“字幕

属性”对话框如下图所示：

卜一页

结束

2010-5-24计算机文化基础47

插入字幕3

(3)“方向”区域用于指定文本的移动方向。

“速度”区域用于指定文字的滚动速度，“延

迟”框中的数值表示字幕滚动一步的时间间隔

是多少毫秒，“数量”框中的数值表示字幕滚

动一步的距离是多少像素。“表现方式”区域

用于指定文字的表现方式。选中“重复”区域

二的“连续”复选框，移动字幕将连续滚动；若

一页要设置字幕滚动有限次数，可以取消选中“连

续”复选框并输入字幕重复的次数。

(4)单击“确定”按钮，即可插入字幕。

次问

2010-5-24计算机文化基础48

4.插入交互式按钮

交互式按钮是一个动态按钮，当用户将鼠标

指向交互式按钮时，交互式按钮会改变颜色或形

状。默认情况下，交互式按钮是一个带有彩色方

框的文字按钮，也可以应用图片创建交互式按钮。

(1)将插入点设置在要插入交互式按钮的位

巨一置，单击“插入”菜单的“Web组件”命令，打

开“插入Web组件”对话框，在对话框的“组件

「类型”列表框中选择“动态效果”，在“选择一

种效果”列表中选择“交互式按钮”，单击“完

结束成”按钮，打开对话框。

2010-5-24计算机文化基础49

插入交互式按钮2-3

(2)设置

,A按钮

»字体

/＞图像

巨二(3)单击“确定”按钮，即可插入交互式按钮。

।■一页

结束

2010-5-24计算机文化基础50

5.插入站点计数器

(1)单击“插入”菜单的“Web组件”命令,

打开“插入Web组件”对话框，在对话框的

“组件类型”列表框中选择“计数器”，在

“选择计数器样式”列表中选择一种样式，单

击“完成”按钮，打开“计数器属性”对话框;

二(2)设置计数器属性；

x(3)单击“确定”按钮，插入站点计数器。

结束

4回1

2010-5-24计算机文化基础51

934创建超链接

Web网页的强大之处就在于其超链接，

使用超链接能够将Internet中的信息有机地组

织起来，使人们在丰富多彩的WWW世界轻

松地漫游。在浏览器中，超链接通常表现为

目录与普通文本或图片不同的特点。将鼠标移到

一个超链接上方时，鼠标指针会变成手形。

卜一页

同时，与这个超链接相对应的URL会在窗口

下一页底部的状态栏显示出来。

结束

2010-5-24计算机文化基础52

创建超链接

1.创建文本超链接

2.创建图片超链接

3.使用书签超链接

4.创建电子邮件超链接

目录5.创建下载文件超链接

卜一页

结束

2010-5-24计算机文化基础53

1.创建文本超链接

文本超链接是指在文本上定义的超链接，单击文本超

链接，会自动跳转到指向的链接目标。创建文本超链

接的具体操作步骤如下：

(1)选定要定义超链接的文本，从“插入”菜单中选

择“超链接”命令，或单击“常用”工具栏上的“超

旦宣瞥接”按钮，打开“插入超链接”对话框，如下图所

不；

结束

2010-5-24计算机文化基础54

创建文本超链接

(2)在“插入超链接”对话框中选择要链接的目

目录标网页，单击“确定”按钮，插入超链接，可以看

卜一页到所选定的文本变为蓝色，并且带有下划线，说明

下一页选定的文本已经被设置为超链接文本。

结束保存网页，在浏览器中预览效果，当鼠标移至

链接文字时，鼠标指针变成手形，此时单击鼠标就

跳转到目标网页。

2010-5-24计算机文化基础55

2.创建图片超链接

图片超链接是指在图片上创建的超链接，图

片超链接比文本超链接显得更加生动活泼，单击

图片超链接，会自动跳转到指向的链接目标。可

以将整个图片设置为超链接，也可以为图片分配

一个或多个热点。热点是图片上的超链接区域，

j包含热点的图片称为图像映射，用户单击热点区

域可以转到相应的链接目标。

结束

2010-5-24计算机文化基础56

1)创建图片超链接

(1)选定要定义超链接的图片，从“插入”

菜单中选择“超链接”命令，或单击“常用”工

具栏上的“超链接”按钮，打开“插入超链接”

对话框；

二(2)在对话框中选择要链接的目标网页，单

:击“确定”按钮，即可插入超链接。

保存网页，在浏览器中预览效果，当鼠标移

结束至链接图片时，鼠标指针变成手形，此时单击鼠

标就跳转到目标网页。

2010-5-24计算机文化基础57

2）为图片添加热点

热点可以是图片上具有某种形状的一块区域或

文本二当用户单击该区域或文本时，超链接目标

会显示在Web浏览器中。在Frontpage2003中，

热点的形状可以是长方形、园形或多边形。

目录例如我们通过山东省地图浏览山东省各城市的

卜一页民俗风情，当鼠标移至地图上的各个城市时，鼠

下一页标指针变为手形，单击后打开描述该城市民俗风

结束情的页面。

2010-5-24计算机文化基础58

为图片添加热点，具体操作步骤如下：

(1)选择需要添加热点的图片。

(2)在“图片”工具栏中，单击长方形、圆形

或多边形热点按钮匹配需要的形状。

(3)在图片上，采用鼠标拖动操作画出所选形

状。画多边形时，可单击多边形的第一个角，然后

一依次单击多边形其他角的位置，最后双击完成多边

形。

二口(4)释放鼠标，弹出“插入超链接”对话框，

一按照插入超链接中所讲方法创建超链接即可。

2010-5-24计算机文化基础59

为图片添加热点

重复步骤（2）、（3）、（4）,在图片上依次创建

超链接到其他网页。当鼠标移动到热点区域时，光标

变为手形，如下图所示。单击鼠标，超链接的目标网

页就会显示在Web浏览器窗口中。

卜一页

结束

次问

2010-5-24计算机文化基础60

3.使用书签超链接

对于网页的超链接，往往使用户跳转到目标网页

的顶端，应用书签能够更严格地控制用户到达网页内

的某个具体位置。书签是网页中被标记的位置或被标

记的文本。单击书签超链接，将直接跳转到该书签所

在的位置。

书签

1)插入书签

(1)选中作为书签的文本，或

将光标定位在要插入书签的位置。

(2)选择“插入”菜单的“书

卜一页签”命令，弹出“书签”对话框,

如右图所示，所选文本自动出现

在“书签名称”框中。

结束(3)单击“确定”按钮，插入

书签，可以看到所选文本下方出

现虚线。

2010-5-24计算机文化基础61

2)创建书签超链接

(1)选定要定义超链接的文本或图片；

(2)从“插入”菜单中选择“超链接”命令，弹出“插入超

链接”对话框，如下图所示，在对话框的“链接到”栏单击“本

文档中的位置”，选择要链接的书签；

(3)单击“确定”按钮，插入书签超链接。

保存网页，在浏览器中预览效果，单击页面中的书签超链接,

页面会跳转到书签的位置。

卜一页

结束

2010-5-24计算机文化基础62

4.创建电子邮件超族接

电子邮件超链接为用户发送电子邮件提供了极大的

方便，单击电子邮件超链接后，允许用户书写电子邮

件内容，并发往指定的地址。具体操作步骤如下：

(1)选择作为电子邮件超链接的文本或图片；

(2)从“插入”菜单中选择“超链接”命令，弹出

“插入超链接”对话框；

目录(3)在对话框的“链接到”栏单击“电子邮件地

_址”，在“电子邮件地址”框中输入所需电子邮件地

址，还可以在“主题”框中键入电子邮件的主题；

(4)单击“确定”按钮，完成电子邮件超链接的创

结束建。

2010-5-24计算机文化基础63

5.创建下载文件超链接

如果要在网站中提供资料下载功能，就需要创建下载链接,

喀蜜中每个用于下载的文件要对应一个下载链接。具体操作

步骤如下：

（1）选择作为文件超链接的文本或图片；

（2）从“插入”』选择“超链接”命令，弹出“插

入超链接”对话框话框中选择要下载的文件；

（3）单击“确定”按钮，完成文件超链接的创建。

保存网页，在浏览器中预览效果，单击创建的文件超链接

览三萼出二式性下费”对话框，如下图所示，用户可以根据

需要打开或保存土律。

卜一页

结束

次问

2010-5-24计算机文化基础64

9.4网页布局

网页的布局设计，是将文字、图片等网页元

素，根据特定的内容和主题，在网页所限定的

范围中进行视觉的关联与配置，从而将设计意

图以视觉形式表现出来。网页的布局一般使用

目录表格或框架来实现。

।■一页

结束

2010-5-24计算机文化基础65

9.4网页布局

941创建和使用表格

942创建框架

943创建框架超链接

卜一页

结束

旅回

2010-5-24计算机文化基础66

9.4.1创建和使用表格

表格由单元格构成的行和列组成，单元格中

可以插入文本、图片以及其他对象。利用表格

可以有条理地排列数据或组织网页布局。表格

的行、列和单元格都可以进行复制、粘贴，在

目录表格中还可以插入表格，一层层的表格嵌套使

।■一页设计更加方便。Frontpage2003提供了与Word

下一页字处理软件类似的表格处理功能，在网页中可

以轻松地创建和编辑表格。

结束

2010-5-24计算机文化基础67

1.创建表格

创建表格有以下三种常用方法：

(1)使用“表格”菜单的“插入”子菜单中的

“表格”命令，可以对插入的表格进行精确的设

置，包括行和列的数目、对齐方式、单元格间距、

单元格衬距、边框粗细和背景等。

二(2)使用“常用”工具栏的“插入表格”按

修钮，快速插入表格。

立(3)使用“表格”菜单的“绘制表格”命令，

。手动绘制表格。

2010-5-24计算机文化基础68

2.设置表格属性

插入表格后，打开如下图所示的“表格属性”对话框，可

以设置表格属性。

(1)设置表格行数和列数。

(2)设置表格布局，包括设

置表格的对齐

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页制作计算机基础技术课件

文档简介

温馨提示

最新文档

评论

网页制作 计算机基础技术课件

文档简介

温馨提示

最新文档

评论

相关文档

网页制作计算机基础技术课件