BLOG ARTICLE xpressengine | 11 ARTICLE FOUND

  1. 2010.05.27 레이아웃 적용
  2. 2010.05.27 페이지 만들기
  3. 2010.05.27 메뉴 만들기
  4. 2010.05.27 게시판 분류관리
  5. 2010.05.27 게시판 모듈 설치

레이아웃 적용

홈페이지/XpressEngine 2010. 5. 27. 16:02
1. 우리는 앞에서 게시판과 페이지를 생성했다. 그러나 앞에서 생성한 아무런 꾸밈이 없는 게시판과 페이지로, 이를 사이트를 적용 운영하기는 다소 무리가 있다. 여기서는 페이지와 게시판 주변에 레이아웃을 적용, 배너 및 로그인 창 삽입 등을 통해 주변부를 꾸미고 메뉴와 같은 기능을 추가하는 방법에 대해 살펴보겠다. 우선 관리자 화면에의 "사이트 설정"에서 "레이아웃"을 클릭한다음 "생성"버튼을 클릭한다.



2. 레이아웃 이름의 콤보박스를 클릭하면 기본으로 제공되는 레이아웃이 보이는데 이 중 "XE 공식 사이트 레이아웃(xe_official)"을 선택한다. 그리고 제목에 "기본레이아웃"이라 입력한다. 참고로 제목은 임의의 이름을 줄 수 있다. 제목을 입력했으면 "다음" 버튼을 클릭한다.



3. 팝업창이 뜨면 "확인" 버튼을 클릭한다.



4. 레이아웃 설정화면이 나오면 각 항목을 적당히 선택한다. 여기서는 상단메뉴와 하단메뉴를 "메인메뉴"로 선택했다. "메인메뉴"는 앞 글(메뉴만들기)에서 만든 메뉴이다. 이는 레이아웃의 상단과 하단에 "메인메뉴"를 출력하도록 설정한 것이다.



5. 팝업창이 뜨면 "확인" 버튼을 클릭한다.



6. 이제 페이지 관리 화면으로 이동한 후 "메인페이지" 설정아이콘을 클릭한다.



7. 페이지 설정화면의 레이아웃 항목의 콤보박스를 클릭하면 위에서 생성한 "기본레이아웃 (xe_official)"이 보이는데 이를 선택한 다음 "저장" 버튼을 글릭한다.



8. 팜업창이 뜨면 "확인" 버튼을 클릭한다.




9. 이제 페이지 관리화면의 페이지 목록에서 "메인페이지"를 클릭하면 페이지가 아래와 같이 변한것을 알 수 있다. 여기서 상단의 메뉴와 하단의 메뉴가 표시되고 있음을 볼 수 있다.



10. 이제 위에서 만든 기본 레이아웃을 "공지사항" 게시판에 적용해보자. 이를 위해 게시판 목록으로 이동한 후 "공지사항" 게시판의 설정 아이콘을 클릭한다.



11. "공지사항" 게시판 설정 화면에서 레이아웃 항목을 "기본레이아웃 (xe_official)"으로 한 후 "등록" 버튼을 클릭한다.



12. 팝업창에 응답한 후 게시판 목록으로 이동 브라우저 제목 "공지사항"을 클릭한다.



13. 그러면 "공지사항" 게시판도 "메인페이지"와 동일한 레이아웃이 적용됐음을 볼 수 있다. 만약 "공지사항"이 아닌 다른 게시판을 클릭해보면 "공지사항"과는 다른 화면을 보게된다. 이는 다른 게시판에는 레이아웃이 적용되지 않았기 때문이다. 다른 게시판에도 "공지사항"과 동일한 레이아웃을 적용하려면 각 게시판의 설정 아이콘을 통해 레이아웃을 적용하면 된다.


'홈페이지 > XpressEngine' 카테고리의 다른 글

새 위젯 설치하기  (0) 2010.06.05
새로운 레이아웃 다운받아 적용하기  (0) 2010.05.27
페이지 만들기  (0) 2010.05.27
메뉴 만들기  (0) 2010.05.27
게시판 분류관리  (0) 2010.05.27
AND

페이지 만들기

