网站模板的设计与实现学位论文.docx

网站模板的设计与实现学位论文.docx

《网站模板的设计与实现学位论文.docx》由会员分享，可在线阅读，更多相关《网站模板的设计与实现学位论文.docx（30页珍藏版）》请在冰豆网上搜索。

网站模板的设计与实现学位论文

Abstract

WiththeeconomyandtherapiddevelopmentofInternettechnology,thetimelinessandeffectiveness,itismoreimportanttobecometheenterprisecompetitionandthekeyfactorofwinningoncustomerinformation,includinggraspandprovidescustomerswithgoodserviceisthekeyofenterprisedevelopment.IntheInternetsodevelopedtoday,customersmainlythroughthenetworktoknowabusiness,thenwebsiteconstructionenterpriseandcustomerinteractionhasbecomethebridge,isalsomaintainingenterprisecustomergoodrelationshipsofthelink.Thissystemmainlythroughthedesignandrealizationofawebsitetemplateforenterprisestobuildthenetworkplatform,conveniententerprisebetterandmoreeasilydevelopmentwebsite.

ThissystemmainlyUSESthecurrentpopularIcanwithApache+PHP+MYSQLgoldcollocationtodesignandrealizethefunctionofthesystem,whichblendedincurrentpopularAjaxtechnology,andcodeandtemplateseparateSmartytemplates.Thesystem'soverallstructureforMVCpattern,providesthebasisforexpansion.AmongthemisrapidpagerenderingPHPandshortenthepageloadability,canbettershowtimeenterpriseinformationtousers.MYSQLisanopen-sourcedatabase,soitsusesavesthesmallandmediumenterprisestobuydatabasesoftwarecosts.MeanwhileIcanwithApacheserverconfigurationisrelativelysimple,enterprisethroughtheInternetcanfindbuildenvironmentinstallationkits,easytouse.Smartytemplateistopageandlogiccodeofseparation,islaterreplacementtemplateandscriptsoffergoodvalueaddedservicessuchassupport.Thissystemmainlydividedintosixmodule,respectivelyisreceptionistcontrolmodule,appearancecustomizationsmodule,contentmanagementmodule,logmanagementmodule,navigationmanagementmoduleandsystemconfigurationmodule,thispaperintroducedindetail.

KeyWords：

PHP；MYSQL；Apache;；Smarty;；MVCpattern

1．绪论

1.1初步调查

企业网站作为企业文化传播的载体以及企业与客户进行零距离接触与沟通的桥梁，在现代科技发达的信息时代是不可或缺的。

一个没有传播文化的网站的企业，必将失去与客户最直接最有效的沟通了解方式，必将会遭到现代社会的淘汰，也无法抵抗下一秒的经济时代带来的危机风暴。

自助建站系统的出现正能很好地缓冲以及解决这一危机。

据网上了解，很多小型企业在面对文化传媒的压力下不得不接受要是不依靠网络的力量必不能讲本小型企业的文化传播得更彻底，更何谈想要赢取利益。

因此，在他们想利用网络创造小型的企业网站来传播自身企业文化的同时，他们并没有太大的预知投入资金，也不需要很专业媲美的网站来传播，只要求能有个简单小型的网站来帮助自己宣传即可的时候，自助建站系统便是很好的选择。

有40%的中小型企业表示在缺乏技术含量又能够少花钱的情况下愿意尝试自助建站系统帮助自己的企业建立一个简单又有感染力的网站。

可见，自助建站系统是有一定的发展前景的。

1.2背景及现状

自助建站系统的推出必定会刮出又一轮网站制作的风暴，对中小型企业尤其奏效。

在这简单、高效、便捷、安全的系统之下开发建立属于自己的企业网站，相信是中小型企业传播自身企业文化、零距离沟通客户、取得良好的经济效益和社会效益的首选。

