网站内容管理系统设计

本科毕业论文题目：网站内容管理系统 学院： 专业班级： 学号： 学生姓名： 指导教师姓名： 指导教师职称：年月日摘要随着互联网技术的飞速发展，建设一个网站的技术门槛越来越低。但是对于有网站建设需求的初学者来说，由于没有任何基础，对相关的概念很迷茫，在摸索的过程中会走很多的弯路。其实使用免费开源的内容管理系统（ContentManagementSystem，简写CMS），建设一个网站是轻而易举的事情内容管理系统是典型的CMS信息管理系统,其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的库。而对于后者则要求应用程序功能完备,易使用等特点。本系统在前端开发设计中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，网站前端最基本的四个技能：PS，HTML，CSS，JavaScript。这个是前端开发最基本也最重要的技能，前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。设计此管理系统的目的是希望能给需要此类信息的人们带来方便，同时自己在完成此程序的过程中学到知识和经验。关键字：管理系统、前端、HTML、CSS、PS、JavaScript.ABSTRACTWiththerapiddevelopmentofInternettechnology,theconstructionofawebtechnologyismoreandmorelowthreshold.Butforthebeginnerwithwebsiteconstructiondemand,becausethereisnobasis,veryconfusedontherelatedconcept,intheprocessofexplorationwilltakemanydetours.Contentmanagementsystemistheuseoffreeandopensource(ContentManagementSystem,abbreviatedCMS),buildingawebsiteisabeaneasyjobtodoCMScontentmanagementsystemisthetypicalinformationmanagementsystem,itsdevelopmentmainlyincludestwoaspects:thebackgroundoftheestablishmentandmaintenanceofdatabaseandfront-endapplicationdevelopment.Fortheformerrequirementtoestablishdataconsistencyandintegritystrong,thedatasecuritygoodstorehouse.Forthelatterrequestapplicationprocedurefunctioniscomplete,easytouseetc..Thesysteminthefrontenddesign,inthelayoutofthepage,HTMLwilldefinetheelements,positioningCSStodisplayelements,front-endwebfourmostbasicskills:PS,HTML,CSS,JavaScript.Thisistheskilloffront-enddevelopmentthemostbasicandmostimportant,front-enddevelopment,inthelayoutofthepage,HTMLwilldefinetheelements,positioningCSStodisplayelements,andthenthroughtheJavaScripttoachievethecorrespondingeffectandinteraction.Althoughthesurfacelooksliketheseisverysimple,butitneedstograspthingsdefinitelynotless.Inthedevelopment,theneedfortheseconceptsclear,clear,sointhedevelopmentprocesswillbehandy.Thismanagementsystemdesigngoalistobringconveniencetopeopleinneedofsuchinformation,anduponcompletionoftheprocedureoflearnedknowledgeandexperience.Keywords：Managementsystem,frontend,HTML,CSS,PS,JavaScript.目录TOC\o"1-3"\h\u20559第1章绪论 页第1章绪论1.1选题背景及意义如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取，发布和传递信息。目前网络上有成千上百的网站，譬如：很多高校建立了自己的网站，企业网站建立了自己的网站，还有各种论坛，电子商城网站。这些网站的建立方便了人们的生活，当然现在越来越多的人，想在网上有自己的网站，在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式[1]。但是一旦网络设计完毕并投入使用后，随着时间的变化，对网站的需求也有可能发生变化，例如：某高校想在自己的校园网上添加一个新栏目或者删除一个栏目，那么毋庸置疑，传统的网站开发会进行网站的“二次开发”，对网站进行修改，但是这不仅费时费力，更让人头疼的是，如果需求频频发生变化，那么网站就要随之改变，网站的代码就必须改来改去的。这无疑给网站设计者带来时间和金钱上的损失，网站内容管理系统具有许多基于模板的设计，可以加快网站开发的速度和减少开发的成本。我们要创建我们网站内容管理系统的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS矢量图像编辑技术。这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。建立网站内容管理系统发挥的作用如下（1）一个建全完善的网站内容管理系统是基于很多模板和插件的，网站内容管理系统实现对用户的友好，而后台是网站内容管理系统的重中之重，网站的后台使网站内容的创建，管理，分享更加简洁。（2）网站内容管理系统采用灵活方便的可视化模板引擎，支持HTML静态网页生成，可用于创建各种新闻文章网站。（3）完善的内容管理功能，后台各频道具有分类检索，搜索，自动排序方式，批量处理，转移栏目和类别等完备的内容管理功能。本课题研究的主要目的之一即是帮助网站建设初学者了解和学习网站建设整个过程的基础知识，消除他们对网站建设的迷茫与恐惧心理，适合希望个人网站的初学者，希望节省开支并获得网站运营基础知识的中小型网站以及全面了解网站建设与运营的人群参考，本文内容将是你走上快速网站建设之路的捷径。1.2选题研究的目的很多人认为建设一个网站觉得很复杂，同样也有很多人认为，做一个网站很简单，那么做一个网站是简单还是复杂呢？建设一个网站其实最简单的方式，就是利用现成的系统进行建设，这样就不得不说内容管理系统了在网站建设中的巨大优势了。网站内容管理系统（CMS）以信息共享为核心目的，面向大量信息处理，集成管理，传播，查询与一体，可以实现从内容采集，创建，传递到内容分析的完整整合；内容管理系统包括网络信息内容的创建获取，存储和管理，权限管理，以及信息发布等一系列功能，其功能模块化的设计，完善的管理员权限等级设置，可以实现不同部门不同地点的内容创作人员，编辑人员，发布人员，均可根据不同的权限在同一平台上提交，修改，审批，发布等内容，内容管理系统模板与程序功能的前后台分离，可以让初学者不用花很大力气和资本，短期内即可建设功能强大界面同一的各种类型站点；内容管理系统在结构设计，搜索引擎优化方面富含经验的精细设计，可以让建设出来的站点具有良好的搜索引擎友好度，使网站在网络营销中占据巨大的优势。近几年互联网发展异常迅速，互联网网站数量与日剧增，其中的大多数网站，都是由非专业人士运用网站内容管理系统（CMS）建设起来的，CMS因其较低的技术门槛及开源而强大的功能，在互联网网站建设中起着举足轻重的作用，可以说CMS推动了互联网网站的迅速发展，因此使用CMS，你不需要掌握很多的技术，即可建设出功能完善的各种网站，所以研究分析CMS的使用与发展趋势，是具有重要的意义。另一方面，个人网站得以大量的涌现，开源软件的发展是推动互联网飞速发展重要因素。如果说建设大型的专业性的网站平台，需要企业聘请专业的团队定制和管理，那么对于功能需求相对普及化的中小型站点，就没有能力也就没有必要付出昂贵的代价，对于一般的中小型的网站建设，完全可以花费很少的资本，选择优秀而合适的CMS内容管理系统进行搭建，从而以较少的投入获得较高的效益。本课题从CMS的概念讲解入手，从当前互联网网站建设的现状和形式分析，从一个初学者的角度考虑，重点以一个企业网站建设实例为参考模型，介绍一般的个人网站，企业网站以及专业性门户网站的搭建过程，根本的目的即让对网站建设感兴趣的非专业人士，能够了解一般网站建设的基本过程，能够独立地搭建起个人希望建设的网站站点，并能够进行一般性有意义的网站运营。本文中提到的缩写CMS一般均意为“内容管理系统”。1.3可行性分析当前建立企业，政府对外的门户网站或者面向内部企业员工建立信息发布平台是信息化建设的重要组成部分。然而，尽管各部门已建成各种形式的网站信息发布平台，但是大多平台功能简单单一，而且信息更新缓慢，内容粗糙单一，对多媒体内容的管理相对薄弱，很难满足信息交流，资源共享的实际需要，另外，大多功能单一的企业网站在营销化方面做的糟糕至极，企业网站很难起到实际的效益。此外，随着网络的普及，个人网站也越来越多，很多非计算机专业的人也希望建设自己的个人网站。几年前，想要在网络上顺利发表个人的文章或作品，还真的需要知道一点技术，而现在，大多数天天写着文章的人，都是没有任何技术背景的普通用户，而随着开源CMS项目如火如荼的发展趋势，加上未来主机托管或者虚拟机租用费用的不断降低，任何一个不具备专业技术知识的人，只要感兴趣，都可以轻易的建立自己的网站，如果说这几年网络日志的发展解放了普通民众的发言权，那么功能更为复杂的CMS系统的法杖，将会促使那些更加会创造，会关心别的用户的需求的人的创造得到利益的回报。内容管理系统由于大都是专业团队历尽多年开发出来的整站系统，具有一般平台不可比拟的巨大优势：首先，CMS低廉的价格，节省网络技术投入成本，降低技术难度，是值得网站建设者选择的理由之一；其次CMS强大健全的功能，能满足各种应用需求，能够提高快速部署能力和结构更新，提高网站运营效率和信息更新力；再者，CMS模块化设计以及阶梯型用户权限部署，能够轻松地规范网站管理运营规则和管理手段；此外，CMS强大的后台管理功能，能从很大程度上减轻网站技术和采编人员的工作难度和压力，使一般网站管理员不用学习专业的知识，只需简单的文档添加操作即可较好的管理整个网站。总是，CMS是中小型网站快速建立门户网站的捷径，是企业单位和个人建设网站的可行性解决方案。通过本课题的研究学习，能够让读者对内容管理系统有一个明确清晰的认识，对一般性网站建设过程有清晰的了解，对网站的运营与优化推广方法有基础的意识，并能通过短期的学习，独立搭建个人或者企业站点。1.4本章小结本章阐述了开发网站管理系统的研究背景和意义。介绍了网站的发展现状，以及对于非专业人士最快的建站方法对，说明了网站内容管理系统的总体规划思想。最后对于本文课题的研究内容进行了可行性分析。第2章前端开发工具及相关技术2.1前端开发环境网站前端开发，即网页架构设计。主要是由与交互设计，视觉设计的配合，根据效果图来规划页面布局，合理部署页面代码层次，挖掘用户体验效果。用Editplus，CSS，JS等布局网页内容，制作静态页面，这些页面要兼容各主流浏览器，并配合程序完成静态页面与后台程序的整合工作。另外，要对网站做一些相应的更新，维护及优化。整个网站开发的流程在后面有具体介绍。前端开发在整个过程中占据着不可替代的地位，其它几个环节主要给予相关的配合[2]。2.2前端开发工具（1）PhotoshopAdobePhotoshop，简称“PS”，是一个由AdobeSystems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面的图片，用Photoshop制作矢量图形用作网站页面的修饰按钮。EditplusEditPlus是由韩国人编写的一款共享软件(1-userlicense:US$35)，最新版本是EditPlus3.41(2012-05-03)。EditPlus是功能全面的文本、HTML、程序源代码编辑器。首先，EditPlus是一套功能强大的文本编辑器。它拥有无限制的Undo/Redo功能，让你不再为一步误操作而后悔不已；其强劲的英文拼字检查、自动换行、列数标记、语法高亮显示、垂直选择、搜寻功能，让你全面体验记事本所没有的超强功能；它可以同时编辑多种文件类型，轻松做到“一旦拥有，别无所求”；另外还有全屏幕浏览功能；特别值得一提的是，它的监视剪贴板的功能，能同步于剪贴板自动将文字贴进EditPlus的编辑窗口中，让你省去粘贴的步骤。其次，EditPlus还是一个好用的(X)HTML编辑器。在EditPlus中设计网页和编辑一个文档没什么两样。单击“File”→“New”→“HTMLPage”，就可以打开“HTML页面编辑器”窗口，使用它所提供的工具就可以直接进行网页的编辑与创作。EditPlus除了可以对你直接输入的文字用颜色标记HTMLTag（同时支持C/C++、Perl、Java）外，还内建了完整的HTML和CSS1指令功能，你甚至可以一边编辑一边“浏览”（CTRL+B）页面效果。对于习惯用记事本进行网页编辑的网友们来说，它可以帮你节省一半的网页编辑时间。再次，EditPlus其他比较好用的功能包括：可以设置工程并进行多文件查找；代码片断；自动完成；设置标记方便跳转，EditPlus功能众多，有不少功能很多编辑器都是有的，就不进行介绍.(3)MyEclipse简介MyEclipse企业级工作平台（MyEclipseEnterpriseWorkbench，简称MyEclipse）是对EclipseIDE的扩展，利用它我们可以在数据库和JavaEE的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。MyEclipse[]结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。简单而言，MyEclipse是Eclipse的插件，也是一款功能强大的JavaEE集成开发环境，支持代码编写，配置，测试以及除错，MyEclipse6。0以前版本需先安装Eclipse。MyEclipse6。0以后版本安装时不需安装Eclipse。2.3前端开发相关技术2.3.1html简介[6]超文本标记语言HTML作为一种语言，它具有语言的一般特征，所谓语言的一般特征是一种符号系统，具有自己的词汇（符号）和语法（规则）。所谓标记，就是作记号。和写文章时通常用大体字标记文章的标记，用换行空两格标记一个段落一样，HTML是一对<h1>标记把文字括起来表明这些字是标题，用一对<p>标记把一段字括起来表明是一个段落。‘所谓超文本，就是相对普通文本有超越的地方，如超文本可以通过超链接转到指定的某一页，而普通文本只能一页页的翻，超文本还具有图像，视频，声音等元素，这些都是普通文本无法具有的。超文本标记语言HTML是一种建立超文本/超媒体文档的语言，它用标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些元素。HTML语言与编程语言有明显的不同，首先它不是一种计算机编程语言，而是一种描述文档结构的语言，或者说排版语言；其次HTML是弱语法语言，随便怎么写都可以，计算机尽力去理解执行，不理解的按原样显示，而编程语言是严格语法的语言，写错一点点计算机都不执行，报告错误；再次HTML语言不像大多数编程语言一样需要编译成指令后执行，而是每次由浏览器解释执行。2.3.2CSS简介CSS[4]是CascadingStylesSheets的缩写，中文译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS[](层叠样式表)是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。什么是CSS？CSS中，Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。(1) 内联式样式表；(2) 嵌入式样式表；(3) 外部式样式表；CSS的特点CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS使得网页的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用，集中管理样式信息，设定共享样式，将样式分类使用。2.3.3Javascript简介Javascript的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表达能力[3]。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代。Javascript脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与WWW的结合有效地实现了网络计算和网络计算机的蓝图。无疑Java家族将占领Internet网络的主导地位。因此，尽快掌握javascript脚本语言编程方法是我国广大用户日益关心的问题。2.3.4Javascript基本特点(1)基于对象的语言javascript是一种基于对象的语言，同时也可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用[]。(2)简单性javascript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。(3)安全性javascript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。(4)动态性javascript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(HomePage)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。2.3.5JQueryJQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITELESS，DOMORE，写更少的代码，做更多的事情。它是轻量级的js库(压缩后只有21k)，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE6。0+，FF1。5+，Safari2。0+，Opera9。0+）。JQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTMLdocuments，events，实现动画效果。jQuery其模块化的使用方式使开发者可以很轻松的开发出功能强大的网页特效。本文主要论述了如何在Web开发中使用jQuery技术，丰富网站的交互性和用户体验性[]。jQuery是一套Javascrip脚本库。"Javascript轻量级脚本库"系列文章。Javascript脚本库类似于。NET的类库，这些工具方法或对象方法封装在类库中，方便用户使用。注意jQuery是脚本库，而不是脚本框架。"库"不等于"框架"，比如"System程序集"是类库，而"ASP.NETMVC"是框架。jQuery并不能帮助我们解决脚本的引用管理和功能管理，这些都是脚本框架要做的事。脚本库能够帮助完成编码逻辑，实现业务功能。使用jQuery将极大的提高编写javascript代码的效率，让写出来的代码更加优雅，更加健壮。jQuery有如下特点：(1)提供了强大的功能函数使用这些功能函数，能够帮助我们快速完成各种功能，而且会让我们的代码异常简洁。(2)解决浏览器兼容性问题javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦，常常一个页面在IE9，Firefox下运行正常，在IE6下就出现莫名其妙的问题。针对不同的浏览器编写不同的脚本是一件痛苦的事情。有了jQuery我们将从这个噩梦中醒来，比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的，从前要根据event获取事件触发者，在IE下是event.srcElements而ff等标准浏览器下下是event。target。jQuery则通过统一event对象，让我们可以在所有浏览器中使用event。target获取事件对象。(3)实现丰富的UIjQuery可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的用户体验。单以渐变效果为例，从前我自己写了一个可以兼容IE和ff的渐变动画，使用大量javascript代码实现，费心费力不说，写完后没有太多帮助过一端时间就忘记了。再开发类似的功能还要再次费心费力。如今使用jQuery就可以帮助我们快速完成此类应用。(4)纠正错误的脚本知识大部分开发人员对于javascript存在错误的认识。比如在页面中编写加载时即执行的操作DOM的语句，在HTML元素或者document对象上直接添加"onclick"属性，不知道onclick其实是一个匿名函数等等。拥有这些错误脚本知识的技术人员也能完成所有的开发工作，但是这样的程序是不健壮的。比如"在页面中编写加载时即执行的操作DOM的语句"，当页面代码很小用户加载很快时没有问题，当页面加载稍慢时就会出现浏览器"终止操作"的错误。jQuery提供了很多简便的方法帮助我们解决这些问题，一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!2.4本章小结本章介绍了开发网站内容管理系统前端所需要的开发工具和他们的运行环境，同时讲述了相关的前端开发技术比如：Javascript，CSS，jqurey等。以便以后的开发过程中能够对这些开发工具盒技术有深刻的理解。第3章前端布局分析与设计3.1前端总体开发流程及设计前端设计Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML，CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化，SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性，组件的易用性，分层语义模板和浏览器分级支持等。3.1.1分层开发在网站内容管理系统概要确定后就需要进行分层开发的划分，根据项目内容的不同，划分工作。大致分为，总体结构搭建，模块制作，页面制作，底层JS搭建[7]，JS交互效果，内部测试，代码优化。如图3-1所示：图3SEQ图\*ARABIC\s11分层开发图这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的安排时间，在有限的时间内做出很多模块和功能。降低开发成本，提高开发效率。3.1.2代码编写前期工作准备好后，就开始进入代码编写阶端，大致流程为总规划和设计草稿完成后，就进行前期的前端开发（搭建大致的HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前端提前介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。确认二，三级页面的风格搭建统一框架。前端设计样式确定以后，就进行通用模块样式的设计（包括按钮，分页，默认字体颜色，连接颜色等），完成后并提交给前端，统一的搭建。在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML时候充分发挥想象尽可能的满足后期样式表现的需要。如图3-2所示：图3-SEQ图\*ARABIC\s12编写代码流程图代码编写过程中让前端提前进入开发流程中来，在样式属性后就进行HTML结构的编写，页面设计完成后，在进行样式表的开发，这样不仅能节省很多的开发时间，提高开发效率，能在前端对全局页面的把控。在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆，这样能便于后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。3.1.3内部测试与后续优化

