Créer sa page Web en 10 étapes

Transcription

1 Créer sa page Web en 10 étapes

2 Créer sa page Web en 10 étapes Visicom Média inc. Tous droits réservés La reproduction d un extrait quelconque de ce manuel, par quelque procédé que ce soit, tant électronique que mécanique, en particulier par photocopie et par microfilm est interdite sans autorisation écrite de l éditeur. Visicom Média inc. 6200, Boulevard Taschereau suite 401, Brossard (Québec) J4W 3J8 WebExpert et FTPExpert sont des marques de commerce déposées au Canada par Visicom Média inc. WebExpert est une marque de commerce déposée en France par la société KTT ( Toutes autres marques citées dans ce manuel ont été déposées par leur éditeur respectif. Équipe de production : Responsable de projet chez Visicom Média : Dominic Tremblay et Julie Langlais Conception et rédaction du tutoriel : Mireille Chevalier, Complétif Révision linguistique : Olivier Perreault-Smith, Complétif Mise en page : Complétif 1 er trimestre 2002

3 Créer sa page Web en 10 étapes Table des matières CRÉER UNE PAGE WEB ET LA SAUVEGARDER... 3 La création d un document avec WebExpert Les modèles de site...3 Créer une page Web...4 Sauvegarder une page Web...5 SAISIR LE TEXTE... 7 L édition du texte...7 Les principes d insertion du texte...7 Saisir le texte...8 APPLIQUER LA MISE EN FORME La mise en forme d une page Web...11 Modifier la mise en forme du texte et des paragraphes...11 Modifier la mise en page...13 VISUALISER LES RÉSULTATS Afficher le navigateur interne...15 Ancrer le navigateur interne...15 Afficher le navigateur externe...17 INSÉRER DES TABLEAUX L utilisation des tableaux pour la mise en forme...18 Insérer un tableau...18 Modifier un tableau...19 Taper du texte dans un tableau...19 Fusionner les cellules...20 Insérer des cellules...20 Appliquer une mise en forme au texte dans un tableau...21 Modifier les propriétés du tableau...21 Modifier les propriétés des cellules...22 Insérer un tableau rapide...23 INSÉRER DES IMAGES Le format des fichiers images...26 Insérer une image...27 Insérer une image rapide...28 Modifier les propriétés des images...29 INSÉRER DES LIENS HYPERTEXTES Les liens hypertextes...31 Définir un lien interne...31 Définir un lien externe vers une page du Web...33 Définir un lien externe vers une adresse de courriel...35 INSÉRER DES JAVASCRIPT Créer un effet de texte avec un JavaScript...37 CRÉER UN FORMULAIRE La feuille de formulaire...40 Le contenu d un formulaire...40

4 II T ABLE DES MATIÈRES Créer une feuille de formulaire...41 Insérer un champ de formulaire Boîte de texte...42 Insérer un champ de formulaire Liste déroulante...43 Insérer un champ de formulaire Cases à cocher...44 Insérer un champ de formulaire Cases radio...45 Insérer des boutons Soumettre et Recommencer...46 DIFFUSER SUR UN SITE FTP La publication de votre site Web...49 L utilisation du module FTP de WebExpert...50 Sauvegarder un document sur un site FTP...50

5 Introduction Créer sa page Web en 10 étapes Ce tutoriel a pour objectif de vous suivre pas à pas dans la construction d une page Web à l aide des outils proposés par WebExpert 5. Dix étapes vous sont proposées durant lesquelles vous verrez comment : 1. Créer un nouveau document et le sauvegarder. 2. Taper du texte sur la feuille d édition et à l intérieur des balises. 3. Appliquer une mise en forme aux paragraphes avant et après l entrée du texte. 4. Configurer les navigateurs internes et externes pour visualiser l avancement de votre travail de conception. 5. Utiliser les tableaux pour disposer l information sur votre page. 6. Insérer des images sur la page de texte et à l intérieur d un tableau. 7. Définir des liens hypertextes à l intérieur de votre page et vers l extérieur. 8. Insérer un JavaScript prédéfini dans votre document. 9. Créer une zone de formulaire sur votre page pour recevoir les informations par courriel. 10. Publier vos pages Web à l aide du module spécialisé de WebExpert. Vous préparer aux exercices Certains exercices requièrent l utilisation d images. En vous procurant le tutoriel, vous avez téléchargé des fichiers d exercice qui ont été installés dans le répertoire C:\Program Files\Visicom Media\WebExpert5\tutoriel. Copiez ces fichiers dans votre répertoire de conception. Certains de ces fichiers seront utilisés maintenant, d autres le seront à l étape 7. Nous allons donc créer un dossier pour classer ces fichiers à l intérieur du dossier principal de votre site. 1. Cliquez sur le bouton Gestionnaire de fichiers de la barre d outils Standard. Cliquez sur ce bouton pour créer un nouveau répertoire. 2. Dans le répertoire C:/Mes documents/monsite, créez un sous-dossier que vous nommerez Images. 3. Cliquez sur le bouton Dossiers pour afficher l arborescence des fichiers sur le disque.

6 É TAPE 1 CRÉER ET SAUVEGARDER UNE PAGE W EB 2 4. Dans le volet gauche, sélectionnez le répertoire du programme WebExpert qui contient les fichiers images : C:\Program Files\Visicom Media\WebExpert5\tutoriel. 3. Copiez les fichiers suivants dans le répertoire Images du dossier MonSite que vous venez de créer. ligne.gif theatre.gif journaux.gif courriel.gif Remarque à propos des images utilisées pour les exercices : Certaines des images utilisées ici ont été téléchargées du site Web GoGraph (

7 Étape 1 Créer une page Web et la sauvegarder La création d un document avec WebExpert 5 WebExpert permet de créer différents types de document : Des documents HTML standard. Des documents XHTML, la dernière version évoluée du code HTML. Lorsque vous créez un document XHMTL, l'en-tête approprié à ce type de document est généré. L'optimiseur de code vous permet par la suite de convertir un document HTML en XHTML. Des documents XML, le langage de programmation de pages Web avancé qui permet entre autres un traitement complexe de données. Des documents JavaScript qui permettent d élaborer des scripts externes que vous pourrez lier à vos documents HTML. Des documents CSS (Cascading Styles Sheet) qui pourront être liés à un document HTML pour raffiner la mise en forme. Des documents PERL qui permettent d élaborer des scripts PERL qui établissent des liaisons entre un formulaire et une base de données. Des documents ASP ou PERL qui utilisent des langages de scripting, entre autres pour communiquer avec des bases de données et traiter les données. Des documents WML qui répondent aux exigences des appareils mobiles (téléphones WAP). Des documents en format texte standard qui vous permettent d intégrer divers langages de scripting en identifiant le document avec l extension appropriée. Remarque concernant la création de documents spéciaux : WebExpert est essentiellement un éditeur HTML. Lorsque vous créez des documents particuliers tels que des documents.js (JavaScript).css (feuille de styles) ou.asp, WebExpert crée l en-tête du document. Vous pouvez personnaliser l en-tête des documents à l aide des Préférences générales de WebExpert : Outils>Préférences générales, menu Éditeur>Format du document. Les assistants à la génération de scripts, qui se trouvent sur l onglet Spécialisés de la barre d onglets, facilitent le travail de rédaction des lignes de codes pour les langages JavaScript, ASP, PHP et WML. Les modèles de site WebExpert met à votre disposition toute une gamme de modèles de sites prédéfinis : du plus simple, constitué d une seule page par exemple pour vous aider à publier votre curriculum vitæ à des modèles plus complexes utilisant des pages à cadres idéales pour construire un site de plusieurs pages avec une navigation efficace. Lorsque vous utilisez les modèles, WebExpert construit dans votre répertoire principal une structure de dossiers pour vous permettre de gérer efficacement vos fichiers. Vous avez également la possibilité de créer votre propre modèle de site Web, à partir d un exemple, en l ajoutant à la liste des modèles disponibles (accessible ensuite avec la commande Fichier>Ouvrir).

8 4 ÉTAPE 1 CRÉER ET SAUVEGARDER UNE PAGE W EB Remarque concernant les modèles : Les utilisateurs d une version enregistrée de WebExpert peuvent télécharger gratuitement la banque de modèles sur le site Web de Visicom à l URL : La banque de modèles est fournie sous la forme d un fichier exécutable et s installe comme une application. Créer une page Web 1. Dans le menu Fichier, cliquez sur la commande Nouveau. La fenêtre Nouveau document apparaît. Vous pouvez choisir le type de document ou encore puiser dans la banque des modèles de WebExpert. Les modèles WebExpert prédéfinis sont disponibles à partir de ces onglets. 2. Sur l onglet Nouveau, choisissez Document HTML et cliquez sur le bouton OK. Vous pouvez également double-cliquer sur l icône Document HTML. 3. WebExpert fait apparaître une feuille d édition contenant déjà les informations nécessaires à la création du document, soit les balises d en-tête <head> </head> et de corps de document <body> </body>, ainsi que quelques informations contenues dans la tête du document <meta>. Les informations inscrites entre les balises <-- et --> sont des commentaires. Elles n apparaîtront pas lors de l affichage de la page sur le navigateur. Vous pouvez personnaliser l en-tête des documents à l aide des Préférences générales de WebExpert : Outils>Préférences générales, menu Éditeur>Format du document.

9 5 ÉTAPE 1 CRÉER ET SAUVEGARDER UNE PAGE W EB Vous êtes maintenant prêt à entrer votre texte et les autres éléments que vous voulez intégrer à la page. Remarque concernant le code HTML : Si vous êtes peu familier avec le code HTML, voici quelques explications qui pourront vous guider : La plupart des codes HTML sont constitués d une balise d ouverture et d une balise de fermeture. Deux éléments les distinguent : Seule la balise d ouverture peut recevoir des attributs, par exemple un attribut de couleur <color> pour la police de caractères <font>. La balise de fermeture a toujours une barre oblique à l intérieur de ses crochets, par exemple </font>. Le document HTML est encadré par les balises <html> et </html>. La tête du document le titre de la page qui apparaît sur la barre de titre du navigateur, les mots-clés nécessaires à l indexation du site, etc. est encadrée par les balises <head> et </head>. Le corps du document le texte, la mise en forme et les éléments qui apparaissent au navigateur est encadré par les balises <body> et </body>. Les balises head et body sont intégrées l une à la suite de l autre, à l intérieur des balises <html>. Sauvegarder une page Web 1. Dans le menu Fichier, cliquez sur la commande Sauvegarder. Puisqu il s agit du premier enregistrement du document, cette commande a le même comportement que la commande Sauvegarder sous qui permet de sauvegarder un document sous un autre nom. La fenêtre Sauvegarder un fichier apparaît. Barre d outils permettant la navigation sur le poste de travail. 2. Dans la zone Regarder dans, sélectionnez le lecteur et le répertoire à l intérieur desquels vous voulez sauvegarder votre document. Vous pouvez travailler directement dans la fenêtre d exploration. Double-cliquez sur un dossier pour l ouvrir. Dans le répertoire Windows Mes documents, créez un sous-dossier que vous nommerez MonSite à l aide du bouton et positionnez-vous à l intérieur. 3. Une fois la localisation définie, identifiez votre fichier en tapant son nom dans la zone Nom de fichier. Nommez le fichier index.html. 4. Vérifiez l extension de format de fichier proposée. Par défaut, lors de la sauvegarde d un document HTML, WebExpert propose.htm ou.html. Si votre fichier ne porte pas cette extension, les navigateurs risquent de ne pas l interpréter comme étant une page Web et, par conséquent, d afficher en lieu et place un message d erreur. 5. Une fois que vous êtes positionné dans le bon dossier de classement et que le fichier est bien identifié, cliquez sur le bouton Sauvegarder.

10 6 ÉTAPE 1 CRÉER ET SAUVEGARDER UNE PAGE W EB Remarque concernant les dossiers : À la première utilisation, WebExpert se positionne dans le dossier de ses programmes. Veillez à ne pas enregistrer de documents à l intérieur de ce dossier. Par la suite, WebExpert conserve en mémoire le dernier dossier à l intérieur duquel vous avez travaillé. Remarque concernant les noms de fichiers : Attention à la manière dont vous nommez vos fichiers. Les serveurs d hébergement peuvent parfois être très capricieux et mal interpréter certains caractères dans leurs noms. Il est fortement suggéré de respecter les conventions suivantes : Évitez l utilisation des caractères accentués. Évitez l utilisation des symboles. Évitez l utilisation des caractères d espacement. Au besoin remplacez-les par le trait de soulignement (par exemple «ma_page.html»). Évitez l utilisation des majuscules. Nommez la page principale de votre site index.html. Votre serveur d hébergement est configuré pour reconnaître ce nom de fichier comme étant la page par défaut d un site Web. C est la raison pour laquelle l internaute n a pas à taper le nom du document dans la barre d adresses. Si aucun fichier index.html n est présent dans le répertoire racine du site, le serveur affichera soit l arborescence du répertoire, soit un message d erreur. Les serveurs Web interprètent plusieurs types de fichier, chacun ayant sa propre extension. Par exemple.xml,.asp,.php, etc. Au moment de la sauvegarde, choisissez l extension appropriée qui permettra au serveur d identifier le langage utilisé dans le document. Résultat de la première étape avec le Gestionnaire de fichiers WebExpert : Affichez le Gestionnaire de fichiers de WebExpert pour voir la structure de votre site. En plus de permettre les diverses manipulations de gestion de fichiers (copier, renommer, supprimer, etc.), le Gestionnaire de fichiers permet d obtenir un aperçu. Il vous donne également accès à des fonctionnalités pour insérer des liens et des images dans votre document. Sélectionnez un fichier sur le volet droit de la fenêtre pour obtenir son aperçu sur le volet gauche.

11 Étape 2 Saisir le texte Vous pouvez saisir le texte selon la méthode que vous privilégiez : en tapant tout le texte qui doit apparaître sur la page, et en appliquant la mise en forme par la suite, en appliquant la mise en forme au fur et à mesure de l entrée du texte. Exemple d application de mise en forme du texte : Vous voulez appliquer du caractère gras sur du texte. Première méthode : Entrez votre mot, sélectionnez-le et cliquez sur le bouton Gras de l onglet Communs. Seconde méthode : Cliquez sur le bouton Gras de l onglet Communs. WebExpert insère les balises <b> et </b>. Positionnezvous entre les deux balises et tapez votre texte <b>mot en gras</b>. Consultez l étape 3 pour en savoir plus sur la mise en forme du texte et la mise en page du document. L édition du texte Les principes d édition de texte avec WebExpert respectent les standards des applications fonctionnant sous Windows : Vos manipulations s exécutent là où se trouve votre curseur. La sélection du texte se fait de la manière habituelle. Le déplacement et la copie du texte utilisent les commandes habituelles (couper copier coller ou à l aide du glissement de la souris). Les raccourcis clavier peuvent vous aider à devenir plus performant. Les principes d insertion du texte Selon la tâche que vous êtes en train d exécuter, vous pouvez saisir le texte dans les boîtes de dialogue (par exemple lorsque vous construisez un tableau) ou directement sur la feuille d édition. C est là une particularité de WebExpert. En travaillant sur la feuille d édition, vous vous trouvez à travailler à la fois avec le texte et avec le code HTML. Il faut donc être prudent pour ne pas modifier la syntaxe des balises HTML. Pour taper du texte sur la feuille d édition : Une fois la balise insérée, WebExpert insère les codes appropriés. 1. Tapez le texte entre la balise immédiatement à la suite de la balise d ouverture. 2. Si une balise de fermeture est présente, tapez le texte entre les deux balises.

12 8 É TAPE 2 SAISIR DU TEXTE Exemples d entrée de texte : Si vous travaillez avec un style de liste non-ordonnée (liste à puces), WebExpert insère la balise <li> pour marquer chaque début d item. Il n y a aucune fin de balise pour l élément li. Dans cet exemple, vous devez saisir entre les balises d ouverture <li> et de fermeture </li>. Par contre, si vous travaillez avec une balise qui requiert la présence d une balise de fermeture, vous devrez en tenir compte pour appliquer adéquatement la mise en forme. Dans l exemple suivant, deux balises ont été utilisées : <font> et <b>. Seuls les mots «balises d ouverture» seront en caractères gras en navigation, car ils sont encadrés par les balises <b> </b> (b pour bold gras), Les attributs de la police s appliqueront toutefois à l ensemble des mots de la phrase puisque cette dernière est totalement encadrée par les balises <font> et </font> (pour police). Remarquez dans l exemple précédent les coupures de ligne. Ces dernières ne sont visibles que sur la feuille d édition pour vous permettre un meilleur repérage des informations. Pour que les sauts de paragraphe et les sauts de ligne soient effectifs avec un navigateur, vous devez nécessairement utiliser les balises appropriées (BR pour une nouvelle ligne et p pour un saut de paragraphe). Remarque concernant la vérification du code HTML : Vous pouvez demander à WebExpert d évaluer et de vérifier votre document. Ceci pourra vous aider à trouver les erreurs qui pourraient s être glissées sur votre feuille d édition. L évaluation du document vous permet d évaluer : Le poids du document HTML. Le poids du document en tenant compte des liens. L évaluation de la vitesse de transfert en tenant compte de la rapidité des différents modems. Le recensement des erreurs dans le document et de l invalidité des liens. Si des erreurs et des liens invalides étaient présents, il sera nécessaire alors d exécuter une vérification du document pour en connaître les détails. La vérification, quant à elle, vous permet de vérifier l organisation syntaxique du code HTML. Les commandes de vérification syntaxique du code HTML et d évaluation de documents se retrouvent dans le menu Syntaxe. L Optimiseur de code, accessible sous le menu Outils, vous donne accès à diverses commandes permettant de nettoyer votre document afin de le rendre plus efficace. Cette commande vous permet également de convertir un document HTML en document XHTML (onglet Options d embellissement de l Optimiseur de code). Saisir le texte 1. Ouvrez le document index.html créé à la première étape de ce tutoriel. 2. Dans le corps du document, saisissez le texte suivant : Bienvenue sur la page personnelle de [votre nom]. 3. Centrez le texte sur la page. a) À l aide de la souris, sélectionnez le texte que vous venez de saisir. b) Cliquez sur le bouton Centré de l onglet Communs.

