Créer un site Web personnel

Transcription

1 Créer des sites Web personnels 1 Créer un site Web personnel Dans ce projet, nous expliquerons comment créer de toutes pièces un site Web personnel. Nous en profiterons pour vous fournir quelques astuces qui vous permettront d'éviter certains écueils. Pour réaliser ce didacticiel, vous avez besoin d'une sélection de photographies à ajouter à votre galerie photos. Dans cet exercice, vous apprendrez à : Définir une maquette. Définir la structure du site et la navigation. Ajouter une barre de navigation. Ajouter des éléments à partir de l'onglet Galerie. Créer une galerie à l'aide des images survolées. Créer un simple formulaire de mail basé sur le Web.

2 2 Didacticiels Créer un site Web personnel Dans ce projet, nous allons créer un site Web personnel de toutes pièces. Le site servira à exposer le travail d'un photographe. La mise en page et la structure sont importantes car nous voulons que le site soit sobre et simple, pour ne pas détourner l'attention des images. Nous utiliserons quelques fonctionnalités de WebPlus, notamment les survols pour créer une "galerie photos" à partir d'une sélection de photographies. Nous ajouterons aussi quelques objets texte et un formulaire Web que les visiteurs pourront utiliser pour envoyer un message électronique au photographe. Définir la structure du site et la maquette 1 Dans l'assistant Démarrage, cliquez sur Créer > Nouveau site, ou, dans WebPlus, cliquez sur Fichier, puis sur Nouveau. 2 Sous l'onglet Site, dans la liste déroulante Ajouter, cliquez sur Nouvelle page. Dans la boîte de dialogue Insérer, cliquez sur OK. Deux pages sont maintenant affichées sous l'onglet : "Accueil" et "Page 2". Faites un clic droit sur Page 2 et sélectionnez Propriétés de la page. 3 Dans la boîte de dialogue Propriétés de la page : Dans le champ Nom de la page, effacez le texte par défaut et saisissez "A propos". Activez l'option Spécifier un titre de page et saisissez "A propos de mjames". Cliquez sur le bouton Modifier puis, dans la boîte de dialogue Propriétés des pages Web, renommez la page apropos.html et cliquez sur OK. Cliquez sur OK. 4 Répétez les étapes 2 et 3 pour ajouter quatre pages supplémentaires. Nommez ces pages "Collection", "Equipement", "Liens" et "Contact", puis modifiez les titres HTML et les noms de fichiers en conséquence.

3 Créer des sites Web personnels 3 Les pages du site sont en place. Nous pouvons définir les éléments de notre maquette, c'est-à-dire les éléments que nous souhaitons afficher sur chaque page. 5 Dans le coin inférieur gauche de l'espace de travail, cliquez sur la flèche pour développer le Gestionnaire de pages, puis cliquez sur Maître A pour afficher la maquette. 6 Dans la palette Formes rapides, cliquez sur le Rectangle et tracez un rectangle de 620 px de large sur 420 px de haut, dans la partie supérieure de la page. Sous l'onglet Transformation les champs Let H indiquent la largeur et la hauteur exactes. 7 Déplacez le nœud vers le bas pour arrondir les angles. 8 La forme sélectionnée, cliquez sur Convertir en courbes dans le menu Outils. Des nœuds supplémentaires apparaissent sur le contour. 9 Sélectionnez le nœud supérieur gauche et appuyez sur Suppr. Procédez de même pour supprimer le nœud supérieur droit, en créant des angles droits dans la partie supérieure. 10 Le rectangle étant sélectionné, faites un clic droit et sélectionnez Copier. Faites encore un clic droit et sélectionnez Coller. Vous pouvez convertir n'importe quelle forme ou texte artistique en courbes (lignes et noeuds). Toutefois, le nouvel objet, une série de segments, ne possède plus ses anciennes propriétés. Vous ne pouvez pas modifier la police du texte qui a été converti en courbes.

