adobe muse(어도브 뮤즈) 웹사이트 만들기 5부

adobe muse(어도브 뮤즈) 웹사이트 만들기 5부

Muse를 사용하여 첫 웹 사이트 만들기 4부에서는 임베디드 HTML을 위젯 컨테이너 내부에 추가했습니다. 또한 라이트박스 컴포지션 위젯으로 작업하고 브라우저에서 라이트박스 동작을 테스트했습니다. 5부에서는 탭 구분 패널 위젯 작업을 시작합니다. 패널 위젯은 더 작은 화면 영역에 더 많은 요소를 표시하는 데 유리합니다. 방문자는 [탭 구분 패널] 위젯의 탭을 클릭하여 각 컨테이너의 컨텐트를 표시할 수 있습니다. 탭 구분 패널 위젯과 아코디언 위젯은 모두 방문자가 확장하고자 하는 컨텐트를 선택할 수 있도록 함으로써 페이지에 상호 작용을 추가합니다.

현재 홈 페이지와 이벤트 페이지가 완성되었습니다. 이 단원에서는 정보 페이지 디자인을 위해 탭 구분 패널 위젯 및 슬라이드 쇼 위젯 작업 방법을 배웁니다.

탭 구분 패널 위젯을 추가하여 단일 페이지에 여러 컨테이너 표시

1. [위젯 라이브러리]를 엽니다. [패널] 범주를 클릭하여 확장합니다. [탭 구분 패널] 위젯을 선택하고 위젯 라이브러리에서 정보 페이지의 가운데로 드래그합니다(그림 48 참조).    

 

그림 48. [탭 구분 패널] 위젯을 페이지로 드래그하면 기본 서식이 표시됩니다. 

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

3. 위젯을 다시 한 번 클릭하여 전체 탭 구분 패널을 선택합니다. 핸들을 드래그하여 전체 위젯 크기를 너비 840 및 높이 645로 조정합니다. 핸들을 드래그할 때 나타나는 측정값을 참조할 수 있습니다. 또한 [변형] 패널을 통해 W(너비) 및 H(높이) 필드의 값을 확인할 수 있습니다(그림 49 참조). 

 

그림 49. 너비 및 높이 필드를 검토하여 크기 조정된 위젯의 규격을 확인합니다. 

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

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

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

- 왼쪽: 220 

- 오른쪽: 220 

- 아래쪽: 2 

- 간격 높이: 10

 

그림 50. [간격] 패널에서 탭 컨테이너에 대한 간격 값을 설정합니다.

 

7. 이러한 변경 작업을 수행한 후 [선택] 도구를 사용하여 탭 구분 패널의 상단이 머리글 사각형의 하단에 닿도록(둘 사이에 세로 공간 없이) 전체 [탭 구분 패널] 위젯을 페이지의 맨 위까지 드래그합니다. 필요한 경우 확대하여 두 요소가 어떻게 정렬되었는지 자세히 확인할 수 있습니다. 작업을 마쳤으면 확대/축소율을 다시 100%로 설정합니다. 

탭 구분 패널 위젯에서 탭의 모양 스타일 지정

이제 [탭 구분 패널] 위젯을 추가했으므로 다음 작업에서는 스타일을 업데이트하여 두 탭을 디자인합니다.

1. 왼쪽 탭을 세 번 클릭하여 왼쪽 탭을 선택합니다. [상태] 패널을 열고 [표준] 상태를 선택합니다. [채우기] 메뉴를 사용하여 cream-menu라는 채우기 색상을 설정합니다. 획 두께를 0으로 설정합니다. 또한 [컨트롤] 패널에서 둥근 원형 인터페이스의 아래쪽 4등분 2개를 클릭하여 왼쪽 아래 반경 및 오른쪽 아래 모퉁이 반경을 사용으로 설정합니다. 모퉁이 반경 값을 100으로 설정합니다. 

2. [상태] 패널에서 [롤오버] 상태를 선택합니다. 탭의 롤오버 상태 채우기 색상을 571E00(앞에서 brown-menu로 이름을 바꾼 색상)으로 설정합니다. 롤오버 상태에 대한 채우기 색상을 설정할 경우 마우스 누름 상태도 자동으로 업데이트됩니다. [활성] 상태를 선택하고 활성 상태의 탭에도 동일한 채우기 색상을 적용합니다. 이제 표준 상태는 cream-menu 색상으로 채워지고 다른 세 가지 상태는 brown-menu 색상으로 채워졌습니다. 

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

- 웹 글꼴: Kaushan Script(또는 사용자가 원하는 스크립트 글꼴) 

- 글꼴 크기: 26 

- 색상: #70909D(3부에서 이 색상 이름을 blue-menu로 바꿈) 

- 행간: 120% 

- 정렬: 가운데 맞춤 

 

그림 52. [텍스트] 패널에서 설정을 업데이트하여 레이블 텍스트 스타일을 지정합니다. 

3. 레이블이 여전히 선택된 상태에서 [단락 스타일] 패널의 아래쪽에 있는 [새 스타일] 단추를 클릭합니다. 나중에 이 서식을 다시 적용하기 쉽도록 하기 위해 이 새 단락 스타일 이름을 head-tabs로 바꿉니다. 

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

 

5. [텍스트] 도구를 사용하여 왼쪽 탭에 있는 레이블 텍스트를 선택하고 Gallery를 입력합니다. 

6. [텍스트] 도구를 사용하여 오른쪽 탭에 있는 레이블 텍스트를 선택하고 Our Story를 입력합니다. 

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

 

그림 53. [상태] 패널에서 각 탭의 서식을 검토합니다.

