메뉴시스템 만들기(3)

이제 메뉴시스템 만들기의 마지막인 마무리작업입니다.

여기서는 마지막으로 주메뉴의 하나인 Boards 에 대한 서브메뉴를 삽입하고 액션을 주어 메뉴의 마지막 마무리를 한 다음 이 메뉴시스템이 안고 있는 문제점들을 도출해내고 이에 대한 해결책을 제시합니다.

이렇게 하여 메뉴시스템을 완성시켜나갈 수 있는 것입니다.

1.이제 주메뉴의 하나인 Boards 에 활기를 불어넣는 일만 남았습니다.

레이어 하나를 더 추가하고(Layer4) 위에서와 같이 L => 110 , T => 110 , Width => 800 , Height => 25로 지정하여 buttons 폴더에서 서브메뉴이미지 subboards.gif 를 삽입합니다.

서브메뉴의 "GuestBook" 에는 guestbook.htm , "FreeBoard" 에는 freeboard.htm , "공연정보" 에는 inform.htm , 그리고 "HomeLinker" 에는 homelinker.htm을 각각 만들어서 링크시킵니다.

그리고 Layer4는 Hidden 상태로 만든 후에 주메뉴 버튼 Boards 와 서브메뉴이미지 subboards.gif 에 대하여 각기 위에서 한 것과 동일한 과정을 거쳐서 비헤이비어를 적용시켜줍니다.

이제 이렇게 하여 주메뉴와 서브메뉴로 구성된 메뉴시스템이 일단 완성이 된 듯 싶습니다.

완성된 메뉴시스템 즉 만들고 있는 템플릿을 저장하고 이 템플릿을 이용하여 만들어 둔 index.htm을 브라우저에서 확인을 해 봅니다.
2.문제점 발견하기(1)

서브메뉴를 가지고 있는 주메뉴는 좌측으로부터 "MyIntro" , "Operatopia" , "PDS" , "Boards" 이렇게 네 가지입니다.

이렇게 네 가지의 주메뉴는 각기 좌측으로부터 Layer1 , Layer2 , Layer3 , Layer4 에 서브메뉴들을 거느리고 있는데 Layer 들은 만들어진 순서에 따라 1부터 4까지 z-index 도 1부터 4로 증가하고 있는 상태입니다.

만들어진 index.htm을 브라우저에서 확인한 결과 "MyIntro" , "Operatopia" , "PDS" , "Boards" 이렇게 네 가지의 주메뉴들 중 어느 하나의 버튼에 마우스가 올라가면 해당하는 서브메뉴가 나타나게 되고 서브메뉴로 마우스가 올라갔다가 빠져 나오게 되면 서브메뉴가 사라지는 것을 볼 수 있습니다.

그런데 마우스의 움직임이 꼭 그렇게 되라는 법은 없습니다.

방문자에 따라서는 서브메뉴를 읽어보고 마음에 들지 않으면 마우스를 서브메뉴로 옮겨가지 않고 다음의 주메뉴로 바로 옮겨 갈 것입니다.

여기서 여러분께서는 위에서 말씀드린 z-index 의 변화를 잘 생각해 보시기 바랍니다.

마우스가 주메뉴의 좌측에서부터 우측으로 옮겨가는 경우 다음 주메뉴버튼에 적용시킨 비헤이비어에 의해서 다음 주메뉴버튼의 서브메뉴이미지가 나타난 것이기는 하지만 그렇다고 하여 앞서 나타나게 했던 서브메뉴이미지가 사라진 것은 아니라는 점입니다.

그런데 앞에서 나타나게 했던 서브메뉴가 보여지지 않고 새로 나타난 서브메뉴가 보이는 까닭은 나중에 나타나게 한 레이어의 z-index 값이 더 크기 때문입니다.

