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

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

Muse를 사용하여 첫 웹 사이트 만들기 5부에서는 단일 페이지에 더 많은 컨텐트를 표시하기 위한 [탭 구분 패널] 위젯 추가 방법을 알아보았습니다. 텍스트 프레임 내에서 이미지 주위에 텍스트를 감싸는 방법도 살펴보았습니다. 6부에서는 [탭 구분 패널] 위젯의 컨테이너 중 하나에서 [축소판 슬라이드 쇼] 위젯을 추가하여 정보 페이지에 대한 디자인을 마무리하는 방법을 살펴봅니다. 또한 음식 페이지 디자인을 시작하여 아침, 점심, 저녁 식사 및 디저트 메뉴를 추가할 것입니다.

슬라이드 쇼 위젯은 설정이 쉽습니다. [축소판 슬라이드 쇼] 위젯을 통해 사이트에서 대화형으로 일련의 이미지를 표시할 수 있습니다. [탭 구분 패널] 위젯과 유사하게 방문자가 축소판 컨테이너(단추, 이 예의 경우 사진 축소판)를 클릭하면 해당하는 메인 이미지 버전이 페이지의 다른 큰 컨테이너에 표시됩니다.

이 자습서의 4부에서 홈 페이지에 추가한 [라이트박스 컴포지션] 위젯과 같이 라이트박스에 특정 컨텐트를 표시하는 사진 갤러리를 만들 수도 있습니다. 이미지 모음을 표시하고자 할 때 라이트박스 슬라이드 쇼를 사용하면 페이지의 나머지 부분이 어두워지면서 각 큰 메인 이미지가 고유의 모달 창에 표시됩니다.

이 예에서는 위쪽에 여러 축소판 이미지를 표시하고 아래에 하나의 큰 이미지가 표시되는 사진 갤러리를 만들 것입니다. [옵션] 패널을 사용하여 사진 갤러리가 동작하고 표시되는 방법을 제어할 수 있습니다. 또한 [컨트롤] 패널에서 설정을 적용하여 슬라이드 쇼의 모양에 스타일을 지정할 수 있습니다.

페이지에 축소판 슬라이드 쇼 위젯 추가

 

슬라이드 쇼는 페이지에 직접 추가할 수 있지만, 이 예에서는 [탭 구분 패널] 위젯의 컨텐트 영역 내부에 [축소판 슬라이드 쇼] 위젯을 중첩시킬 것입니다. 다음 단계를 따르십시오.

1. [디자인] 보기에서 정보 페이지를 편집할 때 [갤러리] 탭을 클릭하여 컨텐트 영역 컨테이너 아래에 자리 표시자 컨텐트가 표시되는지 확인합니다. 

2. 자리 표시자 컨텐트(컨텐트 영역 내부의 이미지 프레임 및 텍스트 프레임)를 선택하고 삭제합니다. 

3. [위젯 라이브러리]를 열고 [슬라이드 쇼] 섹션을 확장합니다. 목록에서 [축소판 슬라이드 쇼] 위젯을 선택하고 복사본을 페이지로 드래그합니다(그림 59 참조). 

 

그림 59. [축소판 슬라이드 쇼] 위젯을 페이지로 드래그합니다. 

옵션 패널에서 축소판 슬라이드 쇼 위젯 구성

처음에 [축소판 슬라이드 쇼] 위젯을 추가하면 1개의 큰 컨테이너(메인 이미지), 3개의 작은 축소판 컨테이너(단추), 2개의 화살표 단추(다음 및 이전 탐색), 카운터 및 캡션이 포함되어 있습니다.

1. 파란색 화살표 아이콘을 클릭하여 [옵션] 패널에 액세스합니다. 이 예에서는 [다음] 및 [이전] 화살표 단추가 필요하지 않으므로 이러한 항목(이전 및 다음) 옆에 있는 확인란을 선택 해제하여 사용 안 함으로 설정합니다. 확인란을 선택 해제하는 즉시 단추가 사라집니다. 

