网页设计毕业论文

1、 以知名球星里奥梅西网站为例 在信息技术飞速发展的今天人们获取信息的方式更多是来源于互联网 吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页 页设计尤为重要。 互联网成为人们快速获取 济生活等各个方面发挥着重要的作用 由于人们使用网络的频繁而变得非常的重要 讲究的是排版布局其功能主要就是提供一种形式给每个上网者 解网站提供的信息。 随着计算机技术的快速发展和计算机网络的普及 可及的梦想。 不仅商业公司、各企事业单位纷纷建立网站，利用网络来宣传自 己，越来越多的个人也希望在广阔的网络世界里拥有自己的一片天地。同时 校也将网页制作这一门学科当作基础性课程放置在教学计中由此可见 作知识

2、越越来越重要，越来越普及。 本网站设计的宗旨在于通过对搜集到的著名球星里奥梅西的各种信息与资 使广大球迷能够更加全面完整地了解梅西 不定期实时更新数据信息，确保广大球迷都能够接受到最新资讯。 关键词:；ASP 1 摘要(1) 第一章. 绪论 (4) 1.1 网页制作的背景和意义 (4) 1.2 相关术语的阐述 (5) 第二章. 网页开发环境及数据库概述 (6) 2.1 网页环境的开发(6) 2.2 ASP和ADO简介(6) 2.2.1 ASP产生的历史环境(6) 2.2.2 ADO对象(9) 2.3 网页图像设计工具photoshop (10) 2.4 网页页面设计工具Dreamweave(1

3、1) 第三章. 网页需求分析 (12) 3.1 可行性分析(12) 3.1.1.网页的界面设计(12) 3.2 网站需求分析(12) 3.2.1.网站主题确立与建站目的(13) 3.2.2.网站实现功能(13) 第四章. 网站的总体规划(13) 4.1 制作网页的一般步骤(13) 4.2 网页包括的元素(14) 4.3 网页层次结构(16) 4.4目录的层次结构 (16) 2 4.5网页设计的相关步骤(17) 4.6网页制作的效果展示(19) 第五章需要解决的几个关键问题(27) 5.1 数据库技术(27) 5.2 数据库连接技术(27) 5.3 数据库写入技术(28) 5.4 数据库读取技术

4、(29) 5.5 记录集合的录入(30) 第六章网页测试(30) 6.1 测试网站(31) 6.2 测试发布及网站维护(31) 结论(33) 致谢(34) 参 考 献(35) 3 第一章 1.1 网页制作的背景和意义 我们读书就是为了获得知识，现在我们学习AS 是要能做一个精美的网页在此次毕业设计中我们要能更加的了解 强大的功能和更好的使用它 的是把我们所学到的东西用在具体的实践之中所以 们更好的掌握和使用AS 了解第三点也是最要的一点是 计之中使我们的在书上学到的东西不仅仅停留在表面上 要做的网页上面。以达到老师要求的效果和学以致用。 种规模的网络连接成一个整体。作为t 的信息检索手段，简称

5、WWW) 前t上已有上百万个b 域，其用户群十分庞大，因此，建设一个好 分重要近年来随着网络用户要求的不断提高及计算机科学的迅速发展 是数据库技术在t中的广泛应用b 富，越来越人性化。 我们发现这样一个事实 部分内容感性趣，而且这种兴趣会持续一段时间。这点启发了我们 用户的喜好为不同的用户显示其个性化的页面，即着重显示该用户感兴趣的内 容，将为用户节约大量的检索时间而且这样的网页显然是更具有吸引力的 些站点已经在这方面作出了一定的尝试通常采用的方法是 提供一系列的选项使用户能够对站点进行一些自主的设置 4 呈现一定程度的个性化，但是对用户来讲还是比较烦琐 站点前让其对站点进行设置其结果未免有些

