网页设计切图制作网页，很多的时候，首先要用图片处理软件制作出网页的效果图。效果图做好是一幅完整的图片，不可能把这一整张的图片都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材，这个过程就是切图。（当然是用剪切、选择工具也可以，但是用切片工具处理更精确。
打开PS，点击切片工具，如下图所示。点击切片工具，可以将图片切割成所需的大小，如下图所示。剪切图片后，点击导出特殊网页使用的格式，如下图所示。输入属导出web的格式页面，并按住shift键选择所有部分。导出格式设置为JPEG，如下所示。最后，单击save存储，如下图所示。
在Photoshop的工具箱中找到切片工具。使用切片工具沿着网页元素的边缘绘制切片线，将网页切割成不同的部分。也可以选择使用基于参考线的切片功能，这样Photoshop会自动根据参考线将网页切割成多个小图片。保存切片：选择“文件”菜单中的“导出”选项，然后选择“保存为Web所用格式”。
首先，明确设计稿的切图要求。在开始切图之前，需要与设计师沟通，了解设计稿中的元素是否需要全部切出，还是只切出部分主要元素。这有助于确定切图的范围和精度。其次，准备切图工具。常用的切图工具包括Photoshop、Sketch、Zeplin等。这些工具可以帮助我们将设计稿中的元素进行精确的切割和导出。
在Dreamweaver中创建站点，首先在图示左边的“site name”中为站点起一个名字，例如“example”。然后，在“local root folder”中选择刚才导出的站点的文件夹，确保所有切片文件都存储在同一目录下，方便后续操作。重新制作页面表格，通常在Photoshop中直接导出的HTML文件可能需要进一步调整。
打开一张图片，选择工具栏上的“切片工具”，样式有三种选择，为了便于图片的管理，通常选择“固定大小”。普通网页宽度通常是760px，所以选择五分之一宽度，也就是152px作为切割图片的宽度。宽度和高度都可根据图片大小随意调整。
方法/步骤 一般情况下打开一张图片，我们做好切片或者不做切片的情况下都是可以使用快捷键，把图片导出储存为web和设备所用格式的。如图所示。如果不行基本上是文件过大，自己的电脑运行不过来。
这种情况的发生，往往与我们设置桌面背景的方式有关。具体来说，当我们右键点击桌面选择“属性”，进入“显示属性”页面后，选择“桌面”，然后点击“浏览”，找到图片所在的位置，并在“位置”选项的下拉菜单中选择“拉伸”，就可以实现图片的铺满效果。
可以使用切片加快下载速度。处理包含不同数据类型的图像时，切片也很有用。例如，如果需要以 GIF 格式优化图像的某一区域以便支持动画，而图像的其余部分以 JPEG 格式优化更好时，就可以使用切片隔离动画。
右击左侧工具栏如下图工具，选择【切片选择工具】。选中【水平划分为】和【垂直划分为】，输入数字，可以在预览状态下一边输入数字一边查看效果，完成点击确定。打开文件菜单栏，点击【存储为 Web 所用格式】，直接点击【存储】。
1、网页布局有以下几种常见结构： “同”字型结构布局 所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。
2、在网页设计中，常见的三种布局方法分别是T型布局、口型布局以及POP布局。T型布局以其独特的结构而闻名，该布局的上部通常为横条，包括网站标志和广告，而页面的下半部分则被分为两部分，左侧是主菜单，右侧则展示主要内容，这样的设计很容易让人联想到英文字母“T”，因此得名T型布局。
3、“同”字型结构布局，即页面顶部为“标志+广告条+主菜单”，下方左侧为二级栏目条，右侧为连接栏目条，屏幕中间显示具体内容。这种布局的优点是充分利用版面，页面结构清晰，左右对称，主次分明，信息量大；缺点是页面拥挤，太规矩呆板，如果细节色彩上缺少变化调剂，很容易让人感到单调乏味。
4、网站建设中网页设计布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型这九种。
5、第二，拐角型网页布局：这个与国字型布局非常相似，不过在形势上存在一定察觉，应用起来效果也比较好。第三，标题正文型网页布局：这是在北京网站开发中最为简便的布局类型之一。此外，网站制作公司还常常用到包括“T”结构、“三”型以及对称对比型等。
切图的目的就是更加精确的进行网页布局。具体流程：将设计好的效果图转换为网页格式html格式，以方便dreamwrear等网页编辑软件设计布局， 让网页实现交互性功能。好的切片图能大大减少图片空间占有率（如：纯色图可以裁剪成几像素的小图用平铺来实现同样效果）。
切图就是把用设计软件设置好的图片切成相应的大小，切图后再把图片上传就可以可以加快显示速度，不用等整个图片都下载以后显示。PS切图步骤：打开PS，然后点击切片工具。点击切片工具后，就可以把图片切成需要的大小。切好图片后，点击导出web所用格式。
网页设计好后的切图是将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具，把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。
