第7章 网站开发的流程及应用.ppt

1 第7章 网站的开发流程及应用 2 本章目标 掌握网站的策划方法 掌握制作模板和网页的流程以及相关的操作技巧 掌握制作网站首页和子网页的流程，以及修改模板的CSS样式表、美化网站首页、从模板中创建子网页等相关的操作技巧 掌握测试及上传网站的相关的操作技巧 3 7.1 网站策划与模板制作 7.1.1　准备网页素材 7.1.2　设置页面属性 7.1.3 制作网页模板 7.1.4 另存为模板文件 7.1.5 创建可编辑区域 7.1.6 从模板中创建首页 4 7.1.1 准备网页素材 1. 新建文件夹 在【文件】控制面板中，右键单击选择本地站点【HTML】文件夹则会弹出其快捷菜单，从中选择【新建文件夹】命令则可在【HTML】文件夹中建立一个子文件夹，然后把该文件夹的名称命名为【070102】，使用同样的方法在该文件夹中再分别建立HTML和PIC两个子文件夹。 2. 复制图片到PIC文件夹 可以把本节所需要的各种图片文件和Flash动画文件等复制到本地站点中的【HTML/070102/PIC】文件夹中。 5 1. 新建HTML网页 单击【标准】工具栏中的【新建】按钮（或者按【Ctrl+ N】组合键）建立一个新的空白网页文件。暂时不要保存当前的网页文件。 2. 设置页面属性 单击【修改】→【页面属性】命令（或者按【Ctrl+ J】组合键）打开【页面属性】对话框。在该对话框中分别设置【外观】、【链接】、【标题/编码】等选项的相应参数。 7.1.2 设置页面属性 6 1. 插入表格 单击【常用】工具栏中的【表格】按钮弹出【表格】对话框，从中设置【行数】为1、【列数】为9、【表格宽度】为980像素。 2. 修改表格属性 单击选择该表格，然后在【属性】面板中设置该表格的高度为【25像素】、对齐为【居中对齐】，使当前的表格在整个网页中水平居中对齐，参数设置如图7-8所示。 图7-8 7.1.3 制作网页模板 7 3. 设置每个单元格的宽度 在第一个单元格单击鼠标左键，然后在【属性】面板中设置当前单元格的宽度为170像素。使用相同的方法分别设置每个单元格的宽度。 4. 插入图片 在第一个单元格单击鼠标左键，然后单击【常用】工具栏中的插入【图像】按钮弹出【选择图像源文件】对话框， 选择图片。 5. 设置背景并输入文字 在第三个单元格内单击鼠标左键，然后在其【属性】面板中的【背景】位置单击【单元格背景URL】按钮弹出【选择图像源文件】对话框，单击选择本地站点【HTML / 070102 / PIC】文件夹中一个图像文件， 其它单元格使用相同的方法设置。 8 6. 插入第二个表格 确定当前的光标位于第一个表格的末尾处，然后单击【常用】工具栏中的【表格】按钮 弹出对话框，从中设置【行数】为1、【列数】为3、【表格宽度】为980。 7. 修改第二个表格和单元格的属性 单击选择该表格，然后在【属性】面板中设置该表格的高度为【66像素】、对齐为【居中对齐】、背景颜色为【# 0099 FF】（蓝色）。 8. 插入图片和Flash动画 在第一个单元格内单击鼠标左键，然后单击【常用】工具栏中的插入【图像】按钮弹出【选择文件】对话框。在本地站点【HTML\070102\PIC】文件夹中单击选logoa.gif图片文件，并将其插入到当前的单元格中， 在第二个单元格内单击鼠标左键，然后单击【常用】工具栏中的插入【媒体：Flash】按钮弹出【选择文件】对话框。 9 9. 插入小表格 按照前面的方法，在当前表格的第三个单元格中插入一个3行4列的表格，并设置整个表格的宽度为【100%】、高度为【60像素】、背景为【#FFFFFF】（白色）。完成各项设置之后的效果如图7-17所示。 10. 在小表格内插入图片和输入文字 该小表格的第一列中都插入同一个图片（arrow3.gif），在该小表格的第三列中分别插入3个图片（bookmark.gif、Favorites.gif、homepage.gif），在该小表格的第二列和每四列中分别输入相应的文字内容。效果如图7-18所示。 图7-17 图7-18 10 11. 设置超链接 可以把小表格内的相应文字设置为相应的超链接. 12. 插入第四个表格并设置其属性 然后单击【常用】工具栏中的【表格】按钮弹出【表格】对话框，从中设置【行数】为2、【列数】为7、【表格宽度】为980像素。选择整个表格，然后在其【属性】面板中设置该表格的