毕业设计（论文）网页设计与制作

1、电 子 科 技 大 学毕 业 设 计（论 文）论文题目： 网页设计与制作教学中心： 电子科技大学职业技术学院指导老师： 万晓枫 职 称： 指导老师 学生姓名： 杨雅兰 学 号: 0222020215专 业： 计算机网络电子科技大学网络教育学院制2005年 06月 09日电 子 科 技 大 学毕业设计（论文）任务书题目： 网页设计与制作任务与要求：时间： 2005 年5月8日 至 2005 年 6 月10 日 共 5 周教学中心： 电子科技大学职业技术学院学生姓名： 杨雅兰 学 号： 0222020215专业： 计算机网络指导单位或教研室： 电子科技大学职业技术学院指导教师： 万晓枫电子科技大学

2、网络教育学院制2005年 06月09日毕业设计(论文)进度计划表日 期工 作 内 容执 行 情 况指导教师签 字4月15日至4月20日准备网页的内容良好4月21日至4月30日搜集制作网页的素材良好5月1日至5月7日进行页面的布局及结构设计良好5月8日至5月20日创建站点进行网页设计良好5月21日至5月25日测试网站良好5月26日至6月1日上传网站良好6月2日至6月9日写毕业论文良好教师对进度计划实施情况总评 签名 年 月 日 本表作评定学生平时成绩的依据之一。动态网站的设计及后台管理学生姓名：杨雅兰 班级：02220202指导老师：万晓枫 指导单位：电子科技大学计算机学院摘要进入21世纪90年

3、代以后，以因特网为代表的计算机网络得到了飞速的发展由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发长成为新的传播媒体，所以全球几乎各个企业、机构纷纷建立自己的网站。基于web服务器与课件资源数据库服务器之间的连接是开发网站的关键技术，而后台管理是维护网站的核心所在。本文以一个简单的动态网站极其后台管理系统为基础，利用asp.net和asp技术开发，实现网站的动态管理，使得对信息的管理更加及时、高效。本文所做的具体工作如下：(1)介绍了动态网页设计的理念和基本思路及asp系统的一般原理。(2)阐述了整个系统的结构和工作原理，分析并解决了实现中的若干技术问题。

4、(3)基本实现了系统的各个功能模块，建立了实验网站，进行了测试分析。关键字：asp 动态 管理 web 数据库abstractenter the 90's in 21 centuries hereafter, the calculator network that regards internet as the representative got the development fly soon because internet has information capacity of dissemination biggest, the diverse and quick conve

5、nience, world of appearance overlay, free and alternant characteristics, have already deliver to grow up for the new media, so almost each business enterprise, organization in world builds up own website in succession.is a key technique that develops the website according to the conjunction between

6、server of web and a resources of lesson database server, and then the set management is support the website of core place.this text take a simple dynamic state website very backstage management system as the foundation, making use of the asp.net and the asp technique developments, carrying out the d

7、ynamic state management of the website, making the management to the information been more and in time and efficiently.the main works of this paper are :(1)introduced the principle of the dynamic state webpage designing and the general theory of the basic way of thinking and system of asps.(2)elabor

8、ated the whole structure of system and the work principle, analyze and resolved some technique problem in the realization.(3)basic carried out the each function mold piece of the system, build up the experiment website, carried on the test analysis.key word: dynamic management web database asp目 录第一章

9、：概述-81.1 计算机网络概论-81.2 internet基础知识-101.3 网页基础知识-11第二章：常用网页制作工具-1121 html-112.2 网页编写软件-122.3 图形/图象处理工具-152.4 网页制作脚本语言-162.5 动态网页制作工具-16第三章：设计网站的基本思路 -183.1定位网站的主题和名称-183.2定位网站的ci形象-183.3 确定网站的栏目-193.4确定网站的目录结构-193.5确定网站的链接结构-20第四章：个人网站的制作过程-204.1网站的设计构思及特点-204.2创建站点进行网页设计-224.3网页的内容结构-244.5后台管理系统-294

