Home > 고객지원 > 질문&답변

처음부터 만들기 매뉴얼 [능숙6단] 왼쪽 메뉴 만들기
2009-12-26 00:01:03

 

우리는 지금까지 많은 홈페이지를 봐왔듯이 상단에 대메뉴를 클릭하면 보통 관련된 소메뉴가 왼쪽에 나타난다.

참고 사이트 : http://uhome003.webdimo.co.kr/shop_info/company.htm

 

위 참고 사이트와 같이 상단에 대메뉴 "회사소개"를 클릭 하면 왼쪽에 "CEO인사말", "회사연혁", "경영이념", "협력업체", "오시는길" 이 나타난다.

 

우리도 이렇게 한번 만들어 봅시다.

 

1. 관리자 로그인 후 [디자인관리 고급 디자인 관리 메인 화면 디자인]에서 왼쪽 디자인을 선택 합니다.

여러분이 여기까지 잘 따라오셨다면 왼쪽디자인이 1개 있을겁니다.

우리는 이전 단계에서 대메뉴/소메뉴를 구성해보았습니다.

여기서 대메뉴 수 만큼 왼쪽 디자인을 생성해줘야 합니다.

 

"나만의 디자인" 옆에 있는 [추가]버튼을 클릭 하세요.

그리고 제목란에 "1. 매니져 소개" 입력 하시고 html 소스 입력창은 아래와 같이 입력해주세요.


 

※ 삽입된 HTML 소스

<table width="200" border="1">
  <tr>
    <td>
     <br>
1.매니져 소개<br>
<br>

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

 

 

2. 이렇게 왼쪽 디자인을 대메뉴 수만 큼 추가하였습니다.

그럼 실제 해당 페이지에 위 왼쪽 디자인이 나오게 하려면 지금까지 만든 모든페이지의  왼쪽디자인을 다시 지정 해줘야 합니다.

[디자인관리 고급 디자인 관리 추가 페이지 관리] 으로 이동 후 각 페이지 마다 수정 버튼을 클릭 후 아래와 같이 수정해주세요.

 



"메니져 농장" 페이지는  왼쪽디자인을 "1.매니져소개"를 선택하고, 

"메니져 사진" 페이지는  왼쪽디자인을 "1.매니져소개"를 선택하고,

"농장 소개" 페이지는  왼쪽디자인을 "2.매니져농장"를 선택하고,

"농장 연혁" 페이지는  왼쪽디자인을 "2.매니져농장"를 선택하고,

"채팅방" 페이지는  왼쪽디자인을 "4.커뮤니티"를 선택합니다.

 

3. [커뮤니티 고객 커뮤니티 관리 게시판 관리]에서도 위와 같은 방식으로 왼쪽디자인을 선택해주세요.

 

4. 이제 홈페이지 작동되는 것을 확인 해보시면 대메뉴를 클릭하면 왼쪽이 서로 다른것을 확인 할수 있지만 왼쪽 메뉴가 없습니다.

그럼 왼쪽메뉴를 넣어보도록 하겠습니다.

우리는 직접 html 코딩 해서 넣을수 있지만 차후 유지보수를 생각해서 네비게이션 마법사 기능을 이용해보도록 하겠습니다.

 

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

프로그램 종류에서 [네비게이션 마법사]를 선택 후 [왼쪽 메뉴1단계]를 선택하세요.

그러면 아래와 같은 설정 폼이 나타납니다.

 



여기서 주의 하실 점은 "메뉴 시작 지점" 입니다. 

 

이런방식으로 대메뉴 수만 큼 왼쪽 메뉴 프로그램을 생성 해주세요.

{GROUP_left1}  왼쪽 메뉴 - 메니져 소개        
{GROUP_left2}  왼쪽 메뉴 - 메니져 농장      
{GROUP_left3}  왼쪽 메뉴 - 자료실        
{GROUP_left4}  왼쪽 메뉴 - 커뮤니티 

 

그럼 아래와 같이 그룹디자인이 생성 되었을것입니다.

 



 

5. 위에서 생성한 그룹코드를 왼쪽디자인에 붙여 보도록 하겠습니다.

다시 [디자인관리 고급 디자인 관리 메인 화면 디자인]으로 이동 후 왼쪽 디자인을 선택 하세요.

왼쪽에 "1.메니져 소개"를 클릭 후 아래와 같이 소스를 추가하세요.

 



 

"2.메니져 농장"을 선택 후 {GROUP_left2}를 추가해주세요.

"3.자료실"을 선택 후 {GROUP_left3}를 추가해주세요.

"4.커뮤니티"을 선택 후 {GROUP_left4}를 추가해주세요.

 

 

수고하셨습니다.

 

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

 

위와 같이 각 메뉴마다 왼쪽 메뉴가 출력되면 다음 미션으로 ㄱㄱㄱㄱㄱㄱ

 

 

 

 

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