个人博客网站设计毕业论文.docx

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

个人博客网站设计毕业论文

【最新资料，WORD文档，可编辑修改】

摘要

Blog的全名应该是Weblog，中文意思是“网络日志”，后来缩写为Blog，而博客（Blogger）就是写Blog的人。

从理解上讲，博客是“一种表达个人思想、网络链接、内容，按照时间顺序排列，并且不断更新的出版方式”。

随着互联网技术的高速发展，生活节奏的加快，博客被越来越多的人选择作为学习和交流的工具。

博客的内容丰富多彩，有对其他网站的超链接和评论，有个人构思，还有新闻日志、照片、诗歌和散文等。

博客具有自主性、开放性、互动性和共享性的特点，是一个很好的交流的渠道，思想展现的舞台和学术探讨的园地。

本系统是一个实用的个人博客网站，集博客、留言板、链接于一身。

未注册用户（访客）可以浏览文章，发表评论及留言。

也可以通过注册成为该系统的注册用户，注册用户可以管理自己的博客、留言板、友情链接等，同时还可以发表新日志，上传附件等。

关键词：

博客，日志，评论，留言

Abstract

BlogfullnameshouldbetheWeblog,inChinesemeans"Weblog",laterknownasBlog,theblog（Blogger）whoiswritingBlog.Fromtheunderstandingofspeaking,theblogis"apersonalexpressionofideas,networklinks,content,arearrangedinchronologicalorder,andconstantlyupdatethepublicationofway."

WiththerapiddevelopmentofInternettechnologyandhighspeedofliferhythm,Bloghasbeingchosenbymoreandmorepeopleasthetoolofstudyandcommunication.ThecontentofBlogisveryrichandcolourful:

somehashyperlinkandcommentofotherwebsite,someaboutpersonalthinking,news,music,articleandsoon.Becauseofthecharacterofindependence,open,interactionandshareofBlog,itisregardedasanoutletofgoodexchangechannel,thestageofpersonalthoughtdisplaying,andthegardenareaofknowledgestudying.

ThissystemisapracticalBlogwebsitewhichhasBlog,photoalbum,messageboardandlink.Visitorcanbrowsearticles,postcommentsandleavemessages.ThevisitorcanregisterintheBlogwebsite,afterthattheycanmanagetheBlog,photoalbum,messageboard,linkoffriendshipetc.Atthesametime,theycanalsopostnewlog,pictureetc.

Keywords：

Blog，log，comment，message

引言

随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。

网页的艺术设计，日益被网站建设者所注重。

在目前国内对此领域研究甚少的情况下，作者将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。

作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。

在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功能”都是为了更好地表达网站主题这一观点。

网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。

表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。

网站数量的激增，意味着网络深远的影响力已经越来越多地为人们所共识，网络已经实实在在地为人们带来了财富和知名度。

于是，很多单位和个人都开始准备建立自己的网站。

不论出于什么目的，所有人都希望自己建立的网站信息量丰富，功能尽可能强大。

自己选择的这个个人的网站设计，首先，能丰富自己的文化知识，在建设网站的过程中能学到实际的网络知识；其次，对与即将毕业的学生，个人网站是一个很好的网络身份证明，可以让别人对自己有更好的了解。

最后，有这么一个自己设计和制作的网站，可以证明用有了一定的计算机水平，这样比简单空白的文本式建立要更有说服力。

一、网页设计的需求

1.1、网站开发的背景

近几年来，博客及博客文化正成为互联网的热点，并被视为继e－mail、bbs和icq之后出现的第四种网络交流方式。

在网络上发表Blog的构想始于1998年，但到了2000年才真正开始流行。

而2000年博客开始进入中国，并迅速发展，但都业绩平平。

直到2004年木子美事件，才让中国民众了解到了博客，并运用博客。

2005年，国内各门户网站，如新浪、搜狐，原不看好博客业务，也加入博客阵营，开始进入博客春秋战国时代。

起初，Bloggers将其每天浏览网站的心得和意见记录下来，并予以公开，来给其他人参考和遵循。

