网页编辑工具简介

重庆邮电大学计算机科学与技术学院胡军

2.1 制作时应该注意的原则总体来说，要了解以下基本设计原则：（ 1 ）主页排版不要太松散或用太大的字，尽量

避免访问者浏览网页时要用大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，一页的上部是很显眼而且宝贵的地方，不要只放几个粗大的字或图片。

（ 2 ）切勿以 800 ＊ 600 以上的分辨率设计网页，常用的分辨率是 640 ＊ 480 及 800 ＊ 600 。现在国内的站点基本上都是 800 ＊ 600 ，但是如果主要是面向国外访问者的站点，建议使用 640 ＊ 480 。


2.1 制作时应该注意的原则（ 3 ）底色或墙纸必须与文字对比强烈，以易于

阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较多的顾虑。如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些功夫，力求让访问者能够舒适地阅读网页。

（ 4 ）不要把图片白色当作透明，要知道别人的系统不一定把内置设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。


2.2用 FrontPage制作网页 FrontPage 2002 是目前世界上最优秀的网页制

作与开发工具之一，是 Microsoft 公司推出的办公自动化大型套装软件 Office 的一个重要组件，它采用与 Office 其他组件一致的工作界面和操作方式，只要用户使用过 Office 软件，就可以方便地掌握 FrontPage 2002 。

FrontPage 2002 与其他 Office 软件的窗口大致相似，都有一些常用的菜单选项和工具栏，即使从来没使用过 FrontPage 2002 的用户也会对它有一种熟悉的感觉。


（ 3 ）在指定新站点的位置框中，键入新Web 站点的 URL 或单击浏览器在硬盘、网络或 Internet 上创建新站点。如果你要创建子站点，可在根站点的名称之后追加子站点的名称，如果要将站点添加到当前 Web站点，选中“添加到当前站点”即可。


2.2.2 FrontPage2002 的工作界面

启动 FrontPage后你会发现， FrontPage2002 的工作界面同Word等 Office 应用程序的工作界面非常相似。不同的是在 FrontPage2002 的工作界面中多了一个“视图”栏，你可以选择不同的视图以完成不同的功能。好在 Word 也有视图的概念，你对此应该很容易理解。另外就是在编辑区左下方有 3 个小按钮，用于选择网页的显示方式。


2.2.2 FrontPage2002 的工作界面 “普通”方式是你编辑网页时最常用到的，它同Word 的

编辑区一样提供了基本的“所见即所得”的编辑界面。 “HTML” 方式显示的是网页对应的 HTML 文件，它们看起

来象程序员刚写好的程序代码一样，其实你把它看作一种程序也未尝不可，这就是网页的源代码。如果你擅长使用HTML语言，可以在这个视图中编写网页，你想学习 HTML语言的话，也可以参考这里提供的文本。

“预览”方式可以不必打开浏览器即可看到自己编写的网页在浏览器里的实际情形。


２ .2.3 FrontPage2002 的编辑方法 1、标题段落在网页内输入标题时，用户可先设置标题的格式，然后再输入标题的内容，也可将标题当作普通文本对待，等输入完毕后，再打开格式工具栏中的“样式”下拉列表框，选择合适的标题格式。 FrontPage2002提供了 6级标题。

2、文本的修饰在输入文本之后，其字体、字号、颜色和效果都使用默认

设置。 FrontPage提供了“字体”对话框与各种格式工具按钮，可根据需要选择设置，以美化文本。其设置方法同Word 操作类似。


２ .2.3 FrontPage2002 的编辑方法 3、水平线的插入在网页中插入水平线有分隔文本内容的作用。插入水平线的方法如下： (1) 将光标置于要插入水平线的行。 (2) 选择“插入”菜单的“水平线”项，即在网页中插入了一条水平线。

(3) 把鼠标放在水平线上，当光标变为双箭头时按住鼠标左键，可以对水平线进行长短或宽窄的拉伸。

(4) 还可以对水平线属性进行设置，在水平线上单击鼠标右键，在弹出的菜单中选择“水平线属性”，弹出属性对话框。

(5) 大小栏中的宽度，高度可以设置水平线的宽与长。 (6) 在对齐方式栏中可以设置水平线的对齐方式。 (7) 还可以设置水平线的三维阴影，也可以将所有设置存为默认值，

以便今后使用。


２ .2.3 FrontPage2002 的编辑方法

4、列表的使用使用列表和表格来规范网页内容可以使网

页层次分明、结构清晰。列表有项目列表、编号列表、定义列表 3 种。



项目列表如网页的内容存在并列关系，内容中项目的顺序

并不重要时，可以使用项目列表。项目列表也称为无序列表，它将在项目前添加标志符号。默认的标志符号是实心圆点， FrontPage2002 不仅提供了空心圆点、实心方框等其他类型的标志符号，还可以将图片作为新的项目标志。添加项目列表的步骤如下：



(1) 选定要使用项目列表的文本，或者将插入点放在要输入文本的位置上。

(2) 单击格式工具栏按钮，此时项目符号出现在段落的段首。

(3) 在输入项目列表的内容时，在输入完一段内容后回车，新的项目列表符号将出现在下一个段落的段首。


