요즘 저녁에 별루 할일이 없네요.

http://gsm.dothome.co.kr/xe/index.php?mid=web&category=4268

보시면 제가 사용해본 레이아웃들이 몇개 있습니다.

이런 스타일도 괜찮다면

만들어 드릴게요

어찌어찌 하다보니

제로보드 치비툴, 웹박수를 이용한 홈피를 두개나 만들었네요.

전체 디자인은 사용자분들이 보내주시고

저는 코딩만

http://gabee09.dothome.co.kr/

http://pinb.dothome.co.kr/

첫번째거는 오랫만에 해서 그런지 좀 헤매긴 했지만

좀 적응되니 시간이 훨단축...

다른 분들도 계속 말씀해주세요

gsm2014@naver.com 으로 멜 주세요

물론 무료 입니다.

팬페이지는 http://csm.dothome.co.kr/xe/main

우선 xe는 기본적으로 페이지와 게시판으로 구분할수도 있을 것 같다.

게시판은 말 그대로 

지금 내 홈피의 스토리나 포토 , 웹, 리뷰같은 것들이고

페이지는 젤 처음에 나오는 메인 페이지나 

상단메뉴 클릭시 나오는 최근문서가 출력되는 곳

그리고 흔이 대문이라고 하는 것들이 페이지가 된다.

xe에서 페이지와 게시판을 생성하는 방법은 아주 쉽다.

사이트 메뉴 편집에서 메뉴추가를 선택하면 

추가할 메뉴와 연결될 것이 게시판,위젯페이지,외부페이지,문서페이지등중 선택할수 있다.

앞에서 하려고 했던거 해보자

http://csm.dothome.co.kr/xe/

이런 대분을 만드는거...

먼저 관리자 페이지에 들어가면

사이트 메뉴 편집이 있다. 

위에 표시된것처럼 클릭해서 나가면

내홈피에 페이지 하나가 생기게 되는 것이다.

처음부터 하나가 만들어져 있으니 하나만 더 만들어 놔 보자

그리고 좌측 고급메뉴에 설치돈 모듈을 보면 페이지모듈이 있다.

페이지모듈을 클릭하면 위처럼 나온다.

방금 사이트메뉴 편집에서 추가한 페이지를 여기서 확인할수 있게 되는 거지

참고로 설치된 모듈에 보면 많은 모듈들이 있는데

레이아웃, 게시판, 모듈, 페이지등은 자주쓰는거니까 모듈이름앞에 별표를 체크해서 즐겨찾기에 나오도록 하면 편하다.

그리고 위 화면에서 설정버튼을 클릭하면

이렇게 나오는데 

우선은 레이아웃 미사용으로 골라주고 저장

페이지가 두개니까 둘다 레이아웃 미사용으로 해준다.

그리고 페이지의 이름을 클릭해 보면

이렇게 뜰꺼다 

웰컴페이지 같은 경우는 젤처음에 보이는 

요런 내용이 나올텐데 

암튼 페이지 수정을 클릭하면

이렇게 나오는데 내용모두 지우기를 클릭하면 내용이 지워진다.

그리고 내용직접 추가를 선택하면

이런 창이 나오는데

원하는 이미지를 파일첨부하고 본문삽입한뒤

삽입된 사진을 선택하고 가운데 정렬을 해주고

사진을 선택하고 url을 선택해서 사진클릭시 이동할 페이지의 주소를 넣어주거나

html 탭을 켜서 처음 했었던 링크태그를 직접 넣어줘도 된다.

우리는 유튜브 내용이 나오는 창으로 또 이동시킬거다.

그러니 아까 만들었던

페이지의 모듈이름을 이용해서 링크주소를 적어주면된다.

http://홈피주소/xe/모듈이름  이런식의 주소를 넣어주면 됨

두번째 대문은 또 다음으로 미룬다.

위젯과 페이지에 대한 좀더 세부적인 내용은 

http://gsm.dothome.co.kr/xe/1542  를 참고 바람

아니 왠만하면 위에 링크는 꼭 보길 바람

이번에는 

http://csm.dothome.co.kr/xe/

위와 같은 대문 두개를 만드는 과정을 해볼까 한다.

먼저 xe설치가 완전히 끝난 상태여야 한다.

그전에 먼저 

xe에 여러 기능을 쉽게 설치하기 위해서

xe에서 ftp 설정을 해주고

게시판모듈설치까지 먼저 해주고 가자

http://csm.dothome.co.kr/xe/ 에보면 상단에 검은줄로 admim 버튼이 보일것이다.

