Html&css培训 舒克
Upcoming SlideShare
Loading in...5
×
 

Html&css培训 舒克

on

  • 2,337 views

 

Statistics

Views

Total Views
2,337
Views on SlideShare
2,159
Embed Views
178

Actions

Likes
15
Downloads
182
Comments
0

6 Embeds 178

http://wiki.ued.taobao.net 103
http://www.nodejser.com 68
http://old.unicac.cn 3
http://hpf1908.gotoip1.com 2
http://mzhou.me 1
http://cache.baidu.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Html&css培训 舒克 Html&css培训 舒克 Presentation Transcript

  • 新人培训系列课程一 舒克
  • HTML CSS
  • 编辑器• DreamWeaver• Vim• Editplus/Notepad++• WebStrom/Aptana/Eclipse View slide
  • 主要内容 HTML 概述 标签&语义 代码规范 CSS 常用语法 CSS Sprites 技巧 制作流程 经验分享 图片质量 View slide
  • Html 概述 标签&语义 代码规范
  • HTML• 超文本标记语言( HyperText Mark-up Language) • 元素(element) • 属性(attribute,property)
  • 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工作草案
  • Html 概述 标签&语义 代码规范
  • 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>
  • <head></head> title  必需且唯一 charset  <meta charset="gbk" /> <link /> <script></script> <style></style>  关注 网页渲染课程 base  <base target=“_blank”>
  • 语义化 概念  用合理HTML标记以及其特有的属性去格式化 文档内容 优点  提升可访问性  搜索引擎优化(SEO)
  • 语义化标签 列表元素  dl > dt , dd ; ul , ol > li 表格  table > thead,tfoot ,tbody > tr > th,td 标题 段落  h1~h6 , p
  • Oh, No! 不推荐使用的标签  b , i , u, big , small 不能使用的标签  center , menu , layer , marquee , font 不能使用的属性  align , bgcolor , bgsound ,link , alink , vlink
  • 标签和属性 label 和 input 组合 按钮 <button> <input /> 不推荐: 推荐:
  • Html 概述 标签&语义 代码规范
  • 标签嵌套规则 概念  块级元素 (block) div h1~h6 ul ol li dt dd dl form p …  行内(内联)元素 (inline) span strong em a img input button select …
  • 嵌套规则 基本原则  块级元素能嵌套所有内联元素  行内元素不能嵌套块级元素 注意:  以下块级元素不要再嵌套块级元素 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
  • 代码书写规范 标签和属性名称采用小写 <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>
  • 注释 模块前后注释  注释内容不能以>或->开头,也不能包含两个连续的中划线--  注释占用文件大小,请不要使用大篇幅的注释 (as short as possible, as long as necessary.) 代码变更的注释
  • CSS 概述 语法 Css Sprites
  • Cascading Style Sheet层叠样式表
  • CSS概述 CSS 历史  CSS 1 1996.12成为推荐标准(字体,颜色、空白边)  CSS 2 1998.5成为推荐标准 (浮动,定位,选择器)  CSS 2.1 2002年修订(伪类,属性选择器)  CSS3 未正式发布
  • 针对不同设备的CSS代码 Link标签的media属性 <link media=“screen” /> 样式表内的写法 @media print { #header{border:1px solid #000} }
  • 不同设备的样式
  • 层叠 层叠Cascading  浏览者自定义样式  内部样式表  外部样式表  浏览器缺省设置
  • CSS 概述 语法 Css Sprites
  • CSS语法 选择器 Selector 属性 Property 属性值 Value  selector { property:value; }
  • CSS Selector 选择器 Selector  元素选择器 h1  类选择器 .classname  id选择器 #id  全局选择器 *  继承选择器 div p  选择器分组 h1,h2  伪类选择器 :hover  CSS 属性选择器 input[type=“button”] ie6
  • CSS Selector 选择器优先级 表格中A、B、C、D分别代表四个等级A为最高级,D为最底级。 也可以理解为数学中的千位,百位,十位,个位,D就代表个位。
  • CSS 属性 属性 Prperty  继承 inheritance Text-related properties that are inherited 文本样式相关的属性会继承 List-related properties that are inherited 列表样式相关属性会继承 The color property is inherited 颜色属性会继承
  • 常用会继承的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
  • CSS 属性值 属性值 Value  默认值 width:auto;  预定值 color:red;  设定值 color:#f60;
  • CSS 属性值 属性值 Value  font-size和line-height : em ,px ,%  padding,margin,border-width缩写 (top, right, bottom, left)  font的缩写 (必有项font-size,font-family)
  • CSS 属性值 position and z-index属性  static 默认值  relative 相对定位  absolute 绝对定位  fixed 可视区域定位/屏幕定位
  • CSS 属性值 overflow属性  visible 始终可见 (默认值)  hidden 溢出隐藏 (子元素有绝对定位时慎用)  auto 自动 ,溢出时出现滚动条  scroll 始终出现滚动条
  • 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、IE7+支持 */ _color:red; /* IE6支持 */ *color:red; /* IE6、IE7支持 */ *+color:red; /* IE7支持 */ color:red0; /* IE8支持 */ color:red9; /* IE6、IE7、IE8 、IE9支持 */}
  • 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 选择 存储为 复制 新建图层 粘贴 区域 web格式  拷贝所选区域:Ctrl+Shift+C 和 Ctrl+C 的使用  制作CSS Sprites 合成图片时可打开辅助网格,用于快速拖 放图片到指定位置 。 快捷键 ctrl+’; 设定:编辑->首选项->参考线,网格和切片  利用PS的动作可以快捷的完成上述过程
  • 技巧&经验 全局观 切图技巧 图片质量
  • 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/-/the-difference-between-png24-and-png32_49/
  • PNG的优化 去除PNG图像里面不必要的块信息 如:GAMMA块 工具  Pngcrush http://pmt.sourceforge.net/pngcrush/  PngOut http://advsys.net/ken/utils.htm  OptiPNG http://optipng.sourceforge.net
  • JPG的优化 剥离JPG的元数据  注释  应用程序定义的内部信息  EXIF 工具  jpegtran http://jpegclub.org
  • 感谢 TPS
  • 参考资料 https://developer.mozilla.org/cn/HTML https://developer.mozilla.org/en/CSS_Reference 《高性能网站建设进阶指南》 - Steve Souders
  • 感谢大家