毕业论文：个人成长历程网站的设计与实现.doc

1、毕业论文论文题目个人成长历程网站的设计与实现内容摘要本文是个人成长历程网站的设计介绍。本文详细的介绍了关于个人成长历程网站从设计到收集素材，结合自己所学知识，同时结合自己的成长历程，如何一步步的实现，更加形象的告诉大家个人成长历程网站的设计与实现。本文介绍详细，思路清晰，认真务实，看完本文例子可以很清楚的了解到网站的制作和实现，通过本文可以很容易的了解网站的各个环节的制作和本网站与其他网站的内在联系，对于制作其他类型网站个人博客个人主页个人空间等有着帮助作用。关键词个人成长网站设计网站制作网站实现ABSTRACTTHISARTICLEISAPERSONALGROWTHPROCESSOFWEBS

2、ITEDESIGNTHISARTICLEDETAILEDINTRODUCTIONABOUTTHEPERSONALGROWTHPROCESSFROMDESIGNTOMATERIALCOLLECTION,WITHHISKNOWLEDGE,ATTHESAMETIME,COMBINEDWITHTHEIROWNGROWINGEXPERIENCE,HOWTOIMPLEMENTSTEPBYSTEP,MOREIMAGETELLYOUPERSONALGROWTHPROCESSOFTHEDESIGNANDIMPLEMENTATIONOFWEBSITEINTHISPAPER,ADETAILED,CLEAR,PRAC

3、TICALSERIOUSLY,LOOKATTHEEXAMPLESINTHISPAPERCANBEVERYCLEARINYOURWEBSITETHEMAKINGANDIMPLEMENTATION,THROUGHTHISPAPERCANEASILYUNDERSTANDTHESITEOFEACHLINKOFPRODUCTIONANDINNERLINK,THISWEBSITEANDOTHERWEBSITESFOROTHERTYPESOFSITEPERSONALBLOGPAGEHASHELPEDINDIVIDUALSPACE,ETCKEYWORDSPERSONALGROWTH,WEBSITEDESIGN

4、,WEBSITEBUILD,SITEIMPLEMENTATION目录网站制作的概述11、网站前期211后台环境的搭配2111XAMPP的安装2112JOOMLA的安装312网站的设计主题与思路准备413网站的图片素材准备414网站的视频素材准备415网站的文字素材准备42、网站中期421全局配置422模版管理423分类管理5231分类类型的添加5232添加分类文章5233文章的排版5234LOGO的修改624菜单管理625模块管理6251搜索的添加6252面包屑的添加6253创建自定义模块6254附加功能的添加73、组件的应用731投票组件的应用732留言板组件的应用74、插件的使用841图片

5、文件的添加842音乐文件的添加843视频的添加95、网站后期951网站的测试952网站的调试9注释10参考文献11致谢121网站制作的概述网站就是网页的有机组合体，网页的学名是HTML（HYPERTEXTMARKUPLANGUAGE），翻译过来就是“超文本标记语言”，它定义了各种超文本在HTML文件中的组织方式，是一种可以在WWW上传输并被浏览器读取、翻译成页面的一种文件。网站就是许许多多网页、文本、图片、声音、图像等在一起，按照一定方式组织起来的集合体。网站是上网查信息的窗口，是我们存放资料、图片、多媒体的网上展示厅，当然也是展示个人魅力的大舞台。随着科技的发展，制作网站的软件也随之增多。2

6、1、网站前期11后台环境的搭配111XAMPP的安装搭建服务器环境安装一个基于APACHE、MYSQL、PHP的WEB服务器环境，这里采用XAMPPWIN323012的安装包。1步骤一执行安装程序双击“XAMPPWIN323012INSTALLER”安装程序。步骤二安装向导进入安装向导，该界面提示为便于安装系统更新文件，需要在安装前关闭其他应用程序，单击“NEXT”按钮继续。步骤三选择安装目录设置XAMPP安装目录，单击“NEXT”按钮，进入XAMPP设置界面。步骤四设置XAMPP设置界面包含“生成桌面快捷图标”、“加入开始菜单”、“安装APACHE服务”、“安装MYSQL服务”、“安装FIL