２ .2.3 FrontPage2002 的编辑方法编号列表在网页中的内容存在顺序关系时，可应用编号列表，它表明列表内容

的前后顺序是有重要区别的或者前后顺序是不可以改变的。编号列表的标志符号可以是一连串数字，也可以是定义的英文字母、罗马数字等符号 ,创建编号列表的步骤和创建项目列表的步骤类似。

定义列表定义列表就是在网页内定义词汇、术语的列表，具体的列表，具体的

定义内容将以首行缩进的方式出现在列表的下一行。列表嵌套在复杂的网页中，需要将不同的列表方式嵌套时，则可以使用嵌套技

术。


关于表格的操作我们在 FrontPage2002中创建表格有三种

方法，分别是用菜单中的“表格”命令；用“常用工具栏”的“插入表格”按钮；用手绘制表格命令。


用菜单中的“表格”命令创建表格的步骤如下： (1) 选择“表格”菜单中的插入子菜单的“表格”命令

(2) 在“大小”框体的“行数”栏中输入要设计表格的行数，在“列数”栏中输入要设计表格的列数。

(3) 单击“确定”按钮。


用“常用工具栏”的“插入表格”按钮创建表格的步骤如下：

(1) 单击“常用工具栏”的“插入表格”按钮， (2)按住鼠标左键拖动鼠标确定要选取的表格行列数，如果 4*5 的表格则不能满足需要，可按住鼠标左键继续向大下方拖动。

(3) 松开鼠标左键，所要插入的表格实现了。


用手绘制表格这种方式比较灵活，用这种方式可对已设置好的表格进行细节修改，其操作步骤如下：

（ 1 ）选择菜单栏中的“表格”命令中的“手绘表格”命令。

（ 2 ）将鼠标移回网页编辑区，光标将变为铅笔状，按住鼠标左键拖动即可画出表格的边框线。

（ 3 ）拖动出预期的虚线后松开鼠标左键即可绘制所需表格了。

在创建好表格之后，就有了表格的基本框架，然后就要往其中添加表格内容。表格的内容可以是文本、图片、音频文件、视频文件或超链接等。


关于表格属性的修改表格还具有许多属性，如标题属性，对齐格式属性，边框属性，大小属性，背景属性和间隔属性，通过设置各种属性可以使表格更加美观。

标题属性：用于设置标题的位置，标题的位置可以在表格的顶部，也可以在表格的底部。

对齐格式属性：表格的对齐方式有两种：一种是水平对齐方式，另一种是垂直对齐方式。水平对齐方式有左对齐、右对齐、居中、两端对齐 4 种方式；垂直对齐方式有顶部对齐、低部对齐、中部和基准对齐4 种方式。

边框属性：边框属性包括两种，分为边框的大小和边框的颜色。边框的大小用于设置边框的宽度，当边框宽度为 0 时不可见。这样可以将网页分为几个区域，每个区域可以有各自不同的内容。


背景属性：表格的背景属性包括背景颜色和背景图像两个属性，可用于整个表格，也可以用于单个单元格中。设置背景颜色的步骤如下：

（ 1 ）选定用户要编辑的表格。（ 2 ）选择“表格”菜单中的“属性”子菜单中

的“表格”命令（ 3 ）在背景栏内选择“颜色”，即可设置整个表格的背景色。


间隔属性：表格的间隔由两个因素确定：一是单元格的填充，即单元格之间的间隔距离；一是单元格间距，即单元格内部的间隔距离。其设置方法如下：

（ 1 ）选定要编辑的表格。（ 2 ）选择“表格”菜单中的“属性”子菜单的“表格”命令，弹出“表格属性”对话框。

（ 3 ）在其中的“布局”框中输入单元格间距。（ 4 ）单击“确定”按钮。


大小属性：表格的大小属性包括表格的宽度和高度。 FrontPage2002 设置表格大小属性有两种单位：一个是像素，另一个是百分比。 FrontPage2002 的默认宽度值是窗口的 100% ，和浏览器的窗口宽度相同； FrontPage 2002不指定默认高度值。以像素为单位进行设置：这种方式将表格的大小设定为固定值。当浏览器窗口小于表格时，表格的一部分将被遮住，只有通过滚动屏幕才能看到被遮住的部分；以百分比方式进行设置：以这种方式设置的表格大小将随窗口的大小变化而变化。当表格大于其内部元素时，表格始终全部可见；当表格的大小等于其内部元素时，表格不再变小，可将表格内部元素设置为可变大小。


给网页添加图形的方法添加图形是在网页中运行图形的第一步，大多数

Web 浏览器显示的图像格式有 .GIF 和 .JPG两种。一般来说插入图形的步骤如下： (1) 打开“插入”菜单的“图片”子菜单，执行“来自文件”命令，或直接单击工具栏的“插入图片”按钮


在 FrontPage2002中编辑图像的方法：同样的，我们也可以对图片进行必要的编

辑。在网页内插入图片后，单击图片将激活 FrontPage2002 的图片工具栏，即可对图像进行简单的编辑处理，包括图像的特殊效果、剪切图像、添加文字等。


