贵美商城商品布局详解：div+CSS与iframe在页面设计中的应用

在贵美商城PPT的第十章中，主要讨论了如何设计和实现商品展示页面的布局，包括商品分类列表页和商品具体介绍页。首先，制作商品具体介绍页时，会涉及到以下几个关键点： 1. 中间的空白处理：为了平衡页面布局，中间的空白区域被设计成左侧内容的右填充，通过设置宽度为350px来确保整体布局的清晰。 2. 背景元素：页面可能需要背景图，如`goodtitle_bg.gif`，并将其左偏移3px。背景的使用与否取决于设计需求，可能用于提供视觉效果或者强调某些部分。 3. 宽高和填充：在分析中间块时，如商品详情图区域，需要精确测量或定义其宽度和高度，可能采用表格布局（5行4列），宽度设定为container块的980px，高度可以根据内容动态调整或固定为643px。 4. 表格布局：在分类列表页，使用表格（table）进行数据规则展示，因为表格本身就是容器，可以直接替换div块#main，简化布局实现。 5. 局部布局：采用DIV+CSS布局，将页面划分为上、中、下三块，其中顶部和底部使用`iframe`标签来复用模板页，这有助于减少重复开发时间和保持网站风格一致性。 6. 页面模板的使用：制作网页模板是提高效率的重要手段，通过复用相同的代码段，可以快速适应不同的页面需求，如多个网页共享头部和底部元素，通过`iframe`实现模板化。 本章的主要任务是制作贵美商城的商品分类列表页和商品具体介绍页，目标是掌握使用HTML、CSS和Dreamweaver工具进行页面布局，并理解如何利用`<iframe>`标签和表格来构建网页模板。通过这些实践，学员将能够更好地理解网页设计原则和优化网站开发流程。