프레임을 이용하면 다음과 같이 아주 조그마한 몇개의 그림으로 화면 전체를 꾸밀 수 있다. 프레임은 원하는 대로 창을 나눌 수 있고 각각의 창에는 문서를 지정하여 보여주므로 각각의 나누어진 창에 보여지는 문서의 배경 그림을 각각 아래와 같이 지정하면 멋진 응용이 될수 있다.

프레임을 이용한 레이아웃의 응용 (1)

★ 적용된 결과 미리보기 ★

사용된 이미지들

.....

HTML Example - demo14.html (프레임지정문서)


<!-- 전체창을 3줄로 분활한다 -->
<frameset rows="19,*,19" frameborder=0 framespacing=0 border=0>

<!-- 1번째 줄을 다시 3개의 칸으로 분활한다.-->
<frameset cols="19,*,19" frameborder=0 framespacing=0 border=0>
<frame src="demo14_11.html" name="bg11" marginwidth=0 marginheight=0 scrolling=no>
<frame src="demo14_12.html" name="bg12" marginwidth=0 marginheight=0 scrolling=no>
<frame src="demo14_13.html" name="bg13"marginwidth=0 marginheight=0 scrolling=no>
</frameset>

<!-- 2번째 줄을 다시 3개의 칸으로 분활한다.-->
<!-- 3개의 칸은 왼쪽 19 , 오른쪽 19 , 가운데는 전체창의 나머지 지정방법이다-->
<frameset cols="19,*,19" frameborder=0 framespacing=0 border=0>
<frame src="demo14_21.html" name="bg21" marginwidth=0 marginheight=0 scrolling=no>
<!-- 이곳에서 지정한 문서가 가장 가운데 부분에 들어가는 본문부분이다 따라서 그 내용이 창아래로 늘어 질 수가 있으므로 스크롤을 자동으로 맞춘다.-->
<frame src="demo14_22.html" name="bg22" marginwidth=0 marginheight=0 scrolling=auto>
<frame src="demo14_23.html" name="bg23" marginwidth=0 marginheight=0 scrolling=no>
</frameset>

<!-- 3번째 줄을 다시 3개의 칸으로 분활한다.-->
<frameset cols="19,*,19" frameborder=0 framespacing=0 border=0>
<frame src="demo14_31.html" name="bg31" marginwidth=0 marginheight=0 scrolling=no>
<frame src="demo14_32.html" name="bg32" marginwidth=0 marginheight=0 scrolling=no>
<frame src="demo14_33.html" name="bg33" marginwidth=0 marginheight=0 scrolling=no>
</frameset>

<!-- 프레임을 지원하지 않는 브라우저를 위한 메세지-->

<noframes>
이 곳은 넷스케잎이나 익스플로러와 같은 프래임이 가능한 웹 브라우저를 사용하셔야 합니다.
</noframes>

<!-- 맨위 전체 프레임지정 태그 닫는 태그-->
</frameset>