1、 综合网站设计I计算机科学与技术本科生毕业论文设计题目:综合网站设计姓名:学号: 导师: 综合网站设计II摘要与关键词在 Internet 飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet 上发布信息主要是通过网站来实现的,获取信息也是要在 Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在 Internet 应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题,是网
2、页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,必然要成为设计艺术的重要组成部分,并随着网络技术的发展而发展。表面上看,它不过是关于网页版式编排的技巧与方法,而实际上,它不仅是一种技能,更是艺术与技术的高度统一。 关键词:Asp; FrontPage; Adobe Photoshop 7.0; flash 5.0; Microsoft Access 2000 综合网站设计IIIAbstract and keywordIn the Internet application status is obvious, it has
3、become the government, in business unit information construction important constituent, thus time peoples value. The homepage art design follows the seeing and hearing which the computer internet production forms to design the new task, is the homepage designer take locates the technology and the ar
4、tistic experience which the time can gain as the foundation, on own initiative carries on the artistic plan according to the design goal and the request to the homepage constitution element the creative thinking activity, inevitably must become the design art the important constituent, and develops
5、along with the network technology development. On the surface looked that, it only is about the homepage format arrangement skill and the method, but in fact, it not only is one kind of skill, is artistic and the technical high unification.keyword:Asp; FrontPage; Adobe Photoshop 7.0; flash 5.0; Micr
6、osoft Access 2000 综合网站设计目录摘要与关键词 .IABSTRACT AND KEYWORD.II第一章 前言 .1第二章 理论知识与开发工具介绍 .32.1 设计思想 .32.2 开发工具的选用及介绍 .32.3 网页结构布局说明 .42.4 网页布局的技术 .72.5 ASP 的技术特点与静态网页的区别 .8第三章 网站总体分析 .163.1 ASP 程序设计准备 .163.2 WEB SERVICE 简介 .163.3 网站系统分析 .183.4 主页设计 .183.5 数据库设计 .183.6 图形界面设计 .19第四章 详细设计与实现 .204.1 网页设计的内容
7、.204.2 网页艺术设计的原则 .204.2.1 主题鲜明 .214.2.2 形式与内容统一 .214.2.3 强调整体 .214.3 科技新闻的设计 .224.4 论坛设计 .224.5 代码实现 .24第五章 系统的 运行环境与测试分析 .295.1 运行环境 .295.2 测试分析 .29第六章 结束语 .31致谢 .32参考文献 .33附录 部分程序源代码 .34综合网站设计1第一章 前言ASP 技术 ASP(Active Server Pages 动态网页)是微软公司推出的一种用以取代CGI(Common Gateway Interface 通用网关接口)的技术。目前,Intern
8、et 上的许多基于Windows 平台的 Web 站点已开始应用 ASP 来替换 CGI。简单地讲,ASP 是一个位于服务器端的脚本运行环境,通过这种环境,用户可以创建和运行动态的交互式 Web 服务器应用程序,如交互式动态网页,包括使用 HTML 表单收集和处理信息,上传与下载等等。通常情况下,用户通过浏览器看到的网页大多是静态的,目前 Internet 上的许多站点,仍然提供“静态“(static)的主页内容。所谓“静态“,指的就是站点的主页内容是“固定不变“的。当浏览器通过 Internet 的 HTTP(Hypertext Transport Protocol)协议,向站点服务器(We
9、b Server)要求提供主页的内容时,站点服务器收到要求后,就传送原已设计好的静态的HTML 的文件数据给浏览器。一个“静态“的站点,若要更新主页的内容,必须手动的来更新其 HTML 的文件数据。而随着 Web 应用的发展,用户希望能够看到根据要求而动态生成的主页,例如响应用户查询数据库的要求、生成报表等。当在浏览器上填好表单(form)的输入数据,以提供 HTTP 要求时,可以在站点服务器中执行的应用程序,而不只是一个 HTML 文件。站点服务器收到要求执行的应用程序,分析表单(form)的输入数据,将执行的结果以HTML 的格式传送给浏览器。根据用户请求生成动态主页的传统方法有 CGI、
10、ISAPI 等。CGI是根据浏览器端的 http 请求激活响应进程,每一个请求对应一个进程。当同时有很多请求时,程序挤占系统资源,造成效率低下;ISAPI 针对这一缺点进行改进,利用 dl l(动态链接库)技术,以线程代替进程,提高了性能和速度,但要考虑线程的同步问题,而且开发步骤烦琐。这两种技术和另一普遍使用的开发动态网页的技术 Java 都还存在着另外一个问题,那就是开发困难,程序的开发和 HTML 写作是两个完全不同的过程,需要专门的程序员开发。而较简单的开发技术如 java script 和 IDC(Internet Database Connector)等功能有限,不敷使用。ASP
11、使用的 ActiveX 技术基于开放设计环境,用户可以自己定义和制作组件加入其中,使自己的动态网页几乎具有无限的扩充能力,这是传统的 CGI 等程序所远远不及的地方。ASP 与常见的在 Client 端实现动态主页的技术如 Java applet、ActiveX Control、VBScript、java script 等不同,ASP 中的命令和 Script 语句都是由服务器来解释执行的,执行结果产生动态生成的 Web 页面并送到浏览器;而 Client 端技术的 Script综合网站设计2命令则是由浏览器来解释执行。由于 ASP 是在服务器端解释执行,开发者可以不必考虑浏览器是否支持 AS
12、P;同时由于它在服务器端执行,开发者也不必担心别人下载程序从而窃取编程逻辑。ASP 通过后缀名为.asp 的 ASP 文件来实现,一个.asp 文件相当于一个可执行文件,因此必须放在 Web 服务器上有可执行权限的目录下。当用户从浏览器输入了.asp 文件的地址后,浏览器就将这个 URL 请求发给 Web Server,如果 Web Server 上装了 ASP,就调用 ASP。ASP 读出相应.asp 文件,解释并执行命令,动态生成一个 HTML 页面回传 Web Server,然后 Web Server 再把结果发送给浏览器。ASP 文件的制作和 HTML 类似,且和HTML 开发集成,可
13、以在同一个过程完成,利用 ASP 将可以执行的脚本嵌入到 HTML 文件中(将 HTML 文件的后缀名改为.asp),这使得 HTML 文件的编写与脚本的开发融合在一起。通过 ASP 内置的对象、服务器组件(Server Component)可以完成非常复杂的任务,而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务。综合网站设计3第二章 理论知识与开发工具介绍2.1 设计思想通过网站,全面宣传,展示公司风格、优点与特色,发布公司的业务和动向,及一些web、asp、flash、hank 等的最新消息。在 Internet 上实现完成部分业务,提高办事效率。2.2 开发工具的选用及介绍
14、我选择了 ASP 结合 Front page 架构综合网站 ASP 的优势:Active Server Pages:“动态服务器网页” ,一般简称为“ASP” ,ASP 之所以能受到大家的重视与使用的原因,主要在于所产生的执行结果都是标准的 HTML 格式,而且这些程序是在网络服务端中执行,使用一般的浏览器(如 IE 或 Netscape)都可以正确地获得 ASP的“执行”结果,并且将这 ASP 执行的结果直接在浏览器中“浏览” ,不像 VBScript 或JavaScript 是在客户端(Client)的浏览器上执行,若使用 VBScript 来设计程序,客户端(Client)在浏览器中可以
15、显示程序执行的结果,可是,客户端(Client)若使用Netscape 浏览器就无法显示 VBScript 的执行结果。2.2.1 ASP 的特点(1)任何开发工具皆可发展 ASP(2)只要使用一般的文书编辑程序,如 Windows 记事本,就可以编辑。当然,其他网页发展工具,例如,Front Page Express、Front Page 等也都可以。(3)语言相容性高(4)易于操控数据库(5)ASP 可以轻易地通过DBC(Open Database Connectivity)驱动程序连接各种不同的数据库,例如:Access、FoxPro、dBase、Oracle 等等,另外,ASP 亦可将
16、“文本文件”或是” “ Excel”文件当成数据库用。2.2.2 ASP 的六大内部对象对象名称功能描述:综合网站设计4Request Response Server Session Application Object Context 从客户端取得信息将信息送给客户端提供一些 Web 服务器工具储存在一个 Session 内的用户信息,该信息仅可被该用户访问在一个 ASP-Application 中让不同的客户端共享信息可以用来配合Microsoft Transaction 服务器进行分布式事务处理本系统是基于 Web 的,所以系统的界面设计也就是系统网页的设计。Photoshop 产品对网
17、页设计的强大处理功能,用户通过在页面上仅用拖曳控件的方式就可轻松创建网页。但若要想制作出方便实用的精美网页,必须在开始之前做出详细设计,这样就会大大提高网页质量,进一步改善应用程序的可用性。设计时可以将设计的页面画在纸上,然后考虑哪些控件是所需要的,以及不同元素的重要性、控件之间的联系等。页面的设计和规划不仅影响到它本身外观的艺术性,而且对应用程序的可用性也有很重要的作用。组织页面的工作包括控件的位置、大小、一致性等。这一点我们的设计师做得比较有突出的图片来表现!图片的处理用到的软件是 Adobe Photoshop adobe, adobe Image Ready Photoshop 可以说
18、是无所不能的软件,有很多功能。加上 Image Ready 是制作动画图片的好工具,在这两个软件的组合下,我在网站所做的图片和动画都是非常好的,但也算不上是完美,因前在做此网站之前我还没用得很熟。担在这次设计中,让我更了解 Adobe Photoshop adobe, Adobe Image Ready 这两个软件。不过也多得老师和同学的指导和帮助。2.3 网页结构布局说明最开始,网页呈现在你面前的时候,它就好像一张白纸,它需要你任意挥洒你的设计才思。在开始的时候,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础
19、上加上自己的东西。你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局的基本概念。 2.3.1 页面尺寸由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。一般分辨率在 800x600 的情况下,页面的显示尺寸为:780x428 个象素;分辨率在 640x480 的情况下,页面的显示尺寸为:620X311 个象素;分辨率在 1024X768 的情况下,页面的显示尺综合网站设计5寸为:1007x600。从以上数据可以看出,分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。
20、一般目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。2.3.2 整体造型什么是造型,造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形
21、,圆形,三角形,菱形等。对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多 ICP 和政府网页都是以矩形为整体造型;圆形带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些。2.3.3 页头页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里
22、。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。2.3.4 文本文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小.页脚:页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。综合网站设计62.3.5 图片图片和文本是网页的两大构成元素,缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这
23、里。2.3.6 多媒体除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。2.3.7 网页布局的方法网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍:1.纸上布局法许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时,要先在纸上画出你页面的布局草图来。准备若干张白纸和一只铅笔,你要设计一个时尚站点。(1)尺寸选择目前一般 800X600 的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者,
24、你页面的尺寸以 800X600 的分辨率为准。(2)造型的选择先在白纸上画出象征浏览器窗口的矩形,这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型,我们选择圆形,因为它代表者柔和,和时尚流行比较相称,然后在矩形框架里随意画出来,你可以试者在增加一些圆形或者其它形状。这样画下来,你会发现很乱。其实,如果你一开始就想设计出一个完美的布局来是比较困难的,而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点,你不要担心你设计的布局是否能够实现。事实上,只要你能想到的布局都能靠现今的 HTML 技术实现。考虑到左边向左凹的弧线,为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。(3)增加页头.jpg 是我们从.jpg 和 2.jpg 得到的布局造型,那么我们该增加页头了。一般页头都是位于页面顶部,所以我们为 .jpg 增加了一个页头,为了和左边的弧线和右边的矩形取得平衡,我们增加了一个矩形页头并让页头相交与左边的弧线。(4)增加文本