images-在网页中使用图像.ppt
合集下载
第2章使用Photoshop编辑网页图像课件
37
（7）查看婚纱抠图效果
（8）载入人物选区
2.1.8 为图像添加文本和形状
38
在不锈钢炒锅素材中添加文字和形状，使商品图片展现的更加直观，其具体操作如下。
（1）输入并设置文字
（2）输入并设置文本
2.1.8 为图像添加文本和形状
39
（3）绘制直线
（4）输入并设置文本
（5）选择形状
（6）绘制 直线并输入
（1）打开素材图片
（2）设置属性并框选树叶
2.1.3 修复商品图片
（3） 擦除树叶
14
（4） 查看效果
2.1.3 修复商品图片
15
3．使用内容感知工具复制图像
打开“酒瓶.jpg”图像文件，使用内容感知移动工具将右侧酒瓶复制到左侧的空白区域，其具 体操作如下。
（1）打开素材图片
（2）设置属性并框选酒瓶
2.1.4 使用液化滤镜处理图片
19
使用液化滤镜对人物进行处理，使人物更加婀娜多姿，其具体操作如下。
（1）选择“液化”命令
（2）设置“液化”对话框
2.1.4 使用液化滤镜处理图片
20
（3）修饰脸型
（4）查看效果
2.1.5．调整图片颜色
21
处理户外旅行包产品图片，在处理时先对旅行包的亮度、对比度和色彩进行调整，使其显 示效果更佳，然后为其添加背景，达到吸引消费者点击的目的，其具体操作如下。
内容导航
2.1 课堂案例：处理商品展示效果 2.2 课堂案例：制作banner区海报 2.3 项目实训 2.4 课后练习
1
课堂案例：处理商品图片展示效果
2
米拉想为电商网站设计效果图，老洪告诉米拉，最好先将网页中需要用到的商品展示图片设 计好，这样有利于提升网页的美观度，并提高界面效果图的制作效率。完成后的部分效果如图所 示
《网页制作中图像的应用》说课PPT
内容
插入图像、图像显示方式的控制、图像的编 辑、图像的描摹和图像的使用原则
教学分析
Teaching Analysis
内容分析
图像显示方式的控制
03
常用图像的文件类型
01
04
创建及编辑图片库
02
在网页中插入图像
图像的应用
教学分析
Teaching Analysis
学情分析
优点
班级女生较多，上课纪律较好 学生对于所见即所得的网页制作非常感兴趣，
班级优化大师
常用图像文件类型有哪
1
些、各自有怎样不同的特
点？
回答问题
向网页中插入图片、设置
2
图片显示方式
操作演示
教学过程
Teaching Process
课前准备 课堂实施 课后拓展
协作探索
蒙太奇布局 显示幻灯片布局 垂直和水平版布局
图片大小不一
图片太少
➢ 移动图片位置 ➢ 设置缩略图大小
突出教学重点
情感态度 价值观
3
对实验过程中遇 到的问题能主动 思考，积极寻求 解决办法；
感受到在网页中 应用图像的乐 趣。
教学分析
Teaching Analysis
教学重点
✓ 预习任务一：了解常用图像文件类型 ✓ 预习任务二：向网页中插入图片并设
置图片属性
➢ 预习任务三：创建及编辑图片库
教学分析
Teaching Analysis
网页制作中图像的应用
目 录 CONTENTS
教学分析
2
教学过程
4
Teaching Analysis
Teaching Process
1
教学策略
插入图像、图像显示方式的控制、图像的编 辑、图像的描摹和图像的使用原则
教学分析
Teaching Analysis
内容分析
图像显示方式的控制
03
常用图像的文件类型
01
04
创建及编辑图片库
02
在网页中插入图像
图像的应用
教学分析
Teaching Analysis
学情分析
优点
班级女生较多，上课纪律较好 学生对于所见即所得的网页制作非常感兴趣，
班级优化大师
常用图像文件类型有哪
1
些、各自有怎样不同的特
点？
回答问题
向网页中插入图片、设置
2
图片显示方式
操作演示
教学过程
Teaching Process
课前准备 课堂实施 课后拓展
协作探索
蒙太奇布局 显示幻灯片布局 垂直和水平版布局
图片大小不一
图片太少
➢ 移动图片位置 ➢ 设置缩略图大小
突出教学重点
情感态度 价值观
3
对实验过程中遇 到的问题能主动 思考，积极寻求 解决办法；
感受到在网页中 应用图像的乐 趣。
教学分析
Teaching Analysis
教学重点
✓ 预习任务一：了解常用图像文件类型 ✓ 预习任务二：向网页中插入图片并设
置图片属性
➢ 预习任务三：创建及编辑图片库
教学分析
Teaching Analysis
网页制作中图像的应用
目 录 CONTENTS
教学分析
2
教学过程
4
Teaching Analysis
Teaching Process
1
教学策略
第4章在网页中插入图片PPT课件
直接5.4插制入插作入图图像像页面
图像可以在Dreamweaver 8中的【设计】视图或者 【代码】视图中被插入到文档里。在Dreamweaver 8的文档中添加图像时，可以设置或者修改图像属 性并可直接在文档窗口中查看所作的修改，插入 图像的具体步骤如下：
➢ （1）用鼠标指针确定图像的插入点。 ➢ （2）单击【插入》图像】菜单项，打开【选择图
GIF格式
GIF全称为“Graphics Interchange Format”， 意为可交换图像格式，它是第一个支持网页的 图像格式，在PC机和苹果机上都能被正确识 别。它最多支持256种颜色，可以使图像变得 容量相当小。GIF图像可以在网页中以透明方 式显示，还可以包含动态信息，即GIF动画。
➢ 5.4.5 插入鼠标经过图像 ➢ 在网页中，鼠标经过图像时经常被用来制作动态
效果。当鼠标移动到图像上时，该图像就变成另 外一个图像。这样的效果被广泛的应用到按钮、 导航条的制作中。具体操作步骤如下： ➢ （1）将光标定位到一个图的位置。 ➢ （2）单击【插入》图像对象》鼠标经过图像】 菜单项，打开【插入鼠标经过菜单】对话框。 ➢ （3）单击【浏览】按钮，分别设置原始图像和 鼠标经过的图像的路径。
PNG格式
PNG全称为“Portable Network Graphics”，意为便携网络图像，它 是逐渐流行的网络图像格式。PNG 格式既融合了GIF能透明显示的特 点，又具有JPEG处理精美图像的 优势，且可以包含图层等信息，常 常用于制作网页效果图。
首页 末页 向上 向下 返回 结束 调音
网页图像来源
首页 末页 向上 向下 返回 结束 调音
JPEG格式
JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效 地压缩图片，丢失人眼不易察觉的部分图像， 使文件容量在变小的同时基本不失真，通常 用来显示颜色丰富的精美图像。
网页中的图像
图像标记 alt属性
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。 添加alt 属性主要有两个方面的作用： ✓ 一是由于一些原因，如网速太慢、浏览器版本过低等，可能造成网页中的图的内容来分析网页的内容，这样可以帮
在 HTML中，图像由 <img> 标签定义，其功能是向网页中插入一幅图像。
空标签，意思是说，它只包含 属性，并且没有闭合标签。
属性 值
src URL alt text
描述 规定显示图像的URL。 规定图像的替代文本。
图像标记 src属性
通常新建一个如“pic”、“images”等文件夹，专门用来存放图像文件。 我们还可以根据需要，在此文件夹下，创建其它的文件夹，以分门别类的存放图像文件。
总结
网页中的图像
图像格式
01
如何使用图像标签在网页中插入图像
02
图像标签：<img>
作业与思考
请在网页中练习插入三张图像， 并添加上面介绍的几个属性。 熟悉一下图像标签的使用方法吧。
<img src="images\rose.jpg" alt="玫瑰花绽放”
width=“300” height="80">
<img src="images\rose.jpg" alt="玫瑰花绽放”
width=“300”>
不是等比例缩放
图像标记 title属性
作用：给图片添加当鼠标悬停在图片上时出现提示信息的效果。
<img src="images\rose.jpg" alt="玫瑰花绽放”
width=“300” title="玫瑰花">