谈谈网页制作之网页布局

　　站长建议:网页有一个好的布局，会令网站访问者耳目一新，同样也可以使访问者比较容易在站点上找到他们所需要的信息，所以网页制作初学者应该对网页布局的相关知识有所了解。

　　网页布局类型

　　网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。

　　1、“国”字型:也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

　　2、拐角型:这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

　　3、标题正文型:这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

　　4、左右框架型:这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

　　5、上下框架型:与上面类似，区别仅仅在于是一种上下分为两页的框架。

　　6、综合框架型:上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

　　7、封面型:这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

　　8、Flash型:其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

　　9、变化型:即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

　　关于第一屏

　　所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢?其实这是未知的。一般来讲，在800*600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。

　　说了那么多，无非是一个标准的问题，其实接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。

　　有关导航栏的位置

　　导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，积于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单:如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。

　　什么样的布局是最好的

　　这是网页制作初学者可能会问的问题。其实这要具体情况具体分析的:比如如果内容非常多，就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选;Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，我只是想把这个留给读者了，因为，只有不断的变化才会提高，才会不断丰富我们的网页!

　　谈起网页的优化这个问题很多人都没有什么概念，有很多的业内人士都对网页优化一无所知或者知之甚少。说起对网页优化的理解，我曾经去各大搜索引擎上搜索过"网页优化"一类的话题，结果都是介绍如何优化搜索引擎排名的文章，其实这只是优化概念的一个组成部分，而网页的优化工作是由很多方面的优化组成的，作为一名优秀的网页优化工作人员必须具备多方面的知识，不仅仅要掌握网站设计制作技术(包括网站架构设计、网页设计以及制作页面编写代码等等);还要掌握很多计算机其他方面的知识(包括电子商务、人机交互、易用性和一些相关的软件知识等等);甚至需要掌握心理学、商业运作等相关知识。

　　我认为网页的优化应该是由两个方面组成的:1.技术优化，2.人文优化(这个分类只是我总结的，没有人给出过具体定义)。技术优化指的是代码的优化、目录结构的优化和针对搜索引擎的优化等等针对技术方面的优化工作，一般都是看不见摸不着的但是会给用户带来不少方便也会给网站带来更大的效益，技术优化有一定的模式而且需要优化的东西也比较固定相对简单一些只是时间问题;人文优化指的是交互性优化、易用性优化等等针对用户使用方面的优化工作，这一部分是网站用户看得见摸的着的东西，人文优化是最花经历最困难的因为我们要猜测使用者的心理。下面我就分别对这两个方面进行解释。

　　1.技术优化:

　　技术优化主要分为代码优化、目录结构优化和针对搜索引擎的优化三个部分。这一部分的优化工作主要是由网站开发人员测试提出方案完成的，而且有一定的规则，所以相对要简单一些只是时间问题。

　　(1)代码优化:

　　代码优化主要解决的问题就是页面浏览速度和适应性的问题。文字和图片是构成页面的两个主要因素，所以我们的优化也要从文字和图片开始。文字我们在制作页面的时候基本上都是定义好的一般使用宋体和12px，随着代码的标准化字体的样式大小等等的指定应该使用css样式表来完成，而现在被广泛应用的< h1 >< /h1 >、< font size=×× color=×× >< /font >等等标签都是不标准的，也会慢慢被css取代，现在很多大型的网站包括各个门户网站像是这样不标准的问题还是广泛存在几乎每个页面都会有，所以css样式表是我们在优化过程中应该注意检查的问题(其实这个问题应该是在页面制作的时候就解决的)。图片问题主要存在size过大的问题，在这里我们把图片的优化归在代码优化一部分一起介绍而不另分一类，是因为图片优化与代码内容优化的目的是一样的。网页中一般应用两种格式的图片jpeg和gif，这两种图片的应用很多人把握的并不是很好，jpeg适用于颜色比较多、构成比较复杂的图片(比如一些照片、渐变颜色等等)，gif适用于颜色比较少、构成比较简单的图片(比如网站的logo、大的色块构成的图片等等)。Gif图片尤其要注意导出的时候选择颜色数目这样也会达到很好的减小尺寸的效果。对于一些比较大的图片我们还可以将它切割成比较小的图片进行拼接这样也可以提高网页的下载速度。减小网页size提高网页下载速度还有一种简易的方法就是使用一些网页减肥的小工具，我们可以去下载一些这样的工具他们可以使你的网页缩小20%～50%达到事半功倍的效果。表格是页面最重要的排版方式，在浏览器读取网页代码的时候，必须读完一个完整的table才会显示出来，

　　如果一个大的table里边含有很多小的table那么浏览器会在读完整个大的table才将整个的内容显示出来。我们在浏览一些页面的时候经常会出现页面半天才会显示出来，最后是在等不及了按了"停止"按钮，页面一下子显示出来了，这就是在一些小的table外边嵌套了一个大的table，而小table已经读完了就是还没读完整个的table浏览器不会显示，这样会大大减慢页面浏览速度。因此我们要尽量减少表格层次，尽量避免将一些小的表格嵌套在大的表格中间。还应该注意的是在使用dreamweaver制作网页的时候经常会出现很多垃圾代码，注意检查删除一些没有用的代码。网页的适应性就是在不同系统、不同浏览器和不同分辨率的适应能力。要注意的是分辨率，应该最低照顾到800×600的用户(分辨率800×600的显示尺寸780×428、分辨率1024×768的显示尺寸1007×600)，所以页面最宽不要超过780，一定不要让用户横向拖页面。

　　如果一个大的table里边含有很多小的table那么浏览器会在读完整个大的table才将整个的内容显示出来。我们在浏览一些页面的时候经常会出现页面半天才会显示出来，最后是在等不及了按了"停止"按钮，页面一下子显示出来了，这就是在一些小的table外边嵌套了一个大的table，而小table已经读完了就是还没读完整个的table浏览器不会显示，这样会大大减慢页面浏览速度。因此我们要尽量减少表格层次，尽量避免将一些小的表格嵌套在大的表格中间。还应该注意的是在使用dreamweaver制作网页的时候经常会出现很多垃圾代码，注意检查删除一些没有用的代码。网页的适应性就是在不同系统、不同浏览器和不同分辨率的适应能力。要注意的是分辨率，应该最低照顾到800×600的用户(分辨率800×600的显示尺寸780×428、分辨率1024×768的显示尺寸1007×600)，所以页面最宽不要超过780，一定不要让用户横向拖页面。