信息技术专题讲座1

1、信息技术信息技术 专题讲座专题讲座网站架构网站架构v 中小网站（中小网站（LAMP技术）技术） Linux+Apache+MySQL+PHP v 大型网站（从中小网站发展而来）大型网站（从中小网站发展而来） 高流量、高并发、高可用、高性能、伸缩性、可扩展、安全高流量、高并发、高可用、高性能、伸缩性、可扩展、安全 NoSQL=not only SQL 不仅仅是不仅仅是SQL 泛指非关系型数据库，目前应用最广泛的是泛指非关系型数据库，目前应用最广泛的是Apache HBase网站架构网站架构v 常用的网站架构：常用的网站架构： Linux + Apache + PHP + MySQL Linux

2、+ Apache + Java (WebSphere) + Oracle Windows Server 2003/2008 + IIS + C#/ASP.NET + 数据库数据库MsSQL 软件下载：软件下载： Apache: / PHP: http:/ MySQL : http:/ Framework，CSS Library）网络传输性能（并行下载，带宽利用率）网络传输性能（并行下载，带宽利用率）浏览器渲染时间浏览器渲染时间/性能性能（TTI即用户可交互前等待时间，即用户可交互前等待时间，JS执行性能）执行性能）WEB前端技术的范围前端技术的范围编程语

3、言编程语言/技术（技术（HTML，JavaScript，CSS等）等）用户体验（主观）用户体验（主观） 梅特卡夫定律梅特卡夫定律(Metcalfes Law)：网络价值同网网络价值同网络用户数量的络用户数量的平方成正比。平方成正比。 用户最基本的需求：用户最基本的需求：速度和稳定性速度和稳定性 迭代式发展，周期相对短迭代式发展，周期相对短Always On line影响因素影响因素优化方法优化方法系统响应时间系统响应时间几秒几秒十几毫十几毫秒秒1微秒微秒0.5毫秒毫秒打开一个网站打开一个网站在数据库中查询一条记在数据库中查询一条记录（有索引）录（有索引）网络传输网络传输2KB数据数据从远程分布

4、式缓存从远程分布式缓存Redis读取一个数据读取一个数据网站优化网站优化面包屑导航面包屑导航v 面包屑导航其实就是目录结构、位置导航，像：主分类面包屑导航其实就是目录结构、位置导航，像：主分类一级一级分类分类二级分类二级分类三三 级分类级分类最终内容页面最终内容页面v 在童话里，面包屑是汉赛尔在进入森林的路中偷偷撒下的，这在童话里，面包屑是汉赛尔在进入森林的路中偷偷撒下的，这是一种是一种“历史记录历史记录”的应用方式，目的是帮助你追溯来路，因而的应用方式，目的是帮助你追溯来路，因而它应该是一种线性的导航方式它应该是一种线性的导航方式。v 在网页的应用中，在网页的应用中，“追溯来路追溯来路”这件

5、事浏览器已这件事浏览器已 经做得足够好了，经做得足够好了，所以所以“面包屑面包屑”慢慢地就变成用来表达内容归属关系的界面元素，慢慢地就变成用来表达内容归属关系的界面元素，也就是我们经常看到的也就是我们经常看到的“主分类主分类一级分类一级分类二级分类二级分类三三 级分级分类类最终内容页面最终内容页面”这样的方式。但是一般正常的来讲目这样的方式。但是一般正常的来讲目录结构由录结构由3层结构组成。分别是首页层结构组成。分别是首页栏目页栏目页内容页。合理的内容页。合理的构建构建 目录结构可以让用户随时随地的找到自己所在的位置又能目录结构可以让用户随时随地的找到自己所在的位置又能保证栏目分类后的各个栏目

6、的权重不至于太分散。同时在许多保证栏目分类后的各个栏目的权重不至于太分散。同时在许多关于网站用户使用体验的调查报告中也得出超关于网站用户使用体验的调查报告中也得出超 过过3次点击访客次点击访客还没有找到需要的信息，访客就很大的可能性会离开网站。所还没有找到需要的信息，访客就很大的可能性会离开网站。所以，以，3层目录结构也是浏览体验的需要。层目录结构也是浏览体验的需要。网站优化网站优化面包屑导航作用面包屑导航作用v 1、让用户了解目前所处位置，以及当前页面在整个、让用户了解目前所处位置，以及当前页面在整个网站中的位置。网站中的位置。v 2、体现了网站的架构层级，能够帮助用户快速学习、体现了网站的

