当前位置:首页>>网站制作>>网页制作>>正文

提升网页设计中的布局问题

来源:设计前沿收集 作者:枯藤看世界 时间:2018-03-20

今天我们再来讲解一下在网页设计基础知识中另外一个重要的知识点,那就是布局问题。

网页布局指的是将一个网页的篇幅进行合理的分割用于安排文字,图像的位置。

在大多数时候,我们去判断一个网页是否精致,不仅要看它的文字,颜色,更重要的一点就是它的布局,如果布局不合理,那么这个网页无疑就是失败的。

互联网环境下技能提升之网页设计中的布局问题

优秀网页

网页布局类型

网页布局一般有5种类型,分别是“国”字型布局、“厂”字型布局、“框架”型布局、“封面”型布局、“flash”型布局,接下来我们一起来看一下。

“国”字型布局:最上面是网站的标题以及横幅广告条,接下来是网站的主要内容,左右分别列出一些栏目,中间是主要部分,最下面是网站的一些基本信息、联系方式、版权声明等,这种结构是一些大中型网站常用的布局类型。

互联网环境下技能提升之网页设计中的布局问题

国字型布局

“厂”字型布局:页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景较深,整体效果类似英文字母“T”。

互联网环境下技能提升之网页设计中的布局问题

厂字型布局

“框架”型布局:一般左面是导航链接,有时最上面会有一个小的标题或标志,右面是正文。

互联网环境下技能提升之网页设计中的布局问题

框架型布局

“封面”型布局:。这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接。这种类型大部分出现在企业网站和个人主页。

互联网环境下技能提升之网页设计中的布局问题

封面型布局

“flash”型布局:。其实这与封面型结构是类似的,只是这种类型采用了目前非常流行的Flash,与封面型不同的是,由于Flash 强大的功能,页面所表达的信息更丰富。

互联网环境下技能提升之网页设计中的布局问题

flash型布局

网页布局技术

网页布局技术一般有以下几种(1)表格布局(2)框架布局(3)div+css布局,我们就利用最近最常用的div+css布局简单的讲解以下:

DIV是HTML 中的一个元素,是容器性质的,DIV 元素是用来为HTML文档内大块的内容提供结构和背景的,不用CSS 技术,可以有效地页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。简单地说,DIV 用于搭建网站 结构(框架)、CSS用于创建网站表现(样式/美化)。