10、.6网站的测试和上传-31第五章：总结-31参考文献： -32第一章 概述一、 计算机网络概论1.1 计算机网络的定义、演变和发展 1.1.1 计算机网络的定义计算机网络：就是利用通信设备和线路将地理位置不同的、功能独立的多个计算机系统互连起来，以功能完善的网络软件（即网络通信协议、信息交换方式、网络操作系统等）实现网络中资源共享和信息传递的系统。 图1.1 一个典型的计算机网络示例 计算机网络：资源子网通信子网资源子网：主机host终端erminal通信子网：通信链路组成网络节点：分组交换设备pse、分组装卸设备pad、集中器c、网络控制中心ncc、网间连接器g。统称为接口住处处理

11、机imp。1.1.2 计算机网络的演变和发展网络发展三阶段：面向终端的网络；计算机计算机网络；开放式标准化网络。1.面向终端的计算机网络以单个计算机为中心的远程联机系统，构成面向终端的计算机网络。用一台中央主机连接大量的地理上处于分散位置的终端。如50年代初美国的sage系统。为减轻中心计算机的负载,在通信线路和计算机之间设置了一个前端处理机fep或通信控制器ccu专门负责与终端之间的通信控制,使数据处理和通信控制分工。在终端机较集中的地区，采用了集中管理器(集中器或多路复用器)用低速线路把附近群集的终端连起来,通过modem及高速线路与远程中心计算机的前端机相连。这样的远程联机系统既提高了线

12、路的利用率，又节约了远程线路的投资。 图1.2 单计算机为中心的远程联机系统 2.计算机计算机网络60年代中期，出现了多台计算机互连的系统，开创了“计算机计算机”通信时代，并存多处理中心，实现资源共享。美国的arpa网，ibm的sna网，dec的dna网都是成功的典例。这个时期的网络产品是相对独立的，未有统一标准。3.开放式标准化网络由于相对独立的网络产品难以实现互连，国际标准化组织iso(internation standards organization)于1984年颁布了一个称为“开放系统互连基本参考模型”的国际标准iso 7498，简称osi/rm。即著名的osi七层模型。从此，网络产

13、品有了统一标准，促进了企业的竞争，大大加速了计算机网络的发展。二、internet基础知识 21世纪是一个以网络为核心的信息时代。在internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。internet源于美国军用计算机网，应用客户机/服务器工作方式，用tcp/ip协议簇控制和管理。internet上发布信息主要是通过网站来实现的，获取信息也是要在internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要

14、组成部分，从而倍受人们的重视。1、internet所提供的服务internet主要有以下的这些服务：电子邮件服务（e-mail）、远程登录服务（telnet）、文件传输服务（ftp）、gopher服务、电子公告板服务（bbs）、网络会议服务（net meeting）、www（world wide web）、游戏聊天服务。2、协议协议是关于信息格式及信息交换规则的描述。在internet上，它统一了人们在网上的交流方式。任何一种协议都由语法、语义和定时三个部分组成。语法定义了怎样进行通信，语义定义了什么是通信，定时关系到何时通信。3、ip地址internet上的计算机由一个独有的ip地址来唯一标

15、识。ip地址由两部分组成：网络号和主机号。ip地址分为a、b、c、d、e五类。4、域名、域名系统域名是internet上一个服务器或一个网络系统的名字，是没有重复的域名。而域名系统是为了便于解释机器的ip地址而设立的，能方便地记忆和理解ip地址。它负责在域名和ip地址之间进行相互转换。5、超文本和超链接超文本（hypertext）是把一些信息根据需要连接起来的信息管理技术。超链接（hyperlink）内嵌在文本或图象中的，文本超链接在浏览器中通常是带下划线，而图像超链接是看不到的。6、浏览器因为在internet上所以的信息内容都是用“超文本链接”的方式类组织的，使用这种格式组织的文档必须在一

16、种专门的软件支持界面下才能正常显示。这样的软件界面就是“网络浏览器”。7、服务器网络有共享外部设备的功能。这种共享主要是通过设计一个专门的节点，该节点为网上用户所共知，具有固定的地址，并为网上用户提供服务，这种提供服务的节点称为服务器。服务器运行网络操作系统，为网络提供通信控制、管理和共享资源。每个独立的计算机网络中至少应该有一台服务器。在低成本局域网中，也可以采用高性能的pc机作为网络服务器。服务器的基本任务是处理各个网络工作站提交的网络请求。用户请求可以是访问服务器硬盘上的文件系统、申请共享打印服务，也可以是与其他设备进行通信三、网页的基础知识 网页也叫web页，就是在浏览网站时显示器屏幕

