篇一:自己动手做网页切图 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文件的需要位置,