免费网页
图片切换
篇一:如何用photoshop输出html网页(psd网页模板)
如何用photoshop输出html网页(psd网页模板)
2010-11-03 14:52
在修改好相应的文字与图象之后,我们就将PSD文件输出(X)HTML文件。
首先得先对PSD文件做切片,有两种方法:
?使用工具栏上的“切片工具”,
然后在图象上划出一块一块的区域。
?使用基于参考线的切片,按ctrl+R调出标尺栏,
把鼠标移动到标尺上,按住鼠标左键,移动到图象上,将会看到一条绿色的参考线,如图
将参考线;排好,然后点一下工具栏上的切片工具图
,然后点上面
选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。
接下来就可以输出了:
?依次选择菜单栏上的“文件”?“存储为Web所用格式”?“存储”。
?接下来就会弹出一个“将优化结果存储为”的窗口,
1
如图
在“保存类型”处有个下拉列框可以选择,因为我们要存储为网页的格式,所以选择“HTML和图象(* html)”,再选择“保存”就可以输出一个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。
?如果我们需要输出“div+css的网页”我们还可以这么做:
在“设置”处的下拉列框,选择“其他”
就会弹出一个“输出设置”的窗口
在第2个下拉列框处选择“切片”
选择“生成CSS”
单击“好”?“保存”就可以输出一个目前流行的“div+css”的HTML网页。
其实标准的网制作完成的工作实际是:psd to html,一般情况下,我们会拿到美工的psd,这时候不同的人会有不同的做法:
1.打开fireworks将图片切割导出为html。
2.直接在dreamweaver之类的工具去拖拉布局,导入相关的图片,flash资源。
3.先在ps中完成切图后,在文本编辑器中看着效果图一步步的制作。
以上是大多被采用的方法,但都不好:
2
第一种方法最为不好,这样的代码根本不具维护性和可读性。
第二种方法也不好,代码难免会有冗余,做出来的东西基本需要排查一遍。
第三种方法也不好,因为你需要看效果图一点点的拼,也就是说写html标签的时候,你在不断的假设这块要怎么去显示。
正确的做法是:
1.拿到psd后,先不要做别的,直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么渲染,完全自然化的标签,不加任何的css。
2.写完之后在各个浏览器运行之后确保大体定位都没有问
。
篇二:PSD网页切图制作HTML全过程教程
PSD网页切图制作HTML全过程教程
把psd页面利用
div+css切割成html页面
首先看看效果
下面的图片就是效果图,切割出来后,可能头部和底部会宽点.....
新建文件夹
开始时,在您的计算机中创建一个文件夹。我把它命名
3
为zmool。再在文件夹中创建新文件夹images,放网站的所
有图像。接下来打开代码编辑器(Dreamweaver),并在根
目录下创建一个HTML文件名为 index.html,这是我们的
主页模板。现在创建一个新的CSS文件,并将其命名为
style.css文件。如下图:
打开index.html文件。在head标签顶部,添加链接到
您的样式表(style.css)。你可以使用下面的代码。 <link
href=style.cssrel=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=303b559e38&zoom=&png=189227-212685&jpg=0-0” target=“_blank”>
点此查看
</div
<div id=footer
</div
</body
</html
4
切割背景
我们的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)。然后保存的图像文件夹文件名为
5
background.jpg。
设置背景样式
打开style.css文件,设置基本样式,还有背景样以及主
体部分的宽度,如下代码:
* {
margin: 0px;
padd
ing: 0px;
}
body
{
background:url(images/background.jpg);
}
#container
{
margin: auto;
width: 960px;
}
切割头部
返回photoshop,隐藏所以图层,除头部背景外,并用
同样的方法,把头部背景图片切割保存为web格式,保存文
件名为head.jpg。
6
编辑头部背景代码
在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
7
{
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
导航样式如下:
8
现在,添加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;
篇三:怎样对整个网页页面进行截图,
一、在键盘右上侧有一个键print screen sys rq键(打印屏幕),可以用它将显示屏显示的画面抓下来,复制到“剪贴板”中,然后再把图片粘贴到“画图”、“Photoshop”之类的图像处理软件中,进行编辑处理后保存成图片文件,或粘贴到“Word”、“Powerpoint”、“Wps”等支持图文编辑的应用软件里直接使用。
1、截获屏幕图像
9
?将所要截取的画面窗口处于windows窗口的最前方(当前编辑窗口);
?按键盘上的“Print Screen”键,系统将会截取全屏幕画面并保存到“剪贴板”中;
?打开图片处理软件(如“画图”),点击该软件工具栏上的“粘贴”按钮或编辑菜单中的“粘贴”命令,图片被粘贴到该软件编辑窗口中(画布上),编辑图片,保存文件。
或打开(切换到)图文编辑软件(如“Word”、“Powerpoint”等),点击该软件工具栏上的“粘贴”按钮或编辑菜单中的“粘贴”命令,图片被粘贴到编辑窗口中,也可以使用该类软件的图片工具进行编辑。
注意,当粘贴到“画图”中时,可能会弹出一个“剪贴板中的图像比位图大,是否扩大位图,”对话框,此时点击“是”即可。
2、抓取当前活动窗口
我们经常不需要整个屏幕,而只要屏幕中的一个窗口,比如我们要“Word”窗口的图片。按下Alt键,同时按Print Screen即可。
?将所要截取的窗口处于windows窗口的最前方(即当前编辑窗口);
?同时按下Alt键和“Print Screen”键,系统将会截取当前窗口画面并保存到“剪贴板”中;
10
?粘贴到图像处理软件中或图文编辑软件中。
二、直接点击Ctrl,Alt,A键,然后可见鼠标的箭头变成彩色的,按住左键移动鼠标选择截图范围,然后在截图内右键鼠标另存为即可,可方便了.
三、用第三方软件如QQ截图:点击聊天框截图---显示彩色鼠标---用其圈定所选目标(右键取消)----双击(单击左键为重新选择)---进入QQ聊天框--右键另存为---到达所到地址 如果想上传则:右键点击图片---编辑---另存为---把保存类型改为JPEG格式即可 。
方法1.1 屏幕截图
登陆QQ—?按下“Ctrl+Alt+A”组合键—?按下鼠标左键不放选择截取范围—?用鼠标左
键调整截取范围的大小和位置—?截取范围内双击鼠标左键。所截图像保存在系统剪贴板。
1.2 静态影视截图
登陆QQ—?双击QQ面板中的任一位好友—?在与好友聊天窗口中点击“捕捉屏幕”下拉菜单—?点击静态影片截图—?激活要截图的影视播放窗口—?按下键盘上的“Scroll Lock”键。在聊天窗口的输入窗口中即见所截得的图像。所截图像保存在系统剪贴板。
1.3 动态影视截图
登陆QQ—?双击QQ面板中的任一位好友—?在与好
11
友聊天窗口中点击“捕捉屏幕”下拉菜单—?点击动态影片截图(可根据需要先点击影片截图设置,进行动态截图预设置)—?激活要截图的影视播放窗口—?按下键盘上的“Scroll Lock”键。在聊天窗口的输入窗口中即见所截得的动态图像。
软件介绍:
红蜻蜓抓图精灵(RdfSnap)是一款完全免费的专业级屏幕捕捉软件,能够让您得心应手地捕捉到需要的屏幕截图。捕捉图像方式灵活,主要可以捕捉整个屏幕、活动窗口、选定区域、固定区域、选定控件、选定菜单等,图像输出方式多样,主要包括文件、剪贴板、画图和打印机。软件具有捕捉光标、设置捕捉前延时、显示屏幕放大镜、自定义捕捉热键、图像文件自动按时间或模板命名、捕捉成功声音提示、重复最后捕捉、预览捕捉图片、图像打印、图像裁切、图像反色、图像翻转、图像旋转、图像大小设置、常用图片编辑、墙纸设置等功能。捕捉到的图像能够以保存图像文件、复制到剪贴板、输出到画图、打印到打印机等多种方式输出。
12