Micro Application Web Studio + User Manual [fr]

Auteur : Sylvie Delmas

Toute représentation ou reproduction, intégrale ou partielle, faite sans le consentement de MICRO APPLICATION est illicite (article L122-4 du code de la propriété intellectuelle). Cette représentation ou reproduction illicite, par quelque procédé que ce soit, constituerait une contrefaçon sanctionnée par les articles L335-2 et suivants du code de la propriété intellectuelle. Le code de la propriété intellectuelle n’autorise, aux termes de l’article L122-5, que les reproductions strictement destinées à l’usage privé. Pour le logiciel, seule est autorise une copie de sauvegarde si cela est indispensable pour préserver son utilisation.

Avertissement aux utilisateurs : Les informations contenues dans ce produit sont données à titre indicatif et n’ont

aucun caractère exhaustif. Elles ne sauraient engager la responsabilité de l’éditeur. La société MICRO APPLICATION ne pourra être tenue pour responsable de toute omission, erreur ou lacune qui aurait pu se glisser dans cet ouvrage ainsi que des conséquences, quelles qu’elles soient, qui résulteraient de l’utilisation des informations et indications fournies.

ISBN : 978-2-7429-6634-9

Microsoft, Windows et Direct X sont des marques commerciales déposées de

Microsoft Corporation. Les autres noms de société, de marque ou de produit cités sont reconnus comme marques commerciales ou marques commerciales déposées de leur propriétaire respectif.

MICRO APPLICATION Support technique : 20-22 sur des Petits-Hôtels Tél : 01 53 34 20 46 – Fax : 01 53 34 20 00 75010 PARIS Egalement disponible sur

www.microapp.com

Tél : 01 53 34 20 20 Fax : 01 53 34 20 00 http://www.microapp.com

Retrouvez des informations sur ce logiciel : Rendez-vous sur le site Internet de Micro Application WWW. Microapp. Dans le module de recherche, sur la page

d’accueil du site entrez la référence à 4 chiffre (7634) indiquée sur le présent manuel. Vous accédez directement à la fiche produit de ce logiciel.

Licence d’utilisation du logiciel

La présente licence d’utilisation du logiciel, définie ci-après comme « licence d’utilisation », constitue un contrat entre l’utilisateur, (personne physique ou personne morale) et la société Micro Application désignée par « Micro Application », portant sur le logiciel ainsi que les médias qui lui sont associés comme la documentation imprimée, en ligne ou électronique, référencés comme le « logiciel ». Par le seul fait d’installer, de copier ou d’utiliser de toute autre manière le logiciel, l’utilisateur s’engage à respecter les termes de la licence d’utilisation. Si l’utilisateur n’accepte pas les conditions d’utilisation du logiciel, il ne doit pas l’installer. Il peut en revanche » le retourner pour remboursement intégral. MERCI D’ACCEPTER LA LICENCE D’UTILISATION DU LOGICIEL. LISEZ ATTENTIVEMENT LE PRESENT DOCUMENT, REGROUPANT LES SEULS TEMRES ET CONDITIONS APPLICABLES A VOTRE UTILISATION DU LOGICIEL ; LE LOGICIEL EST PROTEGE PAR DES DROITS D’AUTEUR ET AUTRES LOIS SUR LA PROPRIETE INTELLECTUEELLE. LE LOGICIEL EST LICENCIE ET NON VENDU.

1. Octroi de la licence d’utilisation

Par le présent document, Micro Application accorde à l’utilisateur l’autorisation personnelle, non exclusive et non cessible (la licence) d’utiliser une (1) copie du logiciel, incluant toute mise à jour et documentation d’accompagnement, le cas échéant, fournie par Micro Application, selon les termes développés ci-après. Si le logiciel constitue une mise à jour ou une mise à niveau d’un logiciel déjà acquis par l’utilisateur, c’est-à-dire d’une version antérieure, l’utilisateur s’engage à détruire toutes les copies de la version antérieure dans un délai de trente (30) jours après l’ouverture de ce package, à l’exception d’une copie de sauvegarde.

2. Champ d’application

L’utilisateur est autorisé à installer et utiliser une copie du logiciel sur un seul ordinateur. Le principal utilisateur de l’ordinateur sur lequel le logiciel est installé peut effectuer une seconde copie pour son usage exclusif sur un ordinateur portable. Il peut également enregistrer ou installer une copie du logiciel sur un périphérique de stockage, tel qu’un serveur réseau, uniquement pour installer ou faire fonctionner le logiciel d’autres ordinateur d’un réseau interne, à condition d’acquérir et dédier une licence à chaque ordinateur distinct sur lequel le logiciel est installé ou utilisé. Une licence du logiciel ne peut être partagée ou utilisée simultanément par différents ordinateurs.

3. Licence Multi Utilisateurs

Si vous avez obtenu plusieurs licences v ous êtes autorisé à copier la partie logiciel dans les limites définies dans la licence et vous êtes autorisé à utiliser le nombre de copies correspondant au nombre de licences reçues dans les conditions sus nommées. Vous êtes de la même manière autorisé à effectuer le même nombre de copies pour des ordinateurs portables tel que spécifié ci-devant.

4. Interdictions

Il vous est interdit de : modifier, adapter, traduire, rétro concevoir, décompiler, désassembler ou effectuer toute autre manipulation du code source du logiciel, sauf si ces opérations ont été expressément autorisées par un texte applicable nonobstant cette limitation ; copiez le logiciel (sauf dans le cas spécifié ci-devant) ou la documentation l’accompagnant ; louer, céder, divulguer, mettre à disposition ou garantir un droit quelconque sur le logiciel (y compris la documentation l’accompagnant) sous n’importe quelle forme et à qui que ce soit sans le consentement préalable écrit de Micro Application ; supprimer les références aux droits d’auteur ou à la marque dans le logiciel ou sa documentation ; utiliser le logiciel en infraction par rapport aux textes sur la propriété intellectuelle ou en ne respectant pas les droits d’une autre partie ; utiliser le logiciel en vue d’offrir à un tiers des services en ligne ou via une base de données.

5. Suspension des droits ; annulation de la licence

La présente licence ne constitue pas un contrat de vente. Tout titre, secret industriel, droit d’auteur, brevet et autre droit relatif à la propriété intellectuelle sur le logiciel, la documentation l’accompagnant et toute copie effectuée par l’utilisateur demeurent la propriété exclusive de Micro Application et l’utilisateur s’engage à la reconnaître et la préserver. L’utilisateur accepte et reconnaît que la copie non autorisée du logiciel ou de sa documentation, le nonrespect de quelque disposition du présent document que ce soit mettront automatiquement fin à la licence. Das l’éventualité d’une violation de la licence par l’utilisateur, Micro Application se réserve le droit de déclencher tous les recours judiciaires à sa disposition.

6. Version d’évaluation

La licence portant sur une version d’évaluation du logiciel expire conformément aux termes précisés lors du processus d’installation et à l’issue de la période d’évaluation spécifiée dans cette version du programme.

7. Garantie

Dans le cas où le client constaterait une défectuosité du support, il dispose d’un mois à compter de son achat pour en faire retour à Micro Application. Pour bénéficier de cette garantie, le client doit obligatoirement adresser à ses frais, à Micro Application, le support accompagné du bon de garantie que vous trouverez à la fin du manuel (papier ou électronique) ou de la carte d’enregistrement (si celle-ci n’a pas déjà été envoyée). Micro Application retourne alors à ses frais, au client, à l’adresse indiquée sur le bon de garantie ou la carte d’enregistrement, un nouveau support. Quand un protocole informatique de sécurité est implanté dans le logiciel, ce protocole pré »sente certaines limitations. Aussi il est de la responsabilité du client de déterminer si le logiciel correspond à ses besoins réels. La progiciel étant livré en l’état, il n’est fourni par Micro Application aucune autre garantie et, notamment pour les relations du client avec son hébergeur internet.

Avertissement : les informations contenues dans ce produit sont données à titre indicatif et n’ont aucun caractère exhaustif voire certain. A titre d’exemple non limitatif, ce produit peut vous proposer une ou plusieurs adresses de site Web qui ne seront plus d’actualité ou dont le contenu aura changé au moment où vous en prendrez connaissance. Aussi, ces informations ne sauraient engager la responsabilité de l’Editeur, la société Micro Application ne pourra être tenue responsable de toutes omission, erreur ou lacune qui aurait pu se glisser dans ce produit ainsi que des conséquences quelles qu’elles soient, qui résulteraient des informations et indication fournies ainsi que de leur utilisation.

8. Logiciel non destiné à la revente

Si le logiciel est désigné comme « Interdit à la vente (IV) », nonobstant le paragraphe 1 de la présente licence d’utilisation, votre usage du logiciel est limité à celui de présentation, de test ou d’évaluation.

9. Location et cession interdites

Vous pouvez transférer cette licence de façon permanente sur un autre ordinateur ou une autre station de travail (sans intention de la transférer de nouveau), à condition que l’ordinateur, la station de travail ou tout autre

périphérique à partir duquel vous avez effectué le transfert n’accède plus au logiciel ni ne l’utilise plus. Le logiciel doit également être utilisé conformément aux conditions de la présente licence.

10. Expiration de la licence

Vous pouvez mettre fin à cette licence à tout moment. Micro Application l’annulera si vous ne vous conformez pas à ses termes et conditions. Dans les deux cas, vous devez détruire toutes les copies du logiciel.

11. Mise à jour

Si la présente licence est une mise à jour, vous devez détenir une licence en cours de la version antérieure du logiciel. Le nombre total de licences de mise à jour ne doit pas dépasser celui des ordinateurs, station de travail ou autres périphériques électroniques autorisés à utiliser ou accéder au logiciel au moment de la mise à jour.

12. Instruction en cas d’utilisation d’images numériques à contenu

Ce logiciel comprend de nombreux cliparts et photos (désignées sous le terme générique d’images) qui sont la propriété de Micro Application ou d’un tiers ayant fourni une autorisation d’utilisation. En tant qu’utilisateur du logiciel, vous êtes libres d’utiliser, de modifier et de publier ces images, en respectant les restrictions ci-après. Si vous n’êtes pas certain que l’usage que vous comptez faire de ces images est conforme aux indications ci-dessous, nous vous recommandons de demander conseil à un juriste. A. VOUS POUVEZ en tenant compte des restrictions ci-après :

Intégrer une (des) image(s) à votre projet d’origine et le publier, l’afficher et le diffuser sur quelque support que ce soit. Cependant, vous ne pouvez le revendre, le transmettre ou le rendre disponible pour une utilisation ou une distribution séparée d’un produit ou d’une page W eb. Par exemple, l’(les) image(s) peut(vent) être utilisée(s) en tant que partie d’une page Web, mais ne peut(vent) être mise(s) à disposition pour le téléchargement distinct ou un format conçu ou destiné au stockage permanent ou à la réutilisation par des tiers. De la même manière, l’utilisateur peut recevoir des copies de l’(des) image(s) (y compris de fichiers numériques) en tant que partie intégrante d’un projet, mais ne peut utiliser l’(les) image(s) séparément ou comme partie d’un autre produit ; effectuer une (1) copie de l’(des) image(s) à des fin d’archivage ou de sauvegarde.

