基于HTML5的个人网站的设计与实现.docx

1、基于HTML5的个人网站的设计与实现内容摘要本项目将要设计及制作一个博客类的个人网站，网站分为学习、旅游、宠物、爱豆四个博客大类。访客可以浏览文章和对文章进行评论，还可以给博主留言。管理员可以在后台对网站的数据进行增、删、改。本网站采用HTML5进行页面开发，PHP实现数据的交互，MySQL建立数据库。网站设计及制作过程中所使用到的软件包括但不限于Illustrator （网站界面图片）、Visual Studio Code（代码编写）、MySQL（网站数据库）、Draw.io等等。本项目中涉及到的工作流程有：前期网站运行环境（包括服务器的搭建，PHP环境设置等），个人网站功能的设计和构思，网

2、站数据库的设计，静态页面的设计和搭建，PHP实现前端和数据库的交互，后台登录的安全性设置。关键词：HTML5 PHP MySQL数据库 个人网站 博客类AbstractThis project will design and produce a personal blog website, which is divided into four blog categories: learning, travel, pets and idol.Visitors can browse and comment on articles，also leave a message to blogger.Ad

3、ministr-ators can add, delete and change the data of website.This website uses HTML5 to design pages, uses PHP to achieve data interaction, uses MySQL to establish a database.The software used in website design and production includes but is not limited to Illustrator (website interface pictures), V

4、isualStudioCode (code writing), Mysql (website database), draw.io, etc.Work process involved in this project are: Building site running environment ( the construction of the server, the PHP environment Settings, etc.), personal website function design, web database design, building static pages, rea

5、lize the dynamic development in PHP, login security Settings.Key words: HTML5 PHP MySQL database personal website Blog第一章 绪论1.1开发背景及意义如今，随着信息技术的飞速发展，人们足不出户就能知天下，互联网已经成为人与外界交流的重要渠道之一，它的作用渗透到社会的方方面面。而网站作为网络信息主要的表现形式之一，更是在互联网上发挥着中流砥柱的作用。互联网的发展使人们的生活发生了翻天覆地的变化，互联网的世界每分每秒都交织着巨大的信息，如何在此情况下抓住消费者的眼球，社会各行各业纷

6、纷开始搭建属于自己的网站，在网站内企业可以根据自身品牌文化来打造专属页面，从而吸引消费者的来访。网站是一个集文字、图片、音频等多元化的信息传播方式，比起传统的信息传播方式，人们在获取信息的同时可以感受到更多的乐趣。在计算机技术的飞速发展下，建设网站不再局限于企业和单位，独立的个人也可以拥有网站。这就是本论文所讨论的个人网站了。个人网站是一个可以充分展示个人人格魅力和才能的地方的，越来越多人认为拥有个人网站是一件很酷的事情。于是互联网上的个人网站数量与日俱增，五彩缤纷的主页让人看得眼花缭乱，每个人都可以在自己的网站上尽情发挥和展示自己的才能。在技术层面来说，一个网站的页面是由静态网页和动态网页来

7、实现。静态页面我们可以通过HTML5来完成，而动态页面则可以通过Java、PHP、Python等来完成。HTML5是一种专门用于创建网页的标记语言，是开放的Web网络平台的基础，常与CSS和JavaScript搭配使用。近年来，HTML5俨然已经成为当今最主流的网页制作语言了。HTML5采用直观的标准化标记语言简化了网页的设计和构建，且大大减少了网页对于插件的依赖。本次毕业设计的选题就是基于HTML5的直观和便捷，再结合Bootstrap框架使用，我在设计时充分发挥自己的个性。而后台则使用PHP+MySQL来实现和前端页面的交互。1.2选题国内研究现状随着互联网的飞速发展，有关互联网的技术也层

