网页设计与制作电子教案上袁小红PPT课件.ppt

2020 3 19 网页设计与制作 上 袁小红主讲 深圳职业技术学院 1 2020 3 19 引言 0 1任务引入0 2整体解决方案0 3学习计划与任务分解 2 2020 3 19 学习计划 3 2020 3 19 学习目标互联网是一切Web 网页 应用的基础 要学习设计网页 建立网站 必要的互联网知识和技能是必须掌握的 本学习情景是本书学习的基础篇 学习和掌握本学习情景的知识和技能 将为后面内容的学习奠定坚实的基础 重点 域名 IP地址 ISP Internet提供的服务 网页制作常用技术难点 域名 IP地址 学习情景一体验互联网 4 2020 3 19 学习情景一体验互联网 任务一 了解Internet基础知识任务二 了解Internet规范任务三 了解Internet提供的服务任务四 了解Internet的发展任务五 了解网页制作常用技术 5 2020 3 19 一 初识Internet思考 有哪些应用 1Internet的起源2Internet在中国的发展3Internet与Intranet 任务一 了解Internet基础知识 6 2020 3 19 1Internet管理2域名 IP地址及ISP 任务二 了解Internet规范 7 2020 3 19 任务三 了解Internet提供的服务 1信息浏览 WWW 2电子邮件 E mail 3远程登录 Telnet 4文件传输 FTP 5信息搜索6视频点播 VOD 与视频会议7电子商务 E Commerce 思考 还有哪些服务 8 2020 3 19 1制约Internet发展的因素2Ipv6 任务四 了解Internet的发展 9 2020 3 19 任务五 了解网页制作常用技术 1网页制作三剑客2HTML标记语言3ASP技术4ASP NET技术5JSP和PHP技术 10 2020 3 19 学习情景二设计网页页面 Fireworks8应用 学习目标网站的制作 首先要进行网页的设计与制作 如何能够设计出一个美观 易用的网页界面 是这一学习情景的教学目的 重点 图形图像编辑 图层与蒙版 滤镜 切片与热区 按钮难点 蒙版 切片 11 2020 3 19 学习情景二设计网页页面 Fireworks8应用 任务一 安装与了解Firework8任务二 制作图形图像与文字任务三 添加图层与蒙版任务四 添加特效与动画任务五 制作交互网页任务六 综合案例 学苑小居网站首页设计 12 2020 3 19 任务一 安装与了解Firework8 1安装与启动Fireworks82熟悉Fireworks8工作界面3操作文档4设置画布与图像属性5利用历史记录面板 13 2020 3 19 任务二制作图形图像与文字 1编辑矢量图2编辑文本3编辑位图4图层及蒙板5滤镜与特效6交互网页制作7综合实训 14 2020 3 19 绘制矢量图 15 2020 3 19 编辑矢量图 2 选择矢量图对象三种基本的对象选择工具 指针 工具 选择 拖放对象或路径 选择后方对象 工具 在图层或图组中选择被遮盖了的对象 次选 工具 选择组合中的某个对象或对象的局部 16 2020 3 19 编辑矢量图 3 对象的管理 对象的组合的操作 要撤销该组合对象的操作 17 2020 3 19 编辑矢量图 4 对象变形缩放变形工具自由变形工具 18 2020 3 19 编辑矢量图 5 路径的组合与改变 修改 组合路径 对多个路径进行合并 联合 相交 打孔和裁切等操作 并可对合并的路径进行拆分 修改 改变路径 对路径进行简化 扩展笔触 伸缩路径等操作 19 2020 3 19 矢量图编辑 6 布局工具 显示标尺 显示网格 对齐网格 编辑网格 显示引导线 20 2020 3 19 编辑文本 1 文本的创建2 文本属性3 移动文本4 调整文本区域的大小5 文本的缩放 倾斜和旋转6 文本附加到路径上 例 校徽7 将文本路径化 21 2020 3 19 立体字效果 梦幻效果 22 2020 3 19 金属字效果 立体字闪光效果 23 2020 3 19 霓虹灯效果 液晶文字效果 24 2020 3 19 编辑位图 1 查看编辑模式2 创建位图3 位图区域的选取与调整4 位图的编辑5 重复绘制 25 2020 3 19 魔术棒等工具选择区域 操作 选择一棵树并保存 26 2020 3 19 橡皮图章 红眼消除工具 27 2020 3 19 替换颜色 28 2020 3 19 图层及蒙板 图层的概念 图层可以看成是叠放在一起的透明的胶片 如果层上没有任何东西的话 就可以透过它直接看到下一层 29 2020 3 19 图层 1 创建图层2 选取图层3 复制图层4 重命名图层5 改变图层排列顺序6 删除图层7 在图层中编辑对象8 设置图层属性9 在帧中共享图层 30 2020 3 19 撕裂的照片 31 2020 3 19 文本附加到路径作业 绘制我校校徽要求 透明底 PNG格式 32 2020 3 19 制作阴阳文字举一反三 33 2020 3 19 图层及蒙板 蒙版的概念 被蒙对象显示的透明度是以蒙板对象的颜色来决定的 蒙板对象的色彩越白 被蒙对象的透明度越高 反之 蒙板对象的色彩越黑 被蒙对象的透明度越低 34 2020 3 19 蒙版 1 创建蒙板 实例 望远镜效果 实例 蒙板文字2 移动或删除蒙板 35 2020 3 19 虑镜与动画 滤镜是用来处理图像 包括明亮对比度 色调 饱和度 模糊及锐化等等 虑镜可以将图像进行一些特殊处理 得到特别的效果 36 2020 3 19 滤镜的应用 虑镜的应用对象 位图 路径 一个对象 多个对象某个对象的一部分虑镜的应用 1 选中需进行虑镜处理的图像 2 执行菜单命令 虑镜 3 选择某个虑镜命令 37 2020 3 19 滤镜的应用 实例 飞舞的蝴蝶 38 2020 3 19 实例 像框效果 39 2020 3 19 Fireworks动画 1 帧面板 帧 的概念 帧 在动画制作中是非常重要的概念 动画是由播放连续帧中的多幅静态图像而形成 40 2020 3 19 Fireworks动画 2 导入时创建动画 实例 导入 小天使 gif动画3 gif动画制作 实例 快乐主妇 动画制作4 Swf动画制作 实例 运动动画 小球运动 41 2020 3 19 Fireworks动画 5 补间动画制作 实例 扇型制作 42 2020 3 19 交互网页制作 1相关概念 超链接 是一种标记 形象的说就是单击网页中的这个标记则能够跳转到连接地址制定的网页 这个标记可以做在文本上也可以做在图像上 图像映像 具有超级链接的图像 切片 Slices 是将一张大图像分割成多个小图像 热区 Hotspots 图像的不同部分可以创建不同的超级链接 这些部分则称为热区 图像映像是热区的一个特例 43 2020 3 19 交互网页制作 2 热区热区 也称热点 是指在网页中 点击某个区域后 能链接到其他网页的区域 创建热区显示与隐藏热区消除热区添加超级链接无单独的导出热区功能 44 2020 3 19 交互网页制作 3 切片切片应用于网页后 可以减小图像的存储容量 加快网页传输的速度 创建切片 矩形切片多边形切片显示与隐藏切片 取消切片 导出切片 45 2020 3 19 交互网页制作 4 按钮按钮的状态 释放 正常态 滑过 鼠标滑过的状态 按下 鼠标按下的状态 按下时滑过 鼠标按下后 在其上移动的状态 46 2020 3 19 交互网页制作 4 按钮制作按钮 P73 按F12预览按钮效果 47 2020 3 19 交互网页制作 5 导航条导航条实际上是一组分别指向不同超链接地址的按钮集 它一般放在网站的 Top 框架中 始终在屏幕上显示 对网站的浏览者起着导航的作用 所以被称作导航条 它的制作实际上就是制作多个按钮 按一定顺序排列 对每个按钮分配不同的超链接地址和行为 放入页面中即可 48 2020 3 19 交互网页制作 6 弹出菜单 实例 制作弹出菜单 P75 49 2020 3 19 网站首页设计步骤 一般来说 设计网站首页包括如下步骤 1 页面设计规划 2 素材准备 3 页面制作 4 页面生成 50 2020 3 19 综合案例 个人网站首页设计 本案例将完成一个名为 学苑小居 的大学生个人网站首页的设计与制作 51 2020 3 19 学习情境三制作网页动画 Flash8应用 学习目标 如何能够完成动画的创作 是这一学习情景的教学目的 重点 Flash绘图 元件 补间形状 补间动画 Action动作难点 Flash绘图 元件 Action动作 52 2020 3 19 任务一 安装与认识Flash8任务二 使用工具箱中的工具绘图任务三 创建元件与使用库任务四 创建Flash动画任务五 创建行为与编写ActionScript任务六 输出与发布Flash作品任务七 利用SWiSHmax制作文字动画任务八 制作网页广告动画 53 2020 3 19 任务一 安装与认识Flash8 1配置Flash8系统环境2安装与认识Flash83认识Flash8工作界面4操作文档5设置文档属性6利用历史记录面板 54 2020 3 19 任务二使用工具箱工具绘图 1绘制基本图形2利用选择工具绘制图形3巧用绘图模型绘制图形4巧用变形面板功能绘制图形5绘图功能综合利用 绘制动物图形6利用文本工具创建文本 55 2020 3 19 1 绘制显示器2 绘制红心3 绘制小草4 绘制树叶思考 绘制破裂鸡蛋5 绘制月亮6 绘制球体思考 绘制气球 56 2020 3 19 7 绘制花朵8 绘制雪花思考 绘蜘蛛网 扇子等 57 2020 3 19 绘图 10 绘制云彩11 绘制雨伞12 绘制信封13 绘制灯笼14 绘制蜡烛15 绘制酒杯 58 2020 3 19 16 绘制鸭子思考 绘制蝴蝶 59 2020 3 19 17 波浪文字18 透视文字19 描边文字20 制立体字21 图案文字22 变形文字 60 2020 3 19 任务三创建元件与使用库 1认识库 元件和实例2创建元件3使用元件 实例的应用 61 2020 3 19 任务四创建Flash动画 1认识动画2创建逐帧动画3创建补间动画4创建引导层动画5创建遮罩动画6认识场景7为动画添加声音 62 2020 3 19 任务五创建行为与编写ActionScrip