网页设计论文及公选课论文班级:…..学号:….姓名:…..2011/12/4摘要我们已经进入互联网时代,互联网实现了世界范围的网络间的互联和信息共享,并已全面介入人们生产生活的方方面面。随着我国计算机技术的发展与普及,网络已经成为人与人之间交流的一种重要形式。我校作为教育部门,在发展教育的过程中更是离不开网络技术,因为它能够让复杂的事情简单化。比如我校的“最新公告”,通过网页技术,可以把最新的公告信息及时的公示出来,全校师生随时随地可通过访问此网页,及时地获得学校最新的信息,省去了人工通告的繁琐过程,省时又省力。在信息技术飞速发展的今天,人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页,所以网页设计尤为重要。本文从网页设计的角度出发,介绍一些设计中要素和技巧,例如框架、CSS样式的使用等等。关键词:网页设计要素框架CSS一、网页的概念网页,是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。网页通常是HTML格式(文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等)。如果只有域名和虚拟主机而没有制作任何网页的话,客户则无法访问网站。因此,网页时网站的重要部分。网站是由网页集合而成的,而大家通过浏览器所看到的画面就是网页,网页说具体了是一个html文件,浏览器是是用来解读这份文件的。也可以这样说:网页是有许多html文件集合而成。至于要多少网页集合在一起才能称作网站,这可就没有规定了,即使只有一个网页也能被称为网站。网页要使用网页浏览器来阅读。文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为:文字,就是网页的内容,图片,就是网页的美观。除此之外,网页的元素还包括动画、音乐、程序等等。在网页上点击鼠标右键,选择菜单中的“查看源文件”,或者选定一个网页文件再打开方式中选择“记事本”,就可以通过记事本看到或编辑网页的实际内容。可以看到,网页实际上只是一个纯文本文件,它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述(例如字体、颜色、大小),而浏览器则对这些标记进行解释并生成页面,于是就得到你现在所看到的画面。为什么在源文件看不到任何图片?网页文件中存放的只是图片的链接位置,而图片文件与网页文件是互相独立存放的,甚至可以不在同一台计算机上。互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起,作为上网的主要依托,由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局,其功能主要就是提供一种形式给每个上网者,让他们能够了解网站提供的信息。二、网页开发技术几种网页开发技术介绍——HTML、ASP、JSP、CGI、PHP。HTML(HyperTextMark-upLanguage)即超文本标记语言,是的描述语言。严格的来讲,HTML不能算做一门编程语言,因为它没有自己的数据类型,也没有分支、循环等控制结构。它的设计简单,结构灵活,允许在Web浏览器及其它兼容的应用程序中显示文本和图像,并且文档的某些部分可以成为超链接。完成后把这些文档保存为*.html文件,然后用浏览器打开。HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。在早期,动态网页技术主要采用CGI技术,即CommonGatewayInterface(公用网关接口)。在早期,你可以使用不同的程序编写合适的CGI程序,如VisualBasic,Delphi或C/C++等。虽然CGI技术成熟而且功能强大,但由于编程困难,效率低下,修改复杂等缺陷,所以有逐渐被新技术取代的趋势。ASP全名ActiveServerPages,是一个WEB服务器端的开发环境,利用它可以产生和运行动态的、交互的、高性能的WEB服务应用程序。ASP采用脚本语言VBScript(Javascript)作为自己的开发语言。ASP更精确的说是一个中间件,这个中间件将Web上的请求转入到一个解释器中,在这个解释器中将所有的ASP的Script进行分析,再进行执行,而这时可以在这个中间件中去创建一个PHP是一种跨平台的服务器端的嵌入式脚本语言.它大量地借用C,Java和Perl语言的语法,并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。还有一点,PHP是完全免费的。JSP是Sun公司推出的新一代站点开发语言,他完全解决了目前ASP,PHP的一个通病--脚本级执行(据说PHP4也已经在Zend的支持下,实现编译运行)。Sun公司借助自己在Java上的不凡造诣,将Java从Java应用程序和JavaApplet之外,又有新的硕果,就是Jsp--JavaServerPage。Jsp可以在Serverlet和JavaBean的支持下,完成功能强大的站点程序。由于水平所限,此次网页开发使用的是HTML技术,因为它相对简单,容易上手,适合初学者进行基本的练习操作。三、网页的分类网页有多种分类,笼统意义上的分类是动态和静态的页面,原则上讲静态页面多通过网站设计软件来进行重新设计和更改,相对的比较滞后,当然现在有网站管理系统,也可以生成静态页面~我们称这种静态页面为伪静态。动态页面通过网页脚本与语言自动处理自动更新的页面,比方说贴吧,他就是通过网站服务器运行程序,自动处理信息,按照流程更新网页。静态网页页面上的内容和格式一般不会改变,只有网管可根据的需要更新页面。中企合纵网页制作专家动态网页的内容随着用户的输入和互动而有所不同,或者随着用户,时间,数据修正等而改变。网页上的内容也可以由用户通过使用客户端描述语言(JavaScript,JScript,Actionscript,)来改变。当然更普遍的是由服务器端的描述语言(Perl,PHP,ASP,JSP,ColdFusion,等)进行编译,从而对动态网页的内容进行改变。无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。随着信息技术的更加专业化,越来越明显的倾向表明,网页设计和网站的发展会逐渐成为两个不同的领域。网页设计的要素在一个网站中,最重要的页面当属主页,所以在此以主页为例,说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素:文字,图片,排列方式和主色调,这四者相辅相成,缺一不可。四、要素1.图片要素要设计出漂亮的主页,首先要成为计算机图形高手,仅这一点就可以让初学者花上一年半载的时间。图片的要求与页面的内容有关,一些较随意的主页像股票、医药站点等,来访者并不在乎你能否做出精彩的图片,有些时候他们反而觉得放置图象后影响了访问速度,他们关心的只是页面内容;相反像一些需要靠图象来吸引访客的主页,如游戏介绍、影视介绍、风光名胜等站点,图象是一个极为重要的要素,在这里缺少了恰当的图象,整个页面就会黯然失色、就是一个不完整的主页。这需要去学习像photoshop这样的图形图像处理软件,还要有一定的美术基础,如审美观、创意技巧等,2.排列方法要素主页的第二个要素是排列方法,即网页布局。网页作为一种版面,既有文字,又有图片;文字有大有小,还有标题和正文之分;图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众,不能简单地将其罗列在一个页面上,否则会搞得杂乱无章。关于具体的网页布局,常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等,关于它们,在网页设计的相关书籍中或者在网络上都可以看到详细的叙述。比如如果内容非常多,就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是首选;Flash型更灵活一些,好的Flash大大丰富了网页,但是它不能表达过多的文字信息。还没有提到的就是变化型了,只有不断的变化才会提高,才会不断丰富我们的网页。3.色彩要素色彩在网页所占比重很大。有了合理清新的色调,会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的,一个网站必须有一种或两种主题色。不至于让浏览者迷失方向,也不至于单调乏味。一般来说,页面的主体文字应尽量使用黑色等较深的颜色,与背景对比明显,按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色,再用红色和黑色作为配色,就能表达出严肃、稳重的效果。五、网站设计成功要素设计一个网站,应该考虑下列九条基本因素,这些因素对网站的成功与否有着重要影响。1.整体布局网站主页就好象是宣传栏或者店面——对访问者产生第一印象,都希望尽量给人留下好的印象,不是吗?一般来说,好的网站应该给人有这样的感觉:干净整洁;条理清楚;专业水准;引人入胜。网页应该力求抓住而不是淹没浏览者的注意力,过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从——离开是最好的选择,就象一些商店,播放震耳欲聋的发烧音乐,你要做的唯一决定就是离开那里,越快越好。2.信息无论商业站点还是个人主页,你必须给人们提供有一定价值的内容才能留住访问者,因为我们人类总是惟利是图,第一个问题总是:“对我有什么用处?”所以你必须提供某些有价值的东西,当然并不是说必须提供某些免费的物品——免费书籍、免费入场券、免费度假等,这些“有价值的东西”可以是:信息;娱乐;劝告;对一些问题的帮助;提供志趣相投者联络的机会;链接到有用的网页,等等。如果你经营的是企业网站,需要提供关于产品或服务的信息:容易理解;容易查询;容易订货。3.速度我们都知道,页面下载速度是网站留住访问者的关键因素,如果20—30秒还不能打开一个网页,一般人就会没有耐心。至少应该确保主页速度尽可能快,最好不要用大的图片。应该时时提醒自己,网站首页就象一个广告牌。当开车经过一个广告牌时,没有时间阅读上面的详细说明,也不可能赞赏其复杂的图案,广告标志从眼前一闪而过,必须在一瞬间给人留下印象。网上访问者也是“一闪而过”,保证你的首页简单而快速。网上有许多关于如何增加速度的文章——检查下载速度,放弃一切显著减慢主页速度的资料。4.图形和版面设计图形和版面设计关系到对主页的第一印象,图象应集中反映主页所期望传达的主要信息。如果有系列商业站点,你不必让过分显眼的动画出现在首页——但如果你的网站是游戏站点,动画将是必不可少的一部分内容。图片是影响网页下载速度的重要原因,根据经验,把每页全部内容控制在30K左右可以保证比较理想的下载时间。图象在6—8K之间为宜,每增加2K会延长1秒钟的下载时间。颜色也是影响网页的重要因素,不同的颜色对人的感觉有不同的影响,例如:红色和橙色使人兴奋并使得心跳加速;黄色使人联想到阳光,是一种快活的颜色;考虑到你希望对浏览者产生什么影响,请为网页选择合适的颜色。阅读西方格式文本时,眼睛从左上方开始,逐行浏览到达由下方,插入图象时不要忘记这种特性。任何具有方向性的图片应该放置在网页中对眼睛最重要的地方,如果在左上角放置一幅小鸟的图片,鸟嘴应该放在把浏览者目光引向页面中部的地方,而不是把视线引走。这种思路可以用于所有图片:面部应该“看”网页的中部;汽车的“停靠”面向网页中部;道路、领带等等图片的放置都应该在有助于吸引目光从左向右、从上向下移动。一般总是把网站导航条放置在页面左边,也是出于这种考虑——不断地出现在浏览者的视野之中。5.文字的可读性我们仍然用广告牌的比喻来说明,文字要在广告牌上突出,周围应该留有足够的空间。也许你曾到过一些网站,要么拥挤不堪的文字觉得好象只有把脑袋钻进去才能阅读,要么深色的背景给人的感觉好象处于非常狭窄的空间里,而且让人的心情感觉很压抑。某些背景色的令人阅读困难;紫色、橙色和红色让人眼花缭乱。文字的颜色也很重要,不同的浏览器有不同的显示效果,有些在你的浏览器上很漂亮的颜色在其他浏览器上可能无法显