免费网页模板图片切换.docx
《免费网页模板图片切换.docx》由会员分享，可在线阅读，更多相关《免费网页模板图片切换.docx（6页珍藏版）》请在冰点文库上搜索。
免费网页模板图片切换
竭诚为您提供优质文档/双击可除
免费网页模板图片切换
篇一：
如何用photoshop输出html网页（psd网页模板）
如何用photoshop输出html网页（psd网页模板）
20xx-11-0314:
52
在修改好相应的文字与图象之后，我们就将psd文件输出（x）html文件。
首先得先对psd文件做切片，有两种方法：
①使用工具栏上的“切片工具”，
然后在图象上划出一块一块的区域。
②使用基于参考线的切片，按ctrl+R调出标尺栏，
把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图
将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面
选项栏里的“基于参考线的切片”。
于是在原来的参考线上就变成了一块一块的切片了。
接下来就可以输出了:
①依次选择菜单栏上的“文件”→“存储为web所用格式”→“存储”。
②接下来就会弹出一个“将优化结果存储为”的窗口，如图
在“保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“html和图象（*html）”，再选择“保存”就可以输出一个网页格式的html文件与一个包含图象的名为“images”的文件夹。
③如果我们需要输出“div+css的网页”我们还可以这么做：
在“设置”处的下拉列框，选择“其他”
就会弹出一个“输出设置”的窗口
在第2个下拉列框处选择“切片”
选择“生成css”
单击“好”→“保存”就可以输出一个目前流行的“div+css”的html网页。
其实标准的网制作完成的工作实际是：
psdtohtml，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法：
1.打开fireworks将图片切割导出为html。
2.直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash资源。
3.先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。
以上是大多被采用的方法，但都不好：
第一种方法最为不好，这样的代码根本不具维护性和可读性。
第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。
第三种方法也不好，因为你需要看效果图一点点的拼，也就是说写html标签的时候，你在不断的假设这块要怎么去显示。
正确的做法是：
1.拿到psd后，先不要做别的，直接在文本编辑器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。
2.写完之后在各个浏览器运行之后确保大体定位都没有问题。
篇二：
psd网页切图制作html全过程教程
psd网页切图制作html全过程教程
把psd页面利用
div+css切割成html页面
首先看看效果
下面的图片就是效果图，切割出来后，可能头部和底部会宽点.....
新建文件夹
开始时，在您的计算机中创建一个文件夹。
我把它命名为zmool。
再在文件夹中创建新文件夹images，放网站的所有图像。
接下来打开代码编辑器（dreamweaver），并在根目录下创建一个html文件名为index.html，这是我们的主页模板。
现在创建一个新的css文件，并将其命名为style.css文件。
如下图：
打开index.html文件。
在head标签顶部，添加链接到您的样式表（style.css）。
你可以使用下面的代码。
头部的代码如下面:
padd
ing:
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内,添加下面的代码.....
class="logo">
现在,下面切换到style.css文件，编写#logo样式.
#logo
{
margin-top:
20px;
border:
none;
}
编辑导航代码
下面是页面里的代码，头部header包括logo和导航两个部分.
class="logo">
home
about
work
blog
contact
导航样式如下：
现在,添加css表里的导航样式~，ul、li和链接a的样式:
#headerli
{
color:
#959595;
list-style:
none;
float:
left;
margin-right:
20px;
font-family:
"myriadpro",arial;
font-weight:
bold;
font-size:
24px;
}
#headerlia
{
color:
#959595;
篇三：
怎样对整个网页页面进行截图？
一、在键盘右上侧有一个键printscreensysrq键（打印屏幕），可以用它将显示屏显示的画面抓下来，复制到“剪贴板”中，然后再把图片粘贴到“画图”、“photoshop”之类的图像处理软件中，进行编辑处理后保存成图片文件，或粘贴到“word”、“powerpoint”、“wps”等支持图文编辑的应用软件里直接使用。
1、截获屏幕图像
①将所要截取的画面窗口处于windows窗口的最前方（当前编辑窗口）；
②按键盘上的“printscreen”键，系统将会截取全屏幕画面并保存到“剪贴板”中；
③打开图片处理软件（如“画图”），点击该软件工具栏上的“粘贴”按钮或编辑菜单中的“粘贴”命令，图片被粘贴到该软件编辑窗口中（画布上），编辑图片，保存文件。
或打开（切换到）图文编辑软件（如“word”、“powerpoint”等），点击该软件工具栏上的“粘贴”按钮或编辑菜单中的“粘贴”命令，图片被粘贴到编辑窗口中，也可以使用该类软件的图片工具进行编辑。
注意，当粘贴到“画图”中时，可能会弹出一个“剪贴板中的图像比位图大，是否扩大位图？
”对话框，此时点击“是”即可。
2、抓取当前活动窗口
我们经常不需要整个屏幕，而只要屏幕中的一个窗口，比如我们要“word”窗口的图片。
按下alt键，同时按printscreen即可。
①将所要截取的窗口处于windows窗口的最前方（即当前编辑窗口）；
②同时按下alt键和“printscreen”键，系统将会截取当前窗口画面并保存到“剪贴板”中；
③粘贴到图像处理软件中或图文编辑软件中。
二、直接点击ctrl＋alt＋a键，然后可见鼠标的箭头变成彩色的，按住左键移动鼠标选择截图范围，然后在截图内右键鼠标另存为即可，可方便了.
三、用第三方软件如qq截图：
点击聊天框截图---显示彩色鼠标---用其圈定所选目标（右键取消）----双击（单击左键为重新选择）---进入qq聊天框--右键另存为---到达所到地址如果想上传则:
右键点击图片---编辑---另存为---把保存类型改为jpeg格式即可。
方法1.1屏幕截图
登陆qq—→按下“ctrl+alt+a”组合键—→按下鼠标左键不放选择截取范围—→用鼠标左
键调整截取范围的大小和位置—→截取范围内双击鼠标左键。
所截图像保存在系统剪贴板。
1.2静态影视截图
登陆qq—→双击qq面板中的任一位好友—→在与好友聊天窗口中点击“捕捉屏幕”下拉菜单—→点击静态影片截图—→激活要截图的影视播放窗口—→按下键盘上的“scrolllock”键。
在聊天窗口的输入窗口中即见所截得的图像。
所截图像保存在系统剪贴板。
1.3动态影视截图
登陆qq—→双击qq面板中的任一位好友—→在与好友聊天窗口中点击“捕捉屏幕”下拉菜单—→点击动态影片截图（可根据需要先点击影片截图设置，进行动态截图预设置）—→激活要截图的影视播放窗口—→按下键盘上的“scrolllock”键。
在聊天窗口的输入窗口中即见所截得的动态图像。
软件介绍：
红蜻蜓抓图精灵（Rdfsnap）是一款完全免费的专业级屏幕捕捉软件，能够让您得心应手地捕捉到需要的屏幕截图。
捕捉图像方式灵活，主要可以捕捉整个屏幕、活动窗口、选定区域、固定区域、选定控件、选定菜单等，图像输出方式多样，主要包括文件、剪贴板、画图和打印机。
软件具有捕捉光标、设置捕捉前延时、显示屏幕放大镜、自定义捕捉热键、图像文件自动按时间或模板命名、捕捉成功声音提示、重复最后捕捉、预览捕捉图片、图像打印、图像裁切、图像反色、图像翻转、图像旋转、图像大小设置、常用图片编辑、墙纸设置等功能。
捕捉到的图像能够以保存图像文件、复制到剪贴板、输出到画图、打印到打印机等多种方式输出。
升级会员 