profile 첫페이지 만들기(xe 1.5.0.9편)

작성자: 완두 조회 수: 8654

xe로 첫페이지 만들기

지난 시간까지 잘 이해하시고 준비하셨다면
게시판과 메뉴를 모두 만들어 놓으셨겠지요?
이번 시간에는 홈페이지의 첫페이지를 만들어 보겠습니다.

먼저 관리자페이지로 로그인 하고 들어가세요.

관리자페이지가뜨면 다음과 같이 확작기능->설치된레이아웃을 클릭하세요.

bb3b9dba7768f231ebe11c8a1abecc6d.gif

다음과 같이 설치된 레이아웃 화면에서 XEfred Free Layout을 클릭하세요.
ec224111b65ecd2cb12eac7735c3c4e3.gif
그러면 다음과 같이 지난번에 생성해 놓은 '홈페이지'라는 메뉴가 보이지요.
'레이아웃 설정'이라는 곳을 클릭하세요.
476200a74054c2ac5f3fc206e0f8ba1d.gif

다음과 같은 창이 나타나면 맨 아래쪽으로 내려가면 '메뉴' -> 상단메뉴라는 곳이 있지요.
그 곳에서 지난 시간에 만들어 놓은 '홈페이지 메뉴를 선택하시고
맨 아래 우측에 있는 저장버튼을 클릭하세요.
39a316ccab18b4d88fd69b8f9c2c1389.gif

이제 다시 사이트->사이트맵을 클릭하세요.

920497ccc6f5a5b3929b73d458840b8d.gif

다음과 같이 지난번에 만들어 놓은 '홈페이지 메뉴'가 보이지요.
'홈'메뉴 우측에 보면 '설정'이라는 곳이 보이지요. 그곳을 클릭하세요.
d19b8706b30c37e9a1e631dc0417542c.gif

다음과 같이 페이지관리 창이 뜰거예요.
b0e4d8bffeaa9e78258113ca98f12895.gif

1.모듈이름에는 home
2.브라우저제목에는 '홈'이라고 되어 있지요.
3.레이아웃에는 지난 시간에 생성해 놓은 '홈페이지(XEgrid_Free)를 선택하시고
우측 하단에 있는 저장버튼을 클릭하세요.
다시 페이지 관리 페이지로 돌아 왔습니다. 권한관리를 클릭하세요.
676f24573e811881c2c467023c563717.gif

다음 창에서 권한설정 -> 관리권한에서 관리그룹을 선택하시고 저장버튼을 클릭하세요.
cd41fccd639c7cf6c8ace6a84afa7665.gif

등록하시겠습니까? 라는 메시지가 뜨면 확인을 클릭하세요.

등록했습니다.라는 메시지가 뜨면 확인을 클릭하세요.

이제 다시 사이트 -> 사이트맵을 클릭하세요.

다음과 같이 사이트맵창이 열리지요.
13552b755a53e0e881e5013305b92dd2.gif

'홈페이지 메뉴'목록에서 '홈'을 클릭하세요.



다음과 같이 홈페이지의 모습이 새로운 창으로 나타나지요?
page_06.jpg

레이아웃생성할때 로고 이미지와 헤더배경 이미지를 넣지 않으셨다면
위와 같은 창이 뜨겠구요.
로고이미지와 헤더배경이미지를 첨부 하셨다면 그 모습이 보일거예요.

아직 로고 이미지와 헤더배경 이미지를 첨부하지 않으셨다면
다음에 수정하셔도 됩니다.

이제는 공지사항 갤러리 자유게시판등의 최근글을 첫페이지에 보이게 만들어 보겠습니다.
지난 시간에 만들어 놓은 게시판에 올려진 최근글을 출력하려면
콘텐츠를 출력할 수 있는 위젯이 필요하지요.
먼저 공지사항 내용을 나타내기 위한 위젯을 생성해보겠습니다.

첫페이지에 각 게시판의 최근글 위젯을 생성하였다고 해도
각 게시판에 올려진 글이 아무 것도 없다면 첫페이지에서 아무것도 보이지 않게 됩니다.

위젯을 생성하기 전에 각 게시판에 글을 최소한 하나씩이라도 올려주세요.
게시판에 글을 올리시려면 서비스관리-> 게시판을 클릭하시고
게시판 목록이 나타나면 부라우저제목의 해당 게시판이름을 클릭하시면 해당 게시판이 열리거든요.
그곳에서 하단의 쓰기를 클릭하셔서 글을 올려주세요.
공지사항 그리고 자유게시판 그리고 갤러리게시판에는 사진도 한장 올려주시구요.

그리고나서 다시 서비스관리-> 페이지를 클릭하세요. 그리고 브라우저제목 '홈페이지'를 클릭하세요.

우측 하단에 있는 페이지 수정을 클릭하세요.

다음과 같은 창이 뜨지요.
page_07.jpg

1.content위젯을 선택하시고
2.추가를 클릭하세요.

