第7节 图像处理与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 ?【案例25】案例效果 使用“记事本”编写如图7.1所示的网页效果 代码设计 （1）打开记事本输入一下代码： html head title案例26/title link rel=stylesheet type=text/css href=7-1.css / /head body h1开始学习CSS吧！/h1 p这是我使用CSS制作的网页brbrbr a href=7-1.html target=_blankCSS学习/a /p /body /html 再打开记事本创建CSS文件，输入以下代码 ： p //段落样式 { color: purple; font-size: 12px; } h1 //标题样式 { color: olive; text-decoration: underline; } a:link //链接样式 { color:#006486; } 相关知识 1.CSS概述 即层叠样式表，亦称为级联样式表单 一种非常实用的网页元素定义规则，能有效地定制网页、改善网页的显示效果，并能产生滤镜、图像淡化、网页淡入淡出的渐变效果。 相关知识 采用CSS布局 的3个显著优势： 表现和内容相分离：将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。 提高页面浏览速度：对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多。 易于维护和改版：只要简单的修改几个CSS文件就可以重新设计整个网站页面。 相关知识 2.CSS的语法规则 开始和结束标志 ：style和/style 通常以注释语句的形式书写 CSS语句的基本结构： 选择符{属性:属性值;} 常见选择符有三种： （1）标签选择符 （2）id选择符，唯一性选择符 （3）class选择符，多重选择符 3.CSS的基本设置方式 （1）内联样式表 （2）嵌入样式表 （3）外部样式表 （4）输入样式表 7.2 【案例26】案例效果 使用Dreamweaver 8编写，主要应用CSS滤镜实现文字的投影、文字与图片的叠加和图片的幻灯片效果。如图7.2、7.3所示。 代码设计 打开素材文件夹中的文件“xiangce.html”，切换到代码视图，在代码的head/head标签对中输入CSS代码（7-4.txt）并保存。 document.write(这是使用外部脚本实现的JavaScript程序); 在需要插入图片的表格单元格td/td标签对中输入（7-5.txt）代码。 保存，按F12预览网页效果。 相关知识 1．CSS属性 1）字体 相关知识 2) 颜色和背景 相关知识 3) 文本 4)“容器” (1) 边距(margin) (2) 填充距(padding) (3) 边框(border) (4) 图文混排常用属性 5) 分级 6) 鼠标 2．CSS定位 3．CSS滤镜 7.3 综合实训 本案例利用DIV和CSS技术构建网站模板，效果图如图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”。输入以下代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-t