网页规划结构有哪些 (网页规划结构是什么)

本文目录导航：

• 网页规划结构有哪些？
• 网页成果图的网页规划分类
• 网页制造的结构规划有哪些？

网页规划结构有哪些？

一、简介：规划就是以最适宜阅读的方式将图片和文字排放在页面的不同位置。

不同的制造者会有不同的规划设计。

二、网页规划有以下几种经常出现结构：

【1】“国字”型规划：

“国”字型规划由“同”字型规划退化而来，因规划结构与汉字“国”相似而得名。

其页面的最上局部普通搁置网站的标记和导航栏或Banner广告，页面两边关键搁置网站的关键内容，最下局部普通搁置网站的版权消息和咨询方式等。

【2】T型规划

T型规划结构因与英文大写字母T相似而得名。

其页面的顶部普通搁置横网站的标记或Banner广告，下方左侧是导航栏菜单，下方右侧则用于搁置网页注释等关键内容。

【3】题目注释型

题目注释型规划的规划结构普通用于显示文章页面、资讯页面和一些注册页面等。

【4】左右框架型规划

左右框架型规划结构是一些大型论坛和企业经常经常使用的一种规划结构。

其规划结构关键分为左右两侧的页面。

左侧普通关键为导航栏链接，右侧则搁置网站的关键内容 .

【5】高低框架型

高低框架型规划与前面的左右框架型规划相似。

其区别仅在于是一种高低分为两页的框架。

【6】综合框架型

综合框架型规划是联合左右框架型规划和高低框架型规划的页面规划技术。

【7】POP规划

POP规划是一种颇具艺术感和时兴感的网页规划方式。

页面设计理论以一张精巧的海报画面为规划的主体。

【7】FLASH规划

FLASH规划是指网页页面以一个或多个Flash作为页面主体的规划方式。

在这种规划中，大局部甚至整个页面都是Flash。

网页成果图的网页规划分类

网页规划大抵可分为：骨骼型、满版型、宰割型、对称型、歪斜型、焦点型、三角型、自在型。

上方区分论述。

详例请参照图片册。

（1）骨骼型形容：网页中骨骼型是一种规范、谨严的宰割方式，也是最为普通和最为经常出现的一种方式，相似报刊的版式。

经常出现的网页骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。

理论以竖向分栏居多。

这种版式给人以谐和、理性的美。

（2）满版形容：满版型页面以图像充溢整版。

关键以图像为诉求点，可将局部文字置于图像之上。

视觉传播成果直观而突出。

给人以生动慷慨人觉得。

满版型版式被各种网站所驳回，以学校、文娱、体育、艺术、儿童以及共性化网页，其中以韩国网站居多。

（3）宰割型形容：宰割型版式指把整个页面分红高低或左右两局部，区分布置图片或文字内容。

两局部构成对比，使图片局部理性而具表现力，文字局部则理性而具压服力。

可以调整图片和文字所占的面积比例，来调理对比强弱。

假设图片比例过大，文字字体过于轻微，段落蓬松，会形成视觉心思的不平衡，显得僵硬。

（4）中轴或对称型形容：中轴型版式是将图片和文字沿阅读器窗口的两边轴心位置作水平或垂直方向陈列的一种设计方式。

沿中轴水平方向陈列的页面可以给人稳固、安静、婉转的觉得，沿中轴垂直方向陈列的页面可以给人以酣畅的觉得。

驳回这种版式设计的网页比拟适宜做网站的首页。

（5）焦点型形容：焦点型的网页版式经过对阅读者眼帘人诱导，可以使页面发生剧烈的视觉成果，如汇聚感或收缩感等。

核心焦点型是将图片或文字置于页面的视觉核心。

向心焦点型是视觉元素疏导阅读者人眼帘向页面核心靠拢。

离心焦点型是视觉元素疏导阅读者的眼帘向外辐射。

焦点型版式为各类网站经常使用，以体育、文娱、动画网站为多。

（6）歪斜或曲线型形容：歪斜型页面主题笼统或多幅图片、文字作歪斜编排，构成不稳固感或剧烈的动感，有目共睹。

此类网站版式为各类网站所驳回。

曲线型网站图片、文字在页面上作曲线的宰割或编排构成，发生韵律与节拍。

此类网站版式为各类网站所驳回。

（7）三角型形容：三角型版式是指见面各视觉元素呈三角形或多角形陈列。

正三角形最具稳固性，倒三角形则可发生动感。

侧三角形构成一种平衡版式，既安宁又有动感。

三角形版式为各类网站所驳回。

（8）自在型形容：自在型版式人页面具备沉闷、轻快人气氛。

自在型版式也可运行于多种网站。

如网络、文娱、体育、团体、商务等。

以上引见的版式基本类型并不是固定不变的，在实践设计中，设计师可以依据网页所要传播的主题内容来灵敏地变动版式。

