个人动态网站设计.docx

个人动态网站设计.docx

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

个人动态网站设计

个人动态网站设计

摘要

随着网络技术与信息技术的发展，因特网迅速成长，因特网与企业经营活动的结合创造了新的网络经济，使企业的经营活动由传统经营模式转向产品发布、网络营销、商务洽谈、交易管理等的电子化，企业的内部运作、组织管理也发生了深刻的变革，迎来了崭新的电子商务时代！

本文结合实际情况，以企业形象网站展示为例论证了企业形象网站构建的必要性，并实现了企业与客户之间信息沟通的新渠道，使传统企业正视互联网并加入互联网。

如今越来越多的人通过Web来获取所需要的信息，也有许多人建立了自己的个人网站，我的毕业设计就是个人网站。

最初的WWW以提供信息资源为主，人们上网的主要目的是查看信息资料。

而随着网络的技术的快速发展，电子商务、电子政务等网上应用蓬勃发展，而这样网络设计语言应运而生。

目前主要的网络设计语言有ASP、PHP和JSP程序设计语言。

而总的方面来说，ASP、PHP和JSP基本上都是把脚本语言嵌入到HTML文档中。

关键词：

ASP；个人网页；动态网页；网络技术

Personallydynamicwebsitedesign

ABSTRACT

Alongwiththenetworkingandtheinformationtechnologydevelopment,theInternetgrowsrapidly,theInternetandtheenterprisemanagedactivetheuniontocreatethenewnetworkeconomy,causedtheenterprisemanagementtochangetheproductissue,thenetworkmarketing,thecommercialdiscussion,thetransactionmanagementbythetraditionalmanagementpatternandsoonthecomputerization,enterprise'sinternaloperation,theorganizationmanageshasalsohadtheprofoundtransformation,haswelcomedthebrand-newelectroniccommercetime!

Thisarticleunifiestheactualsituation,bytheenterprisevividwebsitedemonstratedhasproventheenterprisevividwebsiteconstructionnecessityfortheexample,andhasrealizedbetweentheenterpriseandthecustomertheinformationcommunicationnewchannel,causesthetraditionalenterprisefacinguptoInternetandjoinstheInternet.

Nowmoreandmoremanypeoplegaintheinformationthroughwebwhichneeds,alsosomemanypeoplehaveestablishedownindividualwebsite,mygraduationprojectisindividualwebsite.InitialWWWprovidestheinformationresourceprimarily,thepeopleaccessthenetthemainpurposeexaminestheinformationpaper.Butalongwiththenetworktechnologyfastdevelopment,netsandsoinelectroniccommerce,electronicgovernmentaffairsappliesthevigorousdevelopment,butsuchnetworkdesignlanguagearisesatthehistoricmoment.AtpresentthemainnetworkdesignlanguagehasASP,PHPandtheJSPprogramminglanguage.Butthetotalaspect,ASP,PHPandJSPbasicallyallisinsertsthescriptlanguagetotheHTMLdocumentsin.

KeyWords：

ASP；PersonalWeb；Dynamicwebpage；NetworkTechnology

1.绪论

1.1前言

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

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

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

本文是做的一个关于个人网站的设计。

个人网站包括：

博客，个人论坛，个人主页等等网络的大发展趋势就是向个人网站发展。

个人网站是一个可以发布个人信息及相关内容。

通俗理解个人网站：

就是指网站内容是介绍自己的或是以自己的信息为中心的网站，不一定是自己做的网站，但强调的是以个人信息为中心。

网页有动态和静态网页两种。

静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。

静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。

动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。

1.2项目的内容与目标

网页设计包括它的外观和它的观感，而且也要考虑网页所有的元素：

包括观众信息、意图和目标描述、域信息、页面的规范。

网页设计是一种审美活动，主页的设计应以醒目优先，应该令人一目了然，不堆砌太多不必要的细节，或使画面太过于复杂。

要做到这一点，首先要在整体上规划好自己网站的主题和内容，确定自己需要传给访问用户的主要信息。

其次，是设计一个富有个性的页面样式，务求尽善尽美。

本文采用美国MACROMEDIA公司开发的集网页制作和管理网站于一身的直观型网页编辑器Dreamweaver8进行开发。

制作出来的网页利用ASP等技术添加链接、目录等互动功能。

具有子网页的链接功能，能够链接到各个子网页；具有Flash视频播放功能，音乐播放功能，能够播放内嵌的Flash视频和歌曲；具有留言板功能，能够进行一些基本的互动操作。

1.3项目要求

对于个人网页设计需要有以下几点基本要求：

