Adobe Muse(어도비 뮤즈) 시작하기 제3부

Adobe Muse(어도비 뮤즈) 시작하기 제3부

페이지의 채우기 색상을 조정하여 반투명하게 만들기

[에셋] 패널에 표시되는 경고 메시지를 해결하려면 마우스 오른쪽 단추를 클릭하고 개별 에셋 파일에 수정 사항을 적용하는 데 필요한 메뉴 옵션을 선택합니다. 또는 [에셋] 패널에서 (Shift 키를 누른 채) 여러 에셋을 한꺼번에 선택한 다음 선택한 에셋 파일 전체에 수정 사항을 적용하기 위한 메뉴 옵션을 선택합니다.

페이지의 채우기 색상을 조정하여 반투명하게 만들면 마스터 페이지를 채우는 데 기본적으로 흰색이 사용됩니다. 그러나 원한다면 사용자가 페이지의 색상과 투명도를 바꿀 수 있습니다. 

[디자인] 보기에 "A-마스터" 페이지를 열어 둔 상태에서 아래 작업을 수행하십시오. 

1. [컨트롤] 패널에서 [브라우저 채우기] 링크를 클릭하여 메뉴를 확장합니다. (이 링크 오른쪽에 있는 색상 피커를 선택하지 않도록 주의하십시오.) [이미지] 폴더를 클릭한 후 브라우저 창의 배경을 채우는 데 사용할 이미지를 선택합니다.

2. [컨트롤] 패널에서 [채우기]라는 링크 텍스트를 클릭하여 [채우기] 메뉴를 확장합니다(그림 21 참조). (이 링크 텍스트 오른쪽에 있는 색상 피커를 선택하지 않도록 주의하십시오.) 

 

그림 21. [불투명도] 슬라이더를 클릭하여 드래그하거나 [불투명도] 필드에 숫자 값을 직접 입력합니다. 

3. [불투명도]를 80%로 설정합니다. 이는 거의 불투명에 가깝지만 20%의 투명도를 갖도록 하는 설정을 의미합니다. 계속하여 다음 순서로는 페이지를 편집하여 테두리(획 색상)를 추가하고 몇 가지 그래픽 효과를 적용하겠습니다.

획 두께 설정 및 효과 적용

1. [컨트롤] 패널에서 [획] 섹션을 찾습니다. [획]이라는 링크 텍스트를 클릭하면 개별 획 두께와 각 획의 정렬을 세밀하게 설정할 수 있는 [획] 메뉴가 열립니다. 이 링크 오른쪽에 있는 색상 피커를 사용하면 획의 색상을 설정할 수 있으며, 그 오른쪽에 있는 숫자 필드를 사용하면 획의 전체 두께를 설정할 수 있습니다. 

2. 그림 22에 나와 있는 것과 같이 획 두께 기본값으로 설정되어 있는 1을 0으로 변경합니다. (두께가 0이면 획이 표시되지 않습니다.)

 

그림 22. 아래쪽 화살표를 클릭하거나 [획 두께] 필드에 표시된 기본값 1을 선택하고 0을 입력하여 획 두께를 0으로 설정합니다. 

3. [컨트롤] 패널 오른쪽에서 [효과]라는 링크 텍스트를 찾습니다. "효과"라는 단어를 클릭하여 [효과] 메뉴를 확장한 다음 메뉴 상단에 있는 [그림자] 단추를 선택하여 그림자 설정 화면을 엽니다(그림 23 참조). 

 

4. [그림자] 섹션을 표시한 상태에서 [색상] 옆에 있는 색상 피커를 클릭하고 스포이드 도구로 검정 색상 칩을 선택합니다. 

머리글과 바닥글 추가

이번 단원에서는 "A-마스터" 페이지를 업데이트하여 머리글과 바닥글 요소를 추가하겠습니다. Muse에서 사이트를 만들 때 페이지마다 디자인은 다를 수 있지만, 전체 페이지에 표시되는 요소를 한 자리에서 쉽게 업데이트할 수 있도록 마스터 페이지에 머리글과 바닥글 컨텐트를 추가하는 것은 거의 보편화된 작업 방식이라 할 수 있습니다. 또한 이렇게 하면 사이트의 전체 페이지에 걸쳐 일관성을 쉽게 유지할 수 있습니다.

앞 단원의 설명을 잘 따라왔다면 "A-마스터" 페이지가 [디자인] 보기에 이미 열려 있을 것입니다. 그렇지 않다 하더라도 [플랜] 보기에서 "A-마스터" 페이지를 두 번 클릭하기만 하면 [디자인] 보기에서 이를 열고 편집할 수 있습니다. 폭이 100%인 사각형 요소를 마스터 페이지에 추가할 수 있을 뿐만 아니라, 원한다면 이를 개별 페이지에도 추가할 수 있다는 점을 잊지 마십시오.

브라우저 창의 전체 폭에 맞춰 폭이 100%로 설정되는 사각형 요소 만들기

1. [컨트롤] 패널에서 [사각형] 도구를 선택합니다. 페이지에서 약 600픽셀 지점을 중심으로 바닥글 영역의 위쪽 안내선 바로 아래 지점을 클릭한 후 커서를 드래그합니다. 브라우저 영역의 폭을 꽉 채우는 낮은 높이의 사각형을 그립니다.

2. [선택] 도구를 사용하여 사각형을 선택합니다. 전체 사각형을 클릭한 후 드래그하여 위치를 조정할 수 있습니다. 사각형의 각 측면에 있는 핸들을 드래그하여 크기를 조정할 수도 있습니다. 측면 핸들 두 개를 사용하여 사각형을 클릭한 다음 가장자리가 각 페이지의 측면에 맞닿을 때까지 드래그합니다. 가장자리가 맞닿으면 사각형 측면의 테두리가 빨간색으로 바뀝니다.

3. 이 낮은 높이의 사각형을 선택한 상태에서 [채우기] 링크 텍스트를 클릭하여 [채우기] 메뉴를 엽니다. [이미지] 섹션 옆에 있는 폴더 아이콘을 클릭합니다. [가져오기] 대화 상자가 나타나면 Kevins_Koffee_Kart 폴더에서 footer-zag.png라는 파일을 찾아 선택합니다. 

4. [채우기] 메뉴에 있는 [맞춤] 메뉴를 사용하여 [가로 바둑판식 배열] 옵션을 선택합니다. 색상 피커를 클릭하고 채우기 색상을 "없음"으로 설정합니다. (흰색 바탕에 빨간색 대각선이 있는 색상 칩을 선택하면 됩니다.) 작업을 마쳤으면 페이지를 아무 곳이나 클릭하여 [채우기] 메뉴를 닫습니다.

5. [컨트롤] 패널의 [획 두께] 필드에서 기본값인 1을 0으로 바꿉니다. (이렇게 하면 획이 "없음"으로 설정됩니다.) 갈색 지그재그 이미지 요소가 바닥글 영역에서 페이지를 가로지르며 바둑판식 배열됩니다. 이미지가 이렇게 배치되는 이유는 [맞춤] 메뉴 옵션을 [가로 바둑판식 배열]로 설정했기 때문입니다. (다른 페이지 레이아웃을 디자인할 때 [세로 바둑판식 배열]을 선택하여 이미지를 세로 방향으로 바둑판식 배열하거나 [바둑판식 배열]을 선택하여 양방향으로 배열할 수도 있습니다.)

6. [사각형] 도구를 사용하여 좀 더 큰 사각형을 하나 더 그립니다. 이 사각형은 지그재그가 포함된 사각형 아래쪽에 그리도록 합니다. 지금 새로 만드는 사각형도 폭이 100%(페이지의 전체 폭)가 되게 합니다. 즉, 테두리에 빨간색 선이 표시될 때까지 양쪽 측면 핸들을 하나씩 드래그합니다. 그리고 이번에는 아래쪽 핸들을 밑으로 드래그하여 새 사각형의 높이가 페이지 하단을 완전히 채우게 합니다.

