制作饰品网站全流程.docVIP

制作饰品网站 实施步骤 在学习了表格的基本知识后，下面通过为饰品网站主页构建布局来练习表格在实际网页制作中的应用。 1 ．构建网页整体结构 为使于读者学习和理解，我们将主页的布局分为两部分来讲 ，本节首先来构建网页的整体结构。 步骤 1 将“\素材与实例\素材”目录下的“adorning ”文件夹拷贝至本地磁盘。 步骤2 在Dreamweaver 中创建站点“adorning ，并在其中创建新文档．重命名为 index.html＂。 步骤3 双击“文件”面板中的文档“index.html ，在文档窗口中打开它。然后为其设置页面属性，如图5- 12 所示。 图5- 12 步骤4 在文档窗口中单击确定插入点，然后单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置“行数”为l , “列数”为3 , “表格宽度”为1000 像素，边框粗细、单元格边距和单元格间距均为0 ，如图5 一13 左图所示。 步骤 5“确定”按钮，插入一个1行3 列的表格，我们称该表格为表格1，如图5 一13右图所示。 图5 一13 步骤6在表格l 的第1个单元格中插入图片a_01．gif ，然后在图片右侧的空白区域单击，设置“水平”对齐方式为“左对齐”,如图5 一14所示。 步骤7 在表格l 的第3个单元格中插入图片a_03．gif ，设置其在单元格中的“水平”对齐方式为“右对齐”,如图5 一15 所示。 图5 一14 图5 一15 步骤8在表格l下方单击，插入插入一个1 行2 列，宽为1000像素，边框粗细、单元格边距和单元格间距均为0 的表格，我们称该表格为表格2 。 步骤9 选中表格2，单击“背景图像”编辑框右侧的“浏览文件”按钮，打开“选择图象源文件”对话框，在其中选择a_04 .gif 作为表格的背景图像，然后单击“确定”按钮，如图5-16 所示。 图5-16 步骤10 在表格2 的第2 个单元格中插入图像a_06.gif ，并设置其“水平”对齐方式为“右对齐”，如图5 一17 所示。 图5 一17 步骤11 在表格2 下方插入一个1行2 列，宽为1000 像素，边框粗细、单元格边距和单元格间距均为0 的表格，我们称该表格为表格3。 步骤12 在表格3 的两个单元格中分别插入图片a_07.gif 和a_08.gif ，如图5 - 18 所示。 图5 - 18 步骤13 在表格3 下方插入一个l 行4 列，宽为1000 像素，边框粗细、单元格边距和单元格间距均为0 的表格，我们称该表格为表格4 ，如图5 一19 所示。 图5 一19 步骤14 在表格4 下方插入一个1 行l 列，宽为1000像索，边框粗细．单元格边距和单元格间距均为0 的表格，称该表格为表格5。 步骤15 在表格5 的单元格中单击，然后在“属性”面板上“高”编拉框中输入“90 ,设置单元格高为90 像素，如图5 一20 所示。 图5 一20 步骤16 设置单元格“背景”为a _ 21.gif ，然后在其中输入文本，并设置文本的“水平”对齐方式为‘居中对齐”，如图5 一21 所示。 图5 一21 2 ．嵌套表格 所谓嵌套表格，就是在一个表格的某个单元格里插入一个新表格。我们看到的绝大多数网页都是由多个表格相互嵌套进行网页布局的。下面通过在前面制作的表格中嵌套表格来完成网站主页的布局。 步骤l 将插入点置于上节插入的表格4 第l 个单元格中，在“属性”面板上设置“垂直”对齐方式为“顶端”，然后在其中插入一个2 行l 列，宽为320 像素，边框粗细、单元格边距和单元格问距均为0 的表格，我们称该表格为“表格4-1 ，如图5 - 22 左图所示。 步骤2 在“表格4-1”的第1 行单元格中插入图片a_10.gif ，在第2 行单元格中输入文本，如图5 -22 右图所示。 图5 - 22 步骤3 打开“CSS样式”面板．单击面板下方的“ 附加外部样式”按钮，打开“链接外部样式表”对话框，并单击其中的“浏览”按钮，如图5 一23 左图所示。 步骤4 打开“选择样式表文件”对话框，在“查找范围”下拉列表中选择站点文件夹“adorning” ，在站点列表中选择已创建好的样式文件“s1.css ，之后单击“确定”按钮，如图5 一23 右图所示。 图5 一23 步骤 5拖动鼠标选中第2 行单元格中的文本，单击“属