Adobe Muse에서 아코디언 및 탭 구분 패널 사용

[위젯 라이브러리] 패널을 엽니다([창] > [위젯 라이브러리]). 패널을 확장하고 [탭 구분 패널] 위젯을 선택합니다. [위젯 라이브러리]의 위젯을 [디자인] 패널로 드래그합니다.

오른쪽에 있는 상단 탭을 세 번 클릭합니다. 첫 번째 클릭은 전체 탭 구분 패널, 두 번째 클릭은 탭 컨테이너, 세 번째 클릭은 오른쪽에 있는 탭을 선택합니다.

선택 표시기를 통해 위젯의 어떤 하위 요소가 현재 선택되었는지 확인합니다. Delete(Mac) 또는 백스페이스(Windows) 키를 눌러 세 번째 탭을 삭제합니다. 이 변경 작업을 수행한 후에는 2개의 탭만 남아 있습니다. 페이지의 다른 곳을 클릭합니다.

위젯을 다시 한 번 클릭하여 전체 탭 구분 패널을 선택합니다. 핸들을 드래그하여 전체 위젯 크기를 폭 840 및 높이 645로 조정합니다. 핸들을 드래그할 때 나타나는 측정값을 참조할 수 있습니다.

또한 [변형] 패널을 통해 W(폭) 및 H(높이) 필드의 값을 확인할 수 있습니다.

[선택] 도구를 사용하여 [탭 구분 패널] 위젯을 페이지에 배치합니다(위쪽 부근 및 세로로 가운데 정렬).

컨트롤 패널에서 [고정] 인터페이스의 상단 가운데 위치를 클릭하여 [탭 구분 패널] 위젯을 고정시킵니다. 개체가 스크롤되지 않도록 고정하는 방법에 대한 자세한 내용은 이 링크를 참조하십시오.

[탭 구분 패널] 위젯이 여전히 선택된 상태에서 왼쪽 탭을 클릭하여 탭 컨테이너(상단 두 탭을 모두 포함하는 요소)를 선택합니다. [선택] 도구를 사용하여 높이가 약 98픽셀이 될 때까지 가운데 핸들을 아래로 드래그합니다.

[간격] 패널에서 아래 이미지에 나온 대로 다음 값을 설정합니다.

• 왼쪽: 220
• 오른쪽: 220
• 아래쪽: 2
• 간격 높이: 10
  

이러한 변경 작업을 수행한 후 [선택] 도구를 사용하여 탭 구분 패널의 상단이 머리글 사각형의 하단에 닿도록(둘 사이에 세로 공간 없이) 전체 [탭 구분 패널] 위젯을 페이지의 맨 위까지 드래그합니다.

필요한 경우 확대하여 두 요소가 어떻게 정렬되었는지 자세히 확인할 수 있습니다. 작업을 마쳤으면 확대/축소율을 다시 100%로 설정합니다.

왼쪽 탭을 세 번 클릭하여 왼쪽 탭을 선택합니다. [상태] 패널을 열고 [표준] 상태를 선택합니다. [채우기] 메뉴를 사용하여 채우기 색상을 설정합니다. 획 두께를 0으로 설정합니다.

[상태] 패널에서 [롤오버] 상태를 선택합니다. 탭의 롤오버 상태 채우기 색상을 571E00으로 설정합니다. 롤오버 상태에 대한 채우기 색상을 설정할 경우 마우스 누름 상태도 자동으로 업데이트됩니다.

[활성] 상태를 선택하고 활성 상태의 탭에도 동일한 채우기 색상을 적용합니다. 이제 표준 상태는 이전 단계에서 선택한 채우기 색상으로 채워지고 다른 세 가지 상태는 571E00으로 채워졌습니다.

왼쪽 탭을 다시 한 번 클릭하여 [레이블]을 선택합니다. 선택되면 선택 표시기에 레이블이라는 단어가 표시됩니다. [상태] 패널에서 [표준] 상태를 선택한 다음 [텍스트] 패널을 사용하여 아래 이미지에 나온 대로 다음 특성을 설정합니다.