13 9 É TAPE 2 SAISIR DU TEXTE La feuille d édition affiche la ligne de commandes suivante : On se souviendra que le corps du texte se situe entre les balises <body> et </body>. La fin de balise </div> marque un saut de paragraphe. Vous pouvez donc poursuivre l entrée de votre texte. 4. Cliquez sur le bouton Paragraphe de l onglet Communs pour aménager un nouveau paragraphe de texte. 5. Saisissez le texte à ajouter : Entre les balises d ouverture <p> et de fermeture </p>, saisissez la phrase suivante : Pensez-y bien, Internet nous offre la possibilité de partager nos passions et nos intérêts avec le monde entier. 6. Tapez la suite du texte en prenant soin d inclure les balises de paragraphe : Visitez ma page et découvrez des aspects de ma personnalité. Vous trouverez des liens qui sauront assurément vous intéresser. 7. Entre les deux premières phrases, insérez un changement de ligne. Cliquez sur le bouton Nouvelle ligne de l onglet Communs. 8. Enregistrez les modifications apportées au document index.html. Remarque sur les paragraphes : La notion de paragraphe et de ligne est la même qu avec un traitement de texte traditionnel. Les balises de changement de paragraphe <p> et de nouvelle ligne <br> permettent l une et l autre de définir l alignement du texte qui va suivre. La différence est : Un saut de paragraphe entraîne la mise en forme complète du paragraphe, y incluant l espacement avant. Un changement de ligne correspond à une brisure de ligne. Le texte qui suit fait encore partie du même paragraphe et il n y aura aucun espacement particulier entre les lignes.

14 10 É TAPE 2 SAISIR DU TEXTE Résultat de la seconde étape avec le navigateur interne : Affichez le navigateur interne pour voir vos résultats au fur et à mesure de votre conception. Vous pouvez également demander son auto-actualisation pour que le résultat soit le plus fidèle possible. Cette commande se retrouve sous le menu Outils>Préférences générales, menu Environnement-Visionneur interne.

