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

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

Muse를 사용하여 첫 웹 사이트 만들기 6부에서는 [축소판 슬라이드 쇼] 위젯을 추가하여 [탭 구분 패널] 위젯의 컨텐트 영역 내에 갤러리를 표시하는 방법을 배웠습니다. 또한 음식 페이지에 4개의 메뉴(아침, 점심, 저녁 식사, 디저트)를 만들고 스타일을 지정했습니다. 7부에서는 기준점 링크를 추가하고 수동 [가로 메뉴] 위젯이 있는 페이지 탐색을 생성하는 방법을 살펴보고 음식 페이지를 마무리합니다. 또한 링크 메뉴를 살펴보고 모든 유형의 링크(기준점 링크, 전자 메일 링크, 다운로드 링크 및 외부 웹 페이지에 대한 링크)를 만드는 방법을 배웁니다. 마지막으로 페이지 요소의 나머지 부분이 긴 페이지에서 스크롤되더라도 특정 개체가 스크롤되지 않도록 페이지에 개체를 고정하는 방법을 살펴봅니다.

기준점 링크 작업

이전 단원에서는 2개의 텍스트 프레임으로 구성된 모음(머리글 및 아침 식사 메뉴)을 생성하고 단락 스타일을 이용해 텍스트 형식을 지정했습니다. 그리고 이 모음을 세 번 복제하고 각 모음을 아래로 드래그하여 페이지에 총 네 개의 "영역"을 만들었습니다. 그런 다음 복제한 모음들의 머리글의 이름을 바꿔서 맨 위에 머리글을 아침 식사로 지정하고, 그 아래에 아침, 점심, 저녁 식사 및 디저트 메뉴가(세로로 정렬되어) 표시되도록 지정했습니다. 각 메뉴(두 개의 텍스트 프레임 모음)는 각 섹션 사이에 120픽셀 정도의 공간을 두고 세로로 나누어져 있습니다.

메뉴를 복제하여 아래로 드래그했기 때문에 이제 음식 페이지는 사이트의 다른 페이지보다 훨씬 길어졌습니다. 이는 기준점 태그를 사용해 작업할 때 중요한 측면입니다. 페이지의 모든 내용이 브라우저 창에 표시되어 스크롤할 필요가 없는 경우 기준점 태그 링크가 작동하도록 나타나지 않기 때문입니다.

디자인이 완성되면 방문자가 해당 메뉴가 표시되어 있는 영역으로 세로로 바로 이동할 수 있도록 해 주는 기준점 링크가 음식 페이지에 생깁니다. 기준점 태그를 추가할 경우 페이지의 어딘가에 마커를 붙이는 것과 유사합니다. 방문자가 해당 기준점에 대한 링크를 클릭하면 링크는 긴 페이지를 스크롤하여 마커가 있는 특정 섹션으로 이동합니다.

각 4개 페이지 영역에 해당하는 아침, 점심, 저녁 식사 및 디저트의 이름을 가진 기준점 4개를 만들어서 시작하게 됩니다. 다음 단계를 따르십시오.

4개의 기준점(Breakfast, Lunch, Dinner 및 Dessert)을 만들어 시작할 수 있습니다. 다음 단계를 따르십시오.

1.  상단 탐색 영역에 있는 기준점 단추를 클릭하여 기준점 도구를 로드합니다(그림 74 참조). 

 

그림 74. 작업 영역 위쪽에 있는 기준점 단추를 클릭하여 첫 번째 기준점에 대한 Place Gun을 로드합니다.

 

2. 페이지의 맨 위(머리글 영역의 최상위 사이트 탐색 메뉴 위쪽)를 한 번 클릭합니다. 원할 경우 머리글 사각형을 일시적으로 이동할 수 있습니다. 머리글 내용을 이동할 경우 나중에 다시 제자리로 이동하십시오. 

3. 나타나는 [기준점 이름 바꾸기] 대화 상자에서 기준점의 이름 breakfast를 입력합니다(그림 75 참조). 

 

그림 75. 페이지의 상단에 있는 아침 식사 메뉴에 대한 기준점 이름을 지정합니다. 

4. 작업 영역 상단에 있는 [기준점] 단추를 클릭하여 Place Gun을 로드한 다음 Lunch, Dinner 및 Dessert 섹션을 만드는 각 텍스트 프레임 위쪽을 클릭하여 이 단계를 세 번 더 반복합니다. 각 기준점의 이름을 페이지 영역과 일치하도록 지정합니다. 

lunch

dinner

dessert

