美文网首页
网页布局这件事

网页布局这件事

作者: smile_leo | 来源:发表于2019-04-09 18:09 被阅读0次

前人栽树,后人乘凉 o(∩_∩)o ,看一下大家对网页布局的认识吧!

网页布局一般有七个步骤:

1.页面尺寸

       页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下的页面范围就变得越来越小。一般,分辨率在1024×768的情况下,页面的显示尺寸为1007×600;分辨率在800×600的情况下,页面的显示尺寸为780×428个象素;分辨率在640×480的情况下,页面的显示尺寸则为620×311个象素。从以上数据可以看出,分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因,目前的浏览器的工具栏都可以取消或者增加,那么当显示全部的工具栏和关闭全部工具栏时,页面的尺寸是不一样的。

       在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。要提醒家。除非能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么最好能在上面做上页面内部连接,以方便访者浏览。

2.整体造型

       什么是造型,造型就是创造出来的物体形象。页面的整体形象,应该是一个整体,图形与文本的接合应该层叠有序,有机统一。虽然,显示器和浏览器都是矩形,但对于页面的造型,可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。

       对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,注意到很多ICP和政府网页都是以矩形为整体造型;圆形代表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形则代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是结合多个形状加以设计,其中又以某种形状为主。

3.页头

       页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将涉及到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。

4.文本

       文本在页面中多数以“行”或者“块”(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。

5.页脚

       页脚和页头相呼应。页头是放置站点主题的地方,而页脚则是放置制作者或者公司信息的地方。能看到,许多此类信息都是放置在页脚的。

6.图片

       图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而布局思维也将体现在这里。

7.多媒体

       除了文本和图片,还有声音,动画,视频等等其它媒体。虽然不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也变得更重要起来。

相关文章

  • 网页布局这件事

    前人栽树,后人乘凉 o(∩_∩)o ,看一下大家对网页布局的认识吧! 网页布局一般有七个步骤: 1.页面尺寸 页...

  • 1.网页布局基础

    网页布局基础 什么是网页布局?网页布局是网页制作的基础(DIV+CSS网页布局) 分类:流式布局,浮动布局,绝对定...

  • 6、盒子模型 边框、圆角、阴影、内外边距、外边距塌陷

    1、网页布局的本质 网页布局的核心本质: 就是利用 CSS 摆盒子。 网页布局过程: 先准备好相关的网页元素,网页...

  • 网页布局方式

    一、 网页的布局方式 1、 什么是网页的布局方式? 网页的布局方式就是指流浪器是如何对网页的元素进行排版的 2、 ...

  • DIV+CSS对SEO网站优化好处有哪些?

    div+css布局是一种网页的布局方法,是目前应用最广泛的网页布局方法。div css布局是把网页用div+css...

  • 基本的布局方法——Flex布局

    4.2 基本的布局方法——Flex布局 如果之前你接触过网页开发中的flexbox布局,基本上你可以略过这节。但有...

  • 京东登录

    =============网页内容============== ===========网页布局和样式=======...

  • 学习笔记(二)

    网页编写 网页编写习惯: ①清空所有的边距; ②从外向内,从上至下的编写网页。 网页的布局方式:网页的布局方式其实...

  • 08-CSS浮动流

    网页布局方式 什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(文档流/...

  • CSS-浮动流

    浮动 网页的布局方式 什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(...

网友评论

      本文标题:网页布局这件事

      本文链接:https://www.haomeiwen.com/subject/ktviiqtx.html