全日制本科生毕业论文
题目：基于HTML5和CSS3的响应式网页
制作
学院：计算机与信息科学学院
专业年级：计算机科学与技术2011级
学生姓名：学号：
指导教师：职称：
2015 年  5 月  6 日
基于HTML5和CSS3的响应式网页制作
重庆师范大学计算机科学与技术
摘要：本网页主要采用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
全套设计加扣3012250582
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所示。
屏幕宽度
≥1200px
1366版式
≥860px 1024版式html网页设计css
TRUE
TRUE
FALSE
3 网页设计
3.1 网页展示内容
本毕业设计项目主要为了研究和实施响应式网页的理论和积累开发经验，所以本论文以响应式网页为核心，以展示旅游网页的内容为载体来检验响应式网页的功能。具体的网页结构图如图3-1所示。
服务关于主页详情联系根据不同的设备屏幕尺寸，不同尺寸下弹性适应。设备样式如图3-2所示。
图3-2设备样式图
下面是响应式网页设计原理图如图3-3所示。
图3-3 响应式原理图
3.3  视觉设计
移动设备的屏幕像素密度与传统电脑屏幕是不一样的，因此在设计的时候需要保证视觉效果统一，视觉设计如图3-4所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。