Création d'un site: Navigation, contenu, environnement graphique,...
Introduction
La mise en ligne d'un site Internet au moyen d'un CMS (Plone, Joomla, typo3,...) permet de gérer de façon distincte l'aspect gestion de contenu et l'aspect mise en forme (graphisme).
Des connaissances informatiques de base (bureautique) sont suffisantes pourgérer le contenu d'un site via le CMS Plone.
Le système étant très intuitif, quelques explications suffisent pour créer la navigation du site et créer de nouvelles pages.
Il faut toutefois être attentif à la façon de mettre en forme les pages html (structure, mise en forme avec les balises, utilisation de modèles de pages, ...). La participation aux ateliers permet de faire évoluer son site et d'avancer pas à pas à la découverte de nouvelles fonctionnalités (menus alternatifs, page dynamique, portlets, flux RSS, galerie photos, bottins, ...).
Pour le graphisme du site, il y a trois possibilités:
Conserver l'un des deux modèles proposés par défaut
Modifier les couleurs et les images (accessible à tous)
Changer radicalement l'aspect du site (pour les graphistes et les intégrateurs).
Les coordonnées de PME ayant déjà réalisé le travail de conception graphique et d'intégration sont renseignées ici
Structurer son site, organiser l'accès à l'information
Agencer un site Internet autour de "zones" clairement identifiables et homogènes facilite la recherche d'information pour l'internaute.
Quelques exemples de zones: la navigation principale, l'information dynamique (qui change régulièrement), les liens internes vers des pages, les raccourcis internes vers des services, les informations complémentaires (calendrier, météo, ...).
Pour la page d'accueil:
La colonne de gauche est principalement utilisée pour la navigation (navigation complémentaire ou liens directs vers des pages).
La zone centrale est réservée à de l'information dynamique (édito, actualités, événements).
La zone de droite est principalement utilisée pour une information complémentaire (calendrier, météo, etc).
Pourquoi privilégier une navigation par thèmes?
Les Thèmes, les Catégories, les mini-sites
Un site communal rassemble une importante quantité d'information variée.
Les thèmes, étant peu nombreux, rendent la navigation plus lisible, intuitive. Dès que le citoyen a intégré la "signification" des "Thèmes", il sélectionnera celui qui correspond à l'objet de sa recherche et sera ainsi orienté sans devoir parcourir une masse importante d'informations.
Le libellé du thème doit être explicite tout en conservant sont aspect "grand ensemble d'information".
A vouloir être trop précis à ce niveau, on exclu certaines informations; ce qui conduit à devoir créer d'autres thèmes. Plus il y a de dossier thèmes à la racine du site, plus on s'oriente vers une navigation par rubrique.
Pour l'exemple repris ci dessus,
Le thème "Commune" rassemble les acteurs "publics" tel que les services public, para public, le politique, l'enseignement.
Le thème "Loisirs" rassemble les associations, les clubs sportifs, la culture, le tourisme, ...
Le thème "Economie" rassemble les indépendants, les entreprises, l'horeca, l'emploi et la formation
Du choix d'organiser une navigation horizontale ou verticale découle des possibilités et des contraintes. Nous avons privilégié une navigation horizontale pour les "Thèmes" et les "Catégories", la contrainte résulte du fait d'être limité en largeur par la taille de l'écran de l'internaute (Il est encore courant de rencontrer un écran de 1024 pixels de large, il faut donc en tenir compte). Chaque "Thème" peut regrouper jusqu'à 7 à 8 "Catégories" (en fonction de la longueur des intitulés). Soit une vingtaine de Catégories pour les trois "Thèmes" illustrés ci-dessus.
Ce qu'il faut éviter lors de la conception de la navigation
La navigation est clairement identifiable de par sa position (horizontale et en haut de page) et sa mise en forme (graphisme).
L'homogéinité de la navigation est préservée si l'on respecte la hiérarchie des éléments ainsi que leur nature.
La hiérarchie: Comme expliqué précédemment, la navigation est organisée hiérarchiquement sur trois à quatre niveaux. Les "Thèmes", les "Catégories", les "Services" (et parfois les sous-services).
Une erreur courante consiste à positionner un organisme tel le "CPAS" en tant que "Thème" ou "Catégorie", l'objectif étant de lui donner une meilleure visibilité.
Hors, "CPAS" n'est pas un "Thème", ni une "Catégorie"; la logique d'organisation de la navigation n'est donc pas respectée.
Les conséquences liées au non respect de la hiérarchie sont les suivantes:
Le non respect de la hiérarchie est source de confusion pour l'internaute.
D'un point de vue ergonomique, la navigation est construite de telle sorte qu'un clic au troisième niveau permette d'ouvrir une navigation dans la colonne de gauche. Positionner un service, un organisme au premier ou deuxième niveau revient à priver cet organisme d'un mode de navigation aisé. Il est en effet plus aisé d'avoir la navigation de l'organisme en permanence sous les yeux (dans la colonne de gauche), que de devoir utiliser le menu déroulant.
La nature des éléments constituants la navigation:
La navigation principale (navigation par thèmes) permet d'accéder aux pages d'une série d'acteurs, d'organisations (services communaux, services publics, associations, écoles,...).
Comment créer la navigation
La création des thèmes, des catégories, des services, etc.
Introduction
Le principe de Plone est très simple. On ajoute un élément là ou on est dans le site.
La breadcrumb ou chemin de navigation nous indique à quel endroit du site on se situe. Cette dernière est généralement située en dessous du banner.
Exemple:
Je me situe à la racine du site, à l'accueil
Je me situe dans le dossier "Informatique"
Créer un élément de la navigation
Si l'on démarre avec une instance par défaut, aucun onglet n'apparaît au dessus si ce n'est celui de l'accueil.
Pour créer un thème, il faut ajouter un dossier à la racine du site (accueil) et ensuite modifier l'état du dossier en sélectionnant "publier dans la navigation".
La notion d'Etat d'un élément
Par défaut, un nouvel élément est dans l'état "créé". Cela signifie qu'il faut être identifié sur le site et avoir des droits sur cet élément pour pouvoir le voir.
Deux autres états sont possibles:
Publier dans la navigation -> l'élément apparaît dans la navigation
Publier hors navigation -> l'élément sera accessible via un lien ou par le moteur de recherche, par Google, mais ne s'affichera pas dans la navigation
Après avoir créé le dossier "Commune", je dois le publier dans la navigation pour voir apparaître le thème "Commune"
Illustration de la navigation
Créer une page
Après avoir doté son site d'une navigation constituée de dossiers, il convient de créer des pages "documents"pour ajouter du contenu (texte, photos, ...) au site Internet.
Une fois le document créé, il faut lui donner un titre et utiliser la zone "corps du texte" pour réaliser la page web. La barre d'outils propose les actions de base que l'on retrouve dans un éditeur de texte classique (Openoffice, Word,...).
Quelques fonctionnalités méritent de s'y arrêter:
L'édition en "pleine page" permet d'avoir toujours le menu de l'éditeur sous les yeux.
L'utilisation de "modèles" permet d'importer des "structures de pages" prédéfinies.
Copier coller du texte
L'édition d'une page est une opération simple grâce à l'éditeur html. Il faut cependant être attentif à éviter certains écueils.
1. Le copier coller
Il est possible de copier du texte et de le coller dans l'éditeur. Il faut toutefois prêter attention au fait de ne pas polluer le code html de la page avec des balises générées par l'éditeur d'origine.
Voici un exemple de code html d'un texte copié de Word:
<!--[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é :
Attention, depuis le premier décembre 2005, il est possible, via nos services, de recevoir une carte d'identité électronique en urgence.
1) Cartes d’identité électroniques pour les personnes de plus de 12 ans.
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.
Créer un modèle de document
Un modèle de document peut être inséré dans un document, une actualité, un événement,...
Certains blocs d'information font appel à la même mise en forme. Ce peut être la partie "coordonnées" d'une page, la présentation des élus,...
A titre d'exemple, voici comment apparaissent les coordonnées des services communaux à Herstal:
Le modèle ayant servit à l'élaboration de cette page est le suivant:
Une fois un modèle créé, il suffit de cliquer sur l'icone "Modèle" de l'éditeur html.
Il est possible d'utiliser plusieurs modèles dans la même page. Insérer un modèle n'affecte pas le contenu existant.
Comment créer un modèle de document?
Il faut que le produit "CPFCKTemplates" soit installé. Si ce n'est fait, procédez à l'installation dans Configuration du site --> Produits d'extension
Lorsque le produit est installé, il est possible d'ajouter un élément "modèlefckeditor" par le menu "ajout d'un élément" après avoir créé un dossier "Modèles" (pour y ranger les modèles et les images utilisées dans ceux-ci).
Un modèle doit être "activé" pour être disponible dans l'éditeur.
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:
Modalités pour obtenir une carte d'identité :
Attention, depuis le premier décembre 2005, il est possible, via nos services, de recevoir une carte d'identité électronique en urgence.
1) Cartes d’identité électroniques pour les personnes de plus de 12 ans.
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 ou à la gendarmerie.
- le signaler à notre administration communale.
En dehors des heures d’ouverture, il faut le signaler au Helpdesk, service ouvert 24h/24, au numéro 02/518.21.16.
2) Cartes d’identité pour enfants 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 euros. 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 euros.
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.
1) Cartes d’identité électroniques pour les personnes de plus de 12 ans. (titre 3)
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 ou à la gendarmerie.
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.
2) Cartes d’identité pour enfants 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 euros. 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 euros.
La mise en forme
La mise en forme d'un texte peut être faite de deux manières différentes. La première consiste à utiliser des balises et des styles prédéfinis. La seconde, qui est à proscrire, consiste à utiliser des styles "locaux"; c'est à dire, définis dans la page html elle-même.
Observons ces deux modes de mise en forme pour le texte "Modalités pour obtenir une carte d'identité" mis en forme à la page précédente :
1- Utilisation du menu "Format" application du "titre 2" pour obtenir
>> Modalités pour obtenir une carte d'identité : <<
2. Utilisation du menu "Size" et de la taille de police "medium"
ainsi que du menu "text color" et de la couleur #1A5C8F
pour obtenir
>> Modalités pour obtenir une carte d'identité : <<
Le résultat est quasi identique et ne demanderait qu'une adaptation de la taille du texte pour être parfaitement identique.
Les deux méthodes parraissent donc valables. Observons maintenant le code html pour chacune des phrases.
1. Utilisation du format "titre2"
<h2>Modalités pour obtenir une carte d'identité :</h2>
Le texte est balisé avec la balise "h2", la valeur de la balise est définie en CSS. Le webmaster peut décider à tout moment de changer les valeurs CSS définies pour la balise "h2" en quelques minutes. L'opéraiton effectuée, la mise en forme de tous les textes balisés avec la balise "h2" sera actualisée en fonction des modifications effectuées dans le code CSS. Cette méthode est la bonne.
2. Utilisation de la taille de police "medium" et de la couleur de texte #1A5C8F
<span style="color: rgb(26, 92, 143);"><span style="font-size: medium;">Modalités pour obtenir une carte d'identité : </span></span>
La mise en forme du texte est directement définie dans le code html; ce qui signifie que toute modification ultérieure devra être faite manuellement dans chaque page du site.
Le code source est beaucoup plus chargé; ce qui augmente le risque d'avoir des interférences.
Cette deuxième méthode est totalement à proscrire. Normalement, les options "Size" et "Text color" ont été déactivées de l'éditeur. Si ce n'est le cas, il faut changer les paramètres dans configuration du site/configuration de Fckeditor et sélectionner la "Barre de menu Plone par défaut".
Ajouter une image dans un document
Utilisons l'icône insérer une image et cliquons sur le bouton "Parcourir le serveur"
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.
Une fois l'image insérée dans l'éditeur, il reste à lui appliquer un style en cliquant sur l'image et en sélectionant dans le menu "Style" de l'éditeur l'option "image à gauche" ou "image à droite" de telle sorte que le texte puisse "habiller" l'image.
Générer une table des matières automatiquement
Pour afficher une table des matières, il faut baliser les en-têtes de paragraphe en "titre 2" et, alors que l'on est en mode modification, cocher la case "table des matières" sous l'onglet "paramètres.
Exemple de page avec une table des matières
Baliser les en-têtes de paragraphe en "titre 2" (h2)
Activer le paramètre "table des matières"
Créer un accordéon vertical
Accordéon simple dans un document, un portlet,...
Voici le code html à insérer dans l'éditeur en mode html pour obtenir un accordéon vertical dans un document, un portlet,...
<div id="accordion"> <h2 style="text-align: left;">Premier titre</h2> <div> Premier texte </div> <h2 style="text-align: left;">Deuxième titre</h2> <div> Deuxième texte </div> <h2 style="text-align: left;">Troisième titre</h2> <div> Troisième texte </div> </div>
avant la balise </div> finale pour ajouter un élément.
Accordéon dans une page template tel que index_html
Pour l'exemple précédent, l'accordéon est édité au sein d'un même document. Pour les utilisateurs avancés, il est possible de créer un accordéon dont chacun des éléments peut être édité dans un document différent. Cette manière de faire permet d'éviter les problèmes avec le code html de l'accordéon.
Avant d'insérer le code, il faut créer un dossier dont l' id sera accordion et y ajouter au moins trois documents.
Attention, il faut adapter le code path='/nom-de-linstance/nom-de-linstance/accordion' et y mentionner le chemin du dossier accordion.
Le com de l'instance correspond généralement au nom de la commune. Pour la ville de huy, on obtiendrait: path='/huy/huy/accordion'
Créer un portlet "gallerie photos"
Le portlet Gallerie permet d'afficher des photos en mode diaporama
Pour ajouter un portlet, il faut cliquer sur le lien "Gérer les portlets" situé au bas des colonnes de gauche et de droite. Il faut ensuite utiliser la liste déroulante située en haut de colonne pour ajouter un portlet dans la colonne concernée.
Nous allons donc ajouter un portlet gallerie.
Lui donner un titre
Titre de la gallerie. Laissez vide si vous ne voulez pas afficher de titre.
Cocher la case Omit portlet border
Tick this box if you want to render the text above without the standard header, border or footer.
Définir un nombre d'image inférieur au nombre d'images contenue dans le ou les dossiers
(Requis)
Combien de photos.
Pour le chemin, il faut mentionner le nom de l'instance qui correspond généralement au nom de la commune deux fois
soit /huy/huy
et ensuite ajouter le chemin relatif du dossier dans lequel se trouvent les photos (l'url après le .be) ce qui donne pour
www.huy.be/commune/album-photo
/huy/huy/commune/album-photo
(Requis)
Liste des chemins de recherche des images (ils incluront les sous-dossiers). Le chemin est relatif à la racine de Zope, donc si votre Plone s'appelle plone et que vous voulez inclure toutes les images qu'il contient, saisissez /plone
(Requis)
identifiant unique de la gallerie.
Choissisez une taille d'image (ex. large, preview, mini, thumb, title, icon, listing) ou laissez vide.
(Requis)
Intervalle de temps entre deux images (en ms).
(Requis)
Nombre d'animations
(Requis)
JQuery introduit le symbole $, qui dans certaines versions de Plone est remplacé par 'jq' pour éviter les conflits. Cependant dans certaines versions ce symbole doit rester à $ ou les produits que vous avez déjà installés doivent le setter à $ ou choisr un identifant différent.
Modifier l'affichage des informations liées à un événement (agenda)
Les informations liées à un événement (date, lieu, personne de contact,...) apparaissent par défaut dans un tableau.
Si vous souhaitez modifier cette vue pour obtenir l'affichage suivant,
il faut modifier la vue de l'élément.
Pour ce faire, procédez comme suit:
Dans le dossier custom (/portal_skins/custom) ajoutez un élément de type "Page Template" en utilisant la liste déroulante en haut à droite.
Nommez la Page Template "event_view" et insérez-y le code suivant: Voir le code
Changer le logo du site
L'identifiant du logo est par défaut "logo.jpg". Le format de l'image et son identifiant peut être, si besoin, modifié dans le fichier "base_properties", par exemple pour obtenir un logo dont l'identifiant serait monlogo.png . Le fichier "base_properties" peut être localisé et customisé de la façon décrite dans la page "Trouver un élément graphique dans Plone".
Si l'on ajoute l'identifiant du logo à la suite de l'url du site, on peut visualiser l'image logo et éventuellement l'enregistrer sur son ordinateur pour la modifier (clic droit, enregistrer l'image sous).
http://www.communesplone.be/logo.jpg donne:
Il reste à modifier l'image "logo.jpg" avec un logiciel de retouche d'image (Gimp, Photoshop,...) , à créer un élément "image" dans le dossier "custom" et uploader le logo.
Changer le banner du site
Une image nommée "banner.jpg" est présente à la racine du site. Il faut modifier cette image, mais l'on peut aussi ajouter d'autres images "banner.jpg" n'importe ou dans le site.
Le mode d'affichage des banners est le suivant: Plone affiche l'image banner.jpg si elle existe pour un dossier donné, si elle n'existe pas, il "regarde" un niveau au dessus et ainsi de suite.
Attention, lorsque l'on ajoute une nouvelle image, on peut lui donner le titre "banner.jpg", mais l'identifiant sera celui de l'image uploadée (les éléments plone ont un titre et un identifiant, pour le système, c'est l'identifiant qui compte).
Le fait de renommer un élément permet d'afficher l'identifiant (lequel apparait dans l'url).
Si le nom de l'image uploadée n'est pas banner.jpg, il faut donc renommer l'image une fois créée dans Plone et modifier l'identifiant en "banner.jpg"
Pour l'exemple repris ci-dessus, l'utilisateur à ajouté un titre "banner.jpg", mais l'image qui va être uploadée s'appelle "banner2.jpg". En effet, si l'on crée plusieurs banners, il ne pourront avoir tous le même nom.
Comme le nom de l'image est "banner2.jpg", l'identifiant créé par Plone sera "banner2.jpg". Il faut donc, après avoir chargé l'image, utiliser le menu "action" et sélectionner "renommer". On peut alors renommer l'identifiant de l'image de "banner2.jpg" à "banner.jpg".
Créer un album photo
Créer un album photo revient à appliquer une "vue" à un dossier contenant des images. On peut créer un dossier et y ajouter des images une à une, mais il existe un moyen plus rapide d'ajouter des photos. Si le produit "Zipfiletransport" est installé, on peut importer un dossier zippé contenant des photos (ou d'autres fichiers pour une autre finalité) en une opération. Le bouton d'importation apparait en bas de la page en mode contenu (attention, le bouton n'apparait pas si le dossier est vide).
L'opération consiste donc à zipper un dossier et à importer le fichier zippé. Il est important de préciser que les images doivent avoit été péalablement redimensionnées pour le web. Les images importées doivent avoir une largeur maximale de +- 600px.
Une fois le dossier zippé, il faut cliquer sur le bouton "importer", sélectionner le fichier, cliquer sur ouvrir et ensuite sur "importer". Remarquez que le dossier comprenant les images devient un dossier plone suite à l'importation. Il faut ensuite appliquer la "gallery view" au dossier en utilisant le menu affichage. Une fois la gallery view appliquée, un onglet "gallery settings" apparait à droite de l'onglet "partage". La page gallery settings permet de choisir le type d'affichage souhaité. La format d'image "Size" sélectionné par défaut est medium, autant sélectionner "large".
Slideshow 2 est l'affichage par défaut. L'image visionnée se déplace dans le cadre.
Fancy box permet d'afficher l'image en avant plan. La zone d'affichage n'est plus limitée à la partie centrale du site.
et voici Highslide qui ressemble un peu à Fancybox mais avec des vignettes des photos en bas de page.
Créer des portlets (boites d'informations) dans les colonnes de gauche ou de droite
Un lien "Gérer les portlets" apparait au bas des colonnes de gauche et de droite ou en bas à gauche s'il n'y a pas de colonnes.
En cliquant sur ce lien, vous accédez à l'interface de gestion des portlets. Comme pour tout élément ajouté dans plone, les portlets le sont à l'endroit ou l'on se situe au moment de l'ajout. Si je suis dans le dossier "Informatique" et que je clique sur "Gérer les porlets", je pourrai gérer ou ajouter des portlets qui s'afficheront dans le dossier "Informatique" ainsi que dans les dossiers enfants.
Les portlets les plus utilisés sont:
Le "portlet texte statique" qui permet d'afficher une zone de texte avec toutes les possibilités offertes par l'éditeur (images, liens, mise en forme,...)
Le "portlet collection" qui permet d'afficher le résultat d'une collection
Le "portlet cpskin3navigation qui permet d'afficher la navigation de n'importe quelle partie d'arborescence du site. Par expemple, on pourrait afficher le contenu d'un dossier qui contiendrait des documents à télécharger et ainsi lister les documents dans le portlet
La portlet "gallerie" qui permet d'afficher des images en mode diaporama
Le portlet "Flux RSS" qui permet d'afficher un flux RSS
D'autres types de portlet sont disponible tels que: Eléments réçents, liste de modèration, actualités, agenda, connexion,...
Adapter le footer du site
Dans la ZMI, il faut: cliquer sur portal_view_customizations cliquer sur l'élément plone.footer Ensuite sur le bouton Customize
et insérer le code suivant en prenant soin de définir le nom de la commune:
<span tal:define="now modules/DateTime/DateTime" tal:content="now/year" /> </p> <p> Site réalisé dans le cadre du projet <a target="_blank" href="http://www.communesplone.be">CommunesPlone</a> </p> </div>
Adapter le graphisme du site
Les couleurs de base du site peuvent être modifiées dans la ZMI dans des fichiers de propriétés nommé cpskin3_properties ou base_properties. La façon de trouver ces fichiers est décrite dans le tutoriel indiqué en bas de page.
Afin de modifier d'avantage le graphisme du site, il est nécessaire de disposer de connaissances dans le langage css.
Après avoir doté son site d'une navigation constituée de dossiers, il convient de créer des pages "documents"pour ajouter du contenu (texte, photos, ...) au site Internet.
L'édition en "pleine page" permet d'avoir toujours le menu de l'éditeur sous les yeux.
L'utilisation de "modèles" permet d'importer des "structures de pages" prédéfinies. 
1- Utilisation du menu "Format" application du "titre 2" pour obtenir
2. Utilisation du menu "Size" et de la taille de police "medium"
et cliquons sur le 
bouton "Parcourir le serveur"
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.
