매뉴얼

친절한 상담, 빠른 답변

견적문의, 기능상담 등 모든 궁금증을 해결해 드립니다.

Page : Home 고객지원 매뉴얼

총 201건, 3/21 페이지

[디자인팜 2.0] 블럭 추가/수정/삭제 방법

이번장은 블록추가/수정/삭제부분에 대해서 말씀드리겠습니다. 

디자인팜 2.0에서 사용하는 블록이라고 하는것은 디자인의 최소단위를 말합니다. 

블록부분이 쌓여서 메인페이지, 추가페이지를 제작을 할 수 있습니다. 

이러한 블록의 추가, 수정, 삭제 부분에 대해서 알아보도록 하겠습니다.

 

디자인팜2.0을 실행 후 내용출력되는 부분 제일 하단에 보시면 아래와 같이 블록추가라는 버튼이 있습니다.

이 버튼을 통해서 블럭을 추가를 할 수 있습니다. 블록추가 버튼을 클릭하시기 바랍니다.

   

 

 

블록추가버튼을 클릭을 하면 아래와 같은 화면에 나타나는데요...

블록은 기본적으로 디자인블록, 페이지블록, 블록즐겨찾기, 삭제한 블록복원 이렇게 4가지의 메뉴가 있습니다.

각각에 대해서 설명드리도록 하겠습니다.

   

 

 

1. 블록 추가하는 방법

1) 기본블럭

"기본블록"은 컨텐츠가 들어있지 않은 기본 레이아웃 1개 블록입니다.

사용하실 블록을 선택 후 "블록추가" 버튼을 클릭하면 블록이 추가됩니다.

<블록추가 팝업창화면>

 

<기본블록 추가된 사용자화면>

 

 

2) 디자인블록

"디자인블록"은 컨텐츠가 들어있고 디자인이 완료되어 있는 1개 블록을 말합니다.

"블록 추가"버튼을 클릭하고 디자인 블록을 선택 후 블록추가버튼을 클릭하면 해당 디자인된 블록이 추가가 됩니다.

디자인블록에는 디자인블록 이외에 설명안내블록, 지도 및 오시는길 블록등 여러 유형의 블럭을 종류별로 모아놓았습니다.

원하시는 형태의 블럭을 추가하시면 됩니다.

<디자인블록 선택화면>

 

 

디자인블록이 설치가 완료되면 아래의 이미지와 같이 디자인이 완성된 블록 1개가 설치됩니다.

<디자인블록 설치 완료화면>

 

 

 

3) 페이지블록

"페이지블록"은 디자인 작업이 완료되어 있는 여러개의 디자인블록이 모여 페이지를 이루고 있는 블록입니다.

페이지블록에서 원하시는 형태의 디자인을 설치하기버튼을 클릭을 하면 해당 페이지에 설치가 됩니다. 

썸네일에 마우스를 올리면 큰 화면을 보실 수 있으며 pc웹 미리보기를 통해서 디자인된 내역을 자세하게 확인이 가능합니다.

<페이지블록 선택화면>

 

페이지블록 설치하기를 클릭하면 아래와 같이 나타납니다. 

<페이지블록 설치완료 화면>

 

 

2. 블록 즐겨찾기 기능 사용방법

마음에 드는 디자인블록 또는 직접만든 나만의 블록 이 모든블록들은 블록별로 즐겨찾기 저장할 수 있습니다.

저장된 즐겨찾기 블록은 저장되었던 블록을 그대로 설치하여 다음에 다시 사용하기 편리하도록 지원하고 있습니다.

즐겨찾기를 하고싶은 블록에 마우스를 올리면 아래의 이미지처럼 설정 버튼이 나옵니다. 해당 버튼에서 "★" 버튼을 클릭합니다.

<블록 즐겨찾기 화면>

 

 

저장된 블록은 "블록 추가" 팝업창에서 확인이 가능합니다.

사용하실 즐겨찾기 블록을 선택하고 "추가" 버튼을 클릭하여 설치 하시면 됩니다.

<블록추가 팝업창>

 

 

[블록 수정]

블록 수정을 통해 레이아웃칸, 배경색상, 블록별 상하간격, 셀 배경색상등 블록의 모든 내역을 조정할 수 있습니다.

수정하실 블록에 마우스를 가져다가면 아래의 화면처럭 우측에 블록관련 정보가 뜨는데요 톱니바퀴모양의 수정버튼을 클릭합니다.

 

 

- 수정 버튼을 클릭하시면 아래와 같이 팝업창이 나옵니다.

<블록설정 팝업창>

1) 블록과 셀을 설정하고 디자인할 수 있는 부분입니다.

2) 태블릿화면과 모바일 화면상에 나타날 레이아웃 모양을 선택할 수 있습니다.

 

 

1. 블록설정

<블록설정 팝업창의 옵션화면>

1) 블록형태

반응형은 태블릿, 모바일화면의 레이아웃을 설정하여 기기별로 레이아웃을 선택할 수 있습니다.

가로 Full을 선택하시면 출력화면에서 화면 사이즈에 맞춰 최대로 출력합니다.

(선택을 하지않을 경우 스킨에 설정되어 있는 가로값으로 자동 설정됩니다.)

 

2) 간격

셀사이 간격은 블록 내부에 있는 셀끼리의 사이를 뜻합니다.

블록 상/하 간격은 블록의 위아래로 간격을 적용할 수 있습니다.

즉, "셀사이 간격"을 10으로 주고 "블록 상/하 간격"을 20px로 줬다고 가정하면 아래의 이미지와 같이 설정됩니다.

<간격 적용 화면>

녹색배경 : 셀사이 간격 10px

노란배경 : 블록 상/하 간격 20px

 

 

3) 블록배경

컬러배경에서 색상을 지정하거나 이미지배경에서 이미지를 적용하시면 해당 블록에만 적용됩니다.

컬러배경과 이미지배경 모두 적용한 경우에는 이미지배경의 우선순위가 높기 때문에 이미지 배경이 노출됩니다.

아래 적용이미지는 컬러배경은 "연두색" 이미지배경은 "폭죽놀이의 이미지"을 배경으로로 적용한 예시입니다. 이미지배경이 노출되고있죠?

 

설정된 블록의 배경이나 이미지를 초기화를 하실려면 블록배경아래부분에 초기화 버튼을 클릭을 해서 초기화 처리를 해주시면 됩니다.

 

 

2. 셀 설정

<블록 설정 팝업창의 옵션화면>

 

1) 셀 합치기

기본 블록을 설치하면 셀이 6칸으로 설정되어 있습니다.

각 셀을 합치거나 나누기를 해서 원하는 형태로 구성이 가능합니다. 

셀을 합치려면 합할 셀들을 마우스로 드래그해 선택하고 [셀합치기] 버튼을 클릭하시면 됩니다.

아래의 화면은 1, 2, 3 셀을 합하는 화면입니다.

<블록 설정 팝업창의 옵션화면>

  

 

 

셀 합치기가 완료되면 6칸의 기본레이아웃에서 아래 이미지와 같이 4칸 레이아웃으로 수정이됩니다.

<셀 합치기 결과화면>

 

 

2) 셀 나누기

셀 나누기는 선택된 셀을 나누는 기능입니다.

나눌 셀을 마우스로 선택을 하고 "셀 나누기" 버튼 클릭 후 "블록 수정"버튼을 클릭합니다.

<블록 설정 팝업창의 옵션화면>

 

 

셀 나누기가 완료되면 4개의 레이아웃에서 아래의 이미지와 같이 5개의 레이아웃으로 수정됩니다.

<셀 나누기 결과화면>

 

 

3) 셀 너비를 같게

선택된 셀의 너비를 같게 조정합니다.

간격조정을 수정할 셀을 드래그해서 선택하고 "셀 너비를 같게" 버튼을 클릭합니다.

<블록 설정 팝업창의 옵션화면>

 

