《学习情境二 班级主页的制作》由会员分享，可在线阅读，更多相关《学习情境二 班级主页的制作（37页珍藏版）》请在金锄头文库上搜索。
1、1学习情境二学习情境二 班级主页的制作班级主页的制作学习任务学习任务 1 1 利用表格进行布局利用表格进行布局学习目标学习目标掌握插入表格的方法；掌握表格属性（背景色、边框色等）的设置；掌握表格的拆分、合并；掌握表格和单元格高度的设置；掌握表格和单元格的嵌套；能力要求能力要求 通过教师、同伴和网络的帮助，感受实际工作中使用表格布局网页的方法，学会表达解决问题的过程和方法； 培养学生实际操作能力，与同伴合作和交流的意识和能力； 表格的综合使用以及偏置型网页制作的方法；如果你是一名网页设计者，如何利用表格对班级主页进行布局。表格无疑是网页制作中最为重要的一个对象，因为通常的网页都是依靠表格来进行版
2、面布局和组织各元素的，它可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。表格在网页设计中的地位非常重要，可以说如果表格用不好，就不可能设计出出色的网页。在表格布局中，只有当表格标记全部下载时，页面内容才能完全显示。当使用了过多表格时，页面下载速度受到影响。为了方便设计者使用表格进行页面布局，Dreameaver 提供了“绘制 AP Div“，可以在页面中绘制布局单元格，既可以使用表格作为基础结构来设计网页，又可以避免使用传统的方法创建基于表格的设计时经常
3、出现的一些问题。1.11.1 表格基本操作表格基本操作所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在 HTML 语言中以标签开始，标签结束） ，垂直的多个单元格称为列（以标签开始，标签结束） ，行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。1插入表格Dreamweaver 提供了非常完善的表格编辑功能，下面我们首先来看一下如何在网页文2档中插入表格。步骤 1：将光标放到要插入表格的位置。步骤 2： 打开“插入”面板，切换到“常用”选项下，单击表格按钮， （或单击菜单“插入”“表格”命令） ，弹出“表格”对话框，如图 2-1 所示，可根据
4、需要进行相应的参数设置。步骤 3：单击“确定”按钮，即可在页面中插入表格,如图 2-1 右图所示。图 2-1 插入表格【提示】“表格宽度”的单位可以是百分比或像素。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。“边框粗细”设定表格边框的宽度，单位为像素。“单元格边距”为表格内容和边框之间的空白区域，单位为像素。“单元格间距”为单元格之间的距离，单位为像素。2选择表格和单元格（1）选择表格 要选择表格,可执行下列操作之一:将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形状时单击鼠标左键。 将鼠标光
5、标移至表格外框线上，当鼠标光标变为形状时，单击鼠标左键。 在表格内部任意单元格中单击鼠标左键，然后在标签选择器中单击对应的“”标签。（2）选择行或列要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头 或 时单击鼠标左键，如图 2-2 所示。3图 2-2 选择行或列（3）选择单元格可以选择单个单元格，也可以选择连续的多个单元格或不连续的多个单元格,操作方法如下:要选择某个单元格，首先将插入点置于该单元格内，然后按【CtrlA】组合键或单击“标签选择器”中对应的“”标签。要选择连续的单元格区域。应首先在要选择的单元格区域的左上角单元格中单击，然后按住鼠标左键向右下角单元格方向
6、拖动鼠标，最后松开鼠标左键。如果希望选择一组不相邻的单元格，可按住【Ctrl】键单击选择各单元格。3设置表格属性当选中整个表格时，属性面板会自动变成表格的设置面板,如图 2-3 所示，可利用此“属性”面板查看或修改表格的行、列、宽，以及填充、间距、背景颜色、背景图像等属性。图 2-3 设置表格属性4.设置单元格属性在表格的某个单元格中单击鼠标， “属性”面板中将显示水平、垂直、宽、高等单元格属性，如图 2-4 所示,此时可通过“属性”面板设置其属性。图 2-4 设置单元格属性1.21.2 表格高级操作表格高级操作1拆分与合并单元格4在网页制作中，经常会用到一些特殊结构的表格，此时就需要拆分或合
7、并单元格。 （1）拆分单元格拆分单元格就是将一个单元格拆分成多个单元格。拆分单元格方法：选中要拆分的单元格，单击属性面板的拆分按钮，如图 2-5 左图所示，(或单击菜单“修改”“表格”“拆分单元格”命令)，会弹出“拆分单元格”对话框，如图 2-5 右上图所示，设定拆分方式和数值，单击“确定”按钮，即可把一个单元格拆分成多个单元格，如图 2-5 右下图所示。图 2-5 拆分单元格（2）合并单元格所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。合并单元格方法：拖动鼠标选中要合并的连续单元格，如图 2-6 左图所示（此处为第 2 行中间的 2 个单元格） ，然后单击“属性”面板上的“合并所选
8、单元格，使用跨度”按钮，则 3 个单元格合并为 1 个单元格，如图 2-6 右图所示。图 2-6 合并单元格52插入、删除行和列在使用表格组织大量信息时，往往需要在创建好的表格中添加或删除行与列，以增加或减少记录。（1）插入行、列方法：将光标置于表格中的适当位置，单击菜单“修改”“表格”“插入行”命令，则在当前行的上方插入一行。单击菜单“修改”“表格”“插入列”命令，则在当前列的左侧插入一列。或直接按照如图 2-7 所示方法选择“插入行或列”方法，弹出“插入行或列”对话框，在其中设置插入的“行数” （或“列数” ）及“位置” ，单击“确定”按钮。 图 图 2-7 插入行或列（2）删除行和列方法
9、： 将光标置于要删除的行或列中的任意一个单元格，单击菜单“修改”“表格”“删除行”或“删除列”命令，则删除当前行或列。或者右键单击，在弹出的菜单中选择“表格”“删除行”或“删除列”命令，则删除当前行或列。 3移动表格整行内容如果要整体移动表格整行内容，首先选中本行，然后单击“编辑”“剪切”命令，定位插入点，选择编辑菜单的“粘贴”命令，即可在当前插入点的上面插入一行，如图 2-8所示。图 2-8 移动整行数据4排序表格内容如果希望对 Dreamweaver 表格中的内容进行排序，首先选中表格，打开“命令”菜单执行“排序表格”命令，打开“排序表格”对话框，按如图 2-9 所示进行设置后，即可得到排
10、序后的结果，如图 2-9 右图所示。6图 2-9 排序表格内容5导入或导出表格内容在页面中添加表格时，如果预先有表格内容存储在记事本或 Word 等文档中，可以将其直接导入到页面中。操作方法如下：单击“文件”菜单“导入”“表格式数据” ，打开“表格式数据”对话框，可以按照图 2-10 所示进行设置，即可导入数据。此外，还可以执行“文件”菜单“导出”“表格”命令，将表格导出为独立的文件，以便在需要使用时导入。图 2-10 导入表格式数据步骤 1：首先在 Dreamweaver 中新建站点“班级主页” ，如图 2-11 所示，把网页素材拷贝到图像目录下。在站点下新建主页文件 index. html
11、，标题设为“班级主页” 。如要转到其他本地站点，可以在文件面板的下拉菜单中切换，如图 2-12 所示。7图 2-11 班级主页站点 图 2-12 站点切换 步骤 2：插入表格打开 index. html 文件，在插入栏“常用”面板中选择“表格”，如图 2-13 所示，打开插入表格窗口，插入一个 5 行 3 列，宽度为 750 像素的表格，设置边框粗细:0，单元格边距:0，单元格间距:0，单击“确认”按钮插入表格。在表格属性面板中设置“对齐”方式为“居中对齐”。图 2-13 插入表格步骤 3：设置表格行高和列宽将光标放在表格行的左侧，变成实心箭头时单击，可选中表格行编辑，5 行的行高分别设置为
12、150, 50, 250, 350, 80，如图 2-14 所示。将光标放在表格列的上方，变成实心箭头时8单击，可选中表格列编辑，如图 2-15 所示，在属性面板中把 3 列的列宽分别设置为 200 , 150 , 400。图 2-14 行高设置图 2-15 列宽设置步骤 4：合并单元格将第一行、第二行和第四行的第 2 个、第 3 个单元格合并，方法是选中相邻单元格，单击属性面板的“合并单元格”按钮，用同样的方法把第五行的所有单元格合并。步骤 5：嵌套表格在第 2 行的第 2 个单元格中插入 1 行 4 列表格，宽度为 550，高度为 200；此时网页的结构已经确定，就如同绘画时用铅笔打好了格
13、子，如图 2-16 所示，但是由于表格边线宽度为 0，在预览时看到的仍然是一片空白。9图 2-16 表格布局步骤 6：继续嵌套表格按照对班级主页的规划可以在图 2-16 中继续嵌套表格，完成其他部分内容的添加。如在第 3 行第一个单元格中插入 5 行 2 列表格，表格宽度为 160。每行行高为 40，2 列列宽分别为 30、140，如图 2-17 所示。图 2-17 利用表格进行页面布局效果图10学习任务学习任务 2 2 修饰美化表格修饰美化表格学习目标学习目标掌握表格属性（背景色、边框色等）的设置；掌握表格的 HTML 标签，以及利用 HTML 标签属性美化表格；能力要求能力要求 能够根据客
14、户需求熟练的对表格进行美化操作；如何创建一个布局协调、色调统一、美观、大方的表格？这就涉及到对表格的美化修饰。表格的美化修饰是从多方面对表格进行美化修饰，使表格看上去更漂亮、更美观、更合理。本任务主要完成如何利用背景对表格进行美化修饰。表格的美化修饰主要是通过修改表格属性来实现，从以下几个方面进行： 表格的高度、宽度和边框。 表格、行、列的背景。 表格、行、列的对齐方式。 表格的填充、间距属性。表格属性的设置即可以通过属性面板来改变，如任务 1 中图 2-3 所示，也可以通过修改 HTML 代码来改变，下面主要讲述利用 HTML 代码修饰美化表格的方法。2.12.1 设置表格的尺寸和边框设置表
15、格的尺寸和边框如果不指定表格的高度和宽度，浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格的边框的宽度(border 属性)，则浏览器将不显示表格边框。若我们既想设置表格的高度和宽度，又想设置表格边框的宽度，那么就得设置表格的高度、宽度和边框属性。语法语法: :设置表格的宽度、高度和边框的基本语法：其中，表格的宽度和高度可以用像素来表示，也可以用百分比（与浏览器当前窗口相比的大小比例）来表示，表格边框宽度只能用像素来表示。例如：表示一个宽为 200 像素，高为 100 像素的表格。表示一个宽为当前浏览器窗口宽度的 50%，高为当前浏览器窗口高度的 25%的表格。11注：表格中 b
16、order 属性只能影响表格四周的边框宽度，而不能影响表格内单元格之间边框尺寸。过宽的边框会影响表格的整体美观，因此一般边框宽度设置不应超过 5 像素。2.22.2 设置背景设置背景(1) 表格背景表格背景包括表格的背景颜色和背景图像的设置，表格的背景颜色属性 bgcolor 是针对整个表格的，表格的背景图像属性 background 也是针对整个表格的，背景图像会令表格更加美观、更加活泼生动。语法语法: :设置表格背景基本语法：(2) 行背景不仅可以对表格整体设置背景，还可以对单独一行设置背景，行的 bgcolor 颜色可以覆盖的 bgcolor 或 background 属性。语法语法: :设置行的背景基本语法：(3) 单元格背景不仅可以对表格中行设置背景，还可以对表格中每一个单元格设置背景，单元格的bgcolor 颜色可以覆盖行的 bgcolor 属性。语法语法: :设置单元格的背景基