7、EZILLA服务”选项，本例选中了“生成桌面快捷图标”、“加入开始菜单”两选项，单击“INSTALL”按钮进入文件解压安装。2步骤五文件解压安装该步XAMPP系统进行文件解压安装，“NEXT”按钮变灰不可单击，安装完毕后，状态变为可击，可单击进入下一步。“BACK”为返回上一步，“CANCEL”则为取消安装。在该步中会弹出一个DOS命令提示窗口提示，该提示说明系统安装正常。步骤六XAMPP安装向导结束文件解压安装完毕后，XAMPP安装向导结束提示系统安装成功，单击“FINISH”按钮完成安装。单击“FINISH”按钮后，XAMPP弹出对话窗口，询问是否需要开始XAMPP控制面板进行设置，单击“

8、是”进行快速设置，否则单击“否”退出。步骤七XAMPP快速设置安装过程结束后，首先使用XAMPP控制面板来“启动/停止”PHP、MYSQL服务。步骤八启动APACHEAPACHE和MYSQL均为停止状态。单击APACHE后“START”按钮。WINDOWS系统防火墙提示是否允许访问，选择“允许访问”。3步骤九启动MYSQL单击MYSQL后“START”按钮。WINDOWS系统防火墙提示是否允许访问，选择“允许访问”。步骤十建JOOMLA数据库单击控制面板中APACHE后“ADMIN”按钮，系统会打开默认浏览器，进入XAMPP管理界面语言选择页，单击语言选择“中文”选项进入中文管理界面。中文界面

9、里集成了三类工具，包括XAMPP系统信息、第三方程序演示、XAMPP中的PHP管理工具。单击“工具3PHPMYADMIN”进入用PHP编写的MYSQL管理软件PHPMYADMIN。在PHPMYADMIN界面“创建一个新的数据库”下文本框中填入“JOOMLA”创建JOOMLA的数据库，库名为“JOOMLA”。单击“创建”按钮提交创建。提交请求后，PHPMYADMIN跳转到该数据库管理页面，系统在右侧页面中提示“数据库JOOMLA已经建立”，代表数据库创建操作成功。左侧创建数据库的数据表列表，由于刚创建的数据库为空，则左侧列表只出现“JOOMLA”数据库名。4112JOOMLA的安装安装JOOML

10、A系统JOOMLA内容管理系统（CMS）的安装。5步骤一将JOOMLA软件包解压首先，在XAMPP的HTDOCS主文件夹中（XAMPPHTDOCS）建立目录“JOOMLA”，将安装包复制到目录中，单击鼠标右键，选择“解压到当前文件夹”。步骤二进入安装界面解压缩完毕后，然后打开浏览器，输入网址HTTP/LOCALHOST/JOOMLA，进入JOOMLA安装界面，选择“ZHCN”，然后单击“下一步”按钮。步骤三安装前服务器环境检查必须符合要求的检查项目。如果有某些项目显示为红色，说明服务器环境设置不符合必需的最低要求，更改配置，刷新重新检查是否通过检测。步骤四协议本步是阅读并接受JOOMLA协议，

11、单击“下一步”继续。步骤五数据库配置数据库类型选“MYSQL”。主机名填入“LOCALHOST”，用户名填“ROOT”，由于MYSQL的“ROOT”用户默认状态是没有密码，所以密码不填。“数据库名称”里填入“JOOMLA”，单击“下一步”继续。步骤六FTP配置JOOMLA15的文件处理的一种新机制，也可以在安装以后通过后台管理控制界面进行管理，在这里我们直接单击“下一步”。步骤七JMOOLA设置1站名设置在“本站名称”里填入站点的名称。2管理员邮件和密码设置填入您的邮件地址以及管理后台所用的密码。3加载样例数据单击“安装网站的示范内容”进行示例数据的安装。单击“下一步”完成JOOMLA的安装。

