Comment créer une page "A propos de nous"

Soumis par tataye le 20. janvier 2012 - 14:49
Sponsored by
Thank you for your contribution: 
Serge Billon

Pour vous donner un premier vrai défi, nous allons créer une première page sur votre nouveau site. Ce sera la page "A propos de nous" sur laquelle vous pouvez décrire votre entreprise, votre projet ou vous-même. La plupart du temps, une page comme celle-ci contient un titre, du texte et peut-être quelques images.

Contenu statique contre dynamique

Une page "A propos de nous" est généralement créé une fois, est accessible via un lien du menu, et à l'avenir tout ce que vous aurez à faire sera de changer à mesure que vous aurez à le faire. Cela a un caractère statique. Un communiqué de presse ou un article de blog, cependant, a un caractère dynamique.

  • Pour les pages statiques, contrairement aux pages dynamiques, la date de création et l'auteur ne comptent pas vraiment.
  • Les pages statiques sont habituellement accessibles par l'intermédiaire d'un lien de menu, tandis que des pages dynamiques peuvent être accédées par des listes.

Le plan

La page 'A propos de nous' devrait comporter les éléments suivants:

  • un titre,
  • un texte,
  • une image.
  • La page ne devrait pas figurer sur la première page.
  • Nous voulons un lien vers la page dans le menu horizontal supérieur (Menu haut ou top menu).

Cela peut paraître simple au premier abord :-). Allez-y et connectez-vous à l'interface d'administration!

Étape 1 - Création du contenu

Allez au Gestionnaire d'articles (Contenu Gestion des articles). Là vous pourriez encore voir vos données d'examples non publiées (Figure 1).

gestionnaire d'articles

Figure 1: Gestionnaire d'articles

Cliquez sur l'icône pour accéder au formulaire approprié puis ajouter le titre et le texte. Dans le volet supérieur, sous le titre, sélectionnez « Non catégorisé » comme catégorie. Cette catégorie a été créée en installant les données d'exemple. Le champ En vedette indique si le contenu doit être affiché dans la mise en page blog en vedette, qui est principalement utilisée sur la page d'accueil. Cela fonctionne toujours dans Joomla ! 2.5 mais les termes peuvent facilement être incompris. Sélectionnez Non. Dans la fenêtre de l'éditeur, vous pouvez maintenant entrer votre texte. Joomla! est fourni avec l'éditeur par défaut TinyMCE (Figure 2).

Formulaire d'édition d'article

Figure 2: Formulaire d'édition d'article

Insertion d'une image provenant d'une URL

Comme premier exemple nous allons utiliser une image déjà existante sur le web.
Par exemple, celle-ci: http://farm2.staticflickr.com/1198/898250237_78a0e75cba_m_d.jpg (Figure 3)

Hagen Fitou

Figure 3: Image Exemple

Déplacez le curseur dans le texte à la position à laquelle vous souhaitez insérer l'image. Cliquez sur l'icône image de la barre d'outils éditeur et collez l'URL de l'image dans la fenêtre pop-up. Configurez l'image avec un alignement à gauche et utilisez des espaces de 10 pixels horizontaux et verticaux (Figure 4).

Inserez l'image

Figure 4: Inserez l'image

L'image apparaîtra dans la fenêtre de votre éditeur. Cliquez sur Insérer et votre objet est stocké. Il y a plusieurs manières de l'enregistrer :

  • Enregistrer - L'élément est enregistré. Le formulaire n'est pas fermé. Utilisé pour enregistrer lorsque vous souhaitez toujours continuer à travailler.
  • Enregister & Fermer - L'élément est enregistré et le formulaire sera fermé.
  • Enregistrer & Nouveau - L'élement est enregistré, le formulaire sera fermé et un nouveau formulaire d'article vide est ouvert.

Quittez le formulaire.

Étape 2 - Création d'un lien de menu

L'article a été créé, mais n'apparaît pas sur le site. Pour qu'il apparaisse, nous avons besoin d'un lien !

Cliquez sur l'icône Nouveau dans le gestionnaire de menu dans le menu supérieur (Menus Menu haut).

Astuce: En anglais, le menu haut s'appelle top-menu et ce nom fait référence à la position "top" du template par défaut. Si vous n'utilisez pas le template par défaut et les données d'exemple le "menu haut" n'existe pas ou peut avoir un autre nom.

