Contenu connexe Similaire à 网站重构&Web标准设计第二版 Similaire à 网站重构&Web标准设计第二版 (20) 网站重构&Web标准设计第二版7. 思想是工具的灵魂 思想是工具的灵魂,就像我们的计算机软件是计算机硬件的灵魂一样,没有了软件,计算机的硬件即使再好也没有任何作用,如同废铁,所以我们在学习的时候要明确我们的最终目是什么,我们要学的是这门技术的思想而不是去重视实现这门技术的一种应用工具。当然思想与工具都很重要,但是他们最大的区别在于,学会了思想我们可以选择很多不同的工具来实现这门技术,例如我们用Dreamweaver,EditPlus,甚至记事本等都可以实现我们想要的技术,工具最大的作用在于可以提高我们的工作效率,这是工具最重要的作用。所以我们不要走错的方向。 9. David Siegel 印刷专家 有人说我毁掉了Web,我回答他们,的确如此。我毁掉了Web是因为我把巧克力和花生酱混合在一起却再也不能把他们分开。我犯下了把结构跟表现混合在一起的错误。 David Siegel 10. David Siegel 印刷专家 他是一个印刷专家。那麽在1997年的时候,David Siegel改变了web,他自己研究出了一项网页布局技术,利用html中的的<table>元素和gif图片缝合在一起了,创造了表格布局技术,之后它就犹如一头猛兽泛滥起来。于是乎许多设计师们对他在web上复制传统印刷媒体布局方法感到欣喜若狂,从此以后数百万的页面把结构跟表现混杂在一起。在这之后David Siegel在内的很多人,很快提出反对采用表格进行布局的言论,但我们知道猛兽一旦释放就很难在关起来,加上当时没有有效的方法解决这个问题,猛兽在我们身边自由的徘徊,甚至到现在。我们可以看看互联网上仍然有很多网站都是采用的传统方式布局。 18. 信息跨平台的可用性 由于采用结构跟表现分离的技术,结构与表现各自为一个独立的个体,这样可以使信息实现跨平台,我们可以针对不同的设备进行不同的样式进行替换。从而实现一个结构文档在不用的平台设备上实现不用样式的表现,以适应不用操作平台的需要,达到文档一次建立,随处使用的目的。 32. Netscape and Internet Explorer 早在1997年,有一个通用的惯例,Netscape浏览器使用Javascript,IE使用Jscript(一种类似于Javasrcipt的脚本语言)。Javasrcipt只能运行在Netscape,而微软的ActiveX和Jscript只能运行在IE。只能为不同的浏览器采用不同的代码去适应,这些事情是为3.0版本浏览器做的,1997年下半年的时候,Netscape和IE都推出了4.0版本浏览器,他们各自吹嘘自己的浏览器有强大的Dhtml(动态的html),但他们的浏览器完全不兼容,更不用说不知名的浏览器了,而且Netscape和IE跟他们3.0的版本也无法兼容,想让自己的网站在几个不同版本的浏览器中同时使用的话就要做几个不同的版本,每个功能都要做几个不同的版本去适应不同的浏览器,开发成本至少增加了25%;所以一些开发者限制他们的网站只适应其中一个版本的浏览器。而且网站随时面临着过时的命运和被淘汰的怪圈。 35. 主流浏览器内核 Trident: IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE7。 Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等)。Geckos: Netcape6开始采用的内核,后来的Mozilla FireFox也采用了该内核,Geckos的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。Presto: 目前Opera采用的内核,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。Webkit:Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软 件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以 Safari浏览器还是比较安全的浏览器。(Google的Chrome浏览器也是采用Webkit) 37. Mozilla Mozilla基金会简 称Mozilla(缩写MF或MoFo,如图为Mozilla 基金会的注册标识),是为支持和领导开源的Mozilla项目而设立的一个非营利组织。该组织制定管理开发政策,经营关键基础组织并管理商标及其他知识产 权。它拥有一个称作Mozilla公司的应课税子公司,雇佣了一些Mozilla开发人员并协调Mozilla Firefox网页浏览器以及Mozilla Thunderbird电子邮件客户端的发行版。Mozilla基金会位于美国加利福尼亚州。Mozilla基金会把自己描述为“一个致力于在互联网领域提供多样化选择和创新的公益组织”。 48. EditPlus 文件配置界面设置 定制工具自动换行 矩形选取大小写转换,反转大小写,首字母大写 文件只读快速切换(F12,F11) 配对标签,配对符号代码折叠 注释浏览器 Make(定义是F9,切换是F4)查找替换 快捷键监视剪切板 总在最前剪辑文本 50. W3C(World Wide Web Consortium) W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生 产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达成共识。 Web标准组织(W3C)于1998年发起,目的是说服Netscape、Microsoft和其他浏览器生产商彻底支持标准。他采用从容进行、坚持和策略性的方法,最终使得浏览器生产商同意引进一系列标准。通过共同的标准协同工作,是Web 向前发展必需的观点。 54. 结构标准语言 1)XHTML XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XHTML1.0。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。 2)XML XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。 55. 表现标准语言 CSS是Cascading Style Sheet 层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。 56. 行为标准语言 1)DOMDOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对象。2) ECMAScriptECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262。 58. 为页面添加正确的DOCTYPE 1)过渡型(Transitional ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2)严格型(Strict ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3)框架型(Frameset ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 71. 5)其他标签元素 <cite>定义引用</cite> <blockquote>块引用</blockquote> <sub>下标</sub> <sup>上标</sup> <code>定义计算机代码文本</code> <pre>表示计算机的源代码(带格式)</pre> 82. <p>Hello World,my name is <i>Adam</i>.</p> <p>Hello World,my name is <b>Adam</b>.</p> <p>Hello World,my name is <em>Adam</em>.</p> <p>Hello World,my name is <strong>Adam</strong>.</p> 83. <p>Hello World,my name is <span>Adam</span>.</p> <p>Hello World,my name is <em><strong>Adam</strong></em>.</p> <p>Hello World,my name is <strong class=“italic”>Adam</strong>.</p> <p>Hello World,my name is <em class=“bold”>Adam</em>.</p> 84. <p>Hello World,my name is <abbr>Adam</abbr>.</p> A-d-a-m <p>Hello World,my name is <acronym>Adam</acronym>.</p> Adam 95. <form action="" method="post"> <table> <tr> <th>Name:</th> <td><input type="text" name="name" /></td> </tr> <tr> <th>Email:</th> <td><input type="text" name="email" /></td> </tr> <tr> <th> </th> <td><input type="submit" value="submit"/></td> </tr> </table> </form> 96. <form action="" method="post"> <p> Name:<input type="text" name="name" /><br /> Email:<input type="text" name="email" /><br /> <input type="submit" value="submit" /> </p> </form> 97. <form action="" method="post"> <p><label for="name">Name:</label><br /> <input type="text" name="name" id="name"/></p> <p><label for="email">Email:</label><br /> <input type="text" name="email" id="email"/></p> <p><input type="submit" value="submit" /></p> </form> 98. <form action="" method="post"> <dl> <dt><label for="name">Name:</label></dt> <dd><input type="text" name="name" id="name"/></dd> <dt><label for="email">Email:</label></dt> <dd><input type="text" name="email" id="email"/></dd> <dd><input type="submit" value="submit" /></dd> </dl> </form> 99. CSS选择器 声明块 选择器 声明 声明 { color : black; background: yellow; } h1 属性 属性 值 值 105. 3)类选择器 .f-blue {color:blue;} p.f-blue {font-style:italic;} strong.f-blue { text-decoration:underline;} 4)多类选择器 <p class="one two three"> 5)ID选择器 #four{ color:blue;} p#four{ font-style:italic;} 107. 伪类选择器 1)链接伪类 : link 超链接在未被访问前的样式 : visited 超链接在其链接地址已被访问过时的样式 2)动态伪类 : hove 超链接在其鼠标悬停时的样式 : active 超链接在鼠标点击与释放之间发生的样式 : focus 设置对象成为输入焦点时的样式 130. 2)自我提示 /* 这个导航条在IE6下出现了清楚浮动的BUG,如果修复IE6的BUG, 修复方法:http://www.yuyadong.com */ 131. /* TODO : 表示某些东西需要以后进行修改*/ /* KLUDGE : 表示并不完善的解决方法*/ /* BUG : 表示代码或特定浏览器遇到的问题*/ 169. Opera Show 与传统幻灯片软件对比, Opera Show有以下优势: 小巧快速的网页浏览器的标准功能。 HTML作为文件格式,相比其他工具使用的专有格式,使得文档轻量级。 网上发布你的演示轻而易举。 相比其他演示工具,Opera非常廉价。 不会用恶俗动画烦扰你的听众。 185. sIFR sIFR表示scalable Inman Flash Replacement,即“可伸缩Inman Flash替换”技术。是由Mike Davidson在IFR方法的基础之上扩展的一种技术。它通过Flash + JavaScript + CSS联合实现在不替换页面中文本元素的情况下,对文本进行更为细腻准确的效果渲染。 211. CSS Sprites用在哪里? CSS Sprites可以用在很多场合,大型网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,收到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目 的方式。 212. Adobe Flash Adobe Flash,前称Macromedia Flash,简称Flash ,既指Adobe Flash Professional多媒体创作程序,也指Adobe Flash Player。自从Macromedia公司于2005年12月3日被Adobe公司收购,Flash也就成为了Adobe旗下的软件。 213. Adobe Flash 支持格式 Fla - Flash的源文件,用Flash打开编辑。 Flv - Flash Video的简称,FLV流式媒体格式是一种视频格式,它的出现有效地解决了视频文件导入Flash后,使导出的SWF文件体积庞大,不能在网络上有效使用等缺点。 Swf - “Shockware Flash”的缩写,这是一个完整的影片档,无法被编辑。SWF在发布时可以选择保护功能,如果没有选择,很容易被别人输入到他的源文件中使用。然而保护功能依然阻挡不了众多的破解软件,有不少闪客专门以此来学习别人的代码和设计方式。 214. Adobe Flash 支持格式 AS -(ActionScript的缩写)是一种编程语言。FLA文件能够直接包含 AS语言,但是也可以把它存成AS档做为外部链接文件(如定义ActionScript类则必须在写在AS文件里,再导入以加入类),以方便共同工作和更高级的程序修改。 ActionScript 2.0 ActionScript 3.0 Swc - 是一种供Flash使用的库格式,可以粗略地理解为Flash用的dll。无法被编辑。 234. input select textarea button 243. 招数 & 过滤器 CSS过滤器(filter)是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。过滤器根据浏览器中的缺陷,比如解析bug以及未实现或错误地实现的CSS,对浏览器显示或隐藏规则。 CSS 招数是一种让浏览器表现得符合自己希望的不优雅的方法。CSS招数通常用来解决特定的浏览器bug,比如IE的专有框模型。不幸的是,招数(css hack)这 个词有比较强的负面意义,因此,有些喜欢用补丁(patch)这个词表示它实际上利用了不正确的浏览器行为。 253. 过滤器 - 带通过滤器 针对IE5的带通过滤器 @media tty { i{content:"quot;;/*" "*/}};@import 'ie5.css';/*";} } 针对IE5.5的带通过滤器 @media tty{ i{content:"quot;;/*" "*/}}@m;@import 'ie5.5.css';/*;} } 255. 过滤单独的规则和声明 - 子选择器招数 body { background:url(images/background-image.jpg) no-repeat top right; } html > body { background:url(images/background-image.png) no-repeat top right; } 256. 过滤单独的规则和声明 - 属性选择器招数 body { background:url(images/background-image.jpg) no-repeat top right; } body[id=“content”]{ background:url(images/background-image.png) no-repeat top right; } 257. 过滤单独的规则和声明 - 星号HTML招数 *html body{ background:url(images/background-image.jpg) no-repeat top right; } *+html body{ background:url(images/background-image.png) no-repeat top right; } 259. 过滤单独的规则和声明 – 转义属性招数 div.content{ background:#cf0; border:1px solid black; padding:50px; width:302px; wdth:200px; } 260. 过滤单独的规则和声明 - Tantek的框模型招数 div.content{ background:#cf0; border:1px solid black; padding:50px; width:302px; voice-family:"quot;}quot;"; voice-family:inherit; width:200px; } 261. 过滤单独的规则和声明 - !important和下划线招数 body.content{ background:url(images/background-image.png) no-repeat top right !important; background:url(images/background-image.jpg) no-repeat top right; }