网页布局板式类型(网页设计的版式布局基本形式有哪些)
(一)流动式布局流动式是最常见的网页布局类型,它是指采用HTML和CSS制作流动的网页布局。流动布局指网页按照文件顺序或者用户指定方向流动显示,也就是说,当用户浏览一个网页...
(一)流动式布局
流动式是最常见的网页布局类型,它是指采用HTML和CSS制作流动的网页布局。流动布局指网页按照文件顺序或者用户指定方向流动显示,也就是说,当用户浏览一个网页时,这个网页上全部的内容将会连续地层叠显示,从上到下一次出现,而不需要用户跳转到其他页面,可以在连续的屏幕上看到所需的全部内容。流动布局可以让用户较方便地查看网页内容,相对而言,简便易维护,使用成本也较低,因此流动布局是做网页非常常用的一种方式。
(二)绝对定位布局
绝对定位布局是一种基于CSS定位系统的网页布局类型。绝对定位的特点在于,网页的全部内容按当前显示的位置绝对地驻留,而不是流动显示排列。这种方式可以让网页全部内容并列排列,并且可以将视觉文件的层次把控得完全一致。绝对定位的优点在于可以灵活地把控网页版面,让网页元素摆放更加精确,让版面显示更加自然。但缺点上绝对定位比流动式布局更难调试和维护,也更麻烦时间久了,所需的开发成本会更高。
(三)固定宽度布局
固定宽度布局是另一种在网页布局中使用的常见类型。固定宽度布局是指将网页元素分辨率及时定死,其中所有的行表格及布局中展示的尺寸,高度,宽度均为固定数据,包含图片的展示文本的展示,以及相关的容器布局(此为最典型的例子,因此可以将其简称为“容器”)等等。固定宽度布局的优点是可以获得准确的布局展示效果,使用者在浏览候网页时,内容显示无论何时均与预设的一致,这种极端的固定也保证了网页在不同的分辨率和窗口上都能有一致的表现效果。但缺点则是相对固定宽度布局较为困难,同时这种布局模式还会造成容器固定宽度不足以供复杂的界面显示的问题,使得部分复杂的布局设计更加困难。
(四)响应式布局
响应式布局是一种更加先进的网页布局类型。它是指将网页内容整理成响应式,页面会根据用户所使用的设备窗口大小自动实现调整,相应的布局也会实现相应调整,从而让内容更具有友好性,也能让网页版面更加美观,满足不同设备上使用要求。相对而言,响应式布局成本虽然较高,但由于其实用性得到更高的体现,可以大大提升网页的美观度,也让网页的内容更加容易掌握,使得复杂的网页也更具友好性和用户体验度。
(五)网格布局
网格布局是一种常用的网页布局类型。
(1)网页的外框布局
网页的外框布局是网页布局的最初环节,它可以定义一个网页的基本框架和宽度。两栏或三栏的外框布局都是一种传统的布局,这里的三个栏分别指左侧栏、右侧栏、中间栏。外框布局是网页布局的基石,是整个网页布局开始的地方,此时网页中各个部分之间只有粗略的分界,但对其布局位置有很高的划分度,基本可以还原整个网页最终的大致样貌。
(2)横栏布局
横栏布局一般来说是一种整体布局,它以横向布局增加网页内容的洁净美观,将网页整体内容穿插其中,形成一种完整的格局。横栏布局的灵活性为网页增加了更多的布局形式,如在关键区域使用悬挂式或滚动式布局,或使用横向折叠模块,将内容以不同形式展示出来。 横栏布局可以有效地分解结构,将关键内容从其他内容中脱颖而出,显示更清晰而醒目,让用户很容易发现关键信息。
(3)卡片布局
卡片布局是��近几年出现的一种新型网页布局类型,它主要使用正方形或长方形的卡片47341 类似的形状来安排内容,整体的贴图、排版方式和细节加工用的非常多,给人以更强的个性化特色,使网页中的信息非常有序,容易被用户发现和了解。卡片布局可以为页面整体添加更多有趣、富有个性的元素,让用户能更加清楚地看到网页中所表达的信息。
(4)折叠布局
折叠布局能有效地将网页内容从上到下分割,起到分解结构,增强内容体验的作用。折叠布局可以实现网页内容的滚动,它比起横向布局灵活性更高,可以让用户更快速地定位到想要的内容,有更好的发现体验;也因折叠布局的高灵活性,可以将内容模块有序地排列,从而突出关键内容,简化传递的信息体量。
(5)瀑布流布局
瀑布流布局是一种能根据用户节点创建不一样视觉效果的布局。它可以把内容以不同的格式,例如大图、图片等展示在网页上,突出关键内容,使用户接触到更丰富和更有趣的内容,形成更加视觉化的体验。瀑布流布局也可以根据它的弹性能力很好地调整布局的结构,实现快速的堆叠排列,从而提高用户阅读的效率。