C2I CREATION DE PAGES WEB KOMPOZER

Transcription

1 C2I CREATION DE PAGES WEB KOMPOZER Philippe Rincon

2 - kompozer prise en main - Le travail de la séance d'aujourd'hui consiste à reproduire un site existant, déjà en ligne. Au terme de la séance vous devrez avoir refait et publié vous-même le site modèle. Cette séance a pour but de vous faire créer en moins de deux heures un site statique simple. Vous vous familiariserez dans le même temps avec les fonctions les plus courantes de kompozer. Créez sur Mes documents : un dossier que vous nommerez SITE kompozer Démarrez Internet Explorer par le biais des raccourcis ou bien en effectuant à la séquence suivante : Clic/ Démarrer/ Programmes/Internet Explorer. Dans la ligne d'adresse saisissez l 'URL suivante : Prenez le temps de visiter et d'observer attentivement ce site. Démarrez kompozer, en cliquant sur l'icône ou encore en suivant la séquence : Clic/ Démarrer/ Programmes/ kompozer/kompozer. Créer un nouveau projet / site Nommer une page Dans le panneau Gestionnaire de site cliquez sur le bouton Edition de site. Dans la boite de dialogue Paramètres de publication saisissez "C2I " dans le champ nom du site. Renseignez les autres champs en fonction des paramètres FTP que votre hébergeur 1 vous a fournis. Cochez l'option Mémorisez le mot de passe. Validez en cliquant sur OK A l'ouverture kompozer affiche une page vierge. Si tel n'est pas le cas cliquez Fichier/Nouveau et valider sur le bouton Ouvrir Enregistrez ensuite votre document dans votre dossier SITE kompozer en lui donnant pour nom index.html. Attention, une boite de dialogue vous invite à saisir un titre pour la page courante. Saisissez le texte : Accueil C2I Le titre d'un document est le mot ou l'expression contenu dans la barre de titre. Barre affichée en haut d'une fenêtre et contenant généralement le nom de l'application à laquelle appartient la fenêtre ainsi que le titre du document affiché dans la fenêtre. Le titre renseigne non seulement l'utilisateur sur le contenu qu'il consulte, mais il est également utilisé par les moteurs de recherche du Web pour identifier un document dans les résultats d'une recherche ainsi que par les navigateurs lorsqu'un utilisateur crée un signet ou un «favori» pour un document. Il est donc recommandé d'affecter à chaque document un titre significatif. 1 Renseignez ces champs que si vous pensez publier votre travail sur le Web. En laissant ces champs vides, votre site ne sera visible qu'en local seulement. 2 Ph.Rincon

3 Arrière plan Changez la couleur d'arrière plan en cliquant Format/Couleurs et fonds de page. Dans la zone Couleurs de page cliquez sur Couleurs personnalisées Cliquez sur la case témoin de couleur faisant face à l'étiquette Fond. La Bdd 2 Couleur de fond de bloc apparaît. Dans le champ Hexa saisissez #F2F2F2. Validez en cliquant sur OK Création d'un tableau Dans la barre d'outils cliquez sur le bouton Tableau Dans la Bdd Insérer tableau déterminer un tableau d'une ligne, une colonne. Ce tableau sera le conteneur global de notre page. Validez en cliquant OK si nécessaire Modifier les propriétés d'un tableau Cliquez sur le tableau pour le sélectionner. En maintenant votre curseur sur le tableau sélectionné cliquez droit et dans le menu contextuel choisissez Propriétés Cellule Basculez sur l'onglet Tableau. Appliquez le paramétrage suivant : Ligne : 1 Colonne : 1 Hauteur : Laisser vide Largeur : 700 pixels Bordure : 1 Marge : 0 Espacement : 0 Légende : Aucune Alignement du tableau : Centre Couleur de fond : #FFFFFF (Blanc) Validez en cliquant OK. Votre tableau conteneur est maintenant paramétré. La barre d'outils de mise en forme : différents modes d'affichage La barre d'outils de mise en forme, en pied de page, indique les différents affichages proposés par kompozer. Le mode d'affichage en cours est plus clair que les autres. Les vues disponibles sont Normal, Balises HTML, Source et Aperçu. Vous pouvez facilement changer de vue en cliquant sur l'un des trois autres onglets avec la souris. 2 Boite de dialogue 3 Ph.Rincon

