《个人成长历程网站的设计与实现_毕业论文(16页).doc》由会员分享，可在线阅读，更多相关《个人成长历程网站的设计与实现_毕业论文(16页).doc（16页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、-个人成长历程网站的设计与实现_毕业论文-第 12 页毕 业 论 文论文题目：个人成长历程网站的设计与实现内 容 摘 要 本文是个人成长历程网站的设计介绍。本文详细的介绍了关于个人成长历程网站从设计到收集素材，结合自己所学知识，同时结合自己的成长历程，如何一步步的实现，更加形象的告诉大家个人成长历程网站的设计与实现。本文介绍详细，思路清晰，认真务实，看完本文例子可以很清楚的了解到网站的制作和实现，通过本文可以很容易的了解网站的各个环节的制作和本网站与其他网站的内在联系，对于制作其他类型网站个人博客个人主页个人空间等有着帮助作用。 关键词 个人成长 网站设计 网站制作 网站实现AbstractT
2、his article is a personal growth process of website design. This article detailed introduction about the personal growth process from design to material collection, with his knowledge, at the same time, combined with their own growing experience, how to implement step by step, more image tell you pe
3、rsonal growth process of the design and implementation of website. In this paper, a detailed, clear, practical seriously, look at the examples in this paper can be very clear in your website the making and implementation, through this paper can easily understand the site of each link of production a
4、nd inner link, this web site and other web sites for other types of site personal blog page has helped individual space, etc. Key words: personal growth, website design, website build, Site Implementation目 录网站制作的概述11、网站前期211 后台环境的搭配21.1.1 XAMPP的安装21.1.2 Joomla的安装312 网站的设计主题与思路准备413 网站的图片素材准备414 网站的视
5、频素材准备415 网站的文字素材准备42、网站中期421 全局配置422 模版管理423 分类管理52.3.1 分类类型的添加52.3.2 添加分类文章52.3.3 文章的排版52.3.4 Logo的修改624 菜单管理625 模块管理62.5.1 搜索的添加62.5.2 面包屑的添加62.5.3 创建自定义模块62.5.4 附加功能的添加73、组件的应用731 投票组件的应用732 留言板组件的应用74、插件的使用841 图片文件的添加842 音乐文件的添加843 视频的添加95、网站后期951 网站的测试952 网站的调试9注 释10参 考 文 献11致 谢12网站制作的概述网站就是网页的
6、有机组合体，网页的学名是HTML（Hyper Text Mark-up Language），翻译过来就是“超文本标记语言”，它定义了各种超文本在HTML文件中的组织方式，是一种可以在WWW上传输并被浏览器读取、翻译成页面的一种文件。网站就是许许多多网页、文本、图片、声音、图像等在一起，按照一定方式组织起来的集合体。网站是上网查信息的窗口，是我们存放资料、图片、多媒体的网上展示厅，当然也是展示个人魅力的大舞台。随着科技的发展，制作网站的软件也随之增多。1、网站前期11 后台环境的搭配1.1.1 XAMPP的安装搭建服务器环境：安装一个基于Apache、MySQL、PHP的Web服务器环境，这里采
7、用xampp-win32-3.0.12的安装包。1步骤一：执行安装程序双击“xampp-win32-3.0.12-installer”安装程序。步骤二：安装向导进入安装向导，该界面提示为便于安装系统更新文件，需要在安装前关闭其他应用程序，单击“NEXT”按钮继续。步骤三：选择安装目录设置XAMPP安装目录，单击“Next”按钮，进入XAMPP设置界面。步骤四：设置XAMPP设置界面包含“生成桌面快捷图标”、“加入开始菜单”、“安装Apache服务”、“安装MySQL服务”、“安装Filezilla服务”选项，本例选中了“生成桌面快捷图标”、“加入开始菜单”两选项，单击“Install”按钮进入
8、文件解压安装。2步骤五：文件解压安装该步XAMPP系统进行文件解压安装，“Next”按钮变灰不可单击，安装完毕后，状态变为可击，可单击进入下一步。“Back”为返回上一步，“Cancel”则为取消安装。在该步中会弹出一个DOS命令提示窗口提示，该提示说明系统安装正常。步骤六：XAMPP安装向导结束文件解压安装完毕后，XAMPP安装向导结束提示系统安装成功，单击“Finish”按钮完成安装。单击“Finish”按钮后，XAMPP弹出对话窗口，询问是否需要开始XAMPP控制面板进行设置，单击“是”进行快速设置，否则单击“否”退出。步骤七：XAMPP快速设置安装过程结束后，首先使用XAMPP控制面板
9、来“启动/停止”PHP、MySQL服务。步骤八：启动ApacheApache和MySQL均为停止状态。单击Apache后“start”按钮。Windows系统防火墙提示是否允许访问，选择“允许访问”。3步骤九：启动MySQL单击MySQL后“start”按钮。Windows系统防火墙提示是否允许访问，选择“允许访问”。步骤十：建Joomla数据库单击控制面板中Apache后“Admin”按钮，系统会打开默认浏览器，进入XAMPP管理界面语言选择页，单击语言选择“中文”选项进入中文管理界面。中文界面里集成了三类工具，包括XAMPP系统信息、第三方程序演示、XAMPP中的PHP管理工具。单击“工具
10、phpMyAdmin”进入用PHP编写的MySQL管理软件phpMyAdmin。在phpMyAdmin界面“创建一个新的数据库”下文本框中填入“joomla”创建Joomla的数据库，库名为“joomla”。单击“创建”按钮提交创建。提交请求后，phpMyAdmin跳转到该数据库管理页面，系统在右侧页面中提示“数据库joomla已经建立”，代表数据库创建操作成功。左侧创建数据库的数据表列表，由于刚创建的数据库为空，则左侧列表只出现“joomla”数据库名。41.1.2 Joomla的安装安装Joomla！系统：Joomla！内容管理系统（CMS）的安装。5步骤一：将Joomla!软件包解压首先
11、，在XAMPP的htdocs主文件夹中（.xampphtdocs）建立目录“joomla”，将安装包复制到目录中，单击鼠标右键，选择“解压到当前文件夹”。步骤二：进入安装界面解压缩完毕后，然后打开浏览器，输入网址http:/localhost/joomla，进入Joomla!安装界面，选择“zh-CN”，然后单击“下一步”按钮。步骤三：安装前服务器环境检查必须符合要求的检查项目。如果有某些项目显示为红色，说明服务器环境设置不符合必需的最低要求，更改配置，刷新重新检查是否通过检测。步骤四：协议本步是阅读并接受Joomla!协议，单击“下一步”继续。步骤五：数据库配置数据库类型选“mysql”。主
12、机名填入“localhost”，用户名填“root”，由于MySQL的“root”用户默认状态是没有密码，所以密码不填。“数据库名称”里填入“joomla”，单击“下一步”继续。步骤六：FTP配置Joomla1.5的文件处理的一种新机制，也可以在安装以后通过后台管理控制界面进行管理，在这里我们直接单击“下一步”。步骤七：Jmoola设置1.站名设置：在“本站名称”里填入站点的名称。2.管理员邮件和密码设置：填入您的邮件地址以及管理后台所用的密码。3.加载样例数据：单击“安装网站的示范内容”进行示例数据的安装。单击“下一步”完成Joomla!的安装。步骤八：完成安装本步是完成界面，提示安装成功。
13、但提示必须删除installlation目录。删除installlation目录后，回到joomla安装结束界面，单击“浏览本站”进入前台，或单击“进入管理后台”进入后台管理界面，开始Joomla之旅途。步骤九：Joomla前台和后台Joomla系统分为前台和后台两部分。前台展现给网站访问者，用于发布网站内容，提供访问者服务。后台供站点管理者使用，提供对应于前台内容、服务的管理设置功能。612 网站的设计主题与思路准备我们要做的是个人成长历程网站，因此主要应该要体现个人特色。我们的水平自然是有限的，所以上面的有些东西都是从网上优秀的个人网站上借鉴来的，例如布局和样式。总体来说网站的布局，是统一
14、的，这样在浏览的时候不至于显得太混乱。7整个网站大体分七部分：“我的日志”“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”。13 网站的图片素材准备Photo 图片文件夹的准备。14 网站的视频素材准备Video视频文件夹的准备。15 网站的文字素材准备Diary 文章文件夹的准备。2、网站中期21 全局配置Joomla可以分为两个部分，管理后台和网站前台。后台是管理和创造内容的地方，一般只有网站的管理人员才能看得到，网站前台是给用户看的，它是用来显示网站内容的。步骤一：登录网站后台首先，打开后台的地址是http:/localhost/joomla/administrat
15、or/index.php，默认管理员账号密码，用户名admin，密码为安装Joomla时设定的密码。步骤二：全局设置点击登录进入管理后台的控制面板首先我们要更改网站服务器时区，点击全局设置。点击服务器选项，并更改为北京时间，点击保存。步骤三：后台语言管理点击语言管理，点击进入页面后可见所有选项，其中五角星标志的为默认语言，可点击更改后台语言。822 模版管理通过后台更改前台显示预览。首先，我们通过预览查看前台显示的网站。回到网站管理后台，点击扩展菜单下的模板管理。我们看到Joomla默认安装了三个模板，每一个模板都可以让网站前台变得不一样，当我们把鼠标停留在模板名称的上面时显示出模板的缩略图，
16、让我们大致了解一下模板的前台显示界面。点击名称前的圆圈并设置成默认模板，便可得到不同示样的前台。923 分类管理2.3.1 分类类型的添加进入网站管理后台，点击分类管理。进入单元管理后，点击右上角“创建”按钮，创建标题为“个人隐私”的单元并保存，单元创建完成，点击“内容”“分类管理”， 点击右上角创建“我的日志”的分类，并在单元分类中选择“个人隐私”，访问级别选择“公开”。并按照上述方法，创建“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”分类。102.3.2 添加分类文章进入网站管理后台，点击“内容”“文章管理”“创建”。把编写好半年一年文章粘贴进去，设置“标题”，选择
17、 “我的日志”分类，设置其他项，设置好之后点击“保存”按钮，设置精选，在首页显示，刷新前台并浏览。重复上述动作，添加无限木偶戏退三舍等文章。112.3.3 文章的排版步骤一：推荐文章到首页打开“文章管理”，找到我们想要推荐到首页的文章，点击“首页”栏目的“X”，变为“”则为推荐成功。我们把视频“我要当舅舅了”推荐到首页。步骤二：修改菜单参数打开“菜单”“mainmenu”“Home”， 进入“Home”，基本参数包括“头条文章”、“引言”、“栏”和“链接数”， 设置参数“头条文章”为0、“引言”为3、“栏”为3、“链接数”为4，我们还可以对不满意的文章进行除，点击“内容”“首页文章”，选中要删
18、除的文章，点击“删除”， 现在首页的文章有“作者”、“创建时间”等等信息，但是标题连接不到文章上，回到“Home”的组件参数，进行设置。步骤三：菜单的排序点击“内容”“分类管理”，在分类管理列表中点击“排序”中的小三角形修改排序号来排序。同上在“Home”菜单的高级参数中，也可以更改“默认排序”。 影响文章排序的方式另一个因素是文章分类的顺序，在首页菜单的高级参数里面我们可以设定文章分类排序方式，设置“菜单项”“文章分类排序”“排序”，基本参数中“引言”设为7。我们这里按照“我的日志”“我的相册”“我的视频”“我的作品”“我的朋友”“我的关注”“我的音乐”“留言板”来进行排序。步骤四：文章的统
19、一参数设置以上我们已经为我们的文章添加了图片，视频等内容，我们发现在文章标题的下栏中有关于作者的信息，文章发布的时间，右上角有PDF、打印、邮件等小图标，这些我们可以通过文章编辑的文章参数可以调整，但是我们需要每发一篇文章就要更改一次参数吗？这里我们可以通过修改文章的统一参数来调整，点击“内容”“文章管理”“统一参数”进入设置，使其更加工整美观。122.3.4 Logo的修改首先我们用一些图形设计工具设计好Logo，这里准备的图片是logo.gif。将设计好的Logo命名为“logo.gif”，放入“E:XAMPPhtdocsjoomlatemplatesbeezimages”中替换原来的Lo
20、go，刷新前台。1324 菜单管理步骤一：在主菜单添加菜单项点击“菜单”“mainmenu”，点击进入“Home”，更改“标题”为“首页”。步骤二：创建一个新的菜单项进入“分类-文章类别列表式布局”，基本参数“分类”为“我的日志”。 头条文章，“引言”，“栏”，“链接数”，依次设置。“标题”设定为“我的日志”，高级参数中“多栏排序”选择横向排序。按照上述方法一次创建“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”菜单项目。 25 模块管理Joomla的模板里面已经定义好了一些位置，我们首先看一下现在我们使用的这个模板上的位置分布，打开“扩展”“模板管理”，点击我们正在使用
21、的模板“beez”。 进入模板“beez”，点击“预览”，其中红色标注的就是模板定义的位置。2.5.1 搜索的添加回到模块管理，点击“创建”“搜索”， 标题命名为“搜索”，位置选择“use4”，点击应用。2.5.2 面包屑的添加回到模块管理，点击“创建”“面包屑（导航路径）”，点击进入，输入标题“导航路径”，将位置放到“breadcrumb”位置上，首页入口的文字修改为“首页”，点击保存。2.5.3 创建自定义模块自定义模块可以让我们自己定义显示在模块里面的内容，可以输入文字、可以插入图片或者视频。创建一个自定义模块，显示在网站底部，做为网站的版权声明， 打开“扩展”“模块管理”“创建”“定制
22、html”，标题命名为“版权声明”，显示标题为“否”，位置选择“footer”。2.5.4 附加功能的添加给网站加入在线QQ功能打开一个QQ在线状态的生成网站，输入你的QQ账号、密码进行登录。进入编辑页面，选择代码类型为“完全公开”，图片留言“我是客服一号”，在线状态风格可以更改选择一个自己喜欢的图标，点击确定，复制公开代码。回到网站管理后台，创建一个“定制HTML”的模块，标题为“QQ在线”，代码复制到自定义输出（点击编辑器的HTML，复制到HTML面板，更新）。点击保存，刷新前台。143、组件的应用组件可以扩展Joomla的功能，让我们的Joomla变得更加强大。Joomla里面可用的组件
23、很多，它们可以完成不同的任务。我们可以根据自己对网站功能的需求为网站安装相应的组件。31 投票组件的应用点击“组件”“投票调查”，点击“创建”进入编辑投票调查页面，进入编辑界面，在细节设置里面命名“标题”为“我网站怎么样？”，在选项里面输入调查问卷的一些选项，这里“选项1”为“网站的风格你们喜欢吗？”，“选项2”为“你们觉得网站有什么地方需要修改？”，“选项3”为“如果是十分，你们给我的网站打多少分？”，已发布位置点击“是”。下面我们还必须创建一个模块来显示我们的调查问卷，点击“扩展”“模块管理”，创建“投票调查”模块，标题为“投票调查”，位置为“use1”，模块参数中投票调查选择“您对我们的
24、服务是否满意”，点击保存。下面我们对投票调查做个测试，点击“选项1”“投票”，即可看到投票的结果。32 留言板组件的应用安装并使用留言组件，点击“扩展”“安装卸载”“浏览”，选择我们需要安装的“com_easybook_v2.0_RC4_zh-CN”，安装完成后提示安装成功，下面我们创建一个菜单项，让它链接到这个组件。点击“菜单”“常用菜单”“创建”，选择“easybook”标准布局。命名标题为“在线留言”，组件参数中显示Easybook为“隐藏，”允许发言的群组更改为“Everybody”， 添加上留言内容点击“提交留言”即可，为了防止有人发布垃圾信息，还需要为留言板安装一个验证码组件“co
25、m_easycaptcha_v2.0_RC2_zh-CN”，安装完成后进入在线留言的菜单项，组件参数中启用验证码项选择“是”,就可以使用了。4、插件的使用插件就是一些扩展Joomla功能的小东西，通常每一个插件都可以完成一个特定的任务。插件有许多类型，有些插件用在文章中，比如我们即将安装并且使用的相册插件，使用它可以在文章中插入一个可以自动生成缩略图的相册。还有一些插件提供网站内容的搜索功能，有的插件能够生成页面缓存，可以让网站速度变得更快。1541 图片文件的添加打开管理后台，点击“扩展”“安装卸载”进入安装界面，安装相册插件plg_verysimple_gallery_1.5.3，安装完毕
26、后提示安装成功。在默认情况下，新安装插件的状态都是禁用的，下面我们启用安装的相册插件。点击“扩展”“插件管理”，选择类型“content”筛选，找到插件“Very Simple Image Gallery Plugin”，选择启用并保存，点击“Very Simple Image Gallery Plugin”进行编辑参数，相册宽度修改为“760”单位设置为“像素”，对齐方式选择“左对齐”，缩略图宽度设置为“65”，缩略图高度设置为“35”，缩略图质量“100”，缩略图之间的空间“8”，缩略图显示位置“在大图的右边显示”，设置完成后点击保存，我们要使用Very Simple Image Gall
27、ery Plugin这个插件，必须在文章中使用一个命令，在Very Simple Image Gallery Plugin插件的简介中有这个命令，命令为vsig文件夹名称/vsig，打开“网站”“媒体管理”，这里面显示的是已经上传到我们服务器中的图片。我们点击左面菜单栏中的“stories”，建立一个新的文件夹，点击“创建文件夹”，命名为“ainimal”， 点击“ainimal”文件夹，进入文件夹里，点击“浏览”“开始上传”，选择图片进行上传，回到“文章管理”选择我们要插入相册的文章，并选择相册显示的位置，输入相册显示命令vsigainimal/vsig，则在“我的照片”-动物园中就可以浏览
28、。按照上述做法添加成长站-正定站，我的小外甥，成长站-天津站等照片文件。42 音乐文件的添加打开管理后台，点击“扩展”“安装卸载”进入安装界面，安装“com_avreloaded-1.2.4”，安装完毕后提示安装成功。点击“扩展”“插件管理”， 找到插件“com_avreloaded-1.2.4”，点击启用。我们要使用Very Simple Image Gallery Plugin这个插件，必须在文章中使用一个命令，在Very Simple Image Gallery Plugin插件的简介中有这个命令，命令为MP3文件夹名称/MP3，打开“网站”“媒体管理”，这里面显示的是已经上传到我们服务
29、器中的歌曲。回到“文章管理”选择我们要插入歌曲，并选择歌曲显示的位置，输入歌曲显示命令MP3zheyangaile/mp3，则在“我的歌曲”-这样爱了中就可以浏览。按照上述做法添加遗憾到不了等歌曲文件。43 视频的添加打开管理后台，点击“扩展”“安装卸载”进入安装界面，安装“com_avreloaded-1.2.4”，安装完毕后提示安装成功。点击“扩展”“插件管理”， 找到插件“com_avreloaded-1.2.4”，点击启用。我们要使用Very Simple Image Gallery Plugin这个插件，必须在文章中使用一个命令，在Very Simple Image Gallery
30、Plugin插件的简介中有这个命令，命令为视频文件格式文件夹名称/视频文件格式，例如MP4文件夹名称/MP4。打开“网站”“媒体管理”，这里面显示的是已经上传到我们服务器中的视频。回到“文章管理”选择我们要插入视频，并选择视频显示的位置，输入歌曲显示命令mp4borther/mp4，则在“我的视频”-我们小小的青春中就可以浏览。按照上述做法添加我要当舅舅了，呵呵呵呵和我一起成长的小松鼠等视频文件。5、网站后期51 网站的测试测试网站的跳转和链接，是否能正常跳接到指定界面。测试投票，QQ等组件能否正常使用。52 网站的调试步骤一：进入后台，调试有问题的链接，进入前台继续测试。步骤二：调试如果不成
31、功，继续调试。注 释1 Xampp Surhone, Lambert M.、Timpledon, Miriam T.、 Marseken, Susan F. VDM Publishing House (2010-07出版)。2 数据库系统概论(第4版) 王珊、 萨师煊 高等教育出版社 (2006-05出版)。34同上。5 廖旻可、吴涛涛：Joomla建站步步通，人民邮电出版社，2009年，第23页。6 Joomla之门网站，。7 于丙超:网站开发:项目规划、设计与实现，电子工业出版社，2004年，第55-58页。8郭順能：Joomla! 2.5素人架站計畫，碁峰資訊股份有限公司。9 陈红飞：P
32、HP内容管理系统：Joomla快速建站指南，电子工业出版社。10 王学军：网站建设与规划，武汉理工大学出版社2005年，第25页。11张红章剑林：网站建设，高等教育出版社，第35页。12徐磊：网页制作与网站建设技术大全，清华大学出版社。13 王静 等：Adobe Photoshop CS4 网页设计与制作标准实训教程，印刷工业出版社。14 HTML5+CSS3 网页布局和样式精粹，清华大学出版社。15 导向工作室：24小时学会网站建设，人民邮电出版社。参 考 文 献 Joomla之门网站，。 HTML5 从入门到精通，清华大学出版社。 HTML5+CSS3 网页布局和样式精粹，清华大学出版社。
33、 王静 等：Adobe Photoshop CS4 网页设计与制作标准实训教程，印刷工业出版社。 郭順能：Joomla! 2.5素人架站計畫，碁峰資訊股份有限公司。 廖旻可、吴涛涛：joomla建站步步通，人民邮电出版社。 陈红飞：PHP内容管理系统：Joomla快速建站指南，电子工业出版社。 杨宇 等：PHP典型模块与项目实战大全，清华大学出版社。 胡嘉玺：BLOG启示录：WordPress博客建设与经营，清华大学出版社。 徐磊：网页制作与网站建设技术大全，清华大学出版社。 导向工作室：24小时学会网站建设，人民邮电出版社。致 谢在本次毕业设计过程中，指导老师给予了极大的帮助。老师认真负责的
34、工作态度和丰富的理论和实际操作能力都使我收益匪浅。无论在理论上还是在实践中，他都给与我很大的帮助，在他的帮助下使得整个网站能及时的设计完成，并从中学到了很多以前没有学到的知识，所以，非常感谢她耐心的指导。还有，在我设计整个网站的过程中，许多同学也给了我很大的帮助，特别是在论文的排版方面，我请教了多位同学，同学们都乐意指导，在这里我一起表示感谢。最后要感谢在这三年的学习和生活中给予我关怀和照顾的每一位可敬的系部领导和老师，感谢你们的无私奉献！感谢你们的悉心教导！感谢你们的点点滴滴！感谢母校对我们的培养！是你们，教会了我为人民服务的本领，是你们，让我懂得了做人的道理，无论以后我走到那里，我都会记得你们给予我的关怀和帮助。无论何时，我都会以我曾经是你们的学生而感到骄傲，我在这即将毕业离校的时候，我衷心的祝愿各位老师工作顺利，一生幸福。同时，我也祝愿我的同学到可以找的一份好的工作，都有一个好的前程。