第15章.图形图像编程要点.docVIP

第15章 图形图像编程 在Web应用中，良好的图形图像的运用能够提升网站的友好度和易用性。.NET Framework提供了图形图像编程的方法，开发人员可以运用图形图像编程技术进行良好的Web应用中图形图像布局和编程，也可以通过GDI+实现类似Photoshop的功能。 15.1 图形图像基础 使用图形图像可以进行良好的页面布局，在现有的很多Web应用中，其应用程序的页面布局经常需要使用图像，这样能够让页面整体效果更加友好。用户会对界面友好的应用程序印象深刻从而会进行回访。ASP.NET不仅能够进行图形图像显示，还能够使用GDI+进行图形图像的绘制。 15.1.1 图像布局 在页面布局中，很多设计人员喜欢使用CSS设计，这样能够简化页面代码，将页面布局代码和页面代码相分离，从而提高了维护性。虽然随着技术的发展，越来越多的动态生成页面布局，以及动态生成图像的方法也越来越多的被开发人员和设计人员所认知，但是开发人员和设计人员还是比较喜欢使用CSS和IMG标签进行页面布局，这是因为CSS和IMG标签都比较简单，可以说是“轻量级”的，即不需要页面进行逻辑处理也不需要动态生成。 1．IMG标签 IMG标签是图像标签，IMG标签属于HTML控件，在Web应用中可以看到在页面中包含大量的IMG标签用于图形图像显示，示例代码如下所示。 body img src=autom.jpg / /body 上述代码显式了一个名为autom的JPG图像到页面中，如图15-1所示。 图15-1 插入图片 使用IMG标签能够轻松的为网页添加图片，IMG标签包括以下常用属性： Src：图片的地址，可以是图片的相对地址也可以是绝对地址。 Width：设定图片的宽度。 Height：设定图片的高度。 Alt：当图片显示不了时提示的字符。 Border：图片的边框的宽度。 Align：图片的周片文字的对齐方式。 Title：当鼠标放在图片上出现的提示字符。 开发人员能够通过编写Width和Height属性进行图像的大小控制，也可以编写Alt属性当图片显示不了时进行提示，如图15-2和图15-3所示。 图15-2 Width属性 图15-3 Alt属性 2．CSS 通过CSS能够使用图像进行页面布局和样式控制。当需要使背景呈现渐变效果时，无需使用JavaScript进行控制，可以直接使用CSS和图像进行搭配使用即可。CSS背景属性包括： 背景颜色属性（background-color）：该属性为HTML元素设定背景颜色。 背景图片属性（background-image）：该属性为HTML元素设定背景图片。 背景重复属性（background-repeat）：该属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既x轴重复，又y轴重复。 背景附着属性（background-attachment）：该属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。 背景位置属性（background-position）：该属性和background-image属性连在一起使用，决定了背景图片的最初位置。 背景属性（background）：该属性是设置背景相关属性的一种快捷的综合写法。 为了方便进行页面背景布局，可以使用CSS背景属性，示例代码如下所示。 body style=background:#6094d7 url(bg.jpg) repeat-x; div style=width:800px; border:1px solid #333333; margin:0px auto; background:white 编写内容 /div /body 上述代码将BODY标签样式编写为背景颜色为#6094d7、背景图片编写为bg.jpg并且背景图片按照x轴重复。在body标签下方包含一个DIV标签，该标签作为主样式进行内容编写，编写内容后如图15-4所示。 图15-4 使用图形进行布局 3．JavaScript进行图像编程 HTML图像控件支持JavaScript进行图像操作，可以为图像控件进行事件处理，JavaScript代码如下所示。 script type=text/javascript function cut() { var pic=document.getElementById(pic1) //获取ID为pic1的图片的属性 pic.width=100; //设置图片的