연습 2.2: 포털 사이트 사용자 정의

시작하기 전에 연습 2.1: 포틀렛 응용프로그램을 표시할 새 포털 작성을 완료하십시오.

새 주제 작성

포털 응용프로그램을 작성할 때, Portal Designer에서 브랜드 새 주제를 작성할 것을 선택할 수 있습니다. 주제는 포털 응용프로그램의 전체 모양을 제공하며 이미지, 탐색, 도구 모음 및 페이지 레벨 비주얼 효과와 같은 많은 포털 디자인 요소를 통합합니다. 이 학습서에서 개발한 포털 사이트에 대해 새 주제를 작성하려면 다음을 수행하십시오.

  1. 메뉴 표시줄에서 파일 > 새로 작성 > 주제를 선택하십시오.
  2. 제목 필드에 경매를 입력하십시오.
  3. 스크롤하여 소스 주제가 될 통합 주제를 선택하십시오. 스크래치에서 필요한 모든 주제 요소를 작성하지 않아도 되도록, 기존 주제를 기초로 새 주제를 작성하는 것이 더 쉽습니다.
  4. 다음을 클릭하십시오.
  5. 사용 가능한 스킨 목록에서 음영 스킨을 선택하고 기본 스킨으로 설정을 클릭하여 음영이 새 경매 주제의 기본 스킨이 되도록 하십시오.

    스킨은 포털 페이지 내에서 각 포틀렛 주변에 있는 경계입니다. 포털의 전체 모양에 적용되는 주제와는 달리, 스킨은 포털 응용프로그램에 삽입하는 각 포틀렛의 모양으로 제한됩니다. 기본적으로, 주제마다 선택한 제한된 스킨만 사용할 수 있습니다.

  6. 완료를 클릭하십시오.
  7. 아웃라인 보기에서 요소 > 주제를 펼치고 경매를 선택하십시오.
  8. 특성 보기에서 기본값 선택란을 선택하여 새 주제를 포털 응용프로그램에 적용하십시오.

    변경사항이 다음과 같이 즉시 포털 구성에 적용됩니다.
    새 주제가 있는 포털 구성

  9. 포털 구성을 저장하십시오.

이 절에서는 Page Designer와 CSS Designer를 사용하여 경매 포털 응용프로그램에서 스타일, 주제 및 스킨을 갱신합니다.

현재 주제의 배너 이미지 변경

경매 포털에 대한 기본 주제에서 배너 이미지를 바꾸려면 다음을 수행하십시오.

  1. 먼저 새 배너 이미지를 프로젝트로 가져와야 합니다.
    1. 메뉴 표시줄에서 파일 > 가져오기를 선택하십시오. 가져오기 대화 상자가 표시됩니다.
    2. 가져오기 소스 선택 아래에서 파일 시스템을 클릭하십시오.
    3. 다음을 클릭하십시오.
    4. 여러 Rational 제품이 서로 다른 설치 대상 위치를 사용하므로 제품의 사용자 인터페이스에서 나가서 새 배너 이미지를 포함하는 플러그인을 찾아야 합니다. 파일 검색 도구를 사용하여 로컬 파일 시스템의 제품 설치 경로에서 com.ibm.etools.portal.examples.application_6.0.0 플러그인 폴더를 찾으십시오.
    5. 가져오기 마법사로 돌아가서 디렉토리 필드 옆에 있는 찾아보기를 클릭하십시오. 다음 디렉토리를 탐색하십시오.
      x:\com.ibm.etools.portal.examples.application_6.0.0\samples
      여기서, x:는 컴퓨터에서 com.ibm.etools.portal.examples.application_6.0.0 플러그인이 있는 경로입니다.
    6. auction.gif를 가져오기 대상으로 선택하고 확인을 클릭하십시오.
    7. 폴더로 가져오기 필드 옆에 있는 찾아보기를 클릭하여 AuctionPortal/PortalContent/themes/html/Auction을 지정하십시오.
    8. 완료를 클릭하십시오.

      마법사는 파일을 사용자 작업공간으로 가져옵니다.

  2. AuctionPortal 프로젝트의 포털 구성 파일이 열려 있을 때 Portal Designer 팝업 메뉴에서 스타일 편집을 선택하십시오. 그러면 Styles.css 파일이 CSS Designer에 열립니다. Styles.css는 응용프로그램의 기본 주제에 대한 기본 스타일시트입니다.

    CSS Designer는 CSS 파일에 대해 정의된 두 가지의 스타일 보기를 제공합니다. 하나는 웹 자원의 브라우저 렌더링에 표시되는 대로 스타일 규칙의 가시화된 예제를 제공하는 미리보기이고(왼쪽에 표시), 다른 하나는 CSS 파일의 텍스트 버전을 표시하는 소스 보기입니다(오른쪽에 표시). 두 보기 중 하나를 사용하여 스타일을 편집할 수 있습니다.

  3. 미리보기에서 스크롤하여 배너 배경 아이콘을 선택하십시오.
  4. 팝업 메뉴에서 스타일 규칙 편집[.wpsToolbarBannerBackground]을 선택하십시오.
  5. 스타일 특성 설정 대화 상자의 왼쪽에서 배경 특성을 클릭하십시오.
  6. 이미지 필드에 ../../auction.gif를 입력하십시오.
    스타일 특성 설정 대화 상자
  7. 확인을 클릭하십시오.
  8. CSS 파일을 저장하고 CSS Designer를 닫으십시오. Portal Designer에 열린 페이지에 새 배너 이미지가 적용됩니다.

    새 배너

  9. 포털 구성 파일을 저장한 후 닫으십시오.

Page Designer를 사용하여 헤더 영역의 도구 모음 레이아웃과 같은 다양한 주제 변경사항을 수행할 수 있습니다. 주제 및 연관된 스킨의 레이아웃(및 스타일)을 편집할 수 있습니다. 변경사항은 주제의 default.jsp 파일, 연관된 스킨의 control.jsp 파일 및 기타 관련된 JSP 파일에 저장됩니다. 또한 편집기에서 수행하는 변경사항은 포털 응용프로그램 내에서 이 주제가 사용되는 모든 경우에 적용됩니다.

이제 연습 2.3: WebSphere Portal 테스트 환경에서 포털 응용프로그램 실행을 시작할 수 있습니다.

사용 조건 | 피드백
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.