Web Rebuild

655 views

Published on

网站重构初学者材料

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
655
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Rebuild

  1. 1. WEB重构<br />渔隐 , TaobaoUED<br />
  2. 2. 了解WEB重构前需要知道的一些内容<br />
  3. 3. table<br />
  4. 4. 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.<br />W3C :<br />http://www.w3.org/TR/html401/struct/tables.html#h-11.1<br />
  5. 5. 整理数据很方便<br />
  6. 6. Table布局<br />
  7. 7. 为何不建议用table布局?<br />
  8. 8. W3C:<br />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 use style sheets to control layout rather than tables.<br />
  9. 9. 是表格而非栅格<br />
  10. 10. 1.不够语义 2.维护性差3.不利于搜索引擎优化4.代码臃肿5.可访问性差<br />
  11. 11. 请不要排斥table<br />Table没有错,错的是拿table做布局的人<br />
  12. 12. Div和Span<br />
  13. 13. The DIV and SPAN elements, in conjunction with the id and class attributes, 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 presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.<br />http://www.w3.org/TR/html401/struct/global.html#h-7.5.4<br />
  14. 14. 每个html标签都有其特有含义<br />
  15. 15. WEB重构:还标签本意,结构、表现、行为相分离<br />
  16. 16. 标题<br />强调<br />表格<br />段落<br />列表<br />表单<br />在拿到设计稿时,首先应该考虑的不是表现,而是结构<br />
  17. 17. &lt;h3&gt;标题&lt;/h3&gt;<br />&lt;img /&gt;<br />&lt;h4&gt;小标题&lt;/h4&gt;<br />&lt;p&gt;内容&lt;/p&gt; <br />&lt;ul&gt;<br /> &lt;li&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;table&gt;表格&lt;/table&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;fieldset&gt;<br /> &lt;form&gt;<br /> &lt;input /&gt;<br /> &lt;/form&gt;<br />&lt;/fieldset&gt;<br />还原语义,从代码上理解网页<br />
  18. 18. 基本HTML结构<br />
  19. 19. 1.Html版本信息—文档类型(doctype)<br />2.Html元素<br />3.文档头head标签<br />4.文档内容body标签<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br /> &lt;head&gt;<br /> &lt;title&gt;&lt;/title&gt; <br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> &lt;/body&gt;<br />&lt;/html&gt;<br />
  20. 20. Doctype,Html,head,body顺序固定且唯一<br />
  21. 21. Doctype很不起眼,但很重要<br />http://www.chencheng.org/blog/2010/01/15/ppt-detail-on-html-spec/<br />http://blog.silentash.com/2010/01/html5-doctype-and-img-space/<br />
  22. 22. 好的结构是一切的基础<br />
  23. 23. &lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br /> &lt;head&gt;<br /> &lt;title&gt;文档标题&lt;/title&gt; <br /> &lt;/head&gt;<br /> &lt;body&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;img /&gt;<br />&lt;h4&gt;小标题&lt;/h4&gt;<br />&lt;p&gt;内容&lt;/p&gt; <br />&lt;ul&gt;<br /> &lt;li&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;table&gt;表格&lt;/table&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;fieldset&gt;<br /> &lt;form&gt;<br /> &lt;input /&gt;<br /> &lt;/form&gt;<br />&lt;/fieldset&gt;<br /> &lt;/body&gt;<br />&lt;/html&gt;<br />
  24. 24. 分离表现<br />&lt;h3 style=“border:1px dashed #f00”&gt;标题&lt;/h3&gt;<br />to<br />&lt;style&gt;<br /> h3{<br /> border:1px dashed #f00;<br /> }<br />&lt;/style&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />
  25. 25. 分离脚本<br />&lt;button onclick=“javascript:alert(‘hello world’)”&gt;hello world&lt;/button&gt;<br />to<br />&lt;button id=“someid” &gt;hello world&lt;/button&gt;<br />&lt;script&gt;<br />document.getElementById(‘someid’).onclick = function(){<br /> alert(‘hello world’);<br /> }<br />&lt;/script&gt;<br />
  26. 26. &lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br /> &lt;head&gt;<br /> &lt;title&gt;文档标题&lt;/title&gt;<br /> &lt;style&gt;<br /> h3{color:#f00}<br /> &lt;/style&gt; <br /> &lt;/head&gt;<br /> &lt;body&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;img /&gt;<br />&lt;h4&gt;小标题&lt;/h4&gt;<br />&lt;p&gt;内容&lt;/p&gt; <br />&lt;ul&gt;<br /> &lt;li&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;table&gt;表格&lt;/table&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;fieldset&gt;<br /> &lt;form&gt;<br /> &lt;input id=“someid” /&gt;<br /> &lt;/form&gt;<br />&lt;/fieldset&gt;<br />&lt;script&gt; document.getElementById(‘someid’).onclick=function(){<br />Some coding…<br />}<br />&lt;script&gt;<br /> &lt;/body&gt;<br />&lt;/html&gt;<br />
  27. 27. 将表现和脚本分离到外部文件<br />
  28. 28. &lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br /> &lt;head&gt;<br /> &lt;title&gt;文档标题&lt;/title&gt;<br /> &lt;link type=“text/css” rel=“stylesheet” href=“style.css” /&gt;<br /> &lt;/head&gt;<br /> &lt;body&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;img /&gt;<br />&lt;h4&gt;小标题&lt;/h4&gt;<br />&lt;p&gt;内容&lt;/p&gt; <br />&lt;ul&gt;<br /> &lt;li&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;table&gt;表格&lt;/table&gt;<br />&lt;h3&gt;标题&lt;/h3&gt;<br />&lt;fieldset&gt;<br /> &lt;form&gt;<br /> &lt;input id=“someid” /&gt;<br /> &lt;/form&gt;<br />&lt;/fieldset&gt;<br />&lt;script src=“code.js” type=“text/javascript” &gt;&lt;/script&gt;<br /> &lt;/body&gt;<br />&lt;/html&gt;<br />
  29. 29. 兼容性调整,前端开发赖以生存的基本技能<br />
  30. 30.
  31. 31. 淘宝网用户浏览器分布图,19日摘自哈勃系统<br />
  32. 32. 淘宝网用户屏幕分辨率分布图,19日摘自哈勃系统<br />
  33. 33. 从浏览器趋势可以看出,IE6虽逐步消亡,却依旧强势<br />
  34. 34. 为用户而设计是设计师和前端开发共同的目标<br />
  35. 35. 路漫漫其修远兮……<br />
  36. 36. THX!<br />

×