Nous savons que les pages stockent leur contenu visible dans les éléments de contenu de page. Donc la rédaction d'une page passe par l’édition d’éléments de contenu de page!

Il est vraiment facile d'éditer le contenu de page dans TYPO3. Choisissez le module de Page (*1), cliquez sur le titre de page de la page que vous voulez éditer (*2) et dans la vue "de Colonnes" (*3) vous cliquez sur l'icône d'édition (*4) de l'élément de contenu de page que vous voulez changer :

Cela montre cette fenêtre de saisie :

Tout d'abord le champ "Type :" (*1) vous dit le type du contenu de page! Dans ce cas "Texte". Ce pourrait aussi être " Table" (comme vous avez vu plus tôt) ou "Image" ou "Texte avec Image" etc. Voyez vous même! Chaque type d'élément de contenu a une apparence et des champs propres et en insérant des éléments différents vous pouvez réaliser des pages très différentes sur votre site Web.

Le champ Titre (*2) contient le titre et le champ "Texte" (*3) le corps. Sur la page Web cela correspond à :

Essayez de changer la valeur du champ titre et appuyez sur  "Enregistrer et visualiser le document" :

Parce que vous avez utilisé " Enregistrer et visualiser le document " la fenêtre frontale apparaît automatiquement au bout de quelques secondes :

TYPO3 a envoyé le changement au serveur, mis à jour la base de données avec la nouvelle information, effacé le cache de la page et a régénéré la page - le changement est immédiatement mis en ligne et les gens naviguant sur votre site Web voient maintenant le nouveau titre au lieu du vieux! Il est aussi facile que cela de maintenir les pages Web avec TYPO3!

Astuce : une Autre façon d'activer la page d'édition

Au lieu de cliquer sur le module "Page" puis etc il y a aussi un menu "Editer" dans le menu clic qui permet d’éditer une Page :

Astuce : Edition rapide – sauvegarder en un click de souris...

Si vous voulez un accès rapide à vos éléments de contenu de page vous pouvez basculer la vue du module Page à "Edition rapide" au lieu " Colonnes" – ainsi un sélectionnant une page le premier élément de contenu est édité :

La création de nouvelles pages est très facile. Puisque les pages sont toujours organisées dans la hiérarchie de l'arborescence des pages et vous devrez d'abord sélectionner une position pour la page. Bien sûr vous pouvez la changer plus tard si vous le souhaitez.

Créer une nouvelle page en utilisant le module de Page, en mode de vue "Colonnes", cliquer sur "Nouvelle Page" pour démarrer l’assistant de création d’une nouvelle page qui vous aidera à définir la position de la nouvelle page :

Alors un sélecteur de position apparaîtra. Puis vous choisissez la position en cliquant :

Puis la fenêtre pour la création d’une nouvelle page apparaît et vous pouvez entrer un titre pour la page :

Sauvegarder et quitter.

Maintenant l'arborescence devrait être mis à jour :

Et si vous cliquez sur l'icône de la nouvelle page "Topscorer" vous devriez voir que le menu a été automatiquement mis à jour aussi dans le frontal!

Remarquez que la page est référencée par l'id "27" - donc la nouvelle page s’est vu assigner automatiquement le nombre "27" pendant la création.

La page est toujours blanche(vierge) - nous devons créer quelques éléments de contenu de page!

La création de contenu

Dans le module Page, cliquez sur le titre de page de "Topscorer" dans l'arborescence des Pages et ensuite le bouton "Créer un contenu dans la page" :

Immédiatement vous verrez le formulaire suivant vous permettant de choisir un type de contenu de page - comme indiqué précédemment des types de contenus différents permettent de créer des contenus différents dans les pages Web.

Création dans contenu "Text with image below" :

Nous obtenons cette fenêtre. Saisissez du texte et choisissez une image à partir votre disque dur (trouvez une petite image jpeg) :

Appuyez sur le bouton  "Enregistrer document". L'image est téléchargée vers le serveur et attachée au nouveau contenu de page. Cela devrait ressembler à ceci :

Sur le site Web cela devrait ressembler à ceci :

Insertion d'un autre élément de contenu

De retour dans le module Page on voit clairement le nouvel élément de contenu :

