8网页设计Word下载.docx

8网页设计Word下载.docx

《8网页设计Word下载.docx》由会员分享，可在线阅读，更多相关《8网页设计Word下载.docx（10页珍藏版）》请在冰豆网上搜索。

单击“滤镜”莱单“纹理”子菜单中的“纹理化”命令。

第3步：

单击“编辑”菜单“预置”子菜单中的“参考线、网络切片”命令，进行设置。

第4步：

单击“视图”菜单中的标尺，显示标尺。

第5步：

单击“选择”菜单中的“变换选区”命令，再单击“编辑”菜单“变换”子菜单中的“透视”命令，将光标移动到选框的左上角，向右移动5个格，单击“进行变换”按钮完成操作。

第6步：

选取工具箱中的“魔棒”工具，在空白处单击，新建一个图层，命令为“大轮廓线”。

单击“选择”菜单“修改”子菜单中的“扩展”命令，扩展量是7像素。

第7步：

单击“图层”菜单“图层样式“中的”斜面和浮雕“进行设置。

二、按钮制作

在“背景“图层的上面新建一个图层，改名为”按钮区“。

画一个高2个格的长条，用前景色填充。

单击“图层”菜单“图层样式”子菜单中的斜面和浮雕。

进行设置。

第2步：

新建一个图层，改名为“按钮”。

在相应位置画一个宽6个格的小长方形。

单击编辑菜单中的填充命令，在填充对话框中设置填充内容为“白色”再单击编辑菜单中的描边命令，设置描边为1像素，颜色选黑色，位置居内。

复制“按钮”图层，连续复制4个副本。

选取工具箱中的移动工具，调整副本4的像素。

将所有按钮图层链接起来。

给按钮输入文字，调整好文字的位置。

三、标题栏的制作

第1步：

选背景图层，打开花文件。

选取工具箱中的移动工具，将文件中的像素拖到网页设计文件中。

将新生成的图层改名为标题背景。

单击底图图层，选取工具箱中的魔棒工具，在按钮区下面单击。

选取工具箱中的矩形选框工具，在其选项栏中选“从选区中减去”，在已有选区的上方画一个矩形框，将按钮区以上的部分减去。

单击“选择”菜单中的反选命令，选标题背景图层。

单击“添加矢量蒙版”按钮，将“空白处”的像素遮挡住。

新建一个图层，改名为“方格”单击“背景图层右侧的”眼睛“图层，使背景图层不显示。

选取工具箱中的矩形选框工具，在其选项栏中选新选区。

按删除键删除选框中的像素，并取消选区。

在按钮区以上的部位画一个矩形选框。

单击“编辑”菜单中的填充命令，在填充对话框内容栏使用列表框中选图案。

将方格图层的总体不透明度设置成10%，取消选区。

第8步：

选取工具箱中的文字工具，进行设置。

单击“图层”菜单“图层样式”子菜单中的“外发光”命令，将“外发光”调板“结构”栏中的不透明度设置成100%，其他默认就可以了。

第9步：

单击选择底图图层，打开标志设计文件。

再单击XX图层，选取工具箱中的移动工具，将XX图层中的像素拖动到网页设计文件中。

第10步：

单击图层菜单中的合并链接图层命令，再单击“编辑”菜单中的自由变换命令，将选项栏目中的W和H大小设置成40%，再设置其投影样式，投影样式默认镇。

四、输出网页格式

勾选视图菜单中对齐选项，选取工具箱中的切片工具，从左上角开始，按住鼠标左键拖出矩形框，将图像分割如左下图所示。

从左上角开始，再从右下图中标出的位置拖一个选框。

继续往下拖选框，把按钮分开。

将三个显示框也分割开。

选取工具箱中的切片选取工具，在首页03切片上单击历键，在弹出菜单中单击“编辑切片选项命令，在切片选项对话框中输入信息。

单击编辑按钮，打开imageready程序。

单击文件菜单中的存储优化结果命令，按默认文件名存储文件为html格式的网页。

小结：

通过绘制鲜橙汁图片，掌握渐变工具的使用方法。

作业：

