Author Archives: herosmirr

main frame 구조

Posted on by

 

 

아래 소스는 main.html 파일로서 앞장에서 설명한 submenu 에서 호출하여

main Frame 의 위치에 디스플레이 되는 웹페이지상의 실제 메인페이지가 된다.

우리가 제공하는 WIZ550WEB 웹페이지에서는 6가지의 메인페이지 종류가 제공된다.

각각의 메인페이지는 각기 다른 기능을 수행하는 것으로 묶여져서 프로그래밍되었다.

이 장에서는 웹페이지의 구성에 대한 설명으로 만약 유저가 이내용을 합치거나 더 세분히 분리하고 싶다면

Web sever 카테고리의 내용을 참조하여 작성하도록 한다.

아래 그림은 좌측의 서브메뉴에서 Sensor Monitorin #1을 선택(클릭)하였을 경우 메인페이지에 나타나는 화면과

그 Sensor Monitorin #1의 하이퍼링크에 해당하는  ADC1monitor.html 파일이 메인화면에 디스플레이되는 것으로,

이번장에서는 구성적인 내용만 알고 실제 소스 내용은 Web sever 카테고리의 내용을 참조한다.

 

(2) submenu 구조 및 변경 방법

Posted on by

아래 소스는submenu.html 파일로서 앞장에서 설명한 submenu Frame에 위치하는 소스의 내용이다.

이역시 아래 그림과 같이 매우 심플하다.

원하는 메뉴가 있으면 submenu.html 과 같은 디렉토리에 html 파일 형태로 파일을 작성한 후,

그 html 파일을 원하는 위치에 디스플레이 하는 역할을 한다.

소스의 태그는 다음과 같다.

<a target=”main” href=”IOctrl.html”>In/Out Control</a><br><br><br>

이 소스에서 target은 원하는 위치를 말하며 href 는 하이퍼링크로써

이소스에서는 IOctrl.html 파일을 main 위치로 디스플레이 하는 하이퍼링크를 나타낸다.

하이퍼링크를 In/Out Control 이라는 메뉴 글씨에 걸게 된다.

<br> 은 줄바꿈을 의미하는 태그이다.

(1) top frame 구조 및 변경 방법

Posted on by

아래 소스는 topframe.html 파일로서 앞장에서 설명한 top 프레임에 위치하는 소스의 내용이다.

아래 그림과 같이 매우 심플하다.

원하는 그림이 있으면 topframe.html 과 같은 디렉토리에 사진을 저장한후 아래 와 같이

<img src = “파일명.확장자”> 태그를 이용하여 수정하면 된다.

위 소스에 대한 결과가 아래 그림과 같이 나타난다.

index.html 로 웹 브라우져의 Frame 나누기

Posted on by

아래 소스는 index.html 파일로서 웹 브라우져의 주소창에서 웹서버의 주소를 입력하면 웹서버는 저장하고 있는

index.html 또는 index.htm 파일을 웹브라우저에게 전달한다.

<index.html>

아래는 그림은 위의 소스를 미리보기 실행했을 경우, 웹 브라우져에 나타나는 화면이다.

<frameset >을 활용하여 먼저 위쪽부분과 아래쪽 부분을 나누었다.

1. 위쪽부분의 높이는 소스상에서 80 으로 조정 가능하다.

<frame src = “topframe.html”> 이 의미하는 것은 그 프레임에 나타낼 html 파일은 topframe.html로서

프래그래머가 작성한  topframe.html 파일이 웹브라우져 상에서 아래 그림 중

(2)TOPframe.html 영역에 나타나는 것이다.

 

2. 이제 아래쪽 부분을 좌측과 우측으로 나눈 소스가 윗 소스상 11번째 줄에 해당하는 내역이다.

좌측의 넓이는 소스상에서 200으로 프로그래밍을 통해 조정 가능하다.

<frame name = “submenu” src = “submenu.html”> 이 의미하는 것은 하단 좌측 프레임의 이름은 submenu이고

그 프레임 영역에는 프래그래머가 작성한  submenu.html 파일이 웹브라우져 상에서 아래 그림 중

(3)SUBframe.html 영역에 나타나는 것이다.

 

3. 아래쪽 부분 우측에 나타나는 부분은 main.html로

<frame name = “main” src = “main.html”> 이 의미하는 것은 하단 우측 프레임의 이름은 main이고

그 프레임 영역에는 프래그래머가 작성한  main.html 파일이 웹브라우져 상에서 아래 그림 중

(1)main.html 영역에 나타나는 것이다.