CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES...

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

A L'AIDE DU LOGICIEL LIBRE OFFICE

Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte graphique des interfaces est un peu différente dans chacun d'eux), libres de droits, téléchargeables gratuitement sur Internet (traitement de texte dans Writer – avec pages html dans Writer/Web, tableur dans Calc, création de formules dans Math, outil de présentation dans Impress, création de dessins dans Draw, base de données dans Base).

Writer/Web est un éditeur HTML - tel que Dreamweaver, FrontPage, NVU, composeur de Mozilla ou de Netscape. Il permet de fabriquer des pages web sans avoir à saisir directement les codes du langage HTML. Son interface ressemble à celle d'un traitement de texte. Vous allez réaliser un petit site, dont vous pouvez voir la page d'accueil ci-après.

2

Une recherche sur Internet a permis de collecter des informations sur le sujet et de choisir les images qui seront insérées dans les pages : un fichier texte "ecriture.doc" et des images "---.gif" et "---.jpg" sont sauvegardés dans le dossier "accompagnement_siteweb".

Créer le dossier qui contiendra le site

Créez sur le bureau un nouveau dossier que vous appellerez par exemple "www.ecriture.fr". Créez à l'intérieur de ce dossier un dossier "images" et copiez-y les images du dossier "accompagnement_siteweb".

Nota très important pour une mise en ligne ultérieure de site : toutes les pages et images d'un site doivent être enregistrées dans un même dossier "nom_site", et cet enregistrement se fera avant toute insertion d'image ou création de lien hypertexte.

Créer la page d'accueil index.html

Ouvrez Libre Office Writer en double-cliquant sur son icône figurant sur le bureau. Ouvrez un nouveau document par

Fichier Nouveau

et choisissez Document HTML.

Centre de Ressources Pédagogiques 2012 - 2013

3

L'éditeur Writer /Web s'ouvre et présente une fenêtre telle que ci-après :

Ouvrez le fichier "ecriture.doc", qui contient tous les textes à insérer sur les différentes pages du site et Copiez dans le document html le texte destiné à la page d'accueil : de " Voici un peu plus de 3 000 ans " à " situé à l’adresse http://classes.bnf.fr/ ". Nota : Utiliser la commande Édition Collage spécial… Texte non formaté pour coller le texte dans la page html, de façon à supprimer tous les caractères cachés de Word.

Enregistrez la page sous le nom index.html, dans le dossier créé pour recevoir le site.

Nota : l'enregistrement de la page en cours de création à son emplacement définitif doit être fait le plus tôt possible, avant toute insertion d'image ou de lien hypertexte.

4

Dans le menu Format, choisissez l'option Styles et formatage, ou cliquez sur la touche F11. Le styliste s'ouvre.

Remarque : le styliste s'est peut-être déjà ouvert par défaut à l'ouverture. S'il disparaît au cours de votre travail, rouvrez-le comme indiqué ci-dessus. Cliquez sur le style Corps de texte avec le bouton droit de la souris, et choisissez l'option Modifier du menu contextuel. La fenêtre de dialogue Style de paragraphe : Corps de texte s'ouvre.

Choisissez les caractéristiques de votre choix pour le style "Corps de texte" en parcourant les options des différents onglets : ci-dessus, la fenêtre de l'onglet Police.


5

Les retours à la ligne du texte saisi dans Word ont été transformés en sauts de paragraphe.

Effacez les sauts de paragraphe indésirables,

et remplacez-les par un retour à la ligne en appuyant simultanément sur la touche Entrée et sur la touche Maj.

Dans le menu Fichier, choisissez l'option Propriétés. La fenêtre de dialogue Propriétés de index s'ouvre. Remplissez obligatoirement la zone Titre de l'onglet Description, pour donner un titre à votre page.

Enregistrez les modifications, allez dans votre dossier "www.ecriture.fr" et cliquez sur le fichier index.html pour l'ouvrir avec le navigateur : regardez en particulier où s'affiche le titre de la page.

Remarque : En laissant la page ouverte dans le navigateur, vous l'actualiserez après chaque nouvelle modification enregistrée, de façon à visualiser votre mise en forme au fur et à mesure de sa création.

6

Créer un titre et mettre en forme le texte de la page index.html

Placez-vous en haut de votre page, cliquez sur Insertion Tableau et remplissez la fenêtre de dialogue comme indiqué ci-contre.

Tapez le texte "L'aventure des écritures : les mythes de naissance" à l'intérieur du tableau. Appliquez le style Titre1 à votre titre à l'aide du styliste (double Clic sur Titre 1 avec le bouton droit de la souris).

Centrez le titre. Placez-vous à l'intérieur du tableau, cliquez sur Tableau Propriétés du tableau et remplissez la fenêtre de dialogue comme indiqué ci-dessous, dans l'ordre suivant : Alignement Centrer, Largeur Relatif, puis 80%..


7

En ouvrant les autres onglets de la fenêtre, choisissez la forme et la couleur de la bordure et la couleur de l'arrière-plan, comme montré sur le modèle de la page d'accueil.

Faites un saut de paragraphe sous le tableau de titre pour créer un espace, puis placez-vous juste avant la phrase "L'aventure des écritures s'apparente à un voyage à travers tous les temps et tous les univers."

Insérez un tableau 7 colonnes et 1 ligne, sans titre et sans bordure.

