연습 1.6: 웹 사이트의 동적 탐색 실현
웹 사이트의 동적 탐색 실현을 시작하기 전에
연습 1.5:
웹 사이트에 페이지 템플리트 적용을 완료하십시오.
연습 1.2에서 웹 사이트 구조를 디자인할 때, 페이지 사이의
관계에 대해 어느 정도 결정하였습니다. 페이지를 연결하는 선으로 페이지
아이콘을 레이아웃한 방법을 상기해 보십시오.

하나의 페이지를 다른 페이지에 관련시킬 때 여러 가지 방법이 있습니다.
이 관계는 가족 관계와 유사하다고 할 수 있습니다.
이 예제의 경우, 모든 안내 광고 보기는 상위 페이지이고
다른 세 페이지는 하위 페이지입니다. 또한 이 세 페이지는 서로 동위 페이지입니다.
이 페이지 관계는 탐색줄 및 탭과 같은 탐색 링크를 생성하는 데 사용됩니다.
각 페이지는 관련되는 페이지를 기초로 탐색 링크를 자동으로 작성합니다.
이러한 프로세스를 동적 탐색이라고 합니다.
사이트 구조 확인
사이트 구조가 탐색에 포함해야 하는 페이지를 지정하도록 설정되어 있는지
확인할 수 있습니다. Web Site Designer에서 동적 탐색에 링크로
포함해야 하는 페이지, 사이트 맵에 포함시켜야 하는 페이지를 지정하고
사이트 구조 및 페이지 관계를 기초로 하는
일부 다른 탐색 옵션도 지정할 수 있습니다.
이는 사이트에 포함시켜야 하는 페이지를 가지고 있는 경우에 유용하지만
탐색 기능의 일부로는 맞지 않습니다. 예를 들어,
사이트에 문제가 발생할 때 나타나는 오류 페이지를 가지고 있지만
오류 페이지를 탐색의 일부로 표시하고 싶지 않을 수도 있습니다.
- 프로젝트 탐색기 보기에서 웹 사이트 탐색을 두 번 클릭하여
사이트 구조를 살펴보십시오.
- 모든 페이지에서 탐색에 표시 옵션이 기본적으로
선택되어 있는 것을 볼 수 있습니다. 탐색에 표시 아이콘(
)이 보여지기 때문입니다.
이 옵션은 탐색줄에 표시할 페이지마다 선택해야 합니다.
페이지를 사용 안함으로 설정하여 탐색에 표시되지 않도록 할 수도 있습니다.
사용자는 모든 안내 광고 보기 페이지에서 검색 옵션을 통해
송신되므로 검색 결과 페이지인 필터된 목록은
탐색에서 사용되지 않도록 설정해야 합니다.
- 필터된 목록 페이지 아이콘을 마우스 오른쪽 단추로 클릭하십시오.
- 탐색 > 탐색에 표시를 선택하여
선택 취소하십시오. 탐색에 표시 아이콘은 이제
필터된 목록 페이지 아이콘에서 사용할 수 없습니다.
- 사용자는 모든 안내 광고 보기 페이지에서 갱신 옵션을 통해
송신되므로 목록 갱신 페이지도 사용되지 않도록 설정해야 합니다.
목록 갱신 페이지 아이콘을 마우스 오른쪽 단추로 클릭하십시오. 탐색
> 탐색에 표시를 선택하여 선택 취소하십시오. 탐색에 표시 아이콘은 이제
목록 갱신 페이지 아이콘에서 사용할 수 없습니다.
- 사이트의 탐색 루트를 설정해야 합니다. 일반적으로 사이트에 작성된 첫 번째 페이지인
맨 위 페이지가 종종 탐색 루트로 설정됩니다. 모든 안내 광고 보기 페이지
아이콘을 마우스 오른쪽 단추로 클릭하고 탐색 > 탐색 루트 설정을 클릭하십시오. 페이지
아이콘의 맨 위에 있는 아이콘(
)은 루트 아이콘입니다.
탐색 루트는 웹 사이트 탐색(예: 탐색줄)을 생성할 때 사용되는
링크 레벨을 결정하므로 중요합니다.
참고: 모든 안내 광고 보기 페이지와 목록 게시
페이지에 대해 사이트 탐색에 의해 설정된 기본 옵션은 선택된 상태로 유지해야 합니다.
- Ctrl+S를 눌러 변경사항을 저장하십시오.
페이지 템플리트에 탐색 구성요소 추가
- 프로젝트 탐색기 보기에서 template.jtpl을 두 번 클릭하여
페이지 템플리트로 돌아가십시오.
- 팔레트 보기에서 웹 사이트 탐색을 클릭하여
탐색 구성요소를 포함하는 드로어를 여십시오. 웹 사이트에 추가할
수 있는 다양한 유형의 사이트 맵과 같은 동적 탐색 구성요소가 있습니다.
가장 기본적인 구성요소는 사이트 구조에 따라 링크 행으로 구성되는
가로 막대입니다.
- 각 페이지의 맨 위에는 사용자가 사이트의 다른 페이지에
액세스할 수 있는 링크 행이 있어야 하지만, 탐색에 시각적 관심을
추가할 수도 있습니다. 가로 탭 구성요소를 페이지 템플리트의
두 번째 행으로 끌어 오십시오. 이 구성요소는 탭 행에서 동적 링크를 작성합니다.
가로 탭 삽입 마법사가 열립니다.
- 샘플 탐색 구성요소를 사용하려면 기본값을 그대로 사용하십시오.
- 작은 그림 이미지에서 기본값을 사용하십시오(horizontal-tab01.jsp).
그러면 파일 이름 필드가 자동으로 채워집니다.
다음을 누르십시오.
- 페이지 관계에 따라 탐색줄에 표시할 링크의 유형을
선택하십시오. 사이트의 맨 위 페이지와 각 페이지의 모든 동위 및 하위가
탐색에 표시되도록 지정하려면 다음 페이지가 선택되어 있는지
확인하십시오.
- 맨 위 페이지
- 맨 위 페이지의 하위
- 동위 페이지
- 현재 페이지
이전 또는 다음 링크를 선택할 경우, 링크(예: 이전 및 다음)에
대해 표시할 레이블을 제공할 수 있습니다.
- 다음을 클릭하십시오. 마법사의
스펙 파일 페이지에 대한 선택적 설정에서 기본값을 사용하십시오.
JSP 사용자 정의 태그를 사용하여 런타임에서 링크를 생성하려면
JSP 탐색을 선택하십시오. HTML 사용자 정의
태그를 사용하여 디자인에서 링크를 생성하려면
HTML 탐색을 선택하십시오. Faces JSP
페이지에서 HTML 사용자 정의 태그를 추가하려면 Faces 링크 사용 선택란을 클릭하여
Faces에 대해 outputLink 태그를 작성하십시오.
- 완료를 클릭하십시오. 탐색
구성요소 아이콘(
)이 페이지 템플리트에
표시됩니다.
- 페이지 템플리트의 변경사항을 저장하십시오.
페이지 템플리트를 저장할 때, 동적 탐색 변경사항은
사이트의 모든 페이지에 적용됩니다.
- 프로젝트 탐색기 보기에서 웹 사이트 탐색을 두 번 클릭하여
사이트 구조를 살펴보십시오.
이제 웹 페이지에 탐색 구성요소가 있으므로, 페이지에 웹 사이트 탐색이 없음을
나타내는 아이콘(
)은 페이지 아이콘에 표시되지 않습니다.

탐색 구성요소는 몇 개의 파일을 웹 프로젝트에 추가합니다.
템플리트를 저장한 후에는 프로젝트 탐색기 보기에 새로운
.jsp와 몇 개의 .gif 파일이 포함됩니다. 이 파일은 사용자 페이지에 탭을
표시합니다.
탐색 미리보기
템플리트가 아닌 페이지에서 탐색이 어떻게 표시되는지 인스턴스를 보려면
프로젝트 탐색기 보기에서 all_records.jsp를 두 번 클릭한 후
Page Designer에서 미리보기 탭을 클릭하십시오.
탭에 표시되는 이름이 파일 이름이 아니라 페이지의 탐색 레이블임을
볼 수 있습니다. 또한
현재 페이지가 강조표시된 탭으로 표시된다는 점에 주목하십시오.
사이트를 탐색할 때 현재 페이지는 항상 맨 위에 강조표시된 탭으로 표시됩니다.
팁: 탐색 보기에서 사이트의 구조를 변경할 경우
동적 탐색 링크는 새 구조를 반영하기 위해 자동으로 갱신됩니다.
지금까지 동적 탐색을 설정했습니다. 이제 연습 1.7:웹 사이트
미리보기를 시작할 수 있습니다.