DIV教程之第十天 div+css网页尺度结构实例教程（一）
并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的话，两个浏览器下会有区别，具体有一个会产生间隙。[*]
[*]
明天进修《十天学会web尺度(div+css)》的最初一个章节，本章节把后面进修的琐屑内容串连起来，构造成一个网站，将依据自己这些年来的从业履历，从创建站点到一个完全的div+css网页的完成，全部流程上去，但愿能对列位有所匡助。因为本节内容较多，将分三部分来说解。
[*]创建站点
[*]布局剖析
[*]搭建框架
[*]切割最终效果
[*]结构页面——头部和导航
[*]结构页面——侧边栏
[*]结构页面——主体部分
[*]底部和细节调剂
[*]绝对路径和相对根目次路径
1、创建站点
后面的课程都是琐屑解说一些相干常识，那末要做一个网站，起首必要创建一个站点。那末甚么是站点，为何要创建一个站点呢？由于网站分歧于别的文件，好比一个图片，放到哪一个盘哪一个目次下都能够会见。而网站是很多文件互相联系关系的，以是要专门一个目次把它们分门别类寄存起来。假如弄过视频编纂的伴侣都晓得，必要先创建一个工程，把原始的视频文件、图片素材分类放好，也是这个事理。上面以在D盘创建一个jiaocheng文件夹为例，在dreamweaver(简称DW)里创立一个站点指向这个文件夹，然后在目次下新建images文件夹、css文件夹等把各种文件分离寄存起来。
保留后，一个站点就创建起来了，我用的是DWcs5版本，分歧版本界面有所分歧。假如要毗连FTP，必要设置服务器选项（前面会触及到）。站点创建好后，我们先创建一个images和css文件夹，分离用来寄存图片和css文件。间接在windows的资本办理器下创建大概在dw里创建都是能够的；在dw创建必要在文件面板列表的根目次上点击右键，选择新建文件夹后变动名字便可。
2、布局剖析
创立完站点后，就必要对页面布局举行剖析了，依据最终效果，剖析页面分为几年夜块，该怎样结构更公道。上面这个图是我做的一个企业网站的模板，固然不怎样悦目，但目标是把前边学的器材全都给串起来，让人人把握各类情形的处置办法，先看下最终效果及在网页中显现的款式：
在扫瞄器中翻开最终效果预览
从图中能够看出全部页面分为头部地区、导航地区、主体部分和底部，个中主体部分又分为摆布两列，全部页面居中显现，看分明了这点，下边的框架就好搭建了。全体框架了局图以下：
3、搭建框架
起首在dw里新建一个html文件：
点击创立后会主动天生以下代码的一个html文件，保留为index.html并把无题目文档改成：主页。夸大一点，很多同砚喜好把第一行代码删撤除，以为没用，实在这句话的感化年夜着呢，它标明以何种情势剖析文档，假如删除大概会引发款式表生效或别的意想不到的成绩。接上去必要拔出以上各个块的标签了，以拔出header的标签为例，别的的拔出办法类同。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>主页</title>
</head>
<body>
</body>
</html>
依照上图的办法顺次拔出标签，大概间接在代码视图中手工输出，代码以下：（注重main和side在maincontent里包括着呢）
<divid="header">此处显现id"header"的内容</div>
<divid="nav">此处显现id"nav"的内容</div>
<divid="maincontent">
<divid="main">此处显现id"main"的内容</div>
<divid="side">此处显现id"side"的内容</div>
</div>
<divid="footer">此处显现id"footer"的内容</div>
从上边的最终效果剖析得知，全部网页是居中扫瞄器显现的，依照如许的写法必要把以上的header、nav、maincontent、footer都设置宽度并居中，如许做起来很贫苦，以是再在这些标签外增添一下父标签，设置这个父标签宽度并居中后，是否是一切的标签都居中了呢。增添后的代码以下：
<divid="container">
<divid="header">此处显现id"header"的内容</div>
<divid="nav">此处显现id"nav"的内容</div>
<divid="maincontent">
<divid="main">此处显现id"main"的内容</div>
<divid="side">此处显现id"side"的内容</div>
</div>
<divid="footer">此处显现id"footer"的内容</div>
</div>
html框架代码写完后，下边就必要设置css款式表了。先丈量下最终效果的全体宽度，然后设置container也是这个宽度并居中。提及丈量最终效果宽度，办法有多种，能够间接检察图片尺寸。假如丈量个中某一块的宽度，可使用丈量软件，也能够在ps下丈量。自己一样平常在ps下丈量，由于最终效果在ps下制造的，以是用ps丈量也对照便利。办法是首选项里把ps的单元改成像素，然后用选区选中要丈量的部分，在信息面板中就显现出以后选区的宽高了（假如你其实不晓得怎样改单元，怎样选区怎样检察的，就要补习一下ps啦）。
丈量后得知：全体宽度为900px，main部的宽度为664px，side宽度为228px。把这三个基础的宽度丈量后，上面就能够写css代码了。因为本实例是依照实践傍边使用来做的，以是css款式表就最好写在独自文件里了，不要再写在文件外部了，如许能够使用代码的重用性，削减良多休息强度。上面就新建一个css款式表文件：在DW文件菜单选择新建，然后在翻开的窗口页面范例当选择css，创立后保留在css文件夹中并定名为layout.css
保留后先设置全局的款式，尔后写每块独自的款式，全局款式以下：
body{margin:0auto;font-size:12px;font-family:Verdana;line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p{padding:0;margin:0;}
ul{list-style:none;}
img{border:0px;}
a{color:#05a;text-decoration:none;}
a:hover{color:#f00;}
全局的款式界说完后，上面界说以上几年夜块的款式，先设置下#containerr的款式以下：
#container{width:900px;margin:0auto;}
预览下index.html，发明并没有改动，这是为何呢？由于刚界说的款式表没有和html文件联系关系，以是设置的款式固然不克不及对它失效了，还记得第一天课时讲的几种款式并联体例吗？上面我操纵一遍：在css面板中点击附加款式表按钮，然后在弹出的窗口当选择方才创立的款式表文件，断定，ok了，预览一下，是否是全体已居中了呢。
假如已是宽度为900px并居中，申明款式和文件联系关系好了。这就是为何要界说一个站点了，由于很多文件要联系关系在一同才干组成一个完全的网页，以是要把它们放在一同，才干让这个页面找到和它相干的文件在那里。上面设置外部几年夜块的款式，为了便于察看，我们把部分块设置了背景致。代码以下：
/*body*/
#container{width:900px;margin:0auto;}
/*header*/
#header{height:70px;background:#CCFFCC;margin-bottom:8px;}
#nav{height:30px;background:#CCFFCC;margin-bottom:8px;}
/*main*/
#maincontent{margin-bottom:8px;}
#main{float:left;width:664px;height:500px;background:#FFFF99;}
#side{float:right;width:228px;height:500px;background:#FFCC99;}
/*footer*/
#footer{height:70px;background:#CCFFCC;}
如今预览一下：在IE6下#maincontent的底部外边距并没有失效，而在IE8下，#footer爽性跑到#maincontent的下边了，这又是怎样回事呢？假如前边几天你都仔细学的话，那末这个成绩已不是成绩了。这就是之前我们讲的，假如一个容器内的元素都浮动的话，那末它的高度将不会往顺应外部元素的高度。办理举措是在#maincontent增添overflow:auto;zoom:1;，如许就能够让它主动顺应外部元素的高度了。
如今再预览一下，是否是都一般了。为了加倍保险，倡议在header、nav、maincontent、footer之间增添以下一句代码并设置css款式以下，它的感化是扫除浮动。
<divclass="clearfloat"></div>
.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>主页</title><linkhref="http://www.ckuyun.com/upload/2010-09/16/layout.css"rel="stylesheet"type="text/css"/></head><body><divid="container"><divid="header">此处显现id"header"的内容</div><divclass="clearfloat"></div><divid="nav">此处显现id"nav"的内容</div><divclass="clearfloat"></div><divid="maincontent"><divid="main">此处显现id"main"的内容</div><divid="side">此处显现id"side"的内容</div></div><divclass="clearfloat"></div><divid="footer">此处显现id"footer"的内容</div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
4、切割最终效果
基础框架搭建终了后，下一步就是要剖析每块该怎样切图了。切图办法有多种，可使用ps或fireworks自带的切片工具，也能够用QQ的截屏大概创立新文件，把必要的部分复制过去保留都能够，关头看团体喜欢了。
用ps的切片工具的话，把必要切割的地区用切片工具切分，假如要设置图片的称号，请利用切片选择工具，然后在切片上双击，会弹出以下窗口，填写名字后断定便可。
切割完后，必要保留图片了，选择文件——存储为web和设备所用格局，在弹出的窗口中点击选中切片，然后在右边能够设置以后切片的图片格局。这里有个技能，一样平常小型色采单一的图片，接纳gif格局，照片类年夜型图片接纳jpg，如许天生的图片既能包管质量，图片体积又小，具体懂得可参看：http://www.ckuyun.com/div_css/547.shtml
设置完图片的格局后，就能够存储了，这里选择到images的上一级目次就好了，ps会主动创立images目次并把图片文件放进，假如已存在，间接放进。在格局处选择仅限图象，假如选择html和图象，ps会主动天生一个表格局的网页，这个页面不是我们必要的，就不让它天生了；另有一个必要注重的中央就是选择一切用户切片，如许只把我们手动切割的图片保留上去，别的的就不保留了。保留后的图片以下所示，个中hot_bg.gif这张图片切割时没有埋没上边的笔墨，一会儿在ps里再处置一下把笔墨抹失落。
今朝所切的图片只是一部分，并没有把全部页面所需的图片全都切割上去，好比导航部分所用背景图片能够放到一张图片上，上面就用新建文件，然后用QQ截屏，粘贴已往的办法来创立。
剖析一下上图的导航部分：1、两头的圆角；2、鼠标划过形态和以后栏目形态宽度应当跟着字数的几而改动；3、二级导航有鼠标划过期的形态。剖析完以后，就必要把必要的图片整合到一张图片上了，整合的了局以下图，这个依据本人的必要举行整合。实在完整能够把别的一些小图标都整合在一张，但那样操纵起来对照贫苦，以是我们仍是回一下类，把相干的图标整合到一同。
接上去整合侧边栏的背景图片，剖析发明侧边栏使用一样的款式，只不外高度有所分歧，并且是四角都是圆角，以是只用一个通用的就能够满意一切侧边栏块的需求了。那末怎样制造这个通用的背景呢？从下图我们发明，题目的高度都是一样的，只不外是下边的内容高度分歧罢了，那末我们把下边内容的背景制造的充足长，凌驾大概呈现的最年夜高度就能够满意需求了。
整合后的效果如上图，假如你如今还不分明为何要这么做，那末一会儿写完款式表你就分明了。上面把三个图标也给切出来，以下图：
这些完过后，另有接洽我们的图片和润色小图标了。接洽我们的图片以下，这里的图片和小图标要背景通明，如许才不会粉饰上面的背景。
（接下一篇）
点击此处下载实例源代码及psd源文件
在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道，实在是太过于麻烦。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
页:
[1]