Conception de pages HTML sous FrontPage Express Le logiciel utilisé sera l'éditeur de Frontpage Express livré gratuitement avec Internet Explorer 4 et 5, il possède un tronc commun de fonctionnalités partagées par la plupart des éditeurs du marché (freeware et shareware compris). Voici les fonctionnalités offertes par FrontPage Express : - Création et ouverture de pages HTML - Création et possibilité de test des liens hypertexte - Saisie et édition de texte - Création et édition de tableaux - Utilisation de Webbot - Intégration de composants Active/X, Java et Plug-ins. Voici ce qui n'est pas intégré dans FrontPage Express : - Copier ou Glisser/Déplacer, insérer des fichiers Office97 - Prévisualisation avec afficheur - Les feuilles de style, "les Dynamic HTML" - Les fenêtres (frames, encore appelées cadres) - La gestion des zones réactives d une image. La barre d outils de FpExpress Alignement des paragraphes taille des caractères Styles Polices Format et couleurs des caractères Numéros et puces indentation des paragraphes Ouvrir une page existante Outils formulaires Nouvelle page Insérer un tableau Insérer une image Insérer un hyperlien Afficher tous les caractères IUFM de Reims - J. Bresson - Conception de pages html sous page /6
Saisie et mise en forme du corps du document Sur une nouvelle page vierge, le texte est saisi naturellement comme on le ferait sous un traitement de texte. Lors de la saisie de texte, c'est la police par défaut de l'éditeur qui est utilisée (modifiable par la commande Options de police du menu Outils). Il faut utiliser des polices classiques (elles doivent pouvoir être affichée par le navigateur de l'utilisateur), en général Arial et Times News Roman. Attention, les polices fantaisies ne sont pas forcément présentes sur les postes de travail de la majorité des "internautes", c'est alors la police par défaut du navigateur qui est mobilisée. Remarque :Si l'on souhaite absolument un graphisme particulier, il conviendra soit d'intervenir dans le code HTML pour indiquer après la déclaration de police désirée, le nom d'une police de remplacement (avec le point virgule comme séparateur (exemple : <p><font face="franklin gothic demi cond";face="arial">texte</font></p>), soit de procéder à une copie partielle de l'écran contenant le texte et de la coller comme une image dans la page HTML. Par curiosité, il est possible de regarder le code Html généré c'est dans ce code qu'il sera possible par exemple de rajouter une balise pour préciser les mots-clés sur lesquels certains moteurs de recherche pourront indexer la page (par exemple : <META NAME="keywords" CONTENT="iufm Reims organigramme formation professeurs">) Les styles Ces styles sont des styles propre au langage Html standard. Il existe 6 styles de titres, de T1 à T6. Le style T4 équivaut à du Normal en corps avec l'attribut "Gras". Les espaces entre les paragraphes sont importants, on pourra remplacer certaines marques de paragraphes par des retours à la ligne (<Maj>+<Entrée>) Attention, avec un traitement de texte on peut être tenté d insérer plusieurs marques de paragraphes vides pour augmenter l espacement entre les paragraphes. Avec de nombreux autres éditeurs, l'insertion de plusieurs paragraphes vides n'est pas prise en compte au niveau du code HTML. Il convient alors d'insérer avant la marque de paragraphe un espace insécable (en général avec la combinaison de touches : <Ctrl>+<Maj>+<Espace>). On citera également un style souvent utilisé «liste à puces» qui permet de souligner une énumération. Les tableaux Les tableaux permettent de positionner parfaitement des blocs de textes ou des images. Insertion d'un tableau avec l'icône de la barre d'outils. (On dessine les tableau en gardant le doigt appuyé sur le bouton gauche de la souris : ici un tableau de 2 lignes et deux colonnes) IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide page 2/6
Un «clic droit» sur un tableau permet d accéder au menu contextuel permettant de modifier les propriétés du tableau ou d'une cellule ou groupe de cellules sélectionnées ou le tableau lui-même. La taille d'un tableau peut être spécifiée en pourcentage de la largeur de la fenêtre (d'affichage du navigateur utilisé pour regarder la page) ou être exprimée sous la forme d'une valeur déterminée de pixels. En spécifiant la largeur du tableau en pixels, on évite la recomposition du contenu des cellules en fonction de la largeur de la fenêtre réservée au navigateur de l'utilisateur final. La bordure peut ne pas être visible si on lui affecte une taille 0 (ce qui est pratique pour aligner des «pavés» de texte sans que le quadrillage du tableau apparaisse. Remarques : Lorsque l on souhaite façonner un tableau avec beaucoup de particularisme il est possible de jouer avec les commande «fractionner cellule» ou «fusionner cellules» du menu tableau. Par ailleurs, un tableau peut être inséré dans une cellule d un autre tableau Les images L'outil permet l'insertion d'une image. Par défaut, lorsqu'une image est insérée dans du texte elle est placée sur la ligne de base du paragraphe, comme un caractère. Les options du menu contextuel (par un clic droit sur l image) "propriétés de l'image" permettent certains alignements horizontaux ou verticaux, mais le positionnement précis nécessite l'utilisation d'un tableau. Remarque : dans la version Express de FrontPage, à la différence de la version complète, on ne dispose d aucun outil pour modifier l image (hormis la possibilité de jouer sur la taille et le format d enregistrement Gif ou Jpg) Attention : A la différence d un fichier Word, lorsqu une image est insérée, elle n est pas insérée dans le fichier Html généré. Elle a une existence propre sur le disque dur. Ma_page.html Ma_page.doc Img2.gif Img1.gi f Page Html ne contenant que du texte et un lien vers les images qui sont stockées séparément. Une page Html ne contient que du texte, ce dernier contient des «appel» à des images dont les fichiers sont distincts de la page, les balises Html assurant leur positionnement au moment de l affichage dans un navigateur. IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide page 3/6
Par exemple voici le code Html qui décrit le placement de deux images : <p><img src="file:///c:/gifs%20animées/ani_cat.gif" width="100" height="60"><img src="aniheart.gif" width="40" height="40"></p> L image ani_cat.gif est située dans le dossier Gifs animés du disque dur C, le chemin est précisé dans le code de la page html. Lorsque la page sera stockée sur une machine hôte (un serveur distant), au moment de l affichage de la page, l image en question sera recherchée dans le répertoire C:/Gifs%20animées/. Aura-t-on pris soin de publier également ces images dans un répertoire de même nom sur le serveur? Si oui tout se passera bien, sinon l image ne sera pas trouvée et donc pas affichée. L image aniheart.gif quant à elle est recherchée dans le répertoire courant, elle sera trouvée sans problème si tous les fichiers du répertoire courant sont copiés vers le serveur. Conclusion : Il convient de créer un répertoire qui contiendra tous les éléments du sites (images, sons, pages html) pour être sur de ne pas en oublier au moment du transfert vers le site d hébergement. Si l on souhaite travailler plus proprement encore on pourra créer un répertoire qui contiendra à la fois les pages et un autre répertoire qui contiendra lui-même les images. C est l ensemble du répertoire «mon site» qui sera transféré, le texte des pages contiendra alors des chemins relatifs pour indiquer l emplacement des images dans le sous répertoire c:\mon_site page1.htm page2.htm page3.htm c:\monsite\mes_images img1.gif img2.jpg img3.jpg img4.gi L'arrière-plan d'une page Pour attribuer un arrière-plan à une page, utiliser la commande des propriétés de la page (clic droit dans le corps d'une page ou commande propriétés du menu fichier). L onglet arrière plan permet d ajouter un fond à la page, fond qui peut être simplement de couleur unie ou constitué d'une image reproduite autant de fois que nécessaire pour couvrir le fond de l'écran Attention, (et bien que les commandes présentes dans cette boîte de dialogue y invitent), sauf pour respecter une charte graphique contraignante, il n est pas souhaitable de modifier les couleurs par défaut des liens présents dans une page, ils sont plus facilement repérables s ils conservent leurs couleurs standard. IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide page 4/6
Identifier la page Le titre de la page figurera dans la zone de titre du navigateur, alors que le nom de fichier permet de désigner la page lors de la mise en place des liens voire de la manipuler avec l'explorateur Windows. Donner un titre à la page (menu fichier/propriétés ou clic droit pour avoir le menu contextuel). Ce nom de page est important puisque de nombreux moteurs de recherche permettent une recherche de pages sur leurs titres. Enregistrer la page (Fichier / enregistrer ) et donner un nom au fichier (attention, rester sobre sur le nom du fichier 8 caractères sans espace, le tout en minuscules). Noter la conversion automatique des images BMP en GIF ou JPEG lors de l'enregistrement (elles sont moins coûteuses en place). Mise en place de liens pointant vers d'autres pages Saisir le texte d'un lien, le sélectionner puis activer l outil de création/édition de lien Pour lier vers des pages existante, FrontPage Express impose que les pages soient ouvertes dans l éditeur. Prendre garde à ce que l'adresse (du document) choisie ne prenne pas en compte le chemin complet pour conduire à la page, mais simplement un chemin partiel si nécessaire pour atteindre un sousrépertoire du répertoire courant Pour lier vers un fichier ou une adresse électronique on choisira le type de lien adapté dans la liste déroulante (file : pour un fichier, mailto : pour provoquer l ouverture du logiciel de messagerie). Tester les liens dans le navigateur (et/ou dans l'éditeur en appuyant sur le touche <Ctrl> le pointeur de la souris change de forme lorsqu il survole un lien, il permet de suivre le lien en cliquant dessus). Remarques : Dans la mesure où les liens apparaissent soulignés, le soulignement de texte dans le seul but d'attirer l'attention du lecteur sera exclu. On évitera de modifier les couleurs des liens car les couleurs traditionnelles facilitent l'identification des liens par le lecteur qui consulte les pages (hormis, le cas où une charte graphique a été créée et soumise à des tests). Liens depuis une image : l'image étant sélectionnée, il suffit de cliquer sur le bouton renseigner la boîte de dialogue de la même manière que précédemment. et de IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide page 5/6
Mise en place de liens internes à une page Ces hyperliens pointent vers une autre zone de la même page (cible sous Gold de Netscape, Signet sous Word et Frontpage) 1ère méthode 1 Insertion d'un signet sur l'emplacement de la page à atteindre : menu Edition-->Commande Signet Attention, une image ne peut constituer un signet, il conviendra de mettre un espace adjacent pour pouvoir mettre en place le signet. 2 : Définition de la destination du lien commande Lien Hypertexte du menu Insertion (Choix de la page à atteindre et du signet sur la page) 2 ème méthode Sans avoir préalablement créé des signet, il est possible de générer un hyperlien et son signet associé en une seule manipulation. 1 Sélectionner les mots devant constituer le signet 2 Faire un <clic droit> et glisser le pointeur de souris jusqu'à l'endroit souhaiter pour la mise en place de l'hyperlien 3 Relâcher le bouton droit et choisir "Lier ici" Le signet et le texte du liens sont créés automatiquement. Attention, cette méthode ne fonctionne qu'à l'intérieur d'une même page. Transfert des pages vers un site d'hébergement L'ensemble des pages créées (avec les liens entre elles) constitue un site stocké sur le disque dur d'un micro-ordinateur, accessible depuis n'importe quel navigateur depuis un autre microordinateur du même réseau local, mais il ne peut être vu par un "internaute", que s'il est stocké sur un ordinateur relié en permanence à Internet ; en général, chez un fournisseur d'accès qui offre un hébergement gratuit de quelques méga-octets. Il convient alors de transférer ces pages vers le site d'hébergement avec un logiciel FTP (File Transfert Protocole) que l'on trouve en freeware ex : Ftpexpert. Attention : Il faut lire avec attention les consignes fournies par votre site d hébergement tant pour le login de connexion (tantôt il faut préciser le chemin exact dans lequel on souhaite se rendre et qui correspond à l espace qui vous est réservé sur le disque de la machine hôte, tantôt il ne faut rien préciser (exemple chez Wanadoo il convient de s adresser à la machine perso-ftp.wanadoo.fr sans préciser son propre répertoire, c est l identifiant (nom de messagerie) et le mot de passe (identifiant de messagerie pour les pages perso de Wanadoo) qui permet à la machine hôte d identifier l utilisateur et donc de proposer en lecture écriture le seul répertoire autorisé. Par ailleurs, le fournisseur d espace d hébergement vous invite à identifier d une manière précise votre page d accueil pour que le serveur puisse la reconnaître facilement et la proposer par défaut (suivant les cas il faudra la nommer index.htm ou.html ou encore.shtml voire default.htm). Et pour ensuite être lu il faudra vous faire référencer en vous signalant aux différents moteurs de recherche IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide page 6/6