웹마스터 팁

 

XE 1.5.1 로 사이트 꾸미기 Part 1.

 

 

XE를 처음 만난 분들은 이 글을 읽기 전에 우선 제가 먼저 작성한 Xe 1.5.0.9 사용자 설치메뉴얼 1부와 2부를 먼저 읽고 오시기 바랍니다.

Xe.1.5.0.9 사용자 설치 매뉴얼 제1부 (수정중 스팸으로 분류되어 삭제되었음, 재등록도 안되고 있습니다)

Xe 1.5.0.9 사용자 설치 매뉴얼 제 2부 바로 가기

 

지난번 사용자 설치 매뉴얼 2부까지 작성한 후에 몇 일 후 1.5.1이 출시되었습니다.

Xe 1.5.1를 다운받아 설치해 보니 지난 번 Xe 1.5.0.9과 외견상 큰 차이가 없고 사소한 버그들이 수정된 것으로 출시되었습니다. 따라서 설치메뉴얼도 1.5.1을 기준으로 작성합니다.

 

이번에는 레이아웃을 자신이 원하는 것으로 교체하는 방법을 포함하여, 사이트를 꾸미는 미는 방법을 설명 드립니다. 그림을 보면서 차근 차근 따라하면 Xe의 기본 개념도 익히게 되고, 자신이 원하는 사이트를 꾸밀 수 있게 될 것입니다.

 

로그인 방식 변경.

 

Xe 1.5가 출시되면서 많은 변화가 있었는데 그 중에서 로그인 방식도 포함됩니다. 하지만 이메일주소를 길게 넣는 것이 불편해서 많은 사용자들이 과거 아이디 로그인방식을 원하는 분도 있는 듯 합니다. 그래서 우선 로그인 방식을 E메일에서 ID로 바꾸는 법부터 알아보겠습니다.

 

setp3_1.jpg

일단 사용자 매뉴얼 2부까지 따라오게 되면 위와 같은 화면을 띄우는데 성공했을 것입니다.

초기에 설치를 하게 되면 로그인 방식은 기본적으로 E메일로 접속하게 설정이 되어 있습니다.

Xe 설치시에 기입했던 E메일주소와 비밀번호를 넣고 로그인 합니다.

로그인이 되고 나면, 위의 그림에서 아이디정보 아래에 있는 [관리]를 눌러 관리자 페이지로 이동합니다.

 

setp3_2.jpg

관리자 화면 상단메뉴에서 [회원]>[회원 설정]으로 이동합니다.

 

setp3_3.jpg

회원설정 화면이 나타나면 스크롤해서 화면 맨 아래로 이동합니다.

 

setp3_4.jpg

맨 아래에 [가입 폼 관리]부분을 보면 이메일주소에 체크가 되어 있습니다.

그 아래 부분에 있는 아이디부분에 체크해 주면, 아이디항목이 위로 올라가고

이메일 주소가 아래로 내려가게 됩니다.

맨 하단 우측에 [저장] 버튼을 누르고 빠져 나오면 됩니다.

가입폼관리에서는 특정 항목을 필수, 혹은 선택으로 만들 수도 있고,

사용하지 않을 수도 있으며, 새로운 항목을 [사용자 정의항목추가]버튼을 눌러

만들 수 있습니다. 이렇게 만들어진 항목들은 회원가입시에 보여지게 됩니다.

작업을 마치고 나서 로그아웃 한 후에

이메일 주소가 아닌 ID로 로그인 해보세요. ID로 로그인되면 성공한 것입니다.

 

2. 레이아웃 바꾸기

Xe를 설치하고 나면, Xe에서 기본적으로 제공하는 몇 개의 레이아웃이 Layouts 이란 폴더안에 기본적으로 들어 있으며, 그 중에서 설치를 마치면 뜨게 되는 기본 레이아웃중

Welcome_Layout이 레이아웃이 [Xe 공식 사이트 레이아웃]이란 이름으로 지정되어 있습니다. 하지만 사용자마다 취향이 다르기 때문에 공식 사이트 레이아웃의 디자인이 마음에 안들수도 있고, 자신의 사이트 성격에 맞지 않을 수도 있습니다.

그럴 때는 Xe에서 기본으로 제공되는 여러개의 사이트 레이아웃을 적용해 보면서 자신에 맞는 것을 찾아 적용하거나, 아니면 Xe공식홈의 자료실에서 레이아웃스킨을 다운 받아 자신의 사이트에 적용할 수 있습니다. 그 방법을 알아 보겠습니다.

 

우선 Xe의 설치와 함께 기본제공되는 레이아웃들이 어떤 것이 있는지 살펴보겠습니다.

