Cha18 项目指导——制作鲜花网站[精品].ppt

通过Photoshop、Flash两个软件的制作，我们已经将网站中需要用到的元素已经制作完成，下面我们将在Dreamweaver中，通过创建表格，添加行为，添加表单等操作来完善鲜花网站，首先观察一下鲜花网站完成后的效果，如图18.80所示。 18.3 制作鲜花网站 图18.80 最终效果 * (1) 启动Dreamweaver CC软件，在菜单栏中选择【文件】|【新建】命令，打开【新建文档】对话框，选择【空白页】，在【页面类型】下选择【HTML】选项，在【布局】下选择【无】选项，如图18.81所示。 (2) 设置完成后单击【创建】按钮，即可创建一个空白的文档，在【属性】面板中单击【页面属性】按钮，在【分类】选项下选择【外观CSS】选项，将【左边距】和【右边距】均设置为5px，如图18.82所示。 (3) 【外观HTML】选项，单击【背景图像】右侧的【浏览】按钮，在弹出的对话框中选择随书附带光盘中的CDROM\素材\Cha18\背景.jpg素材文件，如图18.83所示。 图18.81 【新建文档】对话框 图18.82 设置边距 图18.83 设置背景 18.3 制作鲜花网站 * (4) 设置完成后单击【确定】按钮，插入一个1行1列，宽度为99%，其他均为0的单元格，如图18.84所示。 (5) 将光标置于插入的单元格中，单击Enter键，将光标置于第一行中，再次插入一个1行2列，表格宽度为100%的表格，如图18.85所示。 (6) 将光标置于左侧的单元格中，在【属性】面板中将【宽度】设置为30%，按Ctrl+Alt+I组合键，在弹出的对话框中选择【网站logo.png】素材文件，如图18.86所示。 图18.84 插入表格 图18.85 插入嵌套表格 图18.86 选择素材 18.3 制作鲜花网站 * (7) 单击【确定】按钮，即可将其插入到表格中，在【属性】面板中锁定尺寸约束，将【宽】设置为265px，如图18.87所示。 (8) 将光标置于右侧的单元格中，在【属性】面板中将【垂直】设置为【基线】，在该单元格中插入一个2行1列，表格宽度为100%，单元格间距为5的表格，如图18.88所示。 (9) 将光标置于第1行单元格中，在【属性】面板中将【水平】设置为【右对齐】，插入【搜索.png】素材文件，并在【属性】面板中将其大小设置为380px×32px，如图18.89所示。 图18.87 设置图像大小 图18.88 插入嵌套表格 图18.89 设置图像大小 18.3 制作鲜花网站 * (10) 使用同样的方法，将光标置于第2行单元格中，并输入相应的文字信息，选择输入的文字，在【属性】面板中将【颜色】设置为#F93，将【水平】设置为右对齐，如图18.90所示。 (11) 将光标置于表格的下方，插入一个1行8列，表格宽度为99%，其他均为0的单元格，如图18.91所示。 (12) 选择8列单元格，在【属性】面板中将【水平】设置为【居中对齐】，将光标置于第一个单元格中，插入【首页1.jpg】素材文件，在【属性】面板中将【宽】、【高】分别设置为124px、29px，如图18.92所示。 图18.90 设置文字属性 图18.91 插入表格 图18.92 添加素材并设置属性 18.3 制作鲜花网站 * (13) 使用同样的方法，添加其他的素材并设置属性，完成后的效果如图18.93所示。 图18.93 完成后的效果 (14) 选择首先插入的【首页1.jpg】图像，在菜单栏中选择【窗口】|【行为】命令。打开【行为】面板，单击【添加行为】 按钮，在弹出的下拉列表中选择【交换图像】选项，如图18.94所示。 (15) 打开【交换图像】对话框，单击【设定原始档】右侧的【浏览】按钮，在弹出的对话框中选择【首页2.jpg】素材文件，如图18.95所示。 图18.94 选择【导出影片】命令 图18.95 【导出影片】对话框 图18.94 选择【导出影片】命令 图18.95 【导出影片】对话框 18.3 制作鲜花网站 * (16) 单击【确定】按钮，即可将其添加至【交换图像】对话框中，如图18.96所示。并使用同样的方法为其他的图像添加行为。 (17) 将光标置于单元格的下侧，插入一个1行2列，表格宽度为100%的表格，如图18.97所示。 (18) 将光标置于左侧的单元格中，在【属性】面板中将【宽】设置为20%，将右侧的【宽】设置为80%，插入【网站组合图像.jpg】素材文件，并在【属性】面板中设