婚纱摄影行业满屏活动页面切图教程

婚纱摄影行业满屏活动页面切图教程
如图显示：
一、PS切图
1、在做活动页面切图之前请准备下载两个工具分别Adobe Photoshop CS4（PS）、Dreamweaver CS3 (DW)
2、用PS打开做好的活动页面进行切图，如下图所示：
4、用切片工具切片整个图像如下图所示：
5、在切片框内单击右键选择“划分切片”—“选择水平划分为”—“填写200”像素/切片—确定，如下图所示：
6、保存图片步骤，选择PS左上角“文件”点击，选择存储为Web和设备所用格式（D）...如下图所示：
可以忽略掉，点击“是”即可！显示图如下：
这里有两个地方是可以设置的分别：选择图片格式和图片质量，如图显示：
7、点击存储，如图显示：
文件名：（设置图片命名，用英文名即可）保存类型：选择仅限图像即可
设置：这个默认就行不需要设置
切片：选择所有用户切片即可
如下图所示：
8、点击保存，如下图所示：
9、在桌面新建文件夹,如图所示：
把“images”文件夹拽到“jiehuan2014”文件夹即可！
二、DW制作网页
1、打开DW工具，如下图所示：
2、新建HTML网页，点击“HTML”如下图显示：
3、把“无标题文档”修改成本次活动标题，如图显示：
4、CTRL+S，保存网页，如下图显示：
找到桌面刚刚新建的文件夹，双击打开
把文件名改成index.html,如下图显示：
5、点击保存即可，如图显示：
6、回到DW界面，现在开始编写代码，
<style type="text/css">
<!--
body { margin:0px; padding:0px;}
-->
</style></head>
<div style="width:100%; height:200px; background:url(images/jiehun_01.jpg) no-repeat center; margin:0px auto;"></div> 复制上面的代码粘贴到DW，如图显示
代码解析：
Height（图片的高度）
Background（图片背景）
images/jiehun_01.jpg（图片路径）
jiehun_01.jpg（图片的名称）
这里图片的名称一定是images里面的图片名称，如图显示：
7、点击“设计”看如下效果：我们成功让第一张图片显示出来了，接下来我们要让所有的图片显示出来。

按步骤一步一步来，不要着急！
8、回到代码里面来，我们复制代码，我们有多少张图片就复制粘贴多少行代码，如图显示：
9、修改图片名称，如图显示：
注：图片名称是对应我们images文件里面的图片名称，这样才能正确的找到图片，才能显示图片。

如下图显示：
10、完成上面步骤后，Ctrl+S保存网页，点击浏览网页，如图显示：
见证奇迹的时刻就要到来！
11、我们成功的制作出满屏的网页了，如下图显示：
三、上传活动页面
1、下载ftp上传工具，登陆网站空间，然后把文件夹上传到网站根目录即可。

2、打开活动页面地址：http://www.域名.com/jiehun2014, 即能显示上传好的页面。

日期：2014.9.28。