KR100697809B1

KR100697809B1 - 아이프레임―레이어를 이용한 홈페이지 제작방법

Info

Publication number: KR100697809B1
Application number: KR1020060008657A
Authority: KR
Inventors: 안경섭
Original assignee: 안경섭
Priority date: 2006-01-27
Filing date: 2006-01-27
Publication date: 2007-03-20
Anticipated expiration: 2026-01-27

Abstract

본 발명은 아이프레임-레이어를 이용한 홈페이지 제작방법에 관한 것으로, 보다 상세하게는 마이크로소프트사의 익스플로러에서만 작동하게 되는 아이프레임(iframe) 객체를 레이어 안에 위치시키고, 메뉴를 클릭하였을 때 그 하위메뉴의 페이지를 아이프레임(iframe) 객체안에서 읽어들이고, 그 읽기가 끝나면 레이어를 보여주는 방식으로 구성함으로서, 레이어(layer)안에 아이프레임(iframe)을 삽입하고 위치, 크기, 디스플레이부를 설정할 수 있도록 하여 중복된 데이터의 이동을 막을 수 있어 홈페이지 제작이 쉽고 사용자의 접근성이 용이한 홈페이지 제작방법을 제공하는데 그 목적이 있다.

아이프레임(iframe), 레이어(layer)

Description

아이프레임―레이어를 이용한 홈페이지 제작방법{THE METHOD MAKING HOMEPAGE WITH IFRAME AND LAYER}

도 1은 종래의 웹페이지화면의 일례를 나타낸 블록도,

도 2는 본 발명에 따른 레이어의 구성요소를 도시한 블록도,

도 3은 본 발명에 따른 아이프레임-레이어를 이용한 홈페이지 제작방법을 도시한 흐름도.

< 도면의 주요부분에 대한 부호의 설명>

A : 레이어 앵커

B : 레이어 핸들

C : 레이어 영역

본 발명은 마이크로소프트사의 익스플로러에서만 작동하게 되는 아이프레임(iframe) 객체를 레이어 안에 위치시키고, 메뉴를 클릭하였을 때 그 하위메뉴의 페 이지를 아이프레임(iframe) 객체안에서 읽어들이고, 그 읽기가 끝나면 레이어를 보여주는 방식으로 구성된 아이프레임-레이어를 이용한 홈페이지 제작방법에 관한 것이다.

최근, 컴퓨터산업과 통신산업의 비약적인 발전과 인터넷접속회선의 빠른 보급으로 인하여 홈페이지 숫자가 기하급수적으로 증가되고 있고, 이를 통한 개인과 기업의 홍보와 영업활동이 매우 활발하고, 신속히 진행되고 있다.

이러한 홈페이지는 HTML 문서를 기반으로 제작되는데, 통상적인 홈페이지화면은 다음과 같이 구성된다.

도 1은 일반적인 홈페이지화면의 일례를 나타낸 블록도로서, 홈페이지화면(1) 상단에는 그 페이지를 설명하거나 정의하는 1)페이지이름, 홈페이지에 접속한 사용자가 편리하게 볼 수 있도록 내비게이션 기능을 가진 2)메뉴, 홈페이지의 미감을 높이고, 접속한 사용자에게 어필하고자 하는 내용을 동적으로 보여주는 3)플래쉬가 구비되어 있다.

또한, 회원가입과 회원인증을 위한 4)로그인이미지, 제휴 홈페이지를 소개하거나 특정 홈페이지를 광고하거나 홈페이지 내부의 특정화면을 부각시키기 위한 5)배너이미지, 6)이미지를 가진 7)텍스트, 홈페이지의 제작주체를 밝히는 8)라이센스를 포함하여 구성된다.

상술한 내용을 가진 홈페이지를 제작하기 위하여 나모웹에디터, 드림위버, 프론트페이지 등을 이용하여 최초 페이지인 index.html을 비롯한 홈페이지문서를 제작한 뒤, 인터넷에 접속된 웹서버로 업로드한다.

업로드된 홈페이지문서는 인터넷상에서 디스플레이되어 인터넷정보로서의 기능하게 된다.

홈페이지는 주기적으로 최신 정보를 반영하기 위하여 업로드된 상기 홈페이지문서를 업데이트하게 된다.

그 홈페이지의 디자이너는 업데이트를 위하여 업로드된 홈페이지문서를 다운로드하거나 자신의 컴퓨터에 저장된 기존의 홈페이지문서를 읽어들여서 새로운 정보를 추가하거나 기존 정보를 변경하는 편집작업을 한다.