관리자페이지 상단 메뉴에서 [확장기능]>[설치된 레이아웃]으로 이동합니다.

 

setp3_5.jpg

[설치된 레이아웃] 페이지가 뜹니다. 여기에서 설치된 레이아웃이란 말에 혼란을 느끼지 마세요. 목록에서 죽 보여지는, “테스트 레이아웃” “Xe 공식 사이트 레이아웃”,“Xe 그레이스톤 레이아웃”...등등 이 레이아웃이 실제로 설치가 되어있지 않습니다. 다만 레이아웃으로 사용할 수 있도록 폴더안에 존재만 할 뿐입니다. 이 레이아웃을 실제로 자신의 사이트에 적용하려면 해당 레이아웃을 선택하여 추가해 주어야 합니다.

목록에서 보여지는 레이아웃 중에서이 레이아웃 중 “XE 공식 사이트 레이아웃이 현재 XE를 설치하게 되면 자동으로 설치되는 welcome_layout입니다.

이제부터 해 볼 작업은 이 레이아웃과 기본 제공된 레이아웃이 아닌 다른 레이아웃을 사이트에 적용해 보는 작업을 하겠습니다.

우선 XE에서 레이아웃의 영역에 대해 말씀드리겠습니다.

 

setp3_6.jpg

윗 그림에서 붉은색으로 보여지는 부분이 바로 레이아웃 영역입니다.

과거 제로보드 시절에는 이런 영역을 모두 Head.phpfooter.php 등의 파일로 만들고

실제 페이지의 내용이 구현되는 영역을 body.php 혹은 index.php, index.html등의 파일로 꾸며졌지요. 하지만 XE에서는 과거 Headerfooter, body의 영역이 모두 Layout이라는 틀속에 구현이 됩니다.

따라서 사이트의 디자인을 바꾸려면 레이아웃을 통째로 바꾸어야 합니다.

하지만 Xe에서 작동되는 레이아웃을 만들어 쓰려면 공부가 많이 필요하기 때문에 대부분의 사용자들을 다른 사람들이 만든 layout중에서 자신이 구현하려는 사이트의 모습과 비슷한 유형의 레이아웃을 가져와 사용하게 됩니다.

윗 그림에서 흰부분이 contents영역으로, 최근게시물이나 다양한 배너등을 꾸며 넣을 수 있는 부분인데, 관리자 페이지에서 만들어 둔 세가지 종류의 contens인 일반 페이지, 위젯페이지, 그리고 게시판등이 불려들어와 표시되는 곳입니다.

자 이제 이 레이아웃을 다른 레이아웃으로 바꾸어 봅시다.

저는 개인적으로 사이트에 처음 접속했을 때 화면 왼쪽에 회원정보가 표시되는 것이 맘에 안듭니다. 그래서 상단에 메뉴가 있고, 하단에는 사이트의 정보가 표시되고 중앙에 내가 표시하고 싶은 것들을 포함하는 3단형으로 초기화면을 꾸미고 싶다고 가정합니다.

이럴 때는 우선 다른 사람들이 만들어 둔 레이아웃을 자세히 살펴 보는 것이 중요합니다.

레이아웃은 XE공식 홈페이지 다운로드영역중에서 레이아웃스킨에서 찾아봅시다.

 

setp3_7.jpg

Xe 공식 홈페이지 [다운로드]>[스킨]>[레이아웃스킨]에서 자신의 사이트에 맞는 유형을 골라봅니다.

*주의하실 점:

레이아웃 스킨들 중에는 더러 Xe1.5.1에서 정상작동하지 않는 레이아웃스킨들도 많이 있습니다. 따라서 다운받기 전에 내용을 꼼꼼히 읽어보고 Xe1.5.1에서 작동하는지를 우선 확인 한 후 다운로드 하셔야 합니다.

또 한가지는 공홈에서 직접 다운로드 받아 FTP로 업로드 할 경우, 설치된 레이아웃 목록에 표시되지 않거나 정상적으로 작동하지 않을 수도 있습니다. 따라서 그런 경우에는 쉬운설치를 이용하여 다운로드 받으시길 권합니다.

 

1) 쉬운 설치를 통한 레이아웃 다운로드.

쉬운 설치를 통해서 레이아웃 뿐이라 각종 모듈이나 위젯들도 다운받을 수 있습니다.

 

setp3_8.jpg

쉬운설치를 사용하기 위해서는 우선 설정을 해주어야 합니다.

그림에서처럼 메뉴에서 [설정]>[FTP 설정]으로 들어갑니다.

 

