CMS매뉴얼 13.서브 왼쪽 디자인 코딩하기
2012-02-25 10:55:07

13. 서브 왼쪽 디자인 코딩하기

웹디모 기업에 기본적으로 세팅된“왼쪽 기본 세팅이미지”를“왼쪽에 사용할 디자인 및 솔루션”으로 변경해 보도록 하겠습니다.

왼쪽 기본 셋팅 이미지

EMB000005e01ad5 src

왼쪽에 사용할 디자인 및 솔루션

왼쪽 디자인 코딩 시 왼쪽디자인과 메인 중앙 디자인사이의 여백까지 왼쪽 디자인으로 합니다. 왼쪽 디자인에 여백을 포함할 경우 여백을 줄이거나 늘릴 때 왼쪽 디자인만 수정하면 되기 때문입니다.

아래의 왼쪽디자인 그림을 ? 이미지사용 ? 그룹디자인을 사용해서 코딩해 보도록 하겠습니다.

EMB000005e01ad6 src

tip) 위에서도 살펴본 것과 같이 왼쪽 디자인에 여백을 포함하는 이유는 여백을 줄이거나 늘릴 때의 편리함을 위해서입니다. 예를 들어 왼쪽 디자인에 여백을 넣고, 여백을 10px 늘릴 경우 왼쪽 디자인의 여백 부분만 10px 늘리면 됩니다. 그러나 왼쪽 디자인에 여백을 포함하지 않을 경우에는 서브 중앙 디자인, 세부화면 디자인 하위 전 페이지, 게시판 전체, 마이페이지 전체에 여백을 따로 설정해야합니다.

(1) 왼쪽 메뉴 코딩하기

[디자인 관리 》고급디자인 》메인 화면 디자인]에서 왼쪽 디자인을 선택합니다.

EMB000005e01ad7 src

? 새로운 디자인을 추가하기 위해서 나만의 디자인의 추가 버튼을 클릭합니다.

? 디자인 제목을 입력합니다. 필자는“1. 회사 소개”로 입력했습니다.

? 코딩된 html소스를 입력합니다. 드림위버에서 작업한 소스를 솔루션에 삽입할 경우 이미지 경로를 [디자인 관리 》고급디자인 》웹디자인 FTP]에 업로드 한 경로로 수정해야 합니다. 드림위버의 경우 Ctrl+F 단축키 이용하면 동일한 경로를 한꺼번에 변경할 수 있습니다.

? 코딩한 html 소스 중 그룹디자인을 사용하여하여 메뉴를 삽입하는 부분입니다. 필자는 코딩시 {GROUP_left1}이라는 그룹디자인을 미리 생성하여 html소스에 삽입했습니다. 생성된 그룹은 왼쪽 메뉴를 삽입하는 것으로 자세한 설명은 (2)왼쪽 메뉴 그룹만들기에서 하겠습니다.

? html소스 입력이 완료되면 저장 버튼을 클릭하면, 나만의 디자인에“1.회사소개”디자인이 추가됩니다.

? [디자인 관리》고급디자인》웹디자인 FTP]에 이미지를 업로드하면 아래 그림과 같이 나타납니다.

? 제품소개, 고객센터, 채용정보, 커뮤니티의 왼쪽 디자인도 동일한 방법으로 생성합니다.

(2) 왼쪽 메뉴 그룹만들기

EMB000005e01ad8 src

? [디자인 관리 》고급디자인 관리 》그룹디자인 관리]에서“프로그램 마법사 생성”버튼을 클릭합니다.

EMB000005e01ad9 src

EMB000005e01ada src

? 네비게이션 마법사를 클릭합니다.

? 웹디모기업은 2차 메뉴가 없으므로“왼쪽메뉴 1단계”를 선택합니다.

? 그룹명을 지정합니다. 필자는“left1”로 입력했습니다.

? 그룹디자인 제목을 입력합니다.

? 메뉴의 시작지점을 회사소개로 선택합니다. (회사소개에 포함되는 하위메뉴들이 표시됩니다.)

? 등록버튼을 클릭하면 아래와 같이 {GROUP_left1}이라는 새로운 그룹디자인이 생성됩니다.

EMB000005e01adb src

? 그룹디자인을 생성한 후 서브화면은 다음과 같이 나타납니다.

EMB000005e01adc src

(3) 왼쪽 메뉴 이미지로 출력하기

지금부터 웹디모 기업의 왼쪽메뉴를 이미지로 변경해 보도록 하겠습니다. 텍스트형태로 왼쪽메뉴를 표시할 경우에는 이 부분을 생략하시기 바랍니다.

EMB000005e01add src

? [디자인 관리 》디자인 마법사 설정 》네비게이션 마법사]에서 CEO인사말 우측의 메뉴 수정버튼을 클릭합니다.

EMB000005e01ade src

? 평상시 이미지의 찾아보기 버튼을 이용해 평상시 이미지를 적용합니다.

? 마우스를 올렸을 때의 이미지를 적용합니다.

? 수정 버튼을 클릭하여 적용합니다.

? 웹디모 기업의 회사소개, 제품소개, 고객센터, 채용정보, 커뮤니티도 위의 ?~?와 동일하게 작업합니다.

(4) 왼쪽 메뉴 적용하기

EMB000005e01adf src

? [디자인 관리 》디자인 마법사 설정 》네비게이션 마법사]에서 회사소개 우측의 디자인 수정버튼을 클릭합니다.

EMB000005e01ae0 src

? 왼쪽 디자인 선택에서“1. 회사소개”를 선택합니다.

? 적용버튼을 클릭하면 아래와 같이 적용됩니다.

EMB000005e01ae1 src

 

 

 

? 다른 메뉴도 위의 ?~?과 동일하게 작업합니다.