그러나, 종래의 홈페이지의 컨텐츠 예를 들어, 레이아웃을 변경하기 위하여 2)메뉴를 이루는 이미지나 텍스트의 위치, 크기, 색상 등을 재설정하여야 하는데, 이러한 작업들은 단순히 드래그앤 드롭(Drag and Drop)으로 진행되질 않고, 일일이 테두리가 보이지 않는(혹은 보이는) 테이블을 만들고, 해당 테이블 내에 해당 구성요소를 첨부시키고, 해당 구성요소의 크기, 위치를 지정하여야 하는 불편함이 있었다.

즉, 7)텍스트, 6)이미지 등과 같은 구성요소를 만드는데 소요되는 시간보다는 이 구성요소를 배열하고, 편집하는데 많은 시간이 소요되는 것은 홈페이지 제작방법의 가장 큰 문제점이 아닐 수가 없는 것이다.

또한, 이러한 편집작업을 통해 업로드된 홈페이지의 여러 하위 메뉴에 접근하는데 있어서는 동일한 메뉴구조를 다시 읽어 들여 재구성하는 페이지 방식으로 이루어짐으로서, 계속해서 하위 메뉴로 이동할 경우 현재 자신이 보고 있는 페이지의 상하관계를 파악하기가 점점 힘들어지는 문제점이 발생하였다.

본 발명은 상술한 문제점을 해결하기 위해 안출된 것으로, 이는 홈페이지 제작시 레이어(layer)안에 아이프레임(iframe)을 효율적으로 삽입하여 구성함으로서 메인페이지에서 다른 페이지로 이동하거나 화면을 갱신할 필요없이 메인 페이지 상에서 서브 메뉴의 내용을 띄우도록 하고, 그로 인해 사용자에게 가장 직접적인 인터페이스 화면을 제공하는 데 그 목적이 있다.

상기의 목적을 달성하기 위해 본 발명에 따른 아이프레임-레이어를 이용한 홈페이지 제작방법은,

메인페이지에 아이프레임(iframe)을 히든(hidden)으로 설정된 레이어(layer)안에 넣는 단계(S100)와,

그 메인페이지에 레이어(layer)와 아이프레임(iframe)을 제어할 수 있는 스크립트를 넣는 단계(S110)와,

사용자가 하위메뉴항목 클릭시 스크립트를 수행하는 단계(S120)와,

그 스크립트를 통해 설정된 레이어(layer)의 위치와 크기, 및 아이프레임(iframe)안에 보여줄 페이지 값을 넘겨주는 단계(S130)와,

사용자가 하위메뉴의 내용을 열람하는 단계(S140)로 이루어짐으로서 달성된다.

이하, 첨부된 도면을 참조하여 본 발명을 상세히 설명하도록 한다.

먼저, 본 발명에서 아이프레임-레이어(iframe-layer)방식은 마이크로소프트사의 익스플러에서만 작동하게 되는 아이프레임(iframe) 객체를 레이어 안에 위치시키고, 메뉴를 클릭하였을 때 그 하위메뉴의 페이지를 아이프레임(iframe) 객체안에서 읽어들이고, 읽기가 끝나면 레이어를 보여주는 것에 관한 것이다.

상기 아이프레임(iframe : inline frame)은 태그로서, HTML문서의 안에 또 다른 HTML문서를 삽입할 수 있도록 해주는 기능을 하는 것이다.

이러한 아이프레임(iframe)의 형식은 <iframe name="이름" src="주소" frameborder="테두리표시여부" bordercolor="테두리색" marginwidth="가로여백" marginheight="세로여백" width="가로길이" height="세로길이" align="정렬방식"></iframe> 로 이루어진다.

즉, name='이름'은 아이프레임(iframe) 창의 타켓(target)을 설정할 수 있도록 이름(name)을 지정하는 곳이고, src ="주소"은 아이프레임(iframe) 창에 나타내고자 하는 창의 주소(경로)를 넣는 곳이며, frameborder="테두리표시여부"는 frameborder="yes/no or 1/0"로 테두리 존재여부(존재:yes/1 부존재:no/0)을 정하며, bordercolor="테두리색상"를 통해 테두리의 색상을 정한다.

