计算机基础知识第9章.ppt

1、第九章网页制作,第九章 网页制作,9.1 HTML简介 9.2 FrontPage概述 9.3网页制作 9.4网页布局 9.5创建表单页面 9.6网页的发布,9.1 HTML简介,9.1.1 HTML语言概述 9.1.2 HTML语言的基本语法,9.1.1 HTML语言概述,HTML即HyperText Markup Language(超文本标记语言) 的缩写。使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。 用HTML语言编写的文件称为HTML文件（网页）。通常被存储在Web服务器上，客户端通过浏览器向Web服务器发出请求，服务器响应请求

2、并将HTML文件发送给浏览器，然后由浏览器对文件中的标记作出相应的解释，以页面的形式呈现在用户屏幕上。因此，把HTML文档在Web浏览器中的这种表现形式称为Web页面 (Web Page)。,HTML语言概述,HTML语言是一种标记语言。用HTML语言编写的网页实际上是一种文本文件，以.htm或.html为扩展名，可以使用任何文本处理软件（例如：记事本）编写。 HTML语言是由世界性的标准化组织W3C（World Wide Web Consortium）制定的。通过浏览可以了解到HTML标准的最新动态。,1. HTML文件的基本构成,每一个HTML文件都包括文本

3、内容和HTML标记两部分。其中，HTML标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。多数HTML标记的书写格式如下： 文本内容 标记名写在“”内。多数HTML标记同时具有起始和结束标记，并且成对出现，但也有些HTML标记没有结束标记。另外，HTML标记不区分大小写。,1. HTML文件的基本构成,某些HTML标记还具属性。这些属性指定对象的特性，如背景颜色、文本字体大小、对齐方式等。属性一般放在“起始标记”中，格式如下： 文本内容 其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分开。,2. HTML网页的结构,【例9-1】用HT

4、ML语言编写一个简单的网页。 我的第一个Web页 欢迎进入HTML世界！ 这里我们首先介绍HTML语言的基本知识和语法。然后，讲授如何使用HTML语言编写您的Web页面。 ,HTML语言概述,将上述代码用文本编辑器（如记事本）编辑并保存为一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到结果。或加入到FrontPage中的“代码”页在“预览”页或“设计”页中观察结果。,HTML语言概述,1）头部（Head） HTML文件的头部由和标记定义。文件的标题、语言字符集信息等都放在头部信息中。 最常用到的标记是，它用于定义网页文件的标题，当该网页文件被打开后，网页文件的标题将出现在浏览器的标题

5、栏中（见前页）。,HTML语言概述,2）正文主体（Body） 正文主体是HTML文件的核心内容，由和标记定义。标记具有一些常用的属性，格式如下： 其中，bgcolor为背景颜色，color为文本颜色。n为六位十六进制数。 如果网页使用背景图像，格式为： HTML对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略了。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。,9.1.2 HTML语言的基本语法,1. 文本布局 2. 文字格式,1. 文本布局,1）段落标记 标记指定文档中一个独立的段落。通过设置align属性，控制段落的对齐方式，其值可以是le

6、ft、center、right、 justify ，分别表示左对齐、居中和右对齐和两端对齐，默认值为左对齐。 使用格式如下： 标记定义的两个段落之间留有一个空行。 2）换行标记 标记可以强制文本换行。该标记只有开始标记。 3）水平线标记 水平线标记用于在网页中插入一条水平线。 例如表示插入红色水平线,2. 文字格式,HTML语言中用于文字格式化的标记有： 1）标题标记 格式为： 标题文字内容 其中n说明大小级别，取值范围为1到6的数字。把标题分为 6级，即h1h6，其中h1文字最大，h6文字最小。,2. 文字格式,2）字体标记字体标记用来对文字格式进行设置，主要具有以下属性： （1）size属

7、性用来控制文字的大小，其格式为： 其中n的取值范围为17的数字，默认值为3。 标记和标记都可以控制文字的大小。一般情况下，文章的标题最好由标记控制，而其余的文字由标记控制。相比较而言，对字体的控制更加灵活。 （2）color属性用来控制文字的颜色，其格式为： 其中n是一个十六进制的六位数。 （3）face属性用来指明文字使用的字体，其格式为： 其中，字体名的选择由Windows操作系统安装的字体决定。如：宋体、楷体_GB2312、Times New Roman、Arial等。,2. 文字格式,3）字形标记 字形标记用于设置文字的粗体、斜体、上标、下标、下划线等，如下表所示。,3. 插入图片,标

