photoshop图形图像处理项目2 制作包含图片与超链接的网页 电子课件 中职网页制作项目实训教程.pptx

《photoshop图形图像处理项目2 制作包含图片与超链接的网页 电子课件 中职网页制作项目实训教程.pptx》由会员分享，可在线阅读，更多相关《photoshop图形图像处理项目2 制作包含图片与超链接的网页 电子课件 中职网页制作项目实训教程.pptx（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、photoshop图形图像处理项目2 制作包含图片与超链接的网页 电子课件 中职 高教版 网页制作项目实训教程项目2制作包含图片与超链接的网页由浅入深简章易懂贴近实际WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG网页制作项目实训教程重庆大学出版社CONTENTS任务1 制作图文混排网页任务2 制作多媒体网页任务3 制作包含超链接的网页任务1制作图文混排网页本任务可以分解为2个活动：在网页中使用图片；制作图书介绍页。活动1 在网页中使用图片1-11、创建一个名称为“项目2-1”的本地站点，本地站点文件夹为D盘下的“Task2-1”文件夹，默认图像文件夹路径设置为D:

2、Task2-1images。2、如下图所示，新建一个网页文件，输入文字、添加图片和各种图像对象并设置网页的背景，最后将网页文件以“task2-1-1.html”为文件名保存到“项目2-1”站点根目录下。活动要求活动1 在网页中使用图片1-11、直接添加图片图片在网页中的第1种使用方法是直接添加，网页中能添加的图片文件格式比较多，常见的格式有以下3种：JPG（全称是Joint Photographic Experts Group，联合图像专家组）是一种高效压缩的图片格式，其优点是颜色丰富，文件容量小，下载速度快，缺点是不具透明效果。GIF（全称是Graphics Interchange Form

3、at，可交换的图像格式）是目前大量使用的网页图片格式之一，其优点是文件容量小，可以透明显示，还可以支持动画，缺点是表现的颜色比JPG格式少得多。PNG（全称是Portable Network Graphics，便携网络图像）结合了JPG和GIF的优点，不仅具有JPG处理精美图片的优势，而且具有GIF能透明显示的特点，因此应用较广泛，逐渐成为网页图片的主要格式。如下图所示：知识窗 JPG格式 GIF格式 PNG格活动1 在网页中使用图片1-12、插入图像占位符图片在网页中的第2种使用方法是插入图像占位符，在网页文档中添加图片时，如果图片不确定或者还没设计出来，但可以确定图片的位置、尺寸时，可以先

4、在该位置上插入临时的“图像占位符”进行占位；然后等图片确定后再进行替换，如下图所示：活动1 在网页中使用图片1-13、创建鼠标经过图像图片在网页中的第3种使用方法是创建鼠标经过图像，鼠标经过图像由原始图像和鼠标经过图像两部分组成，当鼠标光标在图片范围之外时显示原始图像，当鼠标光标经过图片时显示鼠标经过图像。如下图所示：活动1 在网页中使用图片1-14、将图片设置为网页的背景图片在网页中的第4种使用方法是将图片设置为网页的背景，依次单击“修改”-“页面属性”菜单命令（或按Ctrl+J键），选择一张图片作为网页的背景，如下图所示，其中“重复”选项分为以下4种：no-repeat：图片作为网页背景不

5、重复只显示1次；repeat：图片作为网页背景在x轴、y轴即水平、垂直方向重复显示，为默认选项；repeat-x：图片作为网页背景在x轴即水平方向重复显示；repeat-y：图片作为网页背景在y轴即垂直方向重复显示。活动1 在网页中使用图片1-1详细操作步骤请参阅教材。活动实施在制作网页过程中，要注意选取具有代表性、较清晰、大小适宜的图片，如果图片素材还没确定可以采用图像占位符预留出位置，鼠标经过图像尽量选取两张大小基本一致的图片，将图片设置为网页的背景时可以选取一张较小、可重复的图片加快网页打开速度。活动评价活动2 制作图书介绍页1-2如下图所示，完成图书介绍网页的制作，完成后以“task2

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

7、图片顶部和底部的垂直边距，默认单位是像素。知识窗活动2 制作图书介绍页1-22、图片的简单编辑网页中的图片除了可以通过HTML标签进行设置以外，也可以通过属性栏中各个选项进行处理，同时还有一些内置工具可以对图片进行简单编辑，如下图所示：裁剪：先选中图像，再单击该按钮，在弹出的对话框中选“确定”，图片上会出现选框，选框以外的区域是被裁剪掉的，用鼠标拖动选框的控点可以调整大小。亮度和对比度：点击后在出现的对话框中拖动滑块可以调整图片的明暗以及对比度。锐化：可使图片的棱角更加分明，增加图片的清晰度。裁剪裁剪亮度和对比度亮度和对比度锐化锐化活动2 制作图书介绍页1-2详细操作步骤请参阅教材。活动实施初

