2023年网页精品讲义设计方案6.pdf

《2023年网页精品讲义设计方案6.pdf》由会员分享，可在线阅读，更多相关《2023年网页精品讲义设计方案6.pdf（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-1-第六章 层叠样式表 本章教学目标：1理解掌握 CSS 的概念和作用；2熟练掌握类样式的创建和应用；3熟练掌握标签样式的创建和应用；4熟练掌握高级样式的创建和应用；5熟练掌握外部样式表的创建；6熟练掌握 CSS 特效的应用；7熟练使用样式表美化网页。教学重点：1掌握创建类样式、标签样式、高级样式及应用；2掌握样式表文件的创建及应用；教学难点：创建和应用类样式 教学时间 8 课时（4 节理论课，4 节实验课）教学过程 6.1 创建类样式 一、样式表的三种基本类型 1类样式 类样式适合于单独为元素设置个性化的样式。用户可以在文档的任何区域或文本中应用类样式。定义好的类样式能很方便的应用到网页元

2、素中。如果将类样式应用于一整段文字，那么会在相应的标签中出现“Class”属性，该属性值即为类样式名称。2HTML 标签样式 可以针对某一个标签来定义层叠样式表，也就是说所定义的层叠样式表将只应用于选择的标签。例如：为 标签定义了层叠样式表，那么所有包含在、标签范围内的内容将遵循所定义的层叠样式表。3高级样式 高级样式为特殊的组合标签定义层叠样式表，使用 ID 作为属性，以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式，常用的有四种，分别为a:link、a:active、a:visited、a:hover。其中：-2-A:link：设定正常状态下链接文字的样式。A:active：设定鼠

3、标单击时链接文字的外观。A:visited：设定访问过的链接文字的外观。A:hover：设定鼠标放置在链接文字之上时文字的外观。二、本任务所用到的 CSS 属性 1、类型：该类属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等。2、区块：指的是控制网页元素的间距、对齐方式等属性。3、边框：使用“CSS 规则定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。三、CSS 样式面板的两种模式：1在“当前”模式下，“CSS 样式”面板将显示三个面板：“所选内容的摘要”窗格：其中显示文档中当前所选内容的 CSS 属性；“规则”窗格：其中显示所选属性的位置（

4、或所选标签的一组层叠的规则，具体取决于您的选择）；“属性”窗格：它允许您编辑应用于所选内容的规则的 CSS 属性，如下图所示。2在“所有”模式下，“CSS 样式”面板显示两个窗格：“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。使用“属性”窗格可以编辑“所有规则”窗格中任何所选规则的 CSS 属性。补充：-3-CSS 中的度量单位 CSS 相对长度单位 说明 CSS 绝对长度单位 说明 字体高（em）元素的字体高度 英寸 1 英寸=2.54 厘米 字母 x 的高（ex）字母 x 的高度 厘米（cm）像素（px）像素 毫米（mm）%百分比 点（pt）1

5、点=1/72 英寸 12pt 字（pc）皮卡(1 皮卡=12 点)6.2 重定义 HTML 标签 一、常用 HTML 标签的作用（1）body：表示文档的主体部分。对 body 标签的重定义将影响到整个网页。（2）table：表示一个表格。对 table 标签的重定义将影响到所有表格及表格中的元素。（3）form：表示一个窗体。对 form 标签的重定将影响到网页中所有窗体及窗体中的内容。（4）td：表示一个单元格。对 td 标签的重定义将影响到网页中所有单元格外观。（5）p：表示一个段落。对 p 标签的重定义将影响到网页中所有段落的外观。（6）img：表示图片。对 img 标签的重定义将影响

6、网页中的所有图片的外观。（7）a：表示超链接。对 a 标签的重定义将影响网页中的所有超链接的外观。二、标签样式创建的步骤 步骤：（1）单击面板右下试试看“新建 CSS 规则”按钮，打开“新建 CSS 规则”对话框；（2）将选择器类型设置为“标签”；（3）单击“标签”列表框右边的下拉箭头，设置为 TD；（4）将“定义在”设置为新建样式表文件；（5）单击“确定”按钮；（6）在弹出的“保存样式表为”对话框中，选择要保存的位置，在“文件名”文本框中输入“mainstyle.css”，然后单击“保存”按钮；（7）设置文本样式及区块样式即可；（8）保存文件，按“F12”键在 IE 中预览网页。-4-6.3

7、 修改超级链接外观 一、高级样式（1）高级样式允许用户一次给多个标签定义样式；（2）也可以给由 ID 标识的指定对象定义样式；（3）还可以给伪类选择器定义样式。二、知识链接 在 Dreamweaver CS 3 中，若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置，请选择“高级”选项，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从弹出菜单中选择一个标签。弹出菜单中提供的选择器（称为伪类选择器）有：a:active、a:hover、a:link 和 a:visited。6.4 多个网页共享 CSS 样式 一、链接和导入的区别 1链接 若要创建当前文档和外部样式表之