12、步骤八完成安装本步是完成界面，提示安装成功。但提示必须删除INSTALLLATION目录。删除INSTALLLATION目录后，回到JOOMLA安装结束界面，单击“浏览本站”进入前台，或单击“进入管理后台”进入后台管理界面，开始JOOMLA之旅途。步骤九JOOMLA前台和后台JOOMLA系统分为前台和后台两部分。前台展现给网站访问者，用于发布网站内容，提供访问者服务。后台供站点管理者使用，提供对应于前台内容、服务的管理设置功能。6412网站的设计主题与思路准备我们要做的是个人成长历程网站，因此主要应该要体现个人特色。我们的水平自然是有限的，所以上面的有些东西都是从网上优秀的个人网站上借鉴来的，

13、例如布局和样式。总体来说网站的布局，是统一的，这样在浏览的时候不至于显得太混乱。7整个网站大体分七部分“我的日志”“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”。13网站的图片素材准备PHOTO图片文件夹的准备。14网站的视频素材准备VIDEO视频文件夹的准备。15网站的文字素材准备DIARY文章文件夹的准备。2、网站中期21全局配置JOOMLA可以分为两个部分，管理后台和网站前台。后台是管理和创造内容的地方，一般只有网站的管理人员才能看得到，网站前台是给用户看的，它是用来显示网站内容的。步骤一登录网站后台首先，打开后台的地址是HTTP/LOCALHOST/JOOMLA

14、/ADMINISTRATOR/INDEXPHP，默认管理员账号密码，用户名ADMIN，密码为安装JOOMLA时设定的密码。步骤二全局设置点击登录进入管理后台的控制面板首先我们要更改网站服务器时区，点击全局设置。点击服务器选项，并更改为北京时间，点击保存。步骤三后台语言管理点击语言管理，点击进入页面后可见所有选项，其中五角星标志的为默认语言，可点击更改后台语言。822模版管理通过后台更改前台显示预览。首先，我们通过预览查看前台显示的网站。回到网站管5理后台，点击扩展菜单下的模板管理。我们看到JOOMLA默认安装了三个模板，每一个模板都可以让网站前台变得不一样，当我们把鼠标停留在模板名称的上面时显

15、示出模板的缩略图，让我们大致了解一下模板的前台显示界面。点击名称前的圆圈并设置成默认模板，便可得到不同示样的前台。923分类管理231分类类型的添加进入网站管理后台，点击分类管理。进入单元管理后，点击右上角“创建”按钮，创建标题为“个人隐私”的单元并保存，单元创建完成，点击“内容”“分类管理”，点击右上角创建“我的日志”的分类，并在单元分类中选择“个人隐私”，访问级别选择“公开”。并按照上述方法，创建“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”分类。10232添加分类文章进入网站管理后台，点击“内容”“文章管理”“创建”。把编写好半年一年文章粘贴进去，设置“标题”，选

16、择“我的日志”分类，设置其他项，设置好之后点击“保存”按钮，设置精选，在首页显示，刷新前台并浏览。重复上述动作，添加无限木偶戏退三舍等文章。11233文章的排版步骤一推荐文章到首页打开“文章管理”，找到我们想要推荐到首页的文章，点击“首页”栏目的“X”，变为“”则为推荐成功。我们把视频“我要当舅舅了”推荐到首页。步骤二修改菜单参数打开“菜单”“MAINMENU”“HOME”，进入“HOME”，基本参数包括“头条文章”、“引言”、“栏”和“链接数”，设置参数“头条文章”为0、“引言”为3、“栏”为3、“链接数”为4，我们还可以对不满意的文章进行除，点击“内容”“首页文章”，选中要删除的文章，点击

17、“删除”，现在首页的文章有“作者”、“创建时间”等等信息，但是标题连接不到文章上，回到“HOME”的组件参数，进行设置。步骤三菜单的排序点击“内容”“分类管理”，在分类管理列表中点击“排序”中的小三角形修改排序号来排序。同上在“HOME”菜单的高级参数中，也可以更改“默认排序”。影响文章排序的方式另一个因素是文章分类的顺序，在首页菜单的高级参数里面我们可以设定文章分类排序方式，设置“菜单项”“文章分类排序”“排序”，基本参数中“引言”设为7。我们这里按照“我的日志”“我的相册”“我的视频”“我的作品”“我的朋友”“我的关注”“我的音乐”“留言板”来进行排序。6步骤四文章的统一参数设置以上我们已

