范文无忧网（电子商务网站设计）
Web设计与编程导论
课程设计报告
学 院：
班 级：
姓 名：
学 号：
指导教师：
湖南农业大学 电子商务系
2013年 11 月 14日
设计名称：网站重构 日期：2013年 11月 7 日 设计内容：对中华人民共和国国家统计局首页进行一个页面的网站重构
设计目的与要求：
设计目的：
通过xhtml和CSS的学习，掌握基于标准的网站编写方法，加深对web设计的了解，并
掌握设计方法。
设计要求：
1.对以下网址的网站首页(1个页面)进行网站重构，即采用xhtml＋css进行重新设计。
2.重构的网页中不得出现table系列标记用于网站布局。
3.重构的网页中不得出现标记，图片可以从对方网站上选取。
4.重构后的网页显示必须和原网页样式相同，在firefox和ie浏览器有相同的显示结
果。
5.重构的网页中不能出现错误和警告信息，必须通过w3c验证，或者使用firefox的调
试工具html Validator。
6.文件由一个xhtml文件、一个css文件和若干图片、js构成。
设计环境或器材、原理与说明：
设计环境：Adobe Dreamweaver CC
设计原理：在读懂要重构的网页的基础上，采用xhtml+css对网站进行重构。
设计过程（步骤）或程序代码：
1.将原网页国家统计局（http://www.stats.gov.cn/）保存为.mht格式。打开所要重构的
网页，点击文件，单击另存为，在弹出的对话框中选择保存类型“web档案，单一文件
（*.mht）”，选择适当的存放路径，点击保存。
2.将原网页保存为.html格式。链接到首页，点击文件，单击另存为，在弹出的对话框
中选择存放的合适位置，然后点击保存。
3.了解相关基础知识。阅读web设计与编程导论教材第二章创建WEB页面：XHTML及第
六章控制页面样式：级联样式表。认识和了解HTML的基本元素、实体、声明方法和语法及
CSS的基本调用方法等。
4.分析和读懂所要重构的网页。
第一步，在Adobe Dreamweaver CC 中打开原网页。
第二步，点击拆分，界面就分成了两个部分，左部分为源代码，右部分为设计框。
第三步，在右部分中，按从上至下的顺序选中一个框（即原网页中的表格），此时左部
分对应的此表格部分的源代码的背景色就变成蓝色。
第四步，读懂该对应源代码，知道其每条语句表示的含义，如：表格的高度和宽度，是
否设置了背景色和边框等。
第五步，提取出重构网页所需要的信息，如：文字信息，相关链接，脚本语言等。
5.建立网页重构文件夹。文件夹命名“新统计局”，此后，将重构网页涉及到所用原网
页和自己写的 css、js及图片素材都放入对应的文件夹中。（.js文件放入js文件夹，图片
放入img文件夹等。）
6.设计重构网页的框架。
1）读懂重构网页的主要框架，将其分成三大块：头部（header），主要内容部分（content）
及尾部（footer）。
2）在草稿纸上画出与原网页相对应的块，先画出三大块，然后又根据原网页的内容将
每一大块细分成小块，并给每一个块取一个相应的名字，即给每一块一个相应的编号或名称，
以便于css的调用。
7.用dreamweaver进行网页重构代码编写。
1）首先，进行头部申明，编写出网页的基本框架：（此部分为dreamweaver自动生成的代码）
完成标题的命名。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中华人民共和国国家统计局
2）将重构网页需要用到的css和js文件链入网页代码中。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中华人民共和国国家统计局
3）打好html框架，按照框架图和草稿上的块布局，在body中建立div块元素，完成body
部分代码的编写，代码如下：
target="_top" >
target="_top">
target="_blank">
2013年11月15日 星期五
onblur="javascript:if(this.value=='')this.value='输入检索词'"
id=textfield
onfocus="javascript:if(this.value=='输入检索词')this.value='';"
name=andsen value=输入检索词 size=16>
id="four-4">
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131107_402931024.htm"
target="_blank">国家统计局党组召开群众路线教育实践活动专题
民主生活会情况通报会
href="http://www.stats.gov.cn/tjdt/zygg/tztg/ss="zw">
href=t20131105_402930971.htm"
target=_blank class=a2 style="color:
#000000"> ● 2013年度
全国统计科学研究计划项目立项公告
color=#999999 size=1>(10.05)
href="http://www.stats.gov.cn/tjdt/zygg/tztg/t20131028_402930700.htm"
target=_blank>
color="#3366cc">● 2013年度全国统计科研计划项目立项公示
size=1>(10.28)
href="http://www.stats.gov.cn/tjdt/zygg/tztg/t20131015_402930396.htm"
target=_blank>
color="#3366cc">● 第三次全国经济普查宣传征文启事
color=#999999 size=1>(10.15)
href="http://www.stats.gov.cn/tjdt/zygg/tztg/t20131014_402930362.htm"
target=_blank>
color="#3366cc">● 中国统计信息服务中心2013年公开招聘考试公告(10.14)
href="http://www.stats.gov.cn/tjdt/zygg/tztg/t20131009_402930303.htm"
target=_blank>
color="#3366cc">● 《统计法》和《全国经济普查条例》知识竞赛启事
size=1>(10.10)
href="http://www.stats.gov.cn/tjfg/gzjgfxwj/t20020424_18336.htm"
target=_blank>
color="#333">审批程序
href="http://www.stats.gov.cn/tjgl/bmdcxmsp/"
target=_blank>
color="#333">目录
"http://www.stats.gov.cn/tjgl/bmdcxmsp/gg/"
target=_blank>
color="#333">公告
href="http://www.stats.gov.cn/tjgl/bmdcxmsp/sbcx.rar"
target=_blank>
color="#333">下载
target=_blank>
href="http://www.stats.gov.cn/tjgl/swdcglgg/spcx/t20041118_402209073.htm"
target=_blank>
color="#333">许可证审批程序
target=_blank>
color="#333">审批公告
href="http://www.stats.gov.cn/tjgl/swdcglgg/spcx/t20041118_402209074.htm"
target=_blank>
color="#333">调查项目审批程序
href="http://www.stats.gov.cn/tjgl/swdcglgg/"
target=_blank>
color="#333">表格下载
target=_blank>
href="http://www.stats.gov.cn/tjcyzgrd/t20061225_402375227.htm"
target=_blank>
color="#333">办理指南
href="http://www.stats.gov.cn/tjcyzgrd/P[***********]225.doc">
color="#333">表格下载
href="http://www.stats.gov.cn/tjcyzgrd/t20061225_402413438.htm"
target=_blank>
color="#333">考试办法
target=_blank>
href="http://www.stats.gov.cn/gwyzl/zlgg/"
target=_blank>
color="#333">招录公告
href="http://www.stats.gov.cn/gwyzl/zlzc/"
target=_blank>
color="#333">招录政策
target=_blank>
href="http://www.stats.gov.cn/tjzyjszgks/ksxx/"
target=_blank>
color="#333">考试信息
target=_blank>
color="#333">咨询报名
target=_blank>
color="#333">复习备考
target=_blank>
color="#333">企业“一套表”联网直报
>
href="http://www.sannong.gov.cn/"
target=_blank>
color="#333">农村统计调查
href="http://www.cemac.org.cn/"
target=_blank>
color="#333">企业景气调查
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131107_402931024.htm"
target=_blank>
color="#3366cc">● [要情] 国家统计局党组召开群众路线教育实践活动专题...
color=#999999 size=1>(11.07)
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131106_402930997.htm"
target="_blank">
color="#3366cc">● [要情] 第三次全国经济普查公益广告片
size="1">(11.06)
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131106_402930992.htm" target="_blank">
color="#3366cc">● [要情] 人民日报刊发国家统计局报告：改革开放铸辉煌...
color="#999999" size="1">(11.06)
href="http://www.stats.gov.cn/tjsj/qtsj/dzcszyspjg/t20131104_402930899.htm"
target="_blank">
color="#3366cc">● [数据]
50个城市主要食品平均价格变动情况（2013年10...
size="1">(11.04)
href="http://www.stats.gov.cn/tjfx/jdfx/t20131103_402930896.htm" target="_blank">
color="#3366cc">● [数据] 2013年10月中国非制造业商务活动指数为56.3%
color="#999999" size="1">(11.03)
href="http://www.stats.gov.cn/tjfx/jdfx/t20131101_402930832.htm" target="_blank">
color="#3366cc">● [数据] 2013年10月中国制造业采购经理指数为51.4%
color="#999999" size="1">(11.01)
href="http://www.stats.gov.cn/tjfx/sjjd/t20131101_402930833.htm" target="_blank">
color="#3366cc">● [解读] 国家统计局服务业调查中心高级统计师赵庆河解...
color="#999999" size="1">(11.01)
href="http://www.stats.gov.cn/tjfx/sjjd/t20131031_402930819.htm" target="_blank">
color="#3366cc">● [解读] 经济述评之六：民间投资增速止跌向稳 提振信...
color="#999999" size="1">(10.31)
href="http://www.stats.gov.cn/tjfx/sjjd/t20131030_402930766.htm" target="_blank">
color="#3366cc">● [解读] 经济述评之五：消费市场稳中趋好 需应对“肥...
color="#999999" size="1">(10.30)
href="http://www.stats.gov.cn/tjfx/sjjd/t20131029_402930713.htm" target="_blank">
color="#3366cc">● [解读] 经济述评之四：工业经济发力爬坡 走势向好
color="#999999" size="1">(10.29)
href="http://www.stats.gov.cn/tjfx/sjjd/t20131027_402930648.htm" target="_blank">
color="#3366cc">● [解读] 国家统计局工业司何平博士解读9月份工业企业...
color="#999999"
size="1">(10.27)
target="_blank">月度数据
target="_blank">季度数据
target="_blank"> 年度数据
target="_blank">普查数据
target="_blank">地区数据
target="_blank">国际数据
target="_blank">部门数据
target="_blank">可视化产品
}}}]
target="_blank">
color="#1c52b2">您身边的统计指标
target="_blank">
color="#000">国内生产总值
color="#000">人口
target="_blank">
color="#000">固定资产投资
href="http://www.stats.gov.cn/tjzs/jmxf.pdf"
target="_blank">
color="#000">居民消费价格指数
target="_blank">
color="#000">社会消费品零售总额
href="http://www.stats.gov.cn/tjzs/lscl.pdf"
target="_blank">
color="#000">粮食产量
target="_blank">
color="#000">工业增加值
target="_blank">
color="#1c52b2">您身边的统计知识
target="_blank">
color="#000">中国统计的四大工程
target="_blank">
color="#000"> 平均数、绝对数与相对数、基数与基期、现价、可比价与不变价
target="_blank">
color="#1c52b2">如何获取统计数据
target="_blank">
color="#000">统计新闻发布
color="#F00">中国统计信息网
color="#000">国家数据
target="_blank">
color="#000">统计刊物
target="_blank">
color="#000">统计数据资料
href="http://www.stats.gov.cn/tjfw/"
target="_blank">
color="#000">统计咨询服务
color="#000">移动资讯
href="http://www.stats.gov.cn/bgt" target="_blank">
href="http://www.stats.gov.cn/bgt" target="_blank">
href="http://www.stats.gov.cn/tjfg/gfxwj/t20080430_402477491.htm"
target=_blank>公开指南
href="http://www.stats.gov.cn/xxgk/"
target=_blank>公开目录
href="http://www.stats.gov.cn/tjsj/">数据查询
href="http://www.stats.gov.cn/tjfw/2006_dianhua.htm">电话咨询
href="mailto:[email protected]">邮件咨询
href="http://www.stats.gov.cn/tjfw/2006_zhuanjia.htm">现场咨询
target="_blank">
color="#ff0000"
size="2">第四届“中国统计开放日”
target="_blank">全国"两会"服务
target="_blank">统计公报解读
target="_blank">金砖国家联合统计手册（2013）
target="_blank"> 统计分类标准
target="_blank"> 国民经济核算
target="_blank"> 投资统计
target="_blank"> 贸易统计
target="_blank"> 人口和就业统计
target="_blank"> 农业统计
target="_blank"> 价格统计
target="_blank"> 住户调查
47
href="http://www.isi2013.hk/sc/index.php"
target=_blank>
target=_blank>
target=_blank>
href="http://www.nssc.stats.gov.cn/" target=_blank>
target=_blank>
href="http://www.stats.gov.cn/was40/gjtjj_outline.jsp?channelid=3790"
target=_blank>国家
href="http://www.stats.gov.cn/was40/gjtjj_outline.jsp?channelid=8717"
target=_blank>部门
href="http://www.stats.gov.cn/was40/gjtjj_outline.jsp?channelid=1303"
target=_blank>地方
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131107_402931024.htm"
target="_blank">
color="#3366cc">● 国家统计局党组召开群众路线教育实践活动专题民主...
color="#999999"
size="1"> (11.07)
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131106_402930997.htm"
target="_blank">
color="#3366cc">● 第三次全国经济普查公益广告片
size="1">(11.06)
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131106_402930992.htm"
target="_blank">
color="#3366cc">● 人民日报刊发国家统计局报告：改革开放铸辉煌 经...
color="#999999"
size="1"> (11.06)
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131025_402930617.htm"
target="_blank">
color="#3366cc">● 马建堂出席“官方统计现代化：应对生产力和新数据...
color="#999999"
size="1"> (10.25)
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131025_402930615.htm"
target="_blank">
color="#3366cc">● “官方统计现代化：应对生产力和新数据挑战”国际...
color="#999999"
size="1"> (10.25)
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131025_402930616.htm"
target="_blank">
color="#3366cc">● 马建堂：全力以赴 求真务实 奋力打好经济普查决胜...
color="#999999"
size="1"> (10.25)
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131018_402930450.htm"
target="_blank">
color="#3366cc">● 国家统计局新闻发言人就前三季度国民经济运行情况...
color="#999999"
size="1"> (10.18)
class="ys1">
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131011_402930335.htm"
target="_blank">
color="#3366cc">● 马建堂在国家统计局党组学习会上要求：认真学习贯...
color="#999999"
size="1"> (10.11)
class="ys1">
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131010_402930316.htm"
target="_blank">
color="#3366cc">● 调研“两试点” “三个面向”行——国家统计局局...
color="#999999"
size="1"> (10.10)
class="ys1">
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20131009_402930285.htm"
target="_blank">
color="#3366cc">● 马建堂在福建调研经济形势时强调：科学分析判断经...
color="#999999"
size="1"> (10.09)
class="ys1">
href="http://www.stats.gov.cn/tjdt/gjtjjdt/t20130926_402929539.htm"
target="_blank">
color="#3366cc">● 马建堂在贵州调研投资统计制度方法点、督查...
color="#999999"
size="1"> (09.26)
target="_blank"> 第六次全国人口普查（2010）
第二次全国R&D资源清查（2009）
target="_blank"> 第二次全国经济普查（2008）
第二次全国农业普查（2006）
target="_blank">
color="#3366cc">● 《2012年度中国对外直接投资统...
target="_blank">
color="#3366cc">● 《中华医学统计百科全书. 遗传...
target="_blank">
color="#3366cc">● 《医学统计学(第三版)》
target="_blank">
color="#3366cc">● 《现代商务统计》
target="_blank">
color="#3366cc">● 《简明管理统计(增修版)》
target="_blank">
color="#3366cc">● 《计量经济学实验和Eviews使用...
target="_blank">
color="#3366cc">● 《中华医学统计百科全书.非参数...
color="#36C">
版权所有：中华人民共和国国家统计局
color="#36C">网站地图
color="#36C">服务条款
color="#36C">联系我们
color="#36C">京ICP备05034670号
color="#36C"> 地址：北京市西城区月坛南街57号（100826） 数据咨询电话：010-68520066、68576320
CSS代码如下：
#content{
width:778px;
height:1800px;
margin-left: 290px;
}
#content1{
width:778px;
height:255px;
}
#one{
width:778px;
height:22px;
border: 1px red none;
}
#one-1{
width:242px;
height:22px;
background-color:#286fbf;
float:left;
}
#one-2{
width:259px;
height:22px;
background-image:url(../top_files/777_r1_c5.jpg);
float: left;
}
#one_3{
width:78px;
height:22px;
background-image:url(../top_files/777_r1_c6.jpg);
float: left;
}
#one-4{
width:18px;
height:22px;
background-image:url(../top_files/777_r1_c7.jpg);
float:left;
}
#one-5{
width:71px;
height:22px;
background-image:url(../top_files/777_r1_c8.jpg);
float:left;
}
#one-6{
width:28px;
height:22px;
background-image:url(../top_files/777_r1_c9.jpg);
float:left;
}
#one-7{
width:82px;
height:22px;
background-image:url(../top_files/777_r1_c10.jpg);
float:left;
}
#two{
height:133px;
width:778px;
border:1px red none;
}
#two_z{
float:left;
border: 1px red none;
height:133px;
width:508px;
}
#two-1{
width:508px;
height:105px;
background-image:url(../img/mainnew9a1_r2_c1.jpg);
}
#two-3{
width:508px;
height:28px;
}
#two-2{
width:270px;
height:133px;
float:left;
background-image:url(../top_files/mainnew9a1_r2_c3.jpg);
}
#two-3-1{
width:50px;
height:28px;
background-image:url(../top_files/gb_a.jpg);
}
#two-3-2{
height:28px;
width:72px;
background-image:url(../top_files/gb_a2.jpg);
float:left;
}
#two-3-3{
height:28px;
width:72px;
background-image:url(../top_files/gb_a3.jpg);
float:left;
}
#two-3-4{
height:28px;
width:69px;
background-image:url(../top_files/gb_a4.jpg);
float:left;
}
#two-3-5{
height:28px;
width:71px;
background-image:url(../top_files/gb_a5.jpg);
float:left;
}
#two-3-6{
height:28px;
width:69px;
background-image:url(../top_files/gb_a6.jpg);
float:left;
}
#two-3-7{
height:28px;
width:56px;
background-image:url(../top_files/gb_a7.jpg);
}
#two-3-8{
height:28px;
width:49px;
background-image:url(../top_files/8888_r1_c8.jpg);
float:left;
}
#three{
height:28px;
width:778px;
}
#three-1{
height:26px;
width:77px;
float:left;
background-image:url(../top_files/gb_a10.jpg);
}
#three-2{
height:26px;
width:71px;
float:left;
background-image:url(../top_files/gb_a11.jpg);
}
#three-3{
height:26px;
width:71px;
float:left;
background-image:url(../top_files/gb_a12.jpg);
}
#three-4{
height:26px;
width:71px;
float:left;
background-image:url(../top_files/gb_a13.jpg);
}
#three-5{
width:67px;
float:left;
background-image:url(../top_files/gb_a8.jpg);
}
#three-6{
height:26px;
width:67px;
float:left;
background-image:url(../top_files/gb_a14.jpg);
}
#three-7{
height:26px;
width:71px;
float:left;
background-image:url(../top_files/gb_a15.jpg);
}
#three-8{
height:26px;
width:70px;
float:left;
background-image:url(../top_files/gb_a16.jpg);
}
#three-9{
height:26px;
width:69px;
float:left;
background-image:url(../top_files/gb_a9.jpg);
}
#three-10{
height:26px;
width:68px;
float:left;
background-image:url(../top_files/gb_wsbs_l.jpg);
}
#three-11{
width:76px;
float:left;
background-image:url(../top_files/gb_a18.jpg);
}
#four{
height:24px;
width:778px;
background-color:#2a6fbd;
}
#four-1{
position:absolute; left:20px; top:187px;
}
.cDate{
text-align:center;
font-family:"宋体" ;
vertical-align:middle;
margin-top:6px;
font-size:13pt;
color:#FFF;}
#four-2{
height: 21px;
width: 221px;
position: absolute;
left:800px;
top: 194px;
}
#four-3{
height: 21px;
width: 46px;
position: absolute;
left: 925px;
background-image: url(../top_files/gb_dj.jpg);
background-repeat: no-repeat;
}
#four-4{
position: absolute;
left: 975px;
top: 193px;
height: 21px;
width: 43px;
background-image: url(../top_files/gj.jpg);
}
.a2 {
LINE-HEIGHT: 1.5;
color:#000;
FONT-SIZE: 12px; TEXT-DECORATION: none;
}
#fiv{
width:776px;
height:38px;
float:left;
text-align:center;
border:1px solid #CCCCCC;
;
margin-top:3px;
}
.tout {
LINE-HEIGHT: 1.3; LETTER-SPACING: -2px;
COLOR: rgb(173, 30, 48); FONT-SIZE: 19pt; FONT-WEIGHT: 600; TEXT-DECORATION: none;
font-family:����}
#body-3{
width:778px;
height:1154px;
float:left;
}
#body-3-1{
width:189px;
height:690px;
float:left;
}
#body-3-1-1{
width:189px;
height:262px;
float:left;
}
#body-3-1-1-1{
width:189px;
height:32px;
background-image:url(../img/wjtg1_r1_c1.jpg); float:left;
}
#body-3-1-1-2{
width:189px;
height:225px;
float:left;
background-image:url(../img/wgljaa_r2_c1.gif);
}
.zw{
width:189px;
height:32px;
FONT-SIZE: 6px;
}
.kg{
width:189px;
height:2px;
}
.a2 {
LINE-HEIGHT:16pt; COLOR: #333333; FONT-SIZE: 13px; TEXT-DECORATION: none; }
.p6 {
FONT-SIZE: 6px;}
#body-3-1-2{
width:189px;
height:420px;
float:left;
}
.tl{text-align:left;
color:#666;}
.jz1{
text-align:center;
font-family:"宋体" ;
line-height:14pt ;
font-size:9pt;
color:#000; }
.zy{
text-align:center;
font-family:"宋体" ;
line-height:20pt ;
font-size:9pt;
color:#000; }
#wangshang{
width:189px;
height:41px;
background-image:url(../img/gb_mainnew9a1_r10_c1.jpg);
}
#bumen{
height:43px;
width:189px;
background-image:url(../img/gb_mainnew9a1_r11_c1.jpg);
}
#t3{
height:37px;
width:189px;
background-image:url(../img/gb_mainnew9a1_r15_c1.jpg);
float:left;
}
#t6{
height:37px;
width:189px;
background-image:url(../img/gb_mainnew9a1_r17_c1.jpg);
float:left;}
#t8{
height:37px;
width:189px;
background-image:url(../img/gb_mainnew9a1_r19_c1.jpg);
float:left;
}
#t10{
height:37px;
width:189px;
float:left;
background-image:url(../img/gb_tjzyjszgks.jpg);
}
#t12{
height:37px;
width:189px;
background-image:url(../img/gb_mainnew9a1_r21_c1.jpg);
float:left;
}
#body-3-2{
height:690px;
width:373px;
float:left;
#a2-1{ width:373px; height:30px; background-image:url(../img/zxfb.gif); } #a2-3{ width:370px float:left; } #guojia{ width:361px; height:132px; margin-top:6px; } #guojiashuju{ width:361px; height:33px; text-align:center; margin-left:6px; margin-top:8px; background-image:url(../img/gb_gjsj.jpg); } #tu1{ width:97px; height:97px; margin-top:4px; background-image:url(../img/gb_gjsjtb.jpg); background-repeat:no-repeat; } #tuzi{ width:358px; margin-left:6px; height:100px; text-align:left; border:1px solid #CCCCCC;} #heizi{ width:250px;
}
margin-top:-80px; margin-left:100px; } .aaa{ text-align: left; font-family: "宋体"; line-height: 14pt; font-size: 9pt; margin-left: 28px; color: rgb(244,244,244); #tongjitu{ width:361px; height:32px; margin-left:6px; margin-top:7px; background-image:url(../img/gb_tjzsg.jpg); background-repeat:no-repeat; text-align:center; } #tongjizhishi{ width:371px; height:272px; } #yi{ width:361px; height:65px; margin-left:6px; margin-top:11px; } #er{ width:361px; height:65px;margin-left:6px;
margin-top:11px;
}#shan{
width:361px;
height:65px;
margin-left:6px;
margin-top:58px;
}
#yitu{
width:99px;
height:57px;
margin-top:4px;
background-image:url(../img/gb_nsbtjzb.jpg);
background-repeat:no-repeat;
}
#ertu{
width:99px;
height:57px;
margin-top:4px;
background-image:url(../img/gb_nsbtjzs.jpg);
background-repeat:no-repeat;
}
#shantu{
width:99px;
height:57px;
margin-top:4px;
background-image:url(../img/gb_rhhqtjzs.jpg);
background-repeat:no-repeat;
}
#yidezi{
width:250px;
height:60px;
margin-top:-60px;
margin-left:106px;
}
#erdezi{
width:250px;
height:60px;
margin-top:-60px;
margin-left:106px;
}
#shandezi{
width:250px;
height:60px;
margin-top:-60px;
margin-left:106px;
}
#er11{
width:60px;
height:20px;
text-align:center;
font-family:"宋体" ;
line-height:14pt ;
font-size:9pt;
color:rgb(32 53 94 );
margin-left:5px;
margin-top:10px; }
#er12{
width:190px;
height:40px;
margin-left:58px;
white-space:nowrap;
word-break:keep-all;
}
#body-3-1{
width:189px;
height:690px;
float:left;
}
#body-3-2{
height:690px;
float:left;
}
#body33{
height:690px;
width:213px;
margin-left:565px;
}
#shipin{
width:213px;
height:165px;
margin-top:5px;
background-image:url(../img/K%5D@F6%7DG8%25I8J%25TQ%25_COC$GO.jpg);
background-repeat:no-repeat;
}
#weixin{
width:213px;
height:70px;
margin-top:5px;
background-image:url(../img/tjwxzy.jpg);
background-repeat:no-repeat;
}
#baoguang{
width:213px;
height:36px;
margin-top:7px;
background-image:url(../img/bgtn.jpg);
background-repeat:no-repeat;
}
#zhengfu{
width:213px;
height:29px;
margin-top:10px;
background-image:url(../img/gb_mainnew9a1_r8_c5_xxgk.jpg);
background-repeat:no-repeat;
}
#b13{
height:60px;
float:left;
background-image:url(../img/mainnew9a1_r9_c5.jpg); margin-top:6px;
}
#b131{
width:212px;
height:30px;
text-align:center;
text-height:12px;
}
.b1311{
height:30px;
width:8px;
background-image:url(../img/hyd.gif);
background-repeat:no-repeat;
margin-left:7px;
float:left;
text-align:left;
background-position: center center;
}
.b1312{
height:30px;
width:55px;
float:left;
background-position: center center;
}
#b132{
width:212px;
height:30px;
text-align:center;
}
#redian{
width: 213px;
height: 31px;
margin-top: 10px;
background-image: url(../img/gb_rdztfx.jpg);
float: left;
}
#b16{
height:75px;
width:212px;
background-image:url(../img/z_r2_c1.jpg);
margin-top:6px;
float:left;
}
#jieda{
width: 213px;
height: 31px;
margin-top:14px;
background-image:url(../img/gb_cjwt.jpg);
float: left;
}
#gaga1{
width:211px;
height:95px;
float: left; margin-top: 12px;
background-image:url(../img/z_r2_c1.jpg);
}
#gagamm{
width:211px;
height:85px;
margin-left:20px;}
#pucha{
height:95px;
width:778px;
background-image:url(../img/sjpmid.jpg);
margin-top:10px;
float:left;
}
#foot1{
height:94px;
width:778px;
background-image:url(image/mainnew9a1_r25_c1.jpg); }
#dakuang{
height:360px;
width:778px;
float:left;
}
#foot2222{
height:360px;
width:189px;
float:left;
}
#foot11{
height:57px;
width:189px;
background-image:url(../img/gb_wzxx.jpg);
margin-top:7px;
}
#foot12{
height:55px;
width:189px;
background-image:url(../img/gb_wsjb.jpg);margin-top:4px; }
#foot131{
background-image:url(../img/sjtjdh2.gif);
}
#foot132{
background-image:url(../img/undata.gif);
}
#foot133{
background-image:url(../img/sjyh.jpg);
}
#foot134{ background-image:url(../img/zgtjxh2.gif); }
#foot135{ background-image:url(../img/t2.jpg); } #foot013{ width:189px; height:223px; float:left; margin-top:6px;
background-image:url(../img/wgljaa_r2_c1.gif); } .lfoot{ width:131px; height:40px; margin:4px auto 0px auto; } #dongtai{ height:30px; width:367px; background-image:url(../img/gb_mainnew9a1_r27_c2.jpg); margin-top:4px; margin-left:132; float:left; } #dongtaixia{ height:25px; width:367px; float:left; } #zhongjian { height:360px; width:367px; float:left;
}
#foo12{
width:130px; height:23px; float:right; }
#huang{ width:22px; height:23px;
background-image:url(../img/n.jpg);
float:right; } #zizi{
width:367px float:left;
margin-top:5px; }
#zhuanti{ width:218px; height:30px;
background-image:url(../img/gb_mainnew9a1_r27_c4.jpg); margin-left:300; float:left;
margin-top:4px;}
#disankuai{ width:218px;
height:360px;float:left;
}
#zhuan1{ width:220px; height:120px;
background-image:url(../img/x1_r2_c1.jpg); }
#aa1{
width:222px; background-image:url(image/x1_r2_c1.jpg); } .mmmm{ width:220px; height:100px; text-align:left; font-family:"宋体" ; line-height:17pt ; font-size:9pt; margin-top:4px; margin-left:14px; color:rgb(32 53 94 ); } #chuban{ width:218px; height:32px; background-image:url(../img/gb_mainnew9a1_r31_c4.jpg); } #tong1{ width:220px; height:190px; background-image:url(../img/x1_r2_c1.jpg); } .a2 { color: #000; FONT-SIZE: 12px; }
#dingm{
width:778px;
background-color:#2a6fbd; } #footm{ text-align:center; background-color:#f5f5f5; width:778px; height:75px; margin:left; margin-top:360px; }
#zhongm { margin-top: 10px; color: #03F; } #xiam{ margin-top: 10px; color: #0066FF; } . zy1{ color: #000; line-height: 14pt; font-family: "宋体"; font-size: 10pt; text-decoration: none; }
#pucha1{ width:60px; height:30px; margin-top:65px; margin-left:200px; text-align:center; font-size:28px; color:#F00; }
#fourmm{
height:18px; margin-top:2px; margin-left:20px; text-align:center; font-size:18px; color:#FFF; font-family:"黑体" ; }
4） 与原页面进行详细对比，将重构页面的位置和设置进行局部详细调整，直到与原网页基本相似。
8.在火狐中进行W3C的验证，修改页面中出现的错误。
9.重构网页的完善。在重构的过程的中，遇到一些自己不能解决的问题，在网上搜索找到解决的办法，完善重构网页。 设计结果与分析(可以加页): 页面展示如下：
（框架1：top部分）
（框架2：head部分）
（框架3：content部分之block1）
（框架3：content部分之block2）
（框架3：content部分之block3）
（框架4：foot部分）
设计分析：
本次课程设计对网页进行重构已完成了。在网页重构的过程中，遇到了一系列的问题
和困难。主要问题如下：
一、大块中的分块无法自动水平排列，经常自动移动到下一个板块。
开始以为是溢出问题，一直调小框。后来才知道是float属性问题。采用css中定位属性float，利用float属性的浮动布局定位功能，将其属性值设置为left，这样就可以解决块的水平布局问题。
二、编写的代码在dreamweaver的页面中和在浏览器预览中的效果不一样。 由网络了解，网页建设以实际运行有关，不要以设计视图显示为标准，同一个代码页面，不同浏览器预览也可能会不一样，这是正常现象，需要你调整css的兼容性，不必在意设计视图，就以预览为标注，不合适再调整，直到预览页面符合你的要求。 三、编写完之后调整颜色难度大
最开始编写时由于追求快捷，文字常引用相同的css。最后调整板块大小时，由于需要改变间距，只有重新定义。然后发现很多颜色都无法改正过来，最后只好用font标记直接更改。这次给我的教训是不要贪图小的快捷。一步一个脚印是最好的。
参考书目：
[1]张爱平,赖欣.在JSP中调用JavaBean实现Web数据库访问[J].计算机时代,2007,(01). [2]仲伟和.基于JSP网页自动生成工具的设计与实现[J].科技信息(科学教研),2007,(15). [3]邢晓怡.《程序设计教程》. [J]电子工业出版社.2007.03.35-127
设计体会与建议：
我是很早就知道了这次Web的课程设计是自己写一个网站的页面代码，虽然心里想着要好好自学一下html的编写，不过惰性实在是超过了我对这次课程设计的紧张感。直到离正式交作业还有大概5天左右，自己才在看了原网页之后着急起来。这次进行网站重构是一次很新颖也是一次独立的课程设计，过程可谓艰辛，但是当做出自己中意的网页时，那种成就感和兴奋感是无法形容和表达的，那种轻松感也只有在今天才那么切实的感受到。
最开始的时候，自己还抱有着侥幸心理，想着船到桥头自然直，一天看个几页书，然后就自个开始毫无目的拿着Dreamweaver胡乱点击，想着等着寝室同学完成后，再教我或者直接帮我写得了。然后过了几天发现同学一天到晚的写也就只写了一个头部多一点。自个突然就发现这个没有想象中那么轻松。于是才真正开始认真了解html的标签和css的属性，从书中找到一点头绪，然后看原网页代码，从Dreamweaver中清楚它的基本结构，再开始自己写网页。最开始的头部非常难，到现在我还是这么认为的，因为刚开始不知道可以直接调用源代码，完全是自己全部手写的，头部的分配和调用也是最多的，在计算上更加麻烦，不是那种简单的平均分配。所以在寝室通过朋友的帮助和自己的研究也是花了两天整整的时间才
做出来的。不过成功只需要一个契机，的确是这样，在开头的磨难下后面的就简单多了。做后面的网页我大概只花了一天多一点吧。也是自己太过于兴奋了，不做完都不愿意停下。到第四天只剩下动态js没有链入了，不过比较让我失望的是，由于自己没有分清js的源代码，加上最近要准备考试时间实在不多，所以就直接截取的图片代替了。不过自己对js的调用方法还是懂得。所以总的来说还是很值得。
通过这次的课程设计，增强了我的学习能力，也锻炼了我，我想我基本上把这门课的知识掌握了。这些日子，是一个难忘的记忆。抱怨、焦急、生气、兴奋成为两个字——怀恋。我们需要知识，我们更需要坚持。我想这便是课程设计教给我最多的地方。
谢谢老师给了我们这样一个锻炼与奋斗的机会与平台，这些体验所让我得到的是如此弥足珍贵。
设计成绩：
教师签名： 年 月
日