4 Création de tableaux imbriqués A l intérieur du tableau conteneur, créez quatre tableaux -les uns en dessous des autres- ayant chacun les caractéristiques suivantes : Attention pour imbriquer un tableau vous devez Cliquez Tableau / Insérer Tableau. En effet, votre curseur étant dans le tableau, si vous cliquez sur le bouton Tableau de la barre outil, la Bdd Propriétés du tableau apparaît. Ligne : 1 Colonne : 1 Hauteur : Laisser vide Largeur : 700 pixels Bordure : 0 Marge : 2 Espacement : 2 Légende : Aucune Alignement du tableau : Centre Couleur de fond : #FFFFFF (Blanc) Supprimez les sauts de ligne ou de paragraphe qui éventuellement séparent les tableaux. Enregistrez votre document. Pour faciliter l'explication nous appellerons : - En-tête, le premier tableau - Menu, le second tableau - Corps, le troisième tableau - Pied, le quatrième Modifier la couleur de fond du tableau Menu ainsi que sa hauteur. - Couleur : #F4F4F4. - Hauteur : 26 px Fractionner un tableau / ajouter des colonnes Placer votre curseur dans le tableau En-tête puis cliquez droit/insertion dans le tableau/colonne avant Réitérez l'opération en choisissant cette fois Colonne après. Votre tableau En-tête comporte désormais trois colonnes. A l'aide de la règle ajustez la largeur des colonnes de votre tableau En-tête : La première colonne fera 200 pixels de largeur, la seconde pixels et la troisième 200 pixels. 3 Cette seconde valeur peut varier de quelques pixels en fonction de votre paramétrage. Cela n'a pas d'importance pour notre exercice. 4 Ph.Rincon

5 Insertion d'image Placez votre point d'insertion dans la première colonne du tableau En-tête puis cliquez sur. Dans la Bdd qui apparaît cliquez sur le bouton "parcourir" pour déterminer l'emplacement de l'image à insérer. L'image à insérer s'appelle logoparis8.gif, située sur la plate forme collaborative, dans le dossier kompozer/images Enregistrez-la dans votre dossier SITE kompozer (sur Z:) Dans la zone Texte alternatif saisissez le texte : Logo Paris 8. Ce texte se substituera à l'image en cas de problème d'affichage. Clic/OK. Dans la deuxième colonne insérez l'image logoc2i.gif 4. (Texte alternatif : Logo C2I) Dans la troisième colonne insérez l'image logop5.gif 5. (Texte alternatif : Logo Paris 5) Enregistrez votre document. Aligner le contenu d'une cellule Cliquez dans la première cellule du tableau puis cliquez sur le bouton Aligner à gauche. Centrez le contenu de la cellule 2 Alignez à droite le contenu de la cellule 3 Aligner à droite Aligner à gauche Centrer Créer des liens internes Nous allons à présent créer une barre de navigation pointant vers les autres pages du site. Placez votre curseur dans le tableau menu. Saisissez au kilomètre le texte suivant : Accueil Comment passer le C2I Le C2I à Paris 5 Liens Cliquez deux fois sur le texte "Accueil", il est ainsi sélectionné. Tout en gardant votre curseur sur le bouton cliquez sur le bouton droit de votre souris. Un menu contextuel apparaît. Cliquez sur la commande "Créer un lien". Une Bdd "Propriété du lien" s'affiche. Dans le champ "Emplacement du lien" Tapez : index.html 1. Validez sur OK 2. Recommencez la manipulation pour les textes/boutons Comment passer le C2I, Le C2I à Paris 5 et Liens. 4 Préalablement enregistrée dans votre dossier SITE KOMPOSER (sur Z:) 5 Idem. 5 Ph.Rincon

6 Au texte Comment passer le C2I associez le ficher comment_c2i.html Au texte Le C2I à Paris 5 associez le ficher C2i_paris5.html Au texte Liens associez le ficher liens.html Mettre en forme les liens à l'aide des Feuilles de style en cascade (CSS) Les CSS (Cascading style sheet) sont un moyen simple d'ajouter des styles, par exemple des polices, des couleurs, etc. à un document Web. Les CSS permettent un contrôle complet et total sur l'apparence d'un document hypertext. Création de la feuille de styles Externe Ouvrez le Bloc-notes pré-installé de Windows ou bien le Simple text de Mac OS. Le Bloc-notes ou simple texte sont des éditeurs de texte brut - sans aucune mise en forme. Enregistrez un nouveau document vierge dans votre dossier SITE kompozer en lui donnant pour nom fds ainsi que l'extension.css. Fermez ensuite le fichier css tout juste créé. Une fois revenu sur kompozer, cliquez sur Editeur CSS dans le menu Outils, ou bien cliquez. Décochez tout de suite l'option "Mode expert". Dans la Bdd Feuilles de styles CSS, cliquez sur la flèche noire du bouton Feuille liée. et choisissez Cliquez ensuite sur Parcourir. Sélectionnez le fichier fds.css que vous venez de créer. Dans la Bdd Feuilles de styles CSS cliquez sur Créer la feuille de style. Votre feuille est créée et liée maintenant à la page web sur laquelle vous travaillez Création de styles de mise en forme Dans la zone Feuilles et règles de la Bdd Feuilles de style CSS sélectionnez en cliquant dessus- la feuille de style que vous venez de créer. Cliquez ensuite sur la flèche noire du bouton puis choisissez Règle Dans la zone de texte Nouvelle règle de style, saisissez le nom du style que vous allez créer précédé d'un point :.navigation, puis cliquez sur le bouton Créer la règlede style. Le style ".navigation" apparaît dans la zone Feuilles et règles. 6 Ph.Rincon