수정이 완료되면 넓이가 달랐던 각 셀들이 아래의 이미지와 같이 수정됩니다.

<"셀 너비를 같게" 완료 화면>

 

 

4) 셀 배경 지정

각 셀마다 배경을 따로따로 지정할 수 있습니다. 배경을 변경할 셀을 선택을 한뒤 컬러배경 및 배경이미지를 등록을 하시면 해당 셀의 배경이 지정이 됩니다.

* 셀에서도 블록배경과 마찬가지로 두가지 모두 사용할 경우 이미지 배경이 우선시 됩니다.

<셀별 색상지정 완료 화면>

 

 셀 배경 삭제는 셀 설정 하단에 있는 "선택된 셀의 컬러배경 삭제(초기화)", "선택된 셀의 이미지배경 삭제(초기화)" 버튼을 클릭하면 초기화 됩니다.

 

 

[블록 삭제]

삭제를 원하는 블록에 마우스를 올려 우측에 휴지통모양을 클릭을 하면 해당 블록이 삭제가 됩니다.

삭제를 한 블록은 블록추가에서 휴지통에 보관을 하고 있으니 잘못 삭제한 블록은 블록추가에서 휴지통을 클릭 후 복구를 하시면 됩니다.


1. 블록 삭제

삭제할 블록에 마우스를 올리면 아래의 이미지와 같이 우측에 휴지통 옵션이 있습니다. 삭제 버튼을 클릭하면 해당 블록이 삭제됩니다.

 

2. 삭제한 블록 복구

잘못삭제를 하였거나 기존의 삭제한 내용을 복구를 할 경우에 사용하는 기능입니다.

블록추가버튼을 클릭 후 휴지통 모양을 클릭후 삭제된 블록을 클릭을 하신뒤 복원버튼을 클릭을 하시면 됩니다.

(※ 삭제된 블럭은 휴지통에 보관이 되며 1일이 지나면 휴지통에서도 제거가 되며,

휴지통에서 제거된 블럭은 복구가 불가능하니 이점 참고하시기 바랍니다.)

<블록 추가 팝업창>

 

이상 블록의 추가, 수정, 삭제에 대해서 알아 봤습니다.

블록은 디자인팜2.0에서 가장 기본적으로 구성되는 디자인형태입니다. 

이 블록이 쌓이고 쌓여서 메인페이지 혹은 서브페이지로 구성이 되는데요...

블록을 잘 활용하시면 다양한 형태의 홈페이지를 구성 할 수 있으니 천천히 살펴보시기 바랍니다.

 

감사합니다.

[디자인팜 2.0] 스킨 변경 방법 및 소스 수정

이번장은 스킨변경 및 스킨소스 수정에 대해서 말씀드리겠습니다. 

스킨이라고 함은 홈페이지의 외각디자인을 말합니다. 본문이 출력되는 부분을 제외한

상,하단부분 혹은 좌측부분까지를 말하며, 이 스킨을 간단하게 클릭만으로 다른 스타일의 레이아웃으로 변경이 가능합니다.

 

[스킨변경]

디자인팜 2.0을 실행을 한뒤 상단에 보면 스킨관리라는 버튼이 있습니다. 이 버튼을 클릭을 해서 스킨을 변경 할 수 있습니다.

스킨은 홈페이지의 유형에 맞게 출력됩니다. 현재 홈페이지 유형이 "제품소개"일 경우에 다른 유형(쇼핑몰전용스킨, 홍보용스킨등)의 전용스킨은 출력되지 않습니다.

(즉, 다른 유형의 홈페이지에 있는 스킨이 해당 홈페이지에는 없을 수도 있습니다.)

 

<스킨 선택화면>

1) 스킨 레이아웃의 유형을 선택할 수 있습니다.

- 와이드형 : 메인&서브페이지 스킨이 상하단에 배치됩니다.

- 와이드+좌측메뉴형 : 메인페이지 스킨은 상하단에 배치되고 서브페이지는 좌측에 메뉴가 추가됩니다.

- 와이드+우측메뉴형 : 메인페이지 스킨은 상하단에 배치되고 서브페이지는 우측에 메뉴가 추가됩니다.

- 좌측 메뉴형 : 메인&서브페이지 좌측에 메뉴가 생성되어 있습니다.

- 모바일웹 : 모바일 스킨을 확인하실 수 있습니다.

2) 스킨컬러로 해당 컬러를 가지고 있는 스킨을 확인할 수 있습니다. 자세한 부분은 아래에서 설명드리겠습니다.

 

 

1. 스킨 선택

1) 유형별 스킨찾기

- "스킨 관리"를 클릭하면 아래와 같이 팝업창이 나옵니다. 현재 선택되어 있는 스킨은 Skin. 796입니다. 스킨 Skin.745로 변경해보도록 하겠습니다.

- Skin. 745를 클릭합니다.

<스킨 선택 팝업창>

 

변경할 스킨을 클릭하면 아래와 같이 색상선택을 하는 팝업창이 나옵니다.

한스킨에 색상을 여러개 포함하고 있습니다. Skin. 745는 5가지의 색상을 가지고 있습니다.

메인 및 서브보기를 통해서 적용할 스킨의 설치된 디자인을 확인 하신후 원하시는 색상으로 "스킨설치"버튼을 클릭합니다.

<스킨 색상선택화면>

 

설치가 완료되면 해당 홈페이지를 확인합니다.

<브라우저 실제화면>

 

 

2) 유형별&색상별 스킨찾기

레이아웃 와이드형을 선택하고 스킨컬러에서 녹색 동그라미를 클릭합니다.

선택이 완료되면 스킨 리스트에 와이트형이고 녹색색상을 가진 스킨이 나열됩니다.

Skin. 759 스킨을 클릭하여 녹색색상 스킨을 설치해 보겠습니다.

 

<스킨 관리 - 와이드형+녹색스킨을 보유한 스킨 화면>

Skin. 759도 5가지의 색상을 가지고 있습니다. 5가지중에 Skin. 759-95 녹색스킨을 설치합니다.

 

<Skin. 759의 색상리스트>

 

설치가 완료되면 아래의 이미지처럼 실제 브라우저에서 녹색스킨의 레이아웃이 자동생성 됩니다.

<브라우저 실제화면>

 

 

3) 스킨별 옵션 확인 및 변경

스킨별로 로고변경이나 일부 디자인 변경이 가능합니다.

현재 적용된 스킨의 하단에 스킨옵션설정을 클릭을 하셔서 스킨의 옵션을 변경하시면 됩니다. 

(각 스킨마다 변경되는 내용이 다를 수 있으니 참고하시기 바랍니다.)

 

 

 

현재 적용된 스킨은 상단 팝업이미지, 팝업이미지 링크값, 상단로고, 하단로고 이렇게 변경이 가능한 스킨이네요..

해당 스킨에서 로고부분을 변경을 한다면 우측에 상단로고부분에 로고이미지를 등록을 해주시면 됩니다. 

우측의 내역을 변경을 좌측의 동일한 번호에 기재된 내역이 변경이 되니 참고하시기 바랍니다.

<스킨 옵션 설정팝업창>

1) 스크린샷의 좌측은 옵션변경시 변경되는 부분을 나타내고 있습니다.

2) 옵션 리스트입니다. 1-상단 팝업 이미지는 스크린샷 좌측 상단에 빨간박스 1번을 가리키고 있습니다.

 

- 이미지를 등록하고 실제 브라우저 화면을 확인하시면 로고가 봐뀐것을 확인할 수 있습니다.

<로고가 변경된 브라우저 실제화면>

 

 

 

 

[스킨 소스수정모드]

스킨의 경우 로고 및 간단한 문구만 변경이 가능합니다. 

만약 스킨을 일부 수정을 해야될 필요가 있으면 스킨 수정모드로 가셔서 수정을 하시면 됩니다. 

스킨 소스 수정모든는 소스기반으로 제공이 되며, html파일 및 css 파일을 직업 수정을 해서 원하시는 형태의 디자인으로 만드시면 됩니다.

 

