아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 C코스 [응용] 간편디자인에 대해서 알아 봅시다.
2013-08-01 15:55:59
아람스쿨 조회수 1054

기존에 만든 홈페이지에 간편디자인을 적용해보도록 하겠습니다.

간편디자인을 이용하면 홈페이지 제작후의 유지보수가 매우 쉬워진다는 장점이 있습니다.

 

 

  [디자인관리 전문가 환경설정 간편디자인 환경설정]으로 이동해서  [메뉴추가]를 클릭하세요.

 팝업창이 열리면 "메뉴명"에 "메인 컨텐츠" 라고 입력 하고 설명에는 간단한 설명문구를 넣어주세요.

 

 저장하시면 다음과 같은 화면이 될 것 입니다.  여기서 [변환코드관리] 클릭 후 [사용자 항목 추가]를 클릭합니다.

 


상단의 로고를 간편디자인으로 만들어보겠습니다.

필자는 아래와 같은 로고를 만들었습니다.

아래와 같이 입력 하신 후 [등록]버튼을 클릭 해주세요.(차후에 수정이 용이하도록 포토샵원본파일(PSD)도 함께 등록)

※ 메인화면으로 바로가기 링크주소 : /shop_main/main_body.htm


동일한 방법으로 하단로고도 만들어 봅니다.


상단로고와 하단로고 등록이 완료되면 사용자 항목 목록에 아래와 같이 표시됩니다.

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

 [디자인관리 > 고급 디자인 관리 > 스킨 관리] 으로 이동하고  "메인스킨"의 수정버튼을 눌러 아래와 같이 수정합니다. (모든 스킨을 동일하게 수정)

 

홈페이지를 확인해보면 상단로고와 하단로고가 적용된 화면이 나타납니다.

 

 

 

이번에는 기존홈페이지의 하단에 공통으로 포함되는 홈페이지명, 운영자, 이메일주소 부분을 간편디자인으로 만들어 보겠습니다.

관리자모드 [디자인관리 > 고급 디자인 관리 > 스킨 관리] 으로 이동하고  "메인스킨"의 수정버튼을 눌러 아래와 같이 빨간색 사각형 부분을 복사합니다.

※ 접속수 부분은 별도 코드로 변환되어 있으므로 간편디자인으로 만들 수 없습니다.

 [디자인관리 > 전문가 환경설정 > 간편디자인 환경설정]에서 "변환코드관리 - 사용자항목추가"를 누른후 아래와 같이 입력하고 등록합니다.

이때 주의할 부분은 해당하는 소스가 HTML테그를 포함하고 있으므로 항목유형을 "HTML편집기"로 선택하고, 크기(영역)에는 값을 넣지 않았습니다.

※ 간편디자인에서 가로크기와 세로크기를 입력하지 않을 경우에는 크기에 상관없이 입력이 가능하지만, 입력한 값이 크기를 초과할 경우에 전체화면이 깨질수 있으므로 주의하시기 바랍니다.

등록후 해당코드를 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 "메인스킨"의 수정버튼을 눌러 아래와 같이 수정합니다. (모든 스킨을 동일하게 수정)

적용후 홈페이지를 확인하면 원래화면과 동일한 화면이 나타납니다.

 

 

 

지금부터 위에서 만든 간편디자인을 사용하는 방법에 대해서 살펴보겠습니다.

고객이 현재 만들어진 홈페이지에서 로고와 하단을 변경하고 싶은데 html을 전혀 모른다고 가정해봅시다.

간편디자인은 고객이 만드는 것이 아니라 솔루션을 어느정도 아는 사람이 만드는 것이라고 할 수 있습니다.

따라서 고객은 이미 만들어진 간편디자인을 그냥 사용하기만 하면 됩니다.

[디자인관리  > 간편디자인관리]에 보면 이전에 새롭게 만든 간편디자인 메뉴명들이 표시됩니다.

여기서 "메인화면"을 클릭하면 앞에서 만든 간편디자인들이 모두 표시됩니다.

고객은 여기에서 간편디자인으로 만든 내용을 수정할 수 있습니다.

 하단공통에 아래와 같이 내용을 삽입해 보겠습니다.

 ※ 한줄씩 입력하기 위해서 Enter키 대신에 Shift + Enter키를 이용하세요.

홈페이지를 확인하면 모든 페이지의 하단이 모두 변경된것을 확인할 수 있습니다.

 

완성화면 : http://uhkr16c.aramschool.co.kr/shop_main/main_body.htm

댓글 7개