学习情境二班级主页的制作.docVIP

学习情境二 班级主页的制作 表格无疑是网页制作中最为重要的一个对象，因为通常的网页都是依靠表格来进行版面布局和组织各元素的，它可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。表格在网页设计中的地位非常重要，可以说如果表格用不好，就不可能设计出出色的网页。 在表格布局中，只有当表格标记全部下载时，页面内容才能完全显示。当使用了过多表格时，页面下载速度受到影响。为了方便设计者使用表格进行页面布局，Dreameaver提供了“绘制AP Div，可以在页面中绘制布局单元格，既可以使用表格作为基础结构来设计网页，又可以避免使用传统的方法创建基于表格的设计时经常出现的一些问题。 1.1表格基本操作 所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在HTML语言中以tr标签开始，/tr标签结束），垂直的多个单元格称为列（以td标签开始，/td标签结束），行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。 1．插入表格 Dreamweaver 提供了非常完善的表格编辑功能，下面我们首先来看一下如何在网页文档中插入表格。 步骤1：将光标放到要插入表格的位置。 步骤2： 打开“插入”面板，切换到“常用”选项下，单击表格按钮，（或单击菜单“插入”→“表格”命令），弹出“表格”对话框，如图2-1所示，可根据需要进行相应的参数设置。 步骤3：单击“确定”按钮，即可在页面中插入表格,如图2-1右图所示。 图2-1 插入表格 【提示】 “表格宽度”的单位可以是百分比或像素。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。 “边框粗细”设定表格边框的宽度，单位为像素。 “单元格边距”为表格内容和边框之间的空白区域，单位为像素。 “单元格间距”为单元格之间的距离，单位为像素。 2．选择表格和单元格 （1）选择表格 要选择表格,可执行下列操作之一: 将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形状时单击鼠标左键。 将鼠标光标移至表格外框线上，当鼠标光标变为形状时，单击鼠标左键。 在表格内部任意单元格中单击鼠标左键，然后在标签选择器中单击对应的“table”标签。 （2）选择行或列 要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头 或 时单击鼠标左键，如图2-2所示。 图2-2 选择行或列 （3）选择单元格 可以选择单个单元格，也可以选择连续的多个单元格或不连续的多个单元格,操作方法如下: 要选择某个单元格，首先将插入点置于该单元格内，然后按【Ctrl＋A】组合键或单击“标签选择器”中对应的“td”标签。 要选择连续的单元格区域。应首先在要选择的单元格区域的左上角单元格中单击，然后按住鼠标左键向右下角单元格方向拖动鼠标，最后松开鼠标左键。 如果希望选择一组不相邻的单元格，可按住【Ctrl】键单击选择各单元格。 3．设置表格属性 当选中整个表格时，属性面板会自动变成表格的设置面板 ,如图2-3所示，可利用此“属性”面板查看或修改表格的行、列、宽，以及填充、间距、背景颜色、背景图像等属性。 图2-3 设置表格属性 4.设置单元格属性 在表格的某个单元格中单击鼠标，“属性”面板中将显示水平、垂直、宽、高等单元格属性，如图2-4所示,此时可通过“属性”面板设置其属性。 图2-4 设置单元格属性 1.2表格高级操作 1．拆分与合并单元格 在网页制作中，经常会用到一些特殊结构的表格，此时就需要拆分或合并单元格。 （1）拆分单元格 拆分单元格就是将一个单元格拆分成多个单元格。拆分单元格方法： 选中要拆分的单元格，单击属性面板的拆分按钮，如图2-5左图所示，(或单击菜单“修改”→“表格”→“拆分单元格”命令)，会弹出“拆分单元格”对话框，如图2-5右上图所示，设定拆分方式和数值，单击“确定”按钮，即可把一个单元格拆分成多个单元格，如图2-5右下图所示。 图2-5 拆分单元格 （2）合并单元格 所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。合并单元格方法： 拖动鼠标选中要合并的连续单元格，如图2-6左图所示（此处为第2行中间的2个单元格），然后单击“属性”面板上的“合并所选单元格，使用跨度”按钮，则3个单元格合并为1个单元格，如图2-6右图所示。 图2-6 合并单元格 2．插入、删除行和列 在使用表格组织大量信息时，往往需要在创建好的表格中添加或删除行与列，以增加或减少记录。 （1）插入行、列方法： 将光标置于表格中的适当位置，单击菜单