1.5 HTML图像_HTML视频教程

- 灬无言 - 阅 1,213

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

图文不够清楚?请观看HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

22

本文转载 " https://www.xxkt.org/1118 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

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

error: Content is protected !!