브라우저 문서 창에는 하나의 웹 페이지 파일 만 표시 할 수 있지만 프레임 워크를 사용하여 동일한 브라우저 창에 둘 이상의 페이지를 표시 할 수 있습니다. 프레임을 사용하는 페이지에는 주로 두 부분이 포함되어 있습니다. 하나는 프레임 세트이고 다른 하나는 특정 프레임 파일입니다.
프레임 워크는 주로 웹 사이트 백엔드 또는 인트라넷 시스템의 레이아웃에 사용됩니다.
1. frameset (<frameset> </frameset>) : 이 HTML 파일을 프레임 워크 모드로 정의하고 창을 나누는 방법을 설정하는 데 사용됩니다. 간단히 말해서 프레임 워크 세트는 프레임 워크 구조를 저장하는 파일과 프레임 워크 파일에 액세스하는 항목 파일입니다. 웹 페이지가 두 개의 왼쪽 및 오른쪽 프레임으로 구성된 경우 두 개의 왼쪽 및 오른쪽 웹 페이지 파일 외에도 총 프레임 세트 파일도 있습니다. 프레임을 사용하는 페이지에서 <body> 바디 태그는 프레임 태그 <frameset>로 대체됩니다. 프레임 페이지에 포함 된 각 프레임에 대해 <frame> 태그로 정의됩니다.줄 속성 : 수평 분할 창. 수평 분할 창은 페이지를 수평 방향으로 자르는 것입니다. 다중 값은 행으로 가져갈 수 있고 각 값은 프레임 창의 수평 너비를 나타내며, 단위는 픽셀 또는 브라우저의 백분율 일 수 있습니다. 그러나 일반적으로 여러 행의 값을 설정할 때 여러 프레임 워크가 있습니다.
<html> <head> <title> 수평 분할 창의 효과 </title> </head> <프레임 세트 행 = 30%, 70%> <프레임> <프레임> </framestet> </html>
콜스 속성 : 수직 분할 창. 수직 분할 창은 페이지를 수직 방향으로 여러 개의 창으로 나누는 것입니다. 여러 값이 Cols로 가져갈 수 있고, 각 값은 프레임 창의 수평 너비를 나타내고, 그 단위는 브라우저의 픽셀 또는 백분율 일 수 있습니다. 수평 분할 창과 동일하며, 일반적으로 여러 cols의 값을 설정할 때 몇 가지 프레임 워크, 즉 몇 가지 <frame> 매개 변수가 있습니다.
<html> <head> <title> 수직 분할 창의 효과 </title> </head> <frameset cols = 20%, 55%, 25%> <frame> <frame> <frame> <frame> </frameset> </html>
프레임 버더 속성 : 테두리를 설정하십시오. 기본적으로 프레임 창 주위에 테두리 라인이 있습니다. 프레임 보더 매개 변수는 테두리 라인의 표시를 조정하는 데 사용될 수 있습니다. 구문은 다음과 같습니다.
<frameset frameborder = 표시되는지> 또는 <frameframeborder = 표시되는지>. 프레임 보더의 값은 0 또는 1 일 수 있습니다. 값이 0이면 경계선이 숨겨집니다. 값이 1 인 경우 테두리 라인이 표시됩니다. 프레임 세트에서 설정은 전체 프레임 워크에 유효하며 프레임으로 설정하면 현재 프레임 워크에만 유효합니다.
<html> <head> <title> 프레임 창의 테두리 표시 효과를 설정 </title> </head> <프레임 세트 로우 = 20%, 55%, 25%> <frameframeborder = 1> <frameset cols = 35%, 65%프레임 보더 = 0> <frame> <frame> </frameset> <frameborder = 0> </html>
프레임 스페이스 속성 : 프레임의 테두리 너비. 프레임의 테두리 너비는 기본적으로 1 픽셀이며 매개 변수 프레임 스페이스로 크기를 조정할 수 있습니다.
구문 : <프레임 세트 프레임 스페이스 = 테두리 너비>
참고 : 테두리 너비는 페이지의 각 테두리 사이의 선 너비, 픽셀입니다. 이 매개 변수는 프레임 워크 세트에만 사용될 수 있으며 단일 프레임 워크에는 유효하지 않습니다.
<html> <head> <title> 프레임 테두리 너비 설정 </title> </head> <프레임 세트 행 = 30%, 70%프레임 스케이싱 = 10> <프레임 세트> <프레임 세트 콜스 = 20%, 55%, 25%프레임 스케이싱 = 30> <frame> <frame> <frame> <frame> </frameset> </html>
BorderColor 속성 : 프레임의 경계 색상. Parameter BorderColor를 사용하여 프레임 세트의 테두리 색상을 설정하십시오.
구문 : <프레임 세트 BorderColor = 색상 코드>
참고 :이 매개 변수는 전체 프레임 워크 세트에만 유효하며 단일 프레임 워크에는 유효하지 않습니다.
<html> <head> <title> 프레임 테두리 색상 설정 </title> </head> </head> <프레임 세트 행 = 30%, 70%프레임 스케이싱 = 10 BorderColor =#cc99ff> <frame> <프레임 세트 = 20%, 55%, 25%프레임 스페이서 = 30 BorderColor =#9900ff> <프레임> <프레임> <프레임> <프레임> <프레임> </html>2. 프레임 (<프레임>) 및 SRC 속성.
프레임 워크 구조의 각 페이지는 별도의 텍스트이며 이러한 파일은 SRC 매개 변수를 통해 설정됩니다.
구문 : <프레임 SRC = 페이지 소스 파일 주소>
참고 : 페이지 파일은 프레임 페이지의 특정 콘텐츠입니다. 소스 파일과 빈 페이지 만 설정하지 않고 프레임에 영향을 미치지 않습니다. 페이지의 소스 파일은 일반 HTML 파일 또는 그림 또는 기타 파일 일 수 있습니다.
<html> <head> <title> 페이지 소스 소스 파일 세트 </title> </head> <프레임 세트 행 = 30%, 70%> <프레임 SRC = pic01.gif> <프레임 src = src01.html> </html> </html>3. <noframes> </noframes> 태그
<noframes> </noframes> 태그는 브라우저가 프레임을 지원하지 않을 때 페이지 컨텐츠를 표시하는 데 사용됩니다.
<html> <frameset cols = 25%, 50%, 25%> <frame src =/example/html/frame_a.html> <frame src =/example/html/frame_b.html> <frame src =/example/html/frame_b.html> <frame src =/html/ramle/html/html/html/html/html/html/html/html/html. <noframes> <bod> 브라우저는 프레임 워크를 처리 할 수 없습니다! </body> </noframes> </frameset> </html>2. 부동 프레임 (<iframe>)
플로팅 프레임은 비교적 특별한 프레임입니다. 브라우저 창의 어린이 창에 중첩됩니다. 즉, 전체 페이지는 프레임 페이지가 아니지만 프레임 창이 포함되어 있습니다. 프레임 창에 해당 페이지 내용을 표시합니다. 플로팅 프레임은 또한 인라인 프레임이라고 불리며, 따라서 이름이 지정됩니다.
구문 : <iframe src = 페이지 소스 파일> </iframe>
참고 : 평범한 프레임 구조와 유사하게, 플로팅 프레임은 이름, 스크롤, 프레임 버더 등과 같은 많은 매개 변수를 설정할 수도 있습니다.
SRC 속성 : 플로팅 프레임 워크에서 가장 기본적인 매개 변수는 SRC입니다. 플로팅 프레임 워크 페이지의 소스 파일 주소를 설정하는 데 사용되며 플로팅 프레임 워크 페이지에 필요한 매개 변수이기도합니다. 소스 파일의 내용이 설정된 경우에만 플로팅 프레임 워크가 의미가 있습니다. 구문 : <iframe src = 페이지 소스 파일>
너비 및 높이 특성 : 일반 프레임 워크 구조에서 프레임 워크가 전체 브라우저 창이므로 크기를 설정할 필요가 없습니다. 그러나 플로팅 프레임에서는 일반적인 HTML 페이지에 삽입되며 전체 프레임을 크기로 조정할 수 있습니다. 구문 : <iframe src = src = 플로팅 프레임 페이지 소스 소스 파일 너비 = 페이지 너비 높이 = 페이지 높이>, 페이지의 너비와 높이 값은 픽셀입니다.
<html> <hod> <iframe src =/i/eg_landscape.jpg 너비 = 550 높이 = 310> </iframe> <p> 일부 오래된 브라우저는 iframes를 지원하지 않습니다. </p> <p> 지원되는 경우 IFRAME가 보이지 않습니다. </p> </body> </html>3. 프레임 워크 레이아웃의 예
<html> <head> <title> 프레임 홈페이지 </title> </witch> </head> <프레임 세트 행 = 20%,*> <!-프레임 세트 세트, 제어 파일 컨트롤-> <프레임 이름 = topfame src = 3.html noresize/> <frameset cols = 240px,*> <leftrame src = 1.html/>. src = 2.html marginwidth = 20px scrolling = no/> </frameset> <noframes> <!-noframes 태그는 바디 태그를 포함 할 수 있습니다-> <body>이 페이지는 프레임 세트 태그를 지원하지 않습니다! </body> </noframes> </frameset> </html>4. 링크의 틀에서 벗어나는 방법
웹 사이트 백엔드 레이아웃에서 프레임 워크가 더 자주 사용됩니다. 대부분의 경우 프레임 워크에서 뛰어 내려 페이지를 다시로드해야합니다. 그렇다면 링크가 어떻게 프레임 워크에서 벗어날 수 있습니까? 실제로 <a> </a> 태그의 대상 속성 만 _top으로 지정하면됩니다. 다음은 간단한 예입니다.
<html> <body> <p> 프레임에 잠겨 있습니까? </p> <a href =/index.html target = _top> 여기를 클릭하십시오! </a> </body> </html>