Adobe Muse에서 동영상 및 HTML 컨텐트 임베딩

임베디드 HTML은 Google, YouTube, Flickr, Picasa 등의 타사 웹 사이트에서 생성된 소스 코드를 가리킵니다. 이러한 웹 사이트에서 계정을 설정하고 로그인한 다음 해당 사이트에서 임베디드 코드를 복사하고 사용자의 사이트에 추가할 수 있습니다.

임베디드 HTML을 페이지에 붙여 넣을 경우 타사 사이트의 컨텐트를 표시하는 창을 사용자 사이트의 페이지 안에 두는 것과 같습니다.

임베디드 HTML은 복잡한 정보(지도, 날씨 예보, 주식 시황 등) 및 멀티미디어(디지털 비디오, 슬라이드 쇼, 오디오 파일 등)를 빠르고 쉽게 추가할 수 있는 뛰어난 방법입니다. 이 전략은 타사 사이트를 호스팅 서비스 및 업로드 인터페이스로 활용할 수 있는 추가 이점도 제공합니다. 예를 들어, YouTube에서 무료 계정을 만들 경우 사용자 자신의 YouTube 채널을 만들고 사용자 사이트에 대한 비디오 컨텐트를 업로드할 수 있습니다. YouTube에는 업로드 프로세스를 단순화하고 해당 사이트에 비디오 파일을 호스팅하는 웹 페이지가 있습니다. 사이트를 업데이트하고자 하는 경우 간단히 사용자의 YouTube 채널에 더 많은 비디오를 추가하고 임베디드 코드를 복사한 다음 페이지에 붙여 넣으면 새로운 비디오가 사용자의 Muse 사이트에 추가됩니다.

이 단원에서는 Tumblr에서 소스 코드를 복사할 것입니다. Tumblr는 계정을 만들고 로그인한 다음 공개적으로 사용 가능한 블로그 항목을 게시해야 하는 무료 온라인 서비스입니다. 블로그는 사용하기 쉬우며 기술적인 지식이 없는 사람도 쉽게 사이트를 업데이트할 수 있도록 하려는 경우 특히 유용합니다. 대부분의 블로그 사이트에는 HTML 지식이나 추가 소프트웨어 없이도 모든 브라우저를 사용하여 계정에 로그인하고 새 항목을 게시할 수 있도록 온라인 인터페이스가 포함되어 있습니다.

참고: 웹 사이트를 보는 방문자는 페이지에 포함된 블로그를 보는 데 Tumblr 계정이 필요하지 않습니다. 계정은 사용자 정의 블로그를 만들고 웹 사이트에 추가할 임베디드 코드를 생성하기 위해 사이트를 디자인하는 사용자 본인에게만 필요합니다.

1. 이 자습서를 위해 Tumblr 계정을 따라서 만들 필요는 없습니다. 무료 블로그를 만든 후 Tumblr 웹 사이트에서 생성된 다음 코드를 복사하면 됩니다.

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

2. [플랜] 보기에서 이벤트 페이지 축소판을 두 번 클릭하여 [디자인] 보기로 페이지를 열고 편집합니다.
3. 빈 페이지의 중간 부분을 클릭하고 다음 방법 중 하나를 사용하여 HTML 코드를 포함시킵니다.

• [편집] > [붙여넣기]를 선택하거나 바로 가기 키 Command+V(Mac) 또는 Ctrl+V(Windows)를 사용하여 코드를 직접 페이지에 붙여 넣습니다.
• [개체] > [HTML 삽입]을 선택합니다. 나타나는 [HTML 편집] 창의 필드 내부를 클릭하고 컨텐트를 붙여 넣습니다. [확인]을 클릭하여 [HTML 편집] 창을 닫습니다.

참고: 대부분의 경우 Muse에서는 페이지에 직접 붙여 넣은 HTML 코드를 인식하고 HTML을 자동으로 포함시킵니다. 하지만 타사 웹 사이트의 컨텐트 대신 코드가 페이지에 보이는 경우 [개체] > [HTML 삽입]을 대신 선택해 보십시오.

