从零开始学做专题.doc

从零开始学做专题原帖：/thread-43578-1-1.html本来想了一大段的前言来解释写本文的目的，后来觉得太浪费大家时间，删掉了。先说说我对网编在网页设计制作这一块技能上的理解吧（如果大家有什么不同看法欢迎提出，我会尽力去完善这些教程）。网编日常工作中，跟本版有关的主要有下面几种情况：1、利用cms发布文章例如新闻常识、文字编辑能力、SEO、新闻图片处理等技能这里就不谈了。跟本版有关的就是图文排版。通过记事本、网络编辑工具箱或者Dreamweaver等工具进行基础的排版可以节省很多时间。不过更复杂的排版还是得熟练使用cms的在线编辑器、熟练使用html和css等。个人觉得，各类网站当中，蓝色理想、poco、个人博客的排版是做的比较好的；论坛是做的最差的。本版在这方面的文章暂时空缺。2、制作专题这块内容是本版的建设重心所在。对于制作专题本版对网编的分工是这样的：由于大专题有美工与技术人员配合，网编只需要组织内容。故实际上只有小专题才需要网编自己设计、制作，或者根据已有模板修改。为此，本文从零开始学做专题给大家建议的学习路线是这样的：1、什么是Html和常用的html标签html是基础的基础。这里对大家学习的要求是：你要熟记常用的几个html标签。以下这篇教程清新简洁，建议大家阅读学习：/thread-35529-1-2.html2、什么是css大家应该感谢css。因为它的存在，我们再不用去理会html标签那些复杂的标签属性。从此html标签里除了class=和id=之外，非常的干净！（表单和个别特殊标签除外）这里对大家的要求也不高，只需要了解什么是css，和css一些基本的语法。下面有两套教程供参考：a、/thread-20657-1-2.html 5日精通CSS层叠样式表对于这套教程，你要做的就是看完“第一日”那部分并且熟记。后面四日的内容，可以大概地浏览一遍。b、/thread-37323-1-5.html 编程之邦-CSS-视频教程如果你觉得文字教程太枯燥，那么建议你阅读这套视频教程。同样，认真看完第一章课前须知并熟记；第二章第二章常用选择和属性可以大概地看一遍3、Dreamweaver的基本操作/thread-32121-1-4.html软件的基本操作还是得看看视频教程比较容易上手。文字太难描述了。4、专题实例教程下面隆重推荐本版原创教程，新手专题系列教程。暂时只有第一期，重点教如何利用div+css进行基本的布局和美化。即使经过了上面三个步骤的入门，本篇教程仍显得枯燥。因为这里开始遇到了很多不熟悉甚至没见过的代码。大家看的时候最好准备好纸笔，把不懂的地方记下来。第一期目录：新手专题教程第一期修订版(1)新手专题教程第一期修订版(2)新手专题教程第一期修订版(3)新手专题教程第一期修订版(4)新手专题教程第一期修订版(5)附录1-基本操作附录2-css逐行解释新手专题教程第一期(答疑)专题效果预览第二期正在筹备中.5、知识碎片积累和案例积累经过简单的入门后，如果不是打算学精，那么就没什么必要进行系统的学习了（如果要进一步学习，最好到其他专业的论坛。本版仅限于网编实用级别的技术教学）。这个阶段，更多的是需要积累。积累零碎的知识碎片和经验，多看看别人的专题是怎么做的。比方说大家可以把这个板块的帖子都认真看看。/thread-28023-1-1.html新手专题教程第一期修订版（1）选题和版式教程初定分4个帖子： 选题和版式确定 构建DIV+CSS页面 布置内容 美化先看看效果：/topic/bianews/ (打开网速可能有点慢，请大家稍等)这是第一期教程，以本版内容为主题做一个示范专题。然后根据大家的反馈情况，对第一期教程的内容进行调整，同时开始准备第二期教程。一、首先是热身阅读。先对专题有一个大概的了解。这部分内容节选自论坛内不同的帖子：/thread-28270-1-6.html二、选题。这里要做的教程就以本版内容为例咯。专题名称：网编是怎样炼成的 专题内容：全在这个索引帖里了/thread-28023-1-1.html 专题版面结构： logo、banner、menu 入门(html、css、dw) 进阶(色彩、图文、布局) 实例教程 资源下载内容才是一个专题的灵魂。页面什么的只是一种载体。不过这里我也只能写写载体的搭建教程。至于如何做出有内涵的专题，请大家多留意网编经验的帖子。 三、确定布局 四、布局这里，我按照番茄的方法，画了一个div布局图。这个布局图很明显地表明了不同的div之间的关系：|body|_#container |_#header |_#logo |_#banner |_#menu |_#base |_#html |_#css |_#dw |_#advanced |_#color |_#pic |_#lay |_#other |_#down |_#example |_#footer怎样把直观的图片变成代码呢？在每个框的开头加上框的结尾加上然后按照整个图的顺序，从左到右、从上到下把代码排列起来。完整代码如下(适当增加段落缩进，便于看清div之间的关系(为注释部分，可以删去)： 选题和版式部分到此结束。这一节中有些地方不是很科学。例如div的命名。大家可以参考DW版的其他帖子。附上上面那个div布局图的psd原图：/attachment.php?aid=7889新手专题教程第一期修订版（2）构建DIV+CSS页面我们在上一章已经把确定了专题的选题和版式。在这一章里，我们就利用Dreamweaver 8中文版，把这个框架一步步构建出来。一、建站在桌面上新建个文件夹bianews，然后打开Dreamweaver8中文版。以下操作均在Dreamweaver里进行1. 新建站点，站点名称为“网编是怎样练成的”；本地根文件夹为桌面上的“bianews”文件夹 2. 新建页面，保存在bianews文件夹根目录，命名为“index.html”；编码为utf-8 3. 新建css，保存在bianews文件夹根目录，命名为“index.css”好，建站准备工作到此结束。二、写Xhtml1、写div部分切换回index.html，切换到代码界面，在之间插入如下代码(注意，全部是小写字母)： 2、给index.html链接css文件3、编写cssindex.html初步编写完毕。记得保存。 源文件参考：/attachment.php?aid=7890切换至index.css(css部分解释请阅读附录2-css逐行解释)首先输入以下代码【全局控制部分】：* word-wrap: break-word; body background: #FFF; text-align: center; body, td, input, textarea, select, button color: #535353; font: 12px/1.6em Arial,Helvetica,sans-serif; body, ul, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset margin: 0; padding: 0; h1, h2, h3, h4, h5, h6 font-size: 1em; a color: #262626; text-decoration: none; a:hover text-decoration: underline; a img border: none; em, cite, strong, th font-style: normal; font-weight: normal; table empty-cells: show; border-collapse: collapse; body font-size: 12px; font-family: Tahoma, Arial; margin: 0px; padding: 0px;img border: 0px none; height:auto;select font-size: 12px; font-family: Tahoma, Arial; color: #000000; background-color: #FFFFFF;td word-break: break-all; css源文件参考： /attachment.php?aid=7898然后开始【逐行控制】先看看这个帖子：/thread-35041-1-1.html这个帖子里边列举了很多种情况。这里我们直接套用里边的布局先给总容器一个宽度#container width:100%;第一行#header，logo和banner，要套用里边“单行两列”的布局即规定#header、#logo和#banner的宽度、高度，然后header居中对齐，最后logo向左浮动，banner向右浮动把原例子修改一下，把#后边的名字改成我们自己的，修改下宽度高度，就可以了代码如下：#header width: 780px;margin-right: auto; margin-left: auto;overflow: auto;#logo float: left;width: 289px; height:86px; background-color:#0000FF; #banner float: right;width: 491px;height:86px;background-color:#FFFF00; css黑色加粗部分为背景色，纯粹用于测试效果。测试结束后记得删掉。包括后边的一个分号以上是单行2列的布局，如果网页仅有这一行容器，那么上面的css代码就算是完成了。 而实际上，如果几个行容器从上到下层叠的时候，需要在容器末尾加上一个clear。 这里是一个难点。下面给大家两个选择：1. 个人建议，新手先记住这个步骤，以后再慢慢看教程，理解clear的含义 2. 如果大家觉得不明白这个clear的话会看不下去，那么建议你先阅读以下帖子：/thread-35236-1-1.html或者蓝色理想的系列教程：/tech/web/2007/4545.asp那么什么时候要加clear呢？ 看图：即#header部分要修改成这样子(黑体字为增加部分)： logo banner css部分增加：.clear clear: both; height:1px; margin-top:-1px; overflow:hidden;至此，第一行已经成功漂浮了。大家可以把index.html和index.css保存后，按F12预览效果那个logo和banner是不是在同一行并排了呢(看背景色)？是的话，很好，第一步成功了。 新手专题教程第一期修订版（3）构建DIV+CSS页面（2）第二行#menu只有一列，套用“单行单列”的布局即规定#menu宽度、高度，还有居中对齐css部分代码如下（黑色加粗部分是背景色，方便大家看效果。记得去除，以下不再罗唆）：#menu margin-left:auto; margin-right:auto;width:780px;height:25px;background-color:#CCCCCC;第三行#base比较棘手，是一行三列的布局，套用“单行三列”“float定位一”的布局首先要在xhtml部分做以下修改（不记得怎么改的复习这里：/thread-31591-1-1.html）： css部分：#base width:780px; height:auto;#left1 float:left; width:520px;#html float:left; width:260px; height:200px; background-color:#0000CC;#css float:right; width:260px;height:200px;background-color:#00FFFF;#dw float:right; width:260px;height:200px;background-color:#FFFF00; 第三行的布局到此结束。大家可以按下F12看看效果了。 接下来的布局工作很轻松，因为布局方式都是重复的。1. 第四行#advanced是单行三列，跟第三行#base相同（除了div名、宽度、高度要做修改，下同）； 2. 第五行#other是单行两列，跟第一行#header相同； 3. 第六行#footer单行单列，跟第二行#menu相同。于是分别写出第四、五、六三行的xhtml和css第四行#advancedxhtml： css：#advanced width:780px; height:auto;#left2 float:left; width:520px; #color float:left; width:260px;height:200px; background-color:#FFFF00;#pic float:right; width:260px;height:200px; background-color:#0000CC; #lay float:right; width:260px; height:200px;background-color:#00FFFF;第五行#otherxhtml: css:#other width: 780px;margin-right: auto; margin-left: auto;overflow: auto;#down float: left;width: 390px; height:200px;background-color:#00FFFF;#example float: right;width: 390px; height:200px;background-color:#FFFF00; 第六行#footer(只有一列，不用加入clear，所以只需要修改css)css：#footer margin-left:auto;margin-right:auto;width:780px;height:50px;background-color:#0000CC; ok，按下F12，一个不同色块相间的拼图是不是已经出现在你眼前了呢？接下来，我们补充完最后一段代码，布局部分的工作就基本完成了。最后一段css代码是：#containermin-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth 1200? 1200px : auto); 还记得最外层的#container么？其实在这个固定宽度的页面里，他可有可无。以上代码的意思是：最小宽度600px；最大宽度1200px（注意黑体加粗部分）呵呵，这个就是自适应宽度的代码。当我们对最外层的div设置了最小最大宽度，里边其他行容器只需要把宽度设置为100，就可以实现自动适应窗口大小了。这个我会在以后的教程里用到。 好了，第二节构建DIV+CSS页面就到这里。附件：/attachment.php?aid=7912新手专题教程第一期修订版（4）布置内容(另存为logo.gif)(另存为banner.gif)素材准备在bianews文件夹里新建一个文件夹images，把logo.gif和banner.gif放进去css代码里的背景颜色记得去掉需要布置内容的div一共有12个，分为以下5种类型：1、布置图片#logo和#banner2、布置菜单#menu3、布置文章列表#html#css#dw#color#pic#lay4、布置图文信息#down、#example5、版权信息#footer下面分别对这5种类型的内容布置进行讲解。在这个专题里也好，在其他网站里也好，同一类型的布置方法是可以相同的，大家注意触类旁通，甚至背下来都可以，以后照搬就是。1、布置图片布置图片有两种方法：插入图片和使用背景图1.1插入图片（可以对图片设置超链接）在#logo插入图片logo.gif，就在和之间插入图片，修改后代码如下：1.2使用背景图（不能对图片设置超链接）找到css里以下这段：#logo float: left;width: 289px; height:86px; 在任一个“;”后面，添加以下代码：background:url(images/logo.gif) no-repeat;修改后的代码如下(banner也一并加入了)：#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; 2、布置菜单在xhtml中找到以下代码：在两行之间加入以下代码： 鞭牛士首页 鞭牛士社区 网编数据库 DW教程专区 网编访谈 圈子招聘 技术支持css部分加入以下代码：#menu ul lifloat:left;text-align:center;到此菜单添加完毕。保存，按下F12预览效果吧3、布置文章列表一共有六个div需要插入文章列表。他们有许多特性会是相同的，例如高度、宽度、样式等等。这里要用到“类”首先，在每个div里(#html、#css、#dw、#color、#pic、#lay)插入两个子div给他们指定高度，在css部分添加以下代码：.title height:20px;.list height:180px;现在开始添加文字： 在每个里输入对应的列表标题在每个里输入：跟上一节一样，是列表的开头和结尾，是列表项的开头结尾以上是添加文字的方法。不过输入代码太繁琐。另一种方法：1. 切换回index.html的【设计】界面 2. 找到各个.title的位置，输入对应的标题；（图） 3. 找到各个.list位置，插入列表（图），然后把论坛里的带有链接的标题逐行复制进去（每个列表8篇文章）ps：如果【设计】界面出现显示错位的，请检查是否忘了把css里边测试效果用的背景色全部去掉这一步是体力活。大家可以直接下载完成了的index.html看源代码：/attachment.php?aid=79194、布置图文信息保存到images文件夹，另存为1.jpg保存到images文件夹，另存为2.jpg保存到images文件夹，另存为3.jpg保存到images文件夹，另存为4.jpg如果大家已经明白了上一节的布置文章列表，那么这一节应该不难理解了。1. 先熟悉一下什么是dl列表：/thread-35403-1-1.html 2. 然后，在每个div里插入（#down、#example）两个子div在每个里输入对应的列表标题（跟文章列表一样）（在【设计】窗口预览可能会错位，所以尽量在【代码】窗口编辑）在每个里输入：类似于前两节，是列表的开头和结尾，是列表项的开头结尾; 每个dd里边有两个标签，第一个用于插入图片，第二个插入对应的文字 这个例子中，每个列表里使用两个列表项xhtml部分： 资源下载CSS网站布局实录强烈推荐1000个16x16像素PNG格式网页小图标 实例教程网页的布局实战专题快速上手教程 css部分：.piclist dl ddfloat:left;display:inline;text-align:center;line-height:31px;.piclist dl dd adisplay:block;呼.终于快完了。F12预览一下吧，接着进入最后一节：5、布置版权信息这个好办. 打开清风大哥的网编访谈专题：/topic/fangtan， 查看源代码，找到下边这段鞭牛士网络编辑社区 - 联系我们 - 关于我们 - 专题报错 - 站点地图 - 友情链接 Copyright ? 2005-2008 BIANEWS.COM All rights reserved. 京ICP备06016495号然后，放到#footer里边吧.嘿嘿.套用现成的保存一下，再F12预览效果吧。然后下载这个：/attachment.php?aid=7927 对比一下代码，看看有没有什么漏洞。新手专题教程第一期修订版（5）美化考虑到大多数网编在美工方面不在行，美化这节的教程主要教大家如何借用互联网上的资源。分析html部分不做详细介绍，要求阅读者对html有一定的了解，如果不了解，请先阅读本版相关教程，或者直接跳过分析，只阅读、照搬代码练习。第一期教程不要求大家一次性学会div+css制作专题，只是想让大家先熟悉一下这个制作流程，为下一期的教程打下基础。所以本期教程只要求大家记住这些步骤和一些固定不变的代码，如两列布局和三列布局等等。至于如何理解这些代码，大家在初步熟悉流程以后，在阅读不同教程的过程中，会慢慢理解的。在开始之前，先对全局做个美化：每个行容器之间没有间隙，都是紧贴着得。这里给它们一个间隙：margin-top:3px; margin-bottom:3px;加在五个行容器的css里边(任一个分号后面):#header、#menu、#base、#advanced、#other、#footer其中 #header只需要加margin-bottom:3px; （因为header是最上面一行，不用加上边距） #footer只需要加margin-top:3px; （因为footer是最下边一行，不用加下边距） 首先是#menu，这里使用论坛的菜单样式。 在ie里打开这个效果是怎么做出来的呢？经过分析，主要是以下部分的css代码起作用：#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; 挑个别解释下吧： #menu里边的background: #FFF url(././images/default/menu_bg.gif);是背景，我们得把它下载下来（把鼠标停留在菜单的空白位置，【鼠标右键单击】【背景另存为】），保存到桌面上的bianews/images/menu_bg.gif我们可以挑选其中部分，放到index.css，最终效果如下：#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; padd