1
新编大学计算机基础
1.11.7 9.7 网页制作简介

9.7 网页制作简介

互联网上的网页是采用标记语言HTML来编写。我们可通过任何纯文本编辑器,遵从HTML的规则建立Web页面的源文件。Web页面的源文件是ASCII代码文件,其扩展名是.html或.htm。一个网页制作好后,就可以将它发布到网上供人们浏览,当然,你必须取得网络管理人员的同意。现在互联网上有很多网站都可以申请免费空间。

一般Web页面由头部和主体两部分构成,而头部和主体是夹在<HTML>和</HTML>的两个标记之间的。这也即是说,一个Web页面总是以<HTML>标记开头,而以</HTML>标记结束。Web页的头部又放在<HEAD>和</HEAD>两个标记之间,主体部分则位于<BODY> 和</BODY>标记之间。由此我们大致也能看出,HTML中的标记大多成对出现,其格式为:

<标记>要处理的正文文本</标记>

其中的“标记”为一些英文字母,不区分大小写。“标记”内还可嵌套其他标记。下面是一个用HTML编写的简单的Web页面文件,图9.7.1是在IE中浏览该页面时的结果。

img331

img332

img333


图9.7.1 用IE浏览页面的结果

实际上,我们可以不去记那些繁琐的标记符号,因为目前已经有很多网页制作工具可以所见即所得地制作网页。下面介绍几种:

1.Frontpage 2000

FrontPage 2000被集成到Office 2000中,因此,在使用FrontPage 2000创建或编辑Web页面时,不但可利用其自身的强大功能,而且还可与Office 2000的其他软件相结合,借助其他几个软件的优点,协调统一工作。

(1)FrontPage 2000的特点

1)两种编辑方式自由选择。一方面,FrontPage 2000具有所见即所得的网页编辑功能:与Word 2000和Excel 2000一样,使用FrontPage 2000可以图形化方式创建或编辑Web页面,几乎可实现所有的HTML的功能,使工作变得非常方便;另一方面,FrontPage2000还提供了HTML编辑方式,可直接对网页的HTML源代码进行处理。

2)管理功能强大。一方面,它可以方便的创建、导入、复制、删除或发布一个Web站点;另一方面,它还可对Web站点内部的内容进行管理,主要体现在文件夹管理、报表管理、超链接管理、导航管理和任务管理几方面。

3)丰富的辅助功能。FrontPage 2000具有很大的辅助功能,自带大量的图片库,它可以帮助开发人员实现一些比较难以实现的功能,比如Web站点中的搜索表单的创建等。

4)轻松使用Web数据库。FrontPage 2000集成了Web数据库发布功能,可通过ASP文件直接使用数据库,可直接访问ODBC数据库(如Access数据库)等。

(2)FrontPage 2000的窗口组成

启动FrontPage 2000中文版之后,其界面如图9.7.2所示。其中的标题栏、菜单栏和工具栏与Office2000其他软件的用法相似,而视图栏与主编辑窗口则有不同。

img334


图9.7.2 Front Page2000中文版界面

1)视图栏

通过“视图”菜单下的“视图栏”菜单项可打开或关闭视图栏。视图栏中排列的是各种管理器的图标,共有六个,可通过单击视图栏管理器图标进行切换,也可单击“视图”菜单下对应菜单项进行切换。

●网页。该管理器对应网页视图,在此视图下,可以对网页进行编辑、修改。

●文件夹。对应文件夹视图,在此视图下,可对站点中的文件与文件夹进行管理,比如删除、复制、移动或新建文件及文件夹等。

●报表。对应报表视图,在此视图下可查看站点的各种情况。

●导航。对应导航视图,可实现对站点中各页面的层次关系进行管理。

●超链接。对应超链接视图,用于对站点中网页的超链接进行管理,包括网页中导航条的超链接、网页中文字与图形的超链接以及网页中用到的各处资源文件的超链接等。

●任务。对应任务视图,可方便站点管理人员对站点进行维护,比如更新网页,检查站点等。

2)主编辑窗口

通过点击主编辑窗口下的标签,可以选择两种编辑方式

●普通窗口。使用方法与Microsoft Word 2000相似。

●html窗口。采用html标记语言来制作网页。

●预览窗口。相当于用浏览器来观察所制作的网页。在该窗口中不能够编辑网页。

(3)FrontPage 2000文档的基本操作

1)新建一个Web页

启动FrontPage 2000后,它会自动建立一个新的Web页new_page_1.htm。若启动FrontPage 2000之后,还要新建其他Web页,有如下两种方式:一种是快速建立新的空白Web页,通过单击“常用”工具栏的“新建网页”按钮或按快捷键“Ctrl+N”即可完成;另一种是根据模板新建Web页,通过“文件”菜单下的“新建”命令来实现。

2)打开一个Web页

