Mon premier site. Avec l explorateur de Windows créer dans «Mes documents» un répertoire nommé WebMonPremierSite.

Transcription

1 Mon premier site Avec Kompozer nous allons réaliser notre premier site composé, dans un premier temps, de 4 pages : Une page d accueil de présentation personnelle liée à 3 pages : Mes loisirs préférés, Mon chanteur favori, Mon portrait chinois Mise en place de la structure Avec l explorateur de Windows créer dans «Mes documents» un répertoire nommé WebMonPremierSite. Démarrer Kompozer L interface ressemble à celle d un traitement de texte avec de haut en bas La barre de titre La barre des menus La barre d'outils principale La barre d'outils de structures La barre d'outils de mise en forme Les onglets de pages La zone d'édition Les onglets de modes d'édition La barre d'état Le gestionnaire de sites que l on peut afficher ou masquer par la touche F9 Dans le gestionnaire de site, qui est vide pour le moment, cliquer sur le premier bouton Edition des sites représentant 2 ordinateurs. Dans la fenêtre Paramètres de publication saisir dans le champ Nom du site : Mon premier site Cliquer sur le bouton Parcourir (à droite) pour retrouver le dossier WebMonPremierSite Cliquer sur le bouton Nouveau site (à gauche) ; le nom Mon premier site apparait dans le gestionnaire. Menu / Enregistrer-sous la page vide qui se présente dans l interface o la nommer Mon premier site web et cliquer sur OK o Dans la fenêtre d enregistrement, parcourir pour retrouver le dossier WebMonPremierSite dans lequel sera enregistrée la page et donner comme nom de fichier index.html (à la place du nom par défaut). La page index doit apparaître dans le gestionnaire. Au besoin Actualiser en cliquant sur la deuxième icône du gestionnaire. 1

2 Créer et enregistrer 3 autres pages vides dans le même dossier o Mes loisirs préférés ; nom du fichier loisirs.html o Mon chanteur favori ; nom du fichier chanteur.html o Mon portrait chinois ; nom du fichier chinois.html Dans le gestionnaire de sites créer un répertoire images et un répertoire telechargements Tous les fichiers et dossiers doivent apparaître dans le gestionnaire de sites, au besoin Actualiser. La barre de menus : liens internes et externes Afin de pouvoir naviguer dans le site, nous allons créer une barre de menus, en haut de la page d'accueil. Cette barre de menus figurera ensuite sur toutes les pages du site. Ouvrir la page index.html (voir le nom du fichier dans la barre de titres bleue et le nom de cette page dans l onglet). On donne le même nom au site et à la page d accueil. Ecrire sur la première ligne les rubriques des 6 liens o 4 liens internes qui seront les 4 pages o 2 liens externes le premier pointant vers un site sur internet et le deuxième ouvrant la messagerie installée sur l ordinateur du visiteur. Chaque rubrique sera séparée de la suivante par une barre verticale (Alt-Gr + 6 ) entourée de 2 espaces. Quand une icône rouge représentant une petite disquette apparait dans l onglet c est pour nous rappeler qu il faut sauvegarder par Ctrl+S. Sauvegarder très souvent. Pour faire un lien interne : Sélectionner la première rubrique «Accueil» / clic droit sur la sélection / Choisir Créer un lien Dans la nouvelle fenêtre Parcourir pour trouver le fichier index.html et OK Faire de la même façon les 3 autres liens internes. Vérifier que le lien est relatif (juste le nom du fichier). Un lien absolu, indiquant le chemin pour atteindre le fichier, ne fonctionnerait qu en local Pour faire un lien externe : 2

3 Aller sur Internet pour trouver le site voulu et copier l adresse dans le presse papier Sélectionner «Site web préféré» / Clic droit sur la sélection Coller cette adresse dans le champ Emplacement du lien et dans le champ Cible cocher la case «Le lien doit s ouvrir dans une nouvelle fenêtre» Pour faire un lien vers une messagerie : Sélectionner la rubrique M écrire / Clic droit sur la sélection Ecrire notre adresse dans le champ Emplacement du lien et cocher la case «La valeur ci-dessus est une adresse électronique» Copier ce menu sur toutes les pages du site, sauvegarder chaque page et tester dans le navigateur. Comme toutes les pages sont blanches, pour le moment, on peut toutefois voir qu on passe d une page à l autre en voyant le titre de chaque page dans la barre de titres du navigateur. Rédaction de la page d accueil L en-tête : notre nom Titre de niveau 1, centré, fond bleu Insérer une photo, redimensionnée dans un logiciel photo à 200 x 250 pixels environ, format jpg. Résolution 72 dpi. Cette photo est placée ou enregistrée dans le sous-dossier images du site. Après le nom, faire un retour chariot pour insérer un nouveau paragraphe Cliquer sur l icône Images et dans la fenêtre Propriétés de l image Parcourir pour trouver le fichier. Centrer. Mettre un texte alternatif. Sous-titre : mettre le nom de l atelier Titre de niveau 2, centré, fond jaune. Sauvegarder le travail Rédaction de la page Mon portrait chinois Compléter les Propriétés de la page pour toutes les pages Insérer un tableau / Onglet Précisément - 4 lignes et 2 colonnes - Largeur 90% de la fenêtre - Centrer le tableau : Bouton Edition avancée / Attributs HTML rajouter la ligne align et comme Valeur mettre center rajouter des lignes au tableau : à la fin d une ligne la touche Tabulation permet d ajouter une nouvelle ligne 3

4 Sauvegarder le travail Rédaction de la page Mon chanteur favori 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 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 A droite de la photo rajouter les titres des chansons Sauvegarder le travail Rédaction de la page Mes loisirs préférés 3 sous-titres de niveau 2 suivis de quelques lignes de texte dans chacun des 3 paragraphes Illustrer chaque paragraphe avec des photos trouvées sur Internet o Redimensionnées o Espacement 25 et 15 4

5 o pas de bordure o flottant à gauche du texte Sauvegarder Visionner le site avec le navigateur 5