EWebBuilder自助建站系统，在解决企业上网过程中遇到的资金、技术等方面的问题上有不可轻视的作用，它可以帮助许多企业花费最少的时间、精力和金钱就能轻松快捷地建立企业自己的网上门户。

1.3技术可行性

EWebBuilder自助建站系统主要采用当前流行的Apache+PHP+MYSQL的黄金搭配,融入了当下流行的Ajax技术，以及代码与模版分离的Smarty模版。

系统整体结构为MVC三层结构，为以后的扩展提供必要的基础。

PHP具有快速的页面渲染能力，缩短了页面载入时间，更好的展现企业信息给网民。

MYSQL是当下开源的数据库，由于它为开源项目，所以免去了中小型企业的数据库软件的购买费用。

Apache的配置也相对简单，而且互联网上也有许多一键安装的环境包，方便了用户自己架设所需的环境。

而Smarty则分离了页面和逻辑代码，为以后更换模板、更换脚本等增值服务提供支持。

1.4操作可行性

对于网页模板设计与实现的系统而言，在使用操作之前必须先了解这个系统的可行性操作以及是否具备用户客观需要的用途。

这个系统主要包括二个主要部分，前台展示部分以及后台管理部分。

在参考了许多类似的系统的功能以及用户体验后，我们小组展开了讨论，得出了许多方便用户录入资料以及展示内容等多种良好的用户体验行为并转换为逻辑代码。

各个页面上方都有详细的说明，所以本系统的操作是完全可行的。

2．需求分析

在该系统中我是负责界面设计跟后台管理功能的一个模块的设计的。

因此分两部分来介绍我所负责部分的需求分析。

2.1界面设计的需求分析

2.1.1界面设计软件应用分析

在这个网站模板的设计中，我的界面设计主要就是后台以及前台页面的页面设计部分。

在此页面设计中，运用了Photoshop强大的强大图像制作和处理能力，进行了大量的图片制作，从而给人以强烈的美感，以及给浏览者一种强烈的时代动感。

整个系统以及前台的网页架构都是由Dreamweaver所完成的。

1.Photoshop软件

众所周知，页面、平面设计，缺Photoshop不可。

它集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。

而在此系统中，整三个界面都是先通用Photoshop先设计出一个页面来，再通过这个页面来切割截取所完成。

由于毕业设计时间赶的原因，我并未亲自设计其他的图标，图形，而是采用了网上搜集图像资源的形式来达到这个页面的需求。

因此，我在上网找到合适的图像之后，经常需要用到Photoshop来切图，割图等等。

因此，在我完成这个系统页面设计的期间，Photoshop是起主导作用的。

2.Dreamweaver软件

在这个系统的页面设计中，另外一个起主导作用以及生成架构的工具就是Dreamweaver了。

Dreamweaver是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

在我用Photoshop所完成的对页面的设计图以及一些图像的切割之后，变需要用到Dreamweaver来组成所有的框架。

采用Div+Css的页面布局方法，这是是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。

2.1.2界面设计框架分析

在这个系统中，由于我们是小组合作。

在这里面体现的更多的就是一种团队的合作精神。

在我们小组的充分讨论和研究之后，我大体上确认了一下整个系统的大体框架图。

我所做的页面设计中，都是整个系统比较简单的，在这个论文中主要介绍四个界面左右，而在这四个界面里面，尤其是后台操作界面又繁杂地分了多个小界面来完成后台操作的需求。

1.登录界面设计分析

首先，我们建立一个自助建站系统就必须要有个登录后台操作的一个登录界面，这样才能进入到后台。

而在这个登陆界面，就必须要有用户名，密码，验证码以及登录按钮才能达到一个登录的需求，另外再加上个人感觉及设计需求添加部分属于能标志这个系统的图标。

最后还设计一个类似于范灯片的滑动画面，在这个画面中滑动显示这个后台管理操作的可行性以及科学性，让用户可以更加了解这个系统。

2.登录成功界面设计分析

在本系统中，登录界面用户采取登录操作，登录成功后，就设计了一个提示登录成功的界面。

