网页框架网页框架 网页框架网页框架 1 分栏式结构分栏式结构2 区域编排区域编排 3 非规律框架设计非规律框架设计 网页框架网页框架 1 分栏式结构分栏式结构 1.1 框架的分类 根据目前网页设计现况，以及在网络上能呈现的设计条件，可以把网页框架归类为三大类：分栏式结构、区域排版和非规律的页面排版 分栏式结构和区域排版是两种较常见的基本构架形式，在商业网页设计方面有较广泛的应用，同时也是非商业网页设计构架的首选 网页框架网页框架 非规律的页面排版，主要是指无框架页面设计(见图1)以及多变化Flash新媒体设计(见图2)由于这两种排版形式变化多，不好把握，而且个性化极强(见图3)，没有规律，因而通称为非规律的页面排版 网页框架网页框架 图1 无框架页面设计( X ) 网页框架网页框架 三类框架结构各有特色，分别适用于不同信息类型的网站运用得当，蓬荜生辉其中分栏式结构是运用最为广泛的页面结构，它适用于门户、商业、个人等不同信息类别的网站设计分栏式结构应用最为普遍，也是网页设计发展的最初形态。
我们可以从分栏式结构着手了解网页框架 网页框架网页框架 图2 多变化Flash新媒体设计 网页框架网页框架 图3 德国WM Team公司站点 网页框架网页框架 1.2 分栏式结构 分栏式结构是最常见的网页框架，也可以称为竖分栏这是一种超过一屏半，把页面从上到下分割为几列构架的设计结构，类似于新浪()的页面骨架设计(见图4) 网页框架网页框架 图4 分栏式框架结构 网页框架网页框架 分栏式结构是竖长方形页面的框架 图4所示的新浪网骨架结构，从上到下被分成两列，我们称之为二分栏结构最常见的分栏式骨架结构，还有如L的三分栏(见图5)，以及国外常见的四分栏式结构(见图6)另外还有较为特殊的通栏(见图7)和五分栏(见图8、图9) 所谓通栏，顾名思义，从上到下一通到底，也可以称为一栏这种结构一般用于显示信息内容、注册信息页面等，是竖分栏式骨架结构的特殊情况 网页框架网页框架 图5 L三分栏框架结构 网页框架网页框架 图6 最典型的四分栏框架结构 网页框架网页框架 图7 通栏·注册信息页面 网页框架网页框架 竖分栏数越多，列宽越窄，一行排列的文字越少，显得过于拥挤，不易于阅读。
根据屏幕分辨率、字号和每行字数等具体情况分析，五分栏结构已经是最大分栏数了五分栏设计本身已经很特殊，网络上非常少见图8所示是笔者曾设计的标准五分栏框架的页面由于方块汉字略大于西方字母，因而中文网站能使用五分栏结构的情况更加少了 网页框架网页框架 图8 标准五分栏·H 网页框架网页框架 图9 五分栏·韩国短信商业站点 网页框架网页框架 1.3 分栏式结构的变化 在新浪网二分栏框架的解析图(图10)上，我们可以清楚地看到右列被分成了多个小的区域，这些利用列宽而划分出的多个小区域，可以配合网站内容放置不同的信息和功能区并且能灵活地处理页面元素，以活跃页面气氛 网页框架网页框架 图10 形式可爱的二分栏页面设计 网页框架网页框架 在竖分栏内增加多个小分区的方式，可以使分栏式结构产生多种变化形式，打破分栏式的死板架构，加强了分栏式结构的应变能力 根据常见的分栏式布局，我们绘制了一张简单变化结构图(见图11)Ⅰ和Ⅱ以二分栏作为基础结构其中，Ⅱ是Logo和导航处在页面下方的情况，这种结构也是很普遍的，可以选用Frame制作。
二分栏结构一般是左窄右宽，导航居左，底色加重表示强调也有的情况是右窄左宽，导航居右，但非主流 网页框架网页框架 图11 分栏布局情况 网页框架网页框架 Ⅲ是以三分栏作为基础结构的三分栏属于开放式结构，给人的感觉十分大气，适用于门户和流量大的网站常规内容设置是：导航横排在页面上部，左右两栏为功能区和附加信息区中栏为主要信息显示区和重要资料显示区根据信息源，将中栏进行一些小分栏变化，以确立网站特色色彩分布则主要是左右两栏色彩深一些，而中栏为白色等常见情况 网页框架网页框架 图12 Y 网页框架网页框架 Ⅳ中的前两个是四分栏的结构框架，后两个是五分栏的结构框架 四分栏式结构会使得页面相对很拥挤，给人一种网站的信息量很大的感觉信息储备少的站点采用这种框架，可以在视觉感观上调整信息量少的不足 由于英文字比中文方块汉字占用空间小，因而四分栏在国外比较多见作为突破性的设计，应该有一些尝试，也许会发现它的妙用之处如果细心观察，你会注意到在变化了的二分栏或三分栏骨架中会出现小的四分栏式结构图13、图14和图15展示了三种不同的分栏结构。
网页框架网页框架 图13 右栏宽式三分栏骨架 网页框架网页框架 图14 四分栏结构设计 网页框架网页框架 图15 韩国的Web.st内嵌五分栏式结构骨架设计 网页框架网页框架 图11中的Ⅴ是一些特殊的分栏结构 在人们都选用开放式的分栏结构的同时，往往又需要在相同的框架结构中设计出不同效果来，以致于看起来“四不像”的框架结构越来越多栏宽窄不同，底色不同，小区域划分不同，位置不同，排列组合后可以衍生出无穷无尽的变化，给网站带来无穷的魅力和新的生命力 图16所示的网页结构，是在通栏里内嵌小二分栏，使得页面色彩鲜明，极活泼又大气 网页框架网页框架 图17是典型的二分栏，但是却没有明显的界限，导航区和信息区自然分割为两栏，使页面既简洁大方、色彩搭配合理，又不失独特的风韵 图18是别致的三分栏式结构骨架的页面设计信息量少却运用了开放型的三分栏骨架，利用背景颜色、图案互补，把文字留白区填充完整，使页面既不显得空荡，反而更显特色 网页框架网页框架 分栏式结构的页面容易过长，过长的页面载入非常慢，从而失去分栏式的优越性。
为了不给访客带来太大的麻烦，应尽量保证页面的长度在两屏到三屏为佳 笔者在图11中绘制的网页框架是普通而有限的看过更多优秀的网页结构后，你将会有一个全新的思路和方向骨架的设计好像生物圈的物种突变，为了寻找与众不同的设计风格，很多特殊的页面结构纷纷诞生在这些特殊的页面结构中，有一部分页面既属于分栏式结构也属于区域排版结构 网页框架网页框架 图16 多变化分栏式骨架设计 网页框架网页框架 图17 简洁的二分栏结构骨架设计 网页框架网页框架 图18 别致的三分栏骨架设计 网页框架网页框架 2 区域区域 编编 排排 利用辅助线、插图、色彩把网页平面分为几个规则的或不规则的区域，形成类似图19所示的网页框架，这种网页框架笼统称为区块分布式结构，也叫做区域编排式结构设计横向割断分栏式结构，就可以变成区域排版，所以也可以称区域排版为分栏结构的变异 网页框架网页框架 图19 区域编排结构的网站 网页框架网页框架 区域编排的结构灵活，变化多，通常可利用颜色、线条、文字的断口或插图的变换等手段来划分区域划分出来的区域的大小、形式都可以自行定义，格局则变化莫测。
图20中，四个网站抓图均是标准的区域编排框架此类框架适合于信息量小，信息源有规律的网站区域编排不适用于门户开放式站点和信息交错紧密的站点；比较适用于企业站点和产品单一的电子商务类站点，以及对页面要求较高、信息流通量小的专业性信息站点 网页框架网页框架 图21为没有明显的分栏结构它表面看似杂乱，实际上却是用很规则的方块来编排页面信息的动静结合的页面，鬼魅而血腥，给我们带来摇滚乐最直接的震撼 图22为小巧的Flash站点，区域分割比例恰到好处，大方轻快虽使用了明确的区域划分，却没有局限作品的风格，作品中依然体现出更多的时尚感和数码感由此看来，采用区域排版的页面伸缩性很好，适用于更广泛的不同信息类型的网站形式图23显示的是一种十分具有特色的区域编排结构类站点 网页框架网页框架 图24中的页面使用了插图、色彩作为分割的界限，艺术味道十足，是韩国十分有名的艺术网站 很少见到如图25中页面插图跨越了几个分割区域的情况插图的运用使得页面显得更具有张力感和空间感，开阔大气 图26中的页面较长，信息量很大，插图位置明显，难以忽略。
新闻区的长度不够，则在页面内使用滚动条，解决了页面空间问题，同时能够快速、便捷地查找短期过往新闻 网页框架网页框架 小区域信息区疏密得当，给人的感觉是大气，条理清晰其实，国内的门户站点，也应该有一些突破，完全可以效仿这个站，尝试使用区域排版的网页框架，依旧可以设计开放式页面，给人耳目一新的感觉 网页框架网页框架 图20 标准区域分布的骨架结构 网页框架网页框架 图21 浓烈的气息，精彩的摇滚站点 网页框架网页框架 图22 既属于分栏式结构又属于区域编排式结构 网页框架网页框架 图23 特色的区域编排结构类站点(一) 网页框架网页框架 图24 特色的区域编排结构类站点(二) 网页框架网页框架 图25 特色的区域编排结构类站点(三) 网页框架网页框架 图26 特色的区域编排结构类站点(四) 网页框架网页框架 总体来说，分栏式和区域编排没有严格的界限只要能设计出风格独特的网页，就是好的框架在进行设计时，不要给自己太多的条条框框和先入为主的思想，它们会妨碍思路的开阔和创意的展开 图27中的两个页面，一个是无变化的分栏式骨架结构，一个是无分割的区域排版骨架结构，两种最典型的骨架结构，各有其妙用之处。
浏览过那么多精致的页面后，对比这两个页面设计，或多或少有一些返璞归真的感觉 网页框架网页框架 图27 竖四分栏的分栏式结构骨架和横四分栏区域编排 网页框架网页框架 3 非规律框架设计非规律框架设计 3.1 非规律框架设计 分栏式结构和区域编排以外的网页框架归属为一类，即非规律框架非规律框架设计真的没有规律吗？也不尽然非规律框架按整体效果可先分为动态网页和静态网页 网页框架网页框架 其中，静态网页主要有以下三种情况：第一类：由无框架式的整张图片分割生成的网页第二类：横向页面很长，有些怪异的网页第三类：整个信息区很小的袖珍型网站 网页框架网页框架 3.2 静态页面设计第一类 如果把静态的网页设计归为平面设计的一种，则应把网页当作平面出版物创意设计，信息与背景画面融为一体，没有清晰的界限区分，导航、信息区等属于网页本身的特征设计好的网页图片采取分割整张图片生成网页的形式去制作此种情况就是非规律框架的静态网页第一类，如图28所示 网页框架网页框架 如图29所示，页面中文字信息较多，但也可以使用静态页面设计。
页面分左右两部分，左部是图片，右部是文字和超链接，导航置顶这是一个享誉国际的工作室主页 如图30所示，蓝色虎牙属于典型的信息量少、个性化强的个人主页大面积的插图、小面积的文字、图片式导航条，确定了活泼俏皮的个人风格此站属于个人主页的典范 网页框架网页框架 如图31所示的网页设计，在高雅的淡色背景上，搭配小面积的插图，而将文字信息集中在一起，导航和条目信息分居两旁，有张有弛，视觉效果不亚于图28中的黑色背景的网页 网页框架网页框架 图28 S 网页框架网页框架 图29 P 网页框架网页框架 图30 蓝色虎牙·H 网页框架网页框架 图31 INFRONT 网页框架网页框架 3.3 静态页面设计第二类 图32中的非主流的网页设计即是非规律静态网页第二类 通常在设计分栏式或区域排版风格的网页时，设计师们十分介意浏览器出现横向滚动条一方面只带一个滚动键的鼠标不能滚动横向页面，在鼠标操作上多有不便；另一方面，在商业类或门户类站点中出现滚动条，是十分不美观的出现此类情况，人们会认为是设计师或制作者由于粗心而造成的制作疏漏，有点大煞风景的味道。
网页框架网页框架 图32 横向滚动加长页面 网页框架网页框架 一旦横向能够滚动两屏或两屏以上(如图33所示)，特殊怪异的个性美就展现出来了信息平铺到该页，无所谓导航的概念，其内页信息都是以弹出窗口的形式连接横向滚动的同时，好似观看一场展览沿着墙壁一路过去，滋味别样 网页框架网页框架 图33 横向滚动加长页面 网页框架网页框架 3.4 静态页面设计第三类 袖珍型的页面设计，同样适用于信息量少的网站 商业网站也可以设计得很高雅，只是可选择的框架并不多而个人主页五花八门，甚至一些小信息的网站，设计起来只占整个浏览器页面的一个小块区域，内页信息也只展示在这小小的区域内，再有特殊的信息就只好使用弹出式窗口或展开新页了如系列图34～36所示，是韩国某插画家的个人网站整个站点仅有一个风格不变的立体长方形区域 网页框架网页框架 图34 韩国插画站首页 网页框架网页框架 图35 韩国插画站内页(一) 网页框架网页框架 图36 韩国插画站内页(二) 网页框架网页框架 日韩这类风格的站点很多，大概是他们偏爱这类可爱而小巧精致的设计吧。
例如图37和38中，把整个网站放在一个小的电视机中，形象生动，使人过目不忘 通过袖珍型的设计模式，也可以设计出多种不同风格的网站来比如图39中的网站就给人以幽雅、怀旧和神秘的感觉黑色的背景呼应白色曲线的字符，有点欧洲古典的味道 这种框架结构也可以用做商业、企业站点，如图40所示，方框和长边线在视觉上传达出一种严谨、沉稳的信任感灰色与红色的搭配也起到了类似的作用 网页框架网页框架 图37 日本站点channel*924325 首页 网页框架网页框架 图38 日本站点channel*924325 内页 网页框架网页框架 图39 网页框架网页框架 图40 hi-type 网页框架网页框架 3.5 多变化Flash网页设计 动态的Flash网页设计，通常表现出互动感、时代感和科技感它为网络设计开辟了新的领域和篇章随着网络带宽的加大，电脑技术的普及，广大Flash网页设计也会有更宽广的用途和发展 网页框架网页框架 动态的形式无法用框架把握在以上的所有网页结构里，都可以嵌套局部的Flash，或利用Flash制作。
一个完全由Flash制作的网站大多不外乎两种情况： 一种是静止后的页面，类似分栏式或区域排版结构如图41所示，假设我们不知道它是利用Flash制作的，最后的静止页面就是三分栏框架了 另一种情况是根本没有边际可寻，完全是一个动画场景或整张图的视觉效果图42所示的站点风格就是Flash网页的主流设计风格 网页框架网页框架 以下列出几个较好的Flash技术站点，供大家学习Flash时参考查阅： Kit()：国际最著名flashkit，资源较多，教学、代码全面 ultrashock( 网页框架网页框架 Wh论 坛 (http://www.were- 国 际 著 名Flash论坛，聚齐国际知名闪客 闪客帝国()：业内新闻、动态排行、技术支持等 闪客吧()：Flash相关软件全面，选这里下载最好 闪客天空()：源代码非常多，便于下载学习 网页框架网页框架 图41 Flash制作的网页 网页框架网页框架 图42 Flash制作的网页 网页框架网页框架 网页框架类似素描的稿线，如果“形”打得不准，是不能成就好的作品的。
设计师们要进一步提高对这个环节的重视程度网页框架是网页设计的基础，与众不同的网页作品是由这一步开始的。