홈페이지/XpressEngine 2010. 5. 27. 14:37
1. XpressEngine은 페이지 생성기능을 지원한다. 페이지란 게시판에 올라온 최신 글들의 제목을 표시하거나, 달력, 시계 등을 표시하는 화면을 말하는데, XpressEngine에서는 위젯이라 불리는 화면 구성요소를 쉬운 방법으로 배치하거나 꾸밀 수 있도록 지원한다. 페이지는 관리자 화면에서 "서비스 관리"의 "페이지" 메뉴를 통해 만들 수 있다. 페이지를 만들기 위해 페이지 관리 화면에서 "생성" 버튼을 클릭한다.



2. 페이지 관리 화면에서 모듈이름에 "main", 브라우저 제목에 "메인페이지"를 입력한 후 "저장" 버튼을 클릭한다.



3. 팝업창이 뜨면 "확인" 버튼을 클릭한다.





4. 위 팝업창에 적당히 응답했으면 화면 우측 상단의 "Setting" 버튼을 클릭한다.



5. 시작 모듈(이에 대한 설명은 게시판 만들기편을 참조)을 "notice(공지사항)"에서 현재 새롭게 생성한 "main"으로 변경하기 위해 "선택" 버튼을 클릭한다.



6. 모듈 선택기 창이 뜨면 모듈의 콤보박스를 "페이지"로 선택한 후 우측 "검색" 버튼을 클릭한다. 그러면 화면 아래쪽에 게시판 목록에서 페이지 목록으로 변하며 "메인페이지" 모듈이 나타난다. 이 때 "선택" 버튼을 클릭한다.



7. 그러면 시작모듈이 "메인페이지(main)"로 변경된다. 따라서 기본 주소를 입력했을 때 "메인페이지(main)"가 나타난다. 여기까지 확인 됐으면 "저장" 버튼을 클릭한다.



8. 팝업창이 뜨면 "확인" 번튼을 클릭한다.



9. 페이지 관리화면으로 돌아오면 메인페이지가 만들어졌음을 확인할 수 있다. 이제 브라우저 제목의 "메인페이지"를 클릭하여 만들어진 페이지로 이동해보자.



10. 아래 화면은 메인페이지로 이동한 화면이다. 빈 화면에 "캐시파일 재생성", "설정", "페이지 수정" 버튼만 보이는데 이 버튼을 이용 페이지를 꾸밀 수 있다. 먼저 주황색 "페이지 수정" 버튼을 클릭한다.



11. 위 화면에서 "페이지 수정" 버튼을 클릭하면 아래와 같이 바뀌는데 여기서 "추가" 버튼을 이용해 화면에 다양한 위젯을 추가할 수 있다. 우선 최근에 올라온 글 다섯 개의 제목을 표시하는 위젯을 추가해보자. 이를 위해 "추가" 버튼을 클릭한다.



12. 다음과 같은 속성 조절창이 뜨는데 창이 뜨면 위젯을 "Content 위젯 ver 1.0"으로 선택한 다음 "선택" 버튼을 클릭한다. 그러면 스킨 콤보박스가 변경되는데 "Content 위젯 기본 스킨 (default)"로 선택한 다음 "선택" 버튼을 클릭한다. 각 콤보박스의 내용이 변경되면 반드시 "선택" 버튼을 클릭해야 함에 주의하자. 스킨을 선택했으면 컬러셋이 표시되는데 적당한 값으로 선택한 후 "코드생성"을 클릭한다.



13. "코드생성"을 클릭하면 최근에 올라온 다섯 개의 글 제목이 게시판 이름, 분류, 등록일시 그리고 작성자 정보와 함께 표시되고 있음을 확인할 수 있다. 이제 마무리를 하기 위해 "저장" 버튼을 클릭한다.



14. 팝업창이 뜨면 "확인" 버튼을 클릭하면 마무리 된다.



15. 아래 화면은 간단하게나마 최근에 등록된 다섯 개의 글 목록은 축력하는 페이지를 나타내고 있다. 뒤에서 페이지를 더 보기 좋게 꾸며보도록 하겠다.


'홈페이지 > XpressEngine' 카테고리의 다른 글

새로운 레이아웃 다운받아 적용하기  (0) 2010.05.27
레이아웃 적용  (0) 2010.05.27
메뉴 만들기  (0) 2010.05.27
게시판 분류관리  (0) 2010.05.27
게시판 모듈 설치  (0) 2010.05.27
AND

메뉴 만들기

홈페이지/XpressEngine 2010. 5. 27. 13:15
1. XpressEngine에서 메뉴를 만드는 법에 대해 살펴보자. 메뉴를 만들기 위해서는 "사이트 설정"의 "메뉴"를 클릭한다음 "생성" 버튼을 클릭한다.



