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

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

[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]

　　刚刚闲下来没几天，期末考试强势逼来，时间马上紧得不行，结果后边的教程也是越写越仓促，不足之处，希望大家谅解。对照着前面三章的教程，相信大家的专题的雏形已经出来了，我猜大部分没做过专题的新手此刻是又喜又急。喜的是眼看着一个专题就这么作出来了，急得是专题做到后面，难看得不行。现在，我们就进入最后一个环节：美化。

　　考虑到大多数网编在美工方面不在行，美化这节的教程主要教大家如何借用互联网上的资源。分析html部分不做详细介绍，要求阅读者对html有一定的了解，如果不了解，请先阅读本版相关教程，或者直接跳过分析，只阅读、照搬代码练习。

　　第一期教程不要求大家一次性学会div+css制作专题，只是想让大家先熟悉一下这个制作流程，为下一期的教程打下基础。所以本期教程只要求大家记住这些步骤和一些固定不变的代码，如两列布局和三列布局等等。至于如何理解这些代码，大家在初步熟悉流程以后，在阅读不同教程的过程中，会慢慢理解的。

在开始之前，先对全局做个美化：每个行容器之间没有间隙，都是紧贴着得。这里给它们一个间隙：[code]margin-top:3px; margin-bottom:3px;[/code]加在每个行容器里边(任一个分号后面):#header{}、#menu{}、#base{}、#advanced{}、#other{}、#footer{}

其中
#header{}只需要加margin-bottom:3px;
#footer{}只需要加margin-top:3px;

[b]首先是#menu[/b]，这里使用论坛的菜单样式。
在ie里打开bbs.bianews.com
[attach]7936[/attach]
这个菜单怎么做出来的呢？：
1、在浏览器里：【查看】－【源文件】，可以看到用记事本打开的网页源代码
2、挑选论坛菜单里的个别关键词，例如“短信息”、“会员”、“搜索”等，在源文件里搜索其中一个关键词(ctrl+f)，找到菜单代码所在位置
3、一行一行往上分析该代码，看它被嵌套在哪个div里，经分析，菜单代码所在的div为：<div id="menu">
4、找到css链接：[code] <link rel="stylesheet" type="text/css" href="forumdata/cache/style_1.css" />
<link rel="stylesheet" type="text/css" href="forumdata/cache/style_1_append.css" />[/code]如果熟悉dz论坛的话，就会知道style_1.css才是我们说要找的css，另外一个是空的（不知道的话就全部试一下，hoho）
href后面的就是该css的相对地址。即完整地址是：[url=http://bbs.bianews.com/forumdata/cache/style_1.css]http://bbs.bianews.com/forumdata/cache/style_1.css[/url]
在ie地址栏输入以上网址，默认会用dw打开
5、在dw里ctrl+f,搜索#menu，在所有搜索结果中，挑选出以下代码：
[quote]
#menu { height: 31px; border: 1px solid #CAD9EA; background: #FFF url("../../images/default/menu_bg.gif"); background-repeat:
repeat-x; }
#menu ul { float: right; padding: 4px 10px 0; border-right: 1px solid #FFF; }
  #menu li { float: left; }
   #menu li a { text-decoration: none; float: left; color: #333; padding: 4px 8px 3px; background: url
(../../images/default/menu_itemline.gif) no-repeat 0 6px; }
[/quote]
挑个别解释下吧：
#menu{}里边的[code]background: #FFF url("../../images/default/menu_bg.gif");[/code]是背景，我们得把它下载下来（把鼠标停留在菜单的空白位置，【鼠标右键单击】－【背景另存为】），保存到桌面上的bianews/images
6、我们可以挑选其中部分，放到index.css，最终效果如下：：
[quote]
#menu { margin-left:auto; margin-right:auto;width:778px;height: 31px; border: 1px solid #CAD9EA; background: #FFF url
("images/menu_bg.gif"); background-repeat: repeat-x;  margin-top:3px; margin-bottom:3px;}
#menu ul { float: left; padding: 4px 10px 0; border-right: 1px solid #FFF; }
  #menu li { float: left; }
   #menu li a { text-decoration: none; float: left; color: #333; padding: 4px 8px 3px;}
[/quote]

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

其次是六个文章列表、和两个图文信息。本来打算做两种效果的，发觉教程写太长了，时间又不多，还是只写一种了：

1、给.title加个背景（所有标题栏都是同一个“类”控制的，那就是.title）

[attach]7939[/attach]
(另存为images/title_bg.gif)

[code]background:url(images/title_bg.gif) left bottom no-repeat;[/code]
解释下：.title以该素材为背景，背景图左下角对齐，不重复。
这样，.title长一点，背景图就往右显示多一点，.title短一些，背景图就被遮盖，显示得少一些。这被称为“滑动门”

2、给.title的标题对齐到背景图的蓝色部分，并且加粗
给每个title外围嵌套一个<h1></h1>,如：
[quote]
<div class="title">[b]<h1>[/b]html入门[b]</h1>[/b]</div>
[/quote]
然后在css里控制h1
[quote]
.title h1 {
font-size:9pt;
float:left;
margin-top:5px;
margin-left:12px;
}
[/quote]