6、粗糙 户作出任何额外工作的情况下实现了为用户量身订做的个性化页面 日志以及后台管理等ASP页面及整个实验网站的组织建立和测试工作。 我通过中国书画网站展示出中华文化的博大精深不同的人 示方式或手法各有不同，千变万化在网站策划中 展示出来，是我设计的重要内容。 1.2 相关术语的阐述 WWW“的缩写HTML“”中文翻译为“超文本标记语言”。“超文本”就是指页面内可以包 含图片链接甚至音乐程序等非文字的元素URLs是 的缩写统称为统一资源定位器可以把它想象成文件名的网络扩展我们不但 可以通过各种不同的方法指出在网络的上哪一台机器的目录下的文件这个文件 可以通过各种不同的方法得到。URL中还指定了访

7、问这一个文件的协议。在 实际应用中，URL经常称为“网址”或URL地址。 P协议（l传输控制协议 行信息传输的语言只有两台计算机具有相同的协议方能进行信息传输 议有X协议、P协议等。 现广泛应用于局域网中，大多数局域网游戏都使协议。TCP/IP 协议可以说它是你接入因特网的必备条件，因为它是因特网上的通用协议。 FTP协议 中一般都有大量的共享软件和免费资源 在两台机器中进行文件传送那么双方就必须要共同遵守一定的规则FTP 5 用来在客户机和服务器之间进行文件传输以实现文件共享的协议FTP 协议，必须要有相应的专用软件来执行它，一般称为FTP软件。通过FTP 可连接到FTP服务器上，执行上载和

8、下载文件的任务。 常用FT软件LeapFTP、CuteFTP、WS_FTP、FTP 原理基本相同，只是用户界面和功能略有差异。 第二章网页开发环境及数据库概述 2.1 网页运行环境的开发 本系统必须被运行在下。 使运 计算机便成为大容量、功能强大的 服务器，它可以将信息发布给办公大楼 或整个世界的用户。对于在基于 Windows 的计算机上联网， 是很理想的，因为它可以在现存硬件上设置功能强大的 服务器 集成在 操作系统中，并 利用了其安全特征和性能优势。 2.2 ASP和ADO简介 2.2.1 ASP产生的历史环境 从本节开始，将进入本书的重点内容使用ASP（ 术设计最流行的远程教育平台。在

9、目前飞速发展 来，就一如既往的保持静态 步伐。所谓静态指的是网站的页面内容固定不变，当用户浏览器通过互联网的 HTTP协议向b服务器请求提供页面内容时 的静HTM代码，最多加上流行GIF89 要更新网页的内容，就必须手动的来更新起所以HTM 命弱点就是不容易维护，为了不断更新网页的内容，就必须不断的重复 HTML 文档随着网站内容和信息量的日益扩增使得工作量大得出人想象ASP 6 解决这个尴尬局面出现了。因此ASP迅速的得到了无数网络开发者的垂青。 什么是ASP ASP的全称是 服务器页面技术ASP是目前最流行的开发动态网站的程序开发之一 是将脚本超文本和强大的数据访问功能结合在一起 件来扩张

10、功能，能够很方便的创建分布式和基于b的商业话应用程序。 如果要更简单的描，可以AS就是运行 网页ASP程序文件也是一个标准的网页，一般HTML标记和ASP 杂在一起组成ASP网页程序必须想竟b服务器的ASP 生HEML代码后才传送给用户的浏览器执行显示。 的特点为： 1、任何开发工具皆可发展 只要使用一般的文书编辑程序，Window 然，其他网页发展工具，例如，e 不过还是建议你用记事本来写既省钱又方便 编辑来写，可能会发生一些意想不到的离奇状态。 通吃各家浏览由AS程序是在网络服务器端中执行，执行结果所产生的 HTML文件适用于不同的浏览器。 2、语言相容性高 ASP与所有的语言都相容除了可

