1、网页设计基础,网络中心：王大阜Tel:13505208874 Mail:,1,网页设计基础,专题：FireWorks + Flash,2,网页设计基础,1.1FireWorks概述,矢量图使用称为“矢量”的线条和曲线（包括颜色和位置信息）呈现图形。编辑矢量图形时，修改的是描述其形状的线条和曲线的属性，而不是像素点，所以矢量图放大后仍然保持清晰。位图图像:由像素点描述图像，图像是由每个像素点的位置和颜色值决定的。放大位图图像时，会变得模糊，变成马赛克状,3,网页设计基础,1.1FireWorks概述,Fireworks界面,4,网页设计基础,1.1FireWorks概述,Fireworks界面工
2、具箱有些按钮右下角有箭头，点击按钮不松手，可以看到很多子选项选择：实心箭头：全部选定工具选中整个对象，四周出现“缩放点”空心箭头：部分选定工具选中某对象的路径，四周出现“控制点”如何选中多个对象？按住Shift键使用实心箭头，选中多个对象,5,网页设计基础,1.1FireWorks概述,Fireworks界面属性面板画布的属性某个图形对象的属性（实心指针）,画布大小和对象尺寸吻合,修改画布大小，注意基准点,X,Y是对象的坐标，画布左上角顶点坐标是（0,0）,滤镜效果很多，如发光、浮雕、模糊、投影等,6,网页设计基础,1.2FireWorks操作,Fireworks文件操作新建文档适用于制作网页
3、效果图和其他平面效果图的时候操作：“文件”-“新建”打开文件Fireworks可以打开Photoshop格式(psd)的图片或gif、jpg等图片操作：“文件”-“新建” OR 鼠标拖拽图片文件到Fireworks界面的任意区域，但不能拖动到工作区中，那就相当于导入文件导入文件适用情形：要在一张图片上插入其他的图片操作：“文件”-“导入” 保存文件“文件”-“保存”，保存的是png格式文件，保留了图片的原始信息，方便今后修改，与PhotoShop类似导出文件“文件”-“图像预览” -设置相关属性-“导出”,7,网页设计基础,1.2FireWorks操作,Fireworks图形处理操作Firew
4、orks操作分为两类：编辑图片素材（如裁剪图片、去掉照片的背景颜色）自己绘制图形（如网页效果图，大多数操作都是绘制操作）编辑图片素材：改变图片大小、裁剪“先选择，后操作“，选择，即创建选区，工具有：矩形选取框，椭圆选取框，套索，多边形套索，魔术棒,8,网页设计基础,1.2.1 编辑位图,选区操作：创建选区，“边缘”选项，有三种“实边”：选取框严格按照鼠标操作产生区域“消除锯齿”：防止出现锯齿“羽化”：柔滑选区边缘（边缘模糊）选区操作：删除：Delete键复制：Ctrl+C,Ctrl+V移动：实心选定工具，移动选取，原选取变成”空洞“反向选取：鼠标右击-”修改选取框”-“反选”取消选取框：ESC
5、键绘制多个选区，可按住Shift键矩形选取框，操作时，按住Shift键可绘制正方形，如再按住Alt键，会从中心点绘制椭圆选取框，同上,9,网页设计基础,1.2.2 矢量位图,绘制矢量图形矢量图形基本构成,笔触颜色、粗细、样式,填充颜色,笔触,填充,10,网页设计基础,1.2.2 矢量位图,绘制矢量图形矢量图形种类直线矩形正方形（按键与选取操作一致）椭圆形圆形（按键与选取操作一致）多边形自由形状很多圆角矩形,缩放点,控制点，按住Alt键拖拽变成直角,11,网页设计基础,1.2.2 矢量位图,绘制矢量图形填充颜色实心（纯颜色）渐变（两种或两种以上颜色的过渡，通常选择”线性“选项）图案,渐变结束颜色
6、,渐变开始颜色,渐变开始透明度,渐变结束透明度,渐变中间颜色,渐变引导线,可平移引导线,可旋转、伸缩引导线,12,网页设计基础,1.2.2 矢量位图,编辑文字安装字体Windows自带的字体目录：C:WindowsFonts，但一般不具有艺术效果，需下载字体，字体文件扩展名为ttf。下载后，复制到字体目录，重启FireWorks即可使用。字体操作字体、大小、颜色、字间距、描边（笔触）投影倒影字选中文字对象，按住ALT键拖动复制，为倒影使用先垂直翻转修改-变形-垂直翻转后线性渐变色填充字体）,笔触,滤镜-投影,字间距,13,网页设计基础,1.2.3 蒙版,蒙版蒙版作用是显示图像的某些区域或使图像
7、由模糊到清晰进行过渡的技术，有遮罩的意思。粘贴于内部使图像位于某种形状对象内部操作：绘制一圆角矩形，有直角导入图片，改变图层顺序，使图片位于圆角矩形下方实心选择工具选中图片，剪切选中圆角矩形，鼠标右击，选择“编辑”-“粘贴于内部”,14,网页设计基础,1.2.3 蒙版,蒙版组合为蒙版制作图像由清晰过渡到透明的渐隐效果操作：导入图片使用“矩形”工具，绘制一个和图片尺寸一样的矩形，设置填充为 线性渐变，颜色从黑到白通过层面板，按住Ctrl键同时选中矩形和图片选择菜单“修改”-蒙版-“组合为蒙版”,15,网页设计基础,1.2.4 提取图片,保存必要的图片效果图制作完毕后，需要从中提取部分区域作为单独
8、的图片文件。如顶部大幅图片、圆角矩形选项卡等等其他的从网上搜集的素材，如新闻列表小图标，没必要提取。提取方法：复制-新建文档-粘贴-导出新建文档时，画布的大小刚好就是所复制的图形对象大小（默认的）切片与导出选中切片工具，在图片上拖动鼠标，即可创建切片，切片是绿色半透明的矩形，四周是红色的线导出切片（“文件”-“导出”）仅导出图像HTML和图像,切片工具,16,网页设计基础,1.3 Flash动画,Flash 8,工具箱,舞台,面板,属性面板,时间轴,图层,17,网页设计基础,1.3 Flash动画,Flash制作流程在舞台中作图，也可以使用现有的图片素材制作Flash动画逐帧动画补间动画（只需
9、创建第一帧和最后一帧，中间帧可以自动生成）导出Flash“文件”-“保存”，文件扩展名为.fla。保留原始信息“文件”-“导出影片”，导出成swf格式的动画,18,网页设计基础,1.3 Flash动画,Flash动画基本原理动画的内容通过时间轴组织的。时间轴将动画的内容在横向上划分为帧，在纵向上划分为图层帧：动画的一个静态片段空白关键帧（空心圆），没有内容、空白的帧，如在舞台中绘制一个圆形，空白关键帧就转换成关键帧。关键帧（实心圆），产生动画的起关键作用的帧普通帧（空心矩形），是关键帧的延续图层：动画的某个演员,19,网页设计基础,1.3 Flash动画,补间Flash自带的动画技术，实现两个
10、关键帧之间建立渐变的一种动画形状补间从一种形状逐渐变成另一种形状的动画，如圆形变成正方形动画补间关键帧的对象必须是元件的实例、群组体或文字元件是可以重复使用的具有模板意义的图像、动画或按钮实例是元件在舞台上的具体体现群组体是指在舞台上同时选中多个对象，选择菜单中”修改“-”组合“命令，将多个对象组合到一起而生成的对象原理设置好第一个关键帧，然后再第二个关键帧中修改对象的属性，从而在两帧之间产生动画效果可以修改的属性包括大小、颜色、旋转和倾斜、位置、透明度等,20,网页设计基础,1.3 Flash动画,SwishMax制作动画的简单工具，操作简单、傻瓜化，内置了两百多种动画效果，目前最高版本4.0,21,网页设计基础,1.3 Flash动画,SwishMax基本操作编辑文字或导入图片添加效果保存，文件扩展名是.swi导出影片（.swf）,