3、页面中间一片光秃秃的，现在给.title、.list、.piclist分别加
个边框
分别在.title{}、.list{}、.piclist{}
添加：
[code]border: 1px solid #CAD9EA;[/code]
结果边框都挤在一起了。这个分几部来解决：
上下边框－给.title{}加一个
[code]margin-bottom:-1px;[/code]
左右边框－这个比较麻烦，需要对左中右分别控制
[b]css里新建三个类[/b]
[quote]
.marle {
margin-right:1px;
}
.marmi {
margin-left:1px;
margin-right:1px;
}
.marri {
margin-left:1px;
}
[/quote]

[b]xhtml做以下修改[/b]
然后把左列的.title、.list和.piclist改为
[quote]
<div class="title marle">
<div class="list marle">
<div class="piclist marle">
[/quote]
把中列的.title、.list改为
[quote]
<div class="title marmi">
<div class="piclist marmi">
[/quote]
把右列的.title、.list和.piclist改为
[quote]
<div class="title marri">
<div class="list marri">
<div class="piclist marri">
[/quote]

4、文章列表美化
把文章列表左对齐，调整好距离。
li去掉黑圆点，设置背景（下划虚线）。
[attach]7940[/attach](另存为images/word_bg.gif)

设置文字的背景（左对齐的三角符号）。然后文字左边增加空白，跟背景图片错开。
[attach]7941[/attach]
(另存为images/list.gif)

css完整代码如下：
[quote]
.list ul li{
text-align:left;
margin-bottom:3px;
margin-left:5px;
margin-right:5px;
list-style:none;
background:url(images/word_bg.gif) repeat-x;
}
.list ul li a{
padding-left:15px;
background:url(images/list.gif) left bottom no-repeat;
}
[/quote]

[i]有一篇文章标题太长，我把它改成：“DW网页编辑常用表现的实现方法”了[/i]

5、图文信息美化
修改一下图片之间的距离就好了
css增加一个类
[quote]
.piclist dl dd a img {
margin:15px 12px 10px 18px;
}
[/quote]

最后是版权信息了
为了整个页面的统一，这里也给他一个边框，另外，它跟#other行容器太挤了点，给它点空隙：
[quote]
#footer { margin-left:auto;margin-right:auto;width:778px;height:50px;margin-top:3px; padding-top:15px;border: 1px solid #CAD9EA;}
[/quote]

做完整个页面了。F12一下，感觉哪里还有些别扭。
banner？噢，原谅我，改天我找美工帮我重做一个。
#menu？没错，我也觉得右边太空了一点。我要做一些修改：

在xhtml里
菜单的最前面增加：
[quote]
<li><h1>快速导航：</h1></li>
[/quote]
最后面增加
[quote]
<li><a href="[url=http://bbs.bianews.com/thread-35528-1-1.html]http://bbs.bianews.com/thread-35528-1-1.html[/url]" target="_blank">在线咨询</a></li>
[/quote]
在css里增加[code]#menu li h1 { text-decoration: none; float: left; color: #333; padding: 4px 8px 3px 25px;background:url(images/index.gif) left no-repeat;}[/code][attach]7943[/attach]
(另存为images/index.gif)

最后，最后..在版权信息里给正在做的计世网服务器论坛放了个链接...呵呵，这步就不跟大家说怎么做咯
末了，再玩一下。现在有人说第一页全是文字，太单调了。咋办？
ok，先问个问题：div+css最大的特点是什么？
答案是表现与形式分离。
我们的行容器之间是互不相关的。第一页图片少是吧？好，先把index.html复制、粘贴、重命名为index1.html做个备份。下面开始改：
找到[code]<div id="other"><!--其他内容（第五行容器）开始-->[/code]和[code]</div><!--其他内容（第五行容器）结束-->[/code]然后把上面的代码分别作为开始和结束，全选中这一段代码。剪切。
你高兴把这个图文信息放在哪？第三行？#menu下边？那么
找到   </div><!--菜单（第二行容器）结束-->
回车换行，然后粘贴代码。保存，F12。怎么样？第一页有图片了吧？
它就等于是一个积木。爱怎么搭，随你。

示范站点下载：
[attach]7942[/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]

示范页面：[url]http://blog.gzauto.edu.cn/topic/bianews/[/url]

[[i] 本帖最后由 乌龙 于 2008-7-24 23:55 编辑 [/i]]

我再努力的学习

真是不错的教程

乌龙  的确是高手啊！

先下载，然后慢慢研究

分不够啊啊

多发几个，哈哈

下载

看来哥们

已经建站多年了啊

如果哥们可以的话可以发个用cms作门户站的完整教程吗？非常感谢，以帮助我们这些菜鸟指明一条明路，万分感谢。我的QQ：632713169。想和您交个朋友。

呵呵，cms做整站的教程看样子是吃不消了，我找找转一些这类教程过来。
另外，这套新手专题教程是未修订的，建议大家看另外一套修订版本

很好的教程啊 ，难得啊