8、记将图片插入网页中。可以设置图片的大小以及相邻文字的排列方式。该标记具有以下属性： （1）src属性：指明图片文件所在的位置。格式为： 其中URL是指图片文件存放的位置。 （2）alt属性：图片的文字说明，当鼠标指针指向图片时，该图片的说明性文字弹出。格式为： ,3. 插入图片,（3）height和width属性：设置图片显示区域的高度和宽度。格式为： 其中height和width属性的取值n1和n2为像素数，像素数越大，图片显示越大。 （4）border属性：设置图片文件的边框。格式为： 其中n为像素数。 （5）align属性：设置图片相对于文本的位置关系。格式为： 对齐方式可以是：top（

9、顶边对齐）、middle（垂直居中）、bottom（底边对齐）、left（左对齐）、right（右对齐）。,4. 超链接,在HTML语言中，和标记用于设置网页中的超链接href属性指明被超链接的文件地址。格式为： 超链接文本 用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。 若使用图片做超链接，可使用如下格式完成： ,5. 使用表格,在网页中插入一个表格，需要用到一组HTML标记。定义表格的有关标记如下： 定义表格。 定义表行。 定义表列。 常用的标记属性中，border属性用于设置表格边框的宽度；wid

10、th、height属性设定表格或表项的宽度、高度，取值可以是像素数或百分数；cellspacing和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性设置表格或表项的对齐方式；bgcolor和background属性设置表格背景的颜色和背景图像。,第九章网页制作,9.2 FrontPage概述,9.2 FrontPage 2003概述,9.2.1 FrontPage 2003的主要功能 9.2.2 FrontPage 2003的启动与退出 9.2.3 网页与网站 9.2.4 FrontPage 2003的编辑方式 9.2.5 FrontPage 2003中的

11、视图,9.2.1 FrontPage 2003的主要功能,FrontPage 2003的主要功能是制作网页和管理网站。 使用FrontPage 可以创建新的网页，也可以修改已经存在的网页。FrontPage 提供了多种编辑网页的方式，可以直接修改HTML，而且采用“所见即所得”的方式编辑网页。 在FrontPage 2003中，可以很容易地插入文本、图片、表格、组件等元素；可以使用主题，共享边框，框架等管理网页的外观；还可以使用表单等元素设计出交互式网页。 FrontPage 2003提供了强大的站点管理功能。一组相关网页和有关文件组成一个站点，站点也是FrontPage 2003对网站进行管

12、理的基本单位。在FrontPage 2003中可以轻松实现设计、管理、分析、发布和维护站点等工作。,9.2.2 FrontPage 的启动与退出,1. FrontPage 2003的启动 FrontPage 2003可以按下列步骤启动： （1）单击“开始”按钮，在“开始”菜单中单击“程序”； （2）在“程序”菜单中单击Microsoft FrontPage，即可打开Microsoft FrontPage 2003窗口。 另外，也可以在桌面上建立FrontPage 2003快捷方式后在桌面上双击该图标，即可启动FrontPage 2003。 注意：不要双击.html文件图标，而应启动FrontP

13、age后在“文件”/“打开”打开.html文件。,FrontPage 2003的启动与退出,2. FrontPage 2003的退出 FrontPage 2003的退出有以下三种方式： （1）选取“文件”菜单中的“退出”。 （2）单击操作窗口中右上角的“关闭”按钮。 （3）按快捷键Alt+F4。,9.2.3 网页与网站,网页是WWW上的基本文档，用HTML书写，通常以.htm或.html为扩展名。网页可以独立存在，但常常作为网站的一部分。 网站是一组相关网页和有关文件的组合。网站一般有一个特殊的网页作为浏览的起始点，称为主页（Homepage），用来引导用户访问其他网页。 网站通常位于Web服