그리고, align="정렬방식"에 관한 것으로, 프레임내의 내용에 대한 정렬방식이 아닌 프레임과 그 다음에 이어져 나오는 텍스트나 이미지등과의 정렬 방식에 관 한 것이고, height/width는 프레임의 가로와 세로 길이를 정해주는 곳이며, marginwidht/marginheight은 프레임 내의 문서와 프레임 테두리간의 여백을 조절하는 곳이고, scrolling="auto/yes/no"은 프레임에 스크롤바가 생기게 할 것인가를 정해주는 곳이다.

이러한 구성으로 이루어진 아이프레임(iframe)은 다른 문서를 현재 문서 안에 삽입시킬 수 있는 장점이 있지만, 디스플레이 여부와 위치를 사용자의 설정대로 적용시키지 못한다.

상기 레이어(layer)는 HTML 문서 위에 그림, 글, 표 등 여러 가지 개체를 삽입할 수 있는 영역을 지정하는 것으로, 이는 레이어 앵커(A), 레이어 핸들(B), 레이어 영역(C)으로 구성된다.

도 2에서 도시한 바와 같이 레이어 앵커(A)는 레이어 태그가 실제로 삽입되어 있는 곳을 알려주는 곳이고, 레이어 핸들(B)은 레이어를 선택할 때 이용하는 것으로, 레이어를 움직이는 손잡이이다. 레이어 영역(C)은 레이어 속에 글이나 그림을 실제 삽입하는 곳이다.

이러한 레이어의 구성요소인 레이어 앵커(A), 레이어 핸들(B), 레이어 영역(C)을 통해 레이어를 만들게 되는데, 이는 한 문서에 여러 개의 레이어를 삽입할 수 있으며, 하나의 레이어 위에 여러개의 레이어를 겹쳐 놓을 수도 있다.

그리고, 이러한 레이어 안에 글이나 그림을 넣은 뒤, 그 글이나 그림에 애니메이션 효과, 액션효과, 이벤트를 주어 동적인 홈페이지를 구성할 수가 있다.

이처럼, 레이어는 위치와 디스플레이 여부는 사용자의 설정대로 적용할 수 있지만, 다른 문서를 삽입하여 사용할 수 없는 단점이 있다.

이러한, 아이프레임(iframe)과 레이어(layer)의 특성을 이용하여 본 발명에서는 아이프레임(iframe) 객체를 하나의 레이어 안에 위치시키고, 메뉴를 클릭하였을 때 그 하위메뉴의 페이지를 아이프레임(iframe) 객체안에서 읽어들이고, 읽기가 끝나면 레이어를 보여주는 방식으로 홈페이지를 제작함으로서, 메인페이지에서 다른 페이지로 이동하거나 화면을 갱신할 필요없이 메인 페이지 상에서 서브 메뉴의 내용을 띄우도록 하고, 그로 인해 사용자에게 가장 직접적인 인터페이스 화면을 제공할 수가 있다.

이하, 본 발명에 따른 아이프레임-레이어를 이용한 홈페이지 제작방법에 관해 설명하기로 한다.

먼저, 메인페이지에 히든(hidden)이라는 이름의 레이어(layer)를 생성시킨다(S100).

여기서, 히든(hidden)레이어는 <div>~</div> 태그를 사용하여 구성되는데, 여기에 보이지 않도록 스타일을 부여하여 보이지 않게 하면 히든레이어가 된다. 즉, <div style="display:none"><iframe></iframe></div> 로 설정하게 되면 레이어 안의 내용(iframe)이 보이지 않게 된다.

이어서, 메인페이지에 아이프레임(iframe)을 히든(hidden)으로 설정된 레이어(layer)안에 넣는다(S110).

이는 일예로, <Iframe name="HIDDEN" FRAMEBORDER=0, SCROLLING=NO, SRC="./inc/blank.htm", width=0, height=0, border=0>의 아이프레임(iframe) 형식으로 이루어진다.

이어서, 메인페이지에 레이어(layer)와 아이프레임(iframe)을 제어할 수 있는 스크립트를 넣는다(S120).

이러한 스크립트는 메인 화면의 특정 부분에 대한 이벤트을 수행할 때 나타나게 되며, 그 이벤트의 수행으로 인해 자바스크립트의 함수를 실행한다.

여기서 이벤트는 브라우저상에서 사용자가 취하는 모든 행동을 이야기하며 여기에서는 마우스로 특정 객체(하위메뉴)를 클릭하는 행동을 일컫는다.

자바스크립트의 함수의 구성은 다음과 같다.

function layer1_on(url,pos_x,pos_y,size_x,size_y)

layer1.style.left = pos_x;

layer1.style.top = pos_y;