Tapez à l'intérieur de chaque cellule l'intitulé de la page qui s'ouvrira à partir de ce texte, à savoir respectivement : "Écritures africaines", "Écriture chinoise", "Écritures cunéiformes", "Écriture égyptienne", "Écriture grecque", "Écritures indiennes", "Écritures précolombiennes". Ne soulignez pas les textes (le soulignement vient de la transformation du texte en hyperlien). Sélectionnez toutes les cellules et centrez le texte avec Format Paragraphe Alignement Centre.

8

Pour insérer l'image correspondant aux écritures africaines, placez-vous à l'intérieur de la cellule "Écritures africaines", juste avant le texte, cliquez sur Insertion À partir d'un fichier.

puis recherchez l'image concernée dans l'arborescence du dossier contenant le site,

et double-cliquez sur le fichier image ecrit_africaine_icone.gif pour insérer l'image. L'image s'insère telle que ci-dessous :


9

Pour redimensionner l'image, sélectionnez l'image, cliquez sur Format Image… et renseignez l'onglet Type.

L'image devient telle que ci-dessous :

Pour centrer l'image dans la cellule, il faut l'ancrer "Comme caractère".

Replacez le texte sous l'image en insérant un saut de ligne (Maj + Entrée) après l'image.

L'onglet Options de la fenêtre de dialogue permet d'affecter à l'image son texte alternatif.

Dans le navigateur, le texte apparait lors du survol de l'image.

10

Insérez de la même façon les autres images.

Terminez la mise en forme en mettant en gras ou en italique les zones de texte que vous souhaitez mettre en valeur ou différencier, changez de couleur les caractères etc. Enregistrez à nouveau la page.

Créer les pages ecrit_xxx.html

Vous en savez assez pour créer et enregistrer l'une des pages ecrit_africaines.html, ecrit_chinoise.html, ecrit_cuneiformes.html, ecrit_egyptienne.html, ecrit_grecque.html, ecrit_indiennes.html, ecrit_precolombiennes.html, par exemple sur le modèle donné en dernière page de ce support. Nota 1 :

Pour que le texte "tourne" autour d'une image, sélectionnez l'image, cliquez sur Format Image… et choisissez son "habillage" dans l'onglet "Adaptation du texte" de la fenêtre de dialogue image.

Nota 2 :

Pour positionner un texte face à une image, utiliser un tableau " 1 ligne, 2 colonnes" et insérez l'image dans 1 des cellules, placez le texte dans l'autre..


11

Créer des liens hypertexte

On souhaite créer des liens hypertexte entre les pages en suivant le synoptique ci-dessous :

Pour créer un lien intérieur au site, on sélectionne le texte porteur du lien, ou l'image qui servira de lien, et on clique sur Insertion Hyperlien. La fenêtre de dialogue Hyperlien s'ouvre. La zone de texte Document / Chemin reçoit l'adresse de la page HTML destinataire du lien. Elle est tapée directement, ou obtenue automatiquement en cliquant sur le nom de cette page après avoir cliqué sur l'icône Ouvrir le dossier située à droite de la zone de saisie.

Pour créer un lien extérieur au site (donc vers une page Web d'un autre site), on sélectionne le texte porteur du lien, on ouvre la fenêtre de dialogue Hyperlien, on sélectionne l'icône Internet et on écrit l'adresse complète http://... dans la zone de texte Document / Chemin. Pour créer un lien vers une boîte aux lettres électronique, permettant d'envoyer un message, on sélectionne le texte porteur du lien, on ouvre la fenêtre de dialogue Hyperlien, on sélectionne l'icône Mail et News et on écrit l'adresse de la boîte précédée de mailto: dans la zone de texte Document / Chemin.

12

Application

Créez les liens intérieurs au site : de la page d'accueil vers chacune des pages ecrit_xxx.html, et de chacune des pages décrivant les mythes de naissance des écritures vers la page d'accueil : lien sur le texte "Retour vers la page d'accueil" et sur l'icône située en haut de page, à gauche, en procédant comme indiqué page précédente. Pour choisir la couleur des liens, ainsi que leurs autres paramètres de mise en forme, surlignez l'un des liens hypertextes que vous venez de créer dans la page. Dans le Styliste, cliquez sur l'icône Caractères.

Clic droit sur le style, puis sur Modifier… : la fenêtre de dialogue "Styles de caractères" s'ouvre. Choisissez les caractéristiques de style pour les liens de la page.

Faire de même pour les liens visités, si vous souhaitez également modifier leur mise en forme par défaut. Nota : le style des liens doit être modifié dans chaque page html. Sur la page d'accueil, tapez "Pour en savoir plus..." après la référence au site de la BNF, et faites-en un lien vers le site précité. Toujours sur la page d'accueil, tapez "Contact" et faites-en un lien vers votre boîte aux lettres électronique. Réenregistrez les pages que vous avez modifiées.


13

Regardez le code HTML des pages en cliquant sur Affichage Source HTML.

Un nouveau clic sur Affichage Source HTML permet de revenir à l'affichage habituel de la page. Via l'explorateur, double-cliquez sur la page index.html du dossier www.ecriture.fr et vérifiez le fonctionnement correct de votre site en suivant tous les liens. Modifiez les pages dont vous souhaitez changer l'apparence, corrigez les liens s'ils ne fonctionnent pas Réenregistrez les pages après modifications et testez-les à nouveau. Quand le site vous convient, fermez toutes les pages et quittez Libre Office.

14

MODELE DE PAGE "ECRITURE"

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES...

Documents

Transcript of CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES...