大学计算机基础--人民邮电出版社
第9章 网页制作
如今，建造一个网上家园已经不是特别困难的事了，因为有了一个功能强大操作简单的网站开发管理工具：FrontPage。
9.1 HTML简介
9.2 FrontPage概述
9.3 网页制作
9.4 网页布局
9.5 创建表单页面
9.6 网页的发布
第9章 网页制作 -- 9.1 HTML简介
9.1 HTML简介
9.1.1 HTML的概念
9.1.2 HTML文件的基本构成
9.1.3 HTML语言的基本语法
9.1 HTML简介 -- 9.1.1 HTML的概念
9.1.1 HTML的概念
WWW技术被认为是Internet发展史上一个重要里程碑，它功能强大，有很强的交互性，支持文字、图像、声音、动画、视频等各种媒体信息。网页已经成为Internet世界中信息的主要形式。
HTML（超文本标记语言）是WWW技术的基础。它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。
9.1 HTML简介 -- 9.1.1 HTML的概念
9.1.1 HTML的概念
用HTML语言编写的文件称为HTML文件。用HTML语言编写的网页实际上是一种文本文件，以.htm或.html为扩展名，可以使用任何文本处理软件（如记事本）编写。它通常被存储在Web服务器上面，客户端通过浏览器向Web服务器发出请求，服务器响应请求并将HTML文件发送给浏览器，然后由浏览器对文件中的标记做出相应的解释，以页面的形式呈现在用户屏幕上。又把HTML文档称为网页（Web Page）。
9.1 HTML简介 -- 9.1.2 HTML文件的基本构成
9.1.2 HTML文件的基本构成
1．HTML标记的格式
每一个HTML文件包括网页内容和HTML标记两部分。网页内容是能够直观地看到的信息；HTML标记负责控制网页内容显示的外观和版式。多数HTML标记的书写格式如下：
<标记名> 网页内容 </标记名>
标记名写在英文“<>”号内。多数标记同时具有起始和结束标记，如：<font></font>定义了一段文本的格式。也有些没有结束标记，例如<br>代表回车换行符。
9.1 HTML简介 -- 9.1.2 HTML文件的基本构成
1．HTML标记的格式
HTML标记不区分大小写，如：<HTML>、<html>或<HtMl>，其结果都是一样的。某些标记还具有一些属性，指定对象的特性，如背景颜色、文本字体大小、对齐方式等。属性一般放在“开始标记”中，格式如下：
<标记名 属性1=值1 属性2=值2 ... >网页内容</标记名>
其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分开。
9.1 HTML简介 -- 9.1.2 HTML文件的基本构成
2．HTML网页的结构
<html>
<head>
<title>我的第一个Web页</title>
</head>
<body>
<h1>欢迎进入HTML世界!</h1>
<p>这里首先介绍HTML语言的基本知识。</p>
</body>
</html>
9.1 HTML简介 -- 9.1.2 HTML文件的基本构成
2．HTML网页的结构
将上述代码用文本编辑器编辑并保存为一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到如图所示的结果。
9.1 HTML简介 -- 9.1.2 HTML文件的基本构成
2．HTML网页的结构
一般HTML文件都是以<html>开头，以</html>结束，其文件结构由以下两部分组成。
1）网页头部（head）
头部由<head>和</head>标记定义。文件的标题、语言字符集信息、网页搜索的关键字、作者信息、版本信息等都放在头部信息中。其中最常用到的标记是<title>...</title>，它用于定义网页文件的标题，当该网页文件被打开后，将出现在浏览器的标题栏中。
9.1 HTML简介 -- 9.1.2 HTML文件的基本构成
2．HTML网页的结构
2）网页主体（body）
网页主体是HTML文件的核心内容，由<body>和</body>标记定义，<body>标记的格式如下：
<body>...</body>
body具有一些常用的属性，我们可以将各种属性组合起来放在body的开始标签中用以控制整个网页的显示效果。
9.1 HTML简介 -- 9.1.2 HTML文件的基本构成
2．HTML网页的结构
① 颜色控制
包括网页背景颜色、文本颜色、超链接文本颜色3种。一般我们通过bgcolor属性来控制背景颜色，使用color属性来控制文本颜色，格式如下：
<body bgcolor=#n color=#n > ... </body>
其中，bgcolor为背景颜色；color为文本颜色；n为六位十六进制数，每两位为一个单元，分别代表RGB三原色的取值，范围是00～FF。
9.1 HTML简介 -- 9.1.2 HTML文件的基本构成
2．HTML网页的结构
② 背景图像
格式为：<body background="路径/图片文件名" > ... </body>
当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略。通过键入回车符来进行文本的换行是没有任何作用的，必须使用<br>标记才能换行。要想在文本中间加入空格，也只能使用特殊的标记“ ”，一个这样的标记代表一个英文空格。
9.1 HTML简介 -- 9.1.3 HTML语言的基本语法
9.1.3 HTML语言的基本语法
1．文本布局
1）段落标记<p>
指定文档中一个独立的段落。align属性控制对齐方式，其值可以是left、center、right。
<p align=对齐方式> ... </p>
2）换行标记<br>
让一行文字转到下一行。
3）水平线标记<hr>
在网页中插入一条水平线。
9.1 HTML简介 -- 9.1.3 HTML语言的基本语法
2．文字格式
1）标题标记<hn>
标题文字将以指定大小、黑体居中显示。格式如下：<hn>标题文字</hn>。n为1到6的数字，表示字体大小,并且n的值越大，字形越小。
2）字体标记<font>
size属性用来控制文字的大小
color属性用来控制文字的颜色
face属性用来指明文字使用的字体
9.1 HTML简介 -- 9.1.3 HTML语言的基本语法
2．文字格式
3）字形标记
设置文字的粗体、斜体、上标、下标、下划线等。
9.1 HTML简介 -- 9.1.3 HTML语言的基本语法
3．插入图片
<img>标记将图片插入网页中。
1）src属性：指明图片文件所在的位置。
2）alt属性：图片的文字说明，当鼠标指针指向该图片时，该说明性文字弹出。
3）height和width属性：设置高度和宽度。
4）border属性：设置图片文件的边框。
5）align属性：设置图片相对于文本的位置。
9.1 HTML简介 -- 9.1.3 HTML语言的基本语法
4．超级链接
在HTML语言中，<a>和</a>标记用于设置超链接，href属性指明被超链接的文件地址。
<a href=URL> 超链接显示文本 </a>
用于表示超链接的文本一般显示为蓝色并且加下划线。当鼠标指针指向该文本时，箭头变为手形。
图片做超链接，<a href=URLl><img src=URL2 ></a>。其中URL1指向超链接的文件，URL2代表图片存放的位置。
9.1 HTML简介 -- 9.1.3 HTML语言的基本语法
5．使用表格
<table>...</table>定义表格。
<tr>...</tr>定义表行。
<td>...</td>定义表列。
border属性设置表格边框的宽度；width、height属性设定表格宽度、高度；cellspacing和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性设置对齐方式；bgcolor和background属性设置背景的颜色和背景图像。
第9章 网页制作 -- 9.2 FrontPage概述
9.2 FrontPage概述
9.2.1 FrontPage的启动与退出
9.2.2 FrontPage中的视图
9.2 FrontPage概述 -- 9.2.1 FrontPage的启动与退出
9.2.1 FrontPage的启动与退出
FrontPage 2003是Microsoft公司开发的网页制作和网站管理工具，是Microsoft Office 2003的组件之一。
在FrontPage中，不仅综合提供了网站的建立、制作与管理等多项功能，同时，其简易的操作流程使那些不具备程序设计能力的网站设计人员有了一种快捷便利的工具，成为目前初学者使用最为广泛的网页制作、站点管理工具。
9.2 FrontPage概述 -- 9.2.1 FrontPage的启动与退出
1．FrontPage的启动
1）依次打开“开始→所有程序→Microsoft Office→Microsoft Office FrontPage 2003”。
2）或者双击桌面上已建立的FrontPage 2003快捷方式图标 。
2．FrontPage的退出
FrontPage 2003的退出与退出Word 2003相似，也有4种方式。
9.2 FrontPage概述 -- 9.2.2 FrontPage中的视图
9.2.2 FrontPage中的视图
1．网页视图
用户可以根据需要在设计、拆分、代码、预览四种网页视图模式中进行选择。
设计视图是打开网页首先进入的视图，可以在其中输入文本、插入图片、插入表格等，也可任意修改；用户在代码视图中可以查看、编写和编辑HTML标记；拆分视图将窗口分为上下两部分：上面是代码区，下面是设计区，无论哪个区域发生变化，都会反映在另一区域。
9.2 FrontPage概述 -- 9.2.2 FrontPage中的视图
2．文件夹视图
在此模式中可以显示网站文件夹的树形组织结构，可以很方便地管理文件和文件夹，包括创建、移动和删除文件或文件夹。其操作类似Windows资源管理器。
3．远程网站视图
用于站点和站点内文件的发布。在该视图中查看文件时，文件将用图标和描述性文字进行标记以表示发布状态：“不发布”、“新建”、“已更改”、“未更改”和“冲突”等。
9.2 FrontPage概述 -- 9.2.2 FrontPage中的视图
4．报表视图
了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。运行报表查询后可分析网站内容：文件总大小，文件链接慢速网页或过期网页等。
5．导航视图
网站建设和管理的工具，观察站点链接结构（导航架构图），并且可以通过拖曳操作轻松地改变组织结构。也可以设置站点的导航结构或添加、删除网页。
9.2 FrontPage概述 -- 9.2.2 FrontPage中的视图
6．超链接视图
主要用来查看网站中各文件和网页的链接关系。此视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。超链接视图就像一个地图，表明站点中的所有超链接路径。
7．任务视图
主要用来创建和管理任务。在视图中列出了网站中所有的任务，并在各个标题下提供有关各项任务的当前信息。
第9章 网页制作 -- 9.3 网页制作
9.3 网页制作
9.3.1 新建站点
9.3.2 页面编辑
9.3.3 对象编辑
9.3.4 创建超链接
9.3 网页制作 -- 9.3.1 新建站点
9.3.1 新建站点
站点俗称网站，是一组相关的网页及其他文件的集合。这些网页在Internet中表现为一个完整结构就称为“站点”。下面以“只有一个网页的站点”为例，介绍新建站点的方法。
1）单击“文件”菜单“新建”，选择“新建网站”中的“由一个网页组成的网站”；
2）在“新建”对话框“指定新站点的位置”文本框中输入存储站点的文件夹。也可使用“浏览”按钮指定新站点的位置。“确定”。
9.3 网页制作 -- 9.3.1 新建站点
9.3.1 新建站点
该站点只有一个空白网页index.htm（主页）和用于存储图片的文件夹images，可以打开 index.htm编辑该网页，也可以进一步根据网站规划创建文件夹和新建其他网页。
注意：在访问网站的时候，服务器必须能够自动地确定哪个页面应该被首先访问（即确定哪个页面是网站首页），规定一个网站的首页必须是以index或default为文件名，以.html或者.htm为后缀。在FrontPage中默认是index.htm。
9.3 网页制作 -- 9.3.2 页面编辑
9.3.2 页面编辑
1．新建网页
1）单击“文件”菜单“新建”命令，在打开的任务窗格中选择“新建网网”中的“其他网页模板”；
2）在“常规”选项卡中，选择所需的模板，可在“说明”及“预览”区域查看该模板的说明及预览图。如果要建一个空白网页，可选中“普通网页”模板。
3）单击“确定”按钮，系统新建一个基于所选模板的网页。此时，新建的网页显示在FrontPage 2003窗口中。
9.3 网页制作 -- 9.3.2 页面编辑
1．新建网页
4）单击“文件”菜单，选择“保存文件”命令，弹出“另存为”对话框。在此对话框中，单击“更改标题”按钮修改网页标题，如“新闻”。在“文件名”文本框中输入网页文件名，如news.htm。设置完成后单击“保存”按钮。
提示：在“页面”视图中，在相应的文件名标签上单击右键，也可以“保存”或“关闭”文件。若需另存可使用“文件”菜单中的“另存为”命令。
9.3 网页制作 -- 9.3.2 页面编辑
2．打开网页
1）在FrontPage 2003窗口中，单击工具栏中的“打开”按钮，然后选择相应的网页。
2）在文件夹视图中，找到要编辑的网页，然后双击该文件，即可打开网页。实际上，在其他视图中双击网页图标，同样会打开指定网页。
9.3 网页制作 -- 9.3.2 页面编辑
3．设置网页的属性
使用“文件”菜单“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的菜单中选择“网页属性”命令，显示“网页属性”对话框。
1）“常规”属性
9.3 网页制作 -- 9.3.2 页面编辑
2）“格式”属性
要设置网页的背景颜色、背景图片及超链接的颜色，单击“网页属性”对话框的“背景”选项卡或者单击“格式”菜单中的“背景”命令。
单击相应下拉列表框，设置网页背景颜色、文本颜色以及超链接文本的颜色。当同时设置背景图片和背景颜色时，图片将覆盖背景色。
（3）“高级”属性
在“高级”选项卡中可以设置页面的上、下、左、右页边距。
9.3 网页制作 -- 9.3.2 页面编辑
4．预览网页
网页制作的过程中，用户可以随时对网页进行预览。在页面视图中单击右下角的“预览”可切换到预览视图方式，还可以使用“文件”菜单上面的“在浏览器中预览”命令，使用外部浏览器打开当前网页进行预览。
9.3 网页制作 -- 9.3.3 对象编辑
9.3.3 对象编辑
1．插入图片
1）插入图片的步骤
① 移动光标到想要插入图像处。
② 单击菜单项中的“插入”，选择“图片”项，再选取二级菜单中的“来自文件”，弹出选择图片的对话框。
③ 选取需要插入的图片文件，并按“确定”按钮，即可将图片插入网页中。
9.3 网页制作 -- 9.3.3 对象编辑
1．插入图片
2）设置图片属性
可以设置图片属性来调整图片的大小、对齐方式等。在选定的图片上单击鼠标右键，选择“图片属性”，出现“图片属性”对话框。“外观”选项卡，可以设置环绕方式、布局、大小等；“布局”区域中可以设置对齐方式、水平间距、边框粗细和垂直间距等；在“大小”区域中调整图片的大小参数。为了防止改变图片原来的长宽比例，可以通过选中“保持纵横比”复选框。
9.3 网页制作 -- 9.3.3 对象编辑
1．插入图片
3）编辑图片
选中插入的图片，选择“视图”菜单中的“工具栏”，选择“图片”命令，打开图片编辑工具栏，可以对图片的亮度、对比度进行调整，可以旋转、翻转图片，对图片进行裁减等操作。
9.3 网页制作 -- 9.3.3 对象编辑
2．插入水平线
在网页中输入文本内容之后，还可在不同的段落、行之间添加水平线，增强视觉效果。
1）在准备插入水平线的位置设置插入点。
2）打开“插入”菜单，选择“水平线”命令，此时在网页的插入点处插入一条水平线。如果插入点位于或接近行尾，则水平线将插入到下一行。将光标移动至水平线上双击，打开“水平线属性”对话框，设置宽度、高度、对齐方式、颜色等。
9.3 网页制作 -- 9.3.3 对象编辑
3．插入组件
默认状态下“插入”菜单中没有“组件”项，加入“组件”的方法是：单击“工具”菜单中的“自定义”命令，在打开的“自定义”对话框中，选择“命令”选项卡，在“类别”列表中选择“插入”，在“命令”列表中选择“组件”，将它拖到窗口“插入”菜单中，置于合适的位置（如“Web组件”前），再单击“自定义”对话框中“关闭”按钮即可。
9.3 网页制作 -- 9.3.3 对象编辑
4．插入悬停按钮
悬停按钮是一种动感按钮，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状。
1）将插入点设置在要插入悬停按钮的位置。
2）单击“插入”菜单中的“组件”，选择“悬停按钮”命令，弹出“悬停按钮属性”对话框。
3）在“按钮文本”框中输入按钮上的文本。
4）可以通过单击“自定义”按钮，在弹出的“自定义”对话框中进一步设置按钮的属性。
5）设置完成，按“确定”按钮。
9.3 网页制作 -- 9.3.3 对象编辑
5．插入交互式按钮
1）单击工具栏“Web组件”按钮，或者选择“插入”“Web组件”。打开“插入Web组件”对话框。
2）选择“动态效果”下“交互式按钮”，“完成”。
3）在对话框中，“按钮”选项卡的“按钮”列表中选择按钮，在“文本”框中输入名称，在“链接”框中输入超链接目标。在“字体”选项卡设置按钮文字的字体、对齐方式和颜色。在“图像”选项卡设置按钮大小、各种状态图像和JPEG图像背景颜色或GIF图像背景透明。
9.3 网页制作 -- 9.3.3 对象编辑
6．插入字幕
想把网页中的文字做成由左至右，或由右至左移动的动态效果，就需要使用字幕了。
1）将插入点设置在要插入移动字幕的位置或者选择作为移动字幕的文本。
2）单击“插入”菜单中的“组件”，选择“字幕”命令，出现“字幕属性”对话框。
3）如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中，如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。
9.3 网页制作 -- 9.3.3 对象编辑
6．插入字幕
4）“方向”选择文字的移动方向，“速度”指定文字的移动速度，“延迟” 表示在每个连续运动之间暂停的毫秒数，“数量” 表示文本每次移动的距离。在“表现方式” 指定文字的运动方式，选中“重复”区域的“连续”复选框，移动字幕连续不停循环,“背景颜色” 设置移动字幕的背景颜色。
（5）单击“确定”按钮。
9.3 网页制作 -- 9.3.4 创建超链接
9.3.4 创建超链接
超链接通常表现为与普通文本或图片不同的特点。将鼠标移到一个超链接上方时，鼠标指针会变成手形。同时与这个超链接相对应的目标文件路径会在窗口底部的状态栏显示出来。
1．创建超链接
在Web网页中超链接一般有两种表现方式，即以文本方式标注的超链接和以图片方式标注的超链接。
9.3 网页制作 -- 9.3.4 创建超链接
1．创建超链接
① 选定要定义超链接的文本或图片。
② 单击“常用”工具栏的“超链接”按钮 ，或从“插入”菜单中选择“超链接”命令。
③ 出现“创建超链接”对话框，在打开的“插入超链接”对话 框中选择 超链接的 目标对象。
④ 确定。
9.3 网页制作 -- 9.3.4 创建超链接
2．创建书签
单击书签超链接，直接跳转到书签所在位置。
1）插入书签
① 将光标定位在要插入书签的位置。
② 从“插入”菜单中选择“书签”命令。
③ 出现“书签”对话框，“书签名称”框键入名称。
④ 单击“确定”按钮，出现书签标记。
2）创建到书签的超链接
“创建超链接”对话框，“书签”下拉列表框中选择一个书签名作为超链接的目标。
9.3 网页制作 -- 9.3.4 创建超链接
3．设置图片热字或热点超链接
1）设置图片热字超链接
① 单击选中图片。
② 单击“图片”工具栏“文本”，如果不是gif格式会弹出必须转换为gif格式提示框，“确定”。
③ 在图片中心自动出现的文字输入区输入文字，将其拖到合适的位置。
④ 选中热字文本框，选择“插入”菜单“超链接”，或单击右键选择“超链接”或“图片热点属性”，打开 “插入超链接”对话框，建立超链接。
9.3 网页制作 -- 9.3.4 创建超链接
3．设置图片热字或热点超链接
2）设置图片热点超链接
① 单击选中图片。
② 单击“图片”工具栏右边的“矩形热点”（或“圆形热点”或“多边形热点”）按钮。
③ 将光标移动到图片上，光标变为笔状，在图片的相应位置画出选择的区域，释放鼠标左键后，突出显示热点，打开“插入超链接”对话框。按前面介绍的方法建立超链接。
第9章 网页制作 -- 9.4 网页布局
9.4 网 页 布 局
网页布局是将文字、图形图像等页面元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联和配置，从而将设计意图以视觉形式表现出来。常用表格和框架两种技术来帮助我们进行网页布局的设计。
9.4.1 使用表格
9.4.2 使用框架
9.4 网页布局 -- 9.4.1 使用表格
9.4.1 使用表格
表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。
利用表格可以有条理地排列数据或者组织网页布局。表格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本提供边界。
9.4 网页布局 -- 9.4.1 使用表格
1．创建表格
1）使用“插入表格按钮”创建
使用“常用”工具栏中的“插入表格”按钮，可以按默认方式快速地插入表格。
① 将插入点定位在要插入表格的位置。
② 单击“常用”工具栏上的“插入表格”按钮，然后向右下方拖动鼠标，在表格框中会显示表格的大小。此时在插入点位置就会显示一张空的表格。
9.4 网页布局 -- 9.4.1 使用表格
1．创建表格
2）使用菜单命令创建
① 将插入点定位在要插入表格的位置。
② 选择“表格”菜单“插入”子菜单中“表格”。
③ 在“插入表格”对话框中，“大小”区域中的“行”和“列”栏中输入表格的行数和列数。
④ “布局”区域设置布局方式，包括对齐方式、单元格间距、边框颜色及粗细、背景等。
⑤ “确定”，设置的表格出现在插入点位置。
9.4 网页布局 -- 9.4.1 使用表格
1．创建表格
3）手动绘制
① 选择“表格”菜单“手绘表格”，显示“表格”工具栏，单击“手绘表格”，光标变为铅笔形。
② 在要创建表格的位置按下鼠标左键的同时拖动光标，在表格大小合适时松开鼠标。
③ 在表格内将铅笔光标沿水平方向拖动增加一个新行，沿垂直方向拖动增加一个新列。
④ 单击“表格”工具栏中的“清除”按钮 ，光标变为橡皮形状，单击表格线可清除该表格线。
9.4 网页布局 -- 9.4.1 使用表格
2．设置表格属性
鼠标右键单击表格，选择“表格属性”：
对齐方式：左对齐、右对齐和居中。
浮动：左对齐、右对齐。即“文字环绕”效果。
宽度和高度：绝对大小“像素”或相对大小“百分比”。
单元格衬距：表格线与表格内容距离。
单元格间距：两个相邻单元格边框的距离。
边框：以像素为单位。
背景：指定背景颜色或背景图像。
9.4 网页布局 -- 9.4.1 使用表格
9.4 网页布局 -- 9.4.1 使用表格
3．调整表格
1）插入行或列
① 将插入点定位在单元格内。
② 选择“表格”菜单“插入”子菜单中“行或列”。
③ 出现“插入行或列”对话框，在“行数”或“列数”选项栏中键入要插入的行数或列数。
④ 在“位置”区域中选择相对于当前的插入位置，单击“确定”按钮。
使用“表格”工具栏“插入行”按钮或“插入列”按钮可以快速地在表格中插入行或列。
9.4 网页布局 -- 9.4.1 使用表格
3．调整表格
2）删除行、列或单元格
① 选中要删除的行、列或单元格。
② 单击“表格”菜单“删除单元格”命令，或者单击“表格”工具栏中的“删除单元格”按钮。
3）合并单元格
选中一个矩形区域内的多个连续的单元格，单击“表格”菜单“合并单元格”命令，或者单击“表格”工具栏“合并单元格”按钮。
9.4 网页布局 -- 9.4.1 使用表格
3．调整表格
4）拆分单元格
将插入点定位在要拆分的单元格中，单击“表格”菜单“拆分单元格”命令，或者单击“表格”工具栏中的“拆分单元格”按钮 ，出现“拆分单元格”对话框。
如果选择“拆分成行”选项，可以水平地拆分单元格；如果选择“拆分成列”选项，可以垂直地拆分单元格。然后在“行数”或“列数”框中键入或选择拆分的数目，单击“确定”按钮。
9.4 网页布局 -- 9.4.1 使用表格
3．调整表格
5）设置单元格属性
定位插入点在单元格中，单击“表格”→“属性”→“单元格”，弹出“单元格属性”对话框。
通过这个对话框，我们可以设置单元格中内容的布局，精确定义单元格的宽度、高度，确定单元格的行跨距、列跨距、背景颜色、单元格边框颜色以及单元格的背景图片等。
9.4 网页布局 -- 9.4.2 使用框架
9.4.2 使用框架
框架技术是将浏览器窗口划分为几个区域的一种技术，划分后的每一个子窗口叫做一个框架。在每个框架中都可以显示一个独立的网页，浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架网页。
框架网页并不包含显示内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页等。框架的使用是进行网页布局设计的一种重要手段。
9.4 网页布局 -- 9.4.2 使用框架
1．创建框架
1）单击“文件”菜单“新建”，选择“新建网网”中的“其他网页模板”；
2）单击“框架网页”选项卡。
3）选择所需的模板，“说明”区域中显示所选模板描述，“预览”区域中预览框架网页的布局。
4）单击“确定”按钮，完成框架网页的创建。
在窗口底部出现了一个新的标签，“无框架”视图为不能支持框架的浏览器创建替代网页。
9.4 网页布局 -- 9.4.2 使用框架
9.4 网页布局 -- 9.4.2 使用框架
2．保存框架网页
当完成框架网页之后，就需要保存这个框架网页，操作步骤如下：
1）单击“常用”工具栏“保存”按钮。
2）出现“另存为”对话框，在右边的框架网页预览图中，其中一个框架高亮显示，表示正在保存该网页。
3）在“文件名”框中输入网页名称。
4）单击“更改标题”，设置网页标题。
9.4 网页布局 -- 9.4.2 使用框架
2．保存框架网页
5）单击“保存”按钮，该网页保存完毕，框架图中的另一个框架处于高亮状态。
6）重复步骤1）～5）操作。
7）当对话框中的整个框架处于高亮状态时，表示正在保存框架网页本身。
8）输入框架网页的文件名称及标题。
9）单击“保存”按钮。上例中的网页文件需要保存4次。其中一个是框架网页本身。
9.4 网页布局 -- 9.4.2 使用框架
3．拆分框架
当使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。操作步骤如下：
1）选择要拆分的框架。
2）在“框架”菜单中选择“拆分框架”命令。
3）出现“拆分框架”对话框，根据需要选择“拆分成列”或“拆分成行”选项。
4）单击“确定”按钮完成拆分。
9.4 网页布局 -- 9.4.2 使用框架
4．删除框架
可以从框架结构中删除指定的框架。此时，系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。
操作方法是：在框架内单击鼠标选择要删除的框架，在“框架”菜单中选择“删除框架”命令即可。
9.4 网页布局 -- 9.4.2 使用框架
5．设置框架属性
选择目标框架，从“框架”菜单选择“框架属性”，在对话框设置框架属性。
名称：为每个框架命名一个名称。
初始网页：这里显示该框架超链接的网页。
框架大小：输入框架宽度和行高。
边距：设置框架内容与框架之间的距离。
显示滚动条：可以选择框架的滚动条的显示状态。选择显示或不显示。
9.4 网页布局 -- 9.4.2 使用框架
9.4 网页布局 -- 9.4.2 使用框架
6．创建框架超链接
1）选择文字或图片，添加超链接。
2）单击“目标框架”，出现“目标框架”对话框。
3）在“当前框架网页”区域中单击要用作目标的框架。
4）单击“确定”按钮，返回到“创建超链接”对话框，在“目标框架”栏中显示出设置的目标框架名称。
5）单击“确定”按钮。
9.4 网页布局 -- 9.4.2 使用框架
7．使用特殊的目标框架
这些特殊框架位于“目标框架”对话框中的“公用的目标区”区域。
相同框架：将链接的网页显示在包含该超链接的同一个框架内。
整页：将框架展开为整个窗口后显示链接网页。
新建窗口：打开另一个新窗口显示链接网页。
父框架：在当前框架上层框架显示链接网页。
第9章 网页制作 -- 9.5 创建表单页面
9.5 创建表单页面
网站除了信息发布功能以外，另一个功能就是和访问网站的客户进行交互，网站需要能够将用户的特定信息保留下来进行处理。如果想让客户保留商品订单、意见、建议之类的信息的话，我们就需要在网页中加入表单。表单是由表单域组成的，表单域是客户输入信息的区域。
9.5.1 插入表单域
9.5.2 提交表单
9.5 创建表单页面 -- 9.5.1 插入表单域
9.5.1 插入表单域
1．文本框
文本框用于让客户输入一行文字。使用“插入”菜单“表单”，再选择“文本框”。
右键单击文本框，选择“表单属性”，也可以直接双击文本框，打开“文本框属性”对话框。首先要为文本框命名。在“初始值”框内可以键入默认内容。“宽度”框设置文本框的显示宽度。如果该文本框用于输入口令，则选择“密码域”为“是”，在浏览器中用户输入时内容显示为“*”号。
9.5 创建表单页面 -- 9.5.1 插入表单域
2．文本区
滚动文本框允许客户输入多行文本。要插入文本区，使用“插入”菜单上的“表单”命令，再选择“文本区”。
与文本框一样，设置文本区的属性，可以右键单击文本区，在弹出的快捷菜单中选择“表单属性”命令，或者直接双击文本区，FrontPage 2003将打开“文本区属性”对话框。
9.5 创建表单页面 -- 9.5.1 插入表单域
3．复选框
复选框提供给客户多重选项，一般彼此独立的多个复选框组成一组，客户可以同时选中所有或多个选项，也可以一个都不选。
使用“插入”菜单“表单”，选择“复选框”。重复该操作则插入多个复选框。
直接双击复选框，打开属性对话框。首先为复选框命名，提交表单时，复选框的名称和状态配对发送给Web服务器端的表单处理程序，然后用户设置复选框的初始状态是选中还是不选中。
9.5 创建表单页面 -- 9.5.1 插入表单域
4．选项按钮
选项按钮通常组成一组互斥的选项，客户只能选择其中一项。
要插入选项按钮，使用“插入”菜单上的“表单”命令，再选择“选项按钮”，如果表单上有多个选项按钮，默认选中第一个。
要修改选项按钮属性，右键单击选项按钮，选择“表单属性”命令，或直接双击选项按钮，打开“选项按钮属性”对话框。
9.5 创建表单页面 -- 9.5.1 插入表单域
5．分组框
如果要将一组相关的控件或文本与网页或当前表单中的其他信息分开，可以使用分组框。单击“插入”→“表单”→“分组框”，即可插入“分组框”。
在“分组框属性”中，“标签”用来设置分组框名称，“对齐”用来设置分组框标签的对齐方式。
9.5 创建表单页面 -- 9.5.1 插入表单域
6．下拉框
下拉框用于从一个列表中选择一项或几项。使用“插入”菜单“表单”命令，再选择“下拉框”。插入的下拉框是空的，右键单击下拉框，选择“表单属性”命令，或直接双击下拉框，打开“下拉框属性”对话框。
单击“添加”按钮，将打开“添加选项”对话框，首先在“选项”框内输入名称，指定选项的初始状态是选定还是未选定。
9.5 创建表单页面 -- 9.5.1 插入表单域
7．按钮
一个表单上至少要有一个“提交”按钮和一个“重置”按钮。“提交”按钮的作用是把表单上的数据提交给Web服务器的表单处理程序，“重置”按钮的作用是把表单上的数据清空，以便重新填写。
要插入按钮，使用“插入”菜单上的“表单”命令，再选择“按钮”命令。设置按钮的属性，可以右键单击按钮，选择“表单属性”命令，或直接双击按钮，打开“按钮属性”对活框。
9.5 创建表单页面 -- 9.5.2 提交表单
9.5.2 提交表单
当客户单击“提交”按钮后，Web服务端用表单处理程序来处理表单上的信息，表单处理程序可以是注册组件，也可以是自定义的ISAPI/NSAPI应用程序或CGI脚本等。
表单处理程序位于Web服务器端，用于处理客户提交过来的表单上的内容，或者发送确认信息给客户，要指定表单处理程序，在表单上单击鼠标右键，在弹出的菜单中选择“表单属性”命令，打开“表单属性”对话框。
9.5 创建表单页面 -- 9.5.2 提交表单
9.5.2 提交表单
如果使用默认的表单处理程序，选择“发送到”。客户在表单上填写的信息以文本文件的形式保存到Web服务器的_private文件夹，文件名为：表单form_results.txt。用户还可以把表单结果发送到某个E-mail地址。
不使用默认表单处理程序，选择“发送到其他对象”单选按钮，然后在下拉列表中选择“自定义ISAPI、NSAPI、CGI或ASP脚本”或者预定义的“讨论表单处理程序”或者“注册表单处理程序”。
9.6 网页的发布
9.6 网页的发布
将网站上传到网络服务器上，即发布网站。网站发布就是指把创建或修改后的网站中的内容上传到Web服务器中。为了便于用户发布站点，FrontPage提供了一个相当方便的网页发布工具。1）在FrontPage 2003中，打开站点。
2）在“常用”工具栏单击“发布站点”按钮 ，或者从“文件”菜单中选择“发布站点”命令，打开“远程网站属性”对话框。
9.6 网页的发布
3）选择远程服务器类型并在“远程网站位置”文本框中输入网站网址。
4）单击“发布”选项卡，进行相应设置。
5）单击“确定”铵钮，FrontPage尝试与FTP服务器连接，若连接成功，就会出现“要求提供用户名和密码”的对话框。按要求输入用户名和密码。
6）单击“确定”按钮，开始站点的发布过程。
当网页的内容有更新时，只要单击常用工具栏中的“发布站点”按钮，即可将修改过的网页上传。
9.6 网页的发布
总结与作业
1．简述HTML网页的结构。
2．简述HTML标签中<br>和<p>的区别。
3．简述FrontPage中7种视图方式的区别。
4．FrontPage有哪3种编辑方式，它们之间有什么区别？
5．简述超链接类型和建立方法。
6．简述创建框架网页的步骤。
7．网页发布过程中需要注意哪些问题？ |
169351