이제 각 해당 섹션으로 이동하는 링크를 만드는 데 사용되는 페이지를 따라 세로로 배치된 총 4개의 기준점을 추가했습니다. [선택] 도구를 사용해 각 기준점 태그 4개의 위치를 지정하여, 메뉴를 포함하고 있는 각 영역 앞에 고르게(약 120픽셀) 배치되도록 하십시오.

참고: 

첫 번째 기준점(페이지 맨 위쪽)과 링크된 내용(다음 단원에서 추가하게 될 수동 [메뉴] 위젯)의 첫 번째 인스턴스 간의 공백(픽셀 단위)은 각 영역에서 활성 상태가 변경되게 하는 "활성 영역"을 설정합니다. 예를 들어, 첫 번째 기준점이 페이지의 맨 위에 있고 120픽셀 정도 아래에 메뉴 위젯이 있다면, 그 다음 영역에 대한 메뉴 아이템의 활성 상태는 방문자가 페이지를 아래로 스크롤할 때 메뉴가 표시되기 120픽셀 전 지점에 업데이트됩니다.

다음 단계에서 수동 [메뉴] 위젯을 추가한 뒤, 단추를 기준점 태그에 연결하여 탐색을 만들면 방문자가 페이지 아래로 바로 이동할 수 있도록 할 것입니다.

페이지에 수동 가로 메뉴 위젯 추가

이 자습서의 2부와 3부에서 사이트에 [가로 메뉴] 위젯을 추가하는 방법을 배웠습니다. 기본적으로 메뉴는 [플랜] 보기에서 추가한 페이지에 자동으로 연결되고 페이지 이름이 추가됩니다.

이 단원에서는 다른 [가로 메뉴] 위젯을 추가하여 단일 페이지에 대한 하위 메뉴로 사용하는 방법을 살펴봅니다. 메뉴 항목 레이블을 입력하고 직접 링크를 설정할 수 있도록 메뉴 유형을 수동으로 설정할 것입니다. 이 방법은 특히 사용자가 사이트의 특정 섹션이나 특정 페이지 내에서 이동할 수 있도록 하려는 경우 매우 유용한 전략입니다. 이 샘플 프로젝트에서는 수동 메뉴 항목을 이전 단원에서 만든 기준점으로 연결합니다. 다음 단계에 따라 수동 [가로 메뉴] 위젯을 추가하십시오.

1. [디자인] 보기에서 음식 페이지를 편집하는 동안 위젯 라이브러리를 엽니다. 

2. 위젯 라이브러리 패널에서 [메뉴] 섹션을 클릭하여 확장합니다. [가로 메뉴] 위젯을 선택하고 패널에서 음식 페이지의 페이지 영역 상단으로 드래그합니다. 

처음에 위젯을 페이지로 드래그하면 기본 서식이 표시되고 메뉴 항목의 페이지 이름이 자동으로 표시됩니다. [옵션] 패널의 설정을 업데이트하여 음식 페이지 내 영역에 연결할 사용자 정의 메뉴 항목을 입력할 수 있도록 설정할 것입니다.

3. [가로 메뉴] 위젯이 선택된 상태에서 파란색 화살표 단추를 클릭하여 [옵션] 메뉴를 엽니다. [메뉴 유형] 메뉴를 사용하여 [수동]을 선택합니다. 기타 모든 기본 설정을 그림 76과 같이 그대로 둡니다. 

 

그림 76. [옵션] 패널에서 [메뉴 유형]을 [수동]으로 업데이트합니다. 

4. [옵션] 메뉴 바깥쪽을 클릭하여 이 메뉴를 닫습니다. 

이제 [가로 메뉴] 위젯을 검토하면 [name]이라는 단일 일반 메뉴 항목이 원래 표시되었던 자동 메뉴 항목을 대체한다는 것을 알 수 있습니다. 다음 단계에서는 메뉴 항목을 수동으로 추가합니다.

5. [가로 메뉴] 위젯을 세 번 클릭하여 레이블을 선택합니다. [텍스트] 도구를 사용하여 기본 레이블 텍스트를 선택하고 새 메뉴 항목 이름인 Breakfast를 입력합니다(그림 77 참조). 

 

그림 77. 수동 메뉴에서 첫 번째 메뉴 항목의 이름을 업데이트합니다. 

6. [선택] 도구 사용으로 전환합니다. 메뉴 항목의 왼쪽, 아래쪽 및 오른쪽에 3개의 플러스 기호(+)가 나타납니다. Breakfast 메뉴 항목 오른쪽에 있는 플러스 기호(+)를 클릭합니다. 이 작업은 새 메뉴 항목을 오른쪽에 추가합니다. 

