第6章 Dreamweaver进阶.pptVIP

第6章 Dreamweaver进阶 本章要点 ☆CSS样式的编辑与应用。 ☆表单的属性设置。 ☆行为的应用。 ☆模板的创建与应用。 ☆库的创建与应用。 6.1 CSS样式介绍 CSS样式英文全称是“Cascading Style Sheets”，中文译为“层叠样式表”，也可译为“串联式样式表”， 利用它可以对网页中的文本进行精确的格式化控制。 目前，CSS样式已成为网页设计者进行网页设计不可缺少的工具之一。 ? 6.1.1 CSS简介 前面已经介绍过HTML，它是在CSS样式之前被广泛应用的一种网页样式，它主要用于控制单个文档中某范围内的文本格式。 与之不同的是，CSS样式不仅可以控制单个文档中多个范围内的文本格式，而且还可以控制多个文档中的文本格式。 例如，要管理一个非常大的网站，使用CSS样式可以快速格式化整个站点或多个文档中的字体、图像等元素的格式，并且还可以实现多种不能用HTML样式实现的其他功能。 6.1.1 CSS简介 CSS第一个字母代表的是“Cascading”，意思为“串联”，它指不同来源的样式，可以合在一起，形成一种样式。 CSS样式表位于文档的head区，其作用范围由CLASS或其他任何符合CSS规范的文本设置。 对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。 总之，在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制， CSS样式的作用和优势 ? 几乎在所有的浏览器上都可以使用。 ? 以前一些必须通过图片转换才能实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 ? 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 ? 可以轻松地控制页面布局。 ? 可以将许多网页的风格格式同时更新，不用再一页一页地更新。 CSS样式的类型 （1）自定义样式 与Word中使用的样式类似，可以在任何文本上应用自定义CSS样式。 如果网页中应用了“自定义样式”，在其HTML代码中会出现class=” ”的字样，引号内是使用的自定义样式的名字。 （2）HTML标记样式 对现有HTML标记的重新定义。创建或改变这类样式时，所有应用该标记的文本会自动更新。 如：利用CSS重新定义Paragraph，标记p代表的格式。 （3）样式选择器 它是一种特殊类型的样式，专门设置链接文字的格式属性。 样式选择器种类 ①a：active 当前被激活的链接的样式。 ②a：hover 鼠标放置在链接文字上的文字样式。 ③a：link 正常状态下链接文字的样式。 ④a：visited 己访问过的链接的样式。 其中，以第②种“a：hover”最常用也最有用 。 6.1.1 CSS简介 对文本的手工格式化会覆盖CSS样式，所以应用CSS样式之前，应删除手工设置的HTML格式或HTML样式。 6.1.2 定义CSS样式表 一个样式表由样式规则所组成，以告诉浏览器怎样去呈现一个文档。 常用的样式表的定义方法有用HTML标记定义、用Class定义及用ID定义三种。 常用的样式表定义方法 1．使用HTML标记定义 使用HTML的Style组件，并将这个元素放置于文档的Head部分，包含网页的样式规则。 每个规则包括一个选择符（通常是一个HTML的元素），如Body、P、或EM等。样式规则组成如下： 选择符{属性：值} 单一选择符的复合样式声明应该用分号（；）隔开。如： 选择符{属性1：值1；属性2：值2} 使用HTML标记定义实例 定义H1和H2元素的颜色和字体大小属性： Head TitleCSS例子/Title Style Type=”Text/Css” H1{font-Size: x-large; color: red} H2{font-Size: large; color: blue} /Style /Head 上述的样式表告诉浏览器要用加大、红色字体显示一级标题；用大、蓝色字体显示二级标题。 常用的样式表定义方法 2．用Class定义 Class属性用于指定元素属于何种样式的类。例如，样式表可以加入Punk类：.Punk{color:lime;background:#ff80c0} 这个类可以使用Class属性在HTML中引用。 在这个例子中，Punk类可以用于任何Body元素，因为它在样式表中没有HTML元素与之关联。 常用的样式表定义方法 3．用ID定义 这里通过一个实例来介绍如何用ID定义CSS样式表。 实例【例6-1】用ID标记定义CSS样式表 6.1.3 创建和编辑CSS样式 1．创建CSS样式 （1）