Les boites texte et dossier

Présentation au sujet: "Les boites texte et dossier"— Transcription de la présentation:

1 Les boites texte et dossier
Plus de souplesse pour vos contenus

2 Découpage des pages Les pages sont découpées en emplacements de la façon suivante:

3 Deux types de boîtes Il existe deux types de boîtes:
Les boîtes texte: Insertion de code HTML Les boîtes dossier: Une présentation de vos contenus. Les deux types de boîtes peuvent être casés dans tous les emplacement cités précédemment. Nous verrons plus loin la manière dont ces boîtes se logent dans les emplacements.

4 Les boîtes Texte Pour les créer:
Placez-vous à l’endroit où vous souhaitez créer votre boîte, puis: Action de l’objet > Gestion des boîtes. Cliquez alors sur l’un des liens « Ajouter une boîte ». Sélectionnez « Boite de texte », puis donnez-lui un titre:

5 Les boîtes Texte Pour les modifier:
Certains éléments sont modifiables: Le titre L’emplacement Le fait que la boîte soit visible ou pas dans les sous-répertoires Le contenu Ne pas modifier les autres éléments, ils n’aideront pas à la mise en page de la boîte. Dans le champ « contenu », vous pouvez insérer votre code HTML. Par exemple: <font><b><u>Bonjour!</u><br />Ceci est mon code HTML. </b>Merci.</font>. Dans tous les cas de figure, une boîte texte prendra 100% de la largeur de l’emplacement ou elle à été créée. Sa hauteur s’adaptera en fonction de son contenu.

6 Les boîtes Dossier Pour les créer:
Placez-vous à l’endroit où vous souhaitez créer votre boîte, puis: Action de l’objet > Gestion des boîtes. Cliquez alors sur l’un des liens « Ajouter une boîte ». Sélectionnez « Boite dossier », puis donnez-lui un titre:

7 Les boîtes Dossier De même que les boites texte, pour les modifier:
Certains éléments sont modifiables: Le titre L’emplacement Le fait que la boîte soit visible ou pas dans les sous-répertoires Il y a d’autres éléments modifiables: Le mode d’affichage Le pourcentage d’occupation La section Le style de la boîte Nous allons étudier de plus prés ce que sont ces autres éléments

8 Les boîtes Dossier Le mode d’affichage:
Il y a 6 modes d’affichage des rubriques à l’intérieur de la boîte dossier. Sont affichés l’icône, le titre ainsi que le texte d’accroche.

9 Les boîtes Dossier Le pourcentage d’occupation:
Une boîte dossier peut occuper un pourcentage personnalisable de la largeur de son emplacement. Les boîtes s’agencent alors automatiquement pour combler les espaces, en fonction de l’ordre indiqué: Exemple: 7 Boites sont crées: elles ont comme pourcentages respectifs 100%, 50%, 50%, 25%, 75%, 40% et 100%. Elles s’agenceront donc de la manière suivante:

10 Les boîtes Dossier La section:
Il s’agit de l’emplacement du site d’où la boîte dossier va chercher son contenu. Par exemple, si nous avons à la racine l’arborescence suivante: Menu1 Menu11 Menu12 Menu2 Et si dans le champ section nous mettons sections/fr/Menu1, nous aurons dans la boite dossier:

11 Les boîtes Dossier Le style de la boîte:
Le champ « Style de la boîte » correspond au nom que vous allez donner à la boîte dans la feuille de style « dossier.css ». Il existe d’ores et déjà deux styles: Le style « Par défaut » (modele_defaut): Et le style « Light » (modele_simple), sans bordures ni titre. Il est possible de créer son propre style de boite, en copiant/collant dans dossier.css par exemple la partie concernant le modèle par défaut, en renommant les « modele_defaut » copiés en « modele_leNomVoulu », puis à en modifier les champs. Voyons comment s’y prendre.

12 Les boîtes Dossier Comment créer son style:
Avant toute chose, il faut comprendre comment est structuré le graphisme d’une boîte. Voici comment la décomposer:

13 Les boîtes Dossier Comment créer son style:
Une fois que vous avez compris cela, il ne vous reste plus qu’a modifier les champs correspondants dans la feuille de style « dossier.css » qui seront de la forme: /* coin haut gauche*/ .modele_leNomVoulu .monElementAModifier{ […] } Il existe des outils pour vous aider dans cela. Ces outils sont utilisables avec le navigateur Firefox. Pour les télécharger, il suffit d’aller dans le menu Outils > modules complémentaires de votre navigateur, puis cliquez sur le lien « Obtenir des extensions ». Vous pourrez alors chercher et installer « Firebug » ou « WebDeveloper » qui vous permettra de modifier les feuilles de style en direct (Attention, il n’y a pas de sauvegarde, il s’agit juste de faire des tests.).

14 Les boîtes Dossier Comment créer son style:
Une fois la feuille de style modifiée, il faudra L’uploader par FTP (à l’aide par exemple de Filezilla) en écrasant l’ancienne version Déployer le contenu du site en vous rendant à l’adresse et en vous identifiant à l’aide des login qui vous ont été fournis. Là, il faut cocher la case correspondante à votre site web, puis cliquer sur « Déployer la sélection ». Ensuite, il faut rafraîchir la page. Pour cela, tout en maintenant la touche Ctrl de votre clavier enfoncée, cliquez sur le bouton « Rafraîchir » de votre navigateur ou appuyez sur la touche F5 de votre clavier. Il se peut que le contenu ne se rafraîchisse pas. Dans ce cas, il faudra vider le cache de votre navigateur et recommencer le rafraîchissement de la page.

15 Conclusions Sur les boites texte Sur les boites dossier
Ajouter un peu de code HTML peu simplifier la mise en page, l’ajout de fonctionnalités dans vos pages. Sur les boites dossier Il est donc possible de modifier complètement la boîte dossier pour lui donner l’apparence que l’on souhaite, en adaptant la feuille de style. On peut par exemple masquer le titre de la boîte, changer les bordures voire les enlever, arranger les coins…etc. Tout cela se gère au niveau de la feuille de style dossier.css. A suivre, quelques exemples du résultat que l’on peut obtenir

16 Exemple: Le site de cartographie

17 Exemples imaginables: