电子商务网页制作05课件.ppt

1、主编：谢嵘网页中包括文本、图片、链接等要素，在网页中添加适当的图片并对其进行处理，能使网页看起来更加美观、生动。本项目将详细介绍在网页中添加图像以及如何对它进行编辑处理的方法。项目项目5 5 使用美化网页文使用美化网页文本本 项目导学项目导学 体验活动一：体验活动一：在页面中添加图像在页面中添加图像活动任务：在“好书热评”页面中直接插入图像文件；通过插入占位符来添加图像。活动指导：网页中图片的添加不宜过多过杂，图片的选择一定要符合网页的主题，在素材中应选取最具代表性，比较清晰的图片来美化网页。在网页中的图像还可以添加鼠标经过效果，这样可使网页看起来更加生动、美观，要特别注意的是尽量使用两张大小

2、基本一致的图片来创建。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动一：体验活动一：在页面中添加图像在页面中添加图像 活动步骤：1.在Dreamweaver中打开网页，将光标定位在需要插入图片的位置。2.在“插入”菜单下点选“图像”命令，或者单击“常用”工具栏中的“图像”按钮。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动一：体验活动一：在页面中添加图像在页面中添加图像 活动步骤：3.在对话框的查找范围中选择图片所在的文件夹，点选需要插入的图片。4.如果所选择的图片不在当前网页的网站文件夹中，那么会弹出对话框，此时单击“是”按钮。项目项目5 5 使用美化网页文使用美化网

3、页文本本 体验活动一：体验活动一：在页面中添加图像在页面中添加图像 活动步骤：5.点击“images”文件夹，单击“保存”按钮，图像文件一般保存在“images”文件夹中。6.当浏览网页时图片无法显示，或者当鼠标指向图片时就会显示“替换文本”中所输入的内容。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动一：体验活动一：在页面中添加图像在页面中添加图像 活动步骤：7.图片添加图像后的效果。8.在网页左边需要插入图像的位置定位光标。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动一：体验活动一：在页面中添加图像在页面中添加图像 活动步骤：9.在“插入”菜单下点选“图像对象/图

4、像占位符”命令。10.在弹出的“图像占位符”对话框中输入图像的名称和宽度、高度。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动一：体验活动一：在页面中添加图像在页面中添加图像 活动步骤：11.图像占位符上显示了图像的名称以及大小。12.在图像占位符的区域内双击，在对话框的查找范围中选择图片所在的文件夹，点选需要插入的图片。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动一：体验活动一：在页面中添加图像在页面中添加图像 活动步骤：13.首先将鼠标定位在要创建鼠标经过图像的位置，再从“插入”菜单中点选“图像对象/鼠标经过图像”命令。14.在弹出的对话框中设置“原始图像”、鼠标

5、经过图像”的图片，然后再设置“前往的URL”中设置链接网址即可。项目项目5 5 使用美化网页文使用美化网页文本本 活动小结活动小结在完成了以上体验活动后，根据操作步骤请填写完后面的操作。项目项目5 5 使用图像美化页使用图像美化页面面 如何在网页中插入图像1将鼠标定位在要插入图像文件的位置。2在“插入”菜单下点选“图像”命令。3456创建鼠标经过效果的步骤1 将鼠标定位在要创建鼠标经过效果的位置。23体验活动二：体验活动二：Dreamweaver 内置编辑器编辑图像内置编辑器编辑图像活动任务：设置字号、字体颜色和显示位置。活动指导：通过编辑图像设置可对图像作一些基本的处理。项目项目5 5 使用

6、美化网页文使用美化网页文本本 体验活动二：体验活动二：Dreamweaver 内置编辑器编辑图像内置编辑器编辑图像活动步骤：1.在网页中选中所要编辑的图像，点击属性栏中的图标 。2.点击图像编辑设置后，在弹出的“图像预览”中可对图片进行处理。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动二：体验活动二：Dreamweaver 内置编辑器编辑图像内置编辑器编辑图像活动步骤：3.如果对网页中的图像品质不满意，可以重新设置品质的参数，数字越大品质越高图像越清晰，反之图像就越模糊。4.通过设置“平滑”参数可使图像线条看起来更加的柔和，数字越大图像会越柔和。项目项目5 5 使用美化网页文使用

