毕业设计(论文)ASP大学校园网站的研究与实现.doc

上传人:文库蛋蛋多 文档编号:3976364 上传时间:2023-03-30 格式:DOC 页数:55 大小:303KB
返回 下载 相关 举报
毕业设计(论文)ASP大学校园网站的研究与实现.doc_第1页
第1页 / 共55页
毕业设计(论文)ASP大学校园网站的研究与实现.doc_第2页
第2页 / 共55页
毕业设计(论文)ASP大学校园网站的研究与实现.doc_第3页
第3页 / 共55页
毕业设计(论文)ASP大学校园网站的研究与实现.doc_第4页
第4页 / 共55页
毕业设计(论文)ASP大学校园网站的研究与实现.doc_第5页
第5页 / 共55页
点击查看更多>>
资源描述

《毕业设计(论文)ASP大学校园网站的研究与实现.doc》由会员分享,可在线阅读,更多相关《毕业设计(论文)ASP大学校园网站的研究与实现.doc(55页珍藏版)》请在三一办公上搜索。

1、毕 业 论 文(设 计)课题名称 校园网站 学 院 信息电子技术学院 专 业 计算机科学与技术 班 级 0109114222 指导教师 学生姓名 佳 木 斯 大 学 教 务 处摘 要伴随着网络的出现,网页逐渐融入人们的生活。快速及时的新闻浏览,五彩缤纷的网上信息,使网络与人们的生活息息相关,于是世界上又出现了第三媒体Internet。它打破了地域限制,真正使信息得以共享,改变了人们的工作和生活方式。随着Internet的进一步发展,静态Web站点的开发与维护变得越来越困难,一方面信息的不断增加和变化,使站点维护人员不得不经常修改他们的网页,特别是基于数据库驱动的Web站点更是如此,随着Inte

2、rnet上信息量的增多和交互性的加强使HTML显得越来越难以胜任。另一方面静态网页由于不能与浏览者进行有效交互,使人们感到越来越乏味,而不愿意再一次地进入同一站点。所以开发动态网页或动态内容成了越来越多的站点所追求目标。所谓动态内容是由每一个用户按照自己的需求发出请求而特殊制作的Web网页。关键字 INTERNET; HTML; ASP; 链接AbstractWith the appearance of network,web merges gradually peoples life.The life is related to network which has many kinds of

3、 information and makes us to browse the news fast and promptly. As a result, the third media has appeared in the world which we call internet.It breaks out the restriction of regions,makes information to share really and changes peoples work and life. As the great progress of internet,the developmen

4、t and conservation of static web sites become more and more difficult. On one hand,the preservers of web sites have to modify their web page because of the increasing and changing information,especially for the web sites which is drived by database. Following the increased information and the intens

5、ive alternation on the internet,it is more and more difficult to become a competent HTML. On the other hand,as statical web cant alternate effectually valpider and vacpider.And people wont enter the same web site again.So exploiting dynamic web page and dynamic content become obyectiue for which mor

6、e and more web site seek. Dynamic content is special web page that every user seeds out request by their own demand to make.KeyWords INTERNET; HTML; ASP; CONNECT;1 绪论1.1课题背景Internet是目前世界上最大的计算机互联网络,它遍布全球,将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的,易于被人们所接受的信息检索手段,World Wide Web(简称WWW)发展十分迅速,成为目前世界上最大的信息资源宝

7、库。据估计,目前Internet上已有上百万个Web站点,其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域,其用户群十分庞大,因此,建设一个好的Web站点对于一个机构的发展十分重要。近年来,随着网络用户要求的不断提高及计算机科学的迅速发展,特别是数据库技术在Internet中的广泛应用,Web站点向用户提供的服务将越来越丰富,越来越人性化。 我们发现这样一个事实,一个用户在访问一个网站时一般来讲只对该网站的部分内容感性趣,而且这种兴趣会持续一段时间。这点启发了我们,如果能根据用户的喜好为不同的用户显示其个性化的页面,即着重显示该用户感兴趣的内容,将为用户节约大量的

8、检索时间,而且这样的网页显然是更具有吸引力的。一些站点已经在这方面做出了一定的尝试,通常采用的方法是,在用户登陆时为其提供一系列的选项,使用户能够对站点进行一些自主的设置。这样做能够使站点呈现一定程度的个性化,但是对用户来讲,还是比较烦琐,而且在用户了解一个站点前让其对站点进行设置,其结果未免有些粗糙。于是我们构想了这样一种方案,对用户登陆后的动作进行跟踪,分析,发掘用户点击的规律,即用户先后点击的关联规则,这样,在用户点击一个主题(链接)之后,系统能够自动生成一个页面,其中包含了该主题下用户经常关注的内容(若干链接),这样便在无须用户做出任何额外工作的情况下实现了为用户量身订做的个性化页面。