7. 더 큰 사각형을 선택한 상태에서 [컨트롤] 패널의 [채우기] 링크 텍스트 옆에 있는 색상 피커를 클릭합니다. 색상 견본 인터페이스가 나타나면 [스포이드] 도구를 선택합니다. 그런 다음, 바둑판식으로 배열되어 있는 갈색 지그재그 컨텐트를 한 번 클릭하여 더 큰 사각형의 채우기 색상을 지그재그 컨텐트와 동일한 갈색으로 설정합니다. 이 시점에서 사각형 두 개가 모두 전체 폭 브라우저 항목으로 정의되었는지 다시 한 번 확인합니다. 브라우저 창의 가장자리를 향해 각 사각형의 왼쪽 가장자리를 드래그하면 개체의 폭이 100%로 설정되었음을 표시하는 테두리 선이 나타나야 합니다. 항목의 폭을 100%로 설정하면 방문자가 브라우저 창 크기를 얼마나 넓게 조정하든 상관없이 해당 항목을 사용하여 브라우저를 가로로 가득 채울 수 있습니다(그림 24 참조).

 

그림 24. 각 사각형의 왼쪽과 오른쪽 가장자리가 페이지의 테두리에 맞닿을 때까지 브라우저 창의 바깥쪽을 향해 드래그합니다. 그런 다음 더 큰 갈색 사각형의 아래쪽을 페이지의 맨 밑부분에 맞춰 정렬합니다. 

8. 위쪽에 바둑판식으로 배열된 지그재그 사각형과 아래쪽에 갈색 하나로만 채워진 사각형을 둘 다 선택한 상태에서 [컨트롤] 패널의 [바닥글] 확인란이 활성화되었는지 확인합니다. 또는 바닥글에서 해당 요소를 마우스 오른쪽 단추로 클릭한 후 [바닥글 항목] 옵션 옆에 확인 표시가 있는지 살펴봐도 됩니다(그림 25 참조). 

 

그림 25. 바닥글 영역에 있는 사각형 두 개가 [바닥글 항목]으로 설정되었는지 확인합니다. 

두 항목을 선택했을 때 확인란이 활성화되어 있지 않으면 확인란을 클릭하여 이를 활성화합니다. 이렇게 하면 두 사각형이 바닥글 항목으로 지정되므로 항상 다른 페이지 컨텐트 아래 배치됩니다. 요소를 바닥글에 배치하면 페이지 길이가 제각각인 사이트를 만들 수 있습니다. 사이트의 개별 페이지에 있는 페이지 컨텐트가 얼마나 길든 상관없이, 페이지 컨텐트를 보는 데 방해가 되지 않도록 바닥글 컨텐트가 항상 맨 아래쪽으로 밀려 이동합니다.

이미지를 배치하여 머리글 컨텐트 채우기 

사이트 로고는 사이트의 각 페이지마다 표시되어야 하므로 이를 마스터 페이지의 머리글에 배치하는 것이 좋습니다.

1. [파일] > [배치]를 선택합니다. 또는 바로 가기 키 Ctrl+D(Windows) 또는 Command+D(Mac)를 사용하여 이미지를 배치할 수도 있습니다. 

2. [가져오기] 대화 상자가 나타나면 Kevins_Koffee_Kart 폴더에서 Logo.png라는 파일을 찾습니다. [선택]을 클릭합니다. 

3. 로고를 [선택] 도구로 드래그하여 앞서 정의해 둔 머리글 영역의 상단에 배치합니다.

이번에는 메뉴 막대 위젯의 배경 그래픽으로 사용할 이미지를 배치합니다. (메뉴 막대 위젯을 추가하는 방법은 다음 단원에서 설명합니다.)

1. [파일] > [배치]를 선택하거나 바로 가기 키 Ctrl+D(Windows) 또는 Command+D(Mac)를 운영 체제에 맞게 사용합니다. 

2. Kevins_Koffee_Kart 폴더를 찾은 다음 top-nav.png라는 파일을 선택합니다.

3. 앞서 머리글로 정의한 영역에 해당하는 페이지 상단 부분을 한 번 클릭합니다. 이미지가 각 페이지마다 페이지 본문 컨텐트 위의 동일한 위치에 표시되도록 이미지를 머리글 마커 위쪽에 배치해야 합니다.