1. [소스 수정 모드]로 변경&수정

현재 적용되어있는 스킨 하단에 보면 [소스수정모드]로 전환버튼이 있습니다. 

이 버튼을 클릭하면 소스기반으로 스킨 수정이 가능하게 됩니다.

 

[소스 수정 모드]로 변환이 되면 아래와 같이 스킨 관리 팝업창이 전환됩니다.

스킨소스는 pc쪽 스킨과 모바일쪽 스킨을 수정을 할 수 있습니다. 

수정할 스킨항목을 선택을 해서 원하시는 위치에 소스기반으로 수정을 하시면 됩니다.

<[소스 수정 모드]로 변환된 스킨관리 팝업창 화면>

   

 

css나 js파일의 경우는 각 스킨우측상단에 css소스를 클릭하면 해당 페이지에 적용되어있는 css나 js파일을 확인하실 수 있습니다.

CSS소스 버튼을 클릭을 해서 css및 js파일을 수정하시기 바랍니다.

 

 

2. [스킨 선택 모드]로 변경

소스 수정모드로 작업을 하다가 잘못작업을 하여 이상하게 출력이 된다거나 더이상 소스수정방식이 불필요한 경우 

다시 스킨선택모드로 돌아갈 수 있습니다. 

[소스 수정 모드]에서 [스킨 선택 모드]로 변경하게 되면 기존의 소스수정드에서 작업한 내역은 모두 삭제처리가 되며 이전상태로 복구가 불가능하니

신중히 작업을 해주시기 바랍니다.

 

- 변경이 완료되면 아래의 이미지와 같이 기존의 스킨 선택모드로 돌아옵니다.

 

이상 스킨변경에 대해서 설명을 드렸습니다.

스킨이라면 디자인팜2.0에서 뼈대를 이루는 구조로서 클릭몇번만으로 홈페이지 스타일을 다르게 변경을 할 수 있는 장점이 있습니다. 

지속적인 스킨형태를 추가를 해서 보다 다양한 형태의 스킨을 선택가능하도록 노력하겠습니다.

 

감사합니다

[디자인팜 2.0] 컨텐츠 추가/수정/삭제 방법 안내 (소스 수정 방법 안내)

이제 디자인팜2.0의 컨텐츠 추가 및 수정 방법에 대해 알려드릴 차례입니다^^

디자인팜 내에서의 컨텐츠라고 하면, 사이트 레이아웃(스킨)을 제외한 컨텐츠 페이지를 구성하는 요소이며 쉽게 설명드리자면 컨텐츠 덩어리라고 생각하시면 됩니다.

현재 디자인팜에서 기본적인 컨텐츠들을 제공하고 있으며 이 컨텐츠들을 조합하면 메인화면 또는 서브 메뉴 페이지가 완성이 됩니다.

그럼 컨텐츠 추가 및 수정&삭제 방법에 대해 설명해 드리도록 하겠습니다.

 


 

1. 컨텐츠를 추가 할 페이지 선택

처음 디자인팜2.0을 실행하면 메인화면을 선택하는 팝업창이 먼저 나타납니다.

이 때, 기존에 제공되는 메인화면을 선택하지 않고 나만의 메인화면 또는 서브 페이지를 만들고 싶다면 메인화면 팝업창을 닫아 주세요. 그럼 아래와 같은 화면이 보일 것 입니다.

 

 

메인화면 선택 창을 닫고 나면 빈 메인화면 페이지가 나타납니다. 만약 메인화면이 아닌 다른 페이지의 화면을 편집하고 싶으시다면 상단에 있는 '메뉴관리' 버튼을 눌러주세요.

그럼 아래와 같이 페이지를 선택 할 수 있는 메뉴화면이 나타날 것 입니다. 메뉴를 등록한 상태라면 아래처럼 메뉴들이 나타날 것이고, 만약 메뉴가 등록되지 않은 상태라면 '대메뉴 추가' 후 '페이지 추가'를 해서 작업 할 메뉴 페이지를 생성해 주시면 됩니다.

그리고 생성된 메뉴명을 클릭하시면 해당 페이지의 편집화면으로 이동됩니다^^

 

 

 

2. 컨텐츠를 넣을 블록 추가

컨텐츠를 넣기 위해서는 반드시 블록이 필요합니다. 페이지에 아무것도 없는 상태에서는 컨텐츠가 설치되지 않으며, 컨텐츠를 담을 그릇인 블록을 먼저 추가해 주셔야 컨텐츠를 설치 할 수 있습니다.

우선 기본 블록을 추가해 보겠습니다. ( 블록 추가에 대한 자세한 설명은 여기서 봐주세요^^ ☞ 블록 추가방법 )

 

 

처음 기본 블록을 추가하면 6칸짜리의 블록이 기본으로 생성이 됩니다. 저는 컨텐츠를 3칸 넣을 예정이기 때문에 블록의 칸을 3칸으로 만들도록 하겠습니다.

블록의 칸을 수정한 후 우측의 블록 출력형태 선택에서 모바일과 태블릿별로 원하는 레이아웃을 선택해 주세요. 이렇게 선택된 레이아웃은 실제 페이지 화면에서 브라우저 크기를 줄였을 때

선택된 모양대로 레이아웃이 변화합니다. 반응형으로 제작하시는 분들은 반드시 원하는 형태를 선택해 주셔야 해요^^

 

 

 

3. 컨텐츠 추가

컨텐츠를 넣는 방법은 2가지가 있습니다.

첫 번째, 좌측의 기본 컨텐츠 넣기

두 번째, 디자인 블록에 등록된 컨텐츠를 활용

 

좌측의 기본 컨텐츠 넣기는 주로 서브 페이지를 편집 할 때 많이 사용됩니다. 텍스트, 이미지, 표 등을 이용하면 설명 또는 안내 페이지가 손쉽게 완성되기 때문입니다.

그리고 디자인 블록이 등록된 컨텐츠를 활용하는 것은 완성되어 있는 컨텐츠들을 가져와 블록에 배치하면 페이지가 완성되는데 손쉽게 퀄리티 높은 메인화면, 서브 페이지를 만들 수 있습니다.

 

3-1. 좌측의 기본 컨텐츠를 넣는 방법

우선 좌측의 기본 컨텐츠 넣기부터 설명해 드리겠습니다^^

좌측에 제공되는 기본 컨텐츠들은 컨텐츠명 클릭 후 마우스 오른쪽 버튼을 누른 상태로 드래그(끌어오기)를 해서 원하는 블록 칸 안에 넣어주시면 컨텐츠가 설치됩니다.

만약 원하는 블록 칸이 아닌 다른 칸에 컨텐츠가 설치되었을 경우 당황하시지 마시고 설치된 컨텐츠를 다시 클릭하신 후 똑같이 드래그(끌어오기) 해서 원하는 블록 칸으로 이동해서 재배치 해주시면 됩니다~

저는 타이틀 텍스트와 이미지 컨텐츠를 설치해 보겠습니다.

 

 

컨텐츠를 끌어와서 설치하기까지 완료 되셨나요?^^ 참 쉽죠~?

설치한 컨텐츠의 내용을 바꾸는 방법을 알려드리기 전에 한 가지 설명하고 넘어가야 할 것이 있습니다~

블록 안에 설치된 컨텐츠 위에 마우스를 올려보면 컨텐츠 영역에 테두리가 생기면서 우측 상단에 버튼들이 나타날 것 입니다.

그럼 여기서 잠깐 이 버튼들에 대해 설명하고 넘어가도록 하겠습니다^^

아래의 이미지와 이미지 밑에 첨부한 설명을 참고해 주세요.

 

