草根站长论坛's Archiver

飓风 发表于 2008-6-21 14:41

2、构建DIV+CSS页面——专题快速上手教程

我们在上一章已经把确定了专题的选题和版式。在这一章里，我们就利用Dreamweaver 8中文版，把这个框架一步步构建出来。为了照顾新手，这一章写得很罗唆。请大家有选择性的跳过。文中“【】”表示DW里的菜单、按钮、选项等等。i_5mC'b ?Q7F,dK nY

S'y5?AAh yh,N
7Y]![p^7~ 一、[color=blue][b]建站[/b][/color]$Q8CSVOu%u \W
在桌面上新建个文件夹"bianews"，然后打开Dreamweaver8中文版。以下操作均在Dreamweaver里进行：
t#j+X y(y)T bU 1、【站点】－【新建站点】 r3]N1RJr
【站点名称】：网编是怎样练成的
d:p Nr8J[&i 【本地根文件夹】：点右边的文件夹图标，然后选择桌面上的"bianews"文件夹Ii"A{:EcJx
点选【使用区分大小写的链接检查】_*GOamJ.c
其他按照默认，点击【确定】，专题站点成功建立。.Ncd8J3a
?O0G yQ Ii7@g
2、【文件】－【新建】(或者Ctrl+N)－左边选【基本页】右边选【HTML】右下角为【XHTML 1.0 Transitional】（即默认选项）－【创建】
}7NjH JU._%_NW;XI
W7a cC)\ ~v!V 3、【修改】－【页面属性】－在跳出的属性界面左边，选择【标题/编码】S s n%o/U'KF
【标题】：网编是怎么练成的
q5zY[9U4CBg;G 【编码】：Unicode （UTF-8）N(a+X4_F;{
/l9@[H;X'a
4、【文件】－【保存】(或者Ctrl+S)－保存到桌面上"bianews"文件夹，命名为"index.html" O OnD P9I$|
G0Ksd!`&Y-b
5、重复第2个步骤的【文件】－【新建】(或者Ctrl+N)－左边选【基本页】，不过这次右边选【CSS】－【创建】
$p7^5l&}Q tO/@y
ojB-ZO)D 6、重复第4个步骤【文件】－【保存】(或者Ctrl+S)，把这个文件保存到"bianews"里，命名为"index.css"
*s6Hd%V*t!p
h7S!QFL 好，建站准备工作到此结束。
u3l.yo.riC6o*x+A ;q V? m N)N7XH4_
二、写Xhtml
_ oQ0X$| 1、写div部分
w qc.Scr4qsP5Vc 切换回index.html，切换到代码界面，在<body></body>之间插入如下代码(注意，全部是小写字母)："~o3z$a%I.S5Z0\!c
[font=NSimsun][code] vM O6j4z'ZQ@
<div id="container"> <!--页面容器层开始-->7]*fu7ic
{*M2kE9g
    <div id="header"><!--页面头部（第一行容器）开始-->
,@6rwQ {;r:G         <div id="logo"><!--logo（第一行左列）开始-->Et8Mxj
        </div><!--logo（第一行左列）结束-->
^4q@\3N eb"dJh         <div id="banner"><!--banner（第一行右列）开始-->
k7`J8bk"GG         </div><!--banner（第一行右列）结束-->
2^n1GH&z     </div><!--页面头部（第一行容器）结束-->? E2BF6iBE
        
(UI^:U ^$AN1N     <div id="menu"><!--菜单（第二行容器）开始-->
O{*T1d}7v jn~     </div><!--菜单（第二行容器）结束-->-`SY \+S@7S$Nqy
    s[w4j8Gw-pn
    <div id="base"><!--基础知识行（第三行容器）开始-->d Hm2r2X$d;VZ
        <div id="html"><!--html（第三行左列）开始-->B"~{,\1R2I
        </div><!--html（第三行左列）结束-->(h/LkB f Us
        <div id="css"><!--css（第三行中列）开始-->W"fK0sP$}1^Q
        </div><!--css（第三行中列）结束-->6~Cx&Pi qLv(H@$\@
        <div id="dw"><!--dw（第三行右列）开始-->yK"D#e GB4Q
        </div><!--dw（第三行右列）结束-->\$Y9lZ;V$X]
    </div><!--基础知识行（第三行容器）结束-->
*V o hJq&S     JwiJlp K7PLn
    <div id="advanced"><!--进阶知识行（第四行容器）开始-->
o5Ip$g5g2AUc LbT         <div id="color"><!--色彩（第四行左列）开始-->8y5cTMJ\Es+GM
        </div><!--色彩（第四行左列）结束-->m Imb ~)TA_1D
        <div id="pic"><!--图文排版（第四行中列）开始-->
pyqeD5fw)Y:Y         </div><!--图文排版（第四行中列）结束-->c!m*wi#B
        <div id="lay"><!--页面布局（第四行右列）开始-->~"o.v8kl
        </div><!--页面布局（第四行右列）结束-->9s,~%L9e~ jd
    </div><!--进阶知识行（第四行容器）结束-->
3|y7E#}3g;Gl"n l     5Z[#W,JD5q7t
    <div id="other"><!--其他内容（第五行容器）开始-->
9][e?/F         <div id="down"><!--资源下载（第五行左列）开始-->0Z hmnt!e$f%n
        </div><!--资源下载（第五行左列）结束-->4D6?7?T~&jm
        <div id="example"><!--实例（第五行右列）开始-->
2t9V5|9hw9{{*L         </div><!--实例（第五行右列）结束-->&\ft&sK8eU
    </div><!--其他内容（第五行容器）结束-->
Yh!vw4K.t     0D p"C q+a
    <div id="footer"><!--版权信息行（第六行容器）开始-->
7OrN!N|_ R DL!?     </div><!--版权信息行（第六行容器）结束-->
2kO3iDby_.q     iA9{+n^8y
</div><!--页面容器层结束-->
Szi4vC)t] [/code]
x6s3BJS2Fm 2、给index.html链接css文件。
9mU#vIb 方法一：切换至index.html代码界面，将光标停留在<head>后面，然后左键单击【文件】窗口里的index.css,拖到<head>后边，独立成行（如果看不到【文件】窗口可以按快捷键【F8】）
kQ\~~ 方法二：切换至index.html，【文本】－【CSS样式】－【附加样式表】－【浏览】－选择刚才新建的index.css－【确定】 h2z4`WtR[{6gkx
方法三：在<head></head>之间单独起一行，然后输入
G Mwg(C~7p [/font][font=NSimsun][code] v6|`EW-S
<link href="index.css" rel="stylesheet" type="text/css" />
:\J+\7@ E.|"|;DUk [/code] qh?sD?+LD(_'r
3、编写css
'Re ?,q;R(T,C2vU index.html初步编写完毕。记得保存。
6DV yw I$M 源文件切换至index.css(css部分不加以解释，请大家自行阅读本版相关文章)"I8ko`A mSN
%QZieo&PfqHD
首先输入以下代码（全局控制部分）：参考：
_)kg%T`I?l [font=NSimsun][code]* { word-wrap: break-word; }}vJ%z;D7B}v
body { background: #FFF; text-align: center; }
1n)~4\4z)A(jE]!{/? body, td, input, textarea, select, button { color: #535353; font: 12px/1.6em Arial,Helvetica,sans-serif; }
P#z/VJyE I/P$j~ body, ul, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0; padding: 0; } q5pv `SO4E
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
IU9\-g4z.pqhP;z.z!~ a { color: #262626; text-decoration: none; }
}v ]#h oe a:hover { text-decoration: underline; }
o-DW#{x a img { border: none; }c8pOJBg7?I
em, cite, strong, th { font-style: normal; font-weight: normal; }-?#o7r| Y8X4Ds,x/mU#Z
table { empty-cells: show; border-collapse: collapse; }
(i;uIJ m body {Wz"TFS/o
        font-size: 12px;l4Y'k3O5r%d
        font-family: Tahoma, Arial; f[M5l3f
        margin: 0px;
T$R'f/I.N         padding: 0px;+W!r] ?dF+Y6f6sZ c
}:W Q ?7oMdu({
img{
(ot)M&G q0T&EPBVg         border: 0px none;V;P$C;k7K}
        height:auto;n6O b2Ga7ci
}@i;{iy)OiJ
select {
1g,aIc8a8cKP         font-size: 12px;  
Us3y&JOd         font-family: Tahoma, Arial; fx^,^ |9tK9L
        color: #000000; _$}nEMX
        background-color: #FFFFFF;hK@$T2{
} k P1a M5K G
td {
O,XfS$X.]}'I9fB9n      word-break: break-all;
d0s-j hai.ao(G }[/code][/font]
2i1^:anay css源文件参考：  
`T*okj.Nh^{ ]G6o@k7i5PWz
2?R G{.AAz#O
然后开始逐行控制
K4P3H}q'@p3^+l T%f |+J8b1L_/Y
[/font]

yess 发表于 2008-6-21 17:18

不错啊
_9w&P#u;`/ZF 支持一个啊

ahqueer 发表于 2008-6-22 13:49

不错的教程  ,,,

tv006 发表于 2008-6-23 13:08

这个教程很使用 学习中

页: [1]

Powered by 草根站长网 © 2007-2008