项目四“江南美食”网站制作.ppt

项目四“江南美食”网站制作.ppt

《项目四“江南美食”网站制作.ppt》由会员分享，可在线阅读，更多相关《项目四“江南美食”网站制作.ppt（75页珍藏版）》请在冰豆网上搜索。

项目四项目四“江南美食江南美食”网站制作网站制作第2页中小型网站建设与管理中小型网站建设与管理n项目简介项目简介基于只有文字堆砌的网页一般不是一个美观的网页，如何让我们基于只有文字堆砌的网页一般不是一个美观的网页，如何让我们制作的网页漂亮起来，本项目根据这个问题从以下三个方面入手：

制作的网页漂亮起来，本项目根据这个问题从以下三个方面入手：

1.用图片来美化网页；用图片来美化网页；2.利用创建超级链接来丰富网页内容；利用创建超级链接来丰富网页内容；3.用多媒体元素来装点网页。

用多媒体元素来装点网页。

第3页中小型网站建设与管理中小型网站建设与管理n项目目标项目目标本项目引入多个直观的实例，让学生通过实例来掌握在网页中添本项目引入多个直观的实例，让学生通过实例来掌握在网页中添加图像的方法、设置图像属性、变换图像效果等，掌握多种超链接的加图像的方法、设置图像属性、变换图像效果等，掌握多种超链接的创建方法，以及设置超链接目标窗口及文本提示、设置邮件链接、书创建方法，以及设置超链接目标窗口及文本提示、设置邮件链接、书签链接等，掌握在网页中插入各种多媒体元素。

签链接等，掌握在网页中插入各种多媒体元素。

第4页中小型网站建设与管理中小型网站建设与管理n工作任务工作任务1.插入与编辑图像插入与编辑图像2.创建超链接创建超链接3.插入多媒体元素插入多媒体元素第5页中小型网站建设与管理中小型网站建设与管理n职业素养职业素养1.培养学生的创造能力培养学生的创造能力2.培养学生综合运用的能力培养学生综合运用的能力3.培养学生实践能力培养学生实践能力第6页中小型网站建设与管理中小型网站建设与管理模块一模块一插入与编辑图像插入与编辑图像学习目标学习目标通过本模块的学习要了解图像添加的基本方法及其属性的设置；通过本模块的学习要了解图像添加的基本方法及其属性的设置；以及创建图像的变换效果以及使用其他工具编辑图像的方法以及创建图像的变换效果以及使用其他工具编辑图像的方法。

第7页中小型网站建设与管理中小型网站建设与管理第8页中小型网站建设与管理中小型网站建设与管理任务一：

添加图像任务一：

添加图像；在文件中插入漂亮的图像会使网页更加美观，使页面更具吸引力。

在文件中插入漂亮的图像会使网页更加美观，使页面更具吸引力。

1利用利用DreamweaverCS3打开素材文件夹打开素材文件夹sitehome.html文件文件第9页中小型网站建设与管理中小型网站建设与管理2将光标放置在要插入图像的位置，下列是三种操作方法，可任意选择将光标放置在要插入图像的位置，下列是三种操作方法，可任意选择一种使用。

一种使用。

（1）在）在“插入插入”面板的面板的“常用常用”选项卡中单击图标，然后根据图片所在选项卡中单击图标，然后根据图片所在的路径选择图片源文件，如图的路径选择图片源文件，如图第10页中小型网站建设与管理中小型网站建设与管理

（2）从）从“插入插入”面板的面板的“常用常用”选项卡中拖动图标到文档窗口中，然后选项卡中拖动图标到文档窗口中，然后根据图片所在的路径选择图片源文件，如图根据图片所在的路径选择图片源文件，如图第11页中小型网站建设与管理中小型网站建设与管理（3）选择）选择“插入记录插入记录图像图像”命令，然后根据图片所在的路径选择图片命令，然后根据图片所在的路径选择图片源文件。

源文件。

3采用以上三种方法中的任意一种，都会弹出采用以上三种方法中的任意一种，都会弹出“选择图像源文件选择图像源文件”对对话框，根据文件所在的路径选择要插入的图像话框，根据文件所在的路径选择要插入的图像。

4单击单击“确定确定”，完成向文档中插入图像的操作，完成向文档中插入图像的操作。

5保存文档，按保存文档，按【F12】键在浏览器中预览效果键在浏览器中预览效果。

第12页中小型网站建设与管理中小型网站建设与管理任务二：