8、学者制作图文混排的网页时，要学会对图片进行简单的大小、亮度、锐度等调整，同时注意调整图片和文字的对齐方式，对于文字、图片较多的复杂网页，后面还需要学习表格、DIV、CSS等美化排版网页的知识。活动评价任务2制作多媒体网页本任务可以分解为2个活动：在网页中添加音频与视频、在网页中添加Flash动画。活动1 在网页中添加音频与视频2-11、创建一个名称为“项目2-2”的本地站点，本地站点文件夹为D盘下的“Task2-2”文件夹，默认图像文件夹路径设置为D:Task2-2images。2、如下图所示，完成音乐页面的制作，完成后以“task2-2-1.html”为文件名保存到“项目2-2”站点根目录下

9、。活动要求活动1 在网页中添加音频与视频2-11、网页中常用的音频文件格式MP3格式：是一种压缩格式，能以较小的比特率、较大的压缩比达到近科（“近科”改为“近乎”）完美的CD音质，网页中如果需要播放MP3文件，用户需要安装必要插件，如QuickTime、Windows Meadia Player。WAV格式：具有较好的声音品质，大多数浏览器都支持此格式，因此不要求安装插件。但WAV文件一般容量比较大，在网页制作中受到一定限制，必要时可以将WAV格式转化为MP3格式进行压缩。MIDI格式：一般用于乐器类的音频文件，大多数浏览器都支持此格式，不要求安装插件。MIDI文件不能录制并且必须使用特殊的硬

10、件和软件在计算机上进行合成。知识窗活动1 在网页中添加音频与视频2-12、网页中添加音频文件的方法在网页中添加音频文件的方法有两种：一是背景音乐，二是插件形式。（1）为网页添加背景音乐音频文件可以以背景音乐的形式添加到网页中，在预览网页时背景音乐会自动播放，其HTML标签如下图所示。“”代表背景音乐，是单标签，以/结束；“src”代表音频文件的存放路径；“loop”代表音频文件循环播放次数，可以输入具体数值，例如数值等于“3”代表音频文件会播放3次随后停止，如果数值等于“-1”代表无限循环播放。活动1 在网页中添加音频与视频2-1（2）通过插件添加音频在Dreamweaver CS6还可以通过

11、插件的方法在网页文档中添加音频，在预览页面中会出现一个播放控件，通过该控件可以进行暂停、播放、停止、调整音量等操作，其HTML标签如下图所示。“”代表插件，是双标签，以开始，结束；“src”代表音频文件的存放路径；“width”代表音频控件的宽度，默认单位是像素；“height”代表音频控件的高度，默认单位是像素；“autostart”代表浏览网页时音频文件是否会自动播放，如果值等于“true”那么音频文件会自动播放；如果值等于“false”那么音频文件不会自动播放，需要手动播放；如果没有“autostart”属性，则默认会自动播放。值得注意的是，该属性在IE浏览器下才起作用。活动1 在网页中

12、添加音频与视频2-13、网页中添加视频文件的方法浏览器可以播放的视频格式有MP4、MOV、AVI、FLV等，可以通过插件方式添加视频，其添加方法、HTML标签和音频类似。此外，有FLV是Flash的视频文件，在网页中以SWF组件显示，将光标移至要插入FLV视频的位置，选择“插入”菜单中选择“媒体”中的FLV命令，打开“插入FLV”对话框，分为两种视频类型，主要区别如下：累进式下载视频：将FLV文件下载到网页浏览者的硬盘上，然后进行播放，如图1所示：流视频：对FLV视频内容进行流式处理，缓冲一定时间确保流畅后在网页上播放该部分内容，如图2所示：图1 图2活动1 在网页中添加音频与视频2-1详细操

13、作步骤请参阅教材。活动实施通过该活动，同学们掌握了制作丰富多彩的多媒体网页技术，网页中不仅单纯有文字、图片，而且还有令人赏心悦目的音频、视频，但要添加音频、视频过程中要注意文件格式、大小、浏览器兼容性等问题，保证网页能正常浏览。活动评价活动2 在网页中添加Flash动画2-2如下图所示，完成Flash动画和设置SWF文件透明背景效果页面的制作，完成后分别以“task2-2-2.html”、“task2-2-3.html”为文件名保存到站点为“项目2-2”的“Task2-2”根文件夹中。活动要求活动2 在网页中添加Flash动画2-2在Dreamweaver CS6中，Flash动画将声音、图像

