15.3制作页脚（课件）-高二《网页设计与制作》同步教学（人民邮电版）

任务三 制作页脚 （一） 制作导航图像 【操作步骤】 1.在菜单栏中选择【文件】／【新建】命令，打开【新建】对话框，参数设置如图所示，然后将其保存为“nav.psd”。 2.在工具箱中单击（渐变工具）按钮，然后设置工具属性，其中颜色条左端色标的颜色为“#1ab58f”，右端色标的颜色为“#ffffff”，如图所示。 3.按住鼠标左键不放，在文档窗口中从左向右拖动鼠标光标，如图所示 。 4.释放鼠标左键，在文档窗口中形成了渐变效果，如图所示。 5.在【图层】面板中新建一个图层，然后在工具箱中单击（横排文字工具）按钮，并设置工具属性，其中颜色为白色，如图所示。 6.在文档窗口中输入文本，按Ctrl+Enter键确认，并适当调整其位置，如图所示。 7.保证在【图层】面板中选中文字图层，然后在菜单栏中选择【图层】／【图层样式】／【描边】命令，打开【图层样式】对话框，描边参数设置如图所示，其中描边颜色为“#857e06”。 8.在【图层样式】对话框中切换到【投影】样式，设置参数如图所示。 9.单击 按钮，最终效果如图所示。保存文档。 10.在工具箱中单击 （切片工具）按钮，并在工具属性栏中设置属性参数，然后按照图所示对图像进行切割。 11.在菜单栏中选择【文件】／【存储为Web和设备所用格式】命令，打开【存储为Web和设备所用格式】对话框，单击 按钮，将接着打开【将优化结果存储为】对话框，如图所示。 12.在【保存类型】下拉列表中选择【仅限图像（*.gif）】选项，然后单击按钮进行保存。 13.打开保存图像的文件夹，系统在该文件夹下创建了一个“images”文件夹，其中保存了切割的图像文件“nav_01.gif”～“nav_05.gif”，如图所示。 （二） 布局页脚 【操作步骤】 1.将图像文件“nav_01.gif”～“nav_05.gif”复制粘贴到站点根目录的“images”文件夹中。 2.在主体页面表格下插入一个1行7列的表格，属性设置如图所示。 3.从左至右设置7个单元格的宽度分别为“30”、“108”、“107”、“108”、“109”、“118”、“200”。 4.从第2个单元格开始，依次插入图像“nav_01.gif”、“nav_02.gif”、“nav_03.gif”、“nav_04.gif”、“nav_05.gif”，并添加空链接，如图所示。 5.在表格下继续插入一个1行2列的表格，属性设置如图所示。 6.设置第1个单元格的宽度为“30”，第2个单元格的水平对齐方式为“左对齐”，然后输入文本，如图所示。最后保存文件。至此，整个网页就制作完了。 $