牛哄网页设计站响应式网页设计设计布局

Posted 2021-04-30 牛哄网页设计站

• Web标准：WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括Xhtml和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（外语缩写：W3C）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

• HTML5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation）

  
  

  
  

• CSS3:CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

• Sublime:Sublime Text 是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

  
  

  
  

  
  Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

• github:gitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名gitHub。
  gitHub于2008年4月10日正式上线，除了git代码仓库托管及基本的 Web管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目 Ruby on Rails、jQuery、python 等。

  网页设计：网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

  网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。

  
  

  
  网页设计主要以Adobe产品为主，常见的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代码工具，其他是图形图像和FL动画工具。还有最近几年Adobe新出的EdgeReflow、EdgeCode、Muse。

  
  

  
  

• Flash:Flash是一种动画创作与应用程序开发于一身的创作软件，到2013年9月2日为止,最新的零售版本为AdobeFlash ProfessionalCC（2013年发布）。Adobe Flash Professional CC为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。Flash广泛用于创建吸引人的应用程序，它们包含丰富的视频、声音、图形和动画。可以在Flash中创建原始内容或者从其它Adobe应用程序（如Photoshop或illustrator）导入它们，快速设计简单的动画，以及使用Adobe ActionScript 3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用

  RWD:响应式网站设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。响应式网站设计有三个关键组成部分：1. media query; 2. 流动网格；3. 灵活缩放的图片。

  基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。

  
  

  
  

  
  

• xml：可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。
  在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 它非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是Internet环境中跨平台的、依赖于内容的技术，也是当今处理分布式结构信息的有效工具。早在1998年，W3C就发布了XML1.0规范，使用它来简化Internet的文档信息传输。

• DOM:文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在javascript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。

• ECMAScript:ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是javascript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

  
  

  
  

  
  

• javascript:JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

• JScript:JScript是由微软公司开发的活动脚本语言，是微软对ECMAScript规范的实现。JScript最初是随Internet Explorer 3.0于1996年8月发布。在网络程序员谈论Internet Explorer中的JavaScript的时候，他们实际上是指JScript。和其他活动脚本一样，它后来也被Windows Script Host（WSH）和Active Server Pages所支持。典型的JScript源文件使用的扩展名是.js。JScript最新的版本是基于尚未定稿的ECMAScript4.0版规范的JScript .NET，并且可以在微软的.Net环境下编译。JScript在ECMA的规范上增加了许多特性。

• 前端（FRONT END）：前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

• 后端：后端是提供服务数据接口的，前端通过调用后端返回的数据接口重组渲染页面，即直接为浏览器端提供服务的服务器端。

• 由于目前世界上人们访问网页的设备大致可分为桌面电脑、平板电脑、智能手机这三种（如图一）。这三种设备的排版方式、采用的网络协议、以及设备本身的硬件都是不一样的，我们在设计与制作网页的时候就需要考虑到兼容性的问题，我们构建的网络应可以自动适应不同的访问设备。

  每个访问设备硬件不同，尤其是屏幕的分辨率，我们在设计与制作网页时需要考虑到每个设备的分辨率的问题，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。（如图二中，各种访问网络的设备分辨率参数众多）

  
  

  
  

  
  

  拥有更多的手机、平板和电脑用户
  响应式网站的兴起是平板电脑和手机有大量普及以及互联网使用不断增加的必然结果。响应式网站的最大优势在于能兼容各种设备，而非使用传统方式将用户跳转至设备专用网站。

  
  

  
  

• 提高转换率和销量
  响应式设计网站还有效地解决一些在传统网站上无法解决，困扰用户许久的问题，如性能差、功能少以及感受和外观不一致。响应式网站意味着无需在网站设置跳转，从而极大完善了用户体验，这也是响应式网站的最大优势所在。另外，使用集成式设计和 CSS 表单一类的功能使网站无论在何种设备上都能营造出风格一致的感觉和外观，用户可以在任何设备上轻松浏览网站，进而提高转换率。

