当前位置: 首页 > >

多媒体网页设计与制作

发布时间:

模块五 多媒体网页设计与制作 提纲 1 学会多媒体网页的设计 2 学会在网页中插入多媒体文件 3 学会多媒体网页的合成 2 学会多媒体网页的设计 1 认识网页制作工具Dreamweaver 8 2 使用Dreamweaver创建站点 3 使用Dreamweaver制作一个网页框架 3 5.1.1认识网页制作工具Dreamweaver 8 ? 工欲善其事,必先利其器。Dreamweaver 8 是在多媒体方面颇有建树的Macromedia公司 推出的可视化网页制作工具,它与Flash 8、 Fireworks 8合在一起被称为网页制作三剑客 ,这三个软件相辅相承,是制作网页的最佳选 择。其中,Dreamweaver主要用来制作网页 文件,制作出来的网页兼容性比较好,制作效 率也很高,Flash用来制作精美的网页动画, 而Fireworks用来处理网页中的图形。 4 5.1.1认识网页制作工具Dreamweaver 8 ? 1.Dreamweaver 8 的功能 ? 可视化编辑 ? 全面的编码环境 ? 服务器技术 ? 功能自定义 5 5.1.1认识网页制作工具Dreamweaver 8 ? 2.Dreamweaver 8的工作区布局 6 5.1.2使用Dreamweaver创建站点 ? 在 Dreamweaver 中,“站点”一词既表示Web 站点,又表示属于Web站点的文档的本地存储 位置。在开始构建Web站点之前,您需要建立 站点文档的本地存储位置。 Dreamweaver站 点可组织与Web站点相关的所有文档,跟踪和 维护链接,管理文件,共享文件以及将站点文 件传输到Web服务器。 7 5.1.2使用Dreamweaver创建站点 ? 可以使用“站点定义向导”设置Dreamweaver 站点,该向导会引领您完成设置过程。或者, 也可以使用“站点定义”的“高级”设置,根据需 要分别设置本地文件夹、远程文件夹和测试文 件夹。在本教程中,您将使用“站点定义”的“ 高级”设置来设置项目文件的本地文件夹。在 本书后面的部分,您将学*如何设置远程文件 夹,以便将页面发布到Web服务器,从而提供 给公众访问。 8 5.1.2使用Dreamweaver创建站点 ? 步骤 1:将素材文件夹dmt复制到E盘根目录 下。 ? 步骤 2:启动Dreamweaver。 9 5.1.2使用Dreamweaver创建站点 ? 步骤3:创建“多媒体技术与应用基础”站点 。 10 5.1.2使用Dreamweaver创建站点 ? 步骤3:创建“多媒体技术与应用基础”站点 。 11 5.1.3使用Dreamweaver制作网页框架 ? 步骤 1:创建新文件。 ? 在菜单栏上依次点击【文件】→【新建】,打 开“新建文件”对话框,在“常规”选项卡中 选择“基本页”和HTML,点击“创建”按钮 即创建一个新的网页文件。 12 5.1.3使用Dreamweaver制作网页框架 ? 步骤 2:保存文件。 ? 完成步骤1的操作就创建了一个空白页面。在 菜单栏上依次点击【文件】→【保存】,打开 “保存”对话框。保存目录选择E盘根目录下 的dmt文件夹,文件名为:tupian.html。点击 “保存”按钮保存文件。 13 5.1.3使用Dreamweaver制作网页框架 ? 步骤 3:插入表格。 ? 将光标移到页面内,在菜单栏上依次点击【插 入】→【表格】,打开“插入表格”对话框。 14 5.1.3使用Dreamweaver制作网页框架 ? 步骤 4:设置整个表格属性。 ? 选中表格,在“属性”检查器中的对齐列表中选 择“居中对齐”。将“背景颜色”设置为白色 。 15 学会在网页中插入多媒体文件 1 为网页中插入图像文件 2 为网页中插入音频文件 3 为网页中插入视频文件 4 为网页中插入动画文件 16 5.2.1为网页中插入图像文件 ? 一个页面仅有文本会非常单调,很难吸引人的 目光,所以必须在文档中加入其他元素,如图 像。如果能在网页设计中恰当地运用图像,既 能使网页美观生动而且富有生机,又能体现网 站的风格和特色图像,加深用户对网站的良好 印象。 ? 应用与网页中的图片,目前比较流行的有两种 图片格式,即GIF和JPG格式。这两种格式, 浏览器都能正确显示。下面将为大家介绍运用 图像的简单操作方法。 17 5.2.1为网页中插入图像文件 ? 步骤1:插入页面背景图片。 ? 在完成任务一的操作后,在“属性”检查器中选 择“页面属性”按钮打开“页面属性”对话框 ,选择背景图像为dmt目录下的images文件 夹下的bg.gif文件。点击“应用”、“确定” 按钮。 18 5.2.1为网页中插入图像文件 19 5.2.1为网页中插入图像文件 ? 步骤2:在表格内插入图片。 ? 将光标移至表格第一行内,在菜单栏上依次点 击【插入】→【图像】,打开“选择图像源文 件”对话框,选择dmt目录下的images文件 夹下的top.jpg文件,点击“确定”按钮,在 弹出的对话框中点击“确定”按钮。 20 5.2.1为网页中插入图像文件 ? 步骤3:在表格内插入背景图片。 ? 将光标移至表格第二行内,在“属性”检查器中 点击背景标题下的 图标,在打开的对话框 中选择banner.gif文件,点击“确定按钮”。 ? 步骤 4:插入导航条文字。 ? 将光标移至表格第二行内,输入“图片|音频| 视频|动画”,选中文字后,在“属性”检查器 中设置字号为24,文本颜色为白色。 21 5.2.1为网页中插入图像文件 ? 步骤5:插入内容文字。 ? 将光标移至表格第三行内,在菜单栏上依次点 击【插入】→【图像】,打开“选择图像源文 件”对话框,选择dmt目录下的sucai文件夹 下的tupian.jpg文件,点击“确定”按钮,在 弹出的对话框中点击“确定”按钮。 22 5.2.1为网页中插入图像文件



友情链接: