[파일] > [배치]를 선택합니다. 또는 바로 가기 키 Ctrl+D(Windows) 또는 Command+D(Mac)를 사용하여 이미지를 배치할 수도 있습니다.
마지막 업데이트 날짜
Adobe Muse에서 웹 사이트의 머리글 및 바닥글 영역을 정의하여 메뉴, 로고, 저작권 고지 사항 등을 추가합니다.
참고:
Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원 문의는 Adobe Muse 서비스 종료 FAQ를 참조하십시오.
Adobe Muse에서 웹 페이지 머리글과 바닥글을 간단하게 만들 수 있습니다. 머리글과 바닥글 요소의 모양을 동일하게 유지하여 웹 사이트에 대한 모양을 일관되게 유지하는 것이 좋습니다. 이렇게 하려면 Adobe Muse의 마스터에 머리글과 바닥글 요소를 정의하면 됩니다. 마스터 페이지를 업데이트하면 웹 사이트의 모든 페이지에 변경 내용이 적용됩니다.
HTML과 CSS를 사용하여 웹 사이트를 만들면 개별 페이지에 표시되는 고유한 컨텐트에 따라 각 페이지의 높이가 제각각이기 일쑤입니다. Muse의 기능을 사용하면 각 페이지의 고유한 컨텐트에 따라 사이트 페이지마다 표시되는 길이를 서로 다르게 할 수 있습니다. 각 페이지의 높이와 상관없이 머리글이 페이지 맨 위에 계속 남아 있고 바닥글이 항상 페이지 컨텐트 바로 아래 표시되도록 영역을 설정할 수 있습니다.
페이지 머리글과 바닥글 추가
페이지 머리글과 바닥글 영역을 정의하기 전에 머리글과 바닥글 안내선이 표시되는지 확인합니다. 안내선이 표시되지 않으면 [보기] > [머리글과 바닥글 표시]를 선택합니다.
또는 컨트롤 패널의 [보기] 메뉴를 사용하여 머리글과 바닥글 안내선을 활성화해도 됩니다.
또는 작업 영역 왼쪽에서 브라우저 창 영역의 바로 옆 바깥쪽을 마우스 오른쪽 단추로 클릭할 수도 있습니다. 컨텍스트 메뉴가 나타나면 [머리글과 바닥글 표시] 옵션을 활성화합니다.
안내선 및 눈금자 작업
머리글과 바닥글 안내선의 위치를 조정하려면 눈금자가 활성화되어 있어야 합니다. 눈금자를 사용하면 안내선을 정확한 픽셀 위치에 맞춰 설정할 수 있습니다. 기본적으로 (새 사이트를 만들 때 설정한 열의 개수를 표시하는) 일반 안내선도 함께 표시됩니다.
파란색 가로 안내선 5개가 페이지 폭만큼 화면을 가로지르고 있습니다. 이 5개의 안내선은 맨 위에서부터 각각 페이지의 최상단, 머리글의 아래쪽 가장자리, 바닥글의 위쪽 가장자리, 웹 페이지의 최하단, 브라우저 창의 최하단을 정의하는 데 사용됩니다. 이러한 영역을 정의하기 위해 안내선을 드래그하면 각 안내선에 대한 설명과 현재 위치를 표시하는 툴팁이 나타납니다. 페이지의 배율을 늘려 화면을 확대하면 안내선을 좀 더 정확하게 배치하는 데 도움이 될 수도 있습니다.
중간에 있는 안내선 3개는 머리글과 바닥글 영역에 표시되는 컨텐트를 정의합니다. 나머지 가운데 영역은 고유한 페이지 컨텐트를 추가할 자리입니다. 이 가운데 영역은 각 페이지에 배치된 요소의 높이에 맞춰 확장됩니다.
페이지에서 사각형과 요소를 선택할 수도 있습니다. 선택된 요소의 테두리 상자를 사용하면 머리글과 바닥글 영역을 설정할 때 안내선을 쉽게 정렬할 수 있습니다.
참고:
브라우저 창의 하단은 방문자가 브라우저에서 사이트를 볼 때 표시되는 영역의 가장 낮은 부분을 의미합니다. 디자인에 따라, 브라우저 자체를 위한 배경색이나 배경 이미지를 설정할 수도 있고, 페이지 컨텐트 아래 배경색이나 이미지가 표시되도록 브라우저 하단 안내선 위에 있는 페이지 하단 안내선을 설정할 수도 있습니다.
머리글과 바닥글 요소 정의
머리글과 바닥글 요소를 정의하려면 다음을 수행하십시오.
- [페이지 아래] 안내선과 [브라우저 아래] 안내선을 드래그하여 페이지 하단의 동일한 위치로 가져와서 아래 그림과 같이 바닥글 사각형 바로 아래 놓습니다.
- 바닥글에서 바둑판식 배경 이미지가 포함된 사각형을 선택합니다. [바닥글] 안내선을 드래그하여 바닥글 사각형의 위쪽 끝에 맞춰 정렬합니다.
- [페이지 위쪽] 안내선의 위치를 최상단(Y: 0px 위치)에 그대로 둡니다. 머리글 안내선을 원하는 수준으로 드래그하여 내립니다.
머리글 컨텐트는 페이지 맨 위쪽과 [머리글] 안내선 사이의 영역에 표시됩니다.
머리글 및 바닥글 컨텐트에 맞춰 안내선을 다시 조정해야 할 때는 디자인 프로세스를 진행하는 동안 언제든지 "A-마스터" 페이지로 돌아올 수 있습니다.
[플랜] 링크를 클릭하거나 katiesCafe라는 탭을 클릭하여 [플랜] 보기로 돌아갑니다.
링크로 연결된 "A-마스터" 페이지에 추가한 디자인 요소가 사이트의 다른 모든 페이지 축소판에도 표시된 것을 알 수 있습니다.
사이트를 디자인하면서 언제든지 마스터 페이지를 변경할 수 있습니다. 이렇게 하면 링크로 연결된 모든 페이지가 자동으로 업데이트됩니다. 이와 같이 마스터 페이지를 사용하면 마스터 페이지 하나만 업데이트하여 사이트 전체의 모양을 바꿀 수 있으므로 사이트를 업데이트하거나 유지 관리하기가 쉽습니다.
이미지를 배치하여 머리글 컨텐트 채우기
사이트 로고는 사이트의 각 페이지마다 표시되어야 하므로 이를 마스터 페이지의 머리글에 배치하는 것이 좋습니다.
-
-
[가져오기] 대화 상자가 나타나면 Kevins_Koffee_Kart 폴더에서 Logo.png라는 파일을 찾습니다. [선택]을 클릭합니다.
-
로고를 [선택] 도구로 드래그하여 앞서 정의해 둔 머리글 영역의 상단에 배치합니다.
이번에는 메뉴 막대 위젯의 배경 그래픽으로 사용할 이미지를 배치합니다(메뉴 막대 위젯을 추가하는 방법은 다음 단원에서 설명합니다).
-
[파일] > [배치]를 선택하거나 바로 가기 키 Ctrl+D(Windows) 또는 Command+D(Mac)를 운영 체제에 맞게 사용합니다.
-
Kevins_Koffee_Kart 폴더를 찾은 다음 top-nav.png라는 파일을 선택합니다.
-
앞서 머리글로 정의한 영역에 해당하는 페이지 상단 부분을 한 번 클릭합니다. 이미지가 각 페이지마다 페이지 본문 컨텐트 위의 동일한 위치에 표시되도록 이미지를 머리글 마커 위쪽에 배치해야 합니다.
-
방금 배치한 갈색 리본 그래픽을 [선택] 도구로 드래그하여 로고의 빨간색 자전거 타이어가 갈색 리본의 맨 윗부분과 맞닿게 합니다. 그래픽을 이렇게 배치하면 마치 자전거가 갈색 리본 위를 달리는 듯한 장면을 표현할 수 있습니다.
-
[파일] > [배치]를 다시 선택합니다. 이번에는 thedrip.png라는 파일을 찾아 선택합니다. 갈색 리본 그래픽의 오른쪽 아랫부분을 한 번 클릭하여 이미지를 원래 크기로 배치합니다.
-
마치 갈색 리본 오른쪽에서 커피가 흘러내리는 듯 보이도록 [선택] 도구로 이 이미지의 위치를 갈색 리본에 맞춰 조정합니다.
로고와 사이트 탐색 메뉴의 배경을 추가하고 난 후의 머리글 컨텐트 모습입니다. 라이브 사이트 예제를 참조하면 로고와 상단 탐색 메뉴 배경의 정확한 위치를 확인할 수 있습니다.
다음 단원에서는 위젯 컨테이너를 다루는 방법을 간단하게 살펴본 후 위젯을 실제로 추가해 보겠습니다.
고정 바닥글 사용
[고정 바닥글] 옵션을 사용하면 웹 페이지에 바닥글 요소를 추가할 수 있습니다. [고정 바닥글]은 대형 데스크톱 모니터를 사용하는 방문자를 위해 특별히 디자인되었습니다. [고정 바닥글] 옵션을 활성화하면 브라우저 창이 웹 페이지 디자인보다 훨씬 더 크더라도 바닥글을 원하는 위치에 유지할 수 있습니다.
[고정 바닥글] 옵션은 Muse에서 사이트를 만들 때 [새 사이트] 대화 상자([파일] > [새 사이트])에서 제공됩니다. 페이지 속성([페이지] > [페이지 속성]) 및 사이트 속성 대화 상자([파일] > [사이트 속성])에서도 고정 바닥글에 액세스할 수 있습니다.
[고정 바닥글] 옵션은 기본적으로 활성화되어 있습니다. 일반적으로는 사이트를 디자인할 때 고정 바닥글 기능을 사용하는 것이 좋습니다. 그러나 (사이트에 최소한의 페이지 컨텐트 밖에 없어서 페이지가 상당히 짧은 데 반해 바닥글 위치가 고정되어 있어서) 페이지 길이가 원하는 것보다 훨씬 더 길게 표시된다면 언제든지 [페이지 속성] 대화 상자에서 확인란을 선택 취소하여 이 기능을 해제할 수 있습니다.
하지만 전체 웹 사이트에서 비활성화하고 싶다면 사이트 속성 대화 상자의 옵션에서 선택 해제하면 됩니다.
내 계정 로그인