文档介绍：LOGO
中软培训中心
CSS网站布局与开发技巧
主讲:李宏瑞
开篇
欢迎大家和我一起学习CSS技术
学习时间:
3天,24学时
第一章 Web标准与CSS布局
第一章 Web标准与CSS布局
第一章 Web标准与CSS布局
什么Web标准?
定义:Web标准是由W3C(world wide web consortium)和其他标准化组织
制定的一套规范集合,包含一系列的标准。如:HTML、XHTML、
JavaScript、CSS等
目的:创建We标准的目的是在于创建一个统一的用语Web表现层的技术标
准,以便于通过不同的浏览器或终端设备向最终用户展示信息内容
Web表现层技术:指的就是将信息展示给用户并提供给用户交互行为的技术
RIA(Rich Application)富应用
W3C Web标准 Macromedia Flash Microsoft WPF
(唯一跨平台)
第一章 Web标准与CSS布局
Web标准的构成:
结构(Structure)、表现(Presentation)、行为(Behavior)
结构:结构对网页中用到的信息进行整理与分类
HTML:Web的基本描述语言
XML:最初的设计初衷是弥补HTML的不足,逐渐用于网络数据的转换与描述
XHTML:HTML向XML的过渡语言
表现:表现技术用于对已被格式化的信息进行显示上的控制
CSS(Cascading Style Sheets)层叠式式样单
行为:指对整个文档内部的一个模型定义及交互行为的编写,用于编写用户可进
行交互式操作的文档
DOM:浏览器与内容结构之间的沟通接口
ECMAScript:JavaScript
第一章 Web标准与CSS布局
什么样的网页符合WEB标准?
真正符合WEB标准的网页设计是能够灵活使用WEB标准对WEB内容进行结
构、表现与行为的分离——即表现与内容分离技术
WEB标准的优点:
1、高效率的开发与简单维护
2、信息跨平台的恶可用性
3、降低服务器成本
4、便于改版
5、加快网页解析速度
6、与未来兼容
7、更良好的用户体验
第一章 Web标准与CSS布局
:
1、浏览器支持完善
2、表现与结构分离
3、样式设计功能强大
4、继承性能优越
传统TABLE布局(代码):
第一章 Web标准与CSS布局
(代码)
Css代码:
#content{
Float:right;/*div右对齐*/
Margin-top:10px; /*div有10像素的上外边距*/
Margin-right:20px; /*同上右外边距*/
Margin-bottom:10px; /*同上下外边距*/
Margin-left:10px; /*同上右外边距*/
Background-color:blue; /*背景色为蓝色*/
Text-align:center; /*内容居中*/
Line-height:160%;/行高为默认值的160%/
Width:50%; /*对象宽度为页面的50%*/
}
第一章 Web标准与CSS布局
表格是鸡肋吗?
答案是否定的。恰恰表格是一道大餐,我们要记住一句话:使用表格作为网页排版,布局页
面元素是不合理的,表格是用来显示数据的。
为什么不直接过渡到XML?
XML是未来数据的描述格式,如果技术成熟XML会取代XHTML/HTML成为未来构建实现的
重要一环。但目前,
1、XML在实现网站表现层上有一定的困难
2、使用XML+CSS或XSTL技术构建网站技术上难度较高
3、XML的自由标记结构对网站设计者提高了门槛
4、浏览器对XML的直接支持也不太完善
第二章 XHTML与CSS基础
第二章 XHTML与CSS基础