返回列表 回复 发帖

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

一、页面布局与规划
1 K6 e" J/ d. d3 C- H
& ?5 |! W$ l$ @8 Y9 l  好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...
- A8 L/ G6 t' q' D
$ |# m0 @1 s* S4 P' q. H0 S  在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
6 h# j: l( P+ _5 b
4 t! T* T  A. Q0 D5 M  所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。0 d0 \% B, L3 s! [; ~1 s) o6 W3 r

: k, s1 h0 V( Q) u
6 H% s, }$ m5 I
' W& p& @% c: T" N1 k5 d- y下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:2 m2 m# B5 j) G6 V
  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;
; ^8 ]; q, X. _7 `, D$ o7 r& n7 b: F  2、内容部分又可分为侧边栏、主体内容;- `6 H% |5 m" Q. J. s- k# v- ~! _
  3、底部,包括一些版权信息。% v. f' X9 M3 {% q
  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
$ u7 q6 D- m/ _+ W( x' W3 X; U! w/ j. c+ ?, p
" Q- L$ o) V, }: w$ [; l% B# O

9 |7 g" V  e( U! P6 I7 {根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。" i, E- q  Q% M& s) w

( }2 W5 D" ?" O' ^- S5 m$ r, I3 _' ~2 u; @
6 i9 U# C7 z: }3 [$ X
DIV结构如下:
! {1 [2 R( S7 w  M6 f1 G4 q9 Y, X  │body {} /*这是一个HTML元素,具体我就不说明了*/6 j' J8 E! Z0 ]# l
  └#Container {} /*页面层容器*/
7 W& D0 y4 P0 }$ o5 x, s     ├#Header {} /*页面头部*// P, A' J4 I5 i$ g) g
     ├#PageBody {} /*页面主体*/7 U. b5 x  p: b
     │ ├#Sidebar {} /*侧边栏*/
2 ^5 H8 w' h' L3 L. s: H' \; p) Y) b     │ └#MainBody {} /*主体内容*/2 E, {5 b1 ^5 b* m% W9 B* M! q. y1 M) Q
     └#Footer {} /*页面底部*/$ T8 c! W: l0 r/ I2 E' [
  至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。
附件: 您所在的用户组无法下载或查看附件
怨去吹箫,狂来说剑,两样销魂味。
藕家看不明白的说。3 s8 ]* _/ I! E, m: n. L

2 m# d! ~8 s7 S8 K" i4 k+ y哎,该要学习去唠……
因为你追逐快乐,
又对快乐置之不理,
所以,你是一个5岁的女人!
返回列表