还剩27页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
从零开始学做专题原帖 本来想了一大段的前言来解释写本文的目的,后来觉得太浪费大家时间,删掉了先说说我对网编在网页设计制作这一块技能上的理解吧(如果大家有什么不同看法欢迎提出,我会尽力去完善这些教程)网编日常工作中,跟本版有关的主要有下面几种情况
1、利用cms发布文章例如新闻常识、文字编辑能力、SEO、新闻__处理等技能这里就不谈了跟本版有关的就是图文排版通过记事本、网络编辑工具箱或者Dreamwe__er等工具进行基础的排版可以节省很多时间不过更复杂的排版还是得熟练使用cms的在线编辑器、熟练使用html和css等个人觉得,各类__当中,蓝色理想、poco、个人__的排版是做的比较好的;__是做的最差的本版在这方面的文章暂时空缺
2、制作专题这块内容是本版的建设重心所在对于制作专题本版对网编的分工是这样的由于大专题有美工与技术人员配合,网编只需要组织内容故实际上只有小专题才需要网编自己设计、制作,或者根据已有模板修改为此,本文《从零开始学做专题》给大家建议的学习路线是这样的
1、什么是Html和常用的html标签html是基础的基础这里对大家学习的要求是你要熟记常用的几个html标签以下这篇教程清新简洁,建议大家阅读学习
2、什么是css大家应该感谢css因为它的存在,我们再不用去理会html标签那些复杂的标签属性从此html标签里除了class=和id=之外,非常的干净!(表单和个别特殊标签除外)这里对大家的要求也不高,只需要了解什么是css,和css一些基本的语法下面有两套教程供参考a、《5日精通CSS层叠样式表》对于这套教程,你要做的就是看完“第一日”那部分并且熟记后面四日的内容,可以大概地浏览一遍b、《编程之邦-CSS-视频教程》如果你觉得文字教程太枯燥,那么建议你阅读这套视频教程同样,认真看完第一章《课前须知》并熟记;第二章《第二章常用选择和属性》可以大概地看一遍
3、Dreamwe__er的基本操作软件的基本操作还是得看看视频教程比较容易上手文字太难描述了
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{} |_#advan__d{} |_#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=advan__d!--进阶知识行(第四行容器)开始-- 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原图新手专题教程第__修订版
(2)构建DIV+CSS页面我们在上一章已经把确定了专题的选题和版式在这一章里,我们就利用Dreamwe__er8中文版,把这个框架一步步构建出来
一、建站在桌面上新建个文件夹bianews,然后打开Dreamwe__er8中文版以下操作均在Dreamwe__er里进行
1.新建站点,站点名称为“网编是怎样练成的”;本地根文件夹为桌面上的“bianews”文件夹
2.新建页面,保存在bianews文件夹根目录,命名为“index.html”;编码为utf-
83.新建css,保存在bianews文件夹根目录,命名为“index.css”好,建站准备工作到此结束
二、写Xhtml
1、写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=advan__d!--进阶知识行(第四行容器)开始-- 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初步编写完毕记得保存源文件参考切换至index.csscss部分解释请阅读附录2-css逐行解释首先输入以下代码【全局控制部分】*{word-wrap:break-word;}body{background:#FFF;text-align:__nter;}bodytdinputtextareaselectbutton{color:#535353;font:12px/
1.6emArialHelveticasans-serif;}bodyuldlddph1h2h3h4h5h6formfieldset{__rgin:0;padding:0;}h1h2h3h4h5h6{font-size:1em;}a{color:#262626;text-decoration:none;}a:hover{text-decoration:underline;}aimg{border:none;}emcitestrongth{font-style:nor__l;font-weight:nor__l;}table{empty-__lls:show;border-collapse:collapse;}body{ font-size:12px; font-family:Taho__Arial; __rgin:0px; padding:0px;}img{ border:0pxnone; height:auto;}select{ font-size:12px; font-family:Taho__Arial; color:#000000; background-color:#FFFFFF;}td{ word-break:break-all;}css源文件参考然后开始【逐行控制】先看看这个帖子这个帖子里边列举了很多种情况这里我们直接套用里边的布局先给总容器一个宽度#container{width:100%;}第一行#header,logo和banner,要套用里边“单行两列”的布局即规定#header、#logo和#banner的宽度、高度,然后header居中对齐,最后logo向左浮动,banner向右浮动把原例子修改一下,把#后边的名字改成我们自己的,修改下宽度高度,就可以了代码如下#header{width:780px;__rgin-right:auto;__rgin-left:auto;overflow:auto;} #logo{float:left;width:2__px;height:86px;background-color:#0000FF;} #banner{float:right;width:491px; height:86px;background-color:#FFFF00;}css黑色加粗部分为背景色,纯粹用于测试效果测试结束后记得删掉——包括后边的一个分号以上是单行2列的布局,如果网页仅有这一行容器,那么上面的css代码就算是完成了而实际上,如果几个行容器从上到下层叠的时候,需要在容器末尾加上一个clear这里是一个难点下面给大家两个选择
1.个人建议,新手先记住这个步骤,以后再慢慢看教程,理解clear的含义
2.如果大家觉得不明白这个clear的话会看不下去,那么建议你先阅读以下帖子或者蓝色理想的系列教程那么什么时候要加clear呢?看图即#header部分要修改成这样子黑体字为增加部分 divid=header!--页面头部(第一行容器)开始-- divid=logo!--logo(第一行左列)开始-- logo /div!--logo(第一行左列)结束-- divid=banner!--banner(第一行右列)开始-- banner /div!--banner(第一行右列)结束--divclass=clear/div /div!--页面头部(第一行容器)结束---css部分增加.clear{ clear:both; height:1px; __rgin-top:-1px; overflow:hidden;}那个logo和banner是不是在同一行并排了呢看背景色?是的话,很好,第一步成功了新手专题教程第__修订版
(3)构建DIV+CSS页面
(2)第二行#menu只有一列,套用“单行单列”的布局即规定#menu宽度、高度,还有居中对齐css部分代码如下(黑色加粗部分是背景色,方便大家看效果记得去除,以下不再罗唆)#menu{__rgin-left:auto;__rgin-right:auto;width:780px;height:25px;background-color:#CCCCCC;}第三行#base比较棘手,是一行三列的布局,套用“单行三列”-“float定位一”的布局首先要在xhtml部分做以下修改(不记得怎么改的复习这里)divid=base!--基础知识行(第三行容器)开始--divid=left1 divid=html!--html(第三行左列)开始-- /div!--html(第三行左列)结束-- divid=css!--css(第三行中列)开始-- /div!--css(第三行中列)结束--divclass=clear/div/div divid=dw!--dw(第三行右列)开始-- /div!--dw(第三行右列)结束--divclass=clear/div /div!--基础知识行(第三行容器)结束--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.第四行#advan__d是单行三列,跟第三行#base相同(除了div名、宽度、高度要做修改,下同);
2.第五行#other是单行两列,跟第一行#header相同;
3.第六行#footer单行单列,跟第二行#menu相同于是分别写出第
四、
五、六三行的xhtml和css第四行#advan__dxhtml divid=advan__d!--进阶知识行(第四行容器)开始--divid=left2 divid=color!--色彩(第四行左列)开始-- /div!--色彩(第四行左列)结束-- divid=pic!--图文排版(第四行中列)开始-- /div!--图文排版(第四行中列)结束--divclass=clear/div/div divid=lay!--页面布局(第四行右列)开始-- /div!--页面布局(第四行右列)结束--divclass=clear/div /div!--进阶知识行(第四行容器)结束--css#advan__d{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:divid=other!--其他内容(第五行容器)开始-- divid=down!--资源下载(第五行左列)开始-- /div!--资源下载(第五行左列)结束-- divid=example!--实例(第五行右列)开始-- /div!--实例(第五行右列)结束--divclass=clear/div /div!--其他内容(第五行容器)结束--css:#other{width:780px;__rgin-right:auto;__rgin-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,所以只需要修改csscss#footer{__rgin-left:auto;__rgin-right:auto;width:780px;height:50px;background-color:#0000CC;}ok,按下F12,一个不同色块相间的拼图是不是已经出现在你眼前了呢?接下来,我们补充完最后一段代码,布局部分的工作就基本完成了最后一段css代码是#container{min-width:600px;__x-width:1200px600600px12001200px:auto;}还记得最外层的#container么?其实在这个固定宽度的页面里,他可有可无以上代码的意思是最小宽度600px;最大宽度1200px(注意黑体加粗部分)呵呵,这个就是自适应宽度的代码当我们对最外层的div设置了最小最大宽度,里边其他行容器只需要把宽度设置为100%,就可以实现自动适应窗口大小了这个我会在以后的教程里用到好了,第二节《构建DIV+CSS页面》就到这里附件新手专题教程第__修订版
(4)布置内容另存为logo.gif另存为banner.gif素材准备css代码里的背景颜色记得去掉需要布置内容的div一共有12个,分为以下5种类型
1、布置__——#logo和#banner
2、布置菜单——#menu
3、布置文章列表——#html#css#dw#color#pic#lay
4、布置图文信息——#down、#example
5、版权信息——#footer下面分别对这5种类型的内容布置进行讲解在这个专题里也好,在其他__里也好,同一类型的布置方法是可以相同的,大家注意触类旁通,甚至背下来都可以,以后照搬就是
1、布置__布置__有两种方法插入__和使用背景图
1.1插入__(可以对__设置超链接)在#logo插入__logo.gif,就在divid=logo!--logo(第一行左列)开始--和/div!--logo(第一行左列)结束--之间插入__,修改后代码如下divid=logo!--logo(第一行左列)开始--imgsrc=i__ges/logo.gif//div!--logo(第一行左列)结束--
1.2使用背景图(不能对__设置超链接)找到css里以下这段#logo{float:left;width:2__px;height:86px;}在任一个“;”后面,添加以下代码background:urli__ges/logo.gifno-repeat;修改后的代码如下banner也一并加入了#logo{float:left;width:2__px;background:urli__ges/logo.gifno-repeat;height:86px;} #banner{float:right;width:491px;background:urli__ges/banner.gifno-repeat;height:86px;}
2、布置菜单在xhtml中找到以下代码divid=menu!--菜单(第二行容器)开始--/div!--菜单(第二行容器)结束--在两行之间加入以下代码ul liahref=target=_blank鞭牛士首页/a/li liahref=target=_blank鞭牛士社区/a/li liahref=target=_blank网编数据库/a/li liahref=target=_blankDW教程专区/a/li liahref=target=_blank网编访谈/a/li liahref=target=_blank圈子招聘/a/li liahref=target=_blank技术支持/a/li/ulcss部分加入以下代码#menuulli{float:left;text-align:__nter;}到此菜单添加完毕保存,按下F12预览效果吧
3、布置文章列表一共有六个div需要插入文章列表他们有许多特性会是相同的,例如高度、宽度、样式等等这里要用到“类”首先,在每个div里#html、#css、#dw、#color、#pic、#lay插入两个子divdivclass=title/divdivclass=list/div给他们指定高度,在css部分添加以下代码.title{height:20px;}.list{height:180px;}现在开始添加文字在每个divclass=title/div里输入对应的列表标题在每个divclass=list/div里输入ulliahref=/a/li/ul跟上一节一样,ul/ul是列表的开头和结尾,li/li是列表项的开头结尾以上是添加文字的方法不过输入代码太繁琐另一种方法
1.切换回index.html的【设计】界面
2.找到各个.title的位置,输入对应的标题;(图)
3.找到各个.list位置,插入列表(图),然后把__里的带有链接的标题逐行__进去(每个列表8篇文章)ps如果【设计】界面出现显示错位的,请检查是否忘了把css里边测试效果用的背景色全部去掉这一步是体力活大家可以直接下载完成了的index.html看源代码
4、布置图文信息保存到i__ges文件夹,另存为
1.jpg保存到i__ges文件夹,另存为
2.jpg保存到i__ges文件夹,另存为
3.jpg保存到i__ges文件夹,另存为
4.jpg如果大家已经明白了上一节的布置文章列表,那么这一节应该不难理解了
1.先熟悉一下什么是dl列表
2.然后,在每个div里插入(#down、#example)两个子divdivclass=title/divdivclass=piclist/div在每个divclass=title/div里输入对应的列表标题(跟文章列表一样)(在【设计】窗口预览可能会错位,所以尽量在【代码】窗口编辑)在每个divclass=piclist/div里输入dlddahref=imgsrc=/aahref=/a/ddddahref=imgsrc=/aahref=/a/dd/dl类似于前两节,dl/dl是列表的开头和结尾,dd/dd是列表项的开头结尾;每个dd里边有两个a标签,第一个用于插入__,第二个插入对应的文字这个例子中,每个列表里使用两个列表项xhtml部分divid=other!--其他内容(第五行容器)开始-- divid=down!--资源下载(第五行左列)开始-- divclass=title资源下载/divdivclass=piclistdlddahref=;imgsrc=i__ges/
1.jpg/aahref=;《CSS__布局实录》强烈推荐/a/ddddahref=;imgsrc=i__ges/
2.jpg/aahref=;1000个16x16像素PNG格式网页小图标/a/dd/dl/div /div!--资源下载(第五行左列)结束-- divid=example!--实例(第五行右列)开始-- divclass=title实例教程/divdivclass=piclistdlddahref=;imgsrc=i__ges/
3.jpg/aahref=;网页的布局实战/a/ddddahref=;imgsrc=i__ges/
4.jpg/aahref=;专题快速上手教程/a/dd/dl/div /div!--实例(第五行右列)结束-- divclass=clear/div /div!--其他内容(第五行容器)结束--css部分.piclistdldd{float:left;display:inline;text-align:__nter;line-height:31px;}.piclistdldda{display:block;}呼...终于快完了F12预览一下吧,接着进入最后一节
5、布置版权信息这个好办...打开清风大哥的网编访谈专题,查看源代码,找到下边这段ahref=鞭牛士网络编辑社区/a-ahref=__ilto:editor#bianews.com__我们/a-ahref=;关于我们/a-ahref=__ilto:laohou.lover@g__il.com专题报错/a-ahref=;站点地图/a-ahref=;____/abr/ Copyright2005-2008strongahref=BIANEWS.COM/a/strongAllrightsreserved.ahref=;target=_blank京ICP备06016495号/a然后,放到#footer里边吧...嘿嘿...套用现成的保存一下,再F12预览效果吧然后下载这个对比一下代码,看看有没有什么漏洞新手专题教程第__修订版
(5)美化考虑到大多数网编在美工方面不在行,美化这节的教程主要教大家如何借用互联网上的资源分析html部分不做详细介绍,要求阅读者对html有一定的了解,如果不了解,请先阅读本版相关教程,或者直接跳过分析,只阅读、照搬代码练习第__教程不要求大家一次性学会div+css制作专题,只是想让大家先熟悉一下这个制作流程,为下__的教程打下基础所以本期教程只要求大家记住这些步骤和一些固定不变的代码,如两列布局和三列布局等等至于如何理解这些代码,大家在初步熟悉流程以后,在阅读不同教程的过程中,会慢慢理解的在开始之前,先对全局做个美化每个行容器之间没有间隙,都是紧贴着得这里给它们一个间隙__rgin-top:__x;__rgin-bottom:__x;加在五个行容器的css里边任一个分号后面:#header{}、#menu{}、#base{}、#advan__d{}、#other{}、#footer{}其中#header{}只需要加__rgin-bottom:__x;(因为header是最上面一行,不用加上边距)#footer{}只需要加__rgin-top:__x;(因为footer是最下边一行,不用加下边距)首先是#menu这个效果是怎么做出来的呢?经过分析,主要是以下部分的css代码起作用#menu{height:31px;border:1pxsolid#CAD9EA;background:#FFFurl../../i__ges/default/menu_bg.gif;background-repeat:repeat-x;}#menuul{float:right;padding:4px10px0;border-right:1pxsolid#FFF;} #menuli{float:left;} #menulia{text-decoration:none;float:left;color:#333;padding:4px8px__x;background:url../../i__ges/default/menu_itemline.gifno-repeat06px;}挑个别解释下吧#menu{}里边的background:#FFFurl../../i__ges/default/menu_bg.gif;是背景,我们得把它下载下来(把鼠标停留在菜单的空白位置,【鼠标右键单击】-【背景另存为】),保存到桌面上的bianews/i__ges/menu_bg.gif我们可以挑选其中部分,放到index.css,最终效果如下#menu{__rgin-left:auto;__rgin-right:auto;width:778px;height:31px;border:1pxsolid#CAD9EA;background:#FFFurli__ges/menu_bg.gif;background-repeat:repeat-x; __rgin-top:__x;__rgin-bottom:__x;}#menuul{float:left;padding:4px10px0;border-right:1pxsolid#FFF;} #menuli{float:left;} #menulia{text-decoration:none;float:left;color:#333;padding:4px8px__x;}其次是六个文章列表、和两个图文信息本来打算做两种效果的,发觉教程写太长了,时间又不多,还是只做一种了
1、给.title加个背景(所有标题栏都是同一个“类”控制的,那就是.title)另存为i__ges/title_bg.gifbackground:urli__ges/title_bg.gifleftbottomno-repeat;解释下.title以该素材为背景,背景图左下角对齐,不重复这样,.title长一点,背景图就往右显示多一点,.title短一些,背景图就被遮盖,显示得少一些这被称为“滑动门”
2、对标题进行准确定位,并且加粗给每个title__嵌套一个h1/h1如divclass=titleh1html入门/h1/div然后在css里对h1进行准确定位和加粗.titleh1{font-size:9pt;float:left;__rgin-top:5px;__rgin-left:12px;}
3、添加边框页面中间一片光秃秃的,现在给.title、.list、.piclist分别加个边框分别在.title{}、.list{}、.piclist{}添加border:1pxsolid#CAD9EA;结果边框都挤在一起了这个分几部来解决上下边框-在.title{}里添加以下代码__rgin-bottom:-1px;左右边框-这个比较麻烦,需要对左中右分别控制css里新建三个类.__rle{__rgin-right:1px;}.__rmi{__rgin-left:1px;__rgin-right:1px;}.__rri{__rgin-left:1px;}xhtml做以下修改然后把左列的.title、.list和.piclist改为divclass=title__rledivclass=list__rledivclass=piclist__rle把中列的.title、.list改为divclass=title__rmidivclass=piclist__rmi把右列的.title、.list和.piclist改为divclass=title__rridivclass=list__rridivclass=piclist__rri完工F12预览效果
4、文章列表美化
1.把文章列表左对齐,调整好距离
2.li去掉黑圆点,设置背景(下划虚线)
3.设置文字的背景(左对齐的三角符号)然后文字左边增加空白,跟背景__错开另存为i__ges/word_bg.gif另存为i__ges/list.gifcss部分代码如下.listulli{text-align:left;__rgin-bottom:__x;__rgin-left:5px;__rgin-right:5px;list-style:none;background:urli__ges/word_bg.gifrepeat-x;}.listullia{padding-left:15px;background:urli__ges/list.gifleftbottomno-repeat;}有一篇文章标题太长,我把它改成“DW网页编辑常用表现的实现方法”了
5、图文信息美化修改一下__之间的距离就好了css增加一个类.piclistdlddaimg{__rgin:15px12px10px18px;}
6、最后是版权信息了为了整个页面的统一,这里也给他一个边框,另外,它跟#other行容器太挤了点,给它点空隙#footer{__rgin-left:auto;__rgin-right:auto;width:778px;height:50px;__rgin-top:__x;padding-top:15px;border:1pxsolid#CAD9EA;}
7、调整做完整个页面了F12预览一下,感觉哪里还有些别扭这里对#menu做一些小小的调整在xhtml里,菜单的最前面增加lih1快速导航/h1/li最后面增加liahref=target=_blank在线__/a/li在css里增加#menulih1{text-decoration:none;float:left;color:#333;padding:4px8px__x25px;background:urli__ges/index.gifleftno-repeat;}另存为i__ges/index.gif
8、行顺序div+css最大的特点就是表现与内容相分离我们上边所做的各个行容器之间是互不相干的现在打开最终版本的页面,第一屏全是文字,往下拉才能看到__如果有需要,可以对行的顺序做一些调整每个行容器都有一个开端和结尾,例如divid=other!--其他内容(第五行容器)开始--和/div!--其他内容(第五行容器)结束--只要把从开始到结束的代码全选,然后剪切到其他行容器的开端或者末尾处即可对行容器的顺序进行调整详情大家可以看看例子里的index
1.html例子这第__的教程,重心全放在基本操作和布局基础上了请大家多多提出批评意见,我会根据大家的指点,调整主题策划和特殊版块应用等其他方面上的比重示范页面新手专题教程第__(答疑)
1、xhtml校验分别上传我们各个阶段做出来的index.html可能会发现以下问题多余的链接——在____文章标题的时候,可能带有tag.php的链接删掉即可__标签没有alt属性或者没有关闭符号——正确写法imgsrc=i__ges/
4.jpgalt=/今天我校验的时候发现了以上两个问题,已经修复并重新上传附件现在的页面已经符合w3c标准
2、css2校验直接通过验证现在我们的这个专题页已经是一个符合web标准的页面附录1-基本操作新建站点【站点】-【新建站点】新建页面【文件】-【新建】或者Ctrl+N-左边选【基本页】右边选【HTML】右下角为【XHTML
1.0Transitional】(即默认选项)-【创建】新建css文件【文件】-【新建】或者Ctrl+N-左边选【基本页】,不过这次右边选【CSS】-【创建】修改页面编码【修改】-【页面属性】-在跳出的属性界面左边,选择【标题/编码】,下拉改为【Unicode(UTF-8)】插入__/直接拖放插入__【插入】-【图像】或者,在右边的【文件】窗口,找到需要插入的__,【鼠标左键拖选】到页面中适当的位置在css里加入__背景
1.把光标放在任一个;后面(紧跟在;后面不留空格),敲空格,dw就会出现代码提示框;
2.继续输入b可以看到代码提示框里第一个b开头的代码已经变成深色;
3.使用键盘上__向键选择background、回车(或者鼠标双击),会出现新的代码提示框;
4.同样使用方向键选择、回车或者鼠标双击url;
5.在弹出来的窗口中选择i__ges文件夹下的logo.gif;
6.css部分增加了一段代码background:urli__ges/logo.gif(注意没有分号)
7.紧接着再来一个空格,又出现了新的代码提示框,输入n,选择no-repeat,并在后面紧跟着补充输入一个;__添加成功ul菜单增减项目ul和/ul是整个菜单的开头结尾,li和/li是每个菜单项的开头结尾要增加菜单项,可以通过代码方式或者所见即所得方式添加
1.切换回【设计】窗口,光标停留在某个菜单项后,回车转行,输入新菜单项即可
2.在ul和/ul之间,你需要添加新项目的位置,输入以下代码liahref=这里替换成链接地址target=_blank这里替换成链接文字/a/li链接css方法一切换至index.html代码界面,将光标停留在head后面,然后【鼠标左键拖选】【文件】窗口里的index.css拖到head后边即可(如果看不到【文件】窗口可以按快捷键【F8】)方法二【文本】-【CSS样式】-【附加样式表】-【浏览】-选择刚才新建的index.css-【确定】方法三在head/head之间单独起一行,然后输入linkhref=index.cssrel=stylesheettype=text/css/分析一个网页的效果
1.
2.在浏览器里【查看】-【源文件】,可以看到用记事本打开的网页源代码
3.挑选__菜单里的个别关键词,例如“__息”、“会员”、“搜索”等,在源文件里搜索其中一个关键词ctrl+f,找到菜单代码所在位置
4.一行一行往上分析该代码,看它被嵌套在哪个div里,经分析,菜单代码所在的div为divid=menu
5.找到css链接在head部分linkrel=stylesheettype=text/csshref=forumdata/cache/style_
1.css/linkrel=stylesheettype=text/csshref=forumdata/cache/style_1_append.css/
6.如果熟悉dz__的话,马上就可以判断出应该是style_
1.css了,另一个是空的如果不确定就把两个css都打开
7.href后面的就是该css的相对地址即完整地址是
8.在ie地址栏输入以上网址,默认会用dw打开
9.在dw里ctrl+f搜索#menu,即可分析css中控制菜单的部分附录2-css逐行解释这第__教程起点不高,希望大家能够由浅入深的学习,大部分代码,先用上再说,以后慢慢就会明白他的含义大部分代码,只要求读者会直接__粘贴使用故只做代码含义上的介绍个别代码要求能够变通使用,文中会对其中的变量进行讲解,请大家注意触类旁通*{word-wrap:break-word;}对所有元素进行控制,含义是自动断行body{background:#FFF;text-align:__nter;}对body进行控制,背景色为白色,对齐方式为水平居中bodytdinputtextareaselectbutton{color:#535353;font:12px/
1.6emArialHelveticasans-serif;}对body、单元格、输入框...等等进行控制,文字颜色为#535353,字体大小12px,行高
1.6em,字体为ArialHelveticasans-serifbodyuldlddph1h2h3h4h5h6formfieldset{__rgin:0;padding:0;}对body、ul、dl..等等进行控制,盒子与盒子之间的距离为0(边距),盒子与内部填充物的距离为0(间隙)h1h2h3h4h5h6{font-size:1em;}标题
1、标题
2...标题6的字体大小为1ema{color:#262626;text-decoration:none;}所有包含在a标签内的文字颜色一律为#262626,没有下划线a:hover{text-decoration:underline;}鼠标停留在带链接的文字上时,出现下划线这行定义覆盖了上一行定义中,鼠标停留在链接上的这种特殊情况就像军训教官先说,全部人都不许吃饭接着又补充一句张三除外由于只覆盖了下划线的定义,颜色不受影响aimg{border:none;}a标签和img标签的边框为0emcitestrongth{font-style:nor__l;font-weight:nor__l;}斜体、加粗、表格头的字体样式都显示为正常(不是斜体或倾斜),字体粗细正常(不加粗)table{empty-__lls:show;border-collapse:collapse;}单元格无内容时,是否显示边框是相邻单元格的边框是__显示还是合并合并body{font-size:12px;font-family:Taho__Arial;__rgin:0px;padding:0px;}对整个body的字体大小为12px、字体、盒子与盒子间的距离为0(边距),盒子与内部填充物的距离为0(间隙)这四个属性下面不再进行解释img{border:0pxnone;height:auto;}img标签的边框为
0、不显示高度随内容自动伸缩.clear{clear:both;height:1px;__rgin-top:-1px;overflow:hidden;}.clear是一个类,同一个页面里可以反复被div或者其他盒子调用4行代码含义一次是清除浮动属性,高度为1,盒子与盒子间的距离(正上方向)(上边距)为-1(这样浏览器的解释结果就是这个盒子高度为0,不可见)超出盒子的内容(内容溢出)不显示#header{width:780px;__rgin-right:auto;__rgin-left:auto;overflow:auto;__rgin-bottom:__x;}#head是一个idid在一个页面里是唯一的,不能重复使用宽度780px,左右边距为自动(浏览器的解释结果是该盒子水平居中)内容溢出时,出现滚动条(如果没有规定盒子高度,则自动伸长,不出现滚动条以上代码属于后者)下边距为__x相同的属性下面将不再重复介绍#logo{float:left;width:2__px;background:urli__ges/logo.gifno-repeat;height:86px;}左浮动,宽度2__px,背景图为logo.gif,背景图不重复,高度86px#banner{float:right;width:491px;background:urli__ges/banner.gifno-repeat;height:86px;}右浮动#menu{__rgin-left:auto;__rgin-right:auto;width:778px;height:31px;border:1pxsolid#CAD9EA;background:#FFFurli__ges/menu_bg.gif;background-repeat:repeat-x;__rgin-top:__x;__rgin-bottom:__x;}左右边距都是自动=水平居中边框为1px,实线,颜色是#CAD9EA(细线表格也可以这么做)背景颜色白色、背景__menu_bg.gif,背景在x轴方向重复(水平重复)#menuul{float:left;padding:4px10px0;border-right:1pxsolid#FFF;}#menuul表示在id为menu的盒子里的ul例如divid=menuul/ul/div,本定义在其他地方出现的ul无效可以覆盖之前出现过的ul定义这里说说间隙间隙后边可以有一个值、两个值、三个值、四个值,四种情况分别表示一个值四个方向的间隙相等两个值第一个值为上下间隙,第二个为左右三个值第一个为上间隙,第二个为左右间隙,第三个为下间隙四个值上、右、下、左顺时针方向#menulih1{text-decoration:none;float:left;color:#333;padding:4px8px__x25px;background:urli__ges/index.gifleftno-repeat;}背景__为index.gif,左边缘对齐,不重复#container{min-width:600px;__x-width:120060060012001200px:auto;}最大宽度1200px,最小宽度600px其他情况下随窗口大小变化要用的时候,修改黑体字部分就行了.listulli{text-align:left;__rgin-bottom:__x;__rgin-left:5px;__rgin-right:5px;list-style:none;background:urli__ges/word_bg.gifrepeat-x;}包含在.list类的盒子里边的ul中的li...(好拗口)的属性其他地方出现的li不受影响列表项样式为无(不显示黑圆点).listullia{padding-left:15px;background:urli__ges/list.gifleftbottomno-repeat;}范围同上,li里边的a标签,背景__左对齐,底部对齐.piclistdldd{float:left;display:inline;text-align:__nter;line-height:31px;}这个inline比较难解释大概的意思就是,display属性采用了这个值后,变成行排列(横向排列)。