L’exportation en HTML5 pour site Web vous permet de créer un diaporama à l’aide de clips de votre projet PhotoStage et de l’intégrer à votre site Web.

Le code source du site Web (HTML, CSS, Javascript) et ses dépendances d’image seront créés dans la destination sélectionnée. Actuellement, seules les images avec ses effets appliqués (à l’exception des animations) et la transition de fondu enchaîné sont prises en charge.

Options d’exportation

Les options suivantes sont disponibles dans la boîte de dialogue d’exportation :

Intégration au site Web

C'est très facile d'ajouter des diaporamas sur un site web. L'exportation en format HTML5 pour site web fournit un fichier échantillon html (index.html) qui peut être utilisé pour commencer la création de votre siteweb avec le diaporama. il contient une étiquette (balise) <iframe> avec slideshow.html comme source. Pour une mise en page facile, le <iframe> suit la taille de son conteneur parent. (i.e. <div>). Pour que votre diaporama de site web s'affiche correctement, copiez tout le contenu de votre répertoire "Enregistrer vers" à votre site web (e.g. a web server).

Pour inclure le diaporama vers votre site web existant, copiez et collez les codes suivants sur votre fichier html. Il utilise un étiquette <iframe> semblable à l'intérieur qui défini la taille du diaporama. Pour ceci, vous aurez besoin de copier le contenu du répertoire "Enregistrer à" sur votre index.html hôte. Le <iframe> seront utilisé pour inclure le diaporama sur votre site web. Vous pouvez ajuster la hauteur et la largeur du <div> tel que nécessaire.

<div style="width:640px; height:690px; margin:auto">
<!-- La largeur et la hauteur du iframe est un pourcentage de son parent -->
<!-- Configurer la marge à "auto" permet de centerr le iframe horizontalement dans le div -->
<!-- Configurer le style de bordure à "none" enlève la bordure du iframe par défaut -->
<iframe src="slideshow.html" style="width:100%; height:100%; margin:auto; border-style:none">
</iframe>
</div>

Le diaporama est aligné au centre par défaut au niveau de son conteneur supérieur (e.g. un autre<div> ou <body>). Pour modifier ceci, allez dans le <div> qui contient le <iframe>:

Changez margin:auto en float:left pour l'alignement à gauche et à float:right pour l'alignement à droite.