9、1.2 课题目的及意义在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的,获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。建设校园网站可以使大家对这个学校有了更多的了解, 学校在社会上的知名度也会随之提高,学校会接收更多更好的生源。老师跟同学们还可以在校园网站上畅所欲言,发表自己对学术上的观点以及

10、对老师讲课还有什么要求,拉近老师与同学们之间的感情,对同学们的生活与学习都有很大帮助。2 开发工具简介2.1 HTML编辑器虽然HTML代码复杂,编辑和调试要花费大量的时间,但因HTML的稳定性、广泛支持性及可创建复杂的页面效果,仍受高级网页制作人员的青睐。就目前来说,有众多的编辑器供选择,这些编辑器广泛支持复杂页面创建及高级HTML规范,使用较为普遍的有Hotdog等专业HTML编辑器。2.2 所见即所得的网页编辑器其中以MicrosoftFrontpage与Dreamweaver为代表,Frontpage具有如Word一样的操作界面,熟知Word功能的操作者,只要稍加培训就能轻松编制网页。

11、而且,Frontpage还能解析网页的HTML源代码,并提供了预览支持。但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。Dreamweaver是Macromedia公司的出品的一款所见即所得的网页编辑工具。与 Frontpage不同,Deamweaver采用的是Mac机浮动面版的设计风格,对于初学者来说可能会感到不适应。但当你习惯了其操作方式后,就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的。 Dreamweaver对于DHTML(动态网页)的支持特别好,可以轻而易举地

12、做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver与Flash、Firework 并称为 Macromedia的网页制作三剑客,由于是同一公司的产品,因而在功能上有着一个非常紧密的结合。因此,说Dreamweaver是高级网页制作的首选并不为过。DREMWEAVER的操作界面:功能菜单包含了文件、编辑、查看、修改、文本、命令、站点、窗口、及帮助10个功能菜单,如图2-2所示尽快 这些功能菜单中包含的控制命令及功能,可以帮助你快速设计出令你满意的网页 图2-1工具栏工具栏:包含了DREAMEAVER MX进行网页编辑时常用的基本功能按钮,如新增、打开、存

13、储及网页程序代码查看、设置网页名称等。由两部分组成:文件工具栏和标准工具栏,可以运行查看 工具栏命令打开它们。插入面板:插入面板是DREAMWEAVER MX中网页内容设计的重要控制面板,几乎所有的网页元素都可以从插入面板中加入。在默认状态下,插入面板中包含了12个不同类型的选项卡;在展开的选项卡中,单击需要的按钮,即可运行对该对象的插入命令。常用选项卡布局选项卡文本选项卡表格选项卡框架选项卡表单选项卡模板选项卡字符选项卡媒体选项卡文件头选项卡脚本选项卡应用选项卡 属性查看器:属性查看器是Dreamweaver MX中基本的属性设置工具,可以方便地运行修改菜单中的所有命令。所有通过插入面板中加

14、入到网页中的元素都在这里修改编辑。选择的对象不同,属性查看器中的选项也不同。可以运行窗口 属性命令或按CTRL+F3键打开属性查看器功能强大的浮动面板:1设计面板、2代码面板、3应用程序面板、4文件面板、5高级布局面板、6历史记录面板、7时间轴面板、8代码检查器面板、9结果面板、10答案面板2.3 Flash互动网页制作工具这是是一款功能非常强大的交互式矢量多媒体网页制作工具。能够轻松输出各种各样的动画网页,它不需要特别繁杂的操作,也比JAVA小巧精悍!但它的动画效果、互动效果、多媒体效果十分出色。而且还可以在Flash动画中封装Mp3音乐、填写表单等;并且由于Flash编制的网页文件比普通网

15、页文件要小得多,所以大大加快了浏览速度。这是一款十分适合动态Web制作的工具。另外,个人网站制作者还需了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、JavaScript、VBScript的基本知识。对于常用的一些脚本程序如ASP、CGI、PHP也要有适当了解,还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具,并能部分了解多种图形图像动画工具的基本用法,熟练使用FTP工具以及拥有相应的软硬件和网络知识也是必备的。当然,互联网还是一个免费的资料库。编制网页需要多种多样的按钮、背景还有各种各样图形、图片。如果这些都要靠自己完成,既浪费时间又浪费金钱,而且还需要强大的图形、图片制作

