查看完整版本: 新手专题教程第一期（4）

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

[align=center][size=4][color=blue][b]布置内容[/b][/color][/size][/align]本套教程已经修订，请大家阅读修订版本，谢谢

[url=http://bbs.bianews.com/thread-39854-1-7.html][color=#000000]新手专题教程第一期修订版（1）[/color][/url]

[url=http://bbs.bianews.com/thread-39862-1-7.html][color=#000000]新手专题教程第一期修订版（2）[/color][/url]

[url=http://bbs.bianews.com/thread-39863-1-7.html][color=#000000]新手专题教程第一期修订版（3）[/color][/url]

[url=http://bbs.bianews.com/thread-39875-1-7.html][color=#000000]新手专题教程第一期修订版（4）[/color][/url]

[url=http://bbs.bianews.com/thread-39877-1-7.html][color=#000000]新手专题教程第一期修订版（5）[/color][/url]
[img]http://bbs.bianews.com/images/default/logo.gif[/img]
(另存为logo.gif)

[attach]7917[/attach]
（另存为banner.gif）

素材准备：在bianews文件夹里新建一个文件夹images，把logo.gif和banner.gif放进去
[b]css代码里的背景颜色记得去掉[/b]

需要布置内容的div一共有12个，分为以下5种类型：
1、[color=seagreen][b]布置图片[/b][/color]——#logo和#banner
2、[color=seagreen][b]布置菜单[/b][/color]——#menu
3、[color=seagreen][b]布置文章列表[/b][/color]——
#html
#css
#dw
#color
#pic
#lay
4、[color=seagreen][b]布置图文信息[/b][/color]——#down、#example
5、[color=seagreen][b]版权信息[/b][/color]——#footer

下面分别对这5种类型的内容布置进行讲解。在这个专题里也好，在其他网站里也好，同一类型的布置方法是可以相同的，大家注意触类旁通，甚至背下来都可以，以后照搬就是。

[size=4][b]1、布置图片
[/b][/size]布置图片有两种方法：插入图片和使用背景图

[b][color=blue]1.1插入图片[/color][/b]（可以对图片设置超链接）
如果要在#logo插入图片logo.gif,直接在dw里把【文件】窗口(如果没看到【文件】窗口，按F8)里的logo.gif直接拖到[code]<div id="logo"><!--logo（第一行左列）开始-->[/code]和[code]</div><!--logo（第一行左列）结束-->[/code]之间。即：
[quote]
<div id="logo"><!--logo（第一行左列）开始-->
<img src="images/logo.gif" /></div><!--logo（第一行左列）结束-->[/quote]

[color=blue][b]1.2使用背景图[/b][/color]（不能对图片设置超链接）
找到css里的[code]#logo {float: left;width: 289px; height:86px; } [/code](背景颜色已经去掉)
[quote]
a.把光标放在任一个"；"后面（紧跟在"；"后面不留空格），敲空格，dw就会出现代码提示框；
b.继续输入b,可以看到代码提示框里第一个b开头的代码已经变成深色；
c.使用键盘上下方向键选择([b]background[/b])、回车（或者鼠标双击），会出现新的代码提示框；
d.同样使用方向键选择、回车或者鼠标双击"[b]url[/b]";
e.在弹出来的窗口中选择images文件夹下的logo.gif；
f.css部分增加了一段代码：[code]background:url(images/logo.gif)[/code]（注意没有分号）
g.紧接着再来一个空格，又出现了新的代码提示框，输入n，选择[b]no-repeat[/b]，并在后面紧跟着补充输入一个";"
图片添加成功。
[/quote]
你也可以在#logo{}里边，任一个";"后面，直接输入这段代码：[code]background:url(images/logo.gif) no-repeat;[/code]（注意有分号）
在此我们采用第二种，使用背景图。修改后的代码如下：
[quote]
#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;}
[/quote]

[size=4][b]2、布置菜单
[/b][/size]找到
[quote]
<div id="menu"><!--菜单（第二行容器）开始-->
</div><!--菜单（第二行容器）结束-->
[/quote]
在[code]<div id="menu"><!--菜单（第二行容器）开始-->[/code]和[code]</div><!--菜单（第二行容器）结束-->[/code]之间（[i]在哪里插入代码好像没有必要详细说，这里再提一次，下面不再说明[/i]）
插入以下代码：
[quote]
<ul>
    <li><a href="[url=http://www.bianews.com/]http://www.bianews.com[/url]" target="_blank">鞭牛士首页</a></li>
    <li><a href="[url=http://bbs.bianews.com/]http://bbs.bianews.com[/url]" target="_blank">鞭牛士社区</a></li>
    <li><a href="[url=http://bbs.bianews.com/contacts.php]http://bbs.bianews.com/contacts.php[/url]" target="_blank">网编数据库</a></li>
    <li><a href="[url=http://bbs.bianews.com/forum-125-1.html]http://bbs.bianews.com/forum-125-1.html[/url]" target="_blank">DW教程专区</a></li>
    <li><a href="[url=http://bbs.bianews.com/forum-105-1.html]http://bbs.bianews.com/forum-105-1.html[/url]" target="_blank">网编访谈</a></li>
    <li><a href="[url=http://bbs.bianews.com/forum-65-1.html]http://bbs.bianews.com/forum-65-1.html[/url]" target="_blank">圈子招聘</a></li>
    <li><a href="[url=http://serverbbs.ccw.com.cn/]http://serverbbs.ccw.com.cn[/url]" target="_blank">技术支持</a></li>
</ul>
[/quote]
<ul>和</ul>是整个菜单的开头结尾，<li>和</li>是每个菜单项的开头结尾。
要增加菜单项，只需切换回【设计】窗口，光标停留在某个菜单项后，回车转行，输入新菜单项即可
css部分插入以下代码：
[quote]
#menu ul li{
float:left;
text-align:center;
}
[/quote]

到此菜单添加完毕。保存，按下F12预览效果吧

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

3、布置文章列表
一共有六个div需要插入文章列表。他们有许多特性会是相同的，例如高度、宽度、样式等等。这里要用到“类”
首先，在每个div里(#html、#css、#dw、#color、#pic、#lay)插入两个子div
[quote]
<div class="title">
</div>
<div class="list">
</div>
[/quote]
给他们指定高度，css代码：
[quote]
.title {
height:20px;
}
.list {
height:180px;
}
[/quote]
现在开始添加文字：
在每个<div class="title"></div>里输入对应的列表标题
在每个<div class="list"></div>里输入：
[quote]
<ul>
<li><a href=""></a></li>
</ul>
[/quote]
跟上一节一样，<ul></ul>是列表的开头和结尾，<li></li>是列表项的开头结尾

以上是添加文字的方法。不过输入代码太繁琐。另一种方法：
切换回index.html的【设计】界面
然后，找到各个.title的位置，输入对应的标题；（图）
找到各个.list位置，插入列表（图），然后把论坛里的带有链接的标题逐行复制进去（每个列表8篇文章）
ps：如果【设计】界面出现显示错位的，请检查是否忘了把css里边测试效果用的背景色全部去掉

[attach]7918[/attach]

这一步是体力活。大家可以直接下载完成了的index.html看源代码：
[attach]7919[/attach]

[[i] 本帖最后由 乌龙 于 2008-8-10 11:54 编辑 [/i]]

[size=4][b]4、布置图文信息[/b][/size]

[attach]7923[/attach]保存到images文件夹，另存为1.jpg
[attach]7924[/attach]保存到images文件夹，另存为2.jpg
[attach]7925[/attach]保存到images文件夹，另存为3.jpg
[attach]7926[/attach]保存到images文件夹，另存为4.jpg

如果大家已经明白了上一节的布置文章列表，那么这一节应该不难理解了。
首先，先熟悉一下什么是dl列表：[url=http://bbs.bianews.com/thread-35403-1-1.html]http://bbs.bianews.com/thread-35403-1-1.html[/url]
然后，在每个div里插入（#down、#example）两个子div
[quote]
<div class="[b]title[/b]">
</div>
<div class="[b]piclist[/b]">
</div>
[/quote]
在每个<div class="title"></div>里输入对应的列表标题（跟文章列表一样）
[i]（在【设计】窗口预览可能会错位，所以尽量在【代码】窗口编辑）[/i]
在每个<div class="piclist"></div>里输入：
[quote]
<dl>

<dd>
<a href=""><img src=""></a>
<a href=""></a>
</dd>

<dd>
<a href=""><img src=""></a>
<a href=""></a>
</dd>

</dl>
[/quote]
类似于前两节，<dl></dl>是列表的开头和结尾，<dd></dd>是列表项的开头结尾;
每个dd里边有两个<a>标签，第一个用于插入图片，第二个插入对应的文字
这个例子中，每个列表里使用两个列表项
[size=3][color=seagreen][b]xhtml部分：
[/b][/color][/size][quote]
    <div id="other"><!--其他内容（第五行容器）开始-->
        <div id="down"><!--资源下载（第五行左列）开始-->
  [b]<div class="title">
资源下载</div>
<div class="piclist">
<dl>
<dd>
<a href="http://bbs.bianews.com/thread-29883-1-1.html"><img src="images/1.jpg"></a>
<a href="http://bbs.bianews.com/thread-29883-1-1.html">《CSS网站布局实录》强烈推荐</a>
</dd>
<dd>
<a href="http://bbs.bianews.com/thread-30178-1-2.html"><img src="images/2.jpg"></a>
<a href="http://bbs.bianews.com/thread-30178-1-2.html">1000个16x16像素PNG格式网页小图标</a>
</dd>
</dl>
</div>[/b]
  </div><!--资源下载（第五行左列）结束-->
        <div id="example"><!--实例（第五行右列）开始-->
  [b]<div class="title">
实例教程</div>
<div class="piclist">
<dl>
<dd>
<a href="http://bbs.bianews.com/thread-31039-1-4.html"><img src="images/3.jpg"></a>
<a href="http://bbs.bianews.com/thread-31039-1-4.html">网页的布局实战</a>
</dd>
<dd>
<a href="http://bbs.bianews.com/thread-31521-1-1.html"><img src="images/4.jpg"></a>
<a href="http://bbs.bianews.com/thread-31521-1-1.html">专题快速上手教程</a>
</dd>
</dl>
</div>[/b]
  </div><!--实例（第五行右列）结束-->
  <div class="clear"></div>
    </div><!--其他内容（第五行容器）结束-->
[/quote]
[size=3][color=seagreen][b]css部分：
[/b][/color][/size][quote]
.piclist dl dd{
float:left;
display:inline;
text-align:center;
line-height:31px;
}
.piclist dl dd a{
display:block;
}
[/quote]
呼...终于快完了。F12吧，接着进入最后一节：

[size=4][b]5、布置版权信息[/b][/size]
[size=4][/size]这个好办...
打开清风大哥的网编访谈专题：[url=http://bbs.bianews.com/topic/fangtan]http://bbs.bianews.com/topic/fangtan[/url]
查看源代码，找到下边这段

[quote]
<a href="http://www.bianews.com">鞭牛士网络编辑社区</a> -
<a href="mailto:editor#bianews.com">联系我们</a> -
<a href="http://www.bianews.com/action/site/type/about.html">关于我们</a> -
<a href="mailto:laohou.lover@gmail.com">专题报错</a> -
<a href="http://www.bianews.com/action/site/type/map.html">站点地图</a> -
<a href="http://www.bianews.com/action/site/type/link.html">友情链接</a><br />  
  Copyright &copy; 2005-2008 <strong><a href="http://www.bianews.com">BIANEWS.COM</a></strong> All rights reserved. <a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备06016495号</a>
[/quote]
然后，放到#footer里边吧...哈哈
呼...这些天写各式各样的东西写到恶心了都，总算把教程写得差不多了。大家保存一下，F12看看效果，是不是跟附件里的一样？
[attach]7927[/attach]
呵呵，丑是丑了点。图片没办法了，俺美工不行。其他部分，如果你还有耐心，请继续看最后一章：“美化”

[b][size=4]教程导读
[/size][/b][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-7-5 02:39 编辑 [/i]]

我再学习

谢谢，浅显易懂，对新手来说相当有用

:victory:

:loveliness: :loveliness:

回复 4# 的帖子

紧跟你的步伐！
:handshake

看看啦

我的footer错误排版啊

怎么层排版有问题

第二个散列的出错了

楼上的朋友，请对比下我发上去的范例，看看是哪里出纰漏了
另外，建议看这套教程的修订版本

非常感谢