项目九 Dreamweaver 布局表格和布局单元格课件.ppt

《项目九 Dreamweaver 布局表格和布局单元格课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、课程引导在制作网页之前，应该对网页进行布局，页面布局是网页设计中最基本、最重要的工作之一。Dreamweaver8提供了一个非常方便的布局工具：布局表格。使用布局表格，页面布局将变得轻松自如。明确知识技能目标（1）掌握切换视图的操作方法。（2）掌握绘制布局表格的操作方法（3）掌握绘制布局单元格、移动布局单元格的操作方法。（4）掌握调整布局表格大小和布局单元格大小的操作方法。（5）掌握布局表格和布局单元格的属性设置方法展示网页浏览效果分析操作任务（1）新建网页文档，设置页面属性。（2）使用布局表格和布局单元格绘制表格（3）设置表格及单元格属性（4）插入logo图片及其它图片

2、（5）设置细线表格效果（6）插入文字内容（7）创建连接知识讲解一、布局视图方式为了简化使用表格进行页面布局的过程，Dreamweaver8提供了布局视图。布局视图是网页设计中的一项重要内容，利用页面布局功能可以将原来繁琐的页面布局工作变得简单而轻松。知识讲解二、布局表格的基本操作1．切换到布局视图模式（1）在“插入”工具栏上，单击按钮，在下拉菜单中单击菜单项【布局】，切换到“布局”插入工具栏。（2）在“布局”插入工具栏中单击【布局】按钮，弹出“从布局模式开始”对话框，在该对话框单击【确定】按钮，即可进入布局视图模式。知识讲解2．绘制布局表格和布局单元格绘制布局表格的操作过

3、程如下：在“布局模式”中，单击“布局”插入工具栏中的【布局表格】按钮。或者单击菜单【插入】→【布局对象】→【布局表格】。当光标变成“+”形状时，在绘制表格的区域，按住鼠标左键并拖动。拖到合适的位置释放鼠标，在编辑窗口中就会出现一个布局表格知识讲解绘制布局单元格的操作过程如下：单击“布局”插入工具栏中的【绘制布局单元格】按钮。或者单击菜单【插入】→【布局对象】→【布局单元格】。在编辑窗口中光标变成“+”形状时，在要绘制单元格的位置，按住鼠标左键并拖动。拖动到合适的位置释放鼠标，在布局表格中就会出现一个布局单元格。知识讲解3．选择布局表格和布局单元格（1）选择布局表格用鼠标单

4、击布局表格的标签或者布局表格内部的灰色区域，该布局表格的右边线中点和右下顶点会出现小正方形的控制点。（2）选择布局单元格顶点和四条边的中点会出现8个小正方形的控制点。也可以按住“Ctrl”键后，在单元格的任意位置单击鼠标左键，选中布局单元格。知识讲解4.调整布局表格和布局单元格的尺寸（1）调整布局表格的尺寸选中布局表格。光标移动到右下顶点，光标变成斜双箭头形状时，按住鼠标左键且拖动，可以改变布局表格的宽度和高度。光标移动到右边中点，光标变成水平方向的双箭头形状时，按住鼠标左键且拖动，可以改变布局表格的宽度。知识讲解（2）调整布局单元格的尺寸选中布局单元格。将光标移动到控制

5、点，根据箭头方向拖动鼠标可以调整布局单元格的大小。知识讲解5.移动布局单元格移动布局单元格的方法是：将鼠标指针移动到布局单元格边框线上，鼠标指针变成形状时，按住鼠标左键且拖动鼠标，移到合适的位置时释放鼠标键，即可完成移动操作。知识讲解6．设置布局表格和布局单元格的属性（1）设置布局表格的属性选中布局表格，属性面板中显示对应布局表格的属性。（2）设置布局单元格的属性选中一个布局单元格，属性面板中显示对应布局单元格的属性。课堂实践1．在“插入”面板的“布局”工具组中,按“布局”,出现“布局”模式课堂实践进入布局模式对话框课堂实践2、布局表格的操作在“布局”工具中，单击“布局表

6、格”按钮，鼠标指针变为加号。课堂实践3、在“布局”工具中，单击“绘制布局单元格”按钮。鼠标指针变为加号。指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建布局单元格。课堂实践4、更根据提供的素材（6个图片和1个文本文件）制作如下效果图的网页，用布局模式制作。具体要求如下：布局表格宽=1054，高=590，背景=#22aabb，间距=20，填充=0；标题单元格宽=1054，高=40，背景=无，其内文字颜色为红，字号=36；6张图片单元格，宽=100，高=130，背景=无；6张文字解说单元格，宽=216，高=130，背景及文字颜色可自由设置，以清晰、美观为度，垂直对齐方

7、式=居顶，单元格内文字字号=9pt。“热门读物”单元格宽=260，高=480，背景=#CCFFFF，垂直对齐方式=顶端，其内文字/标题居中对齐，其他属性可自由设置，以美观为度。项目总结布局表格和布局单元格可以在页面上直接绘制一个或多个布局表格或布局单元格，并且可以任意拖动单元格。使用布局视图制作网页就像画画一样轻松。谢谢！