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 :