毕业设计（论文）基于HTML5和CSS3.0的手机网站的设计与实现.doc
本科生毕业论文（设计）题 目：基于HTML5和CSS3.0的手机网站的 设计与实现 专业代码： 040104 作者姓名： 学 号： 单 位： 传媒技术学院 指导教师： 2015 年 5 月 1 日原创性声明本人郑重声明：所提交的学位论文是本人在导师指导下，独立进行研究取得的成果。除文中已经注明引用的内容外，论文中不含其他人已经发表或撰写过的研究成果，也不包含为获得聊城大学或其他教育机构的学位证书而使用过的材料。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。本人承担本声明的相应责任。学位论文作者签名：日期 指 导 教 师 签 名： 日期 摘 要随着智能手机的普及，越来越多同学使用手机上网。本研究基于已有的学院网站在手机上显示会出现字迹小，显示不全的问题，利用HTML5和CSS3.0等技术设计和实现手机版网站，该网站具有界面友好、功能清晰、支持跨平台、跨媒体浏览等特点，较好的满足了同学使用手机浏览学院网站信息的需求。本研究所采用的网页设计和关键技术也可以为其他手机网站的设计和开发提供参考和借鉴。关键词：HTML5；CSS3.0；JavaScript；JQuery；网页设计AbstractWith the popular of the smartphone, more and more students use it online. This study is based on website which has already been founded having many problems,such as font-size, content show and so on. I will use HTML5 and CSS3.0 technologies to design and make website which can be presented perfectly in the smartphone. It has a friendly interface, clear function, support cross-platform and cross-media browsing, better meet the actual demand of using smartphone to skim the message about our college website. The web page design and the key technology which the research adopted can also provide a reference for other website design and exploitation.Key words: HTML5; CSS3.0;JavaScript; JQuery; web page design 目录引言1第1章 需求分析21.1 功能需求分析21.2环境需求分析31.3用户界面需求分析4第2章 网站设计52.1网站首页的设计62.2网站栏目页的设计62.3网站内容页的设计7第3章 网站主要页面的设计开发及关键技术83.1网站主要布局和文件头代码的实现83.2CSS3.0实现页面的主要布局和匹配屏幕的大小103.3JavaScript实现页面的交互和检测不同的设备13第4章 网站的测试与维护144.1网站的测试144.2网站的维护15结束语16参考文献17致谢1基于HTML5和CSS3.0的手机网站的设计与实现引言随着智能手机的发展，几乎所有的学生都配备了智能手机，这给学生开展移动学习带来了方便，但是传统的网站无法适应手机屏幕大小的要求，学生在浏览网页时会出现网页字迹太小，网站内容排版混乱等等问题，给学生的学习带来了一定的困扰。HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的重大修改，基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，而CSS3.0即层叠样式表， 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，并且CSS3.0能够匹配不同的设备，实现跨平台的浏览。互联网的发展，使HTML5和CSS3.0不仅仅是两项新的Web技术标准，更代表了下一代HTML和CSS技术，未来的发展前景已经可以预见，HTML5必将被越来越多的Web开发人员所使用，成为web前端开发的主流，所以本设计对于学习和使用HTML5和CSS3.0技术具有前瞻性和重大的意义。本设计从学院网站出发，从已有的学院网站的基础上进行网站的设计开发。本设计主要是运用HTML5和CSS3.0进行网页布局，而数据库的设计部分和动态网页的代码则是调用已有网站的代码，实现了软件的可重用性。通过设计，旨在学院网站可以在手机、平板、电脑等不同的设备上进行浏览，大大的方便了学生获取院网站信息。第1章 需求分析为了明确用户需求和本网站设计要求，在进行开发之前进行了系统的需求分析。下面将从功能需求、环境需求、用户界面需求三个方面详细地进行系统需求分析。1.1 功能需求分析本设计主要为了满足广大同学使用不用的设备浏览学院网站的需求，使同学们能够使用不同的设备浏览学院的网站，而不出现字迹不清和内容显示不全的问题。图1 学院原始网站手机显示图1.2环境需求分析根据笔者的专业开设和调试的需要，本设计基于windows平台，采用了Adobe Dreamweaver CS6开发工具和IIS服务器，考虑到安卓手机的用户量，决定采用Android 4.1版本的手机并且用搜狗浏览器进行测试。由于考虑到网站需要联网测试，在没有足够多的域名和IP的情况下，决定采用局域网连接的方式，将主机和手机放置在同一局域网下，用手机连接主机，这样既减少了成本，并且加快了连接的速度。图2 网站结构简图图3 网站IIS配置简图1.3用户界面需求分析网站采用良好的图形界面、习惯化的操作按钮和扁平化设计的思想，使网站界面简洁、易于操作，让广大的同学很容易在手机设备上操作。如图4、图5为网站首页。图4 网站首页截图1图5 网站首页截图2第2章 网站设计根据前面对网站需求的分析，和用户浏览的需要，可以将网站的设计分为三个部分：网站的首页设计、网站栏目页的设计、网站内容页的设计。2.1网站首页的设计网站的首页主要是网站的导航，和主要内容的展示，设计主要包括网站的图标设计、网站的导航设计、网站的栏目设计、网站的底部说明设计（如图6、图7、图8所示）。图6 网站图标和导航设计图7 网站栏目设计图8 网站底部说明设计图9 栏目导航设计2.2网站栏目页的设计网站的栏目页主要用来显示某一栏目的主要内容，设计主要包括栏目导航设计、内容列表设计、返回顶部设计三个部分。（如图9、图10、图11所示）图10 内容列表设计图11 返回顶部设计2.3网站内容页的设计网页的内容页主要是用来显示学院的简介和重要的通知，设计主要包括栏目导航设计、返回顶部设计、内容显示设计三个部分（如图9，图11，图12）。图12 内容显示设计第3章 网站主要页面的设计开发及关键技术3.1网站主要布局和文件头代码的实现3.1.1网站的主要布局网站采用了HTML5代码的布局，利于搜索引擎搜索到页面和内容在手机屏幕上的显示。（1） 首页的主要布局HTML5标签如下：<!DOCTYPE html><html><head><title></title></head><body> <header> <nav> <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </nav> </header> <section> <div class="tabs"> <span></span> <span>/span> <span></span> <span></span> </div> <div> <ul> <li><a></a><span><em></em></span></li> <li><a></a><span><em></em></span></li> <li><a></a><span><em></em></span></li> </ul> <ul> <li><a></a><span><em></em></span></li> <li><a></a><span><em></em></span></li> <li><a></a><span><em></em></span></li> </ul> <ul> <li><a></a><span><em></em></span></li> <li><a></a><span><em></em></span></li> <li><a></a><span><em></em></span></li> </ul> </section> <div id="top"> <img/> </div> <footer> <p></p> </footer></body></html>（2） 由于代码的重用性，栏目页和内容页中新增使用的HTML5标签为：<time></time><article></article>3.1.2文件头代码的实现为了实现在移动设备的显示，需要在文件头里加上以下标签，使页面匹配设备的宽度，更好的让页面显示： <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes" />3.2CSS3.0实现页面的主要布局和匹配屏幕的大小3.2.1CSS3.0实现页面的主要布局对于手机网站的布局，CSS大多采用百分比的布局，并且内容大多居中显示，由于篇幅的原因，展示一些主要标签的布局：*, html padding: 0px; margin: 0px;body font-family: Microsoft YaHei,Arial,Helvetica,sans-serif; width: auto; max-width: 960px;_width:expression(document.documentElement.clientWidth|document.body.clientWidth)>960?"960px":""); background: none; text-align: center; margin: auto; font-size: 100%; color: #000;img border: none;header, nav, footer, section, article display: block;h1, h2 font-size: 100%; font-weight: bold;ul list-style: none;a color: #000; text-decoration: none; outline: none; a:hover color: #000; text-decoration: underline; footer margin: 0 auto; margin-top: 10px; width: auto; max-width: 960px; _width: expression(document.documentElement.clientWidth|document.body.clientWidth)>960?"960px":""); padding: 20px 0px; text-align: center; background: #F3F3F3; border-top: solid 1px #E3E3E3; font-size: 0.75em; color: #666;3.2.2CSS3.0匹配屏幕的大小 由于不用的设备屏幕大小不同，所以需要不同的布局，用以下代码来识别屏幕的宽度，对于不同宽度的设备，采用不同的CSS布局：media screen and (max-width:479px) nav display: none; nav ul a width: 33.3333333%; media screen and (min-width:480px) and (max-width:639px) nav display: none; nav ul a width: 33.3333333%; media screen and (min-width:640px) and (max-width:767px) nav display: none; nav ul a width: 25%; media screen and (min-width:768px) and (max-width:960px) nav display: none; nav ul a width: 25%; 3.3JavaScript实现页面的交互和检测不同的设备3.3.1JavaScript实现页面的交互 由于jQuery库的功能强大并且好多自带的函数使用起来十分方便，所以决定采用调用jQuery的方式实现网页交互部分的制作，调用jQuery的JavaScript部分代码如下：$(function()$("#navbtn").click(function()$("nav").toggle(););$("#goTopBtn").click(function()$('body,html').animate(scrollTop:0,500););document.getElementById("gotoBack").onclick=function()window.history.back();return false;$(".more").click(function()$(this).hide();$(this).next().toggle();););3.3.2JavaScript实现检测不同的设备由于许多同学还会使用电脑浏览学院的网站，本设计采取了兼容的方式，保留了原学院网站，通过使用JavaScript和正则表达式来进行设备匹配，从而决定用户是否跳转到手机版网站。设备匹配的JavaScript代码如下：<script>if(navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i) location.replace("phone/index.html"); </script>第4章 网站的测试与维护4.1网站的测试 本设计采用IIS服务器和局域网进行测试，需将站点文件夹复制到根目录下，然后设置IP地址为全部未分配，为了保证手机的连接到网站，需要把防火墙关闭。（设置如图12、图13所示）图13 IIS配置图14 防火墙设置4.2网站的维护 由于该网站是调用已有学院网站动态的ASP.Net的代码，并且该网站使用的是已有的数据库，所以该网站可以和已有的学院网站一起维护，设置一个管理员即可，既节约了维护成本，又保证了该网站的长期有效的运行。结束语基于智能手机显示的网站实现是一项较为复杂而繁琐的工作，它设计到很多细节和技术。本设计以HTML5和CSS3.0技术为基础，立足于广大同学用智能手机浏览学院网站的需要，设计了手机版的学院网站。作者首先对HTML5和CSS3.0技术进行介绍，然后对手机网站的需求进行分析，并在需求分析的基础上给出了网站的设计总体架构；在前面工作的基础上，详细叙述了手机网站主要布局的实现过程和关键技术。该设计可以有效地解决学生利用手机浏览学院网站字迹不清、显示不全等问题，真正实现学生的移动上网学习。该网站不可避免的存在一定的不足，需要进行不断的修正和完善：（1） 网站颜色使用的是纯色，使网站页面并不是那么美观。（2） CSS代码的不够精炼、使用第三方的库使加载速度减慢。（3） 由于测试的浏览器不多，网站的浏览器兼容性可能不足。参考文献1布拉德福,海涅,高京. 深入理解HTML：语义、标准与样式M. 电子工业出版社，2013.06.2刘欣 ,王雨竹. HTML5入门经典 M. 机械工业出版社，2013.3库波 ,汪晓青. HTML5与CSS3网页设计M. 北京理工大学出版社，2013.08.4Brad Dayley. jQuery与JavaScript入门经典M. 人民邮电出版社,2014.10.5 W3School. HTML系列教程EB/OL. 致谢本毕业设计能够顺利完成，离不开于连民老师的悉心指导，本课题从选题到设计和最后的撰写，他都给予悉心的指导和帮助。同时，毕业设计在实验室制作时，许多老师都给了许多合理的建议和指导，让这个设计更加的完善，也让我从中受益匪浅，感谢这些老师！此外，感谢聊城大学曾经教过、帮助过和关心过我的所有老师；感谢传媒技术学院所有的领导、老师及全体同学的支持、关心和帮助！