17、上的内容。网页实际是一个文件，它存放在世界某个角落的某一台计算机中。网页经过网址（url）来进行识别和存取，网页文件被传送到计算机后，通过浏览器解释网页内容，再展示在屏幕上。 文字和图片是构成一个网页的两个最基本元素。文字就是网页的内容，图片是网页的装饰。网页的元素还包括动画、音乐和程序等。通常所看到的网页文件，都是以.htlm为后缀的文件，第二章 常用网页制作工具一、html在80年代早期，ibm提出在各文档之间共享一些相似的属性，诸如字体大小和版面。ibm设计了一种文档系统，通过文档中辅加一种标签，从而可以标识文档中的每种元素。 这样文档的显示和打印可能更少或更多地依赖特殊的硬件，不过这样

18、的系统需要不同的计算机系统提供专门的软件来显示和打印文档。ibm把自己这种标识语言称作通用标记语言(generaizedmarkuplanguage)，即gml。但ibm没在gml上做太多工作，直到1986年国际标准化组织(iso)认为ibm提出的概念很好，并发布了为生成标准化文档而定义的标记语言标准(iso8879)，称为新的语言sgml，即标准通用标记语言。 sgml定义了许多不同类型的文档，但我们感兴趣的类型是超文本文档.html即超文本标记语言(hypertextmarkuplanguage),是定义了超文本文档的sgml的子集。人们习惯使用术语html表示超文本文档本身(属于一种特殊

19、类型的sgml文档)和用以产生超文本文档的标记语言。 超链接是嵌入在文本中的特殊指令，它可以使浏览器装入其它的界面。每个html文档称为一个web页面，页面是浏览器中看到的内容。internet上的web站点一般有多个页面组成，可以通过超链接在页面间切换。所有的页面均放在作为服务器的计算机上，它向任何发出请求的计算机提供指定页面。html文档的本质是一种程序，建立一个html文档，实际进行的工作就是编写html命令代码，或者说是“编程”，“编码”。二、网页编写软件网页制作工具有dreamweaver、fireworks、flash、frontpage、adobe pagemill、netobj

20、ectsfusion、homesit等。dreamweaver、fireworks、flash、三款软件合在一起，被称为网页制作“三剑客”。1. dreamweaverdreamweaver最精彩之处便是强大的多媒体处理功能，在设计dhtml(dynamic html)和css（cascading style sheets）方面表现得极为出色，它利用javascript和dhtml语言代码轻松地实现网页元素的动作和交互操作，可谓独出心裁。在这方面超过了frontpage 98、hotdog、homesite等著名网页编写软件。和macromedia公司其他软件的完美协作也是dreamweave

21、r的一大特色。dreamweaver是一种wysiwyg html编辑器，它可以用于基本页面元素的插入和生成工作。dreamweaver还可以对内部的html编辑器和任何第三方的html编辑器进行方便、实时的访问。2. flashflash是macromedia公司出品的，用在互联网上动态的、可互动的shockwave。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。flash可以用其生成动画，还可在网页中加入声音。这样你就能生成多媒体的图形和界面，而使文件的体积却很小。 flash虽然不可以象一门语言一样进行编程，但用其内置的语句并结合javascripe，也可作出互动性很强

22、的主页来。3. frontpagefrontpage2000是微软继frontpage98后推出的一个全新的“所见即所得”的网页编辑器。新版本的frontpage把网页管理器和网页编辑器合二为一，并使得利用frontpage2000制作的网页支持最新的网页标准，比如xml，css2等等。虽然功能得到提升，但frontpage2000的易用性是有目共睹的，虽然现在许多网友选择dreamweaver制作网页，但事实上frontpage2000还是初学者和专业人士的首选的工具。三、图形/图像处理工具1. fireworksfireworks是macromedia公司发布的一款专为网络图形设计的图形编

23、辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用fireworks都不仅可以轻松地制作出十分动感的gif动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，fireworks能够自由地导入各种图像，能够完成自动切图，生成鼠标动态感应的jvascript等功能，而且fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器。2. photoshopphotoshop是adobe公司推出的一款功能十分强大、使用范围广泛的平面图像处理软件，是目前pc机上公认的最好的通用平面美术设计软件，它的功能完善，性能稳定，使用方便，所以在几乎所有的广告、出版、软件