7 Paramétrez le style ".navigation" comme suit : Text Police : verdana Taille police 10px Couleur : # ONGLETS Boîte Flottante : Gauche Espacement gauche : 10mm Epaisseur : Gras Alignement : Centré Décoration : Normal Une fois le paramétrage effectué revenez sur l'onglet Général et cochez le bouton importanceen regard du paramètre text-decoration: none Validez en cliquant sur OK Appliquer un style Vous allez maintenant appliquer le style ".navigation" aux liens de votre tableau Menu. Cliquez une fois sur le mot "Accueil", puis dans la barre d'état dans le bas de votre fenêtre cliquez sur la balise <a>. La barre d'état de kompozer affiche, en fonction du point d'insertion, la hiérarchie des balises HTML. Vous pouvez facilement éditer/définir les propriétés d'une balise particulière en effectuant un clic droit dans la barre d'état et en choisissant l'option désirée. Un simple clic gauche de la souris sur une balise dans la barre d'état sélectionne le texte encadré par cette balise. Vous constatez que le mot accueil est sélectionné dans son ensemble. En cliquant sur la balise <a> vous avez sélectionné le lien entier portant sur le texte "Accueil". Dans la barre d'outils Mise en forme, cliquez sur le menu déroulant Appliquer une classe à la sélection et choisissez votre style ".navigation". Appliquer une classe à la sélection Appliquez de la même manière le style ".navigation" aux autres liens Comment passer le C2I, Le C2I à Paris 5 et Liens. 7 Ph.Rincon

8 Créer un effet de survol Nous allons maintenant créer un style.navigation:hover qui modifie les liens au survol de la souris. Nous allons utiliser la pseudo-classe hover 6 qui permet cet artifice. Ce style n'apparaîtra pas dans le enu Appliquer une classe à la sélection, en effet ce nouveau style n'est qu'une déclinaison du style".navigation". En reprenant les étapes de création de style abordées à l'instant créer un style ".navigation:hover" ayant les caractéristiques suivantes : ONGLETS Text Couleur : #ff6600 Ce style correspond en tout point au style".navigation" créez plus tôt excepté la couleur de police. Testez l'effet de survol réalisé uniquement à l'aide du style.navigation:hover. Ajouter un lien à une image Cliquez une fois sur l'image LogoP8 afin de la sélectionner. Cliquez ensuite sur le bouton droit de la souris pour faire apparaître le menu contextuel correspondant à votre position de souris. Cliquez sur la commande "Créer un lien". Une Bdd propriété de l'image apparaît. Dans le champ de saisie tapez l'url suivante : Procédez de la même manière pour l'image logop5. (URL : Enregistrez votre page web. (CTRL + S) Créer un lien vers une messagerie Nous allons créer un lien vers la messagerie fictive du webmestre fictif du site C2I modèle. Cliquez dans le tableau Pied, puis saisissez le texte suivant : contact. Double cliquez sur le mot contact pour le sélectionner et appeler via le menu contextuel la commande Créer un lien. La Bdd "Propriété du lien" s'affiche. Dans le champ "Emplacement du lien" tapez : webmaster@paris5-c2i.com puis cochez l'option La valeur ci-dessus est une adresse électronique. 6 La pseudo classe :hover n'est qu'une déclinaison du style auquel elle est rattaché un état lors de l'événement de survol de la souris. 8 Ph.Rincon

