CMS매뉴얼 5.상단 로그인,로그아웃 코딩하기
2012-02-25 10:38:13

5 상단 로그인, 로그아웃 코딩하기

예스탑 솔루션에서 상단 로그인, 로그아웃, 마이페이지 등의 기본메뉴를 생성하는 방법은 html로 코딩하는 방법과 프로그램 마법사를 통해서 생성하는 방법으로 나눌 수 있습니다. 본 교재에서는 html로 코딩하는 방법을 중심으로 다루도록 하겠습니다.

상단 로그인, 회원가입, 마이페이지 등 기본 메뉴만들기-html

웹디모 기업의 상단 기본메뉴를 html로 코딩하는 방법에 대해서 살펴보도록 하겠습니다.

? 상단 기본메뉴의 로그인과 회원가입이미지는 로그인 했을 경우에 로그아웃과 회원정보수정으로 표시되어야 합니다. 솔루션에서는 로그인상태일 경우에 <div id="logout_div"> 내용</div>을 사용하고, 로그아웃상태일 경우에 <div id="login_div" style="display:none;">내용</div>를 사용하여 로그인과 로그아웃을 표시할 수 있습니다. 로그인과 회원가입을 제외한 나머지 메뉴는 이미지링크로 페이지를 연결합니다.

? 상단 기본메뉴를 코딩하면 다음과 같습니다.

<!--로그아웃 상태일때 로그인이미지 표시 -->

<div id="logout_div">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td height="20"><a href="/shop_main/main_body.htm"><img src="/img_up/shop_pds/uhome003/design/main/home.gif" width="37" height="20" border="0"/></a></td>

<td height="20"><a href="/shop_login/login_form.htm"><img src="/img_up/shop_pds/uhome003/design/main/login.gif" height="20" / border="0"></a></td>

<td><a href="/shop_login/mem_agree.htm"><img src="/img_up/shop_pds/uhome003/design/main/member.gif" height="20" border="0"></a></td>

<td><a href="/bbs_shop/list.htm?board_code=board"><img src="/img_up/shop_pds/uhome003/design/main/custommer.gif" width="46" height="20" border="0"/></a></td>

<td><a href="/shop_info/sitemap.htm"><img src="/img_up/shop_pds/uhome003/design/main/sitempa.gif" width="67" height="20" border="0"/></a></td>

<td width="64">&nbsp;</td>

</tr>

</table>

</div>

<!--로그아웃 상태일때 로그인이미지 표시 종료 -->

<!--로그인 상태일때 로그아웃이미지 표시 -->

<div id="login_div">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td height="20"><a href="/shop_main/main_body.htm"><img src="/img_up/shop_pds/uhome003/design/main/home.gif" width="37" height="20" border="0"/></a></td>

<td><a href="/shop_login/logout.php"><img src="/img_up/shop_pds/uhome003/design/main/logout.gif" height="20" /border="0"></a></td>

<td><a href="/shop_login/mem_form.htm"><img src="/img_up/shop_pds/uhome003/design/main/member_edit.gif" height="20" /border="0"></a></td>

<td><a href="/bbs_shop/list.htm?board_code=board"><img src="/img_up/shop_pds/uhome003/design/main/custommer.gif" width="46" height="20" border="0"/></a></td>

<td><a href="/shop_info/sitemap.htm"><img src="/img_up/shop_pds/uhome003/design/main/sitempa.gif" width="67" height="20" border="0"/></a></td>

<td width="64">&nbsp;</td>

</tr>

</table>

</div>

<!--로그인 상태일 로그아웃이미지 표시 종료-->

EMB000005e01aa4 src

 

? [디자인 관리》고급 디자인 관리》메인 화면 디자인》상단 디자인]에서 웹디모 기업의 상단 소스를 드림위버에 붙여 넣고 상단 기본 메뉴가 들어갈 <td>~</td>?소스를 입력합니다. 아래는 상단 기본메뉴의 링크 주소입니다.

-HOME /shop_main/main_body.htm

-로그인 /shop_login/login_form.htm

-회원가입 /shop_login/mem_agree.htm

-고객센터 /bbs_shop/list.htm?board_code=board

-사이트맵 /shop_info/sitemap.htm

-로그아웃 : /shop_login/logout.php

-회원정보수정 : /shop_login/mem_form.htm

-마이페이지 : javascript:mypage()

? 드림위버에서 수정한 소스를 [디자인 관리》고급 디자인 관리》메인 화면 디자인》상단 디자인]의 웹디모 샵의 상단에 삽입하고 수정 버튼을 클릭하면 아래와 같이 상단 기본 메뉴 코딩이 완료됩니다.

EMB000005e01aa5 src