此外，还设计了一个用户可以根据自身要求3秒后自动进入后台管理界面或者点击立即进入后台管理界面。

3．后台管理界面设计分析

这是整个系统中最重要也是设计最繁杂的一个界面。

在这个界面里面我的设计，以及实施跟最后的操作都遇到比较多的问题。

最后还是多亏老师以及一些比较懂的同学的指导，很多细节上的东西还是有待学习跟研究的，从而我也发现了自己自身很多的不足。

因为这个页面要设计的比较多，比较繁杂，我把它分成三个部分来介绍此部分的设计。

（1）顶部部分

顶部部分主要设计加入一个EwebBuilder建站的标志，此标志是通过PS设计出来，一个正方体，在看得到的两面都有EwebBuilder的标志。

在这个标志的旁边设计了一句“WelcometoEwebBuilder”然后顶部的右边是一个信息提示栏。

提示栏里的设计是有登录用户名的显示，以便后台用户看到自身的登录名，浏览网站的功能选择，以及退出系统的功能选择。

（2）功能栏部分

在此功能栏中的所有功能均属后台界面操作的全部范畴。

后台界面操作全在这些功能里面实现。

此功能栏在设计中主要分六个板块。

主要有：

前台管理、外观设置、内容管理、日志管理、插件管理、系统配置。

然而再在这六个板块中细分各个板块的功能。

（3）操作部分

在此部分里面，是上述功能栏部分所述的功能操作实施板块。

设计中，在未选择任何操作功能的时候，系统默认是控制面板部分，在控制面板中会在功能栏中十五个不同类型的功能中挑选其中比哦你功能较常用的七种功能放置控制面板中，以方便用户使用和操作。

然后点开任意一功能选择，都会在操作栏那相应地出现操作框，以继续操作。

4.前台网站界面设计

前台的网站页面主要是后台的录入的一种页面显示。

在该页面中对公司的企业文化进行渲染的一种方式。

用户可以在这个页面上充分展示企业的新闻，产品，简介，以及其他相关的行业新闻，内容充实，也可以将此企业的文化底蕴宣传得更加淋漓尽致。

在这个页面上，我主要分几个部分来设计

（1）页面顶部

在这个前台的页面顶部，用黑色背景图，和白色字幕来形成明显的对比。

左边依然是一个EwebBuilder的标志。

这个标志在登录界面，后台管理界面也都存在着，这是我们系统的唯一标志，显示出我们系统的可行性。

右边一般网页都有的标志选择功能栏。

分为四部分，分别是：

首页、企业新闻、产品展示、行业新闻四个标志选择功能栏。

（2）页面中间

在页面顶部的下端分为左中右三个标题内容栏，分别显示各种用户要求宣传展示的内容。

只需添加标题跟内容即可在前台呈现效果。

而在标题栏下面设计一个范灯片设计框，进行图片滑动展示。

（3）页面其它部分

在这个前台页面的其他部分，将设计的是各个板块的内容展示。

例如企业新闻、行业新闻、产品展示等等。

一个板块一个板块地有序排列，给用户一个实体整齐感。

2.2后台管理功能分析

在这个后台管理的功能中，由于自己的技术有限，我只负责其中最简单的一个模块的两个功能。

既日志管理模块中的两个功能：

登录日志和操作日志。

2.2.1后台管理软件应用分析

在这个后台系统中，都是运用PHP技术来完成该部分功能的操作。

主要采用的PHP为基础语言。

EWebBuilder自助建站系统采用的当前流行的Apache+PHP+MYSQL的黄金搭配,融入了当下流行的Ajax技术，以及代码与模版分离的Smarty模版。

系统整体结构为MVC三层结构，为以后的扩展提供必要的基础。

2.2.2后台管理功能框架分析

在此后台管理中，我主要负责的是最简单的一个模块，日志管理模块。

