网页设计毕业论文-2014 - 图文

大连东软信息学院毕业设计（论文）

CSS中的center代码实现了活动图片和活动内容，采用了两个盒子模型，左侧显示图片，右侧显示活动内容，并设置了padding值，可以使得模型变得整齐，好看。

4.6编写代码

4.6.1 CSS链接

在大连蜂鸟摄影网站的实现中，均采用单独的外部CSS文件对整个网站进行整体控制，可以有效减少代码容量，方便的对整站进行演示控制

外部CSS的链接代码如图4.9所示。

图4.9外部CSS链接代码

4.6.2 CSS整站控制代码

我们在外部CSS中编写代码对整站进行控制。

CSS代码如图4.10所示。

图4.10所示为网站banner，center，footer的CSS代码

12

大连东软信息学院毕业设计（论文）

4.6.3 使用的字体

在浏览者对页面进行浏览的时候，12px的文字是最适合人们进行阅读的文字大小，也是网站中看上去最漂亮的字体大小，如图4.11所示

图4.11 正文字体的大小

4.6.4 首行缩进

对于我们中国人来说，自古以来的习惯就是在每一段的开头错进两个字，在CSS代码中也可以同样的控制语句，在CSS代码中的控制语句，如图4.12所示。

图4.12首行缩进2字

4.6.5高效实用的标签

在自己制作整个网站的过程中，总结了很多经验，更多的是利用标签来进行控制，大量减少了新命名的标签，例如：

在首页的导航条，活动列表中用到的标签，在首页的右侧本站会员TOP列表中均采用了ul。

在各个小盒子的文字中也得到充分应用，可以控制字体的大小，在CSS中可以单独设置h3部分的文字属性等。

以上都是在网页制作的过程中会经常用到的代码。

13

大连东软信息学院毕业设计（论文）

第5章 系统测试

5.1 网站测试需求

并不是意味着网页做完后就大功告成，往往在这时候会出现问题。所以就要在这个时刻对网页进行测试。测试需要本地计算机在Win7的系统下进行测试操作。

测试环境：Intel（R） Core(TM)2 Duo CPU T9400@2.0GHz 安装内存：2.00G

测试系统：microsoft Windows 7 测试浏览器： IE8.0 Firefox

5.2 网站测试目的

测试目的无外乎考虑两种情况。一是在浏览者的角度去看待这个网页，身为浏览者，总是不希望在打开浏览器后发现该网页的logo位置跑动，盒子出现重叠现象。也没人希望看到一个网站打开之后什么也不见了，往页面下面一拖都缩成一团；对于电子书网站的制作人来说，一定希望这个网站可以以一个十分美好的形象呈现在大家的面前的。

无论从哪个方向考虑，测试的目的就在于吧一个好的网站展现在大家的面前，没有任何遗漏的失误存在。如果在测试阶段发现问题，要及时的去修改更新。

5.3 网站性能测试

通过运用IE浏览器来进行网站的测试，不同的浏览器会使网页呈现的效果是不一样的。蜂鸟摄影网使用的是IE浏览器和Firefox两大浏览器共同来调试这个网站。

首先是在IE浏览器中测试该网站，打开网页后首先看是否有篡位，图像位置更改等现象，之后用鼠标划过导航条，看是否有颜色更改的效果。随即点入二级页面，看是否能正常连接到二级网页，如果正常，再一次顺查上述的问题。当网页顺利三级页面之后首先确定的是三级页面中的图片有没有发生偏移或者走出网页的显现，随后应该再次检查导航条的运作是否正常，最后通过点击导航条来进入每一个二级页面，查看二级页面的超链接是否会因为鼠标触碰的情况下是否发生变化。还得注意当进入各个页面时字体大小，字体颜色以及字体的行高有没有发生变化。在Firefox中也需要这样的测试，测试过程和IE中的过程相同。

5.4测试结果

经过了重重测试，可以说网站是做完了，在测试中未发现有任何错位的情况发生，也没有字体等问题的发生，蜂鸟摄影网在WINDOWS XP系统中，WINDOWS VISTA系

14

大连东软信息学院毕业设计（论文）

统中，以及WINSOWS 7的系统下，在IE8.0与Firefox浏览器中均显示正常，测试成功。

15

• 1
• 2
• 3
• 4
• 5
• 6

搜索更多关于： 网页设计毕业论文-2014 - 图文 的文档