그러므로 마우스가 제일 좌측에서부터 우측으로 옮겨가는 경우는 방문자의 눈으로 보기에 마우스가 옮겨가면서 차차로 해당하는 서브메뉴를 열고 있으니 잘 작동을 하는 것이라고 여기게 될 것입니다.

제일 좌측에서부터 마우스가 우측으로 이동을 하면 결국은 서브메뉴를 담기 위하여 만들어 두었던 레이어들이 차례로 하나씩 모두 열리게 되고 방문자의 눈에는 제일 마지막에 열린 z-index 값이 가장 큰 레이어 위의 서브메뉴만 볼 수 있게 되는 것입니다.

그런데 문제가 있습니다.

이렇게 좌에서 우로 이동을 하던 마우스가 다시 우측에서 좌측으로 이동해 가면 마우스의 이동에 따라 해당하는 주메뉴에 딸린 서브메뉴가 보이는 것이 아니라 제일 z-index 값이 큰 레이어 즉 제일 마지막에 열린 레이어 위의 서브메뉴만 보이는 채로 꼼짝도 하지 않을 것이기 때문입니다.

게다가 제일 우측까지 이동을 했던 마우스가 이번에는 좌측으로 가는 것이 아니라 아래의 서브메뉴 쪽으로 이동을 하여 빠져나가게 되면 제일 마지막에 열린 레이어 즉 z-index 값이 가장 큰 레이어는 다시 사라지게 될 것이지만 바로 그 밑의 레이어가 사라지지 않았기 때문에 전혀 엉뚱한 서브메뉴를 그 대로 보여 주게 될 것입니다.

3.문제점 수정하기(1)

이제 위에서 우리가 검토한 문제점을 해결하기 위한 방향을 모색해야 합니다.

문제를 요약하면 마우스가 서브메뉴 쪽으로 가지 않고 주메뉴로만 떠돌면 만들어진 레이어들은 사라지지 않는 다는 것입니다.

그러므로 마우스가 해당하는 서브메뉴를 열어 놓고 다음 주메뉴로 이동을 할 때 앞서 열린 레이어는 사라지도록 만들어 줄 필요가 있습니다.

그러기 위하여 서브메뉴를 가진 주메뉴버튼 네 개에 대하여 각각 [안내]태그제한으로등록되지않습니다-xxonMouseOut 이벤트에 해당 레이어가 Hide 되도록 다시 한번씩 비헤이비어를 주는 것이 필요하게 되었습니다.

다음은 주메뉴 MyIntro 에 대해 Show Hide Layer 비헤이비어를 적용한 상태입니다.

이제 OK 버튼을 눌러 비헤이비어를 적용하고 이벤트를 [안내]태그제한으로등록되지않습니다-xxonMouseOver에서 [안내]태그제한으로등록되지않습니다-xxonMouseOut으로 바꿔줍니다.

그리고 계속해서 "Operatopia" , "PDS" , "Boards" 에 대해서도 동일한 처리를 합니다.

이렇게 하고 다시 저장을 한 다음에 index.htm을 다시 한번 브라우저로 확인을 해 봅니다.

이제는 정확히 작동을 하고 있습니다.

그런데 한 가지 빠진 것이 있습니다.

이메일 링크를 하지 않았는데 이 부분은 아주 간단합니다.

주메뉴 버튼 중 "E-mail"을 선택하고 속성창의 Link 난에 mailto:webmaster@midluck.net 과 같이 "mailto:자신의 이메일주소"로 이메일 링크를 만들어 주면 됩니다.

4.문제점 발견하기(2)

이제 메뉴시스템을 테스트 해보면 모든 것이 제대로 작동을 하기는 하는데 한 가지 아쉬운 점이 있습니다.

서브메뉴가 나타나는 위치인데 이 템플릿의 레이아웃을 잡을 때 처음부터 말씀드린 바 있지만 서브메뉴를 담은 레이어의 위치가 브라우저 좌측 상단으로부터의 좌표값으로 결정지어지는 절대 위치이고 주메뉴의 버튼들은 center로 자리를 잡은 테이블내의 한 셀이기 때문에 브라우저의 해상도 등에 따라 테이블의 위치는 상대적으로 변하는 위치에 있으므로 서브메뉴가 나타날 때에 늘 같은 위치에 있지 못하다는 점입니다.

