1 CREER UNE PREMIERE PAGE WEB

CLARIS HOME PAGE 2.0 1 CREER UNE PREMIERE PAGE WEB 1.1 DEMARRER CLARIS HOME PAGE Options du document Figure 1 CLARIS HOME PAGE affiche une page vide appelée «Sans titre.htm» Pour changer la couleur de fond cliquez sur l'icône qui permet d'accéder aux options générales du document. Cliquez alors sur l'option Fond pour accéder à la palette des couleurs de fonds disponibles. Choisissez une couleur puis cliquez sur OK pour valider. Cette première page est la page d'accueil. Il convient de lui donner un nom. Image de fond Figure 2 Fond uni 1.2 ENREGISTRER LA PAGE Menu Fichier / Enregistrer CLARIS HOME PAGE vous propose alors de donner un titre à cette page. Ce titre s'affichera en haut de la fenêtre lorsqu'un internaute la consultera. Vous n'êtes pas limité par la longueur de votre titre. Figure 3 Philippe TURPIN - Animateur Informatique : Bassin Centre / Bassin Est Page 1

UN EDITEUR DE PAGES HTML 1.3 DEFINIR UN DOSSIER LOCAL Il est très important de placer immédiatement les fichiers de vos pages Web au bon endroit sur le disque dur, dans votre Dossier local. Sinon, les liens hypertexte que vous créerez plus tard entre vos différentes pages risqueront de ne pas fonctionner. Créez votre dossier local en cliquant sur l'icône Nouveau dossier et donnez lui un nom. Ouvrez ce dossier local mais ne faites pas encore enregistrer N'oubliez pas que ce dossier contiendra tous les fichiers rattachés à vos pages (pages Web, images, sons,...) 1.4 CHOISIR UN NOM DE FICHIER Contrairement au titre de votre page Web, le nom donné au fichier de votre page est soumis à de nombreuses contraintes : Il ne doit pas comporter plus de 8 caractères, d'accents, de ponctuation ou de caractères spéciaux. Si c'est la première page du site, appelez-la «index» Ainsi, il ne sera pas nécessaire de préciser son nom dans l'adresse URL de vos pages. Ces remarques s'appliqueront à tous vos fichiers. 2 SAISIR DU TEXTE DANS UNE PAGE WEB Que ce soit pour saisir du texte, déplacer des mots ou supprimer des caractères, CLARIS HOME PAGE s'utilise comme un logiciel de Traitement de texte ordinaire. 2.1 DELIMITER LES PARAGRAPHES Le «retour chariot» (touche Entrée) permet de forcer la fin d'une ligne et de délimiter ainsi des paragraphes. Deux paragraphes de textes sont alors séparés par une ligne blanche. Le retour chariot ne doit pas être confondu avec le saut de ligne, d'un usage différent. Pour marquer la fin d'un paragraphe sans ajouter une ligne blanche, choisissez «Saut de ligne» dans le menu «Insertion» ou plus simplement utilisez les touches Majuscule + Entrée. 2.2 CORRIGER L'ORTHOGRAPHE Menu Edition / Vérifier la sélection. 2.3 CREER DES FILETS HORIZONTAUX Placez le curseur à l'endroit choisi puis cliquez sur l'icône de la barre d'outils En cliquant deux fois sur le filet, vous pouvez en modifier précisément la largeur et la hauteur. 3 METTRE EN FORME DU TEXTE Styles Filets horizontaux Figure 4 Page 2 Titre s Listes automatiques Alignement