HTML 코드를 포함시킨 후 Katie's Cafe Tumblr 계정에 대해 입력된 블로그 게시물 주위에 핸들이 있는 파란색 테두리 상자를 볼 수 있습니다.

4. [선택] 도구를 사용하여 핸들을 드래그하고 페이지 폭의 약 80%에 걸치도록 블로그 컨텐트 크기를 조정합니다. 바둑판식 배경 그래픽이 왼쪽과 오른쪽 측면에 표시되도록 블로그 컨텐트를 페이지 중앙에 둡니다. 파란색 측정값 사각형은 다른 개체와의 거리를 표시합니다. 선택한 개체가 세로로 가운데에 오면 빨간색 정렬 안내선이 잠깐 나타납니다.

이 작업이 HTML을 Muse 페이지에 포함시키는 데 필요한 전부입니다. HTML 코드를 편집하고자 하는 경우 임베디드 HTML 요소를 마우스 오른쪽 단추로 클릭하고 나타나는 컨텍스트 메뉴에서 [HTML 편집]을 선택할 수 있습니다. 그러면 앞에서 붙여 넣은 코드에 액세스할 수 있도록 [HTML 편집] 창이 열립니다.

이제 이벤트 페이지에서 수행한 변경 작업을 검토할 시간입니다.

5. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 새 브라우저 창에 이벤트 페이지를 표시합니다.

블로그 항목 목록을 아래로 스크롤하면 머리글이 다른 페이지 컨텐트의 위에 표시된다는 것을 알 수 있습니다. 이 동작은 이벤트 페이지에서 Foreground 마스터 페이지를 사용하고 마스터 페이지의 머리글 컨텐트가 전경에 표시되도록 설정되었기 때문에 발생합니다.

이제 이벤트 페이지가 완성되었습니다. 다음 단원에서는 타사 컨텐트가 사용자 상호 작용에 따라 표시되는 방식을 제어하기 임베디드 HTML 컨텐트를 위젯 내부에 붙여 넣는 방법을 배웁니다.

Muse 웹 사이트에 비디오 임베딩

현재 대상 컨테이너는 회색 채우기 색상으로 채워져 있습니다. 하지만 여러 이미지 파일, 채워진 사각형, 텍스트 또는 다른 웹 사이트에서 복사한 임베디드 HTML을 포함하여 모든 종류의 컨텐트를 대상 컨테이너 내부에 배치할 수 있습니다.

이 예에서는 YouTube에서 생성된 임베디드 HTML을 붙여 넣을 것입니다.

YouTube.com의 페이지를 방문하고 사용자의 계정으로 업로드한 비디오를 본다고 가정해 봅니다. [공유] 단추를 클릭한 다음 [소스 코드]를 클릭하면 비디오에 대한 임베디드 코드에 액세스하고 복사할 수 있습니다.

이 비디오의 목적상 Katie's Cafe 비디오에 대한 임베디드 코드는 이미 복사되었으므로 YouTube를 방문하지 않아도 됩니다. 아래의 임베디드 코드를 복사하여 클립보드에 저장합니다.

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

위의 코드는 iFrame 태그를 사용하여 YouTube에 게시된 비디오 파일에 대한 링크를 둘러싸고 있습니다. iFrame은 웹 페이지에 추가할 때 "창" 내부에서 컨텐트를 표시할 수 있는 HTML 컨테이너입니다.

위의 코드를 복사한 후 Muse로 돌아옵니다.

1. [선택] 도구를 통해 페이지의 회색 테두리를 클릭하여 상단 왼쪽에 있는 선택 표시기에 페이지라는 단어가 표시되도록 합니다. 이것은 전체 페이지가 선택되었음을 의미합니다.
2. 회색 채우기 색상이 있는 큰 대상 컨테이너를 클릭합니다. 상단 왼쪽에 있는 선택 표시기에 컴포지션이라는 단어가 표시됩니다. 회색 대상 컨테이너를 다시 클릭하면 선택 표시기에 컨테이너라는 단어가 표시됩니다. 다시 클릭한 다음(대상이라고 표시됨) 선택 표시기에 이미지 프레임이라는 단어가 나열될 때까지 다시 한 번 클릭합니다. 백스페이스(Windows) 또는 Delete(Mac) 키를 눌러 대상 컨테이너에서 이미지 프레임을 제거합니다.