基础训练

教学札记：

通过本节课的学习，学生掌握了渐变工具的使用方法，整堂课气氛活跃，效果良好。

用计算机制作动画

走进动画工作室

走进动画工作室课型：

1课时

1、本节课通过动画实例的展示，使同学们懂得动画形成的原理。

2、熟悉flash软件的界面，学习用flash绘画的基础知识。

3、学会制作一个简单的动画。

学会使用flash制作一个简单的动画。

动画形成的原理

1、如何排列、对齐不同图层中的像素？

2、怎么样填充自定义图案？

上节课我们学习了设计制作网页，锻同学们学会使用photoshop设计制作网页，生面网页格式。

本节课我们学习另一个功能强大的软件flash，并且学会使用flash制作一个简单的动画。

1、动画知识库

同学们都喜欢看动画片吧？

那些活灵活现的卡通人物给你留下了很深的印象吧？

当你喜爱上动画片的时候，你是不是很想知道它的制作原理呀？

那么动画究竟是怎样形成的呢？

动画是通过连续播放一系列画面给视觉造成连续变化的图画。

它的基本原理与电影、电视一样，都是依据视觉原理。

分类：

二维动画和三维动画两类。

认识矢量图与位图

根据成图原理和绘制方法的不同，图像分为适量图和位图两种类型。

二、动画制作工具flash

介绍flash

启动flash方法

1、单击任务栏上的开始按钮，打开开始菜单。

2、将鼠标指针指向“开始”菜单中的程序，右侧弹出程序子菜单。

3、单击程序子菜单中的macromedia，右侧又弹出子菜单。

4、单击macromediaflashmx2004就启动了。

认识flash工作界面

flash窗口组成：

标题栏、菜单栏、主要工具栏、文档选项卡、工具栏、时间轴、浮动面板、舞台、动作面板、帮助面板、属性面板

三、制作一个简单的动画

1、选工具栏中的椭图工具。

2、选择工具栏颜色选区中的填充色，单击填充色右下角的小黑三角，展开调色板，选择绿色渐变色。

3、反鼠标移动到舞台左侧，按住shift键，搬动鼠标画一个正圆。

4、选中工具栏里的选择工具，双击选中刚画完的圆。

5、按F8键，出现转换为符号对话框。

在名称框中输入球，在行为栏中选择图形，单击确定按钮。

6、单击时间轴的第20帧，按下F6创建关键帧。

7、用鼠标拖动圆到舞台右侧。

8、在第1帧上单击右键，选择弹出菜单中的第一项创建补间动画。

9、按回键观看动画。

通过动画实例的展示，对flash软件有个大体了解。

熟悉flash软件的界面，学会制作一个简单的动画。

通过本节课的学习，学生掌握了基本对flash有了大体了解，并且能够独立制作一个简单的动画。

整堂课气氛活跃，效果良好。

绘制漂亮的小屋

绘制漂亮的小屋课型：

1、通过介绍绘制房子的过程，让同学们了解绘图工具的具体功能。

2、掌握flash绘画的步骤和方法，学会填充颜色的技法。

掌握flash绘画的步骤和方法，学会填充颜色的技法。

1、flash工作界面的组成有？

上节课我们学习了设计制作网页，学会了使用photoshop设计制作网页，生面网页格式。

本节课我们学习flash绘图工具的具体功能，掌握flash绘画的步骤和方法，学会填充颜色的技术。

1、启动flash，新建一个flash文档。

单击属性面板中的“文档属性”按钮，打开“文档属性”对话框。

2、在“文档属性”对话框中将“尺寸”改为500PX（宽）、375PX（高），背景色默认为白色，不需要改变，单击确定按钮。

3、单击视图菜单网格子菜单中的编辑网络命令，在“网格”对话框中，勾选显示网格，将宽和高改成10PX，单击保存默认值按钮。

4、单击文档选项卡右侧显示百分比列表框的小黑三角，在展开的下拉列表框里选200%，这里的显示比例是可以根据需要随时改变的，调到200%可以更精确地修整图形。

二、绘制小屋的基本外形