Remarque : La vignette manque ? Si vous ne voyez pas la petite l'image ici ; TYPO3 n'est  probablement pas configuré correctement pour utiliser ImageMagick. C'est le cas le plus probable si vous n'avez pas utilisé le Progiciel d'Installation Windows (voir la section installation de ce didacticiel). Référez-vous s'il vous plaît au document d' information on installation sur typo3.org et les archives de la mailing liste installation. Vous pouvez poursuivre ce didacticiel sans corriger ce problème.

Cliquez sur le bouton "Créer un nouveau contenu" pour créer un autre contenu de type liste à puces après que celui-ci :

Cette fois ci nous devons également définir où placer ce nouveau contenu ? Avant ou après le contenu existant ?

Nous l'insérons après le premier. Maintenant il y a seulement le contenu de la liste à saisir :

Remarquez que le "Type" a été prédéfini à "Liste à puces" – cela aurait pu être choisi manuellement. Et vous pouvez aussi le changer plus tard! Si vous voulez connaître les différents types de contenus disponibles utilisez l’icône "?"

Maintenant, nous avons une page a deux éléments de contenu, le type "Texte avec Image" et un type de "Liste à puces" - dans cet ordre :

Dans le module Page cela ressemble à :

Gestion d'éléments de contenu

Nous avons utilisé l'assistant de création de contenu pour créer de nouveaux contenus. Cependant les assistants dans TYPO3 font juste une tâche rapide et simple en validant directement les options importantes. Mais toutes les fonctions peuvent être choisies, réglées et contrôlées manuellement. Vous les maîtriserez en travaillant avec TYPO3. Prenez votre temps pour explorer les boutons et les options. Il y a beaucoup de possibilités et vous ne les maîtriserez que si vous vous prenez du temps pour jouer avec!

Voici quelques exemples de fonctions de l'interface que vous pouvez essayer :

Créer un nouvel élément de contenu de page après celui-ci et réalisé directement avec ce bouton (*1). Vous arriverez par défaut à un élément de type "Texte" – changer ce type pour celui que vous souhaitez ajouter. Le bouton déplacer vers le bas (*2) peut être utilisé pour changer l'ordre entre beaucoup d'éléments dans la même page/colonne. Vous pouvez utiliser les fonctions "Copie", "Couper" et "Coller après" du menu de clic (*8) - ils vous permettent même de faire des copies et des déplacements à partir d’autres pages! Le bouton (*3) de"Masquer/Afficher"est une façon rapide de changer le statut de visibilité du contenu et la poubelle (*4) vous permet de supprimer totalement l'élément (en réalité il peut être restauré si vous le supprimé par accident).

Si vous désirez éditer le contenu seul de l'élément contenu, vous pouvez utiliser le bouton "Editer dans l'éditeur de texte avancé" le bouton (*5). Cela montera une fenêtre "plein écran" pour éditer le texte - agréable s'il y a beaucoup de texte! Finalement vous pouvez éditer non seulement un élément de contenu de page à la fois, mais deux (ou plus) en cliquant sur l'icône "Editer la colonne" (*7).

Le déplacement d'une page est aussi très facile avec l'assistant disponible dans le module Page. Déplaçons la page "Topscorer" de sa position actuelle après "Sitemap" dans la section "Home" :

Vous verrez une partie de l'arborescence des pages, en cliquant sur la page supérieure vous montez d’un niveau :

Et par un simple clic, vous avez déplacé la page à sa nouvelle position :

L'arborescence des pages est immédiatement mise à jour :

L'utilisation du copier/coller pour déplacer une page

L'assistant "Déplacer la page" est un outil intuitif pour les débutants. Cependant quand vous voulez déplacer des éléments - incluant des pages - dans TYPO3 vous devriez utiliser le presse-papiers interne. Il travaille à peu près comme vous en avez l’habitude sous Windows : Vous sélectionnez un document avec le bouton droit, choisissez "Couper", sélectionnez le dossier où vous voulez l'insérer avec le bouton droit et utilisez "Coller". Le même principe est mis en oeuvre dans TYPO3. Utilisons cela pour déplacer la page vers sa place d’origine :

"Coupez" la page :