14、务器上。客户机通过网络向Web服务器发送请求，Web服务器响应客户机的请求，并使用HTTP协议将网页和有关文件通过网络传送回客户机。客户机端使用网页浏览器就能看到网页的内容了。,网页与网站,通常，在FrontPage 2003中建立的站点需要发布到Internet中的Web服务器上，成为真正意义上的网站，Internet上的用户才能访问。有时，可以在同一台计算机上安装Web服务器端软件（如IIS等），从而可以将站点发布到本机进行测试。 用FrontPage 2003也可以建立基于本地硬盘的站点，这种站点以本机文件夹的形式存在，不需要发布到服务器，这时，所有需要服务器支持的功能都是不可用的。 M

15、icrosoft Office FrontPage 已被其下一版本 Microsoft Office SharePoint Designer 2007所取代,9.2.4 FrontPage 2003的编辑方式,FrontPage 2003提供了四种网页视图模式： 设计视图：是打开网页首先进入的视图，可以在其中输入文本、插入图片、插入表格等，也可以任意进行修改。 代码视图：用户可以查看、编写和编辑HTML标记。 预览视图：可以看到网页在Web浏览器中的大体显示情况。 FrontPage 2003新增的拆分视图：将窗口工作区拆分成上、下两部分，上半部分是代码区，下半部分是设计区。无论对哪一个区域进

16、行修改，另一个区域都会做出相应的改变。,9.2.5 FrontPage 2003中的视图,FrontPage 2003提供了7种网站视图以方便用户对站点的管理，可以在不同的视图中进行不同的操作。 1. 网页视图 网页视图是FrontPage 中最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的。 2. 文件夹视图 在文件夹视图中，站点显示为一组文件和文件夹。可以在文件夹视图中创建、移动和删除文件或文件夹。,3. 报表视图 使用报表视图可以方便地了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。可在“报表”工具栏中的“报表”下拉列表中选择所需显示的

17、报表。 4. 超链接视图 超链接视图将当前站点显示为链接文件的一个网络，它们反映了站点中各个网页之间的相互链接关系。超链接视图就像一张地图，表明站点中的超链接路径。,9.2.5 FrontPage 2003中的视图,9.2.5 FrontPage 2003中的视图,5. 任务视图 任务视图主要用来创建和管理任务。在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目。 6. 导航视图 使用导航视图可方便地观察站点的链接结构，它以层次状的组织结构图形式显示。在该视图下，可以通过拖曳操作改变链接结构。 7.远程网站视图 可以显示本地网站及远程网站中的文件。,第九章网页制作,9.3网页制作,9

18、.3 网页制作,9.3.1 创建站点 9.3.2 网页编辑 9.3.3 插入对象 9.3.4 创建超链接,9.3 网 页 制 作,Web站点的开发，首先应当根据其用途进行规划，确定站点结构，在本地磁盘上创建站点，然后再建立网页。 那么什么是“站点”呢？ 其实站点就是一组相关网页和其他文件的集合，这些网页在Internet中表现为一个完整结构就称为“站点”。在FrontPage 2003中，站点以一个特殊文件夹的形式存储。,9.3.1 创建站点,使用FrontPage 2003的向导和模板，用户可以轻松地创建出各种用途和风格的站点。 新建站点时，可以根据自己的需求选择不同的模板和向导。对于不同的

19、模板和向导，其新建站点的步骤略有不同。下面以“只有一个网页的站点”模板为例，介绍新建站点的方法。 （1）在“文件”菜单的“新建”子菜单中选择“站点”，打开“新建”任务窗格；,创建站点,（2）单击“只有一个网页的站点”模板。 该站点只有一个空白网页index.htm（主页）和用于存储图片的文件夹images，你可以打开index.htm编辑该网页，也可以进一步根据网站规划创建文件夹和新建其他网页。 要再次对该站点进行操作，使用“文件” /“打开站点”菜单命令打开该站点。,9.3.2 网页编辑,1. 新建网页 2. 打开网页 3. 设置文字格式 4. 设置段落格式 5. 设置网页属性 6. 预览网

20、页,1. 新建网页,要根据“网页模板”创建一个新的网页，可以按下面的步骤： （1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。 （2）在弹出的“网页模板”对话框中选择所需的网页模板，可以在“说明”及“预览”区域查看该模板的说明及预览图。 （3）单击“确定”按钮，系统新建一个基于所选模板的网页。 （4）单击“文件”菜单，选择“保存”命令，弹出“另存为”对话框。在此对话框中，输入文件名进行保存。,2. 打开/保存网页,在FrontPage 2003中，编辑某个网页之前，需要先打开该网页。打开网页的方法有多种，常用的有以下几种： （1）使用“文件”菜单的

