学生个人网站的设计弊端及改进建议

1、学生个人网站的设计弊端及改进建议信息技术科 麦志媚2004-7-6从教几年来，浏览过、批阅过不计其数的学生个人网站，在对中学生的网页制作能力赞叹之余，也发现了许多设计弊端。虽然学生不是专业的网页设计人员，但既然涉及到网页设计这一领域，就有必要做好基本的要求。特别对于以后有志于向网络、设计、艺术方向发展的学生，更应该把基本功练好。同样，我们教师也应该努力提高自己这方面的水平。一、设计弊端在形形色色的学生个人网站中，存在着以下一些毛病：1、 一味模仿，没有个性往往一进入某个学生个人网站的首页，心里不免就涌起一声叹息：“又是这样！”学生们设计网页时大多数倾向于模仿，模仿别人的版面、颜色、字体等等，出

2、来的效果八九不离十，像孖生姐妹一样，没有一点自己的特色。诚然，中学生年纪还小，还没形成固定的审美观，还不知道如何准确地去表达自己的想法和观点。他们见到网络上漂亮的站点，就想自己也拥有一个这样的站点，不可避免地就照着别人做去了。可是这样的网站做出来又有什么意义呢？不要说对于培养学生的审美观有何帮助，就是学生的创造能力也被大大地扼杀了。2、“花”花里花俏，眼花缭乱这也是普遍存在的情况。有人总结过一个网页设计者的成长要经历四个阶段：单调的页面花俏的页面统一风格的页面简单的页面。有小部分学生还是停留在“单调的页面”上，究其原因，很大程度是懒的结果。大部分的学生就刚刚好走到了“花俏的页面” 。他们喜欢用

3、大幅的颜色偏深的图片做背景，然后在背景上再放上大段的文字，而且文字的颜色也是五彩缤纷的。更有甚者，在图片做的背景上还要放插图，页面上还有些timeline的小动画在飘来飘去，看架势，非把你弄得头晕眼花不可。有时候为了在这样一个页面中找出制作者要表达的信息，或者仅仅找一个超级链接，都让你十分费劲。3、“多”内容多，技巧更多很多学生是第一次做网站（其实应该体谅他们的），就恨不得把自己所有喜欢的东西都往页面上堆，文学、音乐、漫画、游戏、电影、汽车、手机、电脑、一股脑儿放一起，也不分门别类。有时真不知道他的网站是做什么内容的，太多内容反而没内容了（真应了那句：太多选择等于没选择）。内容多，还有一方面是

4、多在，他们把网络上收集到的有关这个主题的文章有多少就列多少，列了很长很长的满满的一个页面，即使我想看完，也没有耐心和时间。第二多，就是技巧多。有一篇文章把这个弊端描述得很好，我引用一下：“常常看见这样的网站：一进主页，'peng'的弹出一个带警告图标的对话框，上面写着欢迎光临之类的话。一移鼠标，发现上面跟着一群javascript制作的彩色小点。离开的时候又'peng'的一个欢迎再来。”说得正中要点。还有一种烦人的情况，就是网站里除了首页，其他页面没有导航条，你要去看其他栏目非得先返回首页；而每次访问首页时它都要自动弹出一个输入框，叫你输入来访者姓名，不管你输了

5、没有，“确定”之后还有一句话“欢迎xxx来到我的网站！” ，还要“确定”一次才能真正地回到他的首页。如此重复一两次之后，即使你的首页里有非常精彩的内容，我看浏览者也不想受这个罪了。4、颜色搭配不当网页做出来是被人浏览的。浏览的时候眼睛是否舒服就成了基本同时也很重要的要求。很多学生没有注意到这一点。经常遇到这样的情况：白色的背景上放黄色的字，黑色的背景上放深蓝色的字，深蓝和深红搭配，有时还会见到那种刺眼的绿，；有些喜欢用框架的学生为各个框架都填上不同的背景色，各种背景色之间又不协调，给人的感觉是整个页面被硬生生分成了不相干的几块。颜色搭配不当会使网站的质量大打折扣的。5、字体太小自从网络上流行起