[캡션] 및 [카운터] 옵션도 선택 해제하여 축소판 트리거 단추 및 큰 대상 컨테이너만 남도록 합니다. 옵션을 살펴보고 아래에 나열된 설정과 일치하도록 필요한 항목을 업데이트합니다(그림 60 참조).

- 새 메인 이미지: 비율에 맞게 프레임 채우기 

- 새 축소판: 비율에 맞게 프레임 채우기 

- 전환: 서서히 사라지기 

- 전환 속도: 0.5초 

- 자동 재생: 사용 안 함 

- 셔플: 사용 안 함 

- 라이트박스: 사용 안 함 

- 스와이프 설정: 사용 안 함 

- 처음: 사용 안 함 

- 이전: 사용 안 함 

- 다음: 사용 안 함 

- 마지막: 사용 안 함 

- 캡션: 사용 안 함 

- 카운터: 사용 안 함 

- 닫기 단추: 사용 안 함 

- 축소판: 사용 

- 편집 시 라이트박스 파트 표시: 사용 

- 함께 편집: 사용 

 

그림 60. [옵션] 패널에서 [축소판 슬라이드 쇼] 위젯에 대한 설정을 업데이트합니다. 

위젯에 따라 사용 가능한 옵션이 서로 다르며 일부 위젯은 다른 위젯보다 더 복잡합니다. [메뉴] 옵션을 검토하여 사용 가능한 설정을 확인하십시오. 다음은 간략한 개요입니다.

이미지 추가: 폴더 아이콘을 클릭하여 표시할 이미지를 찾아보고 선택합니다.

새 메인 이미지: 큰 사진 컨텐트가 대상 컨테이너에 어떻게 표시되는지 정의합니다.

- 비율에 맞게 컨텐트 맞추기: 원본 크기가 대상 컨테이너와 일치하지 않더라도 사진 이미지 파일이 원본 크기로 유지됩니다. 따라서 이미지가 맞지 않을 경우 컨테이너의 일부가 비어 있을 수 있습니다. 

- 비율에 맞게 프레임 채우기: 사진 이미지 파일의 크기를 조정하여 대상 컨테이너의 비율에 맞게 채웁니다. 사진 이미지 중 일부가 잘릴 수 있습니다. 

새 축소판: 작은 축소판 사진 컨텐트가 트리거 컨테이너에 어떻게 표시되는지 정의합니다.

- 비율에 맞게 컨텐트 맞추기: 원본 크기가 대상 컨테이너와 일치하지 않더라도 사진 이미지 파일이 원본 크기로 유지됩니다. 따라서 이미지가 맞지 않을 경우 컨테이너의 일부가 비어 있을 수 있습니다. 

- 비율에 맞게 프레임 채우기: 사진 이미지 파일의 크기를 조정하여 대상 컨테이너의 비율에 맞게 채웁니다. 사진 이미지 중 일부가 잘릴 수 있습니다. 

전환: 대상 컨테이너의 컨텐트가 다른 대상 컨테이너로 바뀌는 과정에서 사용되는 애니메이션 효과입니다. 이러한 효과는 터치 스크린에도 사용됩니다. 따라서 모바일 장치용 사이트를 만들 경우 방문자가 화면을 쓸어 넘기면 다음 컨텐트 항목이 나타날 때 전환 효과를 볼 수 있습니다.

- 서서히 사라지기: 기존 컨테이너의 투명도가 낮아지면서 새 컨테이너의 투명도가 높아집니다. 

- 가로: 새 컨테이너가 기존 컨테이너를 없애면서 가로로 펼쳐집니다. 

- 세로: 새 컨테이너가 기존 컨테이너를 없애면서 세로로 펼쳐집니다. 

전환 속도: 애니메이션을 재생하는 데 걸리는 시간(초)입니다.

자동 재생: 사용으로 설정되면 방문자가 각 트리거를 클릭하여 해당하는 대상을 순서대로 보아야 하는 대화형 경험 대신 슬라이드 쇼를 자동으로 재생합니다. 다음 이미지로 전환되기 전에 각 이미지를 표시할 시간(초)을 설정합니다.

