使用UltraEdit制作网页进阶教程之实战篇

本文章主要介绍使用UltraEdit制作“UltraEdit官网下载页面首页”的普通样式网页，无动作设计。旨在帮助你更好的去体会网页制作带来的实感。

一、制作前准备

如图1是将要仿制的网页样式。

图1：UltraEdit官网下载页面首页

首先新建一个文件夹，把要用到的图片都存放在里面。

然后打开UltraEdit新建一个文件，并保存到刚才新建的文件夹里，命名格式为“.html”结尾的文件（主要用于写入框架代码）。再次新建文件保存，命名格式为“.css”结尾的文件（主要用于写入样式代码）。

图2：文件准备

最后准备PS软件，用于电脑桌面像素的获取，以此得到网页各内容确切的像素位置，使用其它具备此功能的软件也可以。

以上便是制作网页前的准备事项。

二、网页页面分析

如图3，该网页页面主要有三个区域，我们可以用三个窗体来实现，然后每个窗体里面又有一些小的窗体或者文字内容，制作时再细分。

图3：页面分解

大致可以归纳为图4的框架。

图4：框架分析

三、代码实现

首先在“.html”文件中写入三个主要的窗体代码，并相应命名。

图5：三个主要窗体代码

然后在每个窗体中又分别加入一些小窗体，以及将要用到的文字和图片，不用管实际网页中的排面，先把这些要显示的内容全加上，注意分好区域，在相应的区域添加。

图6：主要框架代码

此时打开浏览器可以得到如图7的效果。

图7：基础显示

最后就是调整这些内容的显示位置，美化排面，这个步骤主要在“.css”文件中完成。

因为在“.html”文件中已经对每个窗体、框架进行命名，此时在“.css”中直接操作这些名称对应的窗体或文字就可以了，样式的修改调用“样式编辑器”来完成。主要修改的内容包括颜色、字体样式、显示位置等。如图8是最终制作的完整CSS代码。

图8：完整CSS代码

最后打开浏览器查看效果，虽然是粗仿，但样式已经体现（只体现这一页，下划之后的内容未制作）。

图9：最终完成的网页

在制作网页时的两个关键之处是框架结构预设以及HTML代码和CSS代码的分离。前者能够让我们后续的制作富有条理，避免出现返回修改代码时结构有过大的变动；后者让代码的书写与阅读更容易，保证效率的同时避免代码量过多分不清各代码区间。

以上便是使用UltraEdit制作网页的一个实例演示，实践往往比理论来得深刻，自己动手做一做吧！

在熟知UltraEdit各功能的情况下，制作网页还是很方便的，当然UltraEdit不仅仅只能制作网页，它还能完成很多其它的任务。