首先,制作图象切片(以一张图片为例子)

一、选择“切片”工具,在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)

切片后如下图

二、设置切片选项(如大小、目标链接、图片说明等等):选择“切片选择”工具,在要设置的图像切片上双击,在弹出的面板进行具体设置(如图):

三、储存切片为网页:
文件——保存为WEB和设备所用格式

一般选择gif图片格式,图片边缘的背景色设置为“无”,点击“储存”

然后,保存类型“HTML和图像”。如果要保存为DIV+CSS布局,则设置“其它”

此时会弹出进一步设置面板,选择“切片”“生成CSS”

这样,图像切片就被保存成DIV+CSS的网页布局了。

转自163求是的博客

Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法的更多相关文章

  1. 网页代码DIV+CSS布局积累

    11.17 CSS英文命名在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#me ...

  2. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  3. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  4. 采用 DIV+CSS 布局网页练习

    实验四:采用 DIV+CSS 布局网页练习 实验目的: 熟悉 DIV+CSS 布局网页的方法 实验要求: 1.制作一个完整网页和一个 css 文件: 2.在网页中采用 DIV+CSS 布局 4 个以上 ...

  5. 网页DIV+CSS布局与ifame传统布局对比

    通常我们从设计师手上拿到设计稿,按照功能划分为很多小块,然后再利用div+css写成静态页面按照设计稿排列还原,最后把具体内容填充到小块里面.网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列 ...

  6. (网页)JS和CSS不缓存方法,时间戳

    <link ..... href=".....css?time"+new Date()> <script type="text/javascript&q ...

  7. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  8. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

  9. Photoshop在网页设计中的应用与方法

    1.图像局部截取和图像尺寸调整 做网页设计时经常要用到的某张图像一部分,这就需要截取图像的局部.图像局部截取的方法很多,但使用Photoshop操作起来更方便.具体操作步骤如下: (1)在Photos ...

随机推荐

  1. jfinal集成spring cxf做webservice服务

    链接地址:http://zhengshuo.iteye.com/blog/2154047 废话不说,直接上代码 新增cxf的plugin CXFPlugin package com.jfinal.pl ...

  2. C--全排列的实现(递归方法) 傻子也能看懂的

      假设数组含有n个元素,则提取数组中的每一个元素做一次头元素,然后全排列除数组中除第一个元素之外的所有元素,这样就达到了对数组中所有元素进行全排列的得目的.[这句话才是重点!] 比如 1,2,3.的 ...

  3. 实战 iTextSharp

    原文 实战 iTextSharp iTextSharp 是用来生成  PDF 的一个组件,在 1998 年夏天的时候,Bruno Lowagie ,iText 的创作者,参与了学校的一个项目,当时使用 ...

  4. 基于visual Studio2013解决C语言竞赛题之1007找数

         题目 解决代码及点评 /************************************************************************/ ...

  5. Oracle数据库索引使用及索引失效总结

    容易引起oracle索引失效的原因很多: 1.在索引列上使用函数.如SUBSTR,DECODE,INSTR等,对索引列进行运算.需要建立函数索引就可以解决了. 2.新建的表还没来得及生成统计信息,分析 ...

  6. Session for Tornado(Redis) - 代码分享

    Session for Tornado(Redis) - 代码分享   Session for Tornado(Redis) session id的生成借用了web.py. 使用了 redis 的 h ...

  7. [Java 并发] Java并发编程实践 思维导图 - 第二章 线程安全性

    依据<Java并发编程实践>一书整理的思维导图.

  8. CentOS查看端口是否被占用

    CentOS查看端口是否被占用 本文介绍了linux中查看某一端口是否被占用的方法,有关netstat命令的使用技巧,感兴趣的朋友可以参考下. 使用命令: netstat -tunlp 会显示所有端口 ...

  9. 安装m2eclipse

    Help->Eclipse Marketplace- 搜索 maven 安装 Maven Integration for Eclipse

  10. 基于visual Studio2013解决C语言竞赛题之1077大数相加

        题目 解决代码及点评 /************************************************************************/ /* ...