• 提升搜索排名在搜索引擎中排名靠前是每个网站的终极目标，具有响应式设计布局的网站有助于达成这个目标。首先，维护此类网站所需的时间缩短，只需要一组超链接来优化该网站在搜索引擎中的排名

  其次，有更多时间拟定全面的搜索引擎优化策略，响应式网站可以让我们集中精力维护管理一个兼容所有设备的网站，从而节省大量的时间投入。

• 节省企业的建站及运营成本
  H5响应式网站，只需要开发一次，从成本层面来说，为企业节省了时间、精力和金钱，响应式网站能为企业节省30%的成本。从营销层面来看，H5响应式网站在不同的终端设备上都使用同一个网址，只需要对唯一站点进行运营推广，后台管理，数据分析都是用同一个平台，利于维护，大大减少了运营成本。

• 总结:以上6个原因和两张图表，都反映了，为了好的用户体验，“响应式网页设计”是必不可少的。

在CSS2.1媒体类型允许为显示器（screen）、打印机（print）、电视机（tv）等媒体定义样式，W3C在CSS3中加入了媒体查询（Media Queries）模块，不但支持定义媒体类型，而且支持上网设备的物理特性的检测。没有CSS3的媒体查询模块，就不能针对设备特性匹配特定的CSS样式。媒体查询根据媒体类型、屏幕宽度、屏幕比例、设备方向（横向或纵向）等各种功能特性来改变页面布局，而不仅仅像CSS2.1的只是媒体类型。Web设计者只需要针对不同的屏幕分辨率等级来编写不同的页面布局样式，然后上网设备会根据自身的屏幕分辨率来选择一种适合页面的布局，从而改善用户浏览体验。媒体查询表达式由设备类型和一个或多个检测媒体特性的声明构成，声明由媒体特性名称和值构成，中间用冒号“：”分隔[8]。媒体查询的语法为：“@media 媒体类型 and （媒体特性） {样式代码}”，其中媒体类型常用的有all（所有设备）、screen（电脑显示器）、print（打印机或者打印预览）和tv（电视机）。CSS3中定义的媒体特性共有13种，分别是视口宽度width、视口高度height、设备屏幕分辨率宽度device-width、设备屏幕分辨率高度device-height、设备方向orientation[portrait | landscape]、视口宽高比aspect-ration、设备屏幕分辨率宽高比device-aspect-ratio、设备支持的每像素色彩位数color、设备的颜色索引表中的颜色数color-index、黑白屏幕设备每个像素的所使用的位数monochrome 、屏幕或打印机分辨率的resolution、电视机扫描方式scan[progressive | interlace]、输出设备是栅格还是位图grid[0|1]。可使用and关键词组合媒体类型和媒体特性值条件，在媒体类型前面或媒体特性前面加not对后面的表达式取反，加逗号“，”在一系列表达式其中一个真时则为真，加only使不支持媒体查询的浏览器忽略本条查询，“{ }”中书写CSS规则。例如 “@media screen and （min-width： 480px） {}”表示视口宽度小于480px适用，“@media screen and （min -width： 480px） and （max -width： 768px） {}”表示视口宽度大于480px但小于768px适用，“@media screen and （max-width： 960px） {}”表示视口宽度小于960px适用，“@media screen and （min-width： 1420px） {}”表示视口宽度大于1420px适用，这时可能要考虑设置max-width属性限制内容区的最大宽度，或者增加列数来填补大量的空白区域[9][10]。响应式Web设计最为常见的是检测上网设备的width特性值，设定视口宽度的级数取决于用户群体终端设备碎片化程度和视觉设计需求，需为不同终端级别宽度定制相匹配的样式，做到宽度连续覆盖。另一种设计思路强调以界面为主导，解除断点设置跟上网设备分辨率的直接关联，断点数量及参数完全根据内容来决定，也就是根据网站的图文版式的变动临界点来设置。 　　响应式Web布局设计时，媒体查询顺序采用从移动端向上设计，优先建立移动设备用户体验，然后针对更大屏幕的显示器进行调整，以避免移动终端对媒体查询的支持不完善，也就是，在样式表的开头定义基本样式，然后使用媒体查询从低分辨率到高分辨率来重写样式以覆盖前面定义的样式[11]。　　为减少HTTP请求数量，建议将媒体查询样式尽可能写在同一个文件中。对于较复杂的网站，可以采用外部样式表，通过标签链接到网页文件，如“”，实现当视口宽度大于等于960px时载入外部样式表gt-960px.css。　　目前，移动终端浏览器一般都能比较好支持CSS3，不需要考虑响应式布局的媒体查询兼容问题，为实现IE9以下的浏览器媒体查询兼容性，需在页面中插入css3-mediaqueries.js文件调用，代码如下：　　<！—[if lt IE 9]>　　

