个人成长历程网站的设计与实现大学课程.docx
《个人成长历程网站的设计与实现大学课程.docx》由会员分享，可在线阅读，更多相关《个人成长历程网站的设计与实现大学课程.docx（10页珍藏版）》请在冰豆网上搜索。
个人成长历程网站的设计与实现大学课程
毕业论文
论文题目：
个人成长历程网站的设计与实现
内容摘要
本文是个人成长历程网站的设计介绍。
本文详细的介绍了关于个人成长历程网站从设计到收集素材，结合自己所学知识，同时结合自己的成长历程，如何一步步的实现，更加形象的告诉大家个人成长历程网站的设计与实现。
本文介绍详细，思路清晰，认真务实，看完本文例子可以很清楚的了解到网站的制作和实现，通过本文可以很容易的了解网站的各个环节的制作和本网站与其他网站的内在联系，对于制作其他类型网站个人博客个人主页个人空间等有着帮助作用。
[关键词]个人成长网站设计网站制作网站实现
Abstract
Thisarticleisapersonalgrowthprocessofwebsitedesign.Thisarticledetailedintroductionaboutthepersonalgrowthprocessfromdesigntomaterialcollection,withhisknowledge,atthesametime,combinedwiththeirowngrowingexperience,howtoimplementstepbystep,moreimagetellyoupersonalgrowthprocessofthedesignandimplementationofwebsite.Inthispaper,adetailed,clear,practicalseriously,lookattheexamplesinthispapercanbeveryclearinyourwebsitethemakingandimplementation,throughthispapercaneasilyunderstandthesiteofeachlinkofproductionandinnerlink,thiswebsiteandotherwebsitesforothertypesofsitepersonalblogpagehashelpedindividualspace,etc.
Keywords:
personalgrowth,websitedesign,websitebuild,SiteImplementation
网站制作的概述
网站就是网页的有机组合体，网页的学名是HTML（HyperTextMark-upLanguage），翻译过来就是“超文本标记语言”，它定义了各种超文本在HTML文件中的组织方式，是一种可以在WWW上传输并被浏览器读取、翻译成页面的一种文件。
网站就是许许多多网页、文本、图片、声音、图像等在一起，按照一定方式组织起来的集合体。
网站是上网查信息的窗口，是我们存放资料、图片、多媒体的网上展示厅，当然也是展示个人魅力的大舞台。
随着科技的发展，制作网站的软件也随之增多。
1、网站前期
1．1后台环境的搭配
1.1.1XAMPP的安装
搭建服务器环境：
安装一个基于Apache、MySQL、PHP的Web服务器环境，这里采用xampp-win32-3.0.12的安装包。
[1]
步骤一：
执行安装程序
双击“xampp-win32-3.0.12-installer”安装程序。
步骤二：
安装向导
进入安装向导，该界面提示为便于安装系统更新文件，需要在安装前关闭其他应用程序，单击“NEXT”按钮继续。
步骤三：
选择安装目录
设置XAMPP安装目录，单击“Next”按钮，进入XAMPP设置界面。
步骤四：
设置XAMPP
设置界面包含“生成桌面快捷图标”、“加入开始菜单”、“安装Apache服务”、
“安装MySQL服务”、“安装Filezilla服务”选项，本例选中了“生成桌面快捷图标”、“加入开始菜单”两选项，单击“Install”按钮进入文件解压安装。
[2]
步骤五：
文件解压安装
该步XAMPP系统进行文件解压安装，“Next”按钮变灰不可单击，安装完毕后，状态变为可击，可单击进入下一步。
“Back”为返回上一步，“Cancel”则为取消安装。
在该步中会弹出一个DOS命令提示窗口提示，该提示说明系统安装正常。
步骤六：
XAMPP安装向导结束
文件解压安装完毕后，XAMPP安装向导结束提示系统安装成功，单击“Finish”按钮完成安装。
单击“Finish”按钮后，XAMPP弹出对话窗口，询问是否需要开始XAMPP控制面板进行设置，单击“是”进行快速设置，否则单击“否”退出。
步骤七：
XAMPP快速设置
安装过程结束后，首先使用XAMPP控制面板来“启动/停止”PHP、MySQL服务。
步骤八：
启动Apache
Apache和MySQL均为停止状态。
单击Apache后“start”按钮。
Windows系统防火墙提示是否允许访问，选择“允许访问”。
[3]
步骤九：
启动MySQL
单击MySQL后“start”按钮。
Windows系统防火墙提示是否允许访问，选择“允许访问”。
步骤十：
建Joomla数据库
单击控制面板中Apache后“Admin”按钮，系统会打开默认浏览器，进入XAMPP管理界面语言选择页，单击语言选择“中文”选项进入中文管理界面。
中文界面里集成了三类工具，包括XAMPP系统信息、第三方程序演示、XAMPP中的PHP管理工具。
单击“工具→phpMyAdmin”进入用PHP编写的MySQL管理软件phpMyAdmin。
在phpMyAdmin界面“创建一个新的数据库”下文本框中填入“joomla”创建Joomla的数据库，库名为“joomla”。
单击“创建”按钮提交创建。
提交请求后，phpMyAdmin跳转到该数据库管理页面，系统在右侧页面中提示“数据库joomla已经建立”，代表数据库创建操作成功。
左侧创建数据库的数据表列表，由于刚创建的数据库为空，则左侧列表只出现“joomla”数据库名。
[4]
1.1.2Joomla的安装
安装Joomla！
系统：
Joomla！
内容管理系统（CMS）的安装。
[5]
步骤一：
将Joomla!
软件包解压
首先，在XAMPP的htdocs主文件夹中（.\xampp\htdocs）建立目录“joomla”，将安装包复制到目录中，单击鼠标右键，选择“解压到当前文件夹”。
步骤二：
进入安装界面
解压缩完毕后，然后打开浏览器，输入网址http:
//localhost/joomla，进入Joomla!
安装界面，选择“zh-CN”，然后单击“下一步”按钮。
步骤三：
安装前服务器环境检查
必须符合要求的检查工程。
如果有某些工程显示为红色，说明服务器环境设置不符合必需的最低要求，更改配置，刷新重新检查是否通过检测。
步骤四：
协议
本步是阅读并接受Joomla!
协议，单击“下一步”继续。
步骤五：
数据库配置
数据库类型选“mysql”。
主机名填入“localhost”，用户名填“root”，由于MySQL的“root”用户默认状态是没有密码，所以密码不填。
“数据库名称”里填入“joomla”，单击“下一步”继续。
步骤六：
FTP配置
Joomla1.5的文件处理的一种新机制，也可以在安装以后通过后台管理控制界面进行管理，在这里我们直接单击“下一步”。
步骤七：
Jmoola设置
1.站名设置：
在“本站名称”里填入站点的名称。
2.管理员邮件和密码设置：
填入您的邮件地址以及管理后台所用的密码。
3.加载样例数据：
单击“安装网站的示范内容”进行示例数据的安装。
单击“下一步”完成Joomla!
的安装。
步骤八：
完成安装
本步是完成界面，提示安装成功。
但提示必须删除installlation目录。
删除installlation目录后，回到joomla安装结束界面，单击“浏览本站”进入前台，或单击“进入管理后台”进入后台管理界面，开始Joomla之旅途。
步骤九：
Joomla前台和后台
Joomla系统分为前台和后台两部分。
前台展现给网站访问者，用于发布网站内容，提供访问者服务。
后台供站点管理者使用，提供对应于前台内容、服务的管理设置功能。
[6]
1．2网站的设计主题与思路准备
我们要做的是个人成长历程网站，因此主要应该要体现个人特色。
我们的水平自然是有限的，所以上面的有些东西都是从网上优秀的个人网站上借鉴来的，例如布局和样式。
总体来说网站的布局，是统一的，这样在浏览的时候不至于显得太混乱。
[7]
整个网站大体分七部分：
“我的日志”“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”。
1．3网站的图片素材准备
Photo图片文件夹的准备。
1．4网站的视频素材准备
Video视频文件夹的准备。
1．5网站的文字素材准备
Diary文章文件夹的准备。
2、网站中期
2．1全局配置
Joomla可以分为两个部分，管理后台和网站前台。
后台是管理和创造内容的地方，一般只有网站的管理人员才能看得到，网站前台是给用户看的，它是用来显示网站内容的。
步骤一：
登录网站后台
首先，打开后台的地址是http:
//localhost/joomla/administrator/index.php，默认管理员账号密码，用户名admin，密码为安装Joomla时设定的密码。
步骤二：
全局设置
点击登录进入管理后台的控制面板
首先我们要更改网站服务器时区，点击全局设置。
点击服务器选项，并更改为北京时间，点击保存。
步骤三：
后台语言管理
点击语言管理，点击进入页面后可见所有选项，其中五角星标志的为默认语言，可点击更改后台语言。
[8]
2．2模版管理
通过后台更改前台显示预览。
首先，我们通过预览查看前台显示的网站。
回到网站管理后台，点击扩展菜单下的模板管理。
我们看到Joomla默认安装了三个模板，每一个模板都可以让网站前台变得不一样，当我们把鼠标停留在模板名称的上面时显示出模板的缩略图，让我们大致了解一下模板的前台显示界面。
点击名称前的圆圈并设置成默认模板，便可得到不同示样的前台。
[9]
2．3分类管理
2.3.1分类类型的添加
进入网站管理后台，点击分类管理。
进入单元管理后，点击右上角“创建”按钮，创建标题为“个人隐私”的单元并保存，单元创建完成，点击“内容”→“分类管理”，点击右上角创建“我的日志”的分类，并在单元分类中选择“个人隐私”，访问级别选择“公开”。
并按照上述方法，创建“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”分类。
[10]
2.3.2添加分类文章
进入网站管理后台，点击“内容”→“文章管理”→“创建”。
把编写好《半年一年》文章粘贴进去，设置“标题”，选择“我的日志”分类，设置其他项，设置好之后点击“保存”按钮，设置精选，在首页显示，刷新前台并浏览。
重复上述动作，添加《无限》《木偶戏》《退三舍》等文章。
[11]
2.3.3文章的排版
步骤一：
推荐文章到首页
打开“文章管理”，找到我们想要推荐到首页的文章，点击“首页”栏目的“X”，变为“√”则为推荐成功。
我们把视频“我要当舅舅了”推荐到首页。
步骤二：
修改菜单参数
打开“菜单”→“mainmenu”→“Home”，进入“Home”，基本参数包括“头条文章”、“引言”、“栏”和“链接数”，设置参数“头条文章”为0、“引言”为3、“栏”为3、“链接数”为4，我们还可以对不满意的文章进行除，点击“内容”→“首页文章”，选中要删除的文章，点击“删除”，现在首页的文章有“作者”、“创建时间”等等信息，但是标题连接不到文章上，回到“Home”的组件参数，进行设置。
步骤三：
菜单的排序
点击“内容”→“分类管理”，在分类管理列表中点击“排序”中的小三角形修改排序号来排序。
同上在“Home”菜单的高级参数中，也可以更改“默认排序”。
影响文章排序的方式另一个因素是文章分类的顺序，在首页菜单的高级参数里面我们可以设定文章分类排序方式，设置“菜单项”→“文章分类排序”→“排序”，基本参数中“引言”设为7。
我们这里按照“我的日志”“我的相册”“我的视频”“我的作品”“我的朋友”“我的关注”“我的音乐”“留言板”来进行排序。
步骤四：
文章的统一参数设置
以上我们已经为我们的文章添加了图片，视频等内容，我们发现在文章标题的下栏中有关于作者的信息，文章发布的时间，右上角有PDF、打印、邮件等小图标，这些我们可以通过文章编辑的文章参数可以调整，但是我们需要每发一篇文章就要更改一次参数吗？
这里我们可以通过修改文章的统一参数来调整，点击“内容”→“文章管理”→“统一参数”进入设置，使其更加工整美观。
[12]
2.3.4Logo的修改
首先我们用一些图形设计工具设计好Logo，这里准备的图片是logo.gif。
将设计好的Logo命名为“logo.gif”，放入“E:
\XAMPP\htdocs\joomla\templates\beez\images”中替换原来的Logo，刷新前台。
[13]
2．4菜单管理
步骤一：
在主菜单添加菜单项
点击“菜单”→“mainmenu”，点击进入“Home”，更改“标题”为“首页”。
步骤二：
创建一个新的菜单项
进入“分类-文章类别列表式布局”，基本参数“分类”为“我的日志”。
头条文章，“引言”，“栏”，“链接数”，依次设置。
“标题”设定为“我的日志”，高级参数中“多栏排序”选择横向排序。
按照上述方法一次创建“我的相册”“我的视频”“我的朋友”“我的关注”“我的音乐”“留言板”菜单工程。
2．5模块管理
Joomla的模板里面已经定义好了一些位置，我们首先看一下现在我们使用的这个模板上的位置分布，打开“扩展”→“模板管理”，点击我们正在使用的模板“beez”。
进入模板“beez”，点击“预览”，其中红色标注的就是模板定义的位置。
2.5.1搜索的添加
回到模块管理，点击“创建”→“搜索”，标题命名为“搜索”，位置选择“use4”，点击应用。
2.5.2面包屑的添加
回到模块管理，点击“创建”→“面包屑（导航路径）”，点击进入，输入标题“导航路径”，将位置放到“breadcrumb”位置上，首页入口的文字修改为“首页”，点击保存。
2.5.3创建自定义模块
自定义模块可以让我们自己定义显示在模块里面的内容，可以输入文字、可以插入图片或者视频。
创建一个自定义模块，显示在网站底部，做为网站的版权声明，打开“扩展”→“模块管理”→“创建”→“定制html”，标题命名为“版权声明”，显示标题为“否”，位置选择“footer”。
2.5.4附加功能的添加
给网站加入在线QQ功能
打开一个QQ在线状态的生成网站，输入你的QQ账号、密码进行登录。
进入编辑页面，选择代码类型为“完全公开”，图片留言“我是客服一号”，在线状态风格可以更改选择一个自己喜欢的图标，点击确定，复制公开代码。
回到网站管理后台，创建一个“定制HTML”的模块，标题为“QQ在线”，代码复制到自定义输出（点击编辑器的HTML，复制到HTML面板，更新）。
点击保存，刷新前台。
[14]
3、组件的应用
组件可以扩展Joomla的功能，让我们的Joomla变得更加强大。
Joomla里面可用的组件很多，它们可以完成不同的任务。
我们可以根据自己对网站功能的需求为网站安装相应的组件。
3．1投票组件的应用
点击“组件”→“投票调查”，点击“创建”进入编辑投票调查页面，进入编辑界面，在细节设置里面命名“标题”为“我网站怎么样？
？
？
”，在选项里面输入调查问卷的一些选项，这里“选项1”为“网站的风格你们喜欢吗？
”，“选项2”为“你们觉得网站有什么地方需要修改？
”，“选项3”为“如果是十分，你们给我的网站打多少分？
”，已发布位置点击“是”。
下面我们还必须创建一个模块来显示我们的调查问卷，点击“扩展”→“模块管理”，创建“投票调查”模块，标题为“投票调查”，位置为“use1”，模块参数中投票调查选择“您对我们的服务是否满意”，点击保存。
下面我们对投票调查做个测试，点击“选项1”→“投票”，即可看到投票的结果。
3．2留言板组件的应用
安装并使用留言组件，点击“扩展”→“安装卸载”→“浏览”，选择我们需要安装的“com_easybook_v2.0_RC4_zh-CN”，安装完成后提示安装成功，下面我们创建一个菜单项，让它链接到这个组件。
点击“菜单”→“常用菜单”→“创建”，选择“easybook”标准布局。
命名标题为“在线留言”，组件参数中显示Easybook为“隐藏，”允许发言的群组更改为“Everybody”，添加上留言内容点击“提交留言”即可，为了防止有人发布垃圾信息，还需要为留言板安装一个验证码组件“com_easycaptcha_v2.0_RC2_zh-CN”，安装完成后进入在线留言的菜单项，组件参数中启用验证码项选择“是”,就可以使用了。
4、插件的使用
插件就是一些扩展Joomla功能的小东西，通常每一个插件都可以完成一个特定的任务。
插件有许多类型，有些插件用在文章中，比如我们即将安装并且使用的相册插件，使用它可以在文章中插入一个可以自动生成缩略图的相册。
还有一些插件提供网站内容的搜索功能，有的插件能够生成页面缓存，可以让网站速度变得更快。
[15]
4．1图片文件的添加
打开管理后台，点击“扩展”→“安装卸载”进入安装界面，安装相册插件plg_verysimple_gallery_1.5.3，安装完毕后提示安装成功。
在默认情况下，新安装插件的状态都是禁用的，下面我们启用安装的相册插件。
点击“扩展”→“插件管理”，选择类型“content”筛选，找到插件“VerySimpleImageGalleryPlugin”，选择启用并保存，点击“VerySimpleImageGalleryPlugin”进行编辑参数，相册宽度修改为“760”单位设置为“像素”，对齐方式选择“左对齐”，缩略图宽度设置为“65”，缩略图高度设置为“35”，缩略图质量“100”，缩略图之间的空间“8”，缩略图显示位置“在大图的右边显示”，设置完成后点击保存，我们要使用VerySimpleImageGalleryPlugin这个插件，必须在文章中使用一个命令，在VerySimpleImageGalleryPlugin插件的简介中有这个命令，命令为{vsig}文件夹名称{/vsig}，打开“网站”→“媒体管理”，这里面显示的是已经上传到我们服务器中的图片。
我们点击左面菜单栏中的“stories”，建立一个新的文件夹，点击“创建文件夹”，，命名为“ainimal”，点击“ainimal”文件夹，进入文件夹里，点击“浏览”→“开始上传”，选择图片进行上传，回到“文章管理”选择我们要插入相册的文章，并选择相册显示的位置，输入相册显示命令{vsig}ainimal{/vsig}，则在“我的照片”-《动物园》中就可以浏览。
按照上述做法添加《成长站》-----正定站，我的小外甥，《成长站》-----天津站等照片文件。
4．2音乐文件的添加
打开管理后台，点击“扩展”→“安装卸载”进入安装界面，安装“com_avreloaded-1.2.4”，安装完毕后提示安装成功。
点击“扩展”→“插件管理”，找到插件“com_avreloaded-1.2.4”，点击启用。
我们要使用VerySimpleImageGalleryPlugin这个插件，必须在文章中使用一个命令，在VerySimpleImageGalleryPlugin插件的简介中有这个命令，命令为{MP3}文件夹名称{/MP3}，打开“网站”→“媒体管理”，这里面显示的是已经上传到我们服务器中的歌曲。
回到“文章管理”选择我们要插入歌曲，并选择歌曲显示的位置，输入歌曲显示命令{MP3}zheyangaile{/mp3}，则在“我的歌曲”-《这样爱了》中就可以浏览。
按照上述做法添加《遗憾》《到不了》等歌曲文件。
4．3视频的添加
打开管理后台，点击“扩展”→“安装卸载”进入安装界面，安装“com_avreloaded-1.2.4”，安装完毕后提示安装成功。
点击“扩展”→“插件管理”，找到插件“com_avreloaded-1.2.4”，点击启用。
我们要使用VerySimpleImageGalleryPlugin这个插件，必须在文章中使用一个命令，在VerySimpleImageGalleryPlugin插件的简介中有这个命令，命令为{视频文件格式}文件夹名称{/视频文件格式}，例如{MP4}文件夹名称{/MP4}。
打开“网站”→“媒体管理”，这里面显示的是已经上传到我们服务器中的视频。
回到“文章管理”选择我们要插入视频，并选择视频显示的位置，输入歌曲显示命令{mp4}borther{/mp4}，则在“我的视频”-《我们小小的青春》中就可以浏览。
按照上述做法添加《我要当舅舅了，呵呵呵呵》《和我一起成长的小松鼠》等视频文件。
5、网站后期
5．1网站的测试
测试网站的跳转和链接，是否能正常跳接到指定界面。
测试投票，QQ等组件能否正常使用。
5．2网站的调试
步骤一：
进入后台，调试有问题的链接，进入前台继续测试。
步骤二：
调试如果不成功，继续调试。
注释
[1]XamppSurhone,LambertM.、Timpledon,MiriamT.、Marseken,SusanF.VDMPublishingHouse（2010-07出版）。
[2]数据库系统概论（第4版）王珊、萨师煊高等教育出版社（2006-05出版）。
[3][4]同上。
[5]廖旻可、吴涛涛：
《Joomla建站步步通》，人民邮电出版社，2009年，第23页。
[6]Joomla之门网站，。
[7]于丙超:
《网站开发:
工程规划、设计与实现》，电子工业出版社，2004年，第55-58页。
[8]郭順能：
《Joomla!
2.5素人架站計畫》，碁峰資訊股份有限公司。
[9]陈红飞：
《PHP内容管理系统：
Joomla快速建站指南》，电子工业出版社。
[10]王学军：
《网站建设与规划》，武汉理工大学出版社 2005年，第25页。
［11］张红 章剑林：
《网站建设》，高等教育出版社，第35页。
[12]徐磊：
《网页制作与网站建设技术大全》，清华大学出版社。
[13]王静等：
《AdobePhotoshopCS4网页设计与制作标准实训教程》，印刷工业出版社。
[14]《HTML5+CSS3网页布局和样式精粹》，清华大学出版社。
[15]导向工作室：
《24小时学会网站建设》，人民邮电出版社。
参考文献
1Joomla之门网站，。
2《HTML5从入门到精通》，清华大学出版社。
3《HTML5+CSS3网页布局和样式精粹》，清华大学出版社。
4王静等：
《AdobePhotoshopCS4网页设计与制作标准实训教程》，印刷工业出版社。
5郭順能：
《Joomla!
2.5素人架站計畫》，碁峰資訊股份有限公司。
6廖旻可、吴涛涛：
《joomla建站步步通》，人民邮电出版社。
7陈红飞：
《PHP内容管理系统：
Joomla快速建站指南》，电子工业出版社。
8杨宇等：
《PHP典型模块与工程实战大全》，清华大学出版社。
9胡嘉玺：
《BLOG启示录：
WordPress博客建设与经营
升级会员 