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
(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种布局方式。
9
(1)pc端的本网页的布局结构，如图5-1所示。 Header Flex-image CONTENT-TOP Copy-right Footer图5-1 PC网页布局图 10
（2）平板电脑布局结构，如图5-3所示。
Header Copy-right1Flex-image Copy-right2Copy-right3Footer
5-2 平板电脑布局图 （3）手机端的布局图如图5-3所示。
Copy-right1Flex-imageHeader
图5-3 手机端网页布局
footerCopy-right2Copy-right3 11
当页面加载的时候，CSS会自动启用媒体查询，作为 CSS3规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。针对不同设备的屏幕尺寸选择加载不同的样式，这样就需要我们在HTML页面头部信息中添加如下代码。
name=\
content=\
initial-scale=1,
maximum-scale=1\
meta元数据在与页面加载时检查设备的屏幕宽度（width），同时CSS媒体查询@media only screen and (max-width: 1366px) and (min-width: 1200px)针对不同宽度加载样式。
最终PC端的网页的实现效果，如图5-4所示。
图5-4 PC端效果图
12