|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
并排在一行的两个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> <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>
丈量后得知：全体宽度为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;} #container{width:900px;margin:0auto;}
假如已是宽度为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;}
如今再预览一下，是否是都一般了。为了加倍保险，倡议在header、nav、maincontent、footer之间增添以下一句代码并设置css款式以下，它的感化是扫除浮动。<divclass="clearfloat"></div>
.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}
尺度之路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基础上进行改版,几乎必须改变所有的内容注入渠道，实在是太过于麻烦。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:31:20
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-3-6 11:08:25