网页设计-建立框架网页

教学内容1、建立框架网页的方法2、框架及框架集属性设置3、超级链接目标框架设定网页设计-建立框架网页全文共27页，当前为第1页。教学目的1、了解框架网页的结构特点；2、掌握框架网页的创建、保存方法；3、熟练设置框架属性、框架集属性及超级链接目标框架位置；4、能独立运用框架结构布局网页；网页设计-建立框架网页全文共27页，当前为第2页。教学重点1、框架网页的拆分与保存；2、框架与框架集属性的意义与设置；网页设计-建立框架网页全文共27页，当前为第3页。教学难点1、理解超级链接目标框架属性的意义与设置方法网页设计-建立框架网页全文共27页，当前为第4页。一、框架网页的建立与保存(一)使用预设方式创建框架1、在站点管理器下，选择“文件”一>“新建窗口”，新建网页窗口。2、将光标放在网页之中。3、打开“插入”工具栏的“布局”选项卡中，单击“框架”按钮，在弹出的下拉菜单中，单击合适的框架按钮如图所示。网页设计-建立框架网页全文共27页，当前为第5页。另外一种方法是通过菜单插入预设的框架形式。1、在网页编辑窗口下，选择“插入”一>“HTML”一>“框架”命令。2、弹出预设的框架形式，在拆分形式中进行选择，网页就会按预设的形式进行拆分。网页设计-建立框架网页全文共27页，当前为第6页。要创建新的空预定义框架集，请执行以下操作：1、选择“文件”>“新建”。2、在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择框架集。单击“创建”。如图:网页设计-建立框架网页全文共27页，当前为第7页。(二)自主创建框架自主创建框架包括两种方法。第一种方法是使用鼠标拖动框架。另外一种方法是通过菜单插入框架结构。(三)创建嵌套框架创建嵌套框架的操作如下：

1、将光标放置于要插入嵌套框架的已有框架中。

2、然后在编辑窗口中选择“修改”一>“框架页”，在“拆分左框架”、“拆分右框架”、“拆分上框架”和“拆分下框架”中进行选择。网页设计-建立框架网页全文共27页，当前为第8页。

(四)保存框架和框架集中的文件执行下列操作之一：若要保存框架集文件，请选择“文件”>“保存框架页”。若要将框架集文件另存为新文件，请选择“文件”>“框架集另存为”。

网页设计-建立框架网页全文共27页，当前为第9页。保存框架中文档在框架中单击，然后选择“文件”>“保存框架”或选择“文件”>“框架另存为”,如图:网页设计-建立框架网页全文共27页，当前为第10页。二、框架属性与框架集的属性的设置与调整（一）使用框架面板