Cliquez sur le bouton « Sélection » à côté du champ de type de liens de Menu. Une fenêtre avec différents liens s'affichera. Cliquez sur le lien Article (Figure 5).

Sélectionnez un type d'élément de menu

Figure 5: Sélectionnez un type d'élément de menu

Vous devez maintenant choisir l'article désiré. Cliquez sur le bouton Sélectionner / changer dans le volet droit (sélectionnez l'Article) pour le sélectionner. Vous verrez une boîte de recherche avec tous les articles. Dans le cas où vous ne trouveriez pas votre article sur la page tout de suite, vous pouvez filtrer la liste en tapant une partie du titre de l'article dans la boîte de recherche, puis en cliquant sur ??le titre de l'article correct dans la liste des résultats (Figure 6).

Type de Menu - simple article - Sélectionner l'article

Figure 6: Type de Menu - simple article - Sélectionner l'article

Entrez un titre pour le lien «A propos de nous» et assurez-vous que Menu haut est sélectionné dans l'emplacement du menu. Nous pouvons laisser le reste des paramètres avec leurs réglages pour l'instant.

Étape 3 - «A propos de nous» sur le site<>

Si vous chargez maintenant l'interface du site Web par le frontend, vous découvrirez le nouveau lien dans le menu du haut. Cliquez dessus et vous verrez le contenu d'A propos de nous - félicitations pour avoir créé votre première page (Figure 7).

page A propos de nous

Figure 7: page A propos de nous

Étape 4 - téléchargement de l'Image

>Si votre image n'est pas déjà disponible sur Internet, vous devrez la télécharger à partir de votre PC. Voyons un exemple ensemble. Allez dans le Gestionnaire d'article (Contenu → Gestion des articles). Si vous ne trouvez pas votre article, localiser le facilement à l'aide de la boîte de recherche. Sélectionnez le titre de l'article et le formulaire d'édition s'ouvrira. Supprimez l'image liée du texte.

Au-dessous de la fenêtre de l'éditeur, vous trouverez le bouton Image. Ce bouton lance une boîte de dialogue pour télécharger une image. Vous pouvez choisir entre des images existantes ou en télécharger de nouvelles (Figure 8).

Téléchargement d'image

Figure 8: Téléchargement d'image

Une fois que l'image a été insérée dans le texte, la mise en forme peut être modifiée à l'aide de l' icône de l'image dans la barre d'outils de l'éditeur. Cette séparation des fonctions dans Joomla ! a été délibérément choisie parce que vous avez la possibilité d'utiliser différents éditeurs. Le Bouton image Joomla! restera toujours le même, mais l'image dans l'éditeur peut différer.

Attention: Joomla ! utilise les images comme elles sont. Les images ne seront pas redimensionnées !

Pour résoudre ce problème, regardez ce post sur le blog de Brian Teemans: Making Joomla Idiot Proof - Peut être que FBoxBot sera aussi disponible pour Joomla 2.5 quand vous lirez ces lignes.

4 commentaires

Bonjour, Sauf erreur de ma

Par Guest, le 26. mars 2012 - 17:23.

Bonjour,

Sauf erreur de ma part il y a une petite coquille : dans Étape 1 - Création du contenu :
"Dans le volet supérieur, sous le titre, sélectionnez « Non catégorisé » comme catégorie. Cette catégorie a été créée en installant les données d'exemple."

L'auteur du guide du débutant veut dire : Catégorie : Articles exemples et non pas Catégorie : Non catégorisé.

Bonjour, Petite coquille dans

Par Guest, le 26. mars 2012 - 17:52.

Bonjour,

Petite coquille dans la création de l'article :

"Entrez un titre pour le lien «A propos de nous» et s'assurez-vous ..." (assurez-vous)

Merci, c'est modifié

Par tataye, le 28. mars 2012 - 7:54.

Merci, c'est modifié

Pour les catégories : la page

Par tataye, le 28. mars 2012 - 7:57.

Pour les catégories :
la page contact étant une simple page qui n'a pas à être catégorisée, il convient de la mettre dans la catégorie crée spécialement pour cela : non catégorisée.
ce n'est donc pas une erreur de l'auteur.

Publier un nouveau commentaire

  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <br><pre>
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Plus d'informations sur les options de formatage