연습 1.2: 웹 사이트의 구조 디자인

데모 보기

웹 사이트 구조 디자인을 시작하기 전에 연습 1.1: 웹 프로젝트 작성을 완료하십시오.

웹 사이트는 웹 페이지 콜렉션으로 구성됩니다. 웹 페이지에는 실제 컨텐츠(예: HTML 요소, 이미지 및 링크)가 있지만 웹 사이트는 그 웹 페이지들을 서로 적합하도록 계층적으로 디자인하고 구성한 것입니다. 웹 사이트에는 상위 레벨 목적(예: 항목별 목록에 맞게 구성된 콜렉션 영역 제공)이 있어야 하며 각 웹 페이지는 해당 상위 레벨 목적을 달성하는 데 필요한 특정 목적(예: 목록에서 검색하는 페이지)을 제공할 수 있습니다.

웹 사이트 디자인을 시작하는 최상의 방법은 전체 목적을 이루기 위해 사이트에서 지원해야 하는 기능을 고려하는 것입니다. 안내 광고 웹 사이트의 경우, 사이트가 수행해야 할 몇 가지의 기능이 있습니다. 예를 들어, 사이트 방문자는 목록을 탐색하고 한 번에 목록을 볼 수 있을 뿐만 아니라 새 목록을 작성 및 편집할 수 있기를 원합니다.

이러한 기능을 수행하는 웹 사이트를 작성하려면, 이 연습에서 다음 4개의 페이지를 계획하고 다음 연습에서 해당 페이지 자체를 작성하십시오.


  1. 프로젝트 탐색기 보기에서 ClassifiedsTutorial을 펼치십시오.
  2. 프로젝트 탐색기 보기에서 웹 사이트 탐색을 두 번 클릭하십시오. Web Site Designer에 탐색 보기가 열립니다. 이 도구를 사용하여 웹 사이트를 구성하는 웹 페이지를 추가, 삭제 및 재배열할 수 있습니다.
  3. 처음에는 탐색 보기에 페이지 아이콘이 표시되지 않습니다. 일반적으로, 웹 사이트를 디자인할 때 고려하는 첫 번째 페이지는 맨 위 페이지나 사이트의 홈 페이지입니다. 이 페이지는 방문자가 웹 사이트에 처음으로 들어와 보는 페이지입니다. 팔레트 보기에서 새 페이지 구성요소를 끌어서 탐색 보기에 놓으십시오. 페이지의 탐색 제목에 초점이 맞춰진 페이지 아이콘이 표시됩니다.
  4. 이 페이지는 데이터베이스에 있는 모든 광고를 표시하는 홈 페이지가 됩니다. 페이지의 탐색 제목으로 모든 안내 광고 보기를 입력하십시오. 나중에 탐색 제목을 사이트를 탐색하기 위해 페이지 레이블로 사용하는 방법에 대해 학습합니다.
  5. 사이트 방문자가 자신의 고유 목록을 게시하려면 새 목록을 작성할 페이지가 필요합니다. 모든 안내 광고 보기 페이지 아이콘 바로 아래에서 탐색 보기로 새 페이지 구성요소를 끌어와서 두 번째 페이지 아이콘을 추가하십시오.  
  6. 새 페이지에 목록 게시 이름을 지정하십시오. 새 페이지 아이콘이 모든 안내 광고 보기 페이지 밑에 표시되고 선으로 연결됩니다. 이는 목록 게시 및 모든 안내 광고 보기가 상위-하위 관계임을 표시합니다.
  7. 방문자가 기존 목록을 편집 또는 삭제할 수 있는 페이지도 필요합니다. 예를 들어, 방문자가 자전거에 대해 목록을 추가하고 별도의 조치 없이 장시간 게시하고 있을 때, 판매자는 판매 가격을 낮추고자 할 수 있습니다. 목록 게시 페이지 옆에 다른 페이지 아이콘을 추가하고 이름으로 목록 갱신을 지정하십시오. 이 새 페이지 아이콘은 목록 게시의 동위이면서 모든 안내 광고 보기의 또 다른 하위입니다.
  8. 다음으로, 사용자 웹 사이트에는 방문자가 기존 목록을 검색하여 관심있는 것을 찾을 수 있도록 검색 기능이 필요합니다. 검색 결과를 표시하기 위한 페이지를 추가하려면 목록 갱신 페이지 옆에 또 다른 페이지 아이콘을 놓고 이름을 필터된 목록으로 지정하십시오.
    참고: 부주의로 잘못된 곳에 페이지를 놓거나 페이지 구조를 다시 정렬하려면 언제든지 페이지 아이콘을 끌어서 사이트를 다시 정렬할 수 있습니다.
  9. Ctrl+S를 눌러서 사이트 디자인을 저장하십시오. 탐색 보기 형태는 다음과 같아야 합니다.
ClassifiedsTutorial 프로젝트에 대한 웹 사이트 탐색

각 페이지 아이콘 맨 아래에 작은 아이콘 행이 있습니다. 첫 번째 아이콘(아직 볼 수 없음)은 아이콘과 연관되는 실제 파일을 나타내며 해당 파일이 작성된 후에 표시됩니다. JSP 파일을 작성하면, 아이콘은 파란색 다이아몬드()로 표시되고 HTML 파일을 작성하면 아이콘은 대괄호 세트()로 표시됩니다. 두 번째() 및 세 번째 아이콘()도 표시되는데, 이는 기본적으로 모든 페이지가 탐색 및 사이트 맵에 각각 표시되도록 설정되어 있음을 표시합니다. 아직 표시되지 않는 네 번째 아이콘()은 페이지 아이콘을 실제 파일과 연관시킨 경우에 표시됩니다. 이 때 파일에는 웹 사이트 탐색이 포함되지 않습니다. 페이지 아이콘의 맨 위에 있는, 아직은 표시되는 않는 아이콘()은 탐색 루트를 나타냅니다. 이 모듈을 통해 작업하면서 이 아이콘과 페이지 아이콘 표시의 다른 패싯에 대해 자세히 학습하게 됩니다.

지금까지 일반적인 웹 사이트 구조를 작성했습니다. 이제 연습 1.3: 웹 사이트를 웹 페이지로 채우기를 시작할 수 있습니다.

이용약관 | 피드백

(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.