项目9 使用布局模式布局页面.pptVIP

* 项目九 使用布局模式布局页面 情 境 设 置 前面大家学习了使用表格布局页 面，知道表格是布局页面的好工具，为 此，若采用表格布局页面，Dreamweaver 还专门提供了更加简捷的方式，就是 Dreamweaver的布局模式，在这种模式 下，网页设计者可以更加方便的使用表格 来布局页面。 项 目 展 示 本项目完成后的大体效果如下。（不要求大家做的和样张完全一样，但要尽量模仿） 项 目 目 标 能了解布局表格和布局单元格 能绘制布局表格 能绘制布局单元格 能移动布局单元格 能调整布局表格和布局单元格的大小 能设置布局表格和布局单元格的属性 能绘制嵌套布局表格 项 目 分 析 具体工作任务： 创建一个网站，主题为“落雪的个人网站”。 切换到布局模式。 运用表格的布局模式布局网页。 在布局单元格中插入相应的网页元素。 对布局表格和布局单元格进行相应的属性设置来调整页面效果。 实 施 步 骤 步骤一：新建站点并建立网页 步骤二：运用表格的布局模式布局页面 点击插入工具栏中【常用】按钮，选择【布局】选项，切换到【布局】插入工具面板,单击 【布局】按钮进入布局模式。 实 施 步 骤 1.创建一个宽度为780像素的布局表格，在布局表格中再绘制6个布局单元格，在每个单元格中插入相应图片，如下图所示： 实 施 步 骤 2.创建一个布局表格，在布局表格中再绘制2个布局单元格，在每个单元格中插入相应图片，如下图所示： 实 施 步 骤 3.创建一个布局表格，在布局表格中再绘制3个布局单元格，在每个单元格中插入相应图片，如下图所示： 步骤五：保存文件，预览最终效果。 知 识 链 接 一、移动和调整 注意：布局单元格的大小不能超出它所在的布局表格的大小。布局单元格必须在布局表格中绘制，若没有绘制布局表格直接绘制布局单元格，那么系统默认当前整个编辑窗口就是一个布局表格。 移动布局表格和布局单元格：用鼠标拖动其边框，实现移 动 。 调整布局表格和布局单元格：选中对象后，将鼠标指针移动到边角的控制点，根据具体箭头方向调整大小。 知 识 链 接 二、创建嵌套布局表格 大多数网页使用嵌套布局表格的布局方法。 创建嵌套布局表格：是指一个布局表格中再绘制另一个布局表格。但是，用户不能在布局单元格中再创建布局表格。 知 识 链 接 三、设置布局表格属性 可以使用布局表格属性面板进行设置属性 四、设置布局单元格属性 可以使用布局表格属性面板进行设置属性 知 识 拓 展 项目展示 知 识 拓 展 制作要点提示 创建站点并建立网页 使用表格的布局模式布局页面，创建合理的布局表格并绘制相应的布局单元格 在相应的布局单元格中插入相应的图片 保存文件，并预览最终效果 小 结 本项目中主要介绍了布局表格和布局 单元格的相关知识，以及具体怎样在布局模 式下进行规划页面，熟练、灵活地进行相应 的调整。