통합 매뉴얼 19.MY PAGE 수정하기
2012-03-01 04:50:10
(sinsaemart) 조회수 1011

SINSAEM

 

 

10 MY PAGE 수정하기

1회원로그인 폼 생성하기

회원로그인 폼 생성하기에서는 회원로그인 폼을 만드는 방법과 웹디모 기업에 맞는 페이지로 변경하는 방법에 대해서 살펴보도록 하겠습니다.

(1) 회원로그인 폼 생성하기

EMB000005e01b09 src

? [디자인 관리》고급 디자인 관리》세부 화면 디자인]로 이동하여 MY PAGE의 회원 로그인 폼을 클릭하고, 사용할 기본 템플릿을 선택한 후 하단의“나만의 디자인으로 복사”버튼을 클릭합니다.

EMB000005e01b0a src

? 나만의 디자인에 생성된 회원로그인 폼 A를 선택한 후 적용 버튼을 클릭합니다.

EMB000005e01b0b src

? 페이지 디자인 관리에서 URL링크를 클릭하면 ?와 같이 로그인 폼이 나타납니다.

(2) 회원로그인 폼 수정하기

EMB000005e01b0c src

? [디자인 관리》고급 디자인 관리》세부 화면 디자인]로 이동하여 MY PAGE의 회원 로그인 폼에 있는 소스를 드림위버로 불러옵니다.

EMB000005e01b0d src

? 불러온 회원로그인 폼 소스를 이용해 로그인 폼을 웹디모 기업에 맞게 수정합니다.

EMB000005e01b0e src

? 다음은 아이디, 비밀번호, 로그인버튼이 포함되는 로그인 폼의 소스입니다.

<!--아이디, 비밀번호, 로그인버튼 소스 시작-->

<form name='login_page_form' method='post' action='../shop_login/login_ok.php' target='ok_frame' onSubmit='return loginbox(this)'>

<input type="hidden" name="re_url" value="">

<tr>

<td width="75"><img src="/img_up/shop_pds/uhome005/design/template/2_14_23/log_id.gif" width="75" height="29"></td>

<td><input name="id" type="text" size="18" /></td>

<td width="77" rowspan="2" align="right"><input type='image' src="/img_up/shop_pds/uhome005/design/template/2_14_23/log_bt.gif" width="75" height="57"></td>

</tr>

<tr>

<td width="75"><img src="/img_up/shop_pds/uhome005/design/template/2_14_23/log_pw.gif" width="75" height="28"></td>

<td><input name="pwd" type="password" size="18" /></td>

</tr>

</form>

<!--아이디, 비밀번호, 로그인버튼 소스 종료-->

? 로그인 폼에 사용되는 하이퍼링크 주소는 아래와 같습니다.

- 회원가입 하이퍼링크 주소 : /shop_login/mem_agree.htm

- 비밀번호 찾기 하이퍼링크 주소 : javascript:pwd_search()

? 드림위버로 불러온 회원로그인 폼을 웹디모 기업의 로그인 디자인을 변경하면 아래와 같이 나타납니다. 여기서 현재 이미지는 로컬경로의 이미지이므로 html소스를 단축키(Ctrl+F)를 사용하여 웹디자인 FTP의 이미지 경로로 변경해야 합니다. 필자는 [디자인 관리 》고급 디자인 관리 》웹디자인 FTP]에“/img_up/shop_pds/uhome003/design/sub_company/”로 이미지 경로를 변경하였습니다.

EMB000005e01b0f src

? [디자인 관리》고급 디자인 관리》세부 화면 디자인]로 이동하여 MY PAGE의 회원 로그인 폼에 드림위버로 코딩한 html소스를 삽입하고 수정버튼을 클릭합니다.

EMB000005e01b10 src

? [디자인 관리》고급 디자인 관리》웹디자인 FTP]에 회원로그인 폼에 사용된 이미지를 업로드한 후 출력화면은 다음과 같습니다.

EMB000005e01b11 src

2 회원가입 약관 수정하기

(1) 회원가입 약관 생성하기

디자인이 없는 템플릿으로 솔루션을 구입한 경우 [디자인 관리》고급 디자인 관리》세부 화면 디자인]로 이동하여 MY PAGE의 하위페이지 생성 방법은 앞에서 설명한“(1) 회원로그임 폼 생성하기”의 ?과 동일합니다.

EMB000005e01b12 src

? [디자인 관리》고급 디자인 관리》세부 화면 디자인]로 이동하여 MY PAGE의 회원가입 약관에서 상단의 기본템플릿을 선택한 후 하단의“나만의 디자인으로 복사”버튼을 클릭합니다.

EMB000005e01b13 src

? 나만의 디자인에 생성된 회원가입약관 A를 선택한 후 적용버튼을 클릭하면 다음과 같이 나타납니다.

EMB000005e01b14 src

? 회원가입약관 A html소스에서 본문 타이틀을 수정합니다. 필자는 이미지를 웹디모 기업에 맞도록 디자인을 변경하였습니다....방법은 회원로그인 폼 수정하기 방법과 동일하므로 생략하겠습니다.

Check point) 이용약관 변환코드는 {AGREEMENT}이고, 개인정보보호정책의 변환코드는 {PRIVACY}입니다.

회원로그인 폼 수정하기와 회원가입 약관 생성하기와 마찬가지로 [디자인 관리》고급 디자인 관리》세부 화면 디자인] MY PAGE에 있는 다른 페이지들도 동일한 방법으로 생성 및 수정할 수 있습니다.

(2) 이용약관 수정하기

이용약관의 문자변환코드는 {AGREEMENT}입니다. 이번에는 이용약관을 수정하는 방법에 대해서 살펴보겠습니다.

EMB000005e01b15 src

? 이용약관의 내용을 수정하고자 할때는 [기본정보》이용약관 설정]에서 수정할 수 있습니다.

? 그림의 2<>부호를 클릭하면 html모드로 전환됩니다. 기본편집기모드, html모드 중 어떤 모드로 사용하셔도 화면에 동일하게 출력됩니다.

EMB000005e01b16 src

? 위 그림은 이용약관의 출력화면 입니다. 이용약관의 백그라운드나 이미지를 수정하기하려면 [디자인 관리》고급 디자인 관리》세부 화면 디자인》MY PAGE》회원가입 약관]에서 수정합니다.

EMB000005e01b17 src

Check point1) 앞장에서는 상단 제목과 MY PAGE를 수정하는 방법에 대해서 살펴보았습니다. [디자인 관리 》고급 디자인 관리 》세부화면 디자인]으로 이동하여 회원가입 폼, 회원가입완료, 회원정보 수정 폼 등 MY PAGE의 모든 서브페이지도 회원가입 약관 상단 타이틀 수정하기, 이용약관 수정하기와 동일한 방법으로 수정합니다.

Check point2) 아래 그림에서 빨간 박스 부분이 수정해야하는 부분입니다. MY PAGE의 하위 페이지들은 프로그램을 불러오거나 폼을 불러오는 페이지들이 많이 있지만, 사용하고자 하는 페이지만 수정하면 됩니다. 웹디모 샵에서는 상단 타이틀만 수정해서 사용하므로 각 페이지마다 상단 타이틀만 수정하였습니다. MY PAGE를 수정하는 방법과 동일하게 [디자인 관리》고급 디자인 관리》세부화면 디자인]의 다른 페이지들도 수정합니다.

EMB000005e01b18 src