저니 2010 레이아웃(2010 Jowrney Mobile Layout)

XE  레이아웃
버전 : 0.2.0
제작자 : Jowrney Kim (http://www.jowrney.com / jowrney@jowrney.com)
설치 경로 : ./layouts/2010_jowrney

로그인 위젯 스킨 설치경로 : ./widgets/login_info/skins/2010_jowrney_release
데모페이지 : http://www.jowrney.com/xe/SYDemo 

 

----- 로그  -------------------------------------------------------------------------

0.2.1 인코딩 문제 (by Jowrney)

0.2.2 서랍메뉴 아이콘 경로 문제 (by 솜리)

0.2.3 상단 탑 배경이미지 경로 문제. (by 솜리)

0.2.4 일부 IE8 에서 서랍메뉴 아이콘 클릭 안되는 문제 (by 제이빅)

0.2.5 레이아웃설정 로고텍스트 누락 부분 추가(by 에폭시)

         토종이닷 게시판 타이틀 관련이슈(by 토종이닷)

         글꼴CSS 수정, 외부css파일 삭제(by Jowrney)

 

----- 개요  ----------------------------------------------------------

 2010년 1월에 공개 되었던 저니 레이아웃을 업데이트 하였습니다.

그 동안 부족함에도 불구하고 많은 분들이 찾아주셔서 의견도 주시고 감사합니다.

Q&A게시판에서 불편했던 사항들을 취합해서 이번 업데이트에 적용하였습니다.

기존에 코드을 직접 수정해야 메뉴를 설정했던 부분을 관리자에서 관리할 수 있게 된 것이 가장 큰 점입니다.

간단히 업데이트에 대한 내용을 정리하자면 아래와 같습니다.

 

2010 Jowrney Layout v0.2.0 업데이트 사항

1. 숨김 메뉴로 사용하던 UI의 명칭을 서랍 메뉴로 명칭변경
2. 상단바 이미지 설정 가능
3. 레이아웃 생성시 이미지 사이즈 설정가능
4. 메뉴 아이콘 설정 관리자에서 설정가능
5. 초기 서랍 열기 닫기 설정 기능
6. 모바일 버전 추가 (하단 링크참조)

http://jowrney.com/xe/?mid=Downloads&category_srl=15316&package_srl=15336

7. 메인용 서브용을 구성할 수 있는 프래임설정 기능..

기타 자잘한 오류들 수정했습니다.

 

 

----- 사용에 앞서 꼭 읽어주세요. ----------------------------

 

1. 기존 0.1.0 버전 사용자는 쉬운설치로 설치하지 마시기 바랍니다.

레이아웃 폴더명이 같은 경우 다른 폴더명을 다르게 새로 생성해서 업로드 하십시오.

기존 설치경로는 설치 경로 : ./layouts/2010_jowrney_release 를

 ./layouts/2010_jowrney로 변경하였습니다.

 

2. 아이콘 저작권 알림

- 하단 좌측 구글 번역 서비스에 쓰인 나라별 국기 아이콘을 표시하실려면 좌측의 iconDrawer와 그 링크를 살려두셔야됩니다.

- 로그인 위젯에 사용된 아이콘 및 저니 게시판 스킨에 쓰인 아이콘을 이용하실려면...

  우측하단의 pinvoke와 그 링크를 살려두셔야됩니다.

- 저니&스테이시 홈페이지(http://www.jowrney.com/xe/ )의 서랍 아이콘은 공유대상이 아닙니다.

  저작권에 걸리지 않을 아이콘을 제작 또는 구하셔서 "레이아웃 설정 > 메뉴" 항목에서 설정하시기 바랍니다.

 

3. 테스트 상황

-  전에는 IE6까지 고려하였으나, 이번 버전에서는 예전만큼 완벽하게 지원이 되지 않습니다.

   특히 아이콘과 투명이미지 등을 편리하게 관리하기 위해서 배제하였습니다.

- 주로 Safari4+, Firefox3 +, Google Chrome5+, IE7.8 (윈도우)에서 테스트하였습니다.

- Google Chrome5(맥)에서는 한글이 간혹 깨지는 현상을 발견했습니다. (아직 원인파악중.)

 

4. 모바일 버전 지원

- XE CORE 1.4.3버전부터 모바일 레이아웃을 지원합니다.

  저니 레이아웃도 모바일 버전을 함께 배포합니다.

  자세한 내용에 대해서는 아래의 링크를 참조하시기 바랍니다.

http://jowrney.com/xe/?mid=Downloads&category_srl=15316&package_srl=15336

 

5. 패턴 이미지 제공

- 저니 레이아웃 v0.2.0부터 관리자에서 상단 바 이미지를 직접 업로드 할 수 있게 되었습니다.

  쉽게 분위기를 바꿀 수 있는 요소로 상단 바에 이용 가능한 이미지를 별도로 제공합니다. (컬러5종, 패턴 5종)

http://jowrney.com/xe/?mid=Downloads&category_srl=11634&package_srl=15298

 

 

----- 설치 --------------------------------------------------------------------

 

마음의 준비가 되셨다면 다운받으신 "2010_jowrney_0.2.0.zip"을 압축을 풉니다.

 

FTP에 접속하여 압축을 푼 "2010_jowrney"폴더를 다음의 장소에 업로드 합니다.

[XE루트] > layouts

 

1. XE제어판에 접속합니다.

2. "[제어판] > 사이트 설정 > 레이아웃" 항목에서 "레이아웃 목록"의 탭을 선택합니다.

3. [생성] 버튼을 클릭합니다.

4. 레이아웃 이름 항목에서 "2010 저니 레이아웃(2010_jowrney)" 항목을 선택하고, 제목은 "2010_Jowrney"(임의로 작성해도 무방) 으로 입력 후

[다음] 버튼을 클릭합니다.

5. 이제 레이아웃의 각종 설정을 하고 저장을 누르면 됩니다. (아래에서 좀 더 자세히 이야기하겠습니다.)

6. 메뉴와 게시판, 외부페이지등을 설정하여 홈페이지를 구성합니다.

 

 

----- 레이아웃 설정 ----------------------------------------------------------

 

1. 브라우저 최적화 알림

IE6, 오페라 사용자에게는 제대로 보여지지 않습니다. 이에 대한 사항을 첫 방문자에게 알려줍니다.

-사용안함

-사용함 

 

2. 언어선택표시

상단 언어선택 표시를 설정합니다. 저니 레이아웃은 한국어, 영어, 일본어에 맞춰져 있습니다.

- 표시함

- 표시안함

 

3. 컬러셋

화이트와 다크 두가지 색상입니다.

 

4. 로고 이미지

레이아웃의 상단에 표시될 로고이미지입니다.

width는 폭이 허락하는 범위, height 39px로 제작해주세요.

 

5. 로고 텍스트

레이아웃의 상단에 표시될 텍스트입니다.

 

6. 로고 링크

로고 이미지나 텍스트를 클릭시 이동하게 될 URL입니다.

 

7. 컨텐츠 폭 설정

컨텐츠 영역의 width값을 설정합니다. (숫자만 입력해주세요. 기본값 940px )

 

8. 상단 바 이미지

레이아웃의 상단 바에 이미지를 설정합니다. ( height 39px의 패턴 이미지를 사용해주세요.)

http://jowrney.com/xe/?mid=Downloads&package_srl=15298

 

9. 상단 바 가운데 이미지

레이아웃의 상단 바의 가운데 이미지를 설정합니다. 상단 바에 포인트를 줄 수 있습니다. (기본사이즈 컨텐츠width x 39 px)

http://jowrney.com/xe/?mid=Downloads&package_srl=15298

 

10. 프레임 설정

- 좌우분할(좌측메뉴표시) : 좌측에 메뉴를 둘 수 있게 만듭니다. 서브용

- 분할하지 않음 : 컨텐츠 폭을 모두 이용합니다. 메인용

 

11. 하단 저작권 표시설정

- 하단 저작권 표시를 설정합니다. Copyright(c) 이후에 쓰여질 글을 입력하면 됩니다.

 

12. 서랍메뉴 펼침 설정

- 닫힘(기본) : 첫 접속시 닫힘 상태이며 마지막 상태를 기억합니다.

- 열림 : 첫 접속시 열림 상태이며 마지막 상태를 기억합니다.

- 항상닫힘

- 항상열림

 

13. 서랍메뉴 설정

- 해당메뉴의 1Depth의 메뉴를 서랍에 표시합니다. 1Depth메뉴는 원하는 아이콘으로 설정하길 권장합니다.

(IE6버전을 고려하지 않으신다면 PNG파일을 사용하실걸 권장합니다. )

아이콘 설정에 관한 사항은 아래 "아이콘 가이드"에서 자세히 말하겠습니다. 

 

14. 하단메뉴

- 하단 메뉴를 설정합니다.

 

 

이하 레이아웃 사용방법에 대해서는 XE사이트의 메뉴얼을 참조해주시기 바랍니다.

XE메뉴얼 : http://xe.xpressengine.net/wiki

 

----- 아이콘 가이드  -------------------------------------------------------------

아이콘은 100 x 100 px 사이즈의 gif 또는 png파일로 제작해주시면 됩니다.

IE6에서는 png를 지원하지 않기 때문에 gif를 제작하실 때 픽셀경계가 명확한 아이콘을 제작해주시거나,

서랍 배경의 색과 아이콘의 경계색을 유사하게 만들어서 별도로 처리하셔야됩니다.

 

아이콘 적용

1. 만드신 아이콘은 "XE관리자 > 제어판 > 사이트설정 > 메뉴"에서 해당메뉴 설정을 선택합니다.

2. 메뉴 이름 옆의 설정 아이콘을 클릭합니다.

3. 이미지 버튼 항목 아래 "일반, 마우스 오버, 선택시" 항목에 제작한 아이콘을 지정해줍니다.

(일반만 지정해주셔도 됩니다.)

 

 

----- 맺음말 -----------------------------------------------------------------------

 

부족함에도 불구하고 저의 레이아웃을 이용해주셔서 감사합니다.

항상 빠른 답변을 드릴 수 없지만 빠짐없이 답변드리고자 하고 있으니 불편하더라도 이해부탁드립니다.

감사합니다. :-)

 

자료실에서는 질문을 하셔도 답변을 해드릴 수 없습니다.

궁금한 점이 있으시면 아래의 링크를 이용해주시면 감사하겠습니다.

http://jowrney.com/xe/SYXEQnA

 

 

 

----- 패턴 이미지  ---------------------------------------------------------------