setp3_9.jpg

FTP설정창이 뜨면 내용을 입력하고 맨 아래에 [목록가져오기]를 누르면

FTP로 자신의 서버에 접속하여 폴더구조를 보여줍니다.

보여지는 폴더들 중에서 Xe가 설치된 폴더를 선택합니다.

그 다음 저장을 누른 후에 상단 메뉴에서 [확장기능]>[쉬운 설치]로 이동합니다

 

setp3_10.jpg

만약 FTP가 정상적으로 설정되었다면 그림같은 화면이 뜹니다.

상단에 보이는 모듈들과 레이아웃스킨등의 메뉴중에서 레이아웃스킨을 누릅니다.

(다른 모듈이나 위젯을 다운받아 설치를 원하면 해당메뉴를 누르면 됩니다.)

레이아웃스킨메뉴를 누르면 아래 그림처럼 레이아웃 목록들이 보여집니다.

 

setp3_11.jpg

위의 그림처럼 다양한 레이아웃스킨들이 보여지면 원하는 항목옆에 쓰여진 [설치]를 누르면

설치가 진행됩니다.

*목록에서 보여지는 레이아웃 중 무엇을 고를지는 붉은 원안에 표시된 레이아웃의 이름을 누르면 해당레이아웃의 내용페이지로 이동됩니다. 하지만 이 레이아웃설명페이지에 있는 다운로드를 누르면 쉬운설치가 되지 않습니다. 보여진 페이지에서는 내용만 확인하시고(특히 Xe 1.5버전과 호환이 되는지를 꼭 확인하셔야 합니다) 설치는 브라우저의 뒤로가기를 눌러서

위의 그림과 같은 화면으로 되돌아 온후에 설치 버튼을 눌러야 쉬운설치가 진행됩니다.

저는 이 레이아웃들 중에서 [SketchBook5 레이아웃]을 선택하겠습니다. 이 레이아웃이 제가 구성하려는 사이트의 성격과 가장 유사한데다가 Xe 1.5와 호환이 잘되기 때문입니다.

[설치] 버튼을 눌러 설치를 진행합니다.

 

setp3_12.jpg

설치 버튼을 누르면 위와 같은 화면으로 이동합니다. 화면에서 자신의 FTP비밀번호를 기입하고 설치 버튼을 누릅니다.

 

setp3_13.jpg

그림처럼 [설치가 성공하였습니다]란 메시지가 뜨면 정상적으로 설치가 된것입니다.

이제 다시 레이아웃 목록으로 이동하여 확인해 봅시다.

관리자페이자 상단메뉴에서 [확장기능]>[설치된 레이아웃]으로 이동합니다.

 

setp3_14.jpg

설치된 레이아웃 항목중에 [나루의 행복한 나들이 레이아웃]이 새로 보이면 정상 설치된 것입니다. 레이아웃 이름 옆에 이 레이아웃만 [삭제]버튼이 있습니다.

나중에 이 레이아웃을 완전히 지울 때 사용합니다.

이제 새로운 레이아웃을 가지고 사이트를 꾸며 봅시다.

[나루의 행복한 나들이 레이아웃]이란 글씨를 클릭하면 해당 레이아웃의 설정페이지 이동됩니다.

 

setp3_15.jpg

현재는 새로운 레이아웃만 폴더로 옮겨진 상태이기 때문에 이 레이아웃을 사용하려면 추가버튼을 클릭해야 합니다. 추가버튼을 클릭하면 아래처럼 해당 레이아웃의 설정페이지로 이동합니다.

 

setp3_16.jpg

레이아웃의 설정페이지입니다.

이곳에서 레이아웃에 대한 기본적인 설정들을 추가해 줄 수 있습니다. 이 항목들은 레이아웃을 만든 제작자가 만들어 둔 항목이기 때문에 레이아웃마다 다를 수 있습니다.

이 레이아웃에서 가장 먼저 해야할 것은 레이아웃의 이름을 지정해 주는 것입니다.

제목이란 항목에 자신이 원하는 레이아웃 이름을 적어 줍니다.

저는 그냥 원래 레이아웃 이름을 따와서 [스케치북5]라고 이름 붙여 주었습니다.

 

setp3_16_2.jpg

그리고 나머지 설정들은 나중에 하기로 하고 가장 중요한 사이트의 이름과 로고 부분만 우선 설정하겠습니다. 저의 경우입니다.

로고앞 메인메뉴 텍스트표시 부분만 사용안함으로 바꾸고.