前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后，就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP请求如图3-3所示：图3-3内部测试流程图图34前端开发流程图这套流程制定出来就一直要求所有前端设计必须严格按照流程执行，也经过了很长时间的磨合跟改进。虽然不是很完美，但是很适合我们现在开发的需要，好处也是显而易见的，遵循并使用它对我们的发开有很大的帮助，能更好的应对高强度，高质量的开发需要。代码更可控，开发效率更高。3.2前端UI设计3.2.1网站LOGO的设计网站的图标是一个网站的门面，只有设计好的图标才可以引来更多的浏览量，本系统是网站内容管理系统，偏重信息化的东西，要传达给用户更多，较清晰的信息，设计的图标要清新，实而不华，在本次网站内容管理系统的设计中，选择与网站色调一致的色系-蓝色。其中CMS前面的图样是IT两个字样，其中以IT来设计是因为开发本系统的都是从事IT行业的，I设计成波浪形式的，T设计成海燕形式的，表意：海燕在大海中展翅飞翔，寓意：可以克服重重困难，事业蒸蒸日上。（注：由于设计的图标很小，在word中截图不是太清楚，这是放大后的效果）。图3-2网站LOGO图标3.2.2网站整体布局网站整体布局大致可以分为“同”字型。最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，网站内容的左边是会员登录和注册，最下面是网站的一些基本信息，联系方式，版权等。这种结构是网站常见的一种布局方式，其实时操作版面，页面布局清晰，摆布对称，主次分明，整体布局如图3-3.子栏目排行榜子栏目排行榜版权Logo导航内容图3-3网站整体布3.2.3模块分布UI设计这是设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。下面是以任由设计师发挥，不是这样死板，要运用层次感的原理去设计如图3-5,3-6所示：正确的层次布局错误的布局图35布局对比图在网站内容管理系统中UI层次感的体现3.2.4颜色配置产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是000000，

