屏幕宽度≥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