15 Étape 3 Appliquer la mise en forme La mise en forme d une page Web Le Web semble offrir des possibilités illimitées de mise en forme. Considérez toutefois que la plupart des effets spectaculaires que vous pouvez voir sur la toile sont le résultat de mises en forme complexes obtenues grâce au concours de feuilles de styles ou d utilisation d éléments dynamiques comme les JavaScript. Les possibilités offertes par le code HTML se limitent à peu de chose près aux mises en forme auxquelles nous ont habitué les traitements de texte : mise en forme sur les caractères, mise en forme sur les paragraphes. De plus, puisqu il s agit de concevoir un outil multimédia, des possibilités additionnelles s offrent à vous pour permettre d attribuer à la page et ses éléments des propriétés particulières, tel que les images ou couleurs d arrière-plan et les fonds sonores. Le code HTML prévoit également l utilisation d une feuille de styles par défaut. C est-à-dire des balises qui permettent d attribuer une disposition ou une apparence particulière au texte. Par exemple, les styles de titre <h1>, <h2>, les styles de listes, les blocs de citation, etc. Avertissement concernant la mise en forme : En tant que concepteur de pages Web, vous devez tenir compte de plusieurs facteurs avant de passer à l étape de la mise en forme : La résolution d écran et le nombre de couleurs doivent être définis en fonction du résultat à atteindre et du public visé (encore plusieurs utilisateurs ont des résolutions de 640x480 avec 256 couleurs) Bien que le standard actuel d une résolution d écran soit de 800x600. Les navigateurs n interprètent pas tous les mêmes balises HTML, sinon, ne les interprètent pas de la même manière. Habituellement, ces contraintes sont identifiées avec WebExpert. Toutefois, vous auriez avantage à vérifier vos résultats avec plusieurs navigateurs. Modifier la mise en forme du texte et des paragraphes Dans le document index.html. 1. Appliquez le style de titre 1 au texte «Bienvenue». a) Sélectionnez les mots à mettre à forme. b) Cliquez sur le bouton Style de titre de l onglet Communs, et sélectionnez Style de titre 1. Le texte est maintenant encadré des balises <h1> et </h1>. 2. Modifiez la couleur du caractère. Veillez à ce que le texte soit toujours sélectionné et cliquez sur le bouton Couleur de l onglet Communs. La palette de couleurs apparaît.

16 12 ÉTAPE 3 APPLIQUER LA MISE EN FORME Pour connaître le nom des couleurs : Pointez la souris sur un échantillon. Après environ une seconde, une info-bulle apparaît. Cliquez sur une couleur pour la sélectionner. Ses coordonnées apparaîtront dans la zone inférieure de la boîte de dialogue. 3. Dans la liste déroulante, vous pouvez sélectionner un type de palette de couleurs. Pour l exercice, choisissez la palette 140 couleurs et cliquez sur la couleur Seagreen (2 e colonne, 5 e ligne). 4. Cliquez sur le bouton OK. Le texte est maintenant encadré de la balise <font> et l attribut color lui a été appliqué. Notez que la valeur de l attribut color est sa valeur hexadécimale et non le nom de la couleur. 5. Mettez votre nom en italique : Sélectionnez votre nom et cliquez sur le bouton Italique de la barre d outils Communs. Les balises <i> et </i> encadrent maintenant votre nom. 6. Brisez la ligne de bienvenue : Insérez une nouvelle ligne devant votre nom. 7. Pour mettre le premier paragraphe en évidence, vous allez lui attribuer le style Bloc de citation. a) Sélectionnez tout le texte à mettre en retrait (le paragraphe débutant par Pensez-y bien ). b) Pour marquer un bon retrait, cliquez trois fois sur le bouton Bloc de citations de l onglet Communs. c) Conservez la sélection du texte et mettez le texte en gras en cliquant sur le bouton Gras de l onglet Communs. Votre feuille d édition devrait présenter les lignes de commandes suivantes : 8. Enregistrez vos modifications.

17 13 ÉTAPE 3 APPLIQUER LA MISE EN FORME Explication sur les valeurs hexadécimales des couleurs : La valeur hexadécimale de la couleur est l expression du triplet RGB. Le RGB est la base des processus de mélange de couleurs par l intégration plus ou moins forte des couleurs rouge, vert et bleu (d où l acronyme : Red, Green, Blue). Chaque valeur doit nécessairement être comprise entre 0 et 255 : 0 étant d intensité nulle le plus pâle et 255, d intensité maximale le plus foncé). Les valeurs hexadécimales expriment numériquement le code de couleur RGB. Elles sont identifiées par le signe dièse (#) qui introduit la valeur et est suivi de six chiffres qui indiquent les intensités des couleurs (#000000). Rouge Vert Bleu Couleur Niveau d intensité résultante # noir Intensité nulle pour chaque couleur de base # FF FF FF Blanc Intensité maximale pour chaque couleur de base # FF rouge Intensité maximale sur le rouge, les autres couleurs sont d intensité nulle Le code RGB s inscrit souvent ainsi : rgb (102, 102, 153) (par exemple pour définir une couleur dans une feuille de styles, il n est pas toujours nécessaire d employer la valeur hexadécimale de la couleur). Remarque concernant les couleurs : La boîte de dialogue Sélectionner une couleur, que vous obtenez en cliquant sur le bouton, vous propose l affichage de trois palettes de couleurs différentes. Vous choisirez la palette à utiliser en fonction de vos standards de développement : 216 couleurs. Cette palette est proposée par défaut. Elle correspond à ce qu on appelle la Palette Web. Il s agit de couleurs qui peuvent être interprétées par les résolutions d écran à 256 couleurs sans trop de risque d altération. 140 couleurs. Cette palette correspond à la palette standard Windows. 16 couleurs (W3C). Cette palette correspond aux couleurs définies dans les standards W3C. Modifier la mise en page Dans le document index.html. 1. Modifiez les propriétés d arrière-plan de la page : Cliquez sur le bouton Corps du document de l onglet Spécialisés suivante apparaît.. La boîte de dialogue

18 14 ÉTAPE 3 APPLIQUER LA MISE EN FORME 2. Dans la zone Options sur les couleurs, vous avez la possibilité de modifier la couleur de certains éléments : l arrière-plan, la couleur par défaut pour tout le texte de la page, la couleur des liens hypertextes, la couleur des liens actifs (au clic de la souris), la couleur des liens visités (liens déjà activés). Cliquez sur le bouton Couleur pour dérouler une palette de couleurs miniature. Pour afficher la palette de couleurs complète, cliquez sur le bouton Autres. Pour notre exercice, suivez les directives suivantes : a) Dans la zone Arrière-plan, cliquez sur le bouton Couleur et cliquez sur l option Autres. Sélectionnez la palette 140 couleurs et choisissez la couleur Wheat (rgb : #F5DEB3) (2 e colonne,7 e ligne). Cliquez sur le bouton OK pour fermer la palette. b) Dans la zone Texte, cliquez sur le bouton Couleur et choisissez la couleur Bourgogne sur la petite palette (4 e colonne, 1 ière ligne). La mini palette disparaît. 3. Lorsque vous avez terminé, cliquez sur le bouton OK de la boîte de dialogue Corps du document <BODY>. Les propriétés d arrière-plan de la page s insèrent dans la balise d ouverture <body>. Votre feuille d édition devrait maintenant afficher les attributs suivants à l intérieur de la balise body. 4. Enregistrez les modifications. Résultat de la troisième étape avec le navigateur interne :

19 Étape 4 Visualiser les résultats La feuille d édition vous sert à intégrer l information à votre page Web. Pour avoir un aperçu des résultats des mises en forme et des images, vous devez les imaginer. C est pourquoi WebExpert a mis à votre disposition deux possibilités pour visualiser vos résultats : à l aide du navigateur interne intégré à l application, à l aide d un navigateur externe. La première méthode est la plus rapide pour valider votre travail au fur et à mesure de leur avancement. Afficher le navigateur interne 1. Dans le menu Afficher, cliquez sur la commande Afficher le navigateur interne. Le visionneur interne se superpose à la feuille d édition. La barre d outils du navigateur interne rend disponibles les mêmes commandes que celles offertes par un navigateur externe (Internet Explorer ou Netscape). Le comportement des éléments de la page est respecté (liens hypertextes, JavaScript, animation...) et la zone Adresse vous permet d atteindre une adresse sur le Web. Ancrer le navigateur interne Pour avoir le navigateur interne toujours sous les yeux et ne masquer aucune partie de la feuille d édition, vous allez ancrer le navigateur, c est-à-dire faire en sorte de l emboîter sur votre espace de travail. 1. Cliquez sur le bouton Ancrable de la barre d outils du navigateur. 2. Dans la liste, choisissez là où vous voulez emboîter le navigateur.

20 16 ÉTAPE 4 VISUALISER LES RÉSULTATS 3. En maintenant le bouton de la souris enfoncé, glissez la barre de titre du navigateur vers l endroit voulu d édition. Une bande grise apparaît indiquant que le navigateur est prêt à s ancrer. Par exemple : Ancrer comme onglet Ancrer en bas Remarque sur l utilisation d Internet Explorer comme navigateur interne : Utilisez les commandes du menu Environnement-Visionneur interne sous le menu Outils>Préférences générales pour définir Internet Explorer comme navigateur interne. Il est toutefois nécessaire que vous utilisiez la version 4 du navigateur ou une plus récente. Astuce : Sauvegarder la configuration de votre affichage avec le bureau WebExpert La version 5 de WebExpert vous permet de conserver les configurations de votre interface de travail. Utilisez la barre d outils Bureau pour manipuler vos «bureaux». Vous pouvez également utiliser l un des bureaux prédéfinis. La sauvegarde du bureau vous permet entre autres de préserver : la configuration de l interface définie dans les Préférences générales et les Préférences de l'éditeur, la disposition des fenêtres, la configuration des barres d'outils et des barres de menus, la configuration de la barre d onglets.

21 17 ÉTAPE 4 VISUALISER LES RÉSULTATS Afficher le navigateur externe 1. Ouvrez le document index.html que vous venez de créer. 2. Dans la barre d'outils Edition, cliquez sur le bouton Lancer le navigateur externe. Cliquez sur la flèche pour choisir un navigateur en particulier. Si le navigateur n est pas ouvert, WebExpert vous demandera de le lancer. Notez que le bouton affiche l icône du logiciel de navigation défini dans les Préférences générales. Remarque sur l utilisation des navigateurs externes : Le visionnement des résultats avec un navigateur externe exige que le document soit mis à jour. Si vous n'avez pas sauvegardé votre document, WebExpert vous demandera de le faire. La définition du navigateur externe s effectue à l aide du menu Outils>Préférences générales, menu Environnement-Visionneur externe. Si le chemin d'accès du navigateur n'a pas été identifié ou est invalide lorsque vous demandez l affichage, les Préférences générales du navigateur externe s affichent automatiquement.

22 Étape 5 Insérer des tableaux L utilisation des tableaux pour la mise en forme Les tableaux servent généralement à organiser l information. Sur une page Web, ils sont également utilisés pour disposer le texte sur la page puisque le code HTML ne permet pas l utilisation des colonnes. Les tableaux utilisent plusieurs balises, les principales sont : des balises pour identifier le tableau <table>, des balises pour identifier les rangées <tr>, des balises pour identifier les cellules <td>, chacune disposant de sa balise de fermeture obligatoire. WebExpert permet de taper et de modifier le texte qui doit être contenu dans un tableau à partir de la boîte de dialogue. Il est toutefois important que vous sachiez reconnaître les éléments du tableau sur la feuille d édition pour apporter certaines corrections sur la feuille d édition. Marqueurs de la première rangée Marqueurs de la deuxième rangée Marqueurs de la troisième rangée Résultat de l exemple : Une fois le tableau constitué, et le texte entré, vous pouvez appliquer une mise en forme au texte ou encore insérer des images dans les cellules. Insérer un tableau Dans le document index.html. 1. Positionnez-vous à la fin du texte déjà inscrit sur la page, mais avant la balise de fermeture </body>. 2. Cliquez sur le bouton Insérer un tableau de l onglet Tableaux, cadres et listes. La boîte de dialogue suivante apparaît. 3. Définissez le nombre de lignes et de colonnes nécessaires au tableau et cliquez sur le bouton OK. Pour l exercice, créez un tableau de 2 colonnes et de 4 rangées. La fenêtre Tableau apparaît.

23 19 ÉTAPE 5 INSÉRER DES TABLEAUX La fenêtre Tableau se présente sous l apparence d une fenêtre d application. La barre des menus vous donne accès à toutes les possibilités de manipulation du tableau, les propriétés du tableau, des cellules, des rangées et des colonnes. La zone Esquisse vous permet de taper le texte directement dans les cellules du tableau. Déroulez le menu contextuel (bouton droit de la souris) dans une cellule ou sur une sélection pour avoir accès aux commandes de manipulation correspondant à la sélection. Remarque sur l imbrication de tableaux : Le code HTML vous permet d imbriquer des tableaux, c est-à-dire de les emboîter l un dans l autre. Les balises de chacun des tableaux insérés dans un autre doivent être inscrites dans une cellule. Modifier un tableau Les tableaux imbriqués peuvent être édités directement sur la feuille d édition à l aide de la commande Propriétés de la balise: TABLE obtenu sur la balise table du tableau à modifier. Vous pouvez également éditer un tableau imbriqué à partir de la zone Esquisse de la fenêtre Tableau à l aide de la commande Éditer tableau imbriqué obtenu sur la balise table. À ce moment, une autre fenêtre Tableau apparaît. Une fois de retour à votre feuille d édition, vous devez construire votre tableau en manipulant le code HTML. Vous avez toutefois la possibilité de rouvrir la fenêtre Tableau pour effectuer les modifications. 1. Sélectionnez la balise d ouverture <table> sur la feuille d édition. 2. Déroulez le menu contextuel (bouton droit de la souris). 3. Cliquez sur la commande Propriétés de la balise : TABLE. La fenêtre Tableau s ouvre à nouveau. Vous pouvez également utiliser la commande du menu Éditer>Propriétés de la balise, ou encore utiliser le raccourci clavier ALT+Entrée. Taper du texte dans un tableau À partir de la fenêtre Tableau. 1. Cliquez dans la cellule où vous voulez entrer du texte. 2. Tapez le texte désiré. Pour l exercice, tapez le texte en vous référant à l exemple suivant :

24 20 ÉTAPE 5 INSÉRER DES TABLEAUX Fusionner les cellules À partir de la fenêtre Tableau. 1. Fusionnez les cellules de la première rangée. a) Cliquez sur la première cellule de la première rangée. b) Dans le menu Editer, cliquez sur la commande Sélectionner rangée. c) Dans le menu Tableau, cliquez sur la commande Fusionner cellules. 2. En utilisant une autre méthode, fusionnez les cellules de la troisième rangée. a) Avec la souris, cliquez sur la première cellule du tableau et glissez sur la seconde colonne. Les deux cellules sont sélectionnées. b) Déroulez le menu contextuel sur la sélection et cliquez sur la commande Fusionner cellules. La zone Esquisse de votre feuille d édition devrait être similaire à celle-ci : La fusion des cellules ne supprime aucun contenu : elle les fusionne en une seule cellule. Insérer des cellules À partir de la fenêtre Tableau. 1. Insérez une nouvelle ligne dans le tableau au troisième rang. a) Sélectionnez la seconde ligne du tableau (celle contenant Journaux et Sport). b) Dans le menu Tableau, cliquez sur la commande Insérer rangées. Une boîte de dialogue apparaît. c) Sélectionnez le positionnement de la nouvelle rangée. Ici, choisissez l option Insérer une rangée après. Une nouvelle rangée s insère dessous.

