Dreamweaver8和Flash8案例教程第3章框架、表格、层与网页布局

框架、表格、层与网页布局Dreamweaver8和Flash8案例教程·第3章Contents本章目录框架、表格、层与网页布局的核心技术体系01表格的创建与高级编辑02框架的创建与应用03层的操作与属性设置04网页布局综合技术05案例实战与综合应用CHAPTER01表格的创建与高级编辑掌握网页排版的基础工具，从简单表格到复杂数据布局DREAMWEAVER8·表格基础制作简单表格与调整表格大小表格是Dreamweaver8中最基础的结构化排版工具，通过合理设置行列数、宽度、边距和间距等参数，可以快速构建数据展示区域和页面布局骨架。Dreamweaver8·插入表格对话框工作界面01通过"插入"菜单或快捷键Ctrl+Alt+T打开表格对话框，可一次性设定行列数、宽度、边框粗细等全部初始参数02表格宽度支持像素精确值和百分比自适应两种模式，前者适合固定布局，后者适合响应式页面需求03单元格边距cellpadding控制内容与边框间距，单元格间距cellspacing控制相邻格子间距，两者共同决定表格视觉疏密04拖拽表格边框或选中后在属性面板输入数值均可调整大小，属性面板提供更精确的像素级控制CHAPTER03·表格操作选择表格和设置表格属性准确选择表格对象并合理配置属性面板参数，是高效编辑表格的前提。01精准选中表格：点击边框线、标签选择器中点击table标签、或通过菜单「编辑→全选」三种方式实现定位02对齐方式设置：属性面板可设左、中、右对齐，控制表格在页面中的整体位置，区别于单元格内文字对齐03边框颜色控制：支持十六进制色值和拾色器选取，设为0可隐藏边框，实现早期网页常用的无边框布局04背景模式选择：纯色与背景图片两种模式，图片按单元格尺寸自动平铺，可制作带纹理的数据展示区Dreamweaver8属性面板·表格参数调整场景TableEditing编辑表格：合并、拆分与行列操作灵活的表格编辑能力是将简单网格转化为复杂布局的关键。合并与拆分单元格可以创建不规则结构，行列的增删调整则确保表格始终匹配内容需求，两者结合才能实现专业级的表格排版。01合并单元格选中相邻单元格后点击属性面板"合并"按钮，常用于创建跨列通栏标题或复杂表头结构04Tab键导航Tab键在单元格间正向跳转，Shift+Tab反向跳转，填充数据时比鼠标点击效率提升数倍02拆分单元格选中目标单元格执行拆分，可按行或列方向一分为多，适用于细化局部数据展示区域05内容嵌套单元格内可嵌套插入图片、表单、甚至另一个表格，实现丰富的图文混排效果03增删行列通过右键菜单或"修改"菜单中的表格子菜单，支持在任意位置插入或删除整行整列06尺寸调整拖动边框线可直观调整列宽和行高，配合Shift键可保持相邻单元格尺寸不变CHAPTER02框架的创建与应用掌握多页面分区显示技术，实现导航与内容的灵活组合Chapter03·框架与布局创建框架与框架集基础框架技术通过将浏览器窗口分割为多个独立区域，每个区域加载不同的HTML文档，实现导航与内容分离的经典网页结构，是理解现代iframe嵌入和SPA路由的基础概念。网页框架分栏布局设计效果示意01框架集(frameset)是定义窗口分割方式的容器文件，本身不包含显示内容，只存储各框架的尺寸比例和源文件地址02Dreamweaver8提供多种预设框架集类型：左右分栏、上下分栏、嵌套分栏等，通过"插入"→"HTML"→"框架"一键创建03每个框架(frame)独立加载一个HTML文档，修改一个框架内的内容不会影响其他框架，实现局部刷新的交互体验04框架的cols和rows属性控制分割比例，支持像素固定值、百分比和星号(*)弹性分配三种尺寸设定方式FRAMEWORK·框架属性配置编辑框架与设置框架属性框架的灵活编辑和属性配置是实现复杂多区域页面的关键。通过合理设置框架名称、滚动行为和边界属性，可以构建出用户体验良好的导航-内容分离式网页结构。尺寸精确控制拖拽框架边框可直观调整区域大小，框架集代码中cols/rows属性提供像素、百分比、星号三种精确尺寸控制方式，实现响应式布局的灵活调配。cols·rows·px·%·*跨框架链接标识框架名称（name属性）是跨框架链接的核心标识，设置后可让导航链接指定在特定框架中打开目标页面，实现页面间的无缝跳转与内容联动。nameattribute·target滚动行为优化滚动属性（scrolling）设为yes始终显示、no隐藏、auto自动判断，按内容长度智能控制各区域的浏览体验，提升页面交互的流畅度。yes·no·auto面板精准选择"框架"面板以缩略图形式展示所有框架结构，点击选中比设计视图中直接点击更精准，特别适合嵌套框架场景，大幅提高编辑效率。thumbnail·nestedFRAMES·FILEMANAGEMENT框架内容插入与文件保存管理框架页面的文件管理比普通网页更复杂，一个框架页面涉及框架集文件和多个内容文件的协同管理。掌握正确的插入与保存流程，是避免文件关联丢失和链接失效的关键。框架页面文件管理需要系统性保存策略内容插入选中目标框架后可直接插入文字、图片、表格等任何网页元素，操作方式与普通页面编辑完全一致，无需额外学习成本。文件保存需分别保存框架集文件和每个框架的内容文件，使用"文件→保存全部"功能可一次性完成所有关联文件的保存，避免遗漏。内容复用框架的src属性可指向任意HTML文件路径，支持在框架中嵌入已制作好的独立页面，实现内容的高效复用与模块化维护。跨框架链接链接需设置target属性指向目标框架名称，如target='mainFrame'让内容在右侧主框架中打开，实现多框架间的导航交互。Dreamweaver8·框架工具框架观察器与框架属性栏详解框架观察器是Dreamweaver8中管理框架结构的核心可视化工具，配合框架属性栏使用可以高效完成框架的创建、选中、重命名和参数调整等全部操作，是框架开发的工作效率倍增器。打开与查看通过「窗口→框架」打开观察器，以缩略图形式展示当前页面的完整框架结构，直观呈现嵌套关系和区域划分。支持实时预览框架层级，点击即可快速定位到具体框架进行编辑操作。窗口→框架拖拽创建框架在观察器中拖拽边框可快速创建新框架，比菜单插入更灵活，适合需要反复调整分割方案的场景。支持水平或垂直方向自由拆分，实时显示分割比例，精确控制各区域尺寸。灵活拆分·自由调整属性栏参数属性栏集中展示选中框架的全部参数：名称、源文件、滚动方式、边框显示、尺寸等，修改后即时生效。无需切换面板即可完成所有配置，大幅提升框架页面搭建效率。即时生效·一站式配置语义化命名框架名称建议使用语义化标识如navFrame、mainFrame，便于在跨框架链接中准确指定target目标。清晰的命名规范让团队协作和维护更加高效，降低后期修改成本。navFrame·mainFrame·headerFrameCHAPTER03层的操作与属性设置掌握精确像素级定位技术，实现自由灵活的页面元素排列DREAMWEAVER8·APDIV创建层和设置层的默认属性层(APDiv)是Dreamweaver8中实现CSS绝对定位的可视化工具，通过position:absolute属性让元素脱离文档流，可以精确定位到页面任意坐标，是实现重叠、悬浮和自由布局的技术基础。01position:absolute通过"插入→布局对象→APDiv"创建层，代码层面生成带position:absolute的div标签并包含坐标参数02层手柄出现在页面左上角，拖拽手柄可直观移动层位置，属性面板实时显示当前left和top坐标值03"AP元素"面板集中管理所有层：修改名称、调整z-index层叠顺序、切换可见性（vis属性），支持批量操作04通过"首选参数→AP元素"可预设新建层的默认宽度、高度和背景色，减少重复配置提升效率CSS布局工作场景LAYEROPERATIONS层的基本操作：移动、缩放与对齐层的操作灵活性是其相比表格布局的最大优势。通过拖拽、键盘微调、多选对齐和嵌套等丰富的操作方式，设计师可以精确控制每个元素在页面中的位置和尺寸，实现高度自由的版面编排。精确定位拖拽手柄粗略定位，键盘方向键1像素精确微调，Shift+方向键10像素快速移动，满足从粗调到精调的全部需求1px微调批量对齐按住Shift键可多选层，多选后属性面板提供左对齐、顶端对齐、等间距分布等批量对齐功能，确保布局整齐Shift多选嵌套关系在层内部创建新层形成嵌套关系，子层坐标相对于父层计算，移动父层时子层跟随，适合制作下拉菜单等组件父子跟随内容灵活层可包含文字、图片、表单等任何HTML元素，且支持设置overflow属性控制内容溢出时的显示方式overflowLayerProperties设置层的属性：z-index与可见性控制层的高级属性配置是实现复杂视觉效果的基础。z-index控制层叠顺序让元素可以重叠排列，可见性属性支持动态显隐切换，溢出属性管理内容边界，三者组合使用可创造出悬浮弹窗、轮播覆盖等丰富的交互效果。核心定位属性z-index数值决定层叠顺序值越大越靠前，合理设置可避免弹出层被遮挡或导航栏被内容覆盖，是实现模态框和悬浮菜单的关键属性可见性属性四种模式visible显示、hidden隐藏但占位、inherit继承父层，支持JavaScript动态切换，常用于标签页和内容切换背景色与背景图设置与普通div一致，半透明背景可通过CSS的opacity属性实现毛玻璃和遮罩效果，增强视觉层次感内容与边界控制溢出(overflow)属性控制内容超出层边界时的处理方式：visible允许溢出、hidden裁剪、scroll/auto添加滚动条，用于固定尺寸容器裁剪(clip)属性应用只显示层的局部区域，定义上右下左四个方向的裁剪距离，常用于图片局部展示特效和动画遮罩效果CSS样式统一管理通过Dreamweaver的CSS样式面板统一管理，支持类选择器复用和外部样式表链接，提升开发效率LayoutConversion表格与层的相互转换表格与层的转换功能体现了Dreamweaver8对两种主流布局方式的桥接设计。表格适合快速搭建网格结构，层适合精细定位调整，转换功能让设计师可以在两种工作模式之间灵活切换，兼顾效率与精度。网页布局设计中网格与定位的协同关系01表格到层

