아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 B코스 [초급9단] 상단 메뉴 네비게이션 만들기
2012-06-12 21:01:00
아람스쿨 조회수 2643

 여기까지 잘 따라오셨다면 모든 메뉴가 상단에 줄줄줄 나열되어 있어 복잡한 상태 일겁니다.^-^

 그럼 본 미션을 통해 지금 구성되어 있는 메뉴를 대메뉴/소메뉴로 나누어서 깔끔하게 출력되도록 네비게이션을 만들어 보겠습니다.

 필자는 아래와 같이 대메뉴/소메뉴로 나누었습니다. 여러분은 각자 취향에 맞게 수정하시기 바랍니다.

[대메뉴] 매니져 소개
      [소메뉴] 매니져 프로필 (추가 페이지)
      [소메뉴] 매니져 사진 (추가 페이지)

[대메뉴] 매니져 농장
      [소메뉴] 농장 소개 (추가 페이지)
      [소메뉴] 농장 연혁 (추가 페이지)

[대메뉴] 자료실
      [소메뉴] 1.일반형 (게시판)
      [소메뉴] 2.앨범형 (게시판)

 [대메뉴] 커뮤니티
      [소메뉴] 3.웹진형 (게시판)
      [소메뉴] 4.블러그형  (게시판)
      [소메뉴] 5.달력형 (게시판)

      [소메뉴] 예약접수 (나만의 등록폼)

      [소메뉴] 채팅방 (추가 페이지)

 

 

 관리자모드에서 [디자인관리 》 전문가 환경설정 》 네비게이션 마법사]으로 이동 후 [대메뉴(최상위)생성] 버튼을 클릭 후 아래 그림과 같이 입력합니다.

 

위 화면에서 텍스트분류명에 "매니져소개"라고 입력하고 링크정보에서 "page1::매니저 농장"을 선택했습니다.

이유는 대메뉴를 클릭시 소메뉴의 첫번째로 이동되도록 하는데 있습니다.

즉 "매니져 농장"을 클릭하면 "농장 소개"로 이동되도록 설정,

"자료실"을 클릭하면 "일반형 게시판"으로 이동되도록 설정,

"커뮤니티"를 클릭하면 "웹진형 게시판"으로 이동 되도록 설정하시면 됩니다.

 

 

  위와 같이 진행 후 네비게이션 마법사를 다시 클릭하여 아래와 같은 화면이 나타나면 성공입니다.

 

 

 

  이제 소메뉴를 만들어 보도록 합시다.

[매니져 소개] 옆에 있는 [하위메뉴생성]버튼을 클릭 하신 후 생성 하시면 됩니다. 생성방법은 대메뉴 만드는 방법과 동일합니다.

소메뉴를 생성 후 아래와 같은 화면이 나타나면 성공입니다. ^-^

 

 위 화면에서 URL 주소가 바르게 들어가 있는지 한번 확인 바랍니다.

 

 

네비게이션 마법사를 통해 메뉴구조를 만들었는데 이걸 실제 홈페이지에 적용시켜 보도록 하겠습니다.

[디자인관리 》 고급 디자인 관리 》 그룹디자인 관리]으로 이동 후 [프로그램 마법사 생성]버튼을 클릭하세요.

프로그램 종류에서 "네비게이션 마법사"를 선택 하신 후 "상단메뉴바"를 선택 하시기 바랍니다.

아래 그림과 같이 설정 후 저장 하시기 바랍니다.

 

 

 위 프로그램 마법사를 통해 {GROUP_navi} 라는 그룹을 생성 하였습니다.

이 그룹코드를 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 상단디자인에 넣어보도록 하겠습니다.

 

※ 적당한 위치에 {GROUP_navi} 를 삽입 하세요.

 

 실제 어떻게 출력되지는 한번 확인 해보세요

대메뉴에 마우스 커서를 올리면 밑으로 서브메뉴가 나타 나죠?

 

 

 

네비게이션이 정상적으로 작동은 되는데 기존 메뉴와 섞여 있어서 보이지 않습니다.

보기 좋게 수정해보도록 하겠습니다. ^^

  [디자인관리 >  고급 디자인 관리 > 스킨 관리]에서 기존  소스를 테이블 구조로 조금 변경 하였습니다.

여러분도 아래 그림과 같이 소스를 수정해보세요.^-^

 

 

※ HTML 소스

<!-- 상단 디자인 출력 부분 -->
<table width="960" height=80 border="1" align=center>
  <tr>
    <td align=center width=200>
     <a href="/shop_main/main_body.htm">웹디모 초간단 홈페이지</a>
    </td>
    <td align=center>
     {GROUP_navi}
    </td>
  </tr>
</table>
 


<!-- BODY 본문 디자인 출력 부분 -->
<table width="960" border="1" align=center>
<tr>
<td width=200 valign=top>
 <table width="200" border="1">
   <tr>
  <td>
   <br>
   <br>
    로그인 박스<br>
   <br>
    <br>
    배너1 <br>
    배너2 <br>
   배너3 <br>
   배너4 <br>
  </td>
   </tr>
 </table>
</td>
<Td  valign=top>
  {BODY_CONTENT}
</td>
</tr>
</table>


<!-- 하단 디자인 출력 부분 -->
<table width="960" border="1" align=center>
  <tr>
    <td width="200">
      <p><br>
       <a href='/shop_main/main_body.htm'> 하단 로고</a><br>
      </p>
      </td>
    <td> <br>
      홈페이지명 : 초급미션홈피<br>
      운영자:웹돌이<br>
      이메일주소 : aaaa@naver.com<br>
      <br>
총 누적 접속수 {COUNT_TOTAL} /
이달 접속수 {COUNT_MONTH} /
오늘 접속수 {COUNT_TODAY} <br>
총 게시물 수 {BBS_TOTAL_CNT}, 새글 수 {BBS_NEW_CNT}<br>
총 회원 수 {MEM_TOTAL_CNT}, 신규 회원 수 {MEM_NEW_CNT}<br>
 


</td>
  </tr>
</table>

 

※ 본 솔루션은 HTML 및 DIV 표준 코딩 모두 적용 가능 합니다. 여러분의 편의에 맞게 코딩 하시기 바랍니다.

 
다시 홈페이지로 접속 해서 수정결과를 확인해봅시다.^-^  아~주 심플하고 깔끔한 메뉴가 만들어졌습니다.

 

 

 

헌데 메뉴가 텍스트로만 되어 있어서 좀 심심하네요.. 이미지 버튼으로 바꿔봅시다. ^-^

본 게시판에 첨부되어 상단 우측에 있는 [버튼.zip]를 다운로드 받아줍니다.

매니져소개, 매니져 농장, 자료실, 커뮤니티 버튼을 만드신 후 [디자인관리 》 전문가 환경설정 》 네비게이션 마법사] 에서 해당 대메뉴의 [메뉴수정]버튼을 클릭합니다.

아래 그림과 같이 이미지 버튼을 첨부합니다.

 


 

수고 하셨습니다.

 

완성 화면 : http://uhkr09b.aramschool.co.kr

위 화면과 같이 작동 된다면 다음 미션으로 고고~~~~

 

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^

 

댓글 127개