1.5. L’éditeur html¶
1.5.1. Insérer un lien, une image¶
Insérer une image¶
Utilisons l’icône insérer une image et cliquons sur “Parcourir le serveur” (1)
L’image peut être “stockée” dans le dossier courant, mais l’interface d’ajout d’images permet aussi de créer un dossier que l’on pourrait nommer “images” pour y stocker les images.
Ainsi, si je me situe sur la page d’accueil d’un service communal et que je souhaite insérer les photos des membres du service, je peux, en mode édition d’un document, insérer des images. Par défaut, les images ajoutées seront “stockées” dans le dossier parent du document. Il est préférable de créer un dossier “images” soit à l’avance soit au moment ou l’on insère l’image de telle sorte que les images n’apparaissent pas au même niveau que les éléments du dossier du service.
Créer un dossier “images” permet de ne pas “surcharger” la vue “contenus” du dossier.
Avant d’insérer dans l’éditeur,vous pouvez lui appliquer un alignement (3) en cochant “left” ou “right” de telle sorte que le texte puisse “habiller” l’image.
Vous pouvez aussi légender (4) l’image ; une zone de texte sera alors disponible en dessous de l’image.
Insérer un lien vers une page interne , vers un site extérieur et un lien e-mail¶
Un lien peut être créé sur du texte ou sur une image. Lorsque votre texte ou votre image est ajouté, sélectionnez l’élément et cliquez sur l’icône “lien”.
Lien vers page interne¶
Utilisons l’icône lien et cliquons sur “Explorer le serveur” (1).
Le côté gauche et la partie haute de la zone centrale permettent de se déplacer dans le site et de chercher l’élément vers lequel le lien doit pointer.
Vous pouvez changer de page avec les deux flèches du dessus.
En cliquant sur les éléments se trouvant dans la partie base de la zone centrale, le lien va être créé et un identifiant va être généré (1).
Cet identifiant sera toujours attaché à notre élément, ce qui permet de pouvoir déplacer notre élément dans le site sans risque de casser le lien.
Lien vers un site extérieur¶
Pour ce type de lien il vous suffit de remplir le champ url avec l’url du site vers lequel le lien doit pointer.
Dans l’onglet cible vous pouvez choisir “Nouvelle fenêtre” ce qui permet de garder votre site ouvert lorsque l’internaute cliquera sur le lien
Lien e-mail¶
Ce type de lien est utilisé quand une adresse mail est renseignée.
Pour créer un lien e-mail il vous suffit dans le type de lien de choisir “E-mail” (1) vous pouvez alors rentrer l’adresse e-mail (2).
1.5.2. Utilisation des styles prédéfinis¶
Les styles prédéfinis vous permettent de mettre en forme votre texte. Par exemple : mettre icône mail devant une adresse mail.
Les styles disponibles sont visibles dans le menu déroulant “Styles”.
h1{
color:green;
}
Si vous utilisez les styles prédéfinis et que ceux-ci changent toutes vos pages utlisant ces styles changerons automatiquement.
Lorsque vous utilisez une icône de la liste, celle-ci se répétera sur la ligne suivante. Pour supprimer celle-ci vous pouvez écrire votre texte, sélectionner votre ligne et cliquer sur le bouton “supprimer la mise en forme”.
1.5.3. Différence leadimage et image dans le texte et gestion de celles-ci¶
La leadimage est une image qui est attachée au contenu. Elle ne sera affichée que lorsque l’on choisi un type d’affichage, par exemple l’affichage “Faceted items leadimage”.
Elle va être aussi récupérée pour la page d’accueil dans le cas d’une collection comme par exemple les actualités.
Les images se trouvant dans un texte ne seront quant à elles que lorsque l’on consulte la page et ne seront pas récupérées pour l’affichage.
Celles-ci doivent être enregistrées dans le site en tant qu’élément de type image tandis que les leadimage seront enregistrées directement sur l’élément.
La gestions des images¶
Pour facilité la gestion de votre site nous vous conseillons de créer des dossiers images dans vos différents acteurs.
Par exemple dans votre thème “loisirs” vous avez une catégorie “Tourisme” dans la quelle on va retrouver l’office du tourisme.
Il est plus logique d’avoir un dossier images avec toutes les images à ce niveau-là qu’un dossier images ce trouvant à la racine de votre site avec toutes les images de celui-ci. C’est aussi plus facile de s’y retrouver.
Toutes les images uploadées sur votre site doivent faire l’objet d’une attention particulière.
En effet il est inutile d’avoir des images de taille exagérément grande ; une image avec un poid de 200 ko sera généralement suffisante.
Vous devez donc, avant de charger l’image sur votre site, la redimensionner à l’aide d’un logicel de traitement d’image tels que GIMP, Resize image, Photopea, photoshop …
Il est possible via l’onglet “Téléverser” de charger plusieurs images en même temps.
1.5.4. Créer une page¶
1.5.5. Copier-coller du texte¶
1. Le copier coller¶
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:HyphenationZone>21</w:HyphenationZone>
<w:PunctuationKerning />
<w:ValidateAgainstSchemas />
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:Compatibility>
<w:BreakWrappedTables />
<w:SnapToGridInCell />
<w:WrapTextWithPunct />
<w:UseAsianBreakRules />
<w:DontGrowAutofit />
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" LatentStyleCount="156">
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Tableau Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style>
<![endif]-->
<h1>Modalités pour obtenir une carte d'identité :</h1>
<p class="MsoNormal"> </p>
<p class="MsoNormal"><b style="mso-bidi-font-weight:normal">Attention, depuis le premier décembre 2005,
il est possible,
via nos services, de recevoir une carte d'identité électronique en urgence</b>.</p>
<p class="MsoNormal"> </p>
<p style="margin-left:19.5pt;text-indent:-19.5pt;mso-list:l0 level1 lfo1;
tab-stops:list 19.5pt" class="MsoNormal"><span style="font-size:18.0pt"><span style="mso-list:Ignore">1)
<span style="font:7.0pt "Times New Roman""> </span></span></span><span style="font-size:18.0pt">
Cartes d’identité électroniques pour les personnes de plus de 12 ans.</span></p>
<p class="MsoNormal"><span style="font-size:18.0pt"> </span></p>
<ul type="disc" style="margin-top:0cm">
<li style="mso-list:l1 level1 lfo2;tab-stops:list 36.0pt" class="MsoNormal">une convocation parvient à votre
domicile, vous invitant à vous présenter en nos locaux.</li>
<li style="mso-list:l1 level1 lfo2;tab-stops:list 36.0pt" class="MsoNormal">se munir d’une photo
d’identité sur fond blanc et de 15 €.</li>
<li style="mso-list:l1 level1 lfo2;tab-stops:list 36.0pt" class="MsoNormal">le délai d’obtention
est de +/- 3 semaines.</li>
</ul>
Le même texte débarassé du code lié à l’éditeur:
<h2>Modalités pour obtenir une carte d'identité :</h2>
<strong>Attention, depuis le premier décembre 2005, il est possible, via nos services,
de recevoir une carte d'identité électronique en urgence.</strong><br />
<br />
1) Cartes d’identité électroniques pour les personnes de plus de 12 ans.<br />
<ul>
<li> une convocation parvient à votre domicile, vous invitant à vous présenter en nos locaux.</li>
<li> se munir d’une photo d’identité sur fond blanc et de 15 €.</li>
<li> le délai d’obtention est de +/- 3 semaines.</li>
</ul>
Le texte tel que vu dans l’éditeur dans les deux cas (code “pollué”, code propre)
Modalités pour obtenir une carte d’identité :¶
une convocation parvient à votre domicile, vous invitant à vous présenter en nos locaux.
se munir d’une photo d’identité sur fond blanc et de 15 €.
le délai d’obtention est de +/- 3 semaines.
1.5.6. Exemple de mise en forme d’un texte¶
Nous avons vu précédemment comment obtenir un texte “brut”, sans mise en forme et balises héritées d’un éditeur de texte (word) ou d’une version précédente de site.
Voici un exemple de texte brut:
Et un exemple de texte mis en forme:
Modalités pour obtenir une carte d’identité : (titre 2)¶
Attention, depuis le premier décembre 2005, il est possible, via nos services, de recevoir une carte d’identité électronique en urgence.
une convocation parvient à votre domicile, vous invitant à vous présenter en nos locaux.
se munir d’une photo d’identité sur fond blanc et de 15 €.
le délai d’obtention est de +/- 3 semaines.
En cas de perte ou de vol :
Pendant les heures d’ouverture, il faut :
faire une déclaration à la police.
le signaler à notre administration communale. (liste à puce)
En dehors des heures d’ouverture, il faut le signaler au Helpdesk, service ouvert 24h/24, au numéro 02/518.21.16.
Carte électronique pour les enfants belges de moins de 12 ans¶
Il est maintenant possible d’obtenir une carte électronique pour les enfants belges de moins de 12 ans : se présenter avec l’enfant, se munir d’une photo d’identité fond blanc et de 3 €. délai d’obtention: 3 semaines.
3) Cartes d’identité pour les étrangers.¶
Depuis le mois d’août 2008, il est possible d’obtenir une carte électronique pour les étrangers. Se munir de l’ancienne carte, de 3 photos et de 15 €.
1.5.7. Générer une table des matières automatiquement¶
1.5.8. Ajout d’une vidéo¶
Les sites n’hébergent pas eux-mêmes les contenus vidéo ; il faut aller les déposer sur d’autres sites tels que youtube ou dailymotion.
Deux possibilités s’offrent alors à vous : soit afficher directement la vidéo, soit l’intégrer au sein d’un contenu, tel qu’un document.
Afficher directement la vidéo¶
Dans le premier cas, il faudra créer un élément de type “Media Link”, dans lequel vous copierez l’URL de la vidéo.
Afficher une vidéo au sein d’un document¶
Dans ce deuxième cas, il faudra aller rechercher l’iframe de la vidéo. Cette iframe est récupérable lorsque, sur la vidéo on clique sur “partager”, puis “intégrer” (ou “share” et “embed” en anglais). L’iframe se présente sous la forme :
Copiez l’iframe, et rendez-vous dans un document. Là, en mode source, vous pourrez coller l’iframe.
Zone Multimédia¶
Cette zone se trouve en bas d’une page d’accueil, que ce soit du site portail ou d’un minisite, et contient des albums photos et vidéos. Elle n’apparaît pas par défaut.
Activer la zone multimédia¶
La zone multimédia doit être activée au niveau de la page d’accueil que se soit pour le site principal ou pour les mini sites. Pour activer cette zone vous devez choisir dans le menu « Configuration ▼ » « Montrer la zone multimédia ». Cette action va créer deux dossiers « Album » et « Vidéo », dans chaque dossier une collection index a été créée avec des critères de recherche différents.
