首页 > 优化技术 > 正文

网页设计中的内容架构：探讨网页构建的布局策略

a351910080 · 浏览 7 · 点赞 0 · 2天前

网页构建的版面设计有哪些

版面设计即是以最适宜浏览的顺序将图片与文字分布在页面的各个区域。各设计者会有各自独特的版面设计。网页版面设计包括以下几种常见格式：

1.“同”字形结构版面设计

所谓“同”字形即是指页面顶端为“网站标识+广告栏+主导航”或主导航，下方左侧为二级导航栏，右侧为链接导航栏，屏幕中央展示具体内容的布局。

这种版面设计的优点是充分运用版面，页面结构清晰，左右对称，主次分明，信息量大；缺点是页面显得拥挤，过于规整呆板，若细节色彩上缺乏变化调剂，很容易让人感到单调乏味。

2.“国”字形版面设计

这种版面设计的优点是充分运用版面，信息量大，与其他页面的链接切换方便，缺点是页面显得拥挤，四周封闭，让人感到压抑。

3.T字形版面设计

这是一个形象的说法，是指页面的顶端是“网站标识+广告栏”，左面是主导航，右面是主要内容。这种版面设计的优点是页面结构清晰、主次分明，是初学者最容易掌握的版面设计方法；缺点是页面显得呆板，如果不注意细节上的色彩，很容易让人“看之无味”。

4.“三”字形版面设计

这种版面设计多用于国外站点，国内使用较少。特点是在页面上有横向两条色块，将页面整体分割为两部分，色块中大多放置广告栏、更新和版权提示。

5.对比版面设计

顾名思义，这种版面设计采用左右或者上下对比的方式：一半深色，一半浅色。一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机地结合比较困难。

6.POP版面设计

POP源自广告术语，是指页面版面设计像一张宣传海报，一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种版面设计大部分出现在企业网站和个人主页，如果处理得好的话，会给人带来赏心悦目的感觉。

7.Flash版面设计

这种版面设计是指整个或大部分幅面的网页本身就是一个Flash动画，它本身就是动态的，画面一般不叫绚丽、有趣，是一种比较新潮的版面设计方式。其实这与封面型结构是类似的，只是这种类型才采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。不同性质的网站，其页面内容安排是不同的。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。下面简单说明：A、页面标题在站点的每一个页面中都有一个标题，用来提示页面的主要内容，这一信息将出现在浏览器的标题栏中，而不是在页面的版面设计中。它的重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。标题的加入在HTML语言中比较简单标题名称B、网站标识（LOGO）网站作为一个对外交流的重要窗口，创建者都会用来进行自身形象的宣传。如果该企业（社团）已经导入了CIS（CorporateIdentitySystem）形象识别系统，那么在网站建设过程中应依据该系统为指导进行网页设计，其中标志性图案就是网站的LOGO。一个成功的网站和创建者实体一样，有着独特的形象识别，在网站推广过程中将起到事半功倍的效果。如果还没有导入CIS，在网站建设之前应该根据网站的总体定位，设计制作一个网站的LOGO，这如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念。LOGO一般设置在主页面的显要位置，二级页面的页眉位置。C、页眉页眉指的是页面上端的部分，有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。页眉的注意力值较高，大多数网站制作者在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。D、页脚页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。E、导航导航是网页设计中的重要部分，也是整个WEB站点设计中的一个独立部分。一般来说，一个网站年的导航位置在每个页面中出现的位置是固定的。导行的位置对于站点的结构与整体布局有着举足轻重的作用。导航的位置一般有四种标准的显示位置：左侧、右侧、顶部和底部。有的站点运用了多种导航，是为了增加页面的可访问性。F、主体内容主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图像相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的上方位置，次要的内容安排在右下方。原发布者:menwai2018

电子商务网站的主页内容版面设计授课：花小琴常见的网页版面设计格式国字型版面设计——国字型版面设计由同字型版面设计进化而来，因布局结构与汉字国相似而得名。其页面的最上部分一般放置网站的标识和导航栏或横幅广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。常见的网页版面设计格式T型版面设计——T型版面设计结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标识或横幅广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。常见的网页版面设计格式标题正文型——标题正文型版面设计的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。常见的网页版面设计格式左右框架型版面设计——左右框架型版面设计结构是一些大型论坛和企业经常使用的一种版面设计结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容常见的网页版面设计格式上下框架型——上下框架型版面设计与前面的左右框架型版面设计类似。其区别仅在于是一种上下分为两页的框架。常见的网页版面设计格式综合框架型——综合框架型版面设计是结合左右框架型版面设计和上下框架型版面设计的页面版面设计技术常见的网页版面设计格式POP版面设计——POP版面设计是一种颇具艺术感和时尚感的网页版面设计方式。页面设计通常以一张精美的海报画面为版面设计的主体。常见的网页版面设计格式FLASH版面设计——FLASH版面设计是指网页页面以一个或多个Flash作为页面主体的学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？

