Web个人网站设计论文.docx

Web个人网站设计论文.docx

《Web个人网站设计论文.docx》由会员分享，可在线阅读，更多相关《Web个人网站设计论文.docx（16页珍藏版）》请在冰豆网上搜索。

Web个人网站设计论文

Web个人设计

姓名：

班级：

学号：

专业：

计算机与通信工程学院

[摘要]随着国际互联网的普与，很多人已经不满足仅仅在Internet上的浏览信息，而是希望更深入的参与其中，拥有自己的Web，这似乎已经成为一种潮流。

如果说个人建立是为了追求时尚，那么企业建立就是必然的选择了。

同样出自Macromedia公司的Flash,Fireworks在制作的过程中起到了锦上添花的作用，是个人实现的好帮手，在制作的时候经常会用到这些软件。

对于个人来说，建设好时间的个性化可以更加方便的收集信息，开展更加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作做好充分的准备，通过自己建设的，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。

在我的这个个人的制作过程中，我选择了以图片作为卖点来吸引读者的眼球。

我喜爱摄影，喜爱旅行。

我想有很多像我这样的人，在走出去的同时，也希望把自己的所见所闻分享给同道中人，让更多的人来感受自己的快乐，去体验旅行意义。

于是我就想做出这样的一个以分享图片和心情为主要目的的。

下面就来介绍一下我设计的主要经过。

[关键字]设计图片旅行

一、需求分析

现代社会是一个信息化的社会，人们对信息的需求越来越大，对信息的传递速度要求越来越快，在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它与时.迅捷的给人们提供了所需要的信息，各种便是这信息传播的枢纽，大量的信息，大批量的访客对的管理都是一种挑战，而实现这一管理的就是数据库的操作，由此可见数据库的完善与否直接影响着的稳定性。

随着科技的进步，时代的发展，计算机信息行业的逐步壮大，人们也越来越离不开各种各样的信息了，人们对信息的追求也越来越迫切了。

互联网作为信息技术的通信桥梁连接着全球的计算机，而作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Internet上表现出其与其重要的地位，并发挥着其与其重要的作用。

Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得的建设与网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，建设和网页制作也成为计算机网络领域最热门的话题。

目前，我国已成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。

的迷人之处在于综合使用文本、图像、声音、动画和视频的信息和容，具有丰富的多媒体表现与互动特点，无可置疑， 已成为最吸引人的也最有效的信息传递手段和方式。

随着网络技术的发展，各类纷纷出现。

个人也成为了一种时尚。

越来越多的人希望拥有自己的，开辟网络世界的一片天地，展示自己的才华和风格。

“个人要发展，要么是从我的需求出发，要么是从我周围人的需求出发。

”国著名个人站长、手机之家站长高春辉说。

网页设计是一门新兴的设计类和网络的交叉学科，近几年随着网络的发展而逐渐收到人们的重视，它本身以网络为载体,把各种信息以最快捷、方便的方式传达给大众。

一个项目的确立是建立在各种各样的需求上面的，这是个人，所以这种需求往往来自于个人的实际需求，其中每个人的实际需求占了绝大部分。

因此如何更好地的了解、分析、明确需求，并且能够准确、清晰以文档的形式表达出来，保证开发过程按照个人需求为目的正确项目开发方向进行。

鉴于此平台，我就想到了设计让更多的朋友可以分享交流的地方。

网络博客是一种好的形式，我所学的东西也许不能够做一个大型的，但我可以模仿博客的形式做一个分享平台。

现在的年轻人都喜欢在网上各种“晒”，晒食物，晒游玩，晒shopping等等。

对于热爱旅行的人来说，我们也希望有一个可以专门晒心情的地方。

为了见识到更多的美景，更多的文化背景，或者说认识更多的驴友。

能够提供一个较好的平台给这些驴友们，我想是一个不错的方案。

于是我的设计就这么开始了。

二、总体设计

2．1设计前瞻

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

因此建设在Internet应用上的地位显而易见，它已成为个人、政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

越来越多的人希望能真正参预到互联网上，这就出现了越来越多的个人的设计以与推广的工作和任务。

 一个设计得成功与否，很大程度上决定于设计者的规划水平，规划就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。

规划包含的容很多，如的结构、栏目的设置、的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。

也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

就我个人而言，我也想拥有自己的个人，在互联网上拥有自己的一席之地，从而真正的参与到网络中去，做网络新时代的主人，同时也希望自己喜欢和收藏的一些东西能够和网络一起分享，和互联网上的你一起分享。

