毕业设计-基于html5和css3.0的手机网站的设计与实现
本科生毕业论文（设计）
题目：基于HTML5和CSS3.0的手机网站的
设计与实现
专业代码：
作者姓名：
学号：
单位：传媒技术学院
指导教师：
2015 年 5 月 1 日
原创性声明
本人郑重声明：所提交的学位论文是本人在导师指导下，独立进行研究取得的成果。除文中已经注明引用的内容外，论文中不含其他人已经发表或撰写过的研究成果，也不包含为获得聊城大学或其他教育机构的学位证书而使用过的材料。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。本人承担本声明的相应责任。
学位论文作者签名：日期
指导教师签名：日期
摘要
随着智能手机的普及，越来越多同学使用手机上网。本研究基于已有的学院网站在手机上显示会出现字迹小，显示不全的问题，利用HTML5和CSS3.0等技术设计和实现手机版网站，该网站具有界面友好、功能清晰、支持跨平台、跨媒体浏览等特点，较好的满足了同学使用手机浏览学院网站信息的需求。本研究所采用的网页设计和关键技术也可以为其他手机网站的设计和开发提供参考和借鉴。
关键词：HTML5；CSS3.0；JavaScript；JQuery；网页设计
Abstract
With 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章需求分析 (2)
1.1 功能需求分析 (2)
1.2环境需求分析 (3)
1.3用户界面需求分析 (4)
第2章网站设计 (5)
2.1网站首页的设计 (6)
2.2网站栏目页的设计 (6)
2.3网站内容页的设计 (7)
第3章网站主要页面的设计开发及关键技术 (8)
3.1网站主要布局和文件头代码的实现 (8)
3.2CSS3.0实现页面的主要布局和匹配屏幕的大小 (10)
3.3JavaScript实现页面的交互和检测不同的设备 (13)
第4章网站的测试与维护 (14)
4.1网站的测试 (14)
4.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标签如下：
/span>
（2）由于代码的重用性，栏目页和内容页中新增使用的HTML5标签为：
3.1.2文件头代码的实现
为了实现在移动设备的显示，需要在文件头里加上以下标签，使页面匹配设备的宽度，更好的让页面显示：
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实现页面的主要布局