Home > 마케팅&교육센터 >메뉴얼

처음부터 만들기 매뉴얼 상단 메뉴 (네비게이션바) 생성 ---중요!!!
2012-02-18 00:09:20
조회수 1080

 

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

 

 

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

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

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

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

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

 

 

 

 

 

 이렇게 대메뉴를 생성하고 아래와 같은 화면이 나타나면 성공입니다.

 


 

 

 

 

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

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

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

 

 

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

 

 

 

 

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

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

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

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

 


 

 

 

 

 

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

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

 


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


 

 

 


 

 

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

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

 

 

 

 

 

 

 [디자인관리 고급 디자인 관리 메인 화면 디자인]에서 기존 메뉴를 삭제하고 테이블 구조를 조금 변경 하였습니다.

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

 

 

※ HTML 소스
<table width="960" height=80 border="1">
  <tr>
    <td align=center width=200>
     <a href="javascript:content_link_chk('/shop_main/main_body.htm')">웹디모 초간단 홈페이지</a>
    </td>
    <td align=center>
     {GROUP_navi}
    </td>
  </tr>
</table>


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

 
 

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

 

 

 

 

 

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

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

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

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