7、架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很和了解网站内容和组织方式，从而形成很 好的位置好的位置感感。v 3、提供返回各个层级的快速入口，方便用户操作。、提供返回各个层级的快速入口，方便用户操作。v 4、Google已经将面包屑导航整合到搜索结果里面，已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名称，因此优化面包屑导航每个层级的名称， 多使用关键多使用关键字，都可以优化字，都可以优化SEO。网站优化网站优化-WEB前端性能优化前端性能优化v1.减少减少HTTP请求请求vHTTPHTTP协议是无状态的应用层协议。意味着每次协议是无状态的应用层协议。意味

8、着每次HTTPHTTP请求都需要建立通信链路、进行数据传输，而在服务器请求都需要建立通信链路、进行数据传输，而在服务器端，每个端，每个HTTPHTTP都需要启动独立的线程去处理，这样通信和服务的开销都很昂贵，减少都需要启动独立的线程去处理，这样通信和服务的开销都很昂贵，减少HTTPHTTP请求的数目可有请求的数目可有效提高访问性能。效提高访问性能。 图片、图片、csscss、scriptscript、flashflash等等这些都会增加等等这些都会增加httphttp请求数，减少这些元素的数量就能减少响应时间。把多请求数，减少这些元素的数量就能减少响应时间。把多个个JSJS、CSSCSS在可能

9、的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSSCSS里，通过里，通过CSSCSS偏移响应鼠标点击操作，构造不同的偏移响应鼠标点击操作，构造不同的URLURL。v2.利用利用CDN技术技术vCDN （Content Distribute Network内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据。用户最近的地方，使用户以最快速度获取数据。 由于由于CDN部署在网络运营商的机房，这些运营商又是终端用户的

10、网络服务提供商，因此用户请求路由的第部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第一跳就到达了一跳就到达了CDN服务器，当服务器，当CDN中存在浏览器请求的资源时，从中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。回响应，加快用户访问速度，减少数据中心负载压力。 CDN能够缓存的一般是静态资源，如图片、文件、能够缓存的一般是静态资源，如图片、文件、CSS、Script脚本、静态网页等，但是这些文件的访脚本、静态网页等，但是这些文件的访问频率很高，将其缓存在问频率很高，

11、将其缓存在CDN可极大改善网页的打开速度。可极大改善网页的打开速度。 3.使用浏览器缓存使用浏览器缓存 对一个网站而言，静态资源文件的更新频率较低，而这些文件又几乎是每次对一个网站而言，静态资源文件的更新频率较低，而这些文件又几乎是每次HTTP请求需要的，如果将这请求需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能，通过设置些文件缓存在浏览器中，可以极好的改善性能，通过设置HTTP头中头中Cache-Control和和Expires的属性，的属性，可以设定浏览器缓存的时间。使用此策略时，应采用逐量更新的方法可以设定浏览器缓存的时间。使用此策略时，应采用逐量更新的方法网站优化网站优化-W

12、EB前端性能优化前端性能优化v4.启用压缩启用压缩v在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量，文本文件的压缩效率可达的数据量，文本文件的压缩效率可达80%以上，因此以上，因此html,css,javascript文件使用文件使用Gzip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，服务器资源不足的情况下要权衡考虑。压力，在通信带宽良好，服务器资源不足的情况下要权衡考虑。v5.把把CSS放在页面最上面放在页

13、面最上面 浏览器会在下载完全部浏览器会在下载完全部CSS之后才对整个页面进行渲染，因此最好的做法是将之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载放在页面最上面，让浏览器尽快下载CSS。 6.把把Javascript放在页面最下面放在页面最下面 浏览器在加载浏览器在加载Javascript后立即执行，有时会阻塞整个页面，造成页面显示缓后立即执行，有时会阻塞整个页面，造成页面显示缓慢，因此慢，因此Javascript最好放在页面最下面，但如果页面解析时就需要用到最好放在页面最下面，但如果页面解析时就需要用到Javascript,这时放在底部就不合适了。这时放在