25 21 ÉTAPE 5 INSÉRER DES TABLEAUX 2. Insérez une nouvelle ligne à la fin du tableau. a) Positionnez-vous dans la dernière cellule du tableau. b) Appuyez sur la touche TAB du clavier. Une nouvelle ligne s aménage automatiquement. Remarque sur l insertion des cellules : Vous pouvez facilement insérer des cellules et des rangs directement sur la feuille d édition à l aide des boutons de l onglet Tableaux, cadres et listes. Positionnez-vous sur la feuille d édition, à l endroit du tableau où vous voulez ajouter une cellule ou un rang et cliquez sur le bouton approprié : Ajouter une cellule de tableau pour insérer une cellule. Ajouter une rangée de tableau pour insérer un rang (ligne) complet. La cellule ou le rang s insère à l endroit précis où vous étiez positionné. Pour une cellule, WebExpert insère les balises <td></td>; pour un rang, les balises <tr></tr>. Appliquer une mise en forme au texte dans un tableau 1. À partir de la feuille d édition, appliquez le style titre 2 aux titres Mes sites d actualité et Mes sites ludiques : a) Sélectionnez le texte à mettre en forme. b) Cliquez sur la flèche du bouton Style de titre de l onglet Communs et sélectionnez Style de titre 2. Astuce : modifier les cellules à partir de la fenêtre Tableau : À partir de la fenêtre Tableau, vous avez accès à la commande Éditer cellule du menu contextuel. Cette commande affiche une sous-fenêtre qui vous permet de visualiser le contenu de la cellule. Sur la partie supérieure de cette fenêtre, deux boutons vous donnent accès aux commandes de l onglet Communs et de l onglet Spécialisés. Vous pourrez entre autres insérer une image ou définir un lien hypertexte à l intérieur de la cellule en édition. Modifier les propriétés du tableau 1. Éditez le tableau pour ouvrir la fenêtre Tableau. 2. Appliquez une bordure au tableau : tapez la dimension en pixels dans la zone Bordure de la zone Propriétés du tableau de la fenêtre. Pour l exercice, définissez une bordure de 2 pixels. 3. Modifiez la largeur du tableau en définissant une mesure en pourcentage ou en pixels dans les zones Largeur et Hauteur de la zone Propriétés du tableau de la fenêtre Tableau. a) Activez la case % vis-à-vis le champ Largeur. b) Définissez une largeur de Modifiez la disposition du texte à l intérieur des cellules du tableau en modifiant son espacement entre la bordure et la marge de texte dans le champ Espace dans cellules de la zone Propriétés du tableau. Pour l exercice, définissez un espacement de 5 pixels. 5. Centrez le tableau sur la page dans la zone Alignement horizontal. Activez l option Au centre. 6. Par défaut, le tableau présente un arrière-plan transparent pour prendre les propriétés d arrière-plan de la page. Appliquez-lui une couleur dans la zone Options sur les couleurs, cliquez sur le bouton Couleur de l option Arrière-plan. Pour l exercice, définissez un arrière-plan Blanc pour le tableau. La fenêtre Tableau devrait montrer les propriétés suivantes :

26 22 ÉTAPE 5 INSÉRER DES TABLEAUX Modifier les propriétés des cellules À partir de la fenêtre Tableau, modifiez les propriétés du premier et du quatrième rang, ceux qui contiennent les titres de section. 1. Positionnez-vous dans la cellule à modifier. Placer votre curseur dans la cellule fusionnée du premier rang, celle contenant Mes sites d actualité. 2. Dans le menu Tableau, sélectionnez la commande Propriétés de la cellule. La boîte de dialogue suivante apparaît. Les propriétés avancées des cellules permettent de modifier la couleur des bordures et de définir une image d arrière-plan pour une cellule en particulier. Ces options ne sont toutefois interprétables que par le navigateur Internet Explorer; Netscape ne gère pas ces propriétés. 3. Dans la zone Alignement horizontal, centrez le texte en fonction de la largeur de la cellule. Activez l option Au milieu. 4. Dans la zone Alignement vertical, centrez le texte en fonction de la hauteur de la cellule. Activez l option Au milieu. 5. À l aide des champs Largeur et Hauteur, vous pouvez spécifier une taille spécifique pour la cellule. Pour obtenir une mesure en pixels, la case pourcentage (%) ne doit pas être activée. Dans le champ Hauteur, définissez une taille de 50 pixels. 6. Répétez l exercice pour la cellule fusionnée du quatrième rang (celle contenant Mes sites ludiques).

27 23 ÉTAPE 5 INSÉRER DES TABLEAUX Vous remarquerez que le troisième et sixième rang ne sont pas affichés. Ceci est causé par l absence de contenu dans les cellules du tableau; les navigateurs considèrent les cellules comme inexistantes lorsqu elles sont vides. Si vous voulez laisser une cellule, un rang ou une colonne vide et afficher cet espace, vous devez insérer un espace insécable pour qu un contenu soit repéré. Le code HTML pour marquer un espace insécable est :. Vous pouvez l insérer facilement en utilisant le raccourci clavier Ctrl+Shift+Esp. Vous pouvez forcer l inscription automatique des codes dans les Préférences générales : menu Outils>Préférences générales, menu Editeur-Tableaux. Ces préférences vous permettent également de définir le comportement de la commande d insertion rapide des tableaux vue plus loin. Insérer un tableau rapide Vous pouvez utiliser les tableaux pour forcer une disposition particulière du texte sur votre page Web. 1. Dans votre document index.html, positionnez-vous devant le texte Visitez ma page... Attention de vous placer devant la balise d ouverture <p>. 2. Insérez un tableau rapide en cliquant sur le bouton Tableau rapide de l onglet Tableaux, cadres et listes. Une petite grille se superpose à l affichage. La grille vous indique le nombre total de lignes et de colonnes au fur et à mesure du glissement de la souris. 3. Cliquez avec la souris sur la première case de la grille et, en maintenant le bouton de la souris enfoncé, glissez jusqu à ce que vous ayez défini le nombre de lignes et le nombre de rangées voulus. Pour l exercice, définissez un tableau qui contient une seule colonne et deux rangées. Les lignes de commandes suivantes s inscrivent sur votre feuille d édition. Par défaut, le tableau rapide ne présente aucune bordure et occupe 100% de l espace horizontal de la page. 4. Pour insérer le texte dans le nouveau tableau, vous pouvez le taper directement sur la feuille d édition ou reprendre la balise comme à la procédure décrite à l exercice Modifier un tableau. a) Pour l exercice, vous copierez le texte déjà inséré sur la feuille d édition, en prenant soin d inclure les balises de paragraphe <p> </p> : déplacez le texte Visitez ma page et découvrez des aspects de ma personnalité. Vous trouverez des liens qui sauront assurément vous intéresser. à l intérieur de la première rangée, soit entre les balises, tel qu identifié dans l illustration suivante :

