模块7-制作完整的框架网

《模块7-制作完整的框架网》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、主讲教师：谭荣华网页设计与制作——学习情境7：制作完整的框架网页布置习题学习目标知识讲解课堂实践教学总结制作完整的框架网页学习情境7课程引导在网页中，除了使用表格和APDiv定位外，还可以使用框架进行定位。使用框架结构设计的HTML文件，可以将整个浏览器窗口分成几个独立的小窗口，一个窗口就是一个框架，每一个框架可分别载入不同的网页文件，此外，框架之间是可以相互控制的。概述布置习题知识讲解课堂实践教学总结课程引导制作完整的框架网页学习情境7学习目标掌握制作框架网页的方法学习目标专业能力目标专业知识目标专业素质目标布置习题知识讲解课堂实践教学总结课

2、程引导制作完整的框架网页学习情境7学习目标使用框架制作页面的能力专业能力目标布置习题知识讲解课堂实践教学总结课程引导制作完整的框架网页学习情境7学习目标规划页面框架结构创建、选择页面框架设置页面框架和框架集的属性编辑页面框架创建嵌入式框架iframe专业知识目标布置习题知识讲解课堂实践教学总结课程引导制作完整的框架网页学习情境7学习目标团队协作精神沟通表达能力乐观精神敬业精神责任感效率观念结构布局能力专业素质目标课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解教学案例案例01–创建上方固定、左侧嵌套的框架网页案例02

3、–创建嵌入式框架iframe综合案例实训-“某幼儿园”框架页的设计与制作课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解案例操作过程(P129-133)相关知识点(P133-135)案例01–创建上方固定、左侧嵌套的框架网页当在文件中建立框架时，Dreamweaver可以创建一个无标题的框架集文件，在每个框架中创建无标题文件，如果某个页面被划分成3个框架，它实际上包含的却是4个独立的文件：一个框架集文件和3个框架内容文件。框架内容文件包含了将出现在页面框架中的内容。如图所示的框架页面：利用框架将窗口分成3个子窗口，分

4、别命名为win1，win2和win3，子窗口win1对应的HTML中设置了两个超链接，用户单击这两个超链接后目标URL将在子窗口win2中显示win1win2win3课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解相关知识点选择“查看>可视化助理>框架边框”命令，然后利用鼠标拖动框架边框的方法可以创建框架创建预定义框架课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解相关知识点选择“文件>新建”命令，在弹出的“新建文档”对话框中选择“示例中的页>框架集”选项，在“示例页”列表中根据需要进行选

5、择，单击“创建”按钮，即可创建框架集或者在“插入”栏中选择“框架”按钮，在下拉列表中选择框架类型后也可创建框架集创建自定义框架课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解相关知识点框架面板选择Alt键+框架选择框架的多种选择方法按住Alt键单击此框架即被选中呈虚线框显示课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解相关知识点框架面板选择法Alt键+框架边框选择法框架集的多种选择方法当鼠标变为双向箭头时按住Alt键选择框架集，框架集呈虚线显示用鼠标指向框架面板的黑色边框后单击即可选中框

6、架集，框架集同样也是虚线显示课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解相关知识点和保存其他文件一样，选择“保存”或“另存为”均可保存，不同的是保存框架时先要选中框架框架及框架集的保存课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解相关知识点框架属性设置框架集属性设置设置框架和框架集的属性课堂实践布置习题学习目标教学总结课程引导制作完整的框架网页学习情境7知识讲解相关知识点主要标签1.frameset2.frame3.Noframe4.iframeHTML中框架的标签及属性简介1.Fr

7、ameset功能：描述框架集（即整个框架的结构）语法：……属性：colsrowsframeborderbordercolorframecolorframespacingonloadonunloadCols(水平方向)Rows(垂直方向)用于指定在水平或垂直方向上将窗口分为若干框架时每个框架的宽度。取值可以为①正整数(单位：像素)，如：cols=“200”②百分比，如：cols=“80%”③*(表示除去其他框架所占宽度后剩下的宽度)如：co

8、ls=“80,*”表示将窗口分为左右两个框架，左边框架的宽度为80像素Bordercolor用于指定边框的颜色Frameborder用于指定是否出现边