Internet Link Exchange
Member of the Internet Link Exchange

Frames Tutor- Lesson 4

다음은 2개의 작은 효과를 시도해 봅시다. 비록 모든 브라우저에 적용되는 것은 아니지만, 브라우저가 속성을 이해하지 못하면 무시해 버리죠.

우선, 우리는 가장자리의 두께를 변경할 수 있습니다.

<FRAMESET COLS="154,*" BORDER=20>
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

확인


가장 자리의 색깔을 바꿀 수 있습니다.(Netscape only)

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

확인


각각의 <FRAMESET>의 가장자리를 FRAMEBORDER로 없앨 수 있습니다.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
  <FRAMESET ROWS="170,*" FRAMEBORDER=NO >
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

확인


뷰어가 프레임의 크기를 재변경하는 것을 방지할 수 있습니다. 특별한 환경이 아니면, 이 속성을 많이 사용할 이무런 이유가 없죠.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
  <FRAMESET ROWS="170,*" FRAMEBORDER=NO >
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html" NORESIZE>
</FRAMESET>

확인


자! 이제 프레임 만드는 것을 약간 배웠으니, 간단한 것으로 돌아가서 프레임 사이의 연결된 것을 분리해 보자.

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html">
</FRAMESET>

확인


우리가 하려는 것은 beth.html에서 shannon.html로 링크를 추가하는 것이다. 노트패드의 beth.html를 열고 아래의 것을 붙여보자.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend Shannon
</BODY>
</HTML>


링크를 추가하고 저장을 하자.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend <A HREF="shannon.html">Shannon</A>
</BODY>
</HTML>


이젠 해보자.

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html">
</FRAMESET>

확인


그 링크를 클릭하면, beth의 창에 Shannon의 페이지가 띄어진 것을 볼 수 있을 것이다. 압니다. 알아요. 별로 신기할 것은 없죠. Beth의 창에 링크를 해서, 테리의 창으로 띄어 봅시다. 이건 좀 낫죠?

여러분이 해야할 일은 마스터 페이지의 <FRAME>이름짓기를 하는 것이다. 그래서 두번째 프레임에 이름을 주자.

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html" NAME="WINDOW-1">
</FRAMESET>

여기에 주석을 넣겠습니다. 두번째 프레임은 진짜 Terri'의 것은 아닙니다. 그저 두번째 프레임일 뿐이죠. terri.html이 처음으로 띄워져야할 것으로 지정했습니다. 우리가 빈 <FRAME> 태그를 가지고 있으면, 창도 마찬가지로 텅빌 것입니다.

주의 - <FRAME> 이름은 수학문자인 알파로 시작해야 합니다. 모든 다른 창 이름들이 무시될 것입니다. (예외는 밑줄_로 프레임 이름을 시작하는 것입니다.   그 사용법은 좀 있다가 설명하죠.)


다음은 Beth의 페이지에 있는 그 링크에 무언가를 추가하는 것입니다. 자 beth.html을 다시 열어서 TARGET을 추가해줍시다.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A>
</BODY>
</HTML>

이것은 링크를 WINDOW-1이라는 창으로 띄우게 할 것입니다.

확인


이런 식의 연결은 여러분의 사이트에 페이지를 연결하고자 할때 좋습니다. 그러나 여러분의 사이트 외에 연결하고자 한다면 어떻게 할까요? Beth의 페이지에 다른 링크를 추가해봅시다.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A><P>
And of course you have to visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="WINDOW-1">Professional Web Design</A><P>
</BODY>
</HTML>

확인
보시다시피, 이것은 다른 사람의 페이지를 여러분의 창에 뜨게 합니다.


외부링크를 전화면에 띄울려면 어떻게 할까요? 간단합니다. TARGET_TOP으로 바꾸면 되죠.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A><P>
And of course you have to visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="_TOP">Professional Web Design</A><P>
</BODY>
</HTML>

확인
외부 페이지에 연결할 땐 항상 이 방법을 사용하세요. 믿으주세요, 여러분의 뷰어가 고마워 할 겁니다!

_TOP은 소위 'magic target'이라 불리는 네개 중의 하나입니다. 매직 타겟은 _SELF, _BLANK, _PARENT 그리고 _TOP 입니다. 이것들은 수학문자인 알파 이외의 것으로 시작할 수 있는 유일한 Target들 입니다. 게다가, magic target이 아닌, 밑줄_로 시작하는 어떤 target은 무시됩니다. 우리가 하고자 하는 것에, _TOP은 지금 우리가 관심을 가지는 유일한 것입니다.

주의 - 확실히, TARGET="_TOP"에 가끔씩 이상이 있을 수도 있습니다. 종종 단순히 새창에 링크를 띄우지 않고, 완전히 새창을 열어버립니다. 이것은 기술적으로 TARGET="_BLANK"가 해결해야 할 과제죠. 이것을 교정하는 방법은 TARGET="_TOP" 대신에 TARGET="_top"을 지정하는 것입니다. 꼭 소문자를 사용하세요. 이래서는 안되지만, 어떻게 합니까?

<--BACK        NEXT-->

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