layer1.style.width = size_x + 16;

layer1.style.height = size_y + 16;

table1.height = size_y +46 ;

table2.height = size_y +43 ;

table3.width = size_x ;

table4.width = size_x ;

if(layer1_page != url)

frame1.location.href = url;

document.getElementById('ifrm1').width = size_x;

document.getElementById('ifrm1').height = size_y;

layer1.style.display = '';

layer1_page = url;

layer1_status = 1;

</script>

이 스크립트는 페이지명, X좌표, Y좌표, 가로사이즈, 세로사이즈의

인자를 받아 수행되며, 설정대로 수행이 완료되면,

layer1.style.display = '';

과 같이 레이어를 보여주게 된다.

이어서, 사용자가 하위메뉴항목 클릭시 스크립트를 수행하게 된다(S130).

이는 하위메뉴항목으로 들어가는 방법으로서, 크게 이미지를 클릭, 텍스트를 클릭 등으로 하고, 이미지의 경우는 다음과 같이 구성된다.

<imgsrc="./link1.jpg"onClick="layer1_on('./link1.htm','120','100','400',300')";>

과 같이 이미지를 클릭한 이벤트에 자바스크립트를 수행하도록 한다.

그리고, 텍스트의 경우는 다음과 같이 구성된다.

과 같이 글자를 클릭한 이벤트에 자바스크립트를 수행하도록 한다.

이어서, 그 스크립트를 통해 설정된 레이어(layer)의 위치와 크기, 및 아이프레임(iframe)안에 보여줄 페이지 값을 넘겨주게 된다.

이는 layer1_on('./link1.htm','120','100','400',300')이 수행되면,

layer1_on 의 함수가 수행되며 다음과 같은 방식에 의해 실행된다.

2번째 인자 ‘120’으로부터 레이어의 가로위치 변경

3번째 인자 ‘100’으로부터 레이어의 세로위치 변경

4번째 인자 ‘400’으로부터 레이어의 가로사이즈 변경

5번째 인자 ‘300’으로부터 레이어의 세로사이즈 변경

현재 iframe 안의 문서와 지정한 문서가 다를 경우 지정한 문서로 갱신

layer의 문서를 보여주게 된다.

이어서, 사용자가 하위메뉴의 내용을 열람하게 된다(S140).

이는 스크립트 수행이 완료되면 하위메뉴의 페이지를 열람할 수 있게 된다.

이처럼 아이프레임(iframe) 객체를 하나의 레이어 안에 위치시키고, 메뉴를 클릭하였을 때 그 하위메뉴의 페이지를 아이프레임(iframe) 객체안에서 읽어들이고, 읽기가 끝나면 레이어를 보여주는 방식으로 홈페이지를 제작할 수가 있다.

상술한 바와 같이 본 발명에서는 실시간으로 컨텐츠를 업데이트함으로써 아웃소싱에 의존할 때보다 더욱더 빠른 속도로 컨텐츠의 업데이트가 가능해지고, 하위메뉴에 다시 중복되는 많은 구성요소를 리로드할 필요가 없기 때문에 홈페이지 작업이 쉬어지고 사용자의 접근성이 좋아지는 효과가 있다.

Claims

메인페이지에 아이프레임(iframe)을 히든(hidden)으로 설정된 레이어(layer)안에 넣는 단계(S100)와,

그 메인페이지에 레이어(layer)와 아이프레임(iframe)을 제어할 수 있는 스크립트를 넣는 단계(S110)와,

사용자가 하위메뉴항목 클릭시 스크립트를 수행하는 단계(S120)와,

그 스크립트를 통해 설정된 레이어(layer)의 위치와 크기, 및 아이프레임(iframe)안에 보여줄 페이지 값을 넘겨주는 단계(S130)와,

사용자가 하위메뉴의 내용을 열람하는 단계(S140)로 이루어지는 것을 특징으로 하는 아이프레임-레이어를 이용한 홈페이지 제작방법.
제1항에 있어서, 히든(hidden)레이어는 <div>~</div> 태그를 사용하여 구성되는 것을 특징으로 하는 아이프레임-레이어를 이용한 홈페이지 제작방법.
제1항에 있어서, 스크립트는 메인 화면의 특정 부분에 대한 이벤트를 수행할 때 나타나게 되며, 그 이벤트의 수행으로 인해 자바스크립트의 함수가 실행되도록 이루어지는 것을 특징으로 하는 아이프레임-레이어를 이용한 홈페이지 제작방법.