통합 매뉴얼 19.하단 디자인 코딩하기
2012-03-02 02:30:10
(sinsaemart) 조회수 902

SINSAEM

 

 

05 하단 디자인 코딩하기

1 하단 디자인 코딩하기

웹디모 커뮤니티의 하단부분은 커뮤니티관련 배너 또는 정보, 이용약관, 개인정보취급방침, Copyright 등을 표시하는 부분입니다. 아래와 같이 하단 디자인을“하단에 사용할 디자인 및 솔루션”으로 변경해 보도록 하겠습니다.하단에 사용할 디자인 및 솔루션

EMB000011a03ce5 src

? 기본 정보에서 입력

? 기본 세팅 이미지에서 링크 복사해서 하이퍼링크 연결, 추가페이지 생성

(1) 하단 디자인 코딩하기

[디자인관리 》고급 디자인 관리 》메인 화면 디자인》하단 디자인]에서 기본 템플릿> [샘플] 일반 홈페이지 하단으로 이동하여 소스보기 버튼을 클릭하면 하단 디자인에 사용되는 변환코드를 볼 수 있습니다. 이 변환코드를 사용하여 하단디자인의 로고와 여러 정보를 불러오는 방법을 대해서 살펴보겠습니다.

필자는 [샘플] 일반 홈페이지 하단에 나온 변환코드를 미리 입력하여 하단 디자인을 코딩 하고 [디자인관리 》고급 디자인 관리 》메인화면디자인]의 하단디자인에 생성하였습니다.

EMB000011a03ce6 src

드림위버에서 코딩한 하단 디자인 소스입니다.

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

<tr>

<td width="8" height="86" valign="top"><img src="/img_up/shop_pds/ucomm01/design/main/bottom1.gif" width="8" height="86"></td>

<td background="/img_up/shop_pds/ucomm01/design/main/bottom_bg.gif"><table width="100%" height="86" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="26%" align="center">{USER_bottom_log}</td>

<td width="74%" valign=top><table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="right"><table width="409" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="66"><a href="/shop_add_page/index.htm?page_code=sub1_1"><img src="/img_up/shop_pds/ucomm01/design/main/bottom3.gif" width="66" height="19" border="0"></a></td>

<td width="87"><a href="/shop_info/agree.htm"><img src="/img_up/shop_pds/ucomm01/design/main/bottom4.gif" width="87" height="19" border="0"></a></td>

<td width="93"><a href="/shop_info/privacy.htm"><img src="/img_up/shop_pds/ucomm01/design/main/bottom5.gif" width="93" height="19" border="0"></a></td>

<td width="106"><a href="javascript:no_email()"><img src="/img_up/shop_pds/ucomm01/design/main/bottom6.gif" width="106" height="19" border="0"></a></td>

<td width="57"><a href="/shop_contents/myreg_form.htm?myreg_code=form01"><img src="/img_up/shop_pds/ucomm01/design/main/bottom7.gif" width="66" height="19" border="0"></a></td>

</tr>

</table></td>

</tr>

<tr>

<td height="67">상호 : {COMPANY_NAME} / 대표:{CEO_NAME} / 사업자등록번호 : {REGNO} / 통신판매번호 : {COMREGNO}<br>

주소: {ADDR1}{ADDR2} / TEL : {HELP_TEL} / FAX : {FAX}<br>

COPYRIGHT(C) 2009 {COMPANY_NAME} ALL. RIGHTS RESERVED</td>

</tr>

</table></td>

</tr>

<tr></tr>

</table></td>

<td width="6" valign="top"><img src="/img_up/shop_pds/ucomm01/design/main/bottom2.gif" width="6" height="86"></td>

</tr>

</table>

위 소스를 [디자인관리 》고급 디자인 관리 》메인화면디자인]의 하단디자인에서 추가버튼을 클릭하여 “메인하단”이라고 이름을 입력하고 저장하였습니다.

하단 디자인에 사용된 변환코드

- 하단로고 : {SHOP_LOGO2_HTML}

- 상호 : {COMPANY_NAME}

- 대표 : {CEO_NAME}

- 사업자 등록번호 : {REGNO}

- 통신판매번호 : {COMREGNO}

- 주소 : {ADDR1} {ADDR2}

-전화번호 : {HELP_TEL}

- 팩스번호 : {FAX}

하단 디자인에 사용된 하이퍼링크

- 사이트 이용약관 : /shop_info/agree.htm

- 개인정보 취급방침 : /shop_info/privacy.htm

- 이메일 무단수집금지 : javascript:no_email()

(2) 하단로고 등록

EMB000011a03ce7 src

? [기본정보 》기본정보설정]의 사이트정보설정으로 이동합니다.

? 사이트 하단로고의 찾아보기 버튼을 클릭하여 하단 로고를 삽입합니다. 아래와 같이 메인화면에 로고가 삽입 되었습니다. 추후에 로고가 변경될 경우에는 위와 동일한 방법으로 수정합니다.

EMB000011a03ce8 src

(3) 홈페이지 정보 출력하기

위의 변환코드를 사용하여 생성된 하단디자인에 실제로 내용이 출력되도록 만들어보겠습니다.

EMB000011a03c77 src

관리자에서[기본정보》기본정보설정]으로 이동합니다.

? 사업자 등록번호를 입력합니다.

? 회사명을 입력합니다.

? 대표자 이름을 입력합니다.

? 팩스번호를 입력합니다.

? 사업장 주소를 입력합니다.

? 통신판매신고번호를 입력합니다.

? 사이트 명을 입력합니다.

? 고객 상담전화를 입력한 후 ? 적용버튼을 클릭하면 입력된 정보들이 아래처럼 하단 디자인에 출력됩니다.

EMB000011a03ce9 src