（1）美观大方，实用方便，维护简单，动态效果良好。

（2）交叉链接丰富，阅读方便，可读性强。

（3）各模块、页面的统一性好，协调性好。

2.网页制作概述

2.1网页类型

2.1.1静态页面

静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。

静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）。

但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。

常见的静态页面以.html、.htm为扩展名的。

并非网站上没有动画的就是静态页面。

2.1.2动态页面

动态页面是通过执行asp、php、jsp、.net等程序生成客户端网页代码的网页。

动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。

发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能，也是我们常见的。

动态网页是需要语言环境支持的，动态页面常见的扩展名有：

.asp、.php、.jsp、.cgi等。

动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面[4]。

动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。

可以说是一对多的关系。

从而达到资源的最大利用和节省服务器上的物理资源。

如果今后需要改变站点风格，只需要重新制作前台所访问的数据即可。

只要数据库结构不变，可以很快的进行改版的。

2.2网页开发技术

动态网页开发技术介绍——HTML、ASP、JSP、CGI、PHP。

HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。

严格的来讲，HTML不能算做一门编程语言，因为它没有自己的数据类型，也没有分支、循环等控制结构。

它的设计简单，结构灵活，允许在Web浏览器及其它兼容的应用程序中显示文本和图像，并且文档的某些部分可以成为超链接。

完成后把这些文档保存为*.html文件，然后用浏览器打开。

  HTML是网络的通用语言,一种简单、通用的全置标记语言。

它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器[5]。

在早期，动态网页技术主要采用CGI技术，即CommonGatewayInterface（公用网关接口）。

在早期，你可以使用不同的程序编写合适的CGI程序，如VisualBasic,Delphi或C/C++等。

虽然CGI技术成熟而且功能强大，但由于编程困难，效率低下，修改复杂等缺陷，所以有逐渐被新技术取代的趋势。

ASP全名ActiveServerPages，是一个WEB服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的WEB服务应用程序。

ASP采用脚本语言VBScript（Javascript）作为自己的开发语言。

ASP更精确的说是一个中间件，这个中间件将Web上的请求转入到一个解释器中，在这个解释器中将所有的ASP的Script进行分析，再进行执行，而这时可以在这个中间件中去创建一个*.html文件（静态网页）。

PHP是一种跨平台的服务器端的嵌入式脚本语言.它大量地借用C,Java和Perl语言的语法,并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。

还有一点，PHP是完全免费的[6]。

JSP是Sun公司推出的新一代站点开发语言，他完全解决了目前ASP,PHP的一个通病－－脚本级执行（据说PHP4也已经在Zend的支持下，实现编译运行）。

Sun公司借助自己在Java上的不凡造诣，将Java从Java应用程序和JavaApplet之外，又有新的硕果，就是Jsp－－JavaServerPage。

Jsp可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。

2.3网页布局

2.3.1网页布局的基本概念

最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思，可以创造出自己的设计方案。

，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西，这样你创造出来的网页才能更好的被别人接受。

（1）页面尺寸

由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。

一般分辨率在800x600的情况下，页面的显示尺寸为：

780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:

620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：

1007x600。

从以上数据可以看出，分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。

一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。

除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。

如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。

（2）整体造型

造型就是创造出来的物体形象，这里是指页面的整体形象。

这种形象应该是一个整体，图形与文本的接合应该是层叠有序。

虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：

矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。

比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。

虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

（3）页头

页头又可称之为页眉，页眉的作用是定义页面的主题。

比如一个站点的名字多数都显示在页眉里。

这样，访问者能很快知道这个站点是什么内容。

页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。

页头常放置站点名字的图片和公司标志以及旗帜广告。

（4）文本

文本在页面中出现都数以行或者块（段落）出现，它们的摆放位置决定者整个页面布局的可视性。

在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

（5）页脚

页脚和页头相呼应。

页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。

你能看到，许多制作信息都是放置在页脚的。

（6）图片

图片和文本是网页的两大构成元素，却一不可。

如何处理好图片和文本的位置成了整个页面布局的关键。

而你的布局思维也将体现在这里。

（7）多媒体

除了文本和图片，还有声音，动画，视频等等其它媒体。

虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。

2.3.2页面布局方法

网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。

下面分别加以介绍。

（1）纸上布局法

许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。

这种不打草稿的方法不能让你设计出优秀的网页来。

所以在开始制作网页时，要先在纸上画出你页面的布局草图来。

首先，尺寸的选择。

目前一般800X600的分辨率为约定俗成的浏览模式。

所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。

其次，造型的选择。

先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。

选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。

这样画下来，你会发现很乱。