设置图像属性；任务二：

设置图像属性；1.对对home.html网页中的网页中的pic_1.jpg和和pic_2.jpg两张图片，选择所要两张图片，选择所要设置的图片，然后在设置的图片，然后在“属性属性”面板分别设置面板分别设置“宽宽”、“高高”以及以及“替替换换”的属性值。

的属性值。

2.pic_1.jpg和和pic_2.jpg两张图片的大小属性分别为两张图片的大小属性分别为“114*94像素像素”和和“77*99像素像素”；对齐方式都为；对齐方式都为“左对齐左对齐”；边框默认为无；替换；边框默认为无；替换文字分别为文字分别为“图像图像1”和和“图像图像2”；以下是；以下是“pic_1.jpg”的设置如图的设置如图第13页中小型网站建设与管理中小型网站建设与管理3.设置完毕后，保存文档，按设置完毕后，保存文档，按【F12】键在浏览器中预览图像效果。

键在浏览器中预览图像效果。

4.据任务一中完成的情况来看，有些插入的图片所显示的效果并不符据任务一中完成的情况来看，有些插入的图片所显示的效果并不符合网页的整体美观要求。

该如何来解决这个问题，我们就通过对图像合网页的整体美观要求。

该如何来解决这个问题，我们就通过对图像的编辑进行修改来完成。

的编辑进行修改来完成。

第14页中小型网站建设与管理中小型网站建设与管理任务三：

插入对象任务三：

插入对象；在网页中插入图像对象可以增添图像变化的效果并且可以对图像的管理在网页中插入图像对象可以增添图像变化的效果并且可以对图像的管理和编辑提供较大的方便。

和编辑提供较大的方便。

1添加图像变换效果添加图像变换效果

（1）利用）利用DreamweaverCS3打开素材文件夹打开素材文件夹site中的中的aboutus.html文文件。

件。

（2）将光标定位到如图中所示鼠标箭头所指的单元格中。

）将光标定位到如图中所示鼠标箭头所指的单元格中。

第15页中小型网站建设与管理中小型网站建设与管理第16页中小型网站建设与管理中小型网站建设与管理执行执行“插入插入图像对象图像对象鼠标经过图像鼠标经过图像”命令，在弹出的对话框中分别命令，在弹出的对话框中分别选取素材图片文件夹选取素材图片文件夹images中的中的“ab_1.jpg”和和“ab_2.jpg”作为作为原始图像和鼠标经过图像，选择原始图像和鼠标经过图像，选择home.html作为点击时前往的作为点击时前往的URL，如图所示。

如图所示。

第17页中小型网站建设与管理中小型网站建设与管理（3）将鼠标继续点击正下方的单元格，仍然执行插入）将鼠标继续点击正下方的单元格，仍然执行插入“鼠标经过图像鼠标经过图像”命令，在弹出的对话框中分别选取的图片与上一步骤相同，只是将原命令，在弹出的对话框中分别选取的图片与上一步骤相同，只是将原始图像和鼠标经过图形相交换设置，仍然选择始图像和鼠标经过图形相交换设置，仍然选择home.html作为点击时作为点击时前往的前往的URL。

（4）对插入的两个）对插入的两个“鼠标经过图像鼠标经过图像”设置对齐方式为设置对齐方式为“左对齐左对齐”。

（5）保存当前网页并预览效果。

）保存当前网页并预览效果。

第18页中小型网站建设与管理中小型网站建设与管理2插入图像占位符插入图像占位符所谓所谓“图像占位符图像占位符”，是指图像在尚未编辑完成前，在网页中保留该图，是指图像在尚未编辑完成前，在网页中保留该图像的位置，为以后的更新提供便利。

像的位置，为以后的更新提供便利。

（1）利用）利用DreamweaverCS3打开素材文件夹打开素材文件夹site中的中的courses.html文文件。

件。

（2）将光标定位到如图所示鼠标箭头所指的单元格中。

）将光标定位到如图所示鼠标箭头所指的单元格中。

第19页中小型网站建设与管理中小型网站建设与管理（3）执执行行“插插入入记记录录图图像像对对象象图图像像占占位位符符”命命令令，或或者者点点击击“常常用用”工工具具栏栏中中“图图像像”按按钮钮旁旁的的小小箭箭头头，找找到到菜菜单单栏栏中中“图图像像占占位位符符”命令，如图所示。

