基于HTML5和CSS3的响应式网页制作 毕业论文

图书分类号：密级：毕业设计(论文) 题目：基于HTML5和CSS3的响应式网页制作学生姓名班级学院名称计算机与信息科学学院专业名称计算机科学与技术指导教师学位论文原创性声明本人郑重声明：所呈交的学位论文，是本人在导师的指导下，独立进行研究工作所取得的成果。

除文中已经注明引用或参考的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品或成果。

对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标注。

本人完全意识到本声明的法律结果由本人承担。

论文作者签名：日期：年月日学位论文版权协议书本人完全了解关于收集、保存、使用学位论文的规定，即：本校学生在学习期间所完成的学位论文的知识产权归所拥有。

有权保留并向国家有关部门或机构送交学位论文的纸本复印件和电子文档拷贝，允许论文被查阅和借阅。

可以公布学位论文的全部或部分内容，可以将本学位论文的全部或部分内容提交至各类数据库进行发布和检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。

论文作者签名：导师签名：日期：年月日日期：年月日I基于HTML5和CSS3的响应式网页制作重庆师范大学计算机科学与技术 20**级指导教师摘要：本网页主要采用HTML5和CSS3以及JavaScript等技术开发的旅游类响应式网页。

开发目标和技术要点体现在网页的响应式上，同时引用了百度地图API，丰富了网页的内容。

关键词：JavaScript；响应式网页；HTML5；CSS3；百度地图APIAbstract:The Webpage mainly uses HTML5 and CSS3 as well as JavaScript technology development of the tourism Webpage response type The development goal and key technical points in Webpage response type, but also cited Baidu map API, enrich the content of Webpage.Key words：JavaScript；Dom；HTML5+CSS；Map；API；Responsonsive1 引言随着信息技术的飞速发展与互联网应用的日益普及，个性化网页的建立已经成为前端开发工程师思考的问题之一。

而网页的布局结构，动态交互性，包括响应式等诸多元素都要遵循W3C规范，使用HTML5和CSS3技术实现网页结构和表现，JavaScript脚本语言实现了网页的交互性[1]。

HTML5和CSS3的技术在现代网页技术中发展得非常迅猛，原因在于它提升了整个网页的渲染速度，加上网页切片技术的革命性突破，解决了美工设计和图片过多带来的响应慢的缺点[2]。

并且CSS3样式在标准浏览器中渲染丰富，效果绚丽[3]。

2014年是响应式网站的元年，移动互联网用户数量已经超过了桌面用户。

除了智能手机之外，使用平板电脑和电视机进行上网的用户也在持续增加。

因此在互联网大规模的普及下，让网页尽量兼容各类通讯设备，适应各种分辨率的屏幕，并确保优良的用户体验，这是前端工程师必须要解决的问题。

响应式网页可以根据接收设备的不同分辨率自动调整网页布局，将同一网页的内容以不同的布局方式正常地在各种接收设备上显示[4]。

2 需求分析从技术的角度来看，响应式网页主要考虑一下以下几个因素：根据手机屏幕小的特点要把台式机的版面裁切成手机版面，只显示最核心的内容。

台式机屏幕分辨率大多数都是1920*1080px，而笔记本电脑的分辨率相对小一些，为了简化版面的布局，让大屏幕的台式机去兼容小屏幕的笔记本，所以台式机和笔记本电脑使用相同的布局。

当屏幕宽度大于或等于1200px时与屏幕宽度为1366px下的网页布局一致。

当屏幕宽度一般在640px到1200px之间时以屏幕宽度为1024px为标准对网页进行布局。

而当屏幕宽度低于860px时，网页布局以720px为准展示。

具体分析如图2-1所示。

3 网页设计3.1 网页展示内容本毕业设计项目主要为了研究和实施响应式网页的理论和积累开发经验，所以本论文以响应式网页为核心，以展示旅游网页的内容为载体来检验响应式网页的功能。

具体的网页结构图如图3-1所示。

屏幕宽度≥1200px1366版式≥860px1024版式720版式TRUETRUEFALSEFALSE图2-1 逻辑流程图服务关于主页详情联系3.2 制作线框原型根据不同的设备屏幕尺寸，不同尺寸下弹性适应。

设备样式如图3-2所示。

图3-2设备样式图下面是响应式网页设计原理图如图3-3所示。

图3-3 响应式原理图3.3 视觉设计移动设备的屏幕像素密度与传统电脑屏幕是不一样的，因此在设计的时候需要保证视觉效果统一，视觉设计如图3-4所示。

图3-4 视觉设计图3.4 前端构建前端媒体查询（即响应式）核心代码如下所示。

@media only screen and (max-width: 1366px) and (min-width: 1200px) { .wrap{width:90%;}}@media only screen and (max-width: 1199px) and (min-width: 860px) {.wrap{width:90%;}}@media only screen and (max-width: 859px) {.content_top{display:none;}.wrap{width:95%;}.top-nav ul li a{padding:40px 15px;}.grid{width:26.8%;}.span_2_of_3 {width:94%;padding:3%;}.footer{padding:0;}.footer-grid h3{margin-bottom:5px;}.col{ margin: 1% 0 1% 0%;}.span_1_of_3 {width:94%;padding:3%;}}4网页的具体实施4.1 确定网页形象风格网页形象的设计可以从网页标志、网页色彩、网页字体和网络宣传语等方面着手。

