DwMX第6章使用框架

DreamweaverMX第6章使用框架——网页布局的经典技术Contents本章目录DreamweaverMX第6章：使用框架01框架基本概念与原理02创建和编辑框架集03框架属性设置详解04嵌套框架集的应用05框架链接与保存预览CHAPTER01框架基本概念与原理理解框架、框架集及其在网页布局中的作用CHAPTER06·FRAMES什么是框架框架技术将浏览器窗口划分为多个独立窗格，每个窗格可显示单独的HTML文档，实现分区展示与独立更新。01单一窗口局限传统浏览中一个页面对应一个窗口，所有内容在单一窗口显示，无法实现内容的分区独立控制，页面结构缺乏灵活性。02窗格独立划分框架将浏览器窗口划分为多个Frame窗格，每个窗格作为独立显示区域，可加载不同的HTML文档，实现内容模块化组织。03局部内容更新各框架内文档相互独立，通过超链接实现局部内容更新，无需刷新整个页面，有效提升用户体验与导航效率。04经典布局模式框架常用于导航栏与内容区的分离设计，如左侧固定导航、右侧显示详情，是早期网页开发中的经典布局模式之一。FRAMEAPPLICATION框架的典型应用场景框架最典型的应用是将导航控件与主要内容分离，通过超链接实现局部内容更新，既保持导航可见性，又提升页面加载效率和用户操作体验。导航与内容分离一个或多个框架显示导航菜单，另一个框架显示主要内容，导航始终可见，用户可随时切换栏目而不丢失导航上下文。双区分离局部内容更新点击导航超链接时仅目标框架内容变化，其他框架保持不变，无需整页刷新，大幅减少数据传输量，提升响应速度。局部刷新典型布局示例顶部显示Logo与标题，左侧显示分类导航，右下显示具体产品或文章详情，形成清晰的信息层级结构。三区分栏适用场景早期企业网站、在线帮助文档系统、后台管理系统等需要固定导航结构的应用，适合内容相对稳定的场景。固定导航Frameset框架集（Frameset）的概念框架集是组织和管理框架的HTML文件，定义框架的数目、大小、位置及初始加载页面的URL，本身不包含显示内容，仅作为布局结构的容器。HTML代码编辑器工作场景01布局结构定义：框架集是一种特殊的HTML文件，用于组织和定义页面中所有框架的布局结构，包括框架的数目、大小、位置等属性。02结构不含内容：框架集文件本身不包含要在浏览器中显示的HTML内容，仅定义框架的结构和初始加载页面的URL地址。03独立显示区域：框架集中的每个框架都是独立的显示区域，可以加载不同的HTML文档，并通过超链接实现内容的动态更换。04容器与内容：框架集与框架的关系类似于容器与内容——框架集定义"如何分割窗口"，框架负责"显示什么内容"。DreamweaverMX·第6章框架与框架集的区别框架集是定义布局结构的父级HTML文件，框架是框架集内显示具体内容的子区域；一个框架集可包含多个框架，两者配合构成完整的框架页面系统。框架集（Frameset）01定义页面整体布局结构的HTML文件，规定框架的数目、大小、位置等属性02本身不包含显示内容，仅作为框架的容器和组织者03每个框架集文件可包含多个框架，形成复杂的页面分区结构框架（Frame）01框架集内的独立显示区域，每个框架可加载单独的HTML文档02负责显示具体的网页内容，如导航菜单、文章正文、图片等03框架内的内容可通过超链接动态更换，实现局部刷新效果CHAPTER02创建和编辑框架集掌握预定义框架集创建与自定义框架编辑的操作技巧DreamweaverMX·框架创建框架集的两种方法DreamweaverMX提供预定义框架集和自定义框架集两种创建方式，前者通过内置模板快速生成标准布局，后者通过手动拆分实现个性化设计，满足不同场景需求。01预定义框架集：从软件内置的多种标准布局模板中选择，自动创建相应格式的框架集和框架，是最快捷的方式。02自定义框架集：通过手动拆分文档窗口，按需设计框架的数目、大小和位置，灵活性更高，适合特殊布局需求。03适用场景对比：预定义框架集适合快速搭建标准页面结构（如左导航+右内容），自定义框架集适合复杂或非标准布局。04组合使用：先用预定义框架集创建基础结构，再通过编辑操作调整和细化框架布局，兼顾效率与灵活。DreamweaverMX·Chapter06通过插入面板创建预定义框架集通过插入面板的"框架"选项卡可快速创建预定义框架集，图标中蓝色区域表示当前文档位置，白色区域为其他框架，操作需在设计视图中完成。Dreamweaver设计视图·框架集操作界面01在"文档"窗口的设计视图中，将插入点放置在当前文档中，确定当前文档将显示在哪个框架内02打开插入面板，切换到"框架"选项卡，浏览预定义框架集图标（蓝色区域表示当前文档，白色区域为其他框架）03单击所需的预定义框架集图标，或从"插入"菜单→"框架"子菜单中选择框架集类型04系统自动创建框架集结构，当前文档被放入指定框架，其他框架显示为空白或提示加载内容此操作只能在设计视图中执行，不能在"代码视图"或"拆分视图"中进行STEPBYSTEP通过新建文档对话框创建空框架集通过"文件"→"新建"命令打开对话框，选择"框架集"类别可创建空的框架集文件，适合从零开始构建框架页面，需后续手动配置各框架内容。01打开新建对话框：选择菜单"文件"→"新建"命令，打开"新建文档"对话框02选择框架集类别：在对话框左侧类别列表中选择"框架集"，右侧显示可用的框架集布局列表03选择布局类型：从列表中选择所需布局（如"顶部固定，左侧嵌套"等），预览区显示布局示意图04创建框架集文件：单击"创建"按钮，系统生成空的框架集文件，各框架初始为空白状态05后续操作：手动为每个框架指定要显示的HTML文件，可通过属性面板设置框架的"源文件"属性Dreamweaver"新建文档"对话框界面FRAMES·DREAMWEAVERMX自定义创建框架集的准备工作自定义创建框架集前，必须通过"查看"→"可视化助理"→"框架边框"命令使边框在设计视图中可见，这是进行框架拆分和编辑操作的前提条件。01前提条件：在创建自定义框架集或编辑现有框架前，必须确保框架边框在"设计视图"中可见02操作方法：选择菜单"查看"→"可视化助理"→"框架边框"命令，勾选该选项以显示框架边框03视觉效果：开启后，文档窗口边缘会显示灰色的框架边框线，标识框架的边界位置04重要性：框架边框是进行拖拽、拆分、调整等编辑操作的视觉参考，隐藏状态下无法进行精确操作05提示：框架边框仅在设计视图中可见，在浏览器预览时不会显示，除非在属性中特别设置Dreamweaver设计视图中的可视化助理菜单步骤操作通过菜单命令创建自定义框架集通过"修改"→"框架页"子菜单的拆分命令（如拆分左/右/上/下框架），可将当前光标所在的框架分割为多个子框架，逐步构建自定义布局。01创建新文档或打开现有文档，确保框架边框已在设计视图中显示02选择菜单"修改"→"框架页"命令，展开框架拆分选项子菜单03从子菜单中选择拆分命令，如"拆分左框架""拆分右框架""拆分上框架"或"拆分下框架"04窗口被拆分成多个框架，原始文档内容显示在某一框架中，新框架为空白状态可对新生成的框架继续执行拆分操作，逐步构建复杂的多框架布局结构Dreamweaver·修改菜单→框架页拆分操作FRAMEWORKSPLIT通过拖拽边框可视化拆分框架直接拖拽设计视图边缘的框架边框可直观地拆分框架，按住Alt键拖拽可在任意位置分割，从角落拖拽可将框架一分为四，操作灵活且可精确控制比例。Dreamweaver设计视图中拖拽框架边框的操作场景基础拖拽：将设计视图边缘的框架边框拖向视图中间，可垂直或水平拆分框架，释放鼠标即完成分割Alt键辅助：当框架边框不在边缘时，按住Alt键同时拖拽现有边框，可在任意位置创建新的框架分割四向拆分：将框架的一角从设计视图角落拖拽到框架中间，可将单个框架同时水平和垂直分割为四个子框架优势：拖拽方式比菜单命令更直观灵活，可实时预览框架大小比例，适合需要精确控制布局的场景注意：拖拽过程中会显示框架的实时尺寸，松开鼠标后框架大小即固定，可通过后续调整微调CHAPTER06·FRAMEWORK删除框架与框架集通过将框架边框拖离页面或拖至父框架边框可删除单个框架，关闭文档窗口或使用"删除全部框架"命令可移除整个框架集，删除操作不影响框架内HTML文件本身。删除单个框架将框架边框拖离页面或拖到父框架的边框上，释放鼠标即完成删除操作。被删除框架占据的空间会自动被相邻框架扩展填充。拖离删除空间自动填充删除框架后，该框架原本占据的空间会被相邻框架自动扩展填充，无需手动调整其他框架尺寸，布局保持完整。自适应布局删除整个框架集关闭文档窗口，或选择"修改"→"框架页"→"删除全部框架"命令，可一次性移除页面中的所有框架结构。全部移除文件保留删除框架仅移除布局结构，框架内加载的HTML文件仍保存在项目文件夹中，不会随框架删除而被删除或修改。HTML保留注意事项删除前应确保框架内内容已保存，避免未保存的编辑内容丢失。建议先保存所有文档再进行框架删除操作。先保存CHAPTER03框架属性设置详解掌握框架大小、边框、滚动条等关键属性的配置方法FRAMEWORKPROPERTIES调出框架属性面板通过按住Alt键单击框架内部或在'框架'面板中点击框架图标可选中框架，属性面板随之显示该框架的可配置属性；选中框架集则显示框架集属性。01Alt+单击：按住Alt键，在框架内部任意位置单击鼠标左键，框架边框会高亮显示表示已选中02框架面板：打开'窗口'→'框架'面板，在框架面板的结构图中点击对应的框架图标03选中框架集：按住Alt键点击框架边框，或在框架面板中点击框架集的外框图标04属性面板响应：选中框架后，底部属性面板自动显示该框架的所有可配置属性选项05常见错误：直接点击框架内内容会选中内容元素而非框架本身，需确保选中框架容器才能设置框架属性Dreamweaver框架面板·选中框架后属性面板自动响应FRAMEWORKATTRIBUTES框架核心属性：名称与源文件框架名称（Name）用于在超链接中指定目标框架，需唯一且不含特殊字符；源文件（Src）指定框架初始加载的HTML文件路径，是框架显示内容的基础配置。框架名称为框架设置唯一标识符，用于超链接的target属性指向mainFrame·navFrame命名规范不能包含空格、连字符等特殊字符，建议使用驼峰命名法leftNav·contentArea源文件Src指定框架初始加载的HTML文档路径，可浏览选择或直接输入HTML文档路径路径类型可使用相对路径或绝对路径，灵活适配不同部署场景相对/绝对必要性每个框架必须设置源文件，否则区域显示为空白或提示无内容必填项DreamweaverMX·Chapter06框架大小属性设置框架大小支持像素、百分比和相对单位三种类型，建议固定框架用像素、主内容区用相对单位实现自适应布局。01像素（Pixels）设置固定尺寸如200px，不随窗口变化，适合导航栏、标题栏02百分比（Percent）相对于父框架或窗口的比例，如30%，随窗口按比例缩放03相对单位（Relative）使用星号*自动分配剩余空间，2*宽度为1*的两倍04最佳实践左侧导航固定像素（200px），右侧内容相对单位（1*）05设置位置框架集属性面板→选中行/列→输入值并选择单位类型Dreamweaver框架集属性面板FRAMES·边框属性框架边框属性配置框架边框属性控制框架分隔线的显示与样式，可设置为显示、隐藏或默认；隐藏边框可使页面更整体但失去用户调整功能，建议根据设计需求选择并在多浏览器测试。边框显示可设为"是"始终显示、"否"隐藏、"默认"由浏览器决定。该属性是控制框架视觉效果的基础开关，直接影响用户对页面结构的感知。BORDER边框颜色设置边框线颜色，白色可与背景融合，减少视觉干扰。合理选择颜色能提升界面美观度，同时保持必要的功能边界提示。#FFFFFF隐藏效果页面呈现整体感，但用户无法通过拖拽调整框架大小。适用于展示型页面，营造沉浸式浏览体验，减少界面元素干扰。HIDE显示效果框架分隔线可见，用户可拖拽边框调整各框架尺寸。适用于需要灵活布局的工作界面，增强交互可控性。SHOW兼容性不同浏览器默认处理不同，建议多浏览器测试效果。确保在Chrome、Firefox、Safari等主流浏览器中呈现一致体验。CROSS-BROWSERDreamweaverMX·Chapter06框架滚动条属性设置滚动条属性（Scrolling）控制框架滚动行为：'是'始终显示、'否'永不显示、'自动'按需显示；导航框架建议'否'或'自动'，主内容框架建议'自动'。属性位置在框架属性面板中找到Scrolling或"滚动"下拉菜单进行设置PANEL选项"是"无论内容多少都始终显示滚动条，内容少时呈灰色不可用状态YES选项"否"永远不显示滚动条，超出框架范围的内容被截断，用户无法查看NO选项"自动"仅当内容超出框架时显示，适配时不显示，是最智能的设置AUTO应用建议导航框架设为"否"或"自动"，主内容框架设为"自动"适应不同内容BESTPRACTICEDreamweaverMX·Chapter06框架其他重要属性框架的"不允许调整大小"选项可锁定框架尺寸防止用户拖拽，边距属性控制内容与边框的空白距离，这些细节设置对提升页面专业度和用户体验至关重要。Dreamweaver框架属性面板不允许调整大小：勾选后用户无法在浏览器中拖拽边框改变框架尺寸，保持布局固定不变应用场景：导航栏、标题栏等需要固定尺寸的框架建议勾选，主内容区可根据需求决定是否允许调整边距设置：通过marginwidth（左右边距）和marginheight（上下边距）控制内容与框架边框的空白距离边距值建议：设为0让内容紧贴边框，设为5–10px增加适当留白，提升阅读舒适度现代替代方案：传统HTML边距属性逐渐被CSS的padding属性取代，建议在CSS中统一控制间距CHAPTER04嵌套框架集的应用通过框架集嵌套实现复杂的多层级网页布局结构Chapter06·Framesets嵌套框架集的概念与必要性嵌套框架集是在一个框架集内创建另一个框架集，用于实现同时包含行和列的复杂布局；单一框架集只能创建纯行或纯列结构，嵌套是实现混合布局的唯一途径。嵌套框架集结构示意图：父框架集按行分割，子框架集在行内按列分割，形成混合布局层级定义在父框架集的某个框架内再创建子框架集，形成层级嵌套结构父子层级单一限制只能创建纯行或纯列框架，无法同时包含行和列分割纯行或纯列嵌套必要性实现混合布局如顶部标题加下方分栏，必须先分行再分列混合布局多层级结构支持三层甚至更多层级的复杂布局设计与嵌套组合三层以上典型应用企业网站顶部Logo加左侧导航加右侧内容需两层嵌套企业网站PRACTICALSTEPS创建嵌套框架集的实操步骤创建嵌套框架集需先建立父框架集（如两行布局），然后在目标框架内再次执行拆分操作创建子框架集，通过框架面板可查看清晰的层级结构关系。01创建父框架集：通过插入面板选择"顶部固定"等预定义类型，将页面分为上下两行框架02定位目标框架：将光标定位到需要嵌套的框架内（如下方框架），点击框架内部确保光标在该框架中03执行拆分操作：选择"修改"→"框架页"→"拆分左/右框架"，将该框架水平分割为两列04完成嵌套布局：原框架变为包含两列的子框架集，形成"上层两行+下层两列"的复合布局05验证结构：打开"窗口"→"框架"面板，查看层级树状图，确认父框架集包含子框架集Dreamweaver中嵌套框架的结构视图，展示父子框架集的层级关系Chapter6·Frames嵌套框架集的HTML代码结构嵌套框架集通过多层<frameset>标签实现，外层定义整体布局，内层嵌套在特定行或列中定义子布局。Outer<framesetrows="100,*">外层框架集：<framesetrows="100,*">定义两行布局，第一行100px固定高度，第二行占据剩余空间Header<framesrc="header.html">第一行内容：<framesrc="header.html">直接指定顶部框架加载的HTML文件Nested<framesetcols="200,*">嵌套子框架集：在第二行使用<framesetcols="200,*">创建两列子布局Content<frame>子框架内容：内层包含两个<frame>标签，分别指定nav.html和content.htmlStructure</frameset>代码层级：外层</frameset>闭合标签在所有内层标签之后，保持正确嵌套HTMLframeset嵌套代码编辑器视图LayoutPreviewheader.html·100pxnav.htmlcontent.htmlrows="100,*"→cols="200,*"CHAPTER05框架链接与保存预览掌握框架间链接设置、多文件保存与浏览器预览的完整流程HYPERLINK·TARGET框架链接的target属性设置框架链接通过target属性指定内容打开的目标框架，常用值包括具体框架名称、'_blank'（新窗口）、'_parent'（父框架集）、'_top'（整个窗口），正确设置是实现框架间交互的关键。target属性作用指定超链接内容在哪个框架中打开，实现导航框架控制内容框架的局部更新效果target=""具体框架名称如target='mainFrame'，链接内容在指定框架中打开，是最常用的设置方式mainFrame_blank在新浏览器窗口或标签页中打开链接，不影响当前框架页面结构NEWWINDOW_parent在父框架集中打开链接，适用于嵌套框架场景，替换包含当前链接的父框架集PARENTFRAMESET_top在整个浏览器窗口打开链接，取消所有框架结构，适合退出框架或全屏显示FULLWINDOWDreamweaver设置选中超链接，在属性面板Target下拉菜单选择目标框架或手动输入框架名称PROPERTIESDreamweaverMX·Chapter06框架页面的多文件保存方法框架页面由框架集文件和多个框架内容文件组成，需使用"保存全部"命令依次保存所有文件，确保文件命名清晰、路径正确。Dreamweaver「保存全部」对话框界面01文件组成：框架页面包含1个框架集文件+N个框架内容文件（N=框架数量），共需保存多个HTML文件02保存全部命令：选择"文件"→"保存全部"（Ctrl+Shift+S），Dreamweaver依次提示保存每个未保存的文件03文件命名建议：框架集命名为index.html，框架内容命名为nav.html、main.html等有意义的名称04保存顺序：首次保存时，Dreamweaver按框架结构顺序引