第16课 网站制作实例.pptVIP

第16课 网站制作实例 课堂讲解 浏览“女性饰品”网站 制作分析 本课将利用前面所学的知识，构建一个名为“女性饰品”的网站。本网站是一个介绍女性饰品的商业网站，包含页面较多，本课只详细讲解3个页面的制作，包括“首页”、“网上展示”和一个模板文档，其他页面可参照本课介绍的方法进行制作。另外，作为一个专业的商业网站，还会处理许多数据，即需要编写后台处理程序才能使整个网站正常运行，正常实现各种数据处理的功能。本课时只讲解静态页面的制作，后台处理程序的制作请读者参考相关书籍。 浏览“女性饰品”网站 如图所示是“女性饰品”网站的模板文档。在模板文档中，上部为网站的标识区和导航区；左侧为会员登录和产品分类列表，访问者单击产品分类列表中的某个项目后，会在右侧的窗口中显示相应的内容；底部是版权信息区，这3个部分在整个网站中都是统一的，故设置为不可编辑区域，中间部分设置为可编辑区域，显示各页面的主页面。 如图所示是“女性饰品网”网站的首页，即主页，在可编辑区域中设置了“特别推荐”、“最新上市”和“热卖排行”3个栏目。 如图所示是“女性饰品网”的“网上展示”页面，该页面是在单击左侧分类列表中的“项链”项后打开的页面。 制作分析 在制作本网站前应先在电脑中创建一个名为f16的文件夹，然后在该文件夹中再创建一个名为img的文件夹，img文件夹用于保存网站中所有用到的图像。 制作本例时，先新建一个名为“女性饰品网”的站点，并保存在f16文件夹中，然后在站点窗口中新建一个名为moban.dwt的模板文档，通过该模板创建index.htm（首页）、list.htm（“网上展示”页面）。 上机实战 创建“女性饰品网”的模板文档 创建“女性饰品网”首页页面 制作“网上展示”页面 创建“女性饰品网”的模板文档 新建模板文档应先建立空白模板文档，然后再进行编辑。这里先创建名为moban.dwt的空白模板文档。 创建空白模板文档 空白模板创建后的效果如图所示。 编辑模板 下面对新建的空白模板文档进行编辑，其编辑过程分为添加顶部页面内容、左侧页面内容、底部页面内容、编辑可编辑区域及保存模板等操作，下面分别讲解。 添加顶部页面内容 添加底部页面内容 添加左侧页面内容 左侧页面为会员登录和产品分类列表区， 其中会员登录部分 的效果如图所示。 添加底部页面内容 底部面面的效果如图所示。 保存模板文档 按【Ctrl+S】键或选择[文件]?[保存]菜单命令保存该模板文档。 创建“女性饰品网”首页页面 下面通过刚才新建的模板文档moban.dwt创建“女性饰品网”的首页页面。 第1个表格的创建 第1个表格创建后的效果如图所示。 第2个表格的创建 在第1个表格的下方创建1行3列的表格，在左侧的单元格中需再创建7行4列的表格，在右侧单元格中创建4行1列的表格，中间的单元格不进行任何设置。下面分别对这两个单元格的创建进行讲解。 第1个单元格的创建 第1个单元格创建后的效果如图所示。 第2个单元格的创建 第2个单元格创建后的效果如图所示。 预览并保存文档 完成“女性饰品网”的首页页面的制作后，按【F12】键进行预览，接下来，按【Ctrl+S】键对首页页面进行保存。 制作“网上展示”页面 参照16.2.2节中的第1部分，通过模板文档（moban.dwt）创建一新的空白页面，另存为list.htm，对该新建的文档进行编辑 。 向下 向上 末页 首页 《Dreamweaver MX 2004中文版短期培训教程》 调音 返回 零点 起飞电脑培训学校 结束 课前导读 课堂讲解 上机实战 课后练习 本课上机实战将分为3个部分制作：一是创建模板文档，二是创建首页页面，三是创建展示页面。 创建空白模板文档 编辑模板 添加顶部页面内容 添加左侧页面内容 添加底部页面内容 保存模板文档 第1个表格的创建 第2个表格的创建 预览并保存文档 第1个单元格的创建 第2个单元格的创建 向下 向上 末页 首页 《Dreamweaver MX 2004中文版短期培训教程》 调音 返回 零点 起飞电脑培训学校 结束