下面我们来实施页脚部分的设计 ... 首先我们要创建一个页脚部分需要的背景图像切片 ... 在工具栏上选择 切片工具 ...
然后放大显示这部分设计 ... 从虚线的开始部分，一直到设计的最底部 ... 这一块作为页脚部分的背景，可以让它水平重复显示 ... 调整一下切片的大小和位置 ... 这个切片可以包含几个虚线 ... 不过要注意切片结束的位置一定要是虚线间隔的最后 ...
这样在背景重复显示的时候看起来才会完整 ...
双击切片 ... 命名为 emerald-footer ...
打开 文件 菜单 ... 选择 存储为 Web 所用格式 ... 选中刚才创建的切片 ... 设计切片图像的格式为 PNG-8 ... 然后点击 存储 ...
位置选择 桌面 ... 切片 选择 选中的切片 ... 再点击 存储 ...
回到桌面 ... 打开 images 目录 .... 把里面的切片图像放在网页目录下面的 images 文件夹里 ...
代码结构
回到网页的代码模式，在底部边栏结束的位置 ... 另起一行 ... 页脚内容可以使用 <footer> 标签 ... 先输入一组 <footer> ...
在上面定义一个 id， id="footer" ...
再它的里面输入一组 <div> 标签 ... 添加一个 bootstrap 的布局类 ， class="container" ...
在这里 <div> 标签里，我们可以直接输入页脚内容 ... © 2013 凤凰社 ...
页脚样式
下面给这块内容添加点样式，打开网页的样式表 ... 输入一点注释 ... /* 页脚部分的样式 */
然后使用 #footer 作为样式选择器 ... 定义一下页脚的背景... 先回到设计图复制一下页脚部分的背景颜色 ... 粘贴过来
#footer{background:url(images/emerald-footer.png) repeat-x #097a5f}
添加点内边距 ... padding:30px 0 20px 0
然后给页脚里的内容再添加点样式 ... 回到设计图 ... 复制一下页脚内容的文字颜色 ...
回到样式表，输入 color:#064536 ，再给页脚上的文字添加个阴影的效果 ... text-shadow:1px 1px 1px #008F6D ...
回到设计图，看一下阴影的颜色 ... 复制一下 ...
粘贴过来 ...
现在我们就完成了页脚部分的设计。
