第8课 网页设计

1、第8课 网页设计课题：网页设计 课型：新授课 课时：3课时教学目标（思想、知识、能力）：1、通过本课学习设计制作网页，锻炼同学们的绘图能力。2、使同学们学习使用photoshop设计制作网页，生面网页格式。教学重点：使用photoshop设计制作网页，生面网页格式。教学难点：使用photoshop设计制作网页，生面网页格式。教学程序：复习提问：1、怎样隐藏图层？怎样移动图层？导入新课：上节课我们学习的滤镜的使用方法，学会选区的绘制与修改。本节课我们学习设计制作网页，锻炼同学们的绘图能力。同学们学会使用photoshop设计制作网页，生面网页格式。讲授新课：1、主框架制作第1步：新建一个名为“网

2、页设计”的文件，宽是770像素，高是470像素，分辨率是72像素，颜色模式是RG，背景内容是白色。第步：新建一个图层，命名为“底色”。将前景色设置成“#D1E0AD”，用前景色填充“底色”图层。单击“滤镜”莱单“纹理”子菜单中的“纹理化”命令。第3步：单击“编辑”菜单“预置”子菜单中的“参考线、网络切片”命令，进行设置。第4步：单击“视图”菜单中的标尺，显示标尺。第5步：单击“选择”菜单中的“变换选区”命令，再单击“编辑”菜单“变换”子菜单中的“透视”命令，将光标移动到选框的左上角，向右移动5个格，单击“进行变换”按钮完成操作。第6步：选取工具箱中的“魔棒”工具，在空白处单击，新建一个图层，命

3、令为“大轮廓线”。单击“选择”菜单“修改”子菜单中的“扩展”命令，扩展量是7像素。第7步：单击“图层”菜单“图层样式“中的”斜面和浮雕“进行设置。二、按钮制作第1步：在“背景“图层的上面新建一个图层，改名为”按钮区“。画一个高2个格的长条，用前景色填充。单击“图层”菜单“图层样式”子菜单中的斜面和浮雕。进行设置。第2步：新建一个图层，改名为“按钮”。在相应位置画一个宽6个格的小长方形。单击编辑菜单中的填充命令，在填充对话框中设置填充内容为“白色”再单击编辑菜单中的描边命令，设置描边为1像素，颜色选黑色，位置居内。第3步：复制“按钮”图层，连续复制4个副本。选取工具箱中的移动工具，调整副本4的像

4、素。第4步：将所有按钮图层链接起来。第5步：给按钮输入文字，调整好文字的位置。 三、标题栏的制作 第1步：选背景图层，打开花文件。选取工具箱中的移动工具，将文件中的像素拖到网页设计文件中。将新生成的图层改名为标题背景。第2步：单击底图图层，选取工具箱中的魔棒工具，在按钮区下面单击。第3步：选取工具箱中的矩形选框工具，在其选项栏中选“从选区中减去”，在已有选区的上方画一个矩形框，将按钮区以上的部分减去。第4步：单击“选择”菜单中的反选命令，选标题背景图层。单击“添加矢量蒙版”按钮，将“空白处”的像素遮挡住。第5步：新建一个图层，改名为“方格”单击“背景图层右侧的”眼睛“图层，使背景图层不显示。选

5、取工具箱中的矩形选框工具，在其选项栏中选新选区。第6步：按删除键删除选框中的像素，并取消选区。在按钮区以上的部位画一个矩形选框。单击“编辑”菜单中的填充命令，在填充对话框内容栏使用列表框中选图案。第7步：将方格图层的总体不透明度设置成10%，取消选区。第8步：选取工具箱中的文字工具，进行设置。单击“图层”菜单“图层样式”子菜单中的“外发光”命令，将“外发光”调板“结构”栏中的不透明度设置成100%，其他默认就可以了。第9步：单击选择底图图层，打开标志设计文件。再单击XX图层，选取工具箱中的移动工具，将XX图层中的像素拖动到网页设计文件中。第10步：单击图层菜单中的合并链接图层命令，再单击“编辑

