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

精品课程网站建设中的问题和解决方法 　　摘要：本文阐述了网站前台制作中遇到的一些常见问题，给出了具体的解决方法，具有一定的借鉴性。 　　关键词：百分百布局；flash；PPT；banner 　　中图分类号：G642 文献标识码：B 　　 　　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