《Dreamweaver》-课件.pptVIP

第2章 第2章 CSS样式表与模板 ● 认识CSS ● 使用CSS编辑器 ● 背景样式的定义 ● 滤镜的使用 本章学习知识点 上一张 下一张 返回 2.1　文字和图像的处理：生日贺卡 本章内容目录 2.2 CSS样式：独具风格的主页 2.3 对文字运用CSS滤镜：蓝色生死恋 2.4 对图像运用CSS滤镜：图片滤镜 2.5 层模板：海底世界 2.6 库项目的应用：公司主页 2.7　总结提高 2.8　本章习题 2.1.1 基本概念 2.1　文字和图像的处理：生日贺卡 CSS(Cascading Sytle Sheet，层叠样式表)是用于增强和控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS样式表也为他们提供的展示效果的项目给予更多的灵活性。属性，例如颜色、背景、边界、边框和许多的更多都能被所有的元素所应用。 ?????????? ?定义CSS样式 ????????? ?使用CSS样式对文本样式进行修改 打开已经准备好的网页素材 2.1.2 上机操作 打开【CSS样式】面板 打开【新建CSS样式】对话框，了解各个部分的功能 运用CSS样式表制作一张生日贺卡的文本样式和背景样式。使得页面上的字体为“幼圆”，大小为“中”,颜色为浅蓝，粗细为“细体”，并且有闪烁的效果。文本样式的定义。 修改前的效果 修改后的效果 2.2 CSS样式：独具风格的主页 2.2.1 基本概念 层叠样式表比较简单、灵活、易学，能支持任何浏览器。可以使用HTML标签或命名的方式定义，除可控制一些传统的文本属性外，例如字体、字号、颜色等，还可以控制一些比较特别的HTML属性，例如对象位置、图片效果、鼠标指针等。 使用CSS面板 灵活应用CSS样式对网页内容进行修改 2.2.2 上机操作 执行【窗口】|【CSS样式】选项，打开【CSS样式】面板，单击按钮，弹出【链接外部样式表】对话框 执行【窗口】|【CSS样式】选项，打开【CSS样式】面板，单击按钮，弹出【链接外部样式表】对话框，如图2.10所示，从外部已有的CSS样式表中选择一个分配给当前的页面。 点击【浏览】后，在弹出的【选择样式表文件】对话框中选择CSS文件。如图2.13所示。 对比添加CSS样式前后，网页的差别 添加CSS样式前 添加CSS样式后 2.3 对文字运用CSS滤镜：蓝色生死恋 2.3.1 基本概念 CSS滤镜实际上是CSS一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。 右侧为一些常用的滤镜，以及其功能说明。 Alpha设置透明效果 Blend Trans 设置混合过渡效果 Blur 设置模糊效果 Chroma 将指定颜色设为透明 DropShadow 设置投影阴影 FlipH 设置水平翻转 FlipV 设置垂直翻转 Glow 设置发光效果 Gray 产生灰阶 Invert设置反转底片效果 Light 设置灯光投影效果 Mask设置蔗遮罩效果 RevealTrans设置显示过渡效果 Shadow 设置阴影效果 Wave 设置水平与垂直波动效果 Xray 设置X光照效果 CSS滤镜－常用的Alpha滤镜 Blur滤镜 FlipV滤镜 FlipH滤镜 2.3.2 上机操作 输入“蓝色生死恋” 文本 在【类型】下将文字颜色选为白色，便于查看效果。在【扩展】下的【过滤器】中列出的就是所有的CSS滤镜，选择Glow滤镜，它可以使文字产生边缘发光的效果。本例中我们设置Glow(Color=red, Strength=8)，即颜色为红色（Red），发光强度为8，然后单击【确定】。 我们还可以利用Blur滤镜制作动感字，它的语法格式为Blur(Add=?, Direction=?, Strength=?)。我们定义Blur(Add=1, Direction=90, Strength=150) 通过把过滤器设置为DropShadow(Color=6699cc, OffX=4, OffY=4, Positive=1)来产生如图2.20所示的阴影字 CSS不仅可以对文字进行样式的修改，还可以对表格进行修改。 l???????? 区块样式的修改：精确定义整段文本中文字的字距，对齐方式等属性 l?????????方框样式的修改：大表格的外面加一条细细的边框，可以使用边框样式 　　边框样式的修改 ：定义特定元素的大小及其与周围元素的间距等属性 2.4 对图像运用CSS滤镜：图片滤镜 2.4.1 基本概念 区块定义 方框定义 边框定义 2.4.2 上机操作 初始状态 执行【窗口】|【CSS样式】选项，打开