① : 컨텐츠 즐겨찾기

    -  화면에 컨텐츠 영역으로 표시되어 있는 '타이틀 텍스트 입력' 의 컨텐츠를 즐겨찾기 할 수 있습니다.
       자주 쓰는 컨텐츠들은 이 버튼을 이용해 즐겨찾기에 등록한 다음, 좌측 상단에 있는 같은 별 모양의 탭에서 가져와서 다시 사용하실 수 있습니다.

② : 컨텐츠 수정

    - 컨텐츠를 수정 할 수 있는 버튼입니다. 이 버튼을 누르면 우측에 컨텐츠 편집 항목들이 나타나고 항목에 맞춰서 컨텐츠 내용을 수정해 주시면 됩니다.

③ : 컨텐츠 삭제

    - 이 버튼을 누르면 해당 컨텐츠가 삭제되며, 삭제된 컨텐츠를 다시 복구하고 싶으시면 좌측 상단에 있는 휴지통 탭에서 다시 가져오실 수 있습니다.

④ : 해당 셀(블록의 칸) 즐겨찾기

    - 이미지에 보면 블록 한 칸이 파란색으로 표시가 되어있을 것 입니다. 이 한 칸을 셀이라고 하며, 블록 한 칸에 설치 되어있는 컨텐츠들의 배치 상태를 그대로 다시 재사용 하고 싶으시면 이 버튼을 이용해 주세요.
      이 셀을 즐겨찾기한 뒤 좌측 상단에 있는 같은 별 모양의 탭에서 등록한 셀을 블록 안으로 드래그 해서 가져와 사용하시면 됩니다.

 

그럼 설치된 '타이틀 텍스트 입력' 컨텐츠의 글자 내용을 바꿔보도록 하겠습니다. 위에 설명 드렸던 수정 버튼을 클릭해 주시면 우측에 컨텐츠의 내용 항목들이 나타날 것 입니다.

이 항목들의 내용을 바꿔보도록 하겠습니다^^

타이틀 내용 글자를 변경하고 글자 색상, 그리고 타이틀 글자 앞에 나타날 아이콘 모양을 변경해 보겠습니다.

그리고 타이틀 컨텐츠와 그 아래 설치했던 이미지 컨텐츠와 간격이 너무 좁으니 이 사이의 간격을 넓히기 위해 여백을 주도록 하겠습니다.

컨텐츠의 여백을 주는 방법은 우측 항목 중 상단에 있는 '기본옵션' 버튼을 누르면 여백을 지정하는 칸들이 나타는데 여기에서 여백을 설정하시면 됩니다.

상단 여백을 제외한 좌측, 우측, 하단 여백만 설정 가능하니 참고 바랍니다^^

변경되는 항목의 내용들은 아래의 이미지를 참고해 주세요.

 

 

내용을 변경하고 하단에 있는 적용버튼을 누르면 편집 화면에 변경된 내용이 적용 되어있을 것 입니다. 편집 화면 상단에 보시면 '미리보기' 버튼이 있는데 이 버튼을 누르면 실제 페이지에서의 모습을 확인 하실 수 있습니다.

 

 

타이틀 내용이 변경되었나요?^^ 변경이 완료 되었다면 이제 이미지 컨텐츠를 바꿔보도록 하겠습니다.

위와 같은 방법으로 이미지 컨텐츠 내용을 수정해 주세요~

 

 

이제 어느정도 컨텐츠 사용법에 대해 감이 잡히시나요? 아직 어려우신가요?ㅜㅜ

그렇다면 컨텐츠 하나를 더 추가해서 따라해 보도록 합시다^^

저는 사진 밑에 사진 설명을 넣고 싶으니 좌측 컨텐츠에서 '장문 텍스트' 컨텐츠를 드래그 해서 설치해 보도록 하겠습니다.

이 컨텐츠는 사진 밑에 넣고 싶으니 마우스로 끌어다가 사진 밑에다가 놔두도록 하겠습니다.

그리고 컨텐츠 수정 버튼을 누르고 우측에서 '텍스트 수정' 버튼을 눌러 장문 텍스트의 내용을 입력해 보겠습니다.

 

 

내용을 입력한 후 '미리보기' 버튼으로 페이지를 확인해 보면 아래와 같이 나올 것 입니다. 저는 사진과 장문 텍스트 사이의 간격이 좁은 것 같아 여백을 줘서 간격을 띄웠습니다~^^

 

 

예제에서 사용한 컨텐츠 외에도 여러가지의 다양한 컨텐츠들이 제공되고 있으니 하나씩 다 살펴보시고 설치해서 사용해 보시면 기본 컨텐츠에 대한 전반적인 파악이 될 것 입니다.

기본 컨텐츠를 잘 활용하면 여러 타입의 페이지들을 쉽게 제작하실 수 있습니다~^^

그럼 이제 디자인 블록에 등록된 컨텐츠를 활용하는 방법에 대해 설명해 드리겠습니다.

 

 

3-2. 디자인 블록에 등록된 컨텐츠를 활용하는 방법

디자인 블록은 제작 난이도가 높은 구조의 컨텐츠를 미리 제작해 고객님들이 사용하시기 편하도록 블록에 배치하여 제공하는 컨텐츠 모음입니다.

기본 컨텐츠와 마찬가지로 내용 수정 및 위치 이동이 자유롭기 때문에 활용도가 높을 것 이라고 생각됩니다^^

디자인 블록에 등록된 컨텐츠를 확인하는 방법은 앞서 설명해드렸던 기본블록 추가 할 때처럼 '블록 추가' 버튼을 클릭해 주세요.

그럼 블록 추가 팝업창이 뜨는데 팝업창 상단의 디자인블록 탭에 있는 것들이 한 블록별로 컨텐츠들이 채워져있는 디자인 블록들 입니다.

기본 컨텐츠들로 제작하기 어려운 디자인의 컨텐츠이나 이미 만들어져 있는 완성도 높은 컨텐츠들을 사용하고 싶으실 때엔 이 탭에서 찾아서 사용하시면 됩니다^^

디자인 블록들 중에 마음에 드시는 것을 찾으셨다면 우측 하단에 있는 '블록 추가' 버튼을 눌러주시면 화면에 설치됩니다~

 

 

블록 추가 하셨나요?^^ 블록 추가한 후 페이지를 확인해 보면 아래처럼 블록이 추가되어 컨텐츠들이 늘어난 것이 보이실 겁니다.

그런데 앞서 제작해놓은 컨텐츠와 위아래 간격이 너무 좁다 싶으시죠? 그럴때는 블록 하단에 있는 하단 여백을 설정해 주시면 됩니다^^

편집 화면에서 처음 제작한 블록과 조금 전 추가했던 블록 사이의 틈새에 마우스를 올려 보시면 여백 설정하는 부분이 나타나는데 이 곳을 클릭해 주세요~

 

 

 

이렇게 추가된 컨텐츠들의 내용은 컨텐츠 수정 버튼을 눌러 위와 동일하게 내용을 수정해 주시면 됩니다~

디자인 블록의 컨텐츠들 역시 마우스 드래그로 이동이 가능하기 때문에 원하는 디자인의 블록을 추가하신 후 사용하고자 하시는 컨텐츠를 다른 블록의 칸으로 옮겨 재배치 해주시면 간단하게 페이지가 바뀝니다^^

 

컨텐츠 추가하는 방법에 대한 설명이 끝났습니다~

아주 간단하게 컨텐츠가 추가되죠?^^ 디자인팜2.0은 별도의 소스 코딩없이 간단하게 컨텐츠가 완성되는 큰 장점이 있습니다.

그럼 이제 컨텐츠의 내용 및 설정을 수정하는 방법에 대해 알려드리도록 하겠습니다.

 

 

4. 컨텐츠 수정

설치된 컨텐츠의 내용을 제작하는 사이트에 맞게 내용이 수정되어야겠죠?^^

컨텐츠 내용을 수정하는 방법에 대해 위에서 어느정도 설명하고 넘어왔기 때문에 수정 방법에 대해 이미 짐작하시고 계시는 분들이 있으실 것 입니다~ㅎㅎ