4 4 Didacticiels 11 La nouvelle forme étant sélectionnée, cliquez le nœud supérieur gauche, puis maintenez la touche Maj enfoncée et cliquez sur le nœud supérieur droit. Les deux nœuds sont maintenant sélectionnés. Relâchez la touche Maj, faites glisser les nœuds vers le bas jusqu'à ce que la forme mesure environ 90 pixels de haut, puis mettez-la en place en la faisant glisser directement au-dessus de la grande forme. 12 Sélectionnez les deux formes puis, sous l'onglet Alignement : Vérifiez que la case à cocher Aligner sur les marges est désactivée, puis cliquez sur le bouton En Bas. Activez la case à cocher Aligner sur les marges, puis cliquez sur le bouton Centrer horizontalement. 13 Sélectionnez la petite forme puis, dans la barre d'objets standard, cliquez sur l'outil Remplissage. Tracez un trait vertical à travers le centre de la forme, puis faites glisser les nœuds inférieur et supérieur vers le bas pour créer un effet d'ombre grise subtile, comme illustré. Sélectionnez l'outil Pointeur et réglez la couleur de ligne sur "Aucune" sous l'onglet Ligne. Bravo, vous venez de créer une barre de navigation de toutes pièces! Pour finaliser l'effet, nous ajouterons une ombre portée aux deux formes rectangulaires. 14 Sélectionnez le grand rectangle et utilisez l'onglet Ligne pour régler le style de ligne sur "Aucun". L'objet étant sélectionné, cliquez sur Format, puis

5 Créer des sites Web personnels 5 sur Effets de filtre. Dans la boîte de dialogue Effets de filtre, définissez les réglages suivants : Pour le grand rectangle : Effet : ombre portée Opacité : 30 Flou : 2 Verrou : centre Distance : 2 Angle : 135 Utilisez les paramètres suivants pour appliquer l'ombre portée au petit rectangle (barre de navigation) : Effet : ombre portée Opacité : 30 Flou : 1 Verrou : centre Distance : 1 Angle : 270 Nous allons maintenant créer un séparateur de barre de navigation à l'aide de deux formes rapides. 15 Cliquez sur Rectangle et créez un long et fin rectangle sur la page. Sous l'onglet Transformation, réglez la largeur de la forme à un pixel et la hauteur à deux pixels de moins que la hauteur du petit rectangle. Cliquez sur l outil Zoom avant et zoomez sur la forme.

6 6 Didacticiels 16 Créez une copie de la forme et placez-la à côté de l'original. 17 Sélectionnez la forme la plus à gauche puis, sous l'onglet Echantillons, appliquez du gris clair pour le remplissage et la ligne (nous avons utilisé la valeur RVB 192, 192, 192). 18 Sélectionnez l'autre forme et appliquez du blanc pour le remplissage et la ligne. 19 Sélectionnez les deux lignes, puis, sous l'onglet Alignement cliquez sur Centre vertical. 20 Les formes étant toujours sélectionnées, cliquez sur le bouton Grouper. Mettez ensuite le groupe en place au-dessus du petit rectangle, approximativement au niveau du repère 200 pixels (à un tiers environ de la largeur du rectangle). La mise en page principale de la maquette est terminée. Il ne reste plus qu'à ajouter une barre de navigation, le titre du site et un arrière-plan. Commençons par la barre de navigation.

7 Créer des sites Web personnels 7 Ajouter une barre de navigation Nous souhaitons mettre en place une barre de navigation simple et facilement lisible. Plutôt que de créer tous les boutons un à un et gérer les liens vers les pages, nous pouvons utiliser les barres de navigation de WebPlus qui gèrent tout ce travail automatiquement. 1 Assurez-vous que la maquette est la page active. Sinon, cliquez sur le bouton Maquettes dans le volet droit et sélectionnez Maître A. 2 Cliquez sur le bouton Insérer une barre de navigation. 3 Sélectionnez la catégorie Créateur (Javascript). 4 Choisissez la première barre de navigation en cliquant sur le bouton Sélectionner. 5 Laissez les autres options inchangées pour le moment et cliquez sur OK pour que WebPlus ajoute la barre de navigation sur la page.

