模块制作完整的框架网页精选文档.ppt

模块制作完整的框架网页本讲稿第一页，共二十三页布置习题布置习题学习目标学习目标知识讲解知识讲解课堂实践课堂实践教学总结教学总结制作完整的框架网页学习情境学习情境7课程引导课程引导在网页中，除了使用表格和AP Div定位外，还可以使用框架进行定位。使用框架结构设计的HTML文件，可以将整个浏览器窗口分成几个独立的小窗口，一个窗口就是一个框架，每一个框架可分别载入不同的网页文件，此外，框架之间是可以相互控制的。概述概述本讲稿第二页，共二十三页布置习题布置习题知识讲解知识讲解课堂实践课堂实践教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7学习目标学习目标1.掌握制作框架网页的方法学习目标学习目标专业能力目标专业知识目标专业素质目标本讲稿第三页，共二十三页布置习题布置习题知识讲解知识讲解课堂实践课堂实践教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7学习目标学习目标1.使用框架制作页面的能力专专业业能能力力目目标标本讲稿第四页，共二十三页布置习题布置习题知识讲解知识讲解课堂实践课堂实践教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7学习目标学习目标1.规划页面框架结构2.创建、选择页面框架3.设置页面框架和框架集的属性4.编辑页面框架5.创建嵌入式框架iframe专专业业知知识识目目标标本讲稿第五页，共二十三页布置习题布置习题知识讲解知识讲解课堂实践课堂实践教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7学习目标学习目标1.团队协作精神2.沟通表达能力3.乐观精神4.敬业精神5.责任感 6.效率观念7.结构布局能力专专业业素素质质目目标标本讲稿第六页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解教教学学案案例例案例01 创建上方固定、左侧嵌套的框架网页案例02 创建嵌入式框架iframe综合案例实训-“某幼儿园”框架页的设计与制作本讲稿第七页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解案例操作过程(P129-133)相关知识点(P133-135)案例01 创建上方固定、左侧嵌套的框架网页当在文件中建立框架时，Dreamweaver可以创建一个无标题的框架集文件，在每个框架中创建无标题文件，如果某个页面被划分成3个框架，它实际上包含的却是4个独立的文件：一个框架集文件和3个框架内容文件。框架内容文件包含了将出现在页面框架中的内容。如图所示的框架页面：利用框架将窗口分成3个子窗口，分别命名为win1，win2和win3，子窗口win1对应的HTML中设置了两个超链接，用户单击这两个超链接后目标URL将在子窗口win2中显示win1win2win3本讲稿第八页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解相关知识点选择“查看可视化助理框架边框”命令，然后利用鼠标拖动框架边框的方法可以创建框架创建预定义框架本讲稿第九页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解相关知识点选择“文件新建”命令，在弹出的“新建文档”对话框中选择“示例中的页框架集”选项，在“示例页”列表中根据需要进行选择，单击“创建”按钮，即可创建框架集或者在“插入”栏中选择“框架”按钮，在下拉列表中选择框架类型后也可创建框架集创建自定义框架本讲稿第十页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解相关知识点框架面板选择Alt键+框架选择框架的多种选择方法按住Alt键单击此框架即被选中呈虚线框显示本讲稿第十一页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解相关知识点框架面板选择法Alt键+框架边框选择法框架集的多种选择方法当鼠标变为双向箭头时按住Alt键选择框架集，框架集呈虚线显示用鼠标指向框架面板的黑色边框后单击即可选中框架集，框架集同样也是虚线显示本讲稿第十二页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解相关知识点和保存其他文件一样，选择“保存”或“另存为”均可保存，不同的是保存框架时先要选中框架框架及框架集的保存本讲稿第十三页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解相关知识点框架属性设置框架集属性设置设置框架和框架集的属性本讲稿第十四页，共二十三页课堂实践课堂实践布置习题布置习题学习目标学习目标教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7知识讲解知识讲解相关知识点主要标签1.frameset2.frame3.Noframe4.iframeHTML中框架的标签及属性简介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综合案例实训：“某幼儿园”框架页面的设计与 制作本讲稿第二十页，共二十三页布置习题布置习题学习目标学习目标知识讲解知识讲解课堂实践课堂实践课程引导课程引导制作完整的框架网页学习情境学习情境7教学总结教学总结1 1疑难解析疑难解析如果一个站点在浏览器中显示为包含三个框架的单个页面，该框架至少包括多少个独立的HTML文档？怎样删除已经创建的框架和框架集？怎样使框架集在不同的浏览器窗口中均能正常显示？如何防止个人网页中的内容被放到其他网站的框架中显示？本讲稿第二十一页，共二十三页布置习题布置习题学习目标学习目标知识讲解知识讲解课堂实践课堂实践课程引导课程引导制作完整的框架网页学习情境学习情境7教学总结教学总结框架是网页中最常用的页面设计方式 之一，使用框架不但可以方便地创建具有统一风格的页面，而且也为设计网站节省了不少时间。当浏览框架网页时，可以发现网页部分区域内容将不会发生任何改变，而其他区域则会不断地更新内容。学习情境7主要学习了框架的概念与特点，再详细讲解了框架的创建、保存、属性的设置、嵌入式框架iframe等基本操作。2 2课堂小结课堂小结本讲稿第二十二页，共二十三页学习目标学习目标知识讲解知识讲解课堂实践课堂实践教学总结教学总结课程引导课程引导制作完整的框架网页学习情境学习情境7布置习题布置习题1.对比标签编辑器iframe属性和生成的HTML代码，找出其对应关系2.上网搜索相关知识，说明iframe与一般框架的区别本讲稿第二十三页，共二十三页