4. 방금 배치한 갈색 리본 그래픽을 [선택] 도구로 드래그하여 로고의 빨간색 자전거 타이어가 갈색 리본의 맨 윗부분과 맞닿게 합니다. 그래픽을 이렇게 배치하면 마치 자전거가 갈색 리본 위를 달리는 듯한 장면을 표현할 수 있습니다.

5. [파일] > [배치]를 다시 선택합니다. 이번에는 thedrip.png라는 파일을 찾아 선택합니다. 갈색 리본 그래픽의 오른쪽 아랫부분을 한 번 클릭하여 이미지를 원래 크기로 배치합니다. 

6. 마치 갈색 리본 오른쪽에서 커피가 흘러내리는 듯 보이도록 [선택] 도구로 이 이미지의 위치를 갈색 리본에 맞춰 조정합니다(그림 26 참조).

 

그림 26. 로고와 사이트 탐색 메뉴의 배경을 추가하고 난 후의 머리글 컨텐트 모습입니다. 

라이브 사이트 예제를 참조하면 로고와 상단 탐색 메뉴 배경의 정확한 위치를 확인할 수 있습니다.

다음 단원에서는 위젯 컨테이너를 다루는 방법을 간단하게 살펴본 후 위젯을 실제로 추가해 보겠습니다.

위젯의 계층 구조 내에서 중첩된 요소와 컨테이너 선택

Muse에서 위젯을 사용하여 동적으로 생성되는 컨텐트와 대화형 사이트 기능을 추가할 수 있습니다. 위젯 라이브러리에는 미리 작성된 여러 가지 사이트 기능이 포함되어 있습니다. 이러한 기능을 페이지 위로 드래그한 다음 위젯의 동작 방식을 구성하고 스타일을 지정하여 모양을 바꿀 수 있습니다. 위젯 라이브러리에 있는 위젯을 페이지 위로 드래그하는 작업은 근본적으로 일련의 중첩된 컨테이너 집합을 배치하는 것과 같습니다. 마우스 단추를 한 번 클릭하여 전체 위젯을 선택한 상태에서 [선택] 도구를 사용하여 페이지에 있는 위젯의 위치를 조정하거나 측면 핸들을 사용하여 위젯의 크기를 조정할 수 있습니다. 

[컨트롤] 패널의 왼쪽 위 가장자리에 있는 선택 표시자를 참조하면 현재 선택한 것이 위젯의 어느 부분인지 쉽게 알 수 있습니다. 전체 위젯을 한 번 클릭했을 때는 선택 표시자에 "위젯"이라는 단어가 표시됩니다. 마우스 단추를 한 번 더 클릭하면 위젯 내의 컨테이너가 선택되고, 선택 표시자에 "컨테이너"라는 단어가 표시됩니다. 계속하여 마우스 단추를 클릭할 때마다 컨테이너 내에 중첩된 요소(텍스트 프레임 등)가 차례로 선택됩니다.

 예를 들어, 텍스트 프레임을 선택한 상태에서는 선택 표시자에 "텍스트 프레임"이라는 단어가 표시됩니다. 위젯을 클릭하여 중첩 요소를 한 층위씩 "아래로 파고들 때"는 선택 표시자에 어떤 단어가 표시되는지 참조하여 현재 선택한 중첩 요소가 무엇인지 확인하는 습관을 갖는 것이 좋습니다. 메뉴 탐색 모음의 개별 단추 등과 같은 다른 컨테이너를 선택하여 해당 상태를 업데이트할 수 있습니다. 예를 들어, 페이지를 처음 로드할 때, 방문자가 단추 위에 마우스 커서를 올려 놓았을 때, 방문자가 단추를 클릭했을 때 단추의 모양이 어떻게 바뀌게 할지 제어할 수 있습니다. 방문자가 현재 보고 있는 페이지에 상응하는 단추를 시각적으로 구분되게 표시하여 방문자에게 현재 위치를 알리는 "활성" 상태를 정의할 수도 있습니다. 