8 8 Didacticiels 6 Prévisualisez le site dans votre navigateur Internet et cliquez sur les différents boutons pour vérifier la navigation. Nous allons maintenant modifier l aspect graphique de la barre de navigation. 1 Cliquez sur la barre avec le bouton droit de la souris et sélectionnez la commande Modifier un style. 2 Donnez un nom expressif au style, par exemple. Le volet gauche affiche deux rubriques : Principal : regroupe tous les réglages concernant l aspect global de la barre et des menus de premier niveau. Dans notre cas, cela concerne par exemple les boutons Accueil, Collection, etc. Sous-menu : regroupe tous les réglages concernant les commandes disposées sous le menu principal. Dans notre cas, nous ne disposons pas de sous-menus. 3 Ouvrez le volet Principal, réglez l arrière-plan sur Transparent. Il s agit ici de l arrière-plan de la barre de navigation. Vous pouvez également définir le décalage dans le remplissage et l alignement de la barre.

9 Créer des sites Web personnels 9 4 Sélectionnez l entrée Lien. Elle définit l aspect des commandes du menu principal. Nous avons choisi de les afficher en orange, gras, souligné. 5 De même, réglez l entrée Page courante. Elle définit l aspect du menu de la page en cours. Nous avons choisi de l afficher en orange, gras. 6 Réglez maintenant l entrée Lien survolé. Elle définit l aspect du menu lorsque le curseur de la souris va passer dessus. 7 Laissez les autres options inchangées et cliquez sur OK. 8 Prévisualisez le site dans le navigateur pour vérifier que les boutons de la barre fonctionnent correctement.

10 10 Didacticiels Ajouter un titre et un arrière-plan au site 1 Utilisez l'outil Texte artistique pour créer un titre pour votre site Web. Nous avons utilisé deux objets texte artistique, l'un pour "mjames" et l'autre pour "photographe". 2 Utilisez la palette Texte pour mettre en forme le texte. Nous avons choisi la police Times New Roman 30 pt pour la première ligne et la police Times New Roman 20 pt pour la seconde ligne. 3 Utilisez l'onglet Echantillons ou Couleur pour choisir la couleur du titre et ajustez éventuellement les valeurs de Teinte. Par exemple, nous avons utilisé un remplissage gris, RVB (238, 238, 238) pour tous les textes et nous avons ajusté la valeur Teinte comme suit : "m" : -33% "james" : -57% "photographe" : -20% Pour terminer la maquette, il ne reste plus qu'à définir l'arrière-plan. Nous utiliserons une image. 4 Dans la barre d'outils Page, cliquez sur Gestionnaire de combinaisons. 5 Dans la boîte de dialogue du Gestionnaire de combinaisons, cliquez sur le bouton Modifier situé sous le texte. 6 Dans la boîte de dialogue Arrière-plan, sélectionnez le fichier, puis cliquez sur OK pour ajouter l'image en tant qu'arrière-plan pour la maquette. Votre maquette doit ressembler à celle illustrée.

11 Créer des sites Web personnels 11 Nous avons aussi ajouté une note de copyright à la maquette. Bravo, la mise en page de la maquette est terminée. L'avantage de l'utilisation d'une maquette pour des éléments tels que ceux-ci est qu'ils apparaîtront sur toutes les pages du site, alors que nous n'avons eu besoin de les définir qu'une fois. Nous allons maintenant créer le contenu des autres pages du site Web. Nous commencerons par définir notre galerie photos sur la page Collection. Créer une galerie photos Nous allons maintenant ajouter une galerie photos. 1 Sous l'onglet Site, double-cliquez sur la page Collection pour l'ouvrir dans l'espace de travail. Notez que les éléments de la maquette sont affichés sur la page, mais qu'il ne peuvent pas être sélectionnés : ils sont conservés à l'abri sur la maquette. 2 Dans la barre d'outils, développez la palette Importer une image et cliquez sur le bouton Inséter une image survolée (popup).

12 12 Didacticiels 3 Dans la boîte de dialogue Eléments survolés, cliquez sur Parcourir pour sélectionner une image "normale". Accédez au dossier contenant les photographies que vous voulez ajouter, puis sélectionnez l'image à ouvrir. L'image survolée utilisera par défaut le même fichier, comme nous le souhaitons. 4 Activez l'option pour Afficher la légende de l'image survolée. 5 Saisissez la légende qui s'affichera lorsque l'image apparaîtra sur la page. Vous pouvez modifier la couleur du texte, la police et la taille. Mais pour l'instant, laissez pour l'instant les valeurs par défaut. 6 Cliquez sur Définir la position de l'élément survolé. Un aperçu de la page apparaîtra avec un positionnement aléatoire des images. Vous pouvez zoomer sur la page en cliquant sur. 7 Cliquez sur l'image dotée d'une bordure verte. Il s'agit de l'image "normale" qui va servir de vignette. Réglez l'alignement Gauche sur 620 et le Haut sur 66 pixels environ.