"Coller après" la page "Report results" :

Répondre "Oui" :

Voilà! La page est à nouveau à son emplacement d’origine :

Remarque : des concepts cohérents!

Les mêmes principes de copier/couper/coller peuvent être utilisés avec non seulement des pages, mais aussi des éléments de contenu de page - en fait n'importe quel élément de base de données ou fichier que TYPO3 gère est soumis à cette fonction! C'est un exemple qui montre que TYPO3 utilise les mêmes concepts partout dans le système - ainsi une fois que vous avez appris une fonction, beaucoup d'autres fonctions vous semblent évidentes! .

Une fonction disponible pour beaucoup d'éléments – en particulier les pages et les éléments de contenu – utilisent les champs de contrôle de publication ou les paramètres de visibilité. Ils ressemblent à ceci pour les pages :

Pour les éléments de contenu ils ont cette forme :

Masquage d'une page

Cochez "Cacher page" :

L'icône de page devient sombre et il y a une petite croix rouge qui apparaît – La page est maintenant cachée!

Cela signifie que vous ne pouvez pas voir la page dans le frontal :

( il est très important que vous choisissez "Visualiser" pour la page "Last week"! )

Pas de page "This week" visible !

Cependant si vous allez directement à la page "This week" vous la verrez quand même :

... en effet quand vous êtes connectés comme un utilisateur backend les pages cachées peuvent être vues - comme indiqué avec la petite boîte dans le fond de la page :

Mais ceci n’est  visible que par vous. Personne ne peut voir la page avant que vous ne la rendiez visible à nouveau!

Programmation de l’affichage des pages et des éléments contenu

Le masquage des pages et des éléments de contenu est probablement le champs le plus utilisé de la visibilité. Il est si commun qu'il a son propre champs dans les menus cliquable :

Mais vous pouvez aussi déterminer quand une page doit être publiée – à quelle date! Par exemple saisissez "d+10" dans le champ "Lancement" :

Automatiquement la date est configurée à la date actuelle plus 10 jours! Si vous sauvegardez la page et tenez la souris sur l'icône vous pouvez aussi voir cette programmation :

Cette page n'est pas visible actuellement et sera automatiquement visible le 11 avril l'année 2003, 10 jours plus tard! C'est aussi simple que ça de programmer des publications. Les mêmes principes sont valables pour le champ "Arrêt" bien sûr, et pour le contenu, les news, des éléments du livre d'or. Même principe – pour différents éléments - facile à comprendre.

Quand vous travaillez avec le corps du texte de vos pages vous pouvez utiliser les mêmes principes de formatage que ceux que vous utilisés dans votre traitement de texte. Si vous utilisez TYPO3 avec Microsoft Internet Explorer vous avez l'accès à un Éditeur de texte Riche (RTE) pour le corps du texte. "Le texte Riche" signifie que vous pouvez appliquer le formatage au simple texte.

Essayez d'éditer le  corps du texte de la nouvelle page de "Topscorer" :

Sélectionnez le texte "my first" et cliquez sur "B" (Gras) pour faire le mettre en gras :

Par une utilisation les boutons "B", "I", "U" et "Justifié centré" vous pouvez facilement réaliser le paragraphe suivant :

Appuyez sur le bouton "Enregistrer et visualiser le document" - vous verrez ceci dans le frontal :

Création d'une liste à puces

Vous pouvez créer une liste à puces aussi facilement. Cliquez juste sur l’icône "liste" et entrez quelques lignes :

Appuyez sur le bouton "Enregistrer et visualiser le document" - vous verrez ceci dans le frontal :

Considérations "de contenu riche"

Comme vous pouvez le voir - cela vous donne deux choix : a) créer des listes à puces "intégrées" dans les champs de corps du texte ou b)  créer des éléments de contenu séparés ? Vous pouvez mélanger les deux approches. Personnellement je préfère créer la liste à puces à l'intérieur du corps du texte avec le RTE - mais si quelqu'un sans Microsoft Internet Explorer va éditer la liste ça ne va pas être évident! Et vous pourriez avoir "des raisons politiques" pour ne pas insérer des listes à puces dans le corps du texte (pour garder le corps du texte "propre" par exemple).

