DreamWeaver第六章_层叠样式表
合集下载
dreamweavercs5CSS层叠样式表和Spry面板的应用解析
新建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：设置文本的小型大写字母
插入Div标签
• Div标签本身没有任何表现属性，如果要使Div标 签显示某种效果，或者显示在某个位置，就要为 Div标签定义CSS样式，插入Div标签的方法如下所 示。
编辑Div标签
• 插入Div标签后，可以对Div标签进行各种操作， 包括选择、剪切、复制和粘贴等。下面分别进行 讲解。 • 1．选择Div标签
• • • •
line-height：控制行与行之间的垂直距离 text-transform：控制字母vde大小写 text-decoration：控制链接文本的显示状态。 color：颜色
2背景
background-color:背景颜色 background-image：背景图像 background-repeat：是否重复 background-attachment：确定背景图像固 定在其原始位置还是随内容一起滚动。 • background-positionx：水平 • background-positiony：垂直 • • • •
Dreamweaver-层与布局表格的应用.
第六章 Dreamweaver-层的应用
层的堆叠和删除 • 层的堆叠设置
首页 返回 结束 调音
第六章 Dreamweaver-层的应用
设置多个层的大小
• 在文档编辑区选择两个或多个层，选择 [修改][排列顺序][设成宽度相同]菜单 命令或[修改][排列顺序][设成高度相 同]菜单命令。首先选择的层将自动调整 为最后一个选择的层相同的宽度或高度。 • 在文档编辑区选择两个或多个层，再在 属性面板中的“多个层”栏中输入宽度 和高度值，这些值将应用于所有选择的 层。
首页
返回 结束 调音
第六章 Dreamweaver-层的应用
对齐层
在网页制作中常常需要将某些层按照一定的规 定对齐。在进行层的对齐操作时，嵌套层中所有子 层并不参与层的对齐操作，它们只随父层的移动而 移动，并始终与父层保持相对的固定位置。
首页
返回 结束 调音
第六章 Dreamweaver-层的应用
层大小和属性设置
• 层大小的设置
– 设置单个层的大小 – 设置多个层的大小
• 层属性的设置
– 设置单个层的属性 – 设置多个层的属性
首页 返回 结束 调音
第六章 Dreamweaver-层的应用
设置单个层的大小
• 在文档编辑区选择一个层，在出现的调整柄上按住鼠 标左键不放并拖动，当调整到适当的大小时释放鼠标 即可。 • 在文档编辑区选择一个层，按住【Ctrl】键的同时再 按键盘上的方向键即可按一次1个像素的步幅来调整 层大小。 • 在文档编辑区选择一个层，按住【Shift+Ctrl】键的同 时再按键盘上的方向键即可按一次10个像素的步幅来 调整层大小。 • 在文档编辑区选择一个层，以像素为单位在属性面板 中输入宽度和高度的值。
层叠样式表
尺寸及定位 属性
Top Position
z-index
Company Logo
CSS样式表分类
根据样式代码的位置，分为三类： 行内样式
内嵌样式
外部样式
在最后一个声明后面加上一个分号 (;) 是一个好习惯
Company Logo
行内样式
您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内 样式”。行内样式使用元素标签的 STYLE 属性定义。 <html> <head> <title>行内样式表示例</title> </head> <body> <p style="font-family:华文彩云;">庐山美景——小天池</p> <p style="font-weight:bold">小天池位于庐山牯岭北面，池中之水置于高 山而终年不溢不涸。池后山脊上，屹立着一座白塔似的喇嘛塔。塔建于1936 年。小天池山对面还有一怪石，远望似一雄鹰伸颈欲鸣。</p> </body> </html>
type="text/css"表示类型是样 式表文本
Company Logo
CSS样式表常见的属性
属性 CSS名称 font-family Font-size Font-style 说明 设置或检索文本的字体 设置或检索文本字体的大小 设置或检索文本的字体样式，即字体风格，主 要设置字体是否为斜体。取值范围： normal | italic | oblique 用于设置字体的粗细，取值范围： Normal | bold | bolder | lighter | number
网页试题及答案7
1、（A ）是网页与网页之间联系的纽带，也是网页的重要特色。
（A）导航条（B）表格（C）框架（D）超链接2、绘制网站页面，可使用的绘图工具有（D ）。
（A）Authorware（B）Visual Basic（C）Flash（D）Fireworks3、在编辑完首页之后，会保存首页文件，下列哪个不是首页文件常用的文件名（D ）。
（A）index.asp（B）default.htm（C）index.php（D）index1.htm4、在HTML中，〈pre〉的作用是（B ）。
（A）标题标记（B）预排版标记（C）转行标记（D）文字效果标记5、在HTML中，〈pre〉的作用是（A ）。
（A）标题标记（B）预排版标记（C）转行标记（D）文字效果标记6、制作无序号列表应该使用标签（A ）。
（A）〈UL〉和〈/UL〉（B）〈OL〉和〈/OL〉（C）〈ML〉和〈/ML〉（D）〈br〉7、在网页中添加换行符应用以下哪个按键？（D ）（A）【Enter】（B）【Ctrl】+【Enter】（C）【Alt】+【Enter】（D）【Shift】+【Enter】8、下列各项中不是CSS样式表优点的是（B ）。
（A）CSS对于设计者来说是一种简单,灵活,易学的工具,能使任何浏览器都听从指令,知道该如何显示元素及其内容（B）CSS可以用来在浏览器的客户端进行程序编制,从而控制浏览器等对象操作,创建出丰富的动态效果（C）一个样式表可以用于多个页面,甚至整个站点,因此具有更好的易用性和扩展性（D）使用CSS样式表定义整个站点,可以大大简化网站建设,减少设计者的工作量9、有关CSS，下面说法错误的是（C ）。
（A）CSS，中文译为层叠样式表（B）是一种标签式语言（C）相同的CSS效果，在各种不同的浏览器上，显示效果是一样的（D）同一个CSS文件，可以应用到整个网站的所有页面中10、在DreamWeaver中，可以在“CSS样式”面板中管理CSS 样式并应用到网页中。
中文版DreamweaverCS6网页制作实用教程第六章使用层与Spry布局网页
(2) 层效果
4. 设置对齐层
对齐层主要是对齐多个层。选中多个层后，选择【修改】|【排列顺序】命令，在子菜单中 选择对齐方式。如果选择【修改】|【排列顺序】|【设成高度相同】命令或【修改】|【排列顺 序】|【设成宽度相同】命令，将以最后一个选中的层的大小为标准，调整其他层的大小并对齐 层，如图 6-11 所示。
图 6-8 设置容器的文本
图 6-9 【设置容器的文本】对话框
3. 设置层可见性
在处理文档时，可以在【AP 元素】面板中手动设置层的可见性。以图 6-7 右图所示的 3 个层为例，单击【AP 元素】面板中的 按钮，如果显示为 图标，层为可见；当显示为 图 标，隐藏层的显示，如图 6-10 所示。
(1) 设置显示与隐藏层 图 6-10 设置层的可见性
-114-
(1) 输入层的叠堆顺序数值 图 6-7 调整层的顺序
(2) 层顺序修改效果
2. 设置层文本 在创建层的过程中，用户可以 章 使用层与 Spry 布局网页
【例 6-2】在 Dreamweaver CS6 中设置层文本。 (1) 选中要设置层文本的层，选择【窗口】|【行为】命令，打开【行为】面板。 (2) 单击【行为】面板上的 按钮，在弹出的菜单中选择【设置文本】|【设置容器的文本】 命令，如图 6-8 所示，打开【设置容器的文本】对话框。 (3) 在【设置容器的文本】对话框的【层】下拉列表中可以选择层的名称，如图 6-9 所示， 在【新建 HTML】文本框中可以输入文本内容，单击【确定】按钮即可设置层文本。
6 .2 层的基本操作
在 Dreamweaver 中选择【窗口】|【AP 元素】命令，打开【AP 元素】面板。在该面板中显 示了网页文档中所有插入的层，如图 6-3 所示，用户可以通过它管理网页文档中所有插入的层 元素。
第六章 层叠样式模板与库PPT教学课件
2020/12/H10TML标记，或者新的CSS样式选择符。 10
DREAMWEAVER
6.1.3 精确定制CSS样式
无论是新建CSS样式，还是编辑已有的CSS 样式，CSS样式的具体格式都是通过CSS样式定 义对话框来定义的。
该对话框中左边的“分类”列表框显示样式类 目。由于CSS属性较多，DW将其分为8大类目， 可以单击左边的样式类目名来选择样式类型，然 后在右边的区域进行相应的属性定义下面分别介 绍：
1.定义 CSS 类型属性 a)“字体”为样式设置字体家族（或家族系列）
• CSS（Cascading Style Sheets ）是开放性 样式设定语句，它扩充了HTML标记的属性设 定，这些属性设定可以通过脚本语言进行控制， 使网页的视觉效果更加丰富多彩。
• CSS将页面的样式与显示内容的文档分开，可 以高效、统一地组织页面元素。对于具有相同 风格多个页面的站点来说，只需要建立定义样 式的CSS文件，并使需要使用这些样式的文档 调用相应的样式文件即可。当网站的风格需要 更新时，只要更改CSS样式文件即可。
• CSS技术的应用使得网站的开发、管理和维护 大为简化，提高了开发效率。
2020/12/10
3
DREAMWEAVER
❖ 6.1 层叠样式表的创建、编辑与应用
6.1.1 关于层叠样式表 1、样式表的版本： • 1996年，W3C推出CSS1 。 • 1998年中期，W3C公布CSS2。 • 目前，W3C正在开发CSS3。 • IE6与NS7已经实现了CSS1中的绝大部分特性，
的形式定义，以此指定文档的样式；较低层的 样式表能够覆盖较高层的样式表。 • CSS的三个层次，按照从底层到高层的顺序， 分别为行内样式表、文档层样式表和外部样式 表，其中行内样式表只能作用于单个标签的内 容；文档层样式表则能够对文档的整个主体起 作用，而外部样式表可以应用到任意数目文档 的主体中。
DREAMWEAVER
6.1.3 精确定制CSS样式
无论是新建CSS样式，还是编辑已有的CSS 样式，CSS样式的具体格式都是通过CSS样式定 义对话框来定义的。
该对话框中左边的“分类”列表框显示样式类 目。由于CSS属性较多，DW将其分为8大类目， 可以单击左边的样式类目名来选择样式类型，然 后在右边的区域进行相应的属性定义下面分别介 绍：
1.定义 CSS 类型属性 a)“字体”为样式设置字体家族（或家族系列）
• CSS（Cascading Style Sheets ）是开放性 样式设定语句，它扩充了HTML标记的属性设 定，这些属性设定可以通过脚本语言进行控制， 使网页的视觉效果更加丰富多彩。
• CSS将页面的样式与显示内容的文档分开，可 以高效、统一地组织页面元素。对于具有相同 风格多个页面的站点来说，只需要建立定义样 式的CSS文件，并使需要使用这些样式的文档 调用相应的样式文件即可。当网站的风格需要 更新时，只要更改CSS样式文件即可。
• CSS技术的应用使得网站的开发、管理和维护 大为简化，提高了开发效率。
2020/12/10
3
DREAMWEAVER
❖ 6.1 层叠样式表的创建、编辑与应用
6.1.1 关于层叠样式表 1、样式表的版本： • 1996年，W3C推出CSS1 。 • 1998年中期，W3C公布CSS2。 • 目前，W3C正在开发CSS3。 • IE6与NS7已经实现了CSS1中的绝大部分特性，
的形式定义，以此指定文档的样式；较低层的 样式表能够覆盖较高层的样式表。 • CSS的三个层次，按照从底层到高层的顺序， 分别为行内样式表、文档层样式表和外部样式 表，其中行内样式表只能作用于单个标签的内 容；文档层样式表则能够对文档的整个主体起 作用，而外部样式表可以应用到任意数目文档 的主体中。
网页设计之第6讲 层叠样式表
6.2.3 导出 导出CSS文件 文件
下面介绍如何导出CSS样式表，具体操作步骤如下： （1）选择菜单命令【文件】导出【 CSS样式表】。 （2）打开【导出CSS样式为CSS文件】对话框， 在【保存在】下拉列表中设置文件的保存路径，在 【文件名】文本框中设置保存CSS的文件名。 （3）单击【保存】按钮，导出网页中的CSS文件。
第6讲 层叠样式表 讲
6.1 CSS 概 述 6.2 创建和编辑CSS样式 6.3 设置CSS样式参数
6.1 CSS 概 述
6.1.1 CSS基本概念 6.1.2 CSS基本语法
6.1.1 CSS基本概念 基本概念
所谓CSS样式就是层叠样式表，是用来控制一个 样式就是层叠样式表， 样式就是层叠样式表 文档中某一文本区域外观的一组格式属性。CSS 文档中某一文本区域外观的一组格式属性 样式可以一次性对若干个文档所有的样式进行控 制。同HTML样式相比，使用CSS样式表的好处 除了在于它可以同时连接多个文档之外，还在于 当CSS样式有所更新或被修改以后，所有应用了 该样式表的文档都会被自动更新。 CSS样式表的功能 功能一般可以归纳为以下几点： 功能 （1）可以更灵活地控制网页中文字的字体、颜色、 大小、间距、风格和位置。 （2）可以灵活地设置一段文字的行高、缩进，并 可以为其加入三维效果的边框。
6.3.2 背景样式设置
规则定义的类型中选择【 在CSS规则定义的类型中选择【背景】，可以设置背景的样式。 规则定义的类型中选择 背景】 可以设置背景的样式。 在对话框中各参数设置如下： 在对话框中各参数设置如下： 背景颜色background color：选择颜色作为背景， background背景颜色background-color：选择颜色作为背景，使用颜色拾取器或在文 本框中直接输入颜色值； 本框中直接输入颜色值； 背景图片background image：选择背景图片， background背景图片background-image：选择背景图片，在文本框中输入背景图片路 径或单击浏览按钮选择路径； 径或单击浏览按钮选择路径； 重复background repeat：设置背景图片时此项有用。 background重复background-repeat：设置背景图片时此项有用。此列表框用以设置 图片的重复方式为不重复、重复、横向重复、纵向重复； 图片的重复方式为不重复、重复、横向重复、纵向重复； 附件：设置背景图片时此项有用。用以设置背景图像， 附件：设置背景图片时此项有用。用以设置背景图像，当网页长度超过一 屏时是否随网页滚动，可以设置为固定、滚动； 屏时是否随网页滚动，可以设置为固定、滚动； 水平位置：设置文本的水平方向位置，可以使用数值或像素等其他单位， 水平位置：设置文本的水平方向位置，可以使用数值或像素等其他单位， 来表示水平位置，也可以设置左对齐、居中、右对齐； 来表示水平位置，也可以设置左对齐、居中、右对齐； 垂直位置：设置同水平位置，设置为顶部、底部、居中或数值。 垂直位置：设置同水平位置，设置为顶部、底部、居中或数值。
Dreamweaver中层叠样式表的创建及使用
《Dreamweaver中层叠样式表的创建及使用》教案教学目标层叠样式表（CSS）是网页设计工作者制作网页时经常使用的工具。
利用它，可以统一定制网页文本、图片、表格等多种网页元素的样式，可以设计出更加丰富多彩的网页效果，而且能够迅速地将样式应用于整个网站的多个网页上。
通过本章的教学，要求学生掌握以下基本内容：1.了解层叠样式表的基本知识。
2.掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法。
3.掌握将CSS样式应用到各种网页元素上的方法。
4.掌握修改CSS样式的方法，并观察到该修改对网页外观的影响。
5.掌握管理CSS层叠样式表的基本方法，学会将外部样式表链接到网站的多个网页上，以便直接应用已创建好的CSS样式，统一多个网页的外观。
教学内容∙CSS层叠样式表的基本知识：内联式样式表、嵌入式样式表、外部样式表。
∙在Dreamweaver中，使用CSS面板创建、应用、修改CSS层叠样式。
∙链接外部样式表。
教学重点∙创建CSS样式。
∙应用CSS样式。
∙修改CSS样式。
∙链接外部样式表。
教学形式课堂讲授与网络自学相结合教学辅助手段∙通过多媒体屏幕广播或屏幕投影，学生可实时观看教师的操作演示过程。
∙学生可以访问网络教学站点。
教学站点提供了重点操作的Flash动画演示。
教学时间安排：1课时（45分钟）∙层叠样式表的基础知识：10分钟。
∙创建和应用CSS样式：15分钟。
∙修改CSS样式：5分钟。
∙链接外部样式表：5分钟。
∙小结：10分钟。
教学方法与过程首先介绍为何在网页设计中引入层叠样式表的概念，使学生对层叠样式表的作用有一个感性的认识。
然后介绍层叠样式表的基本种类。
接着介绍利用CSS面板创建CSS样式、应用CSS样式以及修改CSS样式的方法。
其后，介绍如何为网站的多个网页链接已有的外部样式表。
最后，进行小结。
在小结过程中，引导学生辨认和判断三种样式表在网页的HTML代码中具体的代码表示，并引导学生总结这些代码是如何通过CSS面板进行设置的，使得学生进一步加深对理论知识的理解。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
DropShadow滤镜
阴影效果 Color-#99999;OffX-6;Offy-6;Positive-60
Blur滤镜
模糊效果 Add-1;Direction-135;Strength-6
创建常用滤镜(2)
Wave滤镜
使页面元素产生波浪形的效果 Add-0;Freq-2;LightStrength-10;Phase-3;Strength-3
在卷标之后加上{}符号，在其中填入CSS所设置的 HTML属性 注：如要同时设置同一级别下的两个效果，应用分号隔 开
窗口/CSS样式 CSS样式面板列表框中显示出当前文档中所包含的CSS 样式，在列表框的左侧显示样式名称，右侧显示该样式 所应用的属性 另外有四个按钮
附加样式表 新建样式表 编辑样式表 删除样式表
使用CSS选择器
a:link——文档中的超级链接 a:active——正在打开的超级链接 a:visited——已访问过的超级链接 a:hover——鼠标悬停位置所在的超级链 接
创建常用滤镜
Alpha滤镜
设置透明度 CSS样式表的编辑窗口——“分类/扩展/过滤器”— —选择Alpha Opacity-50;finishOpacity-50;Style-1;StartX-0;StartY0;FinishX-20;FinishY-20
实现网页中的各种元素的准确定位，帮助用户对网页的布 局、字体、颜色、背景和其他图文效果实现更精确的控制 只需修改一个文件就可以改变一批网页的外观和格式 可以控制许多使用html无法控制的属性
CSS的基本语法
类型
自定义样式：可应用于任何文本。若应用于整段文本，则会 在该段文本的源代码中加入CLASS属性，例P CLASS=“testStyle”；若应用于一行文本，则在选择的文本源 代码的两边插入包含了CLASS属性的SPAN标记 HTML标记样式：为HTML标示符重新定义格式化 CSS选择器样式：重新定义了特殊的标记组合以及包含特殊序 列号属性标记
设置CSS样式属性
——区块选项
设置CSS样式属性
设置应用样式的 ——方框选项 元素的浮动位置 定义不允许分层出 现应用样式的元素 的某个侧边
定义应用样式的元 素内容和元素边界 之间的空白大小
定义应用样式的元 素边界和其他元素 之间的空白大小
设置CSS样式属性
——边框选项
设置CSS样式属性
——列表选项
Glow滤镜
使页面元素产生光晕的效果 Color-#0000ff; Strength-10
FlipV滤镜
将图像垂直翻转
定义在
新建样式表文件 仅用于该文档
导出样式以创建CSS样式表
从文档中导出样式以创建新的CSS样式表 文件/导出/CSS样式 导入到文件
文本/CSS样式/管理样式——“附加”——导 入
编辑CSS样式
操作
文本/CSS样式/管理样式——选择要编辑的样式—— “编辑” CSS样式面板——选择要编辑的样式——“编辑” 属性面板中的样式下拉列表框，选择“管理样 式”——编辑
打开新建样式表对话框
文本/CSS样式/新建 文本/CSS样式/管理样式——新建 CSS样式面板——新建样式表 CSS样式面板列表框中右击——新建 相关CSS面板中右击——新建规则
名称：可以使用任何字母和数字的组合，但必须是字母 开头 类型
类：应用于文本范围或文本块的自定义样式 标签：重新定义特定HTML标签的默认格式，名称下拉列表框变为 标签下拉列表框 高级：可为具体某个标签组合或所有包含特定ID属性的标签定义格 式，名称下拉列表框变为选择下拉列表框
设置列表项的换行位置： 外：表项过长自动换行 时缩进显示 内：表项过长自动换行 时直接显示在旁边的空 白上
设置CSS样式属性
相对坐标、绝对 坐标还是静态
——位置选项
层中内容超出边界： 可见、隐藏、滚动、 自动 设置如何放置分层
设置CSS样式属性
——扩展选项
CSS样式的优先顺序
若将两种样式应用于同一个文本中，浏 览器将显示这两种样式的所有属性 若发生冲突，则浏览器显示最里面的样 式的属性 发生了直接的冲突，css样式中的属性自 动取代html标签样式中的属性
层叠样式表
CSS Styles面板 创建CSS样式 编辑CSS样式 CSS样式各属性设置 CSS样式de优先顺序
层叠样式表
可以为部分文件、整份文件甚至整个网站定义样式 是一系列格式规则，它定义了控制元素外观的样式 属性，如字体、颜色、填充、边距和字间距等 CSS样式可定义在HTML文档的标记(tag)里，也可在 外部附加文档中作为外加文件 CSS样式规则有两部分组成：选择器和声明。选择 器是样式名称，而声明则用于定义样式元素。声明 由属性和值组成。 作用
CSS样式的创建
相关CSS面板
窗口/标签检查器——相关CSS 显示当前光标所在行或所选对象应用的CSS样式，左边显示样 式名称，右边显示该样式应用的标签 可应用的所有CSS属性：字体、背景、区域、边框、方框、定 位、扩展
创建CSS样式
打开“新建CSS样式”对话和使用范围，设置后ok 样式文件名：aaa.css
链接外部样式表 编辑外部样式表
一个包含样式规则的文本文件，通常包含一个或多 个样式。用户可在CSS样式表中编辑单个样式，但 有时需要编辑多个样式。
设置CSS样式属性
——类型选项
设置字体的变 体形式，在浏 览器中可看到 效果
设置CSS样式属性
——背景选项
背景图像是固定在它的原 始位置，还是可以滚动