16、技术。所以,为了省却这些麻烦,网站制作者完全可以从网上下载各种精美实用的图片、按钮、背景等网页素材。图形制作工具Photoshop5.5*是Adobe公司的产品,是功能非常强大的专业图形软件,可以制作任何你想要的平面效果。其中包含的ImageReady是用于网页图片制作的。缺点是体积庞大,操作比较复杂,非专业人士很难熟练掌握。Paint Pro则是一款小巧玲珑、使用简便的软件,功能也很多,基本上可以满足一般的图形制作,而且最大的优势是完全免费的! 另外,矢量图形工具有CorelDraw等,可以做出体积很小的矢量图片,缺点是网页上无法直接插入显示。3 可行性分析目前ASP可运行在以下几种环境:一

17、WINDOWSNTserver4.0运行IIS3.0(InternetInformationServer)以上。二WINDOWSNTworkstation4.0运行PeerWebServer3.0以上。三WINDOWS95/98运行PWS(PersonalWebServer)。四 WINDOWS 2000/XP/SERVER 2003 运行IIS5.0其中以NTserver上的IIS功能最强,提供了对ASP的全面支持,是创建高速、稳定的ASP主页的最佳选择ASP是Microsoft开发的,所以在现在普遍使用的WINDOWS操作系统上很简单就可以实现。而且支持上也大大优于其他的动态网页语言。在这

18、里我只以在WINDOWS XP 中安装IIS5.0为例,讲解在WINDOWS上安装IIS组件。首先,重新将WINDOWS安装盘放入光区,自动运行,选择安装WINDOWS组件。之后选中INTERNET服务(IIS)点击安装。这样IIS就安装成功了。之后进入控制面板-管理工具-INTERNET服务。在具体的修改各个选项。一般只要修改主目录地址和在文档中添加index.asp就可以正常运行服务器了。应注意的是在登陆本地虚拟地址时,要键入“TTP:/LOCALHOST/”这样就可以正确运行了。一切准备工作就OK了。接下来就是网站的制作过程了。 4 校园网站的总体设计4.1 总体设计方案主题鲜明在目标明

19、确的基础上,完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位,规划网站的组织结构。 Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法,提供华丽的图像、闪烁的灯光、复杂的页面布置,甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。 为了做到主题鲜明突出,要点明确,我们将按照客户的要求,以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣,办出网站的特点。Web站点主页应具备的基本成分包括: 页头:准确无误地标识你的站点和个人标志; Email地址:用来接收用

20、户垂询; 联系信息:如普通邮件地址或电话; 版权信息:声明版权所有者等。 充分利用已有信息,如客户手册公共关系文档技术手册和数据库等。4.2 网站的版式设计网页设计作为一种视觉语言,特别讲究编排和布局,虽然主页的设计不等同于平面设计,但它们有许多相近之处。版式设计通过文字图形的空间组合,表达出和谐与美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来,特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果,我们将反复推敲整体布局的合理性,使浏览者有一个流畅的视觉体验。看看我们经常用到的版面布局形式:1.T结构布局。所谓T结构。就是指页面顶部为横条网站标志+广告条,下

21、方左面为主菜单,右面显示内容的布局,因为菜单条背景教深,整体效果类似英文字母T,所以我们称之为T形布局。这是网页设计中用的最广返的一种布局方式。(图略)这种布局的优点是页面结构清晰,主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人看之无味。2.口型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。(图略)这种布局的优点是充分利用版面,信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站。3.三型布局。这种布局多用于国外站点,国内用的不

22、多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。4.对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。5.POP布局。POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点,比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。以上总结了目前网络上常见的布局,其实还有许许多多别具一格的布局,关键在于你的创意和设计了。对于版面布局的技巧,有四个准则:1.加强视觉效果2.加强文案的可视度和可读性

