网页设计与制作居中代码-网页设计制作项目四使用表格布局网站主页.ppt 46页

【技能目标】 1. 能够根据效果图编写表格源码 2. 能够编写表格相关属性，完善表格任务 4 表格源码 【项目描述】 本任务主要学习表格源码，编写表格源码表源代码实现世界杯德国对阵法国的比赛结果页面如下图所示。 任务4 表格源码 4.4.1 项目准备 1.表格源码 Table—table row—tr cell—td 2.表格属性 属性源码表示 属性源码表示 form Id id border border height class class width width 背景色 bgcolor 填充cellpadding 背景图片 背景间距 cellspacing 边框颜色 bordercoloralignmentalign 该属性有三个可选值：left（左对齐）、right（右对齐）、center（居中对齐） 任务表规划页面 【知识目标】 1.熟悉典型网页布局类型 2. 了解常用网页布局方式 3. 了解表格布局规则 任务一表格规划页面 【技能目标】 1. 能根据网站功能选择合适的网页布局形式 2. 能合理使用表格规划表格布局任务1表格规划页面【项目描述】根据网页美工提供的魅力天空（GS）创意家居网站首页图文效果图，如图4-1所示，对效果图进行分析，完成表格规划的第一页。 并对效果图进行切片，为首页的制作做准备。

图 4-1 GS 创意之家网站首页平面效果图 4.1.1 项目准备 1. 常见网页布局类型 “国”字型 角型 标题文字型 封面型 混合型 2. 常见网页布局方式 常用网页页面布局方式 表格布局有三种 DIV+CSS布局 框架布局 三、使用表格布局的一般规则 不要把整个网页当成一个大表格，尽量使用块。 一是大表格的内容只有在完全加载后才会显示，这无疑会降低浏览的速度和效率； 另一个是调整单元格不方便，往往只想调整某个单元格，但其他行网格的单元格也会一起产生联动效果。 因此，应尽可能考虑分块。 可以使用嵌套，但一般嵌套不要超过三层，否则会影响浏览速度，而且修改表格时，多层嵌套会导致代码过多，增加修改难度。 作为布局表格，表格行边框宽度一般设置为0，单元格间距设置为0，单元格内边距设置为0。外层表格的宽度一般采用固定像素值，嵌套表格可以使用百分比，这样嵌套表格的宽度就可以随着嵌套单元格的宽度而变化。 4.1.2 项目实现 1、分析效果图 GS创意家居网站首页从上到下由4个大的矩形块组成，分别是LOGO标题、导航栏、广告、网站内容、版本信息。 网站内容从上到下由3个区块组成。 从左到右排列，很明显，GS创意家居网站首页的页面布局正是上面提到的“国”字布局。

2. 规划布局 3. 效果图切片 4.1.3 项目培训 下图是某热门游戏网站的首页。 请根据平面效果图用表格规划布局，并完成图像切片。 任务 2 使用表格布局页面 【知识目标】 1. 掌握表格创建方法 2. 掌握表格嵌套方法 3. 掌握表格的编辑 任务 2 使用表格布局页面 【技能目标】 1. 根据页面布局图，利用表格实现布局 2.对表格的各种操作 2.利用表格对页面进行布局 【项目描述】 在网页制作中，简单的页面布局一般都是利用表格来实现的。 上一个任务分析了GS创意首页网站首页的效果图，根据效果图规划了页面的表格布局，制作了GS创意首页网站首页的图片素材。 本任务根据上一个任务的布局图，使用表格来实现布局。 4.2.1 项目准备 1. 创建表格 在Dreamweaver CS3 中创建表格有以下三种方法： 单击菜单栏中的“插入记录”，选择“表格”，弹出“表格”对话框。 将“插入”面板切换到“常用”选项卡，单击“表格”按钮，弹出“表格”对话框。 使用快捷键Alt+Ctrl+T，弹出【表格】对话框。 2. 【表格】属性表格对话框有以下属性： 表格宽度：设置表格的宽度，单位包括百分比和像素。 考虑到不同的计算机分辨率不同，最外层表格宽度的单位应使用像素。