7、美化网页文本本 体验活动二：体验活动二：Dreamweaver 内置编辑器编辑图像内置编辑器编辑图像活动步骤：5.在“文件”选项卡中，可设置缩放的百分比或是直接输入高与宽的像素值来改变图像的大小。项目项目5 5 使用美化网页文使用美化网页文本本 活动小结活动小结在完成了以上体验活动后，根据操作步骤请填写完后面的操作。项目项目5 5 使用图像美化页使用图像美化页面面 如何通过内置编辑器改变图像的大小如何通过内置编辑器改变图像的大小1选中要编辑的图片。2单击属性栏中的“编辑图像设置”。3.4.5.体验活动三：体验活动三：通过通过“页面属性页面属性”在网页中添加背景在网页中添加背景活动任务：在“好书

8、热评”页面中添加背景图像。活动指导：为网页添加背景图像时要注意素材的选取，一般色彩淡雅、像素较高的图片作为背景会使整个网页锦上添花，添加的背景图像一定不能遮住网页的文本，否则影响信息的传达。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动三：体验活动三：通过通过“页面属性页面属性”在网页中添加背在网页中添加背景景活动步骤：1.鼠标在网页的空白处单击一下，在“属性”栏中点击“页面属性”按钮。2.在弹出的“页面属性”对话框中点击“背景图像”后面的“浏览”按钮。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动三：体验活动三：通过通过“页面属性页面属性”在网页中添加背在网页中添加背

9、景景活动步骤：3.在“选择图像源文件”对话框中找到要设为背景的图像文件，并单击“确定”按钮。4.选择“是”按钮，将图片保存在本站点内。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动三：体验活动三：通过通过“页面属性页面属性”在网页中添加背在网页中添加背景景活动步骤：5.在弹出的“复制文件为”对话框中选择“images”文件夹，然后单击“保存”按钮即可。6.此时“背景图像”后面的文本框内显示出所选图像的名称，点击“确定”按钮。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动三：体验活动三：通过通过“页面属性页面属性”在网页中添加背在网页中添加背景景活动步骤：7.添加背景后的

10、效果如图。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动四：体验活动四：通过通过“标签检查器标签检查器”在网页中添加背在网页中添加背景景活动任务：在“好书热评”页面中添加背景图像。活动指导：在网页中利用“标签检查器”也能为网页添加背景。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动四：体验活动四：通过通过“标签检查器标签检查器”在网页中添加背在网页中添加背景景活动步骤：1.单击属性栏上方的“”标签。2.在“标签检查器”中在“background”项右侧点击一下鼠标。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动四：体验活动四：通过通过“标签检查器标签检查器”

11、在网页中添加背在网页中添加背景景活动步骤：3.这时会出现一个文件夹的图标，点击它会出现“选择文件”对话框，便可从中选取要设为背景的图像文件。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动五：体验活动五：创建图像热区创建图像热区活动任务：为网页中的图像创建热区。活动指导：在图像上绘制热区时，区域尽量大一点，但一定不要把周围的图像以及文本框选进去了。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动五：体验活动五：创建图像热区创建图像热区活动步骤：1.选中要创建热点的图像，在属性栏的“地图”下面有三个创建热点的图标，方形、圆形、多边形。2.可根据实际需要点选一个热点工具，将光标

12、移至图像上再按住鼠标不放并拖动绘制一个圆形。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动五：体验活动五：创建图像热区创建图像热区活动步骤：3.点击“链接”文本框后的“文件夹”按钮。4.在弹出的“选择文件”对话框中选择要链接的文件，单击“确定”按钮。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动五：体验活动五：创建图像热区创建图像热区活动步骤：5.确定要链接的网页后“属性”栏的“链接”文本框中会显示已链接的目标网页名称,此时可按“F12”键在浏览器中查看网页，当鼠标指向图像热区时会变成小手的标记。项目项目5 5 使用美化网页文使用美化网页文本本 活动小结活动小结在完成了