13 Créer des sites Web personnels 13 Pour modifier la taille, réglez la Largeur sur 50 pixels. La Hauteur sera automatiquement modifiée si l'option Conserver les proportions est active. 8 Cliquez ensuite sur l'image dotée d'un contour bleu, l'image survolée. Nous souhaitons qu'elle s'affiche vers le centre de la page et qu'elle soit bien plus grande que la vignette. Réglez les valeurs Gauche sur 325, Haut sur 120 et Largeur sur Cliquez sur l'objet "Légende" doté d'une bordure rouge. Déplacez-le vers le centre de l'image. Réglez la valeur Haut sur 350. Double-cliquez sur OK pour fermer les boîtes de dialogue. 10 Prévisualisez la page dans le navigateur. Notez que lorsque le pointeur de la souris survole la vignette, la version pleine taille s'affiche, accompagnée d'une légende. Nous avons maintenant besoin d'autres images! 11 Fermez l'aperçu pour revenir à la page. Répétez la procédure depuis l'étape 2. Vous remarquerez que les nouvelles images utilisent les mêmes réglages Gauche et Haut que ceux que vous avez spécifiés pour votre premier survol. Lorsque vous retournez à votre page cette fois, vous verrez que la deuxième vignette a été placée directement sur la première. Cliquez sur l'image du haut pour la sélectionner et déplacez-la vers le dessous de la première vignette. A ce stade, ne vous souciez pas de l'alignement exact, que nous réglerons à la fin. Ajoutez cinq images supplémentaires à votre page en répétant les étapes 2 à 11.

14 14 Didacticiels 12 Sélectionnez votre dernière vignette et déplacez-la sur la bordure grise de votre barre de navigation. 13 Sélectionnez maintenant toutes vos vignettes. 14 Sous l'onglet Alignement, cliquez sur sur Centre horizontal et sur Intervalle régulier vertical. Les vignettes devraient être parfaitement alignées. 15 Prévisualisez le résultat. Nous devons maintenant ajouter des instructions indiquant au visiteur ce qu'il doit faire. Il nous faut pour cela une zone de texte HTML. 16 Cliquez sur l'outil Zone HTML et déplacez le pointeur vers la page pour insérer une zone de texte d'environ 220 x 50 pixels : Nous avons utilisé la police Arial 12 pt et la couleur gris clair. 17 Sélectionnez la zone de texte HTML de manière à ce qu'elle soit entourée d'un cadre de sélection. Dans l'onglet Transformation, réglez X sur 330 px et Y sur 200 px. 18 Enfin, prévisualisez la page dans votre navigateur.

15 Créer des sites Web personnels 15 Si vous passez le curseur sur une vignette, le texte sera caché par la grande image. Bravo! Deux des pages Web sont maintenant en place. Continuons avec la page Equipement dans laquelle nous importerons quelques images et nous ajouterons des liens hypertexte vers divers sites Web traitant d'équipements. Importer des images et créer des hyperliens 1 Ouvrez la page Equipement dans l'espace de travail en doublecliquant sur l'onglet Site ou en le sélectionnant dans le Gestionnaire de pages. 2 Utilisez l'outil Rectangle pour tracer un rectangle d'environ 200 pixels de large sur 118 pixels de haut, sur la page. Déplacez le nœud de gauche vers le bas pour arrondir les angles. Sous l'onglet Echantillons, appliquez un remplissage blanc et un contour gris clair. 3 La forme étant sélectionnée, cliquez sur Edition/Copier, puis cliquez sur Dupliquer.