边框粗细：设置表格边框的宽度，默认为 1，一般用于布局的表格不需要边框，可以设置为 0。 单元格边距：设置表格单元格中的对象与表格之间的距离。单元格边框。 默认值为3。一般用于布局的表格不需要边距，这里可以设置为0。 单元格间距：设置表格单元格与单元格之间的距离。 默认值为3。一般用于布局的表格不需要间距，这里可以设置为0。 页面：您可以向表格添加行或列标题。 标题：设置要在表格上显示的表格标题。 对齐标题：设置标题相对于表格的位置，包括默认、上、下、左、右5个选项。 摘要：给出表格的描述，编辑页面时可以读取摘要文本，但该文本不会显示在用户的浏览器中。 用于布局的表格不需要辅助功能设置。 3、编辑表单 选择表单 选择整个表单 选择整个表单一般有四种方法： 将鼠标放在表单的下/左边缘（或表单的左上角），此时表格边框变为红色实线网页设计与制作居中代码，鼠标变为Into状态（鼠标变为状态），单击选择表格。 单击表格中的任意位置，选择[修改] | 在菜单栏中的[表格]中，单击[选择表格]命令。 在表格左上角的单元格中按住鼠标左键，将其拖动到表格右下角的单元格中，选择其中的所有单元格，然后选择菜单栏中的【编辑】，并单击[全选]命令。

单击表中的任意位置可通过状态栏上的 HTML 选项卡选择表。 选择行和列 可以通过以下三种不同的方式选择表格的行和列： 当鼠标位于要选择的行或列的顶部时，鼠标会变成黑色实心箭头状态，并且然后单击以选择行或列。 在行中从左向右或从上到下单击并拖动鼠标，即可选择该行或列。 该方法仅用于选择行。 单击要选择的行中的任意单元格，然后单击状态栏中的 ，选择该单元格所在的行。 此方法无法选择列。 选择表格 选择单元格 选择单元格的方法有以下三种： 左键单击并拖动要选择的单元格。 当单元格的边框变成黑色实线时，释放鼠标以选择该单元格。 将鼠标置于要选择的单元格上，按住【Shift】键单击该单元格即可选中，按住【Shift】键可以选择多个不连续的单元格。 用鼠标单击要选择的单元格，然后单击状态栏中的 将其选中。 合并单元格有两种方法可以完成合并。 使用上述任一方法选择同一行或同一列的多个单元格，然后单击鼠标右键，在弹出的对话框中选择【表格】，然后单击【合并单元格】即可完成合并。 单击[属性]面板中的按钮可以合并多个单元格和拆分单元格。 使用上述任意一种方法，选中单元格，然后单击鼠标右键，在弹出的对话框中选择【表格】ip形象，然后选择【拆分单元格】，弹出【拆分单元格】对话框。

与合并单元格一样，单击【属性】面板中的按钮也可以拆分单元格。 选择【行】或【列】，表示一个单元格可以拆分为多行或多列； 设置分割行数或分割列数。 单击【确定】按钮，完成行列的拆分和插入。 如果要在创建的表格中添加行或列，必须先将光标移动到要插入行或列的单元格，然后选择以下操作。 实现插入行或列的操作：右键单击单元格，在弹出的菜单中选择【表格】，单击【插入行】命令​​，在光标所在单元格上方添加一行，右键选中单元格，在弹出的菜单中选择【表格】，单击【插入列】命令，即可在光标所在单元格的左侧添加一列。 选择菜单栏中的“插入记录”，单击“表格对象”，然后选择“在上方插入行”、“在下方插入行”、“向左插入”或“向右插入列”命令。 右键单击单元格，在弹出的菜单中选择【表格】，单击【插入行或列】命令，打开【插入行或列】对话框，设置完成后即可完成操作。 要删除行或列，请将光标置于要删除的行或列中的单元格上，然后选择菜单栏中的“修改”，选择“表格”，然后单击“删除行”（或“删除列”）删除行（或列）的命令； 右键单击要删除的行或列中的单元格，在弹出的对话框中选择【表格】，单击【删除行】（或【删除列】）命令，删除该行（或列）； 选中要删除的行或列，然后选择菜单栏中的【修改】，选择【表格】，单击【删除行】（或【删除列】）命令即可删除该行（或列）； 对于要删除的行或列网页设计与制作居中代码，在弹出的对话框中选择【表格】，单击【删除行】（或【删除列】）命令即可删除该行（或列）； 选择要删除的行或列，单击“删除”按钮即可删除行或列。

4、表格嵌套 表格嵌套的具体操作如下： 将光标置于需要嵌套表格的单元格中吉祥物设计，插入表格，从而完成表格嵌套 4.2.2 项目实现 按照4.1.2中的规划，按照从外到内，从上到下的顺序进行布局。 顺序如下： 1. 控制网页整体布局的外部表格的创建 2. 页面导航栏表单的创建 3. 页面内容、页脚区域表格布局 4.2.3 知识扩展 1. Dreamweaver CS3 提供的排序表格对表格中信息的排序命令，可以对表格中一列的内容进行简单的排序，也可以对两列的内容进行更复杂的排序，但是包含合并单元格的表格无法排序。 排序的操作步骤如下：选择要排序的表格，然后选择菜单栏中的【命令】，单击【表格排序】，弹出【表格排序】对话框，设置排序规则，单击【确定】按钮完成表格排序 2.导入、导出表格数据 在Dreamweaver CS3中，可以导入和导出表格数据。 通过解析，您可以将以制表符、逗号、句点、分号或其他分隔符分隔的格式保存的表格数据导入到Web文档中，还可以将表格导出为文本文件并保存相邻单元格的内容。 分隔器。 导出表时，只能导出整个表，不能导出部分表。 这提供了一种更快、更方便的方法来将大量格式化数据放置在网页中。