로고 텍스트 부분에 제가 만들고자 하는 사이트의 이름 [Love Jesus-예수 사랑]을 넣었습니다. 이 부분은 본인이 원하는 걸 넣을 수 있고, 더 예쁘게 꾸미려면 로고를 직접 만들어 해당부분 항목에서 업로드 하시면 됩니다.

 

그 아래로 다양한 항목들이 있는데, 여기에서 일일이 설명할 수 없고, 사용자가 자세히 살펴보면 항목란에 기입하는 것은 본인의 필요에 따라 적절히 할 수 있으니 생략하겠습니다.

나머지 항목들은 여기에서는 그냥 스킵해서 화면을 맨 아래 부분으로 내려 갑니다

 

setp3_17.jpg

다른 항목들은 나중에 지정해 주드라도 필수적으로 해 줘야 할 항목이 메뉴관련 항목입니다.

[메뉴]라는 항목아래에 메인메뉴, 중간메뉴, 하단메뉴 3가지가 있습니다.

이 메뉴들은 메뉴를 맨 상단과 중간, 그리고 하단에 표시해 줄지를 선택하는 부분입니다.

중간메뉴와 하단메뉴는 선택하지 않아도 되는 옵션이지만, 메인메뉴는 반드시 해줘야만

사이트 접속시에 메뉴가 표시됩니다. 저는 메인메뉴 한 항목만 선택했습니다.

메뉴를 선택할때는 박스옆의 펼침버튼을 누르면 됩니다.

지난 번글인 설치메뉴얼 2부에서 주메뉴를 welcome_men라는 이름으로 저장해 둔 것을 기억하시죠? 그렇게 하나의 메뉴만을 만들어 두었다면 펼침버튼을 눌렀을 때 Welcome_men라는 항목 하나만 뜰겁니다. 그것을 선택해 줍니다.

그리고 맨 하단에 [레이이아웃 일괄적용]란에 체크박스가 있습니다.

여기에 체크해 주면 메뉴에 노출된 모든 콘텐츠들이 동일한 레이아웃으로 통일 한다는 의미입니다.

Xe에서는 접속시 첫페이지는 A라는 레이아웃으로 사용하고, 게시판으로 들어갔을때는 B라는 레이아웃을 사용할 수도 있습니다. 그래서 각 컨텐츠마다 적절한 레이아웃을 사용할 수 있습니다. 하지만 지금은 우선 이 체크박스에 체크를 하여 모든 페이지와 게시판에서 동일한 레이아웃 하나만을 사용하는 방식으로 진행 합니다. 따라서 체크박스에 체크를 하겠습니다.

 

마지막으로 맨 하단 우측에 있는 [추가]버튼을 누르면 레이아웃 설정이 끝납니다.

 

setp3_18.jpg

추가 버튼을 눌렀을 때 위와 같은 화면으로 전환됩니다.

화면에 1.스케치북5라는 항목이 생긴 걸 볼 수 있습니다.

이제 새로운 레이아웃의 설치가 완료된 것입니다. 확인해 보겠습니다.

그림에서처럼 관리자페이지 맨 상단 좌측에 자신의 사이트 주소가 표시됩니다.

그 사이트 주소를 눌러 자신의 사이트 첫화면으로 이동해 봅시다.

 

setp3_19.jpg

~! 위의 그림처럼 보이시나요?

사이트의 레이아웃이 바뀌었습니다.

너무 허전하다구요? 당연하지요.

레이아웃이란 것이 원래 사이트의 기본 골격이나 마찬가지입니다.

여기에서 이제 위젯등을 사용하여 사이트를 다양하게 꾸며 나가야 합니다.

 

setp3_20.jpg

위 그림에서 분홍색갈 부분이 레이아웃 영역이고, 하얀색 부분이 컨텐츠영역입니다.

사용자가 꾸밀 수 있는 부분은 이 컨텐츠 영역입니다.

컨텐츠영역은 아직 아무것도 꾸미지 않았기 때문에 아무것도 표시되지 않고 버튼만 3개보입니다.

 

2) 컨텐츠 영역의 세 개의 버튼

이 버튼중 [캐시파일 재생성]은 여러 가지 모듈이나 위젯들을 지우고 재설치 한 경우 이 버튼을 눌러줘야 사이트에 반영이 됩니다. Xe는 모듈이나 위젯등에서 혹은 DB에서 불러온 파일들을 ./files/cache라는 폴더안에 있는 수 많은 폴더들속에 임시로 저장했다가 호출하는 방식을 취하고 있습니다. 그래서 어떤 파일들을 지워도 캐시폴더속에 여전히 남아 있다가 각 페이지에서 호출하게 되면 불러와 지게 됩니다. 그럴 경우 오류가 생겨날 수도 있지요.

