毕业设计（论文）个人空间设计

1、山西职业技术学院计算机工程系毕业设计论文论文题目：个人空间设计专 业：计算机应用技术 班 级：计应a902姓 名： 指导教师：2011年 11月 16日山西职业技术学院 计算机工程系毕业设计任务书设计题目：个人空间设计设计任务：设计一个小型网站，要求应用图像处理和动画制作工具、vbscript或jscript脚本语言、服务器端脚本环境等知识。设计目的：通过本毕业设计培养学生综合运用所学知识分析和解决实际问题的能力，掌握相关网页制作软件，强化计算机实际应用技能训练，为今后走进企业，开展网站规划、设计和开发打下初步的基础。设计时间：从 2011年11月5日至 2011年12月5日 共 4 周 设计

2、人员：刘健学 号：0911090207指导教师：杨寅2011年11月5日目录摘要- 2 -前言- 3 -第一部分- 4 -一 、基本概念- 4 -二、网站的组织结构- 8 -第二部分 - 9 -一、确定网站主题- 9 -二、为网站整体规划- 9 -三、准备素材和所用到的软件- 10 -四、制作网页- 10 -五、 测试- 14 -六、维护- 15 -第三部分- 15 -第四部分- 17 -总结- 20 -致谢- 21 -参考文献- 22 -摘要随着经济社会的发展，计算机已被应用到社会生活的各个领域。与此同时，互联网作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还

3、是互联网信息的主要承载者，在 internet 上表现出其及其重要的地位，并发挥着其及其重要的作用。无论是在国内还是国外都得以迅速的发展和壮大，并被人们重视和关注。互联网已经彻底的改变了世界，互联网的世界里蕴藏着无限的可能，在这种情况下，各行各业及其个人、单位、工厂、企事业等等在网上构筑属于自己的网络信息平台，保护自己的网络资源并在互联网上开辟自己的市场和消费群体，以及构造自己的数字化世界和加强全球范围内不同地域的人们联系交流等等活动也就显的日益重要。于是各种各样的网站便如雨后春笋般地出现鱼龙混杂且良莠不齐。internet 的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及

4、网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人web页面开发，形形色色，五彩缤纷。网页制作已成为计算机网络领域最热门的话题。internet 的开放性使个人建立自己的网站成为可能，拥有自己的网站也越来越成为一种时尚，同时创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。关键字：互联网 网站建设 网页制作 个人网站前言第一批中文博客是在2002年出现的，早些时候博客只是一个新的网络名词并无特殊之处，就在不经意间，博客竟如雨后春笋般冒出来，博得越来越多网民的欢心，并在互联网上引发了一股博客热潮。博客的发展现状呈现出以下特点：发展速度惊人；从精英向大

5、众人群迅猛扩展；博客人群主体更加多元化；博客服务商激增，出现群雄争霸局面；博客资源争夺激烈，博客服务商面临市场洗牌。博客发展到今天已经取得了相当规模的成就，以新浪、搜狐、网易为代表的三大门户网站都已经推出了自己的博客服务，还有一些著名的专业博客网站都已经对博客资源展开了激烈的争夺。在规模扩大的同时博客技术也在不断的进步和完善，目前博客技术已经取得的成果包括：发表日志，发表评论，相册等一些通用功能。我们已经了解到博客在互连网上已经具有相当的规模，可以说它已经被人们所接受，博客改变着人们的交流方式和情感体验和表达形态，改变着人们聚散的方式；它无限放大着人们对于未来信息世界的预想，它影响着整个中国互

6、联网的发展走向，甚至可能在今后一个时期，波及或影响着现实社会的民主决策过程。无疑博客这样一种影响力颇大的媒介将有利于我们好的思想好的事物的传播，有利于社会的进步。所以我们要把这种好的影响力发挥到最大。个人网站可以帮助个人进行全面的信息化，以多种形式达对信息获取、组织、思考、表达、共享和交流的目的。以个人为中心，建立一个完全属于自己的可定制的个性化网络平台。来自文章的评论，留言板都可以很好的进行交流，倾听别人的声音。个人网站的自由、开放精神，并使之更容易操作，更具个性需求，而不需要高深的技术。第一部分一 、基本概念1、 网页（web page) 网页(web page)，是网站中的一页，通常是h

7、tml格式（文件扩展名为。html或。htm或。asp或。aspx或。php或。jsp等）。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。网页是构成网站的基本元素，是承载各种网站应用的平台。文字与图片是构成一个网页的两个最基本的元素，除此之外，网页的元素还包括动画、音乐、程序等等。2 、主页（home page） 主页（home page)它是一个网页，是进入一个网站的开始画面。也就是说，主页是一个网站的门面，要想设计出一个优秀的网站，就必须有一个“引人注目”的主页。它必须引人入胜，能吸引每一个来访者的注意力，引发人们的好奇心，能让人产生一种深入探索你的网站的冲动。优秀的主页是一个好

