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

처음부터 만들기 매뉴얼 마이페이지 만들기
2012-02-18 00:16:05
조회수 402

 

 우리는 이전 "네비게이션 만들기" 미션을 통해 1.매니져소개, 2.매니져농장, 3. 자료실, 4커뮤니티 라는 대메뉴를 만들었습니다. 그럼  5.마이페이지를 추가 해야 하는데

보통 일반적으로 마이페이지는 대메뉴에(=상단메뉴에) 속한다기 보다는 회원정보 수정페이지에서만 별도의 메뉴가 보이게 하는경우가 많습니다.

즉 눈에 보이지 않는 대메뉴(=상단메뉴)라고 보시면 됩니다.

 

무슨말이지 모르시겠다면 그냥 따라하세요 ^^;;

[디자인관리  전문가 환경설정  네비게이션 마법사] 으로 이동하세요.

[대메뉴(최상위)생성] 버튼을 클릭 하시구요.

아래와 똑같이 설정해주세요

(주의!  출력안함으로 하셔야 하며, 접속 URL은 이전장에서 배운 세부페이지의 "회원정보 수정폼"을 선택하셔야 합니다.)

 

 

 

 

 

 


 

 

 그럼 "마이페이지"라는 대메뉴가 만들어 졌습니다.

그럼 마이페이지 밑으로 들어가는 소메뉴를 만들어 봅시다.

대메뉴를 만들때는 "출력안함"으로 설정 하였지만  소메뉴는 "출력함" 으로 설정 하셔야 합니다.

필자는 아래와 같이 소메뉴를 만들었습니다.

 


 

마이페이지 소메뉴는 모두 "세부페이지"로 되어 있으며 소메뉴 추가시 아래처럼 설정하시면 됩니다.

회원정보 수정 : 세부페이지 -> MYPAGE >> 회원정보 수정폼

예약접수확인 :  세부페이지 -> MYPAGE >> [등록폼 조회] 접수 내역 목록

패스워드 변경 : 세부페이지 -> MYPAGE >> 비밀번호 변경 폼

내가 쓴 게시글 : 세부페이지 -> MYPAGE >> 내가 쓴 게시글

보낸 쪽지함 : 세부페이지 -> MYPAGE >> 보낸 쪽지함

받는 쪽지함 : 세부페이지 -> MYPAGE >> 받은 쪽지함

회원탈퇴  : 세부페이지 -> MYPAGE >> 회원탈퇴 폼

 

 

 

 

아래 화면은 "예약접수확인" 설정 화면 입니다.  (참고하세요)

 


 


 

 

 

 

 

 

 마이페이지에 들어갈 메뉴를 생성 했다면 홈페이지상에  왼쪽메뉴가 출력 될수 있도록 만들어 봅시다.

이전 미션중에 "왼쪽메뉴 만들기" 미션 기억나시나요?  잊어버리신 분들을 위해 다시 설명 해드리겠습니다. 따라하세요 ^^

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

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

그러면 아래와 같은 설정 폼이 나타납니다. 똑같이 설정 해주세요

 

 

※ 여기서 주의 하실 점은 "메뉴 시작 지점" 입니다. 이것을 지정하지 않으면 대메뉴가 출력 되므로 꼭 선택해주세요.

 

그룹디자인을 생성 했다면 {GROUP_left5}의 [미리보기]를 클릭하셔서 정상적으로 출력되는지 꼭 확인 하세요.

 

 

 

 

 

 

 {GROUP_left5}를 만드셨다면 실제 홈페이지에  적용 합시다.

[디자인관리 고급 디자인 관리 메인 화면 디자인]으로 이동 후 왼쪽 디자인을 클릭합니다.

좌측편에 나만의 디자인 [새로만들기] 버튼이 있습니다. 클릭 하시구요

제목에 "마이페이지"라고 입력하시고

html 소스 입력란에 아래와 같이 입력해주세요.

 

 

※ 입력된 HTML

<table width="200" border="1">
  <tr>
    <td>
     {GROUP_login_box}<br>
     <br>
     <br>
     마이페이지<br>
     <br>
     {GROUP_left5}
     <br>
     <br>

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


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


 

 

 

 

 

 

 

 여기 까지 수정 후 홈페이지 접속 후 회원으로 가입한 다음 로그인 해보세요.

그리고 회원정보 수정을 클릭 하면 먼가 좀 이상한점을 발견 할 수 있습니다.

왼쪽 메뉴를 보면 위에서 만든 메뉴가 출력되지 않고 있습니다.

 

본 솔루션은 각 페이지 마다 상단, 왼쪽, 하단이 자동 선택되지 않기 때문에 꼭 개별적으로 수정해줘야 합니다.

 

수정 방법은 [디자인관리 고급 디자인 관리 세부 화면 디자인] 으로 이동 하신 후

+ MYPAGE -> "회원정보 수정"을 클릭해주세요.

아래와 같이 왼쪽 디자인을 마이페이지를 선택 한 후 [외각디자인 저장하기]버튼을 클릭해주셔야 합니다.

 



 

다시 홈페이지 접속해서 확인해 보세요. 회원정보 수정시 아래와 같이 왼쪽 메뉴가 출력되고 있음을 확인 할수 있습니다.

 

 

 

 

위와 같은 방식으로 아래 페이지의 왼쪽디자인을 선택 한 후 [외각디자인 저장하기]버튼을 클릭해주셔야 합니다.

세부페이지 -> MYPAGE >> [등록폼 조회] 접수 내역 목록

세부페이지 -> MYPAGE >> 내가 쓴 게시글

세부페이지 -> MYPAGE >> 보낸 편지함

세부페이지 -> MYPAGE >> 받은 편지함

세부페이지 -> MYPAGE >> 회원탈퇴 폼

 

 

※ "패스워드 찾기"는 팝업 전용이기 때문에 상단, 왼쪽, 하단을 선택 할수 없습니다.

※ "회원가입 약관", "회원가입 폼", "회원가입 완료" 페이지는 로그인 하기 전이기 때문에 왼쪽 디자인은 되도록이면 "메인 왼쪽디자인"을 선택 하시는것 좋습니다.