表格模板-任务五 布局技术表格 精品.ppt

《表格模板-任务五 布局技术表格 精品.ppt》由会员分享，可在线阅读，更多相关《表格模板-任务五 布局技术表格 精品.ppt（21页珍藏版）》请在第一文库网上搜索。

1、项目三 布局技术Dreamweaver CS3 项目教程项目三 布局技术任务五 布局技术之一表格 技能目标熟练运用表格掌握页面布局技术。能够通过表格的定位使页面的布局更加合理、美观。 知识目标熟练掌握表格的添加与编辑。掌握表格中操作行和列的方法。掌握单元格的拆分与合并方法。掌握在表格中输入文字、图像并定位的方法。掌握嵌套表格的用法。掌握切换视图的操作方法。掌握布局表格、单元格的绘制与属性设置方法。项目三 布局技术任务五 布局技术之一表格 3.1.1 使用表格搭建页面 3.1.2 问题探究认识表格3.1.3 知识拓展布局模式和扩展表格模式项目三 布局技术任务五 表格构建任务工作任务 利用表格搭建

2、页面时，应先规划好页面中各元素的具体位置，通过表格将这些区域划分出来，在单元格中插入元素后，再仔细调整各单元格的大小、位置，使页面各个元素的所在位置与实际需要相符。通过该任务的实施，用户能够灵活利用表格的背景、框线等属性设置，掌握使用表格准确定位页面元素的排版技术，创建布局更加合理、美观的网页效果。 项目三 布局技术任务五 表格构建任务工作流程1. 在站点中新建一个页面并保存。2. 在网页中插入一张表格。3. 合并单元格。4. 为单元格设置背景色5. 根据布局需要插入嵌套表格。6. 在指定位置插入图片和文字。7. 根据页面的布局调整图片大小。8. 为文字设置相关属性。9. 为表格内文字建立超链

3、接。项目三 布局技术任务五 表格构建任务网页预览效果项目三 布局技术任务五 表格-问题探究 传统的网页设计一般会根据用户要求，考虑好主色调、图片、字体、颜色后，再用Photoshop等制图软件自由的画出来，最后切成小图，再通过表格的定位来排版这些元素，从而设计整个网页页面。一般表格边框宽度设为0，有时设置了边框反而会影响页面的显示效果。最好将表格的宽度设置为以像素为单位，这样当浏览器的窗口大小改变时，表格不会因此而改变，真正起到定位的作用。 项目三 布局技术任务五 表格-问题探究表格的组成元素 表格由边框、行、列、单元格组成。整张表格的边缘称为边框，水平方向的一组单元格称为行，垂直方向的一组单

4、元格称为列，行列交叉部分就称为单元格，单元格中的内容和边框之间的距离称为边距，单元格和单元格之间的距离称为间距。如图3-1所示。行列单元格边框间距边距。图3-1 表格示意图行列单元格边框间距边距项目三 布局技术任务五 表格-问题探究 插入表格新建一张页面，在设计视图将插入点放在需要表格出现的位置。 若文档是空白的，则插入点自动置于文档的起始处。选择“插入记录/表格”命令， 或在“插入”栏的“常用”类别 中单击“表格”按钮，弹出如 图3-2所示的“表格”对话框。图3-2 插入表格对话框 项目三 布局技术任务五 表格-问题探究设置表格及单元格属性 在设计视图中表格的属性设置有三种：表格整体设置、行

5、和列设置和单元格设置。表格格式设置的优先顺序为单元格、行列、表格。1.设置表格属性：在表格的外框单击，就可以选中整个表格，在属性面板可以为选中表格进行属性设置。如图3-4所示。图3-4 表格属性面板 项目三 布局技术任务五 表格-问题探究2.设置单元格属性 表格的基本组成元素是单元格，单元格组成行或列，再由行与列一起组成完整表格。在单元格内单击鼠标左键，在属性面板上会显示当前单元格的属性，如图3-6所示。如果遇到单元格宽度与列宽冲突时，以单元格宽度为准，但必须保证该行所有单元格宽度之和与表格整体宽度相等。图3-6 单元格属性面板项目三 布局技术任务五 表格-问题探究3.设置行、列属性 除对表格

