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

《第7章 网站开发的流程及应用ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1第7章网站的开发流程及应用2本章目标掌握网站的策划方法掌握制作模板和网页的流程以及相关的操作技巧掌握制作网站首页和子网页的流程，以及修改模板的CSS样式表、美化网站首页、从模板中创建子网页等相关的操作技巧掌握测试及上传网站的相关的操作技巧37.1网站策划与模板制作7.1.1准备网页素材7.1.2设置页面属性7.1.3制作网页模板7.1.4另存为模板文件7.1.5创建可编辑区域7.1.6从模板中创建首页47.1.1准备网页素材1.新建文件夹在【文件】控制面板中，右键单击选择本地站点【HTML】文件夹则会弹出其快

2、捷菜单，从中选择【新建文件夹】命令则可在【HTML】文件夹中建立一个子文件夹，然后把该文件夹的名称命名为【070102】，使用同样的方法在该文件夹中再分别建立HTML和PIC两个子文件夹。2.复制图片到PIC文件夹可以把本节所需要的各种图片文件和Flash动画文件等复制到本地站点中的【HTML/070102/PIC】文件夹中。51.新建HTML网页单击【标准】工具栏中的【新建】按钮（或者按【Ctrl+N】组合键）建立一个新的空白网页文件。暂时不要保存当前的网页文件。2.设置页面属性单击【修改】→【页面属性】命令

3、（或者按【Ctrl+J】组合键）打开【页面属性】对话框。在该对话框中分别设置【外观】、【链接】、【标题/编码】等选项的相应参数。7.1.2设置页面属性61.插入表格单击【常用】工具栏中的【表格】按钮弹出【表格】对话框，从中设置【行数】为1、【列数】为9、【表格宽度】为980像素。2.修改表格属性单击选择该表格，然后在【属性】面板中设置该表格的高度为【25像素】、对齐为【居中对齐】，使当前的表格在整个网页中水平居中对齐，参数设置如图7-8所示。图7-87.1.3制作网页模板73.设置每个单元格的宽度在第一个单元格

4、单击鼠标左键，然后在【属性】面板中设置当前单元格的宽度为170像素。使用相同的方法分别设置每个单元格的宽度。4.插入图片在第一个单元格单击鼠标左键，然后单击【常用】工具栏中的插入【图像】按钮弹出【选择图像源文件】对话框，选择图片。5.设置背景并输入文字在第三个单元格内单击鼠标左键，然后在其【属性】面板中的【背景】位置单击【单元格背景URL】按钮弹出【选择图像源文件】对话框，单击选择本地站点【HTML/070102/PIC】文件夹中一个图像文件，其它单元格使用相同的方法设置。86.插入第二个表格确定当前的光标位于

5、第一个表格的末尾处，然后单击【常用】工具栏中的【表格】按钮弹出对话框，从中设置【行数】为1、【列数】为3、【表格宽度】为980。7.修改第二个表格和单元格的属性单击选择该表格，然后在【属性】面板中设置该表格的高度为【66像素】、对齐为【居中对齐】、背景颜色为【#0099FF】（蓝色）。8.插入图片和Flash动画在第一个单元格内单击鼠标左键，然后单击【常用】工具栏中的插入【图像】按钮弹出【选择文件】对话框。在本地站点【HTML70102PIC】文件夹中单击选logoa.gif图片文件，并将其插入到当前的单

6、元格中，在第二个单元格内单击鼠标左键，然后单击【常用】工具栏中的插入【媒体：Flash】按钮弹出【选择文件】对话框。99.插入小表格按照前面的方法，在当前表格的第三个单元格中插入一个3行4列的表格，并设置整个表格的宽度为【100%】、高度为【60像素】、背景为【#FFFFFF】（白色）。完成各项设置之后的效果如图7-17所示。10.在小表格内插入图片和输入文字该小表格的第一列中都插入同一个图片（arrow3.gif），在该小表格的第三列中分别插入3个图片（bookmark.gif、Favorites.gif、h

7、omepage.gif），在该小表格的第二列和每四列中分别输入相应的文字内容。效果如图7-18所示。图7-17图7-181011.设置超链接可以把小表格内的相应文字设置为相应的超链接.12.插入第四个表格并设置其属性然后单击【常用】工具栏中的【表格】按钮弹出【表格】对话框，从中设置【行数】为2、【列数】为7、【表格宽度】为980像素。选择整个表格，然后在其【属性】面板中设置该表格的高度为【40像素】、对齐为【居中对齐】、背景颜色为【#FFFFCC】（浅黄色），如图7-22所示。图7-221113.插入图片并输入

8、字符在第四个表格的第一列单元格中分别插入d_downl.gif图片，然后在该表格的每个单元格中输入相应的文字字符。按照实际制作的要求，给每个单元格中的文字指定相应的超链接。14.制作当前位置的表格定位光标到最后一个单元格插入一个1行1列、宽度为980像素、高度为40像素的表格。然后在当前的表格中插入【d_1.gif】图片文件，输入文字【当前位置：】，并设置单元格的背景图像为【qback