매뉴얼 - Manual 매뉴얼 위키가 제작되기 이전에 만들어진 스킨에 대한 기존 매뉴얼 게시판입니다.
- Classic Style
- Zine Style
- Gallery Style
- Community Style
- Studio Style
- Blog Style
WTAInstallation
레이아웃의 인스톨 방법은 Xpress Engine의 레이아웃 설치 메뉴얼을 따라 주세요. 본 스킨만이 가지는 특별한 설정방법은 따로 없습니다. 본 메뉴얼에 기술되어 있는 내용들은 필수지식이 아닙니다. 이미 XE 기본 사용법을 알고 계신분들에게는 특별한 내용이 없지만, 조금 더 이해를 쉽게 하기 위한 팁 정도의 메뉴얼입니다. 부담없이 한번 쭉 읽어보시는 선에서 충분히 레이아웃을 활용 하실 수 있습니다.Understanding Division
이 레이아웃을 활용하는데에 있어서 가장 중요한 것이 바로 "단 구성에 대한 이해"입니다. 단을 어떻게 구성하느냐에 따라 아주 다양한 느낌을 만들 수 있는데, 단 구성을 위한 팁에 대해 하나하나 알아보도록 합시다.1. 모듈 컨텐츠부의 부재
이 레이아웃에는 기본적으로 게시판등의 모듈이 표시 될 컨텐츠 즉 {$content} 함수가 사용되어 있지 않습니다. 물론 원하는 단에 이 함수를 넣어서 게시판등을 출력시킬 수도 있습니다. 하지만 여기에서는 이 레이아웃을 게시판등을 뿌릴 용도에 사용하지 않고, 단일 페이지로만 작동함을 전제하에 설명합니다. 게시판이 뿌려지기에는 너무나 많은 다른 고정 레이아웃들이 함께 출력되기 때문입니다.
2. 포괄 DIV단과 채널 DIV단의 구분
이 레이아웃은 조그마한 단으로 쪼개진 채널 DIV단과 그것을 포괄하고 있는 포괄 DIV단으로 구성되어 있습니다. 채널 DIV가 컨텐츠라면 포괄 DIV는 이 컨텐츠들을 담는 그릇이라 할 수 있습니다.
위 그림에서 보는바와 같이 파란색 DIV단이 포괄 DIV이며, 이 DIV안에 각 컨텐츠를 나누는 주황색의 채널 DIV로 구성되어 있습니다. 포괄DIV는 layout.html에서 1개씩 추가 될 때마다 아래로 생성됩니다. 채널DIV는 1개씩 추가 될 때마다 이전 채널DIV의 우측에 붙어서 생성됩니다.
이러한 단의 이해가 되었다면 아래의 순서로 default.css를 수정하여 자신만의 새로운 단 구성을 만들 수 있게 됩니다.
1) body { background:#000000; width:2400px; } 이 코드에서 width:2400px은 스크롤 될 영역까지 모두 포함한 전체 컨텐츠의 너비입니다. 이 수치를 조절하여 컨텐츠의 최대 폭을 수정하게 됩니다.
2) #channel_license { width:680px; padding:150px 50px 230px 50px; float:left; } 이 코드는 채널DIV 중 한개의 코드 입니다. 보는바와 같이 너비가 680px로 지정되어 있는데, 이 부분을 수정하게 되면 각 채널DIV의 너비가 변경됩니다. 이 너비를 약 960px로 지정을 한다면 1024*768의 웹 브라우저에서는 스크롤 하지 않은 상태에서 거의 화면에 꽉 찬 채널DIV를 보게 되겠죠.
중요한 것은, 만일 1개의 포괄DIV 안에 3개의 채널DIV가 있다고 가정할 때 3개의 채널DIV의 너비값의 합이 body에 기재된 너비값을 넘으면 안된다는 것 입니다. 넘어버리게되면 Float Drop 현상이 발생하여 원하지 않게 화면구성이 깨져버리는 점을 주의하세요.
3. Scroll Navigation with XE Menu
이 레이아웃에는 스무스한 스크롤을 가능하게 하는 jQuery 플러그인이 사용되고 있습니다. 이 플러그인과 XE의 메뉴를 연결하여 하나의 네비게이션을 완성 시킬 수 있습니다. 페이지 스크롤은 위에서 설명한 채널DIV에 설정한 앵커 이름을 사용합니다. layout.html의 코드를 한번 살펴보겠습니다.<div id="div1">
<div id="channel_about">
<img src="images/default/about.png" alt="About" class="iePngFix" />
</div><!--channel out -->
<div id="channel_contact">
<img src="images/default/contact.png" alt="Contact" class="iePngFix" />
</div><!--channel out -->
<div id="channel_movie">
<img src="images/default/movie.png" alt="Movie" class="iePngFix" />
</div><!--channel out -->
</div><!--div1 out -->
<div id="div1">은 포괄DIV, <div id="channel_about">는 채널DIV죠. 여기 id를 써서 channel_about이라는 이름을 부여했습니다. 이 채널DIV에서 사이트의 소개에 대한 컨텐츠를 담고 있기 때문에 이름을 이렇게 지었겠죠. 이렇듯 채널DIV에 id 태그를 부여하여 이름을 지정해두고, 이것을 XE의 메뉴에서 링크 설정 부분(mid 값을 입력하는 부분)에 #channel_about이라고 적어주면 됩니다. 그러면 해당 메뉴를 클릭하게 되면 브라우저는 channel_about이라는 이름이 있는 채널DIV로 스크롤 하게 됩니다.
4. Dock Menu
Dock Menu는 화면의 하단에 항상 따라다니면서 마치 Mac OS X의 "지니 독 메뉴"와 같이 돋보기 효과를 가지는 재미있는 메뉴입니다. 이 메뉴를 위젯으로 만든다면 더할나위 없이 좋겠지만 이 레이아웃에서는 자바스크립트를 이용하여 layout.html에 직접 입력되어 있습니다. 이 코드는 layout.html의 가장 하단에 위치하고 있으며 가장 기본이 되는 설정방법에 대해서 알아보겠습니다. 이 스크립트를 활용하여 더욱 많은 기능들을 구현하려면 여기를 클릭해서 본 플러그인을 배포하는 사이트에서 정보를 입수하시기 바랍니다.<script type="text/javascript">
euEnv.imageBasePath="/layouts/BB_Layout/js/";
var dock = new euDock();
dock.setAnimation(euMOUSE,0.3);
dock.setScreenAlign(euDOWN,20);
dock.setBar({
left :{euImage:{image:"/layouts/BB_Layout/js/eudock/barImages/dockBg-l.png"
}},
horizontal:{euImage:{image:"/layouts/BB_Layout/js/eudock/barImages/dockBg-c-o.gif"
}},
right :{euImage:{image:"/layouts/BB_Layout/js/eudock/barImages/dockBg-r.png"
}}
});
dock.setIconsOffset(2);
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/home.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/home.png"
}},
txt :"Home",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.premiumxe.com"
});
</script>
위 코드에서 아이콘의 반복되는 설정은 생략하였습니다. 일단 빨간색으로 표시한 코드는 이 메뉴에서 사용하는 각종 이미지들의 경로입니다. 제가 프로그래밍 실력이 미약한지라 상대경로로의 설정이 실패하여 절대경로를 적었습니다. 만일 이 레이아웃의 폴더명을 변경하지 않았다면 샘플 코드에 있는 그대로 놔두면 정상 작동이 됩니다.
파란색으로 표시 된 코드는 Dock Menu에서 각 아이콘들을 받혀주는 받침대 이미지입니다. 왼쪽, 중앙, 우측의 이미지들이 조합되어 늘어났다 줄었다 하는 하나의 메뉴 받침대가 구성됩니다.
녹색 코드는 각 아이콘들의 세부 설정입니다. object는 아이콘의 이미지 파일의 경로, txt는 마우스가 아이콘 위로 롤오버 됐을 시에 출력할 메뉴명, style은 txt에 입력한 메뉴명의 스타일 설정, link는 아이콘을 클릭 했을 때 이동 할 URL입니다. anchor와 offset 옵션은 여백과 정렬등에 해당하는 부분인데, 상당히 많은 옵션을 제공하므로 특별히 수정해야 할 일이 있다면 플러그인 배포 사이트의에서 정보를 입수해 주세요.
5. Dock Menu의 삭제
어떤 브라우저에서는 이 Dock Menu가 무겁게 느껴지거나 매끄럽지 못한 움직임을 보인다고 합니다. 가장 큰 이유는 이 메뉴가 동작하는 사이트의 배경 이미지의 용량이 너무 큰 경우 움직임이 좋지 못합니다. 물론 컴퓨터 사양이 좋다면야 문제 없지만 너무 화려한 배경 이미지가 적용 된 사이트에서는 이 Dock Menu의 퍼포먼스가 떨어 질 수 있습니다. 이런 이유로 Dock Menu를 레이아웃에서 삭제하고자 한다면 아래의 순서로 완전 삭제 할 수 있습니다.1) layout.html에서 아래의 코드를 삭제합니다. 가장 상단에 위치하고 있습니다.
<!--%import("js/eudock/euDock.2.0.js")-->
<!--%import("js/eudock/euDock.Image.js")-->
<!--%import("js/eudock/euDock.Label.js")-->
2) layout.html에서 아래의 스크립트를 삭제 합니다.
<script type="text/javascript">
euEnv.imageBasePath="/layouts/BB_Layout/js/";
var dock = new euDock();
dock.setAnimation(euMOUSE,0.3);
dock.setScreenAlign(euDOWN,20);
dock.setBar({
left :{euImage:{image:"/layouts/BB_Layout/js/eudock/barImages/dockBg-l.png"
}},
horizontal:{euImage:{image:"/layouts/BB_Layout/js/eudock/barImages/dockBg-c-o.gif"
}},
right :{euImage:{image:"/layouts/BB_Layout/js/eudock/barImages/dockBg-r.png"
}}
});
dock.setIconsOffset(2);
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/home.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/home.png"
}},
txt :"Home",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"#channel_about"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/email.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/email.png"
}},
txt :"Mail",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"mailto:clubnb2@naver.com"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/video.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/video.png"
}},
txt :"_blank",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.webtrendawards.com", target:"_blank"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/music.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/music.png"
}},
txt :"Music",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.webtrendawards.com"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/calendar.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/calendar.png"
}},
txt :"Calendar",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.webtrendawards.com"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/history.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/history.png"
}},
txt :"History",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.webtrendawards.com"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/link.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/link.png"
}},
txt :"Link",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.webtrendawards.com"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/portfolio.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/portfolio.png"
}},
txt :"Portfolio",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.webtrendawards.com"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/rss.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/rss.png"
}},
txt :"RSS",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.webtrendawards.com"
});
dock.addIcon(new Array({euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/rss2.png"
}},
{euLabel:{
object:{euImage:{image:"/layouts/BB_Layout/js/eudock/itheme/rss2.png"
}},
txt :"RSS2",
style :"text-align:center; font: bold 11px Arial; color:#fff;",
anchor:euDOWN,
offsetX:0,
offsetY:-150
}}),
{link:"http://www.webtrendawards.com"
});
</script>
3) 본 레이아웃 폴더의 js 디렉토리에 있는 eudock 폴더를 삭제합니다.
©2008-2010 Premiumxe, LLC. All Rights Reserved. For a better tomorrow.
- Country Distribution :
- English
- 日本語
