网页制作的结构布局有哪些?
1.“通”字型的结构布局
所谓字体一样就够了,是指页面顶部是“网站logo+广告栏+主菜单”或主菜单,左下方是二级栏,右侧是链接栏,具体内容的布局显示在屏幕中间。
这种布局的优点是充分利用版面,页面结构清晰,左右堆叠,主次分明,信息量大;缺点是页面拥挤,过于死板。如果在细节和色彩上缺乏变化和调整,很容易感觉单调。
2.“国”字型布局
“国”字型的布局是从“通”字型的布局演变而来的。在保留“通”字体的同时,在页面底部增加一个横向菜单或广告,这是一些大型网站比较喜欢的类型。一般最上面是网站标题和横幅广告,其次是网站主要内容。左右两个小块的内容,中间是主体部分,和左右并列,最下面是网站的一些基本信息,联系方式,版权声明。这种结构是互联网上看到的最常见的结构类型。
这种布局的好处是充分利用布局,信息量大,方便与其他页面切换链接。缺点是页面拥挤,四面封闭,让人有窒息感。
3.t形布局
这是一个很形象的说法,意思是页面顶部是“网站logo+广告栏”,左侧是主菜单,右侧是主要内容。这种布局的好处是页面结构清晰,优先级明确,对于初学者来说是最简单的布局方式。缺点是页面沉闷。如果不注意细节中的色彩,很容易让人“看起来很无趣”。
4.“三”字型布局
这种布局在国外站点多采用,国内不多。特点是页面上有两个横向色块,把整个页面分成几个部分,色块大部分放广告栏、更新和版权提示。
对比布局
顾名思义,这种布局采用的是左右或上下对比的方式:半暗半明。一般用于面向设计的网站。优点是视觉冲击力强;缺点是很难将两部分有机结合起来。
6.流行布局
POP引用自广告语,意思是页面布局就像一张海报,一张一张美丽的图片就是页面的设计中心。这种类型基本上出现在一些网站的首页,大部分都是精致的平面设计结合一些小动画,放几个简单的链接或者只是一个“进入”链接,甚至直接在首页的图片上做链接,没有任何提示。这种布局大多出现在企业网站和个人主页上,如果处理得好,会给人带来赏心悦目的感觉。
7.Flash布局
这种布局意味着整个或者大部分网页本身就是Flash动画,本身就是动态的。画面一般不会华丽有趣,是比较新潮的布局方式。其实这和封面结构差不多,只是这种类型采用了目前非常流行的闪光灯。与封面结构不同的是,由于Flash的强大功能,页面所表达的信息更加丰富,如果处理得当,其视觉和听觉效果并不比传统多媒体差。不同的网站有不同的页面内容安排。一般网页的基本内容包括标题、LOGO、页眉、页脚、主要内容、广告栏等。下面简单解释一下:a、页面标题在站点的每个页面中都有一个标题,用来提示页面的主要内容,在浏览器的标题栏会出现一条消息,而不是在页面的布局中。它的重要作用是引导访问者清晰地浏览网站内容,不迷失方向。在HTML语言中添加标题相对简单。
标题名称B、网站LOGO作为对外交流的重要窗口,创始人会用它来宣传自己的形象。如果企业(协会)已经导入了CIS(CorporateIdentitySystem)形象识别系统,那么在网站建设过程中,网站设计就应该基于这个系统,其中的标志性图案就是网站的LOGO。一个成功的网站,就像方正实体一样,有独特的形象识别,在网站推广的过程中会事半功倍。如果还没有引入CIS,那么一个网站的LOGO应该是在网站建设之前,根据网站的整体定位来设计制作的,它就像是一个产品的商标,体现了网站的特色、内容和内在的文化内涵和理念。LOGO一般设置在主页面的显著位置和二级页面的页眉位置。c .页眉页眉是指页面的上半部分。有的页面分的很清楚,有的页面没有明显区分或者没有页眉。头部的关注值高。大多数网站制作者设置网站目的、宣传口号、广告语言等。在这里,而其他人把它设计成出租的广告位。d .页脚页脚是页面的底部,通常用于显示网站所属公司(社区)的名称、地址、版权信息、电子邮件地址的超链接。导航是网页设计的重要组成部分,也是整个网站设计的独立部分。一般来说,一个网站年的导航位置是固定在每个页面中的。指南的位置在网站的结构和整体布局中起着重要的作用。导航位置通常有四个标准显示位置:左、右、上和下。一些网站使用各种导航来增加页面的可访问性。f .主要内容主要内容是页面设计的主要元素。一般是二级链接内容的标题,或者是内容的摘要,或者是内容的部分摘录。表现手法一般是文字和图像的结合。它的布局通常根据内容的分类按列排列。页面的关注值一般是从上到下、从左到右排列的,所以重要内容一般排列在页面的上方位置,次要内容排列在右下方。原发布者:menwai2018电子商务网站首页内容布局教学:华孝琴常见的网页布局结构——中文字体布局由同一字体布局演变而来,因布局结构与汉字国家相似而得名。网站的logo和导航栏或Banner广告一般放在页面的顶部,网站的主要内容主要放在页面的中间,网站的版权信息和联系方式一般放在底部。t形布局,一种常见的网页布局结构,因与英文大写字母t相似而得名,一般横向网站的logo或Banner广告放在页面顶部,导航栏菜单在左下方,网页正文等主要内容在右下方。网页常见的布局结构是标题文字型——标题文字型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面。常见的网页布局结构——左右框架布局结构是一些大型论坛和企业经常使用的一种布局结构。其版面结构主要分为左右两页。左边一般主要是一个导航栏链接,右边是网站的主要内容。常见的页面布局结构是上下框架——上下框架布局类似于之前的左右框架布局。唯一不同的是,它是一个分为两页的框架。常见的网页布局结构综合框架——综合框架布局是一种常见的网页布局结构POP布局,结合了左右框架布局和上下框架布局的页面布局技术。Pop布局是一种艺术化、时尚化的网页布局方式。页面设计通常以一幅精美的海报图片作为版面的主体。常见的网页布局结构Flash布局——FLASH布局是指以一个或多个FLASH页面为主体学习网页前端的第一步:划分网页结构,网页结构的划分应该遵循哪些原则,网页结构如何划分?
对于一个前端初学者来说,第一步就是要学会如何划分一个网页的结构。当设计师给你一张设计图,你需要根据这张图做一个标准页面。这里说的标准,即w3c标准,指的是w3school在线教程。那么制作一个完整的标准网页的第一步就是划分网页的结构。一般来说,网页结构的划分需要遵循几个原则:
首先,自上而下的原则
因为浏览器以自上而下的顺序呈现网页。这里提到了渲染这个词。所谓渲染,就是浏览器将代码转化为页面显示内容的过程。浏览器会从上到下读取你的代码,从上到下显示。
第二,从左到右的原则
同时同一行的内容是从左到右呈现的,所以划分结构时有从左到右的顺序。
第三,一个像素的原理
这个原则对于初学者来说是必须要坚持的,但并不意味着你要一直坚持下去。前期一定要对网页进行准确的划分,尤其是横向划分。想象一下,如果外方框的宽度是1200像素,而里面两个方框之和是600像素,另一个是601像素,超过了父方框的宽度,那么下一行必然会显示第二个方框。
讲了以上三个原则,有些人就会盲目的去遵循这些原则。比如在划分结构的时候,一定要把它们分成上下两部分。但是举个例子,我在下面截取了这个网页的一部分。图片和文字其实是属于一个整体的,文字是对图片的描述,所以不应该分为上下两部分,而应该横向划分。作为内容的一部分,每张图片和文字横向分为四个部分:
我们说一般的网页包括页眉(页眉区)、横幅区(广告横幅区)、main(主要内容区)和footer(底部区)。不是一个页面上的所有网页都是这样的。有些网页没有横幅,但初学者可以很容易地将页眉下面的部分划分成横幅。除了这些部分,一些网页还会有图标等区域将它们划分成主。
说到主要领域,这种结构划分是多种多样的。有些网页从左到右都有一个背景色甚至背景图,那么我们的结构师也要有一个带栏的外盒,给他背景色或者背景图,里面嵌套一个内盒,给可视区域固定宽度,居中。如果没有banner的背景,那么这个时候就不需要给banner的框了,把主体区域居中固定宽度就可以了。
那么在划分结构的时候如何划分一些盒子区域之间的空隙也是初学者最头疼的问题。其实严格来说,这些空白是不会影响结构划分的,因为空白区域现在已经可以用代码实现了。但是有些文字区域是不能按照文字的上下来划分的,因为文字有自己的行高。
另外,有些地方可能会有一些小图片或者一些内容覆盖在外面的大盒子上,在划分结构的时候可以忽略,因为我们可以在代码实现的时候用定位技术在后面实现。