三章网络传播技术三节Flash操作与实例.ppt
11第三章 网络传播技术 第三节 Flash操作与实例,主要内容： 网页设计原则及技术简介 Dreamweaver核心操作 Flash操作与实例,第一节 网页设计原则及技术简介,一、网页设计原则 基本原则：必须符合人们在线浏览的习惯。 Sun公司杰可布尼尔森提出： 网页设计10条“黄金法则”。 最重要:保证网页能以最快的速度显示！,第三章 网络传播技术,8秒钟定律,第一节 网页设计原则及技术简介,一、网页设计原则 1、想方设法“节约带宽”（头条原则） 注意网页宜“静”不宜“动” 宜“小”不宜“大” 一般：图片8K (例：一卡通：照片=43K）,第三章 网络传播技术,第一节 网页设计原则及技术简介,一、网页设计原则 2、适当使用帧的功能 “帧”功能：生成多栏网页页面。 （双刃剑：栏越多，速度越慢！） 3、简单好记的域名 4、确保及时更新 5、提供一个网站地图,第三章 网络传播技术,第一节 网页设计原则及技术简介,一、网页设计原则 6、尽量不要让下拉条过长。 7、每个页面上链接的颜色标准化。 8、每个页面上都要有自己的网站所属标志。 9、同一网站中保持一致性。 10、适度使用表格。,第三章 网络传播技术,第一节 网页设计原则及技术简介,二、网站的结构模型 1、层次树（见：资源管理器） 2、线形 3、网状结构,第三章 网络传播技术,第一节 网页设计原则及技术简介,三、典型的布局形式 1、“T”结构布局 页面顶部为横条网站标志加广告条， 下方左面为主菜单，右面显示内容 的布局。 优点：结构清晰，主次分明。 缺点：规矩呆板。,第三章 网络传播技术,第一节 网页设计原则及技术简介,三、典型的布局形式 2、“口”型布局（“门”型布局） 页面上下各有一个广告条， 左面为主菜单，右面访友情链接， 中间是主要内容。 优点：充分利用版面，信息量大。 缺点：页面拥挤，不够灵活。,第三章 网络传播技术,第一节 网页设计原则及技术简介,三、典型的布局形式 3、“三”型布局（国外网站多用） 页面上横向两条色块， 色块中多放广告。 页面整体分割为四部分。 4、对称对比布局 5、POP布局（POP?):布局象一张宣传海报。,第三章 网络传播技术,第一节 网页设计原则及技术简介,四、文字的使用 一般正文：黑体、宋体、仿宋体或隶书 字号：五号或小五号 五、图像的使用 常用图片格式：JPEG(JPG)、GIF(多）,第三章 网络传播技术,第一节 网页设计原则及技术简介,六、色彩的运用（自学） 七、造型要素（自学） 八、页面分辨率的设置 分辨率是一个表示平面图像精细程度的技术参数：水平点数*垂直点数 注意：同一显示器上，分辨率越高，文字越小。,第三章 网络传播技术,第一节 网页设计原则及技术简介,九、网页制作工具分析与选择 网页制作工具分类： 标注型 编程型 “所见即所得”型,第三章 网络传播技术,第一节 网页设计原则及技术简介,九、网页制作工具分析与选择 1、标注型：HTML 2、编程型： CGI(公共网关界面）:Unixshell Pert C/C+、VB等 Java：JavaScript、Java Applet,第三章 网络传播技术,第一节 网页设计原则及技术简介,九、网页制作工具分析与选择 3、“所见即所得”型（适应于非专业人员） What you see is What you get. 创建中的文档在编辑过程中的显示与文档最终在浏览器中的显示是一样的。 通用工具：Office套件 专用工具：浏览器自带编辑器 FrontPage,第三章 网络传播技术,第一节 网页设计原则及技术简介,九、网页制作工具分析与选择 4、混合型页面制作工具 Dreamweaver:集成HTML与所见即所得。 支持Java、Flash等。 5、图形工具 （1）通用图形工具：PhotoShop （2）专用图形工具：PhotoImpact、Macromedia,第三章 网络传播技术,第一节 网页设计原则及技术简介,九、网页制作工具分析与选择 6、动画制作工具：Flash(矢量图形） 7、不同类型工具的比较 理想的网页制作工具必将是多种工具的混合使用！,第三章 网络传播技术,1创建简单动画开始,Flash的历史 Flash的特点 Flash动画制作流程 熟悉简单的动画制作,Flash的历史,Futer Splash(MarcoMedia) Flash Flash1.0,2.0 Flash3.0,4.0,5.0 Flash Mx Flash Mx2004 ,Flash的特点,Flash的特点 图形系统基于矢量的。 与位图格式比较数据量小 使用插件方式工作 流式工作方式 网络空间交互功能,Flash MX2004的新功能,Flash MX2004 Flash MX Professional 2004 高级脚本编写 测试工具 内置代码 外部脚本 数据库的动态数据能力,Flash MX2004操作窗口,Flash动画制作流程,设定舞台尺寸和安排场景 创建插入动画成员 设置动画效果，预览测试动画,设定舞台尺寸和安排场景,熟悉简单的动画制作,提供动画素材 利用模板制作动画,利用模板制作动画,2动画角色,关于矢量图和位图 边框和填充的设定 使用蒙版绘画效果 绘图矢量化,矢量图 矢量图放大以后不会出现毛刺，对图形的着色按照线性变化的 位图 位图放大后会出现马赛克效应，对图像的着色按照分像素进行。,2.1关于矢量图和位图,矢量图,位图,2.2边框和填充的设定,边框样式的实现 使用填充 对颜色，透明度的调整,边框和填充的设定,2.4绘图矢量化,先绘制图形，然后右键“转化为元件”。,绘制基本图形元件,元件和实例 创建图形元件 创建实例,3元件和实例,元件 元件是存储在库中的“图形”，“影片剪辑”，“按钮”三种元件之一，在编辑舞台可以多次应用。 实例 实例是指某一元件在舞台上应用后的内容，与元件相比具有更多的属性。,元件和实例,3.1图形元件,图形元件可用于静态图像，并可用来创建连接到主时间轴的可重用动画片段。 图形元件与主时间轴同步运行。,3.2按钮元件,使用按钮元件可以创建响应鼠标点击、滑过或其他动作的交互式按钮。 可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。,按钮元件创建,3.3影片剪辑元件,使用影片剪辑元件可以创建可重用的动画片段。 可以将影片剪辑看作是主时间轴内的嵌套时间轴，它们可以包含交互式控件、声音甚至其他影片剪辑实例。,影片剪辑元件创建,3.4创建图形元件,选择元素转化成元件 创建新元件,创建实例,3.5更改实例属性,要设置实例的颜色和透明度选项，可使用“属性”检查器。 当在特定帧内改变实例的颜色和透明度时，Flash 会在播放该帧时立即进行这些更改。 要进行渐变颜色更改，必须使用补间动画。 当补间颜色时，要在实例的开始关键帧和结束关键帧输入不同的效果设置。,实例属性,总结,1、熟悉FlashMX基本操作。 2、了解FlashMX元件和实例使用。 3、了解矢量图和位图的区别。,End,