11、结合HTM X服务器组件来设计外，并可经由“ 的方式，使用其他厂商（）所提供的语言。 3、隐密安全性高 如果我们在浏览器中直接查看网页的原始代码就只能看到文 件，原始的程序代码是看不到的这是应届程序先于网站服（ 端执行后将结果转换成标准文件再传送到客户（ 的浏览器上因此我们所辛苦撰写的程序并不会轻易地被看见进而被盗 用。 4、易于操控数据库 7 可以轻易地通过DBC(Open 驱动程序 连接各种不同的数据库，例如：、 亦可将“文本文件”或是” 文件当成数据库用。 5、面向对象学习容易 具备有面向对象（ 提供了五种方便能力强大的内建对象：、 以及“ 所撰写出来的程序可以在多个网页之间暂时保存必要

12、的信息。 6、对象名功能描述 从客户端取得 信息将信息送给客户端提供一些b服务器工具储存在一个n 息，该信息仅可被 ASP模型对象 ASP提供了六个功能强大的内置对象供用户使用利用这六个对象 计变化多端的b应用程序在ASP开发b应用程序时 法，不但能实现提高编程效率，而且编程更优化。 下面列出ASP包括的六个内置对象： ：将信息送主客户端 ：从客户端取得信息 ：提供一些r方法 ：记录连接着的信息，每一个连接者的信息有独立的n 记录 ：记录共用消息，让不同的可户端共享信息 ：配合MTS进行分布式事务处理 ASP的运行 AS页面与一般HTM页面的真正不同之处，在AS b服务器的解释执行而HTML网

13、页不需要。因此如果要运行和发布式ASP 有b个b有ASP 释程序，就可以运行 编写的动态网页。 8 整个过程主要有如下5个步骤（HTML页面的处理没有第三步） 用户将ASP文件的网址输入到浏览器的地址栏，请求一个ASP网页。 浏览器向b服务器发送ASP文件请求，成为服务器找到并解释执行该ASP文件，生成标准的HTML文件 服务器将HTML文件传送给用户浏览器，称为Response 用户的浏览器解释HTML文件，结果在浏览器窗口显示 2.2.2 ADO对象 ADO原名为通过与ASP的结合可以在网页里执行 SQL的指令，用户可以轻松且快速的存取、增加或是删除数据库的数据。 AD包含三个主要的对象：

14、、以Cmmand。通过这 些对象的了解与应用，再利用ASP 功能多样的网站。 快速、容易和节省磁盘空间，AD的特性，这使AD成为十分热门 的技巧。 ADO通过与ODBC的链接，可以链接许多各种类型的数据库，因为ODBC 本身就支持许多类型的数据库。 ADO通过VBScript语言的技巧，不但可以控制存取数据库， 还可以达到一些特殊技巧的变化。 ADO提 对象 可以使用该对象建立和管理应用程序和 ODBC 数据库之间的连接。 对象具有各种属性和方法可以使用它们打开和关闭数据库连接并 且发出查询请求来更新信息。 要建立数据库连接，首先应创建 对象的实例。 对象方法 您可以发出结构化查询语言 (SQ

15、L)查询数据库源并检索结果 与数据库通讯的工业标准语言，它有许多命令可用来检索和更新信息。使用 对象的 方法 命令的表格中发出查询 令将数据插入特定的数据库表格。 使 对象处理结果 9 尽管 对象简化了连接数据库和查询任务，但 对象 仍有许多不足。确切地说，检索和显示数据库信息的 对象不能用于 创建脚本您必须确切知道要对数据库作出的更改 对于检索数据、检查结果、更改数据库，ADO 提供 如它的名称所暗示的那样， 对象有许多您可以使用的特性，根据您的 查询限制，检索并且显示一组数据库行即记录 的记录的位置，允许您一次一项逐步扫描结果。 根 对象的指针类型属性设置您可以滚动和更新记录 指针可以让您

16、在一组记录中定位到特定的项指针还用于检索和检查记录 在这些记录的基础上执行操作。 对象有一些属性，可用于精确地控制 指针的行为，提高您检查和更新结果的能力。例如，您可以使用 保留在数据库服务器上）并显示其他用户对数据库的最后一次更改。 一个成功的数据库应用程序都使用 对象建立链接并使 对象处理返回的数据。通过“协调”两个对象的特定功能，您可以开 发出几乎可以执行任何数据处理任务的数据库应用程序例如 脚本使 对象执行 SQL SELECT 命令SELECT 查询限制的信息。查询也包含 SQL WHERE 子句，用来缩小查询的范围。 通过 ADO Command 对象，可以象用 对象和 对象 那样

17、执行查询，唯一的不同在于用 Command 对象您可以在数据库源上准备、 编译您的查询并且反复使用一组不同的值来发出查询这种方式的编译查询的优 您还可以在执行之前通过您的查询的可变部分的选项使 查询保持局部未 定义。 Command 对象的 集合减少了您的麻烦，使您不必在每次重新发 出查询时重新建立查询。 2.3 网页图像设计工具Photoshop Adobe公司开发，处理图形图像的专门设计软件。DTP 形象创造和分色制 10 板的全过程，开创了“电脑平面设计”时代。 p 而不是图形创作有必要区分一下这两个概念图像处理是对已有的位图图像进 行编辑加工处理以及运用一些特殊效果其重点在于对图像的处

18、理加工图形创 作软件是按照自己的构思创意，使用矢量图形来设计图形，这类软件主要有 Adobe 公司的另一个著名软件 和 a 公司的 。 p系列中使用最广泛的有0版本、。 2.4.网页设计工具Dreamweaver Macromedia 公司的产品的另一款“所见即所得”的网页编辑工具。与 不同Deamweaver 采用的Mac 机浮动面版的设计风格对于初学 者来说可能会感到不适应但当你习惯了其操作方式后就会发现 Dreamweaver 的直观性与高效性是 所无法比拟的。 Dreamweaver对于 的支持特别好，可以轻而易举地做出很多眩目 的页面特效。插件式的程序设计使得其功能可以无限的扩展。D

19、reamweaver 与 、 并称为 Macromedia 的网页制作三剑客，由于是同一公司的产 品，因而在功能上有着一个非常紧密的结合。而最新推出的 Dreamweaver 更支Asp说Dreamweaver是高级网页制作的首选并不 为过。常见的版本为 Dreamweaver3、Dreamweaver4、DreamweaverMX、 、Dreamweaver CS. 所以我本次设计主要选用5结合0 3.1可行性分析 3.1.1网页的界面设计 由于越来越多个人开始建立自己的网站，网站除了具有传播信息的功能外， 还往往代表个人的形象网站建设商业化和广告化的趋势对网页设计的艺术性 提出了更高的要求

20、。虽然HTML语言提供了对常用Windows标准控件的支持， 但是，由Window标准控件的形状和颜色十分单一，网页的视觉效果可能会 而且下拉列表的箭头的颜 色不能改变，滚动条只能出现在窗口的下边和右边，当网页分成多个帧的时候， 滚动条就不可避免的出现在网页的中间破坏网页的整体性若在网页的设计中 主动配Window标准控件的形状和颜色，网页的创作空间就会受到限制。因 此，有必要实现网页中的自定义控件，以满足网页设计艺术化的要求。 网页界面构成要素 与传统媒体不同新 兴多媒体元素更借助由代码语言编程所实现的各种交互式效果增加了网页界 面的生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排布

21、、优化。 一般来说，网页的界面主要由下面几个因素构成： （1 信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同， 是内容的简概说明一般比较醒目优先编排 同时又是信息重要载体它的字体大小 （2）图形：图形在网页界面中具有重要作用。合理的运用图形。可以生动 直观、形象地表现设计主题。网页中常用的图形格式包 式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台。 3.2. 12 3.2.1.主题确立与建站目的 在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而 吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页 页设计尤为重要。 互联网成为人们快

22、速获取 济生活等各个方面发挥着重要的作用 由于人们使用网络的频繁而变得非常的重要 讲究的是排版布局其功能主要就是提供一种形式给每个上网者 解网站提供的信息。 本网站设计的宗旨在于通过对搜集到的著名球星里奥梅西的各种信息与资 使广大球迷能够更加全面完整地了解梅西 不定期实时更新数据信息，确保广大球迷都能够接受到最新资讯。 3.2.2.网站实现功能 广大梅西的忠实粉丝通过本网站可以快速获取与他有关的信息 家庭生活状况以及比赛和获奖情况 迷对里奥梅西形成一个更加立体全面地认识。 13 4.1制作网页的一般步骤 网页来对公司进行广告宣传再假设你正在做一个项目 网页讨论该项目如果你要制作个人网页 就是为

23、了让同学们在自己的班级网站里面更好的交流和联系 新闻，为同学们建造一个网上家园。 你的网页中获取信息就容易得多对于那些很重要的信息 组织好网页的关键是要对网页建立层次分明 页。 而后要确定你的网页所具有的外观和特色 该让你的网页不仅漂亮更重要的是实用 到一起，这也正是你的网页特色所在。 然后，开始制作网页。具体操作时，首先要创建个人站点，再充分利用 Dreamweaver的功能建立各个网页。 和维护你的站点了。 4.2网页包括的元素 无论是初次领略t 14 设计工作中得心应手根据需要合理的组织和安排网页的内容从而达到期望的 目标。 设计网页的目的主要是发布信息因此 了网页的基本组成部分，超级链

24、接 链接在一起，如果没有它b 单等信息的组织、表现，以及交互元素在网页中也具有举足轻重的地位。 、文本 文本一直是人类最重要的信息载体和交流工具，网页中的信息也以文本为 文字虽不如图像那样能够很快的引起浏览者的主意 确的表达消息的内容和含义为了克服文字固有的缺点 显示重要的内容此外 达一系列项目，这些功能都给网页中的文本赋予了新的生命力。 、图像 图像在网页中具有提供信息的 作用。用户可以在网页中使GIF、JPEG、PNG种图像文件格式，其中使用 最广泛的是GIF和JPEG两种格式。 、超级链接 超级链接技术可以说是万维网流行起来的最主要的原因它是从一个网页指 向另一个目的端的链接例如指向另一

25、个网页或相同网页上的不同位置这个目 一个程序或本网页中的其他位置，其载体通常是文本，图片或图片中的区域也 可以是一些不可见的程序脚本。 当浏览者单击超级链接时，其目的端将显示 端的类型以不同方式链接。例如，当指向一V 该文件将在媒体播放软件中打开如果是指向一个网页的超级链接，则该网页将 显示在b浏览器上。 表格 在网页中表格用来控制网页中信息的布局方式这包括两方面一是使用行 15 和列的形式来布局文本和图像以及其他的列表化数据 4.3.网页层次结构（附结构图） 4.4.目录的层次结构 运动生涯 职业数据获奖记录注册我们 16 4.5. 4.5.1 创建网页页面 在Dreamveaver“文件新

26、建常规基本页HTML 个页面，英文版的默认的文件名为 untitled.htm “无标题文档”html就表示这个网页文件是一个静态的HTML index.html 设置网站主题。 4.5.2 插入图像 使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对 话框，选中该图像文件，单击确定。 17 4.5.3 插入标题文字 左上角闪烁，光标位置就是插入点的位置如果要想让文字居中插入 可以对它进行设置。 4.5.4 设置文字的格式 选中文字在上图属性面板中将字体格式设置成默认字体 改字号。并选中“B”将字体变粗。 根据这样的方法，逐渐填充完整我们的首页。 18 4.5.5 插入logo

27、插入图片方式，在网站中心加入本网站的logo 4.6. 19 4.6.1 4.6.2 20 21 .4.6.3 4.6.4 22 23 4.6.5 4.6.6 24 4.6.7 25 4.6.8 26 5.1 数据库技术 Access是Office系列软件中用来专门管理数据库的应用软件。所谓数据库 是指经过组织的、关于特定主题或对象的信息集合。数据库管理系统分为两类： 文件管理系统和关系型管理系统。Access 应用程序就是一种功能强大且使用方 便的关系型数据库管理系统一般也称关系型数据库管理软件它可运行于各种 MicrosoftWindows系统环境中由于它继承了Windows的特性 而且界

28、面友好如今在世界各地广泛流行 程序设计水平，任何非专业的用户都可以用它来创建功能强大的数据库管理系 统。 Access使用标准的SQL（StructuredQueryLanguage, 为它的数据库语言从而提供了强大的数据处理能力和通用性 能强大而且易于使用的桌面关系型数据库管理系统和应用程序生成器。 Access数据库使用单一的*.mdb文件管理所有的信息这种针对数据库集成 的最优化文件结构不仅包括数据本身，也包括了它的支持对象。此外，Access 2000还利用Office套件共享的编程语言VBA（Application 进行高级操作控制和复杂的数据操作。 5.2. 数据库连接技术 一个动

29、态的网站它的动态就体现在数据库技术上面 库与我们的WEB页面进行连接呢？这里就要用到ASP六大内对象中的server 象！具体代码如下： 这些代码一般都放在一个名称为conn.asp的文件里面。如果WEB页面中需 要用到数据库连接时就使用宏定义把这个文件包含进去就可以了具体代码十分 简单：。 5.3. 数据库写入技术 关于数据库的写入技术一般可以分为两类：ADDNEW 方法和 INSERT INTO！ 在ASP中，直接使用“Insert into” 语句与使用ADO中AddNew 么区别？哪一种更好呢？AddNew方法的实质就是封装了“Insert into 所以，当我们需要对大量 “Inse

30、rtinto用SQL 语句，减少了ADO的解释时间，显然会大大加快存取数据的速度。 下面我们分别来看一下它们的代码！以向一个名dat 型均为文本型的两个字段username 和psw 一：insert into 这句话包括了数据库的文件！ 分析： 1：是一个宏它是我们提前定义好的一个数 28 据库连接的文件！ 2psw=request.form“psw)实际上我们省略了一个提交的页面我们 定义了两个中间的变量， 3：sql=”) 是把数据库中id为空的记录找出来！ 4sql=insertintodata“username,psw)values(+name+, +psw+”)”这里是我们值得注意