2．2设计步骤  

⑴确定主题 ：

主题就是要建立的所要包含的主要容，一个必须要有一个明确的主题。

⑵搜集材料 ：

明确了的主题以后，你就要围绕主题开始搜集材料了。

材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

⑶规划 ：

一个设计得成功与否，很大程度上决定于设计者的规划水平，规划就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。

规划包含的容很多，如的结构、栏目的设置、的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。

也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

⑷选择合适的制作工具 ：

尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。

⑸制作网页 ：

材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。

所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。

所谓先简单后复杂，就是先设计出简单的容，然后再设计复杂的容，以便出现问题时好修改。

在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

2．3网页要素 

⑴网页的整体布局设计  

   网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。

版式设计通过文字图形的空间组合，表达出和谐与美。

一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面的秩序与容的关系。

尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。

⑵网页设计中色彩的运用  

   色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。

根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。

色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。

所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。

另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。

在色彩的运用过程中，还应注意的一个问题是：

由于国家和种族、和信仰的不同，以与生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。

如：

儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。

在设计中要考虑众多因素。

⑶网页形式与容相统一 

  要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的容，体现容的丰富含义。

运用对比与调和、对称与平衡、节奏与韵律以与留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸的手法来表现容往往会达到比较好的效果。

点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。

网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。

2．4主要功能：

⑴搜索引擎：

根据浏览者的要求，使用主页上的搜索引擎到XX，在整个Internet上进行搜索，完成信息的优化与提取。

⑵论坛：

主要功能是网友和之间的交流平台，也是网友给版主提出意见的主要渠道。

在论坛中用户可以发表意见，这些意见可以让所有人看到，也可以只让版主看到，版主和其他人可以针对留言的容进行回复，只留给版主的留言只有版主能够回复，并且版主可以登录后台对留言进行管理，是否发表或删除。

⑶发送电子：

网友可以通过“联系我”利用outlook 向版主或其他人发送电子。

⑷精品收藏：

在其中展示我喜爱的东西，包括图片、歌曲和一些优美的文章。

奇文共欣赏，疑义相与析。

我只想起到抛砖引玉的作用，让大家从中认识我和了解我，让一些美好的东西我们大家共同来欣赏。

但我增加了管理权限，我以管理员的身份可以对加入的新容进行管理，即允许加入和对其进行删除。

⑸留言板：

是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。

就我们感兴趣的话题展开讨论。

和大家进行沟通。

在明确了我的个人的风格和定位后，就是的材料组织以与的页面设计和数据库设计。

最后完成发不到网上后，能够充分吸引浏览者的目光，利用搜索引擎，浏览者可以在搜索自己喜欢的资料，并且可以在留言板和大家交流，在后台管理页面中，通过身份认证，管理员可以对信息进行管理。

站的其它页面均是我自己的精心收藏，与大家一起分享。

三、详细设计

3．1开发工具介绍与选择

⑴梦幻网页的编织者------Dreamweaver8.0 

Dreamweaver是创建和管理网页的专业化可视编辑器。

使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。

Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。

Dreamweaver可以为用户做到：

使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。

它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。

Dreamweaver还是一个可以完全自定义的应用程序。

用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。

至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。

常用的Dreamweaver工作区组件有以下若干种：

①文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。

② 装载器中包含一些打开和关闭常用检查器和模板的按钮。

③对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。

④属性检查器显示选定对象的属性。

⑤快捷菜单可以使用户对当前选择或区域快速执行某些命令。

⑥可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。

⑵网页动画的制作软件----Micromedia Flash 8.0 

Micromedia Flash 8.0用于web站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页。

Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。

Flash 的交互性的大部分设置就在 Action 和 Fs Command 里，通过对 Action 和 Fs Command 的设置，你可以随意的设置各事件发生的效果，还有对变量与函数的设置。

⑶JavaScript 

JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。

使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中多个对象，与Web客户交互作用。

从而可以开发客户端的应用程序等。

它是通过嵌入或调入在标准的HTML语言中实现的。

它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。

⑷影像与动画的制作软件—Adobe Photoshop8.0 

Photoshop 8.0是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。

①文字处理更加方便 

②增加的图层集使图层管理更有序。

③新增图像功能：

图像的剪切和剪裁更加方便。

④将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。

⑤为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。

⑸动态的脚本语言--ASP   

Active Server Pages：