8、出不穷。在过去的10年时间里，互联网上的个人网站多如毫毛。但是这么多的网站不可能每个都是美轮美奂，制作精良，而且近年来个人博客和个人网站的潮流也消退了很多。那么现在的个人网站发展现状到底如何呢？根据上一节说明我们可以知道对于个人来说，创建网站不再是遥不可及的事情，所以个人网站才会出现大量繁殖的现象。那么个人网站的门槛是不是真的这么低呢？是不是每个人都可以搭建个人网站呢？答案肯定是否。下面是我分析出来的近几年国内个人网站现状。（1）资本商家套路重重：打开XX搜索个人网站，你会发现一大堆建站广告，而且大多数广告商都标榜着“免费建站”的字样。那事实真的是免费建站吗？在商家的消费套路浸淫多年的我们应该

9、也知道这只不过是商家贴出来吸引消费者眼球的惯有手段罢了。进去之后，你就会发现其实处处都需要掏钱，而且一旦这个商家出了什么意外，那么你的个人网站也很可能会消失在这茫茫互联网长河中。（2）成本高：搭建个人网站最基本需要域名和服务器，这些都是需要钱购买的，而且后期的运营也是需要投入成本的。再就是搭建个人你需要有专业的知识作为基础，你要设计网页、编写代码等等。那对于一个从未接触过这方面技术的人来说，让他花大量的时间和金钱来搭建一个个人网站，显然是不现实的。（3）专业性强：现存的个人网站的拥有者大都是程序员和设计师，他们在个人网站分享自己的设计，记录自己的学习收获。对于他们来说，拥有一个个人网站可以大大

10、提升他们在职场的竞争力，所以他们个人网站制作都十分精良。1.3课题研究主要内容本项目是开发一个博客类的个人网站，这是一个比较基础的网站设计，在页面的设计上会融入个人特色和风格，网站也具备博客的基本功能。网站系统设计分为前台页面展示和后台管理系统。网站的前端会用HTML5和Bootstrap框架，后台会用PHP和MySQL的搭配实现。（1）前台页面展示平台功能 文章浏览：内容包括学习、旅游、爱豆、宠物四个栏目，用户可以通过栏目进入文章列表，通过搜索找到感兴趣的文章。用户点击进入文章详情页面可以在文章下方进行评论。留言板： 网站有一个留言板块，用户可以进入该板块留下想对博主说的话。（2）后台管理平

11、台功能栏目管理板块：管理员可以对栏目进行增加、修改和删除。 文章管理板块：管理员可以在后台发布文章，可以对文章内容、标题、标签进行修改，还可以删除文章。 评论管理板块：管理员可以对评论进行选择删除。 留言管理板块：管理员可以对留言进行选择删除。第二章 前期准备2.1 HTML5介绍随着互联网产业的高速发展，如今HTML5已经成为主流的前端开发技术。广义地说，HTML5是包含HTML、CSS、JavaScript在内的一套技术组合。2.1.1 发展历程在HTML5出现之前，人们一直都是在使用HTML4.01，但是4.01版本从2000年开始就没有跟新过了。当时的一些公司想继续推动web标准化的发

12、展，于是他们就共同成立了超文本应用技术工作组（WHATWG），投身于web应用程序中。2006年，WHATWG和万维网联盟决定进行合作，开发出新的HTML。随后经过双方的共同努力，HTML5终于在2014年面世。2.1.2 新特点HTML5提供了一些新的元素和属性，给开发人员带来很多便利。如canvas绘画元素，video和audio媒介回放元素等。HTML5有很好的跨平台性和离线缓存功能。HTML5增加了更多样化的应用程序接口（API）。2.2搭建运行环境在开发网站前先要电脑配置好网站的运行环境，Apache服务器、PHP脚本语言和MySQL数据库是当前主流的动态网站开发组合，组合的开源性和

13、跨平台是其最突出的优势，是很多中小型网站开发的首选组合。Apache是一款基于C语言开发的专门用来提供HTTP服务的服务器，PHP是一种开源的多用途脚本语言，非常适用于Web开发，MySQL是一种开源的关系型数据库管理系统。本次毕业设计的网站后台我也将采用这种组合方式来进行开发。第三章 系统分析3.1 网站需求分析现在网上有很多博客网站，功能也很完善，能给用户提供一个很好的分享空间。但是这些网站是面向大众的，这就意味着它有很多方面是受限制的，如果用户比较追求网页个性化样式的布局，显然这些网站是无法满足的。在具备网站开发知识的基础上，自己开发一个博客类网站不仅能满足自身对页面设计的要求，而且能对