위젯에 중첩된 컨테이너 수가 많으면 편집할 항목을 선택하기 위해 마우스 단추를 여러 번 클릭해야 할 수도 있습니다. 선택 표시자를 참조하고 [상태] 패널에 제공되는 옵션을 확인하면 변경할 중첩 요소를 올바르게 선택했는지 쉽게 알 수 있습니다. 위젯 업데이트를 마친 후에는 페이지에서 임의의 다른 위치를 클릭하여 위젯을 선택 취소하거나 Esc 키를 반복하여 누르면서 위젯의 계층 구조를 한 수준씩 위로 거슬러 올라갈 수 있습니다.

옵션 메뉴의 설정을 업데이트하여 위젯의 동작과 표시 제어 

위젯 라이브러리에 있는 위젯을 페이지 위로 드래그한 다음 해당 위젯을 선택하면 위젯의 오른쪽 위 가장자리에 파란색 화살표 아이콘이 나타납니다. 이 파란색 화살표 아이콘을 클릭하면 [옵션] 메뉴가 열립니다. 

각 위젯마다 사용할 수 있는 옵션이 서로 다르므로 [옵션] 메뉴 인터페이스에서 설정할 수 있는 옵션도 제각각입니다. 이러한 설정은 (슬라이드 쇼를 자동으로 재생할지, 방문자가 축소판을 클릭해야만 해당 이미지의 좀 더 큰 버전을 볼 수 있도록 할지 선택하는 등) 위젯의 동작을 제어하는 옵션과 (각각의 새 이미지를 표시할 때 이미지 전환에 사용되는 애니메이션 유형을 지정하는 등) 위젯의 모양을 제어하는 옵션으로 크게 구분됩니다. 

웹 사이트를 디자인할 때 이러한 설정을 여러 가지로 테스트해 보면서 고객과 협력하여 해당 프로젝트에 가장 적합한 옵션을 선택할 수 있습니다. 사이트를 온라인으로 이미 게시했다 하더라도 언제든지 .muse 파일을 다시 열고 위젯을 선택한 다음 파란색 화살표 아이콘을 클릭하여 [옵션] 메뉴를 열기만 하면 위젯의 설정을 새로 변경할 수 있다는 사실을 잊지 마십시오. 그런 다음 사이트를 다시 게시하면 변경 내용이 라이브 웹 사이트에 반영됩니다. 

메뉴 위젯을 사용하면 사이트의 페이지 이름을 동적으로 표시하고 해당 페이지에 대한 링크를 자동으로 생성할 수 있습니다. 이렇게 하면 [플랜] 보기의 사이트맵을 기반으로 각 페이지에 사이트 탐색 기능을 매우 쉽게 추가할 수 있으며, 링크가 끊어질까 염려할 필요가 전혀 없습니다. 메뉴 위젯에 특정 페이지가 동적으로 표시되지 않게 하고 싶으면 [플랜] 보기에서 페이지의 축소판을 마우스 오른쪽 단추로 클릭하고 [탐색에 페이지 포함] 옵션을 선택 취소하여 해당 페이지를 비활성화하면 됩니다. 이 옵션은 기본적으로 활성화되어 있습니다. (활성화된 옵션 옆에는 확인 표시가 있습니다.) 

또는 Muse를 통해 메뉴 항목으로 자동으로 생성하는 대신 단추의 이름을 직접 지정하고 특정 페이지에 대한 링크를 추가하고 싶으면 메뉴 위젯을 수동으로 설정할 수도 있습니다. [옵션] 메뉴의 [메뉴 유형] 섹션에서 [수동] 옵션을 선택하면 됩니다(그림 27 참조).

 

그림 27. 페이지 이름과 링크를 동적으로 생성하는 대신 수동으로 사용자 정의 메뉴를 만들려면 [메뉴 유형] 설정의 [수동] 옵션을 선택합니다. 

위젯이 어떻게 작동하는지 좀 더 잘 알게 되었으니 이번에는 마스터 페이지에 위젯을 추가하여 사이트 탐색 기능을 구현해 보겠습니다.

가로 방향 메뉴 위젯 추가 