“动态服务器网页”，一般简称为“ASP”，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）都可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”，不像VBScript或 JavaScript是在客户端（Client）的浏览器上执行，若使用VBScript来设计程序，客户端（Ｃlient）在ＩＥ浏览器中可以显示程序执行的结果，可是，客户端（Ｃlient）若使用Netscape浏览器就无法显示VBScript的执行结果。

ＡＳＰ的特点：

ⅰ、任何开发工具皆可发展ＡＳＰ 

只要使用一般的文书编辑程序，如Windows记事本，就可以编辑。

当然，其他网页发展工具，例如，FrontPage Express、 ＦrontPage等也都可以；不过还是建议你用记事本来写，既省钱又方便，若是使用那些所见即所得的网页编辑来写ＡＳＰ，可能会发生一些意想不到的离奇状态。

通过各家浏览由于ASP程序是在网络服务器端中执行，执行结果所产生的HTML文件适用于不同的浏览器。

ⅱ、语言相容性高 

ASP与所有的ActiveX Script语言都相容，除了可结合HTML，VBScript、Java ScriptActive X服务器组件来设计外，并可经由“plug-In（外挂组件模组）的方式，使用其他厂商（Third Party）所提供的语言。

ⅲ、隐密安全性高 

如果我们在浏览器中直接查看网页的原始代码，就只能看到ＨＴＭＬ文件，原始的ＡＳＰ程序代码是看不到的！

这是因杰ＡＳＰ程序先于服务（Ｗeb Server）端执行后，将结果转换成标准ＨＴＭＬ文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的ＡＳＰ程序并不会轻易地被看见进而被盗用。

ⅳ、易于操控数据库 

ＡＳＰ可以轻易地通过ＯDBC（Open Database Connectivity）驱动程序连接各种不同的数据库，例如：

Acess、Foxpro、dBase、Oracle等等，另外，ＡＳＰ亦可将“文本文件”或是”Excel” 文件当成数据库用。

ⅴ、面向对象学习容易 

ＡＳＰ具备有面向对象（Ｏbject-Oriented）功能，学习容易，ＡＳＰ提供了五种方便能力强大的建对象：

Request、Response、Sever、Application以与Session，同时，若使用ＡＳＰ建的“Application”对象或”Session”对象所撰写出来的ＡＳＰ程序可以在多个网页之间暂时保存必要的信息。

ⅵ、ASP的六大部对象 

RequestResponseServerSessionApplicationObjectContext  从客户端取得信息将信息送给客户端提供一些Web服务器工具储存在一个 Session的用户信息，该信息仅可被该用户访问在一个 ASP-Application中让不同的客户端共享信息可以用来配合 Microsoft Transaction 服务器进行分布式事务处理 所以我选择了ASP结合Dreamweaver架构个人站点。

3．2Access数据库的创建

⑴数据库Access的简要介绍 

Access数据库是集成在Microsoft公司开发的产品更新换代Office系统中的集成软件。

Access是一个数据库管理系统，它之所以被集成到Office中而不是Visual Studio中，是因为它与其它的数据库管理系统（如Visual FoxPro）相比更加简单易学，一个普通的计算机用户即可掌握并使用它。

而且最重要的一点是，Access的功能足够强大，足以应付一般的数据管理与处理需要。

ODBC（Open Database Connectivity开放式数据库互联）是微软推出的一种工业标准，一种开放的独立于厂商的API应用程序接口，可以跨平台访问各种个人计算机、小型机以与主机系统。

ODBC作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ODBC接口或提供了ODBC支持，这其中就包括常用的SQL SERVER、ORACAL、INFORMIX等，当然也包括了Access。

ASP访问数据库的几种方式：

在ASP脚本中可以通过三种方式访问数据库：

IDC（Internet Database Connector）方式；  

ADO（ActiveX Data Objects）方式；  

RDS（Remote Data Service）方式； 

这三种访问方式对数据库的访问是由Internet Information Server来完成的。

Web浏览器用协议向Internet信息服务器（IIS）递交请求。

Internet信息服务器执行访问数据库的操作，并以一个HTML格式的文档作为回答。

⑵Access 的组件介绍 

我们在Web服务器运用Web应用程序进行的最常见和最实用的任务就是访问服务器端的数据库。

而ASP建的Database Access组件使得我们能够轻而易举地通过Active Data Objects（ADO）访问存储在服务器端的数据库或其他表格化数据结构中的信息。

