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

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

《基于HTML5的个人网站的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于HTML5的个人网站的设计与实现.docx（33页珍藏版）》请在冰豆网上搜索。

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

内容摘要

本项目将要设计及制作一个博客类的个人网站，网站分为学习、旅游、宠物、爱豆四个博客大类。

访客可以浏览文章和对文章进行评论，还可以给博主留言。

管理员可以在后台对网站的数据进行增、删、改。

本网站采用HTML5进行页面开发，PHP实现数据的交互，MySQL建立数据库。

网站设计及制作过程中所使用到的软件包括但不限于Illustrator（网站界面图片）、VisualStudioCode（代码编写）、MySQL（网站数据库）、Draw.io等等。

本项目中涉及到的工作流程有：

前期网站运行环境（包括服务器的搭建，PHP环境设置等），个人网站功能的设计和构思，网站数据库的设计，静态页面的设计和搭建，PHP实现前端和数据库的交互，后台登录的安全性设置。

关键词：

HTML5PHPMySQL数据库个人网站博客类

Abstract

Thisprojectwilldesignandproduceapersonalblogwebsite,whichisdividedintofourblogcategories:

learning,travel,petsandidol.Visitorscanbrowseandcommentonarticles，alsoleaveamessagetoblogger.Administr-

atorscanadd,deleteandchangethedataofwebsite.ThiswebsiteusesHTML5todesignpages,usesPHPtoachievedatainteraction,usesMySQLtoestablishadatabase.ThesoftwareusedinwebsitedesignandproductionincludesbutisnotlimitedtoIllustrator（websiteinterfacepictures）,VisualStudioCode（codewriting）,Mysql（websitedatabase）,draw.io,etc.

Workprocessinvolvedinthisprojectare:

Buildingsiterunningenvironment（theconstructionoftheserver,thePHPenvironmentSettings,etc.）,personalwebsitefunctiondesign,webdatabasedesign,buildingstaticpages,realizethedynamicdevelopmentinPHP,loginsecuritySettings.

Keywords:

HTML5PHPMySQLdatabasepersonalwebsiteBlog

第一章绪论

1.1开发背景及意义

如今，随着信息技术的飞速发展，人们足不出户就能知天下，互联网已经成为人与外界交流的重要渠道之一，它的作用渗透到社会的方方面面。

而网站作为网络信息主要的表现形式之一，更是在互联网上发挥着中流砥柱的作用。

互联网的发展使人们的生活发生了翻天覆地的变化，互联网的世界每分每秒都交织着巨大的信息，如何在此情况下抓住消费者的眼球，社会各行各业纷纷开始搭建属于自己的网站，在网站内企业可以根据自身品牌文化来打造专属页面，从而吸引消费者的来访。

网站是一个集文字、图片、音频等多元化的信息传播方式，比起传统的信息传播方式，人们在获取信息的同时可以感受到更多的乐趣。

在计算机技术的飞速发展下，建设网站不再局限于企业和单位，独立的个人也可以拥有网站。

这就是本论文所讨论的个人网站了。

个人网站是一个可以充分展示个人人格魅力和才能的地方的，越来越多人认为拥有个人网站是一件很酷的事情。

于是互联网上的个人网站数量与日俱增，五彩缤纷的主页让人看得眼花缭乱，每个人都可以在自己的网站上尽情发挥和展示自己的才能。

在技术层面来说，一个网站的页面是由静态网页和动态网页来实现。

静态页面我们可以通过HTML5来完成，而动态页面则可以通过Java、PHP、Python等来完成。

HTML5是一种专门用于创建网页的标记语言，是开放的Web网络平台的基础，常与CSS和JavaScript搭配使用。

近年来，HTML5俨然已经成为当今最主流的网页制作语言了。

HTML5采用直观的标准化标记语言简化了网页的设计和构建，且大大减少了网页对于插件的依赖。

本次毕业设计的选题就是基于HTML5的直观和便捷，再结合Bootstrap框架使用，我在设计时充分发挥自己的个性。

而后台则使用PHP+MySQL来实现和前端页面的交互。

1.2选题国内研究现状

随着互联网的飞速发展，有关互联网的技术也层出不穷。

在过去的10年时间里，互联网上的个人网站多如毫毛。