사이트에 별 오류가 없으면 크게 사용할 일이 별로 없는 버튼입니다.

[설정]버튼은 해당 페이지에 대한 설정을 해 줄 때 사용하는 버튼입니다.

[페이지수정] 이 버튼이 가장 많이 사용되는 버튼입니다. 이 버튼은 해당 페이지에 여러 가지 위젯이나 에드온들을 출력할 수 있도록 위젯 페이지를 수정가능한 상태로 바꾸어 줍니다.

버튼들 중에서 [페이지 수정] 버튼을 눌러 페이지를 꾸미는 것은 2부에서 다루겠습니다.

 

2. 메뉴항목의 추가

설치메뉴얼 2부에서는 우선 사이트의 골격을 갖추기 위해서 두 개의 메뉴만 생성했습니다.

사이트에 처음 접속할 때 보여지는 메인 페이지(Home 메뉴와 연결), 그리고 자유게시판(자유게시판 메뉴와 연결)뿐이었습니다. 하지만 진짜 사이트를 꾸밀 때는 이 보다 더 다양한 컨텐츠를 가진 사이트를 꾸미게 되겠지요?

그래서 여기에서 몇 가지 항목들을 더 추가 해 보겠습니다.

복습겸해서 한번 더 따라 해보세요.

(페이지와 게시판을 생성하고, 메뉴에 그것을 추가할 줄 아는 분은 건너 뛰어도 됩니다.)

 

저의 계획은 이렇습니다.

가장 기본적인 메인페이지(Home메뉴와 연결)는 비록 비어있지만 우선 만들어졌습니다.

자유게시판도 생성되어 있습니다.

여기에다가 추가로

공지사항 게시판,

사이트소개 페이지

갤러리 게시판. 이렇게 3가지 항목을 추가하고자 합니다.

 

다시 관리자 페이지로 들어갑니다.

 

setp3_21.jpg

우측 상단에 admin이란 글씨를 클릭해서 관리자 페이지로 이동합니다.

( tip:레이아웃에 따라서는 [관리]혹은 [관리자][admin]버튼이 없는 경우도 있습니다.

그럴 경우에는 http:// 자신의 사이트 주소/index.php?module=admin 라고 주소창에 치면 관리자 페이지로 이동합니다. 그럴 경우를 대비해서 관리자페이지주소를 즐겨찾기에 추가해 두도록 합시다)

 

setp3_22.jpg

관리자화면으로 들어가면 상단 메뉴에서 [확장기능]>[설치된 모듈]로 들어갑니다.

 

setp3_23.jpg

설치된 모듈 페이지에서 목록들이 뜹니다.

우선 공지사항 게시판을 만들어 보겠습니다. 게시판을 만들기 위해서는 게시판 모듈을 선택하면 됩니다.

 

3. 즐겨찾기 사용을 통한 항목 추가 하기

계속 진행하기 전에 편리한 기능 한 가지를 가르쳐 드리겠습니다.

Xe 1.5 에서는 즐겨찾기 기능이 추가되었습니다.

즐겨찾기는 사이트관리자가 가장 많이 사용하는 항목을 즐겨찾기에 추가해 둘 수 있습니다.

사실 Xe 1.5의 관리자 UI가 여러모로 사용하기 불편하긴 하지만, 이 즐겨찾기 기능을 이용하면 불편함을 많이 줄일 수 있습니다. 사용자에 따라 즐겨찾기에 추가하는 목록은 달라질 수 있겠지만, 저는 몇가지를 필수적으로 등록해서 사용하시길 권합니다.

등록방법은 위의 그림에서처럼 모듈들 항목앞에 별표시가 있습니다. 보통때는 모두 회색별모양인데. 그 별을 클릭하면 노란색별로 바뀌면서 즐겨찾기에 추가가 됩니다.

저는 이 즐겨찾기에 모듈들 중에서 쉬운설치, 게시판, 레이아웃, 페이지, 이렇게 네 개의 모듈항목을 추가하시길 추천합니다. 나중에 이 즐겨찾기는 사용자의 취향에 따라 얼마든지 바꿀 수 있으니 우선은 제가 추천하는 네가지 모듈들의 이름앞에 있는 별에 모두 체크해서 노란색으로 바꾸어 주세요.

그림에는 보이지 않는 레이아웃과 페이지는 화면을 아래로 스크롤하여 내리면서 찾아서 별을 노란색으로 클릭해서 바꾸어 주세요.

그런 다음 상단 우측에 있는 즐겨찾기 버튼을 클릭하면 즐겨찾기 항목들이 보여지게 됩니다.

나중에 즐겨찾기에서 빼버리고 싶으면 항목이름옆에 있는 X를 클릭하면 지워집니다.

 

1). 공지 게시판 추가 설치