21、“打开”命令，或“常用”工具栏的“打开”按钮，在弹出的“打开文件”对话框中选择相应的网页； （2）如需要打开的文件已在打开的网站中，在文件夹视图中双击该网页图标即可将其打开。实际上，在其他视图中双击网页图标，同样会打开指定网页。 要保存一个网页，可以使用“文件”菜单的“保存”命令，或“常用”工具栏的“保存”按钮，如需另存可使用“文件”菜单的“另存为”命令。,3. 设置文字格式,同其他Microsoft Office组件一样，网页中可以输入文字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。 文字格式包括字体、字形、大小、颜色和修饰效果等属性。 设置文字格式的操作步骤是：选中文字，单击“

22、格式” / “字体”菜单命令，打开“字体”对话框，在对话框中设置字体的各种属性。 虽然可以设置各种美观的字体，但是由于浏览者只能使用本地计算机中安装的字体显示网页，因此还是使用常见的字体为好。,4. 设置段落格式,文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2003通过按Enter键划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按Shift+Enter键即可。实际上，按Enter键在HTML代码中插入的是标记，进行分段。而按Shift+Enter键则插入的是标记，进行分行(1.1.11)。 段落格式主要包括对齐方式、文本缩进和段

23、落间距等。设置段落格式的方法如下： （1）将插入点移动到要设置格式的段落中； （2）单击“格式” /“段落”菜单命令； （3）在“段落”对话框中可以设置段落的各种属性。,5. 设置网页属性,网页的属性包括网页的标题、位置、背景、页边距等信息。 设置网页属性：先选中网页，使用“文件” /“属性”菜单命令，或者在网页的“设计视图”任意地方单击鼠标右键，在弹出的菜单中选择“网页属性”命令，将显示“网页属性”对话框。 (1)“常规”属性 “位置”框用于指定网页的完整URL。 “标题”框用于给出网页的标题。 “背景音乐”框用于指定网页的背景声音。 (2)“格式”属性 要设置网页的背景颜色、背景图片以及超

24、链接的颜色，单击“网页属性”对话框的“背景”选项卡 。 (3)“高级”属性 在“边距”选项卡中可以设置页面的顶端页边距和左端页边距。,6. 预览网页,网页制作过程中，用户可以随时对网页进行预览。可以转换到预览视图方式，还可以使用“文件” /“在浏览器中预览”菜单命令，使用外部浏览器打开当前网页进行预览。,9.3.3 插入对象,1.插入水平线 2.插入图片 3.插入字幕 4.插入交互式按钮 5.插入站点计数器,1.插入水平线,在网页中输入文本内容之后，还可在不同的段落、行之间添加水平线，以增强视觉效果。 操作步骤如下： （1）在准备插入水平线的位置设置插入点。 （2）打开“插入” /“水平线”菜

25、单命令，此时在网页的插入点处插入一条水平线。如果插入点位于或接近行尾，水平线将插入到下一行。,1.插入水平线,双击水平线，打开“水平线属性”对话框，在“宽度”栏中可设置水平线的宽度，在“高度”栏中输入水平线的高度，在“对齐方式”栏中选择水平线在网页内水平对齐的方式，在“颜色”列表框内设置水平线的颜色（将鼠标停留一会，待出现颜色提示后，按题目要求选择颜色），系统默认的颜色是黑色，选择“实线（无阴影）”复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。,2. 插入图片,1）图片文件的格式 在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网

26、络传输，现已几乎被所有的Web浏览器所支持，因此被广泛地应用在Web站点的设计中。 图形交换格式GIF（Graphical Interchange Format）采用无损压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF格式只支持256种颜色。 联合图像专家组JPEG（Joint Photograph Expert Group）格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。但JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。,2. 插入图片,2）插入图片的步骤 （1）移动光标至想要插入图像处； （2）单击菜单项中