16 16 Didacticiels 5 Mettez la grille en place sur la plage Equipement, comme illustré. 6 Dans la barre d'outils standard, cliquez sur le bouton Importer une image. 7 Dans la boîte de dialogue Importer une image : 4 Dans la boîte de dialogue Dupliquer : Sélectionnez Créer une grille. Choisissez une grille de 2 x 2. Sélectionnez un espacement horizontal et vertical de 10 pixels. Cliquez sur OK. Recherchez l'image que vous voulez importer et sélectionnez-la. Choisissez d'intégrer ou de lier l'image. Cliquez sur Ouvrir. 8 Faites glisser l'image dans le premier carré de la grille. 9 Répétez les étapes 6 à 8 pour placer les images à l'intérieur des autres cellules de la grille. Etape facultative : Pour créer un effet plus varié et moins monotone, vous pouvez détourer les images à l'intérieur des cellules de la grille. A cette fin, sélectionnez l'image, puis cliquez sur l'outil Recadrage. Faites glisser les nœuds pour détourer l'image.

17 Créer des sites Web personnels 17 Sans détourage Avec détourage 10 Dans la barre d'outils standard, cliquez sur l'outil Bloc de texte HTML et tracez un bloc de texte d'environ 135 pixels de large sur 35 pixels de haut, sur la page. 11 Sélectionnez l'objet texte, puis faites un clic droit et cliquez sur Copier. Faites un autre clic droit et cliquez sur Coller. Répétez l'opération de copier-coller pour créer cinq zones de texte identiques. 12 Mettez les objets approximativement en place les uns au-dessous des autres, puis tracez un cadre de sélection autour. 13 Sous l'onglet Alignement : Cliquez sur le bouton d'alignement Gauche. Cochez la case Espacé et saisissez une valeur de 10 pixels. Cliquez sur le bouton Intervalle vertical régulier. Vos zones de texte sont maintenant alignées et espacées précisément. 14 Mettez le groupe de zones de texte en place à droite de la grille d'images.

