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实战经验,新站快速排名,单页面排名和三方平台推广等技术。电子书营销、论坛发帖推广、电子邮件营销、新媒体运营等网络营销教程。