Voici une page beaucoup plus aérée (image 06), dans laquelle vous pouvez insérer des éléments comme bon vous semble.
Figure 06 – Une page aérée prête à recevoir des éléments.
Insérer des images, du son, de la vidéo
Rien de plus simple. Tout est prévu dans Web Creator pour faire vite. Ainsi, l’interface de Web Creator offre une barre d’outils qui permet d’insérer rapidement des éléments (Image 07).
34
Figure 07 – Insérez rapidement des éléments depuis la barre d’outils.
Nous vous donnons ci-dessous quelques exemples, sachant que le principe reste le même pour tous les éléments : avec un clic sur le bouton correspondant à l’objet, vous définissez ses propriétés et lorsque vous validez la boîte de dialogue des propriétés, l’élément en question est inséré dans la page. Nous vous conseillons de vous référer à l’aide du programme pour des explications plus précises.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Insérez une image
Dans la barre d’outils précédente, cliquez sur l’icône d’insertion d’une image .
La fenêtre propriété de l’image s’affiche à l’écran (image 08).
Figure 08 – La fenêtre des propriétés de l’image.
Depuis l’onglet Image, cliquez sur l’icône en forme de dossier ouvert et allez chercher sur votre disque dur le fichier image de votre choix. Web Creator accepte directement la plupart des formats d’image connus. Une fois votre fichier choisi, Web Creator affiche un aperçu dans le cadre éponyme (figure 09), avant de l’insérer sur la page web.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
35
Remarque
Si vous pouvez voir une prévisualisation de l’image, c’est que Web Creator sait la lire. Lors de la création du site, l’image sera automatiquement optimisée pour le web. Les images seront redimensionnées et converties. Non seulement vous n’avez pas à connaître les langages de programmation, mais en plus on vous épargne de devoir vous y retrouver dans la question complexe des tailles et formats d’image.
Figure 09 – Web Creator affiche un aperçu avant l’insertion d’une image.
Puis cliquez sur le bouton OK. La figure 10 montre que par défaut, Web
Creator place l’image au centre de la page.
36
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Figure 10 – Par défaut, Web Creator insère tout nouvel élément au centre de la page.
Remarque
Comme vous pouvez le voir sur la figure 11, chaque nouvel
élément inséré apparaît sous la forme d’une icône dans le cadre Éléments de la Barre de sélection, dans la partie droite de l’interface.
Figure 11 – L’image apparaît sous la forme d’une icône dans le cadre
Éléments de la Barre de sélection.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
37
Vous pouvez bien entendu déplacer cette image en cliquant dessus avec le bouton de la souris et en maintenant celui-ci enfoncé. Et pour modifier les dimensions de l’image, placez le curseur sur l’un des bords ou des coins de l’image, et déplacez les poignées de redimensionnement.
Remarque
Pour modifier les dimensions d’une image, tout en maintenant ses proportions, saisissez l’un des coins de l’image avec le curseur de la souris, et tout en maintenant la touche
MAJ enfoncée, déplacez-le curseur.
La procédure pour insérer une vidéo ou un son est rigoureusement identique. Pour une vidéo, cliquez dans la barre d’outils sur l’icône en forme de pellicule (figure 12), ou bien appelez-le menu Insertion/Animation-Vidéo. Et pour insérer un son, cliquez sur le bouton en forme de haut-parleur (figure 12) ou appelez le menu Insertion/Son.
Figure 12 – Les boutons d’insertion de vidéo et de son.
Insérer du texte
Pour insérer du texte, cliquez sur l’icône en forme de A dans la barre d’outils, ou bien ouvrez le menu Insertion/Texte.
Dès lors, un cadre s’affiche au milieu de la page web, ainsi qu’une fenêtre affichant des propriétés du texte (figure 13).
38
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Figure 13 – Cadre de saisie du texte et fenêtre de ses propriétés.
Saisissez votre texte à l’intérieur du cadre. Puis utilisez la barre d’outils
"Texte", située par défaut en haut de la fenêtre, pour appliquer des attributs à ce texte, comme la justification, la police, la taille du corps et bien d’autres.
Modifier les attributs du texte
Web Creator permet d’appliquer des styles à tout ou une partie d’un texte seulement. Sélectionnez par exemple une phrase de votre texte. Puis modifiez les attributs en changeant la police, la grosseur des caractères, le style (gras, italique, souligné), ou bien la couleur de la police en cliquant sur le bouton rectangulaire, noir par défaut, et doté d’une petite flèche. Cette dernière permet, après avoir cliqué dessus, de choisir une autre couleur dans la palette qui s’affiche alors. Vous remarquerez que le style ne s’applique qu’au bloc de texte sélectionné et que les modifications s’affichent en temps réel (figure 14).
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
39
40
Figure 14 – Les modifications ne s’appliquent qu’au bloc de texte sélectionné.
Attribuer une couleur de fond au texte
Découvrons maintenant une autre fonction intéressante : la modification de la couleur de fond du texte. Pour attribuer une couleur de fond au texte, dans les propriétés de la Barre des éléments, déroulez l’option Arrière-plan invisible et choisissez Non (image 15).
Figure 15 – Décochez l’option Transparent pour appliquer au texte une couleur de fond.
Cliquez ensuite sur l’option Arrière-plan (couleur) (Image 15-1) puis sur
Figure 15-1 – Déterminez ensuite la couleur de l’arrière-plan.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
La fenêtre Couleurs s’affiche (figure 16). Choisissez une couleur. Le résultat est montré dans la figure 17.
Pour revenir à une couleur de fond transparente, il suffit de revenir à l’étape de la figure 15, en choisissant Oui pour un arrière-plan invisible.
Figure 16 – Le sélectionneur de couleur.
Figure 17 – Texte avec couleur de fond.
Insérer un lien hypertexte
Un lien hypertexte permet, en cliquant sur du texte, une image, ou tout autre objet multimédia, d’accéder à une autre page web, ou même d’ouvrir une application comme Word.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
41
Sélectionnez la partie de votre texte sur laquelle vous voulez appliquer un lien hypertexte. Dans l’exemple que nous créons ensemble, il s’agit de la partie de texte « Nous écrire » : en cliquant dessus, l’internaute pourra envoyer un email pour demander des renseignements.
Nous vous conseillons dans un premier temps d’appliquer le style Souligné
à cette sélection de texte. En effet, il est d’usage sur le web que les liens hypertextes soient soulignés.
Puis dans la fenêtre des propriétés du texte, cliquez sur l’icône Propriétés
de l’hypertexte
.
Sélectionnez la partie de texte à laquelle vous voulez appliquer un lien hypertexte, puis dans la barre d’outils Edition, juste sous la barre de menus, cliquez sur l’icône « Lien... » Vous pouvez aussi passer par la commande de menu « Edition/Liens... » ou par un clic droit et la commande « Lien... ».
La fenêtre Propriété de l’hypertexte s’affiche (figure 20). Depuis l’onglet
Lien, Web Creator propose, après avoir cliqué sur le texte préalablement sélectionné, d’ouvrir soit :
• une nouvelle page web ;
• une page existante, un programme ou un fichier ;
• un site web ou une URL ;
• un courrier électronique ;
• un lien prédéfini ;
• un élément.
42
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
figure 20 – La fenêtre des propriétés de l’hypertexte donne accès
à plusieurs options de gestion des liens.
Dans notre cas, en cliquant sur « Nous écrire », l’internaute pourra envoyer un email pour demander des renseignements. Nous allons choisir dans la fenêtre des Propriétés de l’hypertexte Un courrier électronique. La fenêtre
Adresse du courrier électronique s’affiche. Saisissez l’email dans le
champ associé (figure 21).
Figure 21 – Saisissez l’adresse email.
Remarque
Pour supprimer un lien hypertexte, cliquez sur l’icône en forme de croix à droite du champ Lien (figure 22).
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
43