마우스를 올려 나타나는 수정 버튼을 눌러 우측 항목에서 수정하면 되는데 일반적인 글자 수정이나 이미지 수정 같은 경우는 위에서 하셨던대로 수정 버튼을 눌러 우측의 항목에서 수정하시면 됩니다.

만약 설치한 디자인 블록 중에 최근 게시글, 쇼핑몰 상품 출력 등 프로그램 관련 컨텐츠들은 설정이 초기화 되기 때문에 이 부분을 다시 설정하는 방법에 대해 알려드리겠습니다.

 

예제로 사용한 디자인 블록을 설치하도록 하겠습니다.

 

 

위 블록에는 최근 게시글 컨텐츠가 포함되어 있는 블록입니다. 앞서 말씀드렸다시피 프로그램 관련 설정은 블록 설치시에 초기화 됩니다.

초기화되는 이유는 이미 컨텐츠에 지정되어 있던 프로그램 코드가 해당 사이트의 프로그램 코드와 중복되거나 설치되어 있지 않은 프로그램 코드일 수가 있기 때문에 이러한 문제점을 방지하고자 블록 설치시 초기화가 됩니다^^

설치한 블록의 컨텐츠 중 최근 게시글 컨텐츠에 마우스를 올려 수정 버튼을 클릭해보도록 하겠습니다. 그럼 아래의 이미지와 같이 우측에 설정 항목들이 출력이 되겠죠~?

 

 

자, 여기서 제가 말씀드린 프로그램 코드인 '게시판 코드' 항목이 보이실 겁니다. 이 항목은 현재 아무 값도 설정되어 있지 않는 상태입니다.

만약 게시판들의 전체 글을 다 출력하고 싶으시면 저 설정 그대로 두시면 되구요. 만약 특정 게시판의 게시글을 출력해오고 싶으시다면 이미지에 표시된 게시판 코드를 설정해 주셔야 합니다.

다른 프로그램 관련 컨텐츠들도 역시 같은 형태로 되어있기 때문에 이와같은 방법으로 설정해서 수정해 주시면 됩니다^^

 

5. 컨텐츠 삭제

컨텐츠 삭제 방법은 컨텐츠 위에 마우스를 올리면 나타나는 버튼들 중 휴지통 모양인 버튼을 클릭하면 해당 컨텐츠가 삭제 됩니다.

이 방법은 개별적으로 컨텐츠를 삭제하는 방법이며, 블록 한줄의 컨텐츠를 다 삭제하고 싶으시면 블록 우측의 휴지통 버튼을 클릭해 주시면 됩니다^^

그리고 블록이 여러 줄이고 설치된 컨텐츠가 많은데 다 없애고 싶으시다면 편집화면 중앙 하단에 있는 '모든블록삭제' 버튼을 눌러주시면 화면이 깨끗하게 비워집니다~

각 버튼들의 위치는 아래의 이미지를 참고해 주세요^^!

 

 

[고급 사용자 전용 - 소스 수정 방법]

현재 디자인팜2.0에서는 초급 사용자들을 위해 컨텐츠의 소스 수정이 불가능한 상태이지만 세부적인 컨텐츠 디자인 수정을 원하는 고급 사용자들을 위한 소스 수정 방법을 알려드리겠습니다.

수정하고자 하는 컨텐츠 위에 마우스를 올리고 나타나는 버튼들 중 수정 버튼을 클릭하면 우측에 설정 항목들이 나오는 것은 이제 아실 겁니다^^

여기서 소스 수정을 하는 버튼은 우측 상단에 보시면 빨간색 망치버튼이 소스 수정 창으로 이동할 수 있는 버튼입니다~

이 버튼을 클릭하면 css / html / js 를 수정 할 수 있는 소스 창이 나타나며 여기에서 수정을 해주시면 됩니다^^

 

 

만약 컨텐츠의 우측 설정 항목을 추가 / 수정 / 삭제를 하고 싶으시면 소스 창의 하단에 있는 '변수관리' 버튼을 눌러 해당 팝업 창에서 수정해 주시면 됩니다~

변수관리에서 수정하신 후 해당 창 하단에 있는 '저장' 버튼을 눌러주신 다음 소스 수정 창의 하단에 있는 '수정' 버튼을 최종적으로 눌러 주셔야 변경된 내용이 적용되니 주의해 주세요^^

 

[디자인팜 2.0] 게시판 추가 방법 (각종 프로그램 추가 설치 방법)

디자인팜2.0에서는 게시판 및 각종 프로그램 설치하는 방법이 기존의 관리자 페이지에서 설치하는 방법과 많이 다른 과정을 거칩니다.

하지만 디자인팜 내에서 추가하는 방법이기 때문에 어떻게 보면 훨씬 편리하게 추가가 가능하기 때문에 설명드리는 내용을 잘 봐주세요~^^

 


 

기존 관리자 페이지에서는 메뉴 따로 생성, 게시판 따로 생성을 해서 네비게이션 마법사에서 메뉴와 게시판을 연결해주는 방식었다면

디자인팜2.0에서는 모든 페이지 추가가 '메뉴 관리' 페이지에서 이뤄집니다. 메뉴가 추가가 되면서 해당 페이지가 동시에 생성이 되기 때문인데요.

 

추가하는 방법은 편집 화면 상단의 '메뉴관리 버튼 > 대메뉴 추가 또는 생성된 대메뉴 아래에 페이지 추가 > 페이지명 입력 > 페이지 종류 선택' 순으로 하시면 됩니다.

각 버튼들의 위치는 아래의 이미지를 참고해 주세요^^

 

1. 메뉴관리 창에서 페이지 추가 클릭

게시판이나 프로그램을 설치하고 싶은 메뉴의 위치에 '페이지 추가' 버튼을 눌러 해당 페이지를 생성해 주세요.

만약 대메뉴가 생성되지 않았다면 대메뉴 먼저 생성하신 후 생서된 대메뉴 밑에 페이지를 추가해 주셔야 합니다^^

 

 

2. 페이지 생성하기

페이지 추가 버튼을 누르면 페이지를 생성하는 창이 나타납니다. 여기서 만들어진 페이지가 곧 게시판 페이지 또는 프로그램 페이지가 됩니다.

페이지명을 작성한 후 그 아래에 있는 탭 중에 '프로그램 추가' 탭을 선택해 주시면 디자인팜에서 설치 가능한 프로그램들의 목록이 나타납니다.

이 페이지에서 게시판 추가 및 각종 프로그램들 설치가 가능합니다. 원하시는 프로그램을 선택하신 후 '만들기' 버튼을 눌러주세요~

이 때 주의하셔야 할 점은 한번 선택되어 만들어진 페이지 타입은 다시 변경이 되지 않으니 신중히 생성해 주셔야 합니다.

만약 페이지 타입을 변경하고 싶으시면 메뉴 관리 창에서 해당 페이지 메뉴를 삭제하신 후 다시 생성해 주세요~ (이때 삭제된 메뉴와 함께 게시판 및 프로그램도 같이 삭제되니 주의 바랍니다.)

 

- 게시판 추가

 

- 맞춤전송폼 추가

 

예시로 게시판과 맞춤전송폼 설치하는 모습을 보여드렸습니다~

이외 '프로그램 추가' 탭에 있는 다른 프로그램들(각종 게시판, 맞춤 게시판 등) 설치가 가능하니 등록되어 있는 프로그램들을 쭈욱 훑어봐주세요^^

 

3. 게시판 및 프로그램 설정 변경 방법

게시판 및 프로그램을 설정하는 방법은 '메뉴 관리' 페이지 창에서 설정을 변경하고 싶은 메뉴 페이지를 클릭하면 해당 프로그램 페이지로 이동이 됩니다.

각종 설정 변경은 이 페이지에서 해주시면 됩니다^^

 

 

 

4. 게시판 및 프로그램 페이지에 디자인 컨텐츠를 추가하는 방법