14、底部就不合适了。v7.避免避免CSS 表达式表达式vCSS表达式很可怕，这个只被表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个网站优化网站优化-WEB前端性能优化前端性能优化v8.将将JS和和CSS外链外链v前面讲到了缓存这个事情，一些较为公用的前面讲到了缓存这个事情，一些较为公用的JS和和CSS，我们可以使用外链的形式，譬如我，我们可以使用外链的形式，譬如我就是从就是从Google外链来的外链来的J

15、query文件，如果我的浏览者在浏览别的使用了这个外链文件的文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！v9. 减少减少DNS查找查找v貌似是要减少网站从外部调用资源，我的貌似是要减少网站从外部调用资源，我的Google分析和分析和picasa的外链图片都算在里面了。的外链图片都算在里面了。v10.减小减小JS和和CSS的体积的体积v写写JS和和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩都是有技巧的

16、，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。写方式等等，当然也有不少工具也能够帮你实现这一点。v11.避免重定向避免重定向v再写入链接时，虽然再写入链接时，虽然”http:/www. xx. com”和和”http:/www. xx. com/” 仅仅有一个最后的有一个最后的”/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在进行跳转，这个要自己注意，也可以在Apache里用里用Alias 或者或者mod_rewrite或

17、者或者DirectorySlash解决。解决。网站优化网站优化-WEB前端性能优化前端性能优化v12. 删除重复脚本删除重复脚本v重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。v13. 配置配置ETagsv搞不清楚咋回事，总之我是在搞不清楚咋回事，总之我是在. htaccess里把它删除了。里把它删除了。v14. 缓存缓存AjaxvAjax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率

18、。效率。v15. 尽早的释放缓冲尽早的释放缓冲v当用户进行页面请求时，服务器端需要花费当用户进行页面请求时，服务器端需要花费200到到500毫秒时间来拼合毫秒时间来拼合HTML，将写在，将写在head与与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。高效率。v16. 用用GET方式进行方式进行AJAX请求请求vGet 方法和服务器只有一次交互（发送数据），而方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。要两次（发送头部再发送数据）。网站优化网站优化-WEB前

19、端性能优化前端性能优化v18. 预加载组件预加载组件v提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见响应，参见Google首页上的首页上的CSS sprites应用。应用。v19. 减少减少DOM元素数量元素数量v复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。好的前端的必备条件。v20. 跨域分离组件跨域分离组件v页面组件多个来源可以增大你的平行下

20、载量，但注意不要过多，超过页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上个域名会引起上面说到的面说到的DNS查找浪费。查找浪费。v21. 减少减少iframe数量数量v需要更有效的利用需要更有效的利用 ifames。iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的缺点：即使为空也会有较大资源消耗，会阻止页面的onload网站优化网站优化-WEB前端性能优化前端性能优化v22. 不要出现不要出现404页面页面v站点

21、本身里（非搜索结果）出现站点本身里（非搜索结果）出现404页面，无意义的页面，无意义的404页面会影响用户体验并且会消耗页面会影响用户体验并且会消耗服务器资源。服务器资源。v23. 减少减少Cookie传输传输 一方面，一方面，Cookie包含在每次的请求和响应中，太大的包含在每次的请求和响应中，太大的Cookie会严重影响数据传输，尽量会严重影响数据传输，尽量减少减少Cookie中传输的数据量，另一方面，对于某些静态资源的访问，如中传输的数据量，另一方面，对于某些静态资源的访问，如CSS,Script等，等，发送发送Cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发

22、送没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送Cookie,减少减少Cookie传输的次数。传输的次数。v24. 对组件使用无对组件使用无Cookie的域名的域名v对静态组件的对静态组件的Cookie读取是一种浪费，使用另一个无读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件的域名来存放你的静态组件式一个好方法，或者也可以在式一个好方法，或者也可以在Cookie中只存放带中只存放带www的域名。的域名。v25. 减少减少DOM的访问次数的访问次数vJS访问访问DOM是很慢的，尽量不要用是很慢的，尽量不要用JS来设置页面布局。来设置页面布局。26. 开发灵活

23、的事件处理句柄开发灵活的事件处理句柄vDOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个事件工具有一个 onAvailable 方法可以帮助你灵活的设置方法可以帮助你灵活的设置DOM事件句柄事件句柄网站优化网站优化-WEB前端性能优化前端性能优化v27. 使用使用而非而非 importv在在IE中使用中使用import就和在页面底部用就和在页面底部用一样，我们前面说要把一样，我们前面说要把放顶放顶部的。部的。v28. 避免过滤器的使用避免过滤器的使用v如果需要如果需要Alpha透明，不要使用透明，不要使用Alpha

