利用photoshop切片图到dreamweaver生成网页图解教程详解
//最近做 切图很郁闷 因为我都是拿PS拉了参考线手切 //例会的时候爽说到切图，我才意识到这还真是个问题是个技术活儿 哈哈 鉴于很多朋友问到如何切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK，让我们开始： step1:在PhotoShop中打开设计稿，如下图
选择工具板上的slice切片工具，先大刀阔斧的切上一番!技巧： 大面积的色块单独切成一块，尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示：
step2:在PhotoShop中选择file-save for web...来输出，这里要注意一些参数的选择：
我们来看看红线所标识的1，2，3部分，将1所示的切片工具选中，然后点选2所示的图片，在3所示的地方选择色值，如果色彩单一可以选择尽量小的色值位;(为什么要这样？？)答案：这样会大大减小文件的大小，同时又能比较好的保持图片的色彩；设置好后点OK输出文件，这里的文件包括了一个htm和images文件夹，如图：
这里候你的页面才算完成了一半，接下来在Dreamweaver里建立站点：
step3:定义站点：
在图示左边的site name中为站点起一个名字，如example，然后在下面的local root folder中选择我们刚才导出的站点所以的文件夹；站点建好后在site map中我们看到：
(为什么要建立站点？)建立站点可以使我们养成一种很好的习惯，就是把一个网站所包含的文件，文件夹有条理的放在一起，同时我们很容易的将这个站点移动到其它地方而不用对文件路径进行任何改写!(当然如果你实在不想建立站点也没人强求你，我在事际工作中就遇到这样的同事，没有习惯为页面建立站点，当然后果的要麻烦少少了)
step4:重新制作页面表格(为什么？)通常在photoshop中直接导出的htm文件是不可以直接使用的，因为有些地方在实际运用时要作调整，比如有动态文字的地方，我们需要在页面中输入页不是使用图片，那么图片就要把它拿走，如果你在直接生成的htm中拿走不想要的图片再加上你想要的东西，你们发现页面将变得惨不忍睹，整个页面可能完全乱了套!
好了，先来分析一下导出的htm文件吧：
根据这个页面表格所示，我们在新的页面中建立一个三行一列的表格:
注意，把cellpadding,cellspacing,border三项值设为0，这个很重要；因为图片中我们不希望看到空隙和错位；然后再在第一行中插入一个三行两列的表格，并合并左边三列的表格，如图：
插入表格的时个要注意对比原htm文件中的内容，思考为什么这样做；
接下来在第二行中插入一个二行二列的表格，按上面的方法合并左边的格子，并在右边格子的第一行插入一个一行五列的表格如图示：
最后在下面一行插入一个三行二列的表格，并将图示中1,2外分别合并：
最后得到的页面应该是这样的：
好了，现在我们的任务就是往表格里面加图加内容了!这里就不再赘述了!(其实已经赘述得够多了!)
还要提醒大家注意的是在加图片和内容时，表格单元格的align,valign这两个属性非常重要，要不遗余力的运用它们来帮你做事!OK，自己实践一下!
标签(Tag):
------分隔线----------------------------
------分隔线----------------------------Dreamweaver第7章
图像_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者贡献于
评价文档：
1页免费81页免费19页免费2页¥1.0019页免费 15页免费11页免费11页免费7页免费9页免费
喜欢此文档的还喜欢10页1下载券7页1下载券46页1下载券7页1下载券14页1下载券
Dreamweaver第7章
图像|D​r​e​a​m​w​e​a​v​e​r​ ​c​s ​基​础​教​程​,​其​中​包​括​网​页​设​计​的​基​础​操​作​,​共7​个​章​节​,​这​只​是-0​章​节​。
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：952.80KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
Dreamweaver课件第3章插入图像.ppt81页
本文档一共被下载：
次 ,您可免费全文在线阅读后下载本文档
文档加载中...广告还剩秒
需要金币：100 &&
复习一下: 新建网站站点并进行目录规划; Firewoks布局网页,切片生成网站站点; 导入/导出站点;将一文件夹指定为一站点; 文本的操作 文本图文环绕;移动文字（ marquee behavior "scroll" direction up width "120" height "40" scrollamount "1" scrolldelay "40" onmouseover "this.stop
"onmouseout "this.start
插入图片,背景图片,背景音乐,插入图象占位符,图象链接,热区;创建网站相册;鼠标经过图像 第4章
插入图像 课前导读 基础知识 重点知识 提高知识 基础知识
网页支持的图像格式及图像的来源。 重点知识
插入图像的方法、图像属性设置的方法、网站相册的制作。应结合上机实战认真练习。
图像链接的设置。 课堂讲解 图像的格式及来源
设置图像的一般属性
给图像加入链接
图像热点链接
图像高级设置
图像的格式及来源
由于受网络速度等方面的影响，因此在网页的制作中图像的格式有一定的要求，一般用于网页的图像要求是GIF、JPEG或PNG3种格式中的一种。目前大部分的浏览器都支持GIF和JPEG文件格式，只有Microsoft Internet Explorer（4.0及更高版本）和NetScape Navigator（4.0及更高版本）部分支持PNG格式。
GIF（Graphics Interchange Format）意为图像交换格式。GIF是第一个支持网页的图像文件，它最多支持256种颜色，可以使图像变得相当小。GIF图像可以在网页中以透明方式显示，还包含动态信息，也就是网页上大量使用的GIF动画。GIF在网页中大量用于站点图标LOGO、广告条BANNER及网页背景图像，但由于GIF受颜色数目的限制，GIF不适合用作照片级的网页图像。
JPEG（Join Photograph Graphics）意为联合照片专家组，通常称为JPG。JPEG图像格式可以高效地压缩，丢失人眼不易察觉的部分图像，使得图
正在加载中，请稍后...
0页1页84页9页43页33页33页33页33页13页27页15页117页73页24页50页8页22页20页21页[图片/文字技巧]Dreamweaver CS3dreamweaver cs3学习概述
本部分内容是设计网..
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
[图片/文字技巧]Dreamweaver CS3
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口欢迎访问阿里西西WEB开发技术网站！
作者：[转载]&&文章来源：/&&更新时间：
　　Dreamweaver和Fireworks是Macromedia公司的网页制作利器，它们之间具有强大的兼容性，这种无缝连接的特性大大减少了网页设计者进行软件切换的时间，使网页制作和图像处理的效率得到了有效的提高。它们独特的集成功能使得在Fireworks与Dreamweaver之中交替处理文件变得十分容易。Dreamweaver和Fireworks识别和共享许多相同的文件编辑结果，其中包括对链接、图像映射、表格切片等的更改。这两个应用程序共同为在HTML页面中编辑、优化和放置网页图形文件提供了一个优化的工作流程。
　　这里我们将细细介绍Dreamweaver和Fireworks方便快捷的结合使用，领会这两炳利刃的合璧所产生的强大威力，从而为将来实际中的网站建设打下一定的基础。下面我们就来详细了解一下Fireworks MX 2004与Dreamweaver MX 2004结合使用的知识和技巧。文章末尾提供原文件供大家下载参考。
　　一、使用Dreamweaver占位符创建Fireworks文件
　　图像占位符允许用户指定Dreamweaver中将来放置的Fireworks图像的大小和位置，可以让我们在网页创建最终的图片之前尝试采用各种不同的网页布局，从而将Fireworks和 Dreamweaver的功能综合运用，发挥二者的强大功能。
　　在使用Dreamweaver图像占位符创建Fireworks图像时，系统会用与所选占位符尺寸相同的画布创建一个新的Fireworks文档。一旦Fireworks使用结束并且返回到 Dreamweaver，所创建的新Fireworks图形即会取代最初选择的图像占位符。
　　使用Dreamweaver占位符创建Fireworks文件的具体步骤：
　　第一步：在Dreamweaver MX 2004中，将所需的HTML文档保存到当前站点下。将光标定位在文档中需要插入Fireworks文件的位置并依次选择“Insert”-〉“Image Objects”-〉“Image Placeholder”选项。然后跳出图像占位符对话框，用户可以如图1所示设置图像占位符的名称、颜色、大小替换文本等内容。
图1 图像占位符对话框
　　第二步：单击“OK”，图像占位符即会插入到Dreamweaver文档中，如图2所示。
图2 图像占位符
　　第三步：点击图像占位符属性面板上的按钮，Fireworks MX 2004被启动，出现图3所示的文件窗口。
图3 Fireworks中的图像占位符
　　第四步：在 Fireworks 中创建图像，完成后单击“Done”。如图4所示,在“另存为”对话框中指定源png文件的名称和位置，然后单击“保存”。
图4 指定图像源文件
　　第五步：在“Export”对话框中命名导出的图像文件，这些文件是将在Dreamweaver中显示的jpeg或gif文件。然后为导出的图像文件指定位置，所选的位置应在Dreamweaver的站点文件夹内。如果已经输入了图像占位符的名称，则该名称在 Fireworks中将用作默认文件名，如图5所示。
图5 导出文件
　　第六步：单击“保存”按钮，返回到Dreamweaver，所创建的新Fireworks图像就会取代最初选择的图像占位符，如图6所示。
图6 Fireworks图像取代了图像占位符
　　二、 Dreamweaver中插入Fireworks HTML
　　将Fireworks HTML插入到Dreamweaver中有许多不同的方法。用户可以将Fireworks HTML复制到剪贴板；或者利用菜单或者“Insert”面板来直接插入Fireworks HTML文件；也可以在Dreamweaver中打开导出的Fireworks HTML文件，然后复制并粘贴所选的代码片段；另外使用 Fireworks中的“Update HTML”命令还可以轻松地更新导出到Dreamweaver的代码，甚至可以将HTML 导出为Dreamweaver库项目。这些方法各有千秋，用户可以根据具体情况作出选择。
　　具体应用：　　
　　1. 将Fireworks HTML复制到剪贴板在Dreamweaver中使用
图7 导出对话框中选择复制到剪贴板
　　将Fireworks HTML放到Dreamweaver中的一种快速方法是将其从Fireworks复制到剪贴板上，然后直接粘贴到Dreamweaver文档中。我们可以用两种方法在Fireworks中复制HTML代码到剪贴板。一种是可以使用“Edit”菜单下的“Copy HTML Code”，另一种是在“Export”对话框中HTML选项中选择“Copy to Clipboard”（复制到剪贴板）选项，如图7所示。这样就可以将Fireworks HTML复制到剪贴板并在指定的位置生成相关的图像文件，然后可以在Dreamweaver中将该HTML粘贴到文档中。所有与Fireworks文档相关的HTML和Javascript代码都复制到Dreamweaver文档中，图像导出到指定的位置，而Dreamweaver将用这些图像的站点相对链接更新HTML。
　　2. 直接将Fireworks HTML插入到Dreamweaver中
　　若要将Fireworks HTML文件直接插入到Dreamweaver中可按如下步骤操作：
　　首先需要将Fireworks HTML文件导出到已定义的Dreamweaver站点中，将光标放在文档中要插入的位置。选择“Insert” -& “Image Objects”-&“Fireworks HTML”或者在插入面板的“Common”类别中单击插入图像按钮旁边的倒三角形，这时会弹出图8所示的下拉菜单。
图8 下拉菜单
　　选择插入Fireworks HTML的按钮图标，会出现如图9所示的对话框，单击“Browse”选项，选择所需的Fireworks HTML文件，然后单击“OK”即可将HTML代码连同它的相关图像、切片和Javascript 一起插入到Dreamweaver文档中了。
　　如果插入后不再需要Fireworks HTML文件，请选择“Delete file after insertion”（插入后删除文件）选项。此选项不会影响与HTML文件关联的PNG源文件。
图9“插入Fireworks HTML”对话框
　　3. 从Fireworks HTML中复制代码并粘贴到Dreamweaver中
　　另一种方法是在Dreamweaver中打开导出的Fireworks HTML文件，然后将所需的部分复制并在另一个Dreamweaver文档中粘贴就可以了。