문서가 제대로 표시되고 있습니까?

이 문서의 내용은 Digital Publishing Suite에 적용됩니다. AEM Mobile 아티클의 경우 HTML 아티클 제작을 참조하십시오.

뷰어에 문서로 표시할 수 있도록 HTML 기반 아티클을 Folio로 가져올 수 있습니다. HTML 아티클의 장점 중 하나는 파일 크기가 작아 주간 발행물 및 단순한 텍스트 위주의 문서에 보다 적합하다는 것입니다. HTML 아티클은 Folio Overlays 패널에서 사용할 수 없는 인터랙티브 작업도 포함할 수 있습니다.

비디오 튜토리얼

비디오 튜토리얼
<a href="http://tv.adobe.com/watch/learn-digital-publishing-suite/loading-html-articles/">HTML 문서 불러오기</a>
Colin Fleming

Adobe Edge를 통한 DPS용 HTML 제작에 대한 정보는 Raghu Thricovil의 아티클 Adobe Edge를 사용하여 HTML 애니메이션으로 DPS Folio 개선(영어로만 제공)을 참조하십시오.

  1. HTML 파일이 들어 있는 폴더를 만듭니다.

    폴더에서 사용하고 있는 에셋만 포함해야 합니다. 사용되지 않는 에셋을 포함하여 폴더의 모든 에셋이 업로드됩니다.

  2. HTML 아티클을 단일 방향으로 가져올 경우, _h 또는 _v 접미어를 index_h.html과 같은 .html 파일에 추가하십시오.

    접미어를 추가하지 않는 경우 아티클을 이중 방향 아티클로 가져올 수 있습니다. 단일 방향 Folio를 미리 보거나 게시하려는 경우, 오류 메시지가 나타납니다.

  3. Folio Builder 패널에서 HTML 아티클이 포함될 Folio를 엽니다.

  4. Folio Builder 패널의 아티클 보기에서 패널 메뉴의 [아티클 가져오기]를 클릭합니다.

  5. "단일 아티클 가져오기"를 선택하고, 위치 폴더 아이콘 을 클릭하고, HTML 폴더를 지정합니다.

    “여러 아티클 가져오기” 옵션(가져온 문서에 대한 폴더 구조화 참조) 또는 “sidecar.xml을 사용하여 가져오기” 옵션(경로 기반의 sidecar.xml을 사용하여 아티클 가져오기 참조)을 사용하여 HTML 아티클을 가져올 수도 있습니다.

  6. [부드러운 스크롤]과 같은 추가 설정을 지정하고 [확인]을 클릭합니다.

HTML 파일을 편집하는 경우 Folio Builder 패널에서 HTML 아티클을 선택하고 [업데이트]를 선택합니다.

HTML 아티클 요구 사항

  • 세로 및 가로 방향 모두에 사용할 수 있는 단일 HTML 파일을 만들거나 두 방향에 대해 HTML 파일을 따로 만들 수 있습니다. 세로 및 가로에 대해 별도의 HTML 파일을 사용하려면 HTML 파일 이름 끝에 _v 및 _h 접미어를 추가합니다(예: "index_h.html"). 단일 방향 Folio를 만드는 경우 HTML 파일이 하나만 필요합니다. 단방향 Folio의 HTML 파일에 _h or _v 접미어를 포함시킵니다.

  • 동적 HTML(DHTML) 파일은 현재 완벽하게 지원되지 않습니다.

  • 파일 구조의 경우 HTML 파일에 대한 연결된 모든 그래픽 및 스크립트를 개별 문서 폴더에 배치하는 방법이 있습니다. 또는 전체 Folio에 대한 연결된 그래픽 및 스크립트를 HTMLResources.zip 폴더에 배치하는 옵션도 있습니다. HTMLResources.zip 파일을 Folio Builder 패널 또는 웹 Folio Producer의 Folio에 가져옵니다. HTMLResources 폴더 가져오기를 참조하십시오.


    HTMLResources 폴더의 예

  • HTML 코드에서는 상대 경로를 사용해야 합니다. HTML 파일과 같은 수준에 있는 이미지에 연결하는 경우 다음 방법을 사용합니다.

    <img src="GlobalImage.jpg"/>

    HTMLResources 폴더에 있는 이미지에 연결하는 경우에는 다음 방법을 사용합니다.

    <img src="../HTMLResources/GlobalImage.jpg"/>

HTML 아티클과 연결되는 하이퍼링크를 만드는 방법에 대한 자세한 내용은 HTML 아티클에 대한 navto 하이퍼링크 만들기를 참조하십시오.

Android 뷰어용 HTML 아티클 제작

Android 뷰어용 HTML 아티클을 만드는 것과 관련된 지침과 요구 사항은 Android 뷰어용 HTML 아티클 제작을 참조하십시오.

HTML5 리소스

HTML 아티클의 비디오가 전체 화면 비디오 오버레이처럼 작동하도록 허용

비디오 링크로 단일 방향 HTML 아티클을 만들 때 디바이스를 회전하면 재생 비디오도 회전될 수 있습니다. 또한 비디오 재생이 끝나면 비디오를 재생하는 인앱 브라우저가 닫힐 수 있습니다. 이 비헤이비어를 활성화하려면 HTML 비디오 링크에 "videofile://" 접두어를 사용하십시오. 이 옵션은 iOS 앱에만 사용할 수 있습니다.

참고:

비디오 비헤이비어의 예는 무료 DPS Tips 앱(영어로만 제공)의 HTML Examples 사항을 참조하십시오.

표준 비디오 비헤이비어

이 예제에서는 비디오가 인앱 브라우저에서 재생되고 단일 방향 Folio에서 회전되지 않습니다.<a href="Links/video.mp4">비디오 재생</a>

또는<a href="../HTMLResources/videos/video.mp4">비디오 재생</a>

향상된 비디오 비헤이비어

이 예제에서는 비디오가 단일 방향 Folio에서 올바르게 회전되고 비디오가 끝나면 문서로 돌아갑니다.<a href="videfile://Links/video.mp4">비디오 재생</a>

또는<a href="videofile://../HTMLResources/videos/video.mp4">비디오 재생</a>

JavaScript

또한 창 오브젝트의 playFullscreenVideo 기능을 사용하여 JavaScript를 통해 이 동작을 트리거할 수도 있습니다.<a onclick="window.playFullscreenVideo('Links/video.mp4');">비디오 재생</a>

또는<a onclick="window.playFullscreenVideo('../HTMLResources/videos/video.mp4');">비디오 재생</a>

스트리밍 비디오

이 예는 스트리밍 비디오를 재생합니다.<a href="videohttp://www.mysite.com/video.mp4">비디오 재생</a>

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책