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

프레임을 이용한 레이아웃의 응용 (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>