电子商务网站的主页内容编排教学：花小琴讲解普遍的网页编排格局

国字型编排——国字型编排源自同字型编排，因其布局结构与汉字国形相似而得名。页面的顶部通常放置网站标识和导航栏或横幅广告，页面中央主要展示网站的核心内容，底部通常放置版权信息和联系方式等。

常见的网页编排格局T型编排——T型编排结构因与英文大写字母T相似而得名。页面的顶部一般放置横幅标识或横幅广告，下方左侧是导航栏菜单，下方右侧则用于展示网页正文等核心内容。

常见的网页编排格局标题正文型——标题正文型编排通常用于展示文章页面、新闻页面和一些注册页面等。

常见的网页编排格局左右框架型——左右框架型编排是一些大型论坛和企业常用的一种编排格局。其编排结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则展示网站的核心内容。

常见的网页编排格局上下框架型——上下框架型编排与前面的左右框架型编排类似。其区别仅在于是一种上下分为两页的框架。

常见的网页编排格局综合框架型——综合框架型编排是结合左右框架型编排和上下框架型编排的页面编排技术。

常见的网页编排格局POP编排——POP编排是一种富有艺术感和时尚感的网页编排方式。页面设计通常以一张精美的海报画面为主体。

常见的网页编排格局FLASH编排——FLASH编排是指网页页面以一个或多个FLASH作为页面主体的学习前端第一步：划分网页结构，网页结构的划分应遵循哪些原则，如何去划分网页的结构呢？

对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师提供给你一张设计图，你需要根据这张图制作出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么制作出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲，网页结构的划分需要遵循几个原则：

一、自上而下原则

因为浏览器在显示一个网页的顺序是自上而下的。这里提到了显示这一个词，所谓的显示就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下显示。

二、从左至右原则

在自上而下的同时，同一行的内容是从左至右显示，所以在划分结构的时候有从左至右的顺序。

三、一像素原则

这个原则对于初学者来说必须坚持，但也并不是说无论什么时候都得死守这个道理。前期我们在划分网页的时候一定要划分准确，尤其是横向。试想，如果外面的盒子宽度是1200像素，里面两个盒子一个600像素另一个601像素，加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。

在说完上述三个原则过后有些人就会一味地追求遵循这些原则，比如在划分结构的时候一定要分为上下部分，但是比如下面我截取这个网页的一部分，图片和文字其实是属于一个整体，文字是对图片的说明，所以就不应该分为上下，而应该水平方向划分，每一个图文作为一部分内容，水平分为四部分：

我们说一般网页有header（头部区）、banner（广告横幅区）、main（主体内容区）、footer（底部区），单页并非所有网页都是这样，有些网页没有banner但是初学者容易将header下面那一部分硬划分为banner，有些网页除了这几部分还会有比如icon等区域由喜欢将他们划分到main中去。

说到main区，这个结构划分就多种多样了。有些网页是有一个从左到右通栏的背景色甚至背景图片，这样我们结构的划分也应该有外层一个通栏的盒子，将背景色或者背景图给他，里面再嵌套一个inner盒，给可视区域的固定宽度并居中。如果没有通栏的背景那么这个时候是不需要给通栏的盒子，直接main区给固定宽度居中就好了。

那么在结构划分的时候有些盒子区域之间的空隙怎么去划分这也是初学者最容易犯难的问题。其实严格意义来讲这些空白在结构划分的时候并不会造成影响，因为空白区域在都可以用代码来实现。不过一些文字区域你不能贴着文字的上下来划分，因为文字都是自带行高的。

另外，有些地方可能会有一部分小图片或者一部分内容覆盖在外面大盒子上，这部分在划分结构的时候可以不用管，因为后期在代码实现的时候我们可以利用定位技术实现。

如何设计网页