셔플: 사용으로 설정되면 이미지가 축소판을 따라 순서대로 표시하는 대신 무작위 순서로 표시됩니다.

라이트박스: 사용으로 설정되면 대상 컨테이너의 컨텐트가 표시될 때 슬라이드 쇼가 오버레이되면서 페이지의 나머지 부분이 어두워집니다.  라이트박스 창이 닫히면 전체 페이지가 다시 나타납니다.

스와이프 설정: 사용으로 설정되고 사이트가 모바일 장치에 웹 컨텐트를 표시하기 위한 태블릿 또는 스마트폰 레이아웃을 포함할 경우 위젯의 대화형 파트가 터치 스크린 제스처를 지원합니다.

파트 섹션:

- 처음: 사용으로 설정되면 [처음] 탐색 단추가 표시됩니다. 

- 이전: 사용으로 설정되면 [이전] 탐색 단추가 표시됩니다. 

- 다음: 사용으로 설정되면 [다음] 탐색 단추가 표시됩니다. 

- 마지막: 사용으로 설정되면 [마지막] 탐색 단추가 표시됩니다. 

- 캡션: 사용으로 설정되면 사진 갤러리 캡션이 표시됩니다. 

- 카운터: 사용으로 설정되면 사진 갤러리 카운터가 표시됩니다. 

- 닫기 단추: 사용으로 설정되면 닫기 단추가 표시됩니다. 

축소판: 사용으로 설정되면 축소판 트리거 단추가 표시됩니다.

 

편집 섹션:

- 편집 시 라이트박스 파트 표시: [라이트박스] 옵션이 사용으로 설정된 경우 해당하는 트리거가 페이지에서 선택되면 기본적으로 각 대상 영역만 표시됩니다. 레이아웃을 디자인할 때 작업하면서 대상을 보기 위해 이 옵션을 사용으로 설정하는 것이 도움이 될 수 있습니다. 이 설정은 페이지를 미리 보거나 브라우저에서 볼 때 슬라이드 쇼의 표시에 영향을 주지 않습니다. [라이트박스] 옵션이 사용으로 설정되지 않은 경우 이 옵션은 회색으로 비활성화됩니다.

 

- 함께 편집: 이 옵션은 위젯의 빠른 편집을 위해 기본적으로 사용으로 설정됩니다. 각 트리거의 모양을 서로 다르게 설정해야 하는 경우가 아니라면 한 요소에 대한 변경 내용이 나머지 요소에 자동으로 적용되도록 이 옵션을 그대로 사용으로 유지하십시오. 

사용 가능한 설정을 검토했으면 [옵션] 메뉴 바깥쪽 페이지 영역을 클릭하여 이 메뉴를 닫습니다.

다음 단원에서는 위젯의 요소를 재배치합니다.

축소판 슬라이드 쇼 위젯의 요소 크기 조정 및 정렬

1. 전체 [슬라이드 쇼] 위젯을 한 번 클릭하여 선택합니다. [선택] 도구를 사용하여 핸들을 드래그하여 약 790픽셀 너비 x 490픽셀 높이가 될 때까지 전체 [축소판 슬라이드 쇼] 위젯의 크기를 조정합니다. [변형] 패널 또는 [컨트롤] 패널의 [변형] 필드에서 규격을 확인할 수 있습니다. 

2. [슬라이드 쇼]가 여전히 선택된 상태에서 [축소판 컨테이너]를 다시 클릭하여 3개의 축소판이 포함된 컨테이너를 선택합니다. 측면 변형 핸들을 사용하여 넓힌 다음 [선택] 도구를 사용하여 3게의 축소판이 큰 메인 이미지 컨테이너의 위쪽에 배치되고 가운데에 세로로 정렬될 때까지 축소판 모음을 위로 드래그합니다(그림 61 참조). 

 

그림 61. 축소판 트리거 컨테이너를 선택하고 큰 대상 컨테이너 위쪽에 재배치합니다. 

요소를 드래그할 때 파란색 스마트 안내선이 잠시 표시되므로 [축소판 컨테이너]가 언제 메인 이미지 컨테이너의 가운데에 정렬되는지 알 수 있습니다.

