Dreamweaver8网页设计培训教程.ppt

Dreamweaver 8网页设计培训教程 第5课 为网页加入图像 本课要点 具体要求 本课导读 上机练习 本课要点 图像的插入及编辑 图像高级操作 具体要求 熟悉图像的插入 熟悉图像的编辑 掌握图像超链接的创建 掌握图像热点链接的创建 学会鼠标经过图像的制作 学会导航条的制作 本课导读 除文本外，图像是网页最重要的组成部分。图像在整个网页中可以起到画龙点睛的作用，图文并茂的网页比纯文本更能吸引人的注意力。 5.1 图像的插入及基本编辑 一个好的网页除了文本之外，还应该有图像来渲染，在页面中恰到好处地使用图像能使网页更加生动、美观。图像也是网页中不可缺少的元素。 5.1 动画制作基础 5.1.1 知识讲解 5.1.2 典型案例——“九寨风情”相册页面制作 5.1.1 知识讲解 图像文件的格式有很多，但是目前在网页中支持的图像格式只有GIF，JPEG和PNG三种。 5.1.1 知识讲解 1.图像的插入 2.图像的基本编辑 3.图像超链接的创建 4.图像热点超链接的创建 1.图像的插入 使用Photoshop或Fireworks等图像处理软件制作好需要的图像并保存为网页支持的图像格式后，即可在Dreamweaver 8中插入图像。 2.图像的基本编辑 插入图像并选中图像后，可在【属性】面板中编辑图像的属性，如设置图像的大小、边框、对齐方式等。选中图像后的【属性】面板如图所示 。 3.图像超链接的创建 图像超链接与文本的普通超链接是相同的，只是选择的对象不同，一个是文本，一个是图像。另外，图像的电子邮件链接也与文本的电子邮件链接相同，这里就不再赘述。下面讲解适用于文本，也适用于图像的另一种超链接——锚链接。 4.图像热点超链接的创建 网页设计时可能会遇到这样的情况，想要在一幅图上的不同区域设置多个链接，但普通的图像链接只能在一个对象上创建一个超链接，这时就需要设置图像的热点超链接。 5.1.2 典型案例——“九寨风情”相册页面制作 案例目标 本案例将练习网站相册的制作。利用Dreamweaver 8的创建网站相册功能，只需要一个简单的操作，就可以同时完成网页相册的创建。 5.1.2 典型案例——“九寨风情”相册页面制作 操作步骤 具体操作步骤请教师参照软件和书中内容进行讲解。 5.1.2 典型案例——“九寨风情”相册页面制作 案例小结 本案例利用Dreamweaver 8的“创建网站相册”功能创建了一个网页相册。细心的读者可能会发现，“jiuzhai.html”网页中没有内容，Dreamweaver 8创建网站相册时自动创建了一个名为“index.htm”的网页 。 5.2 图像高级操作 在Dreamweaver 8中提供了鼠标经过图像、导航条等较适用的网页功能。下面对这些功能的使用进行一一介绍。 5.2 图像高级操作 5.2.1 知识讲解 5.2.2 典型案例——滚动图像的制作 5.2.1 知识讲解 鼠标经过图像功能是一种动态图像的效果，当光标插入点经过图像时图像会发生变化。这种图像由原始图像和鼠标经过图像组成，当鼠标移动到原始图像上时将会显示鼠标经过图像，鼠标移出图像范围时则显示原始图像。 5.2.1 知识讲解 1.鼠标经过图像的制作 2.导航条的制作 1.鼠标经过图像的制作 创建鼠标经过图像的具体操作步骤请教师参照教材进行讲解。 2.导航条的制作 导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同。导航条通常为站点上的页面和文件之间快捷跳转提供一条有效的途径。 制作导航条的具体操作步骤请教师参照教材进行讲解。 5.2.2 典型案例——滚动图像的制作 案例目标 本案例主要练习表格的创建与设置，以及图像的添加和滚动图像的创建。 素材位置：【\第5课\素材\shili】 效果图位置：【\第5课\源文件\search2.html】 5.2.2 典型案例——滚动图像的制作 操作思路 （1）首先使用表格对页面进行布局。 （2）然后添加文本并设置相应的属性。 （3）接着为网页添加图像。 （4）最后添加代码，实现滚动图像的功能。 5.2.2 典型案例——滚动图像的制作 操作步骤 具体操作步骤请教师参照软件和书中内容进行讲解。 5.2.2 典型案例——滚动图像的制作 案例小结 本案例练习滚动图像的创建。其中图像标签辅助功能是Dreamweaver 8中新增加的功能，可以帮助用户快速创建替换文本及超链接，如果觉得不习惯，可以取消这一功能。 5.3 上机练习 5.3.1 “母亲节快乐”页面的制作 5.3.2 “母亲节快乐”页面特效制作