안보인다고?

위에 주소는 내 홈피 주소고 내가 관리자니까 나만 보이는 것이거든

님 홈피주소 /xe 들어가면 상단에 보인다

admim 클릭하면 관리자페이지가

이렇게 나온다

ftp 설정 클릭

별겨 없다. id와 비번만 넣어주면 끝

그리고 쉬운설치를 클릭해서

모듈에 게시판을 찾아서 설치버튼을 클릭하면

비번을 묻는 창이 뜰거다 비번넣고 하면 됨

자 이제부터 본 내용으로 들어가서

하려 했는데 낭중에 ㅠㅠ

팬페이지 만들기에 대해서 

몇일전에 한번 쭉 써볼까 싶어 몇개의 글이 올라갔다.

당초의 계획은

표와 링크, 이미지 정도의 간단한 html만으로 레이아웃을 구성해서 

xe에 위젯을 사용해서 꾸민다는 개념이었다.

분명 자신이 원하는 형태의 홈피를 만들기 위해서는 위와 같은 방법으로 해야만 한다.

근데 설명을 하려니 내가 막막해서 포기 했다.

그래서 암생각없이 어제 저녁에 미스에이 홈피와 웹상에서 이미지좀 퍼다가 

팬페이지 비슷하게 만들어봤다.

http://csm.dothome.co.kr/xe/

처음에는 원더걸스 팬페이지를 생각했는데

단지 내가 수지를 좋아한다는 이유만으로 미스에이로 바꼈다.

그래서 대문에는 소희가 홈피에는 수지위주가 ....ㅠㅠ

위에 링크한 홈피는 

html , 나모, 드림위버등 전혀 안썼다.

포샵은 이미지 편집을 해야 했기에 사용해야 했지만

그래서 이번에는

스케치북이라는 레이아웃을 사용해서 

각페이지와 게시판을 설정하거나 만드는법 위주로 설명을 할까 한다.

중복되는 것들은 제외하고

기존에 xe로 홈피만들기에 있는 내용은 간단히 설명하고 

해당 내용의 링크를 걸어서 볼수 있도록 해서 나의 귀차니즘을 해결할까 한다.

참고 

내가 끄적 거린 홈피

http://csm.dothome.co.kr/xe/

JYP에 나와있는 미스에이 공식 홈피

http://www.missaworld.com/

먼저 정말 대략적인 기능들만 구현을 해놨다.

http://csm.dothome.co.kr/xe

----------------

팬페이지를 xe로 만드는 과정을 한번 소개해 볼까 한다.

팬페이지도 단지 홈피의 주제를 특정 인물로 했을뿐

그냥 홈페이지일뿐이긴 하지만

굳이 여기서 팬페이지 만드는 방법을 따로 소개하고자 하는 것은

html등의 웹언어를 거의 모르는 분들을 대상으로 

xe에있는 여러기능들만을 이용해서 

할수있는데까지 해보려 한다.

그렇게 해보려고 했는데 

xe에서 배포하는 레이아웃을 그대로 사용하는 것이라면

html을 몰라도 어느정도 가능하긴 한데...

아무래도 팬페이지에 어울릴만한 그리고 여러가지를 이용하려면 기초적인 html에 대한 내용은 알아야 할듯 하다.

그래서 아주 간단한 3가지 태그에 대한 압축적인 소개는 먼저 하려고 한다.

소개글 보기

위 글을 보고 조금 아주조금더 세부적인 내용은

http://gsm.dothome.co.kr/ex/ftp/le1.htm  에 보시면 됨

이걸 언제 끝낼수 있을지 모르겠지만

우선 목표는 

http://www.jype.com/#/wondergirls/Profile.aspx  이런 형태와 비슷하게 만들고자 한다.

xe에 있는 여러가지 위젯들

http://gsm.dothome.co.kr/xe/syzy

위에 위젯를

본글에서 소개한 테이블로 나눈 각부분에 넣는 방식으로 만들어 볼까 한다.

만들어지는 홈피는 

http://csm.dothome.co.kr/xe 에서 완성시킬 예정임

현재는 흔이 대문이라고 하는 두페이지만 만들었는데

먼저 말하고 싶은 것은 디테일은 신경쓰지 않는다는 것이다.

정말 디테일에 신경을 쓸려면

위젯까지도 소스를 뜯어 고쳐야 하기때문에 그건 낭중에 css랑 html을 직접 공부한 다음에 하시길 빈다.

앞서 말한적이 있지만

xe에서 위젯을 삽입하는 방법은 두가지가 있다.