1、选择工具栏中的矩形工具，单击颜色区域里的笔触颜色右下角的黑三角，展开调色板。

在其颜色码框中输入颜色代码。

按回车键确认，再将填充色的颜色码改成“#FF9900”按回车键确认。

2、在舞台中画一个长方形。

选中选择工具，双击长方形以将其全部选中，在属性面板中输入宽为100。

0高为58。

0，按回车键。

3、移动长方形，使其左上角与任意一网格对齐。

4、单击舞台空白处，以取消消长方形的选中状态。

然后分别指向矩形左下角和右下角的边框，按下鼠标拖动至两个网络的距离，使其成为一个平等四边形。

5、双击平行四边形，按“ctrl+G键将其组合。

6、选择工具栏中的矩形工具，笔触颜色不变，填充色码改成“#FFFF99”再画一个长方形。

选中选择工具，双击长方形，以将其全部选中。

7、选择工具栏中的矩形工具，笔触颜色不变，将填充色友改成“#FFCC00”，在长方形的左侧再画一个长方形。

8、在矩形工具按钮上按信鼠标左健不动，会出现矩形工具与多角形工具选择菜单，单击多角形工具。

9、在舞台上画一个三角形，使其底边与舞台保持水平，松开鼠标就会出现一个三角形。

10、单击舞台空白处，以取消三角形的选中状态。

11、单击“视图”菜单网络子菜单中的显示网络命令，取消选中显示网格选项。

12、将平行四边形移动到刚组合好的形状下面，按ctrl+C组合键将其复制，单击编辑菜单中的粘贴到当前位置。

13、单击修改菜单变形子菜单中的水平翻转命令。

三、给小屋加上门窗和烟囱

绘制门

1、选择工具栏中的矩形工具，所以看不到矩形工具，需要按住多角星形工具不放，直到出现矩形工具与多角星形工具菜单，笔触颜色不变，填充色码。

2、选择工具栏中的刷子工具，将填充色码改为“#AC4600”。

3、选中“选择工具”，拖出一个矩形框，将门全部选中后，按ctrl+G键将其组合，然后拖动到房子上。

绘制窗户

1、选择工具栏中的矩形工具，笔触颜色不变，将填充色码改为“ccffff”。

2、画出一个圆角矩形，调整其宽35。

0，高为30。

0选择工具栏中的线条工具，在矩形内画两条十字交叉的线。

绘制烟囱

1、选择工具栏中的矩形工具，将选项栏中的圆角矩形半径改为0。

将属性面板中的笔触高度改为1，笔触颜色不变，填充色码改为“#ffcc66”

2、选择工具栏中的线条工具，画出立体效果的线条。

3、选择颜料桶工具，将填充色分别改为“#DD8500”“#CC9900”进行填充。

4、选中选择工具，将烟囱全部框选后，按ctrl+G将其组合，然后拖动到房子上。

四、给房子加明暗效果

见课本98页图

五、绘制玻璃反光效果

1、选中“选择”工具，双击玻璃进入组

2、选择工具栏中的刷子工具，将填充色进行修改。

3、单击文档选项卡中的场景名称，以退出组。

六、添加符号

1、选中选择工具，将绘制好的形状全部框选

2、按F8键，在出现的对话框中输入符号名称为小屋，在行为栏中选择图形，单击确定按钮，将其转换为一个符号，并放入库中。

本课我们主要学习了利用flash绘制小屋，通过绘制房子的过程，同学们对绘图工具有了具体了解，基本掌握了flash绘画的步骤和方法，学会填充颜色的技法。

见基础训练

通过本节课的学习，学生掌握了flash绘画的步骤和方法的使用方法，整堂课气氛活跃，效果良好。

打造美丽家园

打造美丽家园课型：

1、通过学习绘制树木和背景，使同学们学会使用不规则绘图工具绘制形状。

2、通过绘图掌握复制、粘贴、删除等方法。

通过绘图掌握复制、粘贴、删除等方法。

1、课本101页连线题

上节课我们学习了flash绘画的步骤和方法的使用方法。

本节课我们学习绘制树木和背景，使同学们学会使用不规则绘图工具绘制形状。

