Pages et menus. Mise en garde

Transcription

1 1 Pages et menus Mise en garde Les CMS s adressent de plus en plus à des WEB designers. Les éditeurs de CMS considèrent implicitement que vous avez quelques connaissances en HTML ou CSS. Vous serez d emblée amenés à résoudre des problèmes d intégration dès l hors que vous envisager de manager un site WEB, si vous êtes non initié ce sera l occasion d acquérir des connaissances minimales dans ce domaine. N éditez jamais votre site web sur deux postes simultanément, ni dans deux onglets différents simultanément sur le même poste sous peine d écraser des données et même pire, d écraser vos propres données. N éditez jamais la même page depuis deux connexions ou plus différentes vous risquez de détruire le travail d une autre personne.

2 2 Pages et menus Cette présentation décrit la création des pages et des menus. Elles ne traite pas spécifiquement de l édition et de la mise en forme du contenu et des possibilités du TinyMCE editor. L édition du texte semble ici suffisamment intuitive pour se passer d explication. D ailleurs les possibilités d édition sont détaillées dans le site de démarrage que nous vous avons installé lors de votre abonnement. Vous y trouverez de plus des codes sources notamment concernant l usage des Shortcodes.

3 3 Créer votre page d accueil Accéder au tableau de bord. Cliquer Pages / Ajouter Définir le titre de la page et cliquer Publier Procéder de façon identique pour créer d autres pages. Vous pouvez éditer le contenu des pages en saisissant du texte mais également en copier/coller en faisant attention que l onglet visuel soit sélectionné.

4 4 Définir ma page de démarrage Je veux définir ma page d accueil comme page de démarrage. Apparence / Personnaliser / Page d accueil statique Sélectionner l option Une page statique Sélectionner votre page d accueil dans la liste des pages. Ici : EDSWPI est la page affichée au démarrage du site.

5 5 Modèle de page Le thème SYDNEY propose différents page template ou modèles de page. Pour un site web classique le template le mieux adapté est un modèle pleine page. WordPress étant par défaut un blog le Modèle par défaut est celui d un blog et ne vous convient probablement pas. Souhaitant que notre contenu s affiche en pleine largeur sur une seule colonne, dans la liste Modèles, sélectionnez Full Width

6 6 Publier Vous pouvez afficher un aperçu avant enregistrement de vos modifications, cliquez sur Aperçu Cliquer sur Publier pour enregistrer définitivement.

7 7 Créer un menu Pour créer/éditer un menu allez à Tableau de bord / Apparence / Menus Nous conserverons intact le menu existant. Cliquez sur le lien Créez un nouveau menu donnez lui un nom et cliquez sur Créer le menu

8 8 Editer le menu Dans la liste de gauche sélectionner les page à ajouter à votre menu. Cliquez ajouter au menu. Les boutons de liens correspondant à vos pages seront ajoutés à la fin du menu. Il vous reste à les placer au endroits attendus.

9 9 Organiser le menu Positionnez le curseur de la souris pour faire apparaitre le curseur de déplacement. Cliquez sur l élément de menu pour le déplacer. Cochez la case Primary menu pour faire de ce menu votre menu principal.

10 10 Imbrication de menus / sous-menus Vous pouvez imbriquer les boutons de menu les uns dans les autres en les décalant vers la droite pour créer des sous-menus. N oubliez pas d enregistrer votre menu.

11 11 Liens personnalisés / Options d écran Les options d écrans varient avec le type d édition. Dans la page d édition de menu vous pouvez filtrer le contenu d administration à afficher. Ne voir que les pages et les liens personnalisés par exemple. Ainsi vous vous concentrez sur l essentiel. Cochez Cible du lien si vous voulez voir la case à cocher Ouvrir le lien dans un nouvel onglet dans votre lien personnalisé vers une adresse HTTP.

12 12 Catégories Le thème Sydney proposes cinq catégories d éléments basées sur le modèle entreprise. Cela peut s avérer adapter dans le contexte d une équipe de recherche, ou une équipe de services informatiques. Services Employees Les membres de l équipes Testimonials Vos bonnes Presse, vos réussites Clients Vos utilisateurs Projets Vos objectifs Timeline Events Les jalons de votre parcours Cela permet d uniformiser la présentation de chaque élément d une même catégorie.

13 13 Catégories Vous pouvez ajouter des éléments de toutes catégories dans vos menu. C est aussi facile de créer des éléments dans ces catégories que de créer des pages, s agissant de renseigner un formulaire.

14 14 Liens personnalisés et catégories Vous pouvez créer un lien personnalisé sans Adresse URL qui servira simplement de titre de menu et contiendra une liste de liens dynamiques. Nommez le Personnel, Adresse WEB = # Vous l ajoutez au menu Vous y intégrez les éléments de la catégorie Employees Vous enregistrez

15 15 Afficher le résultat Je veux voir la page d accueil du site, la page en cours d édition, avoir un aperçu des modifications. Clique droit afficher dans un nouvel onglet, Pré-visualiser les modifications Il est conseillé de tester pas à pas vos modifications et d utiliser la prévisualisation.

16 16 Les signets On peut insérer des signets au niveau des titres ou paragraphes principaux d une page dans le but de créer un menu de navigation constitué de liens pointant vers ces repères. L illustration de gauche montre comment insérer une ancre ou signet dans la page. Positionner le curseur dans la page au début de la ligne concernée. Cliquer sur l icone Ancre, affecter un Nom et cliquer OK. L URL pointant vers le signet se compose de l adresse de la page, du symbole # et du nom du signet. + # + le_nom_du_signet

17 17 Les signets (suite) On peut créer un signet en éditant la page en mode Texte. Ça ne fonctionne que sur les éléments HTML <h2>bienvenu sur mon site</h2> Il faut ajouter un id à l élément HTML H2 <h2 id="bienvenu">bienvenu sur mon site</h2> Il faudra que votre lien pointe le signet #bienvenu de votre page. Il reste à créer votre menu avec les liens.

18 18 FIN FIN de cette seconde partie. Vous savez créer les éléments principaux de votre site que sont les pages et les menus. Vous pouvez passer à la section suivante : Les formulaires