메뉴 건너뛰기

XE Guidebook

조회 수 849 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

 

지금까지 XE를 설치하고, XE Admin의 주요 기능과 그 사용법(..강의가 좀 지루했겠지만 잘 숙지하셔야 할 내용들입니다..)에 대해서 개략적으로 알아 보았습니다. 이번 단원에서는 "XE 혼자 힘으로 내 사이트 만들기" 강좌의 가장 핵심 주제인 "사이트 만들기"에 대해 본격적으로 공부할 것입니다. 이 강좌에서 설명하고 있는 사이트 제작에 이용된 모든 예시와 내용들은, 실제적으로 이 사이트가 만들어지는 처음부터 끝까지의 과정을 설명하는 콘텐츠들로 구성되어 있으므로, 여러 분들께서는 각자가 생각하는 사이트의 컨셉과 콘텐츠를 미리미리 준비하여 강의에 임해 주시기 바랍니다.
 
www.xeguidebook.com 사이트는 XE를 이용하여 사이트 만드는 방법을 배우고자 하는 분들, 특히 처음 XE를 접하거나, 스스로 컴맹이라고 자처하는 초보 분들을 비롯하여 웹 프로그래밍 관련하여 전문적인 지식을 체계적으로 배우고 싶은 모든 분들에 이르기까지, XE 기본 사용법과 XE 활용 고급 테크닉, 그리고 XE 웹 제작ㆍ운영에 꼭 필요한 웹 프로그래밍과 디자인 관련 초급 지식을 실전적으로 습득하는데 조금이나마 도움을 주고자 하는 목적에서 기획되었습니다.
 
단순히 원론적인 개념 설명이나 사용법 설명에만 그치지 않고, 실제 운영하고 있는 www.xeguidebook.com의 구축 과정을 처음부터 끝까지 하나하나 설명하는 식으로 강좌 내용을 구성하였기 때문에, 본 강의에 충실하여 열심히 따라오신 분들은 누구나 XE를 마스터할 수 있을 것이며, 부족한 강좌 내용에 대해서는 저의 일천한 지식을 너무 나무라지 마시고, 본인 스스로의 연구와 노력을 조금만 보태신다면 원하는 사이트를 만들고 운영할 수 있는 충분한 능력을 갖출 수 있으리라 장담합니다.
 
 
● XE로 만들어진 사이트의 구조
 
앞 단원 "XE 설치하기"에서 배운 바와 같이, XE가 제대로 설치되었다면 웹브라우저 주소창에 도메인을 입력한 후 엔터키를 치면 아래와 같은 화면이 나올 것이다. XE 로고와 함께 보여지는 이 화면이 바로 XE로 만들어진 내 최초의 사이트라는 것도 이미 설명한 바 있다.
 
"XE로 사이트만들기"란 곧 현재 보이는 화면을 "XE Admin"에서 제공하는 기능을 이용하여 모듈의 선택, 변경, 수정, 설정 작업을 수행함으로써 원하는 사이트의 모습으로 수정, 재편집하는 과정으로 간단히 이해할 수 있다. 따라서 아래 그림 안에서 각 주제별로 설명이 붙은 내용들을 차례대로 해당 기능을 사용하여 작업하면 사이트를 만들 수 있게 될 것이다.
 
사이트를 본격적으로 만드는 작업에 들어가기에 앞서, 먼저 XE로 만들어진 사이트의 구조를 전체적으로 살펴보면서, 어떤 모듈이 어떤 기능의 동작에 의하여 이와 같은 사이트의 구현이 이루어지는지에 대하여 그 연동관계를 잘 알아 두도록 하자.

  

0-1 XE로 만들어진 최초의 내 사이트 2.jpg

 

XE 설치 후 처음 보여지는 화면의 구조는 다음과 같은 구성요소로 설정되어 있다.
 
▶ 웹브라우저 

 - 도메인 : http://xeguidebook.com/
 - 브라우저 제목 : Welcome Page 
 
▶ 레이아웃 : 기본 레이아웃(default) 연결 
 
① 레이아웃 헤더 영역
 - 사이트제목
 - GNB(Global Navigation Bar) : Welcome menu 사이트맵 연결
   
② 레이아웃 이미지영역
 
③ 레이아웃 콘텐츠 영역
 - Welcome page : 위젯페이지(page_ijmu02) 모듈 연결
 
④ 레이아웃 푸터 영역
 
 
● XE Admin 기능과 사이트의 모듈 연동관계
 
웹브라우저 주소창에 도메인을 입력하여 사이트에 접속하게 되면, 이 사이트에 처음 접속시 보여지게 될 홈페이지-"Welcome Page라는 페이지모듈(page_ijmu02)"에 연결된다.
 
"Welcome Page라는 페이지 모듈"은 XE에서 제공하는 "기본 레이아웃(default)"이 연결되어 있으며, "③ 레이아웃- 콘텐츠 영역" 부분에 Welcome Page라는 페이지 모듈"이 삽입되어 나타난다,
 
"① 레이아웃 - 헤더영역"의 GNB는 XE Admin [사이트 메뉴 편집] 기능에서 생성된 "사이트맵 Welcome menu"와 연결되어 있으며, GNB의 "[Welcome Page] 메뉴"를 클릭하며 하이퍼링크로 "Welcome Page(page_ijmu02)"를 불러 온다.
 
 
● "XE 혼자 힘으로 내 사이트 만들기" 실행 과제
 
▶ 스토리 보드 만들기
 
▶ 메뉴 구조 만들기와 바꾸기, 페이지 모듈과 게시판 모듈 생성하기
 
  - XE Admin "[사이트 제작/편집] > [사이트 메뉴 편집]"에서 메뉴 생성과 구조를 변경할 수 있다.  
  - 새로 생성된 사이트맵을 레이아웃에 적용하려면, XE Admin "[고급] > [설치된 레이아웃]"에서
    해당 생성된 레이아웃의 "설정" 버튼을 클릭하여 매뉴 옵션을 바꾸어 주어야 한다.
 
▶ 사이트 제목 바꾸기
 
  - XE Admin "[설정] > [일반]"에서 사이트 제목을 바꿀 수 있다.
 
▶ 초기화면 바꾸기
 
  - XE Admin "[사이트 제작/편집] > [사이트 메뉴 편집]"에서 초기화면을 바꿀 수 있다.  
 
▶ 레이아웃 바꾸기
 
  - XE Admin "[사이트 제작/편집] > [사이트 디자인 설정]"에서 레이아웃 디자인을 바꿀 수 있다.  
  - 페이지 모듈에 연결되어 있는 레이아웃을 바꾸려면 페이지의 하단에 있는 "설정" 버튼을 클릭하여 레이아웃을 바꿀 수 있다.
  - 현재 사용하고 있는 레이아웃의 옵션 설정은 XE Admin "[고급] > [설치된 레이아웃]"에서
    해당 레이아웃의 "설정" 버튼을 클릭하여 옵션을 바꾸면 된다. 
 
▶ 게시판 스킨 바꾸기와 설정하기
 
  - 게시판 모듈 페이지에서 "설정" 버튼을 에 클릭하여 원하는 스킨으로 바꾸고 게시판 모듈을 꾸밀 수 있다. 
 
▶ 페이지 꾸미기
 
  - 화면에 출력되는 페이지의 하단에 있는 "페이지수정" 버튼을 클릭하여 페이지 모듈을 꾸밀 수 있다. 
 
▶ 모듈 설치하기
 
  - 필요한 모듈의 설치는 XE Admin "[고급] > [쉬운 설치]"를 이용하여 설치할 수 있다.