从零开始学做专题

从零开始学做专题原帖：本来想了一大段的前言来解释写本文的目的，后来觉得太浪费大家时间，删掉了。先说说我对网编在网页设计制作这一块技能上的理解吧（如果大家有什么不同看法欢迎提出，我会尽力去完善这些教程）。网编日常工作中，跟本版有关的主要有下面几种情况：1、利用cms发布文章例如新闻常识、文字编辑能力、SEO、新闻图片处理等技能这里就不谈了。跟本版有关的就是图文排版。通过记事本、网络编辑工具箱或者Dreamweaver等工具进行基础的排版可以节省很多时间。不过更复杂的排版还是得熟练使用cms的在线编辑器、熟练使用html和css等。个人觉得，各类网站当中，蓝色理想、poco、个人博客的排版是做的比较好的；论坛是做的最差的。本版在这方面的文章暂时空缺。2、制作专题这块内容是本版的建设重心所在。对于制作专题本版对网编的分工是这样的：由于大专题有美工与技术人员配合，网编只需要组织内容。故实际上只有小专题才需要网编自己设计、制作，或者根据已有模板修改。为此，本文《从零开始学做专题》给大家建议的学习路线是这样的：1、什么是Html和常用的html标签html是基础的基础。这里对大家学习的要求是：你要熟记常用的几个html标签。以下这篇教程清新简洁，建议大家阅读学习：、什么是css大家应该感谢css。因为它的存在，我们再不用去理会html标签那些复杂的标签属性。从此html标签里除了class=和id=之外，非常的干净！（表单和个别特殊标签除外）这里对大家的要求也不高，只需要了解什么是css，和css一些基本的语法。下面有两套教程供参考：a、《5日精通CSS层叠样式表》对于这套教程，你要做的就是看完“第一日”那部分并且熟记。后面四日的内容，可以大概地浏览一遍。b、《编程之邦-CSS-视频教程》如果你觉得文字教程太枯燥，那么建议你阅读这套视频教程。同样，认真看完第一章《课前须知》并熟记；第二章《第二章常用选择和属性》可以大概地看一遍3、Dreamweaver的基本操作软件的基本操作还是得看看视频教程比较容易上手。文字太难描述了。4、专题实例教程下面隆重推荐本版原创教程，新手专题系列教程。暂时只有第一期，重点教如何利用div+css进行基本的布局和美化。即使经过了上面三个步骤的入门，本篇教程仍显得枯燥。因为这里开始遇到了很多不熟悉甚至没见过的代码。大家看的时候最好准备好纸笔，把不懂的地方记下来。第一期目录：新手专题教程第一期修订版(1)新手专题教程第一期修订版(2)新手专题教程第一期修订版(3)新手专题教程第一期修订版(4)新手专题教程第一期修订版(5)附录1-基本操作附录2-css逐行解释新手专题教程第一期(答疑)专题效果预览第二期正在筹备中......5、知识碎片积累和案例积累经过简单的入门后，如果不是打算学精，那么就没什么必要进行系统的学习了（如果要进一步学习，最好到其他专业的论坛。本版仅限于网编实用级别的技术教学）。这个阶段，更多的是需要积累。积累零碎的知识碎片和经验，多看看别人的专题是怎么做的。比方说大家可以把这个板块的帖子都认真看看。新手专题教程第一期修订版（1）选题和版式教程初定分4个帖子：选题和版式确定构建DIV+CSS页面布置内容美化先看看效果：(打开网速可能有点慢，请大家稍等)这是第一期教程，以本版内容为主题做一个示范专题。然后根据大家的反馈情况，对第一期教程的内容进行调整，同时开始准备第二期教程。一、首先是热身阅读。先对专题有一个大概的了解。这部分内容节选自论坛内不同的帖子：二、选题。这里要做的教程就以本版内容为例咯。专题名称：网编是怎样炼成的专题内容：全在这个索引帖里了——专题版面结构：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怎样把直观的图片变成代码呢？在每个框的开头加上divid=框的名字框的结尾加上/div然后按照整个图的顺序，从左到右、从上到下把代码排列起来。完整代码如下(适当增加段落缩进，便于看清div之间的关系(!----为注释部分，可以删去)：divid=container!--页面容器层开始--divid=header!--页面头部（第一行容器）开始--divid=logo!--logo（第一行左列）开始--/div!--logo（第一行左列）结束--divid=banner!--banner（第一行右列）开始--/div!--banner（第一行右列）结束--/div!--页面头部（第一行容器）结束--divid=menu!--菜单（第二行容器）开始--/div!--菜单（第二行容器）结束--divid=base!--基础知识行（第三行容器）开始--divid=html!--html（第三行左列）开始--/div!--html（第三行左列）结束--divid=css!--css（第三行中列）开始--/div!--css（第三行中列）结束--divid=dw!--dw（第三行右列）开始--/div!--dw（第三行右列）结束--/div!--基础知识行（第三行容器）结束--divid=advanced!--进阶知识行（第四行容器）开始--divid=color!--色彩（第四行左列）开始--/div!--色彩（第四行左列）结束--divid=pic!--图文排版（第四行中列）开始--/div!--图文排版（第四行中列）结束--divid=lay!--页面布局（第四行右列）开始--/div!--页面布局（第四行右列）结束--/div!--进阶知识行（第四行容器）结束--divid=other!--其他内容（第五行容器）开始--divid=down!--资源下载（第五行左列）开始--/div!--资源下载（第五行左列）结束--divid=example!--实例（第五行右列）开始--/div!--实例（第五行右列）结束--/div!--其他内容（第五行容器）结束--divid=footer!--版权信息行（第六行容器）开始--/div!--版权信息行（第六行容器）结束--/div!--页面容器层结束--选题和版式部分到此结束。这一节中有些地方不是很科学。例如div的命名。大家可以参考DW版的其他帖子。附上上面那个div布局图的psd原图：=7889新手专题教程第一期修订版（2）构建DIV+CSS页面我们在上一章已经把确定了专题的选题和版式。在这一章里，我们就利用Dreamweaver8中文版，把这个框架一步步构建出来。一、建站在桌面上新建个文件夹bianews，然后打开Dreamweaver8中文版。以下操作均在Dreamweaver里进行1.新建站点，站点名称为“网编是怎样练成的”；本地根文件夹为桌面上的“bianews”文件夹2.新建页面，保存在bianews文件夹根目录，命名为“index.html”；编码为utf-83.新建css，保存在bianews文件夹根目录，命名为“index.css”好，建站准备工作到此结束。二、写Xhtml1、写div部分切换回index.html，切换到代码界面，在body/body之间插入如下代码(注意，全部是小写字母)：divid=container!--页面容器层开始--divid=header!--页面头部（第一行容器）开始--divid=logo!--logo（第一行左列）开始--/div!--logo（第一行左列）结束--divid=banner!--banner（第一行右列）开始--/div!--banner（第一行右列）结束--/div!--页面头部（第一行容器）结束--divid=menu!--菜单（第二行容器）开始--/div!--菜单（第二行容器）结束--divid=base!--基础知识行（第三行容器）开始--divid=html!--html（第三行左列）开始--/div!--html（第三行左列）结束--divid=css!--css（第三行中列）开始--/div!--css（第三行中列）结束--divid=dw!--dw（第三行右列）开始--/div!--dw（第三行右列）结束--/div!--基础知识行（第三行容器）结束--divid=advanced!--进阶知识行（第四行容器）开始--divid=color!--色彩（第四行左列）开始--/div!--色彩（第四行左列）结束--divid=pic!--图文排版（第四行中列）开始--/div!--图文排版（第四行中列）结束--divid=lay!--页面布局（第四行右列）开始--/div!--页面布局（第四行右列）结束--/div!--进阶知识行（第四行容器）结束--divid=other!--其他内容（第五行容器）开始--divid=down!--资源下载（第五行左列）开始--/div!--资源下载（第五行左列）结束--divid=example!--实例（第五行右列）开始--/div!--实例（第五行右列）结束--/div!--其他内容（第五行容器）结束--divid=footer!--版权信息行（第六行容器）开始--/div!--版权信息行（第六行容器）结束--/div!--页面容器层结束--2、给index.html链接css文件linkhref=index.cssrel=stylesheettype=text/css/3、编写cssindex.html初步编写完毕。记得保存。源文件参考：=7890切换至index.css(css部分