但随着Blogging快速扩张，它的目的与最初已相去甚远。

目前网络上数以千计的Bloggers发表和张贴Blog的目的有很大的差异。

不过，由于沟通方式比电子邮件、讨论群组更简单和容易，Blog已成为家庭、公司、部门和团队之间越来越盛行的沟通工具，因为它也逐渐被应用在企业内部网络（Intranet）。

博客正在改变社会交流方式。

目前，全球参与博客的人数已经达到千万之众，而且每几秒钟，都有一名新的博客用户加盟进来。

很多记者、律师、教授、学者、专家，甚至法官和议员都有了自己的博客网站，形成了独特的博客文化。

美国总统候选人乐于开设博客站点，作为竞选的重要手段。

企业界也正在把博客方式引入企业内部网和公司网站，用于非正式的知识管理和网络营销等。

政府部门和教育领域都在尝试利用博客构建内部知识管理和沟通交流的新体系，可以让职员发表评论，积累知识，链接有意思的网络资源，促进彼此的交流沟通。

显然，博客的发展对应了全球范围内知识社会来临的背景。

对于中国，这样一个组织机构信息化仍处于初级阶段的国家，博客这种充分发挥个人主导性和积极性的非正式知识管理工具和其深度沟通交流的功能，对于我们国家的知识传播、知识扩散和有效提升组织的学习和创新能力，具有更特殊的意义。

博客用户的快速增长以及组织机构对它的广泛应用，有助于推动中国向学习型社会演进。

本系统根据现实的情况以及博客互动性的特点进行设计开发，旨在为用户提供一个交流的平台，促进用户间的深度沟通；并根据博客共享性的特点，促进用户之间的知识交流，使其成为一个学习的园地。

1.2、网页的开发环境

网页在制作的前期一定要考虑到网页的开发环境，因为这直接影响到网页在网络上的使用情况。

同时伴随着计算机和应用软件的快速发展，系统的开发环境对与一大部分的软件已经不是那么重要，然而现阶段大多数用户所使用的的系统环境基本上是一样的，因此我们还是必须在通用性的基础上考虑到大多数用户的系统环境开发环境。

第一是操作系统的选定。

操作系统是计算机的操作平台，是计算机的灵魂所在，因此必须先要决定软件开发所应用的操作系统。

操作系统相对比较分散，但是系统的大部分功能是通用的。

如Windowsxp、Win7操作系统，还有在网络服务器上广泛应用的Unix操作系统。

根据应用的广泛性、普遍性和实用性，系统决定选用Win7操作系统作为软件的操作系统平台。

第二是数据库软件的选定。

数据库是以个数据的存储中心，数据库软件就是这个存储中心的缔造者，数据库的可用性直接影响着一个数据的多方功能。

所以我选择了MicrosoftAccess可以方便地生成各种数据对象，利用存储的数据建立窗体和报表，可视性好。

作为Office套件的一部分，可以与Office集成，实现无缝连接。

第三是IIS服务器的安装。

IIS是InternetInformationServer的缩写，它是微软公司主推的服务器，最新的版本是Windows2003里面包含的IIS6.0，IIS与WindowNTServer完全集成在一起，因而用户能够利用WindowsNTServer和NTFS（NTFileSystem，NT的文件系统）内置的安全特性，建立强大，灵活而安全的Internet和Intranet站点。

IIS支持HTTP（HypertextTransferProtocol，超文本传输协议），FTP（FeleTransferProtocol，文件传输协议）以及SMTP协议，通过使用CGI和ISAPI，IIS可以得到高度的扩展。

IIS支持与语言无关的脚本编写和组件，通过IIS，开发人员就可以开发新一代动态的，富有魅力的Web站点。

IIS不需要开发人员学习新的脚本语言或者编译应用程序，IIS完全支持VBScript，JScript开发软件以及Java，它也支持CGI和WinCGI，以及ISAPI扩展和过滤器。

