浅析网页设计.docx
- 文档编号:29233163
- 上传时间:2023-07-21
- 格式:DOCX
- 页数:26
- 大小:32.80KB
浅析网页设计.docx
《浅析网页设计.docx》由会员分享,可在线阅读,更多相关《浅析网页设计.docx(26页珍藏版)》请在冰豆网上搜索。
浅析网页设计
浅析网页设计
专业:
计算机网络
班级:
******
学生:
******
学号:
******
指导教师:
******
摘要
本文就个人网站的规划与建设,以软件工程的方法对全过程进行了分析与研究。
本文的主要工作集中在:
1.对Web页进行概述,主要是对Internet的历史和发展作了回顾,并对Web页的定义和特性进行阐述。
并对网站开发过程中使用的开发工具和技术作了简要的介绍。
2.对网站建设中提及到的术语进行了解释,并对个人网站的由来和发展进行了讨论。
3.对自己的个人网站从规划到建设进行了详细的分析。
4.使用ASP+IIS+Access技术实现了我的网站的各种功能,其中和数据库的连接使用到了ODBC技术。
5.就网站建设提出了自己的观点与建议。
【关键词】网站 ASP SQLServer 风格 创意
Theabstract
thisarticleonapersonalwebsiteplanningandconstruction,withthemethodofsoftwareengineeringprocessoftheanalysisandresearch.Thisarticlemainlyfocuson:
1.TheWebpageofpaperismainlytotheInternethistoryanddevelopmentreview,andWebpagetothedefinitionandcharacteristicsinthispaper.Andthewebdevelopmentprocessofdevelopmenttoolsandtechnologyusearebrieflyintroduced.
2.Tocoverinthewebsiteconstructionoftermsareexplained,andpersonalwebsiteontheoriginanddevelopmentarediscussed.
3.Foryourownpersonalwebsiteconstructionfromplanningtocarryonthedetailedanalysis.
4.UseASPandIIS+Accesstechnologyrealizedmywebsiteofthevariouskindsoffunctions,amongthemandtheconnectiontouseODBCtechnology.
5.JustwebsiteconstructionpresentedtheirviewsandSuggestions.
【keywords】websiteASPSQLServerstyleoriginality
目录
第1章引言……………………………………………………………………….1
1.1web页概述…………………………………………………………………………………………1
1.2开发工具的介绍及选择……………………………………………………………………2
1.3关系型数据库的选择…………………………………………………………………………5
第2章个人网站设计分析………………………………………………………………………………6
2.1相关术语及解释…………………………………………………………………………………6
2.2个人网站的由来和发展………………………………………………………………………7
2.3我的个人网站的设计与规划………………………………………………………………7
第3章详细设计………………………………………………………………………………………………9
3.1数据库的设计……………………………………………………………………………………9
3.2页面设计……………………………………………………………………………………………10
3.3关键代码设计……………………………………………………………………………………11
3.4网站管理系统……………………………………………………………………………………..15
第4章编码、测试与维护…………………………………………………………………………………17
4.1测试与维护…………………………………………………………………………………………17
4.2设计技巧和解决方法…………………………………………………………………………18
第5章结束语……………………………………………………………………………………………………19
致谢……………………………………………………………………………………………………………………………………20
参考文献……………………………………………………………………………………………………………21
第1章引言
在已跨入21世纪的今天,人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命,这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大。
目前,我国上网的人口已近一个亿,成立世界上网民最多的国家,许多人在需要查询信息,首先想到的就是上网。
网站的迷人之处在于综合使用文本、图像、音、动画和视频的信息和内容,具有丰富的多媒体表现与互动特点,无可置疑,网站已成为最吸引人的也最有效的信息传递手段和方式。
随着网络技术的发展,各类网站纷纷出现。
个人网站也成为了一种时尚。
越来越多的人希望拥有自己的网站,开辟网络世界的一片天地,展示自己的才华和风格。
1.1Web页概述
1、认识Web
Web(WorldWideWeb,简称WWW,又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型,它的影响已经进入了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。
Web采用浏览器/服务器(B/S)工作模式,其运作模式可以描述为:
请求→处理→应答。
Web以超文本标记语言HTML(HyperTextMarkupLanguage)与超文本传输协议HTTP(HyperTextTransferProtocol)为基础,通过浏览器为用户提供方便友好的信息浏览界面。
Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。
在Web服务方式中,信息以页面(或称Web页)的形式存储在Web服务器中,这些页面采用超文本的方式对信息进行组织,通过链接将一页信息链接到另一页信息。
这些相互链接的页面既可以放置在同一台主机上,也可以放置在不同的主机上。
页面到页面的链接信息由统一资源定位器URL(UniformResourceLocator)维持。
用户通过客户端应用程序(即浏览器)向Web服务器发出请求,服务器根据客户端的请求将保存在服务器中的某个页面返回给客户端,浏览器接收到页面后对其进行解释,最终将信息以图、文、声并茂的形式呈现给用户。
Web服务的特点在于高度的集成性,它能够实现不同类型的信息(如文本、图像、声音、动画和视频等)和服务(如New、FTP、Telnet、Gopher及Mail等)的无缝链接,特别适合于广域网中信息的组织、检索与显示。
2、Web技术综述
在信息技术领域中,Web技术几乎汇集了当前信息处理的所有技术手段,以求最大限度地满足人性化的特点。
Web界面五颜六色,既有文字、彩图、动画、声音、视频和一些相关信息或目录摘要,还可根据需要进入你想去的任何地方。
只要你愿意或是你能想到的服务,Web几乎都能实现。
Web技术涉及诸多技术领域:
(1)网络硬件技术
从两台或多台机器组成的对等网,到主机控制的以太网,再到生动活泼的因特网,每一处都需要有特定的硬件支持。
1968年,当“LOGIN”的“LO”从美国加州洛杉矶分校的电脑屏幕跳到斯坦福大学的电脑屏幕上时,标志着人类首次组网的成功!
组网技术经过几十年的锤炼,而今已经相当成熟了。
网络硬件技术包括很多方面,其主要的作用就是把网络中的各种资源通过相关网络连接设备连接起来,实施网络通信和达到共享网络资源的目的。
(2)Web管理技术
网络管理技术是一个永久的话题。
网络管理的难点是安全性问题,涉及到防止来自内部和外部的攻击,这对管理员自身的技术是一个严峻的考验。
一个合格的网管人员,除了管好网络,还得和黑客做技术上的较量。
网络管理涉及的方面可谓种类繁多,简单地说,网络管理就是为保证网络系统能够持续、稳定、安全、可靠和高效地运行,不受外界干扰,而维持网络系统设施所采取的一系列方式和措施。
网络管理由网管员通过驾驭网络操作系统和网络管理软件来实现。
Web管理则是在网络管理的基础上,针对网络建设和维护所进行的一系列管理。
诸如架设Web服务器、文件传输服务器、邮件服务器、域名服务器、代理服务器以及用户管理和计费管理等等。
1.2开发工具的介绍及选择
1、梦幻网页的编织者------Dreamweaver8.0
Dreamweaver是创建和管理网页的专业化可视编辑器。
使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。
Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。
Dreamweaver可以为用户做到:
使用动态HTML功能(例如具有动态效果的层和行为)而不用写一行代码。
它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。
Dreamweaver还是一个可以完全自定义的应用程序。
用户可以创建自己的对象和命令修改菜单和快捷键,甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。
至于Dreamweaver工作区是非常灵活的,因此它可以适应各种不同的工作风格和使用水平。
常用的Dreamweaver工作区组件有以下若干种:
(1)文档窗口可显示当前文档,文档的外观和浏览器中看到的非常相似。
(2)装载器中包含一些打开和关闭常用检查器和模板的按钮。
(3)对象工具栏包含创建不同类型的对象(例如图象、表格和层等)的按钮。
(4)属性检查器显示选定对象的属性。
(5)快捷菜单可以使用户对当前选择或区域快速执行某些命令。
(6)可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。
2、网页动画的制作软件----MacromediaFlash8.0
MacromediaFlash8.0用于web站点的交互式的矢量图形和动画的制作,它可制作出
用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画,创建出生动的富于表现力的网页。
Flash中的图形都是矢量的,占据存储空间较少,因而下载时间短,且能很好地适应浏览者不同尺寸的屏幕。
Flash的交互性的大部分设置就在Action和FsCommand里,通过对Action和FsCommand的设置,你可以随意的设置各事件发生的效果,还有对变量及函数的设置。
3、JavaScript
JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。
使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。
从而可以开发客户端的应用程序等。
它是通过嵌入或调入在标准的HTML语言中实现的。
它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择。
4、影像与动画的制作软件—AdobePhotoshop8.0
Photoshop8.0是目前最流行的图形、图像编辑设计软件,在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。
(1)文字处理更加方便
(2)增加的图层集使图层管理更有序。
(3)新增图像功能:
图像的剪切和剪裁更加方便。
(4)将所有工具的选项板改进为工具选项栏放置在工作区顶部,方便先项参数的设置。
(5)为了更方便地用路径绘画,改进增加了几何形状工具,通过选择工具的不同工作模式,可创建路径、几何形状或几何填充区,使得矢量绘图功能得到了加强。
5、动态网站的脚本语言--ASP
ActiveServerPages:
“动态服务器网页”,一般简称为“ASP”,ASP之所以能受到大家的重视与使用的原因,主要在于所产生的执行结果都是标准的HTML格式,而且这些程序是在网络服务端中执行,使用一般的浏览器(如IE或Netscape)都可以正确地获得ASP的“执行”结果,并且将这ASP执行的结果直接在浏览器中“浏览”,不像VBScript或JavaScript是在客户端(Client)的浏览器上执行,若使用VBScript来设计程序,客户端(Client)在IE浏览器中可以显示程序执行的结果,可是,客户端(Client)若使用Netscape浏览器就无法显示VBScript的执行结果。
6、ASP的特点:
(1)、任何开发工具皆可发展ASP
只要使用一般的文书编辑程序,如Windows记事本,就可以编辑。
当然,其他网页发展工具,例如,FrontPageExpress、FrontPage等也都可以;不过还是建议你用记事本来写,既省钱又方便,若是使用那些所见即所得的网页编辑来写ASP,可能会发生一些意想不到的离奇状态。
通过各家浏览由于ASP程序是在网络服务器端中执行,执行结果所产生的HTML文件适用于不同的浏览器。
(2)、语言相容性高
ASP与所有的ActiveXScript语言都相容,除了可结合HTML,VBScript、JavaScriptActiveX服务器组件来设计外,并可经由“plug-In(外挂组件模组)的方式,使用其他厂商(ThirdParty)所提供的语言。
(3)、隐密安全性高
如果我们在浏览器中直接查看网页的原始代码,就只能看到HTML文件,原始的ASP程序代码是看不到的!
这是因杰ASP程序先于网站服务(WebServer)端执行后,将结果转换成标准HTML文件,再传送到客户端(Client)的浏览器上,因此,我们所辛苦撰写的ASP程序并不会轻易地被看见进而被盗用。
(4)、易于操控数据库
ASP可以轻易地通过ODBC(OpenDatabaseConnectivity)驱动程序连接各种不同的数据库,例如:
Acess、Foxpro、dBase、Oracle等等,另外,ASP亦可将“文本文件”或是”Excel”文件当成数据库用。
(5)、面向对象学习容易
ASP具备有面向对象(Object-Oriented)功能,学习容易,ASP提供了五种方便能力强大的内建对象:
Request、Response、Sever、Application以及Session,同时,若使用ASP内建的“Application”对象或”Session”对象所撰写出来的ASP程序可以在多个网页之间暂时保存必要的信息。
(6)、ASP的六大内部对象
对象名称功能描述
RequestResponseServerSessionApplicationObjectContext从客户端取得信息将信息送给客户端提供一些Web服务器工具储存在一个
Session内的用户信息,该信息仅可被该用户访问在一个
ASP-Application中让不同的客户端共享信息可以用来配合
MicrosoftTransaction服务器进行分布式事务处理
所以我选择了ASP结合Dreamweaver架构个人站点。
1.3关系型数据库的选择
1、Access
MicrosoftAccess是一种桌面数据库,只适合数据量少的应用,在处理少量数据和单机访问的数据库时是很好的,效率也很高。
但是它的同时访问客户端不能多于4个。
MicrosoftAccess数据库有一定的极限,如果数据达到100M左右,很容易造成服务器iis假死,或者消耗掉服务器的内存导致服务器崩溃。
2、SQLServer
MicrosoftSQLServer是基于服务器端的中型的数据库,可以适合大容量数据的应用,在功能上管理上也要比MicrosoftAccess要强得多。
在处理海量数据的效率,后台开发的灵活性,可扩展性等方面强大。
因为现在数据库都使用标准的SQL语言对数据库进行管理,所以如果是标准SQL语言,两者基本上都可以通用的。
MicrosoftSQLServer还有更多的扩展,可以用存储过程,数据库大小无极限限制。
本站属于个人站点采用Access数据库就行了。
第2章个人网站设计分析
2.1相关术语及解释
1、Internet
Internet(英特网)诞生于上世纪60年代,发展非常慢,到90年代才开始迅速发展。
现在英特网已经是世界上最大的网络的,联在英特网上的电脑有数亿台。
上面的资料、信息数不胜数,所以有人把英特网叫成是信息的海洋、知识的海洋。
2、站点
所谓站点,就是将网页文件和素材文件,有条理地放置站点文件夹里,这些文件与文件夹就构成了网站的实质内容。
站点文件夹里除了网页文件还有素材文件,所谓素材就是网页中所用到的图像、声音、视频等,这些内容是以单独文件的形式存在。
3、超链接
我们在浏览网页时,当鼠标指针指向某段文本或是某个图像,鼠标指针变成小手状,单击鼠标可以打开其他的网页或是跳转到其他的网站,这就是超链接。
采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起,实现相互间的跳转,方便信息的浏览和查找。
人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源,实现在互联网中的漫游。
超链接能使Web服务存在广泛和持久的生命力,超链接可以说是Web的灵魂。
4、URL
URL(UniformResourceLocator的缩写),统一资源定位器。
互联网中某种信息资源以某种方式存储在网络中的某处,必须用一个惟一的URL来进行标识,这样才能方便查找。
对于Web来说,可以简单并通俗把URL理解为网址。
每个Web网页都有自己的网址,在浏览器地址栏里输入网页的URL,就可以访问这个网页。
例如,
5、IP地址
为了使互联网上的电脑主机在通信时能够相互识别,每台主机都分配一个能表示其位置的IP(InternetProtocol)地址,这如同公用电话网中电话的号码一样。
IP地址是由专门的互联网机构来分配。
IP地址具有惟一性,是由32位二进制数组成,分为四组,每组8位,每组之间用小数点分隔,在实际之中常转换成十进制数表示。
2.2个人网站的由来和发展
互联网在中国的出现只有短短七年时间,1994年中国科学院高能物理研究所设立了国内第一个Web服务器,推出一个叫做“中国之窗”的网页,这可能是国内Internet上出现的第一个Web网页,1995年开始,中国教育科研网,中国科技网,中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成,使互联网在中国开始真正进入社会生活之中。
这时期,个人网站出现的条件还很不成熟,国内上网的人数很少,也缺乏支持个人建站的环境,用户很难找到理想的个人主页存放地。
个人网站发展的第二阶段是从1997年初到1998年,这段时间,中国网民数量飞速增长,个人网站日渐繁荣,个人主页的数量急剧增加。
同时,越来越多的商业网站开始免费提供个人主页空间,这些良好的外部极大地促进了个人网站的发展,涌现了一批很著名的个人网页,从1998年下半年开始,随着互联网应用的深入的普及,随着众多主页制作工具的出现,使得建站成为一件非常容易的事,创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。
2.3我的个人网站的设计与规划
1、明确架设网站的目的及客户要求
通常情况下,架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流,具有较强的目的性,我的个人网站一般体现在:
为了展示自己的风采,让大家和我一起分享我的心得与经验,让和我有共同爱好的朋友有一个倾诉的地方。
2、我的个人网站概貌
因为是个人网站,所以只是选择了自己擅长和喜爱的内容,在突出自己的风格和特点的同时,还应用了现在流行的网站设计技术和数据库技术。
因此将网站设计分为前台页面展示平台和后台在线管理平台。
3、功能划分
网站设计有新闻更新,浏览者可以在首页浏览自己喜欢的新闻,并且可以在留言板和大家交流,在后台管理页面中,通过身份认证,管理员——我,可以对网站信息进行管理。
站内的其它页面均是我自己的精心收藏,与大家一起分享。
4、功能描述
(1)新闻
嵌入XX新闻每日更新代码,使用在本站首页显示今日国内国际新闻和体育新闻,供浏览者浏览。
(2)留言板
是一个我与大家谈心交流的地方,在留言板中,我们可以畅所欲言,和大家进行交流。
就我们感兴趣的话题展开讨论。
和大家进行沟通。
(3)后台管理页面
是我管理和添加到新内容的地方,为了方便实现信息的经常更新,我设计了这个管理页面,经过身份认证后我可以进入网站对其中的信息进行管理。
(4)日记
在其中展示我喜爱的东西,包括我的日记、精品文章、社会文化和一些杂七杂八的文章。
奇文共欣赏,疑义相与析。
我只想起到抛砖引玉的作用,让大家从中认识我和了解我,让一些美好的东西我们大家共同来欣赏。
(5)相册
在其中展示漂亮的图片,包括我的照片、我的同学、风景照片、妹眉帅哥栏目。
让大家一起来欣赏人物、风景风采。
(6)音乐
在其中展示个人喜欢的歌曲,朋友们可以在里面点播自己喜欢的歌。
(7)页面组织和数据库设计
在明确了我的个人网站的风格和定位后,就是网站的材料组织以及网站的页面设计和数据库设计。
建立一个网站好比写一篇文章,首先要拟好提纲,文章才能主题明确,层次清晰。
如果网站结构不清晰,目录庞杂,内容东一块西一块。
结果不但浏览者看得糊涂,自己扩充和维护网站也相当困难。
网站的题材确定后,并且收集和组织了许多相关的资料内容,但如何组织内容才能吸引网友们来浏览网站呢?
栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。
因此我将自己的个人网站分为五个栏目,分别是关于我、相册、日记、音乐、留言。
第3章详细设计
3.1数据库的设计
1、数据库搭建
使用Access2000实现关系型数据库
(1)用户密码登记表Admin
存储了系统用户和普通用户的信息,包括:
姓名,口令,验证码,名称。
(2)留言基本档案表Book
存储了用户的档案包括:
ID,留言者名字、留言者QQ、留言者E-mail,留言内容,留言者主页,留言时间,回复留言,留言头像,留言表情,留言者IP,留言者地址,留言主题,其中ID为该表的主关键字。
(3)歌曲基本信息表HN_down
(4)音乐分类表HN_downcla
(5)日记基本信息表HN_news
(6)日记分类表HN_newscla
(7)图片基本信息表HN_pro
(8)相册分类表HN_procl
(9)网站基本信息表WebBasicInfo
以上数据表为Access类型的库文件,将它定名为:
“d
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 浅析 网页 设计