다시 공지 게시판 설치로 이어 가겠습니다.

즐겨찾기에서 게시판을 클릭합니다.

 

 

setp3_24.jpg

게시판 관리화면이 뜹니다. 지난번에 만들어 둔 자유게시판이 보입니다.

그 항목 아래 우측에 있는 [생성]버튼을 눌러 공지게시판을 만듭니다.

게시판 관리페이지가 뜨면 각 항목을 채워 넣습니다.

지난 번에 자유게시판을 만들때와 방법은 동일합니다.

[모듈이름]은 영문과 숫자로만 가능합니다. notice라고 정하겠습니다.

[모듈분류]는 지난번에 만들어 두었던 myhome을 선택하고

[브라우저 제목]에는 본인이 원하는 내용을 적습니다. 저는 그냥 공지라고 적었습니다.

[레이아웃] 항목에서는 펼침버튼을 눌러 좀 전에 새로 설치한 스케치북5를 선택합니다.

나머지 항목은 각자 알아서 기입하거나 건너 뛰어도 됩니다.

중요한 것은 페이지 맨 하단 우측에 있는 [등록]버튼을 눌러야만 만들어 집니다.

[등록]버튼을 꼭 누릅니다.

 

setp3_25.jpg

정상적으로 등록이 되었으면 [등록되었습니다란]메시지가 게시판관리화면에 뜹니다.

바로 그 메시지 위에 있는 [페이지 목록]을 눌러 페이지를 이동합니다.

 

 

2) 갤러리 게시판 추가 설치

 

setp3_26.jpg

그림에서 보듯이 새롭게 [공지] 게시판이 만들어 진 것이 보일 것입니다.

붉은 동그라미에서보이는 [게시판 등록] 이나 [생성]은 같은 기능의 버튼입니다.

이제 갤러리 게시판을 하나 더 만들겠습니다.

방법은 동일 하므로 설명을 생략합니다.

모듈 이름만 gallery로 지정해 주고 (영문이름이 길면 gall이렇게 지정해 줘도 됩니다)

브라우저 제목을 갤러리로 지정해 주는 것 외에는 공지게시판 만들때와 동일합니다.

직접 해보세요.

 

setp3_27.jpg

갤러리게시판을 정상적으로 만들었다면 위의 그림처럼 목록에 보여지게 됩니다.

여기에서 목록 중 갤러리 게시판의 설정으로 들어가 봅시다.

 

setp3_28.jpg

다시 갤러리게시판 설정화면으로 이동됩니다. 상단메뉴들이 보여집니다.

분류관리, 확장변수,목록설정, 권한관리,추가설정, 스킨관리.등이 보이죠?

이 메뉴들은 게시판을 편리하게 사용할 수 있는 다양한 설정을 할 수 있는 메뉴들입니다.

일일이 설명할 수 없으니 사용자가 직접 하나씩 클릭해서 구경하면서 파악하도록 합시다.

여기에서는 스킨관리 한가지만 살펴보겠습니다.

스킨관리을 눌러 스킨관리화면으로 이동합니다.

 

.

스킨관리화면도 한번 자세히 살펴보면 설정하는 것이 어렵지 않습니다.

여기에서 [기본형태]만 살펴보지요.

예전 제로보드때에는 게시판의 유형들이 다양한 스킨의 형태로 존재해서 필요에 따라 그에 상응하는 스킨을 따로 다운받아 사용했습니다. 하지만 Xe에서는 기본으로 제공되는 게시판에 여러유형의 스킨이 포함되어 있습니다. 기본 목록형에서부터, 웹진형, 갤러리형, 포럼형, 블로그형 등이 있습니다. 이 목록에서 게시판을 자신이 원하는 유형으로 선택하면 됩니다.

지금 갤러리 게시판은 갤러리로 사용할 예정이니 갤러리형으로 선택하겠습니다.

나머지항목들은 사용자가 살펴보면서 적절한 값을 넣어 주시면 됩니다.

설정 후에는 화면 맨 하단 우측에 있는 [등록] 버튼을 잊지 말고 눌러 주세요

[등록]버튼은 눌러도 별도의 메시지창이 뜨지 않습니다. 그냥 화면이 한번 깜빡거리며 화면 맨 위로 이동되면 등록된 것입니다.

 

3) 사이트 소개 페이지 추가하기

