带来一篇Div+CSS结构进门
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。在网页制造中，有很多的术语，比方：CSS、HTML、DHTML、XHTML等等。鄙人面的文章中我们将会用到一些有关于HTML的基础常识，而在你进修这篇进门教程之前，请断定你已具有了必定的HTML基本。上面我们就入手下手一步一步利用DIV+CSS举行网页结构计划吧。
一切的计划第一步就是构想，构想好了，一样平常来讲还必要用PhotoShop或FireWorks(以下简称PS或FW)等图片处置软件将必要制造的界面结构复杂的构画出来，以下是我构想好的界面结构图。
上面，我们必要依据构想图来计划一下页面的结构，细心剖析一下该图，我们不难发明，图片大抵分为以下几个部分：
1、顶部部分，个中又包含了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包含一些版权信息。
有了以上的剖析，我们就能够很简单的结构了，我们计划层以下图:
依据上图，我再画了一个实践的页面结构图，申明一上层的嵌套干系，如许了解起来就会更复杂了。
DIV布局以下：
│body{} /*这是一个HTML元素，详细我就不申明了*/
└#Container{} /*页面层容器*/
├#Header{} /*页面头部*/
├#PageBody{} /*页面主体*/
│ ├#Sidebar{} /*侧边栏*/
│ └#MainBody{} /*主体内容*/
└#Footer{} /*页面底部*/
至此，页面结构与计划已完成，接上去我们要做的就是入手下手誊写HTML代码和CSS。
接上去我们在桌面新建一个文件夹，定名为“DIV+CSS结构实习”，在文件夹下新建两个空的记事本文档，输出以下内容：
<!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="css.css"rel="stylesheet"type="text/css"/>
</head>
<body>
</body>
</html>
这是XHTML的基础布局，将其定名为index.htm，另外一个记事本文档则定名为css.css。
上面，我们在<body></body>标签对中写进DIV的基础布局，代码以下：
<divid="container"><!--页面层容器-->
<divid="Header"><!--页面头部-->
</div>
<divid="PageBody"><!--页面主体-->
<divid="Sidebar"><!--侧边栏-->
</div>
<divid="MainBody"><!--主体内容-->
</div>
</div>
<divid="Footer"><!--页面底部-->
</div>
</div>
为了使今后浏览代码更浅易，我们应当增加相干正文，接上去翻开css.css文件，写进CSS信息，代码以下：
/*基础信息*/
body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#container{width:100%}
/*页面头部*/
#Header{width:800px;margin:0auto;height:100px;background:#FFCC99}
/*页面主体*/
#PageBody{width:800px;margin:0auto;height:400px;background:#CCFF00}
/*页面底部*/
#Footer{width:800px;margin:0auto;height:50px;background:#00FFFF}
把以上文件保留，用扫瞄器翻开，这时候我们已能够看到基本布局了，这个就是页面的框架了。
关于以上CSS的申明（具体请参考CSS2.0中文手册，网上有下载）：
1、请养成优秀的正文习气，这长短常主要的；
2、body是一个HTML元素，页面中一切的内容都应当写在这标签对以内，我就未几说了；
3、解说一些经常使用的CSS代码的寄义：
font:12pxTahoma；
这里利用了缩写，完全的代码应当是：font-size:12px;font-family:Tahoma；申明字体为12像素巨细，字体为Tahoma格局；
margin:0px；
也利用了缩写，完全的应当是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px0px0px0px
按次是上/右/下/左，你也能够誊写为margin:0(缩写)；
以上款式申明body部分对上右下右边距为0像素，假如利用auto则是主动调剂边距，
别的另有以下几种写法：
margin:0pxauto；
申明高低边距为0px，摆布为主动调剂；
我们今后将利用到的padding属性和margin有很多类似的地方，他们的参数是一样的，
只不外各自暗示的寄义不不异，margin是内部间隔，而padding则是外部间隔。
text-align:center
笔墨对齐体例，能够设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF
设置背景致为红色，这里色彩利用了缩写，完全的应当是background:#FFFFFF。
background能够用来给指定的层添补背景致、背景图片，今后我们将用到以下格局：
background:#cccurl(bg.gif)topleftno-repeat；
暗示：利用#CCC(灰度色)添补全部层，利用bg.gif做为背景图片，
topleft
暗示图片位于以后层的左上端，no-repeat暗示仅显现图片巨细而不添补满全部层。
top/right/left/bottom/center
用于定位背景图片，分离暗示上/右/下/左/中；还可使用
background:url(bg.gif)20px100px;
暗示X座标为20像素，Y座标为100像素的准确定位；
repeat/no-repeat/repeat-x/repeat-y
分离暗示添补满全部层/不添补/沿X轴添补/沿Y轴添补。
height/width/color
分离暗示高度(px)、宽度(px)、字体色彩(HTML色系表)。
4、怎样使页面居中？
人人将代码保留后能够看到，全部页面是居中显现的，那末事实是甚么缘故原由使得页面居中显现呢？
是由于我们在#container中利用了以上司性：
margin:0auto;
依照后面的申明，能够晓得，暗示高低边距为0，摆布为主动，因而该层就会主动居中了。
假如要让页面居左，则作废失落auto值就能够了，由于默许就是居左显现的。
经由过程margin:auto我们就能够容易地使层主动居中了。
5、这里我只先容这些经常使用的CSS属性了，其他的请参看CSS2.0中文手册。
下一页
</P>
当我们写好了页面大抵的DIV布局后，我们就能够入手下手仔细地对每个部分举行制造了。
在上一章中我们写进了一些款式，那些款式是为了预览布局而写进的，我们把css.css中的款式全体扫除失落，从头写进以下款式代码：
/*基础信息*/
body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container{width:800px;margin:10pxauto}
款式申明：
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}
这两项分离是把持页面中超链接的款式，详细我就不申明了，请人人参阅手册。
#container{width:800px;margin:10pxauto}
指定全部页面的显现地区。
width:800px指定宽度为800像素，这里依据实践所需设定。
margin:10pxauto，则是页面上、下边距为10个像素，而且居中显现。
上一章中我们讲过，对层的margin属性的摆布边距设置为auto可让层居中显现。
接上去，我们入手下手制造TOP部分，TOP部分包含了LOGO、菜单和Banner，起首我们要做的就是对计划好的图片举行切片，以下是在FW下完成的切片：
我将TOP部分切片为两部分，第一部分包含了LOGO和一条横线。因为LOGO图片并没有太多的色彩，这里我因而将这一部分保留为GIF格局，调色板选择为准确，选择Alpha通明度，色版为红色(此处色彩应与背景致不异)，导出为logo.gif，图象宽度为800px。
到这里，有的伴侣就说了，*为何要利用GIF格局？利用JPEG不是更好吗？
由于GIF格局的图片文件更小，如许能使页面载进的速率更快，固然利用此格局之前必需断定图片并没有利用太多的色彩，当我们利用了GIF格局时，从肉眼上其实不能看出图片有甚么太年夜的变更，因而这是可行的。
*接上去的Banner部分还能利用GIF格局吗？
谜底是不克不及，由于Banner部分是一个仔细的图片，假如利用GIF格局色彩会有太年夜的丧失，以是必需利用JPEG格局，将文件导出为banner.jpg。
*公道的切片长短常之主要的，由于切片的办法准确与反对定了CSS誊写的浅易水平和页面载进速率。
切好片后，我们还必要对TOP部分举行剖析并将DIV布局写进Header中代码以下：
<P>
[*]首页
<LIclass=menuDiv>
[*]博客
<LIclass=menuDiv>
[*]计划
<LIclass=menuDiv>
[*]相册
<LIclass=menuDiv>
[*]论坛
<LIclass=menuDiv>
[*]关于
<P>为何要这么写呢，由于对菜单利用列表情势，能够在今后便利对菜单定制款式。
而为何要增加以下代码呢？
<LIclass=menuDiv>
拔出这一段代码是能够便利地对菜单选项之间拔出一些分开款式，比方预览图中的竖线分开。
然后我们在css.css中再写进以下款式：
/*页面头部*/
#header{background:url(logo.gif)no-repeat}
款式申明：
#header{background:url(logo.gif)no-repeat}
给页面头部分到场一个背景图片LOGO，而且不作添补。
这里，我们没有指定header层的高度，为何不指定呢？
由于header层中另有菜单和banner项，以是层的高度临时是未知的，而层的属性又可让层依据内容主动设定调剂，因而我们其实不必要指定高度。
利用列表
制造菜单
入手下手此节的进修前，请确认你已参照之前的几节内容写进了DIV、CSS到index.htm和css.css文件中。
这一节我将告知人人怎样用列表
来制造菜单。
<P>
[*]首页
<LIclass=menuDiv>
[*]博客
<LIclass=menuDiv>
[*]计划
<LIclass=menuDiv>
[*]相册
<LIclass=menuDiv>
[*]论坛
<LIclass=menuDiv>
[*]关于
以上是这部分的布局，有关于、>这两个HTML元素人人本人往参考相干的内容吧，它们最次要的感化就是在HTML中以列表的情势来显现一些信息。
另有一点必要人人必定要分分明的，当在HTML中界说为id="divID"时，在CSS对应的设置语法例是#divID{}，假如在HTML中界说为class="divID"时，则在CSS中对应的设置语法是.divID。
假如id="divID"这个层中包含了一个
这时候，列表内容是分列在一行，我们在#menuulli{}再到场代码margin:010px
#menuul{list-style:none;margin:0px;}
#menuulli{float:left;margin:010px}
margin:010px的感化就是让列表内容之间发生一个20像素的间隔(左：10px，右：10px)，预览的效果以下：
如今，雏形已出来了，我们再来流动菜单的地位，把代码改成以下：
#menu{padding:20px20px00}
/*使用padding:20px20px00来流动菜单元置*/
#menuul{float:right;list-style:none;margin:0px;}
/*增加了float:right使得菜单元于页面右边*/
#menuulli{float:left;margin:010px}
这时候，地位已断定了，但是构想图中，菜单选项之间另有一条竖线，怎样办呢？
别忘了，我们早就已留好了一个空的
<LIclass=menuDiv>，要想到场竖线就利用它了。
依照下面说的办法，我们再增加以下代码：
.menuDiv{width:1px;height:28px;background:#999}
保留预览一下，竖线是不是已出来了？关于这段代码就未几讲了，应当是很简单了解的。
不外，菜单选项的笔墨却在顶部，我们再修正成以下代码：
#menuulli{float:left;margin:010px;display:block;line-height:28px}
关于display:block;line-height:28px人人能够往参阅一动手册，我就未几讲了。
效果基础上已完成了，剩下的就是修正菜单的超链接款式，在css.css中增加以下代码：
#menuullia:link,#menuullia:visited{font-weight:bold;color:#666}
#menuullia:hover{}
这个也未几说了，没甚么好说的了，最初的效果以下：
这一节到这里就终了了，特地把素材供应给人人：
构想图：点击下载
HTML和CSS源文件：点击下载
上一页下一页
这一节内里，次要就是想告知人人怎样利用好border和clear这两个属性。
<P>起首，假如你曾用过table制造网页，你就应当晓得，假如要在表格中绘制一条虚线该怎样做，那必要制造一个很小的图片来添补，实在我们另有更复杂的举措，只需在中到场这么一段就能够了，你能够尝尝：
人人能够再次参考手册，然后你就可以分明dashed、solid、dotted...等的感化，使用它们你能够制造出很多效果来，实线、虚线、双线、暗影线等等。
<P>
以上代码即可以完成计划草图中的banner，在css.css中到场以下款式：
#banner{
background:url(banner.jpg)030pxno-repeat;/*到场背景图片*/
width:730px;/*设定层的宽度*/
margin:auto;/*层居中*/
height:240px;/*设定高度*/
border-bottom:5pxsolid#EFEFEF;/*画一条浅灰色实线*/
clear:both/*扫除浮动*/
}
经由过程border很简单就绘制出一条实线了，而且削减了图片下载所占用的收集资本，使得页面载进速率变得更快。
另外一个要申明的就是clear:both，暗示扫除左、右一切的浮动，在接上去的结构中我们还会用这个属性：clear:left/right。在这里增加clear:both是因为之前的ul、li元素设置了浮动，假如不扫除则会影响banner层地位的设定。
以上是页面主体部分，我们在css.css中增加以下款式：
#pagebody{
width:730px;/*设定宽度*/
margin:8pxauto;/*居中*/
}
#sidebar{
width:160px;/*设定宽度*/
text-align:left;/*笔墨左对齐*/
float:left;/*浮动居左*/
clear:left;/*不同意左边存在浮动*/
overflow:hidden;/*超越宽度部分埋没*/
}
#mainbody{
width:570px;
text-align:left;
float:right;/*浮动居右*/
clear:right;/*不同意右边存在浮动*/
overflow:hidden
}
为了能够检察到效果，倡议在#sidebar和#mainbody中到场以下代码，预览完成后能够删除这段代码：
border:1pxsolid#E00;
height:200px
保留预览效果，能够发明这两个层完善的浮动，在到达了我们结构的请求，而两个层的实践宽度应当160+2(border)+570+2=734px，已超越了父层的宽度，因为clear的缘故原由，这两个层才不会呈现错位的情形，如许可使我们结构的页面不会由于内容太长（比方图片）而招致错位。
而以后增加的overflow:hidden则能够使内容太长（比方图片）的部分主动被埋没。一般我们会看到一些网页在载进时，因为图片太年夜，招致结构被撑开，直到页面下载完成才恢复一般，经由过程增加overflow:hidden就能够办理这个成绩。
CSS中每个属性使用妥当，就能够办理很多成绩，也许它们与你在结构的页并没有太年夜的干系，可是你必需晓得这些属性的感化，在碰到困难的时分，能够实验利用这些属性往办理成绩。
上一页
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
带来一篇Div+CSS结构进门
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet)的家喻户晓。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。
页:
[1]