14、在大学期间所学的知识进一步加深和巩固。3.3.1 前台需求分析分析viky博客类个人网站的用户需求：（1）文章浏览：该板块浏览者可以根据自己的兴趣通过栏目板块进入文章列表，浏览不同的文章。（2）文章查询：访客在文章列表可以通过搜索框找到自己想要的文章，搜索的关键字会和文章的标题进行比对。（3）文章评论：访客在浏览完文章的时候可以对文章进行评论，给博主提供一些意见或询问相关问题。（4）访客联系博主：访客可以通过网站下方的社交软件联系博主，也可以通过网站的留言面板联系博主。（5）了解博主：访客通过介绍页面获得博主的一些基本信息。3.3.2 后台需求分析分析viky博客类个人网站的（博主）管理员需求

15、：（1）文章管理：该板块可以对文章进行添加、修改和删除。在添加完文章后，管理员可以对文章的标题、简介、内容、栏目、标签、图片进行再次修改。（2）评论管理：管理员可以对评论进行筛选，对一些恶意评论进行删除。（3）留言管理：管理员可以对留言进行筛选，对一些恶意留言进行删除。（4）栏目管理：该板块可以对栏目进行添加、修改和删除。本网站虽然只固定了四个栏目，但是后续可能还会增加。管理员可以对栏目的标题和简介进行修改。（5）用户管理：本网站只设置了一个管理员用户。3.2 网站逻辑模型根据网站的需求分析，我针对两个角色分别绘制了流程图：面向访客的流程图、面向管理员的流程图。运用逻辑的思维把系统所需的功能展

16、示出来。面向访客的流程图如图3-1所示。图3-1面向访客的流程图面向管理员的流程图如图3-2所示图3-2面向管理员的流程图根据上面两个流程图，我们可以得到一个网站系统基本功能的流程图，如图3-3所示。图3-3网站基本功能流程图3.3 数据库设计 根据之前分析的网站的需求分析，我会创建一下表单：管理员表，文章表，评论表，留言表，标签表，栏目表。然后找到各表之间的联系，绘制如图3-4的数据表结构图。图3-4数据表结构图第四章 静态页面实现4.1 网站文件结构在编写静态页面之前，先介绍一下本网站的文件结构，我在Apache的htdocs文件夹创建了一个vblog文件夹，里面放着本网站的所有页面和所需

17、的类、库。admin文件夹放的是后台页面，assets文件夹放js、css和图片，database文件夹放连接数据库和操作数据库的PHP文件，lib文件夹放方法和类，upfiles文件夹放需要上传的图片，view文件夹放前端页面。4.2 首页实现首先创建一个名为index的HTML文件，网页的头部用header标签包裹，中间内容用类名为container的div标签包裹，尾部用footer标签包裹。我先进行css的初始化，在css文件夹新建一个total.css文件，输入如下初始化代码，然后link到当前页面。Css的初始化包括对页面整体风格的设定和标签样式的初始化。4.2.1 JavaScr

18、ipt导航栏（1）导航栏的HTML部分整个导航部分用div包裹，定义一个（.active）的div标签作为遮罩层，用ul和li标签来写一级和二级菜单。代码如下：（2）导航栏的JavaScript部分首先获取页面元素，定义一个当前位置current，用for循环lis元素给它绑定一个鼠标进入事件（mouseenter）和鼠标离开事件（mouseleave），当鼠标移动到某个li时调用animateX这函数遮罩层向当前li移动，鼠标离开遮罩回到原来位置。animateX是一个横向移动的缓动函数，函数的两个参数分别是移动的物体和移动的距离。下面一个if判断，如果循环到下标是2的li时，给这个lis2

