版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；html模板及文件目录等；第三步：将网站分为五个divdiv浮动等；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；(较难)；1第一步：规划网站，以图示为例构建网站
1.规划网站，以下图为例构建网站
2其基本布局见下图
3规划网站主要由五个部分构成
1.MainNavigation导航条，具有按钮特效。Width:760pxHeight:50px2.Header网站头部图标，包含网站的logo和站名。
Width:760pxHeight:150px3.Content网站的主要内容。
Width:480pxHeight:Changesdependingoncontent4.Sidebar边框，一些附加信息。Width:280pxHeight:Changesdependingoncontent5.Footer网站底栏，包含版权信息等。Width:760pxHeight:66px。4HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；5第二步：创建html模板及文件目录等
1.创建html模板代码如下
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"">
<html>
<head>
<metahttp-equiv="Content-type"content="text/html;charset=UTF-8"/>
<title>CompanyName-PageName</title>
<metahttp-equiv="Content-Language"content="en-us"/>
<metahttp-equiv="imagetoolbar"content="no"/>
<metaname="MSSmartTagsPreventParsing"content="true"/>
<metaname="description"content="Description"/>
<metaname="keywords"content="Keywords"/>
<metaname="author"content="EnlightenDesigns"/>
<styletype="text/css"media="all">@import"css/master.css";</style>
</head>
<body>
</body>
</html>将其保存为index.html,并在ROOT下创建文件夹css和images62.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。在html文件的<body>和</body>之间写入
<divid="container">
Helloworld.
</div>创建css文件，命名为master.css,保存在/css/文件夹下。写入：
#container{
width:760px;
background:red;
}7控制html的id为container的盒子的宽为760px，背景为红色：为了让盒子居中，写入margin:auto;，使css文件为：
#container{
width:760px;
margin:auto;
background:red;
}盒子和浏览器的顶端有空隙。由于浏览器的默认的填充和边界造成的。消除空隙需要在css文件中写入：
html,body{
margin:0;
padding:0;
}margin:auto是左右自适应两边距离一样8HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；9第三步：将网站分为五个div，网页基本布局的基础
1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：
<divid="container">
<divid="main-nav">MainNav</div>
<divid="header">Header</div>
<divid="sidebar-a">SidebarA</div>
<divid="content">Content</div>
<divid="footer">Footer</div>
</div>表现如下：
102.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入#main-nav{
background:red;
height:50px;
}
#header{
background:blue;
height:150px;
}
#sidebar-a{
background:darkgreen;
}
#content{
background:green;
}
#footer{
background:orange;
height:66px;
}11表现如下
12HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；1314第四步：网页布局与div浮动等
1.浮动，首先让边框浮动到主要内容的右边。用css控制浮动
#sidebar-a{
float:right;
width:280px;
background:darkgreen;
}表现如下
152.往主要内容的盒子中写入文字。在html文件中写入<divid="content">
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
</div>16表现如下
问题：Content的盒子占据了整个container的宽度，需要将#content的右边界设为280px。以使其不和边框发生冲突。
css代码如下：#content{
margin-right:280px;
background:green;
}17同时往边框里写入一些文字。在html文件中写入：
<divid="sidebar-a">
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
</div>18表现如下
1920问题：网站的底框跑到边框的下边了。之前将边框向右浮动，浮动可以理解为它位于整个盒子之上的另一层。
因此我们往css中写入：
#footer{
clear:both;
background:orange;
height:66px;
}主要是用在div套div的结构中。如果内div是浮动的，一般都需要clear浮动，不然的话内div会超出外div的框架21表现如下22HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；2324第五步：网页主要框架之外的附加结构的布局与表现
第五步主要介绍除网页主要框架之外的附加结构的表现(Layout),包括以下内容:1.主导航条；
2.标题(heading),包括网站名和内容标题；
3.内容；
4.页脚信息,包括版权,认证,副导航条(可选)。
加入这些结构时，为了不破坏原有框架，需要在css文件“body”标签后面加入:
.hidden{
display:none;
}“.hidden”即加入的类(class),可以使页面上任意属于hidden类的元素(element)不显示稍后介绍和使用。25现在加入标题(heading)
先回到HTML的代码，<h1>到<h6>是常用的html标题代码。比如一般用<h1>网站名</h1>，<h2>网站副标题</h2>,<h3>内容主标题</h3>等。往html文件的Header层(Div)加入:<divid="header">
<h1>EnlightenDesigns</h1>
</div>
刷新一下页面，可以看到巨大的标题，和标题周围的空白，因为<h1>标签的默认大小和边距(margin)造成的，先要消除这些空白,需要加入：h1{
margin:0;
padding:0;
}26接下来是导航条
控制导航条表现的css代码相对比较复杂，在第九步或是第十步中详细介绍。现在html文件加入导航代码:
<divid="main-nav">
<ul>
<liid="about"><ahref="">About</a></li>
<liid="services"><ahref="">Services</a></li>
<liid="portfolio"><ahref="">Portfolio</a></li>
<liid="contact"><ahref="">ContactUs</a></li>
</ul>
</div>27
目前导航条的表现比较糟糕，以后将介绍其特殊表现，这里首先暂时隐藏导航条,加入：<divid="main-nav">
<dlclass="hidden">
<ul>
<liid="about"><ahref="">About</a></li>
<liid="services"><ahref="">Services</a></li>
<liid="portfolio"><ahref="">Portfolio</a></li>
<liid="contact"><ahref="">ContactUs</a></li>
</ul>
</dl>
</div>28我们跳一步，先到页脚：
页脚包括两部分：左边的版权,认证和右边的副导航条。
先要让副导航条向右浮动，就像之前处理Sidebar和Content关系的一样，需要加入一个新的层(div):<divid="footer">
<divid="altnav">
<ahref="">About</a>-
<ahref="">Services</a>-
<ahref="">Portfolio</a>-
<ahref="">ContactUs</a>-
<ahref="">TermsofTrade</a>
</div>
</div>2930
理论上，我们可以控制源文件上的任意元素的浮动，但由于IE浏览器的BUG，被浮动层需要首先出现在源文件上，也就是说我们把副标题放在版权和认证的前面：
<divid="footer">
<divid="altnav">
<ahref="">About</a>-
<ahref="">Services</a>-
<ahref="">Portfolio</a>-
<ahref="">ContactUs</a>-
<ahref="">TermsofTrade</a>
</div>
Copyright©EnlightenDesigns
Poweredby<ahref="">EnlightenHosting</a>and
<ahref="">Vadmin3.0CMS</a></div>31刷新页面，将看到如下所示3233最后我们回到内容部分：用<h2>表现内容标题–"About","Contactus"；用<p>表现段落；用</br>断行。<divid="content">
<h2>About</h2>
<p><strong>EnlightenDesigns</strong>isanInternetsolutionsproviderthatspecialisesin
frontandbackenddevelopment.Toviewsomeofthewebsiteswehavecreatedviewour
portfolio.</p>
<p>Wearecurrentlyundergoinga'facelift',soifyouhaveanyquestionsorwould
likemoreinformationabouttheservicesweprovidepleasefeelfreetocontactus.</p>
<h2>ContactUs</h2>
<p>Phone:(07)8536060<br/>
Fax:(07)8536060<br/>
Email:<ahref="mailto:"></a><br/>
P.OBox:14159,Hamilton,NewZealand</p>
<p><ahref="">Morecontactinformation…</a></p>
</div>34
小技巧：刷新页面可以看到在Content层中又出现一些空白，这是由于<h2><p>标签的默认边距(margin)造成的，必须消除空白，当又不想把网页中所有的<h2><p>标签地边距都设为0，这就需要使用css的子选择器("childcssselector"),在html的文件结构中，我们想控制的<h2><p>标签(child)是属于#content层(parent)的,因此在css文件中写入：
#contenth2{
margin:0;
padding:0;
}
#contentp{
margin:0;
padding:0;
}浏览器可以识别仅仅是隶属于content层的<h2><p>标签的margin和padding的值为0！35HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；3637第六步：页面内的基本文本的样式(css)设置首先：去掉红绿等背景，只保留导航条的红色背景，即删除css文件中的background属性。
然后：先设置全局的文本样式：
body{
font-family:Arial,Helvetica,Verdana,Sans-serif;
font-size:12px;
color:#666666;
background:#ffffff;
}
一般把body标签放在css文件的顶端。font-family内的顺序决定字体显示优先级，比方如果所在计算机没有Arial字体，浏览器就会指向Helvetica字体，依次类推；color指字体颜色；background指背景颜色。
3839
可以看到内容(content)的各块(block)之间的间隙太小，在css中写入：#contenth2{
margin:0;
padding:0;
padding-bottom:15px;
}
#contentp{
margin:0;
padding:0;
padding-bottom:15px;
}40
然后需要让content层的四周都空出25px的间隙：方案一：可以在#content的css文件中加入padding:25px；
方案二：需要填充的层中加入padding层，它的功能仅限于显示间隙：
<divid="sidebar-a">
<divclass="padding">
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
</div>
</div>41同样的，再往html文件的content层中加入padding层。
然后在css中添加:#sidebar-a{
float:right;
width:280px;
}
#sidebar-a.padding{
padding:25px;
}
#content{
margin-right:280px;
}
#content.padding{
padding:25px;
}42
接下来设置行距，content和sidebar-a的行距需要加宽，但在css中是没有行距(leading)这种属性(attribute)的，但是有行高(line-height)属性，因此往css中写入：#sidebar-a{
float:right;
width:280px;
line-height:18px;
}
#content{
margin-right:280px;
line-height:18px;
}43<h2><imgsrc="images/headings/about.gif"width="54"height="14"alt="About">
<h2><imgsrc="images/he/></h2adings/contact.gif"width="98"height="14"alt="ContactUs"/></h2>44HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；45第七步：网站头部图标与logo部分的设计为实现设计时的网页头部效果，我们需要以下两幅图：
/images/headers/about.jpg
/images/general/logo_enlighten.gif46首先给#header层添加背景图案#header{
height:150px;
background:#db6d16
url(../images/headers/about.jpg);
}47接着替换掉<h1></h1>标签里的"EnlightenDesigns"<divid="header">
<h1><imgsrc="images/general/logo_enlighten.gif"
width="236"height="36"alt="EnlightenDesigns"border="0"/></h1>
</div>logo_enlighten图片浮在头部的左上方，我们需要设置<h1>的属性值为h1{
margin:0;
padding:0;
float:right;
margin-top:57px;
padding-right:31px;
}
48
这样我们使存在于<h1>层的图片向右浮动，并且上边距(margin-top)为57px，右间隙(padding-right)为31px，如下图所示49HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；50第八步：页脚信息(版权等)的表现设置首先需要控制页脚的文本显示：#footer{
clear:both;
height:66px;
font-family:Tahoma,Arial,Helvetica,Sans-serif;
font-size:10px;
color:#c9c9c9;
}接着设置存在链接的文本的显示，例如让下划线消失:#footera{
color:#c9c9c9;
text-decoration:none;
}51如果想让存在链接的文本，在鼠标悬停在其上方时变色为#db6d16：#footera:hover{
color:#db6d16;
}如果想给页脚加上灰色的上边框，在footer层的四周设置一些间隙，并加大文本的行距：#footer{
clear:both;
height:66px;
font-family:Tahoma,Arial,Helvetica,Sans-serif;
font-size:10px;
color:#c9c9c9;
border-top:1pxsolid#efefef;
padding:13px25px;
line-height:18px;
}
边框线的类型有：dotted（由点组成的虚线）solid（实线）…52
如果想让副导航层(#altnav)向右浮动，需要设置#altnav的宽度
并且想让文本向右对齐：#footer#altnav{
width:350px;
float:right;
text-align:right;
}得到如下图所示的页脚样式53HTML+CSS+DIV建站实例讲解第一步：规划网站，以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；54第九步：导航条的制作(较难)1.先去掉导航条的红色背景，2.移除html文件中main-nav层的"class="hidden"",使导航条的内
容显示出来。3.将这4幅图保存于/images/nav/文件夹中55导航条的动态效果如下图所示
在网页显示的只是图中红框标出的部分，如果把每幅图分为上，中，下三部分的话，未发生动作时显示上部，当光标悬停时，显示的是中部，被选择时则显示下部。56接下来进入css代码部分，先往css文件中写入/*MainNavigation*/
#main-nav{height:50px;}
#main-navul{margin:0;padding:0;}定义了main-nav层的高度定义main-nav层中列表的属性
如果想让导航条和左边有一定的距离，需要设置main-nav层的左边距(padding-left)：/*IE5MacHack\*/
#main-nav{padding-left:11px;}
/*/
#main-nav{padding-left:11px;overflow:hidden;}
/*EndHack*/57可以发现列表项目是竖排的，将<li>，即列表项目向左对齐就能使其从左到右横向排列#main-navli{float:left;}为了使列表项目的尺寸和容纳它的层保持一致，并利用浮动属性使列表项目的文本隐藏，写入：#main-navlia{
display:block;
height:0px!important;
height/**/:50px;/*IE5/Winhack*/
padding:50px000;
overflow:hidden;
background-repeat:no-repeat;
}58
接着，要实现当光标悬停
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 初中地理的教学设计
- 云计算投资银行服务行业市场需求变化带来新的商业机遇分析报告
- VRAR电影制作与放映行业发展趋势研判及战略投资深度研究报告
- 云项目管理工具行业市场需求变化带来新的商业机遇分析报告
- 自助银行服务行业市场需求变化带来新的商业机遇分析报告
- 保险咨询服务行业三年发展洞察报告
- 农业机器人技术行业三年发展预测分析报告
- 远程患者监护行业市场需求变化带来新的商业机遇分析报告
- 2024年达美航空合作协议书
- 信息和数据的电子传输行业三年发展洞察报告
- 提高静脉血栓栓塞症规范预防率-医务科-2023.12.7
- 广东省深圳市龙岗区承翰学校2023-2024学年六年级下学期期中数学试卷
- 以人为本护理安全文化
- 广东省深圳市龙岗区南湾实验小学2023-2024学年六年级下册数学期中测试卷+
- DB11∕T 882-2023 房屋建筑安全评估技术规程
- 外研版英语(新版)八年级上册单词表(听写版)
- 3D打印工艺的质量控制与优化
- 形式美法则图例
- 2024春国开会计实务专题形考任务题库及答案汇总
- 2019年一级注册消防工程师继续教育三科题库+答案
- （2023）小学《义务教育道德与法治课程标准(2022年版)》试卷附含答案
评论
0/150
提交评论