构建DIV+CSS页面
本套教程已经修订，请大家阅读修订版本，谢谢
新手专题教程第一期修订版（1）
新手专题教程第一期修订版（2）
新手专题教程第一期修订版（3）
新手专题教程第一期修订版（4）
新手专题教程第一期修订版（5）
我们在上一章已经把确定了专题的选题和版式。在这一章里，我们就利用Dreamweaver 8中文版，把这个框架一步步构建出来。为了照顾新手，这一章写得很罗唆。请大家有选择性的跳过。文中“【】”表示DW里的菜单、按钮、选项等等。
一、
建站
在桌面上新建个文件夹"bianews"，然后打开Dreamweaver8中文版。以下操作均在Dreamweaver里进行：
1、【站点】－【新建站点】
【站点名称】：网编是怎样练成的
【本地根文件夹】：点右边的文件夹图标，然后选择桌面上的"bianews"文件夹
点选【使用区分大小写的链接检查】
其他按照默认，点击【确定】，专题站点成功建立。
2、【文件】－【新建】(或者Ctrl+N)－左边选【基本页】右边选【HTML】右下角为【XHTML 1.0 Transitional】（即默认选项）－【创建】
3、【修改】－【页面属性】－在跳出的属性界面左边，选择【标题/编码】
【标题】：网编是怎么练成的
【编码】：Unicode （UTF-8）
4、【文件】－【保存】(或者Ctrl+S)－保存到桌面上"bianews"文件夹，命名为"index.html"
5、重复第2个步骤的【文件】－【新建】(或者Ctrl+N)－左边选【基本页】，不过这次右边选【CSS】－【创建】
6、重复第4个步骤【文件】－【保存】(或者Ctrl+S)，把这个文件保存到"bianews"里，命名为"index.css"
好，建站准备工作到此结束。
二、写Xhtml
1、写div部分
切换回index.html，切换到代码界面，在<body></body>之间插入如下代码(注意，全部是小写字母)：
复制内容到剪贴板
代码:
<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文件。
方法一：切换至index.html代码界面，将光标停留在<head>后面，然后左键单击【文件】窗口里的index.css,拖到<head>后边，独立成行（如果看不到【文件】窗口可以按快捷键【F8】）
方法二：切换至index.html，【文本】－【CSS样式】－【附加样式表】－【浏览】－选择刚才新建的index.css－【确定】
方法三：在<head></head>之间单独起一行，然后输入
复制内容到剪贴板
代码:
<link href="index.css" rel="stylesheet" type="text/css" />3、编写css
index.html初步编写完毕。记得保存。
源文件参考：
index v1.0.rar (842 Bytes)
切换至index.css(css部分不加以解释，请大家自行阅读本版相关文章)
首先输入以下代码（全局控制部分）：
复制内容到剪贴板
代码:
* { 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;
}css源文件参考：
css v1.0.rar (535 Bytes)
然后开始逐行控制
[
本帖最后由 乌龙 于 2008-8-17 08:05 编辑 ]
