[웹인] Google 사이트 도구 (4) - 하위 메뉴 설정

본 게시물에서는 하위 메뉴를 설정하는 방법에 대해 알아보자.

웹 페이지의 메뉴는 아래 그림과 같이 여러 연관된 페이지들이 하위 메뉴로 구성되는 경우가 많다. 하위 메뉴도 메인 메뉴와 같이 페이지를 먼저 생성하고 페이지 이름을 하위 메뉴 항목으로 사용한다.

하위 메뉴로 사용할 페이지를 만들기 위해 [새 페이지(c)] 버튼을 누른다. 

[페이지 이름 지정]에 '인사말'을 입력하고 [사용할 템플릿 선택]을 [웹페이지]로 지정한 후 [만들기] 버튼을 누른다.

[웹페이지] 템플릿으로 페이지가 생성되면 바로 편집 모드로 전환된다.

웹 페이지 내용은 후에 편집하도록 하고 지금은 하위 메뉴의 항목을 설정하기 위해 화면 오른쪽 상단에 있는 [저장] 또는 [취소]를 눌러 페이지 생성을 마무리한다. 

'대학비전', '대학예산', '대학운영계획', '시설 및 현황', '캠퍼스맵' 페이지도 [웹페이지] 템플릿을 지정하여 차례로 만들도록 한다.

모든 페이지 생성이 완료되었으면 각 페이지 이름으로 하위 메뉴를 구성해보자. [작업 선택 메뉴 열기(m)]-[사이트 레이아웃 수정]을 누른다.

[사이트 레이아웃 수정] 화면에 있는 사이트의 [가로 방향 탐색] 영역을 누른다.

[탐색 설정] 창에 있는 [페이지 추가]를 누른다.

[추가할 페이지 선택]에는 앞서 생성된 페이지와 함께 방금 새롭게 생성된 페이지 모두가 나열되어 있는 것을 확인할 수 있다. '인사말' 페이지를 선택하고 [확인] 버튼을 누른다.

그러면 [표시할 페이지 선택] 영역 끝에 '인사말'이 등록된다. 위쪽 화살표[↑] 버튼을 눌러 '인사말' 항목을 '대학소개' 메뉴 바로 아래까지 위치시켜보자. 

'대학소개' 메뉴 바로 아래에 '인사말' 메뉴가 위치하면 오른쪽 화살표[→] 버튼을 한번 눌러 들여쓰기를 수행한다. 

아래 그림과 같이 '인사말' 메뉴가 들여쓰기 되면 바로 위에 있는 '대학소개' 메뉴의 하위 메뉴로 등록된다.

'대학비전', '대학예산', '대학운영계획', '시설 및 현황', '캠퍼스맵' 페이지도 '대학소개' 메뉴 아래에서 차례로 들여쓰기를 수행한 후, [확인] 버튼을 누른다.

[사이트 레이아웃 수정] 화면의 오른쪽 상단에 있는 [닫기] 버튼을 눌러 메인 사이트로 이동한다.

메인 사이트에서 '대학소개' 메뉴를 누르면 아래 그림과 같이 하위 메뉴가 나타나는 것을 확인할 수 있다.

'대학생활' 메뉴에 대해 '학사일정', '장학금', '총학생회' 페이지를 하위 메뉴로 등록한다.

'홍보관' 메뉴에 대해 '웹진' 페이지를 하위 메뉴로 등록한다.

'설문조사' 메뉴에 대해 '일반', '전공', '학생식당', '교통편' 페이지를 하위 메뉴로 등록한다.

'오시는길' 메뉴에 대해 '지도', '지하철', '버스', '셔틀버스', '미추홀캠퍼스' 페이지를 하위 메뉴로 등록한다.