其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。

还要注意一点，你不要担心你设计的布局是否能够实现。

事实上，只要你能想到的布局都能靠现今的HTML技术实现。

（2）软件布局法

除了纸上布局，还可以利用软件来完成这些工作。

如利用Photoshop。

Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。

利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。

2.3.3网页布局技术

（1）层叠样式表的应用

在新的HTML4.0标准中，CSS（层叠样式表）被提出来，它能完全精确的定位文本和图片。

CSS有点复杂，但它的确是一个好的布局方法[7]。

曾经无法实现的想法利用CSS都能实现。

目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。

比如一些企业网站。

（2）表格布局

表格布局被广泛使用，已经成为一个潜在的标准。

随便浏览一个站点，它们一定是用表格布局的。

表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。

而且表格在定位图片和文本上比起用CSS更加方便。

表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响[8]。

对于表格布局，打开一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它（要所见即所得的软件），会可以看到这个页面是如何利用表格的。

（3）框架布局

由于它的兼容性，框架布局并没有被所有人接受。

但从布局上考虑，框架结构不失为一个好的布局方法。

它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。

2.4网页配色

网站充斥着枯燥的设计，惠普、IBM、戴尔、微软，以及其他数不尽的网站（相似的布局，相似的配色）。

这样一种标准化的界面可以使浏览更方便，但同时带给用户一种很世俗的体验，并不能与访客产生一种积极的联系。

面对这种单调的设计，有一种解决方法，就是使用颜色。

可能没有其他设计元素能像颜色一样能影响人们对世界感受。

颜色可以瞬间改变我们的情绪和意见。

颜色会让我们感觉到舒适、敬畏，或者激动[9]。

在界面设计中，颜色组合对设计非常有用。

可以区分设计让用户更加难忘、引导用户使用户专注于交互、吸引用户使页面布局更舒适，更有魅力。

一旦有机会可以让网站更独特，就不能放弃。

如果你的网站做的很醒目，那么用户可能会花更多时间浏览并且想是从哪里访问过来的，他们有可能记住这个网站并且下次再访问。

可能没有比颜色更好的元素可以达到这样的效果了。

人们会马上对颜色产生感觉：

激动、高兴或者枯燥乏味。

当你试图在一个充满饱和色调的页面上浏览信息时，你的眼睛会不断地返回那些亮的颜色。

最强的视觉元素是最重要的。

我们趋向于忘记那些深蓝、黄色和灰色，因为每天都看到。

在那些用户需要长时间在线使用的Web应用程序中，注意这一点尤为重要。

不是很强烈的配色可以使用户专注于工作和接收重要信息。

当然完美的Web体验不能仅仅依靠颜色，结构、交互、布局等方面也必须协同工作，来创建可用、易用的网站和应用程序。

但是颜色是平衡中的重要部分，不能忽略。

2.5网页设计流程

网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。

从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下：

首先，获取客户需求和资料。

在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。

客户提出网站需求是非常重要的一个环节。

没有详细的需求，设计人员无法凭空进行设计制作。

在这个步骤中，双方的沟通与交流是非常重要的。

其次，确定网站内容。

设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。

在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这个主题进行设计制作，保证风格的和谐统一。

然后，申请域名和空间。

使用该方法能够有效同步管理文件。

还可以通过FTP软件连接到服务器空间上，然后上传发布文件。

最后，后期维护。

一般静态网站上传后，如果客户方没有专业人员维护，这样就需要设计人员从客户方获取新资料进行定期或不定期的更新。

3动态网页开发环境及原理技术

3.1网页工具介绍

3.1.1Dreamweaver网页制作工具

软件简介

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Dreamweaver是由Macromedia公司开发的一款所见即所得的网页编辑器。

和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”；2005年4月18日，全球最大的图像编辑软件供应商Adobe宣布，以换股方式收购软件公司Macromedia，Macromedia是著名的网页设计软件Dreamweaver及Flash的供应商。

据悉，此项交易涉及金额高达34亿美元。

根据双方达成的协议，Macromedia股东将以1：

0.69的比例获得Adobe的普通股。

自此开始，Dreamweaver开始属于ADOBE设计软件系列。

　　Dreamweaver、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM（梦之队），足见市场的反响和MACROMEDIA公司对它们的自信。

说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网（Internet） 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点：

一、难以精确达到与浏览器完全一致的显示效果。

也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来；

二、页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。

而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。

如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。

在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。

但是我说过这是在DREAMWEAVER之前，现在我无意说DREAMWEAVER已经实现网页设计师的梦想，但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。

使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。

对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。

Dreamweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整