打开一个已经存在的Web页文档,与打开Word文档相似,单击“常用”工具栏的“打开”按钮,或按快捷键“Ctrl+O”或单击“文件”菜单中的“打开”菜单项,弹出“打开文件”对话框,找到所需的文件再打开。

3)保存Web页

保存一个Web页文档,有以下两种常见情况:

●保存新建Web页文档

单击“常用”工具栏的“保存”按钮或按快捷键“Ctrl+S”或单击“文件”菜单下的“保存文件”菜单项,将弹出如图9.7.3所示的“另存为”对话框。对话框中要注意的是在“保存类型”下拉列表框中一般采用默认类型“Web页”,其扩展名为.htm、.htm l、.shtm l等,除此之外,FrontPage2000还可将文档保存为另外四种,分别是:FrontPage模板文件(.tem)、Active Server Pages文件(.asp)、超文本模板文件(.htt)、超文本样式文件(.css)。另外,在如图9.7.3的对话框中标题框的区域内,单击“更改”按钮可以更改网页的标题。网页的标题将显示在浏览器的标题栏。

img335


图9.7.3 “另存为”对话框

●保存已打开的原有文档

img336 按原名保存:单击“常用”工具栏的“保存”按钮,或按快捷键“Ctrl+S”,或单击“文件”菜单下的“保存文件”菜单项。

img337 换名保存:单击“文件”菜单下的“另存为”菜单项,弹出文件“另存为”对话框,这时可选择文档另外保存的位置与名称等。

4)关闭Web页

关闭一个Web页文件,可通过“文件”菜单下的“关闭”菜单项,也可通过按快捷键“Ctrl+F4”,或者单击主编辑窗口右上角的关闭按钮。此时如果文件做了改动而未保存过,则弹出提示是否保存文件的对话框。若选择“是”按钮,则保存当前文档,处理过程和上面保存Web页文档相同;若选择“否”按钮,则关闭该文档而不保存;若选择“取消”,则不关闭文档而返回原编辑状态。如果在关闭FrontPage2000时,有文档做改动而未保存过,也将出现以上对话框进行提示。

2.网页三剑客

网页三剑客指的是Macromedia公司的Dreamweaver、Fireworks、Flash,而这三种工具的功能侧重点又各不相同。

与Frontpage相类似,Dreamweaver是一款所见即所得的网页编辑工具,但其功能更强大,常常为专业网页制作人员所采用。Dreamweaver是一个很酷的网页设计软件,它包括可视化编辑、HTML代码编辑的软件包,并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性,而且它还能通过拖拽从头到尾制作动态的HTML动画,支持动态HTML的设计,使得页面没有动态插件也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。另外,Dreamweaver还采用了Roundtrip HTML技术,这项技术使得网页在Dreamweaver和HTML代码编辑器之间进行自由转换,HTML句法及结构不变。这样,专业设计者可以在不改变原有编辑习惯的同时,充分享受到可视化编辑带来的益处。Dreamweaver最具挑战性和生命力的是它的开放式设计,这项设计使任何人都可以轻易扩展它的功能。

Fireworks则是Macromedia公司发布的第一款彻底为Web制作者们设计的软件,它的出现使Web作图发生了革命性的变化。Fireworks是专为网络图像设计而开发,可直接从扫描设备获取图像、切割大图像、优化图像、创建图形按钮、批处理生成缩略图、制作GIF动画等。它还内含丰富的支持网络出版功能,比如Fireworks能够自动切图、生成鼠标动态感应的JavaScript。而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。它增强了与Dreamweaver的联系,可以直接生成Dreamweaver的库,甚至能够导出为配合CSS式样的网页及图片!

Flash代表了Macromedia公司开发的Flash动画技术,它是基于矢量的图形和动画发布的优秀解决方案。Flash是用在互联网上动态的、可互动的冲击波。它的优点是体积小,可边下载边播放,这样就避免了用户长时间的等待。Flash可以用其生成动画,还可在网页中加入声音。这样你就能生成多媒体的图形和界面,而使文件的体积很小。Flash虽然不可以像一门语言一样进行编程,但用其内置的语句并结合JavaScript,您也可做出互动性很强的主页来。

3.Adobe GoLive

Adobe GoLive含有设计、制作和管理动态网站的所有工具,比如精确布置页面元素的各式各样的页面排版工具包括排版网格、表格和浮动块。360Code特性可以使您全面地控制最终的页面编码,以及智能地将外来的和非标准的代码保留在页面中而不做改变。使用动态链接则可以轻松控制前端内容和超级电子商务与动态发布数据库的连接。Adobe GoLive支持SVG、Flash、Adobe PDF、CSS、DHTML和XML 1.0规范。与网页三剑客一样,在GoLive中,同样可借助Adobe公司自己的Photoshop、Illustrator和LiveMotion等产品对网页进行出色的控制。