网页设计工具的使用

网页工具的使用 实验 院系 计算机系 班级 姓名 学号 64 实验名称 Web页面设计工具的使用 实验日期 2012/4/7 实验目的: 1(掌握网页可视化编程工具Dreamweaver的使用 2(掌握动态网页制作软件Flash的使用 3(借助以上两工具进行简单网页制作 实验步骤: 1. 安装Adobe Dreamweaver CS5软件，熟悉其工作环境;利用该软件创建本地站点、设置页面属性、编辑文本、插入图片、插入格、建立链接等 (1)安装Adobe Dreamweaver CS5软件，双击安装软件包，进入安装界面。如图1-1所示: 图1-1 安装界面 (2)正在安装Adobe Dreamweaver CS5软件。如图1-2所示: 图1-2 正在安装 第 1 页 共 7 页 (3)创建本地站点，在站点—新建站点中添加本地站点。如图1-3所示: 图1-3 添加本地站点 (4)先新建一个页面之后才可以进行页面设置，在修改—页面属性中。如图1-4所示: 图1-4 设置页面属性 (5)在页面属性中可以做以下修改，如图1-5所示: 第 2 页 共 7 页 图1-5 页面设置 (6)插入图片，在插入—图像中选择查找范围，选中图片进行添加。如图1-6所示: 图1-6 添加图片 (7)插入表格，插入—表格，选择表格的行、列数等信息，如图1-7所示: 第 3 页 共 7 页 图1-7 插入表格 (8)插入表格后的界面。如图1-8所示: 图1-8 插入表格后 (9)建立链接，在插入—超链接中，如图1-9所示: 图1-9 建立超链接 第 4 页 共 7 页 2. 安装Adobe Flash CS5软件，熟悉其工作环境;掌握元件和实例的使用;学会借助该软件环境创建动画，并将动画添加到网页中 (1) 安装Adobe Flash CS5软件，双击要安装的软件，进入以下界面，点击安装。如图2-1所示: 图2-1 安装软件 (2)正在安装Adobe Flash CS5软件，如图2-2所示: 图2-2 正在安装 (3)安装完成，退出安装界面。如图2-3所示: 图2-3 安装完成 (4)制作动画，即添加关键帧。制作的是一个球呈抛物线状落地，如图2-4所示: 第 5 页 共 7 页 图2-4制作动画 (5)将动画添加到网页中，先将动画导出成.swf格式。在Dreamweaver中的插入—媒体—swf中插入动画。如图2-5所示: 图2-5 将动画添加到网页 (6)插入刚刚保存的动画，点击确定。如图2-6所示: 第 6 页 共 7 页 图2-6 插入动画 (7)输入插入动画后的标题等信息，如图2-7所示: 图2-7 输入标题 (8)添加到网页中后，如图2-8所示: 图2-8 添加到网页 指导教师签名 第 7 页 共 7 页