Post on 03-Apr-2015
Josiane Ducournau CDDP Portail CDI juin 2007
Gérer un site avec Kompozer
Josiane Ducournau CDDP Portail CDI juin 2007
Organisation, plan de travail… …
Création de pages Tout les fichiers, dossiers, images auront des
noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères spéciaux, ni accents (c’est impératif !)
Le fichier de la page d’accueil devra s’appeler index et être placé à la racine du répertoire
Josiane Ducournau CDDP Portail CDI juin 2007
Organiser le travail
Préparer au préalable les textes, images. Créer un dossier (mon site, par exemple) sur
le poste en local dans lequel mettre les pages. Dans ce dossier, créer un dossier image (très conseillé)
Penser à donner un titre à chacune des pages ex. orientation (utile pour un meilleur référencement)
Josiane Ducournau CDDP Portail CDI juin 2007
barre d'état
corps du document
Gestionnaire de site
barre de miseen forme du texte
onglet d'affichag
e
La fenêtre de travail
Josiane Ducournau CDDP Portail CDI juin 2007
La barre d'outils de composition
Gérerles
documents
Envoyer le document
sur le site distant
Voir le document dans le navigateur(s'il est enregistré dans un site)
Insérer des objets
Imprimer le
document
Outil de correctionorthographique
Josiane Ducournau CDDP Portail CDI juin 2007
Le gestionnaire de site de Kompozer
Sert à gérer le site « en local » et « en distant »
Sert à publier le site
Josiane Ducournau CDDP Portail CDI juin 2007
Gestionnaire de site Kompozer
Accessible via la touche F9
Pour p
Accéder au paramétrage
Josiane Ducournau CDDP Portail CDI juin 2007
Gestionnaire de site Kompozer
Définition d'un site local :il suffit de choisir le répertoire racine (Choisir un dossier que l’aura créé au préalable, ex. dossier Monsite sur le bureau)
1
2
3
Josiane Ducournau CDDP Portail CDI juin 2007
Gestionnaire de site Kompozer
Pour un site distant (c.a.d. en ligne, sur le serveur) on dispose :
D’une adresse ftp ex. cdidupont.free.fr D’une adresse web ou url exp.
http://www.monsitedupont.fr D’un login et d’un mot de passe ftp
Définition d'un site distant
Josiane Ducournau CDDP Portail CDI juin 2007
Gestionnaire de site Kompozer
Définition d'un site distant
Josiane Ducournau CDDP Portail CDI juin 2007
opérations sur les répertoires et fichiers
Josiane Ducournau CDDP Portail CDI juin 2007
Gestionnaire de site Kompozer
Pour publier …
Josiane Ducournau CDDP Portail CDI juin 2007
Paramétrages essentielsdu logiciel
Un peu de technique….
Josiane Ducournau CDDP Portail CDI juin 2007
Les propriétés de la page
(Outils – Préférences)
choiximportant
pour reformater
un documentcréé avec un autre logiciel
(Word, …)
Josiane Ducournau CDDP Portail CDI juin 2007
Les propriétés de la page
Choix de la police pourl'affichage, en mode Normal
ou Aperçu
Ces choix n’influencent pas le résultat final (les pages crées) mais leur apparence
Josiane Ducournau CDDP Portail CDI juin 2007
Les propriétés de la page
Paramètrespar défaut
des nouvelles
pagescrées
Josiane Ducournau CDDP Portail CDI juin 2007
Les différents modes d'affichageMode Normal : pour éditer les pages
Josiane Ducournau CDDP Portail CDI juin 2007
Les différents modes d'affichage
Mode Aperçu : pour voir le résultat de la mise en forme… mais le plus simple est de visualiser le résultat sous un navigateur : bouton
Josiane Ducournau CDDP Portail CDI juin 2007
Les différents modes d'affichage
Mode Source : pour voir tout le code
Josiane Ducournau CDDP Portail CDI juin 2007
Les différents modes d'affichage
Mode Balises HTML : pour voir les balises principales
Josiane Ducournau CDDP Portail CDI juin 2007
Créer une page/ Menu fichier
pour publier la page sur le site distant
Créer une page
Josiane Ducournau CDDP Portail CDI juin 2007
La mise en forme du texte
le menu Format permet de définir les propriétés du texte :
Police (Arial, …) Taille (1,…,7,…) Style (souligné, …) Couleur Direction de l'écriture Suppression des styles, des liens, des
ancres Paragraphes (P, H1, …) Listes (3 types) Indentation- Alignement (centré, …)
…
Josiane Ducournau CDDP Portail CDI juin 2007
Les barres de mise en forme du texte permettent d'accéder aux principales propriétés du texte
style de paragraphe
policede
caractère
couleur du texte
couleur en arrière-plan des paragraphes *
diminuer,augmenter
la taille du texte
gras,italique,souligné
listes
alignements de paragraphe
retraits de paragraphe
La mise en forme du texte
couleur de surlignement du texte
Josiane Ducournau CDDP Portail CDI juin 2007
La mise en forme des pages
Couleur d'arrière-plan, couleur de texte par défaut … :menu Format – Couleurs et fond de page
• Pour insérer un paragraphes( balise <P>) :utiliser la touche Entrée en mode paragraphe
• Pour insérer un saut de ligne (balise <BR>), utiliser la touche Entrée en mode corps de texte
• Création d'en-têtes : avec le menu Format - Paragraphe ou la barre de mise en forme du texte
• Alignement des différents éléments :boutons de la barre d'outils
Josiane Ducournau CDDP Portail CDI juin 2007
• Pour mettre du texte en retrait : menu Format – Augmenter / Diminuer le retrait ou boutons
• Lettres accentuées de tous types et symboles spéciaux : menu Insertion – Caractères et symboles
Josiane Ducournau CDDP Portail CDI juin 2007
Les barres horizontales :
• Pour créer une barre horizontale :menu Insertion – Ligne horizontale
• Double clic sur la lignepour en définirles propriétés
Josiane Ducournau CDDP Portail CDI juin 2007
Les listes
Création de listes numérotées et de listes à puces :
Texte – Liste ou boutons
Création de listes de définitions :saisir alternativement le terme à définir et la définition,
séparés par des retours à la ligne (Entrée). Retraits et mise en forme sont automatiquement réalisés en sélectionnant les termes ou définitions et en cliquant sur Format – Liste – Terme ou Définition.
Josiane Ducournau CDDP Portail CDI juin 2007
Exercice : prise en main du logiciel et mise en forme du texte
Créer/organiser les dossiers sur votre ordinateur, paramétrer le gestionnaire de site
Créer une première page, enregistrez-la, donnez un titre à votre page (menu Format/titre et propriétés de la page
Testez la mise en forme du texte : paragraphes, sauts de ligne, listes, titres, gras, retrait, etc…
Josiane Ducournau CDDP Portail CDI juin 2007
Les liens
Insertion d'un lien :
- Sélectionner le texte ou l'image déclencheur
- Bouton ou menu Insertion – Lien
Ouvrir le lien dans une nouvelle fenêtre
Lien
Josiane Ducournau CDDP Portail CDI juin 2007
Autres liens : les ancres
Insertion d'une ancre nommée (pour faire, après, un lien vers un endroit précis de la page) : bouton ou menu Insertion – Ancre.
Insertion d'un lien vers cette ancre :- créer un lien - ajouter # suivi du nom de l'ancre (cas d’un lien interne à la
page)- ajouter nom de la page # suivi du nom de l'ancre (cas d’un lien vers une ancre dans une autre page)
Josiane Ducournau CDDP Portail CDI juin 2007
Exercice sur les liens
Créer plusieurs pages. Avoir une page nommée index (homepage) et d’autres pages, faire des liens depuis la page index jusqu’aux autres pages, puis faire les liens retour.
Insérer une ancre sur une page A et faire un lien interne sur cette page A jusqu’à l’ancre. Puis, faire un lien depuis une page B jusqu’à l’ancre sur la page A.
Josiane Ducournau CDDP Portail CDI juin 2007
Images
Attention au poids des images !
Utilitaires gratuits (xnview, irfanview, pour convertir les images et réduire le poids)
Josiane Ducournau CDDP Portail CDI juin 2007
Les images
D’abord, placez les images (gif, jpg, png) dans le dossier image
Insertion d'une image : menu Insertion – Image ou bouton de la barre d'outils
Propriétés de l'image (Attributs de la balise IMG) : définis dans l'Inspecteur de propriétés, à l'insertion de l'image ou par double clic sur l'image.
Josiane Ducournau CDDP Portail CDI juin 2007
Les imagesL'Inspecteur de propriétés des images :
Source de l'image (SRC)
Texte alternatif (ALT)
Josiane Ducournau CDDP Portail CDI juin 2007
Les imagesL'Inspecteur de propriétés des images :
Largeur(width)
Hauteur (height)
Josiane Ducournau CDDP Portail CDI juin 2007
Les imagesL'Inspecteur de propriétés des images :
HSPACEVSPACEBORDER
ALIGN
Josiane Ducournau CDDP Portail CDI juin 2007
Les imagesL'Inspecteur de propriétés des images :
Lien sur l'image (A HREF)
autrespropriétés
Josiane Ducournau CDDP Portail CDI juin 2007
Exercice sur les images
Placez des images dans le dossier images. Insérez ces images dans les pages. Testez les
propriétés des images : bordure, positions, image cliquable
Josiane Ducournau CDDP Portail CDI juin 2007
Les tableaux
Insertion d'un tableau :menu Tableau – Insérer - Tableau
ou bouton
Josiane Ducournau CDDP Portail CDI juin 2007
Les tableaux
Insertion d'un tableau :
menu Tableau – Insérer - Tableau
ou bouton
Josiane Ducournau CDDP Portail CDI juin 2007
Les tableaux
d'autresattributsde miseen forme…
Josiane Ducournau CDDP Portail CDI juin 2007
Les tableaux
Par défaut, toutes les cellules du tableau ont la même taille et la taille des cellules s'adapte automatiquement au contenu
Pour modifier la taille des cellules, il suffit de déplacer les délimiteurs dans les règles horizontale et verticale :
Josiane Ducournau CDDP Portail CDI juin 2007
Les tableaux Les attributs du tableau peuvent être modifiés
à tout moment par double-clic :
Josiane Ducournau CDDP Portail CDI juin 2007
Les tableaux Par défaut, toutes les cellules du tableau ont
la même taille et la taille des cellules s'adapte automatiquement au contenu
Pour modifier la taille des cellules, il suffit de déplacer les délimiteurs dans les règles horizontale et verticale :
Josiane Ducournau CDDP Portail CDI juin 2007
Exercice sur les tableaux
Insérez un tableau pour présenter des données tabulaires
Insérez un tableau servant à la mise en forme de la page
Josiane Ducournau CDDP Portail CDI juin 2007
Utiliser les modèles
Qu'est ce qu'un modèle ?
Un modèle est un document qui mémorise une mise en forme, pour pouvoir la reproduire dans de nombreuses autres pages.
Une fois la mise en forme du modèle conçue, les autres pages sont créées à partir de ce modèle.
La mise à jour du modèle affecte toutes les pages où il est utilisé.
La page modèle n'est pas modifiable ; il faut y insérer les zones éditables dans lesquelles le contenu variable sera inséré.
Josiane Ducournau CDDP Portail CDI juin 2007
Utiliser les modèles
A partir d'un document HTML existant :
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Fichier – Enregistrer sous – Type : Modèles HTMLOU copier-coller le code source dans la nouvelle page
Utiliser un modèle Fichier – Nouveau – Nouveau document utilisant un modèle. Sélectionner le modèle et valider (OK)
Attention : Le chemin vers le modèle est le chemin absolu
mais ce n'est pas grave, il n'est pas nécessaire de mettre le modèle sur le serveur !!
Remarques :
- Il n'est pas encore possible de mettre à jour les fichiers à partir du fichier modèle
- Parfois, il est possible de modifier des zones prévues comme non éditables.
à revoir …
Josiane Ducournau CDDP Portail CDI juin 2007
Ajouter une table des matières à une page Web
1. Utiliser les titres pour libeller les différents niveaux de sections puis enregistrer
2. Cliquer sur Insertion > Table des matières et choisissez Insérer. La fenêtre Table des matières apparaîtra.
3. Sélectionner les niveaux de titres utilisés pour les différentes sections
4. Cliquer sur OK pour construire la table des matières.
Josiane Ducournau CDDP Portail CDI juin 2007
Mettre à jour ou supprimer une table des matières
Cliquer sur Insertion puis Table des matières et choisir « mettre à jour ». La table des matières sera mise à jour pour afficher les nouvelles entrées.
Pour supprimer toute la table des matières, cliquer sur Insertion, puis Table des matières et choisir Supprimer.
Josiane Ducournau CDDP Portail CDI juin 2007
d'après le diaporama Gérer un site avec Nvu 1.0http://www.nvu.com d'Isabelle Motte
Disponible sous Licence Creative Commons BY-NC-SA disponible sur : www.framasoft.net/article3200.html