学习情境7-制作完整的框架网页

主 讲 ：小 胡,网页设计与制作学习情境7：制作完整的框架网页,布置习题,学习目标,知识讲解,课堂实践,教学总结,制作完整的框架网页,学习情境7,课程引导,在网页中，除了使用表格和AP Div定位外，还可以使用框架进行定位。使用框架结构设计的HTML文件，可以将整个浏览器窗口分成几个独立的小窗口，一个窗口就是一个框架，每一个框架可分别载入不同的网页文件，此外，框架之间是可以相互控制的。,概述,布置习题,知识讲解,课堂实践,教学总结,课程引导,制作完整的框架网页,学习情境7,学习目标,掌握制作框架网页的方法,学习目标,布置习题,知识讲解,课堂实践,教学总结,课程引导,制作完整的框架网页,学习情境7,学习目标,使用框架制作页面的能力,专业能力目标,布置习题,知识讲解,课堂实践,教学总结,课程引导,制作完整的框架网页,学习情境7,学习目标,规划页面框架结构创建、选择页面框架设置页面框架和框架集的属性编辑页面框架创建嵌入式框架iframe,专业知识目标,布置习题,知识讲解,课堂实践,教学总结,课程引导,制作完整的框架网页,学习情境7,学习目标,团队协作精神沟通表达能力乐观精神敬业精神责任感 效率观念结构布局能力,专业素质目标,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,教学案例,案例01 创建上方固定、左侧嵌套的框架网页,案例02 创建嵌入式框架iframe,综合案例实训 - “某幼儿园”框架页的设计与制作,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,案例操作过程(P129-133),相关知识点(P133-135),案例01 创建上方固定、左侧嵌套的框架网页,当在文件中建立框架时，Dreamweaver可以创建一个无标题的框架集文件，在每个框架中创建无标题文件，如果某个页面被划分成3个框架，它实际上包含的却是4个独立的文件：一个框架集文件和3个框架内容文件。框架内容文件包含了将出现在页面框架中的内容。,如图所示的框架页面：利用框架将窗口分成3个子窗口，分别命名为win1，win2和win3，子窗口win1对应的HTML中设置了两个超链接，用户单击这两个超链接后目标URL将在子窗口win2中显示,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,选择“查看可视化助理框架边框”命令，然后利用鼠标拖动框架边框的方法可以创建框架,创建预定义框架,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,选择“文件新建”命令，在弹出的“新建文档”对话框中选择“示例中的页框架集”选项，在“示例页”列表中根据需要进行选择，单击“创建”按钮，即可创建框架集或者在“插入”栏中选择“框架”按钮，在下拉列表中选择框架类型后也可创建框架集,创建自定义框架,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,框架面板选择Alt键+框架选择,框架的多种选择方法,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,框架面板选择法Alt键+框架边框选择法,框架集的多种选择方法,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,和保存其他文件一样，选择“保存”或“另存为”均可保存，不同的是保存框架时先要选中框架,框架及框架集的保存,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,框架属性设置框架集属性设置,设置框架和框架集的属性,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,主要标签1.frameset2.frame3.Noframe4.iframe,HTML中框架的标签及属性简介,1.Frameset功能：描述框架集（即整个框架的结构）语法： 属性：cols rows frameborder bordercolor framecolor framespacing onload onunload,Cols(水平方向) Rows (垂直方向) 用于指定在水平或垂直方向上将窗口分为若干框架时每个框架的宽度。取值可以为 正整数(单位：像素)，如：cols=“200” 百分比，如：cols=“80%” *(表示除去其他框架所占宽度后剩下的宽度)如：cols=“80,*”表示将窗口分为左右两个框架，左边框架的宽度为80像素Bordercolor 用于指定边框的颜色Frameborder 用于指定是否出现边框。值为”yes”或“no”Framespacing 表示框架与框架间的保留空白的距离，以免看起来太挤。 其值是正整数Onload Onunload用于描述frameset加载和退出时的事件,2. Frame 功能：描述组成帧结构中的具体的某个帧，它只能嵌套在frameset中使用语法：属性：name src noresize scrolling marginwidthmarginheight frameborder bordercolor,框架示例 ,iframe标记，又叫浮动框架标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视,iframe标记的使用格式是:src：文件的路径，既可是HTML文件，也可以是文本、ASP等width、height：画中画区域的宽与高scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示frameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,案例02 创建嵌入式框架iframe,案例操作过程(P135-137),相关知识点(P137-138),课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入现有的网页中。在Dreamweaver中可以使用“标签编辑器”来创建嵌入式框架。其中列出了绝大部分语言所用到的标签及其属性参数，对于编写代码的设计者来说，这是得心应手的工具，有了它可以轻松找到所需要的标签，然后根据列出的参数来使用它。标签选择器：插入各种标签标签库管理器：设置库属性和编辑库中的标签和属性,标签选择器的使用,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,相关知识点,初学者学习标签及其属性的很好的工具,标签库编辑器的使用,课堂实践,布置习题,学习目标,教学总结,课程引导,制作完整的框架网页,学习情境7,知识讲解,页面效果图,综合案例实训 “某幼儿园”框架页面的设计与制作,布置习题,学习目标,知识讲解,教学总结,课程引导,制作完整的框架网页,学习情境7,课堂实践,课堂实践：同步模仿操作-案例01-02拓展实践：教材第8章的课外拓展练习01-02综合案例实训： “某幼儿园”框架页面的设计与 制作,布置习题,学习目标,知识讲解,课堂实践,课程引导,制作完整的框架网页,学习情境7,教学总结,疑难解析,如果一个站点在浏览器中显示为包含三个框架的单个页面，该框架至少包括多少个独立的HTML文档？怎样删除已经创建的框架和框架集？怎样使框架集在不同的浏览器窗口中均能正常显示？如何防止个人网页中的内容被放到其他网站的框架中显示？,布置习题,学习目标,知识讲解,课堂实践,课程引导,制作完整的框架网页,学习情境7,教学总结,框架是网页中最常用的页面设计方式 之一，使用框架不但可以方便地创建具有统一风格的页面，而且也为设计网站节省了不少时间。当浏览框架网页时，可以发现网页部分区域内容将不会发生任何改变，而其他区域则会不断地更新内容。学习情境7主