La différence entre la production de pages HTML Frame, Iframe et Frameset _HTML/Xhtml_Web

10.4.1  Frameset与Frame的区别
首先讲解Frameset与Frame之间的区别。

用来划分框架，每一个框架由标记。必须在之内使用，代码如下：

在上面的例子当中，把页面分为左右两个部分，左侧框架中的页面是admin_left.htm，右侧框架中的页面是admin_center.htm。

注意：标记的框架顺序为从左至右或从上到下。

两者的差别如下：

  ● 为框架标记，说明该网页文档为框架组成，并设定文档中组成框架集的框架的布局。

  ● 用以设置组成框架集中各个框架的属性。

10.4.2  Frameset参数设置
需要设置一些特定的参数，这些参数直接决定了整个页面的布局，代码如下：

关于上段代码的各项参数设置及其含义如表10.3所示。

表10.3  Frameset参数

参    数	说    明
Border	设定框架的边框厚度，以pixels为单位
frameborder	设定是否显示框架的边框，0为不显示，1为显示
FrameSpacing	表示框架与框架之间的距离
BorderColor	设定框架的边框颜色
Row	将文档分为上下的框架，Row后的值可以为数值或百分数，*表示占用余下的空间，数值的个数代表水平分成的框架个数，例如Rows=“210,*,10%”，表示页面分为上中下三个框架页，上边的框架占用210px，下边的框架占用整个文档的10%，余下的空间为中间的框架占用。*是一个相对的概念，例如Row=*，表示页面中没有上下结构的框架布局
Cols	设置同Row

10.4.3  Frame参数设置

关于Frame参数的设置，代码如下：

 

如表10.4所示。

表10.4  Frame参数

参    数	说    明
Name	设定框架的名称，须为英文
Src	设置框架中显示的页面路径和名称，可为相对路径亦可为绝对路径
Marginwidth	表示框架距离左右边缘的距离
Marginheight	表示框架距离上下边缘的距离
Scrollling	设置是否在框架中显示滚动条，yes为显示，no为不显示，auto表示当框架页中内容超过框架的大小时自动显示滚动条
Frameborder	设置是否显示框架的边框，0为不显示，1为显示
Noresize	Définissez si l'utilisateur peut modifier la taille de ce cadre. Si cela n'est pas défini, le spectateur peut tirer le cadre et modifier la taille du cadre
Espacement des images	Indique la distance entre les images
Couleur de la bordure	Définissez la couleur de la bordure du cadre

10.4.4 La différence entre Frame et Iframe

Frame et Iframe peuvent réaliser fondamentalement les mêmes fonctions, mais Iframe a plus de flexibilité que Frame.

La balise Iframe est également appelée balise de cadre flottant, qui peut être utilisée pour intégrer un document HTML dans un HTML pour l'afficher. La plus grande différence entre cette balise et la balise Frame est que le contenu contenu dans intégré dans la page Web fait partie intégrante de la page entière, tandis que le contenu contenu dans est un élément indépendant. Les individus peuvent être affichés indépendamment. De plus, l’utilisation d’Iframe permet également d’afficher plusieurs fois le même contenu sur une même page sans avoir à répéter le code de ce contenu.

La page illustrée dans la figure 10.21 utilise Iframe pour créer des liens paginés en haut et en bas de la page. Le code pour le haut et le bas est le même. Il vous suffit d'intégrer le même fichier dans la page Web. pas besoin de répéter l'écriture du code. Pour l'effet réel du cas, veuillez vous référer au case/frame/iframe/see_infomore_iframe.htm dans le CD d'accompagnement.

10.4.5 Définir la transparence Iframe

Un avantage encore plus important d'Iframe est que vous pouvez définir le cadre pour qu'il soit transparent afin que l'arrière-plan du cadre soit le même que l'arrière-plan de la page principale. Dans l'exemple d'opération ci-dessus, les lecteurs attentifs trouveront ce problème. Voici une explication détaillée de la façon de définir la transparence Iframe. Les étapes spécifiques sont les suivantes :

(1) Ouvrez le case/frame/iframe/see_infomore_iframe1.htm dans le CD du livre.

(2) Parcourez le fichier d'échange dans le navigateur et constatez que l'arrière-plan de la cellule d'origine est couvert dans la zone où l'Iframe est inséré. Ce n'est pas l'effet souhaité.

(3) Ouvrez la page page.htm, passez à la vue code et insérez le code suivant dans la balise

Figure 10.21 Utilisation d'Iframe pour créer des retournements de page

(4) Basculez see_infomore_iframe1.htm vers la vue code et affichez le code de la cellule où l'Iframe est inséré sur la page comme suit :

(5) Dans la balise

(7) Enregistrez les deux pages page.htm et see_infomore_iframe1.htm, et parcourez l'effet dans le navigateur.