18、经为我们的文章添加了图片，视频等内容，我们发现在文章标题的下栏中有关于作者的信息，文章发布的时间，右上角有PDF、打印、邮件等小图标，这些我们可以通过文章编辑的文章参数可以调整，但是我们需要每发一篇文章就要更改一次参数吗这里我们可以通过修改文章的统一参数来调整，点击“内容”“文章管理”“统一参数”进入设置，使其更加工整美观。12234LOGO的修改首先我们用一些图形设计工具设计好LOGO，这里准备的图片是LOGOGIF。将设计好的LOGO命名为“LOGOGIF”，放入“EXAMPPHTDOCSJOOMLATEMPLATESBEEZIMAGES”中替换原来的LOGO，刷新前台。1324菜单管理步

19、骤一在主菜单添加菜单项点击“菜单”“MAINMENU”，点击进入“HOME”，更改“标题”为“首页”。步骤二创建一个新的菜单项进入“分类文章类别列表式布局”，基本参数“分类”为“我的日志”。头条文章，“引言”，“栏”，“链接数”，依次设置。“标题”设定为“我的日志”，高级参数中“多栏排序”选择横向排序。按照上述方法一次创建“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”菜单项目。25模块管理JOOMLA的模板里面已经定义好了一些位置，我们首先看一下现在我们使用的这个模板上的位置分布，打开“扩展”“模板管理”，点击我们正在使用的模板“BEEZ”。进入模板“BEEZ”，点击“

20、预览”，其中红色标注的就是模板定义的位置。251搜索的添加回到模块管理，点击“创建”“搜索”，标题命名为“搜索”，位置选择“USE4”，点击应用。252面包屑的添加回到模块管理，点击“创建”“面包屑（导航路径）”，点击进入，输入标题“导航路径”，将位置放到“BREADCRUMB”位置上，首页入口的文字修改为“首页”，点击保存。253创建自定义模块7自定义模块可以让我们自己定义显示在模块里面的内容，可以输入文字、可以插入图片或者视频。创建一个自定义模块，显示在网站底部，做为网站的版权声明，打开“扩展”“模块管理”“创建”“定制HTML”，标题命名为“版权声明”，显示标题为“否”，位置选择“FOO

21、TER”。254附加功能的添加给网站加入在线QQ功能打开一个QQ在线状态的生成网站，输入你的QQ账号、密码进行登录。进入编辑页面，选择代码类型为“完全公开”，图片留言“我是客服一号”，在线状态风格可以更改选择一个自己喜欢的图标，点击确定，复制公开代码。回到网站管理后台，创建一个“定制HTML”的模块，标题为“QQ在线”，代码复制到自定义输出（点击编辑器的HTML，复制到HTML面板，更新）。点击保存，刷新前台。143、组件的应用组件可以扩展JOOMLA的功能，让我们的JOOMLA变得更加强大。JOOMLA里面可用的组件很多，它们可以完成不同的任务。我们可以根据自己对网站功能的需求为网站安装相应

22、的组件。31投票组件的应用点击“组件”“投票调查”，点击“创建”进入编辑投票调查页面，进入编辑界面，在细节设置里面命名“标题”为“我网站怎么样”，在选项里面输入调查问卷的一些选项，这里“选项1”为“网站的风格你们喜欢吗”，“选项2”为“你们觉得网站有什么地方需要修改”，“选项3”为“如果是十分，你们给我的网站打多少分”，已发布位置点击“是”。下面我们还必须创建一个模块来显示我们的调查问卷，点击“扩展”“模块管理”，创建“投票调查”模块，标题为“投票调查”，位置为“USE1”，模块参数中投票调查选择“您对我们的服务是否满意”，点击保存。下面我们对投票调查做个测试，点击“选项1”“投票”，即可看到

