页面底部这块的设计我们需要切几个图片，一个是上面的白色的半圆形，还有底部的绿色背景，内容区块上的水平的虚线，还有垂直的虚线 ...

选择 切片工具 ... 先切一个底部的绿色背景 ... 选择一块区域 ... 双击这个切片 ... 命名为 emerald ...

然后点击 文件 ，存储为 Web 所用格式 ... 选中刚才创建的切片 ... 在预设里修改一下切片图像的格式... 我们可以使用 PNG-8 这种格式 ...

然后点击 存储 ... 位置选择 桌面 ... 切片这里选择 选中的切片 ... 再点击 存储 ...

回到桌面... 打开 images ，找到刚才的切片图像 ... 把它放在网页目录下面的 images 文件夹里 ...

再回到我们的设计图 ...

下面我们再切这个半圆 ... 可以先放大显示这块设计 ...

我们只需要切一个半圆就行了，因为我们可以在样式表里设置让它水平重复显示 ...

调整一下 ... 双击这个切片 ... 命名为 semicircle ...

然后再找到水平的虚线 ... 从虚线里的某个小横线的开始地方，到这个横线后面的间隔结束的地方 ...

在这个区域，我们创建一个切片 .... 可以再放大一点 ... 然后调整一下切片的大小和位置 ...

双击切片 ... 命名为 dashed-h

再找到垂直虚线 ... 在这个垂直虚线里的某个小竖线开始的地方 ... 到这个竖线后面的间隔结束的地方 ...

调整一下切片 ...

下面我们可以隐藏刚才这些切片图像下面的背景 ... 选择 选择工具 ... 勾选一下 自动选择 ... 然后点击 底部的背景 ...

这样可以选中这个图层 ...

然后把它暂时隐藏起来 ... 点一下左边这个眼睛的小图标 ...

再隐藏页面的这个白色的背景 .... 我们刚才创建的切片图像的下面会变成透明的 ... 这样导出来的切片图像也会是拥有透明的效果 ...

打开 文件 菜单，选择 存储为 Web 所用格式 ...

先放大一下 ... 然后选中刚才创建的切片 ... 把切片图像的格式都设置为 PNG-24 ，这种格式的图像会保留透明的效果 ...

然后点击 存储 ... 位置选择桌面 ... 切片 选择 所有用户的切片 ... 点击 存储 ...

回到桌面 ... 打开 images 目录 ... 我们把生成的切片图像都放在网页目录下面的 images 文件夹里 ...

下面视频我们使用这些切片图像作为背景，来完成底部边栏的设计。