任务五 布局技术表格

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

2、利用表格搭建页面时，应先规划好页面中各元素的详细位置，经过表格将这些区域划分出来，在单元格中插入元素后，再仔细调整各单元格的大小、位置，使页面各个元素的所在位置与实践需求相符。经过该义务的实施，用户可以灵敏利用表格的背景、框线等属性设置，掌握运用表格准确定位页面元素的排版技术，创建规划更加合理、美观的网页效果。 .工程三 规划技术义务五 表格构建义务任务流程在站点中新建一个页面并保管。在网页中插入一张表格。合并单元格。为单元格设置背风光根据规划需求插入嵌套表格。在指定位置插入图片和文字。根据页面的规划调整图片大小。为文字设置相关属性。为表格内文字建立超链接。.工程三 规划技术义务五 表格构建义

3、务网页预览效果.工程三 规划技术义务五 表格-问题探求 传统的网页设计普通会根据用户要求，思索好主颜色、图片、字体、颜色后，再用Photoshop等制图软件自在的画出来，最后切成小图，再经过表格的定位来排版这些元素，从而设计整个网页页面。普通表格边框宽度设为0，有时设置了边框反而会影响页面的显示效果。最好将表格的宽度设置为以像素为单位，这样当阅读器的窗口大小改动时，表格不会因此而改动，真正起到定位的作用。 .工程三 规划技术义务五 表格-问题探求表格的组成元素 表格由边框、行、列、单元格组成。整张表格的边缘称为边框，程度方向的一组单元格称为行，垂直方向的一组单元格称为列，行列交叉部分就称为单元

4、格，单元格中的内容和边框之间的间隔称为边距，单元格和单元格之间的间隔称为间距。如图3-1所示。行列单元格边框间距边距。图3-1 表格表示图行列单元格边框间距边距.工程三 规划技术义务五 表格-问题探求 插入表格新建一张页面，在设计视图将插入点放在需求表格出现的位置。 假设文档是空白的，那么插入点自动置于文档的起始处。选择“插入记录/表格命令， 或在“插入栏的“常用类别 中单击“表格按钮，弹出如 图3-2所示的“表格对话框。图3-2 插入表格对话框 .工程三 规划技术义务五 表格-问题探求设置表格及单元格属性 在设计视图中表格的属性设置有三种：表格整体设置、行和列设置和单元格设置。表格格式设置的

5、优先顺序为单元格、行列、表格。设置表格属性：在表格的外框单击，就可以选中整个表格，在属性面板可以为选中表格进展属性设置。如图3-4所示。图3-4 表格属性面板 .工程三 规划技术义务五 表格-问题探求设置单元格属性 表格的根本组成元素是单元格，单元格组成行或列，再由行与列一同组成完好表格。在单元格内单击鼠标左键，在属性面板上会显示当前单元格的属性，如图3-6所示。假设遇到单元格宽度与列宽冲突时，以单元格宽度为准，但必需保证该行一切单元格宽度之和与表格整体宽度相等。图3-6 单元格属性面板.工程三 规划技术义务五 表格-问题探求设置行、列属性 除对表格进展整体设置外，还可分别对表格的某行某几行或

6、某列或某几列进展设置。将鼠标移至目的行的行首，当光标变为“ 形状时，单击鼠标左键选中该行；将鼠标移至目的列的顶部，当光标变为“ 形状时，单击鼠标左键选中该列。属性面板自动切换到行列形状。如图3-7所示。图3-7 表格行列属性面板 .工程三 规划技术义务五 表格-问题探求编辑调整表格 在插入表格时，假设对表格的行数、列数和款式没有确切的估计，可以根据需求对表格进展编辑。添加行和列删除行和列合并/拆分单元格.工程三 规划技术义务五 表格-问题探求嵌套表格嵌套表格在现有的单元格或表格内插入一个表格，插入表格的大小受所在单元格大小的限制。网页的排版有时会很复杂，经过一个表格控制页面的总体规划，假设一些

7、内部元素也经过总表来实现排版细节的话，很容易引起行高或列宽的冲突；阅读器在解析网页时，下载完好个表格的构造后才显示表格，通常阅读者需等待很长才干看到网页内容。嵌套表格的运用使页面规划更加灵敏，外部父表格控制页面的整体规划，嵌套表格担任各子栏目的排版，互不干扰。.工程三 规划技术义务五 表格-问题探求需求留意的是：表格可以无限制的多层嵌套，但嵌套层数越多阅读器解析的速度就越慢，访问者等待时间就越久，通常情况下，表格嵌套深度不超越三层。嵌套表格会对父表格产生一定影响，当嵌套表格宽度大于所在父表格单元格的宽度时，父表格的单元格将会自动调整；假设嵌套表格过大，甚至会添加整个父表格的大小。因此在运用嵌套

8、表格时为了坚持在不同分辨率下的外观构造，父表格的宽度和高度普通运用像素值，而嵌套表格普通运用百分比。.工程三 规划技术义务五 表格-知识拓展 页面规划是网页设计中最根本、最重要的任务之一，Dreamweaver CS3提供了一种非常方便的规划工具规划表格。在“规划方式下，可以直接在页面上绘制规划表格和单元格，使得繁琐的页面规划变得轻松自若。规划方式 在进展网页规划时，经常会在一个规划表格中运用多个规划单元格；也可以运用多个规划表格将页面隔离成多个部分，这样它们就不会相互影响；还可以在现有规划表格中进展规划表格嵌套。扩展表格方式 当嵌套表格过多时，为了方便察看和规划，运用扩展表格方式使表格的编辑

9、更容易。.工程三 规划技术义务五 表格-知识拓展规划方式-绘制规划表格 在“规划方式下，可以在页面上绘制规划表格和单元格，包括嵌套在其他表格中的表格。绘制表格和绘制单元格变成了各自独立的操作。假设绘制的规划单元格不在规划表格中，Dreamweaver CS自动创建一个规划表格作为该单元格的容器，规划单元格不能存放在规划表格之外，靠齐网格有助于对齐单元格。图 新建规划表格.工程三 规划技术义务五 表格-知识拓展规划方式-绘制规划表格 在规划方式下，单击菜单栏中的“插入记录/规划对象/规划单元格，或单击规划选项卡上的“绘制规划单元格按钮，此时鼠标指针变为“十字外形。然后将鼠标置于页面上需求绘制单元格的位置，拖动鼠标绘制规划单元格，如图3-17所示。 图 新建规划单元格 .工程三 规划技术义务五 表格-知识拓展规划方式-为规划单元格添加内容 规划表格创建后，表格以灰色填充，表示该区域不能插入内容，因此必需在表格中创建规划单元格后，才干在规划单元中插入文本、图像或媒体等内容。当添加宽度或高度大于规划单元格的内容时，该单元格将自动扩展，这能够会改动周围单元格的大小。该列的列宽变为显示代码中出现的宽度，后面的括号中是该列的可视宽度屏幕上显示的宽度。 图 新建规划表格.工程三 规划技术义务五 表格-知识拓展扩展表格方式嵌套表格过多时，为了方便察看和规