网页设计-任务五表格.ppt

《网页设计-任务五表格.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、项目三布局技术网页设计DreamweaverCS3项目教程项目三布局技术任务五布局技术之一—表格技能目标熟练运用表格掌握页面布局技术。能够通过表格的定位使页面的布局更加合理、美观。知识目标熟练掌握表格的添加与编辑。掌握表格中操作行和列的方法。掌握单元格的拆分与合并方法。掌握在表格中输入文字、图像并定位的方法。掌握嵌套表格的用法。掌握切换视图的操作方法。掌握布局表格、单元格的绘制与属性设置方法。项目三布局技术任务五布局技术之一—表格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、个表格控制页面的总体布局，如果一些内部元素也通过总表来实现排版细节的话，很容易引起行高或列宽的冲突；浏览器在解析网页时，下载完整个表格的结构后才显示表格，通常浏览者需等待很长才能看到网页内容。嵌套表格的使用使页面布局更加灵活，外部父表格控制页面的整体布局，嵌套表格负责各子栏目的排版，互不干扰。项目三布局技术任务五表格-问题探究需要注意的是：表格可以无限制的多层嵌套，但嵌套层数越多浏览器解析的速度就越慢，访问者等待时间就越久，通常情况下，表格嵌套深度不超过三层。嵌套表格会对父表格产生一定影响，当嵌套表格宽度大于所在父表格单元格的