图像处理和CSS技术.pptVIP

第7章图像处理和CSS技术教学目标图像是网页元素中不可或缺的一部分，通过设置图像的特效可以使网页显得更加丰富多彩。CSS(CascadingStyleSheets)即层叠样式表，亦称为级联样式表单，是一组格式设置规则，用于控制Web页面的外观。通过本章的学习，可以达到以下学习目标。了解CSS和CSS的作用、特点及语法。掌握图像处理的常见特效。熟练套用CSS的常用滤镜效果。1234学习重点CSS的语法规则01CSS的基本设置方式02滤镜属性及用法03本章目录7.1【案例25】CSS的简单应用7.2【案例26】CSS滤镜的应用7.3综合实训7.1案例25】案例效果使用“记事本”编写如图7.1所示的网页效果图7.1CSS应用效果（1）打开记事本输入一下代码：htmlheadtitle案例26/titlelinkrel=stylesheettype=text/csshref=7-1.css//headbodyh1开始学习CSS吧！/h1p这是我使用CSS制作的网页brbrbrahref=7-1.htmltarget=_blankCSS学习/a/p/body/html再打开记事本创建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;}一种非常实用的网页元素定义规则，能有效地定制网页、改善网页的显示效果，并能产生滤镜、图像淡化、网页淡入淡出的渐变效果。即层叠样式表，亦称为级联样式表单CSS概述相关知识1表现和内容相分离：将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。2提高页面浏览速度：对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多。3易于维护和改版：只要简单的修改几个CSS文件就可以重新设计整个网站页面。采用CSS布局的3个显著优势：相关知识开始和结束标志：style和/style010102通常以注释语句的形式书写02CSS的语法规则相关知识选择符{属性:属性值;}常见选择符有三种：标签选择符id选择符，唯一性选择符class选择符，多重选择符01020304CSS语句的基本结构：0102030405CSS的基本设置方式内联样式表嵌入样式表外部样式表输入样式表7.2【案例26】案例效果使用Dreamweaver8编写，主要应用CSS滤镜实现文字的投影、文字与图片的叠加和图片的幻灯片效果。如图7.2、7.3所示。图7.2刚加载时的网页效果图7.3变化的网页效果打开素材文件夹中的文件“xiangce.html”，切换到代码视图，在代码的head/head标签对中输入CSS代码（7-4.txt）并保存。document.write(这是使用外部脚本实现的JavaScript程序);在需要插入图片的表格单元格td/td标签对中输入（7-5.txt）代码。保存，按F12预览网页效果。010302代码设计相关知识CSS属性字体相关知识颜色和背景文本“容器”边距(margin)填充距(padding)边框(border)图文混排常用属性分级鼠标CSS定位CSS滤镜