이제 사이트 소개 페이지만 만들면 사이트에 필요한 컨텐츠들은 다 만들어지는 군요

이번에도 즐겨찾기 사용하겠습니다.

관리자 페이지 상단 즐겨찾기에서 [페이지]항목을 눌러 페이지관리 페이지로 이동합니다.

 

setp3_29.jpg

위와 같은 화면이 뜹니다. ! 그런데 페이지 관리 페이지인데 그 아래에 좀전에 생성해 둔 gallery 게시판 모듈이 끼어 있네요...(아마도 xe1.5.1의 버그인 것 같습니다.)

이럴 경우에는 즐겨찾기로 들어가지 말고, 관리자 페이지 상단 메뉴 [확장기능]>[설치된 모듈]로 들어가서 [페이지]모듈로 이동하여야 겠네요. 그렇게 하니 아래와 같이 정상화면이 뜹니다.

 

setp3_30.jpg

이제 여기에서 사이트 소개페이지를 만들어 보겠습니다.

꼭 사이트 소개페이지가 아니어도 됩니다. 본인의 사이트에 게시판이 아닌 형태의 일반 페이지 형태로 텍스트와 그림등을 곁들여서 무언가 페이지를 만들고 싶다면 여기에서 만들어 추가하면 됩니다.

 

setp3_31.jpg

페이지관리에서 항목들을 선택하고 기입해 줍니다.

페이지의 종류는 위젯페이지,문서 페이지, 외부페이지 세 종류가 있습니다.

[위젯페이지]는 여러 가지 위젯들을 사용하여 페이지 꾸미기가 가능한 페이지 유형을 말하고

[문서 페이지]는 에디터를 이용하여 문서와 그림으로 꾸미는 페이지 유형을 말합니다.

하지만 위젯페이지에서 문서 페이지를 만들 수 있기 때문에 특별한 이유가 없으면

페이지 생성때는 그냥 항상 위젯페이지를 선택하시기를 추천합니다.

[외부 페이지]는 말 그대로 외부에서 만든 페이지를 링크 형태로 끌어와 쓰는 것을 말합니다.

따라서 이 외부페이지를 선택하려면 먼저 페이지가 html이나 php파일 형태로 만들어져 있어야 합니다.

예전에 많이 쓰던 나모 웹에디터나 드림위버같은 웹디터에서 만든 페이지도 Xe에서 사용이 가능합니다. 이용 방법은 우선 다른 웹디터에서 페이지를 만들어서 FTP로 업로드 해 둡니다.

별도의 폴더를 만들어 관리하면 편하겠지요. 예를 들어 out_page같은 이름으로 만들어 두고

out_page 폴더 안에다 외부에서 만든 페이지를 업로드 해 둡니다.

그 파일의 이름이 a.html 이라고 가정하면, 그 경로만 아래 외부페이지 경로에 적어 주면 됩니다.

저는 [사이트 소개] 페이지를 위젯 페이지로 만들어 보겠습니다.

그림에서처럼 항목들을 선택하고, 기입하고 난 후

맨 하단 우측 에 있는 [저장] 버튼을 꼭 눌러야 합니다.

저장이 되면 화면이 맨 위로 자동으로 올라갑니다.

자 이제 필요한 페이지와 게시판은 다 만들었습니다.

 

4. 새로 만든 항목들과 메뉴 연결.

이제 남은 작업은 새롭게 만든, 사이트 소개페이지, 공지 게시판, 갤러리게시판을 메뉴에 나타나도록 해 주는 것입니다.

 

setp3_32.jpg

관리자 화면 상단메뉴 [사이트]> [사이트 맵]으로 이동합니다.

사이트 맵에서 현재 두 개뿐인 메뉴에 3개의 메뉴를 추가하겠습니다.

메뉴항목 아래 그림에서처럼 메뉴추가 버튼을 클릭합니다.

 

setp3_33.jpg

Add Menu 창이 뜨면 항목들을 기입하고 선택한 후 저장을 누릅니다.

 

setp3_34.jpg

같은 방법으로 공지 메뉴도 추가합니다.

 

setp3_35.jpg

같은 방법으로 갤러리 매뉴도 추가합니다.

 

setp3_36.jpg

메뉴들에 새로운 메뉴들이 생성되었습니다.

이 메뉴들은 순서를 바꿀 수도 있고 하위에 메뉴를 새로 만들어 추가할 수도 있으며

이미 생성된 메뉴를 특정 메뉴의 하위메뉴(2차메뉴)로 집어 넣을 수도 있습니다.

 

이동을 원하는 메뉴 항목의 빈칸을 마우스로 클릭합니다.

