精品课程网站建设中的问题和解决方法

精品课程网站建设中的问题和解决方法

摘要：本文阐述了网站前台制作中遇到的一些常见问题，给出了具体的解决方法，具有一定的借鉴性。

关键词：百分百布局；flash；PPT；banner

1引言

随着计算机网络技术和通信技术的发展以及宽带网的迅速普及，计算机远程教育成为互联网最有前景的应用之一。利用Internet来提供一个共享的学习环境，为所有上网者提供学习机会，是教育信息化的重要目的之一，因此研制和开发基于Web的精品课程将变得越来越重要。

现将我们在开发国家级精品课程《天气学》过程中，遇到的问题和解决方法总结于此，为后来开发者提供借鉴。

2版面设计

设计网页的第一步是设计版面布局。就像传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。拥有一个好的布局才能给用户一种好的视觉感。网站给人的第一印象来自视觉冲击，要吸引用户的关注，我们就要在整体布局和网站的标准色彩上下功夫。

2.1百分百布局问题

在现在的网站设计中，百分百的设计理念已经成为各网页设计者的新宠。在我们的网站中，我们采用了一种对初学者比较容易上手的方案，可以很好的达到我们想要的百分百效果。

首先，看一下没有做过任何处理的网页，如图1：

我们可以看到，网页的四周都有空白区域。基于这个问题，我们可以在body的代码中加入以下代码：

＜body style=“margin:0px; “＞

效果如图2：

接下来是考虑分辨率的问题。由于现在的网页元素太多，我们通常采取绝对定位。但现在电脑的分辨率有很多种，比如1024*768，1280*1024。那么我们的网页要做成怎样的分辨率？我们面临着这样的问题：当你在1280的分辨率下做网页时，在1024分辨率的电脑上网页下方就会出现水平滑动条，如图3。

当你按照1024的分辨率制作网页时，在1280的电脑上就会留有一大段空白，如图4：

显然，这很难看。于是我们采用了一种简单的布局。

首先，一个网页大概可以分为三部分，最上面的页首，下面的内容区，最下

面通常是一些关于网站的介绍(即页脚)。我们可以制作三张表格，分别放入这三个内容。将放入标题和介绍的表格的宽度设为100%，即随着分辨率的不同，宽度自然的拉伸。中间放入内容区的表格我们可以限定它的宽度，比如为1000px，然后我们将这个表格居中。

这只是一种布局，真的要让效果很好，就需要我们为网页添加很好的背景，使整个网页浑然一体。也就是我们上面说到的网页标准色彩问题。

我们来看下采用这种布局的网页在1280分辨率的电脑上的效果，如图5：

很显然，这已经初步达到了我们想要的效果。

如果希望网页在1280分辨率的电脑上的效果和在1024的电脑上一样呢？

其实，比较主流的网页布局方案有两种：一种是给内容区域设置固定的像素宽度，把页面限制在这个宽度之内；另一种是让内容区域不受限制地填满整个浏览器的显示区域。而后者就是大家想要的布局。在这里，我们也给出一个比较简单的解决方法。

在我们制作的网页中，我们将图7的区域叫做用户界面。

我们将用户界面右边的部分叫做内容区。我们设置左右两栏，左边一栏放置用户界面，右边放置内容区。通常，用户界面的大小是固定的。所以，我们利用绝对定位将用户界面固定在网页的左端。内容区中一般是一些文字内容，那样我们可以把右边一栏的宽度用百分比定义(或者不定义其宽度)。这样，作品将始终填满浏览器窗口，在改变浏览器窗口大小，或是在不同分辨率下浏览该网页，右边一栏的宽度将相应地变大变小。

2.2banner制作

这个网站的banner想做成左右两端是山，固定在浏览器的两侧，中间是蓝天的背景，随浏览器的宽度自动伸缩，飘动着白云。为了实现这种效果，分成图片和flash两个部分来完成：

(1) 图片左右居中中间拉伸的效果

插入一个一行二列的表格，表格宽度为100%。左边单元格中插入图片left.jpg，对齐方式为居左，背景图片为middle.jpg。右边的单元格插入图片right.jpg，设置宽度为图片的宽度。这样一来，当浏览器宽度变化时，左边单元

格宽度也随之变化。由于middle.jpg作为背景，随着单元格的宽度变化，自动在x方向重复。形成了网页顶端图片左右部分固定，中间部分拉伸的效果。如图8—图10。

代码如下：

＜table border=“0” cellpadding=“0” cellspacing=“0” style=“width: 100%; height: 120px”＞

＜tr＞ ＜td style=“background-image:url(image/middle.jpg);background-repeat:repeat-x;” align

=“left”＞＜asp:Image ID=“left” runat=“server” ImageUrl=“~/image/left.jpg” /＞

＜/td＞

＜td style=“width:336px”; align=“right”＞

＜asp:Image ID=“right” runat=“server” ImageUrl=“~/image/right.jpg” /＞

＜/td＞

＜/tr＞

＜/table＞

(2) Flash始终浮动在网页顶端居中的方法：

插入一个div，在div中插入飘动的云和文字的flash，背景设为透明。

＜div id=“Div1”＞ ＜object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“http:／／download.macromedia.com／pub／shockwave／cabs/flash／swflash.cab#version=7,0,19,0” width=“1000” height=“120”＞

＜param name=“movie” value=“image/flashyun.swf”/＞

