第6--13章 框架.docVIP

第六章 框架 课题：框架集的创建及其基本操作 一、教学基本内容 1 、演示并讲解用框架制作的网页 2 、框架的基本结构 3 、框架的各种属性 4 、框架结构之间的链接1、框架的各种属性 2、框架结构之间的链接 框架的各种属性 2、框架结构之间的链接1 、掌握框架的基本结构 2 、掌握框架的各种属性 3 、掌握框架结构之间的链接复习引入? ? ? ?回忆：中的框架应用? 框架的应用? ? ? ?重复出现在不同网页文档中的元素：网页标题、导航栏等等? ? ? ?3、建立框架将对象面板切换到框架页（Frame）插入不同的框架，一个区域对应于一个页面?在框架中打开原有网页：文件（File）à在框架中打开（Open in Frame）? ?4、保存框架? ? ? ?选择文件（File）/保存所有框架（Save Frameset），先保存框架文件，接着会出现提示，逐个保存框架中的网页?保存时注意名称框架编辑框架面板：窗口（Windows）à其它（Other）à框架（Frame）调出框架面板选定框架组：单击整个框架组的边框；或在框架面板中单击整个框架的边框框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等拆分框架：按Alt键，拖动边框；修改（Modify）à框架页（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）? ? ? ? *注意区别：插入一个新的框架与拆分框架的区别?6、??框架所对应的HTML代码? ?框架组：??通过设置rows或cols来设定是横的还是竖的，是顶部还是底部? ?框架组属性：frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距框架项：? ?框架属性：src指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小? ? ?建立框架页面如图，菜单链接到不同的图片，单击菜单中的一项，图片在右边的框架中打开??建立左右型的框架，并在其中的左框架中插入上下型的框架建立左右型框架，并将左边的框架拆分为上下型?八、教具 所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。 教学反思： 这部分内容，学生领悟的不错，需要加强实践，充分认识。 课题：创建电子图书 一、教学基本内容 利用框架制作网页 框架结构之间的链接 1 、掌握框架的 、掌握框架结构之间的链接01）打开或新建一个空白的文档，在该文档中创建一个 框架集。 （02）命名框架。将左列框架命名为index、右列上部框架命名为_top、右列下部框架命名为main。 （03）保存框架。将框架集保存为06A.asp文档，index框架保存为06B.asp文档，_top框架保存为06C.asp文档，main框架保存为06D.asp，文档均保存在ch06文件夹下。 （04）设置框架的行或列。将index框架的列设置为150像素，_top框架的行设置为90像素。 （05）设置页面的配色方案。单击“属性”面板中的“页面属性”按钮，将index框架的06B.asp文档的文本颜色设置为#669966，背景颜色设置为#FFCC99。 （06）将链接颜色按图6-14右侧图进行设置，然后单击“确定”按钮。 （07）定义样式。选择“文本”|“CSS样式”|“新建”选项，将index框架的06B.asp文档的tr标签定义为宋体9points。 （08）填充页面。在index框架06B.asp文档中输入如图6-15所示的文本并插入一个9行1列的表格。 其中“休闲娱乐”文本为隶书5号字体，颜色为#66CC00；表格边框的颜色为白色；单元格的高度为30像素，单元格的对齐方式为水平居中、垂直居中。 （09）在“页面属性”对话框中将_top框架的标题设置为“标题栏”，将所有边界都设置为0 （10）将光标停留在_top框架中，输入文本并插入images文件夹下的图像，其中文本为4号宋体，颜色为#66CC00。 （11）设置链接。选中左边框架（index）中目录下的“考试作弊”文本，在“属性”面板中的“链接”框中设置与之对应的笑话内容（WJ/wj6-1.asp）的链接。这时“目标”框变为激活状态，从“目标”下拉列表框中选择链接的目标为main。 （12）使用相同的方法设置其他“笑话”目录所链接的内容和链接目标，其他的链接目标均为main框架。笑话目录各项和WJ文件夹中wj6-1.asp～wj6-8.asp是一一对应的关系。 （13）指定框架源文件。选中main框架，在“属性”面板中的“源文件”文本框中设置框架的源文件。单击旁边的文件夹，选择WJ文件夹中wj6-1.