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

图书分类号： 密 级：

毕业设计(论文)

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

学生姓名 班 级 学院名称 专业名称 指导教师

计算机与信息科学学院 计算机科学与技术

学位论文原创性声明

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

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

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

学位论文版权协议书

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

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

I

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

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

指导教师

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

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

0

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

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所示。

2

屏幕宽度≥1200pxFALSETRUE1366版式≥860pxTRUE1024版式FALSE720版式图2-1 逻辑流程图

3 网页设计

3.1 网页展示内容

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

图3-1 网页结构图

3

导航栏主内容底边栏完美旅行服务关于主页详情联系导航栏主内容底边栏导航栏主内容底边栏导航栏主内容底边栏导航栏主内容底边栏

3.2 制作线框原型

根据不同的设备屏幕尺寸，不同尺寸下弹性适应。设备样式如图3-2所示。

图3-2设备样式图

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

DOM树加载 If(width<860px)If(width>=1200px)@media query 图3-3 响应式原理图

720px布局1024px布局1366px布局If(width>=860px&&width<1200px)3.3 视觉设计

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

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%;

5

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 网页色彩

6

网页给用户的第一印象来自视觉冲击，不同的色彩搭配可以产生各式各样不同的效果，也会影响到用户的体验以及用户对于网站的粘度[2]。“标准色彩”是指能体现网页形象和延伸内涵的色彩，给人以整体统一的感觉[11]。在本次的网页设计中，采用以浅灰、淡绿等清新、淡雅的颜色为主。这样的色彩搭配也更符合旅游网站青春、活力的形象。 4.1.3 网页字体

与前文中所提到的标准色彩同理，标准字体是指用于标题、主菜单的特有字体。为了体现网页的简洁大方的风格，选用“微软雅黑”作为网页的主要字体。旨在给人一种清新、活力、优雅的深刻印象。 4.2 确定网页模块

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

5具体实现

5.1介绍开发工具

Sublime Text不仅只有支持多种编程语言的语法高亮、优秀的代码自动完成功能，还拥有代码片段（Snippet）的功能，即可以将常用的代码片段保存起来，在需要时随时进行调用。支持 VIM 模式，可以使用VIM模式下的大多数命令。并且也支持宏，简单来说就是把操作录制下来或者自己编写命令，然后播放刚才录制的操作或者命令。

Sublime Text还具有良好的扩展能力和完全开放的用户自定义配置，以及相当实用的编辑状态恢复功能。支持非常强大的多行选择以及多行编辑。同时强大的快捷命令可以实时搜索到相应的命令、选项、代码片段和syntex，只需要按下回车就可以直接执行，省略了搜索的过程。

7

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

图5-5平板电脑效果图

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

图5-6 手机效果展示图

13

5.4 Header Footer

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

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

5.5 HTML5的video标签

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

标签引用实例：

14

5.6 百度地图API的引用

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

6 结束语

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

16

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

17

本文来源：https://www.bwwdw.com/article/e9ix.html