24、公司，photoshop都是首选的平面工具。四、网页制作脚本语言cgicgi(common gateway interface)是最早能访问web数据库的技术,其技术规范一度成了通用的标准,但最大的缺点是:当站点访问人数激增时,速度慢与效率低。为了克服cgi的不足,微软和网景分别推出了改进的cgiisapi和nsapi技术,统称为web服务器(application program interface)。api技术在速度上提升很大,一度曾被多数大型网站采用,但不足的是:程序编写复杂、数据库功能弱,且只能用于特定的web服务器。新一代的asp(active server pages)技术是微软将

25、高效能的isapi与简洁的javascript和vbscript相结合的产物,其特点是运行速度快、数据库操作功能强大等,不足是只能运行于个别平台。五、动态网页制作工具1aspasp（microsoft active server pages ）其实是一套微软开发的服务器端脚本环境，采用脚本语言vbscript作为自己的开发语言。asp之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的html格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如ie 或netscape）都可以正确地获得asp的“执行”结果，并且将这asp执行的结果直接在浏览器中“浏览”，不像vbscr

26、ipt或 javascript是在客户端（client）的浏览器上执行，若使用vbscript来设计程序，客户端（lient）在浏览器中可以显示程序执行的结果，可是，客户端（lient）若使用netscape浏览器就无法显示vbscript的执行结果。 asp 内含于 iis 3.0 和 4.0 之中 , 通过 asp 我们可以结合 html 网页、 asp 指令和 activex 元件建立动态、交互且高效的 web 服务器应用程序。有了 asp 你就不必担心客户的浏览器是否能运行你所编写的代码，因为所有的程序都将在服务器端执行，包括所有嵌在普通 html 中的脚本程序。当程序执行完毕后，服务

27、器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度。asp的一些特点：1，  使用vbscript,javascript等简单脚本语言，并结合html快速建立网站；2，  无须编译，可在服务器端直接运行；3，  使用普通的文本编辑器；4，  浏览器无关性；5，  asp可与任何activex scripting语言相容；6，  由于asp的源程序在服务器端执行，因而提高了程序的安全性；7，  可以用服务器端的脚本来产生客户端的脚本；8，  物件导向-不理解9，  ac

28、tivex server components具有无限可扩充性。asp的运行环境：1，  iis 3.0/4.02，  microsoft peer web service version on windows nt workstation3，  microsoft personal web server at windows 95/98运行原理：脚本程序将所有命令发送给脚本引擎（脚本翻译器），然后有脚本引擎将命令翻译成服务器可以执行的命令。asp其实是以.asp为后缀名的文本。脚本语言的介绍 <% %>是asp的定界符，所有的asp命令必须包含在之内

29、； <script></script>之间是脚本语言； asp默认的语言是vbscript.2javascriptjavascript 是一种新的描述语言，此一语言可以被箝入 html 的文件之中。 透过 javascript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路 来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server) 处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。你也可 以想像成有一个可执行程式在你的客端上执行一样！目前已有一些写好的程式在 internet 上你可以连

30、过去看看，以下有一些计算器的例子，在 nescape 上。 javascript 和 java 很类似，但到底并不一样！ java 是一种比 javascript 更复杂 许多的程式语言，而 javascript 则是相当容易了解的语言。javascript 创作者 可以不那麽注重程式技巧，所以许多 java 的特性在 java script 中并不支援。3phpphp(personal homepage)作为一种跨平台(可在unix、linux或windows上运行)的网页制作技术,其最大特色是对数据库层操作的功能强大、且操作简单。php 的第四代 zend 核心引擎已经进入测试阶段。整个剧

31、本程式的核心大幅更动，让程式的执行速度，满足更快的要求。在最佳化之后的效率，已较传统 cgi 或者 asp 等程式有更好的表现。而且还有更强的新功能、更丰富的函式馆。第三章 设计网站的基本思路一、定位网站的主题和名称 网站的主题也就是网站的题材，网站设计开始首先遇到的问题。网站题材千奇百怪,琳琅满目，只要想的到，就可以把它制作出来。题材可以有成千上万种。这么多题材，如何选择呢？遵循的原则如下：1、主题要小而精：定位要小，内容要精。2、题材最好是你自己擅长或者喜爱的内容。3、题材不要太滥或者目标太高。如果题材已经确定以后，就可以围绕题材给网站起一个名字。网站名称，也是网站设计的一部分，而且是很关