24、ImageLoader，它效率低下而且只对，它效率低下而且只对IE6及以及以下的版本适用，用下的版本适用，用PNG8图片。如果你非要使用，加上图片。如果你非要使用，加上_filter以免影响以免影响IE7+用户。用户。v29. 优化图片优化图片v将你的将你的GIF转为转为PNG8会是个减小体积的好办法，另外有很多方法处理你的会是个减小体积的好办法，另外有很多方法处理你的JPG及及PNG图图片以达到优化效果。片以达到优化效果。v30. 优化优化CSS Spritesv在在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小中竖直并尽量紧凑的排列图片，尽量将颜色相

25、似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。图片本身的大小及提高页面图片显示速度。网站优化网站优化-WEB前端性能优化前端性能优化v31. 不要在不要在HTML中缩放图片中缩放图片v图片要用多大的就用多大的，图片要用多大的就用多大的，1000X1000的图片被的图片被width=”100 height=”100以以后，本身的后，本身的KB数是不会减少的。数是不会减少的。v32. 缩小缩小favicon. ico的大小并缓存它的大小并缓存它v站点的浏览器站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K

26、以下。以下。v33. 保证组件在保证组件在25K以下以下viPhone不能缓存不能缓存25K以上的组件，并且这还是要在被压缩前。以上的组件，并且这还是要在被压缩前。v34. 将组件打包进一个多部分的文档中将组件打包进一个多部分的文档中v就好像在邮件中加入附件一样，一个就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支请求就够了，但是这一技术需要确保你的代理支持，持，iPhone就不支持。就不支持。Web前端技术前端技术HTML5HTML5万维网的核心语言、标准通用标记语言下的一个应用万维网的核心语言、标准通用标记语言下的一个应用超文本标超文本标记语言记语言（HT

27、ML-Hypertext Marked Language）的第五次重大）的第五次重大修改（这是一项正在进行中的一个草案，修改（这是一项正在进行中的一个草案，W3C计划在计划在2014年完成年完成HTML5标准标准。 在移动设备开发在移动设备开发HTML5应用只有两种方法，要不就是全使用应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用的语法，要不就是仅使用JavaScript引擎。引擎。 HTML5手机应用的最大优势就是可以在网页上直接调试和修改。手机应用的最大优势就是可以在网页上直接调试和修改。HTML5 中国中国 / 支持支持HTML

28、5的浏览器的浏览器HTML5的新特性的新特性v 用于绘画的用于绘画的canvas元素元素v 用于媒介回放的用于媒介回放的video和和audio元素元素v 对本地离线存储的更好的支持对本地离线存储的更好的支持v 新的特殊内容元素，比如新的特殊内容元素，比如article,footer,header,nav,sectionv 新的表单控件，比如新的表单控件，比如calendar,date,time,email,url,searchHTML5对于视频对于视频,音频的支持音频的支持vWeb上的视频上的视频,音频音频v大多数的视频大多数的视频,音频是通过插件，比如音频是通过插件，比如FLASH来显示的

29、，然而，并非所有的浏览器都拥有来显示的，然而，并非所有的浏览器都拥有同样的插件。同样的插件。HTML5规定了一种通过规定了一种通过video，audio元素来包含视频的标准方法。元素来包含视频的标准方法。v视频格式视频格式v当前，当前，video元素技术三种视频格式元素技术三种视频格式,vOgg,MPEG4,WebMv三种音频格式三种音频格式vOgg Vorbis,MP3,Wavvvvvv视频转化工具视频转化工具v Miro Video Converter：主要工具，此开放源代码转换器有：主要工具，此开放源代码转换器有 Mac 和和 Windows 版本，可以将几乎所有视频源转换为所有版本，可

