Home > 고객지원 > 질문&답변

처음부터 만들기 매뉴얼 [달인7단] 변환 코드에 대해서 알아보자.
2010-01-10 19:56:04

 

이번 미션은 지금까지 수행한 미션과 다르게 홈페이지를 운영하시는 분들을 위해 편의 기능에 대해서 알아 보고자 합니다.

 

홈페이지 운영시 필요에 따라 배너, 이미지, 텍스트등을 수정해야 하는 경우가 종종 발생되는데

 

이럴때마다 매번 html 코딩한것을 보고 수정해야 하므로 여간 불편한게 아닙니다.

 

또한 여러분이 홈페이지 템플릿을 제작 하여 고객에게 납품하였을때 고객이 쉽게 수정하지 못한다면, 결국 여러분이 수정해줘야 하는 경우가 발생 될 수 있습니다.

 

이러한 리스크를 최소화하는 중요한 미션이므로 필이 숙지하면서 따라해주세요

 

1. [디자인관리 고급 디자인 관리 메인 화면 디자인]으로 이동 후 "상단 디자인"을 선택해주세요.

여기서 아래부분을 유심히 보시면 [문자변환코드]버튼이 있습니다. 클릭하시면 아래와 같은 화면이 나타납니다.

 

여기서 {SHOP_LOGO_HTML}을 클릭하셔서 클립보드에 저장해주세요(만약 경고창이 뜬다면 "액세스 허용"을 클릭하시면 됩니다.)

 

 

 

2. "상단디자인" 소스에서 아래와 같이 수정합니다.

 

(수정전) <a href="/shop_main/main_body.htm">웹디모 초간단 홈페이지</a>

(수정후) <a href="/shop_main/main_body.htm">{SHOP_LOGO_HTML}</a>

 

 

3.이번엔 "하단 디자인"을 선택해주세요. 그리고 [문자변환코드]를 선택하시면 아래와 같이 사용 가능한 변환코드가 나타납니다.

 

4. "하단디자인" 소스를 위 변환 코드를 이용해서 수정 해주세요.

 

 

(수정전)

<a href='/shop_main/main_body.htm'> 하단 로고</a><br>

홈페이지명 : 초급미션홈피<br>
운영자:웹돌이<br>
이메일주소 : aaaa@naver.com <br>

 

(수정후)

<a href='/shop_main/main_body.htm'>{SHOP_LOGO2_HTML}</a><br>

홈페이지명 : {SHOP_NAME}<br>
운영자:{CEO_NAME}<br>
이메일주소 : {HELP_EMAIL}<br>

 

5. [기본정보관리 사이트정보 설정 기본정보설정]으로 이동 하셔서 각 항목에 값을 입력 후 저장 해보시면

로고 및 하단 운영자 정보들이 자동으로 변환 되는것을 확인 할 수 있습니다.

 

 

6. 이어서 "간편 디자인"에 대해서 알아 보도록 하겠습니다.

[디자인관리 디자인 마법사 설정 간편디자인 환경설정]으로 이동 후 "간편디자인 사용여부"를 "사용함"으로 저장해주세요.

 


 

7. 바로 밑 부분에 "메뉴추가"버튼 클릭하시면 아래와 같은 화면이 나타 납니다.

 

 

메뉴명에 "메인"
간략설명에는 "메인 관련 이미지 및 텍스트를 수정 할수 있습니다."라고 입력해주세요.

 

그리고 위와 같은 방식으로 "서브"를 추가해주세요.
그럼 아래와 같이 "간편디자인 메뉴"가 생성된것 을 확인 할 수있습니다.

 


8. "메인" 이라는 간편디자인 메뉴 옆에 보시면 [변환코드관리]버튼이 있습니다. 클릭해주세요.

그럼 바로 밑으로 "사용자 항목 목록"이 나타나는데 여기서 [사용자 항목추가]버튼을 클릭 해주세요.

 

항목을 추가하는 폼이 나타나는데 아래와 같이 설정해주세요.
변환코드를 {USER_main1}로 설정
항목명를 홈페이지 운영자가 알수 있도록 기재
항목유형을 "이미지, 플래시 첨부"로 설정
크기를 180*80 으로 설정
기본 이미지 첨부 (임시로 사용될 이미지이므로 아무거나 첨부하셔도 무방합니다. 뒤에 다시 바꿀겁니다.^^ )

원본PSD 파일 첨부 (원본 파일은 첨부하지 않으셔도 무방하나 되도록이면 홈페이지 운영자 쉽게 수정할 수 있도록 첨부해주시기 바랍니다.)

 


9. 위와 같은 방식으로 {USER_main2} {USER_main3} {USER_sub1}  만들어 보도로 하겠습니다.

   (  {USER_sub1}은 "서브"메뉴에서 추가해주세요.)

 

 


 

10. 그럼 위에서 만든 간편디자인을 실제 홈페이지에 적용해 보도록 하겠습니다.

[디자인관리 고급 디자인 관리 메인 화면 디자인]으로 이동 후 "왼쪽디자인"을 선택 합니다.

필자는 아래와 같이 소스를 수정하였습니다.


<table width="200" border="1">
  <tr>
    <td>
     <br>
     <br>
      {GROUP_login_box}<br>
     <br>
{USER_main1}<br>
{USER_main2}<br>
      <br>
      배너1 <br>
      배너2 <br>
     배너3 <br>
     배너4 <br>
    </td>
  </tr>
</table>

 

이번엔 바디 디자인을 선택 하신후 아래와 같이 {USER_main3}을 추가하였습니다.

 


 

[디자인관리 고급 디자인 관리 추가 페이지 관리] 으로 이동 후 "매니져 농장" 수정을 클릭해주세요.

아래 화면과 같이 적당한 위치에 {USER_sub1}을 추가해주세요.

 

 

수고하셨습니다.

 

완성화면 : http://myhome20.webdimo.co.kr

 

 

적용한 간편디자인코드가 어떻게 작동 되는지 홈페이지에서 확인 해보세요 ^^

간편 디자인 설정시 기본 이미지로 등록 한것들이 잘 출력되고 있나요?

 

여기서 순간 많은 의구심이 생길겁니다.

 

많은 회원님들께서 html 태그로 간단하게 이미지만 올리면 되는데 왜이렇게 복잡하냐고 물어 보시는데

 

포인트는 고객입장입니다.

 

고객이 html을 전혀 모르는 상태라도 이미지 및 내용을 쉽게 바꿀수 있도록 하기 위함입니다.

 

그럼 고객입장(홈페이지 운영자 입장)이라 생각 하시구요.

 

관리자 모드에서 "디자인 관리"버튼을 클릭해보세요. 그럼 아래 화면 과 같이 "간편디자인관리"라는 중분류가 새로 생겼을 겁니다.

여기서는 html을 전혀 모르더라도 누구나 쉽게 수정 할수 있도록 되어 있습니다.