28 24 ÉTAPE 5 INSÉRER DES TABLEAUX b) Dans la seconde rangée, marquez un paragraphe à l aide du bouton et saisissez le texte : Si vous avez des commentaires, n'hésitez pas à communiquer avec moi. 5. Directement sur la feuille d édition, modifiez la largeur du tableau. À l intérieur de la balise <table>, spécifiez la valeur à 80% pour équilibrer les deux tableaux de la page en vous référant à l illustration suivante : 6. Affichez la fenêtre Tableau en reprenant la balise comme à la procédure décrite à l exercice Modifier un tableau. Choisissez la commande Propriétés de la balise TABLE du menu contextuel. 7. Centrez horizontalement le tableau sur la page. Dans la zone Alignement horizontal de la fenêtre Tableau, activez l option Au centre. 8. Modifiez les propriétés de la cellule en définissant une hauteur de ligne. a) Sélectionnez les deux cellules de la zone Esquisse. b) Dans le menu Editer, sélectionnez la commande Sélectionner colonne. c) Dans le menu Tableau, sélectionnez la commande Propriétés de la cellule. d) Dans la zone Hauteur, définissez une hauteur de 100 pixels. Veillez à ce que la case pourcentage (%) ne soit pas activée. e) Revenez à la feuille d édition. La feuille d édition devrait avoir une apparence similaire à celle-ci : 9. Enregistrez les modifications et visualisez la page. Remarque concernant la copie et le déplacement du texte : WebExpert utilise les mêmes fonctionnalités de copie et de déplacement du texte que les applications fonctionnant sous Windows : le presse-papiers. Utilisez les raccourcis-clavier, les boutons de la barre d outils Standard ou les commandes du menu Editer.

29 25 ÉTAPE 5 INSÉRER DES TABLEAUX Résultat de l étape 5 : Amusez-vous à faire glisser les bordures verticales du navigateur. Vous remarquerez que la taille du tableau s ajuste selon l espace disponible à l écran. Cela est dû au fait que vous avez spécifié la dimension du tableau en pourcentage. Si vous l aviez spécifié en pixels, une barre de défilement horizontale s afficherait pour permettre à la personne qui consulte la page de voir l information qui serait masquée.

30 Étape 6 Insérer des images Le format des fichiers images Le graphisme tient une place importante dans la conception d une page Web. Que l on parle d animation, de vidéo, ou d images fixes, ces éléments enrichissent l esthétisme de la page. Le choix du format de fichier que vous ferez dépendra principalement de la qualité et de l effet que vous recherchez. Voici les plus universels : Format.gif.jpeg ou.jpg.png.wbmp Description Les GIF sont des fichiers d image compressés à 8 bits. Ils sont faciles à gérer pour la plupart des navigateurs. En plus des images statiques, le GIF permet la génération d animation. Ce format ne contient que 256 couleurs et permet un effet de transparence. Les JPG sont des fichiers d image à haute résolution (16,7 bits). Ce format de fichier est principalement utilisé pour la numérisation des photos. Compressé à 24 bits, il est toutefois lourd à gérer; il peut arriver que la page Web soit longue à télécharger. Le format JPG ne permet pas d effet de transparence. Le PNG est un nouveau format de fichier image compressé à 24 bits et contient 16,7 couleurs. Il représente une solution avantageuse puisqu il n est pas plus lourd à gérer qu un GIF, et permet les effets de transparence. De plus, il permet une résolution équivalente à celle du JPG. Malheureusement, ce ne sont pas tous les navigateurs qui supportent ce format. Le WBMP est un dérivé du format BMP (Bitmap) et est utilisé pour les documents WML, c est-à-dire destiné aux technologies sans fil. Ce format permet de générer des images de très faible poids (1 bit), en noir et blanc, qui répondent aux contraintes imposées par les technologies WAP, notamment la bande passante très réduite et très peu performante. Remarque concernant les formats de fichier : Il faut retenir que les images intégrées sur une page Web sont en BITMAP. C est à dire que leur résolution est définie en pixels. Si vous modifiez la taille de l image avec un éditeur HTML, vous risquez de perdre en qualité; c est pourquoi il est recommandé d utiliser un logiciel de graphisme. Plusieurs autres formats multimédias sont proposés pour les concepteurs de pages Web : en partant du AVI le plus standard (animation et vidéo) jusqu au SWF (support Flash pour les animations à très haute résolution). Astuces concernant la gestion des fichiers : Vous pouvez utiliser le Gestionnaire de fichiers pour copier et déplacer des fichiers. Utilisez le bouton Dossier pour afficher l arborescence des dossiers dans la partie gauche de la fenêtre; utilisez le bouton Aperçu pour obtenir un aperçu des documents et des images. Lorsque vous travaillez avec des images, vous pouvez utiliser la commande Survol d images. Cette fenêtre vous permet d obtenir des miniatures des images contenues dans un dossier. Cliquez sur le bouton Survol des images de l onglet Images.

31 27 É TAPE 6 INSÉRER DES IMAGES Remarque concernant l insertion d image : La boîte de dialogue Insérer une image graphique permet le positionnement vertical de l image et l habillement du texte autour d elle. Vous pouvez utiliser les commandes de disposition du texte pour disposer votre image sur la page car cette dernière est considérée comme étant un caractère de texte. Insérer une image 1. Positionnez-vous sur la feuille d édition, là où vous voulez insérer une image. Pour l exercice, positionnez-vous au début de la première ligne de texte, devant Bienvenue Ne vous positionnez pas à l intérieur des balises pour éviter de modifier l alignement par défaut de l image. 2. Cliquez sur le bouton Insérer une image de l onglet Images. La boîte de dialogue Ouverture d un fichier graphique apparaît. Vous pouvez immédiatement définir un lien hypertexte sur l image. Ce bouton ouvre une boîte de dialogue qui vous permet d insérer un objet vidéo dans votre document. Cette option n est compatible qu avec le navigateur Internet Explorer. Cliquez sur ce bouton pour afficher la fenêtre GoGraph en superposition à l affichage. Vous devez toutefois être connecté car cette fenêtre effectue une recherche d image sur Internet. 3. Cliquez sur le bouton Ouvrir fichier(s) pour rechercher l image. Une fenêtre d exploration apparaît. 4. Sélectionnez l image à intégrer à la page. Pour l exercice, sélectionnez l image ligne.gif que vous avez copiée dans le répertoire Images. La zone Esquisse de la boîte de dialogue Ouverture d un fichier graphique affiche maintenant l image que vous voulez insérer. Par défaut, l image prend les propriétés suivantes : 100 % de sa dimension, ajustée sur la gauche de la page. 5. Cliquez sur le bouton OK pour revenir à la feuille d édition. La ligne de commandes suivante apparaît au début de la première ligne de texte :

32 28 É TAPE 6 INSÉRER DES IMAGES 6. Alignez horizontalement l image pour la centrer sur la page. a) Sélectionnez la balise qui définit l image insérée (tel que montré dans l illustration précédente). b) Cliquez sur le bouton Centré de l onglet Communs. 7. Enregistrez vos modifications et visualisez-les. Insérer une image rapide L insertion d une image rapide a le même effet que l insertion d image que nous venons de voir à l exception que la boîte de dialogue Insérer une image graphique n apparaît pas. 1. Positionnez-vous à l endroit de la feuille où vous voulez insérer l image. Pour l exercice, placez votre curseur devant le titre Mes sites d'actualité de la première ligne du second tableau. Attention de vous positionnez à l intérieur des balise h2 et td. 2. Déroulez le menu contextuel sur le point d insertion. 3. Cliquez sur la commande Image rapide. Vous passez directement à la boîte de dialogue Ouverture d un fichier graphique. 4. Sélectionnez votre image et revenez à la feuille d édition. Pour l exercice, insérez l image journaux.gif que vous avez copiée dans le répertoire Images. La zone Esquisse donne un aperçu de l image. Utilisez les boutons de la barre d outils pour agrandir ou réduire la taille de l échantillon de l image. Cliquez sur le bouton Zoom pour modifier la taille de l échantillon. Tandis que le bouton est enfoncé, cliquez sur l image : avec le bouton gauche pour l agrandir, avec le bouton droit pour la réduire. Cliquez sur le bouton Restaurer la taille pour réafficher la taille originale de l échantillon. 5. Enregistrez vos modifications et visualisez-les. 6. Si vous voulez poursuivre l exercice, insérer l image theatre.gif au début de la ligne Mes sites ludiques, au quatrième rang du second tableau.

33 29 É TAPE 6 INSÉRER DES IMAGES Modifier les propriétés des images 1. Réaffichez la boîte de dialogue Insérer une image graphique à l aide de l une de ces deux méthodes. a) Sélectionnez la balise d ouverture img de l image journaux.gif. b) Déroulez le menu contextuel et cliquez sur la commande Propriétés de la balise: IMG. La boîte de dialogue apparaît. 2. Pour modifier la taille de l image, définissez la nouvelle dimension en pixels dans les zones Largeur et Hauteur. Définissez la largeur à 53 pixels et la hauteur à 50 pixels. Faites attention à ce que les cases Pourcentage (%) ne soient pas activées. 3. Pour définir l espacement entre le texte et l image, utilisez la zone Espacement horizontal. Définissez l espacement à 10 pixels. Cette dimension appliquera un espacement avant et après l image. 4. Pour modifier l alignement vertical de l image, sélectionnez le positionnement voulu dans la liste de la zone Alignement. Choisissez l alignement vertical Au milieu pour faire en sorte que le texte se positionne au centre de l image à sa gauche. 5. Cliquez sur le bouton OK pour fermer la boîte de dialogue. 6. Pour compléter l exercice, effectuez les mêmes modifications de dimension sur l image theatre.gif et définissez les propriétés d alignement et d espacement de toutes les images insérées dans le tableau en suivant les directives précédentes. 7. Enregistrez vos modifications et visualisez-les. Avant la modification des propriétés. Après la modification des propriétés. Remarque concernant la dimension des images : Pour vous assurer d une bonne présentation des images que vous insérez sur votre page, il est fortement recommandé d utiliser un logiciel d édition graphique pour effectuer les modifications de résolution ou de dimension. Vous serez ainsi assuré du respect des proportions.

