第16课 站制作实例.ppt

《第16课 站制作实例.ppt》由会员分享，可在线阅读，更多相关《第16课 站制作实例.ppt（23页珍藏版）》请在麦多课文档分享上搜索。

1、第16课 网站制作实例,课前导读 课堂讲解 上机实战 课后练习,课堂讲解,浏览“女性饰品”网站 制作分析,本课将利用前面所学的知识，构建一个名为“女性饰品”的网站。本网站是一个介绍女性饰品的商业网站，包含页面较多，本课只详细讲解3个页面的制作，包括“首页”、“网上展示”和一个模板文档，其他页面可参照本课介绍的方法进行制作。另外，作为一个专业的商业网站，还会处理许多数据，即需要编写后台处理程序才能使整个网站正常运行，正常实现各种数据处理的功能。本课时只讲解静态页面的制作，后台处理程序的制作请读者参考相关书籍。,浏览“女性饰品”网站,如图所示是“女性饰品”网站的模板文档。在模板文档中，上部为网站的

2、标识区和导航区；左侧为会员登录和产品分类列表，访问者单击产品分类列表中的某个项目后，会在右侧的窗口中显示相应的内容；底部是版权信息区，这3个部分在整个网站中都是统一的，故设置为不可编辑区域，中间部分设置为可编辑区域，显示各页面的主页面。,如图所示是“女性饰品网”网站的首页，即主页，在可编辑区域中设置了“特别推荐”、“最新上市”和“热卖排行”3个栏目。,如图所示是“女性饰品网”的“网上展示”页面，该页面是在单击左侧分类列表中的“项链”项后打开的页面。,制作分析,在制作本网站前应先在电脑中创建一个名为f16的文件夹，然后在该文件夹中再创建一个名为img的文件夹，img文件夹用于保存网站中所有用到的

3、图像。 制作本例时，先新建一个名为“女性饰品网”的站点，并保存在f16文件夹中，然后在站点窗口中新建一个名为moban.dwt的模板文档，通过该模板创建index.htm（首页）、list.htm（“网上展示”页面）。,上机实战,创建“女性饰品网”的模板文档 创建“女性饰品网”首页页面 制作“网上展示”页面,本课上机实战将分为3个部分制作：一是创建模板文档，二是创建首页页面，三是创建展示页面。,创建“女性饰品网”的模板文档,新建模板文档应先建立空白模板文档，然后再进行编辑。这里先创建名为moban.dwt的空白模板文档。,创建空白模板文档 编辑模板,创建空白模板文档,空白模板创建后的效果如图所

4、示。,编辑模板,下面对新建的空白模板文档进行编辑，其编辑过程分为添加顶部页面内容、左侧页面内容、底部页面内容、编辑可编辑区域及保存模板等操作，下面分别讲解。,添加顶部页面内容 添加左侧页面内容 添加底部页面内容 保存模板文档,添加顶部页面内容,添加底部页面内容,添加左侧页面内容,左侧页面为会员登录和产品分类列表区， 其中会员登录部分 的效果如图所示。,添加底部页面内容,底部面面的效果如图所示。,保存模板文档,按【Ctrl+S】键或选择文件保存菜单命令保存该模板文档。,创建“女性饰品网”首页页面,下面通过刚才新建的模板文档moban.dwt创建“女性饰品网”的首页页面。,第1个表格的创建 第2个

5、表格的创建 预览并保存文档,第1个表格的创建,第1个表格创建后的效果如图所示。,第2个表格的创建,在第1个表格的下方创建1行3列的表格，在左侧的单元格中需再创建7行4列的表格，在右侧单元格中创建4行1列的表格，中间的单元格不进行任何设置。下面分别对这两个单元格的创建进行讲解。,第1个单元格的创建 第2个单元格的创建,第1个单元格的创建,第1个单元格创建后的效果如图所示。,第2个单元格的创建,第2个单元格创建后的效果如图所示。,预览并保存文档,完成“女性饰品网”的首页页面的制作后，按【F12】键进行预览，接下来，按【Ctrl+S】键对首页页面进行保存。,制作“网上展示”页面,参照16.2.2节中的第1部分，通过模板文档（moban.dwt）创建一新的空白页面，另存为list.htm，对该新建的文档进行编辑 。,