《电子商务网站设计》课程设计报告

1、（电子商务网站设计）web设计与编程导论课程设计报告学 院： 班 级： 姓 名： 学 号： 指导教师： *大学 *系200*年*月*日设计名称：基于div+css的“5617网游网”的重构 日期：200*年*月*日 一. 设计内容：本设计主要是利用div+css对采用table布局的“5617网游网”网站进行重构，重构范围涉及整个网站的首页，但不包括首页中超链接后面所涉及的内容 二. 设计目的与要求：1. 通过xhtml和css的学习，掌握基于标准的网站的编写方法，加深对web设计的理解，并掌握设计方法。2. 掌握div+css的用法，把原网站中的table布局格式改为div，将table中的

2、属性写到独立的css中。重构后的网站须和原网站内容和样式基本保持相同，而且最好兼容ie6.0和firefox两种浏览器。重构后的网站必须通过w3c的css验证，而且在通过firefox浏览器的html tidy验证时错误或警告须小于5个。三. 设计环境或器材、原理与说明：1. 在网站重构过程中本人用到如下工具：adobe dreamweaver cs3，photoshop cs2，firefox浏览器，interner explorer浏览器6.0，ie develop toolbar 插件。2. 其中adobe dreamweaver cs3是网站重构所用到的主要工具，它可以用来编写html

3、代码和css代码，并且可以编写代码边调试；photoshop用来对所需用到的图片进行编辑；因为要兼容firefox，所以必须安装有firefox浏览器，而且firefox也可以对网页的错误或警告进行检查。ie develop toolbar插件是一款基于ie浏览器的辅助网页开发的强大工具，它可以清晰地显示一个网页的具体结构，如head，body以及body中的table，div，iframe等等，从ie develop toolbar 还能清楚地看到body中table或div等的各种属性，如height，width，align，border，padding，margin等，这样在重构过程中写

4、css时就能准确快捷地写出各种属性值。四. 设计过程（步骤）或程序代码：1. 首先通过ie develop toolbar工具对整个页面进行分析，熟悉其结构以及该网页由哪些部分组成。通过认真了解和分析，在设计中，本人决定将5617网游网分为三大部分进行重构，当然，这三个大的部分中还包括了很多小的部分。第一大部分是网站的头部，它包括网站的logo，导航，注册登陆以及搜索等几个小部分：如图： 第二大部分是网站的主体内容部分，这部分也是重构的重点和难点。它共以下包括六个部分：（1）.从“功夫小子”到“神兵online”以及下面的六张图片为一部分；（2）.包括“热门专题”“网游资讯” “网游前瞻” 和

5、“业界动态”以及下面的五张图片;(3).包括“网游下载”“网游排行”“网游上市表”；（4）.包括“游戏资讯”“游戏排行”“电竞名将”；（5）. “游币商城 交易站 充值站”“游戏周边”；（6）.包括“论坛精华”“建站排行”“记者站”“本站动态”。 第三大部分为网站底部，包含“友情链接”“合作站点”“关于我们”以及“经营许可证号”等信息。2.查看原网站源代码，并提取源代码中可用代码。在开始重构网站的详细内容之前，首先需对网站的大体或总体结构进行控制， (1) 首先是设计网站头部，即第一大部分。该部分包含title，meta以及table，div等详细内容，对不影响重构后页面效果的代码，可以不用更

6、改。第一大部分的主要任务是将其中一个table改为div+css代码。其源代码如下： 首 页 研发商 运营商 渠道商 网吧联盟 媒体杂志 公会组织 个人玩家 社区论坛 更改为div后如下： 首 页 研发商 运营商 渠道商 网吧联盟 媒体杂志 公会组织 个人玩家 社区论坛 其中用到的一个css为： . shouyanyun width: 647px; height: 25px; float: left;（2） 接着是对网站主体内容进行重构。在重构网页主体内容之前应注意：由于页面的主体内容是居中显示的，而且为了防止在后面的设计过程中各个模块的位置发生偏移，所以须给网站的主体内容的显示格式进行设置。

