1 / 9

《 网页设计与制作 》 教学课件

《 网页设计与制作 》 教学课件. 项目六：使用 CSS 控制页面元素. 任务五： 使用 CSS 滤镜产生绚丽效果. （一）教学目标. 一、了解 CSS 滤镜. 教学目标. 二、了解层的概念. 三、掌握在网页设计中使用 CSS 滤镜和层的方法. （二）相关知识. 1.CSS 滤镜 2. 滤镜类型及其参数 3. 层图层的概念及使用方法. （三）学习重点. 1. 熟悉 CSS 滤镜各种类型及其参数，能在网页制作中熟练应用 2. 了解层在网页设计中的作用及其使用方法. （四）新课教学.

susane
Télécharger la présentation

《 网页设计与制作 》 教学课件

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 《网页设计与制作》教学课件

  2. 项目六：使用CSS控制页面元素 任务五： 使用CSS滤镜产生绚丽效果

  3. （一）教学目标 一、了解CSS滤镜 教学目标 二、了解层的概念 三、掌握在网页设计中使用CSS滤镜和层的方法

  4. （二）相关知识 1.CSS滤镜 2.滤镜类型及其参数 3.层图层的概念及使用方法

  5. （三）学习重点 1.熟悉CSS滤镜各种类型及其参数，能在网页制作中熟练应用 2.了解层在网页设计中的作用及其使用方法

  6. （四）新课教学 1.新建站点，将project06文件夹下task05文件夹，复制到本地磁盘下站点目录project06中，在Dreamweaver CS3软件中打开网页文件index.html，进行下列操作：新建一个CSS规则，进入【新建CSS规则】对话框，在“定义在”区域中，选择【mycss.css】，在“选择器类型”区域中，则选择【类】，在“名称”框中输入类名“biaoti”，单击“确定”，进入【CSS规则定义】对话框。 2.选择【类型】选项卡，设置字体为“黑体”，大小为“20像素”，颜色为“浅绿色”（#33cc00）。 3.选择【扩展】选项卡，在【过滤器】中设置使用滤镜“DroShadow”，并设置其各项参数分别为“Color=#666666，在OffX=2，OffY=2，positive=1”，单击“确定”。 4.选中网页上端标题所在的表格。 5.在【属性】面板中，选择“样式”下拉框，将“biaoti“样式应用至所选钮的表格上去。

  7. （四）新课教学 6.浏览网页，会发现标题文字变为带阴影的文字了。 7.新建一个CSS规则，进入【新建CSS规则】对话框，在“定义在”区域中，选择【mycss.css】，在“选择器类型”区域中，则选择【类】，在名称对话框中输入类名“mybanner”，单击“确定”，进入【CSS规则定义】对话框。 8.选择【类型】选项卡，设置字体为“华文琥珀”，大小为“72像素”，颜色为“鲜绿色（#009900）”。 9.选择【扩展】选项卡，在【过滤器】中设置使用“滤镜Glow”，并设置其各项参数分别为“Color=#ce0b2b，Strength=15”，单击“确定” 10.选中网页顶端大标题所在的表格。 11.在【属性】面板中，选择“样式”下拉框，将“mybanner”样式应用至所选的表格上去。 12.浏览网页，会发现banner中的大标题文字变为发光文字了。

  8. （四）新课教学 效果图如下：

  9. （五）课后小结 通过该项目的学习，学生认识了CSS，并且能自己动手利用CSS美化网页内容，应该鼓励学生多做练习，除了巩固CSS的知识点，也为后面学习CSS+DIV布局做好基础。

More Related