Le RTE plus en détail

L'éditeur de texte Riche 'RTE) peut être très facile à utiliser, mais il pose aussi beaucoup de défis techniques quand vous l'examinez en détails. Il y a le manuel  extensive documentation available for the RTE. Lisez aussi in-depth about the RTE et comment le configurer.

Les liens hypertextes sont la colle de l’Internet. Dans TYPO3 vous avez déjà des liens créés automatiquement,  puisque la  structure hiérarchique des pages a créé automatiquement le menu dans le cadre de gauche.

Mais vous pourriez  vouloir créer des liens vers un autre morceau de texte d'une autre page, un fichier, un autre site Web ou une adresse électronique, n’est-ce pas ?

C'est très facile si vous utilisez l'Éditeur de Texte Riche (RTE) :

Sélectionnez simplement le texte et appuyez sur l’icône "Insérer un lien" :

Cliquez alors sur le titre de la page Guestbook :

... et le lien est créé :

Dans le frontal cela produit un lien comme vous vous y attendiez. Cliquez et vous êtes redirigé vers la page avec le livre d'or!

Dans les coulisses

Avant je soulevais le problème d’utilisation de RTE si vous voulez avoir un aperçu de ce qu’est l’édition basique sans RTE. Vous pouvez simuler cela en éditant le contenu entier d'un élément  et en choisissant l’option "Disable Rich Text Editor (RTE) dans le bas de la fenêtre :

Le champ "Texte" ressemble maintenant à n'importe quel champ de forme ordinaire (en html) :

Tout d'abord vous pouvez voir que le lien à la page "Guestbook" a été fait par un tag spécifique à TYPO3, <link>, combiné avec l’id de la page. Cela permet aux personnes ne disposant pas de RTE de créer des liens! C'est assez simple pour être écrit à la main. (Note : le lien interne "<link>" est converti en lien HTML standard "<a>" quand la page est générée).

Vous pouvez aussi voir que la liste à puces a été convertie en une série de lignes encapsulées dans <typolist> - un autre tag spécifique à TYPO3. Ceux-ci sont aussi convertis en liste à puces réelles par le moteur  quand la page est générée plus tard.

La toute première ligne contient le marqueur HTML régulier pour le gras, l’italique et le souligé plus l'alignement de centre du paragraphe entier.

Autres sortes de liens ?

Vous pouvez créer des liens vers des fichiers locaux et des pages Web externes – ou des liens vers un contenu spécifique d’une autre page (voir la page "Last week" pour un exemple et voyez vous même!).

Finalement des liens pour envoyer un courrier électronique peuvent aussi être créés

Maintenant, puisque nous avons mis hors de service l'Éditeur de texte Riche pourquoi ne pas utiliser l'icône de l'Assistant pour la rédaction en plein écran :

Saisissez maintenant un nouvel élément dans une liste à puces, sélectionnez-le et appuyez le bouton "Insérer un lien". Choisissez "alors E-mail" dans le menu et entrez votre adresse électronique :

On devrait comme s'attendre au résultat suivant :

 - un lien qui ouvre le logiciel client de messagerie prêt à écrire un nouvel e-mail :

Comme vous savez déjà il existe un grand nombre d'éléments de contenu de page disponibles et les combiner est la clef pour créer des pages Web diverses et variées!

En général - plus un élément se situe en bas de la liste moins il est utilisé et compliqué à mettre en œuvre. L'élément le plus utilisé est le Texte ou le Texte avec image.

Assistants

Vous remarquez que quelques éléments utilisent un petit assistant. Essayez par exemple d'éditer une liste de résultat de la page "This week" :

Le champ "Texte" qui contient normalement le corps du texte contient maintenant le contenu de la table apparemment organisé d'une certaine façon :

Le tableau est construit en interprétant chaque ligne du champ " Texte" comme une ligne du tableau. Alors la ligne verticale, "|", est utilisée pour séparer les colonnes les une des autres. C'est le premier niveau et il pourrait être maintenu à la main. Mais "Table wizard" est l'outil à utiliser. Cela montera les champs et les boutons pour l'ajout, la suppression et déplacer le contenu du tableau.

Par exemple pour ajouter une nouvelle ligne :