例如经常写的red，color:#FF0000；缩写color:#F00；color:gray(#808080)；是比较深的灰色。所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。我们网站上用的色彩系是属于蓝白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色，因为是内容网站所以要体现一种淡雅，自然的色彩风格。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。首页的顶端使用蓝色标题图片下面用浅蓝色这两个部分过度的很自然。在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成蓝色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。违纪一点禁止大面积使用白色文字，特别是较深的背景下，禁止大面积使用加粗文字如图3-7所示：图37字体颜色变换3.3

点，线，面的运用先进开发思想和良好设计模式的前端模块化技术正逐渐成熟。根据网站前端模块化的不同开发思想，详细分析了目前常见的三种模块化开发策略，阐述了每种开发策略的具体实现方法，常见的框架与工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些方法。在网页设计中同样离不开平面设计中最基本的点，线，面的运用。3.3.1点的运用在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，点的引导作用必不可少如图3-12所示：3.3.2线的运用线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花如图3-13：3.4网站结构布局及设计3.4.1网站首页结构实际内容占据网页的大部分空间，为50%～80%，导航部分20%左右。颜色的选择以蓝白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性，标题区，标题行和正文区使用了不同大小的字体，正文使用的是静止的文字，且字体足够大，以便于阅读。网站内容管理系统主要用来进行网站内容信息的显示。作为一个网站，应该由一些相关及相对独立的模块整合而成。本网站系统主要包括以下几个主要页面及几个大的模块，每个页面包含丰富的内容，每个大的模块下又细分为几个的功能模块。

