13996527831
网站建设知识详细

Fireworks CS6网页切片流程

发表日期:2020-12-30 23:10:06   作者来源:米卓网络   浏览:    

  Fireworks CS6是一个功能强大的平面图片设计软件。 Fireworks有许多专门针对网页设计的工具与功能,可以方便地进行网页图片的设计和开发与Photoshop不同的是, Fireworks除了具有 Photoshop一样的图片设计功能以外,还有专门针对网页设计的切片工具和图片优化工具,可以方便地完成图片的网页切片和图片的优化。如图9-1所示为Fireworks CS6的工作界面。

Fireworks CS6网页切片流程

  同 Dreamweaver一样, Fireworks下面是“属性”面板。单击设计区的对象以后,“属性”面板会显示与这个对象相关的属性,可以在“属性”面板中对这个对象的属性进行设置。右边是各种工作对话框,左边有着和 Photoshop相似的工具条。

  在工具栏中部的web工具中,分别为“矩形热点工具”“切片工具”“隐藏切片与热点工具”“显示切片与热点工具”。这4个工具是专门用来对网页进行切割和建立热点链接。

  网页效果图上有各种功能模块,这些功能模块需要根据版面的内容用 Fireworks进行切割。网站的Logo、Banner、导航条、图片等内容都需要切割出来,切割完成以后需要进行优化与输出。

  在进行页面切图时,首先要确定需要切图的内容。切图的内容就是需要输出到网页上的内容。网站的Logo、 Banner、图片等内容,需要按照布局与大小切割成小图片。

  在进行切片时,需要考虑到网页的内容制作和布局排版、网页编程等因素。合理的网页切图有利于网页的排版与设计,切图时需要注意以下内容。

  不要把一个完整的图片部分切割到两个图片。

  可能输入文字的区域不需要切片。

  不需要输出的背景可以不切片。

  在切片时需要注意不同切片的布局,应尽量整齐排列。

  每一个切片的大小要合适。太大的图片不利于下载,如果图片太小会产生很多图片。

  使用切片工具进行网页切片。单击工具栏中的“切片工具”國,在图片的Logo上面按住鼠标左键不放拖动,切割这个Logo图片。切割的图片以较深的颜色显示。

  用步骤(2)的方法,将艺术字与 Banner图片切割成两个切片。在切片时,需要注意切片的高度应与Logo图片切片的高度相同。

  继续切割网页导航条、网页布局区域中的图片内容。在这些切片中,需要这些切片的大小合适、布局合理。同时需要考虑到在 Dreamweaver Cs6中便于网页的排版。