통합 매뉴얼 19.회원 로그인 폼 수정하기
2012-03-01 05:09:44
(sinsaemart) 조회수 984

SINSAEM

 

 

07 MY PAGE 수정하기

1 회원로그인 폼 수정하기

회원로그인 폼의 수정방법에 대해 살펴보고 각 서브 페이지의 상단 타이틀을 변경해 보도록 하겠습니다.

(1) 회원로그인 폼 미리보기

회원로그인 폼에서 회원·비회원의 주문확인 폼은 수정할 필요가 없습니다. 회원로그인 폼에서 수정해야 할 부분은 상단 타이틀과 페이지 내의 타이틀을 수정하는 것입니다. 아래의 그림에서 상단 타이틀 이미지는 쇼핑몰의 현재 위치 부분과 동일하게 사용되고 있습니다.

EMB00001490353e src

(2) 상단 타이틀 수정하기

위의 기본 디자인을 아래와 같이 변경해 보도록 하겠습니다.

EMB00001490353f src

? 웹디모 샵에서는 기본으로 적용된 상단 타이틀을 사용하지 않고 위의 이미지를 상단 타이틀로 사용할 것입니다. 위 그림과 같이 회원 로그인 상단 타이틀을 만든 다음 html로 코딩합니다. 여기서 주의할 사항은 상단 타이틀은 다른 페이지에도 동일하게 적용하므로 배경과 이미지코딩에 주의해야 합니다.

? 이미지의 양쪽 끝과 회원로그인 부분은 이미지로 만들어 삽입하고 오른쪽 끝에 현재 위치를 추가합니다. 완성된 서브타이틀 소스는 다음과 같습니다.

<!-- 서브 타이틀 시작 -->

<table width=100% border='0' cellpadding='0' cellspacing='0'>

<tr>

<td width=53><img src='/img_up/shop_pds/ushop009/design/title/subtitle_left2.gif'></td>

<td background='/img_up/shop_pds/ushop009/design/title/subtitle_bg2.gif' style="background-repeat : repeat-x; padding:20 0 0 0" valign="top"><img src='/img_up/shop_pds/ushop009/design/title/subtitle_login.gif'></td>

<td align=right background='/img_up/shop_pds/ushop009/design/title/subtitle_bg2.gif' style="background-repeat : repeat-x;"><font color=000000>· HOME &gt; <b>로그인</b></font></td>

<td width='25'><img src='/img_up/shop_pds/ushop009/design/title/subtitle_right2.gif'></td>

</tr>

</table>

<!-- 서브 타이틀 종료 -->

위에서 만든 소스를 삽입합니다.

EMB0000149035c9 src

? [디자인 관리》고급 디자인 관리》세부 화면 디자인]로 이동하여 MY PAGE의 회원 로그인 폼을 클릭합니다. 회원 로그인 폼 소스에서 타이틀이 들어갈 위치에 ?의 소스를 삽입하고 해당 이미지 파일을 FTP로 업로드 합니다.

tip) 쇼핑몰 기본 디자인에서는 {GROUP_mypage_top}아래부터 상단디자인이 표시됩니다.

EMB0000149035ca src

? 수정이 완료된 후 출력되는 화면은 다음과 같습니다.

EMB0000149035cb src