CRER UN SITE WEB LMENTAIRE AVEC KOMPOZER

Mise en place de la structure du site Crer un dossier pour y ranger les diffrentes pages du site (ex. dossier www). Lancer KompoZer. Pour indiquer KompoZer o chercher et enregistrer les pages du site : F9 pour ouvrir le Gestionnaire de sites Editer la liste de sites Slectionner le dossier www comme rpertoire du site. OK Complter les champs de la fentre Paramtres de publication Nom du site = Mon premier site web Dossier du site = . . . /www OK Crer* ( ) puis enregistrer ( ) les futures pages du site dans le dossier www ; 2 infos fournir : le titre de la page (ex. Page daccueil, Page 1, Page 2, etc.) et le nom de fichier correspondant (respectivement index.html, page1.html, page2.html)
* inutile de Nouveau pour la page daccueil, cre par dfaut au dmarrage du logiciel

Crer un rpertoire images dans le dossier www ( des images du site uniquement des images JPEG libres de droits ni trop grandes (400 x 300 pixels maximum), ni trop petites ; si elles sont trop grandes les redimensionner dans un logiciel de traitement dimages comme Paint.NET) Actualiser Rsultat attendu dans le Gestionnaire de sites (5 fichiers HTML vides + 1 dossier Images)

) pour y ranger lensemble

successivement chacun des 5 fichiers pour les ouvrir dans la zone ddition de KompoZer. Cration dune barre de menus avec liens internes et externes onglet Page daccueil Recopier le texte ci-dessous en haut de la page daccueil : Accueil | Page 1 | Page 2 | Page 3 | Page 4 | Site web prfr | Mcrire Liens internes : - slectionner le texte lier (ex. Accueil) - Insertion < Lien / et rechercher le fichier correspondant (ici index.html) - cocher LURL est relative ladresse de la page. - OK Procder de la mme faon pour les autres pages.

Valrie GUERIN

Liens externes vers un autre site web : - slectionner le texte lier (Site web prfr) - Insertion < Lien / et entrer ladresse URL complte du site web prfr dans le champ Emplacement du lien (ex. http://www.google.fr) - OK Liens externes vers une adresse de courrier lectronique : - slectionner le texte lier (Mcrire) - Insertion < Lien / et entrer son adresse e-mail dans le champ Emplacement du lien (ex. nom.prenom@yahoo.fr) - cocher La valeur ci-dessus est une adresse lectronique. - OK Copier/coller la barre de menus sur chacune des autres pages du site puis Supprimer les auto-liens (ex. le lien vers index.html dans la page daccueil). - slectionner le texte du lien - Insertion < Lien / - Annuler et vrifier que lensemble des liens fonctionnent.

Rdaction des diffrentes pages du site onglet de la page rdiger En-tte : - crire le texte den-tte - placer le curseur dans le texte puis Titre 1 (carr sup. couleur du texte ; carr inf. couleur du fond) (centrage du titre) Sous-titres, textes : - crire directement les textes dans KompoZer ou copier/coller des textes bruts (cest-dire non formats) depuis Bloc-notes et dcrire le sens du texte insr (cest--dire prciser ce qui est titre, paragraphe, adresse, etc.) et attribuer une police de caractres diffrente aux titres (choisir une police srif caractres avec empattements) et aux paragraphes (choisir une police sans srif caractres bton) Images : - Insertion < Image / et aller rechercher une image dans le rpertoire images du dossier www. - cocher LURL est relative ladresse de la page. Valrie GUERIN

- complter le champ Vignette pour crer une info-bulle (facultatif) - complter le champ Texte alternatif en indiquant ce que reprsente limage (ce texte apparatra dans le navigateur si limage ne peut tre tlcharge : serveur surcharg, connexion de mauvaise qualit, etc.) - onglet Apparence pour dfinir lespacement de limage par rapport au texte, ajouter une bordure limage ou indiquer comment le texte doit se placer par rapport limage Tableaux : - Insertion < Tableau / - onglet Prcisment - choisir le nombre de lignes et de colonnes ; indiquer la largeur du tableau (en pixels ou en % de la largeur de la fentre*) et lpaisseur de la bordure (gale 2 px par dfaut) - OK
* La taille relative (en %) permet au tableau de sadapter son environnement : plus la fentre du navigateur est grande, plus il sera large et haut (et inversement), la disposition des lments sajustant la largeur et la hauteur du tableau dans la fentre. La taille absolue (en pixels) permet de spcifier une taille dfinie. Cette solution offre lavantage de conserver la mme mise en forme pour le tableau et les lments quil contient, quelque soit la taille de la fentre daffichage.

Dlimitation des cellules den-tte : - placer le curseur dans la premire cellule de la premire ligne - Tableau > Proprits du tableau - onglet Cellules Choisir Slection : Ligne Style de cellule : Titre - Appliquer - OK Ajouter une nouvelle ligne au tableau - placer le curseur dans la dernire cellule de la dernire ligne et - touche de tabulation Couleur de fond : - placer le curseur dans le tableau - Tableau > Couleur de fond de tableau ou de cellule - cocher Fond pour : Tableau puis choisir une couleur - OK NB mme mthode pour mettre en couleur le fond des cellules colorer, cocher Fond pour : Cellule(s) Positionnement du tableau sur la page : placer le curseur dans le tableau Tableau > Proprits du tableau > Edition avance item align de la zone left, center ou right dans la zone OK OK

slectionner les cellules

Valrie GUERIN

Tlchargement du site web sur le serveur dun hbergeur (ex. site du collge) serveur web = ordinateur connect en permanence Internet sur lequel fonctionne un logiciel appel serveur ; le serveur distribue aux ordinateurs des internautes dsireux de consulter le site du collge les pages web qui lui ont t transmises laide de Filezilla* (ou dun logiciel similaire)
ORDINATEURS SUR LE WEB

PROTOCOLE HTTP SERVEUR WEB CHEZ LHBERGEUR PROTOCOLE FTP

PC du collge sur lequel sont enregistres les pages du site

Aprs avoir configur Filezilla : Envoyer le texte de la page daccueil - slectionner le fichier index.html dans le Gestionnaire de sites Publier navigateur web - entrer ladresse du site du collge http://www.ac-nancy-metz.fr/pres-etab/clglonguyon/ - vrifier que la page daccueil est bien disponible sur Internet Envoyer limage illustrant la page daccueil - slectionner le fichier image_accueil.png dans le rpertoire images du Gestionnaire de sites Publier - Actualiser dans le navigateur et vrifier que la page daccueil est complte (texte + image) Transfrer les autres fichiers en procdant comme prcdemment (slectionner les fichiers un par un puis les images et ) Actualiser dans le navigateur et vrifier que tout fonctionne (pages compltes, liens fonctionnels)
* Filezilla est un utilitaire FTP, cest--dire un logiciel capable de dialoguer distance avec un serveur en utilisant le
protocole (= langage) FTP afin dy tlcharger des fichiers

Rcapitulatif des raccourcis KompoZer F1 F5 F8 F9 F11 pour obtenir de laide pour avoir un aperu dans le Navigateur pour activer la vue Mixte pour ouvrir le Gestionnaire de sites pour ouvrir lditeur de style CSS

Valrie GUERIN