DPS용 HTML 아티클 제작

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

비디오 튜토리얼

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

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 리소스

• HTML5를 사용하여 아티클을 제작하는 방법에 대한 자세한 내용은 Johannes Henseler의 문서 단일 파일 HTML5 프레임워크를 참조하십시오.

• Flash Pro를 사용하여 HTML5를 제작하기 위해 CreateJS를 사용하는 방법에 대한 자세한 내용은 CreateJS에 대한 도구 키트를 참조하십시오.

• iPad의 HTML 아티클 및 웹 뷰 오버레이에서 사용할 수 있는 글꼴에 대한 자세한 내용은 www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/을 참조하십시오.

• Rufus Deuchler가 제작한 디지털 발행용 HTML 콘텐츠 제작을 위한 Adobe Muse 사용 방법과 관련된 비디오 튜토리얼을 시청해 보십시오.

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

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

이 예제에서는 비디오가 인앱 브라우저에서 재생되고 단일 방향 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>

또한 창 오브젝트의 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>