《网页设计与制作》教案第12讲 布局技术框架.docx
- 文档编号:3647030
- 上传时间:2022-11-24
- 格式:DOCX
- 页数:13
- 大小:602.62KB
《网页设计与制作》教案第12讲 布局技术框架.docx
《《网页设计与制作》教案第12讲 布局技术框架.docx》由会员分享,可在线阅读,更多相关《《网页设计与制作》教案第12讲 布局技术框架.docx(13页珍藏版)》请在冰豆网上搜索。
《网页设计与制作》教案第12讲布局技术框架
第12讲布局技术-框架
1.1教学目标:
◆知识目标
1.熟练掌握框架页面的创建过程。
2.掌握框架集和框架文件的区别。
3.掌握框架集属性和框架文件属性的设置。
4.掌握框架结构中文件的链接添加方法。
◆技能目标
1.能灵活运用DreamweaverCS6提供的框架结构定制不同的页面布局。
2.实现在框架结构指定区域引入外部文件。
◆品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点:
1.掌握框架集和框架文件的区别。
2.掌握框架集属性和框架文件属性的设置。
3.掌握框架结构中文件的链接添加方法。
1.3教学难点
掌握框架集属性和框架文件属性的设置。
掌握框架结构中文件的链接添加方法。
1.4教学方法:
讲练结合,任务驱动、分子任务操练
1.5课时安排:
2课时
1.6教学对象分析:
这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。
1.7教学过程:
一、激趣导入,揭示课题
在网页设计中,框架是经常被用到的一种技术,用框架可以将浏览器[窗口分成几个部分,每个部分各自包含独立的页面文件,当替换或修改某个页面时将不会影响其他页面。
框架结构通常用于将网航区和内容区。
二、使用框架
我们访问Internet时经常可以看到这样一些论坛网站,左边是每个讨论区的名称,点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容,不过左右部分是独立显示的。
例如拖动左边的滚动条不会影响右侧的显示效果。
这是因为在页面中利用了框架技术,把浏览器的显示空间分割为几个部分,每个部分都独立地显示页面内容。
而且把几个框架结合在一起构成框架集,能够让页面具有更为丰富的效果。
0.1框架的概念
框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。
框架集是HTML文件,它定义一组框架的布局和属性。
框架的作用是把浏览器划分成几个部分,每个部分可以各自独立地显示在窗口中,但也可以实现彼此互相控制的作用。
使用框架可以使页面的结构更加合理、清晰而丰富多彩。
基于框架的页面作为单一页面时,每个框架都包含单一的HTML文挡,该文挡包含完全独立的内容和独立的滚动条。
下面的示例显示了一个由三个框架组成的框架布局:
一个较窄的框架位于左侧面,其中包含导航条;一个框架横放在顶部,其中包含Web站点的徽标(LOGO)和标题,一个大框架占据了页面的其余部分,其中包含主要内容。
这些框架中的每一个窗口都显示单独的HTML文档。
如图3-96所示。
图3-96一个了应用框架的页面
在此示例中,当访问者浏览站点时,在顶部框架中显示的文档永远不更改。
侧面框架导航条包含链接,单击其中某一链接会更改主要内容框架的内容,但左侧面框架本身的内容保持静态。
无论访问者在左侧单击了哪一个链接,右侧主要内容框架都会显示适当的文档。
注意,框架不是文件。
您很可能会以为当前显示在框架中的文档是构成框架的一部分,但该文档实际上并不是框架的一部分。
框架是存放文档的容器,任何一个框架都可以显示任意一个文档。
0.2创建框架和框架集
框架的构建也是从一个正常的文档开始的,我们可以很容易地将一个页面分割为多个框架窗格,从而构建框架。
在Dreamweaver中,可以自己设计各种框架,也可以使用预设的几种框架格式。
1.创建框架集
在创建框架之前,应使用“框架边框”命令。
我们可以先新建一个页面,然后执行“查看/可视化助理/框架边框”命令,可以看见编辑窗口中出现一个边框,用鼠标点击边框之后可以看见虚线框,说明新建的页面中已经附带了框架。
如图3-97所示。
图3-97在文档窗口的四周显示出框架的边框
用鼠标拖拽边框,松开鼠标之后就可以把窗口一分为二,这样就把页面分为两个边框。
比如拖拽左右边框可以把窗口分为左右两个部分,而拖拽上下边框可以把窗口分为上下两个部分。
另外,窗口的四个角也可以拖拽,这样可以直接把窗口分为四个区域。
如图3-98所示。
如需删除边框,可用鼠标把需要删除的线拖拽到父框架的边框上即可删除它。
2.插入预置的框架集
Dreamweaver预先设计了多种框架集,这些预定义的框架集包括了最常见的几种框架集格式,有了这些框架集,创建框架就变得更加简易直观了。
具体操作如下:
单击“常用”面板右侧的小三角,切换到“布局”面板,在面板上有一个“框架”按钮
。
单击右侧的三角按钮,在弹出的下拉列表会出现预定义的框架集,选择需要的框架类型即可。
如图3-99所示。
图3-98拖动边框角创建框架
图3-99选择预定义的框架集
使用预定义的框架集,也可在“插入”菜单中执行“HTML/框架”命令,在打开的下拉菜单中选择需要的框架样式。
3.使用框架检视器
使用框架检视器就可以在框架检视器中查看或编辑了,框架检视器为文件中的框架提供了一种可视的方法,不仅可以显示框架结构,而且可以通过单击框架检视器面板里的框架或框架集,以选定文件中的框架或框架集。
使用框架检视器可以使用户更方便地编辑不同框架中的文档。
执行“窗口/框架”命令,就会在右侧的面板组中显示框架检视器面板。
如图3-100所示。
图3-100框架检视器
每一个框架集都由一个较粗的立体边框所包围,而每一个框架都有一个细边框。
用户可以从框架面板中直观地看到整个页面的框架结构,包括每个框架的名称。
4.嵌套的框架集
框架允许嵌套,即在一个框架集中插入另一个框架集。
比如要创建图3-101所示的框架,可以先拖动边框垂直一分为二,然后在右下角的框架面板中点击右部的框架,再按下鼠标拖拽边框。
图3-101嵌套的框架集
0.3框架和框架集的保存
框架页面是由多个文挡组成的,对框架的编辑事实上是对多个文档在进行编辑,因此在保存框架时需要多个步骤。
由于各文挡都是独立的,需要对它们逐一进行保存。
1.保存框架文件
保存框架文件可按如下方法操作:
在框架面板中单击要保存的框架,选择“文件\保存框架”命令,或按Ctrl+S键,出现“另存为”对话框,在“文件名”文本框中输入恰当的文件名,以便处理这些文挡时,能够区分框架名。
“文件/框架另存为”命令可把框架结构另存为HTML文件。
该命令只保存框架结构的HTML文件,而不保存框架中显示的HTML文件。
2.保存框架集页面
框架集页面也需要进行单独的保存,操作方法如下:
单击文档或框架面板中的框架集边框,选择框架集,打开文件菜单,这时可以看到“保存框架”和“框架另存为”变为“保存框架页”和“框架集另存为”命令。
选择“保存框架页”或“框架集另存为”命令,在“另存为”对话框中的“文件名”文本框中输入一个有意义的文件名,然后单击“保存”按钮即可。
3.保存全部
执行“文件/保存全部”命令,可将框架结构和各框架中导入的HTML文件全部保存。
0.4选择框架和框架集
选择框架和框架集可以在“框架”面板的框架检视器中进行,也可以直接从文档窗口中进行。
但是,利用“框架”检视器面板是最方便的。
1.利用“框架”检视器面板选择框架和框架集
在框架检视器面板中用鼠标单击某框架内部或单击框架集的边框,可以在页面内选中对应的框架或者框架集。
被选中的框架或框架集四周会出现粗黑色边框。
如图3-102所示。
选择框架集也可单击文挡窗口中两个框架的共用边界。
图3-102选择框架
2.在文档窗口中选中框架或框架集
在文档窗口中选择框架或框架集,需按住Alt键,然后用鼠标单击框架内部或单击框架集的边框,就可以选中对应的框架或者框架集。
被选中的框架或框架集四周会出现虚线边框。
如图3-103所示。
图3-103在文档窗口选择框架
0.5设置框架和框架集属性
页面中经常混有框架和框架集,选取不同对象可以进行不同的属性设置。
框架与框架集有各自的属性面板,框架集的属性面板控制了框架的大小以及框架间边界的颜色及宽度,框架的属性面板决定了框架名、源文件、页面空白、滚动条、单个框架大小的调整以及框架边界在框架集中的可见性。
1.框架集属性
查看框架集属性的操作如下:
单击文挡窗口中两个框架的共用边界或单击框架集面板最外围的边界,就可以看到框架集的属性面板,如图3-104所示。
图3-104框架集属性面板
1.框架属性
用框架属性面板可以为框架命名、设置边界和页面空白。
通过以下操作,可以指定框架的属性:
选择“窗口\属性”命令显示出属性面板,然后按住Alt键并单击一个框架,选中框架的属性面板如图3-105所示。
图3-105框架属性面板
3.命名框架集页面
由于框架集页面是指向它的URL页面,而且是由页面管理的,为确保以后能正确地链接页面,给每一个框架起一个名字是很必要的。
命名框架页面的步骤如下:
在文挡窗口或框架面板中单击最外部的框架边框来选择框架集。
在菜单栏单击“修改/页面属性”命令,弹出页面属性对话框,在“标题”文本框中输入页面标题即可。
例如对于图3-103所示的框架集,可将最上面的框架名称设置为FrameName,左边的框架名称为“Menu”,右边的框架名称为“Main”。
为了获得更好的页面浏览效果,我们可将框架集和框架的边框线设置为“否”,同时将上面和左边的框架的滚动设置为“否”,右边框架的边框也设置为“否”,滚动设置为“默认”。
去掉边框线和滚动条后,页面就显得比较整洁清晰了。
0.6插入框架中的内容
用鼠标点击任意一个框架之后就可以像正常编辑页面一样插入各种文本内容、图片、Flash动画和背景音乐等页面元素。
可按下述方法插入内容。
1.插入标题页面
首先制作一个名为“FrameName”的页面。
选择“窗口/其他/框架”菜单命令将框架面板显示出来,单击将FrameName选中。
在“属性”面板中单击“源文件”右侧的文件夹图标,在弹出的对话框中选择已制作完成的上方页面。
单击“确定”按钮后,FrameName页面出现在左侧的框架中,拖动中间的框架栏进行两边框架的重新分配。
如图3-106所示。
图3-106在框架中插入内容
注意:
如果没有预备要引入框架的页面,也可在框架中直接制作。
选中某个框架,然后单击这个框架的内部,按一般制作页面的方法编辑就可以了。
2.插入导航页面
单击“框架”面板中的Menu选中左侧的框架,在“属性”面板中单击“源文件”图标,在弹出的对话框中选择已制作完成的左侧页面Menu,单击“确定”按钮后,Menu页面出现在左侧框架中。
如图3-107所示。
图3-107在框架中插入内容
3.插入主页面
以同样的方法选中右侧框架,在“属性”面板中单击“源文件”图标,在弹出的对话框中选择已制作完成的右侧页面Main,单击“确定”按钮后,Main页面出现在左侧框架中。
如图3-108所示。
图3-108在框架中插入内容
将框架全部选中,选择“文件/保存框架”在弹出的对话框中为框架命名。
0.7拆分和删除框架
1.拆分框架
要将一个框架拆分成几个更小的框架,可以执行以下操作:
单击要拆分的框架窗口,将插入点放入窗口中,然后执行“修改/框架集/”命令,选择拆分项。
例如选择“Main”窗口,执行“拆分下框架”。
如图3-109所示。
如果想以垂直或水平方式拆分一个框架或一组框架,可将框架边框从“设计”视图的边缘拖入“设计”视图的中间。
如果要使用不在“设计”视图边缘的框架边框拆分一个框架,可按住Alt键的同时拖动框架边框。
如果要将一个框架拆分成四个框架,请将框架边框从“设计”视图一角拖入框架的中间。
2.删除框架
若要删除一个框架,可将边框框架拖离页面或拖到父框架的边框上。
如果要删除的框架中的文档有未保存的内容,则Dreamweaver将提示您保存该文档。
注意:
只能删除框架,不能合并框架。
图3-109拆分框架的操作
0.8设置链接
1.为框架设置链接
要在框架中使用链接以打开另一个框架中的文档,必须为链接指明一个目标,这个目标就是要打开链接内容的框架。
例如对于图3-108所示框架页面,导航条位于左框架Menu,如果希望链接的信息显示在右侧的主要内容框架Main中,那么必须将主要内容框架Main的名称指定为每个导航条链接的目标。
当访问者单击导航链接时,将在主框架中打开指定的内容。
具体的设置法如下:
首先为各个框架命名,然后选择要作为链接的文本或者其他对象,在属性检查器中进行连接设置。
例如对于图3-108所示框架页面,我们可在左框架Menu中选择位于最上方的图像,这时属性面板变为该图像的属性,如图3-110所示,在“链接”处可设置链接目标。
图3-110为框架设置链接
如果设置的链接指向某一个网站地址,可直接在“链接”文本框中输入超级链接地址;如果设置的链接是指向本机站点的某一个文件,可单击文件夹图标并选择要链接到的文件。
也可以将“指向文件”图标拖动到“文件”面板以选择要链接到的文件。
在“目标”下拉列表框中选择链接内容的目标框架名称或窗口类型。
如图3-111所示。
图3-111选择链接内容的目标框架
其中,“目标”下拉列表框中各项内容含义如下:
●_blank在新的浏览器窗口中打开链接的文档,同时保持当前窗口不变。
●_parent在显示链接的框架的父框架集中打开链接的文档,同时替换整个框架集。
●_self在当前框架中打开链接,同时替换该框架中的内容。
●_top在当前浏览器窗口中打开链接的文档,同时替换所有框架。
如果链接的页面需要在框架页之外的窗口打开,就要在目标框选择“_top”或“_blank”。
注意:
只有当我们在框架集内编辑文档时才显示框架名称。
当您在文档自身的“文档”窗口中编辑该文档时,框架名称不显示在“目标”弹出式菜单中。
如果您正在编辑框架集外的文档,那么可以将目标框架的名称键入到“目标”文本框中。
如果想链接到本机站点外的某一页面,也必须在目标框选择“_top”或“_blank”,这样可确保该页面不会显示为您站点的一部分。
2.设置浏览器不支持框架的提示
框架页面最大的局限性在于不兼容低版本的浏览器和某些不支持框架的浏览器。
为了避免这一点,需使用无框架选项,在浏览者使用不支持框架的浏览器时能看到来自服务器的一条消息,告诉你所浏览的站点使用了框架技术。
而您的浏览器不支持框架,需要更高版本的浏览器等内容。
考虑周到的设计者往往提供站点替换版本,也就是一个内容完全一样,但未采用框架格式设计的页面版本。
下面我们来简单介绍如何创建一个替换页。
执行“修改/框架集/编辑无框架内容”命令,这时,在原有页面的基础上,将弹出一个空白页面。
我们可以在页面上输入一段说明文字,如图3-112所示。
图3-112不支持浏览器的提示
再次执行“修改/框架集/编辑无框架内容”命令,这样菜单中的“编辑无框架内容”选项前的勾选将会被取消,返回框架页面。
解决浏览器不支持框架的缺陷,还有一种变通方法。
打开Dreamweaver的源代码窗口(窗口/代码片断),你会发现<Noframes>.......</Noframes>标记,省略号可以用自己的话代替,如“对不起,你的浏览器不支持框架结构”,或者“这个是框架页面,你的浏览器不支持,如果愿意,请点击此链接到我的另外一个页面(如果你还有不是用框架制作出来的页面的话)”等等话语,而这些话语将在不支持框架的浏览器中显示。
1.8归纳总结:
本节介绍了框架与框架集的概念、功能和使用方法,并介绍发框架的各种主要属性的设置方法。
通过本节的学习,需要掌握如何创建带框架的网页,并利用框架结构合理规划网页的重复性内容,同时掌握如何在框架中使用超链接技术,快速进行网页间的切换
①按下Alt的同时在文档编辑窗口内单击某个框架,即可选中;
②选择“文件/保存全部”保存框架集和所有框架文件,学会看保存的文件名和修改框架集文件名;
1.9课后作业题:
1.框架的作用?
2.框架和框架集的区别?
3.如何在框架中使用超链接技术?
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 网页设计与制作教案第12讲 布局技术框架 网页 设计 制作 教案 12 布局 技术 框架
![提示](https://static.bdocx.com/images/bang_tan.gif)