SINSAEM

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

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

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

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

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

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

<!--상단 로그인 회원가입 시작--> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <!--로그아웃 상태일 때 로그인 이미지 표시 시작--> <div id="logout_div"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td><a href="javascript:content_link_chk('/shop_login/login_form.htm')"><img src="/img_up/shop_pds/ushop009/design/main/main_login.jpg" width="50" height="20" border="0" /></a></td> <td><img src="/img_up/shop_pds/ushop009/design/main/main_line1.jpg" width="1" height="20" /></td> <td><a href="javascript:content_link_chk('/shop_login/mem_agree.htm')"><img src="/img_up/shop_pds/ushop009/design/main/main_join.jpg" width="55" height="20" border="0"/></a></td> <td><img src="/img_up/shop_pds/ushop009/design/main/main_line2.jpg" width="1" height="20" /></td> </tr> </table> </div> <!--로그아웃 상태일 때 로그인 이미지 종료--> <!--로그인 상태일 때 로그인 이미지 표시 시작--> <div id="login_div" style="display：none;"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td><a href="javascript:content_link_chk('/shop_login/logout.php')"><img src="/img_up/shop_pds/ushop009/design/main/main_logout.jpg" width="50" height="20" border="0" /></a></td> <td><img src="/img_up/shop_pds/ushop009/design/main/main_line1.jpg" width="1" height="20" /></td> <td><a href="javascript:content_link_chk('/shop_login/mem_form.htm')"><img src="/img_up/shop_pds/ushop009/design/main/main_join2.jpg" width="55" height="20" border="0"/></a></td> <td><img src="/img_up/shop_pds/ushop009/design/main/main_line2.jpg" width="1" height="20" /></td> </tr> </table> </div> <!--로그인 상태일 때 로그인 이미지 종료--> </td> <!--마이페이지, 장바구니, FAQ, Q&A, 1:1문의 시작--> <td><a href="javascript:content_link_chk('javascript:mypage()')"><img src="/img_up/shop_pds/ushop009/design/main/mypage.jpg" width="62" height="20"></a></td> <td><img src="/img_up/shop_pds/ushop009/design/main/main_line3.jpg" width="1" height="20" /></td> <td><a href="javascript:content_link_chk('/shop_goods/cart_list.htm')"><img src="/img_up/shop_pds/ushop009/design/main/cart.jpg" width="46" height="20"></a></td> <td><img src="/img_up/shop_pds/ushop009/design/main/main_line4.jpg" width="1" height="20" /></td> <td><a href="javascript:content_link_chk('//bbs_shop/list.htm?board_code=faq')"><img src="/img_up/shop_pds/ushop009/design/main/faq.jpg" width="41" height="20"></a></td> <td><img src="/img_up/shop_pds/ushop009/design/main/main_line5.jpg" width="1" height="20" /></td> <td><a href="javascript:content_link_chk('/bbs_shop/list.htm?board_code=qa')"><img src="/img_up/shop_pds/ushop009/design/main//qa.jpg" width="41" height="20"></a></td> <td><img src="/img_up/shop_pds/ushop009/design/main/main_line6.jpg" width="1" height="20" /></td> <td><a href="javascript:content_link_chk('javascript:my_qna_form() ')"><img src="/img_up/shop_pds/ushop009/design/main/my_qna.jpg" width="41" height="20"></a></td> <!--마이페이지, 장바구니, FAQ, Q&A, 1:1문의 종료--> </tr> </table> <!--상단 로그인 회원가입 종료-->

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

-로그인 : /shop_login/login_form.htm

-회원가입 : /shop_login/mem_agree.htm

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

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

-장바구니 : /shop_goods/cart_list.htm

-자주하는 질문 : /bbs_shop/list.htm?board_code=faq

-질의 응답 : /bbs_shop/list.htm?board_code=qa

-1:1 문의 : javascript:my_qna_form()

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

tip)웹디모 샵 소스를 수정해서 이미지가 변경되거나 이미지를 업로드 할 때는 [디자인 관리》고급 디자인 관리》웹디자인 FTP] 에서 업로드합니다.