html Frame, Iframe, Frameset의 차이점 _HTML/Xhtml_웹페이지 제작

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	사용자가 이 프레임의 크기를 변경할 수 있는지 여부를 설정합니다. 설정되지 않은 경우 시청자가 프레임을 당겨서 프레임의 크기를 변경할 수 있습니다.
프레임 간격	프레임 사이의 거리를 나타냅니다
테두리 색상	프레임 테두리 색상 설정

10.4.4 프레임과 아이프레임의 차이점

Frame과 Iframe은 기본적으로 동일한 기능을 구현할 수 있지만 Iframe은 Frame보다 유연성이 더 뛰어납니다.

Iframe 태그는 플로팅 프레임 태그라고도 하며 HTML 문서를 HTML에 삽입하여 표시하는 데 사용할 수 있습니다. 프레임 태그와 가장 큰 차이점은 웹페이지에 포함된 에 포함된 콘텐츠는 전체 페이지의 필수적인 부분인 반면, 은 독립적인 개체를 독립적으로 표시할 수 있습니다. 또한 Iframe을 사용하면 이 콘텐츠의 코드를 반복할 필요 없이 동일한 콘텐츠를 동일한 페이지에 여러 번 표시할 수도 있습니다.

그림 10.21에 표시된 페이지는 Iframe을 사용하여 페이지 상단과 하단에 페이지가 지정된 링크를 생성합니다. 웹 페이지에 동일한 파일을 삽입하기만 하면 됩니다. 코드 작성을 반복할 필요가 없습니다. 케이스의 실제 효과를 보려면 동봉된 CD에 있는 case/frame/iframe/see_infomore_iframe.htm을 참조하세요.

10.4.5 Iframe 투명도 설정

Iframe의 더 큰 장점은 프레임을 투명하게 설정하여 프레임 안의 배경이 메인 페이지의 배경과 동일하게 되도록 할 수 있다는 것입니다. 위의 예제 작업에서 주의 깊은 독자라면 이 문제를 발견할 것입니다. 다음은 Iframe 투명도를 설정하는 방법에 대한 자세한 설명입니다. 구체적인 단계는 다음과 같습니다.

(1) 북CD에 있는 case/frame/iframe/see_infomore_iframe1.htm을 엽니다.

(2) 브라우저에서 페이지 파일을 찾아보고 원래 셀의 배경이 Iframe이 삽입된 영역에 가려져 있는 것을 확인합니다. 이는 원하는 효과가 아닙니다.

(3) page.htm 페이지를 열고 코드 보기로 전환한 후 태그에 다음 코드를 삽입합니다.

그림 10.21 Iframe을 사용하여 페이지 넘기기 만들기

(4) see_infomore_iframe1.htm을 코드 보기로 전환하고 페이지에서 Iframe이 삽입된 셀의 코드를 다음과 같이 봅니다.

(5)

(7) page.htm과 see_infomore_iframe1.htm 두 페이지를 저장하고 브라우저에서 효과를 찾아보세요.