但是这么多的网站不可能每个都是美轮美奂，制作精良，而且近年来个人博客和个人网站的潮流也消退了很多。

那么现在的个人网站发展现状到底如何呢？

根据上一节说明我们可以知道对于个人来说，创建网站不再是遥不可及的事情，所以个人网站才会出现大量繁殖的现象。

那么个人网站的门槛是不是真的这么低呢？

是不是每个人都可以搭建个人网站呢？

答案肯定是否。

下面是我分析出来的近几年国内个人网站现状。

（1）资本商家套路重重：

打开XX搜索个人网站，你会发现一大堆建站广告，而且大多数广告商都标榜着“免费建站”的字样。

那事实真的是免费建站吗？

在商家的消费套路浸淫多年的我们应该也知道这只不过是商家贴出来吸引消费者眼球的惯有手段罢了。

进去之后，你就会发现其实处处都需要掏钱，而且一旦这个商家出了什么意外，那么你的个人网站也很可能会消失在这茫茫互联网长河中。

（2）成本高：

搭建个人网站最基本需要域名和服务器，这些都是需要钱购买的，而且后期的运营也是需要投入成本的。

再就是搭建个人你需要有专业的知识作为基础，你要设计网页、编写代码等等。

那对于一个从未接触过这方面技术的人来说，让他花大量的时间和金钱来搭建一个个人网站，显然是不现实的。

（3）专业性强：

现存的个人网站的拥有者大都是程序员和设计师，他们在个人网站分享自己的设计，记录自己的学习收获。

对于他们来说，拥有一个个人网站可以大大提升他们在职场的竞争力，所以他们个人网站制作都十分精良。

1.3课题研究主要内容

本项目是开发一个博客类的个人网站，这是一个比较基础的网站设计，在页面的设计上会融入个人特色和风格，网站也具备博客的基本功能。

网站系统设计分为前台页面展示和后台管理系统。

网站的前端会用HTML5和Bootstrap框架，后台会用PHP和MySQL的搭配实现。

（1）前台页面展示平台功能

文章浏览：

内容包括学习、旅游、爱豆、宠物四个栏目，用户可以通过栏目进入文章列表，通过搜索找到感兴趣的文章。

用户点击进入文章详情页面可以在文章下方进行评论。

留言板：

网站有一个留言板块，用户可以进入该板块留下想对博主说的话。

（2）后台管理平台功能

栏目管理板块：

管理员可以对栏目进行增加、修改和删除。

文章管理板块：

管理员可以在后台发布文章，可以对文章内容、标题、标签进行修改，还可以删除文章。

评论管理板块：

管理员可以对评论进行选择删除。

留言管理板块：

管理员可以对留言进行选择删除。

第二章前期准备

2.1HTML5介绍

随着互联网产业的高速发展，如今HTML5已经成为主流的前端开发技术。

广义地说，HTML5是包含HTML、CSS、JavaScript在内的一套技术组合。

2.1.1发展历程

在HTML5出现之前，人们一直都是在使用HTML4.01，但是4.01版本从2000年开始就没有跟新过了。

当时的一些公司想继续推动web标准化的发展，于是他们就共同成立了超文本应用技术工作组（WHATWG），投身于web应用程序中。

2006年，WHATWG和万维网联盟决定进行合作，开发出新的HTML。

随后经过双方的共同努力，HTML5终于在2014年面世。

2.1.2新特点

HTML5提供了一些新的元素和属性，给开发人员带来很多便利。

如canvas绘画元素，video和audio媒介回放元素等。

HTML5有很好的跨平台性和离线缓存功能。

HTML5增加了更多样化的应用程序接口（API）。

2.2搭建运行环境

在开发网站前先要电脑配置好网站的运行环境，Apache服务器、PHP脚本语言和MySQL数据库是当前主流的动态网站开发组合，组合的开源性和跨平台是其最突出的优势，是很多中小型网站开发的首选组合。

Apache是一款基于C语言开发的专门用来提供HTTP服务的服务器，PHP是一种开源的多用途脚本语言，非常适用于Web开发，MySQL是一种开源的关系型数据库管理系统。

本次毕业设计的网站后台我也将采用这种组合方式来进行开发。

第三章系统分析

3.1网站需求分析

现在网上有很多博客网站，功能也很完善，能给用户提供一个很好的分享空间。

