网页制作教学课件_(5).ppt

《网页制作教学课件_(5).ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章样式表的应用认识样式表定义样式表样式表的高级应用5.1认识样式表5.1.1熟悉“CSS样式”面板在Dreamweaver8中，我们可以借助“CSS样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。5.1.2CSS样式的存在方式CSS样式以下面两种方式存在于网页中：外部CSS样式表：为了增强CSS样式的通用性，我们可以创建扩展名为.css的样式表文件。利用“CSS样式”面板可将该文件链接到站点中的一个或多个网页中，从而使用户可以直接应用其中定义的样式。内部（或嵌入式）CSS样式表：是

2、一系列包含在HTML文档head部分的、style标签内的CSS样式。5.2定义样式表5.2.1CSS样式的分类根据应用对象的不同，CSS样式被分成了以下三类。（1）类样式（2）标签样式（3）选择器样式5.2.2定义样式的步骤对于类样式而言，当我们修改了所选文本的字体、大小、颜色等属性后，系统会自动创建相应的样式。此外，也可以在“CSS样式”面板中单击“新建CSS规则”按钮，直接创建类样式和其他两种样式。范例1为“火百合”网页中的表格定义边线样式在了解了定义样式的步骤后，本节通过一个实例来学习一下类

3、样式的定义和应用方法（具体操作见视频5-1）。范例2为“火百合”网页定义“body”样式在样式类型中，最常用的就是标签样式，本节通过为“火百合”网页定义“body”样式，来看看标签样式的定义和应用（具体操作见视频5-2）。范例3为“火百合”网页定义链接样式“链接”是网站中不可缺少的组成元素，本节通过为“pro_b.html”网页中的链接文本定义样式，来看看高级样式的设置方法（具体操作见视频5-3）。范例4链接外部样式我们在“范例2”中曾创建了一个名为“s2.css”的样式文件，下面来看看如何将其链接

4、到网站中的其他页面（具体操作见视频5-4）。5.3样式表的高级应用范例5为“火百合”网页设置列表样式所谓列表样式，就是为网页中的列表文本设置的样式。本节通过为“火百合”网页左侧的链接文本设置列表样式，来看一下此类样式的设置方法（具体操作见视频5-5）。范例6为“火百合”网页中的图片设置阴影很多人都知道Photoshop拥有强大的滤镜功能，但很少有人知道Dreamweaver中的CSS滤镜。应用CSS滤镜可设置渐变、透明、阴影等效果。本例使用CSS滤镜中的“Shadow”属性来给图像添加阴影（具体操作

5、见视频5-6）。范例7在同一个网页中设置两种链接样式有时候可能会遇到这种情况，你制作了一个网页，其中有很多链接文本，你想用不同的链接样式来区分这些链接文本，也就是设置两个不同样式的链接，那么如何设置呢？下面通过给LZG站点中的“index_a.html”网页添加一个链接样式来讲解此类样式的设置方法（具体操作见视频5-7）。