매뉴얼 각 아이템들의 상세한 매뉴얼입니다
- Classic Style
- Zine Style
- Gallery Style
- Community Style
- Studio Style
- Blog Style
PXE Official Layout은 Premiumxe의 공식 레이아웃 입니다. 이 레이아웃은 이용자 설정을 통해 사이트의
구조를 대단히 다양하게 구성할수 있습니다. 기존의 PXE Sky나 PXE Leaflet Pro의 기능들이 일부 흡수되었으며 이
레이아웃 고유의 강화된 기능들도 만나볼수 있습니다. 아래의 특징은 기존의 레이아웃들이 흡수 된 부분입니다. 먼저 기본 기능을 살펴보고 그 아래 새로 추가된 기능들도 함께 참고해 보세요.
- 넓은 리플릿 영역과 좁은 리플릿 영역을 설정하는 리플릿 스타일링 기능이 있습니다
- 리플릿 영역을 왼쪽이나 오른쪽에 위치시킬 수 있고, 혹은 사용하지 않음으로 설정할수도 있습니다
- 좁은 리플릿 영역을 설정하는 경우 4단계 세로메뉴인 위치표시기를 출력할수 있습니다
- 리플릿 영역은 배너를 적용하여 링크시킬수도 있습니다
- 본문부 다단 가변설정을 통해 포탈, 블로그, 일반 사이트등에서 사용하는 모든 단 구성을 관리자 화면에서 설정할 수 있습니다
- 사이트를 구성하는 모든 요소들의 너비(사이트 전체, 헤더, 사이드바, 푸터 너비 등)을 손쉽게 변경할 수 있습니다
- 1단계 메인메뉴를 상단에 표시할 수 있습니다
- 2차 하위메뉴를 메인 메뉴 하단에 표시할 수 있습니다
- 아주 예쁘고 깔끔한 3차 세로메뉴를 사이드바에 표시할 수 있습니다. 이 메뉴는 사이드바의 폭에 따라 너비가 자동으로 조정됩니다
- 4차 풀다운 메뉴를 메인메뉴와 연결하여 마우스 오버 형식으로 표시할 수 있습니다
- 2가지의 컨텐츠단 구성형식을 선택할 수 있습니다. 배경 마진이 있는 형태와 없는 형태입니다.
- 하단 좌측에 하단메뉴와 상호등을 넣을 수 있으며 우측에도 엑스트라 메뉴가 존재합니다
- 모든 메뉴는 이미지 메뉴를 사용해도 위치나 정렬이 흐트러지지 않도록 CSS로 포지셔닝 되어있습니다
- PXE Board Pro 2의 말끔한 서체 기능과 함께 사용하면 사이트 전체 메뉴 및 항목을 모두 이미지화 할 수도 있습니다
- 위에 기재된 모든 기능은 별도의 파일 수정없이 모두 관리자 페이지에서 마우스 클릭만으로 설정할수 있습니다
- 포토샵 레이아웃 소스와 함께 메뉴등과 같은 소스 파일들이 포함되어 있습니다
아래 내용은 위의 기존 기능들에 추가된 PXE Official Layout만의 기능입니다.
- 기존에 단 6개 단 구조에서 12개 단 구조로 확장되었습니다. 플랫 형식을 사용하게 되면 네이버 메일 화면과 같이 컨텐츠와 사이드바의 마진이 사라지고 전체화면에서도 잘 어울리는 플랫한 느낌으로 구성할수 있습니다.
- 오른쪽 사이드바에서는 별도의 메뉴 설정을 통해 사이드바를 강조할수 있는 영역을 표현할수 있습니다.
- 스카이 블루, 코코아 블랙에 이어 PXE Official Layout 고유의 메인 컬러셋인 Cyan(샤이안)이 추가되었습니다.
- 모든 컬러셋은 12개의 단 구조를 모두 사용할수 있도록 재코딩 되었습니다.
- 검색 박스의 너비를 지정할수 있습니다.
1. 압축을 풀어 나온 PXE_official_layout 폴더를 귀하의 layouts 폴더에 넣은 후 서버에 업로드 해주세요.
2. 관리자로 접속하여 사이트 설정 > 레이아웃에서 생성 버튼을 눌러 PXE 공식 레이아웃을 선택 한 후 레이아웃으로 등록합니다.
3. 게시판등의 모듈에서 PXE 공식 레이아웃을 연결합니다
1. 컬러셋
PXE 공식 레이아웃은 총 3개의 컬러셋이 있습니다. 기본으로 제공되는 3가지 컬러셋은 안정적인 업그레이드를 위해 파일을 수정하지 말고 유지시키면서, 사용자 지정 컬러셋을 선택하여 커스터마이징 하는 것이 효과적입니다. 이 방법에 대해서는 고급 설정에서 다시 설명합니다.
- 스카이 블루 (PXE Leaflet Pro와 동일)
- 코코아 블랙 (PXE Leaflet Pro와 동일)
- 샤이안 (Cyan)
- 사용자 지정 (샤이안과 동일)
2. 리플릿 스타일 선택
리플릿은 NHN Deview 공식 사이트와 같이 왼편에 본문과는 독립된 영역입니다. PXE 공식 레이아웃에서는 이 리플릿의 스타일을 선택할수 있습니다.
- 리플릿 출력 안함 : 리플릿을 출력시키지 않습니다
- 넓은 리플릿(436px) : NHN Deview 공식 사이트의 첫 페이지와 같이 폭이 넓은 리플릿을 출력시킵니다
- 일반 리플릿(279px) : NHN Deview 공식 사이트의 서브 페이지와 같이 폭이 좁은 리플릿을 출력시킵니다
3. 리플릿 위치 선택
리플릿을 어느쪽에 위치시킬지 결정할수 있습니다.
- 위치시키지 않음 : 리플릿을 출력시키지 않을 경우 여기서도 위치시키지 않음으로 설정합니다
- 리플릿을 왼쪽에 위치 : NHN Deview 공식 사이트와 같이 리플릿이 화면의 왼편에 위치합니다
- 리플릿을 오른쪽에 위치 : 이 샘플 화면과 같이 리플릿을 화면의 오른편에 위치시킵니다.
4. 본문부 레이아웃 구성 선택
사이트의 본문부를 몇 단으로 구성 할 것인지 설정 할 수 있습니다. 6개식 2셋트, 총 12가지 구조를 설정할수 있습니다. 일반 형식과 플랫 형식으로 나뉘어져있는데, 일반 형식은 본문부와 사이드바 부분이 어느정도 마진(여백)을 두고 있으며 플랫 형식의 경우는 마진이 없이 실선으로 구역이 나뉘어져 있습니다. 쉽게말해 플랫 형식은 네이버 메일에 로그인 했을시의 화면과 같으며 전체화면을 사용합니다.
5. 메인메뉴 선택
- 일반 1단 형식 : 일반적으로 메뉴바에 생성되는 메인 메뉴입니다
- 일반 2단 형식 : 2차 서브 메뉴를 메뉴바 하단에 출력시켜줍니다. 본문부 레이아웃 구성을 플랫 형식으로 지정한 경우에는 디자인과 매치되지 않으니 사용하지 않는것이 좋습니다
- 4단 풀다운 형식 : 메인 메뉴에 마우스를 올리면 서브 메뉴가 풀다운되어 나타나는 형식입니다
6. 우측 단일메뉴 선택
우측 단일메뉴란, 레이아웃 구성 선택에서 3단 형식의 스타일을 지정하여 사이드바 2가 출력될때 해당 사이드바를 좀 더 강조시키는 역할을 합니다. 웹 표준화 가이드 사이트인 NULI 사이트에서와 같이 메뉴바의 우측에 초록색으로 Blog라고 적힌 부분과 같은 역할을 합니다.
7. 서브메뉴(세로) 출력
1단 형식이 아닌 경우 사이드바 1의 위치에 2차 메뉴를 출력합니다. 이 서브메뉴는 반드시 관리자 설정의 메뉴에서 2차 메뉴들이 생성되어 있는 조건하에 출력됩니다.
8. 리플릿 위치표시기 출력 여부
리플릿을 사용하는 경우 리플릿 영역에 현재 위치한 페이지를 메뉴 형태로 보여줍니다. 넓은 리플릿을 사용했을 경우에만 위치표시기가 출력됩니다.
9. 사이트 너비, 위젯공간 1의 너비, 위젯공간 2의 너비
이 부분은 일단 아무런 수치도 기입하지 말고 빈 상태로 놔두시면 기본 셋팅된 수치로 적용이 됩니다. 일단 빈 상태로 놔두신 후 나중에 입맛에 맞게 수치를 넣어보세요.
P.S : 이후부터의 추가적인 설명이 필요한 것들은 팁 형식으로 유저포럼에 등록하겠습니다.
- 이 레이웃은 모바일 대응을 위하여 코드의 클래스명등이 함축적인 의미로 짧아져있기 때문에 핸드코딩을 하시는 분들은 다소 복잡할수 있습니다.
- 샘플 화면에 나타나는 사이드바의 요소들은 말그대로 샘플만을 위해 임의적으로 넣어놓은 것들이기 때문에 작동을 하지 않는것도 있습니다. 사이드바의 요소는 위젯을 사용하여 이용자가 스스로 꾸며야 합니다.
- 이 레이아웃은 IE6/7/8, 가장 최신의 FireFox, Opera, Safari에서 테스트 되었습니다.
- 현재까지 문제점이 없습니다
onion