在设计前要仔细剖析网站的定位，在设计中要灵敏掌握版式结构，能力更好地到达设计目标。

网页制造的结构规划有哪些？

规划就是以最适宜阅读的方式将图片和文字排放在页面的不同位置。

不同的制造者会有不同的规划设计。

网页规划有以下几种经常出现结构：

1.“同”字型结构规划

所谓同字型就够就是指页面顶部为“网站标记+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕两边显示详细内容的规划。

这种规划的好处是充沛应用版面，页面结构明晰，左右堆成，主次清楚，消息量大；缺陷是页面拥堵，太规矩呆板，假设细节色调上缺少变动调剂，很容易让人感到干燥不足。

2.“国”字型规划

“国”字型规划是在“同”字型规划基础演出化而来的，在保管“同”字型的同时，在页面的下方参与一横条状的菜单或广告，是一些大型网站所青睐的类型。

普通最上方是网站题目及横幅广告条，接上去就是网站的关键内容，左右分列一些两小条内容，两边是关键局部，与左右一同列举究竟，最上方是网站的一些基本消息、咨询方式、版权申明等。

这种结构是在网上见到的最多的一种结构类型。

这种规划的好处是充沛应用版面，消息量大，与其余页面的链接切换繁难，缺陷是页面拥堵，四面敞开，令人感到憋气。

3.T型规划

这是一个笼统的说法，是指页面的顶部是“网站标记+广告条”，左面是主菜单，左面是关键内容。

这种规划的好处是页面结构明晰、主次清楚，是初学者最容易上手的规划方法；缺陷是页面呆板，假设不留意细节上的色调，很容易让人“看之无味”。

4.“三”字型规划

这种规划多用于国外站点，国际用得不多。

特点是在页面上有横向两条色块，将页面全体宰割为但局部，色块中大多放广告条、降级和版权揭示。

5.对比规划

望文生义，这种规划驳回左右或许高低对比的方式：一半深色，一半淡色。

普通用于设计型站点。

好处是视觉冲击力强；缺陷是将两局部无机地联合比拟艰巨。

规划

POP引自广告术语，是指页面规划像一张宣传海报，逐一张精巧的图片作为页面的设计核心。

这种类型基本上是出如今一些网站的首页，大局部为一些精巧的平面设计联合一些小的动画，放上几个繁难的链接或许仅是一个“进入”的链接，甚至间接在首页的图片上做链接而没有任何揭示。

这种规划大局部出如今企业网站和团体主页，假设解决得好的话，会给人带来赏心顺眼的觉得。

规划

这种规划是指整个或大局部幅面的网页自身就是一个Flash动画，它自身就是灵活的，画面普通不叫缤纷、幽默，是一种比拟新潮的规划方式。其实这与封面型结构是相似的，只是这种类型才驳回了目前十分盛行的Flash，与封面型不同的是，由于Flash弱小的配置，页面所表白的消息更丰盛，其视觉成果及听觉成果假设解决切当，绝不差于传统的多媒体。不异性质的网站，其页面内容布置是不同的。普通网页的基本内容包含题目、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。上方繁难说明：A、页面题目在站点的没一个页面中都有一个题目，用来揭示页面的关键内容，着一消息将出如今阅读器的题目栏中，而不是在页面的规划中。它的关键作用就是疏导访问者清楚地阅读网站的各项内容，不至于迷失方向。题目标参与在HTML言语中比拟繁难B、网站标识（LOGO）网站作为一个对外交换的关键窗口，创立者都会用来启动自身笼统的宣传。假设该企业（社团）曾经导入了CIS（CorporateIdentitySystem）笼统识别系统，那么在网站树立环节中应依据该系统为指点启动网页设计，其中标记性图案就是网站的LOGO。一个成功的网站和创立者实体一样，有着共同的笼统识别，在网站推行环节中将起到事倍功半的成果。假设还没有导入CIS，在网站树立之前应该依据网站的总体定位，设计制造一个网站的LOGO，这似乎一个产品的商标，集中表现了该网站的特征、内容及其外在的文明外延和理念。LOGO普通设置在主页面的显要位置，二级页面的页眉位置。C、页眉页眉指的是页面上端的局部，有的页面划分比拟显著，有的页面没有明白的区分或许没有页眉。页眉的留意力值较高，大少数网站制造者在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。D、页脚页脚是页面底端局部，理论用来显示站点所属公司（社团）的称号、地址、版权消息、电子信箱的超衔接等。E、导航导航是网页设计中的关键局部,也是整个WEB站点设计中的一个独立局部。普通来说，一个网站年的导航位置在每个页面中发生的位置是固定的。导行的位置关于站点的结构与全体规划有着无足轻重的作用。导航的位置普通有四种规范的显示位置：左侧、右侧、顶部和底部。有的站点运用了多种导航，是为了参与页面的可访问性。F、主体内容主体内容是页面设计的主体元素。它普通是二级衔接内容的题目，或许是内容提要，或许是内容的局部摘录。表现手法普通是文字和图象相联合。它的规划理论按内容的分类启动分栏布置。页面的留意力值普通是依照从上到下、从左到右的顺序陈列，所以关键的内容普通布置在页面的做上位置，无所谓的内容布置在右下方。原颁布者:menwai2018