“框架”面板提供框架集内各框架的可视化表示形式。在“框架”面板中，环绕每个框架集的边框非常粗；而环绕每个框架的是较细的灰线，并且每个框架由框架名称标识。网页设计-建立框架网页全文共27页，当前为第11页。要显示“框架”面板，请执行以下操作：选择“窗口”>“框架”或按shift+F2。要在“框架”面板中选择一个框架，请执行以下操作：在“框架”面板中单击框架,框架周围都会显示一个选择轮廓,如图,当前选择了名称为top的窗口：网页设计-建立框架网页全文共27页，当前为第12页。网页设计-建立框架网页全文共27页，当前为第13页。要在“框架”面板中选择一个框架集，请执行以下操作：在“框架”面板中单击环绕框架集的边框,框架集周围都会显示一个粗线条的选择轮廓，如图：网页设计-建立框架网页全文共27页，当前为第14页。（二）修改框架属性在框架面板上或者在编辑窗口中选中框架，打开属性面版，如图所示：网页设计-建立框架网页全文共27页，当前为第15页。框架属性的设置如下：1、首先从属性面板左上角图标，可以确定当前选中的是框架。2、“框架名称”给当前选中的框架命名。可以根据框架在整个框架网页中的位置命名，比如在上面的叫做up，在左面的叫做left。也可以根据内容，放置导航条的叫做navi，放置主要内容的叫做main，等等。3、“源文件”为当前选中框架中插入的框架网页的路径，在网页未被保存时使用绝对路径形式，保存之后使用相对路径形式。4、“滚动”设定当框架中的内容超出框架范围时是否出现滚动条，可选项包括以下内容。网页设计-建立框架网页全文共27页，当前为第16页。5、“不能调整大小”默认情况下，浏览者使用浏览器观看框架网页时可以拖动框架网页的拆分边框调整框架的大小。6、“边框”设置框架是否有边框。可选择的项目有“是”、“否”、“默认”。框架边框的设置会优先于框架结构属性中边框的设置。在大多数情况下，不应该让框架网页出现边框。7、“边框颜色”设置框架边框的颜色。对框架的边框颜色的设置要优先于对框架集边框颜色的设置。框架颜色的设置会影响到相邻框架边框的颜色。8、“边界高度”和“边界宽度”设置框架边框和框架内容之间的空白区域。“边界宽度”设置的是框架左侧和右侧边框与内容之间的空白区域。“边界高度”设置的是上面和下面的边框与内容之间的空白区域。网页设计-建立框架网页全文共27页，当前为第17页。（三）设置框架集的属性选中框架集，打开属性面板，框架集面板的设置如下所示：网页设计-建立框架网页全文共27页，当前为第18页。1、左上角的预览区域显示当前框架集结构。2、“边框”设置框架是否有边框。“是”为有边框，“否”为无边框，“默认”为浏览器决定是否有边框，对于大多数浏览器而言，这一项都意味着有边框。对于这一项，框架集的设置如果和框架的设置相冲突，以框架属性的设置为优先。3、“边框宽度”：设置框架结构中边框的宽度，单位是像素。4、“边框颜色”：设置边框的颜色，可以单击颜色框，打开取色面板，进行选择。5、设置框架结构的拆分比例。拆分的形式是上下拆分，将显示“行”。拆分的形式是左右拆分，则显示“列”。选择后会在“值”和“单位”两项出现该框架对应的值。网页设计-建立框架网页全文共27页，当前为第19页。

设置无框架内容的步骤是：

1、在框架网页的编辑窗口下，选择“修改”――>“框架页”

――>“编辑无框架内容”，这时网页框架消失，出现完整的编辑窗口，窗口上方标注“无框架内容”。

2、和编辑普通网页一样，编辑无框架时显示的内容。

3、完成无框架内容编辑后，再次选择“修改”

――>“框架页”――>“编辑无框架内容”，退出编辑无框架内容状态。网页设计-建立框架网页全文共27页，当前为第20页。三、通过超级链接控制框架显示的内容1、选中框架。2、在框架属性面板上，“框架名称”一项给框架命名，命名的要求参考前面框架属性面板设置的相关内容。3、设置链接的目标框架

在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应在其中显示的框架或窗口。网页设计-建立框架网页全文共27页，当前为第21页。下面介绍框架网页的设计和超级链接的目标窗口设定步骤：1、建立框架集选择“文件”

――>“新建”

――>“框架集”

――>“垂直拆分”

――>“创建”。2、在左边框架中布局七行一列表格，内容如下：网页设计-建立框架网页全文共27页，当前为第22页。在右边框架中输入文本信息。3、保存框架页选择“文件”一“保存全部”，当前被保存的网页周围会被条纹线圈起来。框架集页命名为main.htm，左、右边框架页分别命名为left.htm、right.htm。4、设置框架属性按住键盘Alt键的同时单击左边的框架，左边的框架被选中。左边框架属性的设置如图网页设计-建立框架网页全文共27页，当前为第23页。“框架名称”为left,“滚动”选择“否”，这样，即使是在浏览器窗口缩小的时候，这个框架也不会出现滚动条。选中“不能调整大小”。按住键盘Alt键的同时单击右边的框架，右边的框架被选中。右边框架属性的设置如图所示：网页设计-建立框架网页全文共27页，当前为第24页。5、设置框架集属性选中框架集，属性设置如图所示：保存框架和框架集网页。6、设置超级链接的目标框架在left.htm中，分别选中文字部分，设定超级链接，在目标中选择“right”,如图网页设计-建立框架网页全文共27页，当前为第25页。保存网页，