《《动态网页设计与制作实用教程》电子教案》由会员分享,可在线阅读,更多相关《《动态网页设计与制作实用教程》电子教案(289页珍藏版)》请在金锄头文库上搜索。
1、动态网页设计与制作,目 录,网页设计概述 Flash MX基础知识 动画角色的绘制与编辑 动画的基本形式 洋葱皮、图层及声音的应用 动画技术的综合应用 Fireworks MX基础知识 位图编辑与动画制作 图像的优化与导出,Dreamweaver MX基础知识 设计页面布局 网页元素的添加与编辑 链接、库与模板 浏览器动态网页的制作 服务器动态网页知识基础 服务器动态网页的制作 动态网页设计实例 站点管理,1.1 网页设计的基本方式 1.2 网页中的常见元素 1.3 网页元素的创作与编辑工具 1.4 HTML基础知识 1.5 动态网页的支持技术,第1章 网页设计概述,第2章 Flash MX基
2、础知识,2.1 认识 Flash MX 2.2 Flash MX 的工作界面 2.3 创建与保存动画,第3章 动画角色的绘制与编辑,3.1 图形角色的绘制与填充 3.2 编辑图形角色 3.3 角色创作实例,第4章 动画的基本形式,4.1 动画制作的有关概念 4.2 三种基本动画形式,第5章 洋葱皮、图层及声音的应用,5.1 洋葱皮效果的应用 5.2 图层的应用 5.3 声音效果的应用,第6章 动画技术的综合应用,6.1 交互动画的制作 6.2 动画的输出与优化 6.3 动画制作综合实例,第7章 Fireworks MX基础知识,7.1 网页图像概述 7.2 认识 Fireworks MX 7.
3、3 矢量图像的绘制与编辑 7.4 修改对像,第8章 位图编辑与动画制作,8.1 位图的编辑 8.2 在Fireworks MX中建立动画实例,第9章 图像的优化与导出,9.1 图像的优化 9.2 图像的导出,第10章 Dreamweaver MX基础知识,10.1 认识Dreamweaver MX 10.2 本地站点的建立 10.3 网页的建立与保存,第11章 设计页面布局,11.1 使用表格对页面进行布局 11.2 在布局视图中对页面进行布局 11.3 使用框架对页面进行布局 11.4 使用层对页面进行布局,第12章 网页元素的添加与编辑,12.1 添加文本和设置文本格式 12.2 图像的添
4、加与编辑12.3 媒体的添加与编辑 12.4 表单的添加与编辑,第13章 链接、库与模板,13.1 链接 13.2 库项目 13.3 模板,第14章 浏览器动态网页的制作,14.1 行为与行为面板 14.2 应用行为制作动态网页,第15章 服务器动态网页知识基础,15.1 ASP 技术基础 15.2 脚本语言简介 15.3 数据库基础知识 15.4 测试服务器的建立 15.5 ASP 应用程序举例,第16章 服务器动态网页的制作,16.1 动态站点的建立 16.2 后台数据库的设计 16.3数据提交功能的实现 16.4 数据显示功能的实现 16.5 数据查询功能的实现 16.6 数据维护功能的
5、实现 16.7 成绩管理系统主页的建立,第17章 服务器动态网页的制作,17.1 网上新闻发布 172 网上投票系统的设计,第18章 站点管理,18.1 测试本地站点 18.2 站点文件的上传 18.3 站点的维护与管理 18.4 宣传自己的网站,附录:经典网页赏析,经典网页赏析1 经典网页赏析2 经典网页赏析3 经典网页赏析4 经典网页赏析5 经典网页赏析6,1.1 网页设计的基本方式,1.1.1 手工编码方式 1.1.2 利用可视化工具 1.1.3 手工编码与可视化工具结合,1.2 网页中的常见元素,1.2.1 文本 1.2.2 图象与动画 1.2.3 音频与视频 1.2.4 超级链接 1
6、.2.5 表格 1.2.6 表单 1.2.7 导航栏 1.2.8 其他元素,1.3 网页元素的创作与编辑工具,1.3.1 网页图像制作工具 1.3.2 动画制作工具 1.3.3 网页编辑工具,1.4 HTML基础知识,1.4.1 HTML的基本概念 1.4.2 HTML的基本语法结构,1.5 动态网页的支持技术,1.5.1 ASP 技术 1.5.2 PHP 技术 1.5.3 JSP 技术,2.1 认识 Flash MX,2.1.1 Flash MX的发展 2.1.2 Flash MX的新增功能,2.2 Flash MX 的工作界面,2.2.1 菜单栏 2.2.2 工具栏和绘图工具箱 2.2.3
7、 时间轴面板 2.2.4 属性面板 2.2.5 其他面板,2.3 创建与保存动画,2.3.1 创建与保存动画 2.3.2 文档属性设置,3.1 图形角色的绘制与填充,3.1.1 图形角色的绘制 3.1.2 颜色的填充,3.2 编辑图形角色,3.2.1 选取角色 3.2.2 复制和删除 3.2.3 擦除角色工具 3.2.4 变形工具,3.3 角色创作实例,3.3.1 笑脸/哭脸的绘制 3.3.2 花朵的制作 3.3.3 放大镜绘制 3.3.4 水晕的制作 3.3.5 放射齿轮的绘制 3.3.6 弯月的制作,4.1 动画制作的有关概念,4.1.1 场景 4.1.2 时间轴 4.1.3 帧 4.1.
8、4 元件,4.2 三种基本动画形式,4.2.1 逐帧动画的制作 4.2.2 位移动画的制作 4.2.3 变形动画,5.1 洋葱皮效果的应用,Flash MX 中有种专门的多帧编辑与对齐模式,叫作“洋葱皮效果“(Onion Skin),它们位于时间轴下面。把“洋葱皮“视图模式打开,点按时间轴下面的图标,时间轴会变成时间轴上出现了两个圆圈,它们分别代表洋葱皮的起始帧与终止帧,凡是在这个范围内的帧都可在同时间进行显示。现在我们把右边的圆圈拉到第30 帧 工作区中的内容也会有所变化,从第1帧到第30帧的内容全显示出来了。洋葱皮模式的作用主要是用来进行多帧编辑,在进行起始帧与终止帧的元素精确定位时,它常
9、常是必不可少的工具。元件有个中心点,它是缩放与旋转操作的参照点,因此在进行多帧编辑时有必要先改变元件的中心点再进行编辑。改变元件中心点的操作是在元件的编辑窗口中进行的。,5.2 图层的应用,5.2.1 图层的状态 5.2.2 图层的基本操作 5.2.3 图层的属性 5.2.4 引导层 5.2.5 遮罩层,5.3 声音效果的应用,5.3.1 影响声音质量的因素 5.3.2 音频文件的导入 5.3.3 给动画加上声音,6.1 交互动画的制作,6.1.1 交互动画的原理 6.1.2 简单交互动画的制作 6.1.3 交互动画实例 6.1.4 交互性的检测,6.2 动画的输出与优化,6.2.1 Flas
10、h 动画的输出 6.2.2 Flash 动画的优化,6.3 动画制作综合实例,6.3.1 下落的弹性小球 6.3.2 放大镜 6.3.3 水中倒影 6.3.4 光笔写字 6.3.5 书本翻页 6.3.6 电子琴 6.3.7 鼠标跟随效果的制作 6.3.8 秋雨连绵,7.1 网页图像概述,7.1.1 图像的格式 7.1.2 矢量图像和位图图像,7.2 认识 Fireworks MX,7.2.1 Fireworks MX的特点 7.2.2 Fireworks MX 的工作界面 7.2.3 文档的基本操作,7.3 矢量图像的绘制与编辑,7.3.1 图像的绘制模式 7.3.2 矢量图像的绘制 7.3.
11、3 布局工具的使用 7.3.4 标题文字的制作,7.4 修改对像,7.4.1 选择对像 7.4.2 组织和管理对像 7.4.3 整形路径,8.1 位图的编辑,8.1.1 位图编辑工具 8.1.2 位图编辑实例,8.2 在Fireworks MX中建立动画实例,8.2.1 建立动画对象 8.2.2 动画的设定 8.2.3 动画预览 8.2.4 动画的编辑 8.2.5. 编辑运动路径 8.2.6 输出gif动画,9.1 图像的优化,9.1.1 优化图像应考虑的因素 9.1.2 图像优化的途径,9.2 图像的导出,9.2.1 常规输出 9.2.2 输出一个图像的区域 9.2.3 输出切片 9.2.4
12、 输出Flash格式 9.2.5 使用“导出向导”,10.1 认识Dreamweaver MX,10.1.1 Dreamweaver MX的新增功能 10.1.2 Dreamweaver Mx的工作区 10.1.3 常规参数的设置 10.1.4 在多用户系统中自定义 Dreamweaver MX,10.2 本地站点的建立,10.2.1 关于站点规划和设计 10.2.2 本地站点的建立与编辑,10.3 网页的建立与保存,在完成了本地站点的定义之后,现在开始建立我们的第一个网页,操作步骤如下: 1.选择网页格式选择“文件/新建”菜单或使用“标准工具栏”的新建按钮,则打开一个对话窗口。选择“基本页”
13、中的“HTML”模式。点击右下角的“创建”按钮,打开一个新的文件窗口。 2. 设置网页属性在编辑新网页前应该先设置页面属性,也就是对页面进行整体规划。页面属性的设置操作为:选择“修改 / 页面属性”或在工作区按鼠标右键选择弹出菜单中的“页面属性”选项激活属性设置面板。设置完毕点击右上角的“确定”按钮。 3.编辑网页元素在网页上添加文本、图片、表格等网页元素。 4.在网页中加注释 (1)选中插入注释的位置。 (2)选择“插入/文本对象 / 注释”菜单,在窗口中输入注释内容。 (3)编辑注释:双击页面中的注释图标即可进入编辑界面。 5保存网页 选择“文件/保存”菜单,给网页命名并存入相应文件夹。,
14、11.1 使用表格对页面进行布局,11.1.1 创建表格 11.1.2 表格的编辑 11.1.3 对表格进行排序,11.2 在布局视图中对页面进行布局,11.2.1 布局视图简介 11.2.2 布局视图的切换 11.2.3 绘制布局单元格和表格 11.2.4 向布局单元格中添加内容 11.2.5 布局单元格的调整 11.2.6 设置布局单元格的格式 11.2.7 设置布局视图参数,11.3 使用框架对页面进行布局,11.3.1 框架(集)概述 11.3.2 创建框架和框架集 11.3.3 选择框架和框架集 11.3.4 在框架中打开文档 11.3.5 保存框架和框架集文件 11.3.6 设置框
15、架(集)属性,11.4使用层对页面进行布局,11.4.1 层的创建 11.4.2 层的基本操作 11.4.3 向层添加内容 11.4.4 修改现有层的属性 11.4.5 层和表的转换,12.1 添加文本和设置文本格式,12.1.1 文本元素的添加和编辑 12.1.2 HTML 样式的应用 12.1.3 层叠样式(CSS)的应用,12.2 图像的添加与编辑,12.2.1 添加图像 12.2.2 编辑图像,12.3 媒体的添加与编辑,12.3.1 添加 Flash 影片 12.3.2 添加 Shockwave 影片 12.3.3 向页面添加视频 12.3.4 向页面添加声音,12.4 表单的添加与编辑,12.4.1 表单及表单对象,