而网页风格是抽象的，是指网页的整体形象给浏览者的综合感受。

这个“整体”形象包括了网页的标志、色彩、字体、标语等诸多因素。

故对于网页元素的选取方面，做了以下选择。

4.1.1 网页标志使用了PS处理后的logo（即网页标志），logo如图4-1所示。

图 4-1 logo“完美旅行”代表我们网页总体要表现的服务宗旨就是要给你最完美的目的地，让你找到心中的那片向往的净土。

整体色调淡绿，给人一种清新淡雅的感觉。

4.1.2 网页色彩网页给用户的第一印象来自视觉冲击，不同的色彩搭配可以产生各式各样不同的效果，也会影响到用户的体验以及用户对于网站的粘度[2]。

“标准色彩”是指能体现网页形象和延伸内涵的色彩，给人以整体统一的感觉[11]。

在本次的网页设计中，采用以浅灰、淡绿等清新、淡雅的颜色为主。

这样的色彩搭配也更符合旅游网站青春、活力的形象。

4.1.3 网页字体与前文中所提到的标准色彩同理，标准字体是指用于标题、主菜单的特有字体。

为了体现网页的简洁大方的风格，选用“微软雅黑”作为网页的主要字体。

旨在给人一种清新、活力、优雅的深刻印象。

4.2确定网页模块本次设计的网页上包括的内容大致是：模块导航、动画特效、介绍文字、相关产品、视频广告、相关网页链接等网页的基本模块，方便用户的使用和浏览。

5具体实现5.1介绍开发工具Sublime Text不仅只有支持多种编程语言的语法高亮、优秀的代码自动完成功能，还拥有代码片段（Snippet）的功能，即可以将常用的代码片段保存起来，在需要时随时进行调用。

支持VIM 模式，可以使用VIM模式下的大多数命令。

并且也支持宏，简单来说就是把操作录制下来或者自己编写命令，然后播放刚才录制的操作或者命令。

Sublime Text还具有良好的扩展能力和完全开放的用户自定义配置，以及相当实用的编辑状态恢复功能。

支持非常强大的多行选择以及多行编辑。

同时强大的快捷命令可以实时搜索到相应的命令、选项、代码片段和syntex，只需要按下回车就可以直接执行，省略了搜索的过程。

Sublime Text软件的右边有非常特别的代码缩略图，通过缩略图可以很方便的查看当前窗口在文件中的具体位置，可以拖动缩略图上当前窗口的位置随心所欲的跳转到文件的任意位置。

与此同时还提供了F11 和Shift+F11 进入全屏免打扰模式。

代码缩略图、多标签页、多种布局设置等特色功能，使得开发者在大屏幕上需同时编辑多个文件时尤为方便。

而全屏免打扰模式，可以使开发者更加专心于开发工作。

5.2 HTML5和CSS3特性介绍(1)HTML5赋予网页更好的意义和结构[6]。

丰富的标签由于对微数据与微格式等方面的大力支持，更加有利于网页页面构建，用户都更有价值的数据驱动的web。

(2)新的HTML5 APP Cache特性支持,使基于HTML5开发的网页具有更短的启动时间，以及本地存储功能。

(3)HTML5为web开发者们提供了很多功能上的选择，比如数据与应用可以接入开放接口，这使得外部的应用可以直接与浏览器内部的数据直接相连，比如说视频可以直接与设备之间链接起来[7]。

(4)HTML5拥有有效的服务器推送技术，Server-Sent Event和WebSockets就是这其中的两个特性，这些特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

(5)HTML5支持Audio、Video、MP3等多媒体功能。

(6)HTML5也支持了基于SVG、Canvas、WebGL以及CSS3等相关3D图形渲染说我功能[8]。

(7)HTML5拥有良好的性能与集成特性，可以通过XMLHttpRequest2等技术，解决跨域问题，帮助web应用和网页在多样化的环境中可以更加快速的进行相关数据的交互[9]。

(8)HTML5 取消了一些HTML4中的一些和CSS样式重合的一些标记，例如font、center等。

这些都已经被CSS3中的样式所取代，这些改变有利于代码的规范化和简洁化，有利于前端的发展[10]。

(9)HTML5中拥有很多全新的对象。

全新的表单输入对象，比如日期、URL、Email等，都已经加入了相关的正则判断；全新的Tag，比如Video，Audio；支持Canvas对象，可以绘制矢量图。

(10)CSS3加入了酷炫的动画效果，transition，transform等立体渲染动画。

不用JS也可以制作出来流畅的动画[11]。

5.3 结构分析网页的效果图根据不同设备的屏幕尺寸大小进行区分，这样的设计有利于我们的响应式网页的实现[12]。