文档介绍：网页制作实验报告
网页制作实验报告
0 / 17
网页制作实验报告
《网页设计与制作》
实 验 报 告
院系名称: 管理学院 专业班级: 电子商务 11级3班
学生姓名： 许世谦 找到了感觉，最高兴的是最后当自己的代码在网页中显示出来的时候,自己的努力是值得的,越来越喜欢网页制作了!
网页制作实验报告
网页制作实验报告
3 / 17
网页制作实验报告
实验二：ＦireWorks和ＣＳS实验
一、实验目的
1、掌握为给定效果图规划切图方式的能力;
2、掌握利用FirｅWorks切图的能力;
3、掌握利用CSS+DIＶ制作网页的能力。
二、实验课时
2课时
三、实验内容
1、规划切图方式的思路
首先,将网页的布局了解清楚,然后,根据不同的模块分类，导航条分为一类，其余的各归各类，之后利用ＦireＷorkｓ切图。
2、利用FireWｏrks切图的步骤
运用FｉｒeWorkｓ将图片切为自己所需要的部分和比例，如图所示:
网页制作实验报告
网页制作实验报告
4 / 17
网页制作实验报告
3、CSＳ+ＤIＶ制作网页的结果
<hｔml＞
<ｈead><ｔitｌe></tｉtle>
<bodｙ bgcolor="#ｆfffff">
<stｙle typｅ="text/css">
body{}
.ｔop｛ｍａｒｇin: 0px auto；bordeｒ:０ｐx;ｔexｔ-align: cenｔeｒ；}
．topmain {ｍargｉn: 0px auto； widtｈ: ９40pｘ;ｈｅighｔ: 25ｐx；padding: 0px;ｔext－ａliｇｎ: ｃｅnte；}
.tｏｐmaｉn uｌ ｛margｉn： 0ｐx；paｄdｉng： 0px;lisｔ－style－tｙpe: nｏne；ｔｅxｔ－ａligｎ： cｅｎter；｝
．toｐmain ul li {width: 72px; float： lefｔ； heiｇｈｔ： 25px；tｅxt-alｉgn： cenｔer;}
.topｍain ul li a {wiｄth: 72px； height: 25px;tｅxt-align: ｃｅnter；}
．content1 { maｒgin: ０pｘ auto;boｒder：0px;teｘｔ-align：cｅnter；}
.ｃontent2 { margｉｎ: ０pｘ auｔo;boｒdｅr:０px；ｔext－ａlign:left;posiｔion:abｓoｌｕte； leｆt:1６8px； toｐ:352px;ｗidth:３01px;hｅiｇｈt:5３３ｐx}
.conｔｅnt3 { mａrgｉｎ： 0ｐx ａuｔo；borｄer:0px;text-aliｇn:leｆｔ;poｓitiｏn：absolｕte; ｌeft:468ｐｘ；top：3５2ｐx;width:４65px; heｉｇhｔ:53３pｘ｝
.cｏｎteｎt4 ｛ margiｎ: ０ｐx auｔo；bordｅr:0ｐx;text-align:lｅfｔ;pｏsiｔｉoｎ:abｓolｕte; ｌefｔ:933ｐx;top:35２px;widｔh:21１pｘ; height：５２9px;}
.bｏtｔom { ｍargin: 0pｘ auto；border:0ｐx;posiｔioｎ:ａbsoｌute; lefｔ:168px; toｐ:885pｘ；wiｄｔh:９7７ｐx; height:１05px;text－aliｇn: cｅntｅr;}
</style＞
＜/heａd>
<bodｙ>
<div class="top"><imｇ src＝"imaｇｅs/" boｒder="0"></ｄiv>
＜ｄiv ｃlass＝ｔopmain>
<uｌ>
＜li><a id=aａ2 hｒｅf="#"＞<ｉmg ｓｒc＝"images/效果图_r４_c３．jpg" ｂordｅr="０＂＞</a><／ｌｉ>
<ｌi><ａ ｉｄ=aa3 hｒef＝"#＂>＜iｍg ｓrc=＂images/效果图_r4_ｃ４．jpg" bordｅr＝"0">＜/a></li>
<lｉ><ａ iｄ=ａa4 hrｅ