Dreamweaver中CSS样式课件

学习交流PPT
3
• 6.2 创建CSS样式
• CSS样式最大的优点是它 具有自动更新功能，当应用了 CSS格式之后，如果不满意， 仅需要修改CSS样式就可以更 新所有的应用，而不用像设置 HTML样式那样一个一个地修 改。
• 6.2.1 创建新CSS样式
• 其操作步骤如下：
• 1) 在Dreamweaver中，单击 “窗口”→“CSS样式”，打开CSS 样式面板如图6-1所示。
• 4) 在对话框中选择新样式的类型和定义，输入新的名称。
• 5) 单击【确定】按钮，确定操作。
图6-8 “重制CSS样式”对话框
学习交流PPT
13
• 4. 删除某个样式
• 在CSS样式面板上，选中要删除的样式。单击CSS样 式面板右上角的“显示菜单”按钮，打开面板菜单；或者 在面板中单击鼠标右键，打开快捷菜单，选择“删除”命 令。或者单击面板菜单右下角的“删除CSS样式”命令按 钮。将删除被选择样式，同时该样式从样式列表中消 失。
用它可以对网页中的文本内容进行精确的格式化控制。CSS 样式不仅能够控制一篇文档中的文本样式，而且通过采用外 部链接的方式，还可以控制多篇文档的文本格式。对CSS样 式的定义进行修改时，文档中所有应用该样式的文本格式也 会自动发生改变。 • CSS样式通常用名称或是HTML标记来表示，HTML文档 中的CSS样式不仅可以控制大多数传统的文本格式属性，如 字体、字号和对齐方式等，还可以定义一些特殊的HTML属 性，例如定位、特效和鼠标轮替等。 • CSS样式的定义代码一般书写在HTML文档的头部，通常 由一系列样式的定义组成。它可以应用到使用标注HTML标 记所格式化的文本上，可以定义到通过class属性所定义范围 的文本上，也可以应用到其他的那些符合CSS标准规范的文 本上。
学习交流PPT
7
• 6) 单击【确定】按钮， 出现保存样式表对话 框，如图6-4所示。
图6-4 保存样式表
学习交流PPT
8
• 7) 选择样式表所保存的位 置，单击【保存】按钮， 出现CSS设置对话框如图 6-5所示，进行相应的属 性设置，单击【确定】， 一个CSS样式创建成功。
图6-5 CSS设置对话框
学习交流PPT
14
• 6.3 设置CSS样式格式 • 在Dreamweaver中，通过CSS样式定义对话框可以对CSS样
式格式进行精确定制，在CSS面板上新建CSS样式时可以进行 设置，或者通过可以打开如图6-5所示CSS样式定义对话框， 从中可以看出，CSS共有8个选项。 • 6.3.1 编辑文字格式 • 在CSS样式定义对话框中单击左边的“类型”，右边区域显 示可以设置的有关文字格式方面的CSS样式。其中： • 1)字体：可以在下拉菜单中设置当前样式所用的字体。 • 2)大小：，设置字体的大小。可以通过选择数字和单位来指 定字体，如“磅”、“像素”、“英寸”、“厘米”等，也可以选择相 对的字体大小，如“极小‘、“特小”等。
11
• 3. 在现有样式的基础上创 建新样式
• 1) 在CSS样式面板上，选 中作为基础的样式。
• 2) 单击CSS样式面板右上 角的“显示菜单”按钮，打 开面板菜单；或者在面板 中单击鼠标右键，打开快 捷菜单，如图6-7所示。
图6-7 CSS样式的快捷菜单
学习交流PPT
12
• 3) 选择“重制”命令，系统弹出如图6-8所示对话框，并显示 该样式的设置。
图6-3 新建样式对话框
学习交流PPT
6
• 4) 选择CSS样式类型：
• “类（可应用于任何标签）”，可以生成一个新的样式表， 制作完毕后可以在样式面板中看到制作完成的样式。在应用 的时候，首先在页面选中对象，然后选择样式即可。该类型 样式名称必须以英文句点“.”开头，如果没有输入句点， Dreamweaver会自动添加在“名称”文本框中。它是唯一可以被 应用于文档中任何文本的样式类型，而不用考虑控制文本的 标签。所以可用于类样式的名称都将显示在样式工具栏中。
学习交流PPT
15
• 3)样式：通过选择“正常”、“斜体”或“偏斜体”来设置字体的特殊 格式，
学习交流PPT
10
• 2. 应用外部链接式CSS样式
• 1) 打开CSS样式面板。
• 2) 单击CSS样式面板右下角的【附加样式表】按钮，出 现如图6-6所示“链接外部样式表”对话框。
• 3) 单击【浏览】按钮，从所保存的CSS文件中选取一个， 即可应用。
图6-6 “链接外部样式表”对话框
学习交流PPT
图6-1 CSS 样式面板
学习交流PPT
4
• 2) CSS样式面板显示在 设计浮动面板组，单击 面板组右上角的“显示菜 单”按钮 ，弹出下拉 菜单如图6-2所示。
图6-2 CSS样式的下拉菜单
学习交流PPT
5
• 3) 从其中选择“新建”选项卡。或者单击CSS样式面板右下 角的【新建CSS样式】按钮 ，打开如图6-3所示的新建 样式对话框。
学习交流PPT
9

• 6.2.2 应用CSS样式
• 1. 如果要在文档中应用样式
• 操作方法如下：
• 1) 将插入点放置在段落之中，即选择了整个段落，可 以对其设置格式；也可以选中多个段落，对多个段落 设置格式；选择某些字符还可以对这些字符设置格式。
• 2) 在CSS样式面板中，用鼠标点击某个定义好的样式， 则该CSS样式就会应用在这些文档上。
• 选择“标签（重新定义特定标签的外观）”，可以将现有的 标签赋上样式，制作完毕以后不需要选中对象就可以直接应 用到页面上去。
• 5) 定义一个外部连接的CSS还是定义一个仅应用于当前文档 的CSS。
• “自定义”：定义一个外部连接的CSS。
• “仅仅对该文档”：定义的CSS样式只能在当前文档中使用。
第6章 CSS样式
学习交流PPT
1
• 本章主要内容是CSS样式的创建方法和它的应用， 并就如何编辑CSS样式中的文字格式、背景格式、文本 块格式、方框格式、边框格式、列表格式、定位格式、 扩展格式等作了详细的讲解，最后以一个实例说明了 如何应用CSS样式对网页进行编辑。
学习交流PPT
2
• 6.1 CSS样式概述 • CSS是层叠样式表（Cascading Style Sheets）的简称，利