1.5 HTML图像_HTML视频教程

- 灬无言 - 阅 1,666

小小课堂网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

            

一条回应:“1.5 HTML图像_HTML视频教程”

  1. 马慧SEO说道:

    小小课堂SEO自学网(https://www.xxkt.org/ ),全网营销SEO概念提出者,提供SEO培训、全站优化诊断、顾问咨询为主的SEO服务。分享SEO实战经验,新站快速排名,单页面排名和三方平台推广等技术。电子书营销、论坛发帖推广、电子邮件营销、新媒体运营等网络营销教程。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章!