프레임셋 태그 디자인 페이지 고려 사항

중요: 태그를 태그 안에 넣을 수 없습니다. 그리고 HTML5는 더 이상 프레임셋 태그 사용을 지원하지 않습니다! ! !

1. 프레임셋 요소는 여러 창(프레임)을 구성하는 데 사용되는 프레임셋을 정의할 수 있습니다. 각 프레임워크에는 별도의 문서가 있습니다. 프레임을 사용하면 페이지를 분할하고 부분적으로 새로 고칠 수 있습니다. 합리적인 사용은 사용자에게 매우 좋은 경험을 가져다 줄 것입니다.

2. 프레임세트의 여러 속성 :

①, cols:프레임세트의 열 수와 크기를 정의합니다. 화면을 수직으로 자르고(예: 왼쪽과 오른쪽 두 개의 화면으로) 정수 값과 백분율을 허용하며, *는 남은 공간을 차지하는 것을 의미합니다. 값의 개수는 분할된 창의 개수를 나타내며 쉼표로 구분됩니다. 예를 들어 COLS="30,*,50%"는 세 개의 창으로 나눌 수 있습니다. 첫 번째 창은 너비가 30픽셀이고 두 번째 창은 첫 번째 창과 세 번째 창을 할당한 후 남아 있는 창입니다. 아래 공간인 세 번째 창이 전체 창 화면의 50%를 차지하고 너비는 상대적으로 분할됩니다. 숫자를 직접 조정할 수 있습니다.

②, 행:프레임세트의 행 수와 크기를 정의합니다. 화면의 상단과 하단을 구분하는 수평 컷입니다. 값 설정은 위와 동일합니다. Netacape가 때때로 이러한 유형의 프레임을 표시할 수 없기 때문에 COLS 및 ROWS 매개변수를 동일한 태그에 넣지 마십시오. 따라서 여러 분할을 사용해 보십시오.

3, frameborder: 프레임의 테두리를 설정합니다. 값은 0과 1뿐입니다. 0은 테두리가 없음을 의미하고 1은 테두리를 표시함을 의미합니다.

4, 테두리: 프레임의 테두리 두께를 설정합니다.

⑤, bordercolor: 프레임의 테두리 색상을 설정합니다.

⑥, framespacing: 은 프레임 사이의 거리와 프레임 사이에 남은 공간을 나타냅니다.

3. 프레임 태그 속성:

①, name: 프레임 이름을 설정합니다. 이 속성을 설정해야 합니다.

②, src: 이 프레임에 표시될 웹페이지의 이름이나 경로를 설정합니다. 이 속성을 설정해야 합니다.

3, 스크롤: 스크롤바 표시 여부를 설정합니다. 설정값은 auto, yes, no입니다.

4, bordercolor: 프레임의 테두리 색상을 설정합니다.

⑤, frameborder: 프레임 테두리 표시 여부를 설정합니다. 설정 값은 0과 1뿐입니다. 0은 테두리가 없음을 의미하고 1은 테두리를 표시한다는 의미입니다.

⑥, noresize: 프레임 크기를 수동으로 조정할 수 있는지 여부를 설정합니다.

7, marginwidth: 프레임 경계와 그 안에 있는 내용 사이의 너비를 설정합니다.

8, marginhight: 프레임 경계와 그 안의 내용 사이의 높이를 설정합니다.

9, 너비: 프레임 너비를 설정합니다.

⑩, height: 프레임 높이를 설정합니다.

4. 프레임셋 사용 예:

다음과 같은 효과를 얻으려면

페이지는 위쪽, 왼쪽, 오른쪽 세 부분으로 나뉩니다. 왼쪽의 하이퍼링크를 클릭하면 오른쪽의 프레임 페이지가 그에 따라 변경됩니다.

전체 페이지: main.html

1 <frameset rows="11%,*" border="1px" framespacing="0">2         <frame src="top.html" name="top" frameborder="0" />3         <frameset cols="12%,*"   framespacing="0" framespacing="0">4             <frame src="left.html" name="left" scrolling="auto"/>5             <frame src="right.html" name="right" scrolling="auto"/>6         </frameset>7 </frameset>

top.html, right.html은 빈 페이지, left.html은 다음과 같습니다.

1 <!-- 左边菜单栏显示-->2     <p >3         <ul >4             <li ><a href="taskCreate.html" target="right" id="taskCreat">任务创建</a></li>5             <li ><a href="taskManage.html" target="right">任务管理</a></li>6             <li ><a href="#" target="right" >数据集管理</a></li>7             <li ><a href="#" target="right" >模型管理</a></li>8         </ul>9     </p>

페이지의 계층적 표시는 주로 열에 관한 것입니다. 프레임세트 태그에서 프레임 태그 중첩과 함께 행을 사용합니다. 왼쪽의 메뉴 표시줄을 클릭하면 오른쪽의 프레임이 그에 따라 변경됩니다.

target: 연결된 문서를 열 위치를 규정하는 속성을 알아야 합니다. 브라우저는 이 태그의 href 속성으로 이름이 지정되고 이름이 이 대상과 일치하는 프레임이나 창에 문서를 로드하고 표시합니다. 즉, main.html에서 , 여기서 name 속성의 값은 무엇이며, left.html에서는 평등하다.

5. 상위 페이지가 하위 페이지에 있는 프레임셋에서 다른 프레임의 요소를 가져오는 방법은 무엇입니까?

즉, right.html 등에서 left.html의 태그의 속성 값을 가져오는 방법입니다.

$(parent.parent.mainFrame.document).contents ().find( "body").html(); //manFrame은 보려는 프레임의 ID를 참조합니다

예를 들어 위의 left.html 페이지에서 작업 생성 ID는 taskCreat입니다. 그러면 다음과 같이 얻을 수 있고 클래스 속성을 변경할 수 있습니다.

$(parent.parent.left.document).contents().find("#taskCreat").attr("class","list-group-item");

6. 장점과 단점 프레임셋

현재 HTML5 표준은 더 이상 프레임세트를 지원하지 않는다는 것을 알고 있습니다. 다시 로드를 사용하더라도 페이지 전체를 다시 로드할 필요는 없지만 페이지에서 하나의 프레임 페이지만 다시 로드하면 됩니다(데이터 전송 감소 및 웹 페이지 속도 향상). ) 다운로드 속도). 그러나 브라우저의 뒤로 버튼이 쓸모가 없어 관리가 어렵고 코드가 복잡하며 작은 모바일 디스플레이에서 검색하기 어렵다는 점 등 많은 단점도 있습니다. 장치가 불완전합니다. 다중 프레임 페이지는 서버 http 요청 등을 증가시킵니다. 따라서 프레임셋 사용에 주의가 필요하며, 현재 p+CSS를 사용하여 이 기능을 구현할 수도 있습니다.

위 내용은 프레임셋 태그 디자인 페이지 고려 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!