网页制作教程

网页制作教程

8.1.3(设计网站的常规步骤

通常设计网站需要以下6个步骤。

1(总体规划

进行网站的整体规划也就是组织网站的内容和设计其结构，以确保文件内容条理清楚、结构合理。首先要确定包括几张网页，每页信息是什么，多媒体信息如何编排，每页开几个窗口，页与页之间如何建立超链接等。

2(准备素材

根据规划准备各种有关的材料，例如文本、图像等。最好将这些材料制作成文本文件和图形文件(采用gif或jpg格式)备用。

3(创建站点与制作网页

使用网页编辑软件建立站点、制作网页。

4(浏览测试

当制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试。功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。

5(申请空间/发布

用户创建了网页之后，通常直接将其保存在硬盘上，但只有当整个站点上传到Web服务器，浏览者才能通过Internet上访问到站点中的网页。

(1)如果制作的网页是在本单位的Intranet上发布，则只需要系统管理员划出一块空间并允许存放Web站点的文件即可。

(2)如果制作的网页需要在Internet上发布，就需要选择一个合适的ISP，并租用适当的空间存放自己的网页。

6(维护/更新为了让网站具备持久的生命力，需要进行维护和更新。 8.1.4 FrontPage 2000的工作界面

1(FrontPage 2000的操作界面

FrontPage 2000的操作界面(见图8-4)与Office 2000的其他组件类似，只是它的编辑窗口有3个，通过选择不同的选项卡可以切换到普通窗口、HTML窗口和预览窗口。

(1)默认的视图方式是普通，在其中编辑网页时基本上可以达到”所见即所得”，这使

得即使不懂HTML的用户可以轻松制作出精美的网页。

(2)如果切换到HTML视图方式，就可以看到FrontPage编辑器自动生成的HTML 代

码。即使在普通视图方式下看到的空白网页，也会用一套简单的HTML代码来描述它。

在HTML视图方式下，可以直接输入HTML代码。

(3)预览视图方式实际上是用已安装的Internet Explorer浏览器来显示网页。

视图栏:有6个视编辑窗口图图标，选择不同的图标，可在各种视图中切换编辑窗口切换按钮

图8-4 FrontPage 2000的操作界面

2(FrontPage 2000的六种视图

在FrontPage 2000中可以用6种视图从不同的角度浏览网站。

(1)网页视图

单击视图栏中的“网页”图标，进入网页视图。它为站点的所有网页提供一种编辑环境，在网页视图下可以显示3种视图方式，其中普通视图是默认方式。

视图的左边是文件夹列表窗格，以树状结构的形式显示文件夹的层次列表。可以单击“视图”?“文件夹列表”隐藏文件夹列表窗格。

(2)文件夹视图

单击视图栏中的“文件夹”图标，进入文件夹视图。这种视图与资源管理器很相似，左侧列出了站点的树状结果，右侧列出了当前文件夹下的文件。用户可以方便地添加新的文件夹和网页。

在内容窗格中，显示具体文件信息内容的栏目有文件,文件夹的名称、标题、大小、类型、修改日期、修改者和注释。在默认情况下，右窗格按文件名的字母顺

序排列。用户只要单击右窗格相应的标题头，便可以按文件标题、大小、类型、最后修改日期、修改者以及注解排列。

(3)报表视图

单击视图栏中的“报表”图标，进入报表视图。报表视图为站点的设计者提供了一种站点总览的有效手段。对站点总览的项目包括所有文件、图片、各种超链接、组件错误、未完成的任务和未使用的主题等，可使站点的设计者对站点一目了然。

(4)导航视图

单击视图栏中的“导航”图标，进入导航视图。左边为文件夹列表。右边以树的方式显示导航的结构。

导航视图在新建Web站点时是最有用的，它不仅提供了Web站点结构的框图，而且还能自动为所有的页面创建导航栏。导航栏是页面中的一个区域，通过文本或图形的超链接与其他页面发生关联。在大型的Web中，要把所有的页面用一致和准确的风格连接起来是很困难的，但如果利用导航视图，创建Web站点就容易多了。

(5)超链接视图

单击视图栏中的“超链接”图标，进入超链接视图。左边是文件夹列表窗格，右边是超链接窗格，可视化显示了网页之间的超链接。FrontPage支持鼠标拖放操作。每当对文件和文件夹进行了移动或改名时，FrontPage会自动更新所有指向它们的超链接。

报表视图

文件夹视图

网页视图

导航视图

任务视图超链接视图

图8-5 FrontPage 2000的6种视图8.2 网页编辑

8.2.1 创建站点与网页

网站由若干个网页及相关文件集合而成，要建立和修改网页，首先要创建本地站点。网页又称为Web页，是网站的基本信息单位。图8-6为著名的电子商务网站―――“淘宝”的主页。

网页标题

网址

导航栏

表单

超级链接

图8-6 网页的构成

这里以建立个人站点为例，该站点包含4张网页:主页(index.htm)、个人信息(personal.htm)、个人相册(photo.htm)、站长调查(investigation.htm)。

1(网站的基本操作

(1)创建本地站点

,根据模板创建站点

单击“文件”?“新建”?“站点”，打开如图8-7所示的“新建”对话框。选中站点模板中的“只有一个网页的站点”图标，在“指定新站点的路径”文本框中输入新站点的位置，然后单击“确定”按钮。

本地站点即对应外存指定位置上的一个文件夹，系统自动生成两个子文件夹

_private和

images，用来存放不希望被别人看到的文件和网页中用到的图片文件，同时自动建立一个命名为new_page_1.htm的网页。

图8-7 “新建”站点对话框

,另外，可以选择图8-7中的“个人站点”或其他模板创建站点，如果选择“空站点”图标则需要自行添加网站中的所有网页。

(2)打开站点

单击“文件”?“打开站点”，在“打开站点”对话框(见图8-8)中找到站点所在文件夹或URL。单击“打开”按钮，站点中包括的所有网页均加载过来。