- UID
- 47923
- 好友
- 20
- 帖子
- 940
- 精华
- 12
- 记录
- 0
- 积分
- 1682
- 日志
- 0
- 牛币
- 0 枚
- 在线时间
- 737 小时
- 热心度
- 0 °
- 训练值
- 0
- 职务
- 编辑
- 阅读权限
- 30
- 注册时间
- 2008-1-2
- 最后登录
- 2011-7-29
 
签到天数: 3 天 [LV.2]偶尔看看I - UID
- 47923
- 帖子
- 940
- 牛币
- 0 枚
- 热心度
- 0 °
- 训练值
- 0
- 阅读权限
- 30
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新手专题教程第一期</title>
<style type="text/css">
<!--
#oolong {
width:99%;
font-size: 12px;
text-align: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
line-height:1.5em;
}
#oolong p {
text-indent:2em;
line-height:1.5em;
margin-top:2px;
}
#oolong h2 {
font-size:11pt;
margin:3px;
}
#oolong img {
margin:3px;
}
#oolong h4 {
font-size:12px;
color:#FF0000;
margin:3px;
}
#oolong A:link, A:active{
color: #333366;
text-decoration: none;
}
#oolong A:visited{
color: #333366;
text-decoration: none;
}
#oolong A:hover{
color: #FF0000;
text-decoration: underline;
}
#oolong .code {
font-family:"Verdana" , "Courier New", "Courier", "mono";
font-size: 12px;
line-height: 18px;
color: #000000;
background-color: #DDEDFB;
margin: 5px;
padding: 5px;
width: 700px;
border: 1px solid #0099CC;
display:block;
}
#oolong .topictitle {
font-size:24px;
font-weight:bold;
text-align:center;
margin:3px;
color:#FF0000;
}
-->
</style>
</head>
<body>
<div id="oolong">
<div class="topictitle">选题和版式</div>
<p>教程初定分4个帖子：</p>
<ul>
<li>选题和版式确定</li>
<li>构建DIV+CSS页面</li>
<li>布置内容</li>
<li>美化</li>
</ul>
<p>先看看效果：<a href="http://blog.gzauto.edu.cn/topic/bianews/" target="_blank">http://blog.gzauto.edu.cn/topic/bianews/</a> (打开网速可能有点慢，请大家稍等)</p>
<p>这是第一期教程，以本版内容为主题做一个示范专题。然后根据大家的反馈情况，对第一期教程的内容进行调整，同时开始准备第二期教程。</p>
<h2>一、首先是热身阅读。</h2>
<p>先对专题有一个大概的了解。这部分内容节选自论坛内不同的帖子：</p>
<p><a href="http://bbs.bianews.com/thread-28270-1-6.html" target="_blank">http://bbs.bianews.com/thread-28270-1-6.html</a></p>
<h2>二、选题。</h2>
<p>这里要做的教程就以本版内容为例咯。</p>
<div class="code">
专题名称：网编是怎样炼成的
<br />
专题内容：全在这个索引帖里了——<a href="http://bbs.bianews.com/thread-28023-1-1.html" target="_blank">http://bbs.bianews.com/thread-28023-1-1.html
</a><br />
专题版面结构：
<ul>
<li>logo、banner、menu</li>
<li> 入门(html、css、dw)</li>
<li>进阶(色彩、图文、布局)</li>
<li>实例教程</li>
<li>资源下载</li>
</ul>
</div>
<p>内容才是一个专题的灵魂。页面什么的只是一种载体。不过这里我也只能写写载体的搭建教程。至于如何做出有内涵的专题，请大家多留意《网编经验》的帖子。 </p>
<h2>三、确定布局 </h2>
<p><img src="http://bbs.bianews.com/attachments/20080609_407e19e4646910eb6ab8ntYYWC9qPzZj.gif" width="500" height="441" /></p>
<h2>四、布局</h2>
<p>这里，我按照番茄的方法，画了一个div布局图。这个布局图很明显地表明了不同的div之间的关系：</p>
<p><img src="http://bbs.bianews.com/attachments/20080611_19dd573c3118dde8b3cbtXmUtw7SAle9.jpg" /></p>
<div class="code">
|body{}<br />
|_#container{}<br />
|_#header{}<br />
|_#logo{}<br />
|_#banner{}<br />
|_#menu<br />
|_#base{}<br />
|_#html{}<br />
|_#css{}<br />
|_#dw{}<br />
|_#advanced{}<br />
|_#color<br />
|_#pic<br />
|_#lay<br />
|_#other{}<br />
|_#down<br />
|_#example<br />
|_#footer</div>
<p>怎样把直观的图片变成代码呢？在每个框的开头加上</p>
<h4><div id="框的名字"></h4>
<p> 框的结尾加上</p>
<h4></div></h4>
<p> 然后按照整个图的顺序，从左到右、从上到下把代码排列起来。完整代码如下<br />
(适当增加段落缩进，便于看清div之间的关系(<!---->为注释部分，可以删去)：</p>
<div class="code"><div id="container"> <!--页面容器层开始--><br />
<div id="header"><!--页面头部（第一行容器）开始--><br />
<div id="logo"><!--logo（第一行左列）开始--><br />
</div><!--logo（第一行左列）结束--><br />
<div id="banner"><!--banner（第一行右列）开始--><br />
</div><!--banner（第一行右列）结束--><br />
</div><!--页面头部（第一行容器）结束--><br />
<br />
<div id="menu"><!--菜单（第二行容器）开始--><br />
</div><!--菜单（第二行容器）结束--><br />
<br />
<div id="base"><!--基础知识行（第三行容器）开始--><br />
<div id="html"><!--html（第三行左列）开始--><br />
</div><!--html（第三行左列）结束--><br />
<div id="css"><!--css（第三行中列）开始--><br />
</div><!--css（第三行中列）结束--><br />
<div id="dw"><!--dw（第三行右列）开始--><br />
</div><!--dw（第三行右列）结束--><br />
</div><!--基础知识行（第三行容器）结束--><br />
<br />
<div id="advanced"><!--进阶知识行（第四行容器）开始--><br />
<div id="color"><!--色彩（第四行左列）开始--><br />
</div><!--色彩（第四行左列）结束--><br />
<div id="pic"><!--图文排版（第四行中列）开始--><br />
</div><!--图文排版（第四行中列）结束--><br />
<div id="lay"><!--页面布局（第四行右列）开始--><br />
</div><!--页面布局（第四行右列）结束--><br />
</div><!--进阶知识行（第四行容器）结束--><br />
<br />
<div id="other"><!--其他内容（第五行容器）开始--><br />
<div id="down"><!--资源下载（第五行左列）开始--><br />
</div><!--资源下载（第五行左列）结束--><br />
<div id="example"><!--实例（第五行右列）开始--><br />
</div><!--实例（第五行右列）结束--><br />
</div><!--其他内容（第五行容器）结束--><br />
<br />
<div id="footer"><!--版权信息行（第六行容器）开始--><br />
</div><!--版权信息行（第六行容器）结束--><br />
<br />
</div><!--页面容器层结束--></div>
<p>选题和版式部分到此结束。这一节中有些地方不是很科学。例如div的命名。大家可以参考DW版的其他帖子。<br />
附上上面那个div布局图的psd原图：<a href="http://bbs.bianews.com/attachment.php?aid=7889" target="_blank">http://bbs.bianews.com/attachment.php?aid=7889</a></p>
<h2>教程导读</h2>
<div class="code">
<a href="http://bbs.bianews.com/thread-39854-1-7.html" target="_blank">新手专题教程第一期修订版（1）</a> <br />
<br />
<a href="http://bbs.bianews.com/thread-39862-1-7.html" target="_blank">新手专题教程第一期修订版（2）</a> <br />
<br />
<a href="http://bbs.bianews.com/thread-39863-1-7.html" target="_blank">新手专题教程第一期修订版（3）</a><br />
<br />
<a href="http://bbs.bianews.com/thread-39875-1-7.html" target="_blank">新手专题教程第一期修订版（4）</a><br />
<br />
<a href="http://bbs.bianews.com/thread-39877-1-7.html" target="_blank">新手专题教程第一期修订版（5）</a><br />
<br />
<a href="http://bbs.bianews.com/thread-39878-1-7.html" target="_blank">附录1-基本操作</a><br />
<br />
<a href="http://bbs.bianews.com/thread-39879-1-7.html" target="_blank">附录2-css逐行解释</a><br />
<br />
<a href="http://bbs.bianews.com/thread-35528-1-2.html" target="_blank">新手专题教程第一期（答疑）</a><br />
<br />
<a href="http://blog.gzauto.edu.cn/topic/bianews/" target="_blank">专题效果预览</a></div>
</div>
</body>
</html>
[ 本帖最后由 乌龙 于 2008-8-10 19:44 编辑 ] |
|
发表于 2008-8-9 21:14
发表于 2008-10-6 14:48
