CSS布局设计精选.pptVIP

CSS布局设计 Web开发技术的变革 Web标准 HTML/XHTML CSS布局 Ajax技术 Web标准 Web标准就是 结构化的语言(XHTML和XML), 解释性语言(CSS)， 对象模型(DOM)和脚本语言(ECMAScript) 更形象的理解就是 结构，表现和行为相分离。 为什么要使用Web标准 易于协同开发和维护 代码量减少，降低了带宽成本 提高网站易用性和用户体验 与未来浏览器和手持设备兼容 搜索引擎优化(SEO) CSS( Cascading Style Sheet ) 层叠样式表单 1994 一种标记性语言 用于（增强）控制网页样式 将样式信息与网页内容分离 从 Netscape 4 和 IE 4 开始支持, W3C 标准 Table布局与CSS布局 传统网站 CSS网站 网站重构 使用web标准来重构原来网站的Html代码 网站重构 使用web标准来重构原来网站的Html代码 什么样的网站符合Web标准 校验首页 /QA/Tools/#validators CSS校验页 /css-validator/ HTML/XHMTL校验页 /checklink CSS 开发工具 —— Dreamweaver CSS 开发工具——Firefox Web Developer Toolbar 调整CSS, 预览不同媒体的 CSS 效果 FireBug 探测 HTML 元素源码, 动态修改 CSS Web标准与Web2.0 创意高于一切 良好的用户体验 用户创造内容 推特网 豆瓣网 Flickr相册 XHTML 与 CSS 基础 常用XHTML标签 文本控制 图像和对象 列表 表格 表单 链接和表现 XHTML与HTML的重要区别 XHTML中标记名称必须小写 2. XHTML中属性名称必须小写 3. XHTML中标记必须严格嵌套 4. XHTML中标记必须封闭 XHTML与HTML的重要区别 5. XHTML中属性值用双引号括起来 6. XHTML中属性值必须用完整形式 XHTML文档三种类型 Transitional Strict Frameset CSS语法结构 id 与 class的区别 复合选择 “交集”选择器 div.special {……} div#special {……} “并集”选择器 div, h1.first, p.specia {……} 后代选择器 div h1.first span.firstLetter{……} 网页中引入CSS的方法 行间样式表 h1 style=color:white;background-color:blue This is a line of Text. /h1 网页中引入CSS的方法 2.内部样式表 网页中引入CSS的方法 3.外部样式表 网页中引入CSS的方法 4.导入 CSS属性参考手册 CSS2.0 CSS3.0 “CSS禅意花园” * * 结构、表现和行为 DTD (Document Type Definition) 样式1 样式2 样式3 inline internal style type=text/css h1{ color:white; background-color:blue } /style external link href=mystyle.css rel=stylesheet type=text/css / import style type=text/css @importmystyle.css; /style *