30、以将几乎所有视频源转换为所有可能要使用的可能要使用的 HTML5 格式，以及几个其他设备和平台特定的格式，以及几个其他设备和平台特定的格式。格式。v Handbrake：另一种用于：另一种用于 Mac 和和 Windows（和（和 Linux）的开放源代码转换器，的开放源代码转换器，Handbrake 是专门转换为是专门转换为 H.264 的的出色工具。出色工具。v MPEG Streamclip ()：MPEG Streamclip 虽然是不开放虽然是不开放源代码，但源代码，但Mac 和和 Windows 用户可以免费使用。它也处理用户可以免费使用。它也处理 lH.264，同时它也可以转换为

31、，同时它也可以转换为 HTML5 规范之外的许多其他规范之外的许多其他有用格式。有用格式。v Firefogg：一种专业工具，：一种专业工具，Firefogg 是一个是一个 Firefox 扩展，扩展，只能将视频转换为只能将视频转换为 Ogg 的格式，并因此得名。要使用它，需的格式，并因此得名。要使用它，需要先下载要先下载 Firefox，然后再安装扩展。，然后再安装扩展。Web前端技术前端技术-CSS3 CSS即层叠样式表（即层叠样式表（Cascading StyleSheet）。）。 在网页制作时采在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和用层叠样式表技术，

32、可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是是CSS技术的升级版本，技术的升级版本，CSS3语言开发是朝着模块化发展的。语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：解为一些小的模块，

33、更多新的模块也被加入进来。这些模块包括： 盒盒子模型、列表模块、超链接方式子模型、列表模块、超链接方式 、语言模块语言模块 、背景和边框背景和边框 、文字特文字特效效 、多栏布局等多栏布局等。CSS3 和和 Media Query CSS3和和Media Query的配合当下就能提供给响应式的配合当下就能提供给响应式Web设设计良好的支持，满足用户在计良好的支持，满足用户在open web的全新环境下为跨屏幕，的全新环境下为跨屏幕，跨设备的内容浏览需求。跨设备的内容浏览需求。 CSS3是在是在CSS2.1定义规范核心上的改动，目前定义规范核心上的改动，目前CSS3最终的最终的specifica

34、tion还未最终定稿，但是这并不妨碍我们使用还未最终定稿，但是这并不妨碍我们使用CSS3来支持响应式来支持响应式Web设计的相关工作。使用设计的相关工作。使用CSS3时，要时，要注意由于目前市场占有率仍然很高的注意由于目前市场占有率仍然很高的IE6,7,8这三个版本会无这三个版本会无法支持法支持CSS3的很多新特性，所以，我们应当谨慎使用使用的很多新特性，所以，我们应当谨慎使用使用CSS3的的Experimental特性，而应该考虑使用对特性，而应该考虑使用对CSS2.1向向下兼容的下兼容的CSS特性。特性。 CSS3CSS3 由于由于CSS3标准还未完全订下来，所以各种内核的浏标准还未完全订

35、下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀，在各自标准前加了一个前缀，v 如：如：-ms- 是是IE10浏览器浏览器v -moz- 是是firefox火狐火狐浏览器浏览器v -webikt- 是是chrome谷歌谷歌浏览器浏览器v -o- 用于苹果机上的浏览器用于苹果机上的浏览器 CSS3新属性新属性 -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px

36、 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929; 4个参数个参数:x-offset x 轴偏移轴偏移/y-offset y轴偏移轴偏移 blur 模糊值模糊值 / color of shadow 阴影颜色阴影颜色 h1 text-shadow: 0 1px 0 white; color: #292929; CSS3新属性新属性 .box /* fallback */ 旧浏览器，如旧浏览器，如IE7 background: url(image/path.jpg) no-repe

37、at; /* modern browsers */ background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; body background: url(path/to/image.jpg) no-repeat; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; .box -o-t

38、ext-overflow: ellipsis; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border: 1px solid black; width: 400px; padding: 20px; cursor: pointer; CSS3新属性新属性The HTML Hover Over Me Hover Over Me Hover Over Me Hover Over Me The CSS ul a -webkit-transition: padding .4s; -moz-transition: paddin

39、g .4s; -o-transition: padding .4s; transition: padding .4s; a:hover padding-left: 6px; 网站设计网站设计演示地址：演示地址：http:/ Html5+Css3 在移动在移动web应用开发上的概念应用开发上的概念“Responsive Web Design - 响应式响应式Web设计设计”。 通过使用通过使用HTML5和和CSS3的合理搭配，使得的合理搭配，使得Web内容可以在内容可以在很多种不同的设备屏幕上以自动适配的方式出现在浏览器内，很多种不同的设备屏幕上以自动适配的方式出现在浏览器内，从而给用户带来更好