IIS的设计目的是建立一套集成的服务器服务，用以支持HTTP，FTP和SMTP，它能够提供快速且集成了现有产品，同时可扩展的Internet服务器。

二、网站规划相关技术综述

2.1、网站开发工具的介绍及选择

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

它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript,PHP,ASP,JSP等多种脚本语言。

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

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

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

Dreamweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。

除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。

它包含HomeSite和BBEdit等主流文字编辑器。

帧（frames）和表格的制作速度快的令您无法想像。

进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。

所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。

当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。

梦幻样版和XMLDreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。

建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。

您也可以使用样版正确地输入或输出XML内容。

全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。

对于cascadingstylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。

使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。

当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。

主要功能

　　1.业界领先的工具

　　利用世界级的Web设计工具的所有灵活性和强大功能。

在“设计”视图中进行像素完美型设计,在“代码”视图中制作复杂的代码,或专功一方面的研究。

使用您的最佳工作方式工作。

　　2.集成的工作流

　　在DreamweaverCS3内设计、开发和维护内容,同时利用与其他Adobe工具（包括AdobeFlashCS3Professional、FireworksCS3、PhotoshopCS3、ContributeCS3及用于创建移动设备内容的全新AdobeDeviceCentralCS3）的智能集成。

　　3.完整的CSS支持

　　发现可视CSS工具的优势,使用这些工具可以轻松地在文件内或文件之间查看、编辑和移动样式,以及查明您的更改将如何影响设计。

借助全新的CSS布局加速您的工作流,并借助全新的浏览器兼容性检查测试您的设计。

　　4.集成的编码环境

　　借助代码折叠、颜色编码、行号及带有注释/取消注释和代码片断的编码工具栏,组织并加速您的编码。

应用适用于HTML和服务器语言的代码提示。

　　5.支持领先的技术

　　利用对领先Web开发技术（包括HTML、XHTML、CSS、XML、Javascript、Ajax、PHP、AdobeColdFusion、ASP、ASP.NET和JSP）的支持。

　　6.轻松的XML

　　使用XSL或适合于Ajax的Spry框架,快速集成XML内容。

指向XML文件或XMLfeedURL,DreamweaverCS3将显示其内容,这使您能够将适当的字段拖放到您的页面上。

　　7.FLV支持

　　无需任何Flash知识,只需五次点击,即可轻松地将FLV文件添加到您的Web页中。

自定义视频环境以匹配您的网站。

　　8.学习资源

　　在您使用全面的教程、参考内容和指导性模板的同时进行学习,这样可轻松扩展您的技能集并采用最新的技术。

　　9.扩展的Dreamweaver社区

　　享受庞大的Dreamweaver社区的所有益处,包括在线Adobe设计中心和Adobe开发人员中心、培训和研讨会、开发人员认证计划、用户论坛以及DreamweaverExchange中提供的超过1,000个可下载的扩展。

　　10.跨平台支持

　　挑选您的平台:

DreamweaverCS3可用于基于Intel或PowerPC的Macintosh计算机,也可用于WindowsXP和WindowsVista?

系统。

在您的首选平台中设计,然后跨平台交付更加可靠、一致和高性能的结果。

2.1.2、CSS+DIV介绍

CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。

通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。

页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。

将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

在网页上使用样式表有三种方法可以在站点网页上使用样式表：

将网页链接到外部样式表。

在网页上创建嵌入的样式表。

应用内嵌样式到各个网页元素。

每一种方法均有其优缺点：

当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。

在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。

如果人们决定更改样式，只需在外部样式表—中作一次更改—而该更改会反映到所有与该样式表相链接的网页上。

通常外部样式表以.css做为文件扩展名，例如Mystyles.css。

当人们只是要定义当前网页的样式，可使用嵌入的样式表。

嵌入的样式表是一种级联样式表，“嵌”在网页的标记符内。

嵌入的样式表中的样式只能在同一网页上使用。

使用内嵌样式以应用级联样式表属性到网页元素上。

如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