내부의 대상 컨테이너가 여전히 선택된 상태에서 다음 작업에서는 위에서 복사한 HTML 코드를 대상 컨테이너에 붙여 넣습니다.

참고: 메인 이미지를 트리거 컨테이너 내부에 붙여 넣을 때와 마찬가지로 목적이 위젯의 대상 컨테이너 내부에 코드를 붙여 넣는 것이므로 대상 컨테이너 내부에 코드를 붙여 넣는 것이 약간 어려울 수 있습니다. (현재 선택한 요소에 따라) 위젯 외부에 비디오 코드를 붙여 넣어 페이지에 직접 포함될 수도 있습니다. 따라서 주의해서 진행하십시오. [미리 보기]를 클릭하여 테스트할 때 아직 메인 이미지를 클릭하지 않았는데도 비디오가 표시되는 경우 비디오 코드를 컨테이너 내부에 성공적으로 붙여 넣지 못했기 때문에 즉시 표시되는 것입니다. 비디오는 메인 이미지를 클릭한 후에만 표시되어야 합니다.

다음 단계에 따라 비디오 코드를 대상 컨테이너 내부에 붙여 넣으십시오(선택 표시기에 컨테이너라는 단어가 표시된 상태에서).

3. [개체] > [HTML 삽입]을 선택합니다. 나타나는 창에서 기본 자리 표시자 텍스트를 선택하고 Delete(Mac) 또는 백스페이스(Windows) 키를 눌러 제거합니다. [편집] > [붙여넣기]를 선택하여 위에서 복사한 YouTube 코드를 [HTML 코드] 필드에 붙여 넣습니다. [확인]을 클릭하여 [HTML 코드] 창을 닫습니다.

참고: 대부분의 경우 HTML 코드를 붙여 넣으면 Muse에서 자동으로 인식하고 일반 텍스트가 아닌 HTML임을 이해합니다. 따라서 원할 경우 [개체] > [HTML 삽입]을 선택하여 HTML 창을 여는 대신 내부 대상 컨테이너가 선택된 상태에서 마우스 오른쪽 단추를 클릭(또는 Control-클릭)하고 나타나는 컨텍스트 메뉴에서 [붙여넣기]를 선택할 수도 있습니다. (또는 [편집] > [붙여넣기]를 선택하거나 바로 가기 키를 사용하여 소스 코드를 대상 컨테이너에 붙여 넣습니다.) Muse에서는 비디오 코드를 대상 컨테이너에 붙여 넣는 동일한 목적을 달성할 수 있는 많은 방법을 제공합니다.

코드를 대상 컨테이너에 붙여 넣으면 비디오의 첫 프레임(커피 한 컵)이 표시되는 것을 볼 수 있습니다. 이 비디오의 첫 프레임은 HTML 임베디드 코드를 성공적으로 붙여 넣었음을 나타냅니다. [디자인] 보기에서 페이지를 편집하는 동안에는 비디오가 재생되지 않습니다. 컨트롤 패널에서 [미리 보기] 단추를 클릭하거나 브라우저에서 페이지를 미리 볼 경우에만 재생됩니다.