1. 마스터 페이지를 편집할 수 있도록 [디자인] 보기에서 열고 위젯 라이브러리를 엽니다. 위젯 라이브러리를 열려면 [창] > [위젯 라이브러리]를 선택하면 됩니다. 

2. [위젯 라이브러리] 패널에서 [메뉴]를 클릭하여 메뉴 위젯의 목록을 확장합니다. 가로 방향 메뉴 위젯을 선택합니다(그림 28 참조).

 

그림 28. [메뉴] 항목을 클릭하여 모든 메뉴 위젯에 액세스할 수 있습니다. 

3. 가로 방향 메뉴 위젯을 페이지의 머리글 섹션으로 드래그합니다. 기본적으로 사이트맵에 있는 각 페이지의 이름이 동적 메뉴 항목에 자동으로 표시되는 것을 알 수 있습니다.

4. [선택] 도구를 사용하여 가로 방향 메뉴 위젯을 드래그하여, 앞서 배치해 둔 머리글 섹션의 갈색 리본 그래픽 위에 놓습니다(그림 29 참조).

 

그림 29. 머리글의 갈색 리본 배경 이미지 위에 메뉴 위젯을 배치합니다. 

5. 메뉴의 오른쪽에 있는 파란색 화살표를 클릭하여 [옵션] 메뉴를 엽니다. [메뉴 유형] 섹션에서 [모든 페이지]를 선택하여 최상위 수준의 페이지와 하위 수준의 페이지(사이트맵의 둘째 층위에 있는 "Origins" 페이지 등)가 모두 탐색에 표시되도록 합니다.

6. [옵션] 메뉴의 [항목 크기] 섹션에서 [균일 간격]을 선택합니다. [함께 편집] 옵션이 활성화된 것을 알 수 있습니다. 기본적으로 활성화되어 있는 이 설정은 사용자가 메뉴 단추 한 개를 업데이트했을 때 그에 맞춰 나머지 메뉴 단추도 모두 자동으로 업데이트해 주는 역할을 합니다. 일반적으로는 이 옵션을 선택한 채로 두는 것이 좋지만, 때로는 특정 단추의 모양을 나머지 단추와 다르게 표현하기 위해 이 옵션을 해제할 수도 있습니다. 

7. 페이지에서 메뉴 위젯을 다시 클릭하여 선택한 다음 위젯의 오른쪽 가장자리를 클릭한 채 드래그하여 메뉴 항목을 갈색 리본 배경에 맞춰 옆으로 쭉 펼칩니다.

8. 페이지에서 메뉴 위젯을 다시 클릭하여 선택한 다음 위젯의 오른쪽 가장자리를 클릭한 채 드래그하여 메뉴 항목을 갈색 리본 배경에 맞춰 옆으로 쭉 펼칩니다.

9. [컨트롤] 패널에서 색상 피커를 클릭하고 텍스트를 흰색으로 설정합니다. 그런 다음 [텍스트 크기] 필드를 사용하여 텍스트를 12포인트로 설정합니다(그림 30 참조).

 

그림 30. 글꼴 색상과 크기(포인트 단위)를 설정하여 가로 방향 메뉴 위젯의 텍스트 단추를 조정합니다. 

메뉴 항목에 대한 롤오버 상태 만들기

1. [선택] 도구를 사용하여 "HOME" 단추 영역을 선택하고 [상태] 패널을 엽니다. 단추의 기본 상태가 이미 정의되어 있는 것을 알 수 있습니다. [상태] 패널에서 [롤오버] 축소판을 클릭하여 해당 상태를 편집합니다.

2. "HOME"을 선택한 채 [채우기] 색상 피커를 사용하여 "채우기 없음", 즉 투명을 선택합니다. (흰색 바탕에 빨간색 대각선이 있는 색상 칩을 선택하면 됩니다.)

3. [텍스트] 도구를 클릭하고 [컨트롤] 패널의 색상 피커를 사용하여 [롤오버] 상태에 대한 색상으로 황백색을 선택합니다.

4. [상태] 패널에서 [마우스 누름] 상태를 선택합니다. [텍스트] 도구를 선택한 채 [컨트롤] 패널의 색상 피커에서 색상 칩을 선택하여 [마우스 누름] 텍스트를 더 짙은 색상으로 설정합니다.