14、和动画等内容加入到一个文件中，能制作出炫酷的动画效果，而且文件容量较小，是网页制作中上最流行的多媒体插件之一。Flash动画主要有两种格式：.fla格式：Flash软件创建的源文件，只能在Flash软件中打开和编辑，不能在Dreamweaver或浏览器中打开。要在Dreamweave进行添加Flash动画，需要在Flash软件中将Flash源文件导出为.swf格式的文件。.swf格式：Flash软件导出的电影文件，可以在浏览器中播放，也可以在Dreamweaver中预览，但不能进行编辑。.swf格式文件可以用Adobe Flash Player打开，浏览器必须安装Adobe Flash Pla

15、yer插件。在Dreamweaver CS6中，其主要属性如下图所示。Flash ID：可以输入SWF影片文件唯一的名称；宽和高：默认单位像素，设置SWF影片文件的尺寸；文件：指定SWF影片文件的路径；循环：选中则连续播放，不选只播放一次停止；自动播放：选中浏览网页时则会自动播放该影片；垂直边距、水平边距：设置影片上下、左右空白区域的像素数；品质：有低品质、自动低品质、自动高品质、高品质4个选项；比例：设置SWF影片文件显示的尺寸，有（默认）全部显示、无边框、严格匹配3种选项；对齐：设置SWF影片文件在网页中的对齐方式；Wmode：设置SWF影片文件是否透明显示，默认是不透明显示。知识窗活动2

16、 在网页中添加Flash动画2-2详细操作步骤请参阅教材。活动实施通过该活动，同学们简单掌握了在网页中插入Flash内容和设置Flash文件的方法，Flash在网页中常用于制作网页导航条、广告条、动画等，可以使网页更炫酷生动。活动评价任务3制作包含超链接的网页本任务可以分解为3个活动：制作文字超链接、制作图片热点超链接、制作锚点链接。活动1 制作文字超链接3-1为网页素材“task2-3-1.html”中的文本“华南地区”、“华东地区”、“华北地区”分别设定超链接，链接的网页文件分别为“hndq.html”、“hddq.html”、“hbdq.html”，页面打开目标为新建页面。活动要求活动1

17、 制作文字超链接3-1文本超链接是分配了目标URL的字或短语，它可以通过“属性”面板进行设置，如下图所示。知识窗点击左边的指向图标或右边的浏览图标选取被链接目标文本格式设置区活动1 制作文字超链接3-1详细操作步骤请参阅教材。活动实施通过本次活动，掌握文字超链接的创建方法，并能够根据实际情况，设置超链接打开方式。活动评价活动2 制作图片热点超链接3-2为网页素材“task2-3-1.html”中的“中国气候类型”图片设置4个热点超链接，链接的网页文件分别为“hndq.html”、“hddq.html”、“hxdq.html”、“hbdq.html”，页面打开目标为新建页面。活动要求活动2 制作

18、图片热点超链接3-2图片超链接是为整个图片分配默认超链接，也可以为图片分配一个或多个热点，即在图片中划分多个区域分配超链接，它可以通过“属性”面板进行设置，如下图所示。（对整张图片设置超链接，操作方法与以上设置文本超链接相同，这里就不再赘述）知识窗点击左边的指向图标或右边的浏览图标选取被链接目标热点形状可以是圆形、矩形、不规则图形。活动2 制作图片热点超链接3-2详细操作步骤请参阅教材。活动实施通过本次活动，掌握图片热点超链接的创建方法，在创建图片热点链接时，热区的划分可以是矩形、圆形及不规则的多边开，对于划分好的热区可以再一次进行调整操作。活动评价活动3 制作锚点链接3-3在网页适当位置添加

19、锚点命名，为“页面导航列表”中的气候类型设置锚点链接，完成后浏览时，可以通过点击导航列表中的气候类型，精准定位到网页中相应段落。活动要求活动3 制作锚点链接3-3锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作“精准链接”的便利工具，让链接对象接近焦点，便于浏览者查看网页内容。它可以通过菜单栏中的命令来使用，如下图所示。知识窗锚记命名可以使用字母、数字或字母与数字的混合形式输入。活动3 制作锚点链接3-3详细操作步骤请参阅教材。活动实施通过本次活动，掌握锚记超链接的创建方法，在网页中添加锚记超链接时，需先设置锚点，再设置锚记超链接，锚记超链接以“#”号开头。活动评价感谢您的观看由浅入深简章易懂贴近实际WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG网页制作项目实训教程重庆大学出版社