新手专题教程第一期（1）

乌龙

选题和版式

本套教程已经修订，请大家阅读修订版本，谢谢

新手专题教程第一期修订版（1）

新手专题教程第一期修订版（2）

新手专题教程第一期修订版（3）

新手专题教程第一期修订版（4）

新手专题教程第一期修订版（5）

先看看效果：http://blog.gzauto.edu.cn/topic/bianews/
（打开网速可能有点慢，请大家稍等）

这是第一期教程，以本版内容为主题做一个示范专题。然后根据大家的反馈情况，对第一期教程的内容进行调整，同时开始准备第二期教程。

一、首先是热身阅读，先对专题有一个大概的了解。这部分内容节选自论坛内不同的帖子：
http://bbs.bianews.com/thread-28270-1-6.html

二、选题。这里要做的教程就以本版内容为例咯。

专题名称：网编是怎样炼成的
专题内容：全在这个索引帖里了——http://bbs.bianews.com/thread-28023-1-1.html
专题版面结构：

• logo、banner、menu
• 入门（html、css、dw）
• 进阶（色彩、图文、布局）
• 实例教程
• 资源下载

内容才是一个专题的灵魂。页面什么的只是一种载体。不过这里我也只能写写载体的搭建教程。至于如何做出有内涵的专题，请大家多留意《网编经验》的帖子。

三、确定布局

（丑是丑了点...纯粹是练习示范用，见谅）

四、布局
这里，我按照番茄的方法，画了一个div布局图。这个布局图很明显地表明了不同的div之间的关系：

1. 
   
2. |body{}
   
3. |_#container{}
   
4.    |_#header{}
   
5.      |_#logo{}
   
6.      |_#banner{}
   
7.    |_#menu
   
8.    |_#base{}
   
9.      |_#html{}
   
10.      |_#css{}
    
11.      |_#dw{}
    
12.    |_#advanced{}
    
13.      |_#color
    
14.      |_#pic
    
15.      |_#lay
    
16.    |_#other{}
    
17.      |_#down
    
18.      |_#example
    
19.    |_#footer

复制代码

怎样把直观的图片变成代码呢？在每个框的开头加上
<div id="框的名字">
框的结尾加上
</div>
然后按照整个图的顺序，从左到右、从上到下把代码排列起来。完整代码如下
(适当在开头加入空格，便于看清div之间的关系;<!---->为注释部分，可以删去)：

1. 
   
2. <div id="container"> <!--页面容器层开始-->
   
3.     <div id="header"><!--页面头部（第一行容器）开始-->
   
4.         <div id="logo"><!--logo（第一行左列）开始-->
   
5.         </div><!--logo（第一行左列）结束-->
   
6.         <div id="banner"><!--banner（第一行右列）开始-->
   
7.         </div><!--banner（第一行右列）结束-->
   
8.     </div><!--页面头部（第一行容器）结束-->
   
9. 
   
10.     <div id="menu"><!--菜单（第二行容器）开始-->
    
11.     </div><!--菜单（第二行容器）结束-->
    
12.    
    
13.     <div id="base"><!--基础知识行（第三行容器）开始-->
    
14.         <div id="html"><!--html（第三行左列）开始-->
    
15.         </div><!--html（第三行左列）结束-->
    
16.         <div id="css"><!--css（第三行中列）开始-->
    
17.         </div><!--css（第三行中列）结束-->
    
18.         <div id="dw"><!--dw（第三行右列）开始-->
    
19.         </div><!--dw（第三行右列）结束-->
    
20.     </div><!--基础知识行（第三行容器）结束-->
    
21.    
    
22.     <div id="advanced"><!--进阶知识行（第四行容器）开始-->
    
23.         <div id="color"><!--色彩（第四行左列）开始-->
    
24.         </div><!--色彩（第四行左列）结束-->
    
25.         <div id="pic"><!--图文排版（第四行中列）开始-->
    
26.         </div><!--图文排版（第四行中列）结束-->
    
27.         <div id="lay"><!--页面布局（第四行右列）开始-->
    
28.         </div><!--页面布局（第四行右列）结束-->
    
29.     </div><!--进阶知识行（第四行容器）结束-->
    
30.    
    
31.     <div id="other"><!--其他内容（第五行容器）开始-->
    
32.         <div id="down"><!--资源下载（第五行左列）开始-->
    
33.         </div><!--资源下载（第五行左列）结束-->
    
34.         <div id="example"><!--实例（第五行右列）开始-->
    
35.         </div><!--实例（第五行右列）结束-->
    
36.     </div><!--其他内容（第五行容器）结束-->
    
37.    
    
38.     <div id="footer"><!--版权信息行（第六行容器）开始-->
    
39.     </div><!--版权信息行（第六行容器）结束-->
    
40.    
    
41. </div><!--页面容器层结束-->

复制代码

选题和版式部分到此结束。这一节中有些地方不是很科学。例如div的命名。大家可以参考DW版的其他帖子。
附上上面那个div布局图的psd原图： div布局图.rar (33.53 KB, 下载次数: 579)

2008-6-11 10:26 上传

下载次数: 579

教程导读

新手专题教程第一期（1）

新手专题教程第一期（2）

新手专题教程第一期（3）

新手专题教程第一期（4）

新手专题教程第一期（5）

新手专题教程第一期（答疑）

[ 本帖最后由 乌龙 于 2008-8-17 08:04 编辑 ]

reck

我学习

虾虾

:) 高难度，看不懂 。。div是不好把握滴 。。
学好ps是关键，页面设计好切割放到dr里生成页面填上内容专题就完工啦。呵呵，页面设计没想象的那么复杂。

mzdbxqh

div+css，一时半会还消化不了。表格用习惯了

sperm

谢谢楼主 写得很详细 pfpf

lcsking

来学习DIV+CSS ，之前的知识不够用了~~

coconat

long1147

:L xuexi

大红

好好学习，天天向上

yancuilan

谢谢楼主:)

qingyufei

感觉好复杂的样子啊，一个人看书又看不懂

乌龙

本期教程正在进一步修订，力求深入浅出。敬请期待

techie

学习 学习

lily8675

看不懂啊

izero

从头开始学习