18 18 Didacticiels Nous utilisons les cadres de texte pour afficher le nom des différents équipements de photographie et les liens hypertexte des sites Web externes correspondants. 17 Dans la boîte de dialogue Liens hypertexte : Sélectionnez l'option Page Internet. Dans le champ Informations sur le lien hypertexte saisissez l'url (l'adresse du lien). 15 Cliquez à l'intérieur d'une zone de texte et saisissez une ligne de texte suivie de l'adresse d'un site Web. Utilisez la barre d'outils Texte et l'onglet Echantillons (ou Couleur) pour appliquer le style et le format. 16 Pour ajouter un lien, sélectionnez l'adresse Web, puis dans la boîte à outils, dans Lien hypertexte, cliquez sur Lien hypertexte. Dans la liste Fenêtre ou image cible, sélectionnez Nouvelle fenêtre. Cliquez sur OK. 18 Répétez les étapes 14 à 16 pour ajouter un texte et des liens hypertexte vers les autres zones de texte.

19 Créer des sites Web personnels Prévisualisez la page et testez les nouveaux liens hypertextes. Nous allons maintenant créer la page Contact. Nous y insérerons un formulaire simple basé Web permettant aux visiteurs du site d'envoyer des commentaires ou des questions au photographe. Créer un formulaire 1 Ouvrez la page Contact en double-cliquant sur l'onglet Site ou en le sélectionnant dans le Gestionnaire de pages. 2 Dans la barre d'objets Web, dans la palette Formulaires, cliquez sur le bouton Assistant de création de formulaire. 3 Dans la première boîte de dialogue de l'assistant de création de formulaire, cliquez sur Utiliser et adapter un formulaire standard, puis cliquez sur Suivant. 4 La boîte de dialogue suivante affiche la liste des mises en page prédéfinies. Cliquez sur un élément de la liste pour afficher un aperçu du formulaire sélectionné dans le volet Aperçu. Sélectionnez le formulaire Commentaires 2 et cliquez sur Suivant.

20 20 Didacticiels La boîte de dialogue suivante permet de personnaliser la mise en page. Vous pouvez modifier, ajouter, supprimer des commandes. 5 Le formulaire par défaut répond à nos besoins, cliquez sur Suivant. 6 Sous l'onglet Action de la boîte de dialogue Propriétés de formulaire : Sélectionnez Une adresse e- mail. Nommez le formulaire. Saisissez l'adresse à laquelle les données du formulaire du visiteur du site doivent être envoyées. Cliquez sur OK. 7 Pour insérer le formulaire à sa dimension par défaut, placez le pointeur à l'endroit où le formulaire doit figurer, puis cliquez. Les blocs de construction se combinent : textes, images et commandes de formulaire. Les commandes collectent les données du visiteur et elles peuvent être ajoutées, déplacées et modifiées de la même manière que les autres. Les champs de commandes comprennent les boutons, les textes, les cases, les boutons radio, les zones de liste etc. Un formulaire est généralement composé d'une combinaison de ces champs. Les options du formulaire comprennent également un objet CAPTCHA. Il s'agit d'un contrôle antispam qui bloque les s provenant d'émetteurs non humains. Le visiteur doit entrer les lettres représentées dans le champ. Si sa saisie est correcte, il peut continuer. Pour plus d'informations, voir "Ajouter des formulaires" dans l'aide en ligne.

21 Créer des sites Web personnels 21 Nous allons maintenant ajuster certains des éléments du formulaire, c'est pourquoi vous allez peutêtre devoir faire un zoom avant. Nous voulons modifier les aspects suivants : Tout d'abord, nous ne sommes pas satisfaits de des boutons Réinitialiser et Envoyer. Ensuite, nous voulons aligner à droite les étiquettes du formulaire et les modifier pour qu'elles n'utilisent que des minuscules. WebPlus vous permet de déplacer et de modifier les commandes de formulaire comme des objets ordinaires. Voici comment procéder : Pour déplacer les boutons du formulaire Cliquez successivement sur chacun des boutons et mettez-les en place sous le champ Commentaires. Vous aurez besoin d'augmenter la taille du formulaire pour qu'il puisse contenir la nouvelle disposition des boutons. A cette fin, sélectionnez simplement le formulaire et faites glisser l'une de ses poignées. Sélectionnez les boutons et les champs de texte et, dans l'onglet Alignement, cliquez sur le bouton d'alignement Gauche. Pour aligner les étiquettes Sélectionnez-les toutes puis, sous l'onglet Alignement, cliquez sur le bouton d'alignement Droite.

22 22 Didacticiels Pour modifier et aligner à droite le texte des étiquettes Double-cliquez à l'intérieur d'un champ de texte et modifiez-le à la manière d'un cadre de texte WebPlus. Le cadre de texte étant sélectionné, dans la palette Texte, cliquez sur le bouton Aligner à droite. 8 Prévisualisez le formulaire. Lorsque des visiteurs consultent le site, ils peuvent saisir leurs informations directement dans les champs de texte fournis. Lorsqu'ils cliquent sur Envoyer, les informations sont transmises à l'adresse e- mail précisée lors de la création du formulaire. 9 Pour terminer la page Contact : Nous avons créé un titre (zone de texte artistique). Nous avons aussi ajouté une zone de texte HTML contenant une note rédigée par le photographe. Le gros du travail est terminé! Les pages restantes Accueil, A propos, et Liens peuvent être élaborées à l'aide des techniques que nous avons déjà présentées. Pour plus d'infos sur les divers types de zones de texte disponibles dans WebPlus et sur leur mode d'emploi, voir l'aide en ligne ou le didacticiel "Démarrage : Utiliser du texte".

23 Créer des sites Web personnels 23 Pour conclure ce projet, nous allons résumer les procédures utilisées. Si vous avez besoin de vous rafraîchir la mémoire, n'hésitez pas à revenir aux instructions pas à pas fournies dans cet exercice. La page Accueil Sur Accueil, nous voulons attirer l'attention sur la "photo de la semaine". Nous utilisons l'outil pour placer l'image. Nous utilisons une zone HTML pour afficher les informations relatives à l'image. La page A propos Dans la page A propos, un grand cadre de texte HTML contient un message du photographe. La page Liens Notre page Liens contient une série de cadres de texte HTML affichant des liens hypertextes vers d'autres sites relatifs à la photographie.

24 24 Didacticiels C'est fini! Vous êtes parvenu à la fin de cet exercice. Vous conviendrez certainement avec nous que la tâche n'était pas si difficile. Nous espérons que vous avez pris plaisir à créer ce site Web simple mais efficace et que vous êtes prêt à créer votre propre site de toutes pièces. Si vous voulez développer davantage votre site en ajoutant des objets dynamiques, tels que des compteurs de visites, des blogs, des messageries instantanées, passez au didacticiel "Créer des sites Web personnels : Ajouter du contenu dynamique à votre site".