Internet Link Exchange
Member of the Internet Link Exchange

Frames Tutor- Lesson 5

이제 우리가 해야할 일은 처음부터 프레임으로 된 페이지를 만드는 일입니다.
화려할 것도 없고, 그저 이렇습니다.

시작하기 전에, 다시 한번 강조합니다... 단순하게 하세요! 프레임이 덕지덕지한 페이지, 연결 포인터가 도처에 깔린 싸이트는 만들기도 복작하고 돌아다니기는 더 복잡하죠.

우선 우리는 결과가 어떠할지 생각해 봐야 합니다. 좋고, 단순한 디자인은 맨위로는 깃발이 가로지르고, 왼쪽은 목차가, 오른쪽은 메인 창이있는 것이라고 생각합니다. 그러면 마스터 페이지를 만들어 봅시다.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET>
</FRAMESET>

</HTML>

또 다른 폴더를 만들고, index.html로 저장하세요. 또한 우리가 이 깃발에 사용할 그림은 "MY FRAMZ PAGE" 그림입니다. framz1.gif라고 불리며, framz 폴더 안에 있습니다. 지금 만든 작업 폴더로 복사하세요.


화면을 수평으로 나누어 주세요.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
</FRAMESET>

</HTML>

그림 높이에 8을 더해 83을 얻었다는 것에 주의하세요(75+8=83). 또한 여러분이 절대값을 사용하기 때문에 우리가 탄력적인 프레임을 포함한다는 것도 알아두세요.


다음은 banner.html를 맨위 프레임으로 가도록 지정합니다. (그 문서를 조금있다 만들 겠습니다.). 또한 바닥의 비율을 좀더 분할해야 하기 때문에, <FRAMESET> 태그를 던져 버립시다.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

확인
지금 실행 시킬 수도 있지만, 불완전하기 때문에 에러 메시지가 떨것입니다.


우리는 아래의 창을 2개로 나눌 겁니다. 여러분은 또한 왼쪽 창에 directory.html을 포함하고, 오른쪽 창에 home.html을 포함하도록 지정할 수 있습니다. 또 다시, 이 문서들을 만들지 않았기 때문에 여전히 에러 메시지가 하나 뜰겁니다.(아니면 2~3개)

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directory.html">
    <FRAME SRC="home.html">
  </FRAMESET>
</FRAMESET>

</HTML>

확인


우리 디렉토리는 왼쪽에 있고, 페이지는 오른쪽 프레임에 뜰 것입니다. 그 프레임에 이름을 주어야 합니다. 그 안에 떠서 내용을 가질 유일한 것이기 때문에, 우리가 꼭 이름을 주어야하는 유일한 것입니다.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directory.html">
    <FRAME SRC="home.html" NAME="MAIN-WINDOW">
  </FRAMESET>
</FRAMESET>

</HTML>

확인
네, 이제 이것을 끝마쳤습니다.


banner.html을 만듭시다. 아래의 것으로 시작을 하고, 저장을 해주세요.

<HTML>
<HEAD>
<TITLE>Practice Page- Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
</BODY>
</HTML>

배경색깔을 블루로 한 것을 주의하세요.
banner.html 보기          Master Page 보기


그림을 키우고 <CENTER>로 오게 합시다.

<HTML>
<HEAD>
<TITLE>Practice Page- Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
<CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER>
</BODY>
</HTML>

banner.html 보기          Master Page 보기

그것에 대해 생각하는 동안, 만약 여러분들이 여러분의 문서 작성을 돕기위해 만든 저의 문서소스를 보신다면, 말도 안되거나, 제가 평소에 주장하는 것에 반하는 몇개를 발견 하실 수 있을 겁니다. 그것은 저의 페이지를 다른 사람들이 보았을 때, Lesson이 잘 되도록, 훈련시켜야만 하기 때문이죠. 말되죠? 설령 그렇지 않다하더라도, 헷갈리고 싶지 않으시면, 보지 마세요.


맞습니다... 보시는 바와 같이 문제가 있습니다. 길을 막는 스크롤바가 있죠. 그래서 그림이 창에 잘 위치하지 못합니다. 마스터 페이지를 여세요. 스크롤바를 없애고, 여백(margin)을 없애주세요..

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directory.html">
    <FRAME SRC="home.html" NAME="MAIN-WINDOW">
  </FRAMESET>
</FRAMESET>

</HTML>

확인


자! 이제는 우리 디렉토리 페이지를 만듭시다. 아래의 예제를 directory.html로 저장합시다.

<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>

directory.html 보기          Master Page 보기


헤딩을 주고 모든 링크에 텍스트를 써줍시다. 우리는 즉시 링크정보를 추가할 예정입니다.

<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

Home<P>

Go here<BR>
or there<P>

or visit<BR>
Yahoo<BR>
Netscape

</BODY>
</HTML>

directory.html 보기          Master Page 보기


이젠 링크 정보를 추가해 줍시다.

<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

<A HREF="home.html">Home</A><P>

<A HREF="here.html">Go here</A><BR>
<A HREF="there.html">or there</A><P>

or visit<BR>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://home.netscape.com/">Netscape</A>

</BODY>
</HTML>

directory.html 보기          Master Page 보기


잼있죠? 절대 그렇지 않으실 겁니다. 손뼉을 쳐주시고, 몸을 쭉 뻗어주세요. 소변도 해결하시고, 커피도 한잔 마시세요. 엉뎅이나 아무곳이나 두드려주세요. 숨도 크게 쉬시고요.

<--BACK        NEXT-->

Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7
PROFESSIONAL WEB DESIGN