第三章使用表格规划网页布局.doc

第三章 使用表格规划网页布局 一、相关概念 1、表格功能：显示数据，定位网页元素（布局） 2、表格的组成： 表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。单元格中的内容和边框之间的距离叫边距cellpadding。单元格和单元格之间的距离叫间距cellspacing。表格的边线叫做边框border。tr ：代表一行。td：代表一个单元格。 3、占位符： 当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“nbsp;”，用以撑起单元格的高度。 当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。 二、插入表格 两种方法：① “插入”→“表格”命令 ②单击“插入”面板的常用”类别中的“表格”按钮上，打开“表格”对话框。 【练习2】：如何让文本与表格边框有一定空白区间，如下： 5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。插入嵌套表格的方法与插入表格的方法相同。 【练习3】：利用表格制作下图样式： 说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。 【思考】：利用嵌套表格留空白 操作方法：插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。要么将里面表格的宽度以“百分比”的形式设置，此值要小于100%，具体多少适情况而定。 三、编辑表格 （一）选择表格 1、选择整个表格： 左上角或底部边缘；任意单元格+table标签 2、选择表格中的行或列： 上边缘，左边缘；拖动鼠标 3、选择单个单元格： 单元格+td标签；单元格+Ctrl+A 4、选择单行或矩形单元格块： 鼠标拖动；首单元格+shift+尾单元格 5、选择不相邻的单元格 Ctrl+欲选单元格（再次单击则从选集中删除） （二）编辑表格和单元格 1、调整表格大小： 三个控制点（水平、垂直、水平+垂直方向） 2、更改列宽和行高： 左右指针或上下指针位置拖动鼠标 3、添加和删除行、列： 当前单元格上面插入一行（修改-表格-插入行） 当前单元格左边插入一列 插入-布局： 插入多行多列（修改-表格-插入行或列） 删除行或列（选择，修改-表格-删除行/列；Del键） 4、拆分和合并单元格： 选择表格，修改-表格-合并/拆分单元格；属性面板中的按钮 【例4-2】：打开例3-1网页文档，编辑表格（边框1，背景灰，边框颜色深灰，合并第一行） 5、复制、粘贴单元格 【练习4】：如何制作下图的细线边框表格？ 【练习5】：制作简单导航栏 【练习6】：如何制作下图圆角表格？ 四、使用表格规划网页布局 （一）在“布局模式”下规划网页布局 表格的三种布局模式：标准、扩展、布局 Dreamweaver CS3在“插入”栏的“布局”类别中提供了“标准”、“扩展”两种表格视图模式，注意在“查看-表格模式-布局模式 “标准”模式：标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适合在该模式下进行。 “扩展”模式：在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元格中，为了解决这个问题，可以切换到“扩展表格”模式。 在“扩展”模式下，Dreamweaver临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。 “布局”模式：专门为方便网页布局而设计的模式，这种模式下的单元格边框是没有宽度的。“布局”模式的主要功能是绘制或编辑复杂的表格。文档窗口的顶部显示“布局模式”，指示当前正处于“布局”模式中，原来页面上的每个表格都显示为布局表格。 1、认识布局单元格和布局表格 创建布局表格，在布局表格中添加布局单元格 直接创建布局单元格时，自动创建布局表格 2、绘制布局单元格和布局表格 “布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”；按住Ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。 3、选择布局单元格和表格 单元格：点击单元格边框，8个控制点 表格：单击灰色区域 4、移动和调整布局单元