40、的体验。响应式从而给用户带来更好的体验。响应式web设计在更多前端开发设计在更多前端开发者的认知中被广义的认定为流畅的设计，弹性的布局设计，易者的认知中被广义的认定为流畅的设计，弹性的布局设计，易于改变的布局设计，可自动适配的布局设计，跨设备跨平台的于改变的布局设计，可自动适配的布局设计，跨设备跨平台的web设计等等。设计等等。 响应式设计的优点响应式设计的优点v 一个网站：适应所有设备，他更容易管理。一个网站：适应所有设备，他更容易管理。v 一个一个URL：让你的用户在移动设备上更容易找到，而且不需要任何的：让你的用户在移动设备上更容易找到，而且不需要任何的重定向，这在较慢的网速下特别的有用

41、。重定向，这在较慢的网速下特别的有用。v 容易做搜索引擎优化：不需要为移动设备创建特定的内容，可以让移容易做搜索引擎优化：不需要为移动设备创建特定的内容，可以让移动设备使用桌面网站的搜索引擎优化的好处。动设备使用桌面网站的搜索引擎优化的好处。v 易于营销：网站在移动设备上显示，对于营销部门来说不需要增加额易于营销：网站在移动设备上显示，对于营销部门来说不需要增加额外的工作量。外的工作量。v 成本低：简单的数学运算，一个网站比两个网站要便宜吧。成本低：简单的数学运算，一个网站比两个网站要便宜吧。响应式设计的优点响应式设计的优点 没有经过响应式设计考量的网站，在移动设备的浏览器上虽然没有经过响应式

42、设计考量的网站，在移动设备的浏览器上虽然可以缩小整个网站的版面，维持原有可以缩小整个网站的版面，维持原有PC屏幕适配的排版布局，屏幕适配的排版布局，但是这样的网页内容最大的一个问题是，通过手机或但是这样的网页内容最大的一个问题是，通过手机或pad浏览浏览器浏览网站的内容，会不间歇的使用缩小和放大操作来缩放内器浏览网站的内容，会不间歇的使用缩小和放大操作来缩放内容或不断的上下左右调整视图区域内的内容以可供浏览。而这容或不断的上下左右调整视图区域内的内容以可供浏览。而这样的频繁操作所造成的负面影响是巨大的，那就是用户会变的样的频繁操作所造成的负面影响是巨大的，那就是用户会变的抓狂，且不会长时间的浏

43、览这样的抓狂，且不会长时间的浏览这样的Web站点，造成网站用户流站点，造成网站用户流失率不断加大。失率不断加大。响应式设计的缺点响应式设计的缺点v 一个网站：让一个网站适配所有网站，对于你来说很容易，但不一定一个网站：让一个网站适配所有网站，对于你来说很容易，但不一定适合你的用户。你需要在同一个页面上展示不同的侧重点，以便使用适合你的用户。你需要在同一个页面上展示不同的侧重点，以便使用该平台的最大优势，最大限度的提高你的转化率。该平台的最大优势，最大限度的提高你的转化率。v 技术：响应式设计他是一种较新的技术，在一些老的设备和浏览器中技术：响应式设计他是一种较新的技术，在一些老的设备和浏览器中

44、加载页面速度过慢，甚至是完全不支持。加载页面速度过慢，甚至是完全不支持。v 用户体验：移动端和用户体验：移动端和PC机上的用户体验是完全不同的。所以一个网，机上的用户体验是完全不同的。所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的甚至是响应式设计，在两个平台上都会损害您整体的UX。如果你试图。如果你试图使用相同的界面来满足移动和桌面的两个平台的用户使用，到最后可使用相同的界面来满足移动和桌面的两个平台的用户使用，到最后可能谁都无法满足。能谁都无法满足。开发工具：开发工具：Adobe Dreamweaver CS6，这个老牌的工具最新的版本完美集成了JQueryMobile框架和一个