23、投票的结果。32留言板组件的应用安装并使用留言组件，点击“扩展”“安装卸载”“浏览”，选择我们需要安装的“COM_EASYBOOK_V20_RC4_ZHCN”，安装完成后提示安装成功，下面我们创建一个菜单项，让它链接到这个组件。点击“菜单”“常用菜单”“创建”，选择“EASYBOOK”标准布局。命名标题为“在线留言”，组件参数中显示EASYBOOK为“隐藏，”允许发言的群组更改为“EVERYBODY”，添加上留言内容点击“提交留言”即可，为了防止有人发布垃圾信息，还需要为留言板安装一个验证码组件“COM_EASYCAPTCHA_V20_RC2_ZHCN”，8安装完成后进入在线留言的菜单项，组件

24、参数中启用验证码项选择“是”,就可以使用了。4、插件的使用插件就是一些扩展JOOMLA功能的小东西，通常每一个插件都可以完成一个特定的任务。插件有许多类型，有些插件用在文章中，比如我们即将安装并且使用的相册插件，使用它可以在文章中插入一个可以自动生成缩略图的相册。还有一些插件提供网站内容的搜索功能，有的插件能够生成页面缓存，可以让网站速度变得更快。1541图片文件的添加打开管理后台，点击“扩展”“安装卸载”进入安装界面，安装相册插件PLG_VERYSIMPLE_GALLERY_153，安装完毕后提示安装成功。在默认情况下，新安装插件的状态都是禁用的，下面我们启用安装的相册插件。点击“扩展”“插

25、件管理”，选择类型“CONTENT”筛选，找到插件“VERYSIMPLEIMAGEGALLERYPLUGIN”，选择启用并保存，点击“VERYSIMPLEIMAGEGALLERYPLUGIN”进行编辑参数，相册宽度修改为“760”单位设置为“像素”，对齐方式选择“左对齐”，缩略图宽度设置为“65”，缩略图高度设置为“35”，缩略图质量“100”，缩略图之间的空间“8”，缩略图显示位置“在大图的右边显示”，设置完成后点击保存，我们要使用VERYSIMPLEIMAGEGALLERYPLUGIN这个插件，必须在文章中使用一个命令，在VERYSIMPLEIMAGEGALLERYPLUGIN插件的简介中

26、有这个命令，命令为VSIG文件夹名称/VSIG，打开“网站”“媒体管理”，这里面显示的是已经上传到我们服务器中的图片。我们点击左面菜单栏中的“STORIES”，建立一个新的文件夹，点击“创建文件夹”，命名为“AINIMAL”，点击“AINIMAL”文件夹，进入文件夹里，点击“浏览”“开始上传”，选择图片进行上传，回到“文章管理”选择我们要插入相册的文章，并选择相册显示的位置，输入相册显示命令VSIGAINIMAL/VSIG，则在“我的照片”动物园中就可以浏览。按照上述做法添加成长站正定站，我的小外甥，成长站天津站等照片文件。42音乐文件的添加打开管理后台，点击“扩展”“安装卸载”进入安装界面，

27、安装“COM_AVRELOADED124”，安装完毕后提示安装成功。点击“扩展”“插件管理”，找到插件“COM_AVRELOADED124”，点击启用。我们要使用VERYSIMPLEIMAGEGALLERYPLUGIN这个插件，必须在文章中使用一个命令，在VERYSIMPLEIMAGEGALLERYPLUGIN插件的简介中有这个命令，命令为MP3文件夹名称/MP3，打开“网站”“媒体管理”，这里面显示的是已经上传到我们服务器中的歌曲。回到“文章管理”选择我们要插入歌曲，并选择歌曲显示的位置，输入歌曲显示命令MP3ZHEYANGAILE/MP3，则在“我的歌曲”这样爱了中就可以浏览。9按照上述做

28、法添加遗憾到不了等歌曲文件。43视频的添加打开管理后台，点击“扩展”“安装卸载”进入安装界面，安装“COM_AVRELOADED124”，安装完毕后提示安装成功。点击“扩展”“插件管理”，找到插件“COM_AVRELOADED124”，点击启用。我们要使用VERYSIMPLEIMAGEGALLERYPLUGIN这个插件，必须在文章中使用一个命令，在VERYSIMPLEIMAGEGALLERYPLUGIN插件的简介中有这个命令，命令为视频文件格式文件夹名称/视频文件格式，例如MP4文件夹名称/MP4。打开“网站”“媒体管理”，这里面显示的是已经上传到我们服务器中的视频。回到“文章管理”选择我们要