网页设计——根据企业希望向浏览者传达的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。

网页设计常用的工具包括AI、PS、FL、FW、DW等。

网页，是网站中的任何一页面，通常是HTML（是标准通用标记语言下的一个应用）格式（文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等）。网页通常用图像档来提供图画，网页要使用网页浏览器来阅读。

网页，系网站中任意一页，通常为HTML（通用标记语言标准下的应用）格式（文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等）。网页常用图像文件呈现图画，需借助网页浏览器进行阅读。

在网页设计观念上，许多人似乎仍旧停留在网页制作层面。他们认为，只要熟练运用网页制作软件，便可以做好网页设计。

实则网页设计是感性思考与理性分析相结合的复杂过程，其方向取决于设计目标，其实现依赖于网页制作。正所谓“功夫在诗外”，网页设计中最为关键的因素，并非软件的应用，而是在我们对网页设计的理解以及设计制作的水平上，在于我们自身的美感以及对页面的掌控。

首先，我们要明确网页设计的任务。

一、设计目标

设计是一种审美活动，成功的设计作品往往充满艺术气息。但艺术仅是设计的手段，而非目标。设计的目标是实现设计者的意图，而非创造美。

网页设计的任务，是指设计者要表达的主题和要实现的功能。站点的性质不同，设计目标也不同。从形式上，可以将站点分为以下三类。

第一类是资讯类站点，如新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量信息，且访问量较大。因此需注意页面的划分、结构的合理性、页面的优化、界面的亲和力等问题。

第二类是资讯与形象相结合的网站，如一些大型公司、国内高校等。这类网站在设计上要求较高，既要满足资讯类网站的要求，又要突出企业、单位的形象。然而就现状来看，这类网站存在粗制滥造的问题。

第三类则是形象类网站，如一些中小型公司或单位。这类网站一般规模较小，有的仅有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美术水平要求较高。

当然，这只是从整体上进行分析，具体情况还需具体分析。不同的站点还需区别对待。别忘了最重要的一点，那就是客户的需求，它也属于设计目标。

明确了设计目标之后，接下来要考虑的就是如何实现这个目标了。

二、设计实施

设计的实施可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成。第二部分为网页的制作，这一过程是在计算机上完成的。

设计首页的第一步是设计版面布局。我们可以将网页看作传统的报刊杂志来编辑，其中包含文字、图像乃至动画，我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。

除了要有一台配置不错的计算机外，软件也是必需的。不能简单地说一个软件的好坏，只要是设计者使用起来觉得方便而且得心应手，就可以称为好软件。当然，它应该能满足设计者的需求。笔者常用的软件是Macromedia的Dreamweaver、Fireworks、Flash以及Adobe的Photoshop、ImageReady，这些都是很不错的软件。

接下来我们要做的就是通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver里完成的。虽然在草图上，我们定出了页面的大体轮廓，但是灵感一般都出现在制作过程中。设计作品一定要有创意，这是最基本的要求，没有创意的设计是失败的。在制作过程中，我们会遇到许多问题，其中最敏感的莫过于页面的颜色。

四、造型的搭配

在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一个元素。抛开是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同搭配与构造整个页面的。

通常我们可以使用的搭配手法有秩序、比例、平衡、对称、连续、间隔、重叠、反复、交叉、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应根据具体情况，选择最适合的表现手法，这样有利于主题的表现。

通过点、线、面的搭配，可以突出页面上的重要元素，突出设计的主题，增强美感，让观者在感受美的过程中领会设计的主题，从而实现设计目标。

造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，而且能将网页上的各种元素有机的组织起来，它甚至还可以引导观者的视线。

三、色彩的运用

色彩是一种奇妙的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。

我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其它的色彩都可以用这三种色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们作品更贴近现实。

色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅、舒适的气氛。蓝色和白色混合，能体现柔顺、

绿色与金黄、浅白搭配，能营造出优雅、宜人的氛围。蓝白相间，则能展现出柔美、清雅、浪漫的情调。红黄金三色的搭配，能够营造出喜庆的气氛。而金色与栗色的搭配，则会让人感到温馨。设计任务不同，配色方案亦有所不同。考虑到网页的适应性，应尽量使用网页安全色。

然而，颜色的运用并非有固定法则，若强行套用某种法则，效果往往适得其反。在实践中，我们可先确定一种能体现主题的主色调，然后根据具体需求，运用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应形成一个整体，以达到和谐、悦目的视觉效果。

