WebRebuild网站改版培训课件

WEB重构渔隐,TaobaoUEDWEB重构渔隐,TaobaoUED1了解WEB重构前需要知道的一些内容了解WEB重构前需要知道的一些内容2tabletable3TheHTMLtablemodelallowsauthorstoarrangedata--text,preformattedtext,images,links,forms,formfields,othertables,etc.--intorowsandcolumnsofcells.W3C:TheHTMLtablemodelallowsau4整理数据很方便整理数据很方便5Table布局Table布局6为何不建议用table布局？为何不建议用table布局？7Tablesshouldnotbeusedpurelyasameanstolayoutdocumentcontentasthismaypresentproblemswhenrenderingtonon-visualmedia.

…

Tominimizetheseproblems,authorsshoulduse

stylesheets

tocontrollayoutratherthantables.W3C：Tablesshouldnotbeusedpure8是表格而非栅格是表格而非栅格91.不够语义

2.维护性差

3.不利于搜索引擎优化

4.代码臃肿

5.可访问性差1.不够语义

2.维护性差

3.不利于搜索引擎优化

4.代10请不要排斥tableTable没有错，错的是拿table做布局的人请不要排斥tableTable没有错，错的是拿table做布11Div和SpanDiv和Span12The

DIV

and

SPAN

elements,inconjunctionwiththe

id

and

class

attributes,offeragenericmechanismforaddingstructuretodocuments.Theseelementsdefinecontenttobeinline(SPAN)orblock-level(DIV)butimposenootherpresentationalidiomsonthecontent.Thus,authorsmayusetheseelementsinconjunctionwith

stylesheets,the

lang

attribute,etc.,totailorHTMLtotheirownneedsandtastes.The

DIV

and

SPAN

elements,in13标签（结构）语义表现（样式）div节元素，块容器独立一行span节元素，内联容器无具体表现table表格很复杂p段落上下两端有边距a超链接蓝色、下划线strong强调文本粗体em强调文本斜体每个html标签都有其特有含义标签（结构）语义表现（样式）div节元素，块容器独立一行sp14WEB重构：还标签本意，结构、表现、行为相分离WEB重构：还标签本意，结构、表现、行为相分离15在拿到设计稿时，首先应该考虑的不是表现，而是结构标题强调列表表格表单段落在拿到设计稿时，首先应该考虑的不是表现，而是结构标题强调列表16<h3>标题</h3><img/><h4>小标题</h4><p>内容</p><ul><li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset><form><input/></form></fieldset>还原语义，从代码上理解网页<h3>标题</h3>还原语义，从代码上理解网页17基本HTML结构基本HTML结构181.Html版本信息—文档类型(doctype)2.Html元素3.文档头head标签4.文档内容body标签<!DOCTYPEhtml><html><head><title></title></head><body></body></html>1.Html版本信息—文档类型(doctype)<!DOCT19Doctype,Html,head,body顺序固定且唯一Doctype,Html,head,body顺序固定且唯一20Doctype很不起眼，但很重要Doctype很不起眼，但很重要21好的结构是一切的基础好的结构是一切的基础22<!DOCTYPEhtml><html><head><title>文档标题</title></head><body><h3>标题</h3><img/><h4>小标题</h4><p>内容</p><ul><li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset><form><input/></form></fieldset></body></html><!DOCTYPEhtml>23分离表现<h3style=“border:1pxdashed#f00”>标题</h3>to<style>h3{border:1pxdashed#f00;}</style><h3>标题</h3>分离表现<h3style=“border:1pxdash24分离脚本<buttononclick=“javascript:alert(‘helloworld’)”>helloworld</button>to<buttonid=“someid”>helloworld</button><script>document.getElementById(‘someid’).onclick=function(){alert(‘helloworld’);}</script>分离脚本<buttononclick=“javascrip25<!DOCTYPEhtml><html><head><title>文档标题</title><style>h3{color:#f00}</style></head><body><h3>标题</h3><img/><h4>小标题</h4><p>内容</p><ul><li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset><form><inputid=“someid”/></form></fieldset><script>document.getElementById(‘someid’).onclick=function(){Somecoding…}<script></body></html><!DOCTYPEhtml>26将表现和脚本分离到外部文件将表现和脚本分离到外部文件27<!DOCTYPEhtml><html><head><title>文档标题</title><linktype=“text/css”rel=“stylesheet”href=“style.css”/></head><body><h3>标题</h3><img/><h4>小标题</h4><p>内容</p><ul><li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset><form><inputid=“someid”/></form></fieldset><scriptsrc=“code.js”type=“text/javascript”></script></body></html><!DOCTYPEhtml>28兼容性调整，前端开发赖以生存的基本技能兼容性调整，前端开发赖以生存的基本技能29WebRebuild网站改版培训30淘宝网用户浏览器分布图，19日摘自哈勃系统淘宝网用户浏览器分布图，19日摘自哈勃系统31淘宝网用户屏幕分辨率分布图，19日摘自哈勃系统淘宝网用户屏幕分辨率分布图，19日摘自哈勃系统32从浏览器趋势可以看出，IE6虽逐步消亡，却依旧强势从浏览器趋势可以看出，IE6虽逐步消亡，却依旧强势33为用户而设计是设计师和前端开发共同的目标为用户而设计是设计师和前端开发共同的目标34路漫漫其修远兮……路漫漫其修远兮……35THX!THX!36演讲完毕，谢谢观看！演讲完毕，谢谢观看！37WEB重构渔隐,TaobaoUEDWEB重构渔隐,TaobaoUED38了解WEB重构前需要知道的一些内容了解WEB重构前需要知道的一些内容39tabletable40TheHTMLtablemodelallowsauthorstoarrangedata--text,preformattedtext,images,links,forms,formfields,othertables,etc.--intorowsandcolumnsofcells.W3C:TheHTMLtablemodelallowsau41整理数据很方便整理数据很方便42Table布局Table布局43为何不建议用table布局？为何不建议用table布局？44Tablesshouldnotbeusedpurelyasameanstolayoutdocumentcontentasthismaypresentproblemswhenrenderingtonon-visualmedia.