6、进行整体设置外，还可分别对表格的某行（某几行）或某列（或某几列）进行设置。将鼠标移至目标行的行首，当光标变为“ ”状态时，单击鼠标左键选中该行；将鼠标移至目标列的顶部，当光标变为“ ”状态时，单击鼠标左键选中该列。属性面板自动切换到行（列）状态。如图3-7所示。图3-7 表格行（列）属性面板 项目三 布局技术任务五 表格-问题探究4.编辑调整表格 在插入表格时，如果对表格的行数、列数和样式没有确切的预计，可以根据需要对表格进行编辑。添加行和列删除行和列合并/拆分单元格项目三 布局技术任务五 表格-问题探究5.嵌套表格n嵌套表格在现有的单元格或表格内插入一个表格，插入表格的大小受所在单元格大小的

7、限制。网页的排版有时会很复杂，通过一个表格控制页面的总体布局，如果一些内部元素也通过总表来实现排版细节的话，很容易引起行高或列宽的冲突；浏览器在解析网页时，下载完整个表格的结构后才显示表格，通常浏览者需等待很长才能看到网页内容。n嵌套表格的使用使页面布局更加灵活，外部父表格控制页面的整体布局，嵌套表格负责各子栏目的排版，互不干扰。项目三 布局技术任务五 表格-问题探究需要注意的是：n表格可以无限制的多层嵌套，但嵌套层数越多浏览器解析的速度就越慢，访问者等待时间就越久，通常情况下，表格嵌套深度不超过三层。n嵌套表格会对父表格产生一定影响，当嵌套表格宽度大于所在父表格单元格的宽度时，父表格的单元格

8、将会自动调整；如果嵌套表格过大，甚至会增加整个父表格的大小。因此在使用嵌套表格时为了保持在不同分辨率下的外观结构，父表格的宽度和高度一般使用像素值，而嵌套表格一般使用百分比。项目三 布局技术任务五 表格-知识拓展 页面布局是网页设计中最基本、最重要的工作之一，Dreamweaver CS3提供了一种非常方便的布局工具布局表格。在“布局”模式下，可以直接在页面上绘制布局表格和单元格，使得繁琐的页面布局变得轻松自如。1. 布局模式 在进行网页布局时，经常会在一个布局表格中使用多个布局单元格；也可以使用多个布局表格将页面隔离成多个部分，这样它们就不会相互影响；还可以在现有布局表格中进行布局表格嵌套。

9、2. 扩展表格模式 当嵌套表格过多时，为了方便观察和布局，使用扩展表格模式使表格的编辑更容易。项目三 布局技术任务五 表格-知识拓展布局模式-绘制布局表格 在“布局”模式下，可以在页面上绘制布局表格和单元格，包括嵌套在其他表格中的表格。绘制表格和绘制单元格变成了各自独立的操作。如果绘制的布局单元格不在布局表格中，Dreamweaver CS自动创建一个布局表格作为该单元格的容器，布局单元格不能存放在布局表格之外，靠齐网格有助于对齐单元格。图 新建布局表格项目三 布局技术任务五 表格-知识拓展布局模式-绘制布局表格 在布局模式下，单击菜单栏中的“插入记录/布局对象/布局单元格”，或单击布局选项卡

10、上的“绘制布局单元格”按钮，此时鼠标指针变为“十”字形状。然后将鼠标置于页面上需要绘制单元格的位置，拖动鼠标绘制布局单元格，如图3-17所示。 图 新建布局单元格 项目三 布局技术任务五 表格-知识拓展布局模式-为布局单元格添加内容 布局表格创建后，表格以灰色填充，表示该区域不能插入内容，因此必须在表格中创建布局单元格后，才能在布局单元中插入文本、图像或媒体等内容。当添加宽度或高度大于布局单元格的内容时，该单元格将自动扩展，这可能会改变周围单元格的大小。该列的列宽变为显示代码中出现的宽度，后面的括号中是该列的可视宽度（屏幕上显示的宽度）。 图 新建布局表格项目三 布局技术任务五 表格-知识拓展扩展表格模式嵌套表格过多时，为了方便观察和布局，使用扩展表格模式使表格的编辑更容易。执行“查看/表格模式/扩展表格模式”命令（快捷键F6），或单击“插入”面板“布局”选项卡下的按钮，此时便可以清楚地看出表格的嵌套关系，在“文档”窗口的顶部会出现标有“扩展表格模式”状态条 。 图 “扩展表格模式”显示表格 本文由麦茜茜导购网提供，技术交流联系站长QQ：997278085 项目三 布局技术