2. 메뉴관리 화면에서 적당한 메뉴제목을 정한다음 "등록" 버튼을 클릭한다. 여기서는 제목을 "메인메뉴"로 했다. 메뉴는 서로 다른 제목으로 다수의 메뉴를 생성할 수 있는데 여기서는 하나의 메뉴만 만들어 보겠다.



2. 등록 확인을 위한 팝업창에서 "확인" 버튼을 클릭한다.





3. 메뉴관리 화면에 "메인메뉴"라는 제목의 메뉴가 생성됐으면 환경설정 아이콘(톱니바퀴 모양)을 클릭한다.



4. 환경설정 화면은 아래와 같다. 여기서 녹색 "+" 아이콘을 클릭하면 "메뉴" 아래에 다른 메뉴를 생성할 수 있다. 이제 메뉴 생성을 위해 "+" 아이콘을 클릭해 보자.



5. "+" 기호를 누르면 창이 뜨는데 "메뉴명" 항목에 "공지사항"이라 입력한 뒤 "연결URL"의  "mid 찾기"를 클릭한다.



6. "연결 URL"을 클릭하면 아래와 같이 만들어진 게시판들의 목록을 나타내는 창이 뜨는데 여기서 공지사항 게시판 우측의 "선택" 버튼을 클릭한다. 이는 "공지사항" 메뉴를 클릭했을 때 "공지사항" 게시판으로 이동할 수 있도록 연결한다.
 


7. "연결 URL" 항목에 "notice"가 표시되었다. 이는 "공지사항" 게시판의 모듈이름이다. 이처럼 XpressEngine에 의해 생성된 모듈의 경우 모듈 이름을 "연결 URL"에 입력하면 메뉴를 클릭했을 경우 해당 모듈로 이동할 수 있다. 이제 "notice"를 확인했으면 "저장" 버튼을 클릭한다.



8. 팝업창에서 "확인" 버튼을 클릭한다.



9. 그러면 아래 그림과 같이 "메뉴" 아래에 "공지사항" 이란 이름으로 메뉴가 하나 달렸고 그 우측에 서브메뉴 추가 아이콘(+ 기호), 환경설정 아이콘(톱니바퀴 모양), 삭제 아이콘(- 기호)이 표시된다.



10. 위 과정을 참고하여 아래와 같은 메뉴를 생성하고 각 메뉴를 해당 게시판에 연결한다. 이때 각 게시판은 이미 만들어져 있어야 한다.



11. 위와 같은 형태의 메뉴를 만들었으면 "메뉴" 우측의 "+" 아이콘을 클릭하여 "메뉴명"에 "추천사이트"를 입력하고 "저장" 버튼을 클릭한다. 여기서 "연결 URL"에는 아무런 값도 입력하지 않았는데 이런 경우 실제 완성된 사이트에서 "추천사이트" 메뉴를 클릭해도 페이지 이동이 없고 아무런 변화도 나타나지 않는다.



12. 이제 "추천사이트" 아래에 서브메뉴를 만들기 위해 "추천사이트" 우측의 "+" 아이콘을 클릭한다.



13. 설정창이 뜨면 "메뉴명"에 "안산1대학"을 "연결 URL"에 안산1대학 홈페이지 주소인 "http://www.ansan.ac.kr"를 직접 입력한다. 이처럼 주소를 직접 입력하는 것도 가능하다. 주소를 입력했으면 "저장" 버튼을 클릭한다.



14. 마찬가지로 "추천사이트"에 "인터넷정보"과 메뉴를 추가해보자.



15. "메뉴명"에는 인터넷정보과", "연결 URL"에는 "http://info.ansan.ac.kr"을 입력한다음 저장버튼을 클릭한다.



16. 이제 각 게시판 메뉴에 서브메뉴를 만들어 이 서브메뉴를 클릭하면 해당 게시판의특정 분류를 선택했을 때와 같은 화면으로 이동하도록 해 보겠다.



17. 우선 공지사항 게시판에서 "출사" 분류를 선택하 보자. 그러면 주소창의 주소가 
"http://hostname/~unixid/xe/?mid=notice&category=xx"와 같은 형태로 바뀌는데 이때 "?"를 포함한 뒷 부분의 주소(?mid=notice&category=xx)를 복사한다.