为了说明图像在网页内的作用与意义，可以在图像内添加一些说明性的文字。如果用图片作为网页的标题，那就更离不开必要的文字信息来简明扼要地反映网页的主旨。 FrontPage2002 图片工具栏的“文本按钮”就是用来在图像内添加文本信息的，并且所有的文本都在一个矩形区域内，步骤如下：


先选定图像后单击图片工具栏的“文本按钮” , 将在图片上方出现文本框。然后用鼠标拖动文本框的边框可以改变文本框的位置，拖动文本框周围的黑色点标可以改变文本框的大小，然后可以在其中输入文本，完成后在图像外的网页内单击鼠标。还可以对文本框内的字体、字号、效果、对齐方式进行设置。如果以后需要改变文本框中的文字，单击准备修改的文字，就会出现文本框，即可进行修改。

FrontPage2002提供了对图像进行旋转、翻转、修正对比度、调整亮度、黑白处理、图像弱化、突出效果、采样与还原等特效。


设置网页的背景色的方法选择要设置背景色的网页，打开“格式”菜

单，执行其中的“背景”命令，在随后出现的“网页属性”对话框中选择“前景”项，单击“背景”下拉列表框，选择一种颜色。如果想选择更为丰富的色彩，可在“背景”下拉列表中选择“更多颜色”，在屏幕窗口内采集颜色、定义新的色彩为网页的背景色。


设置图片为网页背景的方法：可以使用当前技术从局域网、Web 上获得的图片作为网

页的背景。如果图片尺寸比浏览窗口的尺寸小的话，它将重复铺满整个窗口。其设置步骤如下：

选择要设置背景色的网页，打开“格式”菜单，执行其中的“背景”命令，在随后出现的“网页属性”对话框内选择“背景”项。在“格式”栏中选择“背景图片”项，单击“浏览”按钮，选择图片的地址，单击“确定”按钮。

当图片尺寸较大时，可以选择“水印”。水印不随浏览器内的文本或其他内容一起移动，相反，当它们出现在浏览器的当前窗口时，水印图片将“浮”在网页上，只有文本在上下移动。


设置链接链接是网页中的动态部分，当鼠标指向它时会使箭头指针变为手形指针。作为链接的字体颜色与网页上其他描述文字不同，很容易辨认。当按下鼠标启动链接时，它可以带用户到相应的链接地址 URL 上。建立链接的方法和步骤如下：

将光标移动到要插入超链接的位置，单击工具栏中的“ Link”按钮，弹出图所示的对话框。在 URL 文本框中输入要链接的网页的 URL ，如果此网页在本地计算机上，可以单击 URL 文本框右侧的第二个按钮来浏览寻找它的存放位置并进行选择，单击“确定”按钮，就建立了超链接。


以上是建立超链接的一种方法，也可以先输入文字，然后拖动鼠标选定要建立超链接的文字，单击鼠标右键，在弹出的对话框中，选择其中的“超链接”将会弹出对话框，然后按照上述的第二步也可以建立超链接。

目标 (锚点 ) ：当用鼠标选中一个链接后，网页能够移动到当前网页或网络上的另一个网页上的某一位置，则此位置即为目标或锚点。使用目标可以在浏览网页时迅速翻动到想浏览的内容，节约了时间和精力。在当前网页内建立目标的步骤如下：

选定想定为目标的文字，在图中单击“目标框架”按钮，将弹出图所示的对话框。在其中输入指定目标的代号，将来在网页内建立链接时这个代号就是链接指向的地址，单击“确定”按钮。建立好目标后就实现了在网页内建立链接，这样就完成了在当前网页内建立目标，在网页中单击这个链接时它会跳到相应的目标位置。


使用表单应用 FrontPage2002创建表单很方便，其创建表单的方式有三种：表单模板、表单向导和自定义表单。


选定需要添加表单的网站，确定表单添加在第几页。选择“文件”菜单，打开其中的“新建”子菜单，执行“网页”命令，将弹出“新建”对话框，在“常规”选项框中，有 4 个表单模块：意见反馈表单、来宾手册、搜索网页和用户注册。选择其中的一个模板，就可以创建相应的表单了。比如说，如果选择了用户注册模板，就在该网页中创建注册表单，通过浏览窗口可以观察注册表单的效果，


使用表单向导：使用表单模板只能创建最简单的几种表单，而用表单向导就可以随心所欲地创建表单了，使用表单向导的方法如下：

打开一个空白网页，它就是所创建表单的载体。在主窗口中选择“文件”菜单，打开其中的“新建”子菜单，执行“网页”命令，弹出“新建”对话框，在“新建”对话框的“常规”文本框中选择“表单网页向导”命令，打开“表单网页向导”对话框 .


使用框架 FrontPage2002 能够使用框架把浏览器窗口分成

多个区域，每个区域可以说就是一个网页，这些区域之间一般有一定的联系，它们或者是并列关系或者是包含关系，使用框架能使网页之间的关系更明显，便于了解网页的结构。在设计时使用框架，也可以使自己的思路更清晰，使网页便于管理。

网页编辑工具简介

Documents