ADO是对当前微软所支持的数据库进行操作的最有效和最简单直接的方法，它是一种功能强大的数据访问编程模式，从而使得大部分数据源可编程的属性得以直接扩展到Active Server页面上。

可以使用ADO去编写紧凑简明的脚本便连接到Open Datase Connetivity（ODBC）兼容的数据库和OLE DB兼容的数据源，这样ASP程序员就可以访问任何与ODBC兼容的数据库，包括MS SQL SERVER Avccess , Ovracle等。

如果您是一个对数据库连接有一定了解的脚本编写人员，那将发现ADO命令语句并不复杂而且容易掌握，同样地，如果您是一个经验丰富的数据库编程人员，将会正确认识ADO的先进的与语言无关性和查询处理功能。

熟悉VB数据库编程的朋友会发现ADO与RDO有某中类似的地方。

但是据说ADO的访问的速度更快,存需要更小。

⑶创建Access数据库介绍 

用Microsoft Access 来创建数据库，最简单的是通过它提供的的一个“向导”，在启动这个软件以后，建立数据库文件的操作。

下面是我利用“向导”来创建一份数据库文件的具体操作步骤：

①选择“Access数据库向导、数据页和项目”单选按扭，然后单击“确定”按钮，若选择Microsoft Access对话框中的“空Access数据库”单选项按钮，就会建立一个空的数据库了，数据库里面的信息需要手工来添加，若选择“打开已有文件”单选按钮则可以从下方的列表中选择打开已经存在的数据库。

②在弹出的“新建”对话框中，我们可以选择一个模板来快速建立数据库，我们就先选择个“定单管理”看看，然后单击“确定”按扭。

③“文件新建数据库”对话框的功能是，指定数据文件名，以与保存它的文件夹。

我们就以它的初始文件名“定单入口1”吧，单击“创建”安扭后，新建的数据库文件就将被指定保存到Microsoft Access默认的文件夹下了，或我们给它指定一个新的也行，这样一来，一份新的数据库就建立好了，屏幕上也将显示“数据库向导”对话框。

④“下一步”按钮。

⑤以上“数据库向导”对话框分为左右两部分，左边的窗口是用来选择“数据库中的表”，右边的窗口是用来选择“表中的字段”。

选择好所需要的数据库中的表和表中的字段之后，就单击下一步按钮。

⑥以上“数据库向导”对话框是用来确定屏幕的显示样式，我们就采用标准样式吧单击下一步按钮。

⑦以上“数据库向导”对话框是用来确定打印报表的样式的，我们可以选择如“组织”样式，然后单击下一步按钮。

⑧ 以上“数据库向导”对话框的作用是确定数据库的标题和是否在所有报表上加一幅图片，我们就先设定数据库的标题为“定单入口”，并不在所有报表上加图片，然后单击下一步按钮。

⑨单击以上“数据库向导”对话框的“完成”按钮，就完成了创建数据库的工作了。

象这个数据库在使用之前还会弹出“我的公司信息”对话框，当然，不同的模板是不一样的，象这个就是要求输入公司的名称和地址信息，如下图所示，关闭这个对话框，系统将自动保存信息。

⑩关闭“我的公司信息”对话框后，会弹出“主切换面板”对话框。

位于“主切换面板”对话框后面的是“定单入口1”窗体，通过这两个窗体即可对新创建的数据库进行各种操作了。

无论什么时候使用“数据库向导”新建数据库，Microsoft Access都将自动新建一个切换面板，这个面板对浏览数据库都是很有帮助的，“切换面板”中有一些按钮，单击它们可以打开相应的窗体和报表，或打开其他窗体和报表的切换面板、退出Microsoft  Access或自定义切换面。

3．3ASP访问数据库的原理 

ASP是服务器端的脚本执行环境，可用来产生和执行动态的高性能的WEB服务器程序。

当用户使用浏览器请求ASP主页时，WEB服务器响应，调用ASP引擎来执行ASP文件，并解释其中的脚本语言（JavaScript或vbscript），通过ODBC连接数据库，由数据库访问组件ADO（active data objects）完成数据库操作，最后ASP生成包含有数据查询结果的HTML主页返回用户端显示。

四、实现

4．1登录

（1）数据库连接 

本的数据库软件使用的Microsoft Access数据库，利用该软件建立了存储用户信息的注册表users，然后登陆是可以从此表中查询信息与使用者的录入信息相比对，通过比对的结果判断