布局篇(1)—If you love css …
作者:Jorux 来源:Jorux博客 发布时间:2008-04-16 14:14:00
从本篇开始讲述如何用css实现网页的布局,即如何用css控制网页内各个元素的显示位置。
如果你是一个初学者,很可能觉得做一个网页的第一步就是布局。其实不然,css网页的设计过程可以参考分为以下几步:
平面设计—>页面切割—>布局—>细节控制
1. 平面设计是一个网页的精髓所在,读者直接面对的界面,在本站以后的文章中会涉及此方面内容。也许你会认为在脑子里形成一个网站的大概印象就可以了,那么这种想法直接就给你贴上业余的标签。推荐工具:Photoshop;
2. 页面切割其实可以划分到布局里,因为你的页面切割方式直接影响了布局方式,也体现了你是属于表格布局阵营还是css布局阵营。它是布局(前)的关键步骤。将在本章重点讲述。推荐工具:Photoshop;
3. 如果把布局说简单点,就先得把你的网页简单化。简单到把你的网站分为header,content,sidebar,footer四个部分。
4. 细节控制,将header,content,sidebar,footer的表现细节化。
本章将针对页面切割讲述一些Jorux的私人观点与技术。
首先,我们要有一个被切割的对象,这里以Jorux.com的原始photoshop平面设计图为例。如下,点击看大图(Fig.01):
如果使用表格布局的话,你可能就想到在photoshop里把页面切割为无数个固定宽高的格子。但用css布局的话,你首先要明确的以下几点是:
1. 你是要横着切,还是要竖着切;
2. 第一次切割,只需要把网页中的背景图片切割出来(因为背景图片是在css里声明的);
3. 切的的图片要尽量小,然后让css去做更多的事情;
4. 设计比较复杂的部分,可以不分割,从而减少css编码的难度;
5. 读者应该根据自己的能力,找出哪些效果css可以轻松实现,而哪些效果用图片更加简单而且size不大,仔细在3.4之间权衡利弊;
现在我们来看Fig.01, 最靠上的部分是个黑色的尺子,遮住了“Jorux记事本”,更遭的是它居然还有黑色的投影。等到要切割的时候,我才后悔当初怎么能设计得如此复杂。但没关系,一切都会好起来的。现在跟着来重温我的切割思路:
1. 整个网页背景色大家应该很清楚,就是深灰色#444,这无需图片,在css里的body选择器里声明就好;
2. 这一步是最关键的一步,请读者仔细体会。对于css布局的网页,Jorux建议你首先给你的原始平面设计来两个横刀(红色),接着就来个竖刀(蓝色)。实现如下效果(点击看大图Fig.02):
一定要先横再竖,即先把你的网页分为top,mid,bottom三个部分,然后再把mid分为content和sidebar两个部分。对于单栏样式,只需要两横刀,而对于三栏样式,可能就需要两横两竖刀。
这样你就得到header,content,sidebar,footer四个部分。现在来分析这四个部分的背景图片需要如何切割。
3. header部分的图片非常复杂,但要把那把尺子单独分离出来几乎是不可能的,而且是没有必要的。因为我们还需用这把尺子实现回首页的超级链接,因此它只能是在html文件中<img/>的图片,而非背景,为了减少css编码难度,我们可以把有投影的圆角也和尺子一起切下来以备用,如图(Fig.03):
那么剩下的稍淡的灰色,就是所需要header的背景,我们只需来两竖刀(宽度在4-6px左右为宜),得到下图(Fig.04):
相信大家知道如何在css里用repeat-x来实现header的背景效果;
4. 接着就是content的背景,很容易看出就是那个带投影的白色背景。马上来上两横刀,高度同样在4-6px为宜,如下图(Fig.05),在css里用repeat-y就能实现content背景;
5. 还好,在本设计中sidebar无背景,直接继承body的灰色背景就好;
猜你喜欢
- 在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图
- 区别IE6与FF:background:orange;*background:blue;区别IE6与IE7:background:green
- 昨天有人在群里问图1的边框效果是否能实现。 边框效果图有人给出答案,需要嵌套一个元素实现。我当时粗粗写了个测试页面,但是时间太晚了,也没有细
- 内容摘要:“ASP”(Active Server Pages)作为一种典型的服务器端网页设计技术,被广泛地应用在网上银行
- <% '测试读取MySql数据库的内容strconnection="driver={mysql odbc 3.51 dri
- 当使用MySQL做站点的时候,肯定会有不知道的错误发生,怎么记录呢?以下是具体解决方法:class.method &n
- 如何让用户也能修改密码? 好了,照下面添加到你要添加的地方去:<%id = Request(&qu
- php遍历目录和文件的场景在很多时候都能用到,遍历目录方法的方法有好几种,那么应该使用
- 我们到目前为止所谈到的SQL语句相对较为简单,如果再能通过标准的recordset循环查询,那么这些语句也能满足一些更复杂的要求。不过,何必
- 第一题:ASP中,VBScript的唯一的数据类型是什么?第二题:在ASP中,VBScript有多种控制程序流程语句,如If…Then, S
- 企业管理器中没有改数据库名的功能,如果一定要用企业管理器来实现,你可以备份数据库,然后还原,在还原时候可以指定另一个库名,然后再删除旧库就行
- 各种asp字符串处理函数,包括:把字符串换为char型数组,把一个数组转换成一个字符串,检查源字符串str是否以chars开头,检查源字符串
- 您可以将SQL Server 数据库引擎升级到 SQL Server 2008。SQL Server 安装程序只需最少的用户干预就可升级 S
- <!DOCTYPE html PUBLIC "-//W3C//DTD X
- 今天要做个搜索,用到了时间比较函数!以前多是直接比较时间,查询语句有长效率又不高~~~后来用了DateDiff函数,在调试的时候发现了一些问
- 大家可能经常会遇到这种情况:sql="select * from table"set rs=conn.execute(s
- 不是很难哦,我们现在就可以实现VBScript在服务器端验证,就是下面的函数:<%FUNCTION TestString(S
- 作者:Roland Smart原文链接:http://www.adaptivepath.com/ideas/newsletter/archi
- 英文原文:http://www.smashingmagazine.com/2008/08/18/译文原文:http://blog.bingo
- 嗯,开场先胡扯几句不相关地感言。最近的工作让我有了很多实践的机会,同时也让我收获颇丰。在群里聊天的时候也提到过,所有的学习过程,最好是理论-