Dreamweaver+CS4课件第11章框架_第1页
Dreamweaver+CS4课件第11章框架_第2页
Dreamweaver+CS4课件第11章框架_第3页
Dreamweaver+CS4课件第11章框架_第4页
Dreamweaver+CS4课件第11章框架_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

DreamweaverCS4第11章框架掌握网页框架布局技术，构建多窗口交互页面Contents本章目录DreamweaverCS4第11章·框架技术的核心概念与实践应用01框架的概念与优势02创建框架与页面布局03框架属性设置与优化04框架页面间的互相链接05总结与实战练习Chapter01框架的概念与优势理解框架的定义、分类及其在网页设计中的核心价值Chapter11·Frames什么是框架框架（Frame）是一种将浏览器窗口分割为多个独立区域的网页布局技术，每个区域可加载不同的HTML文档并独立运作，从而实现导航固定、内容区滚动的多窗口交互效果。01<frameset>框架通过<frameset>标签将浏览器窗口划分为若干行或列，每个分区加载独立的HTML文档，各区域内容互不干扰02每个框架区域拥有独立的滚动条，用户在一个区域内滚动浏览时，其他区域（如导航栏）保持固定不动03适用于需要固定导航、多窗口并行的场景，如后台管理系统、在线文档、帮助文档等页面布局04DreamweaverCS4提供可视化框架工具，支持拖拽创建框架集，降低了手写HTML代码的门槛DreamweaverCS4·第11章框架的核心优势框架通过组件化复用和独立加载机制，在代码维护性、开发效率和页面性能三个维度显著提升网页设计质量，尤其适合导航结构固定的中大型网站。提高可维护性导航栏、页脚等公共区域只需编写一次HTML文件，所有页面通过框架引用，修改一处即可全局生效，大幅降低后期维护成本。一处修改·全局生效实现模块化设计每个框架区域作为独立组件存在，便于团队成员分工开发、独立调试，有效降低协作冲突，提升团队开发效率。独立组件·分工协作加快网页加载速度公共部分首次加载后被浏览器缓存，后续页面切换只需加载内容区数据，减少重复请求，显著提升页面响应速度。浏览器缓存·按需加载增强用户体验导航区域始终保持可见，用户无需在每个页面重新寻找导航入口，降低操作成本，提供连贯一致的浏览体验。导航常驻·操作便捷Chapter11·Frames框架的三种基本类型框架按分割方向分为行框架（横向）、列框架（纵向）和混合框架（组合）三类，分别适用于顶部导航、侧边菜单和复杂多区域等不同网页布局需求。行框架（横向）01将浏览器窗口沿水平方向分割为上下多个区域，常用于顶部导航栏+下方主内容区的经典布局02通过frameset的rows属性定义各行高度比例，如rows='80,*'表示第一行80像素、第二行占剩余空间rows列框架（纵向）01将浏览器窗口沿垂直方向分割为左右多个区域，适用于左侧导航菜单+右侧内容展示的布局02通过frameset的cols属性定义各列宽度比例，如cols='25%,75%'表示左列占25%、右列占75%cols混合框架（组合）01在行框架中嵌套列框架或在列框架中嵌套行框架，实现顶部横幅+左侧导航+右侧内容的三区域布局02通过多层frameset嵌套构建复杂页面结构，是实际项目中最常见的框架应用方式nestedApplicationScenarios框架的典型应用场景框架在导航固定、文档浏览和多栏展示三大场景中最具优势，通过区域独立加载和滚动机制，为用户提供持续可见的导航入口和清晰的信息层次结构。01导航栏设计：左侧或顶部框架放置导航菜单，点击链接仅在内容框架中加载新页面，导航始终可见，提升浏览效率02在线文档与帮助系统：左侧框架展示目录树结构，右侧框架显示详细说明内容，用户可在目录和正文之间快速切换03多栏信息展示：新闻门户、邮箱系统等需同时展示多个信息源的场景，各框架区域独立滚动、互不干扰04后台管理系统：顶部显示系统状态和用户信息，左侧放置功能菜单，右侧加载管理操作界面框架在后台管理系统中的典型应用HTMLFrameworkTags框架的核心HTML标签框架结构由frameset（框架集）和frame（框架）两个核心标签构成，frameset定义窗口分割方式，frame指定各区域加载的文档，使用时需注意标签互斥规则和兼容性处理。frameset框架集标签定义窗口分割方式：rows属性控制水平分割（行），cols属性控制垂直分割（列），值可为像素、百分比或星号不能与body标签同时使用；若需noframes替代内容，必须将文本嵌套在noframes内的body标签中rows·cols·*frame框架标签通过src属性指定每个框架区域加载的HTML文档路径，name属性为框架命名以便链接定位noresize属性可禁止用户拖动边框调整框架大小，scrolling属性控制滚动条显示（yes/no/auto）src·name·noresizenoframes兼容标签为不支持框架的旧版浏览器提供替代文本内容，确保所有用户都能获取页面核心信息noframes内的内容必须包裹在body标签中，这是HTML规范要求的唯一合法嵌套方式<body>fallbackCHAPTER02创建框架与页面布局在DreamweaverCS4中实操创建框架集、设计布局与嵌套框架Chapter11·框架基础在DreamweaverCS4中创建框架DreamweaverCS4提供菜单预设、可视化拖拽和代码编辑三种创建框架的方式，结合'框架'面板进行命名管理，是构建框架结构的基础操作流程。DreamweaverCS4设计视图工作界面菜单创建法通过'插入→HTML→框架'打开预设面板，从14种标准布局中选择所需类型，自动生成frameset代码可视化拖拽法在设计视图中将鼠标移至页面边缘，出现拖拽指示器后向页面内部拖动，即可创建水平或垂直分割线代码编辑法直接在代码视图中手写frameset和frame标签，适合需要精确控制行列比例的高级用户框架命名管理在'窗口→框架'面板中为每个框架指定唯一名称，是后续设置链接目标（target）的必要前提Chapter11·DreamweaverCS4框架页面布局设计原则合理的框架布局需要明确各区域功能定位、精确控制尺寸比例、优化内容展示方式，并在视觉平衡与信息密度之间取得最佳平衡，以提升用户浏览体验。功能分区明确顶部框架放置品牌Logo和全局搜索，侧边框架放置分类导航菜单，主框架放置核心内容区域，各区域职责清晰互不干扰分区定位尺寸比例合理导航栏宽度建议150–200像素或占窗口20%–25%，确保内容区有足够的展示空间，避免导航过宽挤压主内容20–25%滚动行为设计导航框架设置scrolling='no'保持固定，内容框架设置scrolling='auto'按需显示滚动条，实现导航常驻、内容独立滚动的交互体验AUTO·NO视觉层次优化通过背景色差异、边框线分隔和间距调整，让用户清晰感知各区域的功能边界，降低认知负荷提升浏览效率边界感知HTMLFrame&Target框架命名与链接目标设定框架命名是跨框架导航的基础——通过name属性标识目标框架、在链接的target属性中引用该名称，实现'点击导航链接→指定区域加载新页面'的交互逻辑。框架命名规则在frame标签中使用name属性设定唯一标识符，名称应以字母开头，避免使用空格和特殊字符name链接目标绑定在导航链接的a标签中设置target属性值与目标框架name一致，点击后新页面将在指定框架中加载target特殊target值_blank新窗口·_self当前框架·_top整个窗口·_parent父框架_blank可视化设置在Dreamweaver属性检查器中直接选择目标框架名称，无需手写代码即可完成target绑定可视化CHAPTER11·FRAMES嵌套框架的设计与应用嵌套框架通过在已有框架区域内嵌入新的frameset实现更复杂的多区域布局，是构建顶部横幅+侧边导航+主内容区等经典网页结构的核心技术手段。嵌套原理在一个frame的位置替换为新的frameset标签，将该区域进一步分割为多个子框架，实现布局层次的递进。FRAMESET经典三区域布局先按行分割为顶部和底部，再在底部区域嵌套列框架分割为左侧导航和右侧内容区。T·L·R层级控制建议嵌套深度控制在2-3层以内，过深的嵌套会增加HTML代码复杂度并可能影响浏览器渲染性能。2–3层Dreamweaver操作在框架面板中选中目标框架后，再次执行框架分割操作即可在选定区域内创建嵌套结构。SPLITCHAPTER11·FRAMEWORK框架HTML代码示例解析通过一个左右两列框架集的完整HTML代码示例，展示frameset的cols属性分割、frame的src与name配置、以及noframes兼容处理的实际写法与嵌套关系。01框架集定义framesetcols='25%,75%'将窗口分为左列25%和右列75%，cols控制列宽、rows控制行高cols/rows02框架文档加载framesrc='nav.html'name='navFrame'指定左列加载导航页并命名为navFrame供链接引用src+name03内容框架配置framesrc='content.html'name='mainFrame'指定右列加载内容页，导航链接target指向此名称target04兼容性处理noframes标签内嵌套body提供替代文本，确保不支持框架的浏览器仍能展示基本信息noframesChapter03框架属性设置与优化调整框架尺寸、边框、背景与动态效果，提升页面视觉品质DreamweaverCS4·第11章框架框架尺寸设置与屏幕适配框架尺寸支持像素值、百分比和星号三种定义方式，合理搭配使用可实现导航区固定、内容区自适应的弹性布局，在不同屏幕分辨率下保持页面结构稳定。像素固定值如cols="200,*"中"200"表示左列固定200像素宽，适合导航栏等需要稳定宽度的区域200px百分比比例值如cols="25%,75%"按窗口宽度百分比分配，在不同分辨率下各列保持相同比例关系25%/75%星号剩余分配"*"表示占据所有剩余空间，"2*,*"表示第一区域占剩余空间的2倍、第二区域占1倍2*:*noresize锁定尺寸在frame标签中添加noresize="noresize"属性，禁止用户拖动边框改变框架大小noresizeFRAMEPROPERTIES框架边框与间距调整通过border、frameborder、framespacing等属性精确控制框架的边框显示与区域间距，在保持页面整洁的同时确保各功能区域具有清晰的视觉边界。隐藏边框frameset中设置border='0'和frameborder='0'，去除默认灰色边框线，获得干净无缝的页面效果。此设置适用于需要沉浸式体验的展示型页面，消除视觉干扰。border=0/frameborder=0自定义边框保留边框时可设置bordercolor属性指定边框颜色，使其与页面整体配色方案协调统一。支持十六进制色值或标准颜色名称，实现品牌视觉一致性。bordercolor="#5b8cb8"间距控制framespacing定义框架间隔距，配合marginwidth和marginheight控制内容与边框的距离。合理设置这些参数可优化内容呼吸感，提升阅读舒适度。framespacing/marginwidth视觉替代方案隐藏边框后通过不同区域的背景色差异或CSS分隔线来区分各框架区域的功能边界。现代前端开发推荐采用语义化标签配合flex/grid布局替代传统frameset。CSSborder/background-colorChapter11·Frames框架背景颜色与图片设置每个框架区域拥有独立的HTML文档，可分别设置背景颜色和图片，通过差异化的背景设计强化各区域的功能定位和视觉层次，同时需兼顾文字可读性。独立背景控制每个frame加载的HTML文档通过body标签的bgcolor属性或CSS的background-color独立设置背景色bgcolor·CSS导航区域配色导航框架通常采用深色背景（如深蓝、深灰）搭配浅色文字，营造层次感和视觉引导效果Dark·LightText内容区域配色内容框架采用浅色背景（如白色、米色）确保文字的高可读性，减少用户长时间阅读的视觉疲劳Light·Readability背景图片应用通过CSS的background-image为框架添加纹理或图案背景，需控制透明度避免干扰正文内容阅读background-imageDreamweaverCS4·Chapter11框架的特效与动态交互通过CSS伪类、过渡动画和JavaScript脚本，可以为框架添加悬停反馈、动态加载和尺寸变化等交互效果，显著提升页面的活力与用户参与感。CSS悬停效果利用:hover伪类为导航链接添加鼠标悬停时的背景色变化、文字高亮等视觉反馈效果:hoverJavaScript动态加载通过DOM操作或Ajax技术动态更新框架内容，无需整体刷新页面即可切换显示数据Ajax过渡动画使用CSStransition属性为框架元素的尺寸、颜色、透明度变化添加平滑过渡效果transition可折叠侧边栏利用JavaScript动态修改frameset的cols/rows值，实现导航栏的收缩展开交互功能cols/rowsHTMLFrameworks内联框架（iframe）的应用iframe作为内联框架可直接嵌入普通HTML页面的任意位置，无需frameset容器，在嵌入地图、视频、第三方组件等场景中比传统框架更灵活实用。BODY嵌入方式灵活iframe直接放置在body标签内任意位置，不受frameset布局约束，可与其他页面元素自由混排，实现灵活的页面结构设计。任意位置自由混排SRC常用属性配置src指定嵌入页面URL，width/height控制尺寸，scrolling控制滚动条，frameborder控制边框，name属性用于锚点定位。srcwidth/heightscrolling嵌入典型应用场景嵌入在线地图、视频播放器、第三方支付表单、社交媒体组件等外部资源到当前页面中，实现功能复用与模块化集成。地图视频支付社交对比与传统框架对比不需要frameset容器、不影响页面整体结构，但不能像frameset那样分割整个浏览器窗口，更适合局部嵌入场景。无frameset局部嵌入SEOCONSIDERATIONS框架的局限性与SEO考量框架结构在SEO方面存在天然缺陷——单一URL无法为各框架内容独立建立索引，搜索引擎爬虫难以正确解析，因此在面向公众的营销型网站中应谨慎使用。URL索引问题整个框架集共享一个URL地址，搜索引擎无法为每个框架区域的独立内容分别建立索引和排名。SingleURL1URL爬虫解析障碍部分搜索引擎爬虫无法正确跟踪frameset内的frame标签，导致框架内的页面内容无法被收录。CrawlerBlock0收录标题缺失困境框架集页面只能设置一个title标签，无法为每个内容区域设置独立的页面标题和meta描述。NoMeta1Title适用场景建议面向公众的营销型网站避免使用框架，改用CSS+DIV布局；框架适用于后台管理系统、内部工具等无需SEO的场景。CSS+DIV替代CHAPTER04框架页面间的互相链接掌握跨框架导航、数据传递与资源共享的交互实现技术NAVIGATIONMECHANISM框架间导航的实现机制框架间导航通过链接的target属性指向目标框架name实现，点击导航链接后目标页面在指定框架中加载，是构建多窗口交互体验的核心技术基础。target属性绑定导航链接的a标签设置target='框架名称'，点击后目标页面将在该名称对应的框架区域中加载显示，实现页面内容的定向渲染与框架间通信。Dreamweaver可视化设置选中链接后在属性检查器的"目标"下拉菜单中选择已命名的框架，自动生成target代码，无需手动编写属性值，降低开发门槛。导航状态指示通过CSS为当前激活的导航项添加高亮样式，帮助用户识别所在位置和当前浏览的内容分类，提升多框架页面的可用性与用户体验。多级导航设计左侧框架可放置树形菜单，点击父级展开子级链接，子级链接的target同样指向右侧内容框架，构建层级化的信息架构体系。FRAMEWORKNAVIGATION跨框架锚点跳转与精确定位通过在目标页面设置锚点标记并在导航链接中引用锚点ID，可实现跨框架的精确内容定位，点击后目标框架不仅加载页面还会自动滚动至指定章节位置。锚点标记设置anameid在目标HTML文档中用aname或元素的id属性标记需要定位的内容节位置。STEP01链接锚点引用文件名.html#锚点名导航链接的href设为文件名.html#锚点名，点击后目标框架加载页面并自动滚动到锚点位置。STEP02长文档导航应用帮助文档、产品手册等场景中，左侧目录框架的链接直接跳转到右侧内容框架的对应章节。USECASE组合导航策略一级导航切换不同页面文件，二级导航在同一页面内通过锚点跳转到不同节，构建两级导航体系。STRATEGYDreamweaverCS4·第11章框架跨框架数据传递技术通过JavaScript的frames集合引用和URL参数传递两种主要方式，可以打破框架之间的隔离性，实现跨窗口的数据共享和功能联动。框架引用通过parent.frames['框架名'].document获取目标框架的DOM对象，可读写其中的元素内容和属性DOM读写URL参数传递在链接href中附加查询参数如page.html?key=value，目标页面用JavaScript解析URL获取参数值查询参数函数跨框架调用parent.frames['目标框架'].函数名()可直接调用另一个框架中定义的JavaScript函数函数调用共享变量存储利用顶层窗口的top对象存储全局变量，各子框架通过top.变量名读取和修改共享数据全局共享RESOURCESHARING框架间资源共享与一致性维护通过统一引用公共CSS样式表、JavaScript库和图片资源，结合服务器端session管理和客户端状态同步机制，确保多框架页面的视觉一致性和数据完整性。01样式表统一管理所有框架页面的HTML文档引用同一份CSS文件，修改一处即可全局更新视觉样式，确保风格一致。统一的设计规范涵盖色彩、字体、间距等核心视觉元素，避免各页面独立维护导致的样式碎片化问题。全局CSS02公共脚本库复用jQuery等JavaScript库文件存放在公共目录，各框架通过相同路径引用，避免重复下载浪费带宽。浏览器缓存机制使得首次加载后，后续页面可复用已缓存的脚本资源，显著提升加载性能。jQuery复用03用户状态同步登录状态、权限信息等通过服务器端session统一管理，各框架页面加载时读取同一session数据。这种集中式身份验证机制确保用户在跨框架导航时无需重复登录，实现无缝体验。Session管理04联动更新机制用户操作触发一个框架内容变化时，通过JavaScript同步刷新相关框架的对应数据展示区域。事件驱动架构实现跨框架通信，确保数据变更实时反映在所有关联视图中。JS同步OPTIMIZATION框架页面的性能优化与SEO策略通过为每个子页面设置独立meta信息、在noframes中提供完整站点地图、优化HTTP请求和缓存策略，可以在使用框架的同时最大程度减轻SEO和性能的负面影响。01子页面独立SEO每个frame加载的HTML文档都设置完整的title、metadescription和keywords标签，确保单独可被索引META02noframes站点地图在noframes标签中提供完整的文字导航链接列表，为搜索引擎爬虫建立可抓取的替代路径CRAWL03HTTP请求优化合并CSS和JavaScript文件、使用CSSSprites合并图片，减少框架页面加载时的HTTP请求数量SPRITES04浏览器缓存策略通过HTTP头设置合理的缓存过期时间，导航栏等不常变动的框架内容启用长期缓存减少重复加载CACHECHAPTER05总结与实战练习回顾框架核心知识点，通过实际案例巩固操作技能ChapterReview本章核心知识点回顾本章围绕框架的概念认知、创建操作、属性调整和交互链接四个维度展开，构建了从理论基础到实操技能的完整框架技术知识体系。概念与类型框架将浏览器窗口分割为多个独立区域，各区域加载不同HTML文档并拥有独立滚动条三种基本类型：行框架、列框架与混合框架3种类型创建与布局DreamweaverCS4提供菜单预设、可视化拖拽和代码编辑三种创建方式布局遵循功能分区明确、尺寸合理原则，嵌套深度控制在2-3层2-3层嵌套属性与交互尺寸支持像素、百分比、星号三种定义方式，边框可隐藏或自定义框架间通过target属性实现导航跳转与跨框架数据传递Target跳转DreamweaverCS4·第11章框架实战案例一：后台管理系统三区域布局行框架嵌套列框架实现顶部横幅、左侧导航与内容区的三区域布局，是后台系统最具代表性的框架实战场景。01创建行框架集设置rows='60,*'将窗口分为顶部60px状态栏与下方自适应高度的工作区。rows='60,*'02嵌套列框架集在下方框架内用cols='200,*'分割为200px导航栏与自适应内容区。cols='200,*'03命名并加载文档为三个框架分别命名topFrame、navFrame、mainFrame，并设置src加载对应页面。3Frames04设置链接目标导航菜单链接设置target='mainFrame'，点击后内容在右侧内容区加载。targetCASESTUDY·FRAMEWORK实战案例二：在线帮助文档导航系统利用左右列框架配合锚点跳转技术构建在线帮助文档系统，左侧目录树实现章节快速定位，右侧内容区支持滚动浏览，是框架技术在文档系统中的经典应用。01布局搭建创建列框架集

人人文库> 全部分类> 应用文书 > 技术指导

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论