我们在上一章已经把确定了专题的选题和版式。在这一章里，我们就利用Dreamweaver 8中文版，把这个框架一步步构建出来。为了照顾新手，这一章写得很罗唆。请大家有选择性的跳过。文中“【】”表示DW里的菜单、按钮、选项等等。
4 a0 A! c/ Q7 f% C
1 E U( U; y' Z$ k% L( ~& k0 X+ M( d' U
一、
建站
8 P8 d, t8 P" N% W在桌面上新建个文件夹"bianews"，然后打开Dreamweaver8中文版。以下操作均在Dreamweaver里进行：
# q+ _4 M" c3 U6 N' @
1、【站点】－【新建站点】
5 h+ q3 g- s3 D3 @【站点名称】：网编是怎样练成的
+ `( A o9 _ b+ ~4 ~, @
【本地根文件夹】：点右边的文件夹图标，然后选择桌面上的"bianews"文件夹
. \- s: A! Q" R6 K5 `7 D
点选【使用区分大小写的链接检查】
. D3 h7 O1 b0 O. H. X* W
其他按照默认，点击【确定】，专题站点成功建立。
$ Y: H* m, n, ^$ u3 k; R" g
. K+ v8 s$ Z! k2、【文件】－【新建】(或者Ctrl+N)－左边选【基本页】右边选【HTML】右下角为【XHTML 1.0 Transitional】（即默认选项）－【创建】
1 s' s/ Y$ C! Q8 V! ?$ Q! j4 K+ @; [4 u% ]1 C9 U3 J
3、【修改】－【页面属性】－在跳出的属性界面左边，选择【标题/编码】
- n7 ]! c3 j% x$ o& E" T' |【标题】：网编是怎么练成的
1 ?* C8 j3 M9 ?% [5 J5 C6 j- {
【编码】：Unicode （UTF-8）
9 ?7 C5 u1 E# x* G3 p5 o+ k5 F) `: O
4、【文件】－【保存】(或者Ctrl+S)－保存到桌面上"bianews"文件夹，命名为"index.html"
5 W1 ]+ V4 z, w: {+ ^" Y2 d
: E. F2 J) U$ r. c5、重复第2个步骤的【文件】－【新建】(或者Ctrl+N)－左边选【基本页】，不过这次右边选【CSS】－【创建】
5 S' {7 U4 T7 v) r
: x! ^" F, A) Z+ V( Z6、重复第4个步骤【文件】－【保存】(或者Ctrl+S)，把这个文件保存到"bianews"里，命名为"index.css"
6 i3 |% h9 ~1 |0 K
G. O! m3 L) l% r6 f( c0 F0 c好，建站准备工作到此结束。
( W. A! ~/ v+ [
( r' W- h( Q9 _7 ?) A4 N6 J; ]
二、写Xhtml
- w6 d" s2 a( Y# j
1、写div部分
: M1 Z! H: q3 W3 O+ c/ }& G0 Q3 L切换回index.html，切换到代码界面，在<body></body>之间插入如下代码(注意，全部是小写字母)：
( C3 a7 T) I4 L& C3 p* E3 j复制内容到剪贴板
代码:
<div id="container"> <!--页面容器层开始-->
<div id="header"><!--页面头部（第一行容器）开始-->
<div id="logo"><!--logo（第一行左列）开始-->
</div><!--logo（第一行左列）结束-->
<div id="banner"><!--banner（第一行右列）开始-->
</div><!--banner（第一行右列）结束-->
</div><!--页面头部（第一行容器）结束-->
<div id="menu"><!--菜单（第二行容器）开始-->
</div><!--菜单（第二行容器）结束-->
<div id="base"><!--基础知识行（第三行容器）开始-->
<div id="html"><!--html（第三行左列）开始-->
</div><!--html（第三行左列）结束-->
<div id="css"><!--css（第三行中列）开始-->
</div><!--css（第三行中列）结束-->
<div id="dw"><!--dw（第三行右列）开始-->
</div><!--dw（第三行右列）结束-->
</div><!--基础知识行（第三行容器）结束-->
<div id="advanced"><!--进阶知识行（第四行容器）开始-->
<div id="color"><!--色彩（第四行左列）开始-->
</div><!--色彩（第四行左列）结束-->
<div id="pic"><!--图文排版（第四行中列）开始-->
</div><!--图文排版（第四行中列）结束-->
<div id="lay"><!--页面布局（第四行右列）开始-->
</div><!--页面布局（第四行右列）结束-->
</div><!--进阶知识行（第四行容器）结束-->
<div id="other"><!--其他内容（第五行容器）开始-->
<div id="down"><!--资源下载（第五行左列）开始-->
</div><!--资源下载（第五行左列）结束-->
<div id="example"><!--实例（第五行右列）开始-->
</div><!--实例（第五行右列）结束-->
</div><!--其他内容（第五行容器）结束-->
<div id="footer"><!--版权信息行（第六行容器）开始-->
</div><!--版权信息行（第六行容器）结束-->
</div><!--页面容器层结束-->2、给index.html链接css文件。5 @0 D: }% U- O; Z2 {
方法一：切换至index.html代码界面，将光标停留在<head>后面，然后左键单击【文件】窗口里的index.css,拖到<head>后边，独立成行（如果看不到【文件】窗口可以按快捷键【F8】）
* P% k( e% b7 U8 z1 i方法二：切换至index.html，【文本】－【CSS样式】－【附加样式表】－【浏览】－选择刚才新建的index.css－【确定】
, C" C# }5 Z; c: s$ S9 ]- g8 d& v. A方法三：在<head></head>之间单独起一行，然后输入 \* x3 n) W& J* `) J; C
复制内容到剪贴板
代码:
<link href="index.css" rel="stylesheet" type="text/css" />3、编写css9 ?, W! |/ R! o6 S% b! p' P
index.html初步编写完毕。记得保存。
& T3 T7 v$ J: f6 s1 r( U/ z4 g源文件切换至index.css(css部分不加以解释，请大家自行阅读本版相关文章)
$ P- _6 `: N' A; ]6 H3 \8 \8 z: R2 b! `! n b+ Q; d
首先输入以下代码（全局控制部分）：参考：
. s, E. G3 r' z9 k复制内容到剪贴板
代码:
* { word-wrap: break-word; }
body { background: #FFF; text-align: center; }
body, td, input, textarea, select, button { color: #535353; font: 12px/1.6em Arial,Helvetica,sans-serif; }
body, ul, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
a { color: #262626; text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: none; }
em, cite, strong, th { font-style: normal; font-weight: normal; }
table { empty-cells: show; border-collapse: collapse; }
body {
font-size: 12px;
font-family: Tahoma, Arial;
margin: 0px;
padding: 0px;
}
img{
border: 0px none;
height:auto;
}
select {
font-size: 12px;
font-family: Tahoma, Arial;
color: #000000;
background-color: #FFFFFF;
}
td {
word-break: break-all;
}; B# P$ [% x$ Z9 Y3 p
css源文件参考： 0 T$ n! |4 @& r7 O& R6 ?
- R( N9 S# H1 h7 t3 w8 O
$ Z$ D$ x, F$ p* l* X, p然后开始逐行控制& J/ X, u) Q. t" |& [
6 V* R! o5 |- q