31、的地方因为它是关键！学过vf或sql 语句并不陌生！但是一定要写对因为在这一行语句value 连接符号还可以是&! 下面我们来看看用Addnew是如何实现的！ 这句话包括了数据库的文件！ 数库读术 29 数据库的读取技术是与记录集合的建立相结合而使用的 行记录可能会包括很多信息但是这一行记录始终是一个数据单元 过该数据单元的具体情况和数据库的查询条件找到需要的数据项 看一段代码： % set rs=server.createobject(adodb.recordset) sql=select * from music rs.open sql,conn,1,3 if not rs1.eof th

32、en end if AHREF=javascript:void(0) onClick=newpage(swfPlay.asp?id=); % 5.5记录集合的建立 是用一个或多个纪录集组合而得到的其实一的web 录！由此可以知道记录集是非常重要的！那么怎么去写一个记录集呢？ 这样我们就可以把我们要查询的东西放在记录集rs里面如果我们想从数据 库中把数据读出来就response 对象了！一般我们就可以直接简写成可以 了！如果数据库中只有一条记录我们这样写就可以了但是 如果有多条记录我们 就要用到vb或则c语言中的循环条件！ 30 6.1. IIS配置 II被成功安装后，将在计算C:Inetpub

33、wwwroo 站，通过修改默认网站配置可以建立自己的站点。如自己的网页放 目录下，首页文件名为Index.asp，其具体步骤如下： 第一步：在“默认Web Web站点属性”设置界面。 选择）好自己网页所在的“D:Wy”目录。 第三步转到“文档”窗口再按“添加”按钮 后输入自己网页的首页文件名“Index.asp”。 第四步：在“默认Web “别名”处输入“test”，在“目录”处输入“D:Wy”后再按提示操作。 数据源（ODBC）配置 第一步：选择控制面板中的管理工具打开数据源（ODBC）。 第二步：在选项卡系统DNS中添加MicrosoftAccessDriver(*.mdb) 指定数据源为网站的数据库文件。 测试 打开浏览器，直接在地址栏中输入： HYPERLINK http:/test/index.asp http:/test/index.asp 或 HYPERLINK /test/index.asp /test/index.asp即可。 6.2 在测试完成后网页就可以发布到互联网上了 常维护了网站维护就是对服务器及相关软硬件的维护 括以