Web端视觉】一般的网页布局是怎样的?

2020-04-14 11:52发布

4条回答
那些年很冒险的梦。
2楼 · 2020-04-14 12:48

经过前期的网站策划,确定网站主题和用户群、形象策划、制作规划等方面的内容之后,就要开始进行网页页面的布局了。首先是页面尺寸要紧跟时下流行的分辨率尺寸,因为页面尺寸和显示器大小及分辨率有关。其次是整体造型,一般可先画出网页的整体设计,确定了布局方案之后进行制作。再次是页眉和页脚,页眉一般用于定义页面的主题,一个网站的名称和标志(Logo)大多数都是显示在这里;页脚和页眉相呼应,一般放置设计者或公司组织的其他信息。最后是文本、图片以及多媒体。文本、图片是网页的两大构成元素,缺一不可,如何处理好两者的位置是整个页面布局的关键。除了文本和图片,声音、视频、动画等多媒体也是扮演越来越重要的角色。

tiffany
3楼 · 2020-04-14 14:36

网页布局一般有七个步骤 如下:
1.页面尺寸:页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下的页面范围就变得越来越小。一般,分辨率在1024×768的情况下,页面的显示尺寸为1007×600;分辨率在800×600的情况下,页面的显示尺寸为780×428个象素;分辨率在640×480的情况下,页面的显示尺寸则为620×311个象素。从以上数据可以看出,分辨率越高页面尺寸越

大。浏览器的工具栏也是影响页面尺寸的原因,目前的浏览器的工具栏都可以取消或者增加,那么当显示全部的工具栏和关闭全部工具栏时,页面的尺寸是不一样的。
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。要提醒家。除非能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么最好能在上面做上页面内部连接,以方便访者浏览。
2.整体造型:什么是造型,造型就是创造出来的物体形象。页7a686964616fe78988e69d8331333337626165面的整体形象,应该是一个整体,图形与文本的接合应该层叠有序,有机统一。虽然,显示器和浏览器都是矩形,但对于页面的造型,可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。
对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,注意到很多ICP和政府网页都是以矩形为整体造型;圆形代表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形则代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是结合多个形状加以设计,其中又以某种形状为主。
3.页头:页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将涉及到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。
4.文本:文本在页面中多数以“行”或者“块”(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚:页脚和页头相呼应。页头是放置站点主题的地方,而页脚则是放置制作者或者公司信息的地方。能看到,许多此类信息都是放置在页脚的。
6.图片:图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而布局思维也将体现在这里。
7.多媒体:除了文本和图片,还有声音,动画,视频等等其它媒体。虽然不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也变得更重要起来。

王可夫斯基
4楼 · 2020-04-23 16:40

1. T形布局

这个是我们比较常见的布局,其页面的顶部一般放置横网站的标志或Banner广告,下方左侧是导航栏菜单,下方右侧则用于放置网页正文等主要内容。


2. 三栏型布局

国字型布局下最上面是网站的标题以及横幅广告条,接下来是网站的主要内寄,左右分列一些小条内容,中问是主要部分,与左右一起罗列到底,最下方是网站的一些基本信息、联系方式、版权声明等

3. POP布局

POP布局指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点。优点显而易见:漂亮吸引人。缺点就是速度慢。人大的主页就类似这种布局。

4.左右布局型

顾名思义,就是网页主体分为左右两大块,多见为后台管理系统页面。一般左右布局型的页面需要做到两列等高。

5. 上下布局型

参见苹果的官网,类似于整屏显示的网页都为上下布局。


孙哈哈
5楼 · 2020-05-22 10:46

一般网页布局都是竖直结构,流式布局,从上往下编写,方便滚轮上下滑动

相关问题推荐

  • 回答 4
    已采纳

    一:块元素块元素在很多浏览器中,都是显示占据一行,并且排斥其他元素和其他元素在同一行,在浏览器中,块元素出现的形状是矩形,并且盛放其他元素。例如有div,和h1~h6,p,hr,ol,ul。这些标签应该都不是很陌生,其中,和标签是块标签,并且独立占据一行...

  • 回答 4

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

  • 回答 9

    CSS和CSS3都是样式,CSS3是在CSS上新增了样式属性。 CSS3新增特性CSS3圆角边框:border-radius(解决了原有圆角边框需要截图的问题)CSS3文本阴影与盒阴影:text-shadow、box-shadow(可以用于实现标签边框或阴影)CSS3背景尺寸、背景切割和背景原点:backgr...

  • 回答 6

    相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类选择器、伪元素选择器

  • 回答 9

           1.   !important    在属性后面写上这条样式,会覆盖掉页面上任何位置定义的元素的样式。  2.   行内样式,在style属性里面写的样式。  3.  id选择器  4. class选择器  5. 标签选择器    6. 通配符选择器*  7. 浏览器的自...

  • 回答 9

    ID选择器:#header {}类选择器:.header {}元素选择器:div {}子选择器:ul > li {}后代选择器:div p {}伪类选择器:a:hover {}属性选择器:input[type=text] {}

  • 回答 7

    a:link 没有访问之前a标签的样式a:visited 已访问a标签的样式a:hover a标签鼠标移上的样式a:actived a标签鼠标按下的样式input:focus input表单元素获取焦点input:blur input表单元素失去焦点

  • 回答 1

    基于SVG实现简单时钟效果前端绘图目前浏览器端绘制图形有2种主流方式:SVG和Canvas。相对于Canvas的更加底层的绘图API,SVG是一种声明式的,更可读、易于理解、方便交换。提到前端绘图,事实上有多种技术可以选择,除了SVG和Canvas,还可以基于javascript操作...

  • 回答 5

    是有一定难度的,自己平常要需要多加努力。因为你对计算机相关知识和概念都不太了解,在某些东西的接受可能相对会慢一些。

  • 回答 1

    从入门级选手到专业级选手都在做的——爬虫用 Python 写爬虫的教程网上一抓一大把,据我所知很多初学 Python 的人都是使用它编写爬虫程序。小到抓取一个小黄图网站,大到一个互联网公司的商业应用。通过 Python 入门爬虫比较简单易学,不需要在一开始掌握太多...

  • 回答 2

    想要自学前端,要先知道需要自学什么内容,然后给自己制定学习的计划,并且严格按照计划执行下去,切忌三天打鱼两天晒网,要耐得住寂寞坚持下去才行。可以按照下面的步骤去学习前端。第一阶段Html5+CSS3:主要学习HTML5基础、CSS基础、HTML5进阶、CSS3进阶、L...

  • 回答 1

    在《Web Content Accessibility Guidelines 1.0(Web内容可访问性指南)》里,对可访问性的描述是:Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明:提高可访问性也能让普通用户更容易理解Web内容。具体而言,要考虑以下两方面:无论用户是否...

  • 回答 2

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。同一页面在不同大小和比例上看起来都应该是舒适的;同一页面在不同分辨率上看起来都应该是合理的;同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的;同一页面在不同类型的设...

  • 回答 2

    GDB(GNU symbolic debugger)是一个功能很强大的调试器,它可以调试多种语言。有一点要说明的是,GDB是一个调试器,而不象VC一样是一个集成环境。你可以使用一些前端工具如XXGDB,DDD等。他 们都有图形化界面,因此使用更方便。...

  • 回答 1

    web的指向?你指的是?脚本中的this指向?还是其他什么?

没有解决我的问题,去提问