网页设计.doc

网页设计第一章 网页基础及Firworks第一节 网页代码一、代码基础1、打开记事本2、输入以下代码： 告诉浏览器这是一个html文件 用来标明文件的题目或字体等需要定义的部分 用来定义文件的标题如：我的网页 与前面的呼应，这是格式的要求。 与前面呼应。 网页的主要部分就放在这下面，如文字、图片、表格等。 1号字 2号字 3号字 4号字 5号字 6号字 段落标志，段落中间会空一行。 换行  表示空格表示注释的内容，包括制作心得、网页中不同板块的标记等，不会显示在网页上。如： 插入图片，“”中间输入图片所在的目录，如果图片与网页文件在同一个目录，可以只输入文件名就可以了，如img src=“1.jpg”。如果图片在与网页文件同一目录的images中，那么，就要写成。表示链接 如：sohu二、网页特效王的运用1、显示时间特效：把网页特效王中的代码拷到网页中下方。2、垂直滚动文字。3、鼠标经过自动变色文字。4、梦幻文字5、IE按钮总动员6、会变色的按钮7、不停闪烁的图片8、屏幕上来回碰撞的篮球9、跟随鼠标不断重合的文字10、跟随鼠标移动的时钟11、飘雪的窗口12、页面产生百叶窗脚本第二节 firework 在网页设计中的运用Firework主要用于网页设计中各种按钮、界面、动态效果的实现，它集矢量和图像处理于一体，易于上手，可以非常方便地进行网页设计，因而受到广泛的欢迎。一、 简单的截面介绍，特别要提到在右边资源面板里的样式，里面有很多立体样式可以选择。具体做法是：画一个封闭的形状（如矩形），双击样式中的一个样式，就会给这一形状填上立体样式，特别适合做各种按钮。二、 简单的图形绘制（网页标志）我们以绘制一个网络标识为例来介绍如何用Fireworks MX来绘制平面图形（如图2-3-2所示）。图2-3-21、 新建一个画布，尺寸自定，颜色为“透明”（如图2-3-3所示）。由于Fireworks MX制作的图片通常被用于某一界面设计中，所以我们一般把背景设为透明。图2-3-32、 用工具栏中的“矢量路径工具”绘制一块飘带（如图2-3-4所示）。用工具栏中的部分选定工具和键选定曲线上的节点并删除一些不需要的节点，然后调整各节点的位置，直到飘带形状达到预想的效果（如图2-3-5所示）。图2-3-4 图2-3-53、在属性栏中，选择渐变填充，在出现的渐变填充类型中选择线性渐变填充（如图2-3-6所示），对其进行填充（如图2-3-7所示）。并根据飘带的起伏，调整填充的颜色。在属性栏中单击填充色块，会弹出渐变色调节板（如图2-3-8所示）。在调节板上的渐变色色带下方单击鼠标，可以增加控制点，并改变控制点的颜色。改变控制点的颜色和位置，直到符合飘带的起伏（如图2-3-9所示），最后选定飘带边线，在属性栏中设为无色，把边线隐藏（如图2-3-10所示）。 图2-3-6图2-3-7图2-3-8图2-3-9图2-3-104、 用“矢量路径工具”绘制一条符合飘带飘动状态的曲线，用文本工具插入“海洋大世界”几个字，调整字的颜色和大小（如图2-3-11所示）。图2-3-115、 按键的同时，选种曲线和文字，单击“文本附加到路径”菜单，使文字依附到路径上。单击“文本方向垂直”菜单改变文本的垂直状态（如图2-3-12所示）。图2-3-126、 选中文本，在属性栏中的效果上单击，添加阴影效果，在弹出的对话框中可以对阴影属性进行调整（如图2-3-13、图2-3-14所示）。图2-3-13阴影与物体的距离 阴影的不透明度 阴影的颜色 阴影的柔化程度 阴影的旋转角度 图2-3-147、 再给飘带添加阴影（如图2-3-15所示），然后选中所有图形，用“滤镜模糊模糊”菜单命令对整个图形进行模糊，执行这命令会出现一个对话框，单击确定即可（如图2-3-16所示）。可以模糊多次，使图形变得柔和，以使图形能与即将合并的界面更协调。 图2-3-15图2-3-16三、动态分隔条制作1、新建一个文件，画出三个并列的矩形。图2-3-172、在帧面板中，点“重制帧”，2帧。3、在三帧中，分别把三个矩形设为：红、黄、蓝，黄、蓝、红，蓝、红、黄。4、在“优化”面板中，设为“GIF动画”，色板为透明。5、按F12看效果，并导出图片。四、文字动画制作1、新建文件，在帧面板中添加4帧。2、在第一帧中写“龙”字，然后复制“龙”到第二帧。3、在第二帧中加入“行”字，然后复制“龙行”到第三帧。4、同理，完成“龙行天下”的其他帧的制作。在第四帧后面添加2帧，不加内容。如果想调整各帧的时间，可以双击帧面板中各帧的最右边，在弹出的对话框中输入需要的时间。五、图像交换制作1、新建文件，画一个显示屏，画一个按钮（如图2-3-18所示）。图2-3-182、 用切片工具把电视屏幕和按钮切片，并在属性栏中分别给两个切片命名为“屏幕”和“按钮”（如图2-3-19所示）。图2-3-193、 在“按钮”切片上，按右键在弹出菜单中添加交换图像行为。4、 在弹出的对话框中选中“屏幕”切片，在图像文件中打开一个图像，完成图象交换的制作，并导出图片，最终效果如下图（图2-3-20所示）。图2-3-21六、按路径移动的制作1、新建文件，单击“矢量”工具箱中的“文本工具”按钮，在“属性”面板上设置文字的格式，设置字体为Arial，字号为20，颜色为黑色。设置完成后，在画布上输入文字“Fireworks”。2、用“矢量路径工具”画一条曲线，按住键同时，选择曲线和文字，选择“文本附加到路径”菜单命令，将文字附着在路径上。3、单击“帧和历史记录”面板右上角的按钮，在弹出的菜单上选择“重制帧”菜单项，重制15帧。4、选择“帧2”选项，然后在“属性”面板上将“文本偏移”值设置为30。依次选取“帧3”、“帧4”、“帧5”将它们的“文本偏移”值分别设置为60，90，120等等，使文字逐渐向右移动。第二章 Flash（平面动画制作）Flash是Macromedia公司的一个网页交互动画制作工具，与GIF动画不同，用Flash制作出来的动画是矢量，不管怎样放大、缩小，都不会播放影响质量。由于用Flash制作动画简便而又美观，所以越来越受广大多媒体设计者的喜爱。Flash动画还可以作为素材用于其他软件的制作，大大丰富了其他软件的制作效果，其中，与多媒体著作软件Authorware配合起来用，会使Authorware制作的作品变得更生动。Flash的主界面如下图（图2-5-1所示）：菜单栏工具栏时间轴 面板属性栏图2-5-1一、简单的变形动画（一）新建flash文档，在场景中输入FLASH几个文字，并在属性栏中设好文字的字体、颜色和背景色（如图2-5-2所示）。图2-5-2（二）在时间轴上15帧位置按“F6”（复制帧）， 把15帧上的字用任意放大工具进行放大，在1到15帧之间点右键单击，在弹出的菜单中选择“创建补间动画”(如图2-5-3所示），就完成了一个文字从小变大的动画，按+观看效果。图2-5-3二、图形的绘制、渐变色的运用、旋转的运用（制作旋转的花瓣），效果图如下图（图2-5-4所示）图2-5-4（一）用椭圆工具画一个椭圆，单击左边工具栏中的“填充色”，打开颜色拾取器，选择线性渐变色（如图2-5-5所示）。再单击右边混色器面板上的，打开混色器面板，单击渐变色带上的深色控制点，在下方的色谱里选择需要的颜色，本例选择粉红色（对于渐变的类型的选择，也可以直接在混色器中进行。）（如图2-5-6所示）。用工具栏中的颜料桶工具对椭圆填充。用工具栏中的选择工具选取椭圆的边线，再按键去掉边线（如图2-5-7所示）。图2-5-5图2-5-6图2-5-7（二）用工具栏中的填充变形工具更改渐变的方向和程度 （如图2-5-8所示），然后，用椭圆工具画出花芯。图2-5-8（三）用复制、粘贴的方式复制该花瓣到其下方，选择下方的花瓣，用菜单“修改变形垂直翻转”命令使其渐变方向改变（如图2-5-9所示）。按住键同时选中这两个花瓣，先复制，再用菜单“编辑粘贴到当前位置”命令使花瓣复制后位置不发生变化。用任意变形工具使其旋转一定角度，从而完成另两个花瓣的制作（如图2-5-10所示）。同理，完成其余花瓣的制作（如图2-5-11所示）。图2-5-9图2-5-10图2-5-11（四）在时间轴上第15帧处按F6复制帧，单击第一帧，选中所有图形，按F8（设为元件），会弹出一个对话框，选择“图形”选项（如图2-5-12所示），确定后第一帧的图形就会变成图形元件（元件的作用是使flash文件较小，同时很多Flash动画都需要在元件上完成）。同理，把第15帧的图形设为图形元件。把第15帧的图形放大，在1到15帧间创建补间动画。选择第1帧，在属性面板中，设旋转为顺时针1次，简易为-100（-100表示由慢到快旋转，100表示由快到慢旋转。）（如图2-5-13所示），至此，完成了一朵花的放大旋转动画。图2-5-12图2-5-13三、沿着路径方向的动画，效果图如下图（图2-5-14所示）图2-5-14（一）设背景为黑色，在图层1中用钢笔工具画一架飞机（如图2-5-15所示），用颜料桶工具填上颜色（如图2-5-16所示）。选择飞机，按F8设为图形元件，在25帧处按F6复制帧。图2-5-15图2-5-17（二）右键单击图层1，在弹出的菜单中选“添加引导层”，在引导层中画一个椭圆，去掉椭圆的填充部分，留下线框。用选择工具选择线框的某一小段，按删去，把椭圆删一个缺口（如图2-5-18所示），在25帧处按F6。图2-5-18（三）在第1帧处，把飞机的中心放在缺口的一端（如图2-5-19所示），在25帧处，把飞机的中心放在缺口的另一端。在图层1的1到25帧间创建补间动画，飞机就会沿着路径移动，但飞机的方向却始终朝上。在属性栏中勾选调整到路径（如图2-5-20所示），这时，飞机的方向就会随路径而变化了，从而完成了整个制作（如图2-5-21所示）。图2-5-19图2-5-20图2-5-21四、利用蒙板绘制钟，效果图如下图（图2-5-22所示）图2-5-22（一）在图层1画一个方框表示钟的外形，插入一个新图层2，在图层2中按住键画一根直线，用复制加旋转的方式，绘制钟的时间刻度（如图2-5-23所示）。图2-5-23（二）插入新图层3，把图层3的属性改为遮罩层（右键单击图层3选取）。在图层3上画一个矩形，去掉矩形填充部分（如图2-5-24所示），按键选择矩形所有边线，在菜单中选“修改形状将线条转换为填充”，再选“修改形状扩展填充25xp”（如图2-5-25所示）。把图层3的属性改为遮罩层（右键单击图层3选取）（如图2-5-26所示）。最后，在图层3上插入一个新图层4，在图层4中相应位置写上时间即可（如图2-5-27所示）。图2-5-24图2-5-25图2-5-26图2-5-27五、位图填充装饰文字（如图2-5-28所示）图2-5-28（一）单击菜单“文件导入导入到库”，在弹出的对话框里打开一个位图，从而把一个位图导入到库中。把外部素材导入到库的作用有两个：一个是便于后面调用，一个是使Flash文件不至于太大。这个时候，我们通过菜单“窗口库”可以打开库面板，在库面板里可以看见刚才导入的图片文件（如图2-5-29所示）。图2-5-29（二）在第1帧处输入FLASH几个字母，设好字体和大小（如图2-5-30所示），并把它打散（）,连着打散两次，直到填充部分彻底分离开。单击墨水瓶工具，在属性栏中更改墨水瓶颜色，改为与字体颜色有区别的颜色，然后，用墨水瓶工具对字的边缘点击，进行描边（如图2-5-31所示）。在混色器中选择位图填充（如图2-5-32所示），按住键选择所有填充，用颜料桶工具进行填充（如图2-5-33所示），再用填充变形工具改变填充密度的大小（如图2-5-34所示），在这个操作过程中，键要一直按着不放，最后，完成位图密度的调整（如图2-5-35所示）。图2-5-30图2-5-31图2-5-32图2-5-33图2-5-34图2-5-35六、简单的文字移动1、 在图层中插入一段英文字母。2、 在第一帧后插入关键帧，同理，有多少字母插入多少关键帧。3、 在第一帧处，按ctrl+b，分离字母，直到字母的填充和线分离，在第一个字母中填入不同颜色。4、 同理完成后面帧中字母的操作。七、倒计时动画1、 画一个圆，再插入一个新图层。2、 在图层2的第一帧出输入“5”，在第6帧处按“f6”复制帧。3、 选择“5”，ctrl+c复制，再ctrl+shift+v原地复制到第7帧，把第7帧中的“5”改为“4”。同理做出4、3、2、1的文字内容。4、 把图层1的帧数延长到与图层2一致。八、多场景变换1、 在图层1上画一个椭圆，在15帧处按f6，并把第1帧和第15帧设为图形元件。选中第15帧的图形，旋转30度，在属性中设“颜色alpha0%”，插入补间。2、 插入图层2，同理，制作文字的旋转，文字旋转1周，并设颜色变化。3、 插入图层3，在16帧处插入空白关键帧，画一个圆，在30帧处按f6，把第16帧和第30帧设为元件，把第30帧的圆压瘪，在图层3插入补间。4、 插入新图层，把空白帧删去。在第16帧处插入空白关键帧，在场景顶部输入文字。在第30帧处按f6，并把第30帧的文字向下移动接近椭圆，再插入补间。九、激光字1、 把背景设为黑色，画一个圆，把圆填充为白色，边框也填充为白色。将圆的边框设为填充（修改形状将线条转为填充），并柔化边框（修改形状柔化填充边缘）。2、 画激光束。用钢笔工具画出及光速的形状，并用渐变色填充，最后把圆形与激光组合，并设为元件。3、 添加引导层，输入字母，用墨水瓶对字母边线填充。去掉字母填充部分，把封闭的字母打开一个缺口，把激光的中心用任意变形工具放在光头部分，再把激光的中心放在缺口的一段。4、 在引导层上25帧处按f6，在图层1上25帧处按f6，在第25帧上，把激光头放在缺口的另一端，给激光加入补间动画，就完成了激光的动画。5、 增加图层，设第1帧为空白关键帧，把引导层的内容原地复制到新图层的第2个空白关键帧中，这时观察光头走过多少线，把这些线选中，通过“转换为填充扩展填充柔化填充”，使这段线变粗。同理，完成其它文字。十、发光按钮1、 在场景中画一个圆形阴影，按f8设为按钮。2、 打开库，选择按钮，双击预览图调到场景中。3、 插入图层2，在阴影上画一个高光偏向一边的圆，按f8设为影片剪辑。4、 在库里面选中影片剪辑，单击预览图，对影片剪辑进行编辑：在第10帧处，按f6并更改第10帧按钮的颜色和高光的位置。然后，在第一帧属性栏中，把补间属性改为形状。在第10帧的动作里输入“stop()”。5、 以上是完成按钮弹起时的动作。回到按钮编辑窗口，同理完成指针经过时的动作。6、 最后把图层1和图层2的帧数延长到适当位置。十一、地球自转1、 设背景为黑色，画一个兰色圆形作为地球，按f8设为图形元件，把alpha设为15%，然后设为影片剪辑，打开影片剪辑窗口，进行编辑。2、 在33帧处按f6。插入图层2，导入地图（flash地球自转1.jpg），在33帧处按f6，做地图向右移动的动画。3、 插入图层3，把地球元件导入，在33帧处按f6，并设图层3为遮罩层。4、 插入图层4，把地球元件导入，设地球元件导入，设alpha为70%，在33帧处按f6。5、 插入图层5，把地图元件导入，在33帧处按f6，并从右向左移动。6、 插入图层6，把地球元件导入，在33帧处按f6，并设为遮罩层。十二、流光溢彩文字1、 设背景色为黑色，画一个长方形矩形，进行渐变填充。2、 通过混色器对长方形的渐变进行调整，如果渐变的密度不够，还可以通过复制该矩形来解决，矩形和矩形之间颜色接合可以通过水平翻转来解决。3、 把第1帧的矩形设为元件，在第25帧处按f6同时将矩形移动到恰当位置，再插入补间。4、 插入新图层2，输入文字“红旗飘飘”，插入新图层3，将图层2的文字复制到图层3备用。5、 把图层2的文字打散，然后，通过修改菜单中的命令对其进行“转为填充和扩展填充”，一般为“2XP”。6、 把图层3的文字打散，用渐变色填充，用填充变形工具调整渐变密度。7、 把图层2、图层3的帧数延长到恰当位置。十三、创建蒙版动画遮罩层不动1、 设背景为黑色，画一个圆形，填充渐变色，用填充变形工具调整。在15帧处按f6，把第一帧的属性改为“形状”，在第15帧处画星形，并变色，把圆形删除，在30帧处画椭圆，并变色，把星形删除。2、 插入图层2，输入文字，并将该层设为遮罩层。十四、创建蒙版动画放大镜1、 输入一段文字，在40帧处按f6，在50帧处按f6，缩小第50帧的文字，并在40帧与50帧之间插入补间动画，在第60帧处按f6.2、 插入图层2，在第1帧处文字上画一个圆，去掉线框，按f8设为元件，在第15帧处按f6，并恰当移动圆，加入补间。同理，在30帧、40帧处设这种动画。3、 在第50帧处，圆形不仅移动，还要变大。在60帧处按f6，把图层2设为遮罩层。十五、按钮的运用1、 输入一段文字，按f8设为影片剪辑，打开影片剪辑窗口，做文字从小到大的动画，然后删除场景中的文字。2、 画一个信封（关闭的信封），按f8设为按钮。打开按钮编辑窗口，在指针经过处画一个打开的信封，并把文字的影片剪辑放在信封口。六、制作逐帧动画1、新建一个动画文档，在“属性”面板中将场景大小设置为500X250，背景色设置为白色。2、在图层中将图层1重命名为“人物”，然后使用绘图工具（铅笔工具）在场景中绘制如下图的人物轮廓线条。3、使用颜料桶工具为轮廓的各部分填充上适当的颜色。（为了节约时间，可以直接把“FLASH制作逐帧动画制作逐帧动画.FLA”中的人拷到“人物”图层中去。）4、在第2帧插入空白关键帧，用类似的方法在该帧中绘制如下图的关键帧图形。5、用类似的方法在第36帧中，分别绘制如下图的4个关键帧图形。6、在“人物”图层上方新建“影子”图层，然后选择椭圆工具，并在“混色器”面板中设置黑色放射状渐变色，使用椭圆工具在人物图形的脚部下方，绘制一个表现阴影的椭圆，并使用填充变形工具对渐变色的位置和范围进行调整，如下图所示。7、第1帧分别复制到第26帧，然后根据各帧对应的人物图形，对椭圆的大小和位置进行调整，如下图所示。8、在“人物”图层下方新建“背景”图层，选择“文件导入导入到库”命令，将“FLASH制作逐帧动画动感模糊.jpg” 导入到库中。9、在“库”面板中将“动感模糊.JPG”拖动到场景中，然后对其大小和位置进行调整，使其高度与场景相同，并将其右侧边缘对齐场景的右边界。10、将第1帧复制到第2帧中，然后将第2帧中的“动感模糊.jpg”向右水平移动一定距离，以表现出背景后移的效果。11、用同样的方法，分别制作第36帧中背景图片向右移动的动画效果。12、在图层区中将“影子”图层拖动到“人物”图层下方，完成后的场景效果如。七、制作引导层动画1、新建一个文档，在“属性”面板中将场景大小设置为500200，背景颜色设置为白色，帧频设置为l 5。2、选择“文件导入导入到库”命令，将“FLASH制作引导动画蓝天.JPG、塔.JPG、云jpg”导入到“库”中。3、新建“树叶1”图形元件，在编辑场景中绘制如下图所示的树叶图形（为了节约时间，直接打开“FLASH制作引导动画制作引导动画.FLA”中的库里面相应的元件，复制到本文档场景中。）4、新建“树叶2”图形元件，在编辑场景中绘制如下图所示的树叶图形（同理，可以直接拷贝过来。）5、新建“风车”影片剪辑，在编辑场景中绘制如下图所示的风车图形（同理，打开示例文件的风车影片剪辑，把风车拷贝过来。）6、在“风车”影片剪辑里，选中第1帧，设为图形元件，创建动作补间动画，将第1帧复制到第l 00帧，然后选中第l帧，并在“属性”面板中做如下图所示的设置，使风车图形出现顺时针旋转一周的动作补间动画效果。7、返回主场景，将图层l重命名为“背景”图层，在“库”面板中将“蓝天.JPG”拖动到场景中，并将其调整到与场景相同的大小。在第300帧按F6插入普通帧。8、新建“云”图层，在“库”面板中将“云.JPG”拖动到场景中，按ctrl+B键将图片打散，并将图片周围的黑色区域擦除（可以把范例中的云直接拷贝过来），然后将图片拖动到如下图所示的位置。9、选中第1帧创建补间动画，将第1帧分别复制到第1 5帧、第280和第300帧，然后把第280帧和第300帧中的云图形分别向右拖动一段矩形，使云呈现出向右飘动的补间动画效果。10、分别将第1帧釉第300帧中的图形Alpha值设置为0。11、新建“塔”图层，在“库”面板中将“塔.JPG”拖动到场景中，按CTRL+B将图片打散，并将图片周围的黑色区域擦除（为了节约时间，可以吧示例文件中的图直接拷贝过来），然后将图片拖动到如下图所示位置。12、在“库”面板中将“风车”影片剪辑拖动到场景中塔图形的上方，并将其做适当角度的倾斜。在第300帧插入普通帧。13、新建“树叶l”图层，在第1 9帧插入空白关键帧，在“库”面板中将“树叶l”图形元件拖动到场景中，把树叶缩小到适当程度。在第66帧插入普通关键帧。14、在“树叶l”图层上方新建引导层，在第1 9帧插入空白关键帧，在引导层中绘制如下图所示的引导线。在第66帧插入普通关键帧。15、在“树叶l”图层中，选中第1帧创建补间动画，然后在场景中选中“树叶1”图形元件，将其拖动到引导线的左端，并使其吸附到引导线上。把“树叶1”图形元件适当缩窄。16、选中第1帧，在“属性”面板中做如下图所示的设置，使动画对象在运动过程中自动旋转。17、将第66帧中“树叶1”图形元件适当缩窄，并拖动到引导线的另一端。18、在引导层上方新建“树叶2”图层，在69帧插入空白关键帧，中将“树叶2”图形元件拖动到场景，然后在第69114帧创建类似的引导动画。19、用同样方法在100-150帧处创建“树叶3”的动画，在145-200处创建“树叶4”的动画，在205-270处创建“树叶5“的动画。八、制作页面跳转1、新建一个flash文档，设场景大小为800X600，背景为白色。2、选中“文件导入导入到库”命令，把“flash页面跳转黄金矿工.jpg，1.mp3”导入到库中。在导入LFV文件时选择嵌入式。3、把“黄金矿工.jpg”拖入到场景1中，插入图层2，选中第一帧，设属性如下图。4、打开菜单“窗口公共库按钮”，在弹出窗口中选择“classic bottonsarcade botton-green”，把该按钮拖到库里，并重新命名该按钮为“进入”。打开该按钮的编辑窗口，插入新图层，输入白色文字“进入”。同理制作“退出”按钮。5、回到“场景1”，插入图层3，把“进入”按钮、“退出”按钮拖到场景中合适位置，选中“退出”按钮，在动作中输入：on(release)fscommand(quit,true)6、选择“进入”按钮，在动作中输入：on (release) stopAllSounds(); gotoAndPlay(场景2,1);7、分别选择各图层，在动作中输入：stop();8、按shift+f2打开场景建立对话框，选择复制场景，把场景名称改为场景2。单击菜单“插入新建元件”，新建影片剪辑，命名为“场景2动画”。9、打开“场景2动画”影片剪辑编辑窗口，用原地复制的方式，把场景1的背景图片复制到图层1中，插入图层2，把库中的“黄金矿工2.jpg”拖入到背景图片的右边，并做从右向左移动的动画，直至图片移动到与背景图片重合，可做15帧，选中图层2的最后一帧，在动作里输入：stop();10、在“场景2动画影片中，把图层1删除。插入新图层3，在与移动动画最后一帧对应处插入空白关键帧。11、打开菜单“窗口公共库按钮”，在弹出窗口中选择“classic bottonsarcade botton-yellow”，把该按钮拖到库里，并重新命名该按钮为“视频1”，打开改按钮编辑窗口，输入白色“视频1”文字。同理，制作“视频2”按钮。同理制作“观看图片”、“返回”按钮。12、打开菜单“窗口公共库按钮”，在弹出窗口中选择“classic bottonscircle bottons circle with arrow”，把该按钮拖到库里，并重新命名该按钮为“翻页”。13、把上面这些按钮拖到图层3的最后一帧的合适位置，“翻页”按钮可以通过翻转来完成两个不同方向的按钮形状，如下图所示：14、按shift+f2打开场景窗口，新建4个场景。15、在“场景2动画”影片剪辑中，选中“观看图片”按钮，在动作中输入：on (release) tellTarget (_root) 强制指定路径（影片中的按钮要用）gotoAndPlay (场景 3, 1); 16、选中“视频1”按钮，在动作中输入：on (release) tellTarget (_root) stopAllSounds(); gotoAndPlay(a1); 到”a1”帧（如果gotoAndPlay()无效，可用这种方法）17、选中“视频2”按钮，在动作中输入：on (release) tellTarget (_root) stopAllSounds(); gotoAndPlay(a2);18、选中“返回”按钮，在动作中输入：on (release) tellTarget (_root) stopAllSounds(); gotoAndPlay(a3);19、把“场景2动画”中的图层2、图层3的最后一帧内容分别复制到场景3的图层1、图层2中去。20、把1、2、3、4.jpg分别制作成图形元件1、2、3、4，插入新图层3，在图层3中第1帧后面插入5个空白关键帧，把元件1、2、3、4分别放入2-4空白关键帧中，在图层1、2的第6帧处插入普通帧。把元件1、2、3、4的位置调整到背景图片的显示屏图形里。21、把图层2拖到图层3上方，在“场景3”中的所有层的第一帧的动作里输入：stop();22、在图层3的第一帧动作里再输入：gotoAndPlay(2);23、在图层3的最后一帧的动作里输入：gotoAndPlay(5);24、选中向前翻按钮，在动作里输入：on(release)prevFrame(); 前进一帧25、选中向后翻按钮，在动作里输入：on (release) nextFrame();26、选中其他按钮，分别在动作里把“tellTarget (_root) ”删除，因为不是影片剪辑不能用这一语句。27、打开场景4，把场景3中的“图层1、2”的内容分别复制到场景4里，插入新图层，把库中“2.flv”拖到新图层中，并同意扩展帧。选中第一帧，命名为“a1”，在动作里输入：stop();在把视频的最后一帧转为关键帧，不制动插入帧，在动作里输入：gotoAndPlay(1)把放置按钮的图层拖到新图层上方。28、打开“窗口公共库按钮”，在对话框中选择“playback roundedrounded grey play、rounded grey pause”，把它们拖到库里。在把它们拖到按钮图层中，并调整到视频上。如下图所示：选中播放按钮，在动作里输入：on (release) play();选中暂停按钮，在动作里输入：on (release) stop();29、视频2的制作方法与视频1一样，这里就不论述了。打开场景6，把场景1的内容分别复制到场景6中，插入新图层，命名为“a3”。把“场景2动画”拖到场景中，与背景对齐，在新图层动作里输入：stop();这样就完成了整个flash的制作。九、mp3播放器1、新建一个Flash，设场景大小为220X290，背景为白色。2、选择“文件导入导入到库”命令，把“Flashmp3外观.jpg”和“一路向北.mp3”导入到库中。3、新建“进度条”图形元件，绘制一个灰色进度条图形。4、新建“拖动按钮”按钮元件，选中“弹起”帧，绘制一个橙黄矩形，然后将“弹起”复制到“指针经过”帧，并把矩形填为红色，最后在点击中插入普通帧。5、新建“播放”按钮元件，在“弹起”帧绘制一个深绿三角形，将“弹起”帧中的图形分别复制到“指针经过”、“按下”和“点击”帧中，然后将“指针经过”帧中的三角形填充为黑色，将“按下”三角形填充为红色。6、用同样方法制作“快进快退”和“停止”按钮元件。7、新建“按钮调整”影片剪辑，在“库”面板中将“拖动按钮”拖动到编辑场景的中央，选中按钮图形，在“动作”面板中输入：on (press) 单击按钮startDrag(, false, left, top, right, bottom); 开始拖动影片on (release, releaseOutside) 单击按钮并释放按钮stopDrag(); 停止拖动8、新建“波状条”影片剪辑，在第24帧分别插入空白关键帧，然后使用矩形工具分别在各帧中绘制形状不同的黑色矩形条图形，如下图所示。9、新建“屏幕显示”影片剪辑，将图层1命名为“波状条”图层，然后选中第1帧，在“动作”面板中输入：stop()；11、在第2帧插入空白关键帧，在“库”面板中将“波状条”影片剪辑拖动到编辑场景中，在第80帧插入普通帧。12、新建“歌名”图层，在第2帧插入空白关键帧，在场景中左上角输入“一路向北mp3一周杰伦”黑色文字，然后在第280帧创建文字向左移动的动作补间动画。13、选中第80帧，在“动作一帧”面板中添加以下语句gotoAndPlay(2); 跳转到第2帧开始播放14、新建“状态”图层，在第2帧插入空白关键帧，然后在“库”面板中将“正在播放”影片剪辑拖动到场景中“波状条”影片剪辑上方的适当位置，并在第80帧插入普通帧。15、新建“遮罩”图层，在该图层中绘制一个与“外观jpg”图片中显示屏部分相同形状和大小的图形（可以把外观图导入对应着画），并使其将“波状条”影片剪辑和“正在播放”影片剪辑覆盖，在第80帧插入普通帧。把“遮罩”层下面的图层属性设为“被遮罩”（可以通过在图层上“单击右键属性”来进行设置）。16、在“库”面板中选中“一路向北.mp3”，并单击鼠标右键，在弹出的菜单中选择“链接”命令。在打开的“链接属性”对话框中，做如下图所示的设置，然击“确定”按钮完成设置。17、返回主场景，将图层1重命名为“外观”图层。然后在“库”面板中将“外观.jpg”拖动到场景中央，并将其调整到完全覆盖场景的大小。18、新建“按钮”图层，在“库”面板中将“播放”按钮元件拖动到场景中“外观.jpg”上方的适当位置。用同样的方法将“快进快退”和“停止”按钮元件拖动到场景中。将“快进快退”制一个将其做水平翻转，再将各按钮元件放置到适当的位置，如下图所示。19、选中“播放”按钮元件，在“动作一按钮”面板中添加以下语句： on (release) 单击按钮_root.song.stop(); 停止所有声音_root.song = new Sound(); 新建声音_root.song.attachSound(01); 链接01声音_root.song.start(); 开始播放_root.pm.gotoAndPlay(2); 同时跳转到pm的第2帧开始播放 这段语句的作用是单击该按钮后，首先停止所有声音的播放，再新建一个声音对象，然调用并播放库中的音乐，并同时将场景中的pm影片剪辑跳转到第2帧播放。20、选中“停止”按钮元件，在“动作一按钮”面板中添加以下语句on (release) 单击按钮_root.song.stop(); 停止所有声音_root.pm.gotoAndStop(1); 同时跳转到pm第1帧并停止这段语句的作用是单击该按钮后，停止声音的播放，然后将场景中的pm影片剪辑跳转到第1帧并停止。21、选中作为快退按钮的“快进快退”按钮元件，在“动作一按钮”面板中输入以下语句：on (release) 单击按钮if (_root.song.position/_root.song.duration)0.05) 如果声音当前时间除以歌曲总时间大于5%pos = _root.song.position/1000; 到当前播放位置_root.song.stop(); 停止所有声音_root.song.start(pos-0.05*_root.song.duration/1000), 1); 向后跳转5%处开始播放1次_root.pm.gotoAndPlay(2); 并将pm影片转到第二帧开始播放 else 否则_root.song.stop(); 停止所有声音_root.pm.gotoAndStop(1); 并将 pm影片跳转到第1帧停止这段语句的作用是单击该按钮后，首先判定歌曲当前播放时间除以歌曲总时间的结果是否大于0.05，如果满足条件，则向后跳转5的音乐长度然后继续播放，并将pm影片剪辑跳转到第2帧播放。否则停止播放音乐，并将场景中的pm影片剪辑跳转到第1帧停止。22、选中作为快进按钮的“快进快退”按钮元件，在“动作-按钮”面板中输入以下浯句：on (release) 单击按钮if (_root.song.position/_root.song.duration)0.95) 如果声音当前时间除以歌曲总时间小于95%pos = _root.song.position/1000; 到当前播放位置_root.song.stop(); 停止所有声音_root.song.start(pos+0.05*_root.song.duration/1000), 1); 向后跳转5%处开始播放1次_root.pm.gotoAndPlay(2); 并将pm影片转到第二帧开始播放 else 否则_root.song.stop(); 停止所有声音_root.pm.gotoAndStop(1); 并将 pm影片跳转到第1帧停止这段语句的作用是单击该按钮后，首先判定歌曲已播放的是否小于音乐总长度的95，如果满足条件，则向前跳转5的音乐长度然后继续播放，并将pm影片剪辑跳转到第2帧播放。否则停止播放音乐，并将场景中的pm影片剪辑跳转到第l帧停止。23、在“库”面板中将“进度条”图形元件和“按钮调整”影片剪辑，拖动到场景中，放置到适当位置，如前图所示。24、在场景中选中“按钮调整”影片剪辑，然后在“动作一影片剪辑”面板中输入以下语句onClipEvent (load) 载入抓取事件left = _x-28; 向左可移动28像素right = _x+28; 向右可移动28像素top = _y; 向上可移动0像素bottom = _y; 向下可移动0像素center = _x; 中心在该范围的X轴中心上onClipEvent (enterFrame) 进入抓取事件框架_root.song.setPan(_x-center)*3); 设置左右声道大小比例这段语句的作用是限制“按钮调整”影片剪辑的拖动范围，使其只能向左右方向做28像素距离的拖动。然后根据拖动的范围，以按钮当前位置与标尺中心的距离，设置声音在左右道的声音大小比例。 25、在“库”面板中将“进度条”图形元件和“按钮调整”影片剪辑，拖动到场景中将其做适当的旋转，放置到适当的位置，如前图所示。 26、在场景中选中“按钮调整”影片剪辑，然后在“动作一影片剪辑”面板中输入以下语句：onClipEvent (load) 载入抓取事件left = _x; 向左可移动0像素right = _x; 向右可移动0像素top = _y; 向上可移动0像素bottom = _y+50; 向下可移动50像素onClipEvent (enterFrame) 进入抓取事件框架_root.song.setVolume(_y-bottom)*2); 设置音量向下变小这段语句的作用是限制“按钮调整”影片剪辑的拖动范围，使其只能向下方做50像素距离的拖动，然后根据拖动的范围，以按钮当前位置与标尺中心的距离设置声音的音量大小。27、新建“屏幕”图层，在“库”面板中将“屏幕显示”影片剪辑拖动到场景“外观.jpg”中的屏幕位置（如果大小不合适，可以对“屏幕显示”影片进行调整）。28、在场景中选中“屏幕显示”影片剪辑，然后在“属性”面板中将其名称设置为“pm”。29、按【Ctrl+Enter】键测试动画，通过单击和拖动相应的按钮，即可播放音乐并对声音进行适当的控制。第三章 Dreamwaver制作网页第一节 用图片进行网页设计一、 在dreamweaver中建一个名为”bussness“网站。二、 用firework对图片切片（介绍切片的作用）1、 打开firework，单击新建文件，在弹出的对话框中输入与图片大小符合的尺寸，这里设为760，765，并设背景为透明。2、 单击文件导入1webpic.gif，选择切片工具，对图片进行切片，可以根据版面的需要进行切片。如需要建立链接的地方，需要插入文本和图片的地方等。3、 导出切片到建立的站点里，要勾选“包括无切片区域“、将图像放入子文件夹。三、 在dreamweaver中制作网页。1、 把网页名称改为”index.html“，服务器会首先读取这个页面，在网站中所有文件必须是英文字母，否则浏览器在读取的时候会出错。在标题上输入“网络商务驿站。2、 设置页面属性（包括背景、边距为0、编码（简体中文），全选页面，把它居中。给该页面添加背景音乐。在站点新建一个名为mp3文件夹，把1文件夹中的“普罗旺斯.mp3”拷到该文件夹中。回到dreamweaver，在代码视图中，把插入和之间，在浏览器中运行该页面，就可以看到效果了。3、 建立一个css样式，在右边面板css样式中，单击右上角的三角，在下拉菜单中选新建，在“类”类型下，名称必须以“.”开头，后面再输入名称。在打开的对话框中，设置字体的颜色和风格。（css 样式的作用有两个，一个是使网站风格统一，如文字的css样式，由于各页面采用了同一文字样式，使网站风格统一起来。二是使网页在其他用户浏览器中运行时不会出错，如：字体不符等现象不会改变页面字体的风格。）4、 把需要插入文字的地方的图片删除，再把该图片设为背景图片。再把1文件夹中的文本复制到该处即可，并使用前面创建的CSS样式。如果要使文本前面后退,