怎么把图片切成HTML页面?

html-css014

怎么把图片切成HTML页面?,第1张

根据不同的设计图采取不同的方案。

你可以用table布局,可以用<map>+<area>标签,可以用CSS绝对或相对定位一个<a>的位置。

很久很久以前,人们喜欢大大的图放上去,再用map标签指定图片的可点击热点。

后来流行方块切图的方式,许多图片处理工具里面有,印象中Firework可以导出切片图片文件带html,核心考虑是加载速度。

现在一般分层分块,背景是背景,该平铺的平铺。另外哪里有图就放图,哪里有字就放字。该哪里有链接就放链接。

不推荐把所有东西做在图片里面然后想要把这个图片直接变成网页的想法,纯美工不会网页的常有此想法。

从网页角度这种做法不利于SEO,严重影响页面载入速度,文本信息无法复制。

用 ImageReady

其次打开你想做切片的图片

在英文输入法下,在程序界面中按 K切换到切片工具

在图片上随意进行切片

按CTRL+ALT+SHIFT+S 将优化结果存储为

保存类型下拉框拉下来选择“HTML和图像”

进行保存

或者使用photoshop的 切片工具 操作!

这是教程

http://wenku.baidu.com/view/9e74cd23af45b307e871971a.html

http://wenku.baidu.com/view/9d79cb7f27284b73f2425056.html

希望帮到你

如果不想使用PS来编辑图片,可以在网页中直接用多个DIV+CSS实现,先设置好各个DIV的位置和大小,然后用CSS指定该图片为背景图片,只要把background-position的值计算好,就可以使DIV显示图片的不同部位,实现拼图效果。