制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站拥有完善的功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。3.4.2主题鲜明，富有特色在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色做出定位，规划网站的组织结构。要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些LOGO[]标志应充分加以利用。调动一切手段充分表现网站的个性和情趣，突出个性，这样才能够办出网站的特色如图3-15所示：图网站标题logo3.4.3版式编排布局合理性BABADcDcEEFF网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。站点设计简单有序，主次关系分明，将零乱页面的组织过程，混杂的内容，依整体的布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字，图形与空间的关系，使浏览者有一个流畅的视觉体验，如图3-16所示：图中的A网站内容管理系统的大logo以及网站名称，能展现网站的主题。访问者第一眼就能看的出来网站的类别等。B区域是网站的导航栏，导航的颜色基本上是蓝白色，能展现网站的大体内容。导航栏跟顶端logo的颜色基本上一致，用户浏览网页时才不会产生视觉疲劳。导航栏中每个导航按钮的设计也是符合美观要求。大方，大气，自然是设计导航栏的重要基础。C区域是首页中各个栏目中的主要信息，即文章D区域是子栏目。方便找到不同类型的文章E区网站文章的排行榜。最近在系发生的最新鲜的新闻，消息等内容都在这里按时间循序显示。F区域版权等基本信息。第4章主要功能的实现4.1主要功能的实现4.1.1模板设计首页模板设计根据网站主题，设计模板的布局模板统一顶部为导航条，网站的栏目，前台显示的栏目是通过后台添加的。模板的中部是网站的图文信息，根据网站的最新的信息，或者网站的主题信息，设计的模块模板的底部是网站的版面制作版权信息等（2）列表页模板设计列表页模板的顶部和首页模板的顶部是相同的，这样保持了网站的风格一致。列表页模板的中部的左边部分是栏目下的信息列表，根据不同的栏目显示对应的栏目下的信息列表，中部的右边部分是顶部栏目下面的子栏目，还有最受关注的文章列表列表页模板的底部是网站的版面制作，版权信息等（3）详情页模板设计详情页模板的顶部和列表页还有首页模板的顶部是相同的，这样保持了网站的风格一致性。详情页模板的中部的左边部分是文章的详情，包括标题，发布时间，浏览次数，文章内容等。详情页模板的中部的右边部分是顶部栏目下的子栏目，还有最受关注的文章列表详情页模板的底部是网站的版面制作，版权信息等4.2具体功能的实现前台新闻显示可以根据网站的需要，进行更新，如显示栏目导航，某个栏目的N条新闻等。通过自定义标签与后台数据库进行连接。如：栏目导航的显示通过标签{#ht:channeltype=’top’#}{#/ht:channel#}type表示栏目类型top表示顶级栏目son表示（2）子栏目对栏目列表的显示通过标签{#ht:listpagesize=’num’#}{#/ht:list#}显示栏目下文章列表和这个标签一起使用的是{#ht:pagesdesc=’样式’/#}分页标签，用来为列表分页对文章内容的显示通过标签{#ht:DBfield=’字段’/#}文章的字段title显示文章标题content显示文章的内容等首页文章列表显示通过标签{#ht:articlechannelid=’栏目id’titlelen=’标题长度’rows=’显示条数’order=’顺序’orderby=’字段名’...#}channelid为该栏目下的文章，titlelen为显示标题长度rows为显示文章的条数order为排序顺序orderby为按照什么字段排序各个模板页的头部和底部风格一致通过标签{#ht:includefile=’模板名称’/#}file为要包含的模板文件的名称通常为head.htm和foot.htm除此之外还有一些全局标签如：{#ht:globalwebHost/#}网站域名{#ht:globalcsspath/#}css文件路径{#ht:globaljspath/#}js文件路径{#ht:globalimagepath/#}图片路径等系统通过后台解析嵌套在模板文件中的所有的标签生成静态html文件从而实现文章的实时性以及用户浏览体验4.3具体实现技术4.3.1首页模板[5]{#ht:includefile='head.htm'/#}<!--包含头部模板文件--><divclass="content">{#ht:articlechannelid='9'rows='5'titlelen='18'#}<!--调用文章标签取出栏目id为9的栏目下面的文章--> <h4class="blue"><ahref="{$ht_arcurl}"title="{$ht_title}">{ht_title}</a></h4><p><imgsrc="{$ht_litimg}"width="90"height="60"/></p><divclass="bk20hr"><hr/></div>{#/ht:article#}</div><ulclass="contentdigg">{#ht:articlechannelid='8'rows='3'#}<!--调用文章标签取出栏目id为8的栏目下面的文章，取3条--> <li><ahref="{$ht_arcurl}"target="_blank"title="{$ht_title}">{$ht_title}</a></li>{#/ht:article#}</ul>{#ht:includefile='foot.htm'/#}<!--include标签包含底部模板文件-->4.3.2列表页模板{#ht:includefile='head.htm'/#}<!--包含头部模板文件--><divclass="col-left"><divclass="crumbs"><ahref="{#ht:globalwebHost/#}"><!--使用全局标签得到首页地址-->首页</a><span>></span>列表</div><ulclass="listlh24f14">{#ht:listpagesize='4'#}<!--使用list标签调用相应栏目下面的文章每页显示4条--> <li><spanclass="rt">{$ht_pubdate|date='Y-m-dH:i:s'}</span>·<ahref="{$ht_arcurl}"target="_blank">{$ht_title}</a></li> <liclass="bk20hr"></li>{#/ht:list#}</ul><divid="pages"class="text-c"><ul>{#ht:pagedesc='first,pre,pagelist,next,end'/#}<!--使用page标签对列表进行分页desc是分页样式--></ul></div></div><divclass="box"><h5class="title-2">栏目</h5><ulclass="contentdigg"> {#ht:channeltype='son'rows='2'#}<!--使用channel标签得到相应栏目的子栏目--> <li><ahref="{$ht_typeurl}">{$ht_typename}</a></li> {#/ht:channel#}</ul></div>{#ht:includefile='foot.htm'/#}<!--包含底部模板文件-->4.3.4内容页模板{#ht:includefile='head.htm'/#}<!--包含顶部模板文件--><divid="Article"><h1>{#ht:DBfield='title'/#}<!--调用全局标签得到文章标题--><br/><span>{#ht:DBfield='pubdate|date=Y-m-d\H:i:s'/#}<!--调用全局标签文章发布时间-->   来源：{#ht:DBfield='author'/#}   评论：<ahref="#comment_iframe"id="comment">0</a>点击：</span><spanid="hits">{#ht:DBfield='clicknum'/#}</span></h1> <divclass="summary">{#ht:DBfield='content'/#}<!--文章内容--></div> <divid="pages"class="text-c"></div><pstyle="margin-bottom:10px"><divclass="bk15"></div></div><divclass="box"><h5class="title-2">栏目</h5><ulclass="contentdigg"> {#ht:channeltype='son'#} <li> <ahref="{$ht_typeurl}"target="_blank"title="{$ht_typename}">{$ht_typename}</a></li> {#/ht:channel#}</ul></div>{#ht:includefile='foot.htm'/#}<!--包含底部模板文件-->4.3.5head模板文件<linktype="text/css"rel="stylesheet" href="{#ht:globalcsspath/#}/reset.css"></link><linktype="text/css"rel="stylesheet" href="{#ht:globalcsspath/#}/default_blue.css"></link><scriptsrc="{#ht:globaljspath/#}/jquery.min.js"type="text/javascript"></script><scriptsrc="{#ht:globaljspath/#}/jquery.sgallery.js" type="text/javascript"></script><scriptsrc="{#ht:globaljspath/#}/search_common.js" type="text/javascript"></script><map> <ulclass="nav-site"> <li> <ahref="{#ht:globalwebHost/#}"> <span>首页</span> </a> </li> {#ht:channeltype='top'#}<!--栏目标签调用顶级栏目作为导航栏目--> <liclass="line">|</li> <li> <ahref="{$ht_typeurl}"> <span>{$ht_typename}</span> </a> </li> {#/ht:channel#} </ul> </map>4.3.6foot模板文件{#ht:articlechannelid='8'#}<ahref="{$ht_arcurl}"target="_blank">{$ht_title}</a>|{#/ht:article#}4.3.7小部分css代码body{color:#444;background:#eeeurl(../image/v1/body-bg.png)repeat-ycenter}/*body的字体颜色#444；背景颜色为#eee灰色背景图片为body-bg.png纵向平铺居中*/a{text-decoration:none;color:#444}/*a标签没有下划线字体颜色为#444*/4.3.8js代码functionalertinfo(control){ //得到创建的透明背景对象 varback=createBack(); //加入body中 back.setAttribute('id','salert'); if(window.top.location!=self.location){ window.top.document.body.appendChild(back); }else{ document.body.appendChild(back); } //创建背景上面的div层 vardiv=createDiv(); //创建div层上面的banner varbanner=createBanner(); //创建关闭按钮 varbutclose=createCloseButton(); //创建内容区 varcontent=createContent(); banner.appendChild(butclose); div.appendC