选题和版式
本套教程已经修订，请大家阅读修订版本，谢谢
新手专题教程第一期修订版（1）
新手专题教程第一期修订版（2）
新手专题教程第一期修订版（3）
新手专题教程第一期修订版（4）
新手专题教程第一期修订版（5）
先看看效果：http://blog.gzauto.edu.cn/topic/bianews/
（打开网速可能有点慢，请大家稍等）
这是第一期教程，以本版内容为主题做一个示范专题。然后根据大家的反馈情况，对第一期教程的内容进行调整，同时开始准备第二期教程。
一、首先是
热身阅读，先对专题有一个大概的了解。这部分内容节选自论坛内不同的帖子：
http://bbs.bianews.com/thread-28270-1-6.html
二、
选题。这里要做的教程就以本版内容为例咯。
内容才是一个专题的灵魂。页面什么的只是一种载体。不过这里我也只能写写载体的搭建教程。至于如何做出有内涵的专题，请大家多留意《
网编经验》的帖子。
三、确定
布局
（丑是丑了点...纯粹是练习示范用，见谅）
四、
布局
这里，我按照番茄的方法，画了一个div布局图。这个布局图很明显地表明了不同的div之间的关系：
复制内容到剪贴板
代码:
|body{}
|_#container{}
|_#header{}
|_#logo{}
|_#banner{}
|_#menu
|_#base{}
|_#html{}
|_#css{}
|_#dw{}
|_#advanced{}
|_#color
|_#pic
|_#lay
|_#other{}
|_#down
|_#example
|_#footer怎样把直观的图片变成代码呢？在每个框的开头加上
<div id="框的名字">
框的结尾加上
</div>
然后按照整个图的顺序，从左到右、从上到下把代码排列起来。完整代码如下
(适当在开头加入空格，便于看清div之间的关系;
<!---->为注释部分，可以删去)：
复制内容到剪贴板
代码:
<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><!--页面容器层结束-->选题和版式部分到此结束。这一节中有些地方不是很科学。例如div的命名。大家可以参考DW版的其他帖子。
附上上面那个div布局图的psd原图：
div布局图.rar (33.53 KB)
教程导读[
本帖最后由 乌龙 于 2008-8-17 08:04 编辑 ]