8、的网站必须具备的第一要素。3 、超级链接（hyperlink) 超级链接是www的神经系统，它也是向导，把你从一个网页带到另一个网页，或者从网页的某一部分引导到另一部分。超级链接是用特殊的文本或图象来实现链接的，单击它就可以实现它的功能。4、 超文本（hypertext) 超文本是一种新的文件形式，指一个文件的内容可以无限地与相关资料链接。超文本是自然语言文本与计算机交互、转移和动态显示等能力结合，超文本系统允许用户任意构造链接，通过hyperlink来实现。5 、超文本语言（hyper text markup language）超文本语言(html)是制作编写网页、包含超级链接的超文件的标准

9、语言，它由文本和标记组成。超文本文件的扩展名一般为 .html或.htm。6、对 asp 的简要介绍 active server pages（asp）是服务器端脚本编写环境，使用它可以创建和运行动态、交互的 web 服务器应用程序。使用 asp 可以组合 html 页、vbscript 脚本命令和 javascript 脚本命令等，以创建交互的web页和基于web的功能强大的应用程序。由于脚本程序是在服务器上而不是在客户端运行，传送到浏览器上的web页是在web服务器上生成的。所以不必担心浏览器能否处理脚本：web 服务器已经完成了所有脚本的处理，并将标准的 html 页面传输到浏览器。由于只

10、有脚本的结果返回到浏览器，所以服务器端脚本不易被别人复制。用户看不到创建他们正在浏览的页的脚本命令。asp访问数据库的原理：asp是服务器端的脚本执行环境，可用来产生和执行动态的高性能的web 服务器程序。当用户使用浏览器请求asp主页时，web服务器响应，调用asp引擎来执行 asp 文件，并 解释其中的脚本语言（javascript 或 vbscript），通过 odbc 连接数据库，由数据库访问组件 ado（active data objects）完成数据库操作，最后asp生成包含有数据查询结果 的html主页返回用户端显示。7、iss 的安装与设置 在因特网/企业网上的基于浏览的开发方

11、案中，microsoft 的 iis 起到客户端与服务器端的连接作用。当访问者在浏览器中键入对你服务器上的网页进行访问的请求，这个请求通过网络路由到服务器端，然后服务 器再将它交给 iis 处理。iis 检索5.0 是专为 windows 2000 设计的 web 服务器软件。windows 2000 server 在安装系统时，就可以自动安装 iis 5.0；但 windows 2000 professional 不会自动安装它。下面就简单介绍一下在我设计 过程中在 windows 2000 professional 上安装 iis 5.0 的过程：（1）首先，我选择“开始”?“设置”?“控

12、制面板”，在“控制面板”中选择“添加或删除程序”后，弹出“添加/删除程序”对话框。（2）在左边 4 个可选择的导航栏中选择“添加/删除 windows 组建”按扭，弹出一个新的对话框。（3）在显示的组建里面，选中“internet 信息服务（iis）”组建的复选框，单击“下一步”按钮，就进入了 iis。8、dreamweaver 8 技术作为 macromedia studio 8 web 开发套件的一个组成部分，dreamweaver 8 增加了许多激动人心的新功能。作为业界领先的网页制作软件，dreamweaver 8 这次除了增加了许多精巧的改进、工作流程更加先进之外，在新功能中还加入了

13、经过重新设计的css工具、速度更爽的后台 ftp，以及用于将 xml 文件转换为设 计完美且更友好地支持浏览器的文档的工具。dreamweaver 8通过该工具使用户能够高效地设计、开发和维护基于标准的网站和应用程序。使用 dreamweaver 8，web开发人员能够完成开发的全过程，从创建和维 护基本网站到支持最佳实践和最新技术的高级应用程序.。下面介绍一下 dreamweaver 8中比较重要的新功能。 （1）改进的工作流程 dreamweaver 8 引入了许多精巧的改进，可以帮助网页设计师更加有效地工作。文档窗口的标签式界面将所有打开的文档放置在一个面板中，就象我们经常使用的标签浏览

14、器 maxthon，切换文档时只需要单击一次鼠标左键就可以了，这样我们就不再需要为查找打开的窗口而费时耗力。 此外，用户现在可以将面板的排列保存为“workspace layout”(工作区布 局)。通过这种方式，用户可以将面板组合保存下来，以适应不同的工作流程。例如，用户可以创建一个用于数据驱动网页设计时使用的工作区布局，再创建一个用于设计css成分比较多的网页的工作布局，在设计这两种不同的网页时，可以在这两种布局之间来回切换。有几个新功能对于设计者来说是非常有吸引力的：放大工具可以帮助更容易地对齐图像、选择较小的对象以及查看较小的文本；通过在页面上拖放引导线可以更精确地定位对象的位置；dr