탭 구분 패널 위젯의 컨텐트 영역에 텍스트 프레임 추가

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

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

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

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

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

... crafted through years of baking for friends and family.

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

7. 텍스트 프레임이 선택된 상태에서 [텍스트] 패널을 사용하여 텍스트 서식 지정을 위해 다음을 설정을 선택합니다. 

글꼴: Droid Serif(또는 사용자가 원하는 serif 글꼴)

글꼴 크기: 14

글꼴 색상: #222222

정렬: 왼쪽 맞춤

행간: 120%

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

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

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

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

12. [간격] 패널에서 왼쪽 간격을 24, 오른쪽 간격을 15로 설정합니다(그림 54 참조). 

 

그림 54. 간격 값을 설정하여 붙여 넣은 텍스트 복사본 주위에 시각적 공간을 만듭니다. 

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

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

 

다음은 기존 텍스트 프레임을 복제하여 컨텐트 영역의 오른쪽을 채우는 두 번째 텍스트 프레임을 만들 것입니다.

1. [선택] 도구를 사용하여 텍스트 프레임을 선택합니다. Option(Mac) 또는 Alt(Windows) 키를 누른 상태에서 텍스트 프레임의 복제본을 컨텐트 영역의 오른쪽으로 드래그합니다(그림 55 참조). 나타나는 정렬 안내선을 사용하여 오른쪽 텍스트 프레임이 왼쪽 텍스트 프레임과 가로로 정렬되는지 확인합니다. 

 

그림 55. 기존 텍스트 프레임을 복제하여 오른쪽에 두 번째 열을 만듭니다. 

2. 잠시 Muse에서 text-about-ourstory.txt라는 열린 텍스트 파일이 있는 텍스트 편집 프로그램으로 전환합니다. Katie's Cafe has won several awards...에서 시작하는 텍스트 파일의 아래쪽 부분을 끝까지 복사합니다. 

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

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

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

[탭 구분 패널] 위젯의 Our Story 탭이 거의 완성되었습니다. 마지막 작업에서는 왼쪽 텍스트 프레임의 텍스트 내부를 감싸는 작은 이미지를 추가할 것입니다.

이미지 프레임에서 이미지 주위에 텍스트 감싸기

텍스트 프레임 내에서 텍스트를 감싸는 방법은 이미지를 두는 대신 텍스트 프레임에 복사하여 붙여 넣은 다음 [줄바꿈] 패널을 사용하여 줄바꿈 설정을 조정하는 것입니다. 다음 단계를 따르십시오.

1. 페이지의 아무데나 또는 페이지 외부의 회색 영역을 클릭하여 위젯 선택을 해제합니다. 

2. [파일] > [배치]를 클릭하고 샘플 파일 폴더에 있는 macaroon-stack.jpg라는 파일을 선택합니다. [열기]을 클릭하여 [가져오기] 대화 상자를 닫습니다. 위젯이 포함된 영역 외부에서 페이지에 있는 커서를 클릭한 상태로 드래그합니다. 클릭한 상태로 드래그하여 이미지 크기를 조정할 수 있으며, 배율이 일시적으로 표시되어 배치하는 이미지의 배율을 알 수 있습니다. 이 프로젝트의 목적상 이미지의 규격이 110픽셀 너비 x 144픽셀 높이가 되도록 이미지가 약 42%로 축소되면 마우스 단추를 놓습니다(그림 56 참조). 

 

그림 56. 클릭한 상태로 드래그하여 배치한 이미지의 크기를 약 42%로 축소합니다. 

3. 페이지에서 축소된 이미지를 선택하고 마우스 오른쪽 단추를 클릭한 다음 나타나는 메뉴에서 [잘라내기]를 선택합니다. 

4. [텍스트] 도구를 사용하여 Katie's in Noe expanded...로 시작하는 두 번째 단락의 첫 글자 바로 앞에서 왼쪽 텍스트 프레임 내부를 클릭합니다. 텍스트 프레임에서 해당 위치를 마우스 오른쪽 단추로 클릭하고 메뉴에서 [붙여넣기]를 선택하여 이미지를 두 번째 단락 바로 앞에 붙여 넣습니다(그림 57 참조). 

 

그림 57. 텍스트 프레임에서 텍스트와 줄을 맞추어 이미지를 붙여 넣습니다. 

5. 이미지가 여전히 선택되고 선택 표시기에 인라인이라는 단어가 표시된 상태에서 [줄바꿈] 패널을 엽니다([줄바꿈] 탭을 클릭하거나 필요한 경우 [창] > [줄바꿈]을 선택하여 엽니다). 가운데 줄바꿈 옵션을 선택하여 이미지를 텍스트의 왼쪽으로 감싸고 [오른쪽 오프셋] 값을 15로 설정합니다(그림 58 참조).

 

그림 58. [줄바꿈] 패널에서 줄바꿈 설정을 조정합니다. 

이 변경 작업을 수행하면 [탭 구분 패널] 위젯의 Our Story 탭에 대한 컨텐트가 완료됩니다. 다음 단원에서는 Gallery 탭의 컨텐트 영역에 슬라이드 쇼를 추가하는 방법을 배웁니다.

[탭 구분 패널] 위젯을 구성하는 방법을 살펴보았으므로 Muse를 사용하여 첫 웹 사이트 만들기 6부에서는 [축소판 슬라이드 쇼] 위젯을 추가하고 구성하는 방법을 살펴보겠습니다. 정보 페이지에 대한 디자인을 마친 후에는 음식 페이지에 표시되는 메뉴 모음을 만들기 및 스타일 지정으로 이어집니다.

adobe muse(어도브 뮤즈) 웹사이트 만들기 5부

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