RedPlus 개인 블로그

시삽: 레드플러스 님 
게시판 이동:
 제목 : 30. Orchard CMS 테마 시안 잡기(순수 HTML/CSS 레벨)
글번호: 280
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2011/06/14 오전 5:38:09 (2011/06/14 오전 5:38:09 수정)
조회수: 4529

 

소개

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

 

절차

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

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

image

 

마무리

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

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

 

끝.

 

관련글

 

 

본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.

오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 1. Umbraco 소개 - Administrator 2011-06-19 4860
현재글 30. Orchard CMS 테마 시안 잡기(순수 HTML/CSS 레벨) - Administrator 2011-06-14 4529
다음글 29. Orchard CMS를 SQL Server R2에 설치하기 - Administrator 2011-06-14 4378
관련 페이지 리스트
numtitlenamedateview
388 C 언어에서 값 전달과 참조 전달(Call By Value and Call By Re... Administrator 2023-03-09 1458
387 병합 알고리즘 순서도 2022-10-22 2121
386 C 언어 강의: scanf를 엔터키를 기준으로 여러 행으로 값을 입력 받기 Administrator 2022-01-09 3504
385 C 언어: scanf 사용해서 표준 입력인 콘솔로부터 나이를 정수로 입력 받아 출력 Administrator 2022-01-07 2524
384 Java 코드 샘플 - Function 인터페이스로 람다 식 만들기 Administrator 2022-01-04 2435
383 C# 코드 샘플 - 널 조건부 연산자 사용하기 Administrator 2022-01-02 2468
382 C# 코드 샘플 - 널 병합 연산자와 default 키워드 Administrator 2022-01-02 2400
381 C# 코드 샘플 - 널 병합 연산자로 문자열 변수의 NULL 값 확인하기 Administrator 2022-01-02 2314
380 C# 강의 - 14세 미만 체크 메서드 구현 Administrator 2022-01-01 2349
379 C 언어 천 단위 콤마 찍기 thousands_separator.c Administrator 2021-12-30 3143
378 for 문 순서도 - for 문(for loop) 순서도(flowchart) Administrator 2021-12-28 4988
377 C 언어 코드 샘플 - 전처리기 - 조건부 컴파일 Administrator 2021-12-27 2346
376 C 언어 코드 샘플 - 전처리기 - 매크로 함수 Administrator 2021-12-27 2355
375 http-server 설치하기 - 로컬 루프백 주소로 웹페이지 실행 2021-12-27 2366
374 C 언어 코드 샘플 - N명의 학생의 점수를 입력받아 1차원 배열에 저장 후 총점 구... Administrator 2021-12-27 2379
373 Java 코드 샘플 - 두 수의 합을 구하는 함수 Administrator 2021-12-26 2293
372 C 언어 코드 샘플 - 두 수의 합을 구하는 함수 Administrator 2021-12-26 2317
371 C# 교과서 강좌 - LINQ - Select 확장 메서드에 익명 형식 사용하기 Administrator 2021-12-26 2385
370 C# 교과서 강의 - LINQ - Select 확장 메서드를 사용하여 새로운 형태로 ... Administrator 2021-12-26 2340
369 C 언어 코드 샘플 - static-shared - 정적(공유) 변수 사용하기 Administrator 2021-12-26 2361
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home