免费网页模板图片切换下载_Word模板_10

is_882336

暂无简介

免费网页模板图片切换免费网页模板图片切换篇一:如何用photoshop输出html网页(psd网页模板) 如何用photoshop输出html网页(psd网页模板) 2010-11-03 14:52 在修改好相应的文字与图象之后，我们就将PSD文件输出(X)HTML文件。首先得先对PSD文件做切片，有两种方法: ?使用工具栏上的“切片工具”，然后在图象上划出一块一块的区域。 ?使用基于参考线的切片，按ctrl+R调出标尺栏，把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图将参考线;排好，...

免费网页模板图片切换篇一:如何用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

本文档为【免费网页模板图片切换】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。

免费网页模板图片切换

热门搜索

历史搜索