日志管理模块需求主要是要有登录日志信息浏览跟操作的功能以及用户操作日志信息浏览跟操作的功能。

因此需要用到用户的后台数据库信息以及操作保存的数据库信息。

日志管理模块功能设计如下：

1.登录日志

此功能是为了方便管理者更好地查阅到有谁登录过这个后台系统，设置一个表格，其中这个表格包括编号、标记、用户名、登录/退出、发生时间、操作（单项删除）等。

而标记是为了批量删除做准备，操作中只可以单项删除。

在表格的下方有两个功能操作，一个是批量删除，批量删除必须在表格上需删除的数据做标记才能批量删除。

另外一个是撤销删除，撤销删除是避免用户不小心删除了还需要的数据用以恢复，恢复之前删除的数据。

2.操作日志

此功能是为了方便管理者更好地查阅到操作后台管理的有关信息。

这里是一个表格信息，该表格包括编号、标记、操作者、进行的操作、操作模块、操作时间、操作（单项删除）等。

标记一样是为了批量删除做准备，操作中也只是可以进行单项删除。

在表格的下方依旧有两个功能模块，一个是批量删除，跟上述一样，批量删除必须在表格上需删除的数据做标记才能进行批量删除操作。

另外一个也是撤销删除，以防删除有误进行恢复。

3．设计

3.1界面设计

3.1.1登录界面

在该登录界面中主要有用户名和密码，以及输入正确的验证码才能进行登录。

用户名和密码是数据库里面存在相应的，验证码是随机的。

任何一项输入不正确都无法登录到整个系统。

而左边依照设计有个范灯片信息框，一样的大小，颜色不同，内容也不同进行轮流滑动。

范灯片信息框是为宣传让用户更加深入地了解整个后台用户的功能能。

3.1.2后台管理界面

在该界面中我主要介绍后台管理操作的功能。

主要分前台管理、前台控制、外观设置、内容管理、日志管理、插件管理、系统配置等六大模块的功能然后再细分。

如图3-1所示：

1.前台控制模块

前台控制主要有控制面板、宣传管理、和用户管理三大功能。

控制面板既后台首页的控制面板，在该控制面板中有七大常用功能在里面供选择，方便用户更好地使用后台操作，而在这七大功能里面次序是可以随便调换的，只要使用鼠标拖引即可，非常方便。

宣传管理是针对前台的宣传。

在那里可以上传不等图片在前台显示，也是利用范灯片滑动信息框进行显示。

只需要在后台添加图片跟链接即可。

而下方的文字设置部分是在前台的顶部的标题栏那里显示。

只需要在后台添加左侧标题、左侧内容、中间标题、中间内容、右侧标题、右侧内容保存即可。

就可以在前台显示你在后台所输入的标题跟内容。

2.外观设置模块

外观设置主要包括主题、编辑logo、编辑样式三大功能。

主题是前台的主题，在我们的系统里面我们由于时间关系只弄了两个主题，可自由切换，然后刷新前台页面即可更换新的主题。

编辑logo主要是前台的logo设置。

在具体数据设置框里面可以对logo进行对方面的设置。

有字体大小、字体横向位置、字体纵向位置、图像高度、图像宽度、小字体大小、小字体横向位置、小字体纵向位置、字体内容、小字体内容等设置。

通过滑动选择条的形式调节自己想要的效果，再保存，即可在前台刷新呈现。

编辑样式主要针对对CSS熟悉的用户，可以自己编写CSS样式来更改前台的模式达到自己喜欢的效果。

而在页面右栏有其他样式四个文件供用户参考，有多重选择。

在下方有个校验模式的功能见，这个功能对于编写CSS样式的用户是十分实用的，还有个保存的功能键，以及一个操作指南功能键.操作指南功能相当于使用帮助，一点击就可以看到使用帮助写着:

在文本域内显示的为CSS文件内容，右侧有当前模板下的CSS文件。

修改CSS后点击检验模式来检查错误。