…

Tominimizetheseproblems,authorsshoulduse

stylesheets

tocontrollayoutratherthantables.W3C：Tablesshouldnotbeusedpure45是表格而非栅格是表格而非栅格461.不够语义

2.维护性差

3.不利于搜索引擎优化

4.代码臃肿

5.可访问性差1.不够语义

2.维护性差

3.不利于搜索引擎优化

4.代47请不要排斥tableTable没有错，错的是拿table做布局的人请不要排斥tableTable没有错，错的是拿table做布48Div和SpanDiv和Span49The

DIV

and

SPAN

elements,inconjunctionwiththe

id

and

class

attributes,offeragenericmechanismforaddingstructuretodocuments.Theseelementsdefinecontenttobeinline(SPAN)orblock-level(DIV)butimposenootherpresentationalidiomsonthecontent.Thus,authorsmayusetheseelementsinconjunctionwith

stylesheets,the

lang

attribute,etc.,totailorHTMLtotheirownneedsandtastes.The

DIV

and

SPAN

elements,in50标签（结构）语义表现（样式）div节元素，块容器独立一行span节元素，内联容器无具体表现table表格很复杂p段落上下两端有边距a超链接蓝色、下划线strong强调文本粗体em强调文本斜体每个html标签都有其特有含义标签（结构）语义表现（样式）div节元素，块容器独立一行sp51WEB重构：还标签本意，结构、表现、行为相分离WEB重构：还标签本意，结构、表现、行为相分离52在拿到设计稿时，首先应该考虑的不是表现，而是结构标题强调列表表格表单段落在拿到设计稿时，首先应该考虑的不是表现，而是结构标题强调列表53<h3>标题</h3><img/><h4>小标题</h4><p>内容</p><ul><li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset><form><input/></form></fieldset>还原语义，从代码上理解网页<h3>标题</h3>还原语义，从代码上理解网页54基本HTML结构基本HTML结构551.Html版本信息—文档类型(doctype)2.Html元素3.文档头head标签4.文档内容body标签<!DOCTYPEhtml><html><head><title></title></head><body></body></html>1.Html版本信息—文档类型(doctype)<!DOCT56Doctype,Html,head,body顺序固定且唯一Doctype,Html,head,body顺序固定且唯一57Doctype很不起眼，但很重要Doctype很不起眼，但很重要58好的结构是一切的基础好的结构是一切的基础59<!DOCTYPEhtml><html><head><title>文档标题</title></head><body><h3>标题</h3><img/><h4>小标题</h4><p>内容</p><ul><li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset><form><input/></form></fieldset></body></html><!DOCTYPEhtml>60分离表现<h3style=“border:1pxdashed#f00”>标题</h3>to<style>h3{border:1pxdashed#f00;}</style><h3>标题</h3>分离表现<h3style=“border:1pxdash61分离脚本<buttononclick=“javascript:alert(‘helloworld’)”>helloworld</button>to<buttonid=“someid”>helloworld</button><script>document.getElementById(‘someid’).onclick=function(){alert(‘helloworld’);}</script>分离脚本<buttononclick=“javascrip62<!DOCTYPEhtml><html><head><title>文档标题</title><style>h3{color:#f00}</style></head><body><h3>标题</h3><img/><h4>小标题</h4><p>内容</p><ul><li></li></ul><h3>标题</h3><table>表格</table><h3>标题</h3><fieldset><form><inputid=“someid”/></form></fieldset><script>document.getElementById(‘someid’).onclick=function(){Somecoding…}<script