TABLE→APDIV通过"修改→转换→表格到层"可将每个单元格转为独立的APDiv，坐标值根据原表格位置自动计算。02层到表格

APDIV→TABLE"层到表格"转换将各层映射为表格单元格，按层的相对位置关系生成行列结构，适合将自由布局规范化。03手动微调

REFINE自动转换后通常需要手动微调：层转表格可能产生多余空白单元格，表格转层可能丢失跨行跨列结构。04最佳实践

BESTPRACTICE先用表格快速搭建整体骨架，确认比例关系后再转为层进行精细的位置和效果调整。CHAPTER04网页布局综合技术融合表格、框架与层，构建专业美观的完整页面结构LayoutView布局视图与布局工具栏详解布局视图是Dreamweaver8的特色功能，将传统表格布局的复杂参数设置简化为直观的拖拽绘制操作。设计师可以像在白板上画草图一样直接在页面上绘制布局区域，大幅降低了网页排版的入门门槛。01通过「查看→表格模式→布局视图」切换进入，页面变为可绘制的画布状态，支持直接拖拽创建布局区域02「绘制布局表格」按钮创建外层容器，「绘制布局单元格」按钮在容器内划分内容格，操作类似在画布上画框03布局表格和单元格可随时拖拽边缘调整大小，相邻区域自动对齐吸附，避免意外的间隙或重叠04底层仍生成标准HTML表格代码，可在「标准模式」与「布局视图」之间自由切换查看和编辑设计师在布局视图中绘制页面线框LAYOUTVIEWTIPS布局视图操作技巧与常见问题处理布局视图的快捷键和吸附机制是提升绘制效率的关键。掌握连续绘制、精确控制和间距调整等操作技巧，可以显著加速页面布局的搭建过程，同时避免常见的对齐和间距问题。连续绘制按住Ctrl键可连续绘制多个布局单元格，免去反复切换工具的麻烦，大幅提升复杂页面的绘制效率。Ctrl自动吸附单元格边缘8像素内自动吸附对齐，确保相邻区域无缝贴合；按住Alt键可临时关闭吸附进行自由定位。8px间距调整通过'布局'工具栏统一调整间距，也可手动拖拽单个边缘实现不等间距的灵活布局。灵活间距内容填充完成绘制后切换到标准模式，在每个布局单元格内点击'插入内容'提示即可开始填充文字、图片等元素。标准模式LAYOUTSTRATEGY网页布局的调整与设置策略网页布局的调整是将设计稿转化为可用页面的最后一步。通过合理的宽度设定、居中策略和自适应配置，确保页面在不同分辨率和浏览器环境下都能保持良好的视觉效果和内容可读性。宽度与对齐控制01主流网页宽度标准：960px适配1024分辨率、1200px适配1920分辨率，通过布局表格宽度属性一键设定960/1200px02页面居中显示：布局表格对齐方式设为'居中对齐'，让内容区域在不同宽度浏览器中始终居中居中对齐03'自动伸展'功能让指定列占满剩余空间，适用于左侧固定宽度导航+右侧自适应内容区的经典布局自动伸展预览与兼容调试01F12快捷键在默认浏览器中预览页面效果，建议在Chrome、Firefox、IE中分别测试确保兼容性F12预览02Dreamweaver的'浏览器兼容性检查'功能可自动检测代码中可能导致跨浏览器显示异常的属性兼容性检查03布局视图的'间距图像'功能用透明gif占位符维持列宽，防止空列在部分浏览器中自动坍缩间距图像LAYOUTCOMPARISON三种布局技术对比与选用策略表格、框架和层是Dreamweaver8中三大核心布局工具，各有所长也各有限制。理解它们的技术特点和最佳适用场景，才能做出正确选型。技术特性对比表格基于网格流的行列结构，适合结构化数据展示和简单网格布局，兼容性好但灵活性受限网格流框架多文档分区显示，各区域独立加载刷新，适合导航与内容分离场景，但不利于SEO和书签分享分区加载层CSS绝对定位的自由坐标系统，支持重叠和精确定位，灵活度最高但需要更多的代码控制自由坐标项目选用建议结构化内容数据报表、课程表、价格对比等优先使用表格，利用行列对齐天然保证数据的整齐呈现数据报表多面板应用后台管理系统、在线邮箱等使用框架或iframe，实现导航固定加内容区域独立刷新后台管理视觉导向设计企业官网、营销页面等优先使用层布局，配合CSS实现精确的视觉还原和动效支持企业官网CHAPTER05案例实战与综合应用通过四个完整项目，将表格、框架、层与布局技术融会贯通CASESTUDY案例实战：制作"值班表"网页值班表网页是表格布局的经典应用场景，通过合并表头、设置交替行背景色和精细边框控制，将一个简单的排班数据转化为清晰美观的信息展示页面。目的页面标题区域层级对比升可读性分类对齐策略日期和姓名居中、备注信息左对齐、电话号码右对齐，符合数据展示规范办公室值班排班的实际应用场景CaseStudy案例实战：制作"香山美景"网页香山美景网页利用左右分栏框架实现图片画廊效果，左侧导航栏固定显示景点缩略图列表，右侧主框架动态展示对应景点的大图和介绍，是框架技术在图片浏览类网站中的经典应用模式。北京香山公园·红叶风景实景01创建左右分栏框架集，左侧框架宽度设为200px固定值放置导航列表，右侧框架用星号（*）占据剩余全部空间。02左侧框架内制作景点缩略图列表，每张图片下方标注景点名称，链接的target属性指向右侧框架名称。03右侧框架初始加载欢迎页面，包含大图展示区域和文字介绍，图片宽度设为100%自适应框架宽度。04左右框架分别设置滚动属性，左侧scrolling="auto"、右侧scrolling="yes"，确保内容较多时用户可顺畅滚动浏览。CASESTUDY案例实战：制作"香山简介"网页香山简介网页通过层的叠加和透明度控制，实现了背景大图与前景文字信息融合的高级视觉效果。这种图文叠层技术是网页设计中制作Banner、卡片和封面区域的常用手法，体现了层布局在视觉表现力上的独特优势。01背景层：底层放置香山风景大图，设置width:100%覆盖页面宽度，z-index设为最低确保被其他层覆盖z-index:002文字层：叠加在背景图上方，设置半透明白色背景保证可读性同时透出底图效果α0.8503标题层：使用大号字体和深色文字，z-index设为最高确保始终显示在最前，通过left和top精确控制位置顶层04统一管理：各层通过AP元素面板统一管理命名和顺序，避免后期调整时出现层遮挡混乱AP面板北京香山·秋季红叶山景—网页背景层素材CASESTUDY·综合实战案例实战：制作"北京香山"综合网页北京香山综合网页是本章的终极实战项目，将框架分区、表格排列、层定位和布局视图四大技术融会贯通。01混合框架集架构顶部框架固定高度放置Banner和标题，下方分为左侧导航框架和右侧内容框架FRAMESET02布局视图定骨架先绘制整体骨架确定各区域比例：顶部100px、左侧200px、右侧自适应填满剩余空间100·200·AUTO03多文件分工维护框架集index.html为入口，顶部、导航、内容分别为独立HTML文件便于协作INDEX.HTML04表格菜单导航表格排列菜单项，hover变色，链接target指向右侧内容框架实现局部刷新TARGET05层叠加图文融合层叠加香山风景图与文字介绍，z-index控制前后关系，半透明背景实现图文融合Z-INDEX06底部版权跨列底部版权区跨两列框架合并，表格居中排列版权文字与联系方式，保持风格统一COLSPAN—页面架构规划·01–03—多技术协同实现·04–06CHAPTERREVIEW本章核心知识点回顾本章系统学习了Dreamweaver8中四大网页布局技术——表格、框架、层和布局视图，每项技术都有其独特的优势和最佳应用场景。掌握它们的组合使用方法，是从网页制作初学者进阶为合格网页设计师的关键一步。表格操作全流程创建→编辑(合并/拆分/增删)→排序→格式化，掌握数据展示和网格布局的完整技能链创建→格式化框架技术核心框架集定义分割结构、各框架独立加载文档、通过target属性实现跨框架导航链接target跨框架层定位关键position:absolute坐标系统、z-index层叠控制、vis可见性切换、overflow溢出管理z-index层叠布局视图优势可视化拖拽绘制页面骨架、自动吸附对齐、底层生成标准表格代码、与标准模式自由切换可视化拖拽PRACTICE思考与练习课后练习是巩固网页布局技能的必要环节。从单项操作练习