19、添加鼠标移入和移出事件，调用下面的fnNav函数对二级菜单进行显示和隐藏。循环代码如下。 for (var i = 0; i lis.length; i+) lisi.addEventListener(mouseenter, function () animateX(mask, this.offsetLeft);) lisi.addEventListener(mouseleave, function () animateX(mask, current);) if (lisi = 2) lis2.onmouseover = function () fnNav(this, block); lis2

20、.onmouseout = function () fnNav(this, none); 导航栏最终效果如图4-1所示。图4-1js二级菜单4.2.2 CSS文字特效首页开场文字动画，使用到CSS中的animation，效果是welcome字样会有一个字距由宽变窄的，颜色由黑色过渡到粉色的过程，然后vikyvika的字样会在welcome动画结束后下坠出现，HTML代码如下。 Welcome in VikyvikaCSS动画部分代码如下。文字的布局如图4-2所示。图4-2css文字特效4.2.3 jQuery页面滚动元素首页的四个栏目特效运用了jQuery和它的插件smove，制作了一个3D向

21、上翻的效果。首先引入jQuery和smove的库，然后把包裹着栏目的div标签里写上这段data-rotate-x=90deg data-move-z=-500px data-move-y=200px代码，然后在页面的下面写一个函数就可以了，代码如下：$(.block).smoove(offset: 40%);4.3留言页实现留言页面需把向后台提交数据，这里要form表单标签把要提交数据的留言发送区域包裹起来，然后input框里name的名称一定要和数据库的对应的字段相同，不然到后期提交数据会提交不了。form表单的提交方法是post，绑定了一个checkSubmit的方法用于验证，表单里面则

22、包裹多个div，div中包裹文字和输入框内。4.3.1 JavaScript表单验证既然要向数据库传数据，那么就要验证数据的正确与否，并向用户作出相应的提示。（1）内容为空或错误的提示方法inputCheck：首先获取页面元素，包括表单，提示和所有的输入框。通过for循环，遍历每个输入框，当遇到类型为submit的输入框continue跳过，给剩下的输入框绑定失去焦点事件和获得焦点事件，然后给两个事件添加事件处理函数。 第一个失去焦点事件的处理函数，if语句判断输入框里的value是否为空，如果为空，输入框的颜色会变成粉红色，并且输入框的placeholder提示“此处不为空”，然后返回fal

23、se。如果不为空则执行下一个if语句，判断输入的邮箱格式是否正确，这里运用到正则表达值，先定义了一个叫reg的变量来存放正则表达式，if语句判断，如果输入框的内容和正则表达式不符合且这个输入框的类型是email，就把提示的样式设为visible，然后返回false。最后else如果两条if语句都为真，则把提示的样式设为hidden，返回真。第二个获得焦点函数，则把输入框的颜色变为蓝色，给输入框插入一个为空的占位符属性。在这个方法的下面调用这个方法。部分代码如下。for (var i = 0; i inputs.length; i+) if (inputsi.type = submit) con

