出版社: 电子工业出版社
副标题: 应用Web标准进行设计
原作名: Designing with Web Standards (Third Edition)
译者: 傅捷 / 祝军 / 李宏
出版年: 2011-3
页数: 358
定价: 59.00元
装帧: 平装
ISBN: 9787121127755
内容简介 · · · · · ·
《网站重构:应用Web标准进行设计(第3版)》内容简介:畅销书作家、设计师、网页标准教父jeffrey zeldman再次更新了他经典的、颠覆行业的指南书。这已经是《网站重构:应用Web标准进行设计(第3版)》的第3版了,此次更新基本涵盖了随着环境和技术的变化,web标准所面临的挑战以及因此而发生的改善。第3版让基于标准的设计思想更加清晰,更加易于理解,帮助你在这个领域中保持聪明和领先。
一如既往,《网站重构:应用Web标准进行设计(第3版)》提供了更多明确的见解和新的例子,来阐述基于标准的设计的核心思想,为你的网站最终确定一个合理的设计与开发方法。
与前两版不同的是,在第3版,除了有很多的“why”来提出问题,也提供了大量的“how”来解决问题。另外,在写作方法上作者力图用诙谐的、有吸引力的写作风格,使复杂的技术更易于理解消化,帮助你轻松创...
《网站重构:应用Web标准进行设计(第3版)》内容简介:畅销书作家、设计师、网页标准教父jeffrey zeldman再次更新了他经典的、颠覆行业的指南书。这已经是《网站重构:应用Web标准进行设计(第3版)》的第3版了,此次更新基本涵盖了随着环境和技术的变化,web标准所面临的挑战以及因此而发生的改善。第3版让基于标准的设计思想更加清晰,更加易于理解,帮助你在这个领域中保持聪明和领先。
一如既往,《网站重构:应用Web标准进行设计(第3版)》提供了更多明确的见解和新的例子,来阐述基于标准的设计的核心思想,为你的网站最终确定一个合理的设计与开发方法。
与前两版不同的是,在第3版,除了有很多的“why”来提出问题,也提供了大量的“how”来解决问题。另外,在写作方法上作者力图用诙谐的、有吸引力的写作风格,使复杂的技术更易于理解消化,帮助你轻松创建一个访问快速、低成本维护和开发、更多用户的网站,帮助你用新技术使css布局适应多个浏览器,使网站内容更容易被搜索和访问到。
作者简介 · · · · · ·
Jeffrey Zeldman被商业周刊誉为“Web标准之王”的Jeffrey Zeldman是最早的网页设计师、blog作者、网络独立作家和最早的网页设计教师之一。
在1998年,他和其他成员共同发起并创建了Web标准草根联盟网页标准计划小组“The Web Standards Project”(从1999年到2002年一直主持该组织的工作),致力于推动浏览器遵循Web标准,发起7Web标准运动。
Jeffrey已经出版了两本书,除本书外,另一本是“Taking Your Talent to the Web”,这是一本为想转型成为网页设计师和美术指导(Art Director)的人而写的指南书(New Riders出版社,2001年,现在可以免费在这个网址下载)。他同时还担任SXSW互动艺术节和Rosenfeld Media(出版公司)的咨询顾问,...
Jeffrey Zeldman被商业周刊誉为“Web标准之王”的Jeffrey Zeldman是最早的网页设计师、blog作者、网络独立作家和最早的网页设计教师之一。
在1998年,他和其他成员共同发起并创建了Web标准草根联盟网页标准计划小组“The Web Standards Project”(从1999年到2002年一直主持该组织的工作),致力于推动浏览器遵循Web标准,发起7Web标准运动。
Jeffrey已经出版了两本书,除本书外,另一本是“Taking Your Talent to the Web”,这是一本为想转型成为网页设计师和美术指导(Art Director)的人而写的指南书(New Riders出版社,2001年,现在可以免费在这个网址下载)。他同时还担任SXSW互动艺术节和Rosenfeld Media(出版公司)的咨询顾问,也是Deck公司的创始人,Deck是一家提供创意、网页和专业设计的网
Ethan Marcotte是一个多才多艺的用户体验设计师和开发者,他的工作展示了高质量代码和美观界面的完美结合。在加入Happy Cog之前,Ethan Marcotte为纽约杂志(New York Magazine)、哈佛大学以及世界互联网组织W3C等客户服务。
Ethan也是多个出版社的供稿作者,包括手写CSS专题(New Riders 2009)、Web标准创造专题(friends of ED,2007),以及专业CSS专题(Wrox,2005)。Ethan还是一个有丰富经验的技术编辑,参与编辑的书包括“Bulletproof Web Desert”(New Riders,2005),以及“Designing With Web Standards”第2版(New Riders,2006)。
目录 · · · · · ·
第0章 在开始阅读之前
0.1 终止不断“改版一淘汰”的怪圈
0.2 不要死读书渐进的标准,而不是一套不变的硬性规定
0.3 一些重要的定义
0.4 一种方法不能解决所有问题
· · · · · · (更多)
第0章 在开始阅读之前
0.1 终止不断“改版一淘汰”的怪圈
0.2 不要死读书渐进的标准,而不是一套不变的硬性规定
0.3 一些重要的定义
0.4 一种方法不能解决所有问题
0.5 欢迎优胜团队
第1章 99.9%的网站已经过时了
1.1 现代浏览器和Web标准
1.2 新版本新代码
1.3 多版本问题
1.4 垃圾代码来了错误标记:最初,个人环境是无约束的
1.5 代码分支可能影响你网站的长期健康
1.6 臃肿标记的隐藏成本
1.7 向前兼容(backward-compatibility)是一个谎言屏蔽用户不利于业务发展
1.8 治疗
第2章 根据标准设计和建造
2.1 历经磨难
2.2 无标准时代的设计成本
2.3 时髦的站点,古老的方法
2.4 Web标准三剑客
2.4.1 结构
2.4.2 表现
2.4.3 行为
2.5 实际应用
2.6 Web标准组织:可移植性一个文档服务所有需求
2.7 “AListApart”:一个页面,多种显示方式
2.7.1 屏幕以外的设计
2.7.2 节约时间和成本,增加扩展性
2.8 我们去向何方
第3章 温和劝导
第4章 Web标准的未来
4.1 可发现性、聚合、博客、播客、长尾、Ajax(以及其他使标准成功的理由)
4.1.1 通用语言XMI
4.1.2 发明的源泉
4.1.3 标准的未来
4.2 HTML5的诞生
4.2.1 IE浏览器和Web标准
4.2.2 创作和出版工具
第2部分
第5章 现代标记语言
5.1 垃圾代码标记的可耻秘密
5.1.1 重新阐述了什么
5.1.2 执行概要
5.1.3 XHTML2为你我而生
5.2 5个坚持用XHTML的原因
5.3 5个使用XHTML1的原因
5.4 不使用XHTML1的原因
第6章 XHTML和语义标记
6.1 转换到XHTML:规则简单,容易上手
6.1.1 用正确的文档类型(DOCTYPE)和命名空间(Namespace)
6.1.2 哪一种DOCTYPE适合你
6.1.3 严格与过渡:我们这个时代的大战役
6.1.4 紧随DOCTYPE之后的是Namespace
6.1.5 声明你的字符集
6.1.6 用小写字母书写所有的标签
6.1.7 给所有属性值加引号
6.1.8 所有属性都需要值
6.1.9 关闭所有的标签
……
第7章 HTML5:新的希望
第8章 更严格稳健的页面保证:结构和语义
第9章 css入门
第10章 css布局:标记、盒模型和浮动
第11章 深入浏览器之一:doctype 切换和标准模式
第12章 深入浏览器之二:bug、变通办法和css3带来的一线希望
第13章 深入浏览器之三:文字版式
第14章 可访问性:web标准的灵魂
第15章 使用基于dom的脚本语言
第16章 一个网站重构的实例
第17章 nymag.com:简单的标准,迷人的界面
· · · · · · (收起)
喜欢读"网站重构(第3版)"的人也喜欢的电子书 · · · · · ·
喜欢读"网站重构(第3版)"的人也喜欢 · · · · · ·
网站重构(第3版)的话题 · · · · · · ( 全部 条 )



