建立框架网张课件.ppt

1、教学难点教学内容教学目的教学重点教学过程上一页下一页教学内容教学内容1 1、建立框架网页的方法、建立框架网页的方法2 2、框架及框架集属性设置、框架及框架集属性设置3 3、超级链接目标框架设定、超级链接目标框架设定4 4、浮动框架的设定、浮动框架的设定教学难点教学内容教学目的教学重点教学过程上一页下一页教学目的教学目的1 1、了解框架网页的结构特点；、了解框架网页的结构特点；2 2、掌握框架网页的创建、保存方法；、掌握框架网页的创建、保存方法；3 3、熟练设置框架属性、框架集属性及超级链、熟练设置框架属性、框架集属性及超级链接目标框架位置；接目标框架位置；4 4、能独立运用框架结构布局网页；、

2、能独立运用框架结构布局网页；教学难点教学内容教学目的教学重点教学过程上一页下一页教学重点教学重点1 1、框架网页的拆分与保存；、框架网页的拆分与保存；2 2、框架与框架集属性的意义与设置；、框架与框架集属性的意义与设置；教学难点教学内容教学目的教学重点教学过程上一页下一页教学难点教学难点1 1、理解超级链接目标框架属性的意义与设置方法理解超级链接目标框架属性的意义与设置方法教学难点教学内容教学目的教学重点教学过程上一页下一页一、框架网页的建立与保存一、框架网页的建立与保存(一)使用预设方式创建框架1、在站点管理器下，选择“文件”一“新建窗口”，新建网页窗口。2、将光标放在网页之中。3、打开“插

3、入”工具栏的“布局”选项卡中，单击“框架”按钮，在弹出的下拉菜单中，单击合适的框架按钮如图所示。教学难点教学内容教学目的教学重点教学过程上一页下一页另外一种方法是通过菜单插入预设的框架形式。1、在网页编辑窗口下，选择“插入”一“HTML”一“框架”命令。2、弹出预设的框架形式，在拆分形式中进行选择，网页就会按预设的形式进行拆分。教学难点教学内容教学目的教学重点教学过程上一页下一页要创建新的空预定义框架集，请执行以下操作：1、选择“文件”“新建”。2、在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择框架集。单击“创建”。如图:教学难点教学内容教学目的教学重点教学过程上一页下一页(

4、二)自主创建框架自主创建框架包括两种方法。第一种方法是使用鼠标拖动框架。另外一种方法是通过菜单插入框架结构。(三)创建嵌套框架创建嵌套框架的操作如下：1、将光标放置于要插入嵌套框架的已有框架中。2、然后在编辑窗口中选择“修改”一“框架页”，在“拆分左框架”、“拆分右框架”、“拆分上框架”和“拆分下框架”中进行选择。教学难点教学内容教学目的教学重点教学过程上一页下一页(四四)保存框架和框架集中的文件保存框架和框架集中的文件执行下列操作之一：若要保存框架集文件，请选择“文件”“保存框架页”。若要将框架集文件另存为新文件，请选择“文件”“框架集另存为”。教学难点教学内容教学目的教学重点教学过程上一页

5、下一页保存框架中文档保存框架中文档 在框架中单击，然后选择“文件”“保存框架”或选择“文件”“框架另存为”,如图:教学难点教学内容教学目的教学重点教学过程上一页下一页二、框架属性与框架集的属性的设置与调整（一）使用框架面板 “框架”面板提供框架集内各框架的可视化表示形式。在“框架”面板中，环绕每个框架集的边框非常粗；而环绕每个框架的是较细的灰线，并且每个框架由框架名称标识。教学难点教学内容教学目的教学重点教学过程上一页下一页要显示“框架”面板，请执行以下操作：选择“窗口”“框架”或按shift+F2。要在“框架”面板中选择一个框架，请执行以下操作：在“框架”面板中单击框架,框架周围都会显示一个

6、选择轮廓,如图,当前选择了名称为top的窗口：教学难点教学内容教学目的教学重点教学过程上一页下一页教学难点教学内容教学目的教学重点教学过程上一页下一页要在“框架”面板中选择一个框架集，请执行以下操作：在“框架”面板中单击环绕框架集的边框,框架集周围都会显示一个粗线条的选择轮廓，如图：教学难点教学内容教学目的教学重点教学过程上一页下一页（二）修改框架属性在框架面板上或者在编辑窗口中选中框架，打开属性面版，如图所示：教学难点教学内容教学目的教学重点教学过程上一页下一页框架属性的设置如下：1、首先从属性面板左上角图标，可以确定当前选中的是框架。2、“框架名称”给当前选中的框架命名。可以根据框架在整个

7、框架网页中的位置命名，比如在上面的叫做up，在左面的叫做left。也可以根据内容，放置导航条的叫做navi，放置主要内容的叫做main，等等。3、“源文件”为当前选中框架中插入的框架网页的路径，在网页未被保存时使用绝对路径形式，保存之后使用相对路径形式。4、“滚动”设定当框架中的内容超出框架范围时是否出现滚动条，可选项包括以下内容。教学难点教学内容教学目的教学重点教学过程上一页下一页5、“不能调整大小”默认情况下，浏览者使用浏览器观看框架网页时可以拖动框架网页的拆分边框调整框 架的大小。6、“边框”设置框架是否有边框。可选择的项目有“是”、“否”、“默认”。框架边框的设置会优先于框架结构属性中

