布置内容
本套教程已经修订，请大家阅读修订版本，谢谢
新手专题教程第一期修订版（1）
新手专题教程第一期修订版（2）
新手专题教程第一期修订版（3）
新手专题教程第一期修订版（4）
新手专题教程第一期修订版（5）
(另存为logo.gif)
（另存为banner.gif）
素材准备：在bianews文件夹里新建一个文件夹images，把logo.gif和banner.gif放进去
css代码里的背景颜色记得去掉
需要布置内容的div一共有12个，分为以下5种类型：
1、
布置图片——#logo和#banner
2、
布置菜单——#menu
3、
布置文章列表——
#html
#css
#dw
#color
#pic
#lay
4、
布置图文信息——#down、#example
5、
版权信息——#footer
下面分别对这5种类型的内容布置进行讲解。在这个专题里也好，在其他网站里也好，同一类型的布置方法是可以相同的，大家注意触类旁通，甚至背下来都可以，以后照搬就是。
1、布置图片
布置图片有两种方法：插入图片和使用背景图
1.1插入图片（可以对图片设置超链接）
如果要在#logo插入图片logo.gif,直接在dw里把【文件】窗口(如果没看到【文件】窗口，按F8)里的logo.gif直接拖到
复制内容到剪贴板
代码:
<div id="logo"><!--logo（第一行左列）开始-->和
复制内容到剪贴板
代码:
</div><!--logo（第一行左列）结束-->之间。即：
引用:
<div id="logo"><!--logo（第一行左列）开始-->
<img src="images/logo.gif" /></div><!--logo（第一行左列）结束-->
（不能对图片设置超链接）
找到css里的
复制内容到剪贴板
代码:
#logo {float: left;width: 289px; height:86px; } (背景颜色已经去掉)
引用:
a.把光标放在任一个"；"后面（紧跟在"；"后面不留空格），敲空格，dw就会出现代码提示框；
b.继续输入b,可以看到代码提示框里第一个b开头的代码已经变成深色；
c.使用键盘上下方向键选择(background)、回车（或者鼠标双击），会出现新的代码提示框；
d.同样使用方向键选择、回车或者鼠标双击"url";
e.在弹出来的窗口中选择images文件夹下的logo.gif；
f.css部分增加了一段代码：复制内容到剪贴板
代码:
background:url(images/logo.gif)（注意没有分号）
g.紧接着再来一个空格，又出现了新的代码提示框，输入n，选择no-repeat，并在后面紧跟着补充输入一个";"
图片添加成功。
你也可以在#logo{}里边，任一个";"后面，直接输入这段代码：
复制内容到剪贴板
代码:
background:url(images/logo.gif) no-repeat;（注意有分号）
在此我们采用第二种，使用背景图。修改后的代码如下：
引用:
#logo {float: left;width: 289px; background:url(images/logo.gif) no-repeat; height:86px;}
#banner {float: right;width: 491px; background:url(images/banner.gif) no-repeat; height:86px;}
找到
引用:
<div id="menu"><!--菜单（第二行容器）开始-->
</div><!--菜单（第二行容器）结束-->
在
复制内容到剪贴板
代码:
<div id="menu"><!--菜单（第二行容器）开始-->和
复制内容到剪贴板
代码:
</div><!--菜单（第二行容器）结束-->之间（
在哪里插入代码好像没有必要详细说，这里再提一次，下面不再说明）
插入以下代码：
<ul>和</ul>是整个菜单的开头结尾，<li>和</li>是每个菜单项的开头结尾。
要增加菜单项，只需切换回【设计】窗口，光标停留在某个菜单项后，回车转行，输入新菜单项即可
css部分插入以下代码：
引用:
#menu ul li{
float:left;
text-align:center;
}
到此菜单添加完毕。保存，按下F12预览效果吧
[
本帖最后由 乌龙 于 2008-8-17 08:09 编辑 ]
