网页设计与制作 -Dreamweaver CC标准教程（微课版 第4版） 课件 第4章 图像、多媒体和表格.pdfVIP

第4章 图像、多媒体和表格 网页设计与制作 DREAMWEAVER CC 标准教程 本章学习的主要内容： 1．图像的插入 2．网页中的多媒体 3．表格基本操作 4．表格排 5．表格应用 4.1图像插入 图像是网页设计中一个非常重要的元素，它使页面更美 观，更具有 引力。在网页中插入图像也是 Dreamweaver网页设计中必须掌握的技术。 4.1图像插入 4.1.1课堂案例—茶叶网站 4.1.2插入图像 4.1.3图像源文件 4.1.4 图像的宽度和高度 4.1.5替换文本 4.1.1课堂案例—茶叶网站 案例学习目标：学习使用多种方法在网页中插入图像。 案例 识要点：使用 【插入】面板、 【插入】|【图像】 菜单和直接拖曳图像等方法将图像插入到网页指定位置。 素材所在位置：电子资源/案例素材/ch04/课堂案例-茶叶 网站。 案例效果如图4-1所示。 4.1.2插入图像 网站中的图像必须放在站点文件夹内才能在网页中正确 显示，所以在 立网站时要在站点文件夹内 立一个专 门存放该站点图像的文件夹，通常命名为 “images”， 然后将网站所需的图像都放置其中。 4.1.2插入图像 在Dreamweaver中，可以通过以下4种方法在网页中插入 图像。 （1） 择菜单 【插入】|【图像】，在 【 择图像源文件】 对话框中找到并 择所需的图像，单击 【确定】按钮完成 图像插入。 （2） 择 【插入】面板中 【常用】 项卡，单击 【图像】 按钮上的黑色三角形，在下拉菜单中 择 “图像” 项， 在 【 择图像源文件】对话框中找到并 择所需的图像， 单击 【确定】按钮完成图像插入。 （3）打开 【文件】面板，展开显示图像文件夹中的所有 文件，在需要插入的图像名称上按住鼠标左键拖曳到 【 4.1.2插入图像 文档】窗口的相应位置，松开鼠标，完成图像插入。 （4）在 【文档】窗口代 视图中，将光标置于标签 body中，输入如下代 ： body iimmggssrrcc==0011..jjppggwwiiddtthh==440000 hheeiigghhtt==440000 ““aalltt==// /body 这段代 中src表示设置图像的路径及文件名，width设置 图像的宽度，height设置图像的高度，alt设置图像的替代 文本，即当图像在网页中不能正常显示时的替代性文字 描述。 4.1.3图像源文件 图像源文件是指插入的图像文件所在的位置，可以是本 地的图像也可以是网络上的图像，如果插入的图像位于 站 文件夹内， 【属性】面板中 【源文件】文本框中会 显示相对路径。 如果要插入的图像不在站 文件夹内，那么会出现提示 对话框，询问是否将图像复制到站 文件夹内，选择单 击 【确定】按钮即可。 也可以直接在 【属性】面板 【源文件】文本框中修改网 页中显示的图像的路径和文件名。 4.1.4图像的宽度和高度 在网页中插入图像文件后，可以调整图像的大小。调整 方法有两 ： （1）通过可视方式调整 （2）通过 【属性】面板调整 4.1.5替换文本 如果网页中有的图像不能正常显示 （如图像源文件路径 错误或 览器图像显示被关闭等）就会导致 览者看不 到图像。使用图像 【属性】面板中的 【替换】文本框， 可以给看不到的图像设置说明性文字。 4.2HTML5网页多媒体 在HTML5中，新增了两个元素——video元素和a dio元素。 Video元素专门用来播放网络上的视频，而a dio元素专门 用来播放网络上的音频数据。使用这两个元素，就不需 要使用任何插件了，只要使用支持HTML5的浏览器即可。 4.2HTML5网页多媒体 4.2.1 课堂案例—米克音乐 4.2.2 插入HTML5Video元 4.2.3 插入HTML5Audio元 4.2.1课堂案例-米克音乐 案例学习目标：学习在网页中插入video、a dio元素。 案例知识要点：使用 【插入】面板的 【HTML】| 【HTML5A dio】和 【HTML5Video】按钮插入video和 a dio多媒体元素。 素材所在位置：电子资源/案例素材/c