- 통합 매뉴얼 5.상단 로그인,로그아웃 코딩하기
- 2012-03-01 04:33:43
- (sinsaemart) 조회수 747
SINSAEM
3 상단 로그인, 로그아웃 코딩하기
웹디모 솔루션에서 상단 로그인, 로그아웃, 마이페이지 등의 기본메뉴를 생성하는 방법은 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"> </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"> </td> </tr> </table> </div> <!--로그인 상태일 로그아웃이미지 표시 종료--> |
? [디자인 관리》고급 디자인 관리》메인 화면 디자인》상단 디자인]에서 웹디모 기업의 상단 소스를 드림위버에 붙여 넣고 상단 기본 메뉴가 들어갈 <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
? 드림위버에서 수정한 소스를 [디자인 관리》고급 디자인 관리》메인 화면 디자인》상단 디자인]의 웹디모 샵의 상단에 삽입하고 수정 버튼을 클릭하면 아래와 같이 상단 기본 메뉴 코딩이 완료됩니다.
6.XML네비게이션 플래시 적용하기
4.상단 로고 넣기