• 웹 글꼴: Kaushan Script(또는 사용자가 원하는 스크립트 글꼴)
• 글꼴 크기: 26색상: #70909D(이 색상 이름을 blue-menu 등으로 바꿀 수 있음)
• 행간: 120%
• 정렬: 가운데 맞춤
  

레이블이 여전히 선택된 상태에서 [단락 스타일] 패널의 아래쪽에 있는 [새 스타일] 단추를 클릭합니다. 필요할 때마다 한 번의 클릭으로 이 서식을 다시 적용하려면 이 새 단락 스타일의 이름을 바꿉니다. 예를 들어, head-tabs로 바꿉니다.

[상태] 패널을 보면 표준 상태가 선택되었을 때 레이블에 적용한 서식이 롤오버 및 마우스 누름 상태에도 모두 적용되어 있습니다. [활성] 상태를 선택한 다음 head-tabs 단락 스타일을 다시 클릭하여 활성 상태에 서식을 적용합니다. 이제 두 탭의 모든 상태에 대한 스타일이 지정되었습니다.

[표준] 상태를 다시 선택합니다.

[텍스트] 도구를 사용하여 모든 탭에 있는 레이블 텍스트를 선택하고 적절한 레이블 이름을 입력합니다.

왼쪽 탭을 선택하고 [상태] 패널을 보면 각 탭 및 레이블에 적용된 최종 서식을 확인할 수 있습니다. 오른쪽 탭을 클릭하면 각 탭의 텍스트 컨텐트를 제외하고 상태가 동일하게 나타납니다.

서로 다른 레이블이 지정된 서로 다른 두 탭 사이를 약간의 시간을 두고 앞뒤로 클릭합니다. 두 탭의 자리 표시자 텍스트는 서로 다르므로 한 컨테이너가 표시되면 다른 컨테이너는 숨겨진다는 것을 알 수 있습니다.

위젯에서 오른쪽 탭을 클릭합니다. 오른쪽 탭이 선택되면 해당하는 컨텐트 영역이 탭 아래에 표시됩니다. 이 동작은 [디자인] 보기에서 페이지를 편집할 때 및 라이브 웹 사이트에서 모두 발생하는 동일한 동작입니다. 이 경우 단일 페이지에 더 많은 컨텐트를 효율적으로 표시할 수 있으므로 [탭 구분 패널] 위젯이 매우 유용하게 되는 것입니다.

탭에 대한 [컨텐트 영역]을 선택합니다. 선택되면 선택 표시기에 컨텐트 영역이라는 단어가 표시됩니다. 자리 표시자 이미지 파일을 선택하고 Delete(Mac) 또는 백스페이스(Windows) 키를 눌러 삭제합니다.

[텍스트] 도구를 사용하여 기존 자리 표시자 텍스트 머리글을 선택합니다. 볼드체 머리글 텍스트인 Mauris sit amet를 선택하고 삭제합니다.

잠시 Adobe Muse에서 바탕 화면으로 전환합니다. 샘플 파일 폴더를 열고 text-about-ourstory.txt라는 파일을 찾습니다. 파일을 두 번 클릭하여 텍스트 편집기에서 엽니다. 페이지의 첫 부분인 ... crafted through years of baking for friends and family까지 복사합니다.

Muse로 돌아갑니다. [텍스트] 도구를 사용하여 기존 자리 표시자 텍스트를 선택합니다. 복사한 텍스트 컨텐트를 텍스트 프레임에 붙여 넣습니다. 추가로 한 줄을 남겨 두고 텍스트 프레임의 맨 위로 돌아갑니다.

텍스트 프레임이 선택된 상태에서 [텍스트] 패널을 사용하여 텍스트 서식 지정 설정을 선택합니다. 예를 들어, 다음 설정을 선택할 수 있습니다.

• 글꼴: Droid Serif
• 글꼴 크기: 14
• 색상: #222222
• 정렬: 왼쪽 맞춤
• 행간: 120%
  

텍스트가 여전히 선택된 상태에서 [단락 스타일] 패널의 아래쪽에 있는 [새 스타일] 단추를 클릭합니다. 새 단락 스타일을 두 번 클릭하고 이름을 바꿉니다. 예를 들면, body로 바꿉니다. 그러면 동일한 서식을 다른 텍스트 컨텐트에 다시 적용하기가 쉬워집니다.