다음과 같이 코드생성창이 나타나지요?
page_08.jpg

위젯은 content위젯 ver0.1을 선택하시고 선택버튼을 클릭하세요.

스킨에서는 Content위젯 기본 스킨(default)를 선택하시고 옆에있는 선택 버튼을 클릭하세요.

캐시는 그대로 두시고 아래 추출대상은 게시물을 선택하시고
대상모듈에서는 우측의 파란색 추가 버튼을 클릭하세요.

다음과 같이 모듈 선택기창이 뜨면 공지사항 위젯을 생성하는 것이니까
공지사항 옆에 있는 녹색 추가 버튼을 클릭하시고 모듈 선택기 창을 닫으세요.

page_09.jpg

이제 다시 코드생성창으로 돌아왔지요.
대상 모듈 오른쪽 박스안에 공지사항(notice01)이라는 항목이 보이지요?
내용형태에서는 그냥 제목만 보이게 하려면 제목을
웹진형으로 보이게 하려면 이미지+제목을
갤러리 형태로 보이게 하려면 갤러리를 선택하시면 되구요.
지금 생성하는 것이 공지사항 위젯이니까 이미지나 내용은 없이
제목만 나오도록 제목을 선택하세요.
나중에 다시 바꾸셔도 되니까요. 나머지는 그대로 두시고
게시판이름표시 항목에서는 '출력하지 않음' 을 선택하시고(게시판이름은 위젯스타일에서 표시할 것입니다.)
아래로 더내려 가시다 보면 new표시사간(hours)라는 곳에 24라고 입력하시고
맨 아래 있는 코드생성을 클릭하세요.

위젯 생성이 되어서 다음 창과 같이 공지사항 최근글이 보일거예요.
저는 이용안내 라는 글을 하나 올려 놓았답니다.
page_10.jpg

이제 생성된 공지사항 윗부분에 공지사항위젯과 연결된 게시판 이름과
공지사항게시판으로 이동할 수 있도록 위젯스타일을 적용하여 링크를 삽입하겠습니다.
마우스를 지금 생성해놓은 위젯 위로 옮겨가면 빨간 네모안에 있는 것과 같은 아이콘들이 보이지요?
page_11.jpg 

page_12.jpg 를 클릭하세요. (위젯스타일추가 버튼이랍니다.)

다음과 같이 위젯스타일 이라는 새로운 창이 뜨지요.
page_13.jpg

위 그림에서 보이는 곳을 클릭하세요.

다음과 같이 창이 바뀌지요?
page_14.jpg

컬러셋난에는 우선 하얀색으로 두시구요.
제목에는 공지사항이라고 입력하시구요.
더보기URL난에는 'http://본인도메인주소/xe/notice01'이라고 입력하시구요.
더보기텍스트난에는 more 라고 입력하시구요.
아래 있는 설정을 클릭하세요.

다음과 같이 공지사항위젯과 위젯스타일이 적용된 것이 보이지요?
page_15.jpg

이제 아래에 있는 저장버튼을 클릭하세요.

나머지 두개의 게시판도 이와 같은 방법으로 위젯을 생성하시고
위젯스타일을 적용해 보세요.

자유게시판은 위과 같이 하시구요.

갤러리게시판은 내용형태는 갤러리를 선택하시구요.
표시항목 순서는 title, thumbnaill, nickname, regdate 로 하시구요

나머지는 동일하게 해보시구 나중에 취향에 맞추어서 수정해보시구요
아래 부분의 저장 버튼을 클릭해서 모두 저장하세요.

이제 다음 창과 같이 공지사항 갤러리 자유게시판
이렇게 세개의 위젯이 생성되었지요?
page_16.jpg

이번에는 생성된 세개의 위젯을 재배치해 보도록 하겠습니다.
갤러리위젯은 그대로 두고 그 윗쪽에 공지사항위젯과 자유게시판위젯을 나란히 배치해 보겠습니다.
우측 하단의 페이지수정 버튼을 클릭하세요.

page_17.jpg

위와 같은 창이 뜨면 자유게시판위젯 위로 마우스를 옮겨서
 page_18.jpg 를 클릭하세요.

page_19.jpg

위와 같은 창이뜨면 위젯정렬을 오른쪽으로 선택하시고
위젯크기를 980->480로 변경하시고 저장을 클릭하세요.
다음에는 공지사항 위젯위로 마우스를 옮겨서 page_18.jpg 를 클릭하세요.

