소개
이번 강좌는 Orchard 테마에서 사용할 디자인 시안을 순수 HTML과 CSS 레벨에서 작성하는 방법을 제공하고자 합니다.
절차
1. Orchard를 클리어 버전으로 하나 생성합니다.
2. 위젯 메뉴의 TheHomepage 레이어를 선택한 후 아래 그림처럼 Header 영역(Zone)에 [Add] 버튼을 클릭하여 [Html Widget] 편집 메뉴로 들어갑니다.
3. [Html Widget]을 선택합니다.
4. 간단하게 제목에 “Header 영역”을 입력하고 내용에도 “Header 영역”을 입력하여 해당 위젯 및 영역의 위치를 가늠합니다.
5. 위의 2~4단계를 반복해서 TheThemeMachine 테마의 모든 영역에 위젯을 등록하여 전체 레이아웃을 아래 그림과 같이 살펴볼 수 있도록 합니다.
6. 관리자로 로그아웃 하면 아래와 같이 순수 HTML레벨로 사이트가 보여집니다.
7. 웹 브라우저에서 마우스 오른쪽 버튼을 클릭하여 [소스 보기] 메뉴를 클릭합니다.
8. 순수 HTML 레벨의 소스가 보여집니다.
9. WebMatrix로 이동해서 [MainPage시안.html]과 같이 HTML 문서를 하나 만들고, 위에 있는 소스를 복사해서 붙여넣기 합니다.
10. 아래 소스에서 바꿔줄 부분은 단 한군데입니다. CSS의 경로가 기본값으로 절대 경로로 잡혀져 있습니다.
11. 절대 경로로 잡혀져 있는 CSS 경로를 상대 경로로 설정합니다.
12. 완성된 MainPage시안.html 문서를 웹브라우저로 실행해 봅니다. 아래 그림과 같이 순수 HTML과 CSS 그리고 추가 이미지만을 가지고 하나의 레이아웃이 만들어졌다면 이를 디자이너/퍼블리셔 레벨에서 좀 더 가꿔서 다시 개발자가 테마화시켜서 사용할 수도 있습니다.
마무리
이번에 생성한 순수 HTML 문서를 가지고 테마화하는 작업은 약간은 복잡합니다. 이러한 절차는 아래 강좌(영문)를 추가로 살펴보기 바랍니다.
http://orchardproject.net/docs/Writing-a-new-theme.ashx
끝.
관련글
본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)