来讲讲：Div+CSS结构进门教程

目前我们的站就是div+CSS做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
1.
在网页制造中，有很多的术语，比方：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。
2.
[接上去我们在桌面新建一个文件夹，定名为“DIV+CSS结构实习”，在文件夹下新建两个空的记事本文档，输出以下内容：
无题目文档
这是XHTML的基础布局，将其定名为index.htm，另外一个记事本文档则定名为css.css。
上面，我们在标签对中写进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中文手册
3.
Div+CSS结构进门教程之三-页面顶部制造
当我们写好了页面大抵的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格局，将文件导

123下一页

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
出为banner.jpg。
*公道的切片长短常之主要的，由于切片的办法准确与反对定了CSS誊写的浅易水平和页面载进速率。
切好片后，我们还必要对TOP部分举行剖析并将DIV布局写进Header中代码以下：
　　
　　　
<divid="menu">
　　　<ul>
　　　　<li><ahref="#">首页</a></li>
　　　　<liclass="menuDiv"></li>
　　　　<li><ahref="#">博客</a></li>
　　　　<liclass="menuDiv"></li>
　　　　<li><ahref="#">计划</a></li>
　　　　<liclass="menuDiv"></li>
　　　　<li><ahref="#">相册</a></li>
　　　　<liclass="menuDiv"></li>
　　　　<li><ahref="#">论坛</a></li>
　　　　<liclass="menuDiv"></li>
　　　　<li><ahref="#">关于</a></li>
　　　</ul>
　　</div>
　　<divid="banner">
　　</div>

　　　
　　
　　
　　
为何要这么写呢，由于对菜单利用列表情势，能够在今后便利对菜单定制款式。
而为何要增加以下代码呢？
拔出这一段代码是能够便利地对菜单选项之间拔出一些分开款式，比方预览图中的竖线分开。
然后我们在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文件中。
这一节我将告知人人怎样用列表来制造菜单。


<divid="menu">
<ul>
<li><ahref="#">首页</a></li>
<liclass="menuDiv"></li>
<li><ahref="#">博客</a></li>
<liclass="menuDiv"></li>
<li><ahref="#">计划</a></li>
<liclass="menuDiv"></li>
<li><ahref="#">相册</a></li>
<liclass="menuDiv"></li>
<li><ahref="#">论坛</a></li>
<liclass="menuDiv"></li>
<li><ahref="#">关于</a></li>
</ul>
</div>



以上是这部分的布局，有关于、这两个HTML元素人人本人往参考相干的内容吧，它们最次要的感化就是在HTML中以列表的情势来显现一些信息。
另有一点必要人人必定要分分明的，当在HTML中界说为id="divID"时，在CSS对应的设置语法例是#divID{}，假如在HTML中界说为class="divID"时，则在CSS中对应的设置语法是.divID。
假如id="divID"这个层中包含了一个，则这个img在CSS中对应的设置语法应当是#divIDimg{}，一样，假如是包括在class="divID"这个层中时，则设置语法应当是.divIDimg{}，这一点但愿人人要分分明了。
别的，HTML中的统统元素都是能够界说的，比方table、tr、td、th、form、img、input...等等，假如你要在CSS中设置它们，则间接写进元素的称号加上一对年夜括号{}就能够了。一切的CSS代码都应当写在年夜括号{}中。
依照下面的先容，我们先在css.css中写进以下代码：
#menuul{list-style:none;margin:0px;}
#menuulli{float:left;}
注释一下：
#menuul{list-style:none;margin:0px;}
list-style:none，这一句是作废列表前点，由于我们不必要这些点。
margin:0px，这一句是删除UL的缩进，如许做可使一切的列表内容都不缩进。
#menuulli{float:left;}
这里的float:left的摆布是让内容都在统一行显现，因而利用了浮动属性(float)。
到这一步，倡议人人先保留预览一下效果，我们再增加上面的内容，效果以下：

登录/注册后可看大图

这时候，列表内容是分列在一行，我们在#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}
这时候，地位已断定了，但是构想图中，菜单选项之间另有一条竖线，怎样办呢？
别忘了，我们早就已留好了一个空的，要想到场竖线就利用它了。
依照下面说的办法，我们再增加以下代码：
.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{}
这个也未几说了，没甚么好说的了，最初的效果以下：

登录/注册后可看大图

</P><STRONG>这一节到这里就终了了，特地把素材供应给人人：
构想图：点击下载
HTML和CSS源文件：<STRONG>

上一页123下一页

学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。

网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
<divclass="start">点击下载</STRONG></STRONG></P>Div+CSS结构进门教程(3)之四-页面制造-用好border和clear
这一节内里，次要就是想告知人人怎样利用好border和clear这两个属性。
起首，假如你曾用过table制造网页，你就应当晓得，假如要在表格中绘制一条虚线该怎样做，那必要制造一个很小的图片来添补，实在我们另有更复杂的举措，只需在中到场这么一段就能够了，你能够尝尝：
人人能够再次参考手册，然后你就可以分明dashed、solid、dotted...等的感化，使用它们你能够制造出很多效果来，实线、虚线、双线、暗影线等等。
以上代码即可以完成计划草图中的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中每个属性使用妥当，就能够办理很多成绩，也许它们与你在结构的页并没有太年夜的干系，可是你必需晓得这些属性的感化，在碰到困难的时分，能够实验利用这些属性往办理成绩。<P>

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

仓酷云

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。