Web Site Designer에서 페이지 템플리트 적용

사용자 웹 사이트의 모든 웹 페이지에 있는 공통 요소를 제어하려면 페이지 템플리트를 사용하십시오. 페이지 템플리트를 사이트에 적용하고 나면, 개별 페이지를 여러 번 변경하는 대신 템플리트에서 한 번만 변경하여 추가 디자인 변경 노력을 최소화할 수 있습니다.

전제조건:
  1. 웹 프로젝트 작성
  2. 웹 사이트 작성
  3. Web Site Designer에 웹 페이지 작성 또는 웹 사이트에 기존 웹 페이지 추가

사이트 전체의 일관성을 유지하려면 Site Designer 도구에서 제공하는 페이지 템플리트 기능을 사용할 것을 권장합니다. 전체 웹 사이트의 룩앤필을 편집하기 위해서는 Web Site Designer가 제공됩니다. 페이지 템플리트를 사용하여 룩앤필이 사이트 전체에서 일관되게 할 수 있습니다. 페이지 템플리트에는 Web Site Designer 도구를 사용하여 작성하는 웹 사이트 탐색(예: 탐색줄, 탐색 추적 및 탐색 메뉴)이 포함됩니다.

페이지 템플리트를 적용하려면 다음을 수행하십시오.

  1. 웹 Perspective의 프로젝트 탐색기 보기에서 웹 프로젝트를 펼치십시오.
  2. 웹 사이트 탐색을 두 번 클릭하여 사이트 개발자에서 웹 사이트를 여십시오.
  3. CTRL을 누르고 페이지 아이콘을 눌러 페이지 템플리트를 적용할 페이지를 선택하십시오.
  4. 마우스 오른쪽 단추를 눌러 페이지 템플리트 > 템플리트 적용을 선택하십시오. 페이지 템플리트 적용 마법사가 열립니다.
  5. 마법사의 페이지 템플리트 지정 페이지에서 사용하려는 페이지 템플리트 유형을 선택하십시오.
    1. Rational® Developer에서 제공하는 샘플 템플리트에서 페이지 템플리트를 선택하려면 다음을 수행하십시오.
      1. 샘플 페이지 템플리트 단일 선택 단추를 클릭하십시오.
      2. 작은 그림 표시에서 사용하려는 페이지 템플리트의 작은 그림을 클릭하십시오.
      3. 다음을 클릭하십시오.
    2. 사용자 정의 페이지 템플리트를 선택하려면 다음을 수행하십시오.
      1. 사용자 정의 페이지 템플리트 단일 선택 단추를 클릭하십시오.
      2. 찾아보기를 클릭하여 페이지 템플리트의 위치를 지정하십시오.
      3. 작은 그림 표시에서 사용하려는 페이지 템플리트의 작은 그림을 클릭하십시오.
      4. 다음을 클릭하십시오.
    제한사항: 최소한 하나 이상의 컨텐츠 영역이 있는 페이지 템플리트를 선택해야 합니다.
  6. 페이지 템플리트를 적용할 페이지를 하나만 선택한 경우, 선택한 페이지가 요소 맵핑의 기준 모델로서 사용됩니다. 이 단계는 건너뛰고 이 주제의 나머지 단계를 계속 수행합니다. 페이지 템플리트를 적용할 페이지를 여러 개 선택한 경우, 요소 맵핑의 모델로 사용할 웹 페이지를 선택해야 합니다. 마법사의 페이지 템플리트 적용 방법을 지정할 웹 페이지 선택 페이지에서 웹 페이지의 컨텐츠 영역을 페이지 템플리트의 컨텐츠 영역으로 맵핑하십시오. 맵핑에 사용할 페이지를 선택하십시오. 다음을 클릭하십시오.
    제한사항:
    • 페이지 템플리트에서 인코딩이 다른 페이지는 선택할 수 없습니다.
    • 이미 페이지 템플리트가 있는 페이지는 선택할 수 없습니다.
    • 프레임을 사용하는 페이지는 선택할 수 없습니다.
    • 페이지 템플리트가 XML 스타일 JSP로 설명되지 않는 경우, XML 스타일 JSP로 설명되는 페이지는 선택할 수 없습니다.
    • 페이지 템플리트가 XML 스타일 JSP로 설명되는 경우, XML 스타일 JSP로 설명되지 않는 페이지는 선택할 수 없습니다.
  7. 마법사의 페이지 템플리트로 페이지 요소 맵핑 페이지에서, 페이지 템플리트의 페이지 컨텐츠 표시 방법을 지정하십시오.

    컨텐츠 영역의 소스는 페이지 템플리트 컨텐츠 영역 목록에 정의됩니다. 이전 마법사 페이지에서 선택한 웹 페이지의 요소는 페이지 요소 목록에 표시됩니다. 페이지 템플리트 컨텐츠 영역 목록에서 컨텐츠 영역을 선택하십시오. 페이지 요소 목록에서, 컨텐츠 영역을 맵핑하려는 요소를 선택하십시오. 그런 다음, 맵 단추를 클릭하십시오. 각 컨텐츠 영역에 대해 이 작업을 수행하십시오. 페이지 템플리트의 컨텐츠 영역과 웹 페이지의 요소가 연관됩니다.

    예를 들어, 샘플 페이지 템플리트 중 하나를 선택하면 헤드 영역본문 영역 컨텐츠 영역이 사전 정의됩니다. 본문 영역 컨텐츠 영역을 선택하여 HEAD(시작 HEAD 태그와 끝 HEAD 태그 사이의 내용)와 연관시킬 수 있습니다. 페이지 템플리트에서 헤드 영역 컨텐츠 영역에 대해 정의된 속성은 기존 웹 페이지의 HEAD 요소에 적용됩니다.
    페이지 템플리트 컨텐츠 영역을 페이지 요소에 맵핑시키는 예제
    미리보기 상자는 현재 페이지를 표시하고 일단 템플리트가 적용되면 페이지가 나타나는 모양을 미리 보여줍니다.

    팁:
    • 페이지 요소 목록에서 페이지 요소를 선택하면 현재 페이지의 미리보기에서 특정 요소를 강조표시할 수 있습니다.
    • 현재 페이지의 미리보기를 마우스 오른쪽 단추로 누른 후 팝업 메뉴에서 원래 크기 표시를 선택하면 확대된 미리보기를 볼 수 있습니다.
    페이지 템플리트를 적용할 페이지를 하나만 선택한 경우, 완료를 클릭하십시오. 템플리트가 웹 페이지에 적용됩니다. 페이지 템플리트를 적용할 페이지를 여러 개 선택한 경우, 다음을 클릭하십시오.
  8. 마법사의 페이지 템플리트가 적용될 페이지 선택 페이지에서, 페이지 템플리트를 적용하려는 웹 페이지를 선택하십시오. 웹 페이지가 이미 연관된 페이지 템플리트를 가지고 있을 경우, 두 번째 페이지 템플리트를 적용할 수 없습니다. 또한 웹 페이지에서 프레임을 사용하는 경우, 페이지 템플리트를 적용할 수 없습니다.
    주: 페이지 템플리트는 마법사의 페이지 템플리트 적용 방법을 지정할 웹 페이지 선택 페이지에 설정된 스펙을 사용하는 모든 선택 웹 페이지에 적용됩니다. 다른 웹 페이지에 동일한 요소가 있는 경우, 해당 요소는 올바른 컨텐츠 영역에 삽입됩니다. 다른 웹 페이지에 동일한 요소가 없는 경우, 삽입할 영역을 펼친 후 컨텐츠 영역에 삽입하십시오. 마법사를 완료한 후 불필요한 요소를 삭제하여 웹 페이지를 수동으로 변경할 수 있습니다.
    제한사항: 웹 페이지 인코딩이 페이지 템플리트의 인코딩과 다른 경우, 페이지 템플리트를 적용할 수 없습니다. 페이지 템플리트 또는 웹 페이지가 XML 스타일 JSP로 설명되는 경우, 페이지 템플리트를 적용할 수 없습니다. 페이지 템플리트를 적용할 수 없는 페이지일 경우, 마법사의 페이지 템플리트를 적용할 페이지 목록에 오류 메시지가 표시됩니다.
  9. 완료를 클릭하십시오. 템플리트가 웹 페이지에 적용됩니다.