6、04b系列字体以后，网络上同时流行起小字体。04b系列字体中有几种在显示小字体方面是非常优秀的，就是说它们在字体很小的情况下仍然能保持良好的可读性。04b系列是英文字体。有时学生们为了配合那么小的英文字体，就把中文字体改小了。如果是单纯的文字显示，在网页上用宋体12px或者9pt还是能达到小中文字的清晰的。可是有学生就喜欢用其他字体，或者把文字做成图片，结果一大段一大段的小字让浏览者读得特别吃力，或者干脆放弃不读了。6、风格凌乱风格，听起来很有专业的味道，不要说学生们没有留意到这个名堂，我想很多老师也会无意中忘了它。一个好的网站必须是一个风格统一的整体。风格是什么？其实就相当于人的性格。我们会

7、说某某人很有气质，用在网站上，就可以说某某站点很有个性，与众不同！具体实现的话就要从内容、色调、版面布局等方面入手。这里说的“风格凌乱”就是指学生在确定他们网站的内容、色调、版面布局等方面没有一个整体的统一的规划，找到什么样的素材统统都用上，没有经过刷选或者修饰。例如，一些站点的页面上，什么类型的图片都塞在一起，有水彩画、漫画、手绘图、摄影照片，还有各种活泼的gif动画，单单是用图这一点就已经百家争鸣了。如果需要形容这样一个网站，它是静的还是动的，真的难以评说。7、版面布局不合理这里有两种情况。一种是初学者犯的错误。初学者对制作工具不熟悉，他们不知道如何把文字、图片放到适当的地方，只懂得从上到

8、下一路摆下来。这就容易出现一段文字、一张图片、一段文字、一张图片的格局，你说合理不？还有一种情况是，制作者是懂得技术的应用的，可他们没把版面布局当成一回事。他们网页上的文字、图片等元素都是随兴放置的。结果，头重脚轻、头轻脚重，或者左右不平衡的情况就时有发生。8、中英文混杂这是学生们耍酷的结果。平时说话就喜欢中英混杂，做起网页来也不例外。有些网站喜欢用英文导航，也仅仅导航是英文；有的就在整个网站里到处随意地使用英文，纯属自己喜欢。我不是反对用英文，我也知道英文字比中文字活泼，字体变化多端，可以为网页增添意想不到的艺术效果。可是不中不西的网站叫人如何适应，而且我们面对的浏览者绝大部分都是说中文、写

9、中文的，你又何必故作高深呢？9、其他（链接隐蔽、导航不方便、没有“返回”、分辨率问题、速度问题）有部分学生网站喜欢跟浏览者捉迷藏，把“Enter”放在不知哪个角落里，而且还小得可怜。这也是模仿网络上一些个人网站的结果。至于导航，有时真是无可奈何。看过很多这样的学生网站，它们是有导航的，可是它们的导航永远少一个，就缺了当前栏目的那个。这种导航虽然节省空间，但是会让浏览者有混乱的感觉，点来点去，都不知到了哪里。还有一种导航更绝，页面上只有一个链接，就是下一个栏目的链接，你要看是吗？乖乖地跟着我走吧。没有“返回”链接是最普遍的情况了。如果你建议他们增加一个“返回”，他们还振振有辞地反驳你：“IE上不

10、是有后退键吗？”“后退”键是IE的功能，不属于我们网站的一分子。我们的网站要让浏览者进出方便的话，必须有自己的“返回”链接！自从比较多的人开始使用1024×768的显示分辨率之后，网站的分辨率问题就出现了。很多学生以为他的网站在自己的电脑上看是这个样子，在别的电脑上看也会一样。他们没有意识到分辨率问题。结果有些网站一转移了地方就变形，文字、图片都错了位。最后提一下速度问题。这主要是由于网站上的大容量图片、音乐、动画造成的。很多学生不会对收集到的图片素材进行加工，直接就用，特别是数码相片，真是巨大无比。还有些学生喜欢用背景音乐，或者在页面中放一段Flash动画的，都会或多或少地影响浏览

11、速度。二、改进建议我们应该怎么做，才能避免再犯以上的毛病呢？就从构思一个网站开始吧：1、 确定网站主题。我想至今没有哪个个人网站想做成像sina、sohu这样的大型综合类站点的，既然做不了综合，我们就从小方面入手。首先为自己的网站确定一个明确的主题。有些学生网站的主题定得不错，例如：围棋、星座、漫画等等。我看过网上有一个关于香水专题的个人网站，做得非常棒！2、 确定网站的风格。风格是有人性的。通过网站的外表、内容、文字、交流可以概括出一个站点的个性和情绪。是温文儒雅，是执著热情，是活泼易变，还是放任不羁。像诗词中的“豪放派”和“婉约派”。有风格的网站与普通网站的区别在于：普通网站你看到的只是堆