7. 새 메뉴 항목에서 레이블을 선택합니다. [텍스트] 도구를 사용하여 Breakfast2 기본 레이블 텍스트를 선택하고 Lunch로 업데이트합니다. 

8. 6 ~ 7단계를 반복하여 Breakfast, Lunch, Dinner 및 Dessert 레이블이 지정된 총 4개의 메뉴 항목을 만듭니다. 

다음 단원에서는 메뉴 항목의 모양을 업데이트합니다.

가로 메뉴 위젯의 메뉴 항목 스타일 지정

[옵션] 패널에서 [함께 편집] 옵션이 선택되었으므로 하나의 메뉴 항목에 대한 변경 내용이 자동으로 다른 메뉴 항목에 적용됩니다. 다음 단계에 따라 메뉴의 모양을 수정하십시오.

1. Breakfast 단추에 대한 메뉴 항목을 선택합니다. 선택 표시기에 메뉴 항목이라는 단어가 표시됩니다. 실수로 메뉴 항목 내의 레이블을 선택한 경우 Esc 키를 누릅니다. 

2. 탭을 선택하거나 [창] > [상태]를 선택하여 [상태] 패널을 엽니다. [표준] 상태를 선택합니다. 

3. 채우기 색상 칩을 사용하여 메뉴 항목의 표준 상태 색상을 cream-menu로 이름을 바꾼 색상 견본으로 설정합니다(또는 16진수 색상 값 #E9916F 입력). 

4. [컨트롤] 패널에서 하단 왼쪽 및 하단 오른쪽 모퉁이 반경 단추를 클릭한 다음 모퉁이 반경 값을 100으로 설정하여 위는 평평하고 아래는 둥근 단추를 만듭니다. 이러한 단추는 [탭 구분 패널] 위젯의 탭 스타일을 지정할 때 이전에 5부에서 만든 것과 비슷한 모양입니다. 

5. [상태] 패널에서 [롤오버] 상태를 선택합니다. 채우기 색상 칩을 사용하여 메뉴 항목의 롤오버 상태 색상을 cream-menu로 이름을 바꾼 색상 견본으로 설정합니다(또는 16진수 색상 값 #E9916F 입력). 마우스 누름 상태는 자동으로 업데이트됩니다.

 

이 예에서는 표준, 롤오버 및 마우스 누름 상태가 모두 동일한 모양으로 표시됩니다. 이 디자인에서는 방문자가 현재 보고 있는 페이지 영역이 무엇인지 알려주기 위해 활성 상태에 대해 다른 색상을 사용합니다. 다음과 같이 활성 상태에 새로운 색상을 적용합니다.

6. [상태] 패널에서 [활성] 상태를 선택합니다. [컨트롤] 패널에서 채우기 색상 칩을 클릭하고 3부에서 brown-menu로 이름을 바꾼 색상을 선택하거나 색상 값 #571E00을 입력합니다. 

이제 각 상태에 대한 메뉴 항목의 모양을 업데이트했으므로 레이블을 업데이트할 것입니다.

7. Breakfast 항목을 세 번 클릭하여 레이블을 선택합니다. [상태] 패널에서 표준 상태가 선택된 상태에서 [단락 스타일] 패널에서 head-tabs 스타일을 클릭하여 적용합니다. 이 스타일은 5부에서 [탭 구분 패널] 위젯 스타일을 지정하는 데 사용된 동일한 스타일입니다. 

표준 상태의 레이블에 서식을 적용하면 나머지 상태도 자동으로 업데이트됩니다. 이 디자인에서는 모든 상태에 대해 동일한 레이블을 사용하므로 이제 수동 [가로 메뉴] 위젯에 대한 스타일 지정이 완료되었습니다. 남아 있는 유일한 작업은 페이지에 배치하고 고정시키는 것입니다.

8. [선택] 도구를 사용하여 상단이 머리글 사각형 아래쪽에 알맞게 들어가도록 메뉴 위젯을 재배치합니다. 머리글과 수동 메뉴 위젯 사이에는 공간이 없어야 합니다. 

9. 전체 메뉴 위젯이 선택된 상태에서 [컨트롤] 패널의 [핀] 인터페이스에서 상단 가운데 핀 위치를 클릭합니다. 그러면 긴 페이지가 아래로 스크롤될 때 수동 메뉴가 머리글 바로 아래 위치에서 이동하지 않습니다. 고정된 [메뉴] 위젯은 페이지에 대한 영구적인 탐색을 만들어, 영역 간에 쉽게 이동할 수 있도록 합니다. 

다음 단원에서는 [링크] 메뉴를 사용하여 앞에서 만든 기준점에 링크를 추가할 것입니다.

페이지의 기준점에 링크 연결

이제 음식 메뉴를 포함하는 각 페이지 영역 위에 기준점 태그를 추가했습니다. 또한, 수동 [메뉴] 위젯을 만들고 각 페이지 영역에 해당하는 사용자 정의 메뉴 아이템을 추가했습니다. 이 단원에서는 이러한 두 요소를 연결하여 수동 메뉴에 기준점 링크를 추가하는 방법을 살펴봅니다. 다음 단계를 따르십시오.

1. 페이지의 아무 곳이나 클릭하여 페이지를 선택([선택 표시자]에 [페이지]라는 단어가 표시되도록)합니다. 그런 다음 Breakfast 단추를 두 번 클릭합니다. 처음에는 전체 수동 [메뉴] 위젯이 선택되고 그 다음에는 Breakfast 메뉴 항목이 선택됩니다. 선택 표시자에 [메뉴 항목]이라는 단어가 표시됩니다. 

2. [링크] 메뉴를 사용하여 사이트에 대한 전체 페이지 및 기준점 태그 목록을 확인합니다. [바탕 화면] 섹션에서 음식 페이지를 찾고 앞에서 만든 4개의 기준점 태그가 바로 아래에 나열되는지 확인합니다. Breakfast 메뉴 항목에 링크로 연결할 Breakfast 기준점 태그를 선택합니다(그림 78 참조). 

 

그림 78. [링크] 메뉴를 사용하여 Breakfast 기준점 태그를 Breakfast 단추에 적용합니다. 

3. 2단계를 반복하여 Lunch 기준점 링크를 Lunch 메뉴 항목에 추가합니다. 그런 다음 두 번 더 반복하여 Dinner 및 Desert 메뉴 항목에 해당하는 링크를 지정합니다. 

4. [파일] > [사이트 속성]을 선택합니다. [레이아웃] 탭에서 [기준점 링크에 대한 활성 상태 사용] 확인란이 선택되어 있는지 확인합니다. 이 옵션은 모든 새 사이트에 대해 기본적으로 사용으로 설정됩니다. 하지만 예전의 사이트를 편집하고 있는 경우 확인란을 선택해야할 수도 있습니다. 

5. [파일] > [브라우저에서 페이지 미리 보기]를 선택합니다. 각 메뉴 항목을 클릭하여 음식 페이지에서 이동을 테스트합니다. 맨 아래 메뉴(Lunch, Dinner, Dessert)를 보기 위해 클릭하면 긴 음식 페이지가 아래로 스크롤되어 해당 기준점 태그가 포함된 페이지 영역이 표시됩니다. 하지만 고정된 [메뉴] 위젯은 페이지 맨 위(머리글 내용 바로 밑)에 남아 있게 됩니다.

다른 페이지 영역을 보기 위해 링크를 클릭하면 일치하는 활성 상태가 탐색 메뉴에 표시됩니다. 예를 들어, 수동 메뉴의 Dinner 단추를 클릭해 저녁 식사라는 이름의 기준점 태그가 포함된 페이지 영역으로 이동하게 되면 Dinner 메뉴 아이템은 단추의 활성 상태를 보여 주도록 업데이트됩니다. 이 사이트 기능은 방문자가 보고 있는 영역이 어디인지 눈에 띄도록 하는 데 도움을 줍니다. 브라우저를 종료하고 Muse로 돌아갑니다. 

또한, 페이지를 위 아래로 스크롤하여 페이지 내 코드가 각 기준점 태그의 위치를 감지하고, 페이지가 각 페이지 영역으로 이동할 때 수동 메뉴의 활성 상태가 업데이트되는지 확인합니다. 이 기법은 세로 및 가로로 스크롤되는 페이지에서 실행됩니다. 

참고: 페이지는 기준점 태그가 각 영역으로 이동할 수 있는 공간을 허용할 수 있도록 충분히 길거나 넓어야 합니다. 페이지 영역이 서로 너무 가까워서 스크롤할 필요 없이 내용이 브라우저 창에 다 들어가는 경우, 다음 영역으로 이동할 수 있도록 기준점 태그가 나타나지 않습니다. 

6. 브라우저를 종료하고 Muse로 돌아갑니다. 

다음 단원에서는 방문자가 PDF, DOC, MP3, MOV, PSD 및 고해상도 JPEG 등의 파일 형식을 다운로드할 수 있도록 다운로드 링크를 추가하는 방법을 살펴봅니다.

팁: 사이트 프로젝트에서 다른 디자이너와 함께 작업하는 경우 팀원이 웹 사이트에서 직접 다운로드할 수 있도록 .Muse 소스 파일에 대한 링크를 추가할 수도 있습니다.

다운로드 가능한 파일에 대한 링크 추가

이 샘플 프로젝트에서 가상의 Katie's Cafe는 온라인에서 메뉴를 PDF 형식으로 제공하므로 방문자가 데스크톱에 복사본을 저장하거나 인쇄할 수 있습니다. 많은 기업 및 레스토랑에서는 메뉴, 가격 또는 기타 문서를 업데이트하고자 할 때 링크를 업데이트할 필요 없이 동일한 파일 이름의 새 PDF 파일을 업로드하는 것이 쉽기 때문에 이와 유사한 전략을 따르고 있습니다.

1. [디자인] 보기에서 음식 페이지를 편집하면서 [텍스트] 도구를 사용하여 Breakfast 메뉴 텍스트 프레임의 상단 오른쪽 부근에 새 텍스트 프레임을 만듭니다. Download Menu를 입력합니다. 

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

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

- 글꼴 크기: 14 

- 색상: #EEE5C4(3부에서 이 색상 견본을 cream-menu로 바꿈) 

- 행간: 57% 

- 정렬: 가운데 맞춤 

3. [채우기] 메뉴를 사용하여 채우기 색상을 "없음"으로 설정합니다. [이미지] 섹션 옆에 있는 폴더를 클릭하고 배경 이미지를 설정할 샘플 파일 폴더에 있는 download-bg.png라는 파일을 찾아 선택합니다. [맞춤] 메뉴가 [원래 크기]로 설정되어 있고 [위치]가 가운데 맞춤인지 확인합니다(그림 79 참조). 

 

그림 79. [채우기] 메뉴에서 텍스트 프레임에 대한 배경 이미지를 설정합니다. 

4. [채우기] 메뉴 바깥쪽을 클릭하여 이 메뉴를 닫습니다. 필요한 경우 Breakfast 메뉴 텍스트 프레임의 상단 오른쪽에서 가운데에 오도록 [선택] 도구를 사용하여 텍스트 프레임의 크기를 조정하고 재배치합니다(그림 80 참조). 

 

그림 80. 메뉴의 모퉁이를 덮도록 Download Menu 텍스트 프레임을 배치합니다. 

5. 텍스트 프레임이 여전히 선택된 상태에서 [컨트롤] 패널의 [링크] 메뉴를 사용하여 메뉴의 맨 아래쪽에 있는 [파일] 섹션의 항목 [파일에 링크]를 선택합니다. 나타나는 [가져오기] 대화 상자에서 샘플 파일 폴더에 있는 KatiesCafeMenu.pdf라는 파일을 선택합니다. [열기]를 클릭하여 선택합니다(그림 81 참조). 

 

그림 81. 메뉴의 PDF 버전을 찾아 선택합니다. 

참고: [파일에 링크] 기능을 사용하여 파일을 찾아 선택하면 파일은 사이트가 게시되거나 사이트를 내보낼 경우 사이트 파일에 포함될 때 업로드되는 사이트 에셋 중 하나가 됩니다. 이 방법은 사이트에서 사용된 다른 모든 이미지 파일과 함께 링크할 파일을 사이트에서 사이트의 로컬 폴더로 복사하는 가장 좋은 방법입니다.

이제 PDF 파일에 대한 링크가 추가되었습니다. [에셋] 패널을 살펴보면 KatiesCafeMenu.pdf 파일이 이제 사이트의 에셋 중 하나로 나열된다는 것을 알 수 있습니다.

6. [선택] 도구를 사용하여 텍스트 프레임을 선택합니다. Download Menu 텍스트 프레임을 복사하고 Lunch 메뉴의 상단 오른쪽 모퉁이를 덮도록 배치하여 붙여 넣습니다. 이 단계를 두 번 더 반복하여 Dinner 및 Dessert 메뉴의 상단 오른쪽 모퉁이를 덮도록 배치된 복사본을 만듭니다. 

실제 프로젝트에서는 4개의 별도 메뉴 파일에 대한 링크를 추가하여 방문자에게 메뉴를 보고 인쇄하는 데 사용할 수 있는 4개의 서로 다른 다운로드 가능한 PDF 파일을 제공할 수 있습니다. 하지만 이 자습서에서는 [다운로드] 단추가 각 페이지 영역 내 동일한 PDF 파일에 연결되어 있습니다.

7. [파일] > [브라우저에서 페이지 미리 보기]를 선택합니다. 가로 메뉴에서 메뉴 항목 중 하나를 클릭하여 페이지에서 해당 메뉴로 이동합니다. Dinner 및 Dessert 메뉴를 보기 위해 아래로 스크롤하더라도 머리글은 다른 페이지 컨텐트 위에 표시된다는 것을 알 수 있습니다. 이 동작은 음식 페이지에서 Foreground 마스터 페이지를 사용하고 해당 페이지의 머리글 컨텐트가 전경으로 이동되었기 때문에 발생합니다. 

8. Download Menu 링크를 클릭하고 PDF 파일이 컴퓨터에 어떻게 다운로드되는지 확인합니다. 

사용 중인 브라우저 및 브라우저의 환경설정에 따라 다른 동작이 나타날 수 있습니다. 일부 브라우저에서는 브라우저 창 내에서 PDF를 표시하고, 다른 브라우저에서는 단순히 PDF 파일을 데스크톱에 다운로드합니다. 여기에서 Acrobat Pro 또는 Acrobat Reader를 사용하여 열 수 있습니다.

링크 메뉴를 사용하여 전자 메일 링크 만들기

예전부터 Muse를 사용했다면 링크할 수 있는 페이지 이름 및 항목을 더욱 쉽게 찾을 수 있도록 [링크] 메뉴가 최근 여러 섹션으로 재구성되었다는 것을 알 수 있을 것입니다. 이 단원에서는 [링크] 메뉴가 어떻게 구성되었는지 자세히 살펴보고 메뉴 목록에서 항목을 필터링하는 방법을 살펴봅니다. 또한 전자 메일 주소 링크를 추가하는 방법도 배웁니다.

1. [링크] 메뉴에서 아래쪽 화살표를 클릭하여 표시되는 전체 목록을 확인합니다(그림 82 참조). 

 

그림 82. 확장된 보기는 [링크] 메뉴의 목록을 표시합니다. 

[링크] 메뉴는 섹션으로 구성되어 있습니다. [최근 사용한 링크]는 사이트에 추가된 외부 웹 사이트에 대한 링크를 표시합니다. [링크] 필드에 직접 URL을 입력하여 외부 웹 페이지에 링크를 연결할 수 있습니다.

[데스크톱] 섹션에는 현재 사이트의 페이지가 포함됩니다. 음식 페이지에 추가한 기준점 태그가 음식 페이지 아래에 알파벳순으로 나열된다는 것을 확인할 수 있습니다. 이에 따라 사이트의 여러 페이지에서 동일한 이름의 기준점을 만들더라도 링크를 설정할 때 쉽게 구분할 수 있습니다. 이 샘플 사이트에는 하나의 데스크톱 레이아웃만 있지만 사이트에 스마트폰이나 태블릿에 대한 대체 레이아웃이 포함된 경우 이러한 섹션은 해당하는 페이지와 함께 표시됩니다.

맨 끝의 [파일] 섹션에는 [파일에 링크] 기능 및 현재 사이트에 추가된 다운로드 가능한 파일이 포함됩니다. 방금 KatiesCafeMenu.pdf 파일에 대한 링크를 추가했으므로 해당 파일의 이름이 이 섹션에 나열되어 사이트의 여러 페이지에서 공통되는 에셋에 다시 쉽게 링크할 수 있습니다.

전자 메일 링크(클릭하면 방문자가 전자 메일 클라이언트가 열리고 [받는 사람] 필드에 전자 메일 주소와 함께 새 메시지가 시작됨)를 추가하려는 경우 다음과 같이 [링크] 메뉴 필드에 mailto: 접두어와 함께 전자 메일 주소를 입력합니다.

mailto:email@address.com

때때로 긴 웹 사이트의 경우 [링크] 메뉴의 항목 목록이 매우 길고 탐색이 어려울 수 있습니다. 링크할 특정 페이지, 기준점, 파일 또는 외부 URL을 찾는 경우 [링크] 메뉴 필드에서 링크의 처음 몇 글자를 입력하면 일치하는 항목이 표시됩니다. 이 기능을 통해 목록을 빠르게 필터링하고 링크할 항목을 찾을 수 있습니다.

다음 단원에서는 사이트 외부의 다른 웹 페이지에 대한 절대 링크를 추가하는 방법을 배웁니다.

PhotoShop 단추 배치

현재까지 이 자습서에서 기준점 태그를 추가하고 링크를 연결하여 페이지의 특정 섹션으로 이동하는 방법을 배웠습니다. 또한 [파일] 메뉴를 사용하여 페이지 및 다운로드 가능한 파일에 대한 링크를 추가하는 방법을 살펴보았습니다. 이 단원에서는 외부 사이트 URL에 대한 링크를 추가하여 현재 만들고 있는 사이트 외부의 웹 페이지에 링크하는 방법을 살펴봅니다. 또한 레이어가 포함된 PSD 파일을 배치하여 Muse에서 다른 상태의 단추를 만들 수 있는 또 다른 방법을 살펴봅니다. 다음 단계를 따르십시오.

1. [플랜] 보기에서 A-마스터 마스터 페이지를 두 번 클릭하여 [디자인] 보기에서 편집합니다. 

2. [파일] > [Photoshop 단추 배치]를 선택합니다. [가져오기] 대화 상자에서 샘플 파일 폴더로 이동하고 소셜 미디어 아이콘이 포함된 3개의 PSD 파일을 찾습니다. 이름은 다음과 같습니다. 

social-facebook.psd

social-google+.psd

social-twitter.psd

3. social-facebook.psd 파일을 선택하고 [열기]를 클릭합니다. [Photoshop 가져오기 옵션] 대화 상자가 나타납니다(그림 83 참조). 

 

그림 83. 대화 상자를 사용하여 단추의 각 상태에 대해 표시할 PSD 레이어를 선택할 수 있습니다. 

이 예에서는 PSD 파일 레이어가 표준, 롤오버 및 마우스 누름 상태를 표시하도록 이미 올바른 순서로 설정되어 있습니다. 그러나 각 상태의 모양을 변경하려는 경우 각 상태 옆에 있는 메뉴를 사용하여 PSD 파일이 표시할 레이어를 설정할 수 있습니다. 각 상태의 오른쪽에 있는 미리 보기 창은 올바른 모양을 선택하는 데 도움을 줍니다.

이 예에서는 단추에 활성 상태가 필요하지 않습니다. 이 Facebook 단추를 통해 방문자는 Facebook 사이트로 이동하므로 활성 상태가 필요하지 않습니다. 레이어가 미리 디자인된 Photoshop 단추 사용은 사이트에 대한 사용자 정의 탐색 막대를 만들 수 있는 또 다른 방법입니다.

4. [확인]을 클릭하여 [Photoshop 가져오기 옵션] 대화 상자를 닫은 다음 오른쪽에 있는 페이지의 가운데 부근을 한 번 클릭하여 Photoshop 단추를 배치합니다. 

5. 2-4단계를 반복하여 social-google+.psd 및 social-twitter.psd 이름의 나머지 두 아이콘 이미지를 배치합니다. [선택] 도구를 사용하여 페이지의 오른쪽에 세로로 정렬합니다(그림 84 참조). 

 

그림 84. Facebook, Google+ 및 Twitter 아이콘을 A-마스터 페이지에 배치합니다. 

A-마스터 페이지에 이러한 이미지를 배치하면 이 마스터에 링크된 모든 마스터 페이지(Main 및 Foreground)에 자동으로 표시됩니다.

외부 웹 사이트에 대한 링크 추가

소셜 미디어 아이콘 단추가 배치되었으므로 각 소셜 네트워크 사이트에 대한 외부 링크를 추가합니다.

1. Facebook 아이콘을 선택한 다음 [링크] 메뉴 필드에서 Katie's Cafe Facebook 페이지에 대한 링크(http://www.facebook.com/KatiesCafeSF)를 입력(또는 복사/붙여넣기)합니다. 

2. Google+ 아이콘을 선택한 다음 Google+의 Katie's Cafe 페이지에 대한 링크(https://plus.google.com/u/1/117800212967830061444/posts)를 입력(또는 복사/붙여넣기)합니다. 

3. Twitter 아이콘을 선택한 다음 Twitter의 Katie's Cafe 페이지에 대한 링크(http://twitter.com/katiescafesf)를 입력(또는 복사/붙여넣기)합니다. 

4. Facebook 아이콘을 다시 클릭하여 선택합니다. 파란색 밑줄 친 단어([링크] 메뉴의 왼쪽에 있는 링크)를 클릭합니다. 나타나는 대화 상자에서 [링크를 새 창이나 탭에서 열기] 확인란을 선택합니다. 

5. 9단계를 반복하여 Google+ 및 Twitter 링크도 새 브라우저 창에서 열리도록 설정합니다. 

이것은 일반적인 웹 디자인 규칙입니다. 동일 사이트의 다른 페이지로 이동하는 링크는 동일한 브라우저 창에서 열리고(Muse에서 기본 동작), 다른 외부 웹 사이트의 페이지에 대한 링크는 새 창이나 탭에서 열립니다.

[툴팁] 필드도 확인합니다. 이 필드에 설명 텍스트를 입력할 경우 방문자가 링크된 요소 위로 커서를 가져가면 표시됩니다. 이 예에서는 툴팁에 "Follow Katie on Facebook"이라고 나타납니다. 툴팁은 화면 판독기를 사용하는 방문자가 사이트에 더욱 잘 액세스하는 데 도움이 되므로 추가하는 것이 좋습니다.

다음 단원에서는 페이지가 길고 나머지 컨텐트가 스크롤되더라도 브라우저 창 내에서 동일한 위치에 표시되도록 소셜 미디어 아이콘을 고정하는 방법을 살펴봅니다.

브라우저 창에 개체 고정

이미지를 배치하거나 다른 방법을 사용하여 아트웍을 페이지에 추가하는 경우 [선택] 도구 및 화살표 키를 사용하여 재배치합니다. 이미지를 이동하면 페이지에 이미 존재하는 다른 요소(이미지, 텍스트 및 미디어)에 따라 상대적으로 이동합니다. 다른 요소를 이동할 수도 있지만 전체 페이지가 브로셔나 포스터와 같이 동작합니다. 페이지의 항목은 단일 면에 존재합니다. 페이지가 길고(많은 세로 컨텐트 포함) 방문자가 아래로 스크롤할 경우 페이지의 맨 위에 있는 이미지는 더 이상 보지 못합니다.

웹 사이트를 방문할 때 고정된 개체를 본 적이 있을 것입니다. 이러한 항목은 한 위치에 항상 표시되는 “영구” 항목입니다. 나머지 페이지 컨텐트 위에 떠 있는 것처럼 보입니다.

[핀] 도구를 사용하면 이미지의 흐름에서 사실상 이미지를 제거하게 됩니다. 다른 페이지 요소에 따라 상대적으로 배치하는 대신 브라우저에서 상대적인 특정 위치에 고정합니다. 고정된 이미지는 “접착된” 것처럼 보입니다. 다른 스크롤 페이지 요소와 상관 없이 한 지점(예: 상단 오른쪽 모퉁이 또는 하단 부근)에 항상 있습니다. 방문자가 브라우저 크기를 조정할 경우 고정된 이미지는 브라우저 창에서 상대적인 고정 위치에 항상 존재합니다.

코르크 보드에 메모지를 핀으로 고정하는 것처럼 페이지의 디자인에서 “이미지를 꺼내어” 브라우저에 부착하는 방법으로 생각할 수 있습니다. 방문자가 브라우저 창 크기를 조정할 경우 고정된 요소는 브라우저에서 상대적인 고정 위치를 유지하면서 이동하지만, 방문자가 페이지 컨텐트를 가로나 세로로 스크롤할 경우 고정된 요소는 이동하지 않습니다.

[핀] 도구를 사용하려면 다음 단계를 따르십시오.

1. A-마스터 페이지가 [디자인] 보기에서 열린 상태에서 [선택] 도구를 사용하여 Facebook 아이콘을 선택합니다. 

2. [컨트롤] 패널의 [핀] 인터페이스에서 상단 오른쪽 핀 위치를 클릭합니다. 이 설정은 상단 오른쪽 모퉁이의 현재 위치로 요소를 "핀으로 고정"합니다. 

3. 1 ~ 2단계를 반복하여 나머지 페이지가 스크롤될 때 브라우저 창 내에서 이동하지 않도록 Google+ 및 Twitter 아이콘 단추를 상단 오른쪽 위치에 고정합니다. 

4. [플랜]을 클릭하여 페이지 축소판을 확인합니다. 마스터 페이지에 추가했으므로 이제 모든 페이지에 3개의 소셜 미디어 아이콘이 포함되어 있다는 것을 알 수 있습니다. 

5. [플랜] 보기에서 음식 페이지를 두 번 클릭하여 [디자인] 보기에서 엽니다. 또는 이미 열린 경우 음식 페이지 탭을 클릭하여 활성화합니다. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 브라우저에서 페이지를 봅니다. 

6. Dessert 메뉴 항목을 클릭하여 긴 페이지의 아래쪽에 있는 Dessert 메뉴 섹션으로 이동합니다. 나머지 페이지 요소가 스크롤되더라도 소셜 미디어 아이콘은 고정되어 있으므로 페이지의 오른쪽에 그대로 나타납니다(그림 87 참조). 

 

Muse를 사용하여 첫 웹 사이트 만들기 8부에서는 여러 개체를 그룹화하여 하나의 요소로 동작하도록 하는 방법을 살펴봅니다. 또한 Katie's Cafe의 위치를 방문자에게 표시하는 내장된 Google 지도를 추가하여 방문 페이지를 완성할 것입니다. 그리고 사이트를 완성한 후 클라이언트 및 동료와 진행 중인 작업을 공유할 수 있도록 호스팅 서버(Business Catalyst 기반)에 업로드하여 온라인에 쉽게 게시하는 방법을 살펴봅니다.

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

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