34 30 É TAPE 6 INSÉRER DES IMAGES Résultat de l étape 6 : Image en en-tête : Images dans le second tableau :

35 Étape 7 Insérer des liens hypertextes Les liens hypertextes Les liens hypertextes servent à relier deux documents entre eux documents situés à proximité ou à différentes adresses; ou encore à relier deux endroits précis à l intérieur d un même document. Ils sont constitués de deux éléments essentiels : le marqueur : c est-à-dire le texte, l image ou l élément sur lequel est défini le lien, la cible : c est-à-dire le point d arrivée du lien, un endroit spécifique à l intérieur du même document, un autre document, un site Web ou, encore, une adresse de courriel. WebExpert identifie les liens hypertextes ainsi : les liens internes : c est-à-dire à partir d un endroit dans un document vers une ligne en particulier dans le même document. les liens externes : qui peuvent pointer vers d autres documents à l intérieur de votre site ou vers une page sur le Web. Vous pouvez également définir des liens externes vers d autres types d outils de communication, par exemple une adresse de courriel ou de groupe de discussion. Lors de la définition des liens externes, il importe de tenir compte des protocoles de communication. À propos des protocoles de communication : Vous pouvez définir plusieurs types de liens externes vers différents types de médias. Si vous utilisez le protocole approprié, la communication se fera sans aucun problème : http ftp file newsrc nntp gopher mailto news telnet wais Protocole de transfert hypertexte Protocole de transfert de fichiers Fichiers locaux (sur votre système) Newsgroup Nouvelles Usenet Protocole Gopher Courrier électronique Protocole de réseau de transfert de nouvelles Protocole utilisant TELNET Protocole de serveur d information à large zone (Wide Area Information Server Protocol) Définir un lien interne 1. Positionnez-vous à l endroit où vous voulez définir le lien. Positionnez-vous à la fin du dernier tableau (à l extérieur de la balise de fermeture </table>) et appuyez sur la touche Entrée du clavier pour aménager une ligne sur la feuille d édition.

36 32 ÉTAPE 7 INSÉRER DES LIENS HYPERTEXTES 2. Cliquez sur le bouton Lien interne de l onglet Spécialisés. La boîte de dialogue suivante apparaît. Sur cet onglet vous pouvez sélectionner parmi les destinations internes au document actif que vous avez déjà définies. 3. Dans la zone Nom du nouveau lien, tapez un nom pour identifier le lien que vous êtes en train de définir. Une zone s aménage dans la boîte de dialogue pour vous permettre de parcourir votre document. Le nouveau lien se nommera debut. (N inscrivez aucun caractère spécial ni caractère d espacement dans un nom de lien interne). 4. Dans la zone Choisir la ligne de destination du lien, utilisez la barre de défilement, maintenant affichée, pour parcourir le document jusqu à la ligne où se trouve la cible du lien et cliquez sur la ligne pour la sélectionner. Pour l exercice, choisissez la ligne qui commence par le texte Pensez-y bien 6. Cliquez sur le bouton OK pour revenir à la feuille d édition. WebExpert insère deux codes sur votre feuille d édition :

37 33 ÉTAPE 7 INSÉRER DES LIENS HYPERTEXTES À l endroit qui sert de cible (là où le lien doit pointer) : La balise name est utilisée pour identifier le marqueur sur la page. À l endroit où vous avez défini votre lien hypertexte : La balise href est utilisée pour identifier la présence d un lien hypertexte, le signe # (dièse) pour identifier une destination interne dans un document. 7. Tapez le texte qui doit vous servir de marqueur. Pour l exercice, tapez : «[Début du document]» et centrez le texte sur la page à l aide du bouton Centré de l onglet Communs. 8. Enregistrez vos modifications et visualisez le document. Vous pouvez tester le lien avec le visionneur interne. Résultat de l insertion d un lien interne : Définir un lien externe vers une page du Web 1. Sélectionnez l élément qui doit servir de marqueur. Pour l exercice, tapez le texte Gourmandise au chocolat dans la seconde cellule de la dernière ligne du tableau : 2. Sélectionnez le texte que vous venez de taper. 3. Cliquez sur le bouton Lien externe de l onglet Spécialisés. La boîte de dialogue suivante apparaît.

38 34 ÉTAPE 7 INSÉRER DES LIENS HYPERTEXTES Si vous travaillez avec des pages à cadres, vous pouvez choisir un cadre de destination sur cet onglet. 4. Sélectionnez le type de lien que vous voulez définir. Pour lier les pages HTML d un même site, laissez la case Aucun (lien direct) active. Le cas échéant, la zone Référence à un lien externe affiche un exemple de la syntaxe à respecter. Comme nous voulons définir un lien vers une page du Web, activez l option Lien HTTP. 5. Dans la zone Référence à un lien externe, tapez l adresse où vous voulez pointer. Tapez l URL suivante : 6. Cliquez sur le bouton OK pour revenir à la feuille d édition. La balise a href encadre maintenant le texte. 7. Enregistrez vos modifications et visualisez le document. Vous pouvez tester le lien avec le visionneur interne. Assurez-vous d être branché à Internet. Remarque concernant l exercice : Si vous voulez compléter l exercice, tapez le texte suivant dans les cellules du tableau et établissez les liens hypertextes : Sous la cellule Tapez Lien à définir Journaux Revue informatique Sports Actualités sportives Cinéma Études en cinéma

39 35 ÉTAPE 7 INSÉRER DES LIENS HYPERTEXTES Résultat de l insertion de lien externe : Si vous avez complété tout l exercice, le tableau devrait avoir l apparence suivante : Définir un lien externe vers une adresse de courriel 1. Sélectionnez l élément qui doit servir de marqueur. Pour l exercice, nous allons définir un lien externe sur une image. a) Insérez l image courriel.gif que vous avez copiée dans le dossier Images suite au texte qui se termine par «communiquer avec moi.» b) Pour sélectionner la balise <img src= >, déroulez le menu contextuel sur l élément img et sélectionnez la commande Sélectionner la balise. 2. Cliquez sur le bouton Lien externe de l onglet Spécialisés. La boîte de dialogue Lien externe apparaît. 3. Sélectionnez le type de lien que vous voulez définir. Pour définir un lien qui communique avec un logiciel de messagerie électronique, choisissez Adresse électronique dans la liste déroulante Type de lien. 4. Dans la zone Référence à un lien externe, tapez l adresse de courriel vers laquelle ce lien doit diriger. Tapez votre adresse ou l adresse suivante : mailto:[email protected]. 5. Cliquez sur le bouton OK pour revenir à la feuille d édition. La balise a href encadre maintenant l image. 6. Enregistrez vos modifications et testez le lien mailto. Une fenêtre de message appartenant à votre logiciel de messagerie électronique devrait s afficher.

40 36 ÉTAPE 7 INSÉRER DES LIENS HYPERTEXTES Résultat de l insertion de lien externe vers une adresse de courriel :

41 Étape 8 Insérer des JavaScript Le JavaScript est un langage de scripting qui permet de définir des éléments dynamiques que vous pouvez insérer dans un document HTML. Destiné à l exécution de commandes complexes, pour créer un effet d animation ou simplement pour modifier le comportement d un objet, comme du texte ou une image statique, le JavaScript offre de grandes possibilités au développeur Web. Utilisé en combinaison avec les feuilles de style, les JavaScript permettent d améliorer grandement l aspect esthétique du document. Créer un effet de texte avec un JavaScript Le script Mouvement de texte permet le déplacement du texte dans différentes directions (haut, bas, droite, gauche). 1. Positionnez le curseur à l endroit où vous désirez insérer le texte. Pour l exercice, positionnez-vous juste avant le tableau dont le premier paragraphe débute par Visitez ma page et insérez une ligne sur la feuille d édition. Attention de vous positionner à l extérieur de la balise <table>. 2. Cliquez sur le bouton Effets spéciaux de texte de l onglet Scripts. La boîte de dialogue suivante apparaît. Cliquez sur l onglet Esquisse pour obtenir l aperçu de l effet spécial au fur et à mesure de sa création. 3. Dans la zone droite de la fenêtre, sélectionnez l effet désiré. Pour l exercice, défilez pour sélectionner l effet script Mouvement de texte. La zone gauche présente maintenant les paramètres associés à l effet choisi.

42 38 ÉTAPE 8 INSÉRER DES J AVAS CRIPT 4. Dans la zone de gauche, sélectionnez le paramètre à modifier. À la gauche du paramètre, une icône indique le type de valeur qui peut lui être associé. Un exemple de sa valeur s affiche dans la colonne correspondante ainsi que dans la zone inférieure de l affichage. Affiche la palette de couleurs. Permet de modifier le texte qui sera affiché ou de spécifier une police de caractères. Permet de définir une taille ou un positionnement. Permet de définir un lien vers un URL ou vers un fichier. Permet d ajouter un item à un menu dynamique. Permet de retirer un item d un menu dynamique. Le script Mouvement de texte n utilise que les trois premiers paramètres cités ici. 5. Dans le champ Valeur de la zone inférieure de l affichage, tapez la valeur du paramètre sélectionné ou sélectionnez-la dans la liste déroulante. Cliquez sur l onglet Esquisse pour obtenir un aperçu du script en cours de définition. Pour l exercice : Pour définir le texte qui doit défiler, sélectionnez le paramètre «text». Dans le champ Valeur de la zone inférieure, tapez le texte «Partagez mes passions». Pour modifier la taille de la police, sélectionnez le paramètre «font_size». Dans le champ Valeur de la zone inférieure, tapez «36» pour définir une police de caractères de 36 points. Pour modifier le type de police, sélectionnez le paramètre «font_family». Dans le champ Valeur de la zone inférieure, tapez «Arial» pour définir cette police de caractères. Pour modifier la couleur de la police, sélectionnez le paramètre «color». Dans le champ Valeur de la zone inférieure, cliquez sur le bouton Couleur et choisissez la couleur «bourgogne» sur la palette. 6. Lorsque vous avez terminé, appuyez sur le bouton OK pour revenir à la feuille d édition. 7. Enregistrez vos modifications et testez le script. Dans l en-tête du document <head>, WebExpert insère le JavaScript nécessaire à l exécution de l effet spécial. La fonction est nommée move1. Le nom de la fonction sert à la distinguer des autres fonctions scripts pouvant faire partie du même document.

