《网页设计与制作》表格布局（1）（举一反三考点练）-讲义

举一反三考点练 《网页设计与制作》表格布局-讲义 1. 理解表格的创建与基本属性设置 2. 熟悉嵌套表格与页面分区布局实战 3. 熟悉布局原则、类型与常见问题排查 知识点一 表格的创建与基本属性设置 1.插入表格 （1）入口 ① 菜单“插入-表格”或 Ctrl+Alt+T。 ② “插入”面板“常用”类别点击“表格”图标。 ③ 弹出对话框一次性设定行数、列数、宽度、边框、边距、间距。 （2）核心参数 ① 宽度选像素可固定版心，选百分比可自适应分辨率。 ② 边框、边距、间距全部置 0 可实现隐形布局。 ③ 标题选项（顶部/左侧/两者）让语义和样式分离，有利 SEO。 （3）表格命名 ① 在“属性”面板输入 ID，如 t1、t2，方便 CSS 和 JS 精准控制。 ② Align 选“居中对齐”可使整体页面居中显示。 ③ 设置完成后先保存，再在标签选择器确认结构，避免嵌套错乱。 2.选取与查看 （1）整体选取 ① 单击表格外缘或状态栏 <table> 标签。 ② 修改菜单“选择表格”亦可。 ③ 选中后可通过“属性”面板统一改宽、高、类。 （2）行列选取 ① 鼠标移至行左缘、列上缘出现黑箭头单击即可。 ② 按住 Shift 连续选，Ctrl 可不连续多选。 ③ 选取后在属性栏直接改背景色或对齐，实现隔行换色。 （3）单元格选取 ① 拖拽、Shift+点击、Ctrl+点击三种方式。 ② 状态栏显示 <td>，可精准进入单格编辑。 ③ 选取即激活合并、拆分、背景、边框等细部设置。 3.行列结构调整 （1）增删行列 ① 右键菜单“表格-插入行/列”最直观。 ② 选中整表后在属性面板直接改行列数值。 ③ 支持一次插入多行或多列，减少重复操作。 （2）合并与拆分 ① 选中连续单元格点“合并”按钮，制作跨列标题。 ② 拆分按钮可设定按行/按列及数量，灵活应对内容变化。 ③ 合并前先清空冲突样式，防止边框重叠显示异常。 （3）复制移动 ① Ctrl+拖放可复制整行或单元格内容。 ② Ctrl+X/V 实现跨表移动，DW 自动提示是否更新链接。 ③ Delete 仅清内容保留格式，方便后续填充。 （多项选择题）以下关于表格创建与基本属性设置的说法，正确的是（ ） A. 插入表格可以通过菜单"插入-表格"或快捷键Ctrl+Alt+T完成 B. 表格宽度选择像素可固定版心，选择百分比可自适应分辨率 C. 表格边框、边距、间距全部置0可实现隐形布局 D. 表格标题选项（顶部/左侧/两者）让语义和样式分离，有利于SEO 【答案】ABCD 【解析】插入表格可以通过菜单"插入-表格"或快捷键Ctrl+Alt+T完成。表格宽度选择像素可固定版心，选择百分比可自适应分辨率。表格边框、边距、间距全部置0可实现隐形布局。表格标题选项（顶部/左侧/两者）让语义和样式分离，有利于SEO。 【要点】考查表格创建与基本属性设置的方法和要点。 1.（单项选择题）在创建表格时，若要使表格在浏览器中不显示边框，应将边框粗细设置为（ ） A. 1 B. 0 C. 2 D. 3 【答案】B 【解析】若要确保浏览器不显示表格边框，则应将边框粗细设置为0。 【要点】考查表格边框设置。 2.（单项选择题）以下哪种方法不能用于选取整个表格（ ） A. 单击表格外缘 B. 单击状态栏中的\<table\>标签 C. 按住Shift键并单击单元格 D. 选择"修改"|"表格"|"选择表格"选项 【答案】C 【解析】选取整个表格的方法包括单击表格外缘、单击状态栏中的\<table\>标签、选择"修改"|"表格"|"选择表格"选项。按住Shift键并单击单元格只能选取多个单元格，不能选取整个表格。 【要点】考查表格选取方法。 3.（多项选择题）以下关于表格行列结构调整的说法，正确的是（ ） A. 可以通过右键菜单"表格-插入行/列"来增加行列 B. 选中整表后在属性面板直接改行列数值可以删除行列 C. 合并单元格可以制作跨列标题 D. 拆分单元格可以设定按行/按列及数量，灵活应对内容变化 【答案】ABCD 【解析】可以通过右键菜单"表格-插入行/列"来增加行列。选中整表后在属性面板直接改行列数值可以删除行列。合并单元格可以制作跨列标题。拆分单元格可以设定按行/按列及数量，灵活应对内容变化。 【要点】考查表格行列结构调整的方法和功能。 1.（填空题）在创建表格时，若要使表格居中显示，可在"属性"面板中设置______为"居中对齐"。 【答案】Align 【解析】在创建表格时，若要使表格居中显示，可在"属性"面板中设置Align为"居中对齐"。 【要点】考查表格对齐方式的设置。 2.（填空题）在创建表格时，若要给表格命名，可在"属性"面板中输入______。 【答案】ID 【解析】在创建表格时，若要给表格命名，可在"属性"面板中输入ID。 【要点】考查表格命名方法。 3.（判断题）在创建表格时，设置表格宽度为百分比可以实现自适应分辨率（ ） 【答案】√ 【解析】设置表格宽度为百分比可以实现自适应分辨率，使表格在不同分辨率下都能保持良好的显示效果。 【要点】考查表格宽度设置的作用。 · 插入：Ctrl+Alt+T设行、列、宽、边框0；选像素固定版心。 · 选取：单击外缘或状态栏<table> · 调结构：右键增删行列；合并/拆分按钮做跨列标题；Ctrl+拖放复制内容。 知识点二 嵌套表格与页面分区布局实战 1.嵌套理念 （1）作用 ① 把外层表格当“骨架”定宽居中，内层表格负责细节栏。 ② 避免单列内容溢出导致整页变形，提升稳定性。 ③ 实现“国”字形、拐角型等复杂版面无需 CSS 浮动。 （2）原则 ① 外层宽用像素固定，内层宽可用百分比自适应父格。 ② 层级控制在 2-3 层，过多拖慢渲染。 ③ 每层边框均设为 0，保持视觉干净。 （3）实战步骤 ① 先插外层 960px 表格，居中设为 t1。 ② 在单元格内再插内层表格，命名 t3、t4 便于管理。 ③ 复制粘贴嵌套结构快速生成“昔日辉煌”“当世枭雄”等并列版块。 2.分区与内容填充 （1）页眉区 ① 2 行 1 列，第一行放 banner 图，第二行做导航文字并加超链接。 ② 背景、高度、水平居中一次性在属性面板完成。 （2）内容区 ① 主表 t2 内再嵌 3 行 5 列照片矩阵，每格宽 190px 保证四列等分。 ② 每个照片格再套 2 行 1 列小表 t4，上行放图，下行写说明。 ③ 栏目标题行设高 30px、背景蓝色，格式选“标题 3”实现加粗居中。 （3）版权区 ① 最外层底表 t5 1 行 1 列，宽仍 960px，背景淡蓝写版权信息。 ② 与上方主表无缝拼接，整体保持固定宽度居中。 3.美化与样式附加 （1）外部 CSS ① 新建 style.css，建类 .bx 控制 1px 淡蓝边框。 ② 在属性面板“类”下拉选择 .bx 即可给任意表加外框，一改全站生效。 （2）隔行变色 ① 选中行后在属性面板设背景 #ECF5FF 与白色交替。 ② 可用 CSS :nth-child 后期替换，更利于维护。 （3）预览检查 ① F12 多浏览器测试，确认 1024 与 1280 分辨率下居中无错位。 ② 用 Dreamweaver 链接检查器扫描，防止图片路径因嵌套而改变。 （多项选择题）在网页设计中，嵌套表格的使用可以实现以下哪些功能（ ） A. 实现复杂的页面布局，如“国”字形、“拐角型”等 B. 避免单列内容溢出导致整页变形，提升页面稳定性 C. 通过嵌套表格实现页面的分区，如页眉区、内容区、版权区 D. 通过嵌套表格实现页面的美化，如添加边框、背景颜色等 【答案】ABCD 【解析】嵌套表格可以实现复杂的页面布局，如“国”字形、“拐角型”等；避免单列内容溢出导致整页变形，提升页面稳定性；通过嵌套表格实现页面的分区，如页眉区、内容区、版权区；还可以通过嵌套表格实现页面的美化，如添加边框、背景颜色等。 【要点】考查嵌套表格的功能。 1.（单项选择题）在创建嵌套表格时，外层表格的宽度通常使用（ ）单位来固定版心。 A. 像素 B. 百分比 C. 厘米 D. 毫米 【答案】A 【解析】外层表格的宽度通常使用像素单位来固定版心，以确保页面在不同分辨率下保持稳定。 【要点】考查外层表格宽度的单位选择。 2.（单项选择题）在创建嵌套表格时，内层表格的宽度通常使用（ ）单位来实现自适应。 A. 像素 B. 百分比 C. 厘米 D. 毫米 【答案】B 【解析】内层表格的宽度通常使用百分比单位来实现自适应，以便在不同分辨率下自动调整宽度。 【要点】考查内层表格宽度的单位选择。 3.（多项选择题）在嵌套表格的使用中，以下说法正确的是（ ） A. 外层表格的边框应设置为0，以保持视觉干净 B. 内层表格的边框应设置为0，以保持视觉干净 C. 嵌套表格的层级应控制在2-3层，过多会拖慢渲染速度 D. 嵌套表格的层级没有限制，可以随意增加 【答案】ABC 【解析】外层表格和内层表格的边框都应设置为0，以保持视觉干净。嵌套表格的层级应控制在2-3层，过多会拖慢渲染速度。 【要点】考查嵌套表格的使用原则。 1.（填空题）在创建嵌套表格时，外层表格的宽度通常使用______单位来固定版心，内层表格的宽度通常使用______单位来实现自适应。 【答案】像素；百分比 【解析】外层表格的宽度通常使用像素单位来固定版心，内层表格的宽度通常使用百分比单位来实现自适应。 【要点】考查嵌套表格宽度的单位选择。 2.（填空题）在创建嵌套表格时，层级应控制在______层，过多会拖慢渲染速度。 【答案】2-3 【解析】嵌套表格的层级应控制在2-3层，过多会拖慢渲染速度。 【要点】考查嵌套表格的使用原则。 3.（判断题）在创建嵌套表格时，外层表格的边框应设置为0，以保持视觉干净（ ） 【答案】√ 【解析】外层表格的边框应设置为0，以保持视觉干净。 【要点】考查嵌套表格的使用原则。 · 嵌套：外层960px居中定骨架，内层百分比自适应；层级≤3防渲染慢。 · 分区：页眉banner+导航；内容区嵌照片矩阵；版权底表无缝拼接。 · 美化：外部CSS类.bx控边框；隔行背景交替；F12多分辨率预览查错位。 知识点三 布局原则、类型与常见问题排查 1.设计三大原则 （1）连贯 ① 色彩、字体、图标风格跨页保持一致。 ② 表格线框、间距统一，视觉上形成整体。 （2）统一 ① 同级模块使用相同行高、背景、对齐方式。 ② 避免一块用百分比一块用像素导致参差不齐。 （3）分割 ① 利用表格行列把信息分块，减少视觉疲劳。 ② 重要区块留白或加背景，形成节奏感。 2.常见布局类型 （1）“国”字形 ① 上标题-banner，中分左中右三栏，下通底版权，适合门户。 ② 用外层 1 列多行表格实现，每行再嵌套分栏表。 （2）拐角型 ① 顶部横幅+左侧窄导航+右侧主内容，下方辅助信息。 ② 一行两列嵌套即可，左侧列宽固定 200px。 （3）封面/Flash 型 ① 首页整屏表格居中，只放 Logo 与“进入”按钮。 ② 背景可插 Flash，表格边框设为 0 不影响动画。 3.常见问题与对策 （1）不能满屏 ① 页面四周有空白：在“页面属性”把 Left、Top Margin 设为 0。 （2）分辨率错位 ② 百分比嵌套导致 1024 下居中 1280 下偏左：外层固定像素+居中。 （3）图片撑爆 ③ 插图比单元格大：把图片设为背景或先裁切到合适尺寸再插入；同时单元格加 overflow:hidden 样式。 （多项选择题）关于网页布局原则、类型与常见问题排查，以下说法正确的是（ ） A. 网页布局设计应遵循连贯、统一、分割三大原则 B. “国”字形布局是最上面是网站的标题，接下来是网站的主要内容，左右分列两小条内容 C. 封面型布局通常出现在企业网站和个人主页中，给人赏心悦目的感觉 D. 表格布局的优势在于能对不同对象加以处理，不用担心不同对象之间的影响 【答案】ABCD 【解析】选项A正确，网页布局设计应遵循连贯、统一、分割三大原则。选项B正确，“国”字形布局是最上面是网站的标题，接下来是网站的主要内容，左右分列两小条内容。选项C正确，封面型布局通常出现在企业网站和个人主页中，给人赏心悦目的感觉。选项D正确，表格布局的优势在于能对不同对象加以处理，不用担心不同对象之间的影响。 【要点】考查网页布局原则、类型与常见问题排查的基本概念。 1.（单项选择题）在网页设计中，以下哪种布局类型适合首页整屏展示，只放Logo与“进入”按钮（ ） A. “国”字形布局 B. 拐角型布局 C. 封面型布局 D. Flash型布局 【答案】C 【解析】封面型布局通常出现在企业网站和个人主页中，首页整屏展示，只放Logo与“进入”按钮，给人赏心悦目的感觉。 【要点】考查封面型布局的特点。 2.（单项选择题）在网页设计中，以下哪种方法可以解决页面四周有空白的问题（ ） A. 设置页面属性，把Left、Top Margin设为0 B. 设置表格边框为0 C. 设置表格宽度为100% D. 设置表格高度为固定值 【答案】A 【解析】页面四周有空白的问题可以通过设置页面属性，把Left、Top Margin设为0来解决。设置表格边框为0、设置表格宽度为100%、设置表格高度为固定值等方法与解决页面四周有空白的问题无关。 【要点】考查常见问题的解决方法。 3.（多项选择题）在网页设计中，以下关于表格布局的说法正确的是（ ） A. 表格布局的优势在于能对不同对象加以处理，不用担心不同对象之间的影响 B. 表格布局的缺点是当使用过多表格时，页面下载速度会受到影响 C. 在设计最外层表格时应使用基于像素的表格，而在内层嵌套表格时应使用基于百分比的表格 D. 表格的边框一定要为0，即 table 中的border属性值为"0" 【答案】ABCD 【解析】选项A正确，表格布局的优势在于能对不同对象加以处理，不用担心不同对象之间的影响。选项B正确，表格布局的缺点是当使用过多表格时，页面下载速度会受到影响。选项C正确，在设计最外层表格时应使用基于像素的表格，而在内层嵌套表格时应使用基于百分比的表格。选项D正确，表格的边框一定要为0，即 table 中的border属性值为"0"。 【要点】考查表格布局的特点和注意事项。 1.（填空题）在网页设计中，为了使页面适应不同的分辨率，通常将表格的大小按______设置。 【答案】百分比 【解析】在网页设计中，为了使页面适应不同的分辨率，通常将表格的大小按百分比设置。 【要点】考查表格大小设置的方法。 2.（填空题）在网页设计中，封面型布局通常出现在______和______中，给人赏心悦目的感觉。 【答案】企业网站 个人主页 【解析】封面型布局通常出现在企业网站和个人主页中，给人赏心悦目的感觉。 【要点】考查封面型布局的适用场景。 3.（判断题）在网页设计中，表格布局的边框一定要为0，即 table 中的border属性值为"0"（ ） 【答案】√ 【解析】在网页设计中，表格布局的边框一定要为0，即 table 中的border属性值为"0"，这样才能实现表格布局的目的。 【要点】考查表格布局的边框设置。 · 原则：连贯统一色彩字体；分割信息块留白节奏。 · 类型：国字形、拐角型用嵌套行列实现；封面型整屏居中无边框。 · 排错：设页面边距0去空白；外层固定像素防分辨率错位；大图改背景或裁切防撑爆。 原创精品资源学科网独家享有版权，侵权必究！2 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $