篇一：自己动手做网页切图 html编码指导
自己动手做网页切图、html编码指导
这是我个人的工作习惯，不一定是正确的，不一定是最好的，我不是专业的，我只是将我的方法和大家分享。
一、 分析页面
看到页面设计图后，要整体分析页面布局，分析并计划各个部分、各个信息块儿之间的结构，逻辑关系。整体思路确定后，就可以确定页面框架。框架确定后，分析页面的元素，他们的独特部分和共有部分。
页面分析完毕后就可以进入第二步裁切页面元素。
二、 裁切页面元素
PS切图快捷键:
a) 图层变选区：Ctrl+图层
b) 取色：用工具栏中有吸管工具
双击工具栏中的前景色（即图在相应的字或背景区点击，中黄色，白色为背景色），在弹出的对话窗口中得到改颜色代码：#df6003
c) 标尺：Ctrl+r
在标尺上点击右键，可以选择标尺测量量度（像素、厘米、等，建议选择像素，便于分析页面）
鼠标移至标尺上并点击，拖动，将拖动产生的标尺线移动至要剪切或测量元素的边缘，便于精准测量和裁剪图片。
如图所示该栏目模块宽度为367.8px。
d) 标尺工具：i
用于测量宽、高
F8显示标尺信息
e) 标尺显示与否：Ctrl+；
选框工具：
a) 取消选择：Ctrl+d
b) 变换选区：Alt+s+t或Ctrl+t
c) 剪切：Alt+i+p
d) 保存：
Ctrl+Alt+shift+s
裁剪工具：
a) 剪切：回车键
b) 保存：Ctrl+Alt+shift+s
三、 记录测量信息
利用标尺工具
的页面编辑。
测量信息基本包括：页面整体宽度（一般在900像素至1005像素之间）；页面背景颜色、文字（颜色、大小、字体、行高、行距）；信息栏目（高度、宽度、边框宽度、边框颜色等）；信息栏目之间的距离（默认预留5px,必须预留）等。
四、 Html编辑
一个项目的实施，首先要用dreamweaver建立其的独立的站点，独立的image文件夹，image文件夹命名为${root_path}images,站点中应用到的页面元素、css、js都放到该文件夹中，统一调用地址。
在站点内部建立项目模板，并取相应的名称来区分页面。
1.模板字符集应用utf-8，例如：
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
2.调用${root_path}images中的css文件（模板样式文件不要命名为style.css）、js文件，例如：
<link href="${root_patch}images/dwgzc.css" rel="stylesheet" rev="stylesheet" type="text/css" /> 测量，将测量到的页面信息记录下来便于后续
3.根据前面的页面分析和记录信息编辑html页面
3.1样式说明：
Float：left/right;
//div块左/右浮动，用于布局
//在左右浮动布局结束后，用clear:both;为浮动做结束，清理浮动。 例如：
a.未加clear:both;为浮动做结束，代码：
<div style="float:left; background:#930; height:120px;
width:500px;"></div>//红色块，向左浮动
<div style="float:right; background:#870; height:120px;
width:500px;"></div>//黄色块，向右浮动
<div style=" background:#345; height:20px; "></div>//蓝色块，预定义为两个左右浮动块的下一行，实际效果为两个浮动块儿的底部
b.未加clear:both;为浮动做结束，代码：
<div style="float:left; background:#930; height:120px;
width:500px;"></div>//红色块，向左浮动
<div style="float:right; background:#870; height:120px;
width:500px;"></div>//黄色块，向右浮动
<div style=" clear:both; background:#345; height:20px; "></div>//
蓝
篇二：PSD网页切图制作HTML全过程教程
PSD网页切图制作HTML全过程教程
把psd页面利用
div+css切割成html页面
首先看看效果
下面的图片就是效果图，切割出来后，可能头部和底部会宽点.....
新建文件夹
开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为 index.html，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名为style.css文件。如下图：
打开index.html文件。在head标签顶部，添加链接到您的样式表（style.css）。你可以使用下面的代码。 <link href="style.css"rel="stylesheet" type="text/css" />
头部的代码如下面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/retype/zoom/8812852c0066f5335a8121c8?pn=3&x=0&y=1314&raww=893&rawh=245&o=png_6_0_0_0_0_0_0_892.979_1262.879&type=pic&aimh=131.6909294512878&md5sum=6f8ccc80aadcd3e675f77abd5d4922b6&sign=3ab65a4d20&zoom=&png=189227-212685&jpg=0-0" target="_blank">点此查看
</div>
<div id="footer">
</div>
</body>
</html>
切割背景
我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。
<body>
<div id="header">
<div id="container">
</div>
</div>
<div id="content">
<div id="container">
</div>
</div>
<div id="footer">
<div id="container">
</div>
</div>
</body>
现在在photoshop里面打开原先设计好的, 隐藏所以的图层，除背景层外.
现在采取的切片工具，选择背景，保存网页web格式按（ALT +shift+Ctrl + S）。然后保存的图像文件夹文件名为background.jpg。
设置背景样式
打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码：
* {
margin: 0px;
padding: 0px;
}
body
{
background:url(images/background.jpg);
}
#container
{
margin: auto;
width: 960px;
}
切割头部
返回photoshop，隐藏所以图层，除头部背景外，并用同样的方法，把头部背景图片切割保存为web格式，保存文件名为head.jpg。
编辑头部背景代码
在style.css文件里编辑如下代码:
#header
{
background:url(images/header.jpg);
height:124px;
}
切割头部logo
在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割 logo层保存为logo.png，注意：保存为png格式图片
添加在页面添加logo
现在返回到html中，在#header #container内,添加下面的代码<div id="logo">....</div>. <div id="header">
<div id="container">
<div id="logo"><a href="#"><imgsrc="images/logo.png"
class="logo"></a></div>
</div>
</div>
现在, 下面切换到style.css文件，编写#logo样式.
#logo
{
margin-top:20px;
border:none;
}
编辑导航代码
下面是页面里的代码，头部header包括logo和导航两个部分.
<div id="header">
<div id="container">
<div id="logo"><a href="#"><imgsrc="images/logo.png"
class="logo"></a></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
导航样式如下：
现在,添加css表里的导航样式~，ul、li和链接a的样式:
#header li
{
color:#959595;
list-style:none;
float:left;
margin-right:20px;
font-family:"Myriad Pro",arial;
font-weight:bold;
font-size:24px;
}
#header li a
{
color:#959595;
篇三：[1]-如何切图-保存为html(网页编辑图片处理技巧)
网页编辑图片处理技巧[1]
如何切图-保存为html
概括：
【视图】菜单显示标尺——使用参考线（凭经验和需要）分割图片——基于参考线切片——合并或增加切片——保存web形式——设置质量，可以设置单个切片图片的属性——保存“html和图像”，或者其他。
图文演示： 一、标尺
—— 标尺
二、参考线
(1)可以直接从边缘的标尺
可以用快捷键，ctrl+r 显示和隐藏标尺；
用工具拖移出水平或者垂直的参考线。
按住ctrl可以把水平变成垂直，或相反。
(2)固定位置建立参考线：从【视图】--【新建参考线】--【设置水平或者垂直，距离最左边的距离】
px（像素）可以手动改为厘米。
(3)
用拖移工具放在参考线上即可移动，保存图片是参考线会自动隐藏，可以在视图中
隐藏掉参考线，或者把某个参考线拖到最左边或者最上边，就可以删掉那个参考线。
三、切片
参考线拉好后，用切片工具。
顶部这个工具的属性栏会显示为下图
点“基于参考线的切片”，自动根据你的参考线切图。
假若切片太多或者有的切片要调整，直接用切片工具对所需要调整的区域拖选就可以了。
如图，从01切片的左上角拖选到切片09的右下角，
把1~9切片合并为一个切片了。
四、保存 ·
——
菜单【文件】保存为【存储为web和设备所用格式】
·
默认即可。
进入的页面右上角，可以预设整个图片的统一名字，
也可以点击单个切片命名。存储格式可以为多种。品质一般为60左右足够网页需求。其他
·在图片下方可以看到 是单个切片或者整个图片存储后的大小，可以根据需要调整上图的“品质”，使得大小也可以增大或减小。
·状态。
当点击左上角，即对整个图片进行设置。
而则是可以对单个切片设置的
·点击保存，
和图像。
·table id__01就是切图部分的代码。
，“格式”选择为html
·
将相关图片放入制作的web文件夹里的对应位置（例如：3G_web文档 /images文件夹下）复制table id=”__01”
到即可。
结束。放入index.html文件的需要位置，
《切图,html》
由：免费论文网互联网用户整理提供,链接地址：
http://m.csmayi.cn/show/69391.html
转载请保留,谢谢!
- 上一篇：交行催收m3话术
- 下一篇：迎国庆致辞