新人培训系列课程一    舒克
HTML   CSS
编辑器•   DreamWeaver•   Vim•   Editplus/Notepad++•   WebStrom/Aptana/Eclipse
主要内容   HTML    概述     标签&语义           代码规范   CSS    常用语法   CSS Sprites   技巧    制作流程   经验分享          图片质量
Html   概述   标签&语义   代码规范
HTML•   超文本标记语言( HyperText Mark-up Language)    • 元素(element)    • 属性(attribute,property)
HTML 版本            • 在1993年6月发为互联网工程工作小组 (IETF)工作草案发布HTML 1.0      (并非标准)            • 1995年11月作为RFC 1866发布,在RFC 2854于2000...
Html   概述   标签&语义   代码规范
Doctype            • <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN"              "http://www.w3.org/TR/html4/strict.dtd...
<head></head>   title       必需且唯一   charset       <meta charset="gbk" />   <link /> <script></script> <style></style>...
语义化   概念       用合理HTML标记以及其特有的属性去格式化        文档内容   优点       提升可访问性       搜索引擎优化(SEO)
语义化标签   列表元素       dl > dt , dd ; ul , ol > li   表格       table > thead,tfoot ,tbody > tr > th,td   标题 段落       h1~h...
Oh, No!   不推荐使用的标签       b , i , u, big , small   不能使用的标签       center , menu , layer , marquee , font   不能使用的属性    ...
标签和属性   label 和 input 组合   按钮 <button> <input />    不推荐:    推荐:
Html   概述   标签&语义   代码规范
标签嵌套规则   概念       块级元素 (block)        div h1~h6 ul ol li dt dd dl form p …       行内(内联)元素 (inline)        span strong e...
嵌套规则   基本原则        块级元素能嵌套所有内联元素        行内元素不能嵌套块级元素   注意:        以下块级元素不要再嵌套块级元素       h1~h6 p dt address附:(X)HTML S...
代码书写规范   标签和属性名称采用小写    <h1></h1> <H1></H1>   属性值用引号 ,自定义属性用”data-”开头     <a href=“http://www.taobao.com”></a>     <a hr...
注释   模块前后注释       注释内容不能以>或->开头,也不能包含两个连续的中划线--       注释占用文件大小,请不要使用大篇幅的注释    (as short as possible, as long as necessa...
CSS   概述   语法   Css Sprites
Cascading Style Sheet层叠样式表
CSS概述   CSS 历史       CSS 1 1996.12成为推荐标准(字体,颜色、空白边)       CSS 2 1998.5成为推荐标准 (浮动,定位,选择器)       CSS 2.1 2002年修订(伪类,属性选择...
针对不同设备的CSS代码   Link标签的media属性    <link media=“screen” />   样式表内的写法    @media print    {        #header{border:1px solid ...
不同设备的样式
层叠   层叠Cascading       浏览者自定义样式       内部样式表       外部样式表       浏览器缺省设置
CSS   概述   语法   Css Sprites
CSS语法   选择器 Selector   属性        Property   属性值 Value       selector { property:value; }
CSS Selector   选择器 Selector       元素选择器 h1       类选择器 .classname       id选择器 #id       全局选择器 *       继承选择器 div p    ...
CSS Selector   选择器优先级    表格中A、B、C、D分别代表四个等级A为最高级,D为最底级。    也可以理解为数学中的千位,百位,十位,个位,D就代表个位。
CSS 属性   属性 Prperty       继承 inheritance        Text-related properties that are inherited        文本样式相关的属性会继承        Li...
常用会继承的CSS属性border-collapse, border-spacing, caption-side, color,cursor, direction, empty-cells, font-family, font-size,fon...
CSS 属性值   属性值 Value       默认值 width:auto;       预定值 color:red;       设定值 color:#f60;
CSS 属性值   属性值 Value       font-size和line-height : em ,px ,%       padding,margin,border-width缩写        (top, right, bot...
CSS 属性值   position and z-index属性       static     默认值       relative   相对定位       absolute   绝对定位       fixed      可视...
CSS 属性值   overflow属性        visible 始终可见 (默认值)        hidden 溢出隐藏 (子元素有绝对定位时慎用)        auto 自动 ,溢出时出现滚动条        scrol...
CSS 属性值   vertical-align属性        垂直居中对齐        用于inline-block元素时,该元素后的         inline元素将对该元素垂直居中        用于th,td时,内部内容...
CSS 属性值display:none   visibility:hidden
CSS 属性值   CSS属性值参考    https://developer.mozilla.org/en/CSS_Reference
CSS hack良好结构的代码不需要HACK当**不可避免的时候: 闭上眼,享受!#test{         color:red; /* 所有浏览器都支持 */         color:red !important;/* Firefox、...
CSS   概述   语法   Css Sprites
CSS Sprites   优点    1.减少HTTP请求,降低服务器负担    2.文件体积更小 1+1 < 2   缺点    1.开发/维护成本高    2.扩展性差
CSS Sprites:用还是不用   页面访问量   页面生命周期   开发所耗成本
如何解决维护成本高的问题   按模块 or 组件合成图片   按布局样式合成图片    repeat-x , repeat-y, no-repeat
模块化的结构和样式   分离       布局和模块的分离    不推荐 .col-sub .hd{…}    推荐 .module-new .hd {…}
SASS:可编程的CSS          变量  http://sass-lang.com/
SASS:可编程的CSS           嵌套   http://sass-lang.com/
SASS:可编程的CSS          混合  http://sass-lang.com/
SASS:可编程的CSS          继承  http://sass-lang.com/
快速编写结构代码•   Zen Coding    结果代码    学习:http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/ ...
技巧&经验   全局观   切图技巧   图片质量
全局观念   页面的构成元素       布局       模块       内容
布局
模块拆分
整理公用结构和样式左图右文字的内容布局
模块:标题+内容
页面制作流程                   确定公用通览设计   寻找现有               模块   开始              布局    结构 稿      资源                拆分   工作     ...
技巧&经验   全局观+制作流程   切图技巧   图片质量
切图技巧   主要工具 Photoshop        选择                                  存储为                  复制     新建图层      粘贴        区域      ...
技巧&经验   全局观   切图技巧   图片质量
GIF JPG PNG
需要了解的图像知识   图形 VS 照片   真彩色图像VS调色板图像   透明 和 alpha通道(RGBA)   隔行扫描
GIF   Graphics Interchange Format    图像互换格式   调色板图像   透明:允许一个二进制类型的透明度   支持动画   无损   逐行扫描 (LZW压缩算法)
JPG & JPEG   Joint Photographic Expert Group   真彩色图像   不支持透明   不支持动画   有损   支持隔行扫描
PNG   PNG is Not GIF?   Portable Network Graphics    便携式网络照片
PNG   支持真彩色和调色板   支持完全的alpha透明   支持动画但无跨浏览器解决方案   无损   支持隔行扫描
PNG   PNG8 调色板色   PNG24 真彩色不包括alpha透明通道   PNG32 真彩色包括alpha透明通道Photoshop存储为WEB格式没有PNG32?http://www.deepbluesky.com/blog/...
PNG的优化   去除PNG图像里面不必要的块信息    如:GAMMA块   工具       Pngcrush   http://pmt.sourceforge.net/pngcrush/       PngOut     http...
JPG的优化   剥离JPG的元数据       注释       应用程序定义的内部信息       EXIF   工具       jpegtran   http://jpegclub.org
感谢 TPS
参考资料   https://developer.mozilla.org/cn/HTML   https://developer.mozilla.org/en/CSS_Reference   《高性能网站建设进阶指南》 - Steve S...
感谢大家
Html&css培训 舒克
Upcoming SlideShare
Loading in...5
×

Html&css培训 舒克

2,456

Published on

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,456
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
195
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Html&css培训 舒克

  1. 1. 新人培训系列课程一 舒克
  2. 2. HTML CSS
  3. 3. 编辑器• DreamWeaver• Vim• Editplus/Notepad++• WebStrom/Aptana/Eclipse
  4. 4. 主要内容 HTML 概述 标签&语义 代码规范 CSS 常用语法 CSS Sprites 技巧 制作流程 经验分享 图片质量
  5. 5. Html 概述 标签&语义 代码规范
  6. 6. HTML• 超文本标记语言( HyperText Mark-up Language) • 元素(element) • 属性(attribute,property)
  7. 7. HTML 版本 • 在1993年6月发为互联网工程工作小组 (IETF)工作草案发布HTML 1.0 (并非标准) • 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发HTML 2.0 布之后被宣布已经过时HTML 3.2 •1996年1月14日,W3C推荐标准HTML 4.0 •HTML 4.0 – 1997, W3C推荐标准HTML 4.01 •1999年12月24日XHTML 1.0 •发布于2000年1月26日XHTML 1.1 •于2001年5月31日发布HTML 5.0 •201*,W3C工作草案
  8. 8. Html 概述 标签&语义 代码规范
  9. 9. Doctype • <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01标准doctype兼容HTML5 •<!DOCTYPE html>
  10. 10. <head></head> title  必需且唯一 charset  <meta charset="gbk" /> <link /> <script></script> <style></style>  关注 网页渲染课程 base  <base target=“_blank”>
  11. 11. 语义化 概念  用合理HTML标记以及其特有的属性去格式化 文档内容 优点  提升可访问性  搜索引擎优化(SEO)
  12. 12. 语义化标签 列表元素  dl > dt , dd ; ul , ol > li 表格  table > thead,tfoot ,tbody > tr > th,td 标题 段落  h1~h6 , p
  13. 13. Oh, No! 不推荐使用的标签  b , i , u, big , small 不能使用的标签  center , menu , layer , marquee , font 不能使用的属性  align , bgcolor , bgsound ,link , alink , vlink
  14. 14. 标签和属性 label 和 input 组合 按钮 <button> <input /> 不推荐: 推荐:
  15. 15. Html 概述 标签&语义 代码规范
  16. 16. 标签嵌套规则 概念  块级元素 (block) div h1~h6 ul ol li dt dd dl form p …  行内(内联)元素 (inline) span strong em a img input button select …
  17. 17. 嵌套规则 基本原则  块级元素能嵌套所有内联元素  行内元素不能嵌套块级元素 注意:  以下块级元素不要再嵌套块级元素 h1~h6 p dt address附:(X)HTML Strict 下的嵌套规则http://www.junchenwu.com/2007/01/allowed_nesting_of_elements_in_html_4_strict_and_xhtml_10_strict.html
  18. 18. 代码书写规范 标签和属性名称采用小写 <h1></h1> <H1></H1> 属性值用引号 ,自定义属性用”data-”开头 <a href=“http://www.taobao.com”></a> <a href=http://www.taobao.com></a> 标签必须闭合 <li>Text</li> <li>Text <br/> <br>
  19. 19. 注释 模块前后注释  注释内容不能以>或->开头,也不能包含两个连续的中划线--  注释占用文件大小,请不要使用大篇幅的注释 (as short as possible, as long as necessary.) 代码变更的注释
  20. 20. CSS 概述 语法 Css Sprites
  21. 21. Cascading Style Sheet层叠样式表
  22. 22. CSS概述 CSS 历史  CSS 1 1996.12成为推荐标准(字体,颜色、空白边)  CSS 2 1998.5成为推荐标准 (浮动,定位,选择器)  CSS 2.1 2002年修订(伪类,属性选择器)  CSS3 未正式发布
  23. 23. 针对不同设备的CSS代码 Link标签的media属性 <link media=“screen” /> 样式表内的写法 @media print { #header{border:1px solid #000} }
  24. 24. 不同设备的样式
  25. 25. 层叠 层叠Cascading  浏览者自定义样式  内部样式表  外部样式表  浏览器缺省设置
  26. 26. CSS 概述 语法 Css Sprites
  27. 27. CSS语法 选择器 Selector 属性 Property 属性值 Value  selector { property:value; }
  28. 28. CSS Selector 选择器 Selector  元素选择器 h1  类选择器 .classname  id选择器 #id  全局选择器 *  继承选择器 div p  选择器分组 h1,h2  伪类选择器 :hover  CSS 属性选择器 input[type=“button”] ie6
  29. 29. CSS Selector 选择器优先级 表格中A、B、C、D分别代表四个等级A为最高级,D为最底级。 也可以理解为数学中的千位,百位,十位,个位,D就代表个位。
  30. 30. CSS 属性 属性 Prperty  继承 inheritance Text-related properties that are inherited 文本样式相关的属性会继承 List-related properties that are inherited 列表样式相关属性会继承 The color property is inherited 颜色属性会继承
  31. 31. 常用会继承的CSS属性border-collapse, border-spacing, caption-side, color,cursor, direction, empty-cells, font-family, font-size,font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-type, list-style, orphans, pitch-range, pitch, quotes, text-align, text-indent, text-decoration, visibility,white- space, word-spacing
  32. 32. CSS 属性值 属性值 Value  默认值 width:auto;  预定值 color:red;  设定值 color:#f60;
  33. 33. CSS 属性值 属性值 Value  font-size和line-height : em ,px ,%  padding,margin,border-width缩写 (top, right, bottom, left)  font的缩写 (必有项font-size,font-family)
  34. 34. CSS 属性值 position and z-index属性  static 默认值  relative 相对定位  absolute 绝对定位  fixed 可视区域定位/屏幕定位
  35. 35. CSS 属性值 overflow属性  visible 始终可见 (默认值)  hidden 溢出隐藏 (子元素有绝对定位时慎用)  auto 自动 ,溢出时出现滚动条  scroll 始终出现滚动条
  36. 36. CSS 属性值 vertical-align属性  垂直居中对齐  用于inline-block元素时,该元素后的 inline元素将对该元素垂直居中  用于th,td时,内部内容将垂直居中
  37. 37. CSS 属性值display:none visibility:hidden
  38. 38. CSS 属性值 CSS属性值参考 https://developer.mozilla.org/en/CSS_Reference
  39. 39. CSS hack良好结构的代码不需要HACK当**不可避免的时候: 闭上眼,享受!#test{ color:red; /* 所有浏览器都支持 */ color:red !important;/* Firefox、IE7+支持 */ _color:red; /* IE6支持 */ *color:red; /* IE6、IE7支持 */ *+color:red; /* IE7支持 */ color:red0; /* IE8支持 */ color:red9; /* IE6、IE7、IE8 、IE9支持 */}
  40. 40. CSS 概述 语法 Css Sprites
  41. 41. CSS Sprites 优点 1.减少HTTP请求,降低服务器负担 2.文件体积更小 1+1 < 2 缺点 1.开发/维护成本高 2.扩展性差
  42. 42. CSS Sprites:用还是不用 页面访问量 页面生命周期 开发所耗成本
  43. 43. 如何解决维护成本高的问题 按模块 or 组件合成图片 按布局样式合成图片 repeat-x , repeat-y, no-repeat
  44. 44. 模块化的结构和样式 分离  布局和模块的分离 不推荐 .col-sub .hd{…} 推荐 .module-new .hd {…}
  45. 45. SASS:可编程的CSS 变量 http://sass-lang.com/
  46. 46. SASS:可编程的CSS 嵌套 http://sass-lang.com/
  47. 47. SASS:可编程的CSS 混合 http://sass-lang.com/
  48. 48. SASS:可编程的CSS 继承 http://sass-lang.com/
  49. 49. 快速编写结构代码• Zen Coding 结果代码 学习:http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/ 利用其他工具的自动完成功能
  50. 50. 技巧&经验 全局观 切图技巧 图片质量
  51. 51. 全局观念 页面的构成元素  布局  模块  内容
  52. 52. 布局
  53. 53. 模块拆分
  54. 54. 整理公用结构和样式左图右文字的内容布局
  55. 55. 模块:标题+内容
  56. 56. 页面制作流程 确定公用通览设计 寻找现有 模块 开始 布局 结构 稿 资源 拆分 工作 样式
  57. 57. 技巧&经验 全局观+制作流程 切图技巧 图片质量
  58. 58. 切图技巧 主要工具 Photoshop 选择 存储为 复制 新建图层 粘贴 区域 web格式  拷贝所选区域:Ctrl+Shift+C 和 Ctrl+C 的使用  制作CSS Sprites 合成图片时可打开辅助网格,用于快速拖 放图片到指定位置 。 快捷键 ctrl+’; 设定:编辑->首选项->参考线,网格和切片  利用PS的动作可以快捷的完成上述过程
  59. 59. 技巧&经验 全局观 切图技巧 图片质量
  60. 60. GIF JPG PNG
  61. 61. 需要了解的图像知识 图形 VS 照片 真彩色图像VS调色板图像 透明 和 alpha通道(RGBA) 隔行扫描
  62. 62. GIF Graphics Interchange Format 图像互换格式 调色板图像 透明:允许一个二进制类型的透明度 支持动画 无损 逐行扫描 (LZW压缩算法)
  63. 63. JPG & JPEG Joint Photographic Expert Group 真彩色图像 不支持透明 不支持动画 有损 支持隔行扫描
  64. 64. PNG PNG is Not GIF? Portable Network Graphics 便携式网络照片
  65. 65. PNG 支持真彩色和调色板 支持完全的alpha透明 支持动画但无跨浏览器解决方案 无损 支持隔行扫描
  66. 66. PNG PNG8 调色板色 PNG24 真彩色不包括alpha透明通道 PNG32 真彩色包括alpha透明通道Photoshop存储为WEB格式没有PNG32?http://www.deepbluesky.com/blog/-/the-difference-between-png24-and-png32_49/
  67. 67. PNG的优化 去除PNG图像里面不必要的块信息 如:GAMMA块 工具  Pngcrush http://pmt.sourceforge.net/pngcrush/  PngOut http://advsys.net/ken/utils.htm  OptiPNG http://optipng.sourceforge.net
  68. 68. JPG的优化 剥离JPG的元数据  注释  应用程序定义的内部信息  EXIF 工具  jpegtran http://jpegclub.org
  69. 69. 感谢 TPS
  70. 70. 参考资料 https://developer.mozilla.org/cn/HTML https://developer.mozilla.org/en/CSS_Reference 《高性能网站建设进阶指南》 - Steve Souders
  71. 71. 感谢大家
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×