《图像处理和CSS技术.ppt》由会员分享，可在线阅读，更多相关《图像处理和CSS技术.ppt（35页珍藏版）》请在三一办公上搜索。
1、第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】案例效果,使用“记事本”
2、编写如图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:
3、#3080CB;,相关知识,1.CSS概述 即层叠样式表，亦称为级联样式表单 一种非常实用的网页元素定义规则，能有效地定制网页、改善网页的显示效果，并能产生滤镜、图像淡化、网页淡入淡出的渐变效果。,相关知识,采用CSS布局 的3个显著优势：表现和内容相分离：将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。提高页面浏览速度：对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多。易于维护和改版：只要简单的修改几个CSS文件就可以重新设计整个网站页面。,相关知识,2.CSS的语法规则开始和结束标志：和通常以注释语
4、句的形式书写,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）并保存。do
5、cument.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所示。,该网页布局主
6、要由以下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文
7、件，命名为master.css，保存在css文件夹下，输入（7-13.txt）代码。,(7)编写网页基本布局代码，在HTML文件的和之间用以下代码替换文本“Hello world.”：NavigationHeaderSidebar AContentFooter(8)在HTML文件中的导航Navigation部分添加（7-14.txt）代码。,(9)在HTML文件中的Header部分添加以下代码（7-15.txt）：,(10)在HTML文件中的Sidebar部分添加（7-16.txt）代码。(11)在HTML文件中的Content部分添加（7-17.txt）代码。(12)在HTML文件中的Footer部分添加（7-18.txt）代码。(13)保存，按F12预览网页效果。,