만약 게시판 및 프로그램 목록 위에 다른 디자인적인 요소를 추가하고 싶으시다면 해당 페이지 내에서 블록 추가를 통해 추가하실 수 있습니다.

해당 페이지 내로 이동하는 방법은 위의 3번에 첨부된 이미지를 참고해 주세요~

블록 추가를 하신 후 블록 안에 원하는 컨텐츠를 추가해서 제작해 주시면 되는데 컨텐츠를 추가 및 삭제 방법은 여기에서 확인해 주세요^^  ☞컨텐츠 추가 및 삭제 방법

 

 

저는 맞춤 게시판 위에 블록을 두고 컨텐츠를 추가해 보았습니다^^ 추가된 모습의 편집 화면과 실제 페이지의 모습은 아래 이미지를 참고해 주세요~

컨텐츠가 추가된 페이지의 실제 화면은 여기에서 확인이 가능합니다.  ☞적용된 페이지 확인

 

[디자인팜 2.0] 오늘 본 상품을 퀵메뉴로 출력 하는 방법

1. 관리자모드 [마케팅 - 마케팅 지원 - Quick메뉴관리] 메뉴로 이동 후 우측 Quick메뉴 등록 버튼을 클릭합니다.



 

 

2. Quick메뉴 설정

사용함에 체크하고  출력할 위치 및 크기를 입력 합니다.

세부적인 옵션은 각 옵션옆에 도움말이 있으므로 참고하셔서 설정하시기 바랍니다.

소스 내용에는 다음과 같이 추가해주세요.

 

 

 

 

 

 

{@	$program_set[cate_code] = '00000000'; // 쇼핑몰 상품분류	$program_set[img_thumb_w] = 80; // 썸네일 이미지 가로크기	$program_set[img_thumb_h] = 80; // 썸네일 이미지 세로크기	$program_set[img_thumb_type] = 2; // 썸네일 이미지 생성방식 (1:일반 이미지축소, 2: 위 사이즈보다 큰경우 잘라내기)	$program_set[limit] = 4; // 출력수 (1~999)	$shop_goods_view = program_load(SHOP_GOODS_VIEW);	$fWidth = 80 + 2;@}<style>	.pm-goods_today * {-webkit-box-sizing: border-box; box-sizing: border-box;}	.pm-goods_today a {display:block; color:#333; text-decoration:none;}	.pm-goods_today ul {margin:0; padding:0; list-style:none;}	.pm-goods_today .empty {width:100% !important; padding:10px 8px; font-size:14px; color:#666; text-align:center;}	.pm-goods_today li {position:relative; text-align:center;}	.pm-goods_today li > a,	.pm-goods_today li > div {display:inline-block; max-width:100%; padding:5px 5px 15px; text-align:center;}	.pm-goods_today .figure {width:{$fWidth}px; margin:0 auto;}	.pm-goods_today .figure > div {position:relative; padding:1px;}	.pm-goods_today .figure img {display:block; max-width:100%; margin:0 auto;}	.pm-goods_today dl {margin:0; font-size:13px; line-height:1.6em; vertical-align:middle;}	.pm-goods_today dl dt span {display:block; padding:5px 0;}	.pm-goods_today dl dd {margin:0;}	.pm-goods_today dl dd span {display:block; padding:2px 0;}	.pm-goods_today dl .goods_name {overflow:hidden; font-size:13px; color:#333; white-space:nowrap; text-overflow:ellipsis;}	.pm-goods_today dl .sijung_price {display:none; font-size:12px; color:#888; text-decoration:line-through;}	.pm-goods_today dl .price {font-size:14px; font-weight:bold; color:#333;}	.pm-goods_today dl .soldout {font-size:13px; color:#c40000;}	.pm-goods_today dl .icon {display:none;}	.pm-goods_today li:hover .figure > div {padding:0; border:1px solid #ccc;}</style><div class="pm-goods_today">	<ul>		<!--@foreach($shop_goods_view as $k=>$v)-->			<li>				<a href="{$v[read_url]}">					<div class="figure">						<div>							<!--@if($v[img1_url])-->								<img src="{$v[img1_url]}" alt="{$v[goods_name]}">							<!--@else-->								<img src="/img_up/_noimg/80.png" alt="NO IMAGE">							<!--@end-->						</div>					</div>					<dl>						<dt>							<span class="goods_name">{$v[goods_name]}</span>						</dt>						<dd>							<!--@if($v[goods_stock])-->								<span class="sijung_price" cond="$v[sijung_price_str]">{$v[sijung_price_str]|money}</span>								<span class="price">{$v[price_str]}</span>							<!--@else-->								<span class="soldout">품절</span>							<!--@end-->							<span class="icon" cond="$v[icon_str] || $v[icon_str2]">{$v[icon_str]} {$v[icon_str2]}</span>						</dd>					</dl>				</a>			</li>		<!--@end-->		<li cond="!count($shop_goods_view)" class="empty">등록된 상품이 없습니다.</li>	</ul></div>
[디자인팜 2.0] 맞춤게시판 항목추가

맞춤 게시판에서 항목을 추가했을때 실제 페이지에서는 추가한 항목값이 안보이는 경우가 있습니다.

이 경우 해당 항목의 변수값을 확인하여 소스에 추가해주셔야되는데요~

아주 간단하게 수정이 가능하답니다.

아래 메뉴얼 잘 읽고 따라해보세요~

 

맞춤 게시판 항목 설정

저는 디자인팜 2.0에서 [맞춤게시판 기본형]을 선택하여 페이지 추가를 했는데요,

※ 페이지 추가 방법은 http://wdev.good-web.co.kr/bbs/faq/6668 참고 하시기 바랍니다.

디자인팜 2.0 실행 > 메뉴관리 > 맞춤 게시판을 클릭하면 아래와 같이 입력 항목 설정 버튼이 확인됩니다.

  

 

입력항목 설정을 클릭하시면 기본항목값을 확인 할 수 있습니다. 여기에 신청일이라는 항목을 추가해보도록 하겠습니다.

※항목 수정 및 삭제도 아래 페이지에서 가능합니다

 

 

 

저장 후 적용 페이지를 확인해보시면, 리스트 화면에 새로 추가했던 [신청일] 이 노출이 안되고있네요.

 

 

수정을 하는 방법은 먼저 해당 항목에 대한 변수값을 찾아야합니다.

맞춤게시판의 기본 환경 설정 클릭

 

 

하단의 SMS,e-Mail 설정을 체크하시면 다음과 같은 변수값을 확인 할 수 있습니다.

 

 

새로이 추가했던 신청일 의 변수값은 항목명이 {$s_v5_name} 입력값이 {$s_v5_value} 로 확인되네요.

이 변수값을 맞춤게시판의 리스트 디자인에 추가를 해주셔야합니다.

소스 수정 페이지로 접근하는 방법은

디자인팜2.0 실행 > 메뉴관리 > 맞춤게시판 클릭하시고 소스 수정을 클릭합니다.

 

 

아래의 리스트 화면의 소스를 살펴봅니다.

이미지의 빨간 박스 부분을 보시면 항목의 변수값이 {$s_v4_name} 인 소속까지만 작성되어 있는 것을 확인 할 수 있습니다. 

 

  

 

신청일의 항목명 변수값인  {$s_v5_name} 을  추가해 줍니다.

 

 

목록에 항목명이 노출 되도록 수정했으니 그에 따른 입력값도 노출이 될 수 있도록 소스를 추가 해줘야합니다.

추가 후 디자인소스 저장을 클릭합니다.

 

 

완성된 페이지입니다.

 

 

 

 

 

[디자인팜 2.0] 스킨 & 블록 가로 크기 변경하기

디자인팜 2.0에서 제공하는 대부분의 스킨들은 가로 크기가 1000px 을 기준으로 작업되어 있습니다.

 

일반 모니터에서는 1000px 의 크기로도 이쁘게 출력이 되지만,

최근에 많이 보급된 와이드 모니터로 사이트를 확인할 경우 가로 크기가 조금 작다고 느낄 수 있습니다.

 

그렇다면, 와이드 모니터에 맞게 스킨의 가로크기를 1200px 로 변경하려면 어떻게 해야 할까요?

 

스킨 관리에서 소스 수정 모드로 전환해서 작업할 수도 있지만,

새로 추가된 PC 스킨 가로 크기 변수를 사용하면 쉽게 변경이 가능합니다.

 

 

[PC 스킨 가로 크기 변경]

 

1) 디자인팜 2.0을 실행을 한뒤 상단에 보면 스킨관리라는 버튼이 있습니다.

   이 버튼을 클릭을 해서 스킨을 변경할 수 있습니다.

 

 