　　<！[endif]—>

媒体查询能适应不同设备和视口宽度，可以从一组CSS样式代码切换到另一组，但切换期间没有任何平滑过渡，会导致媒体内容要么过宽出现水平滚动条，要么过窄出现大量空白，尤其在切换临界点时布局会严重恶化。通过将固定像素布局转换成灵活的流动布局，确保在媒体查询未切换样式期间布局能适应视口改变。流动布局依靠浮动和百分比宽度来实现，浮动实现布局区块的动态重组，百分比宽度实现未到达断点时的区块宽度调整，以减少创建的断点数。浮动布局在固定宽度的Web设计中已经大量使用，在此不在赘述。将固定像素宽度转换成百分比宽度可套用公式：百分比宽度=目标元素宽度÷上下文元素宽度。例如，将原来#wrapper宽度为960px，#content宽度为940px，转换为百分比布局#content宽度97.92%，即940÷960=0.9792。
　　在网页文档标签中插入一个HTM5标签，设置基于WebKit内核的画布缩放参数，如 ，可实现页面在浏览器中以原始大小显示，禁止用户缩放。其中：width和height检测设备屏幕分辨率宽度和高度，initial-scale 设定初始的缩放比例，值为1时将根据浏览器可视区域实际大小来渲染页面。minimum-scale和maximum-scale指允许用户缩放到的最小比例和最大比例，user-scalable设定用户是否禁止缩放。

• 视觉媒体主要指文本、图形、图像、动画和视频等可视媒体。弹性视觉媒体设计的本质是确保视觉媒体适应版式布局的变化，确保页面上媒体的可读性。响应式Web设计时文本和其他视觉媒体实现方式不同。　　弹性文本需将文本大小单位从px改为em， em的大小由上下文的定义的字体大小计算而来，是相对大小单位。使用em的好处在于：允许缩放文本和保持文本大小设计的灵活性。设计时通常给body标签设置font-size属性值后，给其他文本都使用相对单位em，使用相对单位的文本就会基于body的大小来计算字体大小。字体百分比尺寸计算跟百分比布局盒子计算方法相同，如上下文字体大小为16像素，当前文字大小为14像素，则字体大小0.875em，即14÷16=0.875。　　图形图像、动画和视频的弹性设置使用“img，object，video，embed {width：100%； max-width：100%；}”，max-width属性用于设置媒体显示阈值，确保缩放时不会超出图片最大尺寸，同时应删除HTML插入媒体的标记中的width和height属性定义，如果要定义特定规格的媒体尺寸，可编写专用样式单独设置宽度，以覆盖上下文定义，使其仅作用于该媒体即可。另外一种限制内部媒体显示缩放比例的方法是给外层盒子设置max-width属性，通过限制外层盒子来间接控制内部媒体缩放尺寸。

  　　在设计制作弹性视觉媒体时，仅考虑媒体放大到的极限情况会因此带来一个媒体文件整体偏大，使网站变得臃肿，需利用媒体压缩和优化技术来控制文件大小。另一种实现思路是通过JavaScript判断当前设备的分辨率，并根据预设的规则加载不同尺寸的图片文件。