27、的“插入”，选择“图片”项，再选取二 级菜单中的“来自文件”，弹出图片对话框； （3）如果图片在该站点中，选中图片文件并按“确定”按钮即可，否则单击“从计算机上选择一个文件”按钮或单击“使用Web浏览器来选择网页或文件”按钮，从计算机本地硬盘中或者Internet上选中图片并按“确定”按钮，即可将其插入网页中。,2. 插入图片,3）设置图片属性 打开“图片属性”对话框，在“外观”选项卡中，可以调整图片的大小。为了防止改变图片原来的长宽比例，可以选中“保持纵横比”复选框，这样图片就会根据原来的长宽比例来调整大小。同样在“外观”选项卡中，可以选择“对齐方式”，设置图片边框的宽度，0为无边框。,2.

28、 插入图片,4）编辑图片 选中插入的图片，单击“视图” /“工具栏”/“图片”菜单命令，打开图片编辑工具栏，可以对图片的亮度、对比度进行调整，可以旋转、翻转图片，对图片进行剪裁，设置透明的颜色等操作。,3. 插入字幕,在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效果。在网页中加入移动字幕，会使网页看起来更活泼。具体操作步骤如下： （1）将插入点设置在要插入移动字幕的位置或者选择作为移动字幕的文本。（在拆分窗口） （2）单击“插入”菜单中的“Web组件”，选择“字幕”命令，出现“字幕属性”对话框。,3. 插入字幕,（3）如果已经选择了作为移动字幕的文本，此文本就会出现在“文

29、本”框中。如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。,3. 插入字幕,（4）在“方向”区域中选择文字的移动方向。在“速度”区域中可以指定文字的移动速度，在“延迟”框中输入的数值表示在每个连续运动之间暂停的毫秒数，“数量”框中输入的数值表示文本每次移动的距离。在“表现方式”区域中可以指定文字的运动方式，选中“重复”区域的“连续”复选框，则移动字幕连续不停循环；若要设置文本重复有限的次数，则取消选中并输入字幕重复的次数。在“背景颜色”列表框中可以设置移动字幕的背景颜色。 （5）单击“确定”按钮。,4. 插入交互式按钮,交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按

30、钮会改变颜色或形状。默认情况下，交互式按钮是一个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。 （1）在“设计视图”，将插入点设置在要插入交互式按钮的位置，单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“交互式按钮”，单击“完成”按钮，打开对话框。,4. 插入交互式按钮,（2）设置 按钮 字体 图像 （3）单击“确定”按钮，即可插入交互式按钮。,5. 插入站点计数器,（1）单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“计数器”，在“

31、选择计数器样式”列表中选择一种样式，单击“完成”按钮，打开“计数器属性”对话框； （2）设置计数器属性； （3）单击“确定”按钮，插入站点计数器。,返 回,9.3.4 创建超链接,Web网页的强大之处就在于其超链接，使用超链接能够将Internet中的信息有机地组织起来，使人们在丰富多彩的WWW世界中轻松地漫游。在浏览器中，超链接通常表现为与普通文本或图片不同的特点。将鼠标移到一个超链接上方时，鼠标指针会变成手形。同时，与这个超链接相对应的URL会在窗口底部的状态栏显示出来。,9.3.4 创建超链接,1. 创建文本超链接 2. 创建图片超链接 3. 使用书签超链接 4. 创建电子邮件超链接,1

32、. 创建文本超链接,文本超链接是指在文本上定义的超链接，单击文本超链接，会自动跳转到指向的链接目标。创建文本超链接的具体操作步骤如下： （1）选定要定义超链接的文本，从“插入” /“超链接”菜单命令，或单击“常用”工具栏上的“超链接”按钮 ，打开“插入超链接”对话框，如下图所示；,（2）在“插入超链接”对话框中选择要链接的目标网页，单击“确定”按钮，插入超链接，可以看到所选定的文本变为蓝色，并且带有下划线，说明选定的文本已经被设置为超链接文本。 保存网页，在浏览器中预览效果，当鼠标移至链接文字时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页。,创建文本超链接,图片超链接是指在图片上创建的超链