CLARIS HOME PAGE 2.0 3.1 APPLIQUER LES STYLES GRAS ET ITALIQUES. CHANGER LE CORPS ET LA COULEUR DU TEXTE CLARIS HOME PAGE fonctionne comme un logiciel de traitement de texte. Utilisez les boutons de la barre d'outils. Les contraintes du langage html limitent à sept le nombre de tailles de caractères disponibles. 3.2 ALIGNER LES PARAGRAPHES DE TEXTE CLARIS HOME PAGE permet d'aligner les paragraphes de texte de trois façons différentes : à droite, centré ou à gauche. En revanche, il n'est pas capable de justifier un texte. 3.3 VISUALISER LA PAGE DANS LE NAVIGATEUR L'aspect d'une même page peut varier selon que vous la regardiez dans CLARIS HOME PAGE ou dans un logiciel navigateur. La première opération consiste à choisir dans CLARIS HOME PAGE le navigateur qui servira à visualiser la page Web (INTERNET EXPLORER / NETSCAPE NAVIGATOR). Menu Edition puis Préférences onglet Navigateur. Le bouton navigateur ouvrira alors automatiquement le navigateur choisi. Pendant la création de vos pages vous basculerez sans cesse entre CLARIS HOME PAGE et le navigateur. Un conseil : faites se chevaucher les fenêtres des deux logiciels; un simple clic vous permettra de passer rapidement de l'un à l'autre. 4 LES TITRE ET LES LISTES AUTOMATIQUES 4.1 INSERER DES TITRES Vous pouvez définir jusqu'à 6 niveaux de titres. Choisissez Titre 1 dans le menu Format de paragraphe Vous donnerez ensuite un second niveau de titre aux différentes sections de votre article. Figure 5 4.2 CREER UNE LISTE NUMEROTE / UNE LISTE A PUCES Sélectionner les lignes puis utilisez l'option Liste numérotées dans le menu Format de paragraphes ou utilisez le bouton de la barre d'outils. Les numéros sont remplacés par le signe #. Passez en Prévisualisation pour apprécier le résultat. Utilisez le même principe pour obtenir une liste à puce... 4.3 CREER UNE LISTE GLOSSAIRE C'est une solution simple pour créer des retraits hiérarchiques dans une suite de paragraphes. Sélectionnez l'option Terme du menu Format de paragraphes. Dès que vous changez de paragraphe, le point d'insertion se place en retrait, et le format de paragraphe devient automatiquement Définition. Philippe TURPIN - Animateur Informatique : Bassin Centre / Bassin Est Page 3

UN EDITEUR DE PAGES HTML 5 LES FICHIERS «IMAGES» 5.1 Réduire le poids des images Plus une image est grande, plus son fichier pèse lourd et plus l'image prend de temps à s'afficher. En réduisant de moitié les dimensions d'une image (l x L), on divise par quatre son poids et donc son temps de chargement. image 300 pixels x 400 pixels = 400 Ko image 150 pixels x 200 pixels = 100 Ko Vous utiliserez pour ce faire un logiciel de retouche d'images. Vous devez aussi régler la résolution de l'image sur 72 ppp. Cette résolution correspond à celle des écrans informatiques. Une autre méthode consiste à diminuer le nombre de couleurs qui la compose. Au risque de dégrader la qualité. Une image codée en millions de couleurs (24bits) occupe trois fois plus de place que codée en 256 couleurs (8 bits) image en 16,7 millions de couleurs 150 pixels x 200 pixels = 100 Ko image en 256 couleurs 150 pixels x 200 pixels = 30 Ko Les techniques relatées dépendent aussi du type de format de fichier que vous utiliserez pour enregistrer vos images : GIF ou JPEG. Seules les images au format GIF peuvent être réduites à 256 couleurs ou moins. 5.2 CHOISIR LE BON FORMAT DE FICHIER Avantages et contraintes des formats GIF et JPEG. logo.gif photo.jpg nombre de couleurs 256 16,7 millions taille du fichier faible variable compression sans pertes avec pertes affichage progressif oui oui animation oui non transparence oui non Préférez le GIF pour les images simples avec peu de couleurs et le JPEG pour les photographies. 5.3 LES AVANTAGES DU GIF Le format GIF produit des images légères qui peuvent être animées ou rendues transparentes afin qu'elles s'incrustent harmonieusement dans les pages Web. Dans une image GIF, vous pouvez rendre transparente la couleur de votre choix. La couleur en question disparaîtra lorsque l'image s'affichera dans le navigateur. Pour cela, après avoir double cliqué sur l image, choisissez Définir «Transparence et entrelacement» dans la palette d'image de CLARIS HOME PAGE Page 4