45、非常友善的Fluid Grid Layout可视化工具，可以完全应对响应式Web设计的内容开发。 Adobe Muse提供给网站架构师和前端交互设计师一个可视化的响应式Web设计的应用界面，可以在网站的蓝图规划设计阶段就纳入响应式Web设计的考量。Muse的口号就是让Web设计师从代码中彻底解脱出来。 开发工具：开发工具：Adobe Edge Code Preview. 前端代码编辑器，通过它，前前端代码编辑器，通过它，前端开发者能够快速地编写端开发者能够快速地编写HTML，CSS和和JavaScript代码。代码。目前它是一个轻量级，支持代码高亮，结构化浏览的不错选择，目前它是一个轻量级，支

46、持代码高亮，结构化浏览的不错选择，由于它基于开源项目改造，所以，开发者能够为它打造很多定由于它基于开源项目改造，所以，开发者能够为它打造很多定制化的插件。制化的插件。WebStorm 是是jetbrains公司旗下一款公司旗下一款JavaScript 开发工具。开发工具。 Firebug 是是firefox下的一个插件下的一个插件,能够调试所有网站语言，如能够调试所有网站语言，如Html,Css,Javascript，使用起来非常方便，而且在各种浏，使用起来非常方便，而且在各种浏览器下都能使用（览器下都能使用（IE,Firefox,Opera, Safari）Sublime Text是一个代码

47、编辑器是一个代码编辑器,同时支持同时支持Windows、Linux、Mac OS X等操作系统等操作系统,拥有许多丰富扩展功能的插件。拥有许多丰富扩展功能的插件。开发工具：开发工具：响应式界面设计响应式界面设计响应式框架响应式框架在固定布局中，网页的宽度是必须指定为一个像素值，一般设为在固定布局中，网页的宽度是必须指定为一个像素值，一般设为960像素。在像素。在过去，开发人员发现过去，开发人员发现960像素是最适合作为网格布局的宽度，因为像素是最适合作为网格布局的宽度，因为960可以整除可以整除3，4，5，6，8，10，12和和15。流式布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不

48、同。固定流式布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流式布局使用的是百分比。宽度布局使用的是像素，但是流式布局使用的是百分比。弹性布局跟流布局很相像，主要不同是大小单位。弹性布局的大小单位不是像弹性布局跟流布局很相像，主要不同是大小单位。弹性布局的大小单位不是像素或者百分比，而是素或者百分比，而是em 。混合布局是上面介绍的两种或者更多布局类型的组合。混合布局是上面介绍的两种或者更多布局类型的组合。v 流式流式960网格布局网格布局vBlueprint网格布局网格布局v基于三分法的流式布局基于三分法的流式布局v 响应式响应式960网格框架网格框

49、架GumbyText3响应式框架响应式框架v Bootstrap中文网中文网 http:/ 拼图前端框架拼图前端框架 http:/ Media Query是响应式是响应式Web设计开发工作中，另外一个要必设计开发工作中，另外一个要必须掌握的技术，目前须掌握的技术，目前Media Query在浏览器上的兼容度要高在浏览器上的兼容度要高很多，很多，Firefox,Safari,Chrome,Opera,iOS Safari,IE等等主流浏览器都能很好的支持主流浏览器都能很好的支持Media Query。CSS3 Media Query模块是目前在特定移动设备上开发模块是目前在特定移动设备上开发We

50、b应用样式所必需应用样式所必需的技术，比如如何访问移动设备屏幕可视窗口的宽度的技术，比如如何访问移动设备屏幕可视窗口的宽度(viewport width)属性，开发者必须使用属性，开发者必须使用CSS3 Media Query。Media Query从技术成份上分析，其组成是比较简从技术成份上分析，其组成是比较简单的，是由一个媒体类型和若干个检测判断设备媒体功能的表单的，是由一个媒体类型和若干个检测判断设备媒体功能的表达式所组成，对应不同的设备，通过执行达式所组成，对应不同的设备，通过执行Media Query的判的判断检测来实现对特定属性的准确访问。断检测来实现对特定属性的准确访问。响应式布局响应式布局 允许网页宽度自动调整允许网页宽度自动调整 在网页代码的头部，加入一行在网页代码的头部，加入一行viewport元标签元标签 viewport是网页默认的宽度和高度，网页宽度默认是网页默认的宽度和高度，网页宽度默认等于屏幕宽度（等于屏幕宽度（width=device-width),原始缩放原始缩放比例为比例为1.0，即网页初始大小占屏幕面积的，即网页初始大小占屏幕面积的100%响应式