Faire son site et le publier

Kompozer et CSS

Mon premier site avec Kompozer : Rédaction des pages

Nous ferons en sorte de donner, à peu près, aux quatre pages la même charte graphique.

1 - La page d'accueilpage d'Accueil du site exercice

2 - La page Mon portrait chinoisPage Mon portrait chinois du site exercice

3 - La page Mon chanteur favori

  1. En-tête avec Mise en forme identique Page Mon chanteur favori du site exercice
  2. Trouver sur Internet une photo de notre chanteur favori
    • la redimensionner à 200x300 l'enregistrer dans le dossier images 
    • l'insérer sur la page
    • mettre un texte alternatif
  3. On veut que l'image flotte à gauche
    • Dans Propriétés de l'image / onglet Apparence / Placement du texte à droite
    • Espacement gauche et droite 25 pixels
    • Espacement haut et bas 15 pixels
    • Pas de bordure
  4. A droite de la photo rajouter les titres des chansons. Le sous -titre "Ses plus grands succès" aura le niveau h2, fond jaune.
  5. Faire un lien externe à partir de l'image
    • Cliquer sur l'image pour la sélectionner et faire un lien externe vers le site du chanteur. 
    • Dans la barre d'état faire un clic droit sur la balise <a> du lien de l'image , ce qui ouvre  l'Editeur des propriétés avancées du lien : ajouter target="_blank"
  6. Nettoyeur de balises, Sauvegarder le travail, F6 pour voir le code dans l'éditeur. 
  7. Essayer de repérer dans le code :
    • le lien externe sur l'image, son attribut target
    • l'image, ses dimensions, sa position, son attribut alt, son chemin c'est-à-dire sa source src=.

4 - La page Mes loisirs préférés

  1. En-tête avec Mise en forme identique
  2. Trois sous-titres de niveau 2 suivis de quelques lignes de texte dans chacun des 3 paragraphes
  3. Illustrer chaque paragraphe avec des photos trouvées sur Internet 
    • Les redimensionner
    • Les insérer sur la page
    • Mettre un texte alternatif
    • Espacement gauche et droite 25 px ; haut et bas15 px
    • pas de bordure
    • flottant à gauche du texte
Page Mes loisirs préférés du site exercice

Nettoyeur de balises, Sauvegarder le travail, F6 pour voir le code dans l'éditeur. 

Contrôler si tous les liens fonctionnent en visionnant l'ensemble du site Mon premier site
Il est intéressant de visionner dans 2 navigateurs différents, par exemple  Firefox et IE, car les comportements et les aspects peuvent être  différents d'un navigateur à l'autre. Il y a plusieurs façons de visionner.

N.B. Pour cette prise en main de Kompozer nous avons, pour faire simple, utilisé les outils de la barre d'outil Mise en forme, comme nous aurions procédé dans un traitement de texte.
Or dans dans une page internet il y a 2 choses : le contenu (le html) et la mise en page (le CSS = feuilles de style en cascade).
Dorénavant nous allons apprendre la mise en forme avec une feuille de style. Par conséquent, il est déconseillé d'utiliser les outils de cette barre car elle produit du code difficile à maintenir. Le mieux est donc de masquer cette barre : Affichage / Barres d'outils / décocher Mise en forme 2.

Haut de page
Jos Argaud -10/09/2009 -  Pour m'écrire    Document made with KompoZer   D'après le cours d'Yves Mairesse et avec son consentement