电子商务网站的主页内容规划授课：花小琴经常出现的网页规划结构国字型规划——国字型规划由同字型规划退化而来，因规划结构与汉字国相似而得名。

其页面的最上局部普通搁置网站的标记和导航栏或Banner广告，页面两边关键搁置网站的关键内容，最下局部普通搁置网站的版权消息和咨询方式等。

经常出现的网页规划结构T型规划——T型规划结构因与英文大写字母T相似而得名。

其页面的顶部普通搁置横网站的标记或Banner广告，下方左侧是导航栏菜单，下方右侧则用于搁置网页注释等关键内容。

经常出现的网页规划结构题目注释型——题目注释型规划的规划结构普通用于显示文章页面、资讯页面和一些注册页面等。

经常出现的网页规划结构左右框架型规划——左右框架型规划结构是一些大型论坛和企业经常经常使用的一种规划结构。

其规划结构关键分为左右两侧的页面。

左侧普通关键为导航栏链接，右侧则搁置网站的关键内容经常出现的网页规划结构高低框架型——高低框架型规划与前面的左右框架型规划相似。

其区别仅在于是一种高低分为两页的框架。

经常出现的网页规划结构综合框架型——综合框架型规划是联合左右框架型规划和高低框架型规划的页面规划技术经常出现的网页规划结构POP规划——POP规划是一种颇具艺术感和时兴感的网页规划方式。

页面设计理论以一张精巧的海报画面为规划的主体。

经常出现的网页规划结构FLASH规划——FLASH规划是指网页页面以一个或多个Flash作为页面主体的学习前端第一步：划分网页结构，网页的结构的划分应该遵照哪些准则，如何去划分网页的结构呢？

关于一个前端初学者，第一步就是要学会如何划分一个网页的结构。

当设计师给到你一张设计图，你须要依据这张图做出一个合乎规范的页面，这里所说的规范，即w3c规范，参考w3school在线教程。

那么做出一个完整的合乎规范的网页第一步就是要划分网页的结构。

普通来讲，网页结构的划分须要遵照几个准则：

一、自上而下准则

由于阅读器在渲染一个网页的顺序是自上而下的。

这里提到了渲染这一个词，所谓的渲染就是阅读器将代码转换为页面显示内容的环节。

阅读器会自上而下读取你写的代码并自上而下的显示。

二、从左至右准则

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

三、一像素准则

这个准则关于初学者来说肯定保持，但也并不是说无论什么时刻都得死认这个情理。

前期咱们在划分网页的时刻肯定要划分准确，尤其是横向。

试想，假设外面的盒子宽度是1200像素，外面两个盒子一个600像素另一个601像素，加起来超越了父级的宽度那么肯定第二个盒子会换到下一前启动显示。

在说完上述三个准则事先有些人就会一味地谋求遵照这些准则，比如在划分结构的时刻肯定要分为高低局部，然而比如上方我截取这个网页的一局部，图片和文字其实是属于一个全体，文字是对图片的说明，所以就不应该分为高低，而应该水平方向划分，每一个图文作为一局部内容，水平分为四局部：

咱们说普通网页有header（头部区）、banner（广告横幅区）、main（主体内容区）、footer（底部区），单页并非一切网页都是这样，有些网页没有banner然而初学者容易将header上方那一局部硬划分为banner，有些网页除了这几局部还会有比如icon等区域由青睐将他们划分到main中去。

说到main区，这个结构划分就多种多样了。

有些网页是有一个从左到右通栏的背风景甚至背景图片，这样咱们结构的划分也应该有外层一个通栏的盒子，将背风景或许背景图给他，外面再嵌套一个inner盒，给可视区域的固定宽度并居中。

假设没有通栏的背景那么这个时刻是不须要给通栏的盒子，间接main区给固定宽度居中就好了。

那么在结构划分的时刻有些盒子区域之间的空隙怎样去划分这也是初学者最容易犯难的疑问。

其实严厉意义来讲这些空白在结构划分的时刻并不会形成影响，由于空白区域在都可以用代码来成功。

不过一些文字区域你不能贴着文字的上上去划分，由于文字都是自带行高的。

另外，有些中央或许会有一局部小图片或许一局部内容笼罩在外面大盒子上，这局部在划分结构的时刻可以不用管，由于前期在代码成功的时刻咱们可以应用定位技术成功。