B. VOUS NE POUVEZ PAS :

Créer des travaux obscènes, portant atteinte à la pudeur ou à la morale, à l’aide d’une(d’) image(s) fournie(s) par Micro Application ni l’(les) utiliser à des fins interdites par la loi ; utiliser ou permettre l’utilisation d’une (d’) image(s) ou partie de cette(ces) image(s) en tant que marque déposée ou de service, ou revendiquer des droits de propriété sur tout ou partie de l’(des) image(s)s ; utiliser l’(des) image(s) au format électronique, en ligne ou dans des applications multimédia, sauf dans les cas suivant : a). l’(les) image(s) est(sont) intégrée(s) à des fins de visualisation seulement. b). aucune autorisation n’est donnée de télécharger et/ou de sauvegarder l’(les) image(s) pour quelque raison que ce soit : louer, transmettre la licence ou prêter l’(des) image(s) ou une copie à une autre personne physique ou morale. Vous pouvez cependant transférer votre licence pour l’utilisation de l’(des) image(s) à une autre personne physique ou morale, à condition que vous transfériez l’(les) image(s) et sa licence d’utilisation, y compris toutes les copies (à l’exception des copies intégrées à vos travaux tel qu’autorisé par la licence, à cette personne physique ou morale ; vous ne conserviez aucune copie, y compris les copies enregistrées sur un autre ordinateur ou périphérique de stockage ; le tiers recevant l’(les) image(s) accepte les conditions d’utilisation fixées par la licence. Utiliser les images sauf dans les conditions exposées dans la présente licence.

Avertissement sur l’épilepsie

A lire avant toute utilisation d’un jeu vidéo par vous-même ou votre enfant. Certaines personnes sont susceptibles d’avoir des crises d’épilepsie ou d’avoir des pertes de conscience à la vue de certains types de lumières clignotantes ou d’éléments fréquents dans notre environnement quotidien. Ces personnes s’exposent à des crises d’épilepsie lorsqu’elles regardent certaines images télévisées ou lorsqu’elles jouent à certains jeux vidéo. Ces phénomènes peuvent apparaître alors même que le sujet n’a pas d’antécédent médical ou n’a jamais été confronté à une crise d’épilepsie. Si vous-même ou un membre de votre famille avez déjà présenté des symptômes liés à l’épilepsie (crise ou perte de conscience) en présence de stimulations lumineuses, veuillez consulter votre médecin avant toute utilisation. Nous conseillons aux parents d’être attentifs à leurs enfants lorsqu’ils jouent avec des jeux vidéo. Si vous-même ou votre enfant présentez un des symptômes suivants : vertige, trouble de la vision, contraction des yeux ou des muscles, mouvements involontaires ou convulsions, veuillez immédiatement cesser de jouer et consulter un médecin. Précautions à prendre dans tous les cas pour l’utilisation d’un jeu vidéo : Ne vous tenez pas trop près de l’écran. Jouez à bonne distance de l’écran de l’ordinateur et aussi loi que le permet le cordon de raccordement. Utilisez de préférence les jeux vidéo sur un écran de petite taille. Evitez de jouer si vous êtes fatigué ou si vous manquez de sommeil. Assurez-vous que vous jouez dans une pièce bien éclairée. En cours d’utilisation, f aites des pauses de dix à quinze minutes toutes les heures. Veuillez conserver le CD d’installation original à proximité de votre PC, le système pouvant vous le réclamer lors d’un lancement du programme.

Sommaire

1. Introduction

2. Poser les bases du site

2.1. Se repérer

2.2. Définir la maquette

2.2.1. Afficher la maquette

2.2.2. Créer un fond dégradé

2.2.3. Insérer une image en guise de logo

2.2.4. Saisir du texte et le mettre en forme

2.2.4.1. Insérer du texte

2.2.4.2. Définir les attributs de texte par défaut

2.2.4.3. Modifier les attributs d’un texte particulier

2.2.4.4. Créer des effets artistiques

2.3. Enregistrer le site

3. Création de la page d’accueil

3.1. Créer d’autres effets de texte

3.2. Redimensionner des images

3.3. Titrer les images

3.4. Superposer des objets pour créer des effets

3.5. Insérer un texte long par copier/coller

4. Création des autres pages

4.1. Insérer la page de la fête

4.1.1. Réutiliser la maquette

4.1.2. Insérer des images et des textes

4.1.3. Aligner et répartir des objets

4.2. Réaliser la page des sites amis

4.2.1. Insérer un tableau

4.3. Réaliser une page de texte

5. Lier les pages entre elles

5.1. Modifier la maquette

5.1.1. Insertion d’un tableau à une colonne

5.1.2. Mise en place des liens internes

5.1.3. Un lien sur une image

5.2. Vérifier le fonctionnement du site

5.2.1. Vérification des liens

5.2.2. Réglages fins de l’harmonie des pages

5.3. Utilisation des menus dynamiques

6. Insérer des liens externes

6.1. Créer un lien vers une adresse mail

6.1.1. Insertion d’un lien sur l’adresse mail de la maquette

6.1.2. Vérification

6.1.3. Désactivation du gestionnaire de combinaisons

6.2. Créer des liens vers d’autres sites

6.2.1. Insertion d’un lien vers un autre site

6.2.2. Vérifications

7. Placer le site sur le Web

7.1. Saisir les dernières informations

7.1.1. Nom et titre de la page

7.1.2. Résumé de la page et mot-clef

7.2. Effectuer les dernières vérifications

7.2.1. Contrôle de la maquette

7.2.2. Optimisation du site

7.2.2.1. Correcteur orthographique

7.2.2.2. Gestionnaire de ressources

7.2.2.3. Les autres gestionnaires

7.3. Publier le site sur le Web

7.3.1. Les informations nécessaires

7.3.2. Le transfert

7.3.2.1. Configurer Web Studio+

7.3.2.2. Publier sur le Web

7.3.2.3. Une ultime précaution, la vérification en ligne !

7.4. Mettre le site à jour

7.4.1. Insertion d’images, des Gif animés, et de Web Arts

7.4.2. Insertion d’un fichier son

7.4.3. Création d’une bannière animée

7.4.4. Mise à jour du site sur le serveur

7.5. Pour conclure

1. Introduction

Ce manuel vous permettra de prendre en main très facilement Web Studio+. En créant un site exemple, de la première page blanche jusqu’au transfert du site complet sur le Web, vous v ous approprierez la démarche de création sans difficulté.

Grâce à des explications pas à pas, concrètes et abondamment illustrées, vous apprendrez facilement à maîtriser toutes les fonctionnalités de base.

Pratique, ce guide est un complément utile au manuel de l’utilisateur. Nous n’avons donc pas répété ici certaines notions théoriques détaillées dans celui-ci. Nous vous conseillons, afin de bien comprendre le fonctionnement d’un site, de vous y reporter, et de bien étudier ce dernier.

Vous trouv erez tous les éléments nécessaires à la création de ce site exemple sur le CD-Rom de l’application, dans le dossier Exemple présent en racine du CD. Nous vous recommandons de copier des fichiers sur v otre ordinateur pour une utilisation aisée ultérieure de ces derniers.

Nous v ous souhaitons de passer un agréable moment en créant ce petit site exemple, celui d’une association de villageois décidés à réhabiliter leur four à pain !

2. Poser les bases du site

Dans ce chapitre, vous allez définir les attributs généraux de votre futur site et créer une maquette qui servira de base à toutes les pages.

2.1. Se repérer

L’écran de démarrage de Web Studio+

Détaillons rapidement l’écran afin de découvrir ses composants et de les nommer :

1. Au centre, la zone de travail : une zone grise sur laquelle est placée une page blanche.

2. A gauche, de cette page, une petite fenêtre nommée Onglet Modif.

L’onglet Modif.

3. Tout en haut de l’écran, la barre de menus, et immédiatement en dessous, plusieurs barres d’outils générales dont les symboles vous sont peut-être familiers.

Remarque : Affichage des barres d’outils. Si toutes les barres ne sont pas affichées, ou si vous en fermez par erreur, dans le menu Affichage, cliquez sur Barre d’outils et sélectionnez celles qui sont décochées. L’idéal étant de travailler avec toutes les barres d’outils ouvertes.

Aperçu des barres d’outils disponibles

4. A gauche de votre écran, une autre barre d’outils plus spécifique.

5. Tout en bas, la bien nommée Ligne d’astuces. Observez-la souvent en cours de travail, elle vous

donnera de précieuses indications. Dans sa partie gauche, elle vous permettra également de vous déplacer rapidement entre les différents modes d’affichage de votre site.

La ligne d’astuces

6. Enfin, à droite, une zone plus large, nommée zone Studio, présentant sur sa droite, des onglets qui v ous permettent de naviguer entre différentes possibilités. Actuellement, vous devez vous trouver sous l’onglet Site.

La zone Studio.

2.2. Définir la maquette

Comme vous le savez, un site est composé de plusieurs pages. En principe, par convention, mais surtout par souci d’esthétisme, les couleurs et le style doivent être identiques pour toutes les pages. C’est ce que l’on nomme la charte graphique.

Afin de faciliter le travail, il est intéressant de créer un modèle qui servira de base à toutes vos pages, modèle appelé, dans Web Studio+, une maquette.

2.2.1. Afficher la maquette

Pour l’instant, nous allons mettre en place les attributs de base du site. Pour cela, nous allons paramétrer la maquette, qui servira par la suite à créer toutes les pages sans avoir à refaire les réglages. La page blanche sur votre écran est la page d’accueil du site. Vous devez donc vous placez sur la maquette pour y travailler.

Remarque : La page affichée. Prenez garde, lorsque vous travaillez, de bien vérifier la nature de la page affichée. Cette indication vous est donnée en bas à gauche de votre écran, mais aussi dans la zone Studio.

Pour changer de page, plusieurs possibilités s’offrent à vous. En voici deux :

1. Cliquez, dans la Ligne d’astuces, sur la flèche noire et choisir Maquette 1.

Changer de page avec la Ligne d’astuces.

2. Double-cliquer, dans la zone Studio, sur l’icône Maquette 1.

Changer de page dans la zone Studio.

Dans les deux cas, la maquette apparaît à l’écran (mais pour l’instant vous ne voyez pas de différence puisque la page d’accueil et la maquette sont des pages blanches). Assurez-vous donc qu’il s’agit bien de la maquette : le nom Maquette 1 doit apparaître en bas à gauche de la Ligne d’astuces et un œil se placer en superposition de l’icône de la maquette dans la zone Studio.

2.2.2. Créer un fond dégradé

Un fond tout blanc n’est pas très joli, et un fond uni un peu triste. Par contre, un dégradé de couleurs est du plus bel effet sur un site. Avec le Gestionnaire de maquette, vous pouvez incorporer très facilement un tel fond sur vos pages.

1. Dans le menu Affichage, cliquez sur Gestionnaire de maquette.

2. Dans la boîte de dialogue qui s’ouvre, décochez l’option par défaut Utiliser les paramètres du gestionnaire de combinaison et cochez Utiliser une image.

Le gestionnaire de maquette.

3. La boîte de dialogue Importer l’image s’ouvre alors ; parcourez votre arborescence, sélectionner le fichier Fond.jpgs (présent en racine du Cd-Rom de Web Studio+ dans le dossier Exemple) et cliquez sur Ouvrir.

Remarque : Un tout petit fichier. Nul besoin de créer une grande image pour recouvrir le fond d’une page web. Le navigateur qui affiche la page répète l’image de fond à l’infini, tant horizontalement que verticalement. Il suffit donc d’une bande très étroite ou d’un petit carré pour la recouvrir. Comme le temps de téléchargement d’une page doit être rapide, mieux vaut une image la plus petite possible.

4. Validez vos modifications dans le Gestionnaire de Maquettes par OK.

Insérer une image de fond avec le gestionnaire de maquette.

Votre image possède maintenant un joli fond dégradé vert.

2.2.3. Insérer une image en guise de logo

Sur cette page/maquette, vous allez maintenant placer le logo de l’association qui devra se retrouver sur toutes les pages.

1. Vérifiez que v ous êtes toujours sur la maquette et, dans la barre d’outils à gauche de votre écran, cliquez sur l’icône Importer une image.

L’icône Importer une image.

2. Dans la boîte de dialogue Importer une image qui s’ouvre, recherchez l’image fourpeint.gif et sélectionnez-la. Vérifiez que l’option Intégrer l’image est sélectionnée, puis cliquez sur Ouvrir.

La boîte de dialogue Importer une image.

3. Votre curseur s’est transformé en croix assortie d’un rectangle gris.

Le curseur d’impression d’image.

4. Cliquez n’importe où sur votre page. L’image est insérée.

Remarque : La barre d’outils Image. Lorsque vous insérez ou sélectionnez une image, une

nouvelle barre d’outils apparaît sur votre écran. Conservez-la, elle permet de traiter très rapidement les images comme nous le verrons plus loin.

5. Saisissez-la à l’aide de la souris lorsque le curseur se transforme en flèche à 4 branches, et déplacez-la vers le haut de votre écran, à peu près au centre.

Le déplacement d’un objet sur l’écran à l’aide de la souris.

2.2.4. Saisir du texte et le mettre en forme

Vous pouvez souhaiter qu’un même texte apparaisse sur toutes les pages du site, une adresse mail, un titre, une citation… Vous allez donc les insérer dans la maquette.

2.2.4.1. Insérer du texte

1. Dans la barre d’outils de gauche, sélectionnez l’outil Cadre standard.

L’outil Cadre standard.

2. Cliquez ensuite n’importe où dans la page. Un cadre apparaît, muni de poignées de redimensionnement.

Matérialisation d’un cadre texte.

Remarque : Les poignées de redimensionnement. En plaçant votre souris sur une de ces poignées, le curseur se transforme en flèche à deux pointes. Cliquez alors et,

sans relâcher le clic, déplacez votre souris. Les dimensions du cadre se modifient à votre convenance.

3. Saisissez, à l’intérieur de ce cadre, l’adresse contact@amis-du-four.com. Donnez à ce texte une police non standard de votre choix, dans notre cas nous utiliserons Ballonist SF. Vous verrez plus loin dans ce manuel la raison pour laquelle nous utilisons une telle police. Redimensionnez le cadre de façon à l’ajuster à peu près au texte.

Remarque : Les textes artistiques. Vous pouvez utiliser les outils de Texte artistique pour arriver à ce même résultat. Entraînez-vous à tester ces derniers pour

connaître leurs autres possibilités.

2.2.4.2. Définir les attributs de texte par défaut

Le texte, par défaut, est en Times New Roman de taille 12 et noir. Sur un fond vert tel que celui-là, une couleur marron foncée serait plus esthétique. D’autre part vous aimeriez peut-être une autre police de caractères, voire une autre taille. Vous avez la possibilité, bien sûr, de modifier les attributs de ce texte, mais également d’en faire les attributs par défaut de la maquette, ce qui vous évitera de renouveler l’opération sur chaque texte que vous insérerez dans votre site.

Vous allez donc maintenant changer la couleur et la police du texte et enregistrer ces modifications. Ce nouveau style deviendra alors le style par défaut de toutes les pages.

1. Sélectionnez l’adresse mail en entier.

2. Dans la zone Studio, cliquez sur l’onglet Attributs.

Cliquez sur l’onglet Attributs.

3. Dans la zone Attributs, cliquez sur Couleur.

L’option Couleur dans l’onglet Attributs

4. Descendez l’ascenseur de la palette de couleur et cliquez sur l’avant-dernière case.

La Palette de couleurs dans l’onglet Attributs.

5. Dans la zone Attributs, cliquez sur Police.

6. Déplacez l’ascenseur de la zone Police, et sélectionnez une police de votre choix.

Les polices de caractères dans l’onglet Attributs.

Comme il s’agit du format qui servira de base à toutes les pages, mieux vaut laisser la taille 12 standard. Les modifications de base des textes sont terminées. Vous allez maintenant enregistrer ce style de texte pour en faire le format par défaut de vos pages.

1. Avec le bouton droit de la souris cliquez sur l’adresse mail, toujours sélectionnée, et dont vous venez de modifier les attributs.

2. Dans le menu contextuel qui s’ouvre, cliquez sur Format, puis sur Mettre à jour le style de texte.

Le menu contextuel d’un texte et la mise à jour du style.

3. Une boîte de dialogue vous demande confirmation, cliquez sur Oui.

Validation de la modification du style Normal (par défaut).

Remarquez que le texte entier a changé et pas simplement le mot sélectionné. Faites l’essai en créant un autre texte, il s’écrira dans la police choisie avec la couleur marron.

2.2.4.3. Modifier les attributs d’un texte particulier

Vous souhaitez que cette adresse mail soit écrite différemment des autres textes de la page pour une meilleure visibilité. Vous pouvez, bien entendu, modifier ce texte uniquement sans toucher au format par défaut que vous venez d’enregistrer.

1. Sélectionnez le texte à modifier en entier.

2. Notez que la barre d’outils Texte, jusque-là grisée, est maintenant active. Donnez à votre sélection les attributs Gras et Italique.

La barre d’outils Texte et la mise en forme ponctuelle d’un texte.

3. Redimensionnez éventuellement le cadre, puis saisissez-le avec la souris lorsque le curseur se transforme en flèche à 4 branches et placez-le enfin dans l’angle supérieur droit de votre page.

Déplacement d’un cadre texte à l’aide de la souris.

2.2.4.4. Créer des effets artistiques

Pour terminer, vous allez placer un titre travaillé sur la maquette, titre qui sera donc présent sur toutes les pages du site.

1. De la même façon que précédemment, créez un nouveau cadre texte et saisissez, à l’intérieur, Les Amis du Four.

Remarque : L’outil texte artistique. Un autre outil vous permet de saisir du texte, l’outil Texte Artistique. Ses fonctionnalités sont identiques à celles du cadre texte, mais il présente l’avantage de dimensionnez le cadre au fur et à mesure de la saisie en partant d’un point. Il sera donc utilisé plus particulièrement pour les titres, le cadre texte servant davantage à la saisie de paragraphes longs.

Outil Teste artistique.

2. Sélectionnez le texte et attribuez-lui la police Times New Romans ainsi qu’une taille de 36, Gras.

3. Ce texte toujours sélectionné, dans le menu Format, cliquez sur Effets de filtre.

4. Dans la boîte de dialogue qui s’ouvre, cochez la première option, Ombre portée.

Notez, dans la partie droite, les nombreux réglages que vous pouvez effectuer pour ce filtre et, en bas à gauche l’aperçu de l’effet.

La boîte de dialogue Effets de filtre.

5. Cliquez sur OK et jugez de l’effet.

Cette puissante fonction de filtres peut vous permettre bien des fantaisies. N’hésitez pas à essayer ses différentes possibilités et les différents réglages de chaque filtre. Notez que vous pouvez appliquez plusieurs filtres simultanément en cochant plusieurs cases.

Pour terminer votre maquette, agencez au mieux ses différents éléments à l’aide de la souris.

La maquette terminée.

La maquette comporte les éléments essentiels pour l’instant, mais elle n’est pas forcément définitive. Vous y reviendrez plus tard pour ajouter, déplacer ou modifier des objets. Il est très difficile de penser à tout dès le départ. Heureusement Web Studio+ vous permet toutes les modifications nécessaires au fur et à mesure de la création de votre site.

2.3. Enregistrer le site

Arrivé à ce stade, il est prudent d’enregistrer votre travail.

1. Dans le menu Fichiers, cliquez sur Enregistrer sous…

2. Dans la boîte de dialogue qui s’ouvre, parcourez votre arborescence pour vous placer dans le dossier consacré à votre site.

3. Dans la zone Nom du fichier, nommez-le ; dans la zone Type laissez l’option par défaut Document Web Studio+ (*.WPP), puis cliquez sur Enregistrer.

La boîte de dialogue Enregistrer sous…

3. Création de la page d’accueil

Vous allez pouvoir maintenant créer la page d’accueil proprement dite.

Placez-vous sur celle-ci en double-cliquant sur son icône dans l’onglet Site de la zone Studio. Vérifiez la réussite de l’opération dans la Ligne d’astuces.

Vérification du nom de la page dans la ligne d’astuces.

3.1. Créer d’autres effets de texte

Vous pouvez créer des effets de texte par déformation :

1. A l’aide de l’outil Texte Artistique, saisissez la phrase « Association 1901 ayant pour but la réfection du Four à pain de la place du village ». Comme vous avez défini les attributs de texte par défaut au chapitre précédent, ce texte s’écrira de la même manière que l’adresse mail précédemment saisie.

2. A l’aide de la barre d’outils Texte, mettez-le en gras.

3. Saisissez la poignée de redimensionnement inférieure du cadre et tirez-la afin de déformer le texte. Vous

obtenez un caractère original.

Déformer du texte.

4. Terminez en alignant le cadre sur le bord droit du titre, et en réglant sa position en hauteur.

3.2. Redimensionner des images

Pas de site sans image ! Mais il faut bien comprendre que de la taille d’une image dépend son temps de chargement sur l’écran. Il faut donc songer à ceux qui n’ont pas de connexion rapide et qui ne supporteront pas d’attendre de longues minutes avant de voir les images.

Une image est composée de petits carrés, nommés pixels. Plus le nombre de pixels est élevé, plus l’image est lourde en kilooctets (Ko) pouvant même atteindre 1 mégaoctet (1Mo) ou plus. Son poids dépend de deux composantes :

Sa taille : plus elle est grande, plus elle comporte de pixels. Sa résolution : c’est-à-dire le nombre de pixels au cm². Plus ce nombre est élevé, plus le nombre total de

pixels est important bien entendu.

Il est donc important de redimensionner les images afin qu’elles ne soient pas trop longues à se charger, mais il faut jouer sur les deux composantes : la taille et le nombre de pixels au pouce carré (pour les résolutions on s’exprime en pouces et non en centimètres). On ne peut en principe réaliser cela qu’avec un bon logiciel de traitement d’images. Heureusement, Web Studio+ a une fonction intégrée de traitement d’images très pratique.

Il faut bien comprendre que, si vous modifiez la taille d’une image avec les poignées de redimensionnement, vous ne réduirez pas son nombre de pixels, simplement vous les rapprocherez les uns des autres. La résolution (nombre de point au pouce carré) augmentera mais le nombre de pixels ne variera pas, le redimensionnement ne sera que visuel. Il faut réduire l’image réellement, en d’autres termes diminuer son nombre de pixels. Le travail sur une image exemple vous permettra de comprendre cette démarche très simplement.

1. Dans la barre d’outils à gauche de votre écran, cliquez sur l’icône Importer une image.

L’outil Importer une image.

2. Recherchez l’image fourcote.jpg et importez-la (reportez-vous au chapitre 1 si nécessaire). Vous v ous apercevez qu’elle est disproportionnée par rapport à la page.

3. Sélectionnez-la, et dans la barre d’outils Image, cliquez sur l’icône Propriétés.

Obtenir des informations sur l’image.

La boîte de dialogue qui s’ouvre vous donne un certain nombre d’indications dont la plus importante pour ce qui nous occupe, son poids, bien trop élevé : 549 KB.

La fenêtre d’informations sur l’image.

Vous allez donc la redimensionner en deux étapes, d’abord réduire sa taille et ensuite réduire sa résolution.

1. Pour réduire sa taille, saisissez la poignée de redimensionnement du coin inférieur droit, cliquez et tirez tout en observant votre Ligne d’astuces. Réglez la taille de l’image à des dimensions d’environ 140 x 105 (une autre possibilité consiste à utiliser l’Onglet modif. présent sur l’espace de travail).

Modification de la taille d’une photo avec les poignées de redimensionnement.

2. Ouvrez à nouveau la boîte Propriétés de l’image. Vous constatez que le poids n’a pas changé, il est toujours de 549 KB.

3. Fermez cette fenêtre et cliquez, toujours dans la barre d’outils Image, sur l’icône Taille et résolution de l’image.

L’icône Taille et résolution de l’image.

4. Dans la zone Résolution, vous constatez que la résolution est de 343.

Remarque : Résolution, écran et impression. De la résolution d’une image dépend sa qualité. Mais il

faut distinguer les images uniquement destinées à être vues sur écran et les images destinées à être imprimées. Une imprimante ayant une résolution comprise entre 300 et 1200, l’image destinée à être imprimée doit avoir au minimum la même résolution que l’imprimante. Par contre, un écran ayant une résolution inférieure à 80, il est totalement inutile de placer sur un site des images avec une résolution supérieure à 100, la qualité de l’image n’en sera pas meilleure, par contre son poids sera beaucoup plus élevé.

5. Saisissez le curseur de la réglette située en bas de la boîte de dialogue et tirez vers la gauche jusqu’à obtenir une valeur proche de 90.

La boîte de dialogue Taille et résolution de l’image.

6. Validez par OK.

Ouvrez la boîte Propriété de l’image et constatez que le poids de l’image s’est considérablement réduit pour avoisiner les 50 KB, ce qui est tout à fait acceptable (temps de chargement : 1 à 5 seconde environ avec un modem 56 K, l’image originale qui faisait 530 KB aurait mis, elle, entre 10 secondes et bien plus).

3.3. Titrer les images

Il peut être intéressant de définir deux attributs aux images d’un site : un titre et un texte de remplacement.

Le titre s’affichera au passage de la souris pour donner une explication ou le nom de la photo par exemple.

Le texte de remplacement s’affichera pendant le chargement de l’image et à la place de celle-ci pour les internautes ayant désactivé l’option Afficher les images de leur navigateur.

1. Sélectionnez de nouveau l’image dont vous venez de réduire la taille et le poids (du four vu de côté).

2. Dans la barre d’outils Image, cliquez sur Propriété de l’image Web.

L’icône Propriétés de l’image Web.

3. Dans la boîte de dialogue qui s’ouvre saisissez « Le four vu de côté » dans la zone de texte Titre. Et « Un très joli four sous un ciel bleu » dans la zone de texte du bas. Validez par OK.

La boîte de dialogue des Propriétés de l’image.

Remarque : Le titre. Si vous ne souhaitez pas entrer de texte de remplacement, v ous pouvez saisir le titre de l’image directement dans la barre d’outils Image.

Saisir le titre de l’image directement dans la barre d’outils.

3.4. Superposer des objets pour créer des effets

S’il est indispensable de placer quelques photos pour agrémenter la page d’accueil il est également important de les agencer de façon originale et esthétique. Avec Web Studio+, cela est extrêmement facile.

1. En procédant de la même façon que pour la photo précédente, importez et redimensionner les images fourface.jpg et eglise.jpg.

Remarque : Les noms des fichiers. Vous remarquerez que les noms des fichiers exemples ne

comportent pas d’accent ni de majuscule ni d’espace entre les mots. En effets, si Windows reconnaît aisément les accents, les cédilles et autres caractères spéciaux, il en est différemment dès l’instant que vous êtes sur le web. Par précaution et afin de ne pas rencontrer de problèmes lors de l’affichage de votre site une fois en ligne, n’utilisez jamais ces caractères, ne mettez pas d’espace et évitez également les majuscules lorsque vous nommez vos fichiers. C’est un principe de base à respecter absolument.

2. Saisissez-les et regroupez-les de telle sorte que les deux photos du four chevauchent légèrement la photo de l’église.

Superposition de plusieurs images.

3. Il serait mieux que les photos du four soient au premier plan. Sélectionner la photo fourface.jpg et, dans le menu Organiser, cliquez sur Mettre au premier plan.

La commande Mettre au premier plan.

4. Faites de même avec la photo fourcote.jpg. Les deux photos sont au premier plan. Disposez-les harmonieusement.

Vous allez maintenant leur superposer du texte.

1. A l’aide de l’outil Texte artistique, saisissez « Bienvenue chez nous ! ».

2. Sélectionnez le texte, et, à l’aide de la barre d’outils Texte, attribuez-lui un caractère assez bras comme l’Arial Black et une taille de 16.

3. Déplacez le texte pour le placer sur les photos. Ecrit en marron, il n’est pas très lisible. Dans la zone Style, attribuez-lui la couleur blanche (prenez le blanc et non un gris pâle).

Sélectionner la couleur blanche.

4. En biais, ce texte serait plus attrayant. Le cadre texte toujours sélectionné, saisissez l’outil Rotation, à gauche de votre écran.

L’outil Rotation.

5. Placez votre curseur sur l’un des angles du cadre texte, cliquez lorsqu’il se transforme en deux flèches courbes et, sans relâcher le clic de votre souris, tournez l’objet.

Effectuer une rotation du cadre texte.

6. Terminez en déplaçant le cadre qui doit tenir entièrement sur les photo, parfaitement centré par rapport aux angles.

L’effet final des objets superposés.

Il se peut que vous ayez à déplacer ce groupe d’objets. Dans ce cas, vous seriez obligé de défaire cet assemblage assez précis. Pour remédier à cela, vous pouvez grouper les objets.

1. Dans la barre d’outils à gauche de votre écran, cliquez sur l’outil Pointeur.

L’outil Pointeur

2. Placez votre curseur en haut à gauche du groupe d’image (prenez garde de ne pas saisir le cadre texte du sous-titre), cliquez et, sans relâcher le clic, tirez au-delà de l’angle inférieur droit (ne craignez pas de déborder largement), puis relâcher le clic. Le groupe doit être entièrement encadré d’un rectangle bleu. Vérifiez bien que toutes les images soient à l’intérieur de ce cadre. Si ce n’est pas le cas, cliquez n’importe où dans la page pour annuler la sélection en cours et recommencez.

Tous les objets sont sélectionnés.

3. En dessous de ce cadre, une icône représentant deux pièces séparées de puzzle est apparue. Cliquez dessus.

Cliquez sur l’icône Grouper pour associer les objets sélectionnés.

4. Tous les objets (les 3 images et le texte) sont associés et en forment plus qu’un seul et même objet (les pièces de puzzle de l’icône sont assemblées). Cela se matérialise par l’encadrement du groupe par un cadre gris muni de poignées de redimensionnement. Une flèche à 4 branches apparaît lorsque vous placez votre pointeur de souris dessus. Vous pouv ez maintenant déplacer l’ensemble sans en modifier la disposition.

La matérialisation d’éléments groupés.

Remarque : Dissocier le groupe. Si vous avez besoin de modifier l’un des objets du groupe, il vous faut en dissocier les éléments. Pour ce faire, cliquer simplement sur l’icône Grouper pour rendre à nouveau les éléments indépendants les uns des autres.

3.5. Insérer un texte long par copier/coller

Sur la page d’accueil toujours, vous avez décidé de placer les dernières nouvelles de l’association, texte que vous préparez sur un traitement de texte au préalable. Vous allez pouvoir l’insérer dans votre page par un simple copier/coller.

1. Sélectionnez l’outil Cadre texte à gauche de votre écran.

2. Cliquez sur votre page pour insérer le cadre.

3. Lancez v otre traitement de texte, recherchez le fichier newaccueil.doc, ouvrez-le, sélectionnez-le entièrement et copiez-le.

4. Revenez sur votre page d’accueil et cliquez sur le bouton droit de votre souris dans le cadre texte. Dans

le menu contextuel choisissez Coller.

Le menu contextuel d’un cadre texte.

5. Votre texte s’insère mais il n’est pas visible entièrement, le cadre est trop petit. Redimensionnez-le avec les poignées. Enfin, placez-le juste en dessous des photos.

Déplacement du cadre texte.

Un correcteur d’orthographe intégré vous signale instantanément les fautes. Nous avons intentionnellement fait deux fautes dans ce texte : demende et l’oubli de l’accent sur degradé. Ces deux mots sont soulignés en rouge, il faut les corriger :

1. Cliquez sur demende avec le bouton droit de votre souris.

2. Dans le menu contextuel une liste de proposition s’affiche. Cliquez sur demande.

La liste des corrections orthographiques proposées.

3. le mot est remplacé et le souligné s’efface. Agissez de même avec degragé.

D’autres mots sont soulignés qui pourtant ne comporte pas de faute. Votre correcteur ignore les noms propres mais aussi marque comme une faute les articles élidés (avec apostrophe). Vous devez donc l’éduquer, c’est-à-dire enregistrer ces mots au fur et à mesure que vous les rencontrez de façon qu’à l’avenir il ne vous les marque plus en rouge.

1. Par exemple, cliquezs avec le bouton droit de votre souris sur d’autres.

2. Dans le menu contextuel, cliquez sur Ajouter au dictionnaire.

Ajouter un mot au dictionnaire.

3. Le souligné s’efface, le mot est désormais définitivement comme valide, contrairement à la commande Ignorer qui ne le validera que pour ce texte.

4. Faites de même avec tous les mots soulignés après avoir vérifié qu’il s’agit bien d’un problème

d’apostrophe ou de nom propre et non d’une faute réelle.

Pensez à enregistrer votre travail.

Votre page d’accueil est provisoirement terminée. Vous allez maintenant créer les autres pages. Nous reviendrons sur cette page d’accueil ensuite pour achever sa présentation et créer les liens de navigation entre les pages.

4. Création des autres pages

Vous allez maintenant créer ce que l’on nomme le corps du site, les pages internes.

4.1. Insérer la page de la fête

Une fête a été organisée l’été dernier par les habitants du village. Vous voulez en parler sur le site.

4.1.1. Réutiliser la maquette

Afin de ne pas avoir à refaire les manipulations effectuées au chapitre 1 et pour conserver une unité graphique dans le site, vous allez créer une nouvelle page à partir de la maquette existante.

1. Dans le menu Insertion, cliquez sur Page.

Insérer une page dans le site.

2. Dans la boîte de dialogue qui s’ouvre, nommez tout de suite votre page en saisissant « Fête Août 2005 » (il ne s’agit pas du nom d’enregistrement d’un fichier, vous pouvez donc utiliser des caractères accentués).

3. Dans la liste déroulante de la zone Maquette, choisissez Maquette 1. Notez que, en choisissant (Aucun), vous pourriez créer une page blanche.

4. Ne cochez pas l’option Copier les objets de la page. Cela aurait pour effet de copier tous les éléments de la page d’accueil.

5. Dans la zone Positionnement, laissez l’option par défaut Après. Validez en cliquant sur OK.

La boîte de dialogue Insérer une page.

Votre nouvelle page s’affiche. Observez votre Ligne d’astuces, son nom y est inscrit dans la zone Studio, cliquez sur l’onglet Site. Elle est présente en-dessous de la page d’accueil, sous son nom.

La nouvelle page dans la zone Studio.

4.1.2. Insérer des images et des textes

Pour le confort du visiteur, une page web doit toujours comporter un titre. Saisissez en haut de la page, à l’aide de l’outil Texte artistique « La fête au village : Août 2005 » et mettez en forme : taille 14, gras.

Insérez ensuite l’image fete1.jpg, bien trop grande.

Vous pouvez la redimensionner comme expliqué au chapitre 2 ou agir de la façon suivante :

1. Sélectionnez cette image.

2. Dans la barre d’outils Image, cliquez sur l’icône Taille et résolution de l’image.

3. Dans la boîte de dialogue qui s’ouvre, agissez sur les flèches de la zone Redimensionner

jusqu’à arriver à 40. ce nombre vous indique la nouvelle taille de la photo en pourcentage de l’original. Notez que la résolution reste la même, 96. Notez également la nouvelle taille de l’image, à gauche, dans les zones Largeur et Hauteur : 120 x 90.

Redimensionner une image en pourcentage de l’original.

4. Validez, votre image est redimensionnée.

Vous pouvez également redimensionner vos images en nombre de pixels en largeur et hauteur. Cela vous permet d’obtenir des images strictement de même taille, ce qui est bien plus esthétique dans une même page.

Vous avez noté que votre première image avait maintenant une taille de 12 pixels en largeur et 90 en hauteur.

1. Insérez l’image fete2.jpg. Elle est de plus grande dimension que l’original de fete1.jpg. Si vous la redimensionner à 40% comme la précédente, vous obtiendrez bien évidemment une image de taille supérieure, ce qui sera inesthétique sur votre page.

2. Cliquez sur Taille et résolution de l’image.

3. Faites varier le nombre de la zone Largeur jusqu’à 120. Notez que le pourcentage de

redimensionnement est de 30,77, ce que vous auriez eu bien du mal à deviner.

Redimensionner une image en nombre de pixels.

4. validez. Votre image est rigoureusement de la même taille que la précédente.

Faites de même avec les images fete3.jpg et fete4.jpg. Pensez à donner un titre à ces images.

Disposez-les l’une en-dessous de l’autre sur votre page.

Difficultés pour aligner des images manuellement.

Vous vous apercevez qu’il n’est pas facile de les aligner parfaitement et encore moins de les espacer régulièrement. Or un site se doit d’être parfait. Heureusement, Web Studio+ vous premet de réaliser très simplement ces opérations.

4.1.3. Aligner et répartir des objets

1. A l’aide de l’outil Pointeur, encadrez largement toutes les images. Les quatre doivent être entourées d’un rectangle bleu.

2. Dans le menu Organiser, cliquez sur Aligner les objets.

Les images encadrées, prêtes à être traitées par la commande Aligner les objets.

3. Dans la zone Horizontalement, sélectionnez A gauche, et dans la zone Répartir, ciquez sur Intervalle régulier. Puis validez.

Aligner à gauche à intervalles réguliers.

Vos images sont maintenant parfaitement alignées et espacées.

Un peu « sèches », il faut leur ajouter quelques petits commentaires.

1. A l’aide de l’outil Texte artistique (puisque ce seront des textes très courts) saisissez-les : « Il fait beau… Nous en sommes à l’apéritif » pour la première image, puis « A table ! Nous attaquons les entrées », « Les grillades seront les bienvenues » « Et la pétanque pour digérer » pour les suivantes. Placez les textes par rapport aux photos.

2. Comme vous l’avez fait précédemment, alignez et répartissez ces cadres de texte.

3. Encadrez les images et les textes, et associez-les (reportez-vous éventuellement au chapitre

2). Vous pouvez maintenant les déplacez tous ensemble pour les aligner sour les titres.

Photos et cadres textes associés.

Enregistrez votre travail.

4.2. Réaliser la page des sites amis

Il est d’usage dans un site, de créer une page spéciale permettant de placer des liens vers des sites de connaissance.

Comme vous l’avez fait pour la page de la fête, créez la page Sites amis. Sans oublier de créer le titre sur la page. (Site amis).

Dans cette page, il y aura une liste d’adresses W eb assorties éventuellement d’un commentaire. Le plus simple est de la présenter sous forme de tableau.

4.2.1. Insérer un tableau

1. Dans la barre d’outils à gauche de votre écran, sélectionnez l’outil Tableau.

L’outil tableau.

2. Cliquez sur votre page, et, dans la boîte de dialogue qui s’ouvre, sélectionnez le tableau (Par défaut). Augmentez le nombre de colonnes à 2 et validez.

La boîte de dialogue Créer un tableau.

3. Le tableau s’insère. A l’aide des poignées de redimensionnement, élargissez-le et allongez-le un peu pour agrandir les cellules, et placez-le sur la partie droite de votre page.

4. Sélectionnez la première colonne en cliquant sur sa partie supérieure lorsque le curseur prend la forme d’une main.

Sélectionner une colonne entière.

5. Cliquez droit sur cette colonne et, dans le menu contextuel, cliquez sur Tableau puis sur Propriétés des cellules.

Le menu contextuel des cellules de tableau.

6. Dans la boîte de dialogue qui s’affiche, cliquez sur l’onglet Cadre, et sélectionnez la première

option qui permet l’affichage des lignes intérieures et extérieures.

Affichez les lignes intérieures et extérieures des cellules sélectionnées.

7. Validez en cliquant sur OK. Renouvelez l’opération sur la seconde colonne. Votre tableau doit maintenant ressembler à ceci :

Le tableau mis en forme.

8. Placez votre curseur dans la première cellule et saisissez : « Le site de l’éditeur de ce livre ».

9. Le texte est situé en haut de la cellule, ce n’est pas très esthétique. Cliquez sur un des mots

avec le bouton droit de la souris et, dans le menu contextuel, cliquez sur Format du texte, puis sur Alignement vertical et enfin sur Centré.

Centrer le texte verticalement dans une cellule.

10. Appuyez sur la touche fléchée droite pour passer à la colonne suivante et saisissez :

http://www.microapp.com.

11. Saisissez ainsi plusieurs adresses et leurs commentaires.

Remarque : La mise en forme des cellules en une seule opération. Vous pouvez changer la

couleur des caractères, ou aligner le texte de plusieurs cellules à la fois, voire du tableau entier. Pour ce faire sélectionnez une ligne entière, ou une colonne entière, ou plusieurs lignes ou colonnes. Pour sélectionner plusieurs lignes, cliquez sur l’en-tête de la première et, sans relâcher le clic, glissez votre souris sur les en-têtes suivants. Appliquez alors vos modifications soit dans la zone Studio, soit dans une barre d’outils, soit à l’aide du menu contextuel.

Sélectionner plusieurs lignes.

12. Pour finir, à l’aide de la barre d’outils Texte, aligner à gauche tous les textes horizontalement dans les cellules.

4.3. Réaliser une page de texte

Pour parfaire votre site, comme il s’agit d’une association, vous pouvez y placer vos statuts.

Comme vous l’avez fait précédemment, créez une nouvelle page basée sur la maquette 1 que vous nommez « Association ».

1. Sur cette page, à l’aide de l’outil Cade texte, créez un grand cadre.

Agrandissement d’un cadre texte.

2. Placez votre curseur dans ce cadre et, dans le menu Insertion, cliquez sur Fichier texte.

3. Parcourez votre arborescence et sélectionnez le fichier statutsfour.rtf. Validez.

4. le texte s’insère. Vous pouvez maintenant ajuster le cadre texte.

Le texte inséré et l’ajustement du cadre.

Remarque : Le format .rtf. Vous ne pourrez pas importer de fichier au format .doc. Vous devez au

préalable l’enregistrer au format RTF. Pour ce faire, ouvrez votre fichier dans votre traitement de texte habituel, puis cliquez sur Enregistrer sous… Dans la boîte de dialogue, dans la liste déroulante de la zone Type de fichiers, sélectionnez Format RTF (*.rtf). Nommez votre fichier et validez. Attention : le fichier RTF ne doit pas contenir de formats ou d’en-têtes spéciaux sinon le texte ne sera pas importé correctement.

Enregistrer au format .rtf.

Votre site comporte maintenant 3 pages internes et une page d’accueil. Il pourrait en comporter bien plus, aucune limitation n’est imposée.

Pour notre exemple, nous le considérerons comme terminé au niveau de sa conception : il reste maintenant à mettre en place les différents liens.

Pensez à enregistrer votre travail.

5. Lier les pages entre elles

Une fois les pages établies, il doit être possible d’accéder à ces dernières d’un simple clic, c’est ce que l’on nomme la navigation. Il existe de nombreuses possibilités de navigation. Un des plus aisées pour le visiteur est celle qui offre un menu identique sur chaque page, ce qui lui permet de changer de page sans nécessairement repasser par la page d’accueil. C’est ce que vous allez réaliser maintenant de façon très simple.

5.1. Modifier la maquette

Vous avez remarqué que nous avions placé les éléments des différentes pages sur la droite. C’était en prévision d’intégrer un menu sur leur partie gauche.

Ce men devant être présent sur toutes les pages du site, vous allez le placer sur la maquette.

5.1.1. Insertion d’un tableau à une colonne

Le menu sera composé de textes courts, chacun renvoyant sur une page différente. Le plus simple est de le présenter sous la forme d’un tableau sans quadrillage.

Tout d’abord, placez-vous sur la Maquette 1 en la sélectionnant dans l’onglet Site de la zone

Studio.

1. Comme vous l’avez fait au chapitre précédent, insérez le tableau Par défaut. Les

pages étant au nombre de quatre, attribuez-lui quatre ligne et une seule colonne. Validez.

Créer un tableau de 4 lignes et 1 colonne.

2. Saisissez, dans chaque cellule, les intitulés. Placez les titres dans un ordre logique

d’importance, qui n’est pas forcément celui de la création des pages, Accueil étant, par convention, en haut. Afin que le menu ne prenne pas trop de place dans la page, faites au plus court. Par exemple, saisissez « Accueil, Association, Fête 2005 et Nos amis ».

Saisie du menu dans le tableau.

Afin d’attirer l’œil du visiteur, il est conseillé d’utiliser des couleurs différentes pour le menu, mais toujours en harmonie avec celles du site. Vous allez changer la couleur de fond des cellules.

3. Sélectionnez la colonne entière et, activez la commande Tableau/Propriétés des

cellules du menu contextuel. Cliquez sur l’onglet Remplissage, choisissez Solide

dans la zone Type, et sélectionnez la couleur marron foncé habituelle.

Remplir les cellules avec la couleur marron foncé.

4. Le texte (en marron par défaut) n’est plus lisible. Vous devez le mettre en blanc : sans

désélectionner la colonne, effectuer l’opération directement dans l’onglet Attribut de la zone Studio.

Changement de la couleur du texte dans la zone Studio.

Remarque : L’icône de texte. Afin de modifier la couleur du texte, assurez-vous que l’icône de texte (représentée par un A) est bien sélectionnée en haut de la zone couleur.

Icône de texte de la zone couleur.

5. A l’aide de la barre d’outils Texte, mettez les intitulés en gras et centrez-les.

6. Pour terminez, ajustez à l’aide des poignées de redimensionnement la largeur du

tableau à celle du texte. Désélectionnez pour juger de l’effet et placez le tableau judicieusement par rapport aux autres éléments, ajustez éventuellement en reprenant la maquette.

Le résultat sur la page d’accueil.

5.1.2. Mise en place des liens internes

Une fois le tableau établi, vous devez créer les liens hypertextes afin de v ous rendre sur la page sélectionnée.

Placez-vous à nouveau sur la maquette.

1. Sélectionnez le mot Accueil dans le tableau.

2. Dans le menu Insertion, cliquez sur Lien hypertexte.

Remarque : L’icône Lien hypertexte. Vous pouvez utiliser l’icône à gauche de votre écran

pour insérer un lien hypertexte.

L’icône permettant d’insérer un lien hypertexte.

3. Dans la boîte de dialogue qui s’ouvre, dans la zone Créer un lien vers, sélectionnez Une page de votre site.

4. Dans la zone Nom de la page, laissez la proposition Accueil, puisque telle est la destination de ce lien.

5. Laissez les deux autres options par défaut et valider par OK.

La boîte de dialogue de création des liens hypertextes.

Le mot Accueil, assorti maintenant de son lien, s’écrit en bleu, ce qui n’est ni esthétique, ni lisible. Vous aviez laissé l’option Utiliser couleurs de liens hypertextes du gestionnaire de combinaison dans la boîte de dialogue Liens hypertextes. Vous allez donc modifier la couleur des liens, et ce de façon permanente.

1. Dans la zone Studio, cliquez sur l’onglet Combinaisons.

Accès à l’onglet Combinaisons.

2. Descendez l’ascenseur et sélectionnez la dernière option, WWW9, pour obtenir des liens hypertextes en blanc.

WWW* : La combinaison pour des liens écrits en blanc.

3. Sélectionnez le mot Association.

4. Utilisez la commande Lien hypertexte comme précédemment, mais, dans la zone Nom de la page, sélectionnez, dans le menu déroulant, la page Association.

Création d’un lien vers la page Association.

5. Renouvelez l’opération avec les deux titres suivants en sélectionnant respectivement les pages Fête Août 2005 et Sites amis.

Votre page d’accueil ressemble maintenant à cela :

La page d’accueil munie de ses liens de navigation.

Enregistrez votre travail.

5.1.3. Un lien sur une image

Les liens ne se placent pas obligatoirement et exclusivement sur du texte. Il vous est certainement arrivé de pouvoir cliquer sur une image pour vous déplacer dans un site.

Par exemple, vous allez placer un lien de retour vers la page d’accueil sur le logo de l’association.

Placez-vous sur la maquette.

1. Sélectionnez l’image du logo.

2. Pour prévenir vos visiteurs, dans la barre d’outils Image, donnez-lui pour titre Retour à l’accueil.

3. Comme précédemment, utilisez la commande Lien hypertexte pour lui attribuer un lien vers la

page d’accueil. Notez que, comme il s’agit d’une image, les options de couleur et de soulignement sont inactives. Validez.

Insertion d’un lien sur une image.

5.2. Vérifier le fonctionnement du site

Votre site est maintenant bien avancé. Il est temps de vérifier votre travail.

5.2.1. Vérification des liens

Un des premiers soucis du W ebmaster est le bon fonctionnement des liens. En effet, quoi de plus désagréable pour le visiteur que de cliquer sur un lien inefficace ou de tomber sur l’horrible page Erreur 404 ! Vous devez donc les vérifier sitôt établis.

Pour ce faire, vous devez simuler une navigation réelle.

Placez-vous sur la page d’accueil.

1. Dans le menu Fichier, cliquez sur Aperçu du site puis sur Afficher le site dans Internet Explorer. Prenez garde de sélectionner cette option et non celle juste au-dessus, Afficher la page dans Internet Explorer, car, dans ce cas, les liens ne fonctionneraient pas.

La commande Aperçu du site dans le navigateur.

2. Le navigateur s’ouvre. Cliquez sur le premier lien, Association. Cette page remplace la page d’accueil.

3. Cliquez sur le second, puis sur le troisième, et enfin, revenez sur la page d’accueil. Si vous avez réalisé toutes les manipulations précédentes sans erreur, votre site f onctionne parfaitement.

4. Placez-vous sur une page intérieure et vérifiez le bon fonctionnement du lien sur le logo qui doit vous ouvrir la page d’accueil.

Notez que les liens apparaissent maintenant en couleur argent, ce qui était prévu dans l’option du Gestionnaire de combinaison, la seconde ligne de l’option WWW9 indiquant la couleur des liens visités.

La navigation dans l’explorateur.

5.2.2. Réglages fins de l’harmonie des pages

Profitez de cette visite simulée pour vérifier des éléments qui passent souvent inaperçus lors de la création des pages.

Tout d’abord vérifiez le positionnement des objets les uns par rapport aux autes et en particulier du menu. Rectifiez dans les pages concernées si nécessaire.

Ensuite, vérifiez l’harmonisation des titres et la disposition des éléments des pages, corrigez si nécessaire.

5.3. Utilisation des menus dynamiques

Une alternative au menu créé précédemment existe, il s’agit des menus dynamiques. Les menus dynamiques sont des objets de Web Studio+ permettant de générer automatiquement, selon la structure de votre site, une barre de navigation comprenant les liens vers chacune des pages de votre site.

Pour insérer un menu dynamique :

1. Sauvegardez sous un nouveau nom votre site en prévision des modifications qui v ont être effectuées ici. Placez-vous sur la Maquette 1, puis rendez-vous dans le menu Insertion et cliquez sur Barre de navigation.

2. Dans la fenêtre qui s’ouvre, cliquez sur l’onglet Ensemble de thèmes, puis cliquez sur le bouton Vertical. Cela signifie que vous souhaitez insérer un menu dynamique vertical, les noms de vos pages

s’afficheront les uns en-dessous des autres. Dans la liste des menus qui vous sont proposés, nous allons utiliser dans notre exemple celui nommé Noir et blanc. Utilisez la barre de défilement pour trouver ce dernier. Sélectionnez-le puis validez en cliquant sur OK.

3. Le menu dynamique vertical est inséré sur la maquette et sélectionné par défaut. Utilisez les poignées de redimensionnement pour agrandir le menu.

Vous remarquerez que le texte affiché au sein du menu ne peut pas être modifié directement. Effectivement le principe du menu dynamique est de récupérer automatiquement le nom donné à chacune des pages de votre site pour en remplir le menu. Il vous faut donc modifier le nom de spages de votre site pour obtenir les mêmes textes que dans le menu précédent.

4. Pour cela rendez-vous dans l’onglet Site de la zone Studio. Cliquez avec le bouton droit de votre souris sur une page de votre site (dans notre exemple Fête Août 2005), puis dans le menu contextuel sélectionnez Propriétés de la page…

5. Dans la boîte de propriétés de votre page, cliquez sur l’onglet Page, puis dans le champ Nom de la page, modifier le nom de votre page en Fête 2005. validez en cliquant sur OK.

Vous remarquerez que le texte dans votre menu dynamique a été modifié et que Fête Août 2005 est devenu Fête 2005. Procédez de la même manière pour les autres pages.

Remarque : Inclure une page à la navigation. Lorsque vous utilisez des menus dynamiques, par défaut toutes les pages de votre structure de site apparaîtront dans le menu. Si vous ne souhaitez pas qu’une page apparaisse dans le menu (cette dernière n’était pas finalisée par exemple) cela est possible. Il vous suffit de retourner dans les Propriété de la page concernée comme fait précédemment puis de décocher la case Inclure à la navigation. Pour que cette page apparaisse de nouveau dans le menu, il vous suffit de cocher à nouveau cette case.

Remarquez que l’ordre des rubriques du menu n’est plus le même puisque ce menu dynamique se base sur l’ordre des pages de la structure de votre site.

6. Toujours dans l’onglet Site de la zone Studio, cliquez avec le bouton gauche de votre souris sur la page que vous souhaitez déplacer (Association par exemple), puis tout en maintenant le bouton appuyé, déplacez la page entre Accueil et Fête 2005. relâchez le bouton de la souris puis observez maintenant votre menu dynamique. L’ordre des rubriques du menu a changé !

Déplacement d’une page dans la structure du site.

Le menu dynamique a été modifié automatiquement.

7. Effacez le menu précédent encore présent sur la page pour le remplacer par votre nouveau menu dynamique. Pour ce faire, sélectionnez tous le tableau, cliquez avec le bouton droit sur la sélection, choisissez l’option Tableau dans le menu contextuel, puis Supprimer et enfin Tous.

Suppression d’un tableau.

Visualisez le site dans votre navigateur et testez votre nouveau menu.

Aperçu du site dans Internet Exlorer.

Un menu dynamique vous propose diverses options. Pour accéder à ces dernières, deux possibilités s’offrent à vous :

Sélectionnez le menu dynamique en cliquant dessus. Une fois sélectionné, repérez le petit carré

présent sous les poignées de redimensionnement. Cliquez sur ce dernier avec le bouton gauche de votre souris pour ouvrir la fenêtre des options rattachées à l’apparence du menu. Nous vous recommandons de tester ces options pour trouver celle qui vous conviennent le mieux.

Cliquez sur ce carré pour ouvrir la fenêtre des options.

Cliquez avec le bouton droit de votre souris sur le menu dynamique pour afficher le menu contextuel,

puis sélectionnez Barre de navigation. Une fenêtre des options rattachées au comportement du menu s’ouvre alors. Nous vous recommandons de tester les diverses options pour trouver celle qui vous conviennent le mieux.

6. Insérer des liens externes

Il existe un autre type de liens que celui servant à la navigation entre les pages d’un site. Ce sont les liens externes, qui sont de deux sortes : les liens vers des adresses mail et les liens vers des adresses Web (URL).

6.1. Créer un lien vers une adresse mail

Vous avez affiché l’adresse mail de l’association. Il sera agréable au visiteur de pouvoir vous envoyer un mail d’un seul clic. Vous allez donc placer un lien sur cette adresse.

6.1.1. Insertion d’un lien sur l’adresse mail de la maquette

Tout d’abord, placez-vous sur la maquette.

1. Sélectionnez l’adresse mail en entier.

2. A l’aide de l’icône Lien hypertexte, ouvrez la boîte de dialogue.

3. Dans la zone Créer un lien vers :, sélectionnez l’option Une adresse de courrier électronique.

4. Dans la zone Courrier électronique, saisissez l’adresse et vérifiez-la.

5. Validez par OK.

Insertion d’un lien vers une adresse mail.

6.1.2. Vérification

Le lien est désormais actif, mais il faut le vérifier.

Lancez l’aperçu du site dans votre navigateur et cliquez sur ce nouveau lien. Votre logiciel de courrier électronique doit s’ouvrir en ayant pour destinataire l’adresse mail de l’association.

Ouverture du logiciel de courrier lors du clic sur l’adresse mail.

Vous vous apercevez alors que l’adresse mail, une fois visitée, prend une couleur argentée, illisible sur le fond vert.

6.1.3. Désactivation du gestionnaire de combinaisons

Pour remédier à cette couleur argentée, vous allez désactiver le gestionnaire de combinaison pour ce lien uniquement.

1. Placez-vous sur la maquette, sélectionnez l’adresse mail et activez l’icône Lien hypertexte.

Remarque : Le menu contextuel. Maintenant qu’un lieu existe sur ce texte, vous pouvez

accéder également à cette commande en cliquant avec le bouton droit de la souris sur le texte sélectionné et en choisissant la commande Lien hypertexte.

La commande Lien hypertexte dans le menu contextuel d’un texte déjà lié.

2. Dans la boîte de dialogue, décochez la case Utiliser les couleurs des liens hypertexte du gestionnaire de combinaison. Laissez cependant l’option suivante Lien hypertexte souligné

afin que le visiteur comprenne qu’il existe un lien sur ce texte. Validez.

Désactivation du gestionnaire de combinaison.

6.2. Créer des liens vers d’autres sites

Vous avez placé des adresses Internet dans la page des sites amis. Selon le même principe, vous allez placer sur celle-ci des liens qui permettront au visiteur de se rendre sur ces sites d’un simple clic de souris.

6.2.1. Insertion d’un lien vers un autre site

1. Ouvrez la page Sites amis.

2. Sélectionnez entièrement la première adresse Internet et cliquez sur l’icône Lien hypertexte.

3. Dans la boîte de dialogue, dans la zone Créer un lien vers, sélectionnez l’option Une page internet.

4. Dans la zone Fenêtre, déroulez la liste à l’aide de la petite flèche noire située à sa droite et

choisissez Nouvelle fenêtre. Ainsi, lorsque l’internaute cliquera sur cette adresse, le site demandé s’ouvrira dans une nouvelle fenêtre de son navigateur. Il ne quittera donc pas le vôtre. Indispensable pour conserver ses visiteurs !

5. Dans la zone URL, saisissez l’adresse.

Remarque : Erreur d’adresse. Vu la complexité de certaines adresses web, une erreur peut

s’y glisser facilement. Pour les saisir sans risque, connectez-vous à Internet, ouvrez votre navigateur, placez-vous sur la page d’accueil du site désiré et copiez l’adresse présente dans votre barre d’adresse. Utilisez-la ensuite dans votre site uniquement par la commande Coller.

6. Terminez par OK.

L’insertion d’un lien vers une adresse web.

Renouvelez l’opération sur toutes les adresses de la page.

Les adresses avec leurs liens s’affichent en blanc et sont quasiment illisibles. Vous pouvez choisir :

Soit de désactiver le gestionnaire de combinaison pour chacune d’entre elle comme

précédemment.

Soit de donner une couleur de fond aux cellules de cette colonne (reportez-vous pour cela

au début de ce chapitre).

Cette dernière option que nous avons prise, nous av ons opté pour une couleur bleu-vert foncée de cellules, en harmonie avec les couleurs du site.

La page des sites amis munie de ses liens externes.

6.2.2. Vérifications

Vous devez également vérifiez ces liens.

1. Connectez-vous à Internet.

2. Lancez l’aperçu dans le navigateur.

Remarque : Lancement plus rapide avec l’icône. Vous pouvez accéder rapidement cette commande en cliquant, dans la barre d’outils Standard, sur l’icône Afficher le site dans le navigateur. Votre dernier choix étant enregistré, vous renouvelez l’opération très rapidement.

L’icône Afficher le site dans le navigateur.

Cliquez sur la petite flèche vers le bas à côté de l’icône pour sélectionner une action plus

précise.

3. Accédez à la page Sites amis et cliquez sur le premier liens : votre navigateur doit ouvrir une seconde fenêtre sur le site de Micro Application.

4. Fermez cette fenêtre et renouvelez l’opération sur les autres liens.

Enregistrez votre travail.

Votre site est maintenant terminé. Vous pouvez maintenant le transférer sur votre serveur après avoir néanmoins effectué quelques contrôles.

7. Placer le site sur le Web

Avant de placer le site sur le serveur afin de le rendre accessible au monde entier, quelques manipulation, plus technique que visuelles, sont encore à réaliser.

7.1. Saisir les dernières informations

Ces informations, si elles ne sont pas essentielles pour le visiteur, sont néanmoins indispensables aux moteurs de recherche pour répertorier votre site. Il ne faut donc pas les négliger.

Les moteurs, lorsque vous allez y inscrire votre site, vont venir le visiteur et enregistrer certains éléments le constituant dont les titres des pages, les résumés et les mots-clefs. Nous avons placé ces manipulations en fin d’ouvrage afin de ne pas surcharger les chapitres précédents. Cependant, il est bien évident qu’elles peuvent être réalisées au fur et à mesure de la conception des différentes pages.

Si ce travail est indispensable pour la page d’accueil, il est secondaire (mais conseillé) pour les autres pages.

7.1.1. Nom et titre de la page

1. Placez-vous sur la page d’accueil de votre site.

2. Cliquez, avec le bouton droit de votre souris, sur le fond de la page et choisissez la commande Propriétés de la page.

La commande Propriétés de la page.

3. Dans la boîte de dialogue Propriétés de la page qui s’ouvre, cliquez sur l’onglet Page.

4. Dans la zone Nom de la page, vous pouvez laisser Accueil, mais cela n’est pas très

significatif. Il est intéressant d’y placer le nom de l’association dans notre cas. Saisissez donc Accueil de l’association Les amis du Four.

5. Dans la zone Nom du fichier, ne modifier rien, votre site ne fonctionnerait plus (la première page d’uns ite doit obligatoirement s’appeler index.html, sauf avis contraire de votre fournisseur d’accès Internet) ;

6. Laisser les autres options par défaut.

Donner un nom à la page.

7.1.2. Résumé de la page et mot-clef

Le résumé d’une page apparaîtra dans les moteurs de recherche.

1. Dans cette même boîte de dialogue des Propriétés de la page, cliquez sur l’onglet Rechercher.

2. Dans la zone consacrée à la description, saisissez un texte explicite. Comme il s’agit ici de la page d’accueil, ce texte peut résumer l’ensemble de votre site, par exemple Les Amis du Four,

association 1901 dont le but est la réfection d’un four à pain authentique.

3. Dans la seconde zone, saisissez une liste de mots significatifs qui permettront aux moteurs

d’afficher l’adresse de votre site lors de la recherche de l’un de ces mots par un internaute. Séparez-les par des virgules. Par exemple, « four, association, réfection, réhabilitation, pain, four à pain, nomduvillage, nomdudepartement, numeordudepartement, etc…

4. Validez titre et résumés par OK.

Insertion du résumé et des mots-clefs.

Réalisez cette opération sur toutes les pages de votre site. Les titres de page v arieront, mais les mots-clefs seront généralement identiques (vous pouvez procéder par copier/coller) sauf dans les très gros sites comportant de nombreuses rubriques. Le résumé, lui, peut être identique sur toutes les pages ou varier s’il est justifié de décrire précisément chaque page.

7.2. Effectuer les dernières vérifications

Nous l’avons déjà dit, un site se doit d’être parfait, Web Studio+ met à votre disposition un certain nombre d’outils très pratique qui vous permettront d’atteindre cette perfection (si tant est qu’elle existe !).

7.2.1. Contrôle de la maquette

Cet assistant va contrôler vos éléments et vous signaler si un objet pose problème pour le Web, tout n’étant pas permis sur Internet pour des raisons techniques (souvenez-vous des caractères accentués dans les nom de fichier).

Son lancement est indispensable avant le transfert sur le Web.

1. Dans le menu Outils, cliquez sur Contrôle de la maquette.

2. L’assistant Contrôle de la maquette s’ouvre, laissez les options cochées par défaut et cliquer sur Suivant.

3. Sélectionnez toutes les pages si ce n’est pas le cas et cliquez sur Terminer.

Lancement de la vérification de toutes les pages.

L’assistant examine v otre site et vous affiche un avertissement sur la police de caractères utilisée concernant l’adresse mail (souvenez-vous que nous avions délibérément utilisé la police non standard Ballonist SF). Il vous affiche à l’écran le texte incriminé afin que vous puissiez prendre une décision en toute connaissance de cause.

La police de caractère Ballonist SF n’est en effet pas supporté par les navigateurs, comme de nombreuses autres. En définitive, il n’y a que 6 ou 7 polices acceptées. Donc, si vous prévoyez dans votre site d’autres polices, il vous faudra :

Soit ignorer le fait au risque que cela pose problème au visiteur. Soit corriger pour passer votre texte dans une police supportée. Soit convertir ce texte en image au moment où il sera placé sur le Web. C’est la seule solution

valable tenez absolument à la police de caractères que vous aviez choisie.

Dans notre exemple, comme nous ne tenons pas particulièrement à la police Ballonist SF, nous avons choisi l’option Corriger. Cliquez sur Continuer.

Choix de correction du texte.

Une autre fenêtre s’ouvre, vous demandant de préciser la police de substitution. Cliquez sur la flèche déroulante de la zone Polices adaptées pour le Web, choisissez puis validez.

Choix de la police de substitution.

L’Assistant v a ainsi examiner toutes les pages et vous prévenir si un autre problème est détecté. Choisissez alors l’option voulue et cliquez sur Continuer.

Il peut aussi détecter d’autres problèmes, lisez bien les instructions très claires qui s’affichent. Il peut aussi simplement vous avertir d’une modification, sans vous laisser de choix. Ce sera le cas chaque fois qu’il estimera qu’un changement est obligatoire our le fonctionnement ou l’optimisation du site. Il en sera ainsi pour certains textes :

Avertissement de l’assistant de contrôle de la maquette.

Autre avertissement.

7.2.2. Optimisation du site

A l’étape précédente, vous avez déjà éliminé un grand nombre d’erreurs potentielles. L’utilisation des outils suivants est cependant fortement conseillée.

7.2.2.1. Correcteur orthographique

Nous av ons déjà parlé du correcteur orthographique en cours de saisie. Toutefois, vous pouvez lancer une vérification générale.

1. Dans le menu Outils, cliquez sur Correcteur orthographique.

2. Dans l’assistant qui s’ouvre, choisissez vos options puis cliquez sur Suivant.

L’assistant de correction orthographique.

3. A la fin, cliquez sur Terminer, toutes les pages seront passées en revue.

7.2.2.2. Gestionnaire de ressources

Le Gestionnaire de ressources va vous permettre de visualiser les propriétés des différents éléments de votre site.

1. Dans le menu Outils, cliquez sur Gestionnaire de ressources.

2. Sous le premier onglet, Ressources, vous visualisez les propriétés de toutes les images présentes dans vos pages. Vérifiez essentiellement leur poids et corrigez-les si nécessaire.

L’écran d’affichage des ressourcdes du sites.

3. Cliquez sur l’onglet Polices. Les différentes polices utilisées sont listées. Si vous avez corrigé précédemment, seules des polices autorisées sont présentes.

L’écran d’affichage des polices utilisées dans le site.

7.2.2.3. Les autres gestionnaires

Dans le menu Outils, d’autres gestionnaires sont à votre disposition :

Le Gestionnaire de texte récapitule tous les textes présents sur le site et vous permet d’atteindre un texte dans lequel vous détecteriez une anomalie.

Le Gestionnaire de liens hypertexte vous permet de vérifier la nature et l’exactitude de tous les liens, internes ou externes, présents dans votre site.

Le Gestionnaire des points d’ancrage vous permet de visualiser les points d’ancrage présents sur vos pages. Nous n’en avons pas défini ici, il est donc vide. Un point d’ancrage est une balise permettant, à partir d’un lien hypertexte, d’atteindre un endroit précis d’une page.

Le Gestionnaire d’images web vous permet de choisir le format sous lequel vous désirez exporter vos images sur le Web. Il est conseillé de laisser l’option par défaut.

7.3. Publier le site sur le Web

Votre site est maintenant parfaitement au point. Vous pouvez le transférer sur le web.

7.3.1. Les informations nécessaires

Pour ce faire, il vous est nécessaire de disposer d’un espace personnel sur ce que l’on appelle un serveur. C’est sur ce serveur que se connecteront les internautes lorsqu’ils saisiront votre adresse Internet (URL). Votre site s’affichera alors sur leur écran.

Pour disposer d’un tel espace, vous pouvez en demander l’ouverture à votre fournisseur d’accès Internet (FAI). La plupart mettent gratuitement cette possibilité à votre disposition. Vous disposez généralement d’une capacité de 50 Mo voir 100 Mo, ce qui est très largement suffisant pour un site personnel. A titre indicatif, le site exemple de ce manuel occupe moins de 1 Mo.

Renseignez-vous auprès de votre FAI. Une fois votre compte créé, conservez soigneusement les informations qui vous seront communiquées, au nombre de trois :

L’adresse ftp à laquelle vous devrez vous connecter : chez Wanadoo par exemple, ce sera

perso-ftp.wanadoo.fr, chez Online privftp.online.net, etc. Votre identifiant : en règle générale, ce sera l’identifiant de votre boîte à lettres principale. Votre mot de passe : le mot de passe que vous avez choisi pour cette boîte à lettres.

7.3.2. Le transfert

7.3.2.1. Configurer Web Studio+

Vous devez commencer par enregistrer ces informations dans le logiciel.

1. Dans le menu Fichier, cliquez sur Publier le site, puis Sur le Web.

La commande de transfert sur le Web.

2. Dans la boîte de dialogue Informations sur le compte qui s’ouvre :

Dans la zone Nom du compte : donnez un titre à votre site, ici Les Amis du Four. Dans la zone Adresse ftp, saisissez l’adresse fournie par votre FAI. Laissez 21 dans la zone suivante. Ne renseignez la zone Dossier que si un dossier vous a été explicitement précisé

par votre FAI (ou si par la suite vous créez des dossiers afin d’héberger plusieurs

sites sur le même compte). Enfin entrez votre identifiant et votre mot de passe. Cochez la case Enregistrer le mot de passe de façon à ce qu’il ne vous soit pas

demandé à chaque fois, puis validez.

Saisie des informations de transfert.

7.3.2.2. Publier sur le Web

La fenêtre laisse la place à une nouvelle boîte de dialogue, Publier sur le web. Cliquez sur Publier.

Le transfert commence. Une fenêtre d’information vous indique la progression et le temps restant.

Etat d’avancement du transfert du site vers le serveur.

Lorsque le transfert est terminé, cliquez sur Fermer. Votre site est en ligne.

7.3.2.3. Une ultime précaution, la vérification en ligne !

Il vous faut maintenant le vérifier en ligne, comme si vous étiez un simple visiteur. C’est indispensable et ça peut parfois réserver des surprises, en particuliers au niveau de la mise en page.

Lancez votre navigateur, et saisissez votre adresse dans la barre d’adresse.

Votre page d’accueil apparaît. Il vous reste à vérifier les liens et la mise en page, puis les modifier éventuellement.

Vérification du site en ligne.

7.4. Mettre le site à jour

Un site doit évoluer sans cesse, être mis à jour régulièrement, sinon il meurt et ne reçoit plus de visites. Il a été conçu pour communiquer, s’il présente toujours les mêmes pages, il ne remplit pas sa mission.

Pour le mettre à jour, faites vos modifications, quelles qu’elles soient, sur votre ordinateur, puis transférez les pages ainsi modifiées.

Par exemple, vous avez envie de l’agrémenter. Vous allez donc lui adjoindre quelques ornements.

7.4.1. Insertion d’images, des Gif animés, et de Web Arts

Vous pouvez ajouter par exemple quelques gif animés.

1. Dans le menu Insertion, cliquez sur Fichier média puis sur Gif animé.

2. Dans la boîte de dialogue, ouvrez une catégorie et cliquez sur les noms des fichiers pour les visualiser, sur la droite de la fenêtre. Votre choix effectué, cliquez sur Ouvrir.

Insertion d’un gif animé.

3. Cliquez sur la page, le gif s’y affiche, vous n’avez plus qu’à le positionner.

De nombreux autres fichiers vous sont également proposés. Il s’agit d’une bibliothèque de Webarts fourni avec Web Studio.

1. Dans le menu Insertion, cliquez sur Image puis sur Webarts.

2. Vous êtes dirigé sur une fenêtre où vous pouvez choisir parmi une importante collection d’objets.

La collection de Webarts de Micro Application.

3. Ouvrez une catégorie, faites un clic droit sur l’image de votre choix, et enregistrez-la sur votre disque dur. Insérez-la ensuite dans votre site comme n’importe quelle image (voir le chapitre 1).

Remarque : Si votre navigateur par défaut est Internet Explorer, vous pouvez effectuer un

glisser-déposer de l’image directement dans la page souhaitée de Web Studio+.

7.4.2. Insertion d’un fichier son

Vous pouvez insérer un fichier son sur votre page d’accueil. Il ne faut cependant pas en abuser et mettre des fichiers sons sur toutes les pages.

1. Dans le menu Insertion, cliquez sur Fichier média, puis sur Son.

2. Dans la boîte de dialogue Son, parcourez v otre disque dur et sélectionnez le fichier son que vous désirez placer. Prenez garde qu’il ne soit pas trop lourd à charger.

3. Choisissez l’icône que vous souhaitez voir s’afficher, puis validez.

Insertion d’un fichier son.

7.4.3. Création d’une bannière animée

Vous pouvez également créer une bannière animée. Web Studio+ intègre un outil très simple pour le faire. Par exemple, vous désirez annoncer la tenue de l’assemblée générale de l’association.

1. Dans le menu Insertion, cliquez sur Objet Web puis sur Bannière animée.

2. L’assistant s’ouv re, cliquez sur Suivant.

3. Dans le premier écran choisissez la couleur d’arrière-plan et cliquez sur Suivant.

4. Dans l’écran suivant, sélectionnez le nombre de ligne que comportera votre bannière. Nous avons choisi 2. Cliquez sur Suivant.

L’assistant de création d’une bannière animée.

5. Renseignez les écrans suivants avec les textes Assemblée Générale et Le 14 janvier à 20 h 30 Salle des fêtes. Choisissez pour chacun la couleur, la police de caractère, la taille, le sens et la vitesse de défilement. Cliquez enfin sur Terminer.

6. Cliquez sur votre page, la bannière s’insère. Positionnez-la.

La bannière sur la page d’accueil.

7. Si vous désirez la modifier, double-cliquez dessus afin d’ouvrir à nouveau l’assistant.

8. Démarrez l’Aperçu dans le navigateur afin de voir l’animation (sur la page de création, elle n’est pas visible).

7.4.4. Mise à jour du site sur le serveur

Vous v enez de modifier votre page d’accueil, vous avez placé de nouveaux éléments sur votre site, vous devez maintenant transférer toutes ces nouveautés sur le serveur.

Pour effectuer les mises à jour, Web Studio+ vous propose un outil fort pratique/

1. Dans le menu Fichier, cliquez sur Publier le site puis Sur le Web.

2. Dans la nouvelle boîte de dialogue, cliquez sur Publier.

3. Le logiciel se connecte à votre serveur et ouvre la boîte de dialogue Publication des fichiers.

4. Si vous souhaitez placer uniquement les fichiers modifiés depuis le dernier transfert, répondez Oui. C’est généralement l’option conseillée. Inutile en effet de transférer des pages déjà

placées. De plus, si vous avez supprimé des pages ou des fichiers inutiles de votre ordinateur, ils seront automatiquement supprimés du serveur.

Ne placer que les fichiers modifiés.

5. Le transfert des pages modifiées et des nouveaux fichiers débute alors, la progression vous est indiquée à l’écran comme lors du premier transfert.

La mise à jour du site.

7.5. Pour conclure

Nous espérons que ce guide vous aura permis de comprendre les possibilités offertes par Web Studio+ et que désormais vous êtes prêt à vous lancer dans la création de votre propre site !

Nous n’avons pas pu faire le tour de toutes les fonctionnalités de ce logiciel, car elles sont fort nombreuses. Mais maintenant que vous en connaissez le fonctionnement de base, il vous sera aisé de comprendre et d’utiliser les possibilités que vous y découvrirez. Visitez tous les menus et essayez les fonctions que nous n’avons pas étudiées. Testez les icônes, déroulez les menus contextuels… en bref, explorez ! vous ne le regretterez pas.

Et bonne route à votre site.

Micro Application Web Studio + User Manual [fr]

Specifications and Main Features

Frequently Asked Questions

User Manual