并且通过绘图掌握复制、粘贴、删除等方法。

课授新课：

1、绘制绿树

选择椭圆工具，将笔触颜色代码进行修改，单击填充色后，以单击下面的没有颜色按钮，只留笔触色。

2、选择工具栏中的部分选取工具，单击圆，此时圆上出现锚点。

3、如果单击锚点，系统将显示该锚点的控制柄。

4、再用铅笔工具画上明暗边界线。

配合使用选择工具和部分选取工具不断地调节，直到满意为止。

5、用选择工具框选中后，按crtl+g键组合。

6、选择工具栏中的钢笔工具，画树干。

7、最后回到起点，然后再换铅笔工具，画上树根后全选组合，组合好后再画上阴影线。

8、用选择工具选整个树后，按ctrl+b进行第一次分离，再按一次进行第二次分离。

9、选择颜色桶工具填充色彩。

10、选择橡皮擦工具，单击选项中的水龙头工期具，对准多余的线条，单击鼠标就可以将其删除。

11、用选择工具将树全部框选，按F8键，在行为栏中选图形，单击确定按钮，转换为一个符号并存放库中

二、布置舞台

1、双击图层1改名为背景，从库中将背景图形拖动舞台上，单击对齐按钮设置居中。

2、将小屋图形和树图形拖动到舞台

3、单击树，再单击修改菜单中的变形子菜单中的缩放和旋转命令，打开缩放的旋转对话框，在缩放框中输入60，将树按比例缩小60%。

再用选择工具，将其调整到如下位置。

4、再依次从库中拖出四个树图形。

分别按图示调其大不，使其产生近大远小的视觉效果

能过本节课的学习同学们基本掌握了绘图掌握复制、粘贴、删除等方法。

并且课堂回答问题积极，讨论热烈。

收到了良好的效果。

动画控制与发布

动画控制与发布课型：

1、通过学习添加动作脚本和设置动画发布，使同学们简单了解flash中的脚本语言。

2、学会最简单的动作控制，学会动画的输出与发布。

学会最简单的动作控制，学会动画的输出与发布。

1、怎样添加引导线？

上节课我们学习了沿路径移动动画与导入声音，使同学们了解如何添加引导层，以及如何使元件沿路径移动，学会声音的导入与添加。

本节课我们学习添加动作脚本和设置动画发布，使同学们简单了解flash中的脚本语言。

1、怎样添加动作脚本？

动作脚本是指令一个动画在播放时执行某种操作的语言。

1、帧动作

第一步：

单击按钮图层的第1帧，单击动作面板左侧的黑三角以展开动作面板。

第二步：

在动作面板里输入：

stop（）;

stopallsounds（）;

stop（）是用来停止播放头移动的，将画面定格在第一帧。

是用来停止播放所有声音。

第三步：

在第95帧处找一个关键帧，小鸟飞图层在第95帧处有一个关键帧，单击这个帧，在动作面板里输入：

gotoandplay（31）这样帧上的动作加完了。

按钮动作

单击按钮图层第1帧，单击舞台上的gohome按钮，在动作面板里输入：

on（press）{gotoandplay

（2）;

}

单击按钮图层的第2帧，再单击右键，选择插入空白关键帧。

on）（press）{gotoandplay

（1）;

第四步：

按ctrl+enter键来测试影片效果。

二、文件的发布与输出

1、单击文件菜单中的发布设置命令，弹出发布设置对话框。

2、切换到flash选项卡，在这里可以对发布的swf动画进行各种参数的设置。

3、如果想同时输出网页，在某些方面html选项卡，可设置动画出现在窗口中的位置、背景颜色、文件大小等。

4、现在设置完了，单击发布按钮。

本节课学习了动作脚本与文件发布。

动作脚本功能非常强大，希望同学们在熟练掌握这个软件之后，能进步学习动作脚本。

文件的发布可以根据不同的需要输出各种格式的文件，网上用的是swf格式。

能过本节课的学习同学们添加动作脚本和设置动画发布，使同学们简单了解flash中的脚本语言。