9 Validez sur OK "mailto" :est un protocole de liens de messagerie électronique. Les liens mailto ne sont pas de vrais hyperliens, car leur clic n'engendre aucune connexion. Ils commandent simplement au navigateur Web de créer un nouveau message électronique vide avec l'adresse «À» spécifiée. C'est pour cette raison aussi qu'il n'existe pas d'élément tel qu'une adresse URL mailto. Les liens mailto prennent la forme Nous allons créer un nouveau style CSS pour mettre en forme notre lien vers une messagerie Cliquez/ Outils / Editeur CSS. Dans la zone Feuilles et règles de la Bdd Feuilles de style CSS sélectionnez la feuille de style fds.css. Cliquez ensuite sur la flèche noire du bouton puis choisissez Règle Dans la zone de texte Nouvelle règle de style, saisissez le nom du style que vous allez créer précédé d'un point :.messagerie, puis cliquez sur le bouton Créer la règle de style. Le style ".messagerie" apparaît dans la zone Feuilles et règles. Paramétrez le nouveau style comme suit : Text Police : verdana ONGLET Taille police 10px Couleur : #FF66OO Epaisseur : Gras Alignement : Droite Décoration : Normal Casse du texte : Majuscule Une fois le paramétrage effectué revenez sur l'onglet Général et cochez le bouton importanceen regard du paramètre text-decoration: none Validez en cliquant sur OK Appliquez le style ".messagerie" au lien CONTACT Essayez-vous à créer un effet de survol sur le lien. Créer d'autres pages sur le même modèle Nous allons créer trois autres pages ayant la même ossature que notre page index.html. Nous n'aurons évidemment pas à recréer les pages élément par élément. Il existe une procédure simple et rapide. Clic/Enregistrer sous 9 Ph.Rincon

