图像处理和CSS技术.ppt

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