[색상 견본] 패널에서 색상 값 #222222를 두 번 클릭하고 이 색상으로 이름을 바꿉니다. 예를 들면, katieblack으로 바꿉니다.

[컨트롤] 패널에서 텍스트 필드의 획 색상을 #222222(katieblack)로 설정하고 획 두께를 5픽셀로 설정합니다.

[채우기] 메뉴를 사용하여 텍스트 필드의 채우기 색상을 연한 베이지색(#F8F3E2)으로 설정합니다. [이미지] 섹션 옆에 있는 폴더를 클릭하고 샘플 파일 폴더에 있는 bg-texture.png라는 파일을 찾아 선택합니다. [맞춤] 메뉴를 [바둑판식 배열]로 설정합니다.

[간격] 패널에서 왼쪽 및 오른쪽 간격을 설정합니다. 예를 들어, 왼쪽 간격을 24, 오른쪽 간격을 15로 설정할 수 있습니다.

다음은 각 탭에 해당하는 각 컨텐트 영역 컨테이너에 컨텐트를 추가할 것입니다.

[선택] 도구를 사용하여 텍스트 필드의 크기를 조정합니다. 컨테이너의 왼쪽으로 드래그한 다음 핸들을 사용하여 사용 가능한 컨텐트 영역 공간의 약 절반까지 폭을 확장합니다(약 390픽셀 폭 x 381픽셀 높이).

[선택] 도구를 사용하여 텍스트 프레임을 선택합니다. Option(Mac) 또는 Alt(Windows) 키를 누른 상태에서 텍스트 프레임의 복제본을 컨텐트 영역의 오른쪽으로 드래그합니다(아래 이미지 참조).

나타나는 정렬 안내선을 사용하여 오른쪽 텍스트 프레임이 왼쪽 텍스트 프레임과 가로로 정렬되는지 확인합니다.

잠시 Muse에서 탭 구분 패널의 컨텐트가 들어 있는 텍스트 편집 프로그램으로 전환합니다. 복제 탭에 붙여 넣으려는 컨텐트를 복사합니다.

Muse로 돌아옵니다. 복제된 오른쪽 텍스트 프레임에 있는 기존 텍스트를 모두 삭제합니다. 클립보드에서 복사한 새 텍스트 컨텐트를 붙여 넣습니다.

필요에 따라 [선택] 도구를 사용하여 원하는 위치의 컨텐트 영역 내에서 가운데에 정렬되도록 두 텍스트 프레임을 배치합니다.

텍스트 프레임이 여전히 선택된 상태에서 Esc 키를 한 번 눌러 복제된 탭의 [컨텐트 영역]을 선택합니다. 획 두께를 0으로 설정하고 채우기 색상을 [없음]으로 설정합니다.

[디자인 보기]에서 프로젝트를 열고 편집을 시작합니다.

[파일] > [배치]를 선택합니다. [가져오기] 대화 상자에서 에셋이 있는 폴더로 이동하고 필요한 이미지 파일을 선택합니다. [선택]을 클릭한 후 페이지 상단을 한 번 클릭하여 이 이미지를 원래 크기로 페이지에 머리글 텍스트처럼 배치합니다. 이 머리글 아래에 아코디언 위젯이 추가됩니다.

[위젯 라이브러리]를 엽니다. ([창] > [위젯 라이브러리]를 선택하여 이 라이브러리를 열 수 있습니다. [위젯 라이브러리]가 이미 열려 있으면 고정된 패널 모음에서 상단 탭을 클릭하여 위젯 라이브러리를 활성화합니다.)

[패널]을 클릭하여 패널 위젯의 목록을 확장합니다. 아코디언 위젯을 선택합니다. 아코디언 위젯을 페이지 위로 드래그하여 페이지 컨텐트 영역의 왼쪽 상단에 배치합니다.

[선택] 도구로 위젯의 여러 구성 요소를 선택해 보십시오. 전체 위젯을 선택하면 컨트롤 패널의 왼쪽 위 가장자리에 있는 선택 표시자에 "위젯"이라는 단어가 표시됩니다. 마우스 단추를 다시 클릭하여 컨테이너, 텍스트 프레임 등을 선택하면 그에 맞춰 선택 표시자에 표시되는 내용이 바뀌는 것을 알 수 있습니다. 이와 같이 선택 표시자를 확인하면 현재 선택한 것이 위젯의 어느 부분인지 쉽게 알 수 있습니다.

위젯의 요소를 선택 취소하려면 Esc 키를 눌러 현재 선택 항목을 한 수준 뒤로 되돌리거나 이 키를 여러 번 눌러 중첩 요소 밖으로 완전히 벗어날 수 있습니다. 또는 페이지에서 위젯 바깥쪽의 다른 부분을 클릭하여 선택을 취소할 수도 있습니다.

아코디언 위젯에는 기본적으로 패널 두 개가 있습니다. 위쪽 패널에는 "Lorem 1"이라는 자리 표시자 탭 이름이 표시되고, 아래쪽 패널에는 "Ipsum 2"라는 자리 표시자 탭 이름이 표시됩니다.

파란색의 둥근 화살표 아이콘을 클릭하여 [위젯 옵션] 대화 상자를 엽니다. [함께 편집] 옵션이 선택되었는지 확인합니다. 이 옵션을 활성화한 상태에서 아코디언 위젯의 탭 이름 하나를 변경하면 그 변경 내용이 다른 모든 탭에도 함께 적용됩니다.

[선택] 도구로 위젯을 한 번 클릭하여 선택한 다음 오른쪽 핸들을 오른쪽 방향으로 드래그하여 위젯의 폭을 확장합니다. 아래 이미지를 참조하여 두 개의 열이 모두 표시될 정도로 충분히 넓게 확장하십시오.

위젯의 아래쪽, 즉 "Ipsum 2" 패널 아래 있는 플러스 기호(+)를 클릭하여 세 번째 패널을 추가합니다. 세 번째 패널에 "Ipsum 3" 자리 표시자 탭 이름이 표시됩니다.

[선택] 도구를 사용하여 현재 "Lorem 1"이라고 표시되어 있는 맨 위쪽 탭의 텍스트 프레임을 선택합니다. "Lorem 1"을 한 번 클릭하여 전체 위젯을 선택하고 맨 위쪽 탭에 상응하는 컨테이너를 확장한 다음 "Lorem 1"이라는 텍스트를 클릭하여 텍스트 프레임을 선택합니다. 텍스트 프레임을 선택하면 선택 표시자에 "텍스트 프레임"이라는 단어가 표시됩니다.

자리 표시자 텍스트 "Lorem 1"을 두 번 클릭한 다음 이를 편집하고 원하는 텍스트를 입력합니다.

첫 번째 탭 아래 있는 좀 더 넓은 면적의 연한 회색 컨테이너를 선택합니다. [텍스트] 도구로 이 연한 회색 컨테이너를 드래그하여 텍스트 프레임을 엽니다.

새 텍스트 프레임에서 머리글 텍스트를 입력합니다.

머리글을 표시하는 아코디언 위젯의 맨 위쪽 탭을 선택합니다.

파란색의 둥근 화살표 단추를 클릭하여 [옵션] 메뉴를 엽니다. [함께 편집] 옵션의 선택을 취소합니다. [옵션] 메뉴 바깥쪽을 클릭하여 이 메뉴를 닫습니다.

맨 위쪽 탭을 두 번 클릭하여 선택 표시자에 "텍스트 프레임"이라는 단어가 표시되게 합니다. 맨 위쪽 탭의 텍스트 프레임을 선택한 상태에서 컨트롤 패널의 [채우기] 링크를 클릭하여 [채우기] 메뉴를 엽니다. 색상 피커를 클릭하고 배경 채우기 색상을 기본값은 짙은 회색 대신 "없음"으로 설정합니다.

[이미지] 섹션에 있는 폴더 아이콘을 클릭하여 [가져오기] 대화 상자를 엽니다. 에셋 폴더로 이동하고 추가하려는 이미지를 선택합니다.

[간격] 패널을 엽니다. [안쪽 여백]: L(왼쪽) 섹션에서 위쪽 화살표를 계속 눌러 이 탭의 배경 이미지 중앙에 텍스트가 배치되도록 머리글 앞의 간격을 넓힙니다.

[디자인] 보기에서 [위젯 라이브러리]를 열고 [패널] 섹션을 확장합니다.

[패널] 섹션에서 [아코디언] 옵션을 선택하고 페이지로 드래그합니다.

[선택] 도구를 사용하여 한 번 클릭하고 전체 위젯을 선택합니다. 컨트롤 패널의 상단 왼쪽에 있는 [선택 표시자]에 [아코디언]이라고 표시됩니다.

Shift 키를 누른 상태에서 회전하면 비율이 제한되어 위젯을 45°씩 이동할 수 있습니다. 위젯을 회전할 때 현재 회전 값을 표시하는 툴팁이 나타납니다.

위젯을 회전한 후 [미리 보기] 링크 또는 [브라우저에서 페이지 미리 보기]를 클릭하면 아코디언이 예상한 대로 패널을 확장/축소한다는 것을 알 수 있습니다. 레이블 컨테이너가 클릭할 때 해당하는 컨텐트 영역을 표시하도록 작성되었는지 여부를 확인합니다.

이제 레이블 및 컨텐트 영역 컨테이너를 옆으로 표시하는 대신 "똑바른" 방향의 컨텐트로 채우는 일만 남았습니다.

다음 단계를 수행하여 컨텐트 영역 내에 텍스트 컨텐트를 표시하십시오. 위에서 설명한 동일한 기법을 사용하여 컨텐트 영역 컨테이너의 텍스트 필드를 회전시킵니다.

컨텐트 영역의 기본 텍스트를 두 번 클릭합니다. 처음에는 전체 [아코디언] 위젯이 선택되고 그 다음에는 컨텐트 영역 컨테이너가 선택됩니다. 컨텐트 영역이 선택된 상태에서 [선택] 도구를 사용하여 크기 조정 핸들을 클릭하고 드래그하여 컨텐트 영역의 크기를 확대합니다.

컨텐트 영역이 여전히 선택된 상태에서 다시 한 번 클릭하여 컨텐트 영역 내의 텍스트 프레임을 선택합니다. 회전 커서가 표시될 때까지 커서를 텍스트 프레임 모퉁이 중 하나의 부근으로 가져갑니다. Shift 키를 누른 상태에서 텍스트 프레임을 다른 위젯과 동일한 90°로 회전합니다.

텍스트 프레임을 회전한 후 [선택] 도구를 사용하여 컨텐트 영역 내에서 위치를 조정합니다. [텍스트] 도구를 사용하여 자리 표시자 텍스트를 표시하고자 하는 실제 텍스트로 바꾼 다음 컨트롤 패널 및 [텍스트] 패널의 텍스트 서식 지정 옵션을 사용하여 텍스트 스타일을 지정합니다(또는 문단 스타일을 적용하여 모양을 업데이트합니다).

이미지 배치, 사각형 그리기 또는 HTML 포함 등의 작업을 통해 컨텐트 영역 컨테이너를 원하는 대로 채웁니다. 회전된 컨테이너 내에서 자동으로 똑바르게 배치되므로 이 컨텐트를 회전할 필요는 없습니다.

기준점 링크를 추가할 아코디언 위젯을 선택합니다. 기준점 링크를 추가하려는 탭을 클릭합니다.

기준점 도구를 클릭해 Place Gun에서 기준점 링크를 로드합니다.

아코디언 위젯에서 기준점 링크를 배치합니다.

기준점 이름 변경 팝업이 표시됩니다. 기준점에 알맞은 이름을 입력하고 [확인]을 클릭합니다.

웹 사이트의 어떤 페이지에서든 이 기준점을 모든 페이지 요소에 연결할 수 있습니다.

이 기준점에 페이지 요소를 연결하려면 연결할 페이지 요소를 선택합니다. 상단의 하이퍼링크 드롭다운에서 생성한 기준점을 선택합니다.

라이브 사이트에서 페이지 요소를 클릭할 때마다 페이지에 기준점 링크를 배치한 아코디언 탭이 표시됩니다.