基于PHP和AJAX的博客系统设计毕业设计论文(38页).docx

-基于PHP和AJAX的博客系统设计毕业设计论文-第 30 页毕业设计说明书题 目： 基于PHP和AJAX的 博客系统设计 题目类型：¨理论研究 ¨实验研究 ¨工程设计 ¨工程技术研究 þ软件开发毕业设计（论文）原创性声明和使用授权说明原创性声明本人郑重承诺：所呈交的毕业设计（论文），是我个人在指导教师的指导下进行的研究工作及取得的成果。尽我所知，除文中特别加以标注和致谢的地方外，不包含其他人或组织已经发表或公布过的研究成果，也不包含我为获得 及其它教育机构的学位或学历而使用过的材料。对本研究提供过帮助和做出过贡献的个人或集体，均已在文中作了明确的说明并表示了谢意。作 者 签 名： 日 期： 指导教师签名： 日期： 使用授权说明本人完全了解 大学关于收集、保存、使用毕业设计（论文）的规定，即：按照学校要求提交毕业设计（论文）的印刷本和电子版本；学校有权保存毕业设计（论文）的印刷本和电子版，并提供目录检索与阅览服务；学校可以采用影印、缩印、数字化或其它复制手段保存论文；在不以赢利为目的前提下，学校可以公布论文的部分或全部内容。作者签名： 日 期： 学位论文原创性声明本人郑重声明：所呈交的论文是本人在导师的指导下独立进行研究所取得的研究成果。除了文中特别加以标注引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写的成果作品。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。本人完全意识到本声明的法律后果由本人承担。作者签名： 日期： 年 月 日学位论文版权使用授权书本学位论文作者完全了解学校有关保留、使用学位论文的规定，同意学校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。本人授权 大学可以将本学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。涉密论文按学校规定处理。作者签名：日期： 年 月 日导师签名： 日期： 年 月 日注 意 事 项1.设计（论文）的内容包括：1）封面（按教务处制定的标准封面格式制作）2）原创性声明3）中文摘要（300字左右）、关键词4）外文摘要、关键词 5）目次页（附件不统一编入）6）论文主体部分：引言（或绪论）、正文、结论7）参考文献8）致谢9）附录（对论文支持必要时）2.论文字数要求：理工类设计（论文）正文字数不少于1万字（不包括图纸、程序清单等），文科类论文正文字数不少于1.2万字。3.附件包括：任务书、开题报告、外文译文、译文原文（复印件）。4.文字、图表要求：1）文字通顺，语言流畅，书写字迹工整，打印字体及大小符合要求，无错别字，不准请他人代写2）工程设计类题目的图纸，要求部分用尺规绘制，部分用计算机绘制，所有图纸应符合国家技术标准规范。图表整洁，布局合理，文字注释必须使用工程字书写，不准用徒手画3）毕业论文须用A4单面打印，论文50页以上的双面打印4）图表应绘制于无格子的页面上5）软件工程类课题应有程序清单，并提供电子文档5.装订顺序1）设计（论文）2）附件：按照任务书、开题报告、外文译文、译文原文（复印件）次序装订摘 要本文旨在说明基于PHP和AJAX的博客系统设计，该系统十分有利于在校园或大型公司的博客应用，本系统设计合理，功能完善，界面有美感，能让客户方便地把日常生活、工作、学习、情感写成博客，并能快速方便地浏览其他人写的好博客，可以应用于大学校园或社会公司。说明论文首先概述了现今网页博客的开发背景，社会应用情况。然后说明本博客系统的组织结构，包括MYSQL数据库设计，其中的表的设计说明；网页后台PHP代码的组织结构，重点介绍链接数据库和处理数据的代码；APACHE服务器的使用和配置；AJAX的使用方式与如何嵌入网页中，以及使用后的效果；网页前端设计，如何设计出简洁美观的首页界面和方便快捷的使用方式；还涉及到JAVASCRIPT，JQUERY脚本语言的使用。最后整体阐述了系统的整体功能。本文最后总结了本博客系统的性能和特点，提出了整体的优化地方和方法，并对本博客系统的未来使用情况进行了展望。关键词：博客设计；AJAX应用；网站数据库交互；博客系统实现AbstractThis article aims to illustrate blog system design based on PHP and AJAX, this system is very beneficial use in campus or large company, reasonable design of the system, fully functional, aesthetically pleasing interface, allowing customers to easily put daily life, work, learning, emotional written in blog, and can quickly and easily browse other peoples good blog, this system can be applied to the university campus or social companies.Description paper begins with an overview of the development of today's Web blog background, social application. Then explain the organizational structure of the blog system, including MYSQL database design, table design which illustrate; organizational structure backstage PHP code pages, focusing on the link databases and data processing code; APACHE server use and configuration; AJAX in use and how to embed a web page, as well as the effect of after use; web front-end design, how to design a simple and beautiful interface and convenient home use; further relates to the use of JAVASCRIPT, JQUERY scripting language. Finally, the overall function of the overall system elaborated.Finally, this paper summarizes the performance and features of the blog system is proposed to optimize the whole place and method, and the future use of the blog system were discussed.Key words: Blog design; AJAX application; website database interaction; blog system implementation目 录引言31 开发概述31.1 开发背景31.2 需求分析31.3 系统目标31.4 系统功能结构31.4.1 妙之博客管理系统的功能结构如下描述：31.4.2 妙之博客的后台管理包括如下功能：31.5 系统功能预览32 数据库设计32.1 数据库概念设计32.2 数据库物理结构设计32.2.2 tb_article(博客文章表)32.2.3 tb_frd(用户好友信息表)32.2.4 tb_log(文章日志信息表)32.2.5 tb_member(用户信息数据表)32.2.6 tb_mess(用户留言数据表)32.2.7 tb_review(文章评论表)32.2.8.tb_script(小纸条列表)32.2.9.tb_uppics(上传图片信息表)32.3 数据库操作类33 网页前端设计33.1 首页版块概述：33.2 个人首页概述33.3 我的文章页面概述34 网页后台设计34.1 我的文章版块后台34.1.1 排序功能：34.1.2 查询记录总数34.1.3 条件查询34.2 文章管理版块后台34.3注册登入版块后台34.3.1简捷性：34.3.2美观性34.3.3安全性34.4 用户管理版块后台35 AJAX使用与嵌入35.1 AJAX介绍35.2 AJAX的使用方法35.3 AJAX的效果36 结论36.1系统缺点36.2 系统功能扩展36.3 展望前景36.4 开发总结3谢 辞3参考文献3引言“博客”是个音译词，来源于英文的“Blog”，博客在中国已经发展了很多年，由最初的长文博客发展到现在更方便，更快捷，交互方式更丰富的微博，但是，传统的博客并没有消亡，而是进一步发展了，并主要由3类人来使用：第一：程序员，博客是程序员的一个很好的助手，博客是一个快捷有效的解决方法记录器，很多程序员，碰到BUG后，如果不能解决，通常都要到网上去找资料，而所有的技术资料，几乎都来自于博客。一个问题的出现，常常不是孤单的，别人也遇到这些问题，有些高手解决后，习惯把解决方案发布到博客上，这就大大方便了别人解决问题，节省了好多时间。所有博客的出现，为IT业的发展贡献良多。在技术博客这方面，有名的网站很多，最突出的就是两个，一个是中国最大的IT网站，CSDN的博客园，另一个是专注于技术博客的博客园。这两个Blog网站，每天都有成百上千 的专业博文发布，非常热闹。第二：学者或爱管事的人，学者不用说，研究问题，普通的微博是不够用的，只有博客才能真正能展示自己的观点，观点予于文章，文章存于博客，博客存于网络，网络，是展示人观点最有效的平台。而论文，首先是格式太严，对人的观点的展示反而有反作用。所以，每当社会上一有热点问题出现，就有一大堆的学者跳出来，在各大博客网站上发表自己的观点。对于爱管事的人来说，博客更是一个神器，本身虽然不是什么大学者，社会上做的工作也是很平凡，但是国事，家事，天下事，事事关心。博客的特点，很好地迎合了这群人的使用需求。对社会舆论也是一股重要的影响力量。这方面，网易，新浪，搜狐博客都有大量活跃的人在每天更新博客。比如方舟子，就经常在网易博客上打假，也是一家之言。第三：作家或者说爱好写作的人，网络是现代最有校的传播方式，而博客是网络上文章传播最有效的方式，写个小说，写个评论，一章一章的，在自己的博客上发表，可以有效地让名气上涨，很多网络写手，博客，都是他们的出生地。都是在博客上出名后再在起点，晋江，潇湘等文学网站上发表，现在很热的知乎网站，定位于知识传播，准确地说也是一个博客网站，里面聚集着大量作家，很多文章都是可以直接出书发表的，很多评论，实在是精辟。可以说博客十分适合思想的传播，而日常生活的琐碎事，不适合在博客上发表的。博客在中国已发展了有10年了，现在已经很成熟。各大博客网站，都聚集着忠实用户，为中国博客发展贡献良多。简言之，Blog就是以网络作为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人进行交流，再集丰富多彩的个性化展示于一体的综合性平台。1 开发概述1.1 开发背景博客管理系统给人们提供表达个人情感、提供一个人与人之间进行良好沟通的平台。博客以真实，现实的内容，通过网页平台，与人交互，记录下工作、生活、学习、娱乐的点点滴滴，以及通过发表评论，可以与他人交互。从而在网上建立一个完全属于自己的个人天地，成为当今网络最为人性化、便捷化和平民化的个人展示空间。对于网民，只要拥有博客，就可以超越现实平静的生活，拥有不同以往的全新网上人生；对于博客服务商，则必须从功能提供转型为全方位的社会服务提供，甚至建立虚拟社会，并负责维护运行，保证日常博客的发表，评论，榜单，新闻动态等等；对于社会而言，有利于构建和谐的互联网空间，维护和谐的社会环境。因为博客是个完整的思想发布平台，政府可以从博客得到人们的民生状况。从这个角度来说，构建新生活方式，将是互联网发展的一个里程碑。1.2 需求分析在信息时代的今天，博客已经成为一种新的生活方式。在网络中构建一个赋有个性化的个人博客，提供一种可信任的和实时连通的网络环境。通过网络的开放性和交互性的特色，让用户在任何时间、任何地点，通过网络方便地“生活”，这不仅仅是信息的传递与获取，还可以进行群体交流和资源共享，展示自我，为个人发展带来新的机遇。本博客系统名为“妙之博客”，通过调查分析，要求本系统要具有一下功能：l 要求系统采用B/S架构，实现人机交互。l 要求系统界面个性化，色彩搭配和谐，有很强的视觉冲击力，操作简便。l 要求突出主题，显示新文章和公告。l 要求用MYSQL数据库管理中心建立5种以上不同专题的数据表l 要求游客可以浏览文章、浏览图片、发表评论。l 要求具有很大的搜索查询功能，实现精确查询和模糊查询。l 完善的文章管理功能，包括文章的发表、删除，以及对文章的评论与回复。l 支持图片上传功能，可以上传各种类型的图片。l 支持好友功能。l 系统运行稳定，可靠1.3 系统目标该系统主要实现如下目标除需求分析的要求外，还需要：系统采用B/S架构，即浏览器/服务器架构，实现人机交互。l 系统主界面以浅色为主，美观大方，操作简便。l 重点突出内容，显示最新文章。l 非登录用户可以浏览文章、浏览图片、发表评论。l 全面的搜索查询功能，包括精确查询和模糊查询。l 完善的文章管理功能，包括文章的发表、删除，以及对文章的评论和回复。l 支持公告栏功能。1.4 系统功能结构1.4.1 妙之博客管理系统的功能结构如下描述：后台管理包含好友管理、留言管理、小纸条、个人管理、文章管理以及相册管理。好友管理包括添加好友、查看好友、删除好友、发送小纸条、确认添加、进入空间。留言管理包括查看留言和删除留言。小纸条功能包括纸条列表，查看纸条，删除纸条和回复纸条。个人管理包括查看资料、修改资料、修改密码。文章管理包括添加文章、文章类别、删除文章。相册管理包括添加相册、管理相册、删除相册。文章类别包括添加类别、删除类别。管理相册包括添加相册和删除相册。1.4.2 妙之博客的后台管理包括如下功能：后台管理包括用户管理、文章管理、相册管理、管理员管理、系统日志、数据备份。用户管理包括博客列表、删除博客、推荐博客、冻结博客、详细资料、查询用户。文章管理包括文章列表、删除文章、推荐文章、审核文章、浏览文章、查询文章。相册管理包括图片列表、删除图片、浏览图片。管理员管理包括管理员列表、删除管理员、冻结管理员、添加管理员、修改密码。系统日志包括日志列表、删除日志、查询日志。数据备份包括数据备份、数据恢复、删除备份。1.5 系统功能预览系统运行如下图1.1所示：图1.1 首页网页效果2 数据库设计2.1 数据库概念设计MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQLAB公司，在2008年1月16号被Sun公司收购。MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。与其他的大型数据库例如Oracle、DB2、SQL Server等相比，MySQL自有它的不足之处，如规模小、功能有限（MySQL Cluster的功能和效率都相对比较差）等，但是这丝毫也没有减少它受欢迎的程度。对于一般的个人使用者和中小型企业来说，MySQL提供的功能已经绰绰有余，而且由于MySQL是开放源码软件，因此可以大大降低总体拥有成本。目前Internet上流行的网站构架方式是LAMP（Linux+Apache+ MySQL+PHP/Perl/Python）和LNMP（Linux+Nginx+MySQL+php/perl/Python），即使用Linux作为操作系统，Apache和Nginx作为Web服务器，MySQL作为数据库，PHP/Perl/Python作为服务器端脚本解释器。由于这四个软件都是免费或开放源码软件（FLOSS)，因此使用这种方式不用花一分钱（除开人工成本）就可以建立起一个稳定、免费的网站系统。以上MYSQL数据库说明来自于官方资料，经过需求分析，发现MYSQL特别适合本系统，所以系统采用MYSQL数据库进行开发。通过需求分析和功能上的设计，本系统规划出用户信息实体、上传图片实体、朋友圈实体、文章实体和留言实体。用户信息实体包括注册用户的详细个人信息，如果想在本系统中发表文章、上传图片等操作，则必须先进行注册。上传图片实体包括上传图片的名称、上传图片用户和上传图片的时间等。2.2 数据库物理结构设计博客系统使用的数据库是db_blog，在数据库中一共使用了9个数据表如图2.1所示：图2.1 所有表各表的名称和作用如下：2.2.1 tb_admin（管理员信息表）管理员信息表主要储存管理员的个人信息。而管理员作用是管理系统的一切，包括前端实现和后端代码以及数据库的管理，包括内容添加等。其字段如下如表2.1所示：表2.1管理员信息表字段类型描述idInt(11)管理员的识别idmanagerVarchar(20)管理员帐号passwordVarchar(50)管理员密码lastIPVarchar(20)管理员登入IPlasttimeTimestamp管理员登入时间freezeInt(11)管理员状态2.2.2 tb_article(博客文章表)博客文章列表存储的是用户发表过的文章信息。本博客系统的用户所写的文章就存储于此表，包括文章内容，用到的图片，推荐数，访问数，评论等内容。tb_article表的结构如表2.2所示：表2.2博客文章表字段类型描述idInt(11)文章的识别idtypenameVarchar(20)文章的类型信息TitleVarcha（50）文章标题ContentMediumtext文章内容AuthorVarchar(50)文章作者FirsttimeTimestamp文章发表时间ArtquoteVarchar(300)文章引用HitnumInt(4)点击数RenumInt(4)阅读数ExamineInt(4)推荐数IsnominateInt(1)是否出现在推荐榜单中2.2.3 tb_frd(用户好友信息表)好友信息如表2.3所示：表2.3用户好友信息表字段类型描述IdInt（id）Id标签，指示所属的字段FrdnameVarchar(100)好友名字FrdmemVarchar(100)添加好友的人FrdlevelInt(11)好友等级addtimeTimestamp添加时间2.2.4 tb_log(文章日志信息表)文章日志信息如下如表2.4所示：表2.4文章日志信息表字段类型描述IdInt（id）Id标签ContentVarchar(200)日志内容OperatorVarchar(50)操作者uptimetimestamp更新时间2.2.5 tb_member(用户信息数据表)用户信息如下如表2.5所示：表2.5用户信息表字段类型描述IdInt（id）Id标签，指示所属的字段NameVarchar(50)用户名字PwdVarchar(50)用户密码QuestionVarchar(50)用户密码问题AnswerVarchar(50)用户密码答案EmailVarchar(50)用户邮件RealnameVarchar(50)用户真实姓名SexVarchar(1)用户性别BirthdayDate用户出生日期TelVarchar(20)用户电话AddressVarchar(200)用户联系地址信息HomepageVarchar(200)用户主目录地址QqVarchar(10)用户qq账户UnwriteVarchar(200)用户的个性格言HeadgifVarchar(200)用户的头像图片名称HitnumInt(4)用户文章所有的点击数UpfileInt(4)推荐数UppicsInt(4)推荐榜单LasttimeTimestamp最后登入时间FreezeInt(1)用户现在的状态Blognamevarchar(100)用户博客名称Blogurlvarchar(200)用户的博客地址Arttypevarchar(300)用户的文章类型Pictypevarchar(300)用户的相册类型IsnewInt(1)是否热门isnominateInt(1)是否出现在推荐榜单中2.2.6 tb_mess(用户留言数据表)文章日志信息如下如表2.6所示：表2.6用户留言数据表字段类型描述IdInt（id）Id标签，指示所属的字段MesserVarchar(100)发表留言所在文章的楼主ContentVarchar(300)留言内容ManVarchar(100)发表留言的用户FirttimeTimestamp留言发表时间2.2.7 tb_review(文章评论表)文章日志信息如下如表2.7所示：表2.7文章评论表字段类型描述IdInt（id）Id标签，指示所属的字段ArtidInt(4)评论的文章题目ContentVarchar(300)评论内容ManVarchar(100)评论人的名字，可匿名firsttimetimestamp评论时间2.2.8.tb_script(小纸条列表)文章日志信息如下如表2.8所示：表2.8小纸条信息表字段类型描述IdInt（id）Id标签，指示所属的字段AcceptVarchar(100)接收方名字SenderVarchar(100)发送方名字ContentVarchar(300)小纸条内容IsnewInt(1)是否更新sendtimeTimestamp发送时间2.2.9.tb_uppics(上传图片信息表)文章日志信息如下如表2.9所示：表2.9上传图片信息表字段类型描述IdInt（id）Id标签，指示所属的字段PicnameVarchar(50)图片名字PicpathVarchar(50)图片地址信息UpauthorVarchar(50)上传人的账号信息PictypeVarchar(50)图片类型HitnumInt(4)点击数ExamineInt(1)检查类型uptimetimestamp上传时间2.3 数据库操作类为了方便使用，减少代码。本模块使用了mysqli扩展存储数据。Mysqli扩展使得用户可以利用Mysql4.1及其更高版本的新功能，与MYSQL扩展相比，Mysqli扩展在以下方面有力明显的提高。n 兼容性与维护性：mysqli扩展可以很容易地使用MYSQL的新功能，所以mysqli拥有与MYSQL更高的兼容性。即使MySQL的新版本又出现了更多功能，mysqli扩展也可以很容易地支持。n 面向对象：mysqli扩展已封装到一个类中，从而可使用面向对象的方式编程。即使对面向对象不太了解，mysqli也提供了面向过程的编程方式来供用户选择。n 速度和安全性：mysqli扩展执行的速度要比之前版本的MYSQL扩展快了很多。Mysqli扩展支持MySQL新版本的密码杂重和验证程序，更加提高了应用程序的安全性。n 预准备语句：预准备语句可提高重复使用的语句的性能，mysqli扩展提供了对预准备语句的支持。n 调试功能：mysqli扩展进一步改进了调试功能，提高了开发效率。要在php中使用mysqli扩展，需要在配置文件php.ini中添加如下设置：extension=php_mysqli.dll。如果配置文件中已有上述设置，确保extension前面没有“；”，否则将其去掉。Mysqli提供了面向对象和面向过程两种方式来与数据库交互。在本模式中，后台管理应用面向对象方式与数据库交互，前台应用面向过程方式与数控库交互。下面是后台管理mysqli扩展应用的面向对象操作类。在这里连接数据库就是实例化mysqli系统内定的一个类，将其得到的返回集“$this->conn”以“this->result=$this->conn->query($sql)”这种方式写入。其存储于conn.php文件中。例如：定义私有属性，如主机名、用户名、用户密码、数据库名等。其主要代码如下：设置数据库的连接属性和声明要返回的结果字段如代码2.1所示：代码2.1 数据库连接属性private $host = '127.0.0.1' /服务器地址private $name = 'root' /登录账号private $pwd = 'TZLaiomy' /登录密码private $dBase = 'db_blog' /数据库名称private $conn = '' /数据库链接资源private $result = '' /结果集private $msg = '' /返回结果private $fields; /返回字段private $fieldsNum = 0; /返回字段数private $rowsNum = 0; /返回结果数private $filesArray = array(); /返回字段数组private $rowsArray = array(); /返回结果数组使用_construct关键字初始化类，这与mysql扩展写法一样，目的是初始化数据库的连接属性，以便其他连接或取值函数取用，如代码2.2所示：代码2.2 数据库连接初始化function _construct($host='',$name='',$pwd='',$dBase='')if($host != '')$this->host = $host;if($name != '')$this->name = $name;if($pwd != '')$this->pwd = $pwd;if($dBase != '')$this->dBase = $dBase;$this->init_conn();接着就可以使用php自带的mysqli数据库连接方法来连接数据库了，首先是初始化连接的函数mysqli(主机名,用户名,用户密码,数据库名称)，这里是db_blog,这在前面已经赋值给了$db_blog，所以直接使用$db_blog就可以了，如代码2.3所示：代码2.3 数据库连接$this->conn=mysqli_connect($this->host,$this->name,$this->pwd,$this->dBase);mysqli_query($this->conn,"set names gb2312");其中的“set names gb2312”是设置其取得数据后数据的编码格式。初始化连接后，就可以进行数据库的增加数据，删除数据，查询数据，更改数据了。如代码2.4所示：代码2.4 数据库操作function mysqli_query_rst($sql) /查询结果if($this->conn = '')$this->init_conn();$this->result = mysqli_query($this->conn,$sql);function getFieldsNum($sql) /取得字段数 $this->mysqli_query_rst($sql);$this->fieldsNum = mysqli_num_fields($this->result);/取得查询结果数function getRowsNum($sql)$this->mysqli_query_rst($sql);$this->rowsNum = mysqli_num_rows($this->result);return $this->rowsNum;/取得记录数组（多条记录）function getRowsArray($sql)$this->mysqli_query_rst($sql);while($row = mysqli_fetch_array($this->result,MYSQLI_ASSOC) $this->rowsArray = $row;return $this->rowsArray;/更新、删除、添加记录数function uidRst($sql)if($this->conn = '')$this->init_conn();/mysqli_query($this->conn,$sql);$this->conn->query($sql);$this->rowsNum = $this->conn->affected_rows;return $this->rowsNum;/获取对应的字段值function getFields($sql,$fields)$this->mysqli_query_rst($sql);if(mysqli_num_rows($this->result) > 0)$tmpfld = mysqli_fetch_row($this->result);$this->fields = $tmpfld$fields;return $this->fields;以上所述是conn.php这个文件中所定义的数据库连接，如果在其他地方引用的话，先包含这个文件，然后实例化这个类就可以了：$conne=new opmysqli();一些数据库的操作，直接引用这个类的内置函数就可以了。3 网页前端设计这个系统的模块比较多，为达到精简的目的，就以3个最有代表性的页面模块来说明。主要说明的是页面模块的布局和设计时考虑的因素，以便达到最好的说明目的，3个模块分别是：首页版块、个人首页、个人博客管理界面。3.1 首页版块概述：首先来看看首页版块，博客首页是应用经典的三栏布局，左边的是推荐的文章和推荐的博客，是否推荐决定于文章或博客的点击数，点击数会转化为推荐系数，但点击率高的博客或文章，不一定会出现在推荐榜单中，这个要后台管理人员的推荐。界面中央有个幻灯片展示，可以循环地展示信息图片，其效果如图3.1所示：图3.1 首页板块界面总体采用div+css样式设计的，如导航条、推荐博客榜单、热门博客榜单、推荐文章榜单、热门博客榜单、首页的头部、外层等、都是采用DIV+CSS设计。Div+css设计的优点如下：（1）让代码更精简了，使用DIV+CSS布局会让页面代码精简，html文件上仅仅会保存这网页的内容，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处。（2）提高访问速度、增加用户体验性使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。（3）div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。注意：div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。因为需求分析中需要首页是浅色的，其原因是浅色能让人感到轻松舒服，相反，深色会让人感到沉重。妙之博客的主旨是轻松，便捷的生活方式，所以选择了浅色。为了体现活泼，还配了文章会跳动的首页logo和会自动切