1. 이번 글에서는 레이아웃 영역에 설치된 위젯을 추가하는 방법에 대해 살펴보겠다. XpressEngine에서 생성한 페이지는 아래 그림에서와 같이 페이지 영역과 레이아웃 영역으로 구분할 수 있다. 페이지 영역에 위젯을 추가하는 방법은 페이지 수정 버튼을 이용 몇번의 마우스 조작만으로도 위젯을 추가할 수 있지만 레이아웃 영역에 위젯을 추가하려면 페이지 영역에 위젯을 추가하는 것 보다 복잡한 과정을 거치며 또한 html, javascript, css 등에 대한 약간의 지식이 필요하다. 그러면 아래 그림에서와 같이 기본레이아웃의 분홍색으로 된 부분에, 앞 글에서 설치한 "플래시시계(DroArc)" 위젯을 추가해 보겠다.



2. 관리자 화면의 레이아웃 관리 화면에서 "기본레이아웃" 설정 아이콘을 클릭한다.
 


3. "기본레이아웃" 설정 화면의 "레이아웃 편집" 탭을 클릭한 후 "HTML" 코드 아래 부분에 보이는 "플래시 디지털 시계"를 클릭한다.



4. 플래시 디지털 시계 설정창이 뜨면 위젯, 스킨, 컬러셋을 설정한 다음 화면 하단의 "코드생성" 버튼을 클릭한다. 그러면 그림에서 파란색으로 된 부분처럼 코드가 생성되는데 이 코드를 복사한 후 창을 닫는다.



5. 이제 HTML 코드부분의 적당한 위치(아래 그림 참조)에 복사한 코드를 붙여 넣고 저장버튼을 클릭한다. 여기서는 플래시 시계를 좌측 컬럼의 중앙에 오도록 하기 위해 복사한 코드 앞, 뒤로 <center>, </center> 태그를 적용했다. 레이아웃에 따라서는 코드 생성 후 "레이아웃 편집"이 아닌 "레이아웃 설정" 화면에서 코드를 추가해야하는 경우도 있다.



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



7. 위 과정이 올바르게 진행됐으면 1번 화면에서 새로고침을 하면 아래와 같이 플래시 시계가 출력된다.

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

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