1.5 网站开发流程

本节教学录像时间：10分钟

1.5.1 确定网站风格和布局

在对网页插入各种对象、修饰效果前，要先确定网页的总体风格和布局。网站风格是指网站给浏览者的整体形象，包括站点的CI（标志、色彩和字体）、版面布局、浏览方式、交互性、文字、内容及网站荣誉等诸多因素。

例如，网易的网站给人的感觉是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。

根据不同的网页风格，可以将网页分为商业网页和个人网页两种。商业网页内容丰富、信息量大，一般都有统一的布局设计。

个人网页风格多样、内容专一、形式灵活，更容易创造出美感。

常见的网页布局有“同”字型、“厂”字型、标题正文型、分栏型、封面型和Flash型等。

1．“同”字型

“同”字型是大型网站常用的页面布局，特点是内容丰富、链接多、信息量大。网页的上部分是徽标和导航栏，下部分为3列，两边区域是图片或文字链接和小图片广告，中间是网站的主要内容，最下面是版权信息等。

2．“厂”字型

“厂”字型布局的特点是内容清晰、一目了然，网页顶端是徽标和导航栏，左侧是文本和图片链接，右边是正文信息区。

3．标题正文型

标题正文型布局的特点是内容简单，网页上部是网站徽标和标题，下部是网页正文。

4．分栏型

分栏型布局一般分为左右（或上下）两栏或多栏。一栏是导航链接，一栏是正文信息。

5．封面型

封面型布局更接近于平面设计艺术，主要应用于首页上，一般为设计精美的图片或动画，多用于个人网页，如果处理得好，会给人带来赏心悦目的感觉。

6．Flash型

Flash型布局采用Flash技术完成，页面所表达的信息极富感染力，其视觉效果与听觉效果与传统页面不同，能给浏览者以很大的冲击。Flash网页很受年轻人的喜爱。

1.5.2 搜集、整理素材

确定了网站风格和布局后，就要开始搜集素材了。常言道：“巧妇难为无米之炊”，要让自己的网站有声有色、能吸引人，就要尽量搜集素材，包括文字、图片、音频、动画及视频等，搜集到的素材越充分，制作网站就越容易。素材既可以从图书、报刊、光盘及多媒体上得来，也可以从网上搜集，还可以自己制作，然后把搜集到的素材去粗取精，选出制作网页所需的素材。

1.5.3 规划站点、制作网页

规划站点就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。规划站点就是对站点中所使用的素材和资料进行管理和规划，对网站中栏目的设置、颜色的搭配、版面的设计、文字图片的运用等进行规划。

一般情况下，将站点中所用的图片和按钮等图形元素放在Images文件夹中，HTML文件放在根目录下，而动画和视频等放在Flash文件夹中。对站点中的素材进行详细的规划，便于日后管理。

制作网页是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序来制作。所谓先大后小，就是在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题能及时修改。

在网页排版时，要尽量保持网页风格的一致性，不至于在网页跳转时产生不协调的感觉。在制作网页时灵活地运用模板，可以大大地提高制作的效率。将相同版面的网页做成模板，基于此模板创建网页，以后想改变网页时，只需修改模板就可以了。

1.5.4 网站的测试与发布

网页制作完毕，应该利用上传工具将其发布到Internet上供大家浏览、观赏、使用。上传工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，可以很方便地把网站发布到所申请的网页服务器上。上传网站之前，要在浏览器中打开网站，逐一对站点中的网页进行测试，发现问题要及时修改，然后再上传。

高手支招

本节教学录像时间：5分钟

如何查看网页的HTML代码

要查看网页的HTML代码，可在当前网页上右击鼠标，如果是IE浏览器，则在弹出的菜单中选择“查看源文件”，如果是Firefox则在弹出菜单中选择“查看页面源文件”。这是了解HTML工作原理和学习他人实例的好方法，然而很多商业网站使用复杂的HTML代码，它们可能难以阅读和理解，但是不要气馁。

使用记事本编辑HTML文件后如何在浏览器中预览

很多初学者在保存文件时没有将HTML文件的扩展名．html或．htm作为文件的扩展名，导致文件还是以．txt为扩展名，因此，无法在浏览器中查看。如果读者通过单击右键创建记事本文件，在给文件重命名时，一定要以．html或．htm作为文件的扩展名。特别要注意当Windows系统的扩展名隐藏时，更容易出现这样的错误。读者可以在【文件夹选项】对话框中查看是否显示扩展名。

保存好看的网页

对于网页制作人员，当在上网冲浪的过程，遇到好看的网页，一定要将其保存起来。那么如何保存好看的网页呢？用户可以使用另存为下载方式保存好看的网页。

使用另存为下载方式保存网页的具体操作步骤如下。

步骤01 打开需要保存的网页。

步骤02 在浏览器中单击【设置】按钮，然后选择【文件】【另存为】菜单命令。

步骤03 随即打开【保存网页】对话框，在其中指定文件保存的位置，这里选择保存在【我的文档】文件夹下，在【文件名】文本框中输入文件的名称，单击【保存类型】下拉按钮，在弹出的下拉列表中选择【网页，全部（*.htm, html）】选项，单击【保存】按钮即可保存。