12、砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。怎样去树立我的风格呢？可以从三方面入手：（1） 内容要有特色。这在确定主题的时候你就应该考虑到了。你为什么要选这个主题呢？因为喜欢，还是其他原因？其实很多个人网站都是做自己喜欢的东西的，这样才能满怀热情地去完成它。既然喜欢，就更要好好地找出它让你喜欢的因素，将它放大，让更多的人喜欢它。要让内容有特色，在后面提到的“收集和加工素材”时也要注意配合。（2） 色调要有特色。为你的网站设定一个主色调，或红、或黄、或绿、或蓝、或灰、或黑。在设

13、定主色调时，也不是随心所欲的，同样它要为你的网站主题服务。例如cocacola公司的网站()就是他们一贯的红色；Lipton茶商网站（http:/www.LiptonT.com/）的首页就使用他们产品包装所常用的黄色等等。我们可以从中借鉴经验。设定了主色调之后，还要为它选择辅助颜色。在这里介绍一些小技巧：第一种方法，可以通过调节主色调的透明度或者饱和度，就是加深或者减淡主色调来产生新的颜色；第二种方法，用与主色调相同的色系。例如主色调是绿色，辅助颜色就可以用其他各种各样的绿，例如草绿、苹果绿、橄榄绿等等。确定了整个网站的色调之后，你就应该在所有页面中突出它。正文文字的颜色，超级链接文字的颜色，

14、图片的主色调，背景色，边框色等等都尽量使用主色调或辅助色调。在网页配色中，要特别注意： 不要将所有颜色都用到，尽量控制在三种色彩以内。 背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。 （3） 版面布局要有特色。由于各人使用的电脑的分辨率有所不同，为了让我们的网站能适应更多浏览者的机器要求，我们在设计版面前首先就应该考虑如何解决这个问题。在这里，建议的方法有：配合800×600的大小，用表格让整个页面居中，这样的页面放到1024×768下也会是稳稳当当地居中的，不会有变形的出现。也是用表格布局版面，表格的宽度用%为单位，可以随着版面的大小变

15、化而变化。不过这样做的话，先要保证表格里的内容随着表格变大变小也不会变形。不要使用层来定位。另外，可以参考榕树下发行的电子杂志Image无限，这本电子杂志在解决不同分辨率下的显示问题，有他的独到之处。 接着，我们可以开始布局版面了。在这里，可以借鉴网站设计的思考中有关版面布局的一些建议步骤：草案新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的“景象”画上去(我们建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定

16、一个满意的作为继续创作的脚本。粗略布局在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块主要包含网站标志,主菜单,友情链接,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。定案将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）以上步骤选自网站设计的思考，作者阿捷，来源于太平洋电脑网。在布局过程中，我们还应做到以下几点： 将你的网站标志尽可能地安排在每个页面相同的地方； 统一导航栏的位置、大小； 在页面上清楚标明当前栏目的名称； 统一正文文

17、字的字体、大小和颜色； 每个页面的长度控制在三屏之内。 要布局出具有创意的版面，还需要不断的反复的推敲和修改。功夫不负有心人的。3、为你的网站规划栏目。你打算做几个栏目呢？每个栏目的大概内容是什么呢？例如我的网站主题是“我的家乡东莞” ，我就可以设置以下栏目：东莞历史、东莞地理、东莞经济、东莞文化、东莞旅游、东莞精神、东莞未来、。在设置栏目的时候，考虑得越详细越好。4、 收集和加工素材。这是很关键的一步。内容是网站的灵魂，所以收集素材这一步不能随便。请尽你所能，利用各种媒体（包括报纸、杂志、书籍、网络、数码设备）来收集网站所需的一切素材。有些素材并不能直接使用的，我们需要对它们进行加工整理和修饰。例如删减文字、润饰图片等等。在处理图片的时候，要特别注意，图片的风格要尽量接近。就是说，如果你的网站是定位在清新淡雅型的，你可以选用手绘图，一旦定了选用手绘图，你就应该整个网站都尽可能地使用手绘图。收