Dreamweaver MX网页设计与制作课件：CSS样式表与模板

CSS样式表与模板

●认识CSS●使用CSS编辑器●背景样式的定义●滤镜的使用本章学习知识点2.1文字和图像的处理：生日贺卡本章内容目录2.2CSS样式：独具风格的主页2.3对文字运用CSS滤镜：蓝色生死恋2.4对图像运用CSS滤镜：图片滤镜2.5层模板：海底世界2.6库项目的应用：公司主页2.7总结提高2.8本章习题2.1.1基本概念

2.1文字和图像的处理：生日贺卡CSS(CascadingSytleSheet，层叠样式表)是用于增强和控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS样式表也为他们提供的展示效果的项目给予更多的灵活性。属性，例如颜色、背景、边界、边框和许多的更多都能被所有的元素所应用。

•定义CSS样式

•使用CSS样式对文本样式进行修改打开已经准备好的网页素材2.1.2上机操作打开【CSS样式】面板

打开【新建CSS样式】对话框，了解各个部分的功能

运用CSS样式表制作一张生日贺卡的文本样式和背景样式。使得页面上的字体为“幼圆”，大小为“中”,颜色为浅蓝，粗细为“细体”，并且有闪烁的效果。文本样式的定义。

修改前的效果修改后的效果2.2CSS样式：独具风格的主页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设置透明效果BlendTrans设置混合过渡效果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样式】选项，打开【CSS样式】面板，单击按钮，在弹出的对话框中作出选择选择，然后单击【确定】按钮。在【盒子】下的【边界】选项中，去掉【全部相同】选项前面的勾，将【右】和【下】选为“自动”。将【边框】下的【宽度】选项设为“细”，【颜色】的值设为＃FF0000。将【扩展】下的【过滤器】设为Alpha(Opacity=30)

最终的网页效果图层是最早在图形图象处理中提出的一个概念，由于层的运用使得平面设计师在处理图像时可以多层操作、任意组合，从而大大提高了工作效率，也使创作出的效果更加丰富。Dreamweaver中的层概念与图像处理中层的概念不同，但它们都有一个共同点，就是层的重叠性。Dreamweaver中的层可以理解为浮动在网页上的一层透明纸，它可以被准确地定位于网页的任意位置，并且可以设置大小。作为一种网页元素定位技术，使用层可以以像素为单位精确定位页面元素。层还可以相互嵌套层，子层会继承父层的特征，如可见性、移动等。层在Dreamweaver中被认为是一个对象，这样就具有更多的特性，如制作动画、触发动作。如果要构建一个十分酷的网页，层的作用不能忽视。而对于层的应用。2.5.1基本概念2.5层模板：海底世界2.5.2上机操作打开要插入层的页面

插入层，并且在层中插入图片和文本执行【文件】｜【另存为模板】命令

打开【另存为模板】对话框中，在【站点】下拉列表中设置模板保存的站点，并定义模板名称后，单击【保存】按钮即可把当前网页转换为模板，同时将模板另存到选择的站点中

网页最终的效果2.6库项目的应用：公司主页2.6.1基本概念在站点中，除了具有相同外观的许多页面外，还有一些需要经常更新的页面元素，例如版权声明、站点导航栏，这些内容与模板不同，它们只是页面中的一部分，在各个页面中的摆放位置可能不同，但内容却是一致的。那么，可以将这种内容保存为一个库文件，在需要的地方插入，在需要的时间快速更新。库与模板的作用一样，也是一种保证网页中的部件能够重复使用的工具。模板重复使用的是网页的一部分结构，而库则提供了一种重复使用网页对象的方法。2.6.2上机操作使用库面板，首先执行【窗口】|【资源】命令，调出【资源】面板，单击左侧的库按钮，切换到库面板。单击库面板右下角的【新建库项目】按钮

双击新建的库项目，打开库项目编辑窗口

为一个鲜花礼品公司的主页创建并编辑库项目。公司已经设计好的主页，直接将网页中现有的对象元素转换为库文件

执行【修改】|【库】|【增加对象到库】命令，将选中的内容转化为库项目选中内容反白，同时，库项目内容出现在【库】列表中，提示给新建的库文件命名

制作一个网页，并且选定插入点插入刚才保存的库项目，立即显示效果2.7总结提高本章重点介绍了DreamweaverMX中CSS样式表的使用，同时介绍了层和库的概念和使用。CSS样式表是网页设计中一种非常重要的技术，目前获得了广泛的使用，其发展势头势不可挡。CSS样式表的出现可以说是网页排版中的一次革命性进步。建议用户在初步掌握了创建和应用样式的方法后，直接学习并使用CSS语言编写样式表文件。由于层对象与动态效果有着密切的关系，因此完全掌握层技术是建立网页动态效果的关键。虽然层技术的应用并不复杂，但在页面中如何使用才是关键。

2.8本章习题一、填空题1．如果想把一幅图象水平翻转应该用___________，垂直翻转可以用_________，想把整个图象制作成底片效果可以用________________。2．层的优点有：_________A．精确定位

B.插入自如C．加速浏览

D.可叠加性3．可以使用几种方法创建嵌套层？4．网页制作中有些需要经常更新的页面元素，在各个页面中的摆放位置可能不同，但内容是一致的，这时可以把它