24、tinue; inputsi.addEventListener(blur, function () if (this.value = ) this.style.backgroundColor = #f3d7ca; this.placeholder = 此处不为空; return false;错误提示效果如图4-3所示图4-3错误提示（2）内容为空阻止提交的方法checkSubmit：首先获取页面元素（表单、输入框），for循环遍历每个输入框，然后continue跳过表单提交按钮，再if语句判断输入框的value是否为空，如果为空弹出弹框，提示“所有内容不为空”，然后返回false。提示结果如图

25、4-4所示。图4-4弹框提示4.3.2 JavaScript生成简单的验证码（1）HTML部分在表单最下面添加一个div，在div中添加一个span标签包裹“验证码：”，一个input输入框，再一个空span标签用来显示生成的验证码。（2）JavaScript部分随机生成验证码：首先定义一个全局变量code，在窗口加载是调用createCode方法，在方法中先把空字符赋值给code，定义一个codeLength变量来确定验证码的长度，并赋值为4，然后就是获取id为code的span元素，接着定义一个数组，里面存放大小写字母和数字。然后通过for循环和Math.random方法随机获取四个数组元

26、素，然后把获取的元素存到code变量中，最后把code的值赋给验证码。校验验证码部分：新建一个名为validate的方法，首先获取输入的验证码，然后将验证码通过toUpperCase方法转化为大写，同时也将显示的验证码转化为大写。然后通过if语句校验，如果输入的验证码长度为0，则弹出弹框提示“请输入验证码”，返回false。如果不为空则继续判断，如果输入的验证码与产生的验证码不同，则弹出弹框提示“验证码输入错误”，并重新调用createCode方法，刷新验证码，并把输入框清空，返回false。随后两个if语句都为true是返回true。最后要在checkSubmit函数中返回validate方

27、法。验证码生产代码如下：var code; function createCode() code = ; var codeLength = 4; var checkCode = document.getElementById(code); var random = new Array(数字和26个字母大小写); for (var i = 0; i codeLength; i+) var index = Math.floor(Math.random() * random.length); code += randomindex; checkCode.innerHTML = code; check

28、Code.onclick = function () createCode(); 验证码效果如图4-5所示。图4-5验证码4.3.3 onsubmit阻止表单提交总结关于onsubmit阻止表单提交的两个注意事项：1.onsubmit属性是由HTML表单内点击提交表单时触发的事件，且默认返回值为true，所以填值的时候不能只写函数调用，要在前面加上return。2.onsubmit属性的触发实际是在form表单用input：submit这样的button提交时才会触发。如果是用一个普通input:button，则在onclick属性中指定一个javascript函数，在这个函数里面再执行for

29、m的submit()函数，而不是onsubmit属性。4.4 文章列表页实现文章列表页的大体结构是上面一个form表单标签包裹的搜索输入框和输入按钮，下面是由一个个div标签包裹的文章列表块，文章列表块左边是图片区域，右边是详情区域，都用div标签包裹。把HTML结构写好然后再用css调整其样式，文章的列表页面就大致完成了。4.4.1 点击返回顶部按钮制作一个返回顶部的按钮，在文章列表滚动到第二个列表时，页面的右下角会出现一个返回按钮，点击按钮页面会缓动回到页面的顶部。（1）HTML结构部分定义一个（.slider）的div包裹一个（.up）的span标签，span标签中包裹着向上箭头图标，这

30、个图标是引用Font Awesome图标区，只要在页面引入Font Awesome的样式，把字体库放到assets文件夹中，图标就可以被引用。返回按钮如图4-6所示。图4-6返回按钮（2）JavaScript部分首先获取按钮元素，获取全部文章列表元素，获取返回图标元素，定义变量article2Top返回第一个文章列表相对body上方的偏移，这里注意要给body添加定位，不然offsetTop就不起作用了。再定义一个变量存放第一个文章列表相对body上方的偏移减按钮元素相对body的偏移。给document添加滚动事件，如果页面的高度大于article2Top，就把按钮元素的样式变成浮动，返回图

31、标的样式调整为block，否则把按钮元素的定位变成绝对定位，返回图标的样式调整为none。接下来给返回图标添加一个点击事件，当鼠标点击按钮页面缓动回到顶部，这里调用了纵向的缓动函数animationY。缓动函数是事前封装好的。4.4.2 CSS伪元素制作提示框鼠标移动到微信图标时，以提示框的形式显示微信二维码。提示框运用CSS的伪元素（：after）制作，该伪元素可以在元素之后添加元素而不扰乱文档本身。使用时搭配content属性，可设置在对象后发生的内容。伪类CSS代码如下：提示框效果如图4-7所示。图4-7微信提示框4.5 其他前端展示页面简介页和文章详情页的HTML布局和CSS样式比较简单，不做说明。到此为止前端的展示页面全部完成，整个前端展示部分都是以粉色为主色调，个别区块用蓝色，局部效果如图4-8所示。图4-8展示页面局部4.6 后台系统页面后台系统页面更多地运用了Bootstrap框架，Bootstrap框架是基于jQuer