10 Une Bdd apparaît, dans le champ "nom du fichier" remplacez index.html par liens.html puis valider (Clic/OK) Répétez encore deux fois l'opération en choisissant successivement comme nom de fichier : Comment visualiser les différentes pages ouvertes : la barre onglets comment_c2i.html C2i_paris5.html Komposer vous permet d'éditer simultanément plusieurs pages Web en utilisant un onglet différent pour chacune des pages ouvertes. Avoir plusieurs onglets donne à votre espace de travail une apparence plus propre, il n'est pas encombré de multiples fenêtres ouvertes pour chacun des documents. Une icône de disquette rouge apparaît dans chaque onglet pour indiquer qu'un document a été modifié mais non enregistré. Attribution de titre de page Pour chaque nouvelle page, veillez à changer le titre de la page, (elles portent toutes, pour l'instant, le titre Accueil C2I) Rappel de la procédure : Clic/Format/Titre et propriétés de la page. Dans la zone titre saisissez le titre. Comment passer le C2I à Paris 5 pour le fichier comment_c2i.html" Le C2I à Paris 5 pour le fichier C2i_paris5.html Liens C2I pour le fichier liens.html Nous allons maintenant remplir chaque page en fonction de sa destination. La page index.html servira de page d'accueil et de présentation, les autres dispenseront l'information annoncée par les liens du menu. Importer du texte - Copier/Coller du texte Nous allons récupérer du texte depuis Word. Pour cela : 10 Ph.Rincon

11 Lancer le logiciel Word. Ouvrez le fichier (Clic/Fichier/Ouvrir) Index.doc situé sur LA PLATE-FORME COLLABORATIVE 7, dans le dossier kompozer/textes Sélectionnez tout le texte, en draguant ou bien encore en commandant "Sélectionner Tout" dans le menu Edition ou encore en faisant la combinaison de touches CTRL + A. Copiez ensuite votre sélection en cliquant droit et en choisissant Copier Basculez sur kompozer en cliquant sur le bouton de la barre des tâches en bas de votre écran ou en faisant la combinaison de touches ALT + TAB. Placez votre point d'insertion dans le tableau Corps, puis Clic/Edition/Coller ou CTRL + V En reprenant une à une les étapes précédentes vous allez ajouter du texte à nos pages presque vierges. Mise en forme du texte - Le contenu du fichier comment_c2i.doc devra être copié et collé dans le fichier comment_c2i.html - Le contenu du fichier C2i_paris5.doc devra être copié et collé dans le fichier C2i_paris5.html - Le contenu du fichier liens.doc devra être copié et collé dans le fichier liens.html Vous allez maintenant mettre en forme le texte ainsi collé. Référez-vous au modèle pour avoir une idée de la mise en forme générale. Vous allez créer 3 styles CSS que vous nommerez,.titre,.soustitre,.paragraphe, et.puces Voici leurs attributs : Styles Onglets.titre.soustitre.paragraphe Texte Police : verdana Taille caractère : 14px Police : verdana Taille caractère : 13px Police : verdana Taille caractère : 12px Couleur : #FF6600 Hauteur de ligne : 14pt Hauteur de ligne : 18px Epaisseur : Gras Couleur : # Alignement : Gauche Epaisseur : Gras Boite Marge : haut 5mm gauche 2mm Marge : haut 5mm Espacement : Gauche 12px Marge : Gauche 7mm Pensez, le cas échéant, à utiliser les listes à puces, bouton accessible depuis la barre d'outils: 7 Il se peut que le fichier se trouve ailleurs. Demander à votre enseignant son emplacement. 11 Ph.Rincon

12 Enregistrez votre document. Mettez en forme les autres pages en vous servant exclusivement des trois styles que vous venez de créer ainsi que les listes à puces proposées par défaut par le logiciel. Liens externes (renvoyant à une page Web sur un autre site) Affichez le document liens.html. Sélectionnez le texte " " et appelez via le menu contextuel la commande Créer un lien.. La Bdd "Propriété du lien" s'affiche. Dans le champ "Emplacement du lien" tapez : Validez sur OK Créez un lien pour le second site Enregistrez toutes vos pages Visualiser dans le navigateur Vous pouvez enfin visualiser votre travail sur votre navigateur en cliquant sur l'icône Publier les pages du site 8 Cliquez sur l'onglet "Le C2I à Paris 5" pour afficher la page. Cliquez ensuite sur le bouton publier: Renseignez la Bdd comme indiqué ci-dessous 8 Action possible que si vous possédez un compte FTP et un accès FTP. 12 Ph.Rincon

13 Cliquez sur Publier pour envoyer votre page sur le serveur distant. Procédez de la même façon pour publier les autres pages du site Vérifiez enfin que votre site est bien en ligne. Pour cela rendez-vous sur le Web 13 Ph.Rincon

14 Les raccourcis généraux de kompozer Actions RACCOURCIS Windows Unix/Linux MAC Ouvrir un fichier Ctrl + O Cmd + O Pomme + O Ouvrir une nouvelle page/modèle Ctrl + N Cmd + N Pomme + N Ouvrir un nouvel onglet Ctrl + T Cmd + T Pomme + T Enregistrer Ctrl + S Cmd + S Pomme + S Copier Ctrl + C Cmd + C Pomme + C Coller Ctrl + V Cmd + V Pomme + V Couper Ctrl + X Cmd + X Pomme + X Tout sélectionner Ctrl + A Cmd + A Pomme + A Fermer la fenêtre Ctrl + W Cmd + W Pomme + W Supprimer le mot suivant Ctrl + Del Cmd + Del Pomme + Del Remonter d'une page Page préc. Page préc. Page préc. Descendre d'une page Page suiv. Page suiv. Page suiv. Remonter d'une ligne Flèche haut Flèche haut Flèche haut Descendre d'une ligne Flèche bas Flèche bas Flèche bas Annuler Ctrl + Z Cmd + Z Pomme + Z Refaire Ctrl + Maj+ Z Cmd + Maj + Z Pomme + Maj+Z Rechercher et remplacer Ctrl + F Cmd + F Pomme + F Rechercher à nouveau Ctrl+ G ou F3 + G + G ou F3Cmd + G Rechercher le précédent Ctrl + Maj+ G Cmd + Maj + G Ouvrir le menu contextuel Maj+ F10 Maj + F10 Maj+F10 Ouvrir le menu principal (bascule à au premier menu déroulant en haut de la fenêtre) Alt Alt Aller à l'onglet suivant Ctrl+ Page suiv. + Page suiv. Aller à l'onglet précédent Ctrl+ Page préc. + Page préc. Fermer l'onglet Ctrl + W Cmd + W Pomme + W Quitter Komposer Ctrl + Q Cmd + Q Pomme + Q 14 Ph.Rincon

15 Table des matières Créer un nouveau projet / site... 2 Nommer une page... 2 Arrière plan... 3 Création d'un tableau... 3 Modifier les propriétés d'un tableau... 3 La barre d'outils de mise en forme : différents modes d'affichage... 3 Création de tableaux imbriqués... 4 Fractionner un tableau / ajouter des colonnes... 4 Insertion d'image... 5 Aligner le contenu d'une cellule... 5 Créer des liens internes... 5 Mettre en forme les liens à l'aide des Feuilles de style en cascade (CSS)... 6 Appliquer un style... 7 Créer un effet de survol... 8 Ajouter un lien à une image... 8 Créer un lien vers une messagerie... 8 Créer d'autres pages sur le même modèle... 9 Comment visualiser les différentes pages ouvertes : la barre onglets Attribution de titre de page Importer du texte - Copier/Coller du texte Mise en forme du texte...11 Liens externes (renvoyant à une page Web sur un autre site) Visualiser dans le navigateur Publier les pages du site Les raccourcis généraux de kompozer Ph.Rincon