咨询:0371-63218905

切图技术在网页设计中的应用有哪些?

     在网页设计,不能将美工的网页设计效果 直接插入到网页中,而是需要用切片工具,把大幅成一系列的小切片。 接着用网页设计软件,用分切思想进行网页设计。
 
  切图就是指在网页制作过程中,用图形图像处理软件提供的切片工具, 将美工设计的网页效果图这种大幅图像,分割成为一系列小的图像, 这些小图像称为原大幅图像的切片。
 
  一张图可以有多种切图方案,但不是所有的切图方案都适合后期的网页制作的。 因此需要在众多切图方案中,找出一种适合后期网页编程的最佳切图方案。
 
  本文中所说的切图技术,就是指的实现最佳切图方案的切图技术。 由于它遵循一些切图原则和技巧,所以它能够实现最佳切图方案。由于切图时,图像的最小单位是像素,矩形对边上的像素个数应该是相同,或者遇到圆角应该是锐化的。 但是在人工操作时,可能会发生像素个数的变化,或者圆角产生顿挫角。 因此,在切图时,将原图采用300%以上的放大倍数切图。
 
  切完整个大图后,把一系列的切片全部选中,接着利用软件中的图像优化工具,即菜单栏中 “窗口 ”下拉菜单 “优化 ”命令对所有的小切片进行优化来解决以上问题。 然后利用文件菜单下的 “导出 ”命令生成 HTML 网页和图像,最后在网页制 作软件 DREAMWEAVER 中建立站点,将上面导出的网页和 小图像都放在网站里。导出的网页文件是不能用的。 因为一 个网站的页面大小要求统一。 因此,接下来的工作是在网页 制作软件中制作表格。 用分块的思想来看整个网页的布局, 一个块就是一个表格。 把网页看成是多个独立的表格组成 的。 将导出的图片插入到单元格中。
 
  日常工作中常用的图形 图像处理软件有 Photoshop、Flash、Firework 等,这些软件中都有切片工具,但是在网页制作时,图形图像处理软件首选使用 Firework。 因为 DREAMWEAVER 中只要对图像双击,系统会自动调用 Firework 软件。
 
  切图原则:
 
  一张图可以有多种相关的切图方案,但不是所有的切图 方案都是合适网页编程的。 所以在切图技术中,应该保证实 现的是最佳切图方案,因此切图技术中还涉及了切图的原则 和切图的技巧。
 
  块与切片的概念:
 
  在本文中所说的一个块与切片概念是不同的。 块和切片 都是网页中的一部分,但是块指的范围比切片大。 块中可以 包含一个或多个切片。 块是指在网页上内容相关的区域范 围。 切片是从图中相关范围中分割出来的一小图形。 如果转 换成网页后,块对应了网页中的表格,而切片对应的是表格中的单元格。
 
  分块的原则一:以相关内容为一块。
 
  根据原图中相关内容,确定整体的切分策略,即切分要 有分块的思想,把整个网页看成是多个块构成的,每个块就是一个table, 块中每一个细节内容就是 table 中单元格中内 容。即将整个网页看成是由多个 table 组成的,然后在具体到 每个 table,去考虑里面应该如何切。 必须强调的是,应该把整 个网页看成是多个独立的块构成,切片是块中的内容。依据这种思想去切图,然后在网页制作软件中,插入多个表格。 块对应成了网页中的表格,切片对应成表格中的单元格内容。
 
  在切图时,同一块中的内容是完整的,也就是说,要保证完整的一部分在一个块内, 例如某区域的标题文字, 网页的LOGO,网页的广告 ,网页的导航区等可以分别是一个独立的 块,这样做的目的是方便日后网页编程和修改。
 
  分块的原则二:尽量分成大行,平行的切。
 
  当一个网页的内容比较多时,在显示网页时是有时间差的,这时要求内容的显示是从上而下从左到右逐行显示网页的内容,决不允许一个网页上的内容杂乱的跳出来。因此,在分块时也应该贯穿逐行分块的原则。
 
  切图的时候要尽量平行的切,也就是说,分成大行,然后再逐行的切。 如果一个网页的显示页面是由多个表格构成的,这样做的目的是当客户端浏览一个网页时,由于它是由多个表格构成的,因此,客户端与网页服务器会生成多个 request 请求,多个表格同时下载信息,因此网页下载的速度就会相对快。避免出现把网页整个页面看成一个块,然后块里又分块,出现块中嵌套块。 因为这种结构在由切片转换成网页后就出现了表格的嵌套,表格的嵌套影响了客户端网页浏览的速度。
 
  切片的原则:以属性相同为依据。
 
  一般切图原则是: 属性相同的区域适合分为一个切片。 属性相同主要是指颜色和形状都没有变化,或者在 X 或在 Y方向上没有变化。 属性渐变的区域适合分为一个切片,渐变 有两种表现形式颜色渐变,形状渐变。
 
  切图的技巧:
 
  切图也有技巧。构成一张图片的信息量是非常大的,因此在服务器中存储一张图片时占的容量也是很大的,同时从 服务器里下载图片到客户端也需要时间也就相当长。 因此, 在利用切片转换成网页时,可以利用一些技巧,即减少切片 个数和减小切片的大小,可以解决以上存在的问题。