하나는 페이지에서 페이지 수정을 눌러서 원하는 위젯을 선택해서 삽입하는 방법과

설치된 위젯에서 원하는 위젯을 선택해서 위젯의 소스코드를 만들어서 원하는 부분에 소스코드를 삽입하는 방법이다.

근데

위젯소스코드 생성시에는 스타일을 설정해줄수가 없다.

검색해보면 나오긴 할테지만 굳이 필요가 없었는데

찾아보니 어렵지 않더군.

먼저 위젯 스타일이 뭔지 한번 보자

위에 5개의 위젯이 있다.

모두 컨텐츠위젯 기본스킨이다.

단,,,,,상단 좌측은  스타일을 적용하지 않은 것이고

상단 우측은 심플스타일을 적용

하단은 그레이스타일에서 각기 다른 컬러셋을 적용한 모습이다.

암튼 

위젯코드를 생성하면

<img........ 이렇게 길게 나오는데 끝에다가

 widgetstyle="simple" ws_colorset="white" 요런 것들만 넣어주면 된다.

각각의 위젯스타일마다 설정하는 내용이 조금 다를수 있는데

위젯의 html 파일을 열어보면

<!--@if($widgetstyle_extra_var->ws_colorset == "black")-->

    {@ $_wsClassName = "black"}

<!--@elseif($widgetstyle_extra_var->ws_colorset == "white")-->

    {@ $_wsClassName = "white"}

<!--@else-->

    {@ $_wsClassName = $layout_info->colorset}

<!--@end-->

<!--%import("style.css")-->

{@ $ws_more_url = trim($widgetstyle_extra_var->ws_more_url); }

<div class="simpleWidgetStyle {$_wsClassName}">

    <h2>{$widgetstyle_extra_var->ws_title}</h2>

        <!--@if($ws_more_url)-->

            <!--@if(strtolower(substr($ws_more_url,0,4))=='http')-->

                <a href="{$ws_more_url}" class="widgetMoreLink">

            <!--@else-->

                <a href="http://{$ws_more_url}" class="widgetMoreLink">

            <!--@end-->

            {$widgetstyle_extra_var->ws_more_text}</a>

        <!--@end-->

    {$widget_content}

</div>

위에 붉게 표시한 ws.... 어쩌구 하는 것들이 설정 항목이 된다.

colorset은 이해가 될테고

title는 위젯 상단에 위젯이름이 표시되는 위에 캡쳐에선 sdsd란 것이 되겠고

more url 과 more text는 

캡쳐의 상단 우측에 있는 more란 글자 대신 들어갈 글자와 그 글자 클릭시 연결될 링크 주소를 말하는 것이다.

해서 결국 

소스코드를 생성한뒤

<img class="zbxe_widget_output" widget="content" skin="default" colorset="white" widget_sequence="4365" widget_cache="60" content_type="document" module_srls="107,111" list_type="normal" tab_type="none" markup_type="table" page_count="1" subject_cut_size="65" new_window="Y" option_view="title" show_browser_title="N" show_comment_count="N" show_trackback_count="N" show_category="N" show_icon="N" order_target="regdate" order_type="desc" thumbnail_type="crop"  widgetstyle="simple" ws_colorset="white" ws_title="Favorite" ws_more_url="http://gsm.dothome.co.kr/xe/fa" ws_more_text="more"/>

위에 반전된 부분처럼 추가해주면 된다는...

아래 있는 내용에 

데모사이트라고 해서 링크 시켜 놓은 것이 있는데

현재 업데이트중에 에러때문에 싹 밀어버려서 

해당 사이트가 나오지 않음

복구계획은 있으니 복구할 의지가 없어서 ㅠㅠ

http://www.xpressengine.com/index.php?mid=download&category_srl=18322954&parent_srl=18322919

XE 홈피에서 다운 받을수 있는 레이아웃들이다.

대부분은 미리보기를 제공하니 걍 그쪽을 ㅋㅋㅋ

Elkha - Gray Style 레이아웃

데모 페이지 http://csm.dothome.co.kr/xe/board6

Elkha - T.S.K. 레이아웃

데모 페이지 http://csm.dothome.co.kr/xe/board4

KSO 컬럼니스트 레이아웃 

데모 페이지 http://csm.dothome.co.kr/xe/board3

sketchbook5 레이아웃

데모페이지? 지금 홈피 레이아웃

Elkha - monochrome 레이아웃

데모페이지 http://csm.dothome.co.kr/xe/board5

다이나믹 레이아웃

데모페이지  http://csm.dothome.co.kr/xe/board1