6、”菜单中的自由变换命令，将选项栏目中的W和H大小设置成40%，再设置其投影样式，投影样式默认镇。四、输出网页格式第1步：勾选视图菜单中对齐选项，选取工具箱中的切片工具，从左上角开始，按住鼠标左键拖出矩形框，将图像分割如左下图所示。从左上角开始，再从右下图中标出的位置拖一个选框。第2步：继续往下拖选框，把按钮分开。第3步：将三个显示框也分割开。第4步：选取工具箱中的切片选取工具，在首页03切片上单击历键，在弹出菜单中单击“编辑切片选项命令，在切片选项对话框中输入信息。第5步：单击编辑按钮，打开imageready程序。第6步：单击文件菜单中的存储优化结果命令，按默认文件名存储文件为html格式的

7、网页。小结：通过绘制鲜橙汁图片，掌握渐变工具的使用方法。作业：基础训练教学札记：通过本节课的学习，学生掌握了渐变工具的使用方法，整堂课气氛活跃，效果良好。用计算机制作动画走进动画工作室课题：走进动画工作室 课型：新授课 课时：1课时教学目标（思想、知识、能力）：1、本节课通过动画实例的展示，使同学们懂得动画形成的原理。2、熟悉flash软件的界面，学习用flash绘画的基础知识。3、学会制作一个简单的动画。教学重点：学会使用flash制作一个简单的动画。教学难点：动画形成的原理教学程序：复习提问：1、如何排列、对齐不同图层中的像素？2、怎么样填充自定义图案？导入新课：上节课我们学习了设计制作网

8、页，锻同学们学会使用photoshop设计制作网页，生面网页格式。本节课我们学习另一个功能强大的软件flash，并且学会使用flash制作一个简单的动画。1、动画知识库同学们都喜欢看动画片吧？那些活灵活现的卡通人物给你留下了很深的印象吧？当你喜爱上动画片的时候，你是不是很想知道它的制作原理呀？那么动画究竟是怎样形成的呢？动画是通过连续播放一系列画面给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是依据视觉原理。分类：二维动画和三维动画两类。认识矢量图与位图根据成图原理和绘制方法的不同，图像分为适量图和位图两种类型。二、动画制作工具flash介绍flash启动flash方法1、 单击任

9、务栏上的开始按钮，打开开始菜单。2、 将鼠标指针指向“开始”菜单中的程序，右侧弹出程序子菜单。3、 单击程序子菜单中的macromedia，右侧又弹出子菜单。4、 单击macromedia flash mx 2004就启动了。 认识flash工作界面flash窗口组成：标题栏、菜单栏、主要工具栏、文档选项卡、工具栏、时间轴、浮动面板、舞台、动作面板、帮助面板、属性面板三、制作一个简单的动画1、 选工具栏中的椭图工具。2、 选择工具栏颜色选区中的填充色，单击填充色右下角的小黑三角，展开调色板，选择绿色渐变色。3、 反鼠标移动到舞台左侧，按住shift键，搬动鼠标画一个正圆。4、 选中工具栏里的选

10、择工具，双击选中刚画完的圆。5、 按F8键，出现转换为符号对话框。在名称框中输入球，在行为栏中选择图形，单击确定按钮。6、 单击时间轴的第20帧，按下F6创建关键帧。7、 用鼠标拖动圆到舞台右侧。8、 在第1帧上单击右键，选择弹出菜单中的第一项创建补间动画。9、 按回键观看动画。小结：通过动画实例的展示，对flash软件有个大体了解。熟悉flash软件的界面，学会制作一个简单的动画。作业：基础训练教学札记：通过本节课的学习，学生掌握了基本对flash有了大体了解，并且能够独立制作一个简单的动画。整堂课气氛活跃，效果良好。绘制漂亮的小屋课题：绘制漂亮的小屋 课型：新授课 课时：3课时教学目标（思