15、eavwerver 显示引导线来表现出不同分辨率下的可视区域。对 flash 视频的支持使得用户可以使用类 vcr 控制的方式直接在网页中嵌入视频。这种视频的创建与编码需要另外的程序，比如 flash mx 2004。 （2）扩展的 css 支持。9、access 的组件介绍 我们在 web 服务器运用 web 应用程序进行的最常见和最实用的任务就是访问服务器端的数据库。asp内建的 databse access 组件使得我们能够轻而易举地通过 actiexx data 而 objects(ado)访问存储在服务器端的数据库或其他表格化数据结构中的信息。二、网站的组织结构网页的组织结构有以下四

16、种：1、线性结构 这是网站最简单的一种结构，它是以某种顺序组织的，可以是时间顺序，也可以是逻辑甚至是字母顺序。通过这些顺序呈线性地链接。如一般的索引就采用线性结构。线性结构是组织网页的基本结构，复杂的结构也可以看成是由线性结构组成的。2、二维表结构 这种结构允许用户横向、纵向地浏览信息。它就好象一个二维表，如看课表一样。3、等级结构 等级结构由一条等级主线构成索引，每一个等级点又由一条线性结构构成。如网站导航等就是这种结构。在构造等级之前，你必须完全彻底的理解你的网站内容，避免线性组织不严的错误，不方便浏览者。4、网状结构 这是最复杂的组织结构，它完全没有限制，网页组织自由链接。这种结构允许访

17、问者从一个信息栏目跳到另一个栏目去，其目的就是充分利用网络资源和充分享受超级链接。整个互联网就是一个超级大的“网”状结构。 第二部分一、确定网站主题网站主题就是建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像综合网站那样做得内容大而全，包罗万象。所以必须要找准一个我最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。我的个性喜欢简单明了，所以我的网站也是很直观，大方的，一目了然的。我喜欢一些优美的文字，也比较喜欢自己去写一些东西，所以我的网站以文字为主。另外加一些图片让浏览者可以更好的了解我。二、为网站整体规划、个人日志：通过个人资

18、料和个人心情内容或是日志来展现。我准备把自己写的一些文章或自己喜欢的一些文字放上去，以便和网友一起交流心得。、图片：展示个人风采的方法，把自己的照片或是自己喜欢的图片贴上去，其中有一些是自己拍的有一些是网上找的。、音乐：展现个人喜爱，把自己喜欢的音乐放上去。并把自己的感受也附加到里面，和网友共同分享。、留言：采用asp技术进行开发一个留言模块。可以方便游客留言和联系。作为自己和网友交流的平台。三、准备素材和所用到的软件明确了网站的主题以后，就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，就要尽量搜集材料。要搜集的素材包括图片（我自己的照片和喜

19、欢的动漫、游戏的图片）和音乐以及一些日志或喜欢的文章。由于制作网站时要对图片进行编辑，所以要用到photo shop和flash 。制作留言版时要用到visual studio 2005，所以也要用到access数据库;做网页时要用到dreamweaver 8； 四、制作网页1、设置首页布局 每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，首页是打开网站后在浏览器中显示的第一个页 面。它是起什么名字通常要视 server 端的设置，一般的有 index.htm,default.htm 或 home.htm 等，目前主要以 inde

20、x.htm 的居多。当然，后缀名为 html 也是正确的。具体设 置方法是：右健单击“?”浮动面板中的 index.htm,在弹出的菜单中选择“设成首页”。首页布局的操作步骤： （1）在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。 （2）将变成“+”形状的鼠标游标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。（如果绘制的是第一个表格必须从网页的最左上角开始绘制）也可以通过插入表格的方式进行布局。2、设置首页的页面属性首先双击“?”浮动面板中的 index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改

21、/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”“链接”“标题” . “标题/编码”“跟踪图像”5 项，右侧区域则显示各类中可以设置的项目。3、插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者。首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第 5 个即为“图像。4、插入文本文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，它是最关键的因素。插入文本的两种方

22、式： 一种是在网页编辑窗口中直接用键盘敲入文本。另一种是复制文本的方式。直接使用 dreamweaver 的文本复制功能，将大段的文本内容拷 贝到网页的编辑窗口来进行排版的工作， 具体步骤如下：打开文本编辑软件（如 microsoft word），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷 键 ctrl+c，之后切换回 dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/ 粘贴” 命令或直接使用快捷键 ctrl+v,即可将大段的文本快速粘贴到网页中。5、制作音乐版块操作如下：通过在数据库中存放音乐路径，达到在网页上播放的效果。在音乐的首页上放置了