33、接，图片超链接比文本超链接显得更加生动活泼，单击图片超链接，会自动跳转到指向的链接目标。可以将整个图片设置为超链接，也可以为图片分配一个或多个热点。热点是图片上的超链接区域，包含热点的图片称为图像映射，用户单击热点区域可以转到相应的链接目标。,2. 创建图片超链接,（1）选定要定义超链接的图片，从“插入” /“超链接”菜单命令，或单击“常用”工具栏上的“超链接”按钮，打开“插入超链接”对话框； （2）在对话框中选择要链接的目标网页，单击“确定”按钮，即可插入超链接。 保存网页，在浏览器中预览效果，当鼠标移至链接图片时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页。,1）创建图片超链接,热点可

34、以是图片上具有某种形状的一块区域或文本，当用户单击该区域或文本时，超链接目标会显示在Web浏览器中。在FrontPage 2003中，热点的形状可以是长方形、圆形或多边形。 例如我们通过山东省地图浏览山东省各城市的民俗风情，当鼠标移至地图上的各个城市时，鼠标指针变为手形，单击后打开描述该城市民俗风情的页面。,2）为图片添加热点,为图片添加热点，具体操作步骤如下：,（1）选择需要添加热点的图片。右击选“显示图片工具栏” （2）在“图片”工具栏中，单击长方形、圆形或多边形热点按钮匹配需要的形状。 （3）在图片上，采用鼠标拖动操作画出所选形状。画多边形时，可单击多边形的第一个角，然后依次单击多边形其

35、他角的位置，最后双击完成多边形。 （4）释放鼠标，弹出“插入超链接”对话框，按照插入超链接中所讲方法创建超链接即可。,为图片添加热点,重复步骤（2）、（3）、（4），在图片上依次创建超链接到其他网页。当鼠标移动到热点区域时，光标变为手形，如下图所示。单击鼠标，超链接的目标网页就会显示在Web浏览器窗口中。,返 回,3. 使用书签超链接,书签能够严格地控制用户到达当前网页内的某个具体位置。书签是网页中被标记的位置或被标记的文本。单击书签超链接，将直接跳转到该书签所在的位置。,1）插入书签 （1）选中作为书签的文本，或将光标定位在要插入书签的位置。 （2）选择“插入” /“书签”菜单命令，弹出“书

36、签”对话框，如右图所示，所选文本自动出现在“书签名称”框中。 （3）单击“确定”按钮，插入书签，可以看到所选文本下方出现虚线。,2）创建书签超链接 （1）选定要定义超链接的文本或图片； （2）从“插入” /“超链接”菜单命令，弹出“插入超链接”对话框，如下图所示，在对话框的“链接到”栏单击“本文档中的位置”，选择要链接的书签； （3）单击“确定”按钮，插入书签超链接。 保存网页，在浏览器中预览效果，单击页面中的书签超链接，页面会跳转到书签的位置。,4. 创建电子邮件超链接,电子邮件超链接为用户发送电子邮件提供了极大的方便，单击电子邮件超链接后，允许用户书写电子邮件内容，并发往指定的地址。具体操

37、作步骤如下： （1）选择作为电子邮件超链接的文本或图片； （2）从“插入” /“超链接”菜单命令，弹出“插入超链接”对话框； （3）在对话框的“链接到”栏单击“电子邮件地址”，在“电子邮件地址”框中输入所需电子邮件地址，还可以在“主题”框中键入电子邮件的主题； （4）单击“确定”按钮，完成电子邮件超链接的创建。,返 回,第九章网页制作,9.4网页布局,9.4 网页布局,9.4.1 使用表格 9.4.2 框架,9.4.1 创建和使用表格,表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。利用表格可以有条理地排列数据或者组织网页布局。表

38、格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本提供边界。 FrontPage 2003提供了与Word字处理软件类似的表格处理功能，在网页中可以轻松地创建和处理表格。,1. 创建表格,创建表格有以下三种方法： 方法（1）使用“表格”/“插入”/“表格”菜单命令，可以对插入的表格进行精确的设置，包括行和列的数目、对齐方式、单元格间距、单元格衬距、边框粗细和背景等。 方法（2）使用“常用”工具栏的“插入表格”按钮 ，快速插入表格。 方法（3）使用“表格” /“绘制表格”菜单命令，手动绘制表格。,2. 设置表格属性,插入表格后，打开“表格属性”对话框，可以