다음 단계에 따라 해당하는 축소판 및 메인 이미지 컨테이너를 자동으로 생성하면서 그래픽을 사진 갤러리에 추가합니다.

1. 파란색 화살표 단추를 클릭하여 [옵션] 메뉴를 엽니다. [이미지 추가...] 옆에 있는 폴더 아이콘을 클릭하고 데스크톱의 샘플 파일 폴더로 이동합니다. gallery라는 하위 폴더를 찾아 엽니다. 

2. Shift 키를 누른 상태에서 다음 5개의 이미지 파일을 선택합니다. 

- slide-macaroon.jpg 

- slide-mini-cakes.jpg 

- slide-orange.jpg 

- slide-rice.jpg 

- slide-tea.jpg 

3. Shift 키를 누른 상태에서 5개의 이미지 파일을 모두 선택합니다. [열기]를 클릭하여 [가져오기] 대화 상자를 닫습니다(그림 62 참조). 

 

그림 62. gallery 하위 폴더에 있는 5개의 갤러리 사진을 선택합니다. 

여러 이미지 파일을 선택하면 [축소판 슬라이드 쇼] 위젯을 채우게 됩니다. 이 전략을 통해 여러 이미지 파일을 선택하고 메인 이미지 컨테이너의 각 새로운 큰 이미지 파일에 해당하는 [축소판 컨테이너] 단추를 생성할 수 있습니다.

5개의 새로운 이미지가 기존 축소판 단추에 추가됩니다.

4. [축소판 슬라이드 쇼] 위젯을 한 번 클릭하여 선택하고 [축소판 컨테이너]를 다시 클릭한 다음 처음에 슬라이드 쇼를 추가할 때 기본적으로 표시되는 3개의 흑백 축소판 이미지 중 하나를 다시 한 번 클릭합니다. Delete 키(Mac) 또는 백스페이스 키(Windows)를 눌러 5개의 새로운 컬러 축소판만 남을 때까지 각 축소판을 제거합니다(그림 63 참조). 

 

그림 63. 각 기본 흑백 축소판을 선택하고 백스페이스 또는 Delete 키를 눌러 하나씩 제거합니다. 

 

전체 축소판을 삭제하지 않도록 주의하십시오. 전체 축소판을 삭제한 경우 [편집] > [실행 취소]를 선택하여 마지막 작업을 취소한 다음 백스페이스 또는 Delete 키를 누르기 전에 각 축소판을 클릭했는지 확인합니다(선택 표시기에 축소판이라는 단어가 표시됨).

5. 5개의 축소판 이미지가 포함된 컨테이너를 선택합니다. 변형 핸들을 사용하여 5개의 남아 있는 축소판이 메인 이미지 컨테이너 위쪽 가운데에 오도록 크기를 조정합니다(그림 64 참조). 

축소판 슬라이드 쇼 위젯 테스트

슬라이드 쇼 요소를 재배치하고 자리 표시자 축소판 이미지를 제거하여 갤러리가 완성되었습니다. 다음 단원에서는 슬라이드 쇼를 테스트하여 어떻게 표시되는지 확인합니다.

1. 먼저, 위쪽에 있는 축소판 단추를 클릭하여 [디자인] 보기에서 사진 갤러리를 테스트하고 각 해당하는 메인 이미지가 아래쪽의 큰 컨테이너에 표시되는지 확인합니다.

 

2. [미리 보기]를 클릭하여 갤러리가 Muse 내의 브라우저에서 어떻게 나타나는지 확인합니다. 슬라이드 쇼와 상호 작용하여 해당하는 축소판을 클릭할 때 큰 이미지가 어떻게 나타나는지 확인합니다. 

3. 테스트를 마쳤으면 [디자인]을 클릭하여 [디자인] 보기로 돌아옵니다. 다른 곳을 클릭한 다음 전체 [축소판 슬라이드 쇼] 위젯을 선택합니다(주위에 있는 탭 구분 위젯 컨테이너를 선택하지 않도록 주의하십시오). 

