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

디자인팜 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의 메뉴에 대한 추가/수정은 디자인팜 2.0을 실행을 먼저 하셔야 됩니다. 

 

관리자 페이지 접속을 하셔서 디자인 관리를 클릭 후 디자인팜2.0실행 버튼을 클릭합니다.

 

디자인팜 2.0실행 버튼을 클릭을 하면 새로운 창이 하나 뜰건데요...

거기서 메뉴관리를 클릭합니다

 

 

메뉴관리를 클릭을 하면 아래와 같은 화면이 나옵니다 여기서 대메뉴 추가를 클릭을 해서 대메뉴를 추가를 하도록 하겠습니다.

아래의 이미지에서 대매뉴 추가 버튼을 클릭하시기 바랍니다.

 

대메뉴는 2가지 유형중 선택을 할 수 있는데요...

일반적인 대메뉴와 URL직접입력이 있습니다.

일반 대메뉴는 메뉴추가를 통해서 생성가능한 페이지를 만들때 사용을 하시면 됩니다. 

URL직접 입력은 외부URL을 참고하거나 메뉴추가를 통해서 생성이 불가능한 페이지 링크를 걸떄 사용을 합니다.

일반 대메뉴를 선택을 하면 대메뉴명만 기재가능하도록 됩니다.

 

URL 직접입력의 경우는 대메뉴명과 함께 URL을 입력하는 공간이 나옵니다.

 

 

일반 대메뉴를 생성을 하면 아래와 같이 나옵니다. 

 

 

여기서 대메뉴부분에 마우스를 가져다가면 아래과 같이 메뉴가 나옵니다.

대메뉴명옆에 톱니바퀴는 대메뉴설정을 변경하는 페이지로 이동이 되며,

<>표시는 대메뉴이동을 말합니다 여러개의 대메뉴가 있을때 순서를 조정하기 위한 버튼입니다.

아래부분에 페이지 추가는 대메뉴안에 하위메뉴를 추가를 하는 기능입니다.


 

 

URL 직접입력을 하게 되면 아래와 같이 나옵니다. 

대메뉴의 설정이나 위치이동은 가능하나 하위메뉴는 추가를 할 수가 없으니 참고하시기 바랍니다.

 

대메뉴 설정버튼을 눌렀을때는 아래와 같이 나옵니다. 

대메뉴의 유형은 등록할때만 가능합니다. 설정에서 수정을 한다고 하더라도 유형은 변경이 불가능합니다.

이점 유념하시기 바랍니다.

 

 

대메뉴추가시 pc웹 디자인 설정은 각 스킨마다 설정하는 내용이 달라 각 스킨을 참고하시기 바라며

우측에 썸네일 이미지에 마우스를 올리면 노출되는 위치가 표시가 되니 해당 썸네일을 참고하셔서 기재를 해주시면 됩니다. 

 

 

 

그럼 이제는 대메뉴안에 하위메뉴를 생성하는 방법에 대해서 말씀드리겠습니다.

대메뉴추가시 일반휴형으로 등록을 하셔야지만 하위메뉴 생성이 가능하며, URL 직접입력으로는 하위메뉴 생성이 되지 않습니다. 

이점 유념하시기 바랍니다. 

하위메뉴 출력할 대메뉴에 마우스를 올려서 페이지 추가버튼을 클릭을 하시기 바랍니다.

 

 

페이지 추가를 클릭했을때 나타나는 화면입니다.

상단에는 메뉴유형을 선택할 수 있습니다. 

일반메뉴는 디자인팜내에 존재하는 페이지를 추가를 할때 사용을 하며

URL직접 입력은 외부URL을 걸거나 디자인팜내에 존재하지 않는 페이지를 링크를 걸때 사용을 합니다. 

일반 메뉴의 경우는 빈페이지를 생성을 할 수도 있고 기본적으로 제공하는 페이지를 추가를 하는 방법이 있습니다. 

하단에 있는 탭을 클릭을 하면 여러 유형의 디자인을 확인을 할 수 있으며, 썸네일 이미지에 마우스를 가져다가면 

큰화면으로 내용을 확인을 하실 수 있습니다.

 

 

필자는 여기서 인사말, 오시는길, 연혁을 추가하고자 합니다. 

먼저 인사말부터인데요..메뉴유형은 일반메뉴 페이지명은 인사말 그리고 인사말탭에 가서 원하는 형태의 디자인을 선택을 하고 만들기를 클릭합니다.

 

 

이렇게 생성을 하면 아래와 같이 인사말이 추가가 됩니다. 

 

 

동일한 방법으로 연혁, 오시는길도 추가를 하면 아래와 같이 노출이 됩니다. 

 

 

위와 같은 방법으로 대메뉴 및 하위메뉴를 추가를 하면 아래와 같은 메뉴구성을 할 수 있습니다.

그럴듯 한 홈페이지 메뉴구성이 만들어졌는데요...천천히 따라하다보면 아래와 같은 구성으로 

금방 만드실 수가 있습니다.

 

감사합니다.