클릭한 상태에서 떼지 말고 그대로 드래고 해서 원하는 위치로 이동시킵니다.

 

setp3_37.jpg

메뉴를 옮길 때 주의할 점은 메뉴를 클릭한 상태에서 드래그해서 올리거나 내리다 보면

다른 메뉴의 생상이 회색으로 변할 때가 있습니다.

그 상태에서 마우스에서 손가락을 탁 떼어 버리면, 그 메뉴의 2차 메뉴로 들어가 버립니다.

따라서 다른 메뉴와 같은 1차 메뉴상태를 유지하면서 이동시키려면 위의 그림처럼

다른 메뉴의 색상이 회색으로 바뀌는 것이 아니라 메뉴와 메뉴 사이의 경계의 색상이

회색 줄로 바뀌는 위치가 있습니다. 그 위치에 갔을 때 마우스를 누른 손가락을 탁 떼면

1차 메뉴로 위치가 이동됩니다. 몇 번 연습해 보면 금방 할 수 있습니다.

실수로 2차 메뉴로 들어가도 다시 꺼내어 위치를 바꿀 수 있으니 몇 번 해 봅시다.

 

setp3_38.jpg

이제 최종적으로 메뉴의 위치까지 확정되었으면 [저장]버튼을 누릅니다.

 

setp3_39.jpg

저장을 누른 후에 그림처럼 [수정되었습니다] 메시지가 뜨면 성공입니다.

좀 전처럼 관리자페이지 Xe로고 옆에 있는 자신의 사이트 주소를 클릭해서 이동합니다.

 

setp3_40.jpg

위의 그림처럼 메뉴들이 정상적으로 보이면 성공입니다.

 

메뉴도 추가되었고, 레이아웃도 바꾸어 봤습니다. 이제 남은 작업은 사이트접속시에 만나게 되는 첫화면을 꾸미는 것이 남아 있는데요. 그것에 관해서는 2부에서 이어서 하겠습니다.

사진양이 많아 한꺼번에 업로드가 안되어서 2부로 나누어 진행합니다.

  아래 [part 2]에서 이어집니다. 

  http://www.xpressengine.com/tip/20298402

 

제목 글쓴이 날짜
관리자페이지 게시판목록에서 일괄 권한 설정 안 되는 버그 수정법 [1] sejin7940 2012.05.17
socialxe 페이스북에서 SSL timeout 해결법 및 자체 서버사용시 500 문제해결 [1] spi-ca 2012.05.16
제작시 방화벽문제 때문에 고정IP 주소가 필요할때 [2] sejin7940 2012.05.09
호스팅 PHP 버전 확인 법. [2] file BNU 2012.05.09
XE1.5.0.2 시작 모듈 설정하는 방법 [16] file gayeon 2011.10.01
XE 공식 버튼2 삽입하기 [32] file 웹엔진 2011.05.14
확장변수 쉽게 출력하기 [7] lightnsalt 2008.03.04
모든 원하는 확장변수를 선택해서 최근게시물 위젯에 나타내기 간단팁 [12] jsuimage 2009.10.17
포인트 수정없이 원하는 레벨 아이콘이나 원하는 이미지 출력하기(0.29용) [20] 지연아빠 2008.02.02
모듈 개발하실때 새로운 버전이 나오면 알림 기능 만들기 [4] file 라르게덴 2011.02.24
그누보드 데이터를 XE 로 이전하는 컨버터 입니다. [2] file joyhmbc 2012.04.27
1.5.2.3 업데이트 후 이미지, 아이콘 테두리 생김 현상 없애는 방법 [3] 비밀얌 2012.04.28
1.5.2.3 에서 게시글이 등록이 되는데 ajax XML parser 에러가 나는경우 엑스셀코드 2012.04.28
게시판에 다운로드 횟수 출력하기 (스케치북 게시판 전용) [5] file 숭숭군 2012.04.20
관리자 글 등록시 비번 입력하게 만들기 [5] 우진♡아빠 2010.04.28
게시판 목록에서 바로 첨부파일 다운로드하기 [5] file 요다빈치 2012.03.13
Xe 1.5.1로 사이트 꾸미기 part 1 [25] file 황비 2011.12.04
도라란님의 팁에 추가하여 MP3와 동영상 파일도 막고 싶을 경우.. [4] Canto 2011.07.23
이미지 외부링크 차단하는법 [6] 리리슐츠 2012.04.08
회원가입폼 비밀번호 찾기 질문/답변 삭제및 필수항목 선택 (송동우님 팁) 때린데 또때려 2012.04.08