4. 필요한 경우 [선택] 도구를 사용하여 임베디드 HTML 비디오 컨텐트의 크기에 맞게 대상 컨테이너의 크기를 조정합니다. 폭은 약 670픽셀, 높이는 약 415픽셀이 되어야 합니다. 비디오가 선택되면 선택 표시기에 HTML 항목이라는 단어가 표시됩니다.
5. 대상 컨테이너가 선택된 상태에서 Esc 키를 한 번 눌러 외부 컨테이너를 선택합니다. 또는 원할 경우 다른 곳을 클릭하여 [라이트박스 표시] 위젯을 선택 해제한 다음 두 번 클릭합니다(한 번은 컴포지션 선택, 다시 한 번은 큰 컨테이너 선택). [선택] 도구를 사용하여 컨테이너의 핸들을 드래그하고 대상 컨테이너가 내부 가운데에 오도록 합니다. 컨테이너의 크기를 폭 710픽셀 및 높이 460픽셀로 조정합니다.
6. [채우기] 메뉴를 사용하여 컨테이너의 채우기 색상을 갈색(#63301B)으로 설정하고 채우기 색상의 투명도를 100로 설정합니다.

7. 컨테이너 아래쪽에 있는 텍스트 프레임을 선택하고 Delete(Mac) 또는 백스페이스(Windows) 키를 눌러 제거합니다. 텍스트 프레임은 대상 컨텐트에 대한 캡션으로 입력할 수 있지만 이 프로젝트에서는 사용되지 않습니다.
8. 컨테이너의 상단 오른쪽에 있는 [닫기] 상자(X 표시)를 선택합니다. [닫기] 상자 내부를 클릭하여 레이블을 선택하고 삭제합니다. [채우기] 메뉴를 사용하여 채우기 색상을 "없음"으로 설정합니다. [채우기] 메뉴의 [이미지] 섹션 옆에 있는 폴더 아이콘을 클릭하고 icon-close.png라는 파일을 찾아 선택합니다. [선택] 도구를 사용하여 전체 닫기 아이콘 이미지가 표시되도록 [닫기] 상자의 크기를 조정합니다.
9. [선택] 도구를 통해 페이지에 나타내고자 하는 위치로 이동하여 대상 컨테이너 및 트리거 컨테이너를 모두 재배치합니다.
10. 컴포지션이 선택된 상태에서 파란색 화살표 단추를 클릭하여 [옵션] 메뉴를 엽니다. 이 예에서는 다음 설정을 사용합니다.
    • 위치: 라이트박스
    • 전환: 서서히 사라짐
    • 자동 재생: 사용 안 함
    • 셔플: 사용 안 함
    • 처음에는 모두 숨기기: 사용 안 함
    • 스와이프 설정: 사용
    • 맨 위에 트리거: 사용 안 함
    • 닫기 단추: 사용
    • 편집 시 라이트박스 파트 표시: 사용
    • 디자인 모드에서 모두 표시: 사용

[옵션] 메뉴 바깥쪽을 클릭하여 이 메뉴를 닫습니다. 이제 위젯이 구성되고 테스트할 준비가 되었습니다.

이 자습서의 이전 단원에서 페이지에 HTML을 포함하여 이벤트 페이지에 Tumblr 블로그를 추가하는 방법을 다뤘습니다. 라이트박스 컴포지션 위젯 안에 임베디드 HTML을 붙여넣기하여 방문자가 단추를 클릭하면 라이트박스 창에 YouTube 동영상을 표시하는 방법을 살펴봤습니다. 이 단원에서는 Google Maps 사이트에서 제공하는 여러 유형의 임베디드 HTML에 대해 알아보겠습니다. 다음 단계를 따르십시오.

1. [디자인] 보기에 방문 페이지가 열려 있지 않은 경우 [플랜]을 클릭한 다음 편집할 수 있도록 방문 페이지 축소판을 두 번 클릭합니다.

이 소스 코드는 maps.google.com 사이트에서 복사한 것입니다. 한 주소에 대한 (또는 이 예에서는 여러 위치에 대한) 사용자 정의 주소를 만들 수 있습니다. 무료 서비스입니다. 주소(또는 여러 주소)를 입력하고 [지도 만들기] 단추를 클릭합니다.

지도를 만든 후 Google Maps 인터페이스를 사용하여 제목 및 설명을 입력할 수 있습니다. 그런 다음 [링크] 단추를 클릭하여 코드에 액세스합니다. [웹 사이트에 포함할 HTML 붙여넣기] 필드에서 제공된 HTML 코드를 선택하면 Muse로 되돌아가 페이지에 HTML을 포함할 수 있습니다.

이 자습서에서는 새 지도를 만들 필요는 없습니다. 원하는 경우 주소를 입력하고 지도를 만들고 코드를 복사하여 테스트합니다. 하지만 간단하게 작동 방식만 테스트하려면 미리 생성된 HTML 코드를 사용해도 됩니다.

2. 다음 소스 코드를 복사합니다.

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

3. 방문 페이지의 위쪽에 코드를 붙여넣기합니다. [선택] 도구를 사용하여 위쪽 근처 페이지의 세로 중앙에 포함된 HTML을 배치합니다. 그러면 지도의 1/4이 머리글 영역과 겹칩니다. 텍스트 설명을 추가할 수 있도록 지도와 바로 아래에 있는 꽃 이미지에 충분한 공간을 두십시오.
4. [텍스트] 도구를 사용하여 포함된 지도 아래에 텍스트 프레임을 드래그합니다. 다음 텍스트를 복사하여 텍스트 프레임에 붙여넣기합니다.

저희 모든 제과점은 지역 특성을 잘 반영했기 때문에 Katie의 디테일 완벽 재현, 서비스 이행 그리고 무엇보다도 맛있는 먹거리가 모두 유기적으로 연계되어 있습니다.

5. [텍스트] 패널에서 다음 설정을 적용하여 텍스트 스타일을 지정합니다.
   • 글꼴: Droid Serif(또는 모든 Serif 글꼴)
   • 글꼴 크기: 14
   • 글꼴 색상: #222222
   • 글꼴 정렬: 왼쪽
   • 행간: 120%

지도에 설명을 추가하면 방문 페이지가 완성됩니다.

6. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 브라우저에서 방문 페이지가 어떻게 표시되는지 확인합니다.

포함된 HTML Google 지도는 대화형입니다. 창 안쪽의 지도에서 화살표를 클릭하여 이동하거나 +/- 단추를 클릭하여 확대하거나 축소할 수도 있습니다.

모든 페이지에 대한 사이트 디자인이 완료되었습니다. 이 자습서의 나머지 단원에서는 사이트를 마무리하고 무료 평가판으로 게시하는 방법을 알아보겠습니다.

 Adobe Muse 페이지에 HTML 임베딩

타사 웹 서버로부터 동적으로 가져온 복잡한 사이트 기능을 추가하기 위한 HTML 코드를 사이트의 페이지에 포함할 수 있습니다. Google, Yahoo!, YouTube 등 임의의 웹 서비스 공급자로부터 이러한 코드 청크를 복사하여 Muse 페이지에 간단히 붙여넣을 수 있습니다. 이 단원에서는 임베디드 HTML의 서로 다른 두 가지 예를 살펴보고, Muse로 작성한 웹 사이트에 소셜 미디어 컨텐트와 대화형 Google 지도를 손쉽게 추가하는 방법을 살펴보겠습니다.

이를 위해서는 우선 Home 페이지 컨텐트를 완성해야 합니다. 지금까지 설명한 내용을 잘 따라왔다면 이미 Home 페이지가 [디자인] 보기에 열려 있을 것입니다. 그렇지 않다면 [플랜] 보기에서 Home 페이지 축소판을 두 번 클릭하여 [디자인] 보기에서 편집할 수 있도록 엽니다. 앞서 Home 페이지에 추가한 슬라이드 쇼 위에 임베디드 HTML을 추가하도록 하겠습니다.

가장 최근 게시물을 표시하는 임베디드 HTML Twitter 피드 추가

무료로 계정을 등록하여 사용할 수 있는 웹 서비스에는 여러 가지가 있습니다. 그 중 하나인 Twitter에 가입하면 메시지를 작성하여 해당 웹 사이트에 게시할 수 있습니다. 게다가 그러한 정보를 Twitter.com에 표시하는 것 외에도, 자신의 로그인 계정을 사용하여 임베디드 코드를 복사한 다음 동일한 메시지를 사용자 자신이 만든 다른 웹 사이트에 표시할 수도 있습니다.

이 예제에서는 Kevin's Koffee Kart에 사용할 가상의 계정을 설정했습니다. 계정 설정을 위해서는 Twitter에 새 사용자로 가입하여 등록 양식을 작성해야 합니다. 등록을 마치고 나면 해당 사이트의 인터페이스를 사용하여 메시지를 게시할 수 있고, 메시지를 웹 상의 다른 곳에 표시하는 데 필요한 임베디드 코드를 복사할 수 있습니다. 블로그 게시물, 비디오 컨텐트, RSS 피드, 주식 정보, 일기 예보, 스포츠 경기 결과 및 기타 여러 가지 유형의 동적 데이터를 공유하는 데도 동일한 방법이 사용됩니다. 고객을 위해 사이트를 구축할 때 고객이 이미 이러한 서비스를 사용하고 있는지 물어 확인하면 해당 고객이 소비자들과 정보를 공유하는 데 도움을 줄 수 있습니다. 대부분의 경우에는 고객의 계정 정보를 사용하여 로그인한 다음, 현재 만들고 있는 사이트에 표시할 데이터를 위한 임베디드 코드를 가져올 수 있습니다.

이 예제에서는 Kevin's Koffee Kart 계정을 사용하여 Twitter로부터 복사한 임베디드 코드를 제공하므로 사용자가 Twitter에 로그인하기 위해 자신의 계정을 새로 만들지 않고도 실습을 진행할 수 있습니다.

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Optional Placeholder Text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

이제 Home 페이지가 거의 완성 단계에 도달했습니다. 마지막으로 페이지에 요소를 한 개만 더 추가하면 됩니다.

Home 페이지 검토를 마쳤으면 [플랜] 링크를 클릭하여 [플랜] 보기로 돌아갑니다.

다음 순서로는 다른 유형의 임베디드 HTML을 KART MAP 페이지에 추가할 것입니다.

임베디드 HTML을 사용하여 Muse 웹 페이지에 Google 지도 삽입

비디오 자습서

이번 단원에서는 Google 지도를 통해 생성된 지도를 로드하는 임베디드 HTML을 삽입하여 KART MAP 페이지에 컨텐트를 추가해 보겠습니다. 이는 사이트에 임베디드 HTML을 사용할 수 있는 여러 가지 방법 중 또 하나의 작은 예일 뿐입니다. YouTube, Flickr, Picasa 등 기타 수많은 타사 사이트로부터 가져온 컨텐트를 통합할 수 있을 뿐만 아니라, 해당 사이트에서 자신의 계정으로 액세스하고 컨텐트를 게시하여 관리하는 여러 가지 양식, 블로그 및 기타 복잡한 사이트 기능을 추가할 수 있습니다.

사이트에 iframe을 추가하여 다른 사이트 페이지를 임베디드 HTML로 표시

임베디드 HTML을 사용하여 타사 웹 사이트에서 가져온 코드를 삽입할 수 있을 뿐만 아니라, 동일한 방법을 사용하여 iframe 내에 전체 웹 페이지를 포함할 수도 있습니다. 예를 들어, 다음과 같은 코드 조각을 입력할 수 있습니다.

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

위 코드에서 title="" 및 url="" 부분의 텍스트를 외부 웹 페이지의 제목과 URL로 바꿀 수 있습니다. 사이트 디자인에 맞게 iframe 창의 폭과 높이를 원하는 값으로 사용자 정의할 수도 있습니다.

원한다면 여는 iframe 태그에 다음 내용을 삽입하여 iframe에 스크롤바가 표시되지 않도록 특성을 추가할 수도 있습니다.

scrolling="no"

[개체] > [HTML 삽입]을 선택하여 [HTML 코드] 창을 새로 열고 사이트에서 임의의 위치에 iframe을 포함한 다음 임의의 URL(www.google.com 등과 같은 사이트 주소)을 설정하여 인터넷에서 서비스되고 있는 사이트를 자신의 사이트 내에 표시할 수 있습니다.

Adobe Edge를 사용하여 만든 HTML5 애니메이션 같은 개체를 포함하는 데 iframe을 사용할 수도 있습니다. Adobe Edge를 사용하여 만든 HTML 파일의 이름을 찾은 다음 iframe의 URL 특성에 해당 파일 이름을 사용하면 됩니다.

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

그런 다음 Adobe Edge HTML 파일(및 종속 파일)을 Muse 사이트 파일이 있는 동일한 호스트 서버에 업로드해야 합니다. 사이트를 FTP로 내보내는 경우 그 과정에서 Muse를 통해 생성된 폴더로 HTML 파일을 복사할 수 있습니다. Muse에서 [게시] 링크를 클릭하여 Adobe Business Catalyst® 호스팅 서버에 직접 게시하는 경우 Adobe Dreamweaver® 소프트웨어나 임의의 FTP 클라이언트를 사용하여 파일을 업로드할 수 있습니다. FTP를 통해 Business Catalyst 호스팅 서버에 파일을 업로드하는 방법에 대해 자세히 알아보려면 웹 사이트 게시를 참조하십시오.

연락처 양식 요소 서식 지정

일부 표준 CSS 규칙을 사용하여 Business Catalyst 관리 콘솔 인터페이스에서 만든 연락처 양식 요소의 서식을 지정할 수 있습니다. 페이지 디자인에 맞게 양식 및 양식 요소가 표시되는 방식을 조정할 수 있습니다.

관리 콘솔에서 Muse의 페이지로 양식의 소스 코드를 붙여넣으면 양식이 기본 스타일로 표시됩니다.

다른 모든 요소와 마찬가지로 측면 핸들을 사용하여 양식의 크기를 조정할 수 있고, 페이지 위의 원하는 위치로 양식을 이동할 수 있습니다.

양식을 마우스 오른쪽 단추로 클릭하거나 Control 키를 누른 채 클릭하고, 목록이 나타나면 [HTML]을 선택합니다.

[HTML 코드] 창이 열립니다. 여기에는 관리 콘솔로부터 가져와 페이지에 붙여넣은 코드가 표시됩니다. 맨 위쪽의 코드 첫 줄 앞에 커서를 놓고 Enter 키(Windows) 또는 Return 키(Mac)를 서너 번 눌러 양식 코드를 아래로 몇 줄 이동하여 스타일을 추가할 수 있는 공간을 마련합니다.

양식 요소의 모양에 적용할 CSS 규칙을 양식 코드 위의 이 영역에 붙여넣거나 직접 입력할 수 있습니다.

이 실습에서는 아래 나와 있는 코드를 복사하여 사용하겠습니다.

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

복사한 코드를 [HTML 코드] 창 상단의 양식 위쪽에 붙여넣습니다.

[확인]을 클릭하여 [HTML] 창을 닫습니다. 양식의 모양이 새 서식을 사용하여 업데이트되었습니다. [미리 보기]를 클릭하거나 [파일] > [브라우저에서 페이지 미리 보기]를 선택하면 게시된 사이트에 양식이 어떻게 표시될지 확인할 수 있습니다.

Business Catalyst에서 복사하여 가지고 온 연락처 양식 코드를 추가할 때 포함되는 여러 가지 서로 다른 양식 요소를 제어하는 데도 같은 방법을 사용하면 됩니다.

그러면 이번에는 창의 상단에 붙여넣은 코드를 잠시 살펴보도록 하겠습니다. CSS 규칙 맨 위쪽과 맨 아래쪽에 있는 스타일 태그 두 개가 전체 코드를 둘러싼 것을 알 수 있습니다. 여는 스타일 태그와 닫는 스타일 태그가 없으면 CSS 규칙이 작동하지 않으므로 이는 매우 중요한 부분입니다. 이 두 개의 스타일 태그만 따로 적으면 다음과 같습니다.

<style type="text/css">

</style>

이러한 여는 스타일 태그와 닫는 스타일 태그는 두 태그 사이에 포함된 내용이 CSS 서식 지정 규칙이라는 것을 브라우저에 알리는 역할을 합니다. CSS 규칙을 붙여넣기 전에 항상 창의 맨 위쪽에 이들 태그의 자리를 마련하는 습관을 갖는 것이 좋습니다.

양식의 모양을 업데이트하기 위해 양식 요소를 변경하고 싶을 때는 "클래스"(양식의 다양한 요소에 할당되는 이름)를 호출하고, 업데이트할 속성을 지정한 다음, 해당 특성을 설정해야 합니다.

예를 들어, 다음과 같은 코드 줄을 생각해 볼 수 있습니다.

input.textarea {

background-color: #fff;

}

input.textarea는 텍스트 필드의 한 유형에 할당되는 이름("클래스")입니다. 그 다음 줄에서는 변경할 속성을 호출합니다. 이 예제에서 background-color라는 속성은 텍스트 필드의 배경색을 가리킵니다. 그 뒤를 이어 콜론 다음에 나오는 #fff는 CSS 코드 축약형으로, 흰색을 지정하는 16진수 색상 값인 #ffffff와 그 의미가 같습니다.

즉, 위의 규칙을 우리말로 풀어 설명하자면 "이 유형의 텍스트 필드에 대한 배경색을 흰색으로 설정하십시오."라고 할 수 있습니다.

양식을 업데이트할 때 텍스트 필드의 배경색을 웹 표준 색상 값(예: red)으로 할당할 수도 있습니다. 다음은 해당 유형의 텍스트 필드 배경색을 빨강으로 설정하는 코드입니다.

input.textarea {

background-color: red;

}

CSS 규칙을 작성하는 데는 고유의 언어와 문법이 있습니다. 새로운 언어를 배울 때는 으레 그러하듯이 CSS 언어를 자유롭게 구사하려면 어느 정도 연습이 필요합니다. 해당 구문(이러한 규칙을 작성하는 데 사용되는 문법)을 좀 더 자세히 알고 싶으면 W3Schools에서 무료로 제공하는 훌륭한 온라인 자습서와 CSS 참조 가이드를 읽어 보십시오.

아래에는 연락처 양식을 직접 편집할 준비가 되었을 때 활용할 수 있는 클래스 이름 목록과 각 양식 요소에 대해 조정할 수 있는 관련 속성이 나와 있습니다.

<style type="text/css">

</style>

연락처 양식 윗부분에서 기본 요소 제거

페이지에 붙여넣은 양식의 맨 앞에는 기본적으로 다음과 같은 두 가지 요소가 표시됩니다.

이들 요소 중 하나 또는 모두를 제거하고 싶으면 [HTML 코드] 창을 열고 앞서 붙여넣은 소스 코드의 위치(붙여넣은 CSS 스타일 태그 바로 아래)를 찾습니다.

*Required 줄을 제거하려면 아래 코드 줄을 찾아 삭제합니다.

<span class="req">*</span> Required

Title 레이블과 메뉴를 제거하려면 아래 코드 줄을 찾아 삭제합니다.

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

CSS 규칙을 추가하고 연락처 양식을 서식 지정하는 데 필요한 클래스 및 속성 목록

색상 값을 할당하기 위해 16진수 색상 값을 지정할 때 kuler 같은 온라인 도구나 이미지 편집 프로그램(Photoshop 또는 Fireworks)을 사용하면 훨씬 더 다양한 색상을 얻을 수 있습니다. 16진수 색상 값은 항상 # 기호로 시작하고 그 뒤에 3자리 또는 6자리 영숫자 조합(0-9, A-F)이 옵니다.

때로는 Muse의 스포이드 도구를 사용하여 기존 디자인에 사용된 색상을 선택하는 편이 훨씬 더 쉬울 수도 있습니다. 색상 피커의 필드에 표시된 16진수 색상 값을 복사하여 코드에 붙여넣을 수 있습니다. 한편, 아래 나와 있는 16개의 웹 표준 색상은 해당 이름을 사용하여 지정할 수도 있습니다. 규칙을 테스트하고 싶을 때 이러한 색상을 매우 유용하게 활용할 수 있습니다.

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow

색상을 해당 이름으로 지정할 때는 색상 앞에 # 기호를 사용하지 마십시오.

아래의 목록이 하나도 빠짐없이 완벽한 것은 아닙니다. 요소에 영향을 줄 수 있는 조합은 매우 다양하며, 여러 가지 다른 속성도 사용할 수 있기 때문입니다. 그래도 처음에는 여기에서 제안하는 내용을 출발점으로 삼으면 도움이 될 것입니다. 코드 조각을 두 번 클릭하여 선택한 다음 이를 클립보드에 복사할 수 있습니다.

Muse를 사용하여 작업하는 데 더 많은 정보가 필요하면 Muse 도움말 및 자습서 페이지를 방문하거나 Muse 이벤트 페이지에서 실시간으로 또는 녹화 방송으로 진행되는 웨비나에 참석하십시오.