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

图书分类号：

密级：

毕业设计(论文) 题目：基于HTML5和CSS3的响应式网页制作

学生姓名

班级

学院名称计算机与信息科学学院

专业名称计算机科学与技术

指导教师

学位论文原创性声明

本人郑重声明：所呈交的学位论文，是本人在导师的指导下，独立进行研究工作所取得的成果。除文中已经注明引用或参考的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品或成果。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标注。

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

论文作者签名：日期：年月日

学位论文版权协议书

本人完全了解关于收集、保存、使用学位论文的规定，即：本校学生在学习期间所完成的学位论文的知识产权归所拥有。有权保留并向国家有关部门或机构送交学位论文的纸本复印件和电子文档拷贝，允许论文被查阅和借阅。可以公布学位论文的全部或部分内容，可以将本学位论文的全部或部分内容提交至各类数据库进行发布和检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。

论文作者签名：导师签名：

日期：年月日日期：年月日

I

基于HTML5和CSS3的响应式网页制作

重庆师范大学计算机科学与技术 20**级

指导教师

摘要：本网页主要采用HTML5和CSS3以及JavaScript等技术开发的旅游类响应式网页。开发目标和技术要点体现在网页的响应式上，同时引用了百度地图API，丰富了网页的内容。

关键词：JavaScript；响应式网页；HTML5；CSS3；百度地图API

Abstract: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；Responsonsive

1 引言

随着信息技术的飞速发展与互联网应用的日益普及，个性化网页的建立已经成为前端开发工程师思考的问题之一。而网页的布局结构，动态交互性，包括响应式等诸多元素都要遵循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所示。

屏幕宽度

≥1200px

1366

版式

≥860px

1024版式

720版式

TRUE

TRUE

FALSE

FALSE

图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]。网页原型根据3种不同设备屏幕的尺寸，设计了与之对应的布局结构。经分析可知，在PC端也就是在屏幕宽度大于1200px时，网页的是上-中-下结构，分为header，content和footer，这三个部分。其中包含主要显示信息的content部分又分为了flex-image（图片轮播）、content-top和copyright这3个区域。

而当屏幕宽度在860px至1200px之间时，网页的主体布局结构依然是上-中-下结构，其中content部分又被分为了左-中-右这3个区域，根据屏幕自适应排列（浮动），web网页开发中这种横向自适应宽度被称为液态布局。

当屏幕宽度小于860px时，网页全部为竖式布局，content区全部由单个的div 构成，不再是左-中-右结构。并且隐藏了content-top区，使其在手机端能够简洁、结构合理的展示网页中的内容。

下面将展示本网页设计的3种布局方式。

(1)pc 端的本网页的布局结构，如图5-1所示。

Header

Flex-image

CONTENT-TOP

Copy-right

（2）平板电脑布局结构，如图5-3所示。

（3）手机端的布局图如图5-3所示。

Header

Flex-image

Copy-right1

Copy-right2Copy-right3

Header

Flex-image

Copy-right1Copy-right2Copy-right3

footer 图5-3 手机端网页布局

当页面加载的时候，CSS会自动启用媒体查询，作为 CSS3规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。针对不同设备的屏幕尺寸选择加载不同的样式，这样就需要我们在HTML页面头部信息中添加如下代码。

meta元数据在与页面加载时检查设备的屏幕宽度（width），同时CSS媒体查询@media only screen and (max-width: 1366px) and (min-width: 1200px)针对不同宽度加载样式。

最终PC端的网页的实现效果，如图5-4所示。

图5-4 PC端效果图

平板电脑效果图，如图5-5所示。

手机端网页展示如图5-6所示。

图5-6 手机效果展示图

图5-5平板电脑效果图

5.4 Header Footer

Header Footer在本次开发中都是公用的HTML片段。在搭建好首页Header 和Footer结构以及样式后，其他的页面需要用到这两部分的时候都可以直接引用。Header分别有两部分构成，logo区和导航区。导航区应用了ul和li标签，在样式上使用float使得div浮动与文档流之上再加以展示。在这当中值得一提的是，我加入了CSS3特有的3D动画，给导航菜单追加了3D 翻转效果。如此炫酷的展示效果，可以给用户带来更好的视觉体验。首页的HTML5中放入了Audio标签，播放音频文件。使用HTML5之前版本来开发网页，如果想要播放音频需要要介入播放器，而现在只需要加上这个标签就可以播放音频文件，并且有按钮可以随时控制播放音乐的开始和暂停。

Your browser does not support the audio tag.

Footer部分则主要了运用了float属性。

5.5 HTML5的video标签

Video标签和Audio标签都是HTML5中新增加的标签。使用这两个标签进行渲染的页面区别于传统的文字图片展示方式，使得整个网页的表现形式更加丰富多彩，有了声音和视频的的网页使得用户的体验度更高，信息含量更大。

标签引用实例：

Your browser does not support the video tag.

5.6 百度地图API的引用

在联系页面，我引用了百度地图API。百度地图API有丰富接口以供调用，我这次使用百度地图API主要是为了给用户提供定位服务。百度地图API提供了getLocation方法，调用此方法便可以对用户浏览器进行WGS定位，精确的显示用户的具体位置。下面是javascript代码的具体实施。

6 结束语

通过这次毕业设计的实践练习，我不仅学会了如何开发响应式网页，更学会了如何独立地解决开发中遇到问题。响应式网页的核心是媒体查询，针对不同通讯设备的宽度而渲染不同的样式布局，基于这个核心技术一步一步地实现网页的响应式布局。

在开发过程中，遇到样式布局混乱这类问题时，我学会了主动借助互联网查找问题的答案，例如百度问答。论坛里面通过提问等方式来帮助我解决问题。同时老师给予了很大的帮助，提供了我很多web开发相关方向的资料，使我在开发中有了更多的知识储备。HTML5和CSS3在这次开发中的核心技术，这也是未来互联网技术中web开发的主要方向，HTML5标签语法简洁，在PC端与移动端的兼容性比较好。CSS3相比之前的老版本已经增加了更多的动画效果，以及修饰图片样式和滤镜，例如图片圆角等的问题CSS3也都可以非常完美的解决。所以CSS3在本次的网页开发中，为网页良好的动画效果提供了的基础。