Exercice : Création rapide d'une page Web. Étape Pas à pas en vue par la suite d'être autonome et de pouvoir réaliser seul son site...

  1. Démarrer le logiciel OpenOffice.

  2. Ouvrir un nouveau document HTML. « fichier/nouveau/document HTML)

Ce document sera la page d'accueil de ton site.

  1. Enregistrer ce document sous le nom : « index » dans un dossier que vous nommerez : « essai site » dans (Technologie Colonna) Toutes pages d'accueils de site doit avoir comme nom index.

  2. Saisir le titre suivant en haut de cette page : « Réalisation d'une page web », (centré, Tempus Sans ITC, 40, gras); Résultat

  3. Cliquer sur l'icône « gallery » (voir ci-dessus), cliquer sur « règle ».

  4. Sélectionner la règle suivante (grnrulr3.gif), cliquer droit dessus et faites « ajouter, copie ». La règle s'insère.

  5. Sélectionner la règle et cliquer droit avec la souris. Choisisser un ancrage « comme caractère ». Ce sera impératif pour tous les objets insérés afin d'éviter les déplacements incontrôlées lors de la mise en ligne (sur Internet) de la page.

  6. Positionner le curseur à coté de la règle et centrer la règle à l'aide du bouton de mise en forme d'un texte : « centrer ».

  7. Agrandisser la règle pour qu'elle prenne toute la page. Résultat

Insérer une couleur de fond de page :

  1. Cliquer avec le bouton droit de la souris sur la page : Choisir « page » puis cliquer sur l'onglet « arrière plan ».

  2. Choisir la couleur « gris 30% » puis « OK » Résultat

  3. Taper ensuite le texte suivant : « Voilà maintenant le sommaire de ma première page HTML » (Aligné à gauche, Viner Hand ITC, 16, vert) Résultat

Insérer un sommaire sous forme de tableau :

  1. Positionner votre curseur en dessous du texte que vous venez de saisir.

  2. Cliquer sur « tableau/insérer/tableau ». Dans la fenêtre qui vient de s'ouvrir remplacer le nom de votre tableau par « sommaire ». choisisser 1 ligne et 3 colonnes puis valider.

  3. Sélectionner le tableau, cliquer avec le bouton droit de la souris et choisisser « tableau... ».

  4. En navigant dans les différents onglets choisisser : Alignement « centré », largeur du tableau « 21 cm », largeur des trois colonnes « 7cm », arrière plan « jaune 1 », Couleur de lignes « Marron », Style des lignes « 3,55pt ».

  5. Saisisser maintenant dans les 3 cellules, Page 1, Page 2, Page3. Résultat

Création d'une nouvelle page :

  1. Créer un nouveau document HTML.

  2. Enregistrer cette page dans le dossier « essai site » en lui donnant comme nom « Page 1 »

  3. Recommencer le même opération en créant deux nouvelles pages et en donnant les noms suivants « page 2 puis page 3 ».

Insérer un Hyperlien :

  1. Sélectionner le texte « page 1 » dans le tableau de la page d'accueil (index).

  2. Cliquer sur l'icône « hyperlien » voir ci-dessus.

  3. Choisisser « document » à gauche.

  4. Puis en cliquant sur « ouvrir un document » en face de « chemin », sélectionner dans l'arborescence le document qui s'appelle « page 1 »

  5. Appliquer puis valider.

  6. Recommencer la même opération pour page 2 et page 3 (n'oublier pas de créer deux nouvelles pages). Résultat

Insérer une image, la transformer en vignette et lui ajouter un lien pour la voir en plus grand.

Retour à la page 1 :

  1. Cliquer sur l'icône « à partir d'un fichier ».

  2. Sélectionner dans le dossier « devoir/technologie Colonna » l'image KCM 1010 puis valider. L'image s'insère.

  3. Cliquer avec le bouton droit de la souris sur l'image puis choisisser « image »

  4. En navigant dans les différents onglets choisisser : Dans type : hauteur/largeur « proportionnel », Largeur « 5cm », Ancrage « comme caractère ». Dans hyperlien, sélectionner de nouveau cette image dans l'arborescence « devoir/technologie/KCM 1010 » puis valider. Résultat

Insérer un bouton de retour à la page d'accueil :

  1. Sur cette page 1, cliquer sur l'icône « gallery ». Voir ci dessus.

  2. Choisisser « homepage »

  3. Sélectionner « grnhome.gif » , Cliquer droit et faite « ajouter, copie ». Le bouton s'insère.

  4. Cliquer droit sur le bouton maintenant inséré et définisser un ancrage « comme caractère ».

  5. Aligner maintenant à droite le bouton comme si c'était du texte.

  6. Sélectionner le bouton et ajouter lui un lien vers la page d'accueil. Résultat

C'est terminé, il ne vous reste plus qu'a vous entraîner et à découvrir d'autres fonctions mais cette fois-ci tout seul.

Petit plus pour les plus rapides :

Insérer les « arrière-plans » proposés par openoffice :

Attention, il est important de savoir que si l'on ajoute simplement son arrière plan comme pour les règles ou les différents bouton d'actions, celui-ci n'apparaîtra pas lors de la mise en ligne. Pour remédier à cela il faut « copier / coller » le fichier de l'arrière plan dans le dossier de notre site internet (dans notre exercice: essai site) à partir de la galerie de openoffice.

  1. Ouvrir la page 1 que vous avez créée précédemment.

  2. Cliquer sur l'icône « gallery » et choisir « Arrière-plans », sélectionner « interstices.jpg ».

  3. Cliquer avec le bouton droit de la souris et choisir « ajouter/arrière-plans/page ». L'arrière plan s'insère mais il ne sera pas encore visible lors de la mise en ligne.

  4. Cliquer droit sur la page et choisir « page ».

  5. Cliquer sur l'onglet « arrière-plans ».

  6. Cliquer sur « parcourir », le dossier de openoffice contenant les arrière-plans s'ouvre.

  7. Sélectionner votre arrière plan dans notre cas : « interstices ».

  8. Utiliser la fonction copier/coller afin de coller cet arrière-plan dans votre dossier contenant votre site internet, dans notre cas : « essai site ». Il est nécessaire de naviguer dans l'arborescence de votre ordinateur pour retrouver votre dossier.

  9. Une fois coller dans le dossier « essai site », sélectionner « ouvrir » et vérifier que le chemin d'accès de l'arrière-plan (sous le bouton parcourir) correspond bien au bon dossier, dans notre cas : P/technologie Colonna/essai site. Résultats.