1、第4课 插入图像美化网页,本课要点 具体要求 本课导读 上机练习,本课要点,图像的插入及基本编辑 图像高级操作,具体要求,熟悉图像的插入 熟悉图像的基本编辑 学会制作鼠标经过图像 学会制作导航条,本课导读,除文本外，图像是网页最重要的组成部分。图像在整个网页中可以起到画龙点睛的作用，图文并茂的网页比纯文本更能吸引人的注意力。,4.1 图像的插入及基本编辑,一个好的网页除了文本之外，还应该有图像来点缀。在网页中恰到好处地使用图像，能使网页更加生动、美观。,4.1 图像的插入及基本编辑,4.1.1 知识讲解4.1.2 典型案例“青春”网页的制作,4.1.1 知识讲解,图像格式很多，但目前网页中支持
2、的图像格式只有GIF，JPG（也称为JPEG）和PNG 3种。,4.1.1 知识讲解,1.图像的插入 2.图像的基本编辑,1.图像的插入,使用Photoshop或Fireworks等图像处理软件制作好需要的图像并保存为网页支持的图像格式后，即可使用Dreamweaver CS3将其插入到网页中。插入图像的具体操作请教师参照软件及书中内容进行讲解。,2.图像的基本编辑,插入图像并选中图像后，可在【属性】面板中编辑图像的属性，如设置图像的大小、边框和对齐方式等。,4.1.2 典型案例“青春”网页的制作,案例目标本案例将练习在网页中插入图像并设置图像的基本属性 。,4.1.2 典型案例“青春”网页的
3、制作,操作思路 （1）将图像文件复制到“img1”文件夹中并新建一个空白网页文档。 （2）插入背景图像并设置其格式。 （3）插入文本并设置格式。,4.1.2 典型案例“青春”网页的制作,操作步骤具体操作步骤请教师参照软件及书中内容进行讲解。,4.1.2 典型案例“青春”网页的制作,案例小结本案例主要讲解如何利用Dreamweaver CS3在网页中插入图像并对图像的属性进行设置。在浏览网页的时候，当鼠标光标移到图像上时，鼠标光标右下角会出现“青春”提示字样，这是在【属性】面板的【替换】文本框中输入替换文本的效果。需要注意的是：图像的对齐方式一定要为“左对齐”，否则得不到图像和文本段落在同一水平
4、区域的效果。,4.2 图像高级操作,Dreamweaver CS3中提供了鼠标经过图像和导航条等网页功能，下面对这些功能分别进行介绍。,4.2 图像高级操作,4.2.1 知识讲解4.2.2 典型案例制作网站导航条,4.2.1 知识讲解,鼠标经过图像功能展示的是一种动态图像的效果，当鼠标光标经过图像时图像会发生变化。这种图像由原始图像和鼠标经过图像组成：当鼠标光标移动到原始图像上时，将会显示鼠标经过图像；当鼠标光标移出图像范围时，则显示原始图像。,4.2.1 知识讲解,1.鼠标经过图像的制作 2.导航条的制作,1.鼠标经过图像的制作,创建鼠标经过图像的具体操作步骤如下：（1）将光标插入点定位到需
5、要创建鼠标经过图像的位置。（2）选择【插入记录】【图像对象】【鼠标经过图像】命令，打开【插入鼠标经过图像】对话框。,1.鼠标经过图像的制作,（3）在【图像名称】文本框中输入图像名称，单击【原始图像】文本框后的【浏览】按钮，在打开的对话框中选择原始图像并单击【确定】按钮，返回【插入鼠标经过图像】对话框。用同样的方法设置鼠标经过图像。（4）选中复选框，可避免图像显示延迟。在【替换文本】文本框中输入所需内容。单击【按下时，前往的URL】文本框后的【浏览】按钮，在打开的对话框中选择要链接到的网页文档并单击【确定】按钮，返回【插入鼠标经过图像】对话框。（5）设置完成后单击【确定】按钮，关闭【插入鼠标经过
6、图像】对话框。,2.导航条的制作,导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同。导航条为在网页和文件之间的跳转提供了一条快捷途径。制作导航条的具体操作步骤请教师参照软件及书中内容进行讲解。,4.2.2 典型案例制作网站导航条,案例目标 本案例主要练习制作水平导航条 。,4.2.2 典型案例制作网站导航条,操作思路 （1）将需要的所有图像复制到“img”文件夹中。 （2）新建一个文档，在其中插入图像并设置格式。 （3）插入导航条并进行设置。,4.2.2 典型案例制作网站导航条,操作步骤具体操作步骤请教师参照软件及书中内容进行讲解。,4.2.2 典型案例制作网站导航条,案例小结本案
7、例主要练习水平导航条的创建。首先要注意，插入的第1个图像“left.png”的对齐方式一定要设置为“左对齐”，否则该图像不能和后面的导航条水平对齐，而是分别处于两个段落，当然，在后面学习表格布局或DIV布局的相关知识后就不必设置该选项了。其次，如果在添加导航条元件的过程中操作有误，则可以在【导航条元件】列表框中选中该元件，然后单击 按钮，删除该元件之后再重新添加。添加完所有元件后，可以通过单击 和 按钮进行前后顺序调整。,4.3 上机练习,4.3.1 制作“新年快乐”网页 4.3.2 为“新年快乐”网页制作鼠标经过图像,4.3.1 制作“新年快乐”网页,本练习将制作 “新年快乐”网页，主要练习
8、在网页中添加图像并对图像的一些基本属性进行设置。,4.3.1 制作“新年快乐”网页,操作思路: 在【页面属性】对话框中设置背景颜色为“#B30404”。 设置文档段落的对齐方式为“居中对齐”。 依次插入“t.gif”、“t2.gif”和“n.png”图像，再设置“n.png”的宽、高、链接和边框等属性（因为给图像添加了链接，Dreamweaver默认会给图像加上1像素的边框，以突出图像的链接，但这样很影响网页的整体视觉效果，所以把边框值设为“0”，去掉边框。至于宽和高的设置，适当即可，不过一定要同比缩放，以保证图像不失真）。 输入文本“新 年 快 乐 ! Happy new year to you!”。 插入底部图像“b.gif”。,4.3.2 为“新年快乐”网页制作鼠标经过图像,本练习将接着上面的练习制作网页，主要练习制作鼠标经过图像 。,4.3.2 为“新年快乐”网页制作鼠标经过图像,操作思路： 将4.3.1节中制作的“新年快乐.html”网页另存为“新年快乐2.html”。 删除“n.png”，并重新添加原始图像为“n.png”、鼠标经过图像为“n2.png”的鼠标经过图像。 设置鼠标经过图像的属性。,