11、想、知识、能力）：1、通过介绍绘制房子的过程，让同学们了解绘图工具的具体功能。2、掌握flash绘画的步骤和方法，学会填充颜色的技法。教学重点：掌握flash绘画的步骤和方法，学会填充颜色的技法。教学难点：掌握flash绘画的步骤和方法，学会填充颜色的技法。教学程序：复习提问：1、flash工作界面的组成有？导入新课：上节课我们学习了设计制作网页，学会了使用photoshop设计制作网页，生面网页格式。本节课我们学习flash绘图工具的具体功能，掌握flash 绘画的步骤和方法，学会填充颜色的技术。讲授新课：绘制漂亮的小屋1、启动flash，新建一个flash文档。单击属性面板中的“文档属性”

12、按钮，打开“文档属性”对话框。2、在“文档属性”对话框中将“尺寸”改为500PX（宽）、375PX（高），背景色默认为白色，不需要改变，单击确定按钮。3、单击视图菜单网格子菜单中的编辑网络命令，在“网格”对话框中，勾选显示网格，将宽和高改成10PX，单击保存默认值按钮。4、单击文档选项卡右侧显示百分比列表框的小黑三角，在展开的下拉列表框里选200%，这里的显示比例是可以根据需要随时改变的，调到200%可以更精确地修整图形。二、绘制小屋的基本外形1、选择工具栏中的矩形工具，单击颜色区域里的笔触颜色右下角的黑三角，展开调色板。在其颜色码框中输入颜色代码。按回车键确认，再将填充色的颜色码改成“#FF

13、9900”按回车键确认。2、在舞台中画一个长方形。选中选择工具，双击长方形以将其全部选中，在属性面板中输入宽为100。0高为58。0，按回车键。3、移动长方形，使其左上角与任意一网格对齐。4、单击舞台空白处，以取消消长方形的选中状态。然后分别指向矩形左下角和右下角的边框，按下鼠标拖动至两个网络的距离，使其成为一个平等四边形。5、 双击平行四边形，按“ctrl+G键将其组合。6、 选择工具栏中的矩形工具，笔触颜色不变，填充色码改成“#FFFF99”再画一个长方形。选中选择工具，双击长方形，以将其全部选中。7、 选择工具栏中的矩形工具，笔触颜色不变，将填充色友改成“#FFCC00”，在长方形的左侧

14、再画一个长方形。8、 在矩形工具按钮上按信鼠标左健不动，会出现矩形工具与多角形工具选择菜单，单击多角形工具。9、 在舞台上画一个三角形，使其底边与舞台保持水平，松开鼠标就会出现一个三角形。10、单击舞台空白处，以取消三角形的选中状态。11、单击“视图”菜单网络子菜单中的显示网络命令，取消选中显示网格选项。12、将平行四边形移动到刚组合好的形状下面，按ctrl+C 组合键将其复制，单击编辑菜单中的粘贴到当前位置。13、单击修改菜单变形子菜单中的水平翻转命令。三、给小屋加上门窗和烟囱绘制门1、选择工具栏中的矩形工具，所以看不到矩形工具，需要按住多角星形工具不放，直到出现矩形工具与多角星形工具菜单，

15、笔触颜色不变，填充色码。2、选择工具栏中的刷子工具，将填充色码改为“#AC4600”。3、选中“选择工具”，拖出一个矩形框，将门全部选中后，按ctrl+G键将其组合，然后拖动到房子上。绘制窗户1、选择工具栏中的矩形工具，笔触颜色不变，将填充色码改为“ccffff”。2、画出一个圆角矩形，调整其宽35。0，高为30。0选择工具栏中的线条工具，在矩形内画两条十字交叉的线。绘制烟囱1、选择工具栏中的矩形工具，将选项栏中的圆角矩形半径改为0。将属性面板中的笔触高度改为1，笔触颜色不变，填充色码改为“#ffcc66”2、选择工具栏中的线条工具，画出立体效果的线条。3、选择颜料桶工具，将填充色分别改为“#

16、DD8500”“#CC9900”进行填充。4、选中选择工具，将烟囱全部框选后，按ctrl+G将其组合，然后拖动到房子上。四、给房子加明暗效果见课本98页图五、绘制玻璃反光效果1、选中“选择”工具，双击玻璃进入组2、选择工具栏中的刷子工具，将填充色进行修改。3、单击文档选项卡中的场景名称，以退出组。六、添加符号1、选中选择工具，将绘制好的形状全部框选2、按F8键，在出现的对话框中输入符号名称为小屋，在行为栏中选择图形，单击确定按钮，将其转换为一个符号，并放入库中。小结：本课我们主要学习了利用flash绘制小屋，通过绘制房子的过程，同学们对绘图工具有了具体了解，基本掌握了flash绘画的步骤和方法