13、以上体验活动后，根据操作步骤请填写完后面的操作。项目项目5 5 使用图像美化页使用图像美化页面面 如何创建图像热区如何创建图像热区1选中要创建热区的图像。2单击属性栏中的热区图标。3.4.5.体验活动六：体验活动六：创建导航条创建导航条活动任务：为网页中创建导航条。活动指导：状态图像：鼠标没有点击时的最初始状态。鼠标经过图像：当鼠标在导航条上划过时呈现的状态。按下图像：鼠标点击后的状态。按下时鼠标经过图像：点击后鼠标再次经过所呈现的状态。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动六：体验活动六：创建导航条创建导航条活动步骤：1.将鼠标定位在要创建导航条的位置，选择“插入”菜单下

14、的“图像对象/导航条”命令。2.在弹出的“插入导航条”对话框中已经自动生成了第一个导航条元件的名称。点击“状态图像”文本框后面的“浏览”按钮。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动六：体验活动六：创建导航条创建导航条活动步骤：3.在弹出的“选择图像源文件”对话框中找到要设置为“状态图像”的图像文件，并单击“确定”按钮。4.按照前面体验活动中讲述过的方法保存图片，“状态图像”文本框内便显示出图像的路径及名称。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动六：体验活动六：创建导航条创建导航条活动步骤：5.按照上述方法分别设置其它的图像状态，完成第一个导航条元件的设置

15、。6.点击“添加项”按钮，按上述的方法可继续设置第二个导航条元件，根据网页设计需要可添加多个导航条元件。项目项目5 5 使用美化网页文使用美化网页文本本 体验活动六：体验活动六：创建导航条创建导航条活动步骤：7.可以在浏览器中查看导航条的效果。项目项目5 5 使用美化网页文使用美化网页文本本 活动小结活动小结在完成了以上体验活动后，根据操作步骤请填写完后面的操作。项目项目5 5 使用图像美化页使用图像美化页面面 导航条的四种图像状态导航条的四种图像状态状态图像：鼠标经过图像：按下图像：按下时鼠标经过图像：相关知识相关知识GIF：是目前大量使用的图片格式之一，其优点是它可以使图像文件变得相当小，

16、并可以包含动态信息。JPG：支持最高级别的压缩，不过这种压缩是有损耗的。优点是体积小颜色丰富，所以运用较方法。PNG：具有JPG与GIF两种格式的优点，既有GIF能透明显示的特点，又具有JPG处理精美图像的优势，所以运用较为广泛。项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识当我们选中网页中的一张图像时，就可以通过属性栏中各项设置处理图像。1“图像ID”和“高”、“宽”“图像下的ID”是用来设置图像的名称，“宽”与“高”栏用来设置图像的大小尺寸，默认的单位是像素 项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识2.“源文件”和“链接”源文件用来设置图像所在

17、的路径和文件名，可以单击右边的文件夹图标来更改。链接栏设置图片的链接地址，当浏览者在图片上单击时即可转向该链接。项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识3.“替换”和“编辑”“替换”栏用来设置当前鼠标移到图像上时所显示的提示文本。当单击编辑后的按钮，当前选中的图像会在Fireworks中打开，并可进行编辑。项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识4.“垂直边距”和“水平边距”在这两个设置的文本框中输入数字，可设置图像与文本在垂直方向和水平方向的距离。项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识5.“裁剪”按钮“裁剪”按钮

18、用于图像的裁切。首先选中图像，再单击该按钮，在弹出的对话框中选“是”，图像上会出现一个选框，选框以外的区域是被裁剪掉的，用鼠标拖动选框的控点可以调整选区大小。项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识6.重新取样当图像裁剪过或是改变了大小后再次被选中时，该按钮才会被激活，点击后会使图像自动根据大小进行重新取样，以提高调整后图像的品质。项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识7.亮度、对比度以及锐化亮度/对比度：点击后在出现的对话框中拖动滑块即可调整图像的明暗以及对比度。锐化工具可使图像棱角更加分明 项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识8.边框 为选中的图像添加边框效果，单位是像素。项目项目5 5 使用美化网页文使用美化网页文本本 相关知识相关知识9.对齐 设置同一单元格中文本与图像间的对齐方式。项目项目5 5 使用美化网页文使用美化网页文本本