43 39 ÉTAPE 8 INSÉRER DES J AVAS CRIPT La balise <body> peut parfois contenir des informations sur l exécution d un script si ce dernier est défini pour exécuter son action en lien avec le comportement du document. Ici le script doit s exécuter au moment de l ouverture de la page (onload). C est pourquoi le script nommé move1 est appelé à l intérieur de la balise <body>. À l endroit où l effet doit s afficher, un style intraligne définit l apparence du texte et le script s exécute. Résultat de l insertion d un mouvement de texte : Au moment du chargement de la page, le mouvement du texte s effectue de droite à gauche :

44 Étape 9 Créer un formulaire Les formulaires HTML permettent la transmission de l'information à un serveur ainsi que l interaction avec les visiteurs de la page. L'interface d un formulaire HTML est graphique; elle utilise des boutons d action, des boîtes de texte, des boîtes à liste, etc. La feuille de formulaire Un formulaire HTML est défini par une feuille de formulaire, cette dernière étant représentée par les balises <form> et </form>. Ces balises sont essentielles pour que le formulaire et les scripts qui y sont intégrés soient interprétés adéquatement. La feuille de formulaire contient notamment les informations générales concernant le traitement des données. Deux méthodes de traitement peuvent être appliquées à un formulaire HTML : GET, qui spécifie que le formulaire doit recevoir des données; POST, qui spécifie que le formulaire doit envoyer les données. Cette méthode est la plus fréquemment employée. Quelle que soit la méthode utilisée, le moyen de transmission des données du formulaire doit également être défini. Fréquemment, les formulaires HTML simples sont destinés à renvoyer les résultats vers un serveur. Le concepteur utilise généralement un service de courrier électronique pour transmettre les informations. Dans ce cas, le protocole de communication mailto est utilisé. Dans le cas des formulaires de composition plus complexes, des scripts peuvent être intégrés pour effectuer un traitement particulier aux données ou encore pour permettre l établissement d une connexion à une base de données (notamment en utilisant un serveur ODBC). Le contenu d un formulaire Le formulaire contient donc un ensemble de données. L interface graphique du Web permet de définir des champs pour faciliter l intégration des informations. Ces champs se nomment «contrôle de formulaire». On retrouve quatre types de contrôle de formulaire : Les champs de saisie, ou zones de texte (à ligne simple ou multiligne) ces contrôles utilisent l élément textarea. Les listes déroulantes qui permettent des choix multiples ou des choix uniques ces contrôles utilisent l élément select. Les cases à cocher et cases à option ces contrôles utilisent l élément input. Les boutons (les images peuvent également servir de bouton) ces contrôles utilisent l élément input. Les zones cachées, ces contrôles utilisent l élément input.

45 41 É TAPE 9 CRÉER UN FORMULAIRE Remarque concernant les formulaires : WebExpert vous propose des fonctionnalités pour faciliter la tâche d intégration des champs de formulaire à une page Web. Outre le bouton Submit et Reset, les champs que vous insérez à l aide des commandes du logiciel ne seront pas fonctionnels tant que vous n y associerez pas le script approprié. Créer une feuille de formulaire 1. Avant de passer à l étape de créer une feuille de formulaire, tapez le texte qui annoncera son utilité. a) Positionnez-vous à la fin du document, sous le lien [Début du document]. Attention, vous devez vous trouver devant les balises de fermeture </body> et </html> : b) Saisissez le texte suivant : Aidez-moi à enrichir ma page en me faisant parvenir vos commentaires et suggestions : Encadrez le texte d un saut de paragraphe ( de l onglet Communs). 2. Positionnez-vous sur la feuille d édition à l endroit où vous voulez créer votre formulaire. Placez votre curseur sous le texte que vous venez de taper. 3. Cliquez sur le bouton Feuille de formulaire de l onglet Formulaires. La boîte de dialogue suivante apparaît. Si vous utilisez des pages à cadres, vous pouvez définir un cadre de destination en particulier qui affichera une action associée à la feuille de formulaire. 4. Dans la zone Type de destinataire, choisissez le mode de transmission qui précisera le protocole de communication utilisé. C est-à-dire, la manière dont vous voulez transmettre les données qui seront ajoutées au formulaire par l utilisateur. Pour l exercice, nous voulons recevoir les résultats du formulaire par courrier électronique ; donc le Type de destinataire doit être Adresse électronique.

46 42 É TAPE 9 CRÉER UN FORMULAIRE 5. Le contenu de la zone Action affiche maintenant un exemple de l URL correspondant au Type de destinataire. Tapez l adresse nécessaire pour compléter l exécution de la commande. C est cette adresse qui recevra les données du formulaire. Si le champ Action est vide, l'url sera celle du document courant. Tapez votre adresse de courriel, sinon l adresse suivante : mailto :[email protected] 6. Dans la zone Méthode d envoi, sélectionnez le mode de communication avec le serveur. Il y a deux méthodes, GET et POST : la méthode GET est utilisée pour obtenir de l information du serveur; POST, pour envoyer l information. Pour l exercice, nous voulons recevoir les résultats : sélectionnez la méthode POST. 7. Cliquez sur le bouton OK pour revenir à la feuille d édition. La ligne de commandes suivante est insérée sur votre feuille d édition. Vous êtes maintenant prêt à définir les champs du formulaire. 8. Enregistrez les modifications. Insérer un champ de formulaire Boîte de texte 1. Placez votre curseur à l endroit où vous voulez insérer le groupe de cases à cocher. Placez votre curseur au début de la feuille de formulaire, entre les balises <form> et </form>. 2. Insérez une balise de paragraphe ( de l onglet Communs) et, à l intérieur de ces balises, écrivez directement sur la feuille d édition le texte qui doit annoncer le champ : Nom et prénom : 3. Positionnez-vous à l intérieur de la balise de fermeture du paragraphe et cliquez sur le bouton Boîte Texte de l onglet Formulaires. La boîte de dialogue Éléments du formulaire apparaît. Cette zone vous donne la possibilité de choisir un autre type de contrôle de formulaire. Ce champ vous permet de préciser la largeur du champ de saisie. Ceci ne limite pas le nombre de caractères pouvant y être saisi. Ce champ limite le nombre de caractères autorisés à la saisie. La largeur de la zone est indépendante de cette valeur. 4. Dans la zone Nom identificateur, inscrivez un nom. Ce nom servira à identifier la zone. Tapez : nom.

47 43 É TAPE 9 CRÉER UN FORMULAIRE 5. Dans la fenêtre Valeur de l'élément, vous pouvez inscrire un message qui sera affiché dans le champ du formulaire à l affichage du formulaire. Tapez : Entrez vos nom et prénom. 6. Cliquez sur le bouton OK. 7. Insérez une balise de paragraphe autour du champ de boîte Texte. 8. Enregistrez vos modifications. 9. Poursuivez en insérant un autre contrôle boîte texte à l intérieur du même formulaire et identifiez-le courriel tel que montré dans l exemple suivant : Insérer un champ de formulaire Liste déroulante 1. Placez votre curseur à l endroit où vous voulez insérer la liste déroulante. Positionnez-vous sous le champ courriel et préparez un paragraphe. 2. Tapez l annonce du champ Liste déroulante : Dans quelle région habitez-vous?. 3. Cliquez sur le bouton Boîte liste déroulante de l onglet Formulaires. La boîte de dialogue Éléments du formulaire apparaît. Activez cette case pour afficher la liste des éléments que vous ajoutez. Ceci n a pas d effet sur l apparence finale du contrôle Liste déroulante. Si vous voulez proposer une sélection par défaut, inscrivez le numéro correspondant à l élément. Le nombre correspond à l ordre de l élément dans la séquence. Par défaut, aucun élément n est sélectionné. 3. Dans la zone Nom identificateur, inscrivez un nom. Ce nom servira à identifier la boîte à liste déroulante. Tapez : region. 4. Dans la zone Valeur(s) de l'élément, inscrivez la valeur de la première option de la boîte à liste déroulante, c est à dire son texte, et appuyez sur le bouton Ajouter. L inscription se transfère dans la zone inférieure de la boîte de dialogue. Tapez : France.

48 44 É TAPE 9 CRÉER UN FORMULAIRE 5. Répétez cette étape pour avoir le nombre d'options désirées dans la boîte à liste déroulante. Ajoutez les régions suivantes : Canada États-Unis Autres pays 6. Cliquez sur le bouton OK et enregistrez vos modifications. Insérer un champ de formulaire Cases à cocher Les cases à cocher permettent à l utilisateur d effectuer plusieurs choix parmi un groupement d options. 1. Placez votre curseur à l endroit où vous voulez insérer le groupe de cases à cocher. a) Positionnez-vous sous le champ région et insérez un paragraphe. Tapez l annonce du champ Cases à cocher : Auriez-vous des suggestions de sujets?. b) Faites suivre l annonce d une nouvelle ligne. 2. Cliquez sur le bouton Case à cocher de l onglet Formulaires. La boîte de dialogue Éléments du formulaire apparaît. Ajoutez un crochet dans cette case lorsqu un élément est affiché dans le champ Valeur(s) de l élément pour l identifier comme sélection par défaut. Vous pouvez également cocher la case de l élément directement dans l esquisse de la boîte de dialogue. Sélectionnez un élément et utilisez l une de ces flèches pour réorganiser l ordre de la liste de choix. 3. Dans la zone Nom identificateur, inscrivez un nom. Celui-ci servira à identifier la zone des cases à cocher. Tapez : suggestion. 4. Si vous ne désirez pas séparer chaque case d un saut de ligne, enlevez la case Insertion d'une nouvelle ligne après chaque valeur. Pour l exercice, conservez cette option. Sinon, les cases seront disposées les unes à la suite des autres sur la même ligne. 5. Dans la zone Valeur(s) de l'élément, inscrivez la valeur de la première case à cocher, c est-à-dire son texte, et appuyez sur le bouton Ajouter. L inscription se transfère dans la zone inférieure de la boîte de dialogue. Tapez : Voyage.

49 45 É TAPE 9 CRÉER UN FORMULAIRE 6. Répétez la dernière étape pour toutes les cases à cocher que vous voulez créer. Ajoutez les autres choix de la zone de cases à cocher : Ésotérisme Aviation Informatique 7. Si vous désirez qu'une case à cocher soit activée par défaut, cochez la case Marqué par défaut avant d'appuyer sur le bouton Ajouter. Vous pouvez également ajouter le crochet directement sur l esquisse au bas de la boîte de dialogue. Ajoutez un crochet dans la case Aviation pour la marquer par défaut. 8. Cliquez sur le bouton OK et enregistrez les modifications. 9. Enregistrez vos modifications. Insérer un champ de formulaire Cases radio Les cases radio, ou cases à option, permettent à l utilisateur d effectuer un choix unique parmi un groupe d options. 1. Placez votre curseur à l endroit où vous voulez insérer le groupe de cases radio. Positionnez-vous sous le champ suggestions et insérez un paragraphe. Tapez l annonce du champ Cases radio : Désirez-vous faire partie de ma liste de diffusion?. 2. Cliquez sur le bouton Case radio de l onglet Formulaires. La boîte de dialogue Éléments du formulaire apparaît. Ajoutez un crochet dans cette case lorsqu un élément est affiché dans le champ Valeur(s) de l élément pour l identifier comme sélection par défaut. Vous pouvez également cocher la case de l élément directement dans l esquisse de la boîte de dialogue. Sélectionnez un élément et utilisez l une de ces flèches pour réorganiser l ordre de la liste de choix. 3. Dans la zone Nom identificateur, inscrivez un nom. Celui-ci servira à identifier la zone des cases radio. Tapez : liste.

