dreamweavercs5CSS层叠样式表和Spry面板的应用解析

定义AP Div的属性
• 在插入AP Div后，可以通过在AP Div属性面板中 定义相应的参数来定义AP Div的显示效果。当选 择单个AP Div和同时选择多个AP Div时，属性面 板的显示参数也会有所区别。下面分别讲解具体 的属性及其含义。
定义AP Div的属性
• 1．单个AP Div的属性
• 执行下列操作之一，选择AP Div。
定义AP Div的属性
• 2．多个AP Div的属性
使用AP元素面板
• 使用AP元素面板可以方便地对AP Div进行操作，例如选择AP Div、定义AP Div的可见性等。下面进行详细讲解。
插入Div标签
• Div标签本身没有任何表现属性，如果要使Div标 签显示某种效果，或者显示在某个位置，就要为 Div标签定义CSS样式，插入Div标签的方法如下所 示。
编辑Div标签
• 插入Div标签后，可以对Div标签进行各种操作， 包括选择、剪切、复制和粘贴等。下面分别进行 讲解。 • 1．选择Div标签
相邻和嵌套的Div标签
• 2．嵌套的Div标签
• 执行以下操作之一，可以制作嵌套的Div标签。
AP Div简介
• AP Div是使用了CSS样式中的绝对定位属性的Div 标签。在Dreamweaver CS3中，可以通过拖拽鼠标 的方式，在文档的任意位置制作AP Div，制作的 AP Div之间可以互相重叠，但是在默认情况下， 所有的AP Div之间并没有嵌套关系。如果要使AP Div之间可以互相嵌套，就要在首选参数中更改相 应的设置。在AP Div中可以定义标签宽度高度， 以及位置等属性。在Dreamweaver中可以使用AP Div进行布局。在布局的时候，还可以使用图层面 板来定义图层是否可以重叠等。在Dreamweaver中 ，可以在AP Div和表格之间进行互换。
。
•
执行以下操作之一，粘贴Div标签。
编辑Div标签
• 4．删除Div标签
• 删除Div标签的步骤，如下所示。 • 在“设计”视图中，选择要删除的Div标签。 • 执行以下操作之一，删除Div标签。
相邻和嵌套的Div标签
• Div标签和表格类似，在没有定义任何样式和行为 时wenku.baidu.com默认换行显示，其中嵌套的Div标签的显示和 插入的位置有关。下面分别进行讲解。 • 1．相邻的Div标签
新建CSS的方法
• 1窗口——css样式
• 2快捷键shift+F11 • 3页面空白处单击鼠标右键，在弹出的快捷菜单 中选择CSS样式——新建
CSS样式的分类
• 类：自定义css规则。可以将样式属性应用到任何 文本范围或文本块。所有样式均以（.）开头。
• 标签：HTML标签规则重定义特定标签（如p或者 hl）的格式。 • 复合标签
CSS面板的介绍
• • • • • • 1新建css规则 2编辑样式 3删除规则 4只显示设置属性 5显示列表视图 6显示类别视图
CSS规则定义
• 一类型
• font-family:文本的字体 • font-size：文字尺寸大小 • font-weight：字体的粗细效果，正常=400 粗体=700 • font-style：设置字体风格 • font-variant：设置文本的小型大写字母
• • • • • •
3区块 4方框 5边框 6列表 7定位 8扩展
滤镜
• • • • • • • • • • • Alpaha 透明滤镜 Blur 模糊滤镜 Mask 遮罩 Xray x射线滤镜 Glow 光晕滤镜 Dropshadow 阴影滤镜 Gray 照片由彩色变为白色调 Invert 图片产生照片底片效果 Shawdow 阴影效果 Color 指定阴影的颜色 Direction 指定阴影的方向
• 执行下列操作之一，选择Div标签。
编辑Div标签
• 2．剪切和复制Div标签
• 剪切和复制Div标签的步骤，如下所示。 • 在“设计”视图中，选择Div标签。
•
执行以下操作之一，剪切或复制Div标签。
编辑Div标签
• 3．粘贴Div标签
• 粘贴Div标签的步骤，如下所示。 • 在“设计”视图中，选择粘贴Div标签的位置
dreamweavercs5
CSS层叠样式表和Spry面板的应用
教学重点：本章主要向学生介绍CSS的设置，以及 Div的插入，spry面板的应用等。 教学目标： 1css的设置 2 Div的插入 3 spry面板的应用
CSS的简介
• CSS的中文意思为层叠样式表，简称样式表。
• 所谓样式就是层叠样式表，用来控制一个文档中 的某一文本区域外观的一组格式属性。CSS样式 可以用来一次对若干文档所有的样式进行控制。
使用Div元素
• Div元素用来在页面中定义一个区域，使用CSS样 式控制Div元素的表现效果（关于CSS样式的内容 ，将在后面的章节中详细讲解），在Div元素中可 以包含文本、图像、表格以及其他各种页面内容 。在Dreamweaver CS3中，可以插入两种Div元素 ：一种为“Div标签”；另一种为AP Div。下面进 行详细讲解。
• • • •
line-height：控制行与行之间的垂直距离 text-transform：控制字母vde大小写 text-decoration：控制链接文本的显示状态。 color：颜色
2背景
background-color:背景颜色 background-image：背景图像 background-repeat：是否重复 background-attachment：确定背景图像固 定在其原始位置还是随内容一起滚动。 • background-positionx：水平 • background-positiony：垂直 • • • •
定义AP Div的首选参数
• 在讲解使用AP Div之前，首先要定义AP Div显示的首选参数，其中包括AP Div的显示属性、大小、背景等。当使用相关命令插入AP Div时，新建的AP Div将以首选参数中定义的属性显示，定义AP Div首选参数的具体操作如下所 示。
插入AP Div
• AP Div可以使用菜单中的命令插入，也可以选择 插入栏中相应的按钮，通过拖拽鼠标添加AP Div ，具体操作方法如下所示。