18. 이제 메뉴관리 화면으로 돌아와 "공지사항" 메뉴 우측의 "+" 아이콘을 클릭하여 뜨는 창에 "메뉴명"을 "출사알림", "연결 URL"에는 위에서 복사한 "?" 이후의 주소를 붙여 넣는다. 그런다음 "저장" 버튼을 클릭한다.
 


19. 그러면 "공지사항" 메뉴 아래에 서브메뉴 "출사알림"이 추가된것을 확인할 수 있다. 실제 사이트에서 "출사알림" 메뉴를 클릭하면 "공지사항" 게시판에서 "출사" 분류를 선택했을 때와 같은 화면으로 이동한다.



20. 위 내용을 토대로 아래와 같은 구조의 메뉴를 구성해 보자.


'홈페이지 > XpressEngine' 카테고리의 다른 글

레이아웃 적용  (0) 2010.05.27
페이지 만들기  (0) 2010.05.27
게시판 분류관리  (0) 2010.05.27
게시판 모듈 설치  (0) 2010.05.27
XpressEngine 설치  (0) 2010.05.27
AND

게시판 분류관리

홈페이지/XpressEngine 2010. 5. 27. 11:27
1. XpressEngine의 게시판 모듈은 글을 올릴 때 글을 분류할 수 있는 기능을 제공한다. 아래 그림에서 공지사항 게시판에 글 분류 기능을 추가해 보겠다. 먼저 공지사항의 우측 톱니바퀴 모양의 아이콘을 클릭한다. 이 아이콘은 게시판 설정 변경을 위한 아이콘이다.



2. 화면이 바뀌면 "분류관리" 항목을 클릭한다.



3. 화면이 바뀌면 분류를 추가하기 위해 녹색 + 기호를 클릭한다.



4. 창이 뜨면 분류명에 "출사"라고 입력한 뒤 "저장" 버튼을 클릭한다.



5. 아래 팝업창이 뜨면 "확인" 버튼을 클릭한다.



6. 위 화면에서 "확인" 버튼을 클릭하면 아래 그림과 같이 "출사"가 표시된다.
 


7. 단계 3 ~ 5의 과정을 반복하여 아래 그림과 같이 "출사", "회의", "공동구매", "번개모임", "기타" 순으로 분류가 구성되도록 한다. 분류 구성이 끝났으면 "게시판 목록"으로 이동한다. 만약 분류 순서가 잘못됐을 경우 드래그&드롭으로 순서를 변경하면 된다. 또한 드래그&드롭을 통해 하나의 분류를 다른 분류의 서브분류로 둘 수도 있다.



8. 게시판목록에서 "공지사항" 게시판을 띄우기 위해 "공지사항"을 클릭한다.



9. 아래 화면은 "공지사항" 게시판으로 이동한 그림이다. 아직 분류와 관련된 어떠한 내용도 보이지 않는데 이는 게시판 설정시 분류기능을 활성화하지 않았기 때문이다. 이제 분류기능을 활성화 해 보자.



10. 분류기능을 활성화 하기위해 게시판 목록에서 "공지사항" 게시판 우측의 설정(톱니바퀴 모양) 아이콘을 다시 클릭한다.



11. 화면의 중간 정도에 "분류 사용" 항목(설치한 게시판 모듈에 따라 다를 수 있음에 유의하자.)이 있는데 이 부분을 체크한 다음 저장한다.



12. 아래와 같이 팝업창이 뜨면 "확인" 버튼을 클릭한다.
 




13. 게시판 목록으로 이동한다.



14. "공지사항"을 클릭하여 공지사항 게시판을 띄운다.



15. 공지사항 게시판 화면의 좌측 상단에 콤보박스 형태로 분류표가 출력되고 있음을 확인할 수 있다. 만약 다수의 게시글들이 있는 상태라면 이 콤보박스를 통해 원하는 분류의 글들만 볼 수도록 한다.


'홈페이지 > XpressEngine' 카테고리의 다른 글

레이아웃 적용  (0) 2010.05.27
페이지 만들기  (0) 2010.05.27
메뉴 만들기  (0) 2010.05.27
게시판 모듈 설치  (0) 2010.05.27
XpressEngine 설치  (0) 2010.05.27
AND

게시판 모듈 설치