이것을 알기 쉽게 설명을 하면 브라우저의 폭이 1024 일 때 1024 의 중심점은 512이므로 중심점의 L 값은 512가 되는데 브라우저의 폭이 800 이 되면 중심점은 400으로 줄어들고 중심점의 좌표값이 400으로 줄어들게 되는 것입니다.

테이블의 가운데 열의 폭을 800으로 정한 상태에서 브라우저의 폭이 1024 이면 중심점 512에서 테이블의 폭 800 의 반에 해당하는 400을 빼어 가운데 열의 L값은 112 라는 값을 갖는데 브라우저의 폭이 800 이 되면 L값은 0 이 되는 것입니다.

레이어와의 상대적 위치가 브라우저마다 달라지는 이유가 여기에 있습니다.

5.문제점의 해결 방법 구하기(2)

드림위버의 익스텐젼 가운데 center layer 라는 비헤이비어가 있습니다.

이것을 이용하여 레이어의 수평적(Horizontal) 위치를 center로 늘 바꾸어 주도록 하면 절대 위치를 갖는 레이어의 위치가 상대적인 위치로 변하게 되는 것입니다.

그러면 우선 여기까지 작업한 내용을 저장하여 드림위버를 일단 중지시키고 이 책의 익스텐젼 편에서 설명 드린 대로 center layer 익스텐젼을 설치하고 드림위버를 다시 새로 실행시킨 다음 작업 중이던 템플릿을 다시 작업화면으로 불러옵니다.

그리고는 태그셀렉터에서 body 태그를 선택한 상태에서 비헤이비어창의 "+"버튼을 누르고 center layer 비헤이비어를 누릅니다.

center layer 대화상자가 열립니다.

Layer1을 선택하고 Center Horizontal 에만 체크를 하고 우측의 Add to Group 버튼을 누릅니다.

이와 같은 방법으로 네 개의 레이어를 모두 그룹으로 더하여 묶어 줍니다.

이렇게 하고 OK 버튼을 누르면 네 개의 레이어를 그룹으로 하여 모두가 중앙의 위치를 유지하게 할 비헤이비어가 적용이 된 것입니다.

이제 작업을 모두 마쳤습니다.

작업한 내용을 저장을 하고 이 템플릿을 사용한 index.htm을 브라우저에서 확인 해보십시오.

모든 문제점을 해결하고 완성된 모습의 메뉴시스템을 확인할 수 있을 것입니다.

모든 것이 정상적으로 작동하는 것을 확인했다면 이제 템플릿이 모두 다 완성된 것입니다.

그리고 이제부터 만드는 페이지들은 지금까지 고생해서 만든 템플릿을 사용하면 아주 간단한 조작만으로 만들 수 있으며 이 템플릿을 이용하여 만든 페이지들은 이 템플릿 내에 장착한 강력한 메뉴시스템으로 페이지 서로간에 이동이 원활히 이루어질 것입니다.

싸이트내의 페이지 수가 아무리 많아도 그 모든 페이지들을 이 템플릿을 이용하여 만들고 필요시에는 이 템플릿 하나만을 수정하는 것으로 템플릿이 사용된 모든 페이지들을 한꺼번에 수정할 수 있습니다.

우리는 템플릿을 만드는 과정에서 템플릿의 기능을 수시로 확인하기 위하여 이 싸이트의 관문격인 index.htm을 만들고 이 index.htm 에 만들고 있는 이 템플릿을 적용시켜 두었습니다.

나머지 페이지들도 모두 그러한 과정을 거쳐서 만들면 될 것입니다.

[드림위버강좌]드림위버강좌- 메뉴시스템 만들기(3)