39、设置表格属性。 对齐方式（指的是表格的对齐方式而非单元格）：可以选择左对齐、右对齐、水平居中和两端对齐。该属性决定表格在网页中的相对位置。 浮动：可以选择左对齐、右对齐。该属性决定表格与其他网页元素的排列关系，即“文字环绕”效果。 指定宽度和高度：设置表格的大小。可以使用绝对大小“像素”或相对大小“百分比”。 单元格衬距：设置表格线与表格内容的距离。 单元格间距：设置两个相邻单元格边框的距离。 边框：粗细以像素为单位，可以选择合适的边框颜色。 背景：可以指定背景颜色或背景图像。,3. 调整表格,创建表格后，可以对表格单元格、行和列的布局和结构进行调整，具体操作有：调整行、列或单元格；插入行、列

40、或单元格；删除行、列或单元格；合并、拆分单元格；平均分布行高、列宽；设置单元格属性等。在“单元格属性”对话框中，可以设置单元格中内容的布局，精确定义单元格的宽度、高度，确定单元格的背景以及边框的颜色等。,9.4.2 创建框架,框架是进行网页布局设计的一种重要手段。框架将浏览器窗口划分为几个区域，在每个框架中都显示一个独立的网页。浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架网页。框架网页并不包含显示的内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其他网页的超链接）等。,例如，使用“横幅和目录”框架网页模板创建的框架网页实际上在浏览器中同时显示四个网

41、页：作为容器的框架 网页和分别显示在三个框架中的三个网页。,1. 创建框架,在FrontPage 2003中，可以使用框架网页布局模板轻松创建框架网页。具体操作步骤如下： （1）单击“文件” /“新建”菜单命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。 （2）在弹出的“网页模板”对话框中，切换到“框架网页”选项卡，选择所需的模板，如“目录”模板，可在“说明”及“预览”区域查看该模板的说明及预览图。,2. 保存框架网页,（1）单击“常用”工具栏中的“保存”按钮，打开“另存为”对话框，在右边的框架网页预览图中，其中一个框架高亮显示，表示正在保存该网页； （2）在“文件名”框中输入

42、网页名称； （3）单击“更改”按钮，设置网页的标题； （4）单击“保存”按钮，该网页保存完毕，框架图中的另一个框架处于高亮状态； （5）重复步骤（2）（4）的操作； （6）当对话框中的整个框架处于高亮状态时，表示正在保存框架网页本身； （7）输入框架网页的文件名称及标题； （8）单击“保存”按钮。,3. 拆分框架,当使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。操作步骤如下： （1）选择要拆分的框架； （2）选择“框架” / “拆分框架”菜单命令，打开“拆分框架”对话框； （3）根据需要选择“拆分为列”或“拆分成行”选项； （4）单击“确定”按钮完成拆分。,4

43、. 删除框架,可以从框架结构中删除指定的框架。此时，系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。 操作方法是：选择要删除的框架，选择“框架”/ “删除框架”菜单命令即可。,5. 设置框架属性,通过对框架属性的设置，可以更改框架超链接的网页、调整框架大小等。 基本操作是：选择目标框架，从“框架”菜单中选择“框架属性”命令，出现 “框架属性”对话框，设置框架属性。 单击“框架属性”对话框中的“框架网页”按钮，弹出 “网页属性”对话框，在这里可以调整框架间距。清除“显示边框”复选框时，可以隐藏框架边框。,9.4.3 创建框架超链接,1. 创建框架超链接 （1）选择要定义超链接的文字

44、或图片； （2）单击“常用”工具栏上的“超链接”按钮，出现“创建超链接”对话框； （3）在“URL”框中输入链接的目标网页； （4）单击“更改目标框架”按钮，出现“目标框架”对话框； （5）在“当前框架网页”区域中单击要用作目标的框架； （6）单击“确定”按钮，返回到“创建超链接”对话框，在“目标框架”栏中显示出设置的目标框架名称； （7）单击“确定”按钮。,2. 使用特殊的目标框架,在指定目标框架时，除了当前的框架之外，还提供了一些特殊的框架来创建不同效果的目标框架。这些特殊框架位于选中的框架/“超链接”/“目标框架”对话框中的“公用的目标区”区域，有以下几种： 相同框架：将链接的网页显示在

