이제 고지가 눈앞에 있습니다.

 

네이게이션(상단메뉴), 왼쪽메뉴, 회원가입기능만 만들고 나면 정말 그럴~싸한~ 홈페이지가 탄생됩니다.

 

조금만 더 힘내세요 ^^;

 

--------------------------------------------------------------------------------

 

여기까지 잘 따라오셨다면 모든 메뉴가 상단에 줄줄줄 나열되어 있어서 보기 싫은 상태 일겁니다.^^

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

 

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

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

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

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

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

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

 

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

 

 

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

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

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

 

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

 

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

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

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

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

 

 

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

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

 

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

오~오~오~

대메뉴에 마우스 올리니깐 바로밑에 서브메뉴가 나타 나죠?

 

 

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

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

 

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

 

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

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

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

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

 

 

수고 하셨습니다.

 

완성 화면 : http://myhome10.webdimo.co.kr

 

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