메뉴관리에서 메뉴가 만들어졌다면 이젠 그 메뉴 속성에 맞는 연결대상(모듈또는 링크)를 만들어 보자.
먼저 게시판이나 페이지를 만들고 레이아웃을 나중에 만들어도 되나 본 강좌에서는 레이아웃을 먼저 만들고 게시판이나 페이지를 만들어서 연결하는 방법으로 진행하겠다.
우선 레이아웃이란 무엇인가?
우리가 흔히 말하는 홈페이지 스타일이라고 생각하면된다.
좀더 직관적으로 홈페이지 스킨이라고 이해해도 큰 무리는 없을듯 하다.
포토샵이나 기타 그래픽 편집툴로 만들어진 이미지스킨을 말하는는것이 아니라 , 그러한 이미지 스킨을 잘라서 코딩을 해 놓은 상태라고 생각하면 된다.
사용자는 자신이 원하는 레이아웃을 선택한뒤 원하는 위치에 원하는 메뉴와 컨텐츠를 추가 하면 되는것이다.
- 레이아웃 생성
관리자페이지에 접근하여 좌측의 레이아웃(1번)을 클릭한뒤 생성 (2번)을 클릭해서 레이아웃을 만들게 된다.
- 레이아웃 이름을 지정하자.
- 레이아웃이름은 직관적인것이 좋다.
- 설명을 위해 메인페이지에서 사용 될 메인레이아웃과, 서브메뉴에서 사용될 서브레이아웃 두가지를 만들도록 하겠다.
⑴ 레이아웃 이름 : 현재 자신의 계정에 있는 레이아웃 유형들을 확인 할 수 있다.
zbXE공식사이트 레이아웃(xe_official)을 선택한다.(다른 유형을 선택해도 상관없다.
향후 다른 사람이 만든 레이아웃템플릿 스킨을 추가로 업로드 해서 사용할수도 있다.
⑵ 제목 : 지금 만들고자 하는 레이아웃이 어디에 사용될 것인지를 생각하여 이름을 직관적으로 짓는다.
site3 이라는 메뉴에 메인페이지에 사용할 레이아웃을 만들려하 하기 때문에
site3_main 이라고 난 이름을 짓도록 하겠다.
- 1번 : 레이아웃에 대한 기본적인 설명을 확인 할 수 있다.
만약 직접 레이아웃을 제작하게 되면 제작자 이름과 설명 부분에 자신이 원하는 내용을 입력할 수 있다.
(레이아웃 스킨제작하기는 별도의 매뉴얼 참고 바람)
- 2번 : 현재 레이아웃의 이름을 지정하는 곳이다. 위에서 만들기 과정에서 난 site3_main 이란 이름으로 만들었다.
- 3번 : 컬러셋 설정이다.
아래 이미지는 컬러셋을 다르게 했을때 확인 할 수 있는 결과치를 미리 만들어 놓은것을 캡쳐해서 보여준다.
[기본 컬러셋 선택시]
[white 컬러셋 선택시]
두개의 이미지로 컬러셋의 개념이 이해 되었으리라 생각이 된다.
이 컬러셋 부분을 이용하면 좀더 다양한 형태의 홈페이지 제작이 가능하다.
상상력을 한번 발휘 해 보자.^^
- 4번 : 로고이미지는 업로드 해서 관리 할 수 있다. 플래시 이미지는 업로드 불가능하다.
- 5번 : 홈페이지 URL을 레이아웃에서 지정해 줄 수 있는데 해당 레이아웃의 로고를 클릭하면 이곳에 입력한 URL로 이동하게 된다. - 6번 : 주메뉴(main_menu)선택 부분이다. (하단메뉴도 동일)
아래 그림에서 확인 할 수 있듯이 메인메뉴 셀렉트박스를 클릭하면 3개의 메뉴가 나온다.
이 3개의 주메뉴(main_menu) 메뉴관리에서 만들어준 메뉴가 나오는 것이다. (현재난 3개를 만든 상태)
여기에서 현재 강좌 진행을 위해 사용할 site3를 선택하겠다.
*** 필수check !!! 아래 주메뉴(main_menu)는 선택을 잘 해주어야 한다.
현재 진행상황으로 볼때 site3 주메뉴를 선택해 주어야만, 우리가 메뉴관리에서 만들었던 메뉴들이 홈페이지 스킨 상단메뉴로 출력이 되는 것이다.
- 7번 : 레이아웃 일괄 적용은 만약 site3 주메뉴를 선택하고 레아웃 일괄적용을 체크한다음 저장을 하게되면
site3에서 만들어진 메뉴들의 모든 레이웃설정값이 현재 만들고 있는 레이아웃으로 변경된다.
레이아웃 일괄 적용은 신중하게 생각하고 적용하길 바란다.
- 내용을 입력하고 나서 저장 버튼을 누르면 "수정되었습니다"는 문구가 뜨고 자신이 입력한 값들이 화면에 설정되어 보여지게 될 것이다.
아래쪽에 있는 목록 버튼을 클릭하면 아래 이미지와 같이 레이아웃이 만들어진것을 확인 할 수 있을 것이다.
- 1번 : 레이아웃 유형(xe_official)과 레이아웃 제목(site3_main) 등록일을 확인 할 수 있다.
- 2번 : 만들어진 레이아웃 설정을 변경하고자 할때 클릭하면 다시 수정화면으로 이동한다.
- 3번 : 레이아웃 편집은 현재 제공되고 있는 레이아웃 템플릿 스킨 자체를 수정하고자 할때 사용하는 메뉴이다.
소스를 직접 편집 할 수 있기 때문에 간단한 수정은 웹페이지에서 직접 처리 할 수 있다.
현재 xe_official 레이아웃 템플릿 스킨의 수정시 불려지는 소스는
서버경로상에서 /zbxe/layouts/xe_official/layout.html 파일이다. // 중요함 check !!!
위 이미지는 레이아웃편집 을 클릭했을때 볼 수 있는 화면으로
아래쪽에 저장, 미리보기, 초기화 3개의 버튼이 있다.
*** 필수체크 !!!
여기서 중요한것이, 레이아웃편집모드에서 편집을 하고 저장버튼을 누르는 순간
해당 레이아웃은
/zbxe/layouts/xe_official/layout.html 이 파일을 참조하다가 /zbxe/files/cache/layout/숫자.html 파일 형태로 참조 경로가 달라지게 된다.
즉, 저장 버튼을 누른다음에 /zbxe/layouts/xe_official/layout.html 파일을 수정해도 수정된 값이 적용이 되지 않는다. 위 이미지에서 2번째 "초기화" 버튼이 있다.
이 초기화 버튼을 누르게 되면
/zbxe/files/cache/layout/숫자.html 이 파일을 참조하던 값이 다시
/zbxe/layouts/xe_official/layout.html 이 파일을 참조하게 된다.
즉, /zbxe/layouts/xe_official/layout.html 이 파일은 원본파일이라고 생각하면 된다.
(개인적으로는 온라인에서의 레이아웃 편집 사용에 불편함이 많아 편집기로 /zbxe/layouts/xe_official/layout.html 파일을 직접 수정해서 사용하고
온라인 레이아웃 편집모드의 저장기능은 사용하지 않는다.
저장하는 순간에 cache 폴더에 파일이 생성되고 수정하련 그쪽파일을 뒤져서 찾아야 하기때문에 ...
향후 약간의 번거러움이 해결이 된다면 그땐 이용해 볼 수 도 있겠다.)
매뉴얼인 만큼 설명은 레이아웃편집모드에서 저장버튼을 눌러서 처리하는 방법을 설명하도록 하겠다.
현재 메인레이아웃을 하나 만들었는데
동일한 방법으로 서브레이아웃도 하나더 만들면 되겠다.
메인레이아웃 이름을 site3_main 이라고 했으니 서브레이아웃 이름은 site3_sub 이렇게 만들면 되겠군.
이젠 만들어진 레이아웃에 게시판이나 페이지들을 한번 연결해 볼까나..^^