[선택] 도구를 사용하여 [갤러리] 탭의 패널 컨테이너 내에서 [슬라이드 쇼]를 가운데에 둡니다. 이러한 변경 작업을 수행하면 갤러리가 완성된 것입니다(그림 65 참조). 

 

그림 65. [탭 구분 패널] 위젯의 [컨텐트 영역] 컨테이너 내에서 가운데에 오도록 갤러리를 배치합니다. 

 

4. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 기본 브라우저에 표시된 정보 페이지를 확인합니다. 

5. [탭 구분 패널] 위젯의 기능을 테스트합니다. 탭을 클릭하여 해당하는 컨텐트가 컨텐트 영역 컨테이너에 표시되는지 확인합니다. 그런 다음 축소판 단추를 클릭하고 해당하는 큰 메인 이미지가 표시되는지 확인하여 [갤러리] 탭에서 슬라이드 쇼를 테스트합니다. 

이제 정보 페이지 디자인이 완료되었습니다.

다음에는 컨텐트를 추가하고 음식 페이지를 디자인할 것입니다.

이 샘플 프로젝트의 음식 페이지에는 아침, 점심, 저녁 식사 및 디저트에 대한 4개의 영역이 포함됩니다. 이 단원에서는 4개의 텍스트 프레임을 추가하고 텍스트 서식을 지정하여 메뉴의 모양을 업데이트합니다.

단락 스타일을 사용하여 텍스트 프레임 스타일 지정

메뉴를 채우기 위해 외부 텍스트 파일에서 메뉴 텍스트를 복사한 뒤 텍스트 프레임에 붙여 넣을 것입니다. 또한 단락 스타일을 만들고 적용하여 텍스트 스타일을 지정할 것입니다. 다음 단계를 따르십시오.

1. [디자인] 보기에서 음식 페이지를 편집할 때 [텍스트] 도구를 사용하여 페이지 상단 부근 머리글 영역 아래에 Breakfast 메뉴에 대한 텍스트 프레임을 만듭니다. 약 800픽셀 너비 x 440픽셀 높이인 프레임을 드래그합니다. 

2. 잠시 Muse에서 바탕 화면으로 전환합니다. 샘플 파일 폴더를 열고 text-food-breakfast.txt라는 파일을 찾습니다. 파일을 두 번 클릭하여 텍스트 편집기에서 엽니다. 텍스트 파일에서 전체 텍스트를 선택하고 복사합니다. 

3. Muse로 돌아갑니다. [텍스트] 도구를 사용하여 텍스트 프레임 내부를 클릭합니다. 복사한 텍스트 컨텐트를 텍스트 프레임에 붙여 넣습니다. 텍스트 프레임의 맨 위에 한 줄의 추가 리턴을 둡니다. 

4. [텍스트] 도구를 사용하여 텍스트의 첫 번째 행인 Fruit $1을 선택합니다. 

5. [텍스트] 패널에서 다음 설정을 선택하여 텍스트 서식을 지정합니다. 

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

- 글꼴 크기: 14 

- 글꼴 스타일: 볼드체 

- 글꼴 색상: #A6342A(빨간색) 

- 정렬: 왼쪽 맞춤 

- 행간: 120% 

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

7. [텍스트] 도구를 사용하여 다음 아침 식사 항목인 Croissants $3을 선택합니다. 

8. food-header라는 단락 스타일을 클릭하여 동일한 서식을 두 번째 아침 식사 항목에 적용합니다. 

9. 7 ~ 8단계를 반복하여 텍스트 프레임의 모든 아침 식사 항목(달러 기호가 포함된 모든 행)에 food-header 단락 스타일을 선택하고 적용합니다. 

10. 맨 위부터 [텍스트] 도구를 사용하여 첫 번째 아침 식사 항목 설명인 Bananas, mandarin oranges, red delicious apples, mixed berry cup을 선택합니다. 

11. [단락 스타일] 패널에 나열된 본문 단락 스타일을 클릭하여 텍스트 행에 서식을 적용합니다. 

