연습 2.2: 포털 사이트 사용자 정의
시작하기 전에 연습 2.1: 포틀렛 응용프로그램을 표시할 새 포털 작성을 완료하십시오.
새 주제 작성
포털 응용프로그램을 작성할 때, Portal Designer에서 브랜드 새 주제를 작성할 것을 선택할 수 있습니다.
주제는 포털 응용프로그램의 전체 모양을 제공하며 이미지, 탐색, 도구 모음 및 페이지
레벨 비주얼 효과와 같은 많은 포털 디자인 요소를 통합합니다.
이 학습서에서 개발한 포털 사이트에 대해 새 주제를 작성하려면 다음을 수행하십시오.
- 메뉴 표시줄에서 파일 > 새로 작성 > 주제를 선택하십시오.
- 제목 필드에 경매를 입력하십시오.
- 스크롤하여 소스 주제가 될 통합 주제를 선택하십시오. 스크래치에서 필요한 모든 주제 요소를 작성하지 않아도 되도록, 기존 주제를 기초로 새 주제를 작성하는 것이 더 쉽습니다.
- 다음을 클릭하십시오.
- 사용 가능한 스킨 목록에서 음영 스킨을 선택하고 기본 스킨으로 설정을 클릭하여 음영이 새 경매 주제의 기본 스킨이 되도록 하십시오.
스킨은 포털 페이지 내에서 각 포틀렛 주변에 있는 경계입니다. 포털의 전체 모양에 적용되는 주제와는 달리, 스킨은 포털 응용프로그램에 삽입하는 각 포틀렛의 모양으로 제한됩니다. 기본적으로, 주제마다 선택한 제한된 스킨만 사용할 수 있습니다.
- 완료를 클릭하십시오.
- 아웃라인 보기에서 요소 > 주제를 펼치고 경매를 선택하십시오.
- 특성 보기에서 기본값 선택란을 선택하여 새 주제를 포털 응용프로그램에 적용하십시오.
변경사항이 다음과 같이 즉시 포털 구성에 적용됩니다.

- 포털 구성을 저장하십시오.
이 절에서는 Page Designer와 CSS Designer를 사용하여 경매 포털 응용프로그램에서 스타일, 주제 및 스킨을 갱신합니다.
현재 주제의 배너 이미지 변경
경매 포털에 대한 기본 주제에서 배너 이미지를 바꾸려면 다음을 수행하십시오.
- 먼저 새 배너 이미지를 프로젝트로 가져와야 합니다.
- 메뉴 표시줄에서 파일 > 가져오기를 선택하십시오. 가져오기 대화 상자가 표시됩니다.
- 가져오기 소스 선택 아래에서 파일 시스템을 클릭하십시오.
- 다음을 클릭하십시오.
- 여러 Rational 제품이 서로 다른 설치 대상 위치를 사용하므로 제품의 사용자 인터페이스에서
나가서 새 배너 이미지를 포함하는 플러그인을 찾아야 합니다. 파일 검색 도구를 사용하여
로컬 파일 시스템의 제품 설치 경로에서 com.ibm.etools.portal.examples.application_6.0.0.1
플러그인 폴더를 찾으십시오.
- 가져오기 마법사로 돌아가서 디렉토리 필드 옆에 있는 찾아보기를 클릭하십시오. 다음 디렉토리를 탐색하십시오.
x:\com.ibm.etools.portal.examples.application_6.0.0.1\samples
여기서 x:는 컴퓨터에서 com.ibm.etools.portal.examples.application_6.0.0.1 플러그인이 있는 경로입니다.
- auction.gif를 가져오기 대상으로 선택하고 확인을 클릭하십시오.
- 폴더로 가져오기 필드 옆에 있는 찾아보기를 클릭하여 AuctionPortal/PortalContent/themes/html/Auction을 지정하십시오.
- 완료를 클릭하십시오.
마법사는 파일을 사용자 작업공간으로 가져옵니다.
- AuctionPortal 프로젝트의 포털 구성 파일이 열려 있을 때 Portal Designer 팝업 메뉴에서 스타일 편집을 선택하십시오. 그러면 Styles.css 파일이 CSS Designer에 열립니다. Styles.css는 응용프로그램의 기본 주제에 대한 기본 스타일시트입니다.
CSS Designer는 CSS 파일에 대해 정의된 두 가지의 스타일 보기를 제공합니다. 하나는 웹 자원의 브라우저 렌더링에 표시되는 대로 스타일 규칙의 가시화된 예제를 제공하는 미리보기이고(왼쪽에 표시), 다른 하나는 CSS 파일의 텍스트 버전을 표시하는 소스 보기입니다(오른쪽에 표시). 두 보기 중 하나를 사용하여 스타일을 편집할 수 있습니다.
- 미리보기에서 스크롤하여 배너 배경 아이콘을 선택하십시오.
- 팝업 메뉴에서 스타일 규칙 편집[.wpsToolbarBannerBackground]을 선택하십시오.
- 스타일 특성 설정 대화 상자의 왼쪽에서 배경 특성을 클릭하십시오.
- 이미지 필드에 ../../auction.gif를 입력하십시오.

- 확인을 클릭하십시오.
- CSS 파일을 저장하고 CSS Designer를 닫으십시오. Portal Designer에 열린 페이지에 새 배너 이미지가 적용됩니다.

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