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