12. 아침 식사 항목 아래의 나머지 각 설명 텍스트를 하나씩 선택하고 본문 단락 스타일을 적용합니다(그림 66 참조). 

 

그림 66. 서식을 적용하여 단락 스타일로 메뉴 스타일을 지정합니다. 

샘플 사이트의 라이브 버전을 방문하고 디자인을 참조하면 도움이 될 것입니다.

 

텍스트 작업에 대한 자세한 내용은 Muse의 타이포그래피를 참조하십시오.

내장된 맞춤법 검사기 사용 및 사전 업데이트

Muse 4.0에는 텍스트 프레임에서 맞춤법 오류를 쉽게 찾아 해결할 수 있는 맞춤법 검사기가 포함되어 있습니다. 맞춤법 검사기는 항상 사용으로 설정됩니다. 사전에서 찾을 수 없는 단어에는 빨간색 밑줄이 표시됩니다(그림 67 참조).

 

그림 67. 맞춤법이 틀린 단어는 빨간색 밑줄로 표시됩니다. 

맞춤법 오류를 수정하려면 [텍스트] 도구를 사용하여 단어를 선택(두 번 클릭하여 선택)하나 다음 마우스 오른쪽 단추를 클릭하여 제안된 단어 목록이 표시되는지 확인합니다(그림 68 참조).

 

제안된 단어 중 하나가 올바른 경우 아래쪽 화살표를 누르거나 마우스를 사용하여 원하는 제안된 단어를 선택한 다음 Return/Enter 키를 눌러 적용합니다. 실수로 틀린 단어를 선택한 경우 간단히 변경 내용을 취소([편집] > [실행 취소])하고 다른 제안된 단어를 선택하거나 [텍스트] 도구를 사용하여 단어를 편집합니다.

맞춤법 오류로 표시된 단어(사람의 이름이나 지명)가 한 번만 사용되고 올바르게 입력되었음을 알고 있는 경우 수정할 필요가 없습니다. [디자인] 보기에 나타나는 빨간색 밑줄은 사이트를 미리 보거나 게시하거나 내보내는 경우 표시되지 않습니다.

회사 이름이나 주소와 같이 일반적으로 사용되는 단어로 작업할 때는 맞춤법 오류로 표시되지 않도록 맞춤법 검사기 사전에 단어를 추가할 수 있습니다.

[텍스트] 도구를 사용하여 사전에 추가할 단어를 마우스 오른쪽 단추로 클릭한 다음 나타나는 컨텍스트 메뉴에서 [사전에 추가] 옵션을 선택합니다.

전체 사이트 및 개별 텍스트 프레임에 대해 원하는 언어를 설정(이에 따라 맞춤법 검사기 언어 사전도 설정)할 수 있습니다.

전체 사이트에 대한 맞춤법 검사기 사전을 설정하려면 [파일] > [사이트 속성]을 선택합니다. [텍스트] 탭을 클릭하고 [언어] 메뉴에서 원하는 언어를 선택한 다음 [확인]을 클릭합니다(그림 69 참조).

 

그림 69. [사이트 속성] 대화 상자에서 전체 사이트에 대한 언어를 설정합니다. 

일부 사이트 프로젝트의 경우 여러 언어로 텍스트를 제공해야 할 수 있습니다. 이러한 경우 [사이트 속성]에서 기본 언어(가장 자주 사용되는 언어)를 설정한 다음 다른 언어로 텍스트가 표시되는 특정 텍스트 프레임에 대해 맞춤법 검사기 언어를 설정할 수 있습니다.

텍스트 프레임에 대한 맞춤법 검사기 사전을 설정하려면 [선택] 도구로 텍스트 프레임을 선택합니다. 마우스 오른쪽 단추를 클릭하고 나타나는 컨텍스트 메뉴에서 [언어] > (원하는 언어 선택)을 선택합니다(그림 70 참조).

 

그림 70. 컨텍스트 메뉴에서 선택한 텍스트 프레임에 대한 언어를 설정합니다. 

이제 텍스트 프레임의 모양을 업데이트합니다. 사각형 및 이미지 프레임과 마찬가지로 텍스트 프레임의 획, 채우기 및 배경 이미지를 설정하여 스타일을 지정할 수 있습니다.

