Partager via

[Orchard 강좌] 30. Orchard CMS 테마 시안 잡기(순수 HTML/CSS 레벨)

  • Article

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Orchard로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 강좌는 Orchard 테마에서 사용할 디자인 시안을 순수 HTML과 CSS 레벨에서 작성하는 방법을 제공하고자 합니다.

절차

1. Orchard를 클리어 버전으로 하나 생성합니다.

image_thumb.png

2. 위젯 메뉴의 TheHomepage 레이어를 선택한 후 아래 그림처럼 Header 영역(Zone)에 [Add] 버튼을 클릭하여 [Html Widget] 편집 메뉴로 들어갑니다.

image_thumb_1.png

3. [Html Widget]을 선택합니다.

image_thumb_2.png

4. 간단하게 제목에 “Header 영역”을 입력하고 내용에도 “Header 영역”을 입력하여 해당 위젯 및 영역의 위치를 가늠합니다.

image_thumb_3.png

5. 위의 2~4단계를 반복해서 TheThemeMachine 테마의 모든 영역에 위젯을 등록하여 전체 레이아웃을 아래 그림과 같이 살펴볼 수 있도록 합니다.

image_thumb_4.png

6. 관리자로 로그아웃 하면 아래와 같이 순수 HTML레벨로 사이트가 보여집니다.

image_thumb_5.png

7. 웹 브라우저에서 마우스 오른쪽 버튼을 클릭하여 [소스 보기] 메뉴를 클릭합니다.

image_thumb_6.png

8. 순수 HTML 레벨의 소스가 보여집니다.

image_thumb_7.png

9. WebMatrix로 이동해서 [MainPage시안.html]과 같이 HTML 문서를 하나 만들고, 위에 있는 소스를 복사해서 붙여넣기 합니다.

image_thumb_8.png

10. 아래 소스에서 바꿔줄 부분은 단 한군데입니다. CSS의 경로가 기본값으로 절대 경로로 잡혀져 있습니다.

image_thumb_9.png

11. 절대 경로로 잡혀져 있는 CSS 경로를 상대 경로로 설정합니다.

image_thumb_10.png

12. 완성된 MainPage시안.html 문서를 웹브라우저로 실행해 봅니다. 아래 그림과 같이 순수 HTML과 CSS 그리고 추가 이미지만을 가지고 하나의 레이아웃이 만들어졌다면 이를 디자이너/퍼블리셔 레벨에서 좀 더 가꿔서 다시 개발자가 테마화시켜서 사용할 수도 있습니다.

image_thumb_11.png

마무리

이번에 생성한 순수 HTML 문서를 가지고 테마화하는 작업은 약간은 복잡합니다. 이러한 절차는 아래 강좌(영문)를 추가로 살펴보기 바랍니다.

https://orchardproject.net/docs/Writing-a-new-theme.ashx

끝.

관련글