8、间的链接，请选择“链接”。该选项在 HTML 代码中创建一个 link href 标签，并引用已发布的样式表所在的 URL。Microsoft Internet Explorer 和 Netscape Navigator 都支持此方法。2导入 不能使用链接标签添加从一个外部样式表到另一个外部样式表的引用。如果要嵌套样式表，必须使用导入指令。大多数浏览器还能识别页面中（而不仅仅是样式表中）的导入指令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时，解决冲突属性的方式具有细微的差别。如果希望导入而不是链接到外部样式表，请选择“导入”。二、编辑外部 CSS 样式表 编辑外部 CSS 样式表

9、时，链接到该 CSS 样式表的所有文档全部更新以反映所做的编辑。可以导出文档中包含的 CSS 样式以创建新的 CSS 样式表，然后附加或链接到外部样式表以应用那里所包含的样式。您可以将创建的或复制到站点中的任何样式表附加到页面。此外，Dreamweaver 附带了预置的样式表，这些样式表可以自动移入站点并附加到页面。6.5 制作光晕字 一、滤镜的作用 使用过滤器，可对对样式所控制的对象应用特殊效果（例如模糊和反转）。-5-过滤器是由参数和参数值组成的，这些参数和值的变化组合，能使对象产生各种效果。其功能并不比 PhotoShop 软件中的滤镜效果逊色。相反不少图像处理软件进行特殊效果处理之后的

10、图片体积会有所增加，而使用过滤器对图片进行处理能保持图片原有的属性，大大加快网页装载速度。过滤器参数属性过多，针对不同的施加对象，各类参数要根据使用者的喜好、需求以及对象本身的属性进行设置调试。二、常见滤镜 1Alpha 滤镜 参数名称 功能 参数值 Opacity 设置图片不透明的程度，单位为“百分比”0100，0 表示完全透明，100 表示完全不透明 FinishOpacity 与 Opacity 配合使用，可以制作出透明渐进的效果 0100，0 表示完全透明，100 表示完全不透明 Style 当同时设定了 Opacity 和FinishOpacity 产生透明效果时，它主要用来指定渐进

11、的显示形状 0（没有渐进），1（直线渐进），2（圆形渐进），3（矩形辐射）StartX 渐进开始的 X 坐标值 StartY 渐进开始的 Y 坐标值 FinishX 渐进结束的 X 坐标值 FinishY 渐进结束的 Y 坐标值 作用：让对象呈现渐变半透明的效果。示例：Alpha(Opacity=100,FinishOpacity=30,Style=2,Startx=0,StartY=0,FinishX=100,FinishY=80)；2Blur 滤镜中的参数及其功能 参数名称 功能 参数值 Add 设置是否要在已经应用 Blur 滤镜上的 HTML 元素上显示原来的模糊方向 0:表示不显示原

12、对象。非 0 表示要显示原对象 Direction 设置模糊的方向 0（上），45（右上），90（右），135（右下），180（下），225（左下），270（左），315（左上）-6-Strength 指定模糊图像模糊的半径大小。单位是像素(pixels)。默认值是 5，取值范围为自然数 作用：让对象产生风吹模糊的效果。示例：Blur(Add=1,Direction=315,Strength=240)；3Chroma 滤镜 作用：主要用于把图片中的某个颜色变成透明的。使用了该滤镜以后，原图片中的一部分颜色就好像没有了一样。它只有一个参数“Color”，用来指定透明的姿色，即不显示出来的颜色。示

13、例：Chroma(Color=#6D6D6D)；4Glow 滤镜中的参数及其功能 参数名称 功能 参数值 Color 指定晕开阴影的颜色#RRGGBB 格式的颜色值 Strength 指定晕开阴影的范围 设定值从1255，数字越大晕得就越强，数字越小则反之 作用：可以使 HTML 元素对象的外轮廓上产生一种光晕。示例：Glow(Color=#ff0000,Strength=3)；本章小结 本章主要介绍了样式表的三种类型、类样式的创建及 CSS 样式面板的两种模式，标签样式的创建和应用及外部样式表文件的创建与保存。同时讲解了高级样式的创建及伪类选择器的应用，链接与导入的区别及外部样式表的编辑，Dreamweaver 中滤镜的作用及常用滤镜的作用参数。本章作业 1、使用 CSS 样式来依照结果文件对其进行美化。2、定义网页中所有图片的标签样式，给每幅图片加上一个灰色边框。3、试着给图片设置滤镜效果（如风吹的效果）。