网站重构(第3版)的书评 · · · · · · ( 全部 50 条 )

Web观念的大转变——未来趋势

标准的思想使web开发闪耀出光芒

让我对网页设计又充满了热情


现在网页标准已经是很普遍了
> 更多书评50篇
-
CSS Bug 2:【IE6上】PNG图片的透明背景问题 这个问题其实包括两个方面,一是PNG图片作为背景情况下的图片透明度问题,二是作为图片的透明度问题,即似乎用IMG标签的PNG图片的透明度。 问题一:PNG图片作为背景时的透明问题 解决办法: 如果希望使用png格式图片作为DOM元素的背景,那么就可以使用滤镜来加载png图片 /代码内容已省略/ HTML代码: ...
2011-05-12 11:59 1人喜欢
CSS Bug 2:【IE6上】PNG图片的透明背景问题 这个问题其实包括两个方面,一是PNG图片作为背景情况下的图片透明度问题,二是作为图片的透明度问题,即似乎用IMG标签的PNG图片的透明度。问题一:PNG图片作为背景时的透明问题解决办法:如果希望使用png格式图片作为DOM元素的背景,那么就可以使用滤镜来加载png图片.png{ background: url(/angel.png) no-repeat !important; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="angel.png"); background:none; width:100px; height:100px; }
HTML代码:<div class="png">背景PNG透明<div>
解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。以上代码使用了一些IE的Hack,IE7,IE8,Firefox直接应用background,IE6则会应用filter! 该特性的详细语法如下:
也可以使用hack的方式整理一下代码,方法如下:语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) 属性: enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。 image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale : 缩放图片以适应对象的尺寸边界。 src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。 说明: 在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。 PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
#div1 { height: 600px; width: 260px; padding: 20px; background-repeat: repeat; } /* for ie7 ff*/ html>body #div1 { background:url(../images/menu1.png) no-repeat; } /* for ie6 */ * #div1 { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop'); }
需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。 问题二:PNG作为插入图片的透明度问题解决办法1:使用脚本function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 }; }; }; if(navigator.userAgent.indexOf("MSIE")>-1) { window.attachEvent("onload", correctPNG); };
解决办法2:使用css express+一张透明小图片.mypng img { azimuth: expression( this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true); }
HTML代码:<div class="mypng"> <img src="icon_face_07.png" width="30" height="30" /> <img src="icon_face_10.png" width="30" height="30" /> <img src="icon_face_08.png" width="30" height="30" /> </div>
注意,要准备一个透明的小图片transparent.gif,大小不限。另外,还有2个重要的库或者插件不得不提:1. DD_belatedPNG库,可以很好的解决png透明问题。 http://www.dillerdesign.com/experiment/DD_belatedPNG/ 2.jquery.pngfix.js插件,简单易用,需要jQuery库支持。 http://jquery.andreaseberhard.de/pngFix/回应 2011-05-12 11:59
在哪儿借这本书 · · · · · ·
这本书的其他版本 · · · · · · ( 全部6 )
- Peachpit Press版 2006-07-06 / 38人读过
- 电子工业出版社版 2005-4 / 1505人读过
- 电子工业出版社版 2008/04/01 / 180人读过
- New Riders Press版 2009-10-25 / 5人读过
以下豆列推荐 · · · · · · ( 全部 )
- 交互设计师养成书单 (LimboMinaïs)
- 设计师全面阅读清单 (绝缘儿)
- 专业书籍 (麦子羊)
- 编程思想 (liuyunclouder)
- 设计ToReadList by 20150116 ()
谁读这本书?
二手市场
订阅关于网站重构(第3版)的评论:
feed: rss 2.0
0 有用 御风 2012-08-05
本书最大的一个特点是在劝导读者使用互联标准来构建网站,内容居多的还是网页设计方面的知识。虽然有部分内容对于我这个刚刚了解网页设计的人来说还太专业,不过这本书提到各种新技术,都具有很强的吸引力。还有本书提到的参考网站很多,这对获得最新专业知识和工具都很有帮助。
0 有用 阿不思 2012-07-06
囫囵吞枣地看了一遍,了解了大致思想。但是基于技术的部分都没来得及细看,没有同时在操作看了也白看。
0 有用 智. 2011-06-30
真得不错
0 有用 yuan 2012-05-20
有些地方翻译实在别扭。any 翻译成“任意”和“任何”区别还是很大的吧?
0 有用 寻找白青薠 2012-09-06
两天之内一口气读完了,才接触web标准设计,对它有了个概念了吧,还不错,好好干
1 有用 玉米同学 2015-10-09
知其然然后知其所以然,我觉得要想系统地学习web前端,这本书必备。
0 有用 赖涛儿 2015-04-20
哇哇!好可爱的一本书啊!
0 有用 yuanyuanVivian 2013-05-22
还行,但是搬出这么多老掉牙的东西 很多其实都用不上了。可以当作常识读物,翻过就算了。
0 有用 Double Seven 2013-01-31
读过第1版,但是被同事借走后未归还。绝对是洗脑书啊~看完后,对网站重构充满信念~
0 有用 寻找白青薠 2012-09-06
两天之内一口气读完了,才接触web标准设计,对它有了个概念了吧,还不错,好好干