Installation

레이아웃의 인스톨 방법은 Xpress Engine의 레이아웃 설치 메뉴얼을 따라 주세요. 본 스킨만이 가지는 특별한 설정방법은 따로 없습니다. 본 메뉴얼에 기술되어 있는 내용들은 필수지식이 아닙니다. 이미 XE 기본 사용법을 알고 계신분들에게는 특별한 내용이 없지만, 조금 더 이해를 쉽게 하기 위한 팁 정도의 메뉴얼입니다. 부담없이 한번 쭉 읽어보시는 선에서 충분히 레이아웃을 활용 하실 수 있습니다.



위 그림과 같이 관리자 페이지의 레이아웃 관리화면에서 컬러셋을 통해 2단과 3단을 선택 할 수 있습니다. 2단의 경우는 우측 사이드가 없는 게시판 형식이며 3단은 우측 사이드바가 있는 블로그, 혹은 대문 페이지 형식입니다. PXE 사이트는 기본적으로 2단 구성으로 설정한 상태에서 운영되고 있습니다. 만일 2단과 3단 모두 필요하다면 관리자 페이지에서 레이아웃을 하나 더 생성하기만 하면 됩니다.

Setting

레이아웃을 등록한다고해서 처음부터 위의 화면이 나타나는 것은 아닙니다. 위 화면은 어느정도의 셋팅이 끝난 상태의 레이아웃 모습니다. 일단 간단하게 최소한 위의 화면과 같이 구성하는 방법에 대해 기재하겠습니다. 디자인에 맞는 더욱 세부적인 셋팅은 이 방법을 토대로 나름대로 만들어 보세요.

    0) 로고는 사용하는 사람마다 이미지 크기가 모두 제각각입니다. 위 레이아웃에서 샘플로 사용하고 있는 이미지 크기와 동일하게 만드신 후 레이아웃 관리자 페이지에서 설정하여도 좋고, 만일 이미지 크기가 틀리다면 default.css에서 약간의 위치 수정을 해주면 됩니다. #header #header_leftcol h1 { position:absolute; top:50px; left:40px; } 이 코드가 로고의 위치를 잡아주는 CSS 입니다. top과 left의 픽셀값을 조정해가면서 로고의 위치를 바로 잡아주세요.

    1) 위 예제화면에서 번호 1이 붙은 부분이 회원메뉴를 나타나게 해주는 "옵션메뉴"입니다. 이 부분은 별도의 수정 없이 바로 출력이 됩니다.

    2) 2번이 붙은 부분은 "최근 게시물 위젯"인데, XE에서 기본으로 제공하는 "전광판 형식 최신 게시물" 스킨을 사용하시면 위 예제와 동일한 효과를 볼 수 있습니다. 이 위젯은 모두 기본 설치되어 있으므로 레이아웃을 업로드하면 자동으로 출력 됩니다.

    3) 3번은 2차 메뉴입니다. 이 부분도 별도의 수정없이 메뉴에 하부메뉴가 구성되어 있다면 자동으로 출력 됩니다.

    4) 4번은 프로필 영역입니다. 레이아웃 설정에서 "프로필" 부분에 입력하는 텍스트가 뿌려질 위치 입니다. PXE 사이트에서는 이곳을 다른 용도로 사용하고 있습니다. 여러분의 의지에 따라 용도는 변경 될 수 있겠죠.

    5) 5번은 좌측 사이드바 영역이며 이곳에 각종 위젯들이 위치하게 됩니다. 배포판에는 이 부분에 샘플 위젯 코드가 삽입되어 있지 않고, 위젯이 들어가는 곳이다라고 알려주는 코멘트만이 있습니다.

    6) 6번은 모듈이 뿌려지는 컨텐츠 영역입니다. 예제화면과 비슷한 디자인의 게시판이 필요하시다면 WTA Official Board를 다운로드 받아 컬러셋을 White Glossary로 맞추면 됩니다.

Sidebar Tip

이 레이아웃의 샘플을 보면 좌측 사이드바와 우측 사이드바의 위젯 타이틀이 이미지로 되어있는 것을 볼 수 있습니다. 제가 스킨을 제작해보면서 느낀 점 중에 하나가, XE의 요소들이 너무나 잘 분리되어 있기 때문에 반대로 이것이 패키지화 하기 어렵다는 것이었습니다. 위젯 하나를 사용하려고 하더라도 그에 맞는 스킨을 일일이 만들거나 다운로드 받아야 한다는 것이지요. 그래서 이 레이아웃에는 제가 메뉴에 사용한 이미지를 포토샵 파일로 만들어서 함께 첨부해 놓았습니다. 첨부 된 포토샵 파일을 열어 텍스트만 여러분이 원하는 것으로 바꿔 이미지로 저장 한 후, 위젯 코드 삽입시 타이틀을 입력하지 말고 저장된 이미지 파일을 사용하면 되겠습니다.

CSS Editing

이 레이아웃의 CSS 구조는 기본적으로 default.css를 불러들여서 2단과 3단 구성에 모두 통용되는 공통의 CSS 요소들을 사용하고, 관리자 페이지의 단 선택에 따라 추가적으로 2단 구성용 CSS 파일(2col.css) 혹은 3단 구성용 CSS 파일(3col.css)를 적용 시킵니다. 2col.css와 3col.css를 열어보면 알 수 있듯이 이 파일들에는 각 단의 너비등에 대한 아주 기초적인 부분만 정의되어 있습니다. 따라서 각 단의 너비등을 수정하길 원한다면 default.css는 수정하지 말고 2col.css와 3col.css만 수정하면 됩니다.