当创建或修改网页样式时，可使用位于“格式”菜单的“样式”命，Dreamweaver会自动创建嵌入的样式表（如果原先不存在），并在嵌入的样式表内将此样式保存为类选择器。

可以使用“样式”对话框来创建新类选择器，修改或删除现有类选择器，或将CSS格式设置属性应用到标准HTML标记符上例如

。

当单击“确定”关闭对话框时，Dreamweaver会将格式设置特征写回到使用正确语法的外部或嵌入的样式表中。

或者，可以用正确CSS语法键入样式信息。

要键入嵌入的样式表的样式信息，请单击网页视图模式下的“HTML”选项卡。

如果对应用到站点的主题选择“应用CSS”复选框，Dreamweaver将在站点的根目录下创建名为Theme1.css的文件，其中Theme是主题的名称。

如果修改主题，Dreamweaver自动将更改写回主题CSS里。

也可以通过直接编辑主题CSS来修改主题。

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。

DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

DIV标签称为区隔标记。

作用：

设定字、画、表格等的摆放位置。

当你把文字，图象，或其他的放在DIV中，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。

而中文我们把它称作“层次”。

以以下内容为例：

align="center"

可选值：

center;left;right。

决定字、画、表格等居中、靠左或靠右的作用和居中标记

一样，前者是由HTML3.0开始的标准，后者是通用己久的标示法。

CSS单元的位置和层次-div标签

我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。

我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为和操作平台不同会使显示的结果发生变化。

而CSS能使你看到希望的曙光。

利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！

CascadingStyleSheets（CSS）是DHTML的基础。

CSS用来设定你网页上的元素是如何展示的。

CascadingStyleSheetsPositioning（CSS-P）是CSS的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。

请你记住这两个名词：

CSS和CSS－P。

下面四个英文网址提供了详细的关于CSS和CSS-P的文件和解释。

当我们使用CSS-P的时候，我们主要把它用在DIV（division）tag上。

当你把文字，图象，或其他的放在DIV中，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。

而中文我们把它称作“层次”。

所以当你以后看到这些名词的时候，你就知道它们是指一段在DIV中HTML。

使用DIV的方法跟使用其他tag的方法一样：

ThisisaDIVtag.

如果单独使用DIV而不加任何CSS-P,那么它在网页中的效果和使用是一样的。

但当我们把CSS-P用到DIV中去以后，我么就可以严格设定它的位置。

首先我们需要给这个可以被CSS-P控制的DIV一个ID或说是它的名字。

比如说我们给下面这个DIV的名字是truck。

给名字的目的是我们以后可用JavaScript来控制它，比如说移动它或改变它的一些性质等等。

Thisisatruck

给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。

有两种把CSS-P应用到DIV的方法。

InlineCSS：

Inline是最常用的方法。

Thisisatruck.

ExternalSTYLEtag：

使用External方法的结果是一样的。

我们会在以后的课程里再详细解释这种方法。

现在我们主要讨论Inline方法。

请注意在External方法里，在STYLE里的ID和DIV里的关系。

--　#truck{stylesgohere}　-->

Thisisatruck.

Cross-BrowserCSS性质：

我们这个课程的主要目的是让你写出的网页在NS4和IE4上都能工作，所以我们主要讨论那些对俩者都通用的性质。

下面这些性质符合由W3C给出的标准。

position　决定DIVtag是如何放置的。

“relative”意思是DIV的位置是相对于其他tag的，而“absolute”是说DIVtag的位置是相对于它所在的窗口。

left　相对于窗口左边的位置

top　相对于窗口上边的位置

width　DIVtag的宽度。

所有在DIV里的文字或html都在里面。

height　DIVtag的高度。

这个性质很少用除非你想Clip层次。

clip　给出layer的clipping（可看的见的）部分。

Clip可使得DIV显示为一个可以定义的很准确的方块。

你可以用以下的四个值来给出这个方块的在DIV位置和大小。

clip:

rect（top,right,bottom,left）;

visibility　隐蔽或展现DIV根据它的值“visible”，“hidden”，“inherit”。

　DIVtag的