29、插入视频，并选择视频显示的位置，输入歌曲显示命令MP4BORTHER/MP4，则在“我的视频”我们小小的青春中就可以浏览。按照上述做法添加我要当舅舅了，呵呵呵呵和我一起成长的小松鼠等视频文件。5、网站后期51网站的测试测试网站的跳转和链接，是否能正常跳接到指定界面。测试投票，QQ等组件能否正常使用。52网站的调试步骤一进入后台，调试有问题的链接，进入前台继续测试。步骤二调试如果不成功，继续调试。10注释1XAMPPSURHONE,LAMBERTM、TIMPLEDON,MIRIAMT、MARSEKEN,SUSANFVDMPUBLISHINGHOUSE201007出版。2数据库系统概论第4版王珊、

30、萨师煊高等教育出版社200605出版。34同上。5廖旻可、吴涛涛JOOMLA建站步步通，人民邮电出版社，2009年，第23页。6JOOMLA之门网站，WWWJOOMLAGATECOM。7于丙超网站开发项目规划、设计与实现，电子工业出版社，2004年，第5558页。8郭順能JOOMLA25素人架站計畫，碁峰資訊股份有限公司。9陈红飞PHP内容管理系统JOOMLA快速建站指南，电子工业出版社。10王学军网站建设与规划，武汉理工大学出版社2005年，第25页。11张红章剑林网站建设，高等教育出版社，第35页。12徐磊网页制作与网站建设技术大全，清华大学出版社。13王静等ADOBEPHOTOSHOPC

31、S4网页设计与制作标准实训教程，印刷工业出版社。14HTML5CSS3网页布局和样式精粹，清华大学出版社。15导向工作室24小时学会网站建设，人民邮电出版社。11参考文献JOOMLA之门网站，WWWJOOMLAGATECOM。HTML5从入门到精通，清华大学出版社。HTML5CSS3网页布局和样式精粹，清华大学出版社。王静等ADOBEPHOTOSHOPCS4网页设计与制作标准实训教程，印刷工业出版社。郭順能JOOMLA25素人架站計畫，碁峰資訊股份有限公司。廖旻可、吴涛涛JOOMLA建站步步通，人民邮电出版社。陈红飞PHP内容管理系统JOOMLA快速建站指南，电子工业出版社。杨宇等PHP典型模

32、块与项目实战大全，清华大学出版社。胡嘉玺BLOG启示录WORDPRESS博客建设与经营，清华大学出版社。徐磊网页制作与网站建设技术大全，清华大学出版社。导向工作室24小时学会网站建设，人民邮电出版社。12致谢在本次毕业设计过程中，指导老师给予了极大的帮助。老师认真负责的工作态度和丰富的理论和实际操作能力都使我收益匪浅。无论在理论上还是在实践中，他都给与我很大的帮助，在他的帮助下使得整个网站能及时的设计完成，并从中学到了很多以前没有学到的知识，所以，非常感谢她耐心的指导。还有，在我设计整个网站的过程中，许多同学也给了我很大的帮助，特别是在论文的排版方面，我请教了多位同学，同学们都乐意指导，在这里我一起表示感谢。最后要感谢在这三年的学习和生活中给予我关怀和照顾的每一位可敬的系部领导和老师，感谢你们的无私奉献感谢你们的悉心教导感谢你们的点点滴滴感谢母校对我们的培养是你们，教会了我为人民服务的本领，是你们，让我懂得了做人的道理，无论以后我走到那里，我都会记得你们给予我的关怀和帮助。无论何时，我都会以我曾经是你们的学生而感到骄傲，我在这即将毕业离校的时候，我衷心的祝愿各位老师工作顺利，一生幸福。同时，我也祝愿我的同学到可以找的一份好的工作，都有一个好的前程。