CLARIS HOME PAGE 2.0 Déplacez le curseur sur l'image puis cliquez sur la couleur à éliminer avec la pipette. Supprimer la transparence Figure 6 Entrelacé Non entrelacé Cette opération n'est pas irréversible : pour retrouver la couleur d'origine, cliquez sur l'icône Supprimer la transparence. Le GIF permet également de créer de petites animations.(succession d'images GIF) La transparence est très utile pour "alléger" visuellement les images, mais évitez le cumul avec l'entrelacement. Certains navigateurs ne savent pas afficher correctement ce type d'images, ce qui peut poser de gros problèmes à vos visiteurs. 5.4 LA COMPRESSION JPEG Le format JPEG permet de compresser les images plus ou moins fortement, au prix d'une perte de qualité. Le but du jeu consiste à trouver le bon taux de compression sans que cette dégradation soit gênante à l'œil nu. La qualité dépend pour beaucoup de la qualité de l'original. JPEG détruit l'image petit à petit : évitez de recompresser une image déjà sauvée sous une forme compressée. La bonne méthode consiste à effectuer l'exportation JPEG à partir de l'image originale en utilisant la fonction Enregistrer sous... 6 INTEGRER DES IMAGES DANS UNE PAGE 6.1 IMPORTER DES IMAGES A l'aide du menu Edition / Préférences, indiquez l'emplacement du dossier contenant les images, lequel doit se trouver dans votre dossier local. Cliquez sur l'icône Importer une image de la barre d'outil puis allez la chercher dans votre répertoire. Importer une image Figure 7 Philippe TURPIN - Animateur Informatique : Bassin Centre / Bassin Est Page 5

UN EDITEUR DE PAGES HTML Ne pas modifier l emplacement de l image par la suite! ATTENTION, si l'image est au format BMP, CLARIS HOME PAGE créera une nouvelle image au format GIF! 6.2 MANIPULER UNE IMAGE Pour déplacer une image, il suffit de la prendre avec la souris et de la déposer à l'emplacement souhaité. Cliquer une fois sur l'image permet de la sélectionner. Les poignées qui apparaissent servent à ajuster sa taille. Si vous appuyez sur la touche Majuscule pendant la mise à l'échelle, l'image conserve les mêmes proportions que l'original. La palette flottante apparaît en cliquant deux fois sur l'image. Vous pouvez maintenant fixer les dimensions de l'image en pixels ou en pourcentage. «Taille initiale» permet de retrouver la taille d'origine. Pour une meilleur qualité d'affichage, les dimensions de l'image doivent être fixées dans le logiciel graphique et non dans CLARIS HOME PAGE. 6.3 LES TECHNIQUES D'ALIGNEMENT Une image isolée dans la page Web s'aligne comme le texte.(à gauche, au centre ou à droite) Si l'image est insérée dans le texte, elle suit le même alignement que ce dernier. Mais on peut forcer cet alignement grâce à la palette de réglage de l'image. ATTENTION, aucune différence n'apparaîtra dans CLARIS HOME PAGE. Utilisez le navigateur pour vérifier le résultat. 7 CREER DES LIENS HYPERTEXTE 7.1 CREER UN LIEN SUR DU TEXTE C'est relier deux pages Web par un lien de navigation hypertexte. Sélectionnez le texte concerné puis cliquez sur l'icône Editeur de lien située dans la barre d'outils. Editeur de lien Figure 8 Choisir le fichier Menu déroulant Avec le bouton Fichier, choisissez sur le disque dur le fichier de la page Web qui s'ouvrira lorsque l'on cliquera sur ce lien. Sauvegardez votre page puis passez en mode Prévisualisation pour vérifier immédiatement le fonctionnement de ce premier lien. En survolant le lien, la souris change de forme et le nom de la page Web concernée s'affiche en bas de la fenêtre. Vérifier maintenant cette page dans le navigateur. La page concernée par le lien s'affiche dans la même fenêtre, en remplacement de la précédente. Page 6

CLARIS HOME PAGE 2.0 7.2 ATTACHER UN LIEN A UNE IMAGE Cette fonction vous permettra de concevoir un système de navigation graphique reposant sur des boutons et non plus sur du texte. Placez par exemple une flèche en bas de la page et, éventuellement, réajustez sa taille d'affichage. Sélectionnez l'image (un cadre noir doit l'entourer) puis cliquez sur l'icône Editeur de lien. Si la page cible est déjà ouverte, utilisez le menu déroulant pour la désigner, sinon cliquez sur Fichier comme à l'étape précédente. (cf. figure 8) Un cadre bleu entoure alors l'image. Pour le supprimer ou en modifier la largeur, cliquez deux fois sur l'image. Indiquez dans la case Contour l'épaisseur du trait. La valeur "0" fera disparaître le contour Figure 9 Le contour n'est plus visible mais le lien reste actif. Pour le vérifier, ouvrez la page dans le navigateur. Pensez à dessiner sur papier la structure de navigation générale du site avant de vous perdre!!! 7.3 CHANGER LA COULEUR DES LIENS La couleur des liens hypertexte (par défaut bleue) peut varier pour deux raisons. Soit parce que l internaute a déjà cliqué dessus. Soit parce qu'il a choisi d'en modifier l'aspect dans son navigateur. 8 COULEUR ET IMAGE DE FOND 8.1 CHANGER LA COULEUR DE FOND Pour donner une couleur au fond de la page, allez dans Options de document puis activez l'onglet général. (cf. Figure 1) Choisissez la couleur qui vous convient et confirmer par OK Vous pouvez modifier la couleur du texte pour l'harmoniser au fond. (choisissez des couleurs tranchées). ATTENTION : Les préférences de couleur choisies par les internautes dans les navigateurs sont prioritaires. 8.2 REMPLIR LA PAGE AVEC UN MOTIF REPETITIF Mieux qu'un simple fond uni, vous pouvez utiliser une image GIF ou JPEG pour tapisser votre fond d'écran. Dans l'option Image de fond cliquez sur Définir puis choisissez sur votre disque dur l'image qui vous intéresse. (cf. figure 2) Il n'y a pas de limitation de taille pour l'image du motif de fond. En revanche, celle-ci a un poids qu'il ne faut pas négliger dans le temps de chargement de la page. Philippe TURPIN - Animateur Informatique : Bassin Centre / Bassin Est Page 7

UN EDITEUR DE PAGES HTML 8.3 TRANSPARENCE ET IMAGE DE FOND Insérez une image, puis après avoir cliqué deux fois sur celle ci, sélectionnez Transparence et entrelacement et Définir. Cliquez avec la pipette sur la couleur à éliminer. Enregistrez les modifications. 9 DES ANCRES POUR SURFER SUR UNE PAGE 9.1 INSERER DES ANCRES DANS LE TEXTE Les ancres facilitent la consultation des longs textes. Elles permettent d'accéder aux différents paragraphes d'un texte en cliquant sur des liens hypertexte qui ne fonctionnent que dans la page concernée. Pour «baliser» un texte, nous allons créer une ancre en plaçant le point d'insertion devant la première ligne d'un paragraphe. Cliquez alors sur le bouton Point d'ancrage de la barre d'outils. Les ancres doivent être nommées. (Evitez les accents). Figure 10 Editeur de lien Créer une ancre Un symbole apparaît dans la page. (Il disparaîtra en mode Prévisualisation). 9.2 CREER DES LIENS VERS LES ANCRES Pour créer un lien vers une ancre, sélectionnez le texte qui supportera le lien puis cliquez sur l'icône Editeur de lien. Dans le menu déroulant, apparaissent toutes les ancres qui ont été créées dans cette page Web. Choisissez celle qui convient. Dans ce cas, les liens hypertexte sont précédés du caractère dièse (#). Vous pouvez utiliser le navigateur pour vérifier le bon fonctionnement des liens. 9.3 ORGANISER LA NAVIGATION Sauter de la table des matières à l'autre extrémité de la page, c'est bien. Mais pourquoi ne pas créer des chemins inverses qui, à partir d'un endroit quelconque de la page conduiront vers la table des matières? Avant toute chose, nous placerons une nouvelle ancre au tout début de la table des matières. Sur cette ancre pointeront de nouveaux liens. A la fin du premier paragraphe saisir le texte Table ou Retour. Il nous servira de renvoi vers la table des matières. Créez un lien qui pointera vers l'ancre intitulée Sommaire. Dupliquez ce lien pour le placer en fin de chaque paragraphe. Page 8