17、，学会填充颜色的技法。作业：见基础训练教学札记：通过本节课的学习，学生掌握了flash 绘画的步骤和方法的使用方法，整堂课气氛活跃，效果良好。打造美丽家园课题：打造美丽家园 课型：新授课 课时：1课时教学目标（思想、知识、能力）：1、通过学习绘制树木和背景，使同学们学会使用不规则绘图工具绘制形状。2、通过绘图掌握复制、粘贴、删除等方法。教学重点：通过绘图掌握复制、粘贴、删除等方法。教学难点：通过绘图掌握复制、粘贴、删除等方法。教学程序：复习提问：1、课本101页连线题导入新课：上节课我们学习了flash 绘画的步骤和方法的使用方法。本节课我们学习绘制树木和背景，使同学们学会使用不规则绘图工具绘

18、制形状。并且通过绘图掌握复制、粘贴、删除等方法。课授新课：1、 绘制绿树选择椭圆工具，将笔触颜色代码进行修改，单击填充色后，以单击下面的没有颜色按钮，只留笔触色。2、 选择工具栏中的部分选取工具，单击圆，此时圆上出现锚点。3、 如果单击锚点，系统将显示该锚点的控制柄。4、 再用铅笔工具画上明暗边界线。配合使用选择工具和部分选取工具不断地调节，直到满意为止。5、 用选择工具框选中后，按crtl+g键组合。6、 选择工具栏中的钢笔工具，画树干。7、 最后回到起点，然后再换铅笔工具，画上树根后全选组合，组合好后再画上阴影线。8、 用选择工具选整个树后，按ctrl+b进行第一次分离，再按一次进行第二次

19、分离。9、 选择颜色桶工具填充色彩。10、 选择橡皮擦工具，单击选项中的水龙头工期具，对准多余的线条，单击鼠标就可以将其删除。11、 用选择工具将树全部框选，按F8键，在行为栏中选图形，单击确定按钮，转换为一个符号并存放库中二、布置舞台1、 双击图层1改名为背景，从库中将背景图形拖动舞台上，单击对齐按钮设置居中。2、 将小屋图形和树图形拖动到舞台3、 单击树，再单击修改菜单中的变形子菜单中的缩放和旋转命令，打开缩放的旋转对话框，在缩放框中输入60，将树按比例缩小60%。再用选择工具，将其调整到如下位置。4、 再依次从库中拖出四个树图形。分别按图示调其大不，使其产生近大远小的视觉效果小结：1、通

20、过学习绘制树木和背景，使同学们学会使用不规则绘图工具绘制形状。2、通过绘图掌握复制、粘贴、删除等方法。教学札记：能过本节课的学习同学们基本掌握了绘图掌握复制、粘贴、删除等方法。并且课堂回答问题积极，讨论热烈。收到了良好的效果。动画控制与发布课题：动画控制与发布 课型：新授课 课时：1课时教学目标（思想、知识、能力）：1、通过学习添加动作脚本和设置动画发布，使同学们简单了解flash中的脚本语言。2、学会最简单的动作控制，学会动画的输出与发布。教学重点：学会最简单的动作控制，学会动画的输出与发布。教学难点：学会最简单的动作控制，学会动画的输出与发布。复习提问：1、怎样添加引导线？导入新课：上节课我们学习了沿路径移动动画与导入声音，使同学们了解如何添加引导层，以及如何使元件沿路径移动，学会声音的导入与添加。本节课我们学习添加动作脚本和设置动画发布，使同学们简单了解flash中的脚本语言。学会最简单的动作控制，学会动画的输出与发布。课授新课：1、怎样添加动作脚本？动作脚本是指令一个动画在播放时执行某种操作的语言。1、帧动作第一步：单击按钮图层的第1帧，单击动作面板左侧的黑