DreamWeaver第六章_层叠样式表
- 格式：ppt
- 大小：630.00 KB
- 文档页数：20
下载文档原格式
合集下载
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面板进行设置的，使得学生进一步加深对理论知识的理解。
DW复习材料及答案
一、选择题1.ASP提供了连接与访问数据库方法，下面不属于常见数据库有〔A〕。
A.DBF库B.SQL server数据库C.Access数据库D.Orcal数据库2.ASP使用环境是〔A〕，在其支持下ASP程序才能够运行。
A. Bscape C.PWS D.DHTML3.background属性指定是〔C〕。
A.背风光B.背景音乐C.背景图片D.背景有无4.font标记可以设置文字外观，设置字体属性是〔B〕。
A.SIZEB.FACEC.COLOD.ID5.font标记控制文字字体类型属性是〔C〕。
A.colorB.sizeC.styleD.face6.HTML中段落标记是〔B〕。
A.BRB.PC.NOBRD.H17.HTML代码中，align=center表示〔D〕。
A.文本加注下标线B.文本加注上标线C.文本闪烁D.文本或图片居中8.input type=reset是一个〔B〕。
A.文本框B.重新填写按钮C.下拉菜单D.提供应效劳器按钮9.JavaScript要正常运行必须有〔D〕。
A.WEB效劳器B.JavaScript编译器C.JavaScript虚拟机D.客户端浏览器10.TR表示〔B〕。
A.一张表B.一行C.一列D.一个单元格11.Web 标准制定者是？〔B〕A.微软〔Microsoft〕B.万维网联盟〔W3C〕C.网景公司〔Netscape〕D.瑞星公司12.Web效劳器与浏览器间传送文件协议是〔B〕。
A.HTMLB.C.CTPD.URL13.WEB浏览器作用是〔A〕。
A.负责下载并显示网页，能将WEB文档HTML编码解释，并显示为在浏览器上所见WEB页面B.运行在效劳器仅供效劳器维护员使用专用浏览器C.浏览WEB页面局部内容比整个页面内容要快D.下载网页时不是根据页面中HTML编码分别下载信息，而是一种随机性下载方式14.WWW是〔B〕意思。
A.网页B.万维网C.浏览器D.超文本传输协议15.WWW英文全称是〔B〕。
层叠样式表(CSS)
层叠样式表（CSS）“层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的<B>、<I>、<FONT>、<H1>、<P>、<SUB>、<SUP>等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。
CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。
此外，不同浏览器显示的结果可能有不同。
一、如何链接HTML文件与层叠样式表它有4种方法：●在HTML文件的<HEAD>区块嵌入层叠样式表的定义。
●将层叠样式表定义在单独的文本文件，然后将之导入或链接至HTML文件。
●在HTML文件的标签属性style中加入样式定义●在HTML文件中套用样式类别。
1．在HTML文件的<HEAD>区块嵌入层叠样式表的定义<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><style type="text/css"><!--body {font-family: "宋体";font-size: 14px;color: #0000FF;}--></style></head><body></body></html>2．将层叠样式表导入或链接至HTML文件只有IE浏览器支持。
网页设计与制作(Dreamweaver)智慧树知到答案章节测试2023年潍坊学院
第一章测试1.初学者在制作网页时，一定要养成实时测试页面的好习惯，以免完成制作后，出现难以调试的兼容性问题。
（）A:错B:对答案:B2.以下哪项不是网页中常用的命名？（）A:123456B:submenuC:mainD:menu答案:A3.以下哪个名字是合法的驼峰式命名法？（）A:Content_threeB:1navigatorC:userNameD:part_one答案:C4.在进行网页布局前，首先要了解一下网站访客的浏览模式，根据人眼视觉习惯，访客在浏览网页时主要分为( )和( )两种方式。
（）A:T模式B:国字模式C:Z模式D:F模式答案:CD5.有关网页分类，以下说法正确的是？（）A:动态网页也可以是纯文字内容的，也可以是包含各种动画的内容。
B:互联网上的大部分网站都是由静态网页和动态网页混合组成的。
C:按照内容形式的不同，网站可以分为门户网站、职能网站、专业网站、个人网站等。
D:网页有静态和动态之分。
答案:ABCD6.在文字网络地址和数字网络地址之间使用DNS进行转化。
（）A:错B:对答案:B7.HTML5本身是一种技术，融合了html与css3及JavaScript和api等。
（）A:错B:对答案:A8.下面有关html与CSS的描述不正确的是（）A:HTML定义了网页的结构，也就是网页要呈现的内容，而CSS定义了网页的表现，即呈现出来的外观。
B:CSS以HTML为基础，提供了丰富的功能，但是不可以针对不同的浏览器设置不同的样式。
C:HTML与CSS的关系就像人的骨骼与衣服，通过更改CSS样式，可以轻松控制网页的表现样式。
D:CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。
答案:B第二章测试1.删除站点在从列表中将站点删除的同时也会将站点中的文件及内容从计算机中删除，所以一定要慎重。
（）A:对B:错答案:B2.导出站点得到的站点文件，其后缀是？（）A:.zipB:.siteC:.steD:.dwt答案:C3.以下哪些操作是可以在“站点”｜“管理站点”对话框中实现的？（）A:删除站点B:新建站点C:导出站点D:复制站点答案:ACD4.复制站点只是复制站点的站点信息，并不会复制原有站点中的文件夹和其他内容。
Dreamweaver CC网页设计课件第6章第3节
第6章 使用CSS层叠样式表
6.3 如何应用外部CSS样式表
6.3.1 案例制作：网页“关于词牌的几句话”使用外部CSS样式表
最终效果如图所示。
6.1
第6章 使用CSS层叠样式表
6.3 如何应用外部CSS样式表
6.3.1 案例制作：网页“关于词牌的几句话”使用外部CSS样式表
1）新建文件夹“guanyu_cipai”，将素材文件夹中所有文件和文件夹拷贝到 “guanyu_cipai”文件夹中。 2）在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设 置对象”对话框定义站点，站点名称为“菁菁家园”，本地站点文件夹设置为 “shufa_beihou文件夹”。 3）打开要附加CSS样式表文件的网页“guanyu_cipai.html”，打开“CSS设计器”面板， 在“源”窗格中点击 图标，如图所示，选择“附加现有的CSS文件”，打开“使用现有 的CSS文件”对话框。
6.9
第6章 使用CSS层叠样式表
6.3 如何应用外部CSS样式表
6.3.2 新知解析
3）附加完成后，在“CSS设计器”面板的“源”窗格中会显示附加的文件作为源。 如图5-124所示，同时，网页中会生成一段代码<link href="hers/css_file.css" rel="stylesheet" type="text/css" />，此时，可以使用其中的CSS规则了。。
6.2
第6章 使用CSS层叠样式表
6.3 如何应用外部CSS样式表
6.3.1 案例制作：网页“关于词牌的几句话”使用外部CSS样式表
4）点击“浏览”按钮，选择要附加的CSS文件“cssfile.css”，如图所示，点击“确定” 按钮，“添加为”选择“链接”，点击“确定”按钮。
6.3 如何应用外部CSS样式表
6.3.1 案例制作：网页“关于词牌的几句话”使用外部CSS样式表
最终效果如图所示。
6.1
第6章 使用CSS层叠样式表
6.3 如何应用外部CSS样式表
6.3.1 案例制作：网页“关于词牌的几句话”使用外部CSS样式表
1）新建文件夹“guanyu_cipai”，将素材文件夹中所有文件和文件夹拷贝到 “guanyu_cipai”文件夹中。 2）在Dreamweaver CC 2015中，单击菜单“站点”→“新建站点”命令，通过“站点设 置对象”对话框定义站点，站点名称为“菁菁家园”，本地站点文件夹设置为 “shufa_beihou文件夹”。 3）打开要附加CSS样式表文件的网页“guanyu_cipai.html”，打开“CSS设计器”面板， 在“源”窗格中点击 图标，如图所示，选择“附加现有的CSS文件”，打开“使用现有 的CSS文件”对话框。
6.9
第6章 使用CSS层叠样式表
6.3 如何应用外部CSS样式表
6.3.2 新知解析
3）附加完成后，在“CSS设计器”面板的“源”窗格中会显示附加的文件作为源。 如图5-124所示，同时，网页中会生成一段代码<link href="hers/css_file.css" rel="stylesheet" type="text/css" />，此时，可以使用其中的CSS规则了。。
6.2
第6章 使用CSS层叠样式表
6.3 如何应用外部CSS样式表
6.3.1 案例制作：网页“关于词牌的几句话”使用外部CSS样式表
4）点击“浏览”按钮，选择要附加的CSS文件“cssfile.css”，如图所示，点击“确定” 按钮，“添加为”选择“链接”，点击“确定”按钮。
更新版)最新XXX《Dreamweaver网页设计》机考网考试题题库及答案
更新版)最新XXX《Dreamweaver网页设计》机考网考试题题库及答案最新国家开放大学电大《Dreamweaver网页设计》机考网考试题题库及答案，100%通过。
1.Dreamweaver的模板文件的扩展名是.dwt。
2.在插入文件中的Flash动画中，不能在属性面板中设置动画的循环播放次数属性。
3.决定层的显示/隐藏的属性是Visibility。
4.在选定第1个单元格后，按下Ctrl键，并用鼠标单击其他要选择的单元格可以实现选择多个不连续的单元格。
5.格式化表格的作用是为表格套用已经设置好的样式。
6.关于CSS的说法错误的是使用Dreamweaver只能可视化创建CSS样式，无法以源代码方式对其进行编辑。
7.关于绝对路径的使用，不正确的说法是使用绝对路径的链接不能链接本站点的文件，要链接本站点文件只能使用相对路径。
8.在Dreamweaver中，超级链接标签具有四种不同的状态，不属于标签状态的是bgm。
最近，XXX推出了一门名为《Dreamweaver网页设计》的课程，其中包含了机考和网考试题题库及答案，通过率高达100%。
1.Dreamweaver使用.dwt作为模板文件的扩展名。
2.在插入Flash动画时，属性面板无法设置动画的循环播放次数属性。
3.显示/隐藏层的属性是Visibility。
4.您可以按下Ctrl键并单击要选择的其他单元格，以选择多个不连续的单元格，如下图所示。
5.表格格式化的作用是为表格套用已经设置好的样式。
6.关于CSS，错误的说法是使用Dreamweaver只能可视化创建CSS样式，无法以源代码方式进行编辑。
7.关于绝对路径的使用，不正确的说法是使用绝对路径的链接不能链接本站点的文件，只能使用相对路径链接本站点文件。
8.在Dreamweaver中，超级链接标签有四种不同的状态，其中不属于标签状态的是bgm。
删除了格式错误的段落和错误的选项。
对每个问题进行了简洁的改写。
Dreamweaver中CSS样式
1) 在CSS样式面板上， 选中作为基础旳样式。
2) 单击CSS样式面板右 上角旳“显示菜单”按钮， 打开面板菜单；或者在面 板中单击鼠标右键，打开 快捷菜单，如图6-7所示。
图6-7 CSS样式旳快捷菜单
3) 选择“重制”命令，系统弹出如图6-8所示对话框，并 显示该样式旳设置。
4) 在对话框中选择新样式旳类型和定义，输入新旳名称。 5) 单击【拟定】按钮，拟定操作。
4)填充：定义元素旳内容和边框之间旳空间大小。该设置不 会显示在Dreamweaver旳文档窗口中。
5)边界：定义元素边沿和其他元素之间旳空间大小。只有在 被应用于文本块一类旳元素时，才会在Dreamweaver旳文 档窗口中显示该属性。
6.3.5 编辑边框格式
在CSS样式定义对话框中单击左边旳“边框”，右边区
所定义范围旳文本上，也能够应用到其他旳那些符合CSS
原则规范旳文本上。
6.2 创建CSS样式
CSS样式最大旳优点是
它具有自动更新功能，当应
用了CSS格式之后，假如不
满意，仅需要修改CSS样式
就能够更新全部旳应用，而
不用像设置HTML样式那样一
种一种地修改。
6.2.1 创建新CSS样式
其操作环节如下：
2)浮动：设置元素旳旳浮动位置。页面不并移动，将元 素放置在页面边沿旳左侧或右侧时，其他元素会围绕该 元素。只有在被用于IMG标签时，才会在 Dreamweaver旳文档窗口中显示该属性。
3)清除：定义元素旳某个边侧不允许有层出现。假如分 层出目前被设置清除旳元素旳一边，该元素会被移动到 层旳下面。只有在被用于IMG标签时，才会在 Dreamweaver旳文档窗口中显示该属性。
第6章 CSS样式
2) 单击CSS样式面板右 上角旳“显示菜单”按钮， 打开面板菜单；或者在面 板中单击鼠标右键，打开 快捷菜单，如图6-7所示。
图6-7 CSS样式旳快捷菜单
3) 选择“重制”命令，系统弹出如图6-8所示对话框，并 显示该样式旳设置。
4) 在对话框中选择新样式旳类型和定义，输入新旳名称。 5) 单击【拟定】按钮，拟定操作。
4)填充：定义元素旳内容和边框之间旳空间大小。该设置不 会显示在Dreamweaver旳文档窗口中。
5)边界：定义元素边沿和其他元素之间旳空间大小。只有在 被应用于文本块一类旳元素时，才会在Dreamweaver旳文 档窗口中显示该属性。
6.3.5 编辑边框格式
在CSS样式定义对话框中单击左边旳“边框”，右边区
所定义范围旳文本上，也能够应用到其他旳那些符合CSS
原则规范旳文本上。
6.2 创建CSS样式
CSS样式最大旳优点是
它具有自动更新功能，当应
用了CSS格式之后，假如不
满意，仅需要修改CSS样式
就能够更新全部旳应用，而
不用像设置HTML样式那样一
种一种地修改。
6.2.1 创建新CSS样式
其操作环节如下：
2)浮动：设置元素旳旳浮动位置。页面不并移动，将元 素放置在页面边沿旳左侧或右侧时，其他元素会围绕该 元素。只有在被用于IMG标签时，才会在 Dreamweaver旳文档窗口中显示该属性。
3)清除：定义元素旳某个边侧不允许有层出现。假如分 层出目前被设置清除旳元素旳一边，该元素会被移动到 层旳下面。只有在被用于IMG标签时，才会在 Dreamweaver旳文档窗口中显示该属性。
第6章 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样式属性
——背景选项
背景图像是固定在它的原 始位置，还是可以滚动