具体操作步骤如下：选择需要导出的表格，然后选择菜单栏中的【文件】，选择【导出】，点击【表格】，弹出【导出表格】对话框。 设置分隔符和换行符。 一般分隔符可以由设计者选择，默认选择换行符[windows]。 单击可将表格导出到文本文档“score.txt”。 依次将 Score.txt 文件中的表格导入到 Dreamweaver 中。 选择【文件】菜单，选择【导入】，单击【表格数据】，打开【导入表格数据】对话框，设置相关参数。 单击【确定】按钮完成导入操作。 4.2.4 项目训练 请根据4.1.3中热门游戏网站首页规划的表格布局图，通过建表、表格编辑、表格嵌套等相关操作，创建热门游戏网站首页表格布局项目培训规划。 任务 3 完善表格布局 [知识目标] 1. 精通表格相关属性 任务 3 完善表格布局 [技能目标] 1. 能够设置表格相关属性 任务 3 完善表格布局 [项目描述] 任务 1规划了GS创意首页网站首页布局图。 参考该图，任务 2 使用表格来实现布局。 对比两张图，不难发现布局还没有真正完成。 本任务以GS创意首页网站首页的平面效果图为基础，结合任务1中制作的图像切片，在任务2的基础上，通过设置表格的相关属性，对表格进行改进。 布局。

7.3.1 项目准备 1. 表单属性面板 表单ID：表单的名称可以表明表单的唯一性。 一般可以省略或者不设置，但是如果想用JavaScript来控制网页中的表单，就需要给表单命名。 行数、列数：表格的行数和列数。 这两个值必须在表创建后自动给出。 重新排列行和列以增加或减少表格的行和列。 宽度：表格宽度，单位为像素或百分比。 Padding：表格单元格中的对象与单元格边框之间的距离。 一般用于布局的表格内边距设置为0。 间距：表格中单元格之间的距离。 一般情况下，用于布局的表格间距设置为0。 对齐方式：表格在页面文档中的水平位置。 值有左（left）、右（right）和居中（center）。 默认为左对齐。 Border：表格边框的粗细，一般用于布局表格。 Spacing 设置为 0。 Class：表格的 CSS 样式。 背景颜色：表格的背景颜色，值为十六进制RGB颜色。 背景图像：表格的背景图像。 边框颜色：表格边框的颜色，值为十六进制RGB颜色。 并且：清除行高和列宽。 并且：将列宽在当前宽度值的基础上转换为像素值和百分比。 2.行、列、单元格属性面板级别：单元格内元素在单元格水平方向的对齐方式，取值有左对齐（左）、右对齐（右）、居中对齐（中心）、默认Left-aligned Vertical：单元格内元素在单元格垂直方向的对齐方式，取值有top（顶部）、center（中间）、bottom（底部）、baseline（基线）、默认为居中高： cell 网格的高度，以像素或百分比为单位。

同一张表中，同一行的单元格高度相同，以最大值为准。 宽度：单元格宽度，单位为像素或百分比。 同一张表中，同一列的单元格宽度相同，以最大值为准。 背景颜色：单元格的背景颜色，值为十六进制RGB颜色。 背景图像：单元格的背景图像。 边框颜色：单元格边框的颜色，值为十六进制RGB颜色。 不换行：禁用文本换行，这样当文本长度超过单元格宽度时，单元格会自动扩展以容纳所有文本。 标题：将选定的单元格设置为表格的标题单元格。 按钮：合并单元格按钮。 选择多个连续的单元格，然后单击按钮将这些单元格合并为一个单元格。 按钮：拆分单元格按钮。 选中需要拆分的单元格，点击按钮，弹出【拆分单元格】对话框，设置拆分参数，即可将一个单元格拆分为多个单元格。 4.3.2 项目实现 按照从外到内、从整体到部分、从上到下、从左到右的顺序设置属性，顺序如下： 1、设置总体布局的外表属性网页 2. 导航表属性设置 3. 4.3.3 项目训练 根据 4.1.3 项目训练规划的热门游戏网站首页平面效果图，在 4.2.4 的基础上，完善热门游戏网站首页。 任务 4 表格源代码 【知识目标】 1. 熟悉 HTML 中的表格标签 2. 熟悉表格相关属性的 HTML 表示