Faces를 포함하는 페이지 템플리트 적용
중요사항:
  • Faces 모델을 가지고 있는 페이지 템플리트는 Faces 페이지와 비Faces 페이지에 동시에 적용될 수 없습니다. Faces 모델 페이지 템플리트를 적용하려면, 먼저 템플리트를 Faces 페이지에 적용한 후 템플리트를 비Faces 페이지에 하나씩 적용하십시오.
  • "Faces 구성요소를 포함하는 템플리트" 모델을 사용하는 페이지 템플리트를 적용하고 나면, 서버에서 페이지를 실행할 수 있도록 비Faces JSP에서 Servlet URL을 설정해야 합니다. Servlet URL을 설정하려면 기본 메뉴에서 편집 > Servlet URL > Servlet URL 설정을 클릭하십시오.
중요사항: JSP-*.jtpl 샘플 페이지 템플리트를 적용하거나 JSP 탐색줄을 삽입하면 다음 오류 메시지가 문제점 보기에 표시됩니다.
  • 끊어진 링크 - http://java.sun.com/jsp/jstl/core
  • 끊어진 링크 - http://www.ibm.com/siteedit/sitelib
  • 끊어진 링크 - com.ibm.etools.siteedit.sitelib.core.SiteNavBean
  • JspCompile: 패키지 com.ibm.etools.siteedit.sitelib.core가 없음
이 오류 및 경고를 제거하려면 프로젝트 탐색기 보기에서 웹 프로젝트를 마우스 오른쪽 단추로 클릭하고 유효성 검증 실행을 선택하십시오.
관련 개념
Cascading Style Sheet(CSS) Designer
관련 태스크
페이지 템플리트에 컨텐츠 추가
페이지 템플리트에 동적 탐색 추가
탐색 오브젝트의 모양 변경
탐색 스펙 편집
사용 조건 | 피드백
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.