任务五 布局技术表格

项目三布局技术DreamweaverCS3项目教程项目三布局技术任务五布局技术之一—表格•技能目标熟练运用表格掌握页面布局技术。能够通过表格的定位使页面的布局更加合理、美观。•知识目标熟练掌握表格的添加与编辑。掌握表格中操作行和列的方法。掌握单元格的拆分与合并方法。掌握在表格中输入文字、图像并定位的方法。掌握嵌套表格的用法。掌握切换视图的操作方法。掌握布局表格、单元格的绘制与属性设置方法。项目三布局技术任务五布局技术之一—表格3.1.1使用表格搭建页面3.1.2问题探究—认识表格3.1.3知识拓展—布局模式和扩展表格模式项目三布局技术任务五表格——构建任务工作任务利用表格搭建页面时，应先规划好页面中各元素的具体位置，通过表格将这些区域划分出来，在单元格中插入元素后，再仔细调整各单元格的大小、位置，使页面各个元素的所在位置与实际需要相符。通过该任务的实施，用户能够灵活利用表格的背景、框线等属性设置，掌握使用表格准确定位页面元素的排版技术，创建布局更加合理、美观的网页效果。项目三布局技术任务五表格——构建任务工作流程1.在站点中新建一个页面并保存。2.在网页中插入一张表格。3.合并单元格。4.为单元格设置背景色5.根据布局需要插入嵌套表格。6.在指定位置插入图片和文字。7.根据页面的布局调整图片大小。8.为文字设置相关属性。9.为表格内文字建立超链接。项目三布局技术任务五表格——构建任务网页预览效果项目三布局技术任务五表格-问题探究传统的网页设计一般会根据用户要求，考虑好主色调、图片、字体、颜色后，再用Photoshop等制图软件自由的画出来，最后切成小图，再通过表格的定位来排版这些元素，从而设计整个网页页面。一般表格边框宽度设为0，有时设置了边框反而会影响页面的显示效果。最好将表格的宽度设置为以像素为单位，这样当浏览器的窗口大小改变时，表格不会因此而改变，真正起到定位的作用。项目三布局技术任务五表格-问题探究表格的组成元素表格由边框、行、列、单元格组成。整张表格的边缘称为边框，水平方向的一组单元格称为行，垂直方向的一组单元格称为列，行列交叉部分就称为单元格，单元格中的内容和边框之间的距离称为边距，单元格和单元格之间的距离称为间距。如图3-1所示。行列单元格边框间距边距。图3-1表格示意图行列单元格边框间距边距项目三布局技术任务五表格-问题探究插入表格•新建一张页面，在设计视图将插入点放在需要表格出现的位置。若文档是空白的，则插入点自动置于文档的起始处。•选择“插入记录/表格”命令，或在“插入”栏的“常用”类别中单击“表格”按钮，弹出如图3-2所示的“表格”对话框。图3-2插入表格对话框项目三布局技术任务五表格-问题探究设置表格及单元格属性在设计视图中表格的属性设置有三种：表格整体设置、行和列设置和单元格设置。表格格式设置的优先顺序为单元格、行列、表格。1.设置表格属性：在表格的外框单击，就可以选中整个表格，在属性面板可以为选中表格进行属性设置。如图3-4所示。图3-4表格属性面板项目三布局技术任务五表格-问题探究2.设置单元格属性表格的基本组成元素是单元格，单元格组成行或列，再由行与列一起组成完整表格。在单元格内单击鼠标左键，在属性面板上会显示当前单元格的属性，如图3-6所示。如果遇到单元格宽度与列宽冲突时，以单元格宽度为准，但必须保证该行所有单元格宽度之和与表格整体宽度相等。图3-6单元格属性面板项目三布局技术任务五表格-问题探究3.设置行、列属性除对表格进行整体设置外，还可分别对表格的某行（某几行）或某列（或某几列）进行设置。将鼠标移至目标行的行首，当光标变为“”状态时，单击鼠标左键选中该行；将鼠标移至目标列的顶部，当光标变为“”状态时，单击鼠标左键选中该列。属性面板自动切换到行（列）状态。如图3-7所示。图3-7表格行（列）属性面板项目三布局技术任务五表格-问题探究4.编辑调整表格在插入表格时，如果对表格的行数、列数和样式没有确切的预计，可以根据需要对表格进行编辑。添加行和列删除行和列合并/拆分单元格项目三布局技术任务五表格-问题探究5.嵌套表格嵌套表格在现有的单元格或表格内插入一个表格，插入表格的大小受所在单元格大小的限制。网页的排版有时会很复杂，通过一个表格控制页面的总体布局，如果一些内部元素也通过总表来实现排版细节的话，很容易引起行高或列宽的冲突；浏览器在解析网页时，下载完整个表格的结构后才显示表格，通常浏览者需等待很长才能看到网页内容。嵌套表格的使用使页面布局更加灵活，外部父表格控制页面的整体布局，嵌套表格负责各子栏目的排版，互不干扰。项目三布局技术任务五表格-问题探究需要注意的是：表格可以无限制的多层嵌套，但嵌套层数越多浏览器解析的速度就越慢，访问者等待时间就越久，通常情况下，表格嵌套深度不超过三层。嵌套表格会对父表格产生一定影响，当嵌套表格宽度大于所在父表格单元格的宽度时，父表格的单元格将会自动调整；如果嵌套表格过大，甚至会增加整个父表格的大小。因此在使用嵌套表格时为了保持在不同分辨率下的外观结构，父表格的宽度和高度一般使用像素值，而嵌套表格一般使用百分比。项目三布局技术任务五表格-知识拓展页面布局是网页设计中最基本、最重要的工作之一，DreamweaverCS3提供了一种非常方便的布局工具——布局表格。在“布局”模式下，可以直接在页面上绘制布局表格和单元格，使得繁琐的页面布局变得轻松自如。1.布局模式在进行网页布局时，经常会在一个布局表格中使用多个布局单元格；也可以使用多个布局表格将页面隔离成多个部分，这样它们就不会相互影响；还可以在现有布局表格中进行布局表格嵌套。2.扩展表格模式当嵌套表格过多时，为了方便观察和布局，使用扩展表格模式使表格的编辑更容易。项目三布局技术任务五表格-知识拓展•布局模式-绘制布局表格在“布局”模式下，可以在页面上绘制布局表格和单元格，包括嵌套在其他表格中的表格。绘制表格和绘制单元格变成了各自独立的操作。如果绘制的布局单元格不在布局表格中，DreamweaverCS自动创建一个布局表格作为该单元格的容器，布局单元格不能存放在布局表格之外，靠齐网格有助于对齐单元格。图新建布局表格项目三布局技术任务五表格-知识拓展•布局模式-绘制布局表格在布局模式下，单击菜单栏中的“插入记录/布局对象/布局单元格”，或单击布局选项卡上的“绘制布局单元格”按钮，此时鼠标指针变为“十”字形状。然后将鼠标置于页面上需要绘制单元格的位置，拖动鼠标绘制布局单元格，如图3-17所示。图新建布局单元格项目三布局技术任务五表格-知识拓展•布局模式-为布局单元格添加内容布局表格创建后，表格以灰色填充，表示该区域不能插入内容，因此必须在表格中创建布局单元格后，才能在布局单元中插入文本、图像或媒体等内容。当添加宽度或高度大于布局单元格的内容时，该单元格将自动扩展，这可能会改变周围单元格的大小。该列的列宽变为显示代码中出现的宽度，后面的括号中是该列的可视宽度（屏幕上显示的宽度）。图新建布局表格项目三布局技术任务五表格-知识拓展•扩展表格模式•嵌套表格过多时，为了方便观察和布局，使用扩展表格模式使表格的编辑更容易。•执行“查看/表格模式/扩展表格模式”命令（快捷键F6），或单击“插入”面板“布局”选项卡下的按钮，此时便可以清楚地看出表格的嵌套关系，在“文档”窗口的顶部会出现标有“扩展表格模式”状态条。图“扩展表格模式”显示表格•本文由麦茜茜导购网提供，技术交流联系站长QQ：997278085•项目三布局技术