32、键的一个要素。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。我的建议是：1、名称要正。其实就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。2、名称要易记。最好用中文名称，不要使用英文或者中英文混合型名称。另外，网站名称的字数应该控制在六个字(最好四个字)以内，四个字的也可以用成语。字数少还有个好处，适合于其他站点的链接排版。3、名称要有特色。名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。例如：音乐前卫，网页陶吧，e书时空等。在体现出网站主题的同时，能点出特色之处。 二、定位网站的ci形

33、象 所谓ci(corporate identity)，意思是通过视觉来统一企业的形象。一个杰出的网站，和实体公司一样，需要整体的形象包装和设计。准确的，有创意的ci设计，对网站的宣传推广有事半功倍的效果。具体的做法是： 1、设计网站的标志(logo) 就如同商标一样，标志是你站点特色和内涵的集中体现，看见标志就让大家联想起你的站点。标志的设计创意来自你网站的名称和内容： (1)网站有代表性的人物、动物、花草等，可以用它们作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸等等。 (2)网站有专业性的，可以以本专业有代表的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标

34、志等等。 (3)最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体，字母的变形，字母的组合可以很容易制作好自己的标志。 2、设计网站的标准色彩 网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。"标准色彩"是指能体现网站形象和延伸内涵的色彩。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系

35、列色，要注意色彩的合理搭配。 3、设计网站的标准字体 和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的"与众不同"和特有风格，我们可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲4、设计网站的宣传标语 也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：鹊巢的"味道好极了"；麦斯威尔的"好东西和好朋友一起分享"；intel的"给你一颗奔腾的心"等等。 三、确定网站的

36、栏目 建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。如果网站结构不清晰，目录庞杂，内容东一块西一块。结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。网站的题材确定后，并且收集和组织了许多相关的资料内容，但如何组织内容才能吸引网友们来浏览网站呢？栏目的实质是一个网站的大纲索引，索引应该将网 站的主体明确显示出来。一般的网站栏目安排要注意以下几方面： 1、要紧扣主题 将你的主题按一定的方法分类并将它们作为网站的主栏目。主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。 2、设立最近更新或网站指南栏目 设立"最近更新&q

37、uot;的栏目，是为了照顾常来的访客，让你的主页更有人性化。如果主页内容庞大，层次较多，而又没有站内的搜索引擎，设置"本站指南"栏目，可以帮助初访者快速找到他们想要的内容。 3、设立可以双向交流的栏目 比如论坛，留言本，邮件列表等，可以让浏览者留下他们的信息。 4、设立下载或常见问题回答栏目 网络的特点是信息共享。如在你主页上设置一个资料下载栏目，便于访问者下载所需资料。另外，如果站点经常收到网友关于某方面的问题来信，最好设立一个常见问题回答的栏目，既方便了网友，也可以节约自己更多时间。 四、确定网站的目录结构 网站的目录是指你建立网站时创建的目录。例如：在用frontpa

38、ge2000建立网站时都默认建立了根目录和images(存放图片)子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议： 1、不要将所有文件都存放在根目录下，会造成文件管理混乱 你常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率。另外，上传速度慢。服务器一般都会为根目录建立一个文件索引。当您切随意可以用手写体等等。 将所有文件都放在根目录下，那么即使你只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将

39、越长。所以，尽可能减少根目录的文件存放数。 2、按栏目内容建立子目录 子目录的建立，首先按主菜单栏目建立。例如:企业站点可以按公司简介，产品介绍，价格，在线定单，反馈联系等建立相应目录。其他的次要栏目，类似what's new，友情连接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：关于本站，关于站长，站点经历等可以合并放在一个统一目录下。所有程序一般都存放在特定目录。例如：cgi程序放在cgi-bin目录。所有需要下载的内容也最好放在一个目录下。 3、在每个主栏目目录下都建立独立的images目录 为每个主栏目建立一个独立的images目录是

40、最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。 4、目录的层次不要太深 目录的层次建议不要超过3层，维护管理方便。 5、不要使用中文目录 6、不要使用过长的目录 五、确定网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。建立网站的链接结构有两种基本方式： 1、树状链接结构 类似dos的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会"迷"路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。 2、星状链接结构 类似网络服务器的链接，每个页面相互之间都建