＜param name=“quality” value=“high”/＞

＜param name=“wmode” value=“transparent”/＞

＜/object＞

＜/div＞

这个flash如果始终浮动在顶端中部会比较美观，在这里使用了用javascript控制CSS的方法。

#Div1 {

position:absolute;

left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);

top:0px;

width:1000px;

height:120px;

z-index:1; }

如图11，这样达到了预期的效果。

3媒体插入

3.1flash播放问题

据统计，从2003年以来，网页的平均体积已经增长了三倍。当页面打开的时候，用户看到最多的是图形，而不是文字，图形是网页中最主要的对象。而生动有趣的动画图形更是现代网页必不可少的元素。其中就以flash最具代表作用。试想，如果一个网站没有一点flash元素，整个页面就显得很乏味。

起初，在ASP中插入flash我们选用的代码是： ＜object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“http:／／download.macromedia.com／pub／shockwave/cabs/flash/swflash.cab#version=6,0,29,0” width=“150” height=“280”＞

＜param name=“movie” value=“image/flash.swf”/＞

＜param name=“quality” value=“high”/＞

＜param name=“SCALE” value=“exactfit”/＞

＜embed src=“image/flash.swf” width=“150” height=“280” quality=“high” pluginspage=“http:／／www．macromedia.com／go/getflashplayer”type=“application/x-shockwave-flash” scale=“exactfit”＞

＜/embed＞

＜/object＞

value=“image/flash.swf”即是flash的路径。

但是在起初的运行中，flash无法播放，影片处就是一块空白。我们也怀疑是flash的路径问题，但当我们把flash放入项目的根目录下时，问题依然存在。

奇怪的是，当我们重新拉出一个框架，插入flash后，它又可以播放了。我们又怀疑，在上一个框架中多次改动html代码致使flash无法播放。在新的框架下，我们很顺利的插入了flash，整个模板页也基本完成。但更奇怪的是，一个星期后，flash再一次无法播放。很显然，之前的几个猜想都不成立，致使flash无法播放一定另有原因。

随后我们发现，生成的模板页的html代码中一直存在着一些错误。如图12。

＜td colspan=“2” style=“height: 25px; background-color: #ebffff; border-bottom: #0066cc 2px solid;”＞

＜marquee diriction=“right” scrollamount=“3” behavior=“alternate”＞＜em/＞＜span style=“COLOR: #003333; FONT-FAMILY: 华文新魏”＞艰苦朴素、勤奋好学、追求真理、自强不息＜/span＞＜/＞＜/marquee＞

图12错误代码

在以上代码中有红色下划线的是有错误的地方，在错误信息栏里我们可以看到，如图13所示：

由于版本的问题，这些错误并不影响ASP的运行，所以我们经常忽略了这些错误的存在。

同样的，在上面的flash代码中，也存在着这样的错误。因为上面的flash代码是在网上下载下来的，而且查看的各类资料中都是这样的代码，所以我们一直以为插入flash的代码是不会有问题的，即便它在ASP中有错误提示，如图14：

而后我们重新查找资料，重新编写了flash的代码，如下：

＜object

classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”

codebase=“http://download.macromedia.

com/pub/shockwave/cabs/flash/swflash.

cab#version=7,0,19,0”

style=“width:1003px;height:137px;

border-top-style: none;

border-right-style: none;

border-left-style: none;

border-bottom-style: none;”＞

＜param name=“movie”

value=“image/flash.swf” /＞

＜/object

它是一段正确的而且适用于ASP.NET的代码。我们重新运行，flash播放无误。

3.2PPT网页发布问题：

把PowerPoint转换为flash有如下两个明显的好处：压缩演示文稿的体积，减少空间占用；更好的兼容性，可以让演示在任何操作系统或者浏览器平台上使

用。另外，生成swf影片同时可以生成html网页，从而便于网页链接等操作。

软件ispring提供了这样平台，通过嵌入到PowerPoint的工具栏可直接进行相关格式的转换。如图15。

使用方法如下：

1) 打开要转换的PowerPoint文档

2) 单击publish,根据需要作相应设置(可以选择当前选定的单张PPT还是所有ppt,要不要生成html网页或是exe可执行文件等)，如图16所示：

若有需要，可以通过SlideBoom储存和分享自己的PPT，进行相关设置(如title、topic等)，单击“Upload”按钮上传，上传后SlideBoom会自动将其转换成flash。如图17所示。

4结束语

通常，一个项目到手后，我们应当先充分酝酿整个网页的布局与标准色彩。确定好布局后，我们可以充分利用网上资源及身边的各类资料，丰富自己的网页内容和样式，如网上下载的文字资料、各类图片、gif小动画等，以及绘画作品、手工制作、作文等。我们还可以利用flash制作小动画。但应注意，在网上搜寻来的答案并非完全正确的，有时候也需要做一定的修改。因为随着网络技术的发展，网页制作工具已经有了很多版本，许多网上的代码自身没有错误，但却不适用于新的版本。还要注意的就是网页在不同的浏览器下可能会有不同的效果。

参考文献：

[1] Dave Shea, Molly E.Holzschlag. CSS禅意花园[M]. 北京:人民邮电出版社.

[2] 侯利军. 精通Web标准网页布局—XHTML+CSS+JavaScript[M]. 北京:人民邮电出版社.

[3] 王太冲,李巍,马淑燕. Flash8入门与提高[M]. 北京:清华大学出版社.