WebRebuild网站改版培训(PPT36页)

1、WEB重构渔隐 , Taobao UED第1页，共37页。了解WEB重构前需要知道的一些内容第2页，共37页。table第3页，共37页。The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. - into rows and columns of cells.W3C :第4页，共37页。整理数据很方便第5页，共37页。Table布局第6页，共37页。为何不建议用table布局？第7页，共

2、37页。Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.To minimize these problems, authors should usestyle sheetsto control layout rather than tables.W3C：第8页，共37页。是表格而非栅格第9页，共37页。1.不够语义 2.维护性差3.不利于搜索引擎优化4.代码臃肿5.可访问性差

3、第10页，共37页。请不要排斥tableTable没有错，错的是拿table做布局的人第11页，共37页。Div和Span第12页，共37页。TheDIVandSPANelements, in conjunction with theidandclassattributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentat

4、ional idioms on the content. Thus, authors may use these elements in conjunction withstyle sheets, thelangattribute, etc., to tailor HTML to their own needs and tastes.第13页，共37页。标签（结构）语义表现（样式）div节元素，块容器独立一行span节元素，内联容器无具体表现table表格很复杂p段落上下两端有边距a超链接蓝色、下划线strong强调文本粗体em强调文本斜体每个html标签都有其特有含义第14页，共37页。WE

5、B重构：还标签本意，结构、表现、行为相分离第15页，共37页。在拿到设计稿时，首先应该考虑的不是表现，而是结构标题强调列表表格表单段落第16页，共37页。标题小标题内容 标题表格标题 还原语义，从代码上理解网页第17页，共37页。基本HTML结构第18页，共37页。1.Html版本信息文档类型(doctype)2.Html元素3.文档头head标签4.文档内容body标签 第19页，共37页。Doctype,Html,head,body顺序固定且唯一第20页，共37页。Doctype很不起眼，但很重要第21页，共37页。好的结构是一切的基础第22页，共37页。 文档标题 标题小标题内容 标题表

6、格标题 第23页，共37页。分离表现标题to h3 border:1px dashed #f00; 标题第24页，共37页。分离脚本hello worldtohello world document.getElementById(someid).onclick = function() alert(hello world); 第25页，共37页。 文档标题 h3color:#f00 标题小标题内容 标题表格标题 document.getElementById(someid).onclick=function()Some coding 第26页，共37页。将表现和脚本分离到外部文件第27页，共37页。 文档标题 标题小标题内容 标题表格标题 第28页，共37页。兼容性调整，前端开发赖以生存的基本技能第29页，共37页。第30页，共37页。淘宝网用户浏览器分布图，19日摘自哈勃系统第31页，共37页。淘宝网用户屏幕分辨率分布图，19日摘自哈勃系统第32页，共37页。从浏览器趋势可以看出，IE6