-
- 素材大小：
- 1.8 MB
- 素材授权：
- 免费下载
- 素材格式：
- .ppt
- 素材上传：
- lipeier
- 上传时间：
- 2018-07-12
- 素材编号：
- 201611
- 素材类别：
- 培训教程PPT
-
素材预览
这是div css教程ppt（部分ppt内容已做更新升级），包括了传统布局与CSS布局，XHTML与CSS基础，CSS网页布局与定位，实例：三栏居中式布局等内容，欢迎点击下载。
div css教程ppt是由红软PPT免费下载网推荐的一款培训教程PPT类型的PowerPoint.
《DIV+CSS布局基础经典》
讲师:赵海海
课程大纲
1.1.1 传统Table布局
传统Table布局方式只是利用了HTML的table元素所具有的零边框特性
因此，Table布局的核心是：
设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。
1.1.2 传统Table布局示意图
1.1.3 Table布局的缺点
设计复杂，改版时工作量巨大
表现代码与内容混合，可读性差
不利于数据调用分析
网页文件量大，浏览器解析速度慢如蜗牛
2.2.0 Web标准的构成（选）
1.2.1 Web标准布局
基于Web标准的网站设计的核心目的：
如何使网页的表现与内容分离！
这样做的好处：
高效率的开发与简单维护
信息跨平台的可用性
降低服务器成本；加快网页解析速度
更良好的用户体验
那么，CSS2.0从真正意义实现了设计代码与内容分离
1.2.2 DIV+CSS布局示意图
真正的表现与内容完全分离，代码可读性强，样式可重复应用
1.2.3 CSS布局代码示例
2.1.1 向Web标准过度 / XHTML 基础
为什么要使用XHTML?
XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。
HTML:更多的被用于网页设计和表现
XHTML:它的初衷就不是为了表现，而是对网页内
容进行结构设计，严格的说它是面向文档
结构的语言，更符合未来的发展要求！
2.1.2 选择合适的DTD
2.1.3 DreamweaverCS3中DTD
2.1.4 XHTML 语法规范
属性名称必须小写
属性值必须使用双引号
不允许使用标签简写
使用id替代name
必须使用结束标签
注意：选择合适的标签（区别与table布局的习惯..）
布局用：<div></div>；
文本用：<h1～6></h1>，<p></p>
图片用：<img></img>
列表用：<ul><ol><li><dl><dt><dd>
数据用：<table></table>
其他的：form，input，select
2.2.1 CSS语法基础
何为CSS（Cascading Style Sheet）？
CSS中文译为层叠样式表。是用于控制网页样式并允许
将样式信息与网页内容分离的一种标记性语言。
即:告诉浏览器，这段样式将应用到哪个对象..
2.2.2 CSS选择器（符）
2.2.3 选择器的声明
<style type=“text/css” >
body，td，th，#header，.one{color:blue;font-size:12px;}
</style>
2.2.4 如何应用CSS到网页中
行内样式表
内部（内嵌）样式表
外部（链接）样式表
导入式样式表
2.2.5 实例代码:CSS按位置的分类
2.2.5 样式优先权问题
2.6 CSS开发环境与调试环境
3.1 被遗忘的主角 DIV
3.2 CSS盒子模型
3.3 文档流及浮动概念
3.4 浮动定位与绝对定位
4.0 一个简单的CSS布局实例
网页制作流程：
效果图—切图——布局（DIV+CSS、table— 嵌入动态程序或模板标签——测试——发布
学习要点及
CSS（Cascading Style Sheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
【本章学习目的】
本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。
5.1 利用CSS 样式表的网页实例
5.1 利用CSS 样式表的网页实例
【例5.5】利用CSS样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如图所示。
该实例主要采用了div标签＋css样式，涉及到的知识点有以下几点：
分析构架：画出构架图；
模块拆分：分别定义Div的CSS样式；
在网页中插入Div标签，在Div中填充网页内容；
总体调整：色彩及内容调整，适当修改CSS样式。
5.2 使用CSS样式表
5.2.1 CSS样式表概述
1、样式表的使用
CSS样式表的使用常用的方法有以下两种：
页面内嵌法。将样式表代码直接写在HTML标签的head区。
外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面<head>和</head>之间用以下代码调用。 <link href="css/master.css" rel="stylesheet" type="text/css" />
5.2 使用CSS样式表
2、CSS样式表语法 选择符 { 属性1：值1；属性2：值2…… }
参数说明：
属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。
5.2.2 在Dreamweaver中定义CSS
1. 创建CSS样式
选择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框.
5.2.2 在Dreamweaver中定义CSS
选择器类型有以下三种：
（1） 类
自定义 CSS 规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类（class）的定久来规定标签中的格式。比如将类的样式mystyle定义于某个标题，那么代码为：
<h1 class=”mystyle”>标题1应用自定义的样式</h1>
（2） 标签
重新定义指定标签的外观，例如：创建或更改 h1 标签的 CSS 样式时，所有用 h1 标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。
5.2.2 在Dreamweaver中定义CSS
（3） 高级
在CSS 选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：body，table，td，用逗号隔开），定义嵌套的样式（td img 空格隔开），定义包含特定 id 属性的标签的格式设置。
2.编辑和删除CSS样式
创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板中，单击“CSS样式”面板右下角的“编辑”按钮，进入“CSS规则定义”的对话框，可进行修改。
某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。
5.3 CSS 样式的应用
5.3.3 样式表的实例应3：方框和边框 样式的应用
在【例5.6】中，插入一幅图像，通过CSS样式的应用，实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的CSS规则，然后将此类应用于某个图像上。
图像边距的设置
图像的边框的设置
5.3.4 样式表的实例应用4：动态链接样式
简单的CSS链接样式可以在页面属性中的“链接”选项卡中设置，5.1节中已经讲过。
在【例5.6】中，建立较为复杂的CSS链接样式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划线等。这里还讲解两个重要的知识点：如何建立CSS链接样式和如何调用外部CSS样式表。
1.建立链接CSS样式
单击“CSS样式”面板中的“新建CSS规则”按钮，选择器类型：高级，单击“选择器”下拉列表，分别选择a:llink（链接后效果）、a:visited（访问后效果）、a:hover（鼠标经过效果），分别定义其样式。
2. 调用CSS样式文件
其它网页要应用刚才建立的CSS样式文件，如何调用呢？单击“CSS样式”面板中的“附加样式表”按钮，弹出“链接外部样式表”的对话框，在“文件/URL”文本框中输入外部CSS文件路径和文件名，添加为选择“链接”选项，将新建的样式文件链接到此文件，如图所示。
5.3.5 样式的实例5：滤镜效果的应用
CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能集合。由于浏览器IE有着广泛的使用范围，因此CSS滤镜也被广大设计者所喜爱。
CSS滤镜可以为样式控制的对象指定特殊效果。
✿注意：CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在单元格或层中，然后对单元格或层应用CSS样式。
Alpha—透明效果
Blur—模糊效果
Chroma—将指定的颜色设置成透明
Dropshadow—投影效果
FlipH—进行水平翻转
FlipV－进行垂直翻转
Glow－发光效果
Grayscale－产生灰阶
Invert－反转底片效果
Light－灯光投影
Mask－遮罩
Shadow－阴影效果
Wave－水平与垂直波动效果
Xray－设置X光效果
3.定义页面属性和定义特定 Id 属性的DIV标签的CSS样式。
4.插入网页元素和调整页面结构
最后，保存网页，浏览网页效果。
本 章 小 结
本章主要介绍了CSS样式的创建与应用，通过CSS样式的使用，使得网页样式更加丰富多彩。
1．CSS的概念： CSS样式、样式的分类、CSS的语法结构等
2．CSS样式的创建
3．CSS样式的应用
div css布局ppt：这是div css布局ppt，包括了盒子模型，布局技术，“上中下”布局，“左中右”布局等内容，欢迎点击下载。