23、歌曲的名字，网友无需登录，即可收听自己喜欢的歌曲。代码为： embed src= loop=false autostart=false name=bgss2 width=200 height=120 以上代码用来读取数据库中的音乐路径，此控件专门播放 mp3 的音乐。进入播放界面后，就会出现此控件，点击播放就直接调用数据库中的音乐进行播放。6、要创建留言版就要用到asp.net技术。所以要先创建access数据库。数据库如图1所示：图 1 留言板数据库再用gridview控件把数据库绑定到网页上。用asp.net做的动态网站可以更新数据库。更新网页。但是留言版界面要有两个方面：(1) 发表留言

24、界面用户名、标题和内容填完以后点击提交按钮系统就会提醒你提交成功，察看帖子，如果填写不完整系统就会提示你错误信息。内容提交后，就会自动保存在数据库中，其中连接数据库代码如下：保存内容到数据库代码如下： 刷新数据库表中的内容，产生新的记录集。（2）察看留言界面 进入察看留言界面后，可以看到每个留言者的留言内容。进入每个帖子的浏览页，主要是通过连接数据库获取该帖子的 id 号，其代码如 下： 分别显示作者、时间和内容的代码如下： 五、 测试dream weaver 提供了全面检测站点的功能，它比检测链接更全面。全面地检测内部、外部链接、去除错标签、空标签、多余的标签等，它的使用相当简单，使用全面检

25、测站点功能如下： 1、选择菜单中【站点】的【报告】命令，打开一个窗口。 2、选择检测范围，在【报告】选项中有四个内容供选择：curent document、entire local site、select files in site、folder。 3、对工作流方面的信息进行检测。 4、对html文件的信息做出检查。 把编好的网站文件复制到d:/my web 文件夹中，可以打开浏览器，在地址栏中输入http:/localhost/my web/index.asp，就会看见网站了。网页如图2所示：图表 2六、维护网站建成后并不意味着网站建设的结束，网站内容需要不断更新，这样才会不断的吸引更多的浏

26、览者访问，才能成为一个优秀的网站。第三部分做网站时应该注意的问题一、不要在一篇短文里提供太多的超链接适当、有效率地使用超链接，是一个优良的网页不可或缺的要件之一。但过份滥用超链接，造成短短的一篇文章里却处处是links，反而损害了webpage行文的流畅与可亲性。在充斥着链接的短文里，很可能其中不少是无意义、没必要的links。在一篇长短适中的webpage里，文章里提供的文字式超链接最好不要超过10个以上，以使全页行文能够顺畅，不至于眼见一大堆超链接，反而不知从何点取才好。况且，连续、肩并肩地出现两、三个文字式超链接，很容易被误认为只是一个长度较长的超链接，于是被浏览者忽略掉，便也失去了这些

27、超连结的原本功能。应该抓住能传达主要讯息的字眼当做超链接的锚点（anchor），可有效地控制住超连结的字串长度，避免字串过长（如整行、整句都是锚点字串）或过短（如仅一个字当做锚点）。二、注意超连结颜色与单纯叙述文字的颜色呈现www的语言html允特别标明单纯叙述文字与超链接的用色，以便丰富webpage的色彩呈现。超链接用色，会较有利于阅读纯粹的叙述文字采用较暗、较深的颜色来呈现（如黑色、墨绿色、暗褐色），超链接文字则以较鲜明抢眼的色彩来强调（如亮黄色、翠绿色、鲜橘色），至于探访过的超链接则采用较低于原超连结亮度的颜色做呈现。三、注意文件路径不要将所有文件都存放在根目录下。有网站制作者为了方便

28、，将所有文件都放在根目录下。这样就很容易造成：文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率；上传速度变慢，服务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，很明显，文件量越大，等待的时间也将越长。 第四部分制作网站时用到的知识一、如何拿图片作文章背景1、可以从网上搜集网址以http:/开头的图片。2、打开发表文章窗口3、在后粘贴以下代码4这样图片就显示出来了，这时就可以在图片上打印编辑自己的文章了。二、动态图象的制作1、把图片发到本博客的某篇文章里。2、打开这篇图片文章，点击图片，地址栏里就出现一个新的地址。3、建立新的空白面板，切换到“显示源代码”状态。4、在代码间插入如下代码：三、将flash背景添加到不同的位置:1、主页添加flash要给页面添加flash效果，可以建立一个新的自定义空白面板，显示源代码后，写如下代码：2、要在新文章使用此效果，可以在文章编辑时显示源代码，然后写上面的代码。3、可以循环滚动的图片:滚动图片的代码是：imgsrc=图片网址width=300border=0总结通过这