7、因此，在本设计中，首先用了一个div来显示网页的主体内容这部分，这个div用css来设置其显示格式，其中之一css如下：#contian width: 780px;margin: auto; 这样，在重构出主体内容中的各个小的div模块后，它们就不会飘浮向左边或右边。主体内容有六个部分，在把其中的table代码替换为div时，一些div的显示位置可能不对，这时就可以用float来把div浮动到它本来的位置。同时应该注意的是，在某些div中用了float后，如果这些div对与其位置平行的div产生影响时，就需要用来清除上面的div中的float所带来的影响，下面就是本设计中所遇到的这种情况：大陆

8、韩国欧美港台 more 大陆 r2封测bug征集活动圆满 大陆 天堂ii：经典值得细细品 大陆 让你在卓越之剑的新大陆 大陆 抗日历史知多少 抗战答题惊喜不断 大陆 网游猛将传pvp,名将系统首开（图）在上面这个例子中共有平行的两个div，第一个div的css是：.wyzx_head2 width: 200px; height: 28px; float: left; text-align: right; line-height: 26px; 其中用到了float，如果不在下一个div与这个div中间加上语句，第一个的div的float就会影响第二个div的位置。五. 设计结果与分析：1. 网页

9、重构后的整体效果如上图：2. 设计完成后，重构后的网页总体外观基本和原网页保持相同，但仍有不足之处。在总体感观上，如颜色，图片，各大模块位置和布局，重构后的网页与原网页基本相同。但在一些细节上，重构后的网页与原网页仍有差距，如：重构后的页面左右对齐没有原网页规范，各个div的宽度和高度和原网页的宽度和高度也不尽相同，还有行距、图片与文字间的距离等等相比原网页都发生了一些变化。3. 重构后的网页的功能也和原网页相同。在原网页中文字，图片等的链接在重构后的网页中都能正常且正确地点击。在网页的头部有个“免费注册”“用户登陆”模块，由于原网页的也不能正常使用，所以重构后的网页该功能也无法使用。4. 在

10、重构后的网页中最大的不足有一下几方面：（1）.在“游戏周边视频”模块的四张图片在firefox中能正常显示，但在ie 6.0中不能在同一排正常显示。（2）.“论坛精华”、“记者站”和“本站动态”三个模块在ie 6.0中能完好显示，但在firefox浏览器中却重叠到了一起。（3）.原网页的一些小的div模块有背景颜色，而重构后的网页在这些模块中没有颜色。七.参考书目：(五号，宋体加粗)1 苏沈小雨 css2中文手册 /onlinebook/css/ 2003.06.2 李烨 别具光芒：div+css网页布局与美化 北京：人民邮电出版社 2006.11.3

11、andy budd/simon collison/cameron moll css mastery friends of ed 2006-02-134 胡海 css完全实例教程 北京：电子工业出版社 2001.01八. 设计体会与建议：1. 在重构的过程中要注意一边设计一边在ie和firefox两个浏览器中调试，如果设计过程中只在其中一个浏览器中调试，等设计完成后，肯定会出现不兼容的问题，那样的话又得重新设计调试并修改css。2. 经过两到三个星期的努力，终于完成了“5617网游网”的重构，重构后的网页也基本能和原网站相同。说实话，这两三个星期是我过得最累的一段时间，每天8点起床，23点睡觉，其余时间除了吃饭剩下的都花在了网站的重构上。虽然说重构这个网站是个很累人的活，但我的的确确从中受益匪浅。可以说，如果没有网站重构这个课程设计，从“web设计与编程”这门课上，我能学到的东西并不会有多少，甚至会连设计一个简单的网页都不会。但现在，我至少知道怎么用div和css，至少知道css的各种属性该怎么用，至少