웹 사이트 트리 다이어그램은 웹 사이트의 페이지가 구성되는 방식을 보여줍니다. 상위 페이지는 하위 페이지의 위 또는 왼쪽에 표시되어 웹 페이지 간의 관계와 액세스 방법을 나타냅니다. 웹 개발 팀은 웹 사이트를 만들거나 다시 디자인 할 때 다이어그램을 사용합니다. 웹 사이트 트리 다이어그램은 웹 사이트의 크기와 개발 팀의 요구에 따라 간단하거나 정교 할 수 있습니다.
1 단계
웹 사이트에 포함되거나 포함 할 웹 페이지 목록을 만듭니다. 나열된 모든 항목이 웹 사이트의 페이지인지 확인하십시오. 웹 사이트의 크기에 따라 각 페이지에 숫자 참조를 할당하여 사이트 다이어그램을 작성하고 웹 사이트를 개발할 때 진행 상황을 추적 할 수 있습니다.
2 단계
글 머리 기호 목록을 사용하여 웹 사이트의 모든 페이지 간의 상위-하위 관계를 표시하도록 개요를 구성합니다. 예를 들어 온라인 의류 매장의 웹 사이트에는 남성, 여성 및 아동 의류로 연결되는 최상위 상위 페이지가있을 수 있습니다. 각 페이지에는 개요에서 셔츠와 바지와 같은 의류 유형이 나열되어 결국 개별 제품 페이지로 연결됩니다.
3 단계
문서 상단의 각 범주에 대해 하나의 사각형을 그려 다이어그램 만들기를 시작합니다. 각 최상위 웹 페이지에 대한 짧은 제목을 다이어그램에 삽입합니다. 다른 웹 사이트 계획 문서에서 페이지에 대한 추가 세부 사항을 찾을 수 있도록 페이지의 참조 번호를 포함하십시오.
4 단계
최상위 범주 중 하나 아래에있는 모든 하위 범주에 대해 직사각형을 그립니다. 예를 들어, 셔츠, 바지, 반바지 및 코트에 대한 남성 의류의 최상위 범주 아래에 네 개의 직사각형을 그립니다. 이 사각형을 나란히 정렬하여 그들이 나타내는 페이지가 웹 사이트 구조 내에서 동일한 수준에 있음을 보여줍니다.
5 단계
조직의 계층 구조 차트를 만드는 것처럼 하위 범주 페이지를 해당 페이지가 속한 최상위 범주에 연결합니다. 예를 들어 셔츠, 바지, 반바지 및 코트 페이지에서 남성 의류 상위 카테고리로 선을 그립니다. 사이트 다이어그램의 가독성을 높이려면 조직도에있는 것과 유사한 직선을 만드십시오.
6 단계
트리 다이어그램에 웹 사이트를 효과적으로 개발하는 데 필요한 세부 정보가 포함될 때까지 다이어그램을 하위 범주로 계속 분기하십시오. 예를 들어, 남성 의류 카테고리의 셔츠 섹션 아래에 드레스 셔츠와 캐주얼 셔츠 상자를 그립니다. 그러나 사이트 다이어그램에 모든 캐주얼 남성용 셔츠 페이지를 포함 할 필요는 없습니다.
7 단계
동일한 방식으로 웹 사이트의 모든 최상위 카테고리에 대한 다이어그램 섹션을 완료합니다. 예를 들어 의류 웹 사이트의 여성 및 아동 섹션을 작성합니다.
팀에 전달해야하는 정보를 나타 내기 위해 트리 다이어그램에 사용 된 기호를 수정합니다. 예를 들어 동적 웹 페이지에는 둥근 사각형을 사용하고 개별적으로 나열되지 않은 유사한 웹 페이지 그룹을 표시하려면 함께 쌓인 여러 웹 페이지의 그림을 사용합니다. 규칙을 설명하기 위해 다이어그램에 범례를 포함하십시오.
