• Save
网站重构&Web标准设计第二版
Upcoming SlideShare
Loading in...5
×
 

网站重构&Web标准设计第二版

on

  • 1,663 views

 

Statistics

Views

Total Views
1,663
Views on SlideShare
1,663
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

网站重构&Web标准设计第二版 网站重构&Web标准设计第二版 Presentation Transcript

  • 爱生活,爱设计,将web标准进行到底…
  • Adam
    于亚东
    www.yuyadong.com
    个人简介
  • 前言
    网站重构能够实现加快网页解析的速度,实现信息跨平台的可用性以及更加良好的用户体验,网站重构以高效开发与简单维护降低服务器成本,最重要的是它便于改版,实现与未来兼容。
    Web标准就是实现网站重构的一种方法,所谓Web标准, Web标准并不是指某一个单一的标准,而是一系列标准的集合。一般指网站重构采用基于XHTML语言的网站设计标记语言,Web标准中典型的布局应用模式“DIV+CSS”。
    本教程以XHTML和CSS的应用为核心,在课程讲授的同时结合多项实例,使读者能够学以致用,举一反三,在较短时间里学会如何设计符合标准的Web网站。
    本教程适合于所有层次的Web开发者,网页设计师等. 无论你是刚刚接触CSS设计,还是接触CSS有一定基础的朋友,那么你就能从本教程中获得最大的收益,本教程力求使读者能够在学会制作Web标准网站的同时,掌握网站重构的核心思想。
  • 掌握学习的方法
    学习是一种思想,一种不断思考,一种不断实践,一种不断创新的过程……
    学习没有捷径,只有勤奋,努力,实践,思考……
  • 如何学习Web
    学习任何一门技能的时候,首先要明确思想,只有明确了思想才能够少有很多弯路,初学者学习Web标准,首先就要明确一点,到底什么是Web标准,如果错误的理解了Web标准的思想,很难学好Web标准,给初学者的建议:初学者很容易犯的错误就是把Web标准理解为Div+CSS,以为DIV的作用就是简单的替代表格去做表格以前做的事情,于是乎许多采用新技术的网站开始了DIV+CSS制作网页,当打开页面代码的时候,看到整个页面基本都是采用了DIV标签,给每个DIV标签都指定一个class,这是对Web标准的一种滥用方式。Web标准的思想是实现结构,表现,行为的分离,不只是简单的把table换成DIV ,如果要学好web标准的思想,首先要做的就是抛弃传统的表格布局思想。那么接下来我就会给大家先讲思想课,让大家更好的了解究竟什么是web标准的思想。
  • 思想 VS 工具
    子曰:工欲善其事,必先利其器
    思想是工具的灵魂
  • 思想是工具的灵魂
    思想是工具的灵魂,就像我们的计算机软件是计算机硬件的灵魂一样,没有了软件,计算机的硬件即使再好也没有任何作用,如同废铁,所以我们在学习的时候要明确我们的最终目是什么,我们要学的是这门技术的思想而不是去重视实现这门技术的一种应用工具。当然思想与工具都很重要,但是他们最大的区别在于,学会了思想我们可以选择很多不同的工具来实现这门技术,例如我们用Dreamweaver,EditPlus,甚至记事本等都可以实现我们想要的技术,工具最大的作用在于可以提高我们的工作效率,这是工具最重要的作用。所以我们不要走错的方向。
  • Web传统网站
    Web 传统网站是一个“完美”的“和谐社会”,一切即table,table即一切。表格视乎和谐一切……
  • David Siegel 印刷专家
    有人说我毁掉了Web,我回答他们,的确如此。我毁掉了Web是因为我把巧克力和花生酱混合在一起却再也不能把他们分开。我犯下了把结构跟表现混合在一起的错误。
    David Siegel
  • David Siegel 印刷专家
    他是一个印刷专家。那麽在1997年的时候,David Siegel改变了web,他自己研究出了一项网页布局技术,利用html中的的<table>元素和gif图片缝合在一起了,创造了表格布局技术,之后它就犹如一头猛兽泛滥起来。于是乎许多设计师们对他在web上复制传统印刷媒体布局方法感到欣喜若狂,从此以后数百万的页面把结构跟表现混杂在一起。在这之后David Siegel在内的很多人,很快提出反对采用表格进行布局的言论,但我们知道猛兽一旦释放就很难在关起来,加上当时没有有效的方法解决这个问题,猛兽在我们身边自由的徘徊,甚至到现在。我们可以看看互联网上仍然有很多网站都是采用的传统方式布局。
  • Web标准的好处
    • 高效开发与简单维护
    • 信息跨平台的可用性
    • 降低服务器成本
    • 便于改版
    • 加快网页解析的速度
    • 与未来兼容
    • 更加良好的用户体验
  • 高效开发与简单维护
    网站建设的过程中,网站运营成本关键在于高效的开发与简单的维护,由此可见一个网站的结构搭建对后网站维护的重要性,采用Web标准的方式实现了结构与表现相互分离,可以使具体的结构内容和样式分离出来,这样使得分离出来的结构和样式代码可以重复使用,从而减少重复代码的编写,加快开发效率和成本。达到事半功倍的作用,通过修改一个外部的样式可以是使每个结构文档中相对应区域代码维护,使得维护变的简单高效,在可读性和维护性上都得到了极大的提高。
  • 信息跨平台的可用性
    由于采用结构跟表现分离的技术,结构与表现各自为一个独立的个体,这样可以使信息实现跨平台,我们可以针对不同的设备进行不同的样式进行替换。从而实现一个结构文档在不用的平台设备上实现不用样式的表现,以适应不用操作平台的需要,达到文档一次建立,随处使用的目的。
  • Chimera
  • Netscape Navigator
  • Palm
    PocketPC
    Newton
  • 降低服务器成本
    通过结构与样式的反复重用,整个网站的容量大大的减少,降低了服务器成本,我们思考一下,对于一个门户大型网站来说,例如雅虎,如果说它的页面代码量减少了一半的话,那么我们想想它的服务器带宽也就减少了一半,服务器的带宽如果减少了一半就证明我们的服务器成本就减少了一半。一半只是个保守的说法,采用web标准制作的方法对网站进行重构至少会是页面容量减少一半,甚至更多倍。
  • 便于改版
    对于经常改版的门户网站来说,使用结构与表现分离的方法可以大大降低改版的开发成本,每次改版开发人员只需修改相应的样式文件即可,对应的结构页面也会随之改变,使得改版的技术难度与开发周期降低。
  • 加快网页解析速度
    采用结构与表现分离的技术,可以加快网页解析的速度,相对于传统的表格嵌套表格的结构与表现混杂在一起的技术,浏览器在解析的时候能够更好的理解页面元素的含义,良好的结构使得网页浏览用户浏览的体验得以提升。
  • 与未来兼容
    结构与表现分离,不必再担心为来的技术变革,分离开的结构与表现都可以随着自己的需求进行文档的修改和维护,良好的与未来兼容。
  • 更加良好的用户体验
    结构与表现分离,不必再担心为来的技术变革,分离开的结构与表现都可以随着自己的需求进行文档的修改和维护,良好的与未来兼容。
  • 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%;所以一些开发者限制他们的网站只适应其中一个版本的浏览器。而且网站随时面临着过时的命运和被淘汰的怪圈。
  • 现代浏览器
  • 浏览器内核
    通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释 也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
  • 主流浏览器内核
    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)
  • Mozilla Firefox
  • Mozilla
    Mozilla基金会简 称Mozilla(缩写MF或MoFo,如图为Mozilla 基金会的注册标识),是为支持和领导开源的Mozilla项目而设立的一个非营利组织。该组织制定管理开发政策,经营关键基础组织并管理商标及其他知识产 权。它拥有一个称作Mozilla公司的应课税子公司,雇佣了一些Mozilla开发人员并协调Mozilla Firefox网页浏览器以及Mozilla Thunderbird电子邮件客户端的发行版。Mozilla基金会位于美国加利福尼亚州。Mozilla基金会把自己描述为“一个致力于在互联网领域提供多样化选择和创新的公益组织”。
  • Firefox附加组件
    Web Developer
  • Firefox附加组件
    Firebug
  • Firefox附加组件
    CSSViewer
  • Firefox附加组件
    FireFTP
  • Firefox附加组件
    IE Tab
  • Firefox附加组件
    Firefox Universal Uploader
  • Firefox附加组件
    Abduction!
  • Firefox附加组件
    ColorZilla
  • Firefox附加组件
    FlashGot
  • 开发工具
    EditPlus
    TopStyle
    Dreamweaver
  • EditPlus
    文件配置界面设置
    定制工具自动换行
     矩形选取大小写转换,反转大小写,首字母大写
     文件只读快速切换(F12,F11)
     配对标签,配对符号代码折叠
     注释浏览器
     Make(定义是F9,切换是F4)查找替换
    快捷键监视剪切板
    总在最前剪辑文本
  • 为什么标准化?
  • W3C(World Wide Web Consortium)
    W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生 产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达成共识。
    Web标准组织(W3C)于1998年发起,目的是说服Netscape、Microsoft和其他浏览器生产商彻底支持标准。他采用从容进行、坚持和策略性的方法,最终使得浏览器生产商同意引进一系列标准。通过共同的标准协同工作,是Web 向前发展必需的观点。
  • W3C技术架构介绍
  • Web标准
    Web标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:
    结构(Structure)
    表现(Presentation)
    行为(Behavior)对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。
  • Web标准三剑客
    结构
    表现
    HTML
    XHTMLXML
    CSS
    行为
    ECMAScript
    DOM
  • 结构标准语言
    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的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。
  • 表现标准语言
    CSS是Cascading Style Sheet 层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。
  • 行为标准语言
    1)DOMDOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对象。2) ECMAScriptECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262。
  • Garbage In
    Garbage Out
  • 为页面添加正确的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">
  • 设定一个名字空间(Namespace)
    直接在DOCTYPE声明后面添加如下代码:<html XMLns=“http://www.w3.org/1999/xhtml” >一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。
  • 声明你的编码语言
    为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。
  • 良好的XHTML规则
    • 以正确的DOCTYPE和名字空间开始
    • 使用META内容元素声明你的内容编码语言
    • 用小写字母写所有元素和属性名称
    • 给所有属性值加引号
    • 给所有属性赋一个值
    • 关闭所有标签
    • 用空格和斜杠关闭空标签
    • 不要再注释内容中使用“--”
    • 把所有符号编码化
  • 选择合适的标签
    1)布局<div>网页头部</div><div>网页内容</div> <div>网页底部</div>
    2) 文本<h1>文章标题</h1><h2>文章副标题</h2><h1>---<h6>用于识别标题内容<p>正文</p>
  • <strong>把文本定义为语气更强的强调的内容</ strong ><em>把文本定义为强调的内容</ em >
    3)图片及其他元素<img src=“图片路径”title=“图片名称”alt=“图片简介”/><object>Flash元素经常用到</ object >
    4)列表元素ul ol li dl dt dd
  • 5)其他标签元素
    <cite>定义引用</cite>
    <blockquote>块引用</blockquote>
    <sub>下标</sub>
    <sup>上标</sup>
    <code>定义计算机代码文本</code>
    <pre>表示计算机的源代码(带格式)</pre>
  • 引用
  • <p >Love <strong>life</strong>, love <strong>design</strong>, Web standards say in the end</p>
    <p>&#8212;Adam</p>
    • 难以设定样式区别于页面上的其他内容
    • 无法为引用文本提供语义和结构
  • <div class=“blockquote ”>
    <p id="quote">Love <strong>life</strong>, love <strong>design</strong>, Web standards say in the end</p>
    <p id="author">&#8212;Adam</p>
    </div>
    • 添加唯一的类方便样式设定
  • <blockquote cite="http://www.somesite.com/path/to/page.html">
    <p id="quote">Love <strong>life</strong>, love <strong>design</strong>, Web standards say in the end</p>
    <p id="author">&#8212;Adam</p>
    </blockquote>
    • blockquote是W3C为引用文本专门设计的元素,提供了语义和结构
    • 在缺少css的情况下会更其他元素有所区别
  • 标题
  • <span class="title">Mozilla Firefox</span>
    <p>The use of the Firefox open source web publishing engine Gecko, Gecko browser can allow as much as possible in accordance with the standard to show the contents of the page.
    </p>
    • CSS禁用时,会跟普通文本一样没有区别
    • 搜索引擎不会关注<span>标记的标题
  • <p><b>Mozilla Firefox</b></p>
    <p>The use of the Firefox open source web publishing engine Gecko, Gecko browser can allow as much as possible in accordance with the standard to show the contents of the page.
    </p>
    • CSS禁用时,加粗显示
    • 搜索引擎不会关注<b>标记的标题
    • 无法针对这些文本设置单独的样式
  • <h1>Mozilla Firefox</h1>
    <p>The use of the Firefox open source web publishing engine Gecko, Gecko browser can allow as much as possible in accordance with the standard to show the contents of the page.
    </p>
    • 表达的文本标题的含义
    • 不管如何设置样式,图形界面和非图形界面正确的识别<h1>
    • 搜索引擎会非常关注<h1>标记的标题
  • 表现与结构,其他
  • <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>
  • <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>
  • <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
  • 列表
  • Orange<br />
    Apple<br />
    Watermelon<br />
    Pineapple<br />
    Banana<br />
    • 无法对单独的类表设置样式
    • 小屏幕造成的长项折行造成阅读困难
    • 缺乏语义
  • <li>Orange<br />
    <li>Apple<br />
    <li>Watermelon<br />
    <li>Pineapple<br />
    <li>Banana<br />
    • 加上<li>可以显示类表符号便于区分,缺少外围的ul,某些浏览器不显示
    • 缺少<ul>和<li>闭合标签
    • 缺乏语义,代码不规范
  • <li>Orange</li>
    <li>Apple </li>
    <li>Watermelon </li>
    <li>Pineapple</li>
    <li>Banana </li>
    • 闭合<li>标签代替<br />
    • 缺少<ul>,无法为专门的列表设计样式
    • 代码不规范
  • <ul>
    <li>Orange</li>
    <li>Apple </li>
    <li>Watermelon </li>
    <li>Pineapple</li>
    <li>Banana </li>
    </ul>
    • 代码符合规范,具有语义和结构
    • 折行的文本在大多浏览器中进行缩进
    • 轻松设置样式
  • 表单
  • <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>&nbsp;</th>
    <td><input type="submit" value="submit"/></td>
    </tr>
    </table>
    </form>
  • <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>
  • <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>
  • <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>
  • CSS选择器
    声明块
    选择器
    声明
    声明
    { color : black; background: yellow; }
    h1
    属性
    属性


  • CSS选择器
    • 常用选择器
    • 通用选择器
    • 伪类选择器
    • 伪元素选择器
    • 属性选择器
  • 常用选择器
    1)元素选择器
    body{ color : green;}
    h1{ color : red; }
    p{ color : blue;}
    2)群组选择器
    h1 , p ,strong{font-style:italic;}
  • 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;}
  • 通用选择器
    *{margin:0;padding:0;}
  • 伪类选择器
    1)链接伪类
    : link 超链接在未被访问前的样式
    : visited 超链接在其链接地址已被访问过时的样式
    2)动态伪类
    : hove 超链接在其鼠标悬停时的样式
    : active 超链接在鼠标点击与释放之间发生的样式
    : focus 设置对象成为输入焦点时的样式
  • 3)其他
    :first-child 设置第一个子元素样式
    :lang设置元素使用特殊语言的内容的样式
  • 伪元素选择器
    : first-letter设置元素内的第一个字符的样式
    : first-line设置元素内的第一行字符的样式
    : before 用来和content 属性一起使用,设置在对象前发生的内容
    : after用来和content 属性一起使用,设置在对象后发生的内容
  • 属性选择器
    1)简单的属性选择
    h1[class] {color:green;}
    h1[id] { color:red;}
  • 2)根据元素属性选择
    img[alt]{ border:3px solid red;}
    img[title]{ border:3px solid blue;}
    a[title][href]{border:3px solid green;}
  • 3)根据具体的属性值选择
    a[href="http://www.xhtml.com"]{ color:red; font-weight:bold;}
    a[href="http://www.css.com"][title="Hello world,my name is CSS!!!"]
    { color:blue; text-decoration:none;}
    p[class="one two hello"]{ text-decoration:underline;}
  • 4)根据部分属性值选择
    p[class~="one"]{ text-decoration:overline;}
    img[title~="World"]{ border:3px solid green; background:#ccc;}
  • 5)根据部分属性值选择-子串匹配属性选择器
    span[class*="orange"]{ font-style:italic; color:red;}
    span[class^="ap"]{ font-weight:bold; color:green;}
    span[class$="b"]{ text-decoration:underline;}
    img[src*="test"]{ border:3px solid red;}
    a[href*="yu"]{ text-decoration:none; color:#fc0;}
  • 6)特定属性选择类型
    [lang|="en"]{ font-style:italic;}
  • 7)后代选择器
    h1>strong{ color:red;}
    h1+p{ color:green;}
    H1 strong{ color:blue;}
  • 选择器的特殊性
    • * : 0 , 0 , 0 , 0
    • E : 0 , 0 , 0 , 1
    • Class : 0 , 0 , 1 , 0
    • Id : 0 , 1 , 0 , 0
    • Style : 1 , 0 , 0 , 0
  • 选择器的特殊性
    • * : E :Class : Id : Style
    = 0 : 1 : 10 : 100 : 1000
    • !important特殊性高于一切其他元素
    • 特殊性遵循就近原则
  • 规划、组织和维护样式表
    • 富含语义的命名规则
    • 微格式
    • 代码注释
    • 样式应用
  • 富含语义的命名规则
    表象性名称表意的等价物
    #header -(页眉) #branding -(头部信息)
    #sidebar -(工具条) #content_sub-(子内容) #footer -(页脚) #site_info-(站点信息)
  • 命名规则对比
    差的命名好的命名
    red error
    topNavmainNav
    info copyright
  • 微格式
    微格式(Microformat),是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等,它可以被其他的软件检测到,并提取出相应的信息,以及对信息进行索引、搜索、跨平台的参考,把这些信息以其他形式重复使用或组合。
    从技术上来说,这些数据是一些语义标记,用标准的(X)HTML中的class名称设置。他是开放、可用、自由的,可以被任何人使用。
    微格式扩展了XHTMl,并整合了所有精确含义带来的益处,为设计师们提供了更多的机会去用css格式化内容。
  • 代码注释
    1)结构性注释/* ------------------------------------------------------------
    Basic Style Sheet(for version 4 browers)
    version : 1.0
    author : Adam Yu
    email : yydxp88@163.com
    qq : 106395181
    msn : zatsl@hotmail.com
    ------------------------------------------------------------*/
  • /* Navigator
    ------------------------------------------------------------*/
    /* = Navigator
    ------------------------------------------------------------*/
  • 2)自我提示
    /*
    这个导航条在IE6下出现了清楚浮动的BUG,如果修复IE6的BUG,
    修复方法:http://www.yuyadong.com
    */
  • /* TODO : 表示某些东西需要以后进行修改*/
    /* KLUDGE : 表示并不完善的解决方法*/
    /* BUG : 表示代码或特定浏览器遇到的问题*/
  • 样式应用
    • 嵌入样式
    • 行内样式
    • 链接样式
    • @import
  • 规划网站CSS样式
    站点越大、越复杂、图形越丰富,CSS的管理就显的尤为重要,将CSS文件分割成多个样式表、按逻辑对样式表进行分组以及通过添加注释让代码变的更加容易理解和阅读。
  • 盒模型
  • 盒模型3D示意图
  • 浏览器渲染模式
    • Quirks mode(诡异模式)
    • Almost standards mode(几乎标准模式)
    • Standards mode(标准模式)
  • 空白边叠加
    只有普通文档流中块级元素的垂直空白边才会发生空白边叠加。行内元素,浮动元素或者定位元素之间是不会产生空白边叠加的
  • 元素的顶空白边与前面元素的底空白边发生叠加
  • 元素的顶空白边与父元素的顶空白边发生叠加
  • 元素的顶空白边与底空白边发生叠加
  • 空元素中已经叠加的空白边与另一个空元素的空白边发生叠加
  • 空白边叠加在元素之间维护了一致的距离
  • 视觉格式化盒模型
    • 块级元素(block-level element)
    • 内联元素(inline)
    display决定了盒模型的显示模式
  • 定位概述
    CSS中有3种基本定位机制:
    • 普通流(normal flow)
    • 浮动(float)
    • 定位( position )
    除非专门制定,否则默认情况下元素都为普通流
  • 1)<html>
    标准模式下,html元素表示文档内容渲染的整个表面
    2)<body>
    诡异模式下,body元素表示文档内容渲染的整个表面
  • 文字排版
    五大字体家族 - font-family:
    • Serif
    • Sans-serif
    • Monospace
    • Cursive
    • Fantasy
  • Serif
    Serif 字体成正比,而且有上下短线,所有字符根据其不同大小有不同宽度,例如小写i和小写m的宽度就不同。
    Serif特定系列字体包括:Times,Georgia和New Century Schoolbook。
  • Sans-serif
    Sans-serif 字体成正比,而且没有上下短线。
    Sans-serif 特定系列字体包括:Arial,Verdana,Geneva。
  • Monospace
    Monospace字体不成正比,他们通常用于模拟打字机打出的文本,老式点阵打印机的输出,甚至更老的视频终端。每个字符的宽度都是完全相同的,例如小写字母i与小写字母m有相同宽度。这些字体可能有上下短线也可能没有,如果一个字体的字符宽度完全相同,则归类为Monospace字体。
    Monospace特定系列字体包括:Courier New, Courier,Andale Mono。
  • Cursive
    Cursive 字体模仿手写体,通常,它们主要由曲线和serif 字体中没有笔画装饰组成。例如大写字母A在其左腿底部可能有一个小弯。
    Cursive 特定系列字体包括:Zapf Chancery, Author,Comic Sans。
  • Fantasy
    Fantasy 字体无法用任何特征来定义,无法将其规划到任何字体系列中。
  • max-width min-width
    max-height min-height
    expression((documentElement.clientWidth > 300) ? "300px" : "auto" )
  • 非屏幕媒体
  • 分页媒体
    分页媒体是把文档表示处理为一系列的离散页面,这与屏幕媒体有所不同,屏幕媒体是一种连续型的媒体,在显示器上,文档可以表示为一个可以滚动的页面。打印资料,例如书本,杂志,漫画,激光打印输出等,都属于分页媒体。
  • 屏幕与打印的区别
    首先除了物理设备上的差异外,屏幕和打印设计之间还有很多样式上的不同。最明显的差别体现在字体上,大多数设计人员会告诉你最适合屏幕设计的字体是Sans-serif,但是在打印媒体中 Serif 可读更好。因此在打印媒体中使用 Times 字体要比 Arial 字体更合适。
  • 设置特定于媒体的样式表
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    <style type="text/css" media="print">
    </style>
  • @import url(print.css) print;
    @media print {
    body {
    font-family:Times, serif;
    font-size:12pt;
    }
    }
  • Opera Show ?
  • Opera Show
    Opera Show,将你的浏览器转变成高级演示工具 , 让你的浏览器看起来就像具有幻灯片功能 。
  • Opera Show
    与传统幻灯片软件对比, Opera Show有以下优势:
    小巧快速的网页浏览器的标准功能。
    HTML作为文件格式,相比其他工具使用的专有格式,使得文档轻量级。
    网上发布你的演示轻而易举。
    相比其他演示工具,Opera非常廉价。
    不会用恶俗动画烦扰你的听众。
  • JavaScript Framework
  • JavaScript Framework
    Ext JS
    JQuery
    Yahoo UI
  • AJAX
    Ajax:Asynchronous JavaScript And XML(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。
    • xhtml和css的基于标准的表示技术
    • dom进行动态显示和交互
    • XML和XSLT进行数据交换和处理(JONS)
    • XMLHttpRequest进行异步数据检索
    • JavaScript将以上技术融合在一起
  • DOM
    DOM文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。
    • Html标签元素对应DOM树中的元素节点
    • Html文本对应DOM树中的文本节点
    • Html注释对应DOM树中的注释节点
    • Html标签属性对应DOM树中的属性节点
  • 图像替换
    • FIR
    • Phark
    • Gilder/Levin
    • sIFR
  • FIR
    FIR由Todd Fahrner开创的FIR(Fahrner图像替换)是最早且有可能当时最流行的图像替换技术,比较有历史性意义。
    缺点:1.额外的标签
    2.可访问性问题,不适合屏幕阅读器阅读
    3.关闭图像打开css时无效
  • Phark
    Phark由Mike Rundle发明的一种适合阅读器阅读的图像替换技术,而且不需要添加额外的标签。
    优点:1.不需要添加额外的标签
    2.适合阅读器阅读
    缺点:
    1.关闭图像打开css时无效
  • Gilder/Levin
    Gilder/Levin方法是由Tom Gilder与Levin Alexander一起发明的解决了对阅读器支持,关闭图像打开css时无效。
    优点:1.关闭图像打开css时无效
    2.适合阅读器阅读
    缺点:
    1.额外的标签
  • sIFR
    sIFR表示scalable Inman Flash Replacement,即“可伸缩Inman Flash替换”技术。是由Mike Davidson在IFR方法的基础之上扩展的一种技术。它通过Flash + JavaScript + CSS联合实现在不替换页面中文本元素的情况下,对文本进行更为细腻准确的效果渲染。
  • sIFR
    • sIFR不需要更改(X)HTML代码,所有的工作由Javascript、Flash和CSS来完成
    • 如果用户没有安装Flash或者不支持Javascript,那么(X)HTML的文本就会被CSS样式化后显示出来
    • sIFR是可缩放的,可以在渲染时更改为用户设置的缺省字体尺寸
    • sIFR兼容所有的屏幕阅读机
    • sIFR的文本可以被鼠标选择
    • sIFR不影响搜索引擎的定位和评定,不会隐藏真实的文本内容
  • sIFR
    • sIFR不需要更改(X)HTML代码,所有的工作由Javascript、Flash和CSS来完成
    • 如果用户没有安装Flash或者不支持Javascript,那么(X)HTML的文本就会被CSS样式化后显示出来
    • sIFR是可缩放的,可以在渲染时更改为用户设置的缺省字体尺寸
    • sIFR兼容所有的屏幕阅读机
    • sIFR的文本可以被鼠标选择
    • sIFR不影响搜索引擎的定位和评定,不会隐藏真实的文本内容
  • sIFR
    sIFR技术的主要问题涉及装载时间。页面必须完全装载,然后JavaScript才能替换文本。因此,在所有文本被替换为Flash内容之前常常有短暂 的闪烁。尽管这不是个大问题,但是会被访问者注意到,会给人留下页面装载慢的印象。另外,如果进行许多Flash替换,一些页面感觉起来有点儿迟钝。最好 将替换减少到最少,只对主要标题使用这种技术。
  • sIFR生成嵌入特定字体的字符
  • sIFR包含所需的JavaScript和CSS
  • 执行代码来替换网页中的文本
  • sIFR.replaceElement函数的参数
  • sIFR.replaceElement函数的参数
  • 超链接应用
    • 超链接样式L-V-H-A
    • 简单的翻转按钮
    • Pixy翻转按钮
    • 纯CSS工具提示
    • CSS3应用和分级支持
    • 浏览器之间的兼容
  • CSS Sprites
    CSS Sprites并没有一个确定的中文翻译,通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。
  • 什么是Sprites技术?
  • “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏、视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅。“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上。
    “Sprite”被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”。
  • 时间进行到2000年,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生,它基于同上文提到的游戏Sprite同样的原理,并且使用CSS更容易控制,很快的流行开来。
    2004年,Dave Shea 提出了一种使用CSS控制组合图片的方案 ,将许过小的图片组合在一起,使用css定义背景属性,来控制图片的显示位置和方式。
    当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
  • CSS Sprites用在哪里?
    CSS Sprites可以用在很多场合,大型网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,收到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目 的方式。
  • Adobe Flash
    Adobe Flash,前称Macromedia Flash,简称Flash ,既指Adobe Flash Professional多媒体创作程序,也指Adobe Flash Player。自从Macromedia公司于2005年12月3日被Adobe公司收购,Flash也就成为了Adobe旗下的软件。
  • Adobe Flash 支持格式
    Fla - Flash的源文件,用Flash打开编辑。
    Flv - Flash Video的简称,FLV流式媒体格式是一种视频格式,它的出现有效地解决了视频文件导入Flash后,使导出的SWF文件体积庞大,不能在网络上有效使用等缺点。
    Swf - “Shockware Flash”的缩写,这是一个完整的影片档,无法被编辑。SWF在发布时可以选择保护功能,如果没有选择,很容易被别人输入到他的源文件中使用。然而保护功能依然阻挡不了众多的破解软件,有不少闪客专门以此来学习别人的代码和设计方式。
  • Adobe Flash 支持格式
    AS -(ActionScript的缩写)是一种编程语言。FLA文件能够直接包含 AS语言,但是也可以把它存成AS档做为外部链接文件(如定义ActionScript类则必须在写在AS文件里,再导入以加入类),以方便共同工作和更高级的程序修改。 ActionScript 2.0 ActionScript 3.0
    Swc - 是一种供Flash使用的库格式,可以粗略地理解为Flash用的dll。无法被编辑。
  • 工具栏
  • 时间轴
  • 面板
  • 传统动画原理
    传统动画原理,相信幻灯片大家都看过,幻灯片就是把每一张画按每秒24帧的速度放出,就能看到连续的动画. 也就是FLASH中的逐帧动画. 同样电影也是这样的原理.
    19世纪20年代,英国科学家发现了人眼的“视觉暂留”现象(物体被移动后其形象在人眼视网膜上还可有约1秒的停留),揭示了连续分解的动作在快速闪现时产生活动影像的原理。
  • Flash动画原理
    Flash中的动画制作方式总的来说分为两种,一种是逐帧动画的制作,另外一种就是补间动画。使用帧动画可以制作一些真实的,专业的动画效果。使用补间动画的制作方式则可以轻松创建平滑过渡的动画效果。两种方式都有各自的特点。
  • Flash 三大元件
    • Movie Clip - 影片剪辑
    • Button -按钮
    • Graphit - 图形
  • BUG & BUG修复
    • 开发浏览器
    • 修复问题,而不是修复症状
    • IE/Win拥有布局(Layout)
  • 现代浏览器
  • 修复问题,而不是修复症状
    避免BUG的发生,用更好的办法解决可以避免的问题,而不是创造错误,从而在修复错误,在错误的基础上进行错误的修复是没有意义的做法。
  • IE/Win拥有布局(Layout)
    IE的表现和其他浏览器不同的原因在于,IE的显示引擎使用了一个称为布局(Layout)的概念,布局问题是许多IE/Win出现BUG的根源,所以理解这个概念以及它如何影响CSS是有帮助的。
  • “Layout”是一个 IE/Win的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等。
    这种渲染特性可以通过某些 CSS属性被不可逆转地触发。而有些 HTML 元素则默认就具有“layout”。
    微软的开发者们认为元素都应该可以拥有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 hasLayout,这种渲染特性,当触发 Layout时也就是将 hasLayout设成了 true。
  • 默认拥有布局的元素
    • html(标准渲染模式)
    • body
    • table
    • tr td
    • img
    • hr
    • input select textarea button
    • iframeembed object applet
    • marquee
  • 设置以下CSS会自动使元素拥有布局
    • position:absolute
    绝对定位元素包含区块;
    • float:left或 right
    由于Layout元素特性,浮动模型会有很多怪异的表现;
    • display:inline-block
    内联级元素需要Layout的时候;
    • width
    除auto外任意值;
    • height
    除auto外任意值;
    • zoom
    除normal外任意值,IE专有属性,无法通过校验;
    • writing-mode:tb-rl
    IE专有属性,无法通过校验;
  • IE7overflow变成Layout触发器
    • overflow:hidden|scroll|auto
    • overflow-x|-y: hidden|scroll|auto
    • position:fixed;
    • min-width
    任意值;
    • max-width
    除none之外的任意值;
    • min-height
    任意值;
    • max-height
    除none之外的任意值;
  • 招数 & 过滤器
    CSS过滤器(filter)是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。过滤器根据浏览器中的缺陷,比如解析bug以及未实现或错误地实现的CSS,对浏览器显示或隐藏规则。 CSS 招数是一种让浏览器表现得符合自己希望的不优雅的方法。CSS招数通常用来解决特定的浏览器bug,比如IE的专有框模型。不幸的是,招数(css hack)这 个词有比较强的负面意义,因此,有些喜欢用补丁(patch)这个词表示它实际上利用了不正确的浏览器行为。
  • CSS招数可以使用过滤器将一个规则应用于一种浏览器,将另一个规则应用于另一种浏览器。招数也可以利用不正确的CSS实现,从而“哄 骗”浏览器表现得符合自己的希望。从本质上说,CSS过滤器是一种用来过滤不同浏览器的招数类型。不幸的是,大多数人一般使用通用词招数来描述过滤器。因此,当人们谈到CSS招数时,他们往往是特指过滤器。
  • 过滤器 -IE的有条件注释
    IE的有条件注释是一种专有的(因此是非标准的)、对常规XHTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持。
    IE的有条件注释及其有效,而且非常容易记住。主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中。这样,当你不需要这些东西,或者有所更改的时候,就需要维护很多的地方。
  • 只有IE才能识别
    只有IE5版本以上
    <!--[if IE]>
    <style type="text/css">
    div.content{ color:red;}
    </style>
    <![endif]-->
  • 只有特定版本才能识别
    只有IE7版本才能识别
    <!--[if IE 7]>
    <style type="text/css">
    div.content{ color:red;}
    </style>
    <![endif]-->
  • 只有不是特定版本才能识别
    除了IE7版本其他版本IE5或以上版本才能识别
    <!--[if !IE 7]><style type="text/css">
    div.content{ color:red;}
    </style>
    <![endif]-->
  • 只有高于特定版本才能识别
    只有高于IE7版本的IE才能识别
    <!--[if gt IE 7]><style type="text/css">
    div.content{ color:red;}
    </style>
    <![endif]-->
  • 只有低于特定版本的才能识别
    只有低于IE7版本的IE才能识别
    <!--[if lt IE 7]><style type="text/css">
    div.content{ color:red;}
    </style>
    <![endif]-->
  • 等于或者高于特定版本的才能识别
    只有低于或等于IE7版本的IE才能识别
    <!--[if gte IE 7]><style type="text/css">
    div.content{ color:red;}
    </style>
    <![endif]-->
  • 等于或者低于特定版本的才能识别
    只有低于或等于IE7版本的IE才能识别
    <!--[if lte IE 7]><style type="text/css">
    div.content{ color:red;}
    </style><![endif]-->
  • 过滤器 - 带通过滤器
    针对IE5的带通过滤器
    @media tty {
    i{content:"";/*" "*/}};@import 'ie5.css';/*";}
    }
    针对IE5.5的带通过滤器
    @media tty{
    i{content:"";/*" "*/}}@m;@import 'ie5.5.css';/*;}
    }
  • 针对IE5的带通过滤器
    @media tty {
    i{content:"";/*" "*/}} @import 'ie5x.css';/*";}
    }
  • 过滤单独的规则和声明 - 子选择器招数
    body {
    background:url(images/background-image.jpg) no-repeat top right;
    }
    html > body {
    background:url(images/background-image.png) no-repeat top right;
    }
  • 过滤单独的规则和声明 - 属性选择器招数
    body {
    background:url(images/background-image.jpg) no-repeat top right;
    }
    body[id=“content”]{
    background:url(images/background-image.png) no-repeat top right;
    }
  • 过滤单独的规则和声明 - 星号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;
    }
  • 过滤单独的规则和声明 - IE/Mac注释反斜线招数
    /* Hides from IE-mac */* html .clearfix {
    height: 1%;
    }/* End hide from IE-mac */
  • 过滤单独的规则和声明 – 转义属性招数
    div.content{
    background:#cf0;
    border:1px solid black;
    padding:50px;
    width:302px;
    width:200px;
    }
  • 过滤单独的规则和声明 - Tantek的框模型招数
    div.content{
    background:#cf0;
    border:1px solid black;
    padding:50px;
    width:302px;
    voice-family:""}"";
    voice-family:inherit;
    width:200px;
    }
  • 过滤单独的规则和声明 - !important和下划线招数
    body.content{
    background:url(images/background-image.png) no-repeat top right !important;
    background:url(images/background-image.jpg) no-repeat top right;
    }
  • div .content{
    width:200px;
    * width:200px; /*IE*/
    _width:200px; /*IE6*/
    +width:200px; /*IE7*/
    }