网页设计与制作项目教程（第四版） 模块03利用表格和内联框架设计规整的网页

网页设计与制作项目教程（第四版）模块03利用表格和内联框架设计规整的网页教学课件教学目标：学习目标•理解表格核心属性：行、列、单元格、边距、间距、边框、宽高。•掌握表格布局技术：布局设计、背景设置及嵌套表格应用。•熟悉内联框架：理解IFRAME的作用、属性及页面嵌入方法。教学重点表格是网页排版的“骨架”，IFRAME是实现“画中画”功能的利器。本章重点在于通过表格实现规整的、像素级的精确布局。教学目标：能力与素养目标能力目标熟练运用嵌套表格进行复杂布局；通过属性设定实现精确排版；能利用IFRAME加载外部内容并分割页面。素养目标追求卓越：通过精确的像素级设计提升用户体验；

创新思维：探索多样化的页面展示结构。知识要点与关联知识知识要点能力要求关联知识表格的属性理解行、列、单元格、边距、间距、边框、宽高利用表格进行布局理解表格创建、合并与对齐；插入文字/图像/嵌套表格IFRAME框架设计掌握框架创建、设置属性、对象插入及定位任务引领1：幼儿园食谱制作任务说明：通过“幼儿园食谱”案例，掌握创建、调整表格的方法，学习如何通过合并单元格和设置背景颜色来美化数据展现。展示：规整的食谱数据、行列背景色区分、单元格合并效果核心知识点•表格行、列的插入•单元格合并操作•非连续单元格的颜色填充•文字格式（加粗/颜色）精修步骤1：创建站点与文件初始化•操作步骤：•1.新建站点命名为task1。•2.创建目录images存放素材图片。•3.新建index.html，光标定位首行。•4.插入顶部图片weekfood.jpg，按回车下移光标。规范提醒先插图后插表，确保页面结构从上至下逻辑清晰。图片必须放入站点目录，避免上传后路径失效。步骤2：插入表格与参数设置参数设定建议逻辑说明行数/列数根据食谱行列设定食谱主体结构表格宽度固定像素或100%控制页面占比边框粗细1px可见辅助线单元格间距/边距5px防止文字紧贴边框•具体操作：菜单“插入”->“表格”。•参数设置建议：步骤3：单元格合并原子化拆解•操作方法A(快捷菜单)：•选中目标单元格->右击->“表格”->“合并单元格”。•操作方法B(属性面板)：•选中后直接点击属性面板左下角的“合并单元格”按钮。为什么合并？用于创建非规整的网格，例如“早餐”单元格需要跨越三行。这是实现复杂排版的必经之路。步骤4：背景颜色设置细节•连续选取：鼠标左键拖拽选中整行或整列。•不连续选取：按住Ctrl键点击不同单元格。•颜色设定：在属性面板“背景颜色(Bg)”框内输入十六进制值（如#3A0DF4）或调色板选择。视觉逻辑通过深浅交替的背景色，可以极大增强表格的可读性，引导用户视线。注意：文字颜色与背景色需保持高对比度。专家提示：表格宽度的度量权衡在属性面板修改宽度时，应如何选择？•像素(px)：

固定布局。无论浏览器多大，表格大小不变。适用于精确排版。•百分比(%)：

流式布局。表格随浏览器窗口缩放而自动伸缩，适配不同分辨率。•注意：属性面板左下角可实现两者的一键转换。相关知识：表格属性面板1参数必记CellPad(边距)：内容到边框的距离。

CellSpace(间距)：单元格之间的距离。注意：当边框(Border)设为0时，表格线将隐藏，常用于隐形网页布局。①为表格设置一个id，便于脚本语言调用②修改表格的行数与列数③可设具体值修改表格宽度，一般不设置而让其自动调节④表格内的内容与表格边框的距离⑤各单元格之间的间距⑥表格在页面上的对齐方式，有默认、左对齐、居中对齐、右对齐四种对齐方式⑦设置边框线的宽度，当值为0时，表格无边框⑧可以自动清除列中多余的宽度⑨可以自动清除行中多余的高度高级技巧：从Excel导入表格数据操作流程：•1.Excel中另存为“文本文件(制表符分隔)”。•2.记事本中打开，另存为UTF-8编码（极其重要）。•3.DW中选择菜单：“文件”->“导入”->“表格式数据”。•4.选择定界符并确认。为什么改编码？Excel默认ANSI编码会导致导入DW后中文出现乱码。转换为UTF-8是解决乱码的通用方案。任务引领2：利用表格进行页面设计任务说明：以“党史学习”网页为例，学习如何利用表格将一幅大型图片分割布局，并通过嵌套表格实现复杂的内部导航结构。核心挑战•精确的行列宽高设定（px）•消除图片间隙（CSS技巧）•嵌套表格的应用•吸管工具取色保持风格统一步骤1：精确布局与参数设定•表格主体：3行3列，宽度740px，边框0。•合并与宽高：排版逻辑这种典型的“工”字型或“品”字型布局，是网页经典排版。通过精确的像素设定，可以确保分割后的图片拼合无间隙。○第一行合并，高度设定为75px。○第二行侧边格：宽80，高264。○第三行合并，高度设定为124px。关键突破：消除单元格图片间隙问题：即使边框设为0，图片间仍有1像素间隙，导致图片“破碎”。解决方案：CSS强制定义核心技巧：display:block;消除行内元素基线间隙•1.在CSS设计器中为tr设定：