检验模式注释信息为绿色、选择器和分号为粉色、属性为褐色、属性值为蓝色.

3．内容管理模块

内容管理模块包括企业简介跟模块管理功能。

在企业简介功能模块中，可以自主输入该企业的简介，描述企业的信息或者概况，选择各种编辑方式然后选择数据库保存即可。

如图3-2所示:

图3-2.企业简介功能图

模块管理即在前台界面模块栏的管理。

在那里可以自行添加删除满足各用户的需求。

此功能有模块名称、所在位置安排、模块类型、模块信息数、模块文章查看跟删除的修改、增加、删除操作。

也可以进行新增模块、批量删除、模块排序等操作多方面满足用户所需。

4.日志管理模块在下面的后台管理将着重介绍。

5.导航管理模块

导航管理里面有一个导航列表的功能。

既前台顶部的链接栏。

用导航中文、或导航英文、导航位置以及链接地址等内容的输入修改来完成导航条的工作。

在此也可以进行增加、删除、修改的操作。

排序是按导航位置中的序号来排序的，序号越小则越前。

而只要输入链接地址就可以继而在前台点击进入另外一个地址的页面。

6．系统配置模块

系统配置分为全局配置、数据库、以及文件管理三个部分。

全局配置修改一些网站的基本配置和信息，是对该企业的基本配置和邮件配置的输入和修改。

基本配置里面包括网站名称、备案号、关键字、网站简介、企业名称、网站地址等，而邮件配置里面包括发件人名称、SMTP用户名、SMTP密码、SMTP服务器等。

数据库部分则可以对数据库的一些清理、导入、导出和还原。

可以全部导出也可以部分导出，导出到本地磁盘里面以数据库形式存在。

也可以还原你需要用到的某些或者全部数据库。

文件管理可以对传文件夹进行管理。

在文件夹里面是对应本地系统文件夹里面的内容。

也可以新增文件夹，在本地系统文件夹里面也相对应地会增加。

删除文件夹里面的内容在本地系统文件夹里面也会做相对应的删除操作。

本系统的基本后台操作功能介绍完毕。

3.2后台管理

在我负责的后台管理的日志管理这一模块中，主要包括登录日志跟操作日志的信息浏览、删除、以及撤销删除等操作。

在日志管理这一块运用的是PHP技术的语法。

针对登录日志跟操作日志便于管理者的浏览跟管理，运用的原理是现用PHP制造出个表格，表格中必须雅要有管理者浏览跟管理所需要的的信息，然后再从数据库中的内容读到这个表格来，即可在后台中浏览的到。

3.2.1数据库设计

1.登录日志代码设计

act=del_sign_in_log"method="post"id="del_log">

编号

标记

用户名

登录/退出

发生时间

操作

表格设计如图3-3所示：

图3-3登录日志表格设计图

2.操作日志表格代码设计

act=del_do_log"method="post"id="del_log">

编号

标记

操作者

进行的操作

操作模块

操作时间

操作

表格设计图如图3-4所示：

图3-4操作日志表格设计图

3.2.2功能设计

设计好表格后即可从数据库中读取信息，把数据库里面的所有信息取出来，然后循环到页面上，再以表格的形式在后台显示。

对于表格中的删除以及批量删除和撤销等操作都是用代码实现的。

原理：

批量删除就是批量删除就是前面的复选框记录每个信息的ID号，然后点删除之后提交到程序中，程序就循环删除，代码格式就是deletefrom表名whereid='每次循环出来的ID'。

撤消删除操作，就是运用在删除的同时把数据存到另外一张表上，然后撤消的时候，把另外一张表的数据，读回原来的数据表中，然后撤消的表就清空的原理。

4实现

4.1界面

下面我将界面设计的各个界面的功能图即以展示。

图4-1登录界面图1

图4-2登录界面图2

图4-3.登录成功界面图

4.2功能模块

4.2.1后台管理图及核心代码

图4-4.后台管理界面图

核心代码如下：