五、设计原则

设计有其原则，无论采用何种手法对画面元素进行组合，都应遵循五大原则：统一、连贯、分割、对比及和谐。

统一，是指设计作品的整体性和一致性。设计作品的整体效果至关重要，在设计中切勿将各部分孤立分散，以免画面显得杂乱无章。

连贯，是指注意页面之间的相互关系。设计中应利用各部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使页面各部分融洽无间，犹如一气呵成。

分割，是指将页面分成若干小块，小块之间具有视觉上的差异，以便观者一目了然。在信息量较多的情况下，为使观者能够看清楚，就要注意将画面进行有效的分割。分割不仅是表现形式的需要，从另一个角度来讲，分割也可以被视为对页面内容的一种分类归纳。

对比，是通过矛盾和冲突，使设计更具活力。对比手法多样，如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比时，应谨慎行事，避免对比过强而破坏美感，影响统一。

和谐，是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将失去“生命感”，也无法实现视觉设计的传达功能。和谐不仅要看结构形式，还要看作品所形成的视觉效果能否与人的视觉感受形成沟通，产生心灵的共鸣。这是设计能否成功的关键。

六、网页优化

在网页设计中，网页优化是一个重要的环节。其成功与否会影响页面的浏览速度和适应性，进而影响观者对网站的印象。

在资讯类网站中，文字是页面中最大的构成元素，因此字体的优化显得尤为重要。使用CSS样式表指定文字样式是必要的，通常我们将字体指定为宋体，大小指定为12px，颜色要视背景色而定，原则上以能看清且与整个页面搭配和谐为准。在白色背景上，我们一般使用黑色，这样不易产生视觉疲劳，能保证浏览者较长时间地浏览网页。

图片是网页中的重要元素。图片的优化可以在保证浏览质量的前提下将其尺寸降至最低，这样可以成倍地提高网页的下载速度。利用Photoshop6或Fireworks4可以将图片切成小块，分别进行优化。输出的格式可以为gif或jpeg，具体取决于具体情况。一般我们将颜色变化复杂的小块优化为jpeg，而将颜色单一的小块优化为gif，这是由这两种格式的特点决定的。

表格(table)是页面中的重要元素，是页面排版的主要手段。我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为0，以此来定位页面中的元素，或者借此确定页面中各元素的相对位置。我们知道：浏览器在读取网页HTML原代码时，是读完整个table才将其显示出来的。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等待多时无结果，按“停止”按钮却一下显示出页面就是这个原因。因此，我们在设计页面表格时，应尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要少。在使用Dreamweaver制作网页时，会自动在每一个td内添加一个空字符“”。如果单元格内没有填充其他元素，这个空字符会保留，在指定td的宽度或高度后，可以在源代码内将其删除。

网页的适应性非常重要，在不同的系统、分辨率和浏览器上，我们将会看到不同的结果，因此设计时要统筹考虑。一般我们在800600分辨率下制作网页，最佳浏览效果也是在800600分辨率下，在其他情况下只要保证基本一致，不出现较大问题即可。

总之，本文旨在为网页设计者提供一些有益的建议，希望他们在设计网页时能从整体出发，无愧于“设计”这两个字。顺便说一下，本文仅代表本人个人观点，仅供参考。

对于网页的框架与定位，这个很难说得清楚，这要看你在做网站时对网站的规划，不能一概而论。如果你没有这方面的经验，就多在网上看看别人是如何设计的，这非常有用，可以把他们给抓下来，做个图库，方便自己设计。

其实看看一些设计精良的网页，会对自己有很大的帮助，把别人的网页下载下来，再用相关的软件进行分析，可以学到许多东西，这是一种快速的学习方法，但决不是COPY。

我认为首要的是突出主题。一个好的网站（个人的只能算做网页）最首要的是突出你的主题，在别人搜索或访问时首先就看有没有自己所需要的内容，要么就直奔主题。然后再在主题鲜明的基础上做好框架。

首先便需考察是否包含所需资料，否则便直接切入正题。随后，在主题突出的前提下，精心构建框架设计。一个优质的网站应具备清晰的层次，合理的布局，使得浏览者一目了然，迅速把握您所要传达的核心思想，以及如何迅速定位所需信息。解决这两个关键问题后，再对细节进行精雕细琢，便能打造出令人心旷神怡的网站。