공지사항위젯은 왼쪽으로 정렬할 것이니까
위젯정렬은 왼쪽 그대로 놓아두시구요.
위젯크기를 역시 980->480로 변경해주시고 저장버튼을 클릭하세요.
공지사항위젯 오른쪽 아래 있는 크기변경핸들 (page_21.jpg )을 왼쪽으로 끌어도 크기를 줄 일 수 있답니다.
자유게시판위젯도 왼쪽 아래 있는 크기변경핸들 (page_20.jpg 를 오른쪽으로 끌어도 크기를 줄 일 수 있구요.
다음과 같이 위젯 크기가 작아 졌지요.

page_23.jpg

자유게시판위젯 가운데를 클릭한체로 공지사항위젯 옆으로 드래그 하시면
다음과 같이 공지사항과 자유게시판위젯이 윗쪽에 나란히 위치하게 됩니다.

page_24.jpg

위젯을 수정 하시고 싶을때는 page_22.jpg 를 클릭하셔서 수정 하실 수도 있습니다.

이제 아래쪽에 있는 저장버튼을 클릭하셔서 저장하세요.

이와 같은 방법으로 첫페이지의 위젯 배치를 자신이 원하는대로 변경해 보세요.
 
 
마지막으로 한가지 더 설정해야 될 것이 남았네요.

관리자페이지로 들어가세요.
관리자페이지 우측 상단에 보면 설정이라는 탭이 있지요.
3133e92b31d27eab09a659edb0a9dae5.gif

설정 -> 일반이라는 곳을 클릭하세요.
다음과 같은 창이 나타나지요.
3dd9c917f2a35ad71350313135c76d7c.gif

설청 일반창이 열리면 기본이라는곳 바로 아래에 있는 찾기라는 버튼을 클릭하시면
빈 칸과 그옆에 확인이라는 곳이 나타난답니다. 확인을 클릭하시면
본인의 홈페이지 주소가 바로 아래 나타나지요. 그곳을 클릭하세요.

다음과 같이 내용이 달라지지요.
4d4e212117aee575cfec2d65622f186b.gif
위와 같이 세번째 칸에서 페이지 를 선택하면
그 아래칸에서는 홈이라는 내용이 나타 나지요. 바로 옆에 있는 선택 버튼을 클릭하세요.

위와 같이 설정이 되었다면 맨 아래 우측에 저장 버튼을 클릭하세요.

지금까지 따라 하시느라고 수고 하셨습니다.
나의 홈페이지 주소로 접속해보세요.
'www.우비 무료도메인/xe, 또는 'www.등록하신도메인/xe' 로 접속해보세요.
꼭 /xe 까지 사용하셔야 됩니다. /xe 없이 접속하시면 우비 또는 파란에서 기본제공하는 페이지가 뜨게 된답니다.

지금까지 만들어 놓은 나의 홈페이지가 보이시나요?
보이신다면 나의 홈페이지가 완성된 것입니다.

축하합니다.

하지만 이제부터 스스로 추가하고 수정하고 다듬어서 정말 예쁘고 맘에 쏙 들도록 가꾸어보세요.
전문가도 아닌 제가 그래도 나름대로 열심히 알기쉽도록 준비해 보았습니다.
부족한 것은 많았지만 이해 하시고 보아 주셔서 고맙습니다.
오늘은 여기서 마치도록 하구요.

도메인/xe 로 접속해야되는 부분이 조금 불편한 듯 하여
/xe 없이 홈페이지 주로로만 접속할 수 있도록 수정하는 방법은
'14.홈페이지주소/xe 에서 /xe없이 접속하기'를 참조하세요.

오늘도 좋은 하루 되시고 행복하세요.

아! 그리고 제 글이 도움이 되셨다면 격려의 글 하나 정도는 남겨주세요.
제게 많은 힘이 될 것 같지 않나요? ㅎㅎ

List of Articles
번호 제목 글쓴이 날짜 조회 수
» 첫페이지 만들기(xe 1.5.0.9편) + 2 완두 2012-03-02 8654
17 가입폼관리 및 아이디로 로그인하기(xe 1.5.0.9 편) file + 7 완두 2012-02-05 8969
16 xe 1.5.0.9 설치하기(우비 자동설치편) 완두 2011-12-18 7092
15 무료호스팅받기 [우비편] 완두 2011-12-13 7955
14 홈페이지주소/xe 에서 /xe 없이 접속하기 file 완두 2011-08-31 10524
13 첫페이지 만들기 file + 2 완두 2011-08-27 7383
12 게시판 만들기 file 완두 2011-08-20 10580
11 메뉴 만들기 file + 2 완두 2011-08-18 7532
10 레이아웃 생성하기 file 완두 2011-08-13 7291
9 알집 설치 및 압축파일 풀기 file 완두 2011-08-11 7930
8 레이아웃스킨 다운받기 file 완두 2011-08-08 11126
7 FTP프로그램(파일질라) 설치하기 file 완두 2011-08-06 9625
6 XE관리자 페이지에서 FTP 설정하기 file 완두 2011-07-27 18538
5 도메인 연결하기 file 완두 2011-07-26 8424
4 도메인 등록하기 file 완두 2011-07-25 6316
3 제로보드XE 설치하기 file + 5 완두 2011-07-23 11310
2 무료호스팅받기 file 완두 2011-07-19 6196
1 홈페이지 만들기를 시작하면서.. 완두 2011-07-13 12747