텍스트 프레임의 모양 업데이트

이 단원에서는 페이지의 배경 그래픽에서 눈에 띄도록 텍스트 프레임의 특성을 업데이트합니다.

1. [선택] 도구를 사용하여 아침 식사 메뉴가 포함된 텍스트 프레임을 선택합니다. 

2. [컨트롤] 패널에서 획 두께를 5로 설정하고 획 색상을 검은색으로 설정합니다. 

3. [채우기] 메뉴를 사용하여 cream-menu로 이름을 바꾼 색상 견본으로 채우기 색상을 설정합니다(또는 16진수 색상 값 #E9916F 입력). [이미지] 섹션 옆에 있는 폴더 아이콘을 클릭하고 샘플 파일 폴더에 있는 bg-texture.png라는 파일을 찾아 선택합니다. [확인]을 클릭하여 [가져오기] 대화 상자를 닫습니다. [맞춤] 메뉴를 [바둑판식]으로 설정한 다음 페이지의 다른 곳을 클릭하여 [채우기] 메뉴를 닫습니다. 

4. 필요한 경우 [선택] 도구를 사용하여 텍스트가 맞을 때가지 텍스트 프레임의 핸들을 드래그하고 크기를 조정합니다. 라이브 샘플 사이트의 아침 식사 메뉴 규격은 약 800픽셀 너비 x 440픽셀 높이입니다. 

크림 채우기 색상의 바둑판식 배경 이미지는 텍스트 프레임에 양피지 같은 효과를 추가하고 진한 획은 배경에서 눈에 띄는 데 도움을 줍니다.

이제 방문자가 쉽게 알아볼 수 있도록 아침 식사 메뉴의 상단에 제목을 추가합니다.

1. [텍스트] 도구를 사용하여 Breakfast 메뉴 바로 위에 텍스트 프레임을 만듭니다(상단 왼쪽에 맞춤). 

2. Breakfast라는 단어를 입력합니다. 

3. [텍스트] 패널에서 다음 설정을 선택하여 텍스트 서식을 지정합니다. 

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

- 글꼴 크기: 32 

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

- 행간: 120% 

- 정렬: 가운데 맞춤 

4. 텍스트가 여전히 선택된 상태에서 [단락 스타일] 패널의 아래쪽에 있는 [새 스타일] 단추를 클릭하여 새 단락 스타일을 만듭니다. 새 단락 스타일을 두 번 클릭하고 menu-label로 이름을 바꿉니다. 

아침 식사 메뉴 위쪽의 레이블은 사용자를 안내하고 읽고 있는 메뉴가 무엇인지 눈에 띄도록 하는 데 도움을 줍니다. 변경 작업을 수행한 후 완료된 아침 식사 메뉴는 그림 71과 같이 나타납니다.

 

그림 71. 아침 식사 메뉴의 스타일이 지정되고 텍스트 컨텐트의 서식이 지정되었습니다. 

다음 단원에서는 아침 식사 메뉴를 복제한 다음 복제된 텍스트 프레임의 텍스트 컨텐트를 업데이트하여 점심, 저녁 식사 및 디저트 메뉴를 만들 것입니다.

페이지에서 텍스트 프레임 복제

앞 단원에서는 아침 식사 메뉴 텍스트 프레임을 만들고, 외부 텍스트 파일의 텍스트로 채우고, 단락 스타일을 사용하여 일관성 있는 텍스트 서식을 적용한 다음, 바둑판식 배경 이미지, 채우기 색상 및 획을 추가하여 텍스트 프레임의 모양을 업데이트했습니다. 메뉴 텍스트 프레임 위에 두 번째 텍스트 프레임을 추가하여 아침 식사 메뉴를 확인할 수 있는 머리글을 만들었습니다. 다음 단계에서는 이러한 요소를 세 번 복제하여 총 4개의 메뉴를 만들게 됩니다.

1. [선택] 도구를 사용하여 Breakfast 단어가 있는 텍스트 프레임을 선택하고 아침 식사 메뉴가 포함된 텍스트 프레임을 선택합니다.

2. Option 키(Mac) 또는 Alt 키(Windows)를 누른 상태에서 두 텍스트 프레임을 페이지 아래로 드래그하여 복제된 복사본을 만듭니다. 아래로 드래그 및 복사하고 원본과 세로로 정렬합니다(측면과 가운데가 정렬되면 스마트 안내선이 잠시 나타납니다). 복제된 텍스트 프레임은 원본에서 아래쪽으로 약 430픽셀이어야 합니다(그림 72 참조).

 

그림 72. 아침 식사 메뉴의 복제본을 페이지 아래로 드래그합니다. 

3. [텍스트] 도구를 사용하여 복제된 텍스트 필드의 레이블을 선택합니다. Breakfast 단어를 Lunch로 바꿉니다. 

4. 잠시 Muse에서 바탕 화면으로 전환합니다. 샘플 파일 폴더를 열고 text-food-lunch.txt라는 파일을 찾습니다. 파일을 두 번 클릭하여 텍스트 편집기에서 엽니다. 텍스트의 첫 번째 행인 The JR $9를 복사합니다.

 

5. Muse로 돌아갑니다. [텍스트] 도구를 사용하여 점심 식사 메뉴 텍스트 프레임 내부를 클릭합니다. 복사한 텍스트 컨텐트를 텍스트 프레임에 붙여 넣어 기존에 나열된 첫 번째 음식 항목인 Croissants $3을 바꿉니다. 

6. 4 ~ 5단계를 반복하고 text-food-lunch.txt 파일에서 달러 기호가 있는 각 행을 복사하여 점심 식사 메뉴의 항목을 바꿉니다. 

7. text-food-lunch.txt 파일에 있는 각 설명을 복사하고 복제된 점심 식사 메뉴의 기존 설명 위에 하나씩 설명을 붙여 넣어 점심 식사 메뉴를 계속 채웁니다. 이 전략은 텍스트 컨텐트에 적용한 스타일이 유지되도록 합니다. 

8. 1 ~ 7단계를 반복하여 두 점심 식사 텍스트 프레임을 선택하고 복제한 다음 기존 점심 식사 메뉴에서 약 430픽셀 아래쪽으로 드래그하고 레이블을 Dinner로 바꾼 다음 text-food-dinner.txt 파일에서 항목을 복사하여 저녁 식사 메뉴를 채웁니다. 

9. 8단계를 다시 한 번 반복합니다. 이번에는 복제된 레이블을 Dessert로 바꿉니다. text-food-dessert.txt에서 텍스트 행을 복사하여 디저트 메뉴를 마무리합니다. 

10. 필요에 따라 4개의 텍스트 프레임이 각 영역 사이에 약 120픽셀로 세로로 정렬되도록 선택 도구를 사용하여 4개의 각 텍스트 프레임을 재배치합니다(그림 73 참조). 

 

그림 73. 음식 페이지에 4개의 메뉴(아침, 점심, 저녁 식사, 디저트) 모두를 세로로 정렬합니다. 

각 복제본을 아래로 드래그할 때 1부에서 정의한 바닥글 영역이 자동으로 아래로 이동하여 페이지에서 더 많은 세로 공간을 만든다는 것을 알 수 있습니다. 이에 따라 음식 페이지는 샘플 사이트의 다른 페이지보다 더 길어집니다.

Muse를 사용하여 첫 웹 사이트 만들기 7부에서는 각 메뉴 위에 기준점을 추가하여 방문자가 각 메뉴로 빠르게 이동할 수 있는 탐색 시스템을 만듭니다. 음식 페이지는 더 길기 때문에 방문자가 클릭하는 메뉴에 따라 컨텐트가 세로로 스크롤되어 해당하는 메뉴가 표시됩니다. 또한 [링크] 메뉴 작업을 통해 방문자가 PDF 파일을 다운로드할 수 있는 다운로드 링크를 비롯하여 다양한 유형의 링크를 만드는 방법을 살펴봅니다.

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

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