홈페이지/XpressEngine 2010. 5. 27. 10:39
1. XpressEngine 에서 인터넷 게시판을 운영하려면 게시판 모듈을 설치해야 한다. 게시판 모듈 역시 http://www.xpressegine.com에서 다운받을 수 있다. 아래 그림에서 "Download" 항목을 클릭한다.



2. 화면 좌측의 검색창에 "게시판" 이라고 입력한 후 "Enter" 키를 누른다.



3. 게시판과 관련된 모듈, 스킨 등과 같은 다양한 검색결과가 나오는데 게시판 모듈을 받아야 한다. 다양한 게시판 모듈들이 있는데 여기서는 게시판 모듈로 "게시판 Ver 1.0"을 클릭한다.



4. 다운로드 한 후 적당한 폴더에 압축을 푼다.



5. 압축을 풀었으면 "conf", "lang", "skins" 등과 같은 폴더를 포함한 "board" 폴더를 FileZilla를 이용 서버에 올린다. 이때 "board" 폴더는 서버의 "XpressEngine"이 설치된 폴더(여기서는 xe) 안의 "modules" 폴더에 올려야 한다.



6. 업로드가 완료됐으면 XpressEngine 관리자 화면으로 로그인한다. 게시판 모듈을 올바르게 업로드한 후 로그인하면 아래와 같이 게시판 모듈 우측 동작 항목에 붉은글씨로 "업데이트"라고 나타나는데 이를 클릭하면 게시판 모듈이 XpressEngine에 등록된다.



7. 등록이 완료되면 아래와 같은 팝업창이 뜬다.



8. "확인" 버튼을 클릭하면 아래와 같이 게시판 모듈이 등록된다. 게시판 모듈이 정상적으로 등록됐으면 모듈이름에서 "게시판(board)" 클릭을 통해 게시판 관리 화면으로 이동해 보자.



9. 게시판 관리 화면은 새로운 게시판의 생성, 삭제, 수정을 가능하게 한다. 이제 이 화면에서 "공지사항"이란 이름의 새로운 게시판을 생성해 보자. 새로운 게시판 생성을 위해 "생성" 버튼을 클릭한다.



10. 모듈이름에 "notice"를 브라우저 제목에 "공지사항"을 입력하고 "등록" 버튼을 클릭한다. 여기서 모듈이름은 주소창(URL)에서 게시판을 구분하기위해 사용되며, 브라우저제목은 브라우저 윈도우의 좌측 상단에 표시되는 이름이다.



11. 등록 확인을 위한 팝업창에서 "확인" 버튼을 클릭한다.



12. 등록이 완료되면 등록 완료 확인창이 뜬다.



13. 아래 화면에서 "게시판목록" 항목을 클릭하면 생성된 게시판을 확인할 수 있다.



14. 게시판 관리 화면으로 돌아오면 모듈이름이 "notice", 브라우저제목이 "공지사항"인 게시판이 생성된 것을 확인할 수 있다. 여기서 브라우저 제목 "공지사항" 부분을 클릭하면 해당게시판으로 이동한다. 이제 화면 우측 상단의 "Setting" 항목을 클릭하자.



15. 화면이 바뀌면 "시작모듈" 항목이 있는데 이는 기본 주소(http://hostname/~unixid/xe)를 입력했을 때 어떤 모듈(게시판 또는 페이지)을 뜨게 할 것인지를 지정한다. 여기서는 공지사항 게시판이 기본으로 표시되도록 할 것이다. 이를 위해 연두색 "선택" 버튼을 클릭한다.



16. "선택" 버튼을 클릭하면 모듈선택기가 뜨는데 여기서 공지사항 우측의 "선택" 버튼을 클릭한다.



17. 이제 시작모듈이 "공지사항(notice)"로 설정됐다. 이를 확인한 후 "저장" 버튼을 클릭하자.



18. 수정을 알리는 팝업창이 뜨면 "확인" 버튼을 클릭한다.



19. 이제 브라우저에서 아래와 같은 형식의 주소를 입력해 보자 그러면 공지사항 게시판이 화면에 나타난다.
http://hostname/~unixid/xe


'홈페이지 > XpressEngine' 카테고리의 다른 글

레이아웃 적용  (0) 2010.05.27
페이지 만들기  (0) 2010.05.27
메뉴 만들기  (0) 2010.05.27
게시판 분류관리  (0) 2010.05.27
XpressEngine 설치  (0) 2010.05.27
AND

티스토리툴바