命令，如图所示。

第20页中小型网站建设与管理中小型网站建设与管理（4）点击）点击“图像占位符图像占位符”命令后，会弹出命令后，会弹出“图像占位符图像占位符”对话框，然后对话框，然后在对话框中输入在对话框中输入“名称名称”、“宽度宽度”和和“高度高度”等参数，具体参数如等参数，具体参数如图所示。

图所示。

第21页中小型网站建设与管理中小型网站建设与管理（5）插入）插入“图像占位符图像占位符”后，效果如图所示。

后，效果如图所示。

第22页中小型网站建设与管理中小型网站建设与管理任务四：

编辑图像；任务四：

编辑图像；要让网页中插入的图像能够显示出最佳的效果，那么我们可以通过编辑要让网页中插入的图像能够显示出最佳的效果，那么我们可以通过编辑网页中的图像来完善效果。

网页中的图像来完善效果。

1.优化优化在在DreamweaverCS3中，可以使用中，可以使用“优化优化”按钮对图像进行编辑，具按钮对图像进行编辑，具体操作步骤如下。

体操作步骤如下。

（1）利用）利用DreamweaverCS3打开素材文件夹打开素材文件夹site中的中的location.html文文件。

件。

（2）选中要编辑的图像，单击）选中要编辑的图像，单击“属性属性”面板中的按钮，弹出面板中的按钮，弹出“图像预览图像预览”对话框，如图所示。

对话框，如图所示。

第23页中小型网站建设与管理中小型网站建设与管理第24页中小型网站建设与管理中小型网站建设与管理（3）在）在“图像预览图像预览”对话框中，选择对话框中，选择“选项选项”选项卡，编辑选项卡，编辑“选项选项”选选项卡中的内容项卡中的内容n“格式格式”n设置导出文件的格式。

设置导出文件的格式。

n“调色板调色板”n设置在网页中最佳的图像调色板。

设置在网页中最佳的图像调色板。

n“失真失真”n设置对图像的有损压缩程度，数值越大，压缩越明显，图像越不清晰，设置对图像的有损压缩程度，数值越大，压缩越明显，图像越不清晰，其取值范围为其取值范围为1100。

第25页中小型网站建设与管理中小型网站建设与管理n“抖动抖动”n用于设置图像中像素的波动幅度，其取值范围为用于设置图像中像素的波动幅度，其取值范围为0%100%。

选定。

选定“抖动抖动”后的复选框，抖动效果才能使用。

后的复选框，抖动效果才能使用。

n“删除未使用颜色删除未使用颜色”n选定该选项，将对图像中没有使用的颜色进行删除，以得到更小的优选定该选项，将对图像中没有使用的颜色进行删除，以得到更小的优化图像化图像第26页中小型网站建设与管理中小型网站建设与管理（4）根据）根据“图像预览图像预览”对话框左侧的设置，右侧图像的上方会显示优化对话框左侧的设置，右侧图像的上方会显示优化后的图像大小及颜色等信息。

后的图像大小及颜色等信息。

（5）优化设置完成后，单击）优化设置完成后，单击“确定确定”按钮，按钮，DreamweaverCS3文件窗文件窗口中的图像会自动更新。

口中的图像会自动更新。

2.裁剪裁剪裁剪是指删除图像中选定区域以外的多余部分，通过减小图像区域来编裁剪是指删除图像中选定区域以外的多余部分，通过减小图像区域来编辑图像。

使用裁剪工具裁剪图像的具体操作步骤如下。

辑图像。

使用裁剪工具裁剪图像的具体操作步骤如下。

（1）选定要裁剪的图像，单击）选定要裁剪的图像，单击“属性属性”面板中的面板中的“裁剪裁剪”按钮，弹出提按钮，弹出提示框示框

（2）单击）单击“确定确定”按钮，在所选图像的周围会出现裁剪控制点按钮，在所选图像的周围会出现裁剪控制点第27页中小型网站建设与管理中小型网站建设与管理（3）拖动鼠标，调整裁剪控制点，直到边界框包含的图像区域符合所需）拖动鼠标，调整裁剪控制点，直到边界框包含的图像区域符合所需大小大小（4）在边界框内双击或按）在边界框内双击或按【Enter】键，完成图像的裁剪。

所选区域外键，完成图像的裁剪。

所选区域外的图像被删除，保留选定区域中的图像的图像被删除，保留选定区域中的图像（5）保存文档，按）