我爱电脑技术论坛 » 网站建设 » Div+CSS布局入门教程一

炉火纯青 发表于 2008-4-21 16:09

Div+CSS布局入门教程一

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 -C,o*d/rV!HS

:m/TV"Wg:X_8x 　　所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
R{ K-?F4M_n^f 6Kf5TzKbq6L
[attach]19029[/attach]
.QH m u
M8CGX r6c$\eB3K

,_;Kx)[h h1S 8NMa!j|4l {*@
　　下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： $M:D\Ol
!o!M5[? U`gk!xF[
　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； F$l0{8Ck&E
　　2、内容部分又可分为侧边栏、主体内容；
o1i2fvv$V.bv 　　3、底部，包括一些版权信息。 ?7UJS2bxT
　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
f,I6P$_6owm
O}U"t%UJ8PG9]V$~l
B2@
| G|V [attach]19030[/attach](c6ia[B`cB+P
CXq(o9B6wgb$b`
lgF-fqz
　　根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
,gdR[!^GPP#}9{] (P2]*mx ~C"W
)Nx-n Xa~ l(zr
[attach]19031[/attach]
_?6rp;M m)i#D5O
(v:l"@t!nQ
3iw9sV/nK3N 　　DIV结构如下：
-hn.b+ajq5Z 　　│body {}　/*这是一个HTML元素，具体我就不说明了*/
LUBD6VO ? g 　　└#Container {}　/*页面层容器*/ Q%a0k;oz ]N"{3Y
　　　　　├#Header {}　/*页面头部*/ r+z0Ek3W j7Xr'Q
　　　　　├#PageBody {}　/*页面主体*/ w)wp*P4nR\
　　　　　│　├#Sidebar {}　/*侧边栏*/
|)qbI!A Z]1\Y9h 　　　　　│　└#MainBody {}　/*主体内容*/
F},rpT 　　　　　└#Footer {}　/*页面底部*/ Z9m.aT5c[#]

V7T+~v;t 　　至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
#z Cb^;Zi6?&g
$SJ;eD(| P#c*G   接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 8Tn{'W*B;r!mk/l9tLq

*~0Ehe-cln7b3[ 　　＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1uR-{V%Fo 　　＜html xmlns="http://www.w3.org/1999/xhtml">
G)uO1P:U
Yx)a 　　＜head>
b-qHl%f0D 　　＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6L6d5Z7IYW!X qg7]
　　＜title>无标题文档＜/title> Y&{R[3f8@sx
　　＜link href="css.css" rel="stylesheet" type="text/css" />
%QMX-Wj
} 　　＜/head> cD M'GN\t

;LmOb sB0m 　　＜body>
Fn1tP$eFc%B.j ^"E 　　＜/body>
f.li t s\+JT 　　＜/html>
+?"A$Dp5M8@ 　　这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
SFk+h8J{.u]
6lz)y.NH` 　　下面，我们在＜body>＜/body>标签对中写入DIV的基本结构，代码如下：
QKRk7T-?)S'w
(LtPG yh8_5iQ 　　＜div id="container">[color=#aaaaaa]＜!--页面层容器-->[/color]
vM2t2f[[ 　　＜div id="Header">[color=#aaaaaa]＜!--页面头部-->[/color]
P+kX6@'?9O 　　＜/div>
&FdKMJ a 　　＜div id="PageBody">[color=#aaaaaa]＜!--页面主体-->[/color] n8R:Rg%L
　　　　＜div id="Sidebar">[color=#aaaaaa]＜!--侧边栏-->[/color]
!Px!ME*c| H.m6q 　　　　＜/div>
;kk(US ?;]C$No 　　　　＜div id="MainBody">[color=#aaaaaa]＜!--主体内容-->[/color]
F$Wt{@E`DS 　　　　＜/div>
|ah;FT a&K P 　　＜/div> 1Q\U$PP*V4e
　　＜div id="Footer">[color=#aaaaaa]＜!--页面底部-->[/color]
#rW.p6owh 　　＜/div>
+x1N?Y~xyg 　　＜/div>
3j_$x,bd0? 　　为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：
*qj [b yW^B S"Nj CNy"EE
8Z%XsYA
　　/*基本信息*/
&bp j/qz2b*[ 　　body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} %g n5hh`
,HD-V7|%xrF+T1~
　　/*页面层容器*/
T#~4[bS{7c[ 　　#container {width:100%} 9yp&pt9TVX:|^

/N*D)nbr2h
? 　　/*页面头部*/
3RV2Zwoi)O 　　#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
`G4hq-t BfctC\n/m
k
　　/*页面主体*/ }qfJ&p#d
　　#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} jQ7Dy xi;M-y&P
!L[$d_'gO][
　　/*页面底部*/
p6P:@/`tF/h 　　#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} !K|t;J%{
e{/I,f c$F kcA
　　把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。

查看完整版本: Div+CSS布局入门教程一