1.5 HTML图像_HTML视频教程
- 灬无言 - 阅 1,754小小课堂网HTML视频教程零基础入门首选。
下方为HTML视频教程，如视频不能正常播放，请安装flash或更换浏览器。请记得在视频右下角选择“超清”，然后点击“全屏”，效果更加。
1.5.1 Web前端Photoshop图片处理基础
获取一张图片
1、印屏幕（键盘上Print Screen SysRq Prt Sc SysRq）、截图工具
2、从浏览器中获取
直接右键另存为（但大不多不支持）
右键查看元素（点击浏览器放大镜）
Elements > Open link in a new tab
Style > Open link in a new tab
PS基础
常用快捷键
- 新建画布 快捷键 > Ctrl + N
- 复制 快捷键 > Ctrl + C
- 粘贴 快捷键 > Ctrl + V
- 放大 快捷键 > Ctrl + +
- 缩小 快捷键 > Ctrl – –
- 去除选框 快捷键 > Ctrl + D
- 小手拖动 快捷键 > 按住空格
- 保存 快捷键 > Alt + Shift + Ctrl +S
- 填充前景色 快捷键 > Alt + Delete
- 填充后景色 快捷键 > Ctrl + Delete
- 选区拉伸 快捷键 > Ctrl + T
- 隐藏工具栏 快捷键 > TAB
- 反选 快捷键 > Ctrl + Shift +i
- 显示切换 快捷键 > F
- 关闭当前窗 快捷键 > Ctrl + W
- 快速选区 快捷键 > W
- 信息面板 快捷键 > F8
常用技能1 抠图
方法一：使用矩形选框工具
- 新选区
- 添加到选区
- 从选区中减去
- 与选区交叉
方法二：快速选区工具
常用技能2 利用信息面板查看宽、高、像素（面板选项改为像素）
方法如下：
- 打开一张图片
- 选中区域
- 按F8键
常用技能3 去除图中某区域 （构造几像素的线）
方法如下：
- 选中区域
- 填充前（后）景色
常用技能4 背景盖住某些字体（logo）或某一区域自由移动
方法如下：
- 选中一块背景区域
- Ctrl + T 后，即可随意拉伸、移动该区域
常用技能5 对比我们做的网页和定制图是否一致
方法如下：
截取我们制作的网页效果复制到PS的新工作区
调整定制图和新工作区的尺寸均为100%（即原始尺寸）
调整在上一层的不透明度（默认100%即不透明）
1.5.2 插入图像
语法：<img src=”图片位置” alt=”图片说明”/> 图像src和alt为必须写的属性。
常用属性如下：
图像源文件 <img src=”图像文件的位置” />
如：<img src=”images/1.jpg” />
图像提示文字 <img src=”#” alt=”提示文字内容” />
如：<img src=”tree.jpg” alt=”这是一课树的图像” />
图像宽和高 <img src=”#” width=”图像的宽度” height=”图像的高度” />
如：<img src=”tree.jpg” width=”10” height=”10” />
图像边框 <img src=”#” border=”图像边框宽度” />不推荐使用
CSS中，可以设置边框的颜色和样式solid，这里只能是边框粗细。
如：<img src=”tree.jpg” border=”10” />
图像垂直边距 <img src=”#” vspace=”垂直边距” />不推荐使用
如：<img src=”tree.jpg” vspace=”10” />
图像水平间距 <img src=”#” hspace=”水平间距” />不推荐使用
如：<img src=”1.jpg” hspace=”10” />
图像排列 <img src=”#” align=”对齐方式”>不推荐使用
很多浏览器支持性不好，故这里不举例说明了。
1.5.3 图像超链接
整张图像超链接 <a href=”#”><img src=”#” /></a>
如：<a href=”http://xiaoxiaoketang.com”><img src=”1.jpg” /></a>
图像某区域超链接 <map></map>标签 <area />标签usemap属性
1、插入图像并映射图像名
Usemap属性为图片命名，与后面map name相同
语法：
<img src=”#” usemap=”#映射图像名称” /> 注意这里必须要加#号
2、定义热区图像以及对应热区图像对应的链接
Map name 是前面usemap定制图像名称此处name可正常使用。
Shape属性： rect（矩形） circle（圆形）
Coords属性：”x1,y1,x2,y2”（矩形） “x1,y1,半径” x,y相对图像左上角（0,0）
语法：
<map name=”摄影图像名称”>
<area shape=”热区形状” coords=”热区坐标” href=”链接地址”/>
</map>
如：<img src=”1.jpg” alt=”1” usename=”#小小课堂图片” />
<map name=”小小课堂图片”>
<area shape=”rect” coorder=”100,100,200,200” href=”http:www.qq.com” />
<area shape=”circle” coorder=”100,100,100” href=”http:www.qq.com” />
</map>
以上就是小小课堂SEO自学网带来的《1.5 HTML图像_HTML视频教程》。感谢您的观看。SEO培训认准小小课堂！
非特殊说明，本文为小小课堂SEO自学网原创，欢迎转载并保留版权 https://www.xxkt.org/
本站提供SEO培训、咨询、诊断，微信（电话）：13722793092 微信公众号：xxktorg
小小课堂SEO自学网（https://www.xxkt.org/ ）,全网营销SEO概念提出者,提供SEO培训、全站优化诊断、顾问咨询为主的SEO服务。分享SEO实战经验，新站快速排名，单页面排名和三方平台推广等技术。电子书营销、论坛发帖推广、电子邮件营销、新媒体运营等网络营销教程。