2) 현재 적용된 스킨의 하단에 스킨옵션설정을 클릭을 해서 스킨의 옵션을 변경할 수 있습니다.

 

 

3) 스킨 옵션 설정 창에서 0-PC 스킨 가로 크기의 내용에 1200 을 입력합니다.

 

 

4) 하단의 적용 버튼을 누른 후 사이트를 확인합니다.

 

# 스킨 가로 크기 - 1000

 

# 스킨 가로 크기 - 1200

 

 

5) 위와 같이 상단의 스킨 영역의 가로 크기가 늘어난 것을 확인할 수 있습니다.

 

 

스킨의 가로 크기를 변경했다면, 블록도 스킨처럼 크기를 변경하시는게 보기에 좋겠죠?

 

 

[PC 블록 가로 크기 변경]

 

1,2) 스킨의 가로 크기를 변경했을 때와 동일하게 스킨 옵션 설정 창으로 들어갑니다.

 

 

3) 스킨 옵션 설정 창에서 0-PC 블록 가로 크기의 내용에 1200 을 입력합니다.

 

 

4) 하단의 적용 버튼을 누른 후 사이트를 확인합니다.

 

# 블록 가로 크기 - 1200

 

5) 위와 같이 블록의 크기가 늘어난 것을 확인할 수 있습니다.

 

 

※ 블록의 크기는 사이트의 모든 블록에 적용됩니다.

※ 일부 콘텐츠의 경우 1000px 에 맞추어서 디자인 되어 있어서 소스 수정이 필요할 수 있습니다.

 

[디자인팜 1.0] [초보자용] 컨텐츠? 레이아웃? 템플릿팜? 용어를 정확하게 알아 봅시다

컨텐츠란?!

디자인팜에서 컨텐츠란?  로고, 이미지, 타이틀, 메뉴판,  지도, 각종 설명글과 같이 최소단위의  디자인 요소를 말합니다.

즉 디자인팜에서 왼쪽 트리구조에서 레이아웃을 뺀 나머지 모두가 컨텐츠라고 보면 됩니다.

디자인팜에서 제공되는 모든 컨텐츠는 반응형이 지원되고 있으니 참고하세요.

 

 

 

 

 

 

- 텍스트

텍스트에는 기본적이 글자를 출력하는 컨텐츠를 모아 두었습니다.

타이틀과 회사 소개 같은 장문의 글을 쓸 수 있는 편집기 등이 있습니다.

 


 

 

 

- 이미지

이미지에는 기본적인 한장 짜리 이미지와 리스트 형의 이미지 등등 여러 가지 디자인의 이미지가 있고,

이것을 로고나, 배너, 협력업체링크, SNS공유하기 등등으로 활용할 수 있습니다.

 

 

 

 

- 그 밖의 컨텐츠...

그 외에 지도/ 버튼 / 테이블 과 같은 컨텐츠가 있으며, 컨텐츠는 개발 후 계속해서 등록이 될 예정이니

원하는 컨텐츠가 없다고 너무 아쉬워 하지 마세요~~!!

 

 

 

 

 

확인 가능한 페이지 : http://farmmanual2.good-web.co.kr/shop_add_page/index.htm?page_code=manual102&mobile_conn=off

 

 

 

 


 

 

 

 

레이아웃이란?!

컨텐츠만 가지고 웹페이지를 만들게 되면 세로로만 나열되기 때문에 사실상 컨텐츠만 가지고는 웹페이지를 완성 할 수 없습니다.

때로는 컨텐츠를 가로로 나열해야 할 때 있고, 바둑판 형식으로 나열해야 할 때가 있는데 이런 구조를 레이아웃이라고 합니다.

레이아웃은 눈으로 보여지는 요소가 아니라 컨텐츠의 위치를 잡는 틀이라고 보셔도 될 것 같습니다.

 

아래 예제를 통해 레이아웃의 역할과 활용 방법에 대해서 알아보겠습니다.

디자인팜 좌측 메뉴에서 [반응형 레이아웃]에서 제공되는 레이아웃을 모두 넣어보겠습니다.

레이아웃은 1칸 / 2칸 / 3칸 / 4칸 / 5칸 / 6칸이 있으며, 이것은 오른쪽 세부옵션에서 각자 비율을 조정할수 있습니다.

 

 

 

 

 

 

레이아웃은 반응형을 체크 하시면 반응형이 되는데요,

이것은 잘 보일수 있게 타이틀만을 넣어서 테스트 해볼게요.

 

 

 

확인가능한 페이지 : http://farmmanual2.good-web.co.kr/shop_add_page/index.htm?page_code=manual101&mobile_conn=off

 

 

 

 

 


 

 

 

그럼 레이아웃안에 컨텐츠는 어떻게 넣나요?

[레이아웃]은 [컨텐츠]를 담을수 있습니다. 먼저 "2칸 레이아웃"을 생성하여, 원하는 컨텐츠를 넣어 보겠습니다.

 

 

 

1. [반응형레이아웃] > [2칸 레이아웃]을 생성합니다.

 

 

 

 

 

2. [상단컨텐츠] > [로고+토글A]를 생성합니다.

 

 

 

 

 

 

3. 레이아웃에 로고가 자동으로 들어가진 않습니다. [레이아웃]안에 [컨텐츠]를 넣어 보도록하겠습니다.

 

 

 

 

 

 

 

4. 로고밑에 컨텐츠를 계속 추가 할 수도 있습니다.

 

 

 

 

<<응용편>>

2칸 레이아웃으로 이렇게도 가능합니다.

 

주의 ) 레이아웃 안에는 컨텐츠만 추가 할수 있으며, 레이아웃안에 레이아웃이 들어갈수 없도록 되어 있습니다.

디자인팜에서 기본 제공되는 레이아웃으로 고객이 원하는데로 만들수 없다면, 맞춤형 레이아웃을 통해 직접 만들수도 있습니다.

맞춤형 레이아웃 만드는 방법 (고급사용자용) :  http://wdev.good-web.co.kr/bbs/faq/4387

 

 

 

 


 

 

 

 

템플릿팜이란?!

디자인팜이 아무리 제작하기 편리한 툴이라 하더라도,  다양한 컨텐츠와 레이아웃이 복합적으로 어울러져 있는 컨텐츠인 경우, 시간이 다소 걸리 수 밖에 없습니다.

이건 시간을 최소화하기 위해 템플릿팜이란는 기능이 있습니다.

템플릿팜은 간단하게 설명하자면 [여러개의 컨텐츠+여러개의 레이아웃] 이 하나로 묶여 있다고 보시면 됩니다.

 

이것은 "로그인박스"가 될 수도 있고, 구현이 어려운 "탭 메뉴"가 될수도 있으며, 상단디자인도, 하단 디자인도 될 수 있습니다.

디자인팜 모드에서 왼쪽메뉴 제일 상단에 [템플릿팜]을 클릭해 봅시다.

 

 

 

템플릿팜 선택하기로 원하시는 부분을 [가져오기]를 해봅니다.

 

 

 

이렇게 내가 선택한 상단 부분만 가져와지는데요,

