Dreamweaver CS3网页设计培训教程电子教案04.ppt

Dreamweaver CS3网页设计培训教程 * 第4课 插入图像美化网页 本课要点 具体要求 本课导读 上机练习 本课要点 图像的插入及基本编辑 图像高级操作 具体要求 熟悉图像的插入 熟悉图像的基本编辑 学会制作鼠标经过图像 学会制作导航条 本课导读 除文本外，图像是网页最重要的组成部分。图像在整个网页中可以起到画龙点睛的作用，图文并茂的网页比纯文本更能吸引人的注意力。 4.1 图像的插入及基本编辑 一个好的网页除了文本之外，还应该有图像来点缀。在网页中恰到好处地使用图像，能使网页更加生动、美观。 4.1 图像的插入及基本编辑 4.1.1 知识讲解 4.1.2 典型案例——“青春”网页的制作 4.1.1 知识讲解 图像格式很多，但目前网页中支持的图像格式只有GIF，JPG（也称为JPEG）和PNG 3种。 4.1.1 知识讲解 1.图像的插入 2.图像的基本编辑 1.图像的插入 使用Photoshop或Fireworks等图像处理软件制作好需要的图像并保存为网页支持的图像格式后，即可使用Dreamweaver CS3将其插入到网页中。插入图像的具体操作请教师参照软件及书中内容进行讲解。 2.图像的基本编辑 插入图像并选中图像后，可在【属性】面板中编辑图像的属性，如设置图像的大小、边框和对齐方式等。 4.1.2 典型案例——“青春”网页的制作 案例目标 本案例将练习在网页中插入图像并设置图像的基本属性 。 4.1.2 典型案例——“青春”网页的制作 操作思路 （1）将图像文件复制到“img1”文件夹中并新建一个空白网页文档。 （2）插入背景图像并设置其格式。 （3）插入文本并设置格式。 4.1.2 典型案例——“青春”网页的制作 操作步骤 具体操作步骤请教师参照软件及书中内容进行讲解。 4.1.2 典型案例——“青春”网页的制作 案例小结 本案例主要讲解如何利用Dreamweaver CS3在网页中插入图像并对图像的属性进行设置。在浏览网页的时候，当鼠标光标移到图像上时，鼠标光标右下角会出现“青春”提示字样，这是在【属性】面板的【替换】文本框中输入替换文本的效果。需要注意的是：图像的对齐方式一定要为“左对齐”，否则得不到图像和文本段落在同一水平区域的效果。 4.2 图像高级操作 Dreamweaver CS3中提供了鼠标经过图像和导航条等网页功能，下面对这些功能分别进行介绍。 4.2 图像高级操作 4.2.1 知识讲解 4.2.2 典型案例——制作网站导航条 4.2.1 知识讲解 鼠标经过图像功能展示的是一种动态图像的效果，当鼠标光标经过图像时图像会发生变化。这种图像由原始图像和鼠标经过图像组成：当鼠标光标移动到原始图像上时，将会显示鼠标经过图像；当鼠标光标移出图像范围时，则显示原始图像。 4.2.1 知识讲解 1.鼠标经过图像的制作 2.导航条的制作 1.鼠标经过图像的制作 创建鼠标经过图像的具体操作步骤如下： （1）将光标插入点定位到需要创建鼠标经过图像的位置。 （2）选择【插入记录】→【图像对象】→【鼠标经过图像】命令，打开【插入鼠标经过图像】对话框。 1.鼠标经过图像的制作 （3）在【图像名称】文本框中输入图像名称，单击【原始图像】文本框后的【浏览】按钮，在打开的对话框中选择原始图像并单击【确定】按钮，返回【插入鼠标经过图像】对话框。用同样的方法设置鼠标经过图像。 （4）选中复选框，可避免图像显示延迟。在【替换文本】文本框中输入所需内容。单击【按下时，前往的URL】文本框后的【浏览】按钮，在打开的对话框中选择要链接到的网页文档并单击【确定】按钮，返回【插入鼠标经过图像】对话框。 （5）设置完成后单击【确定】按钮，关闭【插入鼠标经过图像】对话框。 2.导航条的制作 导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同。导航条为在网页和文件之间的跳转提供了一条快捷途径。制作导航条的具体操作步骤请教师参照软件及书中内容进行讲解。 4.2.2 典型案例——制作网站导航条 案例目标 本案例主要练习制作水平导航条 。 4.2.2 典型案例——制作网站导航条 操作思路 （1）将需要的所有图像复制到“img”文件夹中。 （2）新建一个文档，在其中插入图像并设置格式。 （3）插入导航条并进行设置。 4.2.2 典型案例——制作网站导航条 操作步骤 具体操作步骤请教师参照软件及书中内容进行讲解。 4.2.2 典型案例——制作网站导航条 案例小结 本案例主要练习水平导航条的创建。首先要注意，插入的第1个图像“left.png”的对齐方式一定要