1、从零开始学做专题原帖：http:/ 。网编日常工作中，跟本版有关的主要有下面几种情况：1、利用 cms 发布文章例如新闻常识、文字编辑能力、SEO、新闻图片处理等技能这里就不谈了。跟本版有关的就是图文排版。通过记事本、网络编辑工具箱或者 Dreamweaver 等工具进行基础的排版可以节省很多时间。不过更复杂的排版还是得熟练使用 cms 的在线编辑器、熟练使用 html和 css 等。个人觉得，各类网站当中，蓝色理想、poco 、个人博客的排版是做的比较好的；论坛是做的最差的。本版在这方面的文章暂时空缺。2、制作专题这块内容是本版的建设重心所在。对于制作专题本版对网编的分工是这样的：由于大专题
2、有美工与技术人员配合，网编只需要组织内容。故实际上只有小专题才需要网编自己设计、制作，或者根据已有模板修改。为此，本文从零开始学做专题给大家建议的学习路线是这样的：1、什么是 Html和常用的 html标签html是基础的基础。这里对大家学习的要求是：你要熟记常用的几个 html标签。以下这篇教程清新简洁，建议大家阅读学习：http:/ css大家应该感谢 css。因为它的存在，我们再不用去理会 html标签那些复杂的标签属性。从此 html标签里除了 class=和 id=之外，非常的干净！（表单和个别特殊标签除外）这里对大家的要求也不高，只需要了解什么是 css，和 css一些基本的语法。
3、下面有两套教程供参考：a、http:/ 5 日精通 CSS层叠样式表对于这套教程，你要做的就是看完“第一日”那部分并且熟记。后面四日的内容，可以大概地浏览一遍。b、http:/ 编程之邦-CSS-视频教程如果你觉得文字教程太枯燥，那么建议你阅读这套视频教程。同样，认真看完第一章课前须知并熟记；第二章第二章常用选择和属性可以大概地看一遍3、Dreamweaver 的基本操作http:/ 1-基本操作附录 2-css逐行解释新手专题教程第一期(答疑)专题效果预览第二期正在筹备中5、知识碎片积累和案例积累经过简单的入门后，如果不是打算学精，那么就没什么必要进行系统的学习了（如果要进一步学习，最好到其
4、他专业的论坛。本版仅限于网编实用级别的技术教学）。这个阶段，更多的是需要积累。积累零碎的知识碎片和经验，多看看别人的专题是怎么做的。比方说大家可以把这个板块的帖子都认真看看。http:/ 4 个帖子： 选题和版式确定 构建 DIV+CSS 页面 布置内容 美化先看看效果：http:/ (打开网速可能有点慢，请大家稍等)这是第一期教程，以本版内容为主题做一个示范专题。然后根据大家的反馈情况，对第一期教程的内容进行调整，同时开始准备第二期教程。一、首先是热身阅读。先对专题有一个大概的了解。这部分内容节选自论坛内不同的帖子：http:/ 专题内容：全在这个索引帖里了 http:/ 专题版面结构： l
5、ogo、 banner、menu 入门(html、css、dw) 进阶(色彩、图文、布局) 实例教程 资源下载内容才是一个专题的灵魂。页面什么的只是一种载体。不过这里我也只能写写载体的搭建教程。至于如何做出有内涵的专题，请大家多留意网编经验的帖子。 三、确定布局 四、布局这里，我按照番茄的方法，画了一个 div 布局图。这个布局图很明显地表明了不同的 div 之间的关系：|body|_#container|_#header|_#logo|_#banner|_#menu|_#base|_#html|_#css|_#dw|_#advanced|_#color|_#pic|_#lay|_#other
6、|_#down|_#example|_#footer怎样把直观的图片变成代码呢？在每个框的开头加上框的结尾加上然后按照整个图的顺序，从左到右、从上到下把代码排列起来。完整代码如下(适当增加段落缩进，便于看清 div 之间的关系(为注释部分，可以删去)：选题和版式部分到此结束。这一节中有些地方不是很科学。例如 div 的命名。大家可以参考 DW 版的其他帖子。附上上面那个 div 布局图的 psd 原图：http:/ DIV+CSS 页面我们在上一章已经把确定了专题的选题和版式。在这一章里，我们就利用 Dreamweaver 8 中文版，把这个框架一步步构建出来。一、建站在桌面上新建个文件夹“b
7、ianews“，然后打开 Dreamweaver8 中文版。以下操作均在 Dreamweaver 里进行1. 新建站点，站点名称为“网编是怎样练成的”；本地根文件夹为桌面上的“bianews” 文件夹 2. 新建页面，保存在 bianews 文件夹根目录，命名为“ index.html”；编码为 utf-8 3. 新建 css，保存在 bianews 文件夹根目录，命名为 “index.css”好，建站准备工作到此结束。二、写 Xhtml1、写 div 部分切换回 index.html，切换到代码界面，在 之间插入如下代码(注意，全部是小写字母)：2、给 index.html 链接 css 文
8、件3、编写 cssindex.html 初步编写完毕。记得保存。 源文件参考：http:/ 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
9、, 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
10、; body font-size: 12px;font-family: Tahoma, Arial; margin: 0px;padding: 0px;imgborder: 0px none;height:auto;select font-size: 12px; font-family: Tahoma, Arial; color: #000000; background-color: #FFFFFF;td word-break: break-all; css 源文件参考： http:/ width:100%;第一行#header，logo 和 banner，要套用里边 “单行两列”的布局即规定
11、#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:8
12、6px;background-color:#FFFF00; css 黑色加粗部分为背景色，纯粹用于测试效果。测试结束后记得删掉。 包括后边的一个分号以上是单行 2 列的布局，如果网页仅有这一行容器，那么上面的 css 代码就算是完成了。 而实际上，如果几个行容器从上到下层叠的时候，需要在容器末尾加上一个 clear。 这里是一个难点。下面给大家两个选择：1. 个人建议，新手先记住这个步骤，以后再慢慢看教程，理解 clear 的含义 2. 如果大家觉得不明白这个 clear 的话会看不下去，那么建议你先阅读以下帖子：http:/ clear 呢？ 看图：即#header 部分要修改成这样子(黑体
13、字为增加部分) ：logobannercss 部分增加：.clear clear: both;height:1px;margin-top:-1px; overflow:hidden;至此，第一行已经成功漂浮了。大家可以把 index.html 和 index.css 保存后，按 F12 预览效果那个 logo 和 banner 是不是在同一行并排了呢(看背景色) ？是的话，很好，第一步成功了。 新手专题教程第一期修订版（3）构建 DIV+CSS 页面（2）第二行#menu 只有一列，套用 “单行单列” 的布局即规定#menu 宽度、高度，还有居中对齐css 部分代码如下（ 黑色加粗部分是背景色
14、，方便大家看效果。记得去除，以下不再罗唆 ）：#menu margin-left:auto; margin-right:auto;width:780px;height:25px;background-color:#CCCCCC;第三行#base 比较棘手，是一行三列的布局，套用“ 单行三列”“float 定位一”的布局首先要在 xhtml 部分做以下修改（不记得怎么改的复习这里：http:/ ）：css 部分：#base width:780px; height:auto; #left1 float:left; width:520px; #html float:left; width:260px
15、; 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. 第五行
16、#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; backgro
17、und-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:200p
18、x;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:express
19、ion(document.body.clientWidth 1200? “1200px“ : “auto“); 还记得最外层的#container 么？其实在这个固定宽度的页面里，他可有可无。以上代码的意思是：最小宽度 600px；最大宽度 1200px（注意黑体加粗部分）呵呵，这个就是自适应宽度的代码。当我们对最外层的 div 设置了最小最大宽度，里边其他行容器只需要把宽度设置为 100，就可以实现自动适应窗口大小了。这个我会在以后的教程里用到。 好了，第二节构建 DIV+CSS 页面就到这里。附件：http:/ logo.gif)(另存为 banner.gif)素材准备在 bianews
20、文件夹里新建一个文件夹 images，把 logo.gif 和 banner.gif 放进去css 代码里的背景颜色记得去掉需要布置内容的 div 一共有 12 个，分为以下 5 种类型：1、布置图片#logo 和#banner2、布置菜单#menu3、布置文章列表 #html#css#dw#color#pic#lay4、布置图文信息 #down、#example5、版权信息#footer下面分别对这 5 种类型的内容布置进行讲解。在这个专题里也好，在其他网站里也好，同一类型的布置方法是可以相同的，大家注意触类旁通，甚至背下来都可以，以后照搬就是。1、布置图片布置图片有两种方法：插入图片和使用
21、背景图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;
22、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 需要插入文章列表。他们有许多特性会是相同的，例如高度、宽度、
23、样式等等。这里要用到“类”首先，在每个 div 里(#html、#css、#dw、#color、#pic、#lay)插入两个子 div给他们指定高度，在 css 部分添加以下代码：.title height:20px;.list height:180px;现在开始添加文字： 在每个里输入对应的列表标题在每个里输入：跟上一节一样， 是列表的开头和结尾， 是列表项的开头结尾以上是添加文字的方法。不过输入代码太繁琐。另一种方法：1. 切换回 index.html 的【设计】界面 2. 找到各个.title 的位置，输入对应的标题；（图） 3. 找到各个.list 位置，插入列表（图） ，然后把论坛里
24、的带有链接的标题逐行复制进去（每个列表 8 篇文章）ps：如果【设计】界面出现显示错位的，请检查是否忘了把 css 里边测试效果用的背景色全部去掉这一步是体力活。大家可以直接下载完成了的 index.html 看源代码：http:/ images 文件夹，另存为 1.jpg保存到 images 文件夹，另存为 2.jpg保存到 images 文件夹，另存为 3.jpg保存到 images 文件夹，另存为 4.jpg如果大家已经明白了上一节的布置文章列表，那么这一节应该不难理解了。1. 先熟悉一下什么是 dl 列表：http:/ 2. 然后，在每个 div 里插入（#down、#example）
25、两个子 div在每个里输入对应的列表标题（跟文章列表一样）（在 【 设计 】 窗口预览可能会错位，所以尽量在 【 代码 】 窗口编辑）在每个里输入：类似于前两节， 是列表的开头和结尾， 是列表项的开头结尾; 每个 dd 里边有两个标签，第一个用于插入图片，第二个插入对应的文字 这个例子中，每个列表里使用两个列表项xhtml 部分：资源下载CSS 网站布局实录强烈推荐1000 个 16x16 像素 PNG格式网页小图标实例教程网页的布局实战专题快速上手教程css 部分：.piclist dl ddfloat:left;display:inline;text-align:center;line-h
26、eight:31px;.piclist dl dd adisplay:block;呼.终于快完了。F12 预览一下吧，接着进入最后一节：5、布置版权信息这个好办. 打开清风大哥的网编访谈专题： http:/ 查看源代码，找到下边这段鞭牛士网络编辑社区 - 联系我们 - 关于我们 - 专题报错 - 站点地图 - 友情链接 Copyright ? 2005-2008 BIANEWS.COM All rights reserved. 京 ICP 备 06016495 号然后，放到#footer 里边吧. 嘿嘿.套用现成的保存一下，再 F12 预览效果吧。然后下载这个：http:/ 对比一下代码，看看
27、有没有什么漏洞。新手专题教程第一期修订版（5）美化考虑到大多数网编在美工方面不在行，美化这节的教程主要教大家如何借用互联网上的资源。分析 html 部分不做详细介绍，要求阅读者对 html 有一定的了解，如果不了解，请先阅读本版相关教程，或者直接跳过分析，只阅读、照搬代码练习。第一期教程不要求大家一次性学会 div+css 制作专题，只是想让大家先熟悉一下这个制作流程，为下一期的教程打下基础。所以本期教程只要求大家记住这些步骤和一些固定不变的代码，如两列布局和三列布局等等。至于如何理解这些代码，大家在初步熟悉流程以后，在阅读不同教程的过程中，会慢慢理解的。在开始之前，先对全局做个美化：每个行容
28、器之间没有间隙，都是紧贴着得。这里给它们一个间隙：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 里打开 这个效果是怎么做出来的呢？经过分析，主要是以下部分的
29、 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; padd
30、ing: 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-r
31、ight: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;
32、float: left; color: #333; padding: 4px 8px 3px; 其次是六个文章列表、和两个图文信息。本来打算做两种效果的，发觉教程写太长了，时间又不多，还是只做一种了：1、给.title 加个背景（所有标题栏都是同一个“类”控制的，那就是.title）(另存为 images/title_bg.gif)background:url(images/title_bg.gif) left bottom no-repeat;解释下：.title 以该素材为背景，背景图左下角对齐，不重复。 这样，.title 长一点，背景图就往右显示多一点，.title 短一些，背景图就被
33、遮盖，显示得少一些。这被称为“ 滑动门” 2、对标题进行准确定位，并且加粗给每个 title 外围嵌套一个,如：html 入门 然后在 css 里对 h1 进行准确定位和加粗.title h1 font-size:9pt;float:left;margin-top:5px;margin-left:12px;3、添加边框页面中间一片光秃秃的，现在给.title、.list、.piclist 分别加个边框。分别在.title、.list 、.piclist添加：border: 1px solid #CAD9EA;结果边框都挤在一起了。这个分几部来解决：上下边框在.title里添加以下代码：marg
34、in-bottom:-1px;左右边框这个比较麻烦，需要对左中右分别控制css 里新建三个类 .marle margin-right:1px;.marmi margin-left:1px;margin-right:1px;.marri margin-left:1px;xhtml 做以下修改然后把左列的.title、.list 和.piclist 改为把中列的.title、.list 改为 把右列的.title、.list 和.piclist 改为 完工。F12 预览效果4、文章列表美化1. 把文章列表左对齐，调整好距离。 2. li 去掉黑圆点，设置背景（下划虚线） 。 3. 设置文字的背景（
35、左对齐的三角符号） 。然后文字左边增加空白，跟背景图片错开。 (另存为 images/word_bg.gif)(另存为 images/list.gif)css 部分代码如下：.list ul litext-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 apadding-left:15px;background:url(images/list.gif) left bottom
36、no-repeat;有一篇文章标题太长，我把它改成： “DW 网页编辑常用表现的实现方法 ”了5、图文信息美化修改一下图片之间的距离就好了。css 增加一个类.piclist dl dd a img margin:15px 12px 10px 18px; 6、最后是版权信息了为了整个页面的统一，这里也给他一个边框，另外，它跟#other 行容器太挤了点，给它点空隙：#footer margin-left:auto;margin-right:auto;width:778px;height:50px;margin-top:3px; padding-top:15px;border: 1px soli
37、d #CAD9EA;7、调整做完整个页面了。F12 预览一下，感觉哪里还有些别扭。这里对#menu 做一些小小的调整在 xhtml 里， 菜单的最前面增加：快速导航： 最后面增加在线咨询 在 css 里增加#menu li h1 text-decoration: none; float: left; color: #333; padding: 4px 8px 3px 25px;background:url(images/index.gif) left no-repeat;(另存为 images/index.gif)8、行顺序div+css 最大的特点就是表现与内容相分离。我们上边所做的各个行容
38、器之间是互不相干的。现在打开最终版本的页面，第一屏全是文字，往下拉才能看到图片。如果有需要，可以对行的顺序做一些调整。每个行容器都有一个开端和结尾，例如： 和只要把从开始到结束的代码全选，然后剪切到其他行容器的开端或者末尾处即可对行容器的顺序进行调整。详情大家可以看看例子里的 index1.html例子：http:/ 校验http:/validator.w3.org分别上传我们各个阶段做出来的 index.html可能会发现以下问题：多余的链接在论坛复制文章标题的时候，可能带有 tag.php 的链接。删掉即可图片标签没有 alt 属性或者没有关闭符号 正确写法：今天我校验的时候发现了以上两个
39、问题，已经修复并重新上传附件。现在的页面已经符合 w3c 标准2、css2 校验http:/validator.w3.org/直接通过验证。现在我们的这个专题页已经是一个符合 web 标准的页面附录 1-基本操作新建站点【站点】【新建站点】新建页面【文件】【新建】(或者 Ctrl+N)左边选【基本页】右边选【HTML】右下角为 【XHTML 1.0 Transitional】 （即默认选项）【创建】新建 css 文件【文件】【新建】(或者 Ctrl+N)左边选【基本页】 ，不过这次右边选【CSS】【创建】修改页面编码【修改】【页面属性】在跳出的属性界面左边，选择【标题/编码】 ，下拉改为【Un
40、icode （UTF-8） 】插入图片/直接拖放插入图片【插入】【图像】或者，在右边的【文件】窗口，找到需要插入的图片， 【鼠标左键拖选】到页面中适当的位置在 css 里加入图片背景1. 把光标放在任一个“；“后面（紧跟在“；“后面不留空格） ，敲空格，dw 就会出现代码提示框；2. 继续输入 b,可以看到代码提示框里第一个 b 开头的代码已经变成深色；3. 使用键盘上下方向键选择(background)、回车（或者鼠标双击） ，会出现新的代码提示框；4. 同样使用方向键选择、回车或者鼠标双击“url“;5. 在弹出来的窗口中选择 images 文件夹下的 logo.gif；6. css 部分
41、增加了一段代码：background:url(images/logo.gif) （注意没有分号）7. 紧接着再来一个空格，又出现了新的代码提示框，输入 n，选择 no-repeat，并在后面紧跟着补充输入一个“;“ 图片添加成功。ul 菜单增减项目和是整个菜单的开头结尾， 和 是每个菜单项的开头结尾。 要增加菜单项，可以通过代码方式或者所见即所得方式添加：1. 切换回【设计】窗口，光标停留在某个菜单项后，回车转行，输入新菜单项即可2. 在和 之间，你需要添加新项目的位置，输入以下代码：这里替换成链接文字链接 css方法一：切换至 index.html 代码界面，将光标停留在 后面，然后【鼠标左
42、键拖选】 【文件】窗口里的index.css,拖到 后边即可（如果看不到【文件】窗口可以按快捷键【F8】 ）方法二：【文本】【CSS 样式】【附加样式表】【浏览】选择刚才新建的 index.css【确定】方法三：在之间单独起一行，然后输入分析一个网页的效果1. 在 ie 里打开 2. 在浏览器里：【查看】【源文件】 ，可以看到用记事本打开的网页源代码3. 挑选论坛菜单里的个别关键词，例如“短信息”、 “会员”、 “搜索”等，在源文件里搜索其中一个关键词(ctrl+f)，找到菜单代码所在位置4. 一行一行往上分析该代码，看它被嵌套在哪个 div 里，经分析，菜单代码所在的 div 为：5. 找到
43、 css 链接(在 head 部分) ：6. 如果熟悉 dz 论坛的话，马上就可以判断出应该是 style_1.css 了，另一个是空的。如果不确定就把两个 css 都打开7. href 后面的就是该 css 的相对地址。即完整地址是：http:/ 在 ie 地址栏输入以上网址，默认会用 dw 打开9. 在 dw 里 ctrl+f,搜索#menu，即可分析 css 中控制菜单的部分附录 2-css逐行解释这第一期教程起点不高，希望大家能够由浅入深的学习，大部分代码，先用上再说，以后慢慢就会明白他的含义。大部分代码，只要求读者会直接复制粘贴使用。故只做代码含义上的介绍。个别代码要求能够变通使用，文中会对其中的变量进行讲解，请大家注意触类旁通。* word-wrap: break-word; 对所有元素进行控制，含义是自动断行body background: #FFF; text-align: center; 对 body 进行控制，背景色为白色，对齐方式为水平居中body, td, input, textarea, select, button color: #535353; font: 12px/1.6em