23、3.统一感的视觉4.新鲜和个性是布局的最高境界4.3 定义网站的CI形象所谓CI,是借用的广告术语。(CI是英文corporate identity的缩写),意思是通过视觉来统一企业的形象。现实生活中的CI策划比比皆是,杰出的例子如:可口可乐公 司,全球统一的标志,色彩和产品包装,给我们的印象极为深刻。更多的例子如SONY,三菱,麦当劳等等。一个杰出的网站,和实体公司一样,也需要整体的形象包装和设计。准确的,有创意的CI 设计,对网站的宣传推广有事半功倍的效果。在您的网站主题和名称定下来之后,需要思考的就是网站的CI形象。1.设计网站的标志(logo).首先你需要设计制作一个网站的标志(log

24、o)。就如同商标一样,logo是你站点特色和内涵的集中体现,看见logo就让大家联想起你的站点。注意:这里的logo不是指88X31的小图标banner,而是网站的标志。标志可以是中文,英文字母,可以是符号,图案,可以是动物或者人物等等。比如:soim是用soim的英文作为标志,新浪用字母sina+眼睛作为标志。标志的设计创意来自你网站的名称和内容。网站的宣传标语。也可以说是网站的精神,网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如:鹊巢的“味道好极了”;麦斯威尔的“好东西和好朋友一起分享”;Intel的“给你一个奔腾的心”。4.4 网页内容与形式相统一为了将丰富的意

25、义和多样的形式组织成统一的页面结构,形式语言必须符合页面的内容,体现内容的丰富含义。灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段,通过空间、文字、图形之间的相互关系建立整体的均衡状态,产生和谐的美感。如对称原则在页面设计中, 它的均衡有时会使页面显得呆板,但如果加入一些富有动感的文字、图案,或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素,巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果,充分表达完美的设计意境。4.5 新技术的使用4.5.1三维空间的构成与虚拟显示网络上的三维空间是一个假想空间,这种空间关系需借助动静变化图像的比例关系等空

26、间因素表现出来。 在页面中,图片、文字位置前后叠压,或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计,根据现有浏览器的特点,网页设计适合比较规范、简明的页面,尽管这种叠压排列能产生强节奏的空间层次,视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生的空间关系,以及疏密的位置关系所产生的空间层次,这两种位置关系使产生的空间层次富有弹性,同时也让人产生轻松或紧迫的心理感受。 现在,人们已不满足于HTML语言编制的二维Web页面,三维世界的诱惑开始吸引更多的人,虚拟现实要在Web网上展示其迷人的风采,于是VRML语言出现了。VRML是一种面

27、向对象的语言,它类似Web超级链接所使用的HTML语言,也是一种基于文本的语言,并可以运行在多种平台之上,只不过能够更多地为虚拟现实环境服务。4.5.2 多媒体功能的利用网络资源的优势之一是多媒体功能。要吸引浏览者注意力,页面的内容可以用三维动画、FLASH等来表现。但要由于网络带宽的限制,在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。4.5.3 非图形的内容我们在必要时适当使用动态“Gif”图片,为减少动画容量,应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。但是,由于在互联网浏览的大多是一些寻找信息的人们,我们仍然建议您要确定您的网站将为他们提供的是有

28、价值的内容,而不是过度的装饰。5 校园网站详细设计5.1 确定网站主题做网站,首先必须要解决的就是网站内容问题,即确定网站的主题。美国个人电脑杂志(PCMagazine)评出了99年度排名前100位的全美知名网站的十类题材:第1类:网上求职;第2类:网上聊天/即时信息/ICQ;第3类:网上社区/讨论/邮件列表;第4类:计算机技术;第5类:网页/网站开发;第6类:娱乐网站;第7类:旅行;第8类:参考/资讯;第9类:家庭/教育;第10类:生活/时尚。我们可以参看上面的分类,继续细分。如果自己在某些方面有兴趣,或掌握的资料较多,也可以做一个自己感兴趣的东西,一者,你可以有自己的见解,做出自己的特色;

29、二者,在制作网站时不会觉得无聊或者力不从心。兴趣是制作网站的动力,没有创作热情,很难设计制作出优秀的作品。对于内容主题的选择,要做到小而精,主题定位要小,内容要精。不要去试图制作一个包罗万象的站点,这往往会失去网站的特色,也会带来高强度的劳动,给网站的及时更新带来困难。5.2 域名的选择域名是网站在互联网上的名字。一个非产品推销的纯信息服务网站,其所有建设的价值,都凝结在其网站域名之上。失去这个域名,所有前期工作就将全部落空。目前,做个人网站的很多都依赖免费个人空间,其域名也是依赖免费域名指向,如网易的虚拟域名服务,其实这对个人网站的推广与发展很为不利,不光是它“适时”开启的窗口妨碍了浏览者的

