《图像处理和CSS技术》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章图像处理和CSS技术教学目标图像是网页元素中不可或缺的一部分，通过设置图像的特效可以使网页显得更加丰富多彩。CSS(CascadingStyleSheets)即层叠样式表，亦称为级联样式表单，是一组格式设置规则，用于控制Web页面的外观。通过本章的学习，可以达到以下学习目标。掌握图像处理的常见特效。了解CSS和CSS的作用、特点及语法。熟练套用CSS的常用滤镜效果。教学要求学习重点CSS的语法规则CSS的基本设置方式滤镜属性及用法本章目录7.1【案例25】CSS的简单应用7.2【案例26】CSS滤镜的应用7.3综合

2、实训7.1【案例25】案例效果使用“记事本”编写如图7.1所示的网页效果图7.1CSS应用效果（1）打开记事本输入一下代码：

开始学习CSS吧！

这是我使用CSS制作的网页


CSS学习

3、>代码设计再打开记事本创建CSS文件，输入以下代码：p//段落样式{color:purple;font-size:12px;}h1//标题样式{color:olive;text-decoration:underline;}a:link//链接样式{color:#006486;}a:visited{color:#464646;}a:hover{color:#fff;background:#3080CB;}a:active{color:white;background:#3080CB;}相关知识1.CSS概述即层叠样式表，亦

4、称为级联样式表单一种非常实用的网页元素定义规则，能有效地定制网页、改善网页的显示效果，并能产生滤镜、图像淡化、网页淡入淡出的渐变效果。相关知识采用CSS布局的3个显著优势：表现和内容相分离：将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。提高页面浏览速度：对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多。易于维护和改版：只要简单的修改几个CSS文件就可以重新设计整个网站页面。相关知识2.CSS的语法规则开始和结束标志：

5、>和通常以注释语句的形式书写CSS语句的基本结构：选择符{属性:属性值;}常见选择符有三种：（1）标签选择符（2）id选择符，唯一性选择符（3）class选择符，多重选择符3.CSS的基本设置方式（1）内联样式表（2）嵌入样式表（3）外部样式表（4）输入样式表7.2【案例26】案例效果使用Dreamweaver8编写，主要应用CSS滤镜实现文字的投影、文字与图片的叠加和图片的幻灯片效果。如图7.2、7.3所示。图7.2刚加载时的网页效果图7.3变化的网页效果代码设计打开素材文件夹中的文件“xiangce.

6、html”，切换到代码视图，在代码的标签对中输入CSS代码（7-4.txt）并保存。document.write("这是使用外部脚本实现的JavaScript程序");在需要插入图片的表格单元格标签对中输入（7-5.txt）代码。保存，按F12预览网页效果。相关知识1．CSS属性1）字体相关知识2)颜色和背景相关知识3)文本4)“容器”(1)边距(margin)(2)填充距(padding)(3)边框(border)(4)图文混排常用属性5)分级6)鼠标2．CSS定位3．CSS

7、滤镜7.3综合实训本案例利用DIV和CSS技术构建网站模板，效果图如图7.4所示。图7.4综合实训案例运行效果图代码设计(1)规划网站，设计布局如图7.5所示。该网页布局主要由以下5个部分构成。①Navigation：logo和导航。图7.6目录结构②Header：Banner图片，大小为760px*160px。③Sidebar：边框，一些附加信息，如注册登录块、公告栏。④Content：网站的主要内容。⑤Footer：网站底栏，包含版权信息等。(2)创建网站文件目录结构：(3)启动Dreamweaver8.0，新建同名

8、站点website，指向网站根目录website。(4)新建HTML网页，并保存为首页“index.html”。输入以下代码：