padding:0;margin:0;•2.为img设定：

display:block;步骤2：嵌套表格与导航制作•操作步骤：•1.在第二行中间单元格插入2行4列的嵌套表格。•2.设定属性：CellPad=0,CellSpace=0。•3.取色填充：使用属性面板吸管工具，从背景图中提取红色填充导航背景。•4.插入文字超链接，链接地址暂设为“#”。为什么要嵌套？嵌套表格是为了在不影响主结构的情况下，对局部区域进行独立的精细排版。外层管全局，内层管细节。专家提示：嵌套表格的“度”关于嵌套深度与性能的平衡：•推荐深度：嵌套层数通常以不超过3层为宜。•负面后果：嵌套过深会导致浏览器渲染速度变慢，且代码维护难度呈指数级增加。•对齐限制：嵌套表格的宽度永远受限于其所在单元格的物理宽度。美化技巧：制作精美细框线表格原理：利用背景色差与间距。•1.插入一个1行1列的大表，背景设为黑色（#000000），CellSpace=1（间距）。•2.在大表中嵌套一个100%宽的子表，背景设为白色（#FFFFFF）。•3.此时，大表的黑色背景通过1像素的间距缝隙透出来，形成了完美的细边框效果。相关知识：使用“跟踪图像”辅助布局什么是跟踪图像？它允许用户将平面设计稿（如PS导出的图）作为半透明背景，起到“临摹”的作用。•设置路径：页面属性->“跟踪图像”分类->浏览图片。•参数：透明度（推荐50%）。•特性：仅在DW编辑时可见，浏览器浏览时自动消失。任务引领3：IFRAME框架布局任务说明：利用表格分割页面，左侧作为书籍列表，右侧通过IFRAME框架实现点击左侧、右侧自动加载对应网页的效果。框架优势•无须切割页面即可实现“画中画”•内容独立加载，不破坏主布局•Target目标定位的核心练习步骤1：插入IFRAME标签•操作：菜单“插入”->“HTML”->“IFRAME”。•属性配置（代码视图）：name="main"重点：Name属性必须为框架设置name属性。这是后面超链接能够准确把内容“投射”进框架的唯一凭证。步骤2：超链接Target指向•操作流程：•1.选中左侧文字（如“西游记”）。•2.插入超链接，链接指向具体详情页（xiyouji.html）。•3.关键点：在“目标”(Target)文本框中输入IFRAME的名称“main”。逻辑解析默认超链接会在原窗口打开。通过设置Target为框架名，浏览器会将目标网页内容加载到指定的内联框架内，实现局部刷新感。专家提示：IFRAME滚动条逻辑Scrolled属性的三个值：•Yes：始终显示滚动条（即使内容很少）。•No：始终不显示滚动条（内容超出部分将被隐藏）。•Auto(推荐)：仅在内容超出框架高度时自动显示滚动条，保持界面简洁美观。深度理论：IFRAME标签代码详解属性功能说明备注src指定初始显示的外部网页文件名必需属性name指定框架名称，供链接Target使用必需属性width/height定义框架的物理尺寸支持像素或百分比frameborder是否显示框架边框（1显示，0隐藏）常用0隐藏marginwidth内容与左右边框的余白距离-项目渐近：“我心飞扬”之爱好分享实战要点：制作“影音风云榜”和“经典文学”两个栏目页。使用表格实现“左菜单右内容”布局，右侧内容区采用IFRAME框架动态加载详情。阶段挑战•嵌套10行1列的导航小表•设置表格bgclassic.jpg背景图•统一内容介绍页的风格样式•精确设置IFRAME的src初始页步骤：构建“影音页”复杂结构•1.总表3行1列，居中对齐，宽950。•2.中间格拆分：分出左右单元格。•3.左侧导航：嵌套10行1列小表，每个高度33px。•4.右侧内容：插入IFRAME，name="main",src="iframemain.html"。排版技巧将左侧宽度固定（如200px），右侧根据剩余空间自动或设为固定值。这种“固定+灵活”的组合是网站排版最稳定的方案。拓展训练：个人求职网页设计回味思考：客观练习(1)•1.制作网页最常见的布局方法是？

答案：A.表格布局•2.单元格间距(CellSpacing)是指单元格与什么之间的距离？

答案：B.单元格(即单元格之间的缝隙)•3.在“表格”对话框中，表格宽度可以用哪两种单位表示？【多选题】

答案：B.px(像素)&C.百分比回味思考：客观练习(2)•4.如果想彻底隐藏表格的边框，必须将边框粗细值设置为？

答案：A.0•5.下面关于IFRAME的说法正确的是？【多选题】

答案：A.嵌入其他网页、B.分割页面、C.加载外部内容•6.在DW中，对单元格可以进行哪些操作？【多选题】

答案：A.删除、B.合并、C.拆分、D.设置颜色思考题：背景与嵌套逻辑Q：在Dreamweaver中，如何实现表格背景色和背景图像设置？Q：嵌套表格的原理是什么？逻辑解析：

1.背景颜色：选中表格/单元格，直接在属性面板“背景(Bg)”框选择。

2.背景图像：推荐使用CSS设计器。在table或td的选择器属性中，通过background-image浏览选择素材。逻辑解析：将一个完整的表格作为网页元素插入到另一个表格的单元格中。子表的大小受父格限制，通过这种方式可以解决行高和列