30、视线和好感,让人一看就知道是个人网站,而且也妨碍了网页的传输速度。所以,就我个人观点来说,首先花点钱去注册一个域名,独立的域名就是个人网站的第一笔财富,要把域名起得形象、简单、易记。5.3 首页的设计有这么一句俗语:良好的开端是成功的一半。在网站设计上也是如此,首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入,是否能够吸引浏览者留在站点上,全凭首页设计的功力了。所以,首页的设计和制作是绝对要重视和花心思的。阿捷的经验是:一般首页设计和制作占整个制作时间的40%。你宁可多花些时间在早期,以免出现全部做好以后再修改,那将是最浪

31、费精力的事。这里,先插一个“封面”的问题。封面是指没有具体内容,只放一个logo点击进入或者只有简单的图形菜单的首页。除非你是很艺术类的站点,或者可以确信内容独特,可以吸引浏览者进一步点击进入的站点,否则的话,封面式的首页并不会给你的站点带来什么好处。我们上网浏览需要的是快速,有价值的信息,如果等待xx分钟,只显示出一个粗劣的“ENTER”图标,那么相信没有人会再耐心等待进入下一页。因为首页的重要性,我们来仔细讨论有关首页设计的方方面面,大致提纲如下:版面布局的窍门色彩的搭配字体的设置和表格的嵌套细微之处见功力考虑不同的浏览器和分辨率设计好你的banner和位置meta标签的重要性首页设计的小

32、建议首页,从根本上说就是全站内容的目录,是一个索引。但只是罗列目录显然是不够的,如何设计好一个首页呢?一般的步骤是:确定首页的功能模块设计首页的版面处理技术上的细节一).确定首页的功能模块。首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块:网站名称(logo), 广告条(banner), 主菜单(menu),新闻(whats new), 搜索(search), 友情链接(links),邮件列表(maillist),计数器(count), 版权(copyright).选择哪些模块,实现哪些功能,是否需要添加其他模块都是首页设计首先需要确定的。二).设计首页的版面

33、在功能模块确定后,开始设计首页的版面。就象搭积木,每个模块是一个单位积木,如何拼搭出一座漂亮的房子,就看你的创意和想象力了。设计版面的最好方法是:找一张白纸,一支笔,先将你理想中的草图勾勒出来,然后再用网页制作软件实现。三).处理技术上的细节5.4 确定网站界面5.4.1 栏目与版块编排构建一个网站就好比写一篇论文,首先要列出题纲,才能主题明确、层次清晰。网站建设初学者,最容易犯的错误就是:确定题材后立刻开始制作,没有进行合理规划。从而导致网站结构不清晰,目录庞杂混乱,板块编排混乱等。结果不但浏览者看得糊里糊涂,制作者自己在扩充和维护网站也相当困难。所以,我们在动手制作网页前,一定要考虑好栏目

34、和板块的编排问题。网站的题材确定后,就要将收集到的资料内容作一个合理的编排。比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。在制定栏目的时候,要仔细考虑,合理安排。在栏目编排时需要注意的是:尽可能删除那些与主题无关的栏目;尽可能将网站内最有价值的内容列在栏目上;尽可能从访问者角度来编排栏目以方便访问者的浏览和查询;辅助内容,如站点简介、版权信息、个人信息等大可不必放在主栏目里,以免冲淡主题。另外,板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些,每个板块都有自己的栏目。举个例子:ENET硅谷动力(

35、)的站点分新闻、产品、游戏、学院等板块,每个板块下面又各有自己的主栏目。一般来说,个人站点内容较少,只要分个栏目也就够了,不需要设置板块。如果有必要设置板块的,应该注意:各板块要有相对独立性;各板块要有相互关联;各板块的内容要围绕站点主题5.4.2 目录结构与链街结构网站的目录是指建立网站时创建的目录。例如:在用Frontpage建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题,大多数站长都是未经规划,随意创建子目录。目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的维护,以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排,比如

36、:不要将所有文件都存放在根目录下。有网站制作者为了方便,将所有文件都放在根目录下。这样就很容易造成:文件管理混乱,搞不清哪些文件需要编辑和更新,哪些无用的文件可以删除,哪些是相关联的文件,影响工作效率;上传速度变慢,服务器一般都会为根目录建立一个文件索引,如果将所有文件都放在根目录下,那么即使只上传更新一个文件,服务器也需要将所有文件再检索一遍,建立新的索引文件,很明显,文件量越大,等待的时间也将越长。按栏目内容建立子目录。子目录的建立,首先按主栏目建立。友情连接内容较多,需要经常更新的可以建立独立的子目录。而一些相关性强,不需要经常更新的栏目,例如:网站简介、站长情况等可以合并放在一个统一目

37、录下。所有程序一般都存放在特定目录,例如:CGI程序放在cgi-bin目录,所有提供下载的内容也最好放在一个目录下,便于维护管理。在每个主目录下都建立独立的Images目录。一般来说,一个站点根目录下都有一个默认地Images目录。将所有图片都存放在这个目录里很是不方便,比如在栏目删除时,图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。原因很简单,就是方便维护与管理。其它需要注意的还有:目录的层次不要太深,不要超过3层;不要使用中文目录,使用中文目录可能对网址的正确显示造成困难;不要使用过长的目录,太长的目录名不便于记忆;尽量使用意义明确的目录,以便于记忆和管理

38、。网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。形象的说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。一般的,建立网站的链接结构有两种基本方式:树状链接结构(一对一),这类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。这样的链接结构浏览时,一级级进入,一级级退出,条理比较清晰,访问者明确知道自己在什么位置,不会“不知身在何处”,但是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须回到首页再进行。星

39、状链接结构(一对多),类似网络服务器的链接,每个页面相互之间都建立有链接。这样浏览比较方便,随时可以到达自己喜欢的页面。但是由于链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。因此,在实际的网站设计中,总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面,又可以清晰地知道自己的位置。所以,最好的办法是:首页和一级页面之间用星状链接结构,一级和二级页面之间用树状链接结构。关于链接结构的设计,在实际的网页制作中是非常重要一环,采用什么样的链接结构直接影响到版面的布局。5.4.3 进行形象设计网站的设计可以从以下几点出发:设计网站标志(LOGO)。LOGO是

40、指网站的标志,标志可以是中文、英文字母,也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如:网站内有代表性的人物、动物、植物,可以用它们作为设计的蓝本,加以卡通化或者艺术化;专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志,采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。设计网站色彩。网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩,要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,但应当只是作为点

41、缀和衬托,绝不能喧宾夺主。一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。设计网站字体。和标准色彩一样,标准字体是指用于标志,标题,主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵,选择更贴切的字体。需要说明的是:使用非默认字体只能用图片的形式,因为很可能浏览者的计算机里没有安装特别字体,那么辛苦设计制作便可能付之东流了。设计网站宣传语。也可以说是网站的精神、主题与中心,或者是网站的目标,用一句话或者一个词来高度概括。用

42、富有气势的话或词语来概括网站,进行对外宣传,可以收到比较好的结果。5.5 确定网站风格“风格”是抽象的,是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志,色彩,字体,标语)、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素,网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局,还是交互方式,只要你能由此让浏览者明确分辨出这是你网站独有的,这就形成了网站的“风格”。风格是有人性的,通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性:是粗犷豪放的,还是清新秀丽的;是温文儒雅的,还是执著热情的;是活泼易变的,还是墨守成

43、规的。总之,有风格的网站与普通网站的区别在于:在普通网站上你看到的只是堆砌在一起的信息,你只能用理性的感受来描述,比如信息量多少,浏览速度快慢等;在有风格的网站上你可以获得除内容之外的更感性的认识,比如站点的品位,对浏览者的态度等。在明确自己想给人以怎样的印象后,要找出网站中最有特色的东西,就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之,风格的形成不是一次定位的,你可以在实践中不断强化、调整、改进。5.6 网站的色彩1.颜色是因为光的折射而产生的。2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示。例如

44、:红色是color(255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的bgColor=#FFFFFF就是指背景色为白色。3.颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。 4.任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也

45、不会眼花。非彩色的搭配黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。彩色的搭配色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。一.色环。我们将色彩按红-黄-绿-蓝-红依次过度渐变,就可以得到一个色彩环。色环的两端是暖色和寒色,当中是中型色。(如下图)红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红暖色系 中性系 寒色系 中性系 二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。红色-是一种激奋的色彩

46、。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。绿色-介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。它和金黄,淡白搭配,可以产生优雅,舒适的气氛。橙色-也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。黄色-具有快乐,希望,智慧和轻快的个性,它的明度最高。蓝色-是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)白色-具有洁白,明快,纯真,清洁的感受。黑色-具有深沉,神秘,寂静,悲哀,压抑的感受。灰色-具有中庸,平凡,温和,谦让,中立和高雅的感觉。每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛

47、的视觉意境,而蓝绿色则显得幽宁,阴深。网页色彩搭配的原理1.色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。4.色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。网页色彩掌握的过程随着网页制作经验的积累,我们用色有这样的一个趋势:单色-五彩缤纷-标准色-单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公文档 > 其他范文


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号