返回列表 回复 发帖

[转载] Div+CSS布局入门教程(一)

一、页面布局与规划
# b, K8 Q, ~* n  `5 n) f. f, z2 A% y/ G
  好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧..." ?5 D. Q, G* @/ U7 J
4 R, T4 B1 w, U9 i
  在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。" N. J8 @& f+ W( K4 h- n+ _

( r1 a0 C$ o! w& u* j. n$ L3 f/ B  所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
6 W* T" C5 N$ o% r+ Z% v
9 ^6 B& R: k! @  d1 J7 ?- m2 w% o2 }2 i' B$ u
' v0 J9 @' o2 S; S; u# K! Q
下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:
' s# z; |4 S& g  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;2 O3 ]) V( y& [7 Q- c, l# R
  2、内容部分又可分为侧边栏、主体内容;1 Q- P" ^' ?5 ?, R* G1 B$ g, b
  3、底部,包括一些版权信息。
3 L' C  y0 G/ a- |  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
( p. J2 d/ x$ h+ d( k+ M) {
1 S5 [3 X' ]6 e4 D1 e6 L! ]  u
- y' I( _" `5 o. D( [6 ~3 }1 O) }; f' j, ?' w% M' ?/ {( f- l0 }/ B% @4 u
根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。4 a% {3 `% z2 {2 s: P- z( v: V1 _

% D% U4 G, e& G0 @2 c3 m
, o- J! B6 K0 E6 z' b# a4 D2 _7 e8 I
DIV结构如下:# q* d2 M. O3 J, w) `: {
  │body {} /*这是一个HTML元素,具体我就不说明了*/
3 A! r5 @) P  r2 w  S  └#Container {} /*页面层容器*/
! B' O  P/ Y: D3 s/ }     ├#Header {} /*页面头部*/
3 t- K$ L5 i/ j. P* R     ├#PageBody {} /*页面主体*/9 G# x; g. F& w  B% |
     │ ├#Sidebar {} /*侧边栏*/
0 U* T4 C/ q! v4 I- U* a     │ └#MainBody {} /*主体内容*/
3 P6 `6 o% {- S" q: \& S     └#Footer {} /*页面底部*/
9 H5 q$ v; Y7 ?# [/ q  至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
藕家看不明白的说。& v, r9 C7 o% ]9 O2 A+ W. J

' f: Y) |* J0 J哎,该要学习去唠……
因为你追逐快乐,
又对快乐置之不理,
所以,你是一个5岁的女人!
返回列表