Ajoutez alors le contenu de la ligne :

Sauvegardez le contenu de l'assistant du Tableau et dans le champ Texte le contenu ressemble à ceci :

Quand la page Web dans le frontal est régénérée nous voyons cela :

Si vous vous demandez comment la couleur de fond peut être changée - continuez de lire!

Options secondaires - "Palettes"

Depuis le début TYPO3 s'en est tenu au concept de champs primaires et secondaires. Les fenêtres de rédaction dans TYPO3 contiennent beaucoup de champs et d’autres peuvent y être ajoutés. Mais avec trop de champs visibles il n’est plus évident de travailler pour l'utilisateur moyen. En particulier si vous êtes un débutant et que vous avez beaucoup de nouvelles choses à apprendre.

Le concept de champs primaires et secondaires signifie que normalement vous ne voyez que les champs les plus importants et généralement utilisés (primaires). Et les options plus détaillées sont cachées dans les champs secondaires que l'on montre à la demande.

Considérez cette fenêtre :

Trois champs visibles - vue d'ensemble facile.

Mais si vous cliquez sur une des icônes à côté des champs vous trouverez les options secondaires montrées dans la palette (le cadre supérieur) :

C'est pratique - nous avons beaucoup d'options et de détails mais ils sont masqués jusqu'à ce que nous en ayons besoin.

Par contre quand vous avez besoin d'une de ces options secondaires et que vous ne pouvez pas vous souvenir "derrière quelle icône" il est (ou si vous utilisez le champ régulièrement) - alors il pourrait être compliqué ou long de les trouver!

C'est pourquoi vous pouvez activer l'option "Show secondary options (palettes)" dans le bas de toutes les fenêtres d'édition :

Ceci donne une grande fenêtre avec beaucoup de champs. Mais  toutes les options sont disponibles immédiatement :

Remarquez que chaque rangée d'options correspond exactement au contenu de la palette dans le cadre supérieur si vous aviez cliqué sur l’icône "More options…"  avant!

Ainsi comment changeons-nous la couleur de fond du tableau ? Dans les options secondaires pour le sélecteur "Layout" :

( l'étiquette "Color 2" se réfère à la couleur avec ce nom configuré dans le modèle du site Web.)

Le point final  concernant la rédaction de pages est la fonction d'édition frontale. Je suis désolé qu'il y ait tant de façons de faire la même chose. Avec le temps vous apprécierez cela en découvrant ce qui  est le plus approprié à votre façon de travailler.

Mais la rédaction depuis le frontal n'est pas juste un nouveau bouton, cela pourrait être une véritable révolution dans la façon  que vous aurez de travailler, vous et vos éditeurs de contenu,avec le système.

Vous avez probablement remarqué les petites icônes d'édition qui sont apparus sur la page Web :

Essayez de cliquer sur l'un d'entre eux :

Immédiatement vous êtes redirigés vers une fenêtre où seulement le champ titre et d'autres informations appropriées peuvent être éditées de suite!

Essayez de changer le texte du titre et appuyez sur "Sauvegarder et fermer le document" - vous êtes redirigé vers la page Web et le changement est immédiatement effectué :

La rédaction depuis le frontal est très intuitive, parfaite pour corriger de petites erreurs et faire de petits rajustements, excellent pour les débutants de votre équipe etc. C'est la méthode de rédaction contextuelle - la puissance brute à votre portée.

Donc tout le monde peut éditer mes pages ?

Non, seulement quand vous êtes identifiés et connectés dans le backend. Autrement les icônes sont cachées - et si quelqu'un pouvait cliquer dessus, il serait immédiatement rejeté. Essayez vous-même - fermez votre session dans le backend :

Si vous avez toujours une page frontale avec des icônes, essayez alors de cliquer sur un stylo- vous verrez apparaître cet écran au lieu de la fenêtre d'édition :

... et quand vous régénérez la page Web vous pouvez voir que les icônes ne sont plus visibles :

Reconnectez vous à nouveau à http://localhost/quickstart/typo3/ (username = "admin", mot de passe = "password")

Plus d'information

L’édition depuis le frontal est aussi décrite plus en détail sur cette page - rédaction Frontale.