50 46 É TAPE 9 CRÉER UN FORMULAIRE 4. Si vous ne désirez pas séparer chaque case d un saut de ligne, enlevez la case Insertion d'une nouvelle ligne après chaque valeur. Désactivez l option Insertion d une nouvelle ligne après chaque valeur pour que les cases soient l une à côté de l autre. 5. Dans la zone Valeur(s) de l'élément, inscrivez la valeur de la première case radio, c est-à-dire son texte, et appuyez sur le bouton Ajouter. L inscription se transfère dans la zone inférieure de la boîte de dialogue. Tapez : Oui. 6. Répétez la dernière étape pour toutes les cases radio que vous voulez créer. Ajoutez la valeur : Non. 7. Si vous désirez qu'une case radio soit activée par défaut, cochez la case Marqué par défaut avant d'appuyer sur le bouton Ajouter. Vous pouvez également ajouter le crochet directement sur l esquisse au bas de la boîte de dialogue. Activez l option Oui par défaut. 8. Cliquez sur le bouton OK et enregistrez vos modifications. Insérer des boutons Soumettre et Recommencer Le bouton Soumettre est programmé pour retourner les résultats du formulaire (les informations fournies par l utilisateur) selon la méthode définie dans la feuille du formulaire. Le bouton Recommencer est prévu pour réinitialiser le formulaire à ses valeurs par défaut. 1. Placez votre curseur à l endroit où vous voulez insérer le bouton. a) Positionnez-vous sous les cases radio du champ liste que vous venez de créer et tapez le message de politesse annonçant la fin du formulaire : Merci et revenez me voir bientôt!. Saisissez le texte à l intérieur de marques de paragraphe. 2. Positionnez-vous à l extérieur des marques de paragraphe et cliquez sur le bouton Bouton soumettre de l onglet Formulaires. La boîte de dialogue Éléments du formulaire apparaît. Cette zone vous donne la possibilité de choisir un autre type de bouton d action. Cette zone vous donne un aperçu du bouton.

51 47 É TAPE 9 CRÉER UN FORMULAIRE 3. Dans la zone Texte visible sur le bouton, tapez le texte que vous voulez afficher. Un aperçu du bouton est visible dans la zone Esquisse. Tapez : Envoyer 4. Cliquez sur le bouton OK. 5. Définissez immédiatement le bouton Recommencer. Cliquez sur le bouton Bouton Recommencer de l onglet Formulaire. La boîte de dialogue Élément de formulaire affiche le même onglet que pour le bouton Recommencer. 6. Dans la zone Texte visible sur le bouton, tapez le texte que vous voulez afficher. Un aperçu du bouton est visible dans la zone Esquisse. Tapez : Recommencer 8. Cliquez sur le bouton OK et enregistrez les modifications. Remarque concernant les lignes horizontales : Pour agrémenter la disposition des éléments de votre page Web, vous pourriez insérer une ligne horizontale audessus de la zone du formulaire. Positionnez-vous à l endroit voulu et cliquez sur le bouton Ligne Horizontale de l onglet Spécialisés. Par exemple, pour diviser la zone de formulaire du reste de la page, insérez une ligne horizontale devant la ligne de texte Aidez-moi à enrichir ma page en me faisant parvenir vos commentaires et suggestions :

52 48 É TAPE 9 CRÉER UN FORMULAIRE Résultat du formulaire :

53 10 Étape 10 Diffuser sur un site FTP La publication de votre site Web Lorsque vous travaillez à la conception de votre site Web, vous travaillez sur votre ordinateur; on dit alors travailler en «local». Ainsi, lorsque votre site Web est terminé, les internautes ne peuvent le consulter puisqu ils n ont pas accès à votre poste privé. Une fois le site complété, il est donc nécessaire de le copier sur un serveur de manière à le rendre accessible à la communauté Internet. Par la suite, vous devrez régulièrement effectuer les mises à jour sur votre site avec les modifications et les ajouts. Une autre raison pour transférer votre site sur votre serveur Internet est la nécessité de tester les pages. En effet, une fois sur un serveur Internet, il se peut que certains éléments soient dysfonctionnels ou que les apparences soient altérées. Il est donc important de tester votre site pendant le développement afin de vous assurer du fonctionnement adéquat de toutes les pages et de tous les éléments. Lorsque vous publiez votre site Web, ou que vous effectuez une mise à jour, vous devez prêter une attention particulière aux aspects suivants : Conservez toujours une copie de votre site Web sur votre ordinateur. Avant la publication, assurez-vous de l intégrité de vos liens hypertextes, notamment qu il n y ait aucune adresse absolue (qui pointe, par exemple, vers votre disque C:); sans quoi les internautes ne pourront pas atteindre la page. Respecter la structure initiale de vos dossiers; la modifier risquerait de rompre des liens hypertextes entre les documents. N oubliez pas de copier tous les fichiers utilisés par vos pages Web : Images (.gif ou.jpg), JavaScript (.js), feuilles de styles (.css), Applet Java (.class), fichiers multimédias, etc. ; faute de quoi les éléments dynamiques ou les éléments multimédias de vos pages ne fonctionneront pas. Remarque concernant la connexion Internet : Généralement, lorsque vous achetez une connexion Internet, votre fournisseur vous donne accès à un espace Web personnel où vous pouvez télécharger vos pages Web. Vous pouvez également profiter des espaces gratuits offerts par de nombreux sites à travers le monde.

54 50 ÉTAPE 10 DIFFUSER SUR UN SITE FTP À propos de la vérification des liens La version 5 de WebExpert vous offre une nouvelle fonctionnalité, celle de la vérification des liens en ligne. En utilisant cette commande, vous vous assurez du bon fonctionnement des liens que vous avez intégrés dans votre document. Vous avez accès à cette commande à partir du menu Syntaxe>Vérifier les liens en ligne. Cliquez sur ce bouton pour sélectionner les fichiers à vérifier. Cliquez sur ce bouton pour ajouter une adresse qui n appartient à aucun des documents sélectionnés. Cliquez sur ce bouton pour modifier les paramètres de vérification. La liste des résultats indique les documents comportant des erreurs. La nature de l erreur est identifiée à la colonne R. Le menu contextuel déroulé sur une ligne donne accès aux commandes d édition du lien correspondant. L utilisation du module FTP de WebExpert La version 5 de WebExpert est maintenant dotée d un module de transfert de fichier. Ce dernier donne accès aux commandes les plus utiles pour ce genre de tâche. Cette intégration vous permet de : Gérer des projets à partir du serveur FTP. Ouvrir et sauvegarder des documents directement à partir du FTP. Le module FTP de WebExpert permet aux utilisateurs d'effectuer des transferts de fichiers entre leur ordinateur (client) et des serveurs présents sur n'importe quel réseau incluant Internet. L interface intuitive de ce module permet les téléchargements rapides et faciles dans les deux sens (téléchargement vers un serveur, ou d un serveur vers l ordinateur de l utilisateur). Sauvegarder un document sur un site FTP Avant d entreprendre cet exercice, assurez-vous d avoir en main les informations suivantes : l adresse FTP de votre serveur, votre code d identification, votre mot de passe. S il vous manque l une ou l autre de ces informations, communiquez avec le soutien technique de votre fournisseur Internet pour les obtenir. 1. Ouvrez le document à transférer et, si ce n est déjà fait, connectez-vous à Internet. 2. Sélectionnez la commande Fichier>Sauvegarder sur le FTP sous.

55 51 ÉTAPE 10 DIFFUSER SUR UN SITE FTP 3. Dans le champ Hôte, spécifiez l adresse FTP à laquelle vous voulez vous connecter. L adresse FTP débute toujours par le protocole de communication ftp:\\. Vous pouvez toutefois spécifiez une adresse Web qui utilise le protocole la connexion s effectuera tout de même grâce au port de communication. La liste déroulante du champ Hôte retient les dernières connexions auxquelles vous avez accédé. 4. Dans le champ adjacent, spécifiez le port de communication. Une connexion FTP utilise généralement un port Dans le champ ID, saisissez votre nom d utilisateur et spécifiez votre mot de passe dans le champ M/P. Si vous voulez conserver ces informations en mémoire pour une prochaine connexion à la même adresse, cliquez sur le bouton Enregistrer le mot de passe. Une fois les informations complétées, le bouton Connecter devient actif. 6. Cliquez sur le bouton Connecter. Une fois connecté, la partie inférieure de la fenêtre s active. La partie inférieure de la fenêtre reproduit l explorateur Windows : sur la gauche, les dossiers sur le serveur; sur la droite le contenu des dossiers. Les boutons de la barre d outils vous permettent d éditer les dossiers. 7. Positionnez-vous dans le bon dossier et vérifiez l identification du fichier. 8. Cliquez sur le bouton OK pour enregistrer le fichier sur le serveur. Remarque concernant le gestionnaire de projet : Le travail avec le gestionnaire de projet est particulièrement intéressant au moment de la diffusion des documents. WebExpert permet effectivement de transférer plusieurs fichiers à la fois. Référez-vous à l aide du logiciel pour en savoir plus. Remarque concernant les logiciels de transfert de fichier Le module de transfert de fichier intégré à WebExpert 5 est une version «légère» d un logiciel FTP. Le développeur professionnel préférera sans doute un logiciel spécialisé, le logiciel de transfert de fichier FTPExpert saura sans doute l intéresser. Vous pouvez vous procurer une version d essai à l adresse Web : À propos de l ouverture des fichiers Vous avez aussi la possibilité d ouvrir un fichier à partir du serveur FTP à l aide de la commande Fichier>Ouvrir d une adresse FTP.

56 Résultat du tutoriel Si vous avez complété toutes les étapes de ce tutoriel, vous devriez obtenir un résultat semblable à l illustration de la prochaine page. Nous vous souhaitons un heureux succès avec vos pages Web!