网站建设之网页布局

网站建设的优秀与否,不仅仅是指网页上内容的充足、图片的处理、文字的变化还有一个非常重要的因素就是网页的布局。网页布局大致可分为拐角型、“国”字型、封面型、标题正文型、左右框架型、上下框架型、Flash型、变化型、综合框架型。
1、拐角型:这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。
2、“国”字型:也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
3、封面型:这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,西安网站制作放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。
4、标题正文型:这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。
5、左右框架型:这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。
6、上下框架型:与上面类似,区别仅仅在于是一种上下分为两页的框架。
7、Flash型:其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。
8、变化型:即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。
9、综合框架型:上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。

Read More

网页布局的概念和网页布局常采用的方法

  网页布局就好比一块空地,让您来决定上面种什么花能够达到比较好的视觉效果,同时让欣赏花的人方便参观、浏览。
  下面介绍一下网页布局的一些概念:
  1.页面尺寸:
  一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以上数据可以看出,分辨率越高页面尺寸越大。网页的高度不易超过三屏。
  2.页头:
  页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
  3.文本:
  文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。
  4.页脚:
  页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。
  5.图片
  图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
  网页常采用的一些布局:
  1.table(表格)布局
  表格布局是早期采用的网页布局方法,对早期的编码来做网页来说,效率非常高。减少反复欠套烦琐,浏览速度会比较慢,table制作的网页兼容性比较好。代码多随着网页的发展后期出现了CSS布局网页。
  2.CSS(层叠样式表)布局
  CSS布局有以下好处:网页代码更简洁,使你的页面载入得更快,降低你的流量费用;让你在修改设计时更有效率而代价更低;帮助你的整个站点保持视觉的一致性在世界上越来越多人采用Web标准时,它还能提高你的职场竞争实力(事实上也就是降低失业的风险)。
  3.框架布局
  框架布局在网页设计中用的不是很多,一些页面为了考虑兼容性使用框架,也有的是静态页面的一部分嵌入动态框架网页。一般的网站管理后台多用框架设计;还有一些论坛也采用框架结构。 

Read More

网页设计的装饰性元素对网页布局的影响

网页设计装饰性元素一般都是绝对定位实现的,运气也好、必然也好,不管怎样,其就是可缺省的(与周围环境UI无耦合、存在与否不影响布局)。但是,对于功能性的元素或模块,你是否有可缺省的意识呢?

平时我们写这些模块的时候,想得多的是性能、兼容性以及效果实现;如果这些你都可以轻松应对,试着加一条——可缺省性。
 
永远不知道产品经理需要什么东西,因此,在网页设计布局的时候,一定要有强烈的意识:要是产品经理看这里不爽,把这里这部分干掉怎么办?如果干掉了,我是不是只要张个嘴让后台那边把这部分HTML注释或删掉就可以呢!
在CSS布局的世界里,也有类似的情况。有些东西并不是实现有多难,而是想不到、意识不到。记住,重要的是意识。

Read More

网页设计:CSS高级技巧之网页布局

布局

  CSS至关重要的作用, CSS的设计初衷.

  CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签!

  CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做, 可能就有100种方法.

  居中

  在table时代, align和Valign相当的好用, 而在CSS中却没有简单实现的方法,所以在标准化刚刚开始推广的时候, 很多重构项目中居中问题变成了阻碍标准化进步的绊脚石.

Read More