8、边框的设置。在大多数情况下，不应该让框架网页出现边框。7、“边框颜色”设置框架边框的颜色。对框架的边框颜色的设置要优先于对框架集边框颜色的设置。框架颜色的设置会影响到相邻框架边框的颜色。8、“边界高度”和“边界宽度”设置框架边框和框架内容之间的空白区域。“边界宽度”设置的是框架左侧和右侧边框与内容之间的空白区域。“边界高度”设置的是上面和下面的边框与内容之间的空白区域。教学难点教学内容教学目的教学重点教学过程上一页下一页（三）设置框架集的属性 选中框架集，打开属性面板，框架集面板的设置如下所示：教学难点教学内容教学目的教学重点教学过程上一页下一页1、左上角的预览区域显示当前框架集结构。2、“边

9、框”设置框架是否有边框。“是”为有边框，“否”为无边框，“默认”为浏览器决定是否有边框，对于大多数浏览器而言，这一项都意味着有边框。对于这一项，框架集的设置如果和框架的设置相冲突，以框架属性的设置为优先。3、“边框宽度”：设置框架结构中边框的宽度，单位是像素。4、“边框颜色”：设置边框的颜色，可以单击颜色框，打开取色面板，进行选择。5、设置框架结构的拆分比例。拆分的形式是上下拆分，将显示“行”。拆分的形式是左右拆分，则显示“列”。选择后会在“值”和“单位”两项出现该框架对应的值。教学难点教学内容教学目的教学重点教学过程上一页下一页 设置无框架内容的步骤是：1、在框架网页的编辑窗口下，选择“修改

10、”“框架页”“编辑无框架内容”，这时网页框架消失，出现完整的编辑窗口，窗口上方标注“无框架内容”。2、和编辑普通网页一样，编辑无框架时显示的内容。3、完成无框架内容编辑后，再次选择“修改”“框架页”“编辑无框架内容”，退出编辑无框架内容状态。教学难点教学内容教学目的教学重点教学过程上一页下一页三、通过超级链接控制框架显示的内容三、通过超级链接控制框架显示的内容1、选中框架。2、在框架属性面板上，“框架名称”一项给框架命名，命名的要求参考前面框架属性面板设置的相关内容。3、设置链接的目标框架在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。教学难点教学内容

11、教学目的教学重点教学过程上一页下一页下面介绍框架网页的设计和超级链接的目标窗口设定步骤：1、建立框架集选择“文件”“新建”“框架集”“垂直拆分”“创建”。2、在左边框架中布局七行一列表格，内容如下：教学难点教学内容教学目的教学重点教学过程上一页下一页在右边框架中输入文本信息。3、保存框架页 选择“文件”一“保存全部”，当前被保存的网页周围会被条纹线圈起来。框架集页命名为main.htm，左、右边框架页分别命名为left.htm、right.htm。4、设置框架属性 按住键盘Alt键的同时单击左边的框架，左边的框架被选中。左边框架属性的设置如图 教学难点教学内容教学目的教学重点教学过程上一页下一

12、页“框架名称”为left,“滚动”选择“否”，这样，即使是在浏览器窗口缩小的时候，这个框架也不会出现滚动条。选中“不能调整大小”。按住键盘Alt键的同时单击右边的框架，右边的框架被选中。右边框架属性的设置如图所示：教学难点教学内容教学目的教学重点教学过程上一页下一页5、设置框架集属性 选中框架集，属性设置如图所示：保存框架和框架集网页。6、设置超级链接的目标框架在left.htm中，分别选中文字部分，设定超级链接，在目标中选择“right”,如图教学难点教学内容教学目的教学重点教学过程上一页下一页保存网页，在浏览器中预览，效果如图：教学难点教学内容教学目的教学重点教学过程上一页下一页四四 浮动

13、框架布局页面元素浮动框架布局页面元素l浮动框架又叫嵌入式框架，所谓嵌入式框架就是在HTML文档中的一个区域内插入一个HTML文档，就像在HTML文档的一部分区域中显示一幅图像一样。浮动框架不需要在单独的网页中创建框架集，而是通过标签建立。最初的标签是微软公司提出的，通过标记将frame窗口置入一个HTML文档的任何位置，框架的内容和属性完全由设计者控制，这极大地拓展了浮动框架的应用范围。n在主菜单中选择【插入】/【标签】命令，打开【标签选择器】对话框，展开【HTML标签】，在右侧列表中找到“iframe”。教学难点教学内容教学目的教学重点教学过程上一页下一页浮动框架其常用属性如下表浮动框架案例浮动框架案例教学难点教学内容教学目的教学重点教学过程上一页下一页【小结】小结】框架网页是网页制作知识的重要组成部分。在制作框架网页时要注意步骤的规范，在保存框架网页时，要注意是保存的哪部分的框架。每次在框架网页中添加链接时要注意打开窗口对应的目标位置。灵活调整框架及框架集属性，可以实现不同的框架效果。