45、包含该超链接的同一个框架内。 整页：将框架展开为整个窗口后，显示链接网页。 新建窗口：打开另外一个新窗口，显示链接网页。 父框架：在当前框架的上层框架内显示链接网页。,第九章网页制作,9.5创建表单页面,9.5 创建表单页面,9.5.1 插入表单域 9.5.2 提交表单,9.5.1 插入表单域,表单是由表单域组成的，表单域是客户输入信息的区域。在FrontPage 2003中，有6种表单域：单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮。,1. 单行文本框,单行文本框用于让客户输入一行文字。要插入一个单行文本输入框，使用“插入” /“表单”菜单命令，再选择“单行文本框”。单行文本

46、框。 要设置单行文本框的属性，可以右键单击单行文本框，在弹出的快捷菜单中选择“表单域属性”命令，也可以直接双击单行文本框，FrontPage 2003将打开“文本框属性”对话框。,2. 文本区（滚动文本框）,文本区（滚动文本框）允许客户输入多行文本。 要插入滚动文本框，使用“插入” /“表单”菜单命令，再选择“滚动文本框”。 与单行文本框一样，设置滚动文本框的属性，可以右键单击滚动文本框，在弹出的快捷菜单中选择“表单域属性”命令，或直接双击滚动文本框，FrontPage 2003将打开“滚动文本框属性”对话框。,3. 复选框,复选框是提供给客户的一个选项，一般彼此独立的多个复选框组成一组，客户

47、可以同时选中所有选项，也可以一个都不选。 要插入一个复选框，使用“插入” /“表单”菜单命令，再选择“复选框”。 要设置复选框的属性，右键单击复选框，在弹出的菜单中选择“表单域属性”命令，或直接双击复选框，FrontPage 2003将打开“复选框属性”对话框。 首先应当为复选框命名，当客户提交表单时，复选框的名称和状态配对发送给Web服务器端的表单处理程序。可以设置复选框的初始状态是选中还是不选中。,4. 单选按钮,单选按钮通常组成一组互斥的选项，客户只能选择其中一项。 要插入单选按钮，使用“插入”菜单上的“表单”命令，再选择“单选按钮”。 如果表单上有多个单选按钮，FrontPage 20

48、03默认选中第一个。 要修改单选按钮的属性，右键单击单选按钮，在弹出的菜单中选择“表单域属性”命令，或直接双击单选按钮，FrontPage 2003将打开“单选按钮属性”对话框。 要注意的是，如果把多个单选按钮编成一组，必须使它们的组名相同。此外，可以单击“验证有效性”按钮，限定客户按一定的规则做出选择。,5. 下拉菜单（下拉列表框）,下拉菜单用于从一个列表中选择一项或几项。从功能的角度讲，可以用一组复选框或一组单选按钮来实现，但下拉菜单占用的网页空间相对较小。 要插入下拉菜单，使用“插入” /“表单”菜单命令，再选择“下拉菜单”。插入的下拉菜单是空的，用户可以右键单击下拉菜单，在弹出的菜单中

49、选择“表单域属性”命令，或直接双击下拉菜单，FrontPage 2003将打开“下拉菜单属性”对话框。,5. 下拉菜单（下拉列表框）,单击“添加”按钮，将打开“添加选项”对话框，在“选项”框内输入名称，当客户提交表单时，提交的是选项的名称。如果想提交另外的值，应当选中“指定值”复选框，然后键入一个值。此外，用户还可以指定选项的初始状态是选定还是未选定。,6. 按钮,一个表单上至少要有一个“提交”按钮和一个“全部重写”按钮。“提交”按钮的作用是把表单上的数据提交给Web服务器的表单处理程序，“全部重写”按钮的作用是把表单上的数据清空，以便重新填写。 要插入按钮，使用“插入”菜单上的“表单”命令，再选择“按钮”。 设置按钮的属性，可以右键单击按钮，在弹出的菜单中选择“表单域属性”命令，或直接双击按钮，打开“按钮属性”对话框。 可以把按钮作为“提交”、“全部重写” 或者普通按钮。对于“提交”按钮和“全部重写”按钮来说，它们的动作特性是默认的。,9.5.2 提交表单,用户结束表单操作后，单击“提交”按钮，当“提交”按钮设置了表单结果送至何处后，表