이부분은 레이아웃 하나에 특정된게 아니라, 그 위아래 상단으로 구성된 레이아웃 전부를 가져오는 것입니다.

 

 

 

 

 

 

 

 

[디자인팜 1.0] [초보자용] 디자이팜 계정만들기 및 화면설명

디자인팜은 모든 계정에서 다 사용가능하지만, 이미 개설된 사이트에서 디자인팜을 실행하게 되면 혼란이 야기 될수 있으므로, 되도록이면, 새로운 계정을 받아서 만들어 보시기 바랍니다.

 

1. 계정 생성방법은 아래 주소 참고 바랍니다.

http://wdev.good-web.co.kr/page/basic_st1

 

 

2. 디자인 팜을 실행 합니다.

 

 

우선 설명하기 앞서 용어에 대해서 알아보고 넘어가겠습니다.

① 메뉴 관리 : 게시판 추가, 일반 페이지 추가, 맞춤 전송폼등을 다양한 페이지를 생성할수 있습니다. 또한 생성된 페이지의 메뉴 위치를 변경 할수 있습니다. 변경 방법은 해당 메뉴를 클릭하고 드래그만으로 쉽게 변경 할수 있습니다.

② 테마 관리 : [메인스킨 + 서브스킨 + 메인 화면]을 묶어 놨다고 보시면 됩니다.

③ 기타 페이지 관리 : 네비게이션에 등록되지는 않았지만 사용되는 페이지라고 보시면 됩니다. 예를 들어 로그인 페이지, 회원가입완료 페이지등 이 해당됩니다. 고급관리자모드에서는 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]의 페이지와 동일 합니다.

④ 템플릿팜 : 여러개의 컨텐츠가 하나로 묶여 있다고 보면 됩니다. 예를들어 [테스트1개+이미지1개] 이렇게 묶여 있는 패키지 디자인이라고 보면 됩니다.

⑤ 컨텐츠 : 최소단위의 디자인 요소 입니다. 예를들어 테스트1개, 테이블1개, 가로 선긋기 등 아주 최소한의 다지인이며 이컨텐츠마다 다양한 수정 옵션등이 있습니다.

 

⑧사이즈 조절 : 디자인팜은 반응형웹을 지원하고 있으며, 원하는 사이즈를 선택해서 출력되는 결과물을  바로 확인 할수 있습니다.

⑨ 새로고침 : 대부분 자동으로 새로 고침 되지만 일부 외부 CSS 수정 하는경우 자동으로 반영되지 않을수 있습니다.  외부 다른 파일 수정시 클릭해주세요.

⑩ 미리보기 : 실제 홈페이지에서 수정된 결과물을 확인 합니다.

⑪ 홈페이지 적용 : 디자인팜을 수정 즉시 홈페이지에 반영되는게 아니라, 반드시 [홈페이지 적용] 버튼을 클릭해야만 실제 반영되도록 되어 있습니다.

 

위 용어는 아래 매뉴얼을 이해하는데 중요하므로  반드시 숙지하시기 바랍니다.

 

[디자인팜 1.0] [초보자용] 테마 구조 설명안내

스킨이란?! 

 

홈페이지 제작시  회사소개, 제품소개, 마이페이지등 어떤 페이지를 가더라도 윗부분(로고 및 네비게이션등...)과 아랫부분(카페라이트 및 사이트정보등...)은 대부분 디자인이 동일 합니다.

이렇게 반복되는 디자인을 각 페이지별로 매번 같은 작업을하는것이 아니라  별도 디자인 파일을 만들어서 각 페이지 마다 자동으로  로고 및 네비게이션, 카피라이트등을 불러오게 되어 있습니다.

이런 디자인 파일을 스킨 이라고 합니다.

스킨파일을 만들게 되면, 홈페이지 제작시 좀더 빠르게 제작 할 수 있고, 리뉴얼시 스킨만 수정하면 모든 페이지가 수정되기 때문에 업무 효율성 및 작업 속도면에서 많은 이점 있습니다.

 

아래 홈페이지 메인화면에서 상단(로고 및 네비게이션) 부분과, 하단(홈페이지 정보 및 카피라이트)는  모든 페이지가 동일하다는것을 알수 있습니다.

이렇게 반복되는 부분이 스킨이라고 보시면 됩니다.

샘플 홈페이지 : http://urfhome02.good-web.co.kr

 

 

 

 


 

 

 

[스킨]활용하여 홈페이지를 쉽게 리뉴얼 하는 방법

위 설명한대로 반복되는 디자인을 스킨으로 따로 저장했다면, 스킨을 수정시 모든페이지가 자동으로 수정 됩니다.

만약 스킨을 계절별로 3개의 스킨을 만들었다면 아래 샘플사이트처럼 각 계절 별로 다른 디자인으로 쉽게 변경 할수 있습니다.

 

이렇게 스킨만 변경해주면, 안에 본문 내용과는 별개로 홈페이지 전체 디자인이 변경됩니다.

 

 
 
 

 

 

 

그럼 테마란 무엇인가요?

보통 홈페이지를 만들게 되면 메인용 스킨1장, 서브용스킨 1장  이렇게 2장의 스킨을 사용하는경우가 많습니다.

만약 메인 스킨 디자인을 빨간색에서 파란색 계통으로 색상 변경했다면 당연히 서브 스킨도  수정해줘야 할것 입니다.

스킨을 수정하고 나면 메인 화면 본문 부분도 언발란스하지 않게 수정해야줘야 합니다.

이렇게 스킨 하나를 수정하게 되면 셋팅로 수정해줘야 하는 부분이 (메인스킨+서브스킨+메인화면) 이렇게 3가지가 보통 인데, 이를 테마라고 합니다.

 

디자인팜에서 테마생성시 아래와 같이  (메인스킨+서브스킨+메인화면)이 하나의 셋트로 묶여서 생성되고 관리 할 수 있도록 되어 있습니다.

 

만약 봄,여름,가을,겨울 테마등 여러개의 테마를 만들어 놓게 되면, 한번의 클릭으로 (메인스킨+서브스킨+메인화면)이 한번에 변경되기 때문에 아주쉽게 관리 할수 있습니다.

 
 
 
 

 

 

 

이젠, 스킨과 메인은 테마로 일괄생성 및 변경합니다!

 

디자인팜은 기존의 스킨 따로 만들고 메인 따로 만들어서 생성하는 방식과 다르게,

처음에 [테마]로 생성을 하면 안에 메인스킨+서브스킨+메인화면이 3개가 하나로 세트가 되서 생성이 됩니다.

 

그래서 기존처럼 메인만 따로 복사 한다 던지, 서브스킨을 여러 개를 생성하여,

각 페이지마다 스킨을 선택하는 방식이 아니라, 메인스킨+서브스킨+메인화면 함께 일괄변경이 되기 때문에 꼭 알고 넘어가야 합니다.

 

 

 

- [테마추가]로 생성시 > 기존의 관리자모드에서 확인이 가능합니다!

[태마추가]를 하시면, 하나의 이름으로 세 개의 디자인이 묶여있는 게 보이시는데요.

기존의 관리자모드 에서 추가가 된다는 점! 알고 계세요.

 

 

- 디자인팜에서 테마 추가시 아래와 같이 고급관리자모드에서 페이지가 생성 됩니다.

  [디자인관리 > 고급 디자인 관리 > 스킨 관리]에  메인스킨+서브스킨이 새롭게 2개가 추가가 됩니다.

 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인] 에서 디자인팜용 메인화면 1장이 생성 됩니다.

 

 

테마를 여러개 생성하시면, 아래와 같이 여러 메인이 생깁니다.

그래서 디자인팜에서 테마를 선택하면, 내가 선택한 A테마의 A메인으로 자동변경이 되는거죠. 

이점 만약 이해가 안된다면, 테마를 여러개를 추가해 보시면서 테스트를 해보시는게 도움이 될 겁니다.

 

이상 스킨 및 테마에 대한 개요에 대해 설명 드렸습니다.