但是这些网站是面向大众的，这就意味着它有很多方面是受限制的，如果用户比较追求网页个性化样式的布局，显然这些网站是无法满足的。

在具备网站开发知识的基础上，自己开发一个博客类网站不仅能满足自身对页面设计的要求，而且能对在大学期间所学的知识进一步加深和巩固。

3.3.1前台需求分析

分析viky博客类个人网站的用户需求：

（1）文章浏览：

该板块浏览者可以根据自己的兴趣通过栏目板块进入文章列表，浏览不同的文章。

（2）文章查询：

访客在文章列表可以通过搜索框找到自己想要的文章，搜索的关键字会和文章的标题进行比对。

（3）文章评论：

访客在浏览完文章的时候可以对文章进行评论，给博主提供一些意见或询问相关问题。

（4）访客联系博主：

访客可以通过网站下方的社交软件联系博主，也可以通过网站的留言面板联系博主。

（5）了解博主：

访客通过介绍页面获得博主的一些基本信息。

3.3.2后台需求分析

分析viky博客类个人网站的（博主）管理员需求：

（1）文章管理：

该板块可以对文章进行添加、修改和删除。

在添加完文章后，管理员可以对文章的标题、简介、内容、栏目、标签、图片进行再次修改。

（2）评论管理：

管理员可以对评论进行筛选，对一些恶意评论进行删除。

（3）留言管理：

管理员可以对留言进行筛选，对一些恶意留言进行删除。

（4）栏目管理：

该板块可以对栏目进行添加、修改和删除。

本网站虽然只固定了四个栏目，但是后续可能还会增加。

管理员可以对栏目的标题和简介进行修改。

（5）用户管理：

本网站只设置了一个管理员用户。

3.2网站逻辑模型

根据网站的需求分析，我针对两个角色分别绘制了流程图：

面向访客的流程图、面向管理员的流程图。

运用逻辑的思维把系统所需的功能展示出来。

面向访客的流程图如图3-1所示。

图3-1面向访客的流程图

面向管理员的流程图如图3-2所示

图3-2面向管理员的流程图

根据上面两个流程图，我们可以得到一个网站系统基本功能的流程图，如图3-3所示。

图3-3网站基本功能流程图

3.3数据库设计

根据之前分析的网站的需求分析，我会创建一下表单：

管理员表，文章表，评论表，留言表，标签表，栏目表。

然后找到各表之间的联系，绘制如图3-4的数据表结构图。

图3-4数据表结构图

第四章静态页面实现

4.1网站文件结构

在编写静态页面之前，先介绍一下本网站的文件结构，我在Apache的htdocs文件夹创建了一个vblog文件夹，里面放着本网站的所有页面和所需的类、库。

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.1JavaScript导航栏

（1）导航栏的HTML部分

整个导航部分用div包裹，定义一个（.active）的div标签作为遮罩层，用ul和li标签来写一级和二级菜单。

代码如下：

（2）导航栏的JavaScript部分

首先获取页面元素，定义一个当前位置current，用for循环lis元素给它绑定一个鼠标进入事件（mouseenter）和鼠标离开事件（mouseleave），当鼠标移动到某个li时调用animateX这函数遮罩层向当前li移动，鼠标离开遮罩回到原来位置。

animateX是一个横向移动的缓动函数，函数的两个参数分别是移动的物体和移动的距离。

下面一个if判断，如果循环到下标是2的li时，给这个lis[2]添加鼠标移入和移出事件，调用下面的fnNav函数对二级菜单进行显示和隐藏。

循环代码如下。

for（vari=0;i

lis[i].addEventListener（'mouseenter',function（）{

animateX（mask,this.offsetLeft）;}）

lis[i].addEventListener（'mouseleave',function（）{

animateX（mask,current）;}）

if（lis[i]=2）{

lis[2].onmouseover=function（）{

fnNav（this,"block"）};

lis[2].onmouseout=function（）{

fnNav（this,"none"）};}}

导航栏最终效果如图4-1所示。

图4-1js二级菜单

4.2.2CSS文字特效

首页开场文字动画，使用到CSS中的animation，效果是welcome字样会有一个字距由宽变窄的，颜色由黑色过渡到粉色的过程，然后vikyvika的字样会在welcome动画结束后下坠出现，HTML代码如下。

Welcomein

Vikyvika