项目四 网店分类列表区的设计与制作 - 图文

模式的图像。在拖拉时用渐变填充区域，以按下鼠标处为起点和松开鼠标处为渐变终点。渐变工具属性栏如图4-X所示。

图4-X 渐变工具属性栏

渐变类型选项从左到右为： 线性渐变 径向渐变 角度渐变 对称渐变 菱形渐变

，以直线从起点渐变到终点。 ，以圆形图案从起点渐变到终点。 ，围绕起点以逆时针扫描方式渐变。 ，使用均衡的线性渐变在起点的任一侧渐变。

，以菱形方式从起点向外渐变。终点定义菱形的一个角。

工具属性栏中另一所圈选的勾选区为：

反向，对换渐变的起点和终点的设置，反转渐变填充中的颜色顺序。 仿色，可以在较少的颜色中创建较为平滑的过渡效果。仿色在网页设计中较为常用，因为较少的颜色数也就意味着可以减小图片的字节数，有利于在带宽有限的网络上快速传递。当然过少的颜色也必然损失图像的细节质量。一般该选项被默认勾选。

透明区域，可以保持渐变设定中的透明度，如果不勾选，渐变中就不带有透明区域。一般该选项也被默认勾选。

预设渐变选项，可从图4-X所圈选的下拉箭头中选择。

图4-X预设渐变选项

自定义渐变

点击公共栏中的渐变缩览图，可进入“渐变编辑器”对话框。在“渐变编辑器”对话框中，可通过点按可添加色标来增加中间色，如图4-X所示。

图4-X 添加色标增加中间色

更改色标中的颜色，以及位置。可通过鼠标点选色标来设置，如图4-X所圈选所示。其中色标两侧的菱形“颜色中点”则代表该色标颜色的色域范围，可移动来改变范围。删除色标，可通过鼠标按住色标下拉删去色标。渐变条的上边沿色标则是表示不透明度的“不透明度色标”。以白色色标表示不透明度0%，一直过度到黑色表示不透明度100%。位于渐变条上方的“平滑度”，可控制色彩的过渡范围，默认的100%可得到最亮丽最丰富的过渡色彩。渐变类型除了默认的实底外，还可选择“杂色”，即在指定的色彩范围内随机地挑选色彩，不能手动自定义设置色标和不透明度色标。

图4-X 更改色标的位置和颜色

5 任务拓展

1.电子商务网店商品分类

在电子商务网店或者电子商务商城，商品分类是非常重要的一环。商品分类列表也在主页中占了重要位置。商品分类列表类似于传统商场中分区和分货架，分类的不同也能体现不同的商品管理方式。在制作分类列表时，常见采用文字结合图片处理的方式来实现。在电子商务商城中主要采用文字来分类，而网店更多采用图片修饰的方式来制作分类列表。

对于分类的方式，最常见的是采用商品种类进行分类，如图4-X所示。按商品种类不同来制作不同的图标，再进行文字和图片的美化修饰。