5. [상태] 패널에서 [활성] 상태를 선택합니다. [컨트롤] 패널에서 [채우기] 링크를 클릭하여 [채우기] 메뉴를 엽니다. 

6. [채우기] 메뉴에서 색상 피커를 클릭하고 채우기 색상을 "없음"으로 설정합니다. [이미지] 섹션 옆에 있는 폴더 아이콘을 클릭합니다. [가져오기] 대화 상자가 열리면 top-nav-over.png라는 배경 이미지 파일을 찾습니다. [선택]을 클릭하여 파일을 선택합니다. [가져오기] 대화 상자가 자동으로 닫힙니다.

7. [채우기] 메뉴에서 [맞춤] 옵션이 [원래 크기]로 설정되어 있는지 확인합니다. 그런 다음 [위치] 섹션에서 9개의 점 중 가운데를 클릭합니다. 그러면 배경 이미지 채우기가 채우기 색상 없이 원래 크기로 중앙에 위치하여 나타납니다. 아무 곳이나 클릭하여 [채우기] 메뉴를 닫습니다(그림 31 참조).

 

그림 31. top-nav-over.png 이미지를 사용하여 메뉴 항목의 활성 상태를 정의합니다. 

가로 방향 메뉴 위젯의 [옵션] 메뉴에 있는 [함께 편집] 옵션이 기본적으로 활성화되어 있으므로 "Home" 단추에 대한 모든 변경 내용이 탐색 모음의 나머지 모든 단추에도 자동으로 적용됩니다. 

8. [파일] > [저장]을 선택하여 작업 결과물을 저장합니다. [A-마스터] 탭에 있는 [X] 아이콘을 클릭하여 [디자인] 보기에서 페이지를 닫고 [플랜] 보기로 돌아갑니다. 마스터 페이지에 추가한 컨텐트를 포함하도록 페이지 축소판이 모두 업데이트된 것을 알 수 있습니다.

참고: 

머리글과 바닥글 영역 안내선은 사이트의 마스터 페이지에서만 편집할 수 있습니다. 페이지의 머리글이나 바닥글 크기를 편집하고 싶으면 언제든지 마스터 페이지를 두 번 클릭하여 [디자인] 보기에서 열고 안내선의 위치를 조정하면 됩니다.

아코디언 패널의 텍스트 작업

이 단원에서는 사이트의 개별 페이지에 컨텐트를 추가하는 방법을 설명합니다. 여기에서 사용할 것은 "아코디언"이라는 또 다른 유형의 위젯입니다. 패널 위젯(아코디언 위젯과 탭 구분 패널 위젯)을 사용하면 실제로 차지하는 화면 크기를 줄이면서도 더 많은 컨텐트를 표시할 수 있어 여러 모로 유용합니다.

1. [플랜] 보기에서 "THE KOFFEE" 페이지의 축소판을 두 번 클릭하여 [디자인] 보기에서 열고 편집을 시작합니다. 

2. [파일] > [배치]를 선택합니다. [가져오기] 대화 상자에서 Kevins_Koffee_Kart 폴더를 찾은 다음 head-thekoffee.png라는 이미지 파일을 선택합니다. [선택]을 클릭한 후 "THE KOFFEE" 페이지 상단을 한 번 클릭하여 이 이미지를 원래 크기로 페이지에 머리글 텍스트처럼 배치합니다. 물결 장식으로 밑줄을 그어 세련미를 더한 THE KOFFEE라는 이 머리글 텍스트 아래쪽에 아코디언 위젯을 추가할 것입니다.

계속하여 Adobe Muse 시작하기, 제4부에서는 웹 페이지에 아코디언 위젯을 추가하는 방법을 살펴보도록 하겠습니다.

Adobe Muse(어도비 뮤즈) 시작하기 제3부

페이지의 채우기 색상을 조정하여 반투명하게 만들기

이 내용은 ADOBE 홈페이지  어도비 뮤즈<adobe muse> 도움말을 가지고 왔습니다.