网站规划建设与管理维护（第三版） 课件 单元 4 构建CSS3样式与网页布局1.pptx

单元4构建CSS3样式与网页布局网站规划建设与管理维护（第三版）

单元4构建CSS3样式与网页布局学习目标1了解CSS3的基本语法与格式掌握CSS3在网页布局中的应用熟悉CSS3各种属性的设置学习一丝不苟的工作态度

单元内容及任务说明任务1体验CSS3样式应用CSS（cascadingstylesheet，层叠样式表）是一组格式设置规则，用于控制Web页面的外观，目前最新版本为CSS3。CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的格式表现而言，CSS能够对网页对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言任务2设置CSS样式任务3应用CSS+Div布局技术在使用CSS样式之前要先定义好CSS样式，这样才能对网页中的内容进行CSS样式的应用。在Dreamweaver中，即使不懂CSS代码，也可以轻松地创建与使用CSS样式表。本任务围绕设置CSS样式开展。CSS布局技术依赖于三个基本概念：定位、浮动和空白边操纵。不同的技术其实没有什么本质的差异，只是实现手段不同。同一种布局让100个网页设计师来做,可能就有100种方法。此任务围绕应用Css+Div布局技术展开。

任务实施-体验CSS外部样式表确定网站建设的目的确定网站建设的目的网站结构总体策划010203任务1了解网站整体规划CSS的语法构建选择器应用CSS样式到网页中

任务实施-体验CSS外部样式表

相关知识CSS的语法结构选择器应用CSS样式到网页中010203

相关知识

任务实施-CSS样式应用确定网站建设的目的确定网站建设的目的网站结构总体策划010203任务2设置CSS样式使用CSS创建个性化鼠标使用CSS3滤镜设置CSS样式的过渡属性

任务实施-CSS样式应用

任务实施-CSS样式应用

任务实施-CSS样式应用

相关知识新建CSS样式编辑CSS样式设置CSS样式的类型属性设置CSS样式的背景属性设置CSS样式的区块属性0102030504

相关知识设置CSS样式的方框属性设置CSS样式的边框属性设置CSS样式的列表属性设置CSS样式的定位属性设置CSS样式的宽展属性060708100912设置CSS样式的过渡属性11CSS和CSS3的异同

相关知识

相关知识

相关知识

相关知识

相关知识

相关知识

相关知识

任务实施班级简历网页布局确定网站建设的目的确定网站建设的目的0102任务3应用CSS+Div布局技术基于浮动的固定布局班级简介网页布局

任务实施-班级简历网页布局

任务实施-班级简历网页布局

任务实施-班级简历网页布局

相关知识CSS盒模型让布局居中流体布局和弹性布局010203

相关知识

本章小结自从CSS出现之后，HTML终于摆脱了杂乱无章的描述手法，开始将页面内容与样式分离。CSS符合W3C标准，最大限度地保证网站不会因为网络应用的升级而被淘汰。其极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。相对于传统的table，采用CSS+Div技术的网页，对于搜索引擎的收录更加友好。CSS的关键在于其与HTML技术及JavaScript等脚本语言的融合，实际上还有一种融合方式可供选择，即XML+XSL+JavaScript，但是XSL（可扩展样式表语言）相较于CSS过于复杂，不太容易上手。

谢谢！