项目2制作包含图片与超链接的网页由浅入深简章易懂贴近实际WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《网页制作项目实训教程》

CONTENTS任务1制作图文混排网页任务2制作多媒体网页任务3制作包含超链接的网页

任务1制作图文混排网页本任务可以分解为2个活动：在网页中使用图片；制作图书介绍页。

活动1在网页中使用图片1-11、创建一个名称为“项目2-1”的本地站点，本地站点文件夹为D盘下的“Task2-1”文件夹，默认图像文件夹路径设置为D:\Task2-1\images。2、如下图所示，新建一个网页文件，输入文字、添加图片和各种图像对象并设置网页的背景，最后将网页文件以“task2-1-1.html”为文件名保存到“项目2-1”站点根目录下。活动要求

活动1在网页中使用图片1-11、直接添加图片图片在网页中的第1种使用方法是直接添加，网页中能添加的图片文件格式比较多，常见的格式有以下3种：JPG（全称是JointPhotographicExpertsGroup，联合图像专家组）是一种高效压缩的图片格式，其优点是颜色丰富，文件容量小，下载速度快，缺点是不具透明效果。GIF（全称是GraphicsInterchangeFormat，可交换的图像格式）是目前大量使用的网页图片格式之一，其优点是文件容量小，可以透明显示，还可以支持动画，缺点是表现的颜色比JPG格式少得多。PNG（全称是PortableNetworkGraphics，便携网络图像）结合了JPG和GIF的优点，不仅具有JPG处理精美图片的优势，而且具有GIF能透明显示的特点，因此应用较广泛，逐渐成为网页图片的主要格式。如下图所示：知识窗JPG格式GIF格式PNG格

活动1在网页中使用图片1-12、插入图像占位符图片在网页中的第2种使用方法是插入图像占位符，在网页文档中添加图片时，如果图片不确定或者还没设计出来，但可以确定图片的位置、尺寸时，可以先在该位置上插入临时的“图像占位符”进行占位；然后等图片确定后再进行替换，如下图所示：

活动1在网页中使用图片1-13、创建鼠标经过图像图片在网页中的第3种使用方法是创建鼠标经过图像，鼠标经过图像由原始图像和鼠标经过图像两部分组成，当鼠标光标在图片范围之外时显示原始图像，当鼠标光标经过图片时显示鼠标经过图像。如下图所示：

活动1在网页中使用图片1-14、将图片设置为网页的背景图片在网页中的第4种使用方法是将图片设置为网页的背景，依次单击“修改”-“页面属性”菜单命令（或按Ctrl+J键），选择一张图片作为网页的背景，如下图所示，其中“重复”选项分为以下4种：no-repeat：图片作为网页背景不重复只显示1次；repeat：图片作为网页背景在x轴、y轴即水平、垂直方向重复显示，为默认选项；repeat-x：图片作为网页背景在x轴即水平方向重复显示；repeat-y：图片作为网页背景在y轴即垂直方向重复显示。

活动1在网页中使用图片1-1详细操作步骤请参阅教材。活动实施在制作网页过程中，要注意选取具有代表性、较清晰、大小适宜的图片，如果图片素材还没确定可以采用图像占位符预留出位置，鼠标经过图像尽量选取两张大小基本一致的图片，将图片设置为网页的背景时可以选取一张较小、可重复的图片加快网页打开速度。活动评价

活动2制作图书介绍页1-2如下图所示，完成图书介绍网页的制作，完成后以“task2-1-2.html”为文件名保存到“项目2-1”站点根目录下。活动要求

活动2制作图书介绍页1-21、图片的HTML标签，如下图所示。“img”代表图片，是单标签，以/结束；“src”代表图片的存放路径；“alt”代表替换文本，用来设置当前鼠标移到图片上时所显示的提示文本；“width”代表图片的宽度，默认单位是像素；“height”代表图片的高度，默认单位是像素；“align”代表图片的对齐方式，常见的值可以设置为：top（顶端）、bottom（底部）、middle（中间）、left（左对齐）、right（右对齐）；“hspace”代表图片左侧和右侧的水平边距，默认单位是像素；“vspace”代表图片顶部和底部的垂直边距，默认单位是像素。知识窗

活动2制作图书介绍页1-22、图片的简单编辑网页中的图片除了可以通过HTML标签进行设置以外，也可以通过属性栏中各个选项进行处理，同时还有一些内置工具可以对图片进行简单编辑，如下图所示：裁剪：先选中图像，再单击该按钮，在弹出