Créer un site Web avec l'éditeur Wix

Transcription

1 Cours INF-5065 Intégration d'un champ de la micro-informatique Créer un site Web avec l'éditeur Wix Cours réalisé par Patrice Tourangeau Enseignant en informatique Centre d'éducation des adultes Antoine-Brossard

2 Table des matières 1. Planifier votre site Web Définir les objectifs du site Parcourir le Web Créer un site Internet avec Wix Créer un site Web à partir d'un modèle Créer un compte avec Wix Choisir un modèle Éditer un modèle Rester à l'intérieur des bordures du site Modifier les dimensions du site Changer l'arrière-plan d'un modèle La gestion des pages du site Le rôle de la page maître ou «master page» Le rôle des pages ou «main pages» Naviguer entre les pages Le panneau de propriétés des pages Ajouter une transition aux pages Ajouter une composante au site Éditer une composante Changer le menu du modèle Changer les titres et paragraphes d'un modèle Remplacer les images d'un modèle Modifier ou ajouter une zone Ajouter des liens Apporter la touche finale Prévisualiser, enregistrer et publier votre site Enregistrer votre site Modifier son nom d'utilisateur Publier votre site Description du premier travail de production comptant pour 25% de la note finale Faire un site web à partir d un modèle vierge Éditer un site vierge Description du deuxième travail de production comptant pour 25% de la note finale Description du troisième travail de production comptant pour 50% de la note finale La postproduction Rétroaction Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

3 1. Planifier votre site Web Avant de commencer à créer un site Internet, il faut définir les raisons pour lesquelles on désire construire ce site. Ceci semble évident, mais bon nombre de personnes ne font pas cet exercice et commencent à construire un site pour ensuite réaliser qu elles ont perdu bien du temps. C est un peu comme si un écrivain tentait d écrire un roman sans avoir défini les balises de l intrigue. C est tout simplement impensable! La tentation est grande de débuter un travail de création qui semble palpitant, mais combien frustrant lorsqu'on réalise qu'il faut presque tout recommencer, faute d'avoir fait un plan détaillé. 1.1 Définir les objectifs du site Que désirez-vous atteindre en faisant ce site? Ce pourrait être d attirer un nombre important de visiteurs qui découvriront vos produits ou services, ou encore de vendre différents produits ou de faire connaître vos talents artistiques. Il y a mille et une raisons pour faire un site Internet. Il suffit de bien déterminer vos objectifs avant de débuter la réalisation du site et le travail de création sera ainsi beaucoup plus facile. 1.2 Parcourir le Web Une fois que vous avez défini clairement les buts que vous désirez atteindre, il est fortement recommandé de parcourir l'internet et d'observer ce que d autres compagnies ou individus ayant des objectifs similaires aux vôtres ont réalisé comme site Internet. Il n y a rien de mieux pour stimuler votre intellect et vous donner de bonnes idées que de voir ce qui existe déjà sur le Web. Lorsque vous faites ces recherches, assurez-vous de noter et d imprimer tout ce que vous trouvez intéressant et que vous aimeriez retrouver sur votre propre site. Observez bien aussi la structure des pages des sites qui vous intéressent. Une fois ces recherches terminées, vous devez schématiser votre site, c est-àdire créer le plan de votre site. Vous pouvez le faire à l ordinateur ou à l aide d un papier et d un crayon. Lorsque vous avez écrit votre structure ou fait votre schéma, présentez-le à quelqu un et expliquez-lui la structure de votre site. Il faut faire valider votre structure par des pairs ou des gens qui travaillent dans le même domaine pour vous assurer de ne rien oublier. Bien entendu, des compagnies de design Web et de marketing sont spécialisées dans ce domaine et vous aideront à structurer votre site. Si vous n avez pas d argent à investir, utilisez vos contacts qui se feront un plaisir de vous donner leurs commentaires. Cette étape est cruciale. Si vous ne la faites pas, vous Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

4 vous attirez de grands ennuis. Vous allez perdre votre temps et vous devrez sûrement recommencer votre site ou une bonne partie du site. Voici un exemple d un schéma d un site Web fait sur papier. Ce schéma est fort simple et il pourrait inclure plus d informations. Ce schéma indique que le site aura une page d accueil et un groupe de quatre pages nommées Info, Collection, Boutique et Contact. Ces pages seront le groupe de pages principales du site et un menu apparaîtra sur la page d accueil avec le nom de ces quatre pages. Sur le schéma, on voit le bref contenu de ces quatre pages. Ce schéma est le strict minimum à faire. Je vous suggère d'être plus détaillé dans le contenu de vos pages pour ne rien oublier. Plus bas sur le schéma, on remarque que la page Collection contiendra un groupe de quatre sous-pages. Ainsi, ce site contiendra un total de neuf pages. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

5 Voici un aperçu de ce à quoi pourrait ressembler ce site Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

6 2. Créer un site Internet avec Wix Maintenant que vous comprenez l importance de bien planifier un site Internet, lançons-nous dans le vif du sujet. Comment fait-on pour créer un site Internet avec Wix? Il y a deux façons de s y prendre. 1) On peut télécharger et modifier un modèle de site Web déjà créé par des programmeurs de Wix. 2) On crée un site à partir d un modèle vierge. 2.1 Créer un site Web à partir d'un modèle Un modèle est un site Web créé par des programmeurs. Vous pouvez utiliser cette structure et la modifier à votre guise. Les liens entre les pages du site sont déjà faits et vous pouvez naviguer dans le site à l aide d un menu présent sur la page maître. Le contenu du site est complètement modifiable et c est à l utilisateur de modifier le contenu des images et des paragraphes. On peut ajouter une multitude d éléments au site pour le personnaliser. Il y a un très grand nombre de modèles gratuits sur Wix. Lorsqu on a très peu de temps pour faire un site Internet et qu on désire un produit qui paraît bien, les modèles de Wix sont tout désignés. Par contre, si vous voulez créer un site Web à long terme pour vous ou votre entreprise, il est préférable de créer un site à partir d un modèle vierge. Dans ce cours, vous apprendrez à faire un site Web à partir d'un modèle et d'un modèle vierge. 2.2 Créer un compte avec Wix Modifier des modèles est un excellent moyen de commencer à faire connaissance avec cet éditeur web. Avant de pouvoir utiliser cet éditeur, il faut créer un compte avec Wix. Pour ce faire, rendez-vous sur et cliquez sur Connexion/Inscription situé en haut à droite de la page d'accueil. Ensuite, cliquez sur créer un nouveau compte et suivez les étapes. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

7 2.3 Choisir un modèle Il est très simple d'accéder aux modèles de sites Web déjà créés dans Wix. Voici les étapes à suivre. Pour choisir un modèle 1. Connectez-vous à votre compte d utilisateur Wix. 2. En haut à gauche du menu principal, cliquez sur Créer. 3. Du côté gauche de la page Créer, cliquez sur Modèles Flash, choisissez une catégorie de modèles et visualisez les modèles de cette catégorie. 4. Lorsque vous avez trouvé un modèle qui vous plaît, cliquez sur Modifier pour que le modèle s'ouvre dans l'éditeur Wix. 2.Cliquez sur Créer. 3. Cliquez sur modèles Flash et choisissez une catégorie de modèles 4. Cliquez sur Modifier pour transformer un modèle avec l éditeur Wix. Si vous utilisez Internet Explorer 7 ou 8, vous n aurez pas le choix entre les modèles Flash ou HTML 5. Les sites Wix en HTML 5 sont disponibles uniquement avec Internet Explorer 9, Google Chrome, Firefox et Opera. Pour obtenir des détails sur le nouveau code HTML 5, visitez le site Web suivant : Ce lien URL a été placé sur ce cours Moodle. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

8 Vous pouvez choisir de Voir un modèle ou de le modifier. Le bouton Voir permet d'ouvrir le modèle en mode visualisation pour l'explorer davantage. Le bouton Modifier ouvre le modèle dans l'éditeur Wix qui vous permet d y apporter des changements, d y ajouter du contenu ou d en supprimer certaines composantes. 2.4 Modifier un modèle Une fois que vous avez choisi un modèle et qu il est ouvert dans l'éditeur Wix, vous pouvez commencer à le transformer et à y ajouter votre propre contenu. Vous pouvez supprimer, éditer ou ajouter tout le contenu que vous souhaitez. Le modèle n est qu'un point de départ; vous pouvez manipuler son contenu comme vous le souhaitez. Lorsque vous ouvrez un modèle dans l éditeur Wix, on vous propose d utiliser par défaut l éditeur Wixexpress Beta. Cet éditeur permet de changer rapidement le contenu existant d un modèle. Par contre, il ne permet pas d ajouter facilement de nouvelles composantes et de les éditer à votre guise. Ainsi, il est préférable de fermer cet éditeur express et d activer l éditeur principal de Wix en cliquant sur le bouton Allez à Editor situé en bas à gauche. Lorsque vous sélectionnez un modèle pour le modifier, il arrive parfois que Wix l ouvre directement dans l éditeur principal. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

9 Cliquez ici pour quitter l éditeur Wixexpress et aller à l éditeur principal qui est plus complet. Exercice Choisissez un modèle Wix et cliquez sur Modifier pour ouvrir ce modèle dans l'éditeur Wix. Cliquez sur Allez à Éditor tel qu illustré ci-haut pour activer l'éditeur Wix avec toutes ses fonctions. Vous pouvez vous amuser à découvrir les éléments des quatre catégories de la barre d'ajout située à gauche dans l'éditeur. Explorez aussi les commandes de la barre de menu situées en haut de l'éditeur. Vous pouvez ajouter les éléments de votre choix au site. Cet exercice a pour but de vous familiariser avec l'environnement de l'éditeur. Laissez ce modèle ouvert à l'écran, car vous en aurez besoin lors du prochain exercice. 2.5 Rester à l'intérieur des bordures du site La bordure blanche ou noire qui entoure le site indique les limites de ce dernier. Il est important de garder le contenu à l'intérieur de cette bordure. Tout contenu se trouvant à l'extérieur de cette bordure ne sera pas visible dans le mode Aperçu ou lorsque ce site modifié sera publié sur le Web. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

10 Voici le contour du site qui est représenté ici en noir 2.6 Modifier les dimensions du site Si les dimensions du site sont trop petites ou trop grandes, vous pouvez les changer et/ou modifier la façon avec laquelle les utilisateurs visualisent le site dans leur navigateur. Pour ce faire, il faut changer les paramètres du site. Cliquez sur Paramètres dans la barre de menu située en haut de l éditeur et ensuite sur l'onglet Aspect. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

11 Cette fenêtre s'ouvre à l'écran Un peu de théorie La grande majorité des ordinateurs ont maintenant un affichage minimum de 1024 pixels de largeur par 768 pixels de hauteur. C est la raison pour laquelle la plupart des modèles Wix ont 1000 pixels de largeur par environ 700 pixels de hauteur. Même si les utilisateurs de votre site peuvent avoir un écran avec des paramètres d'affichage plus élevés, du type 1280 pixels par 960 pixels, il faut respecter l'affichage le plus commun qui est encore 1024 pixels par 768 pixels. Ainsi, la majorité des Terriens qui iront sur votre site pourront facilement voir son contenu. Déterminer les dimensions de votre site n est pas compliqué, tout dépend du type de site que vous voulez faire. Si vous voulez faire un site qui s affichera sur une seule page, il faut que la hauteur du site soit de moins de 768 pixels pour que votre site s affiche bien sur les écrans de la majorité des utilisateurs Web. Si vous voulez faire un site qui contient beaucoup d'informations et qui nécessite une barre de défilement à la droite du navigateur, la hauteur du site doit tenir compte du contenu que vous voulez mettre. Ce sera alors à vous de Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

12 juger. Par exemple, pour un site qui s affiche en longueur sur un navigateur Web, vous pourriez déterminer les paramètres suivants : 1000 pixels de largeur par 1700 pixels de hauteur. Dans la partie inférieure de cette fenêtre, il est possible de modifier le Mode de visualisation du site pour permettre à tout type d écran de bien voir votre site. Il faut alors choisir l option Ajustement optimal ou Ajustement à la largeur. Par contre, ces options peuvent modifier l apparence de votre site sur certains moniteurs. Il est donc recommandé de laisser le mode de visualisation à Taille réelle. Exercice Modifiez les dimensions du modèle que vous avez ouvert dans l'éditeur. Une fois ces changements faits, remarquez l impact de ces modifications sur les balises du contour du site. Changez les dimensions plusieurs fois et constatez les changements sur l'apparence du site. Remettez ensuite les dimensions originales du modèle qui sont habituellement de 1000 pixels de largeur par 700 à 800 pixels de hauteur. 2.7 Changer l'arrière-plan d'un modèle Il est possible de changer l'arrière-plan du site, l'arrière-plan de la page maître et l'arrière-plan des pages du site. Mais qu est-ce qu un arrière-plan? L arrière-plan est la couleur, le dégradé ou l image qui constitue la trame de fond du site, de la page maître et des pages. Cette couleur ou cette image sera donc très visible sur votre site. L arrière-plan du site ou du navigateur est la couleur qui est située à l extérieur des dimensions de la page maître du site. Cette couleur entoure le site à l extérieur de ses limites. On ne le remarque pas vraiment, mais il y a toujours une couleur à l extérieur des balises de tous les sites Internet. Exercice Allez sur chacun des sites Web suivants et décrivez la couleur d'arrière-plan du site. La couleur d'arrière-plan du site est la couleur, le dégradé ou l'image qui se situe à l'extérieur du contour de la page maître du site Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

13 C'est maintenant à votre tour de changer la couleur de l'arrière-plan du site du modèle que vous avez ouvert dans l'éditeur. Suivez les étapes ci-dessous pour y arriver. Pour changer l'arrière-plan de votre site 1. Cliquez sur Arrière-plan situé sur la barre d'ajout de l'éditeur et cliquez sur Site. 2. Dans la palette de remplissage, sélectionnez une nouvelle couleur. Cliquez sur OK, puis encore sur OK. N.B. Avec Wix, il n est pas possible de mettre une image dans l arrière-plan du site. Par contre, il est possible de le faire dans l arrière-plan de la page maître ou dans l arrière-plan des pages. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

14 Pour changer l'arrière-plan de votre page maître 1. Cliquez sur Arrière-plan situé sur la barre d'ajout et cliquez sur Page Maître. 2. Parmi les Galeries d'arrière-plan, regardez les différentes catégories d'arrière-plans disponibles. 3. Sélectionnez un arrière-plan. Il y a une multitude d arrière-plans de page maître disponibles. Il est important de garder la couleur d arrière-plan de votre site assez sobre pour ne pas que les utilisateurs se sentent agressés lorsqu'ils visualiseront votre site. Pour changer l'arrière-plan des pages 1. Sélectionnez une page. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

15 2. Depuis le panneau des propriétés en bas à droite, cliquez sur Thème. 3. Dans la fenêtre Thème, cliquez sur un revêtement de page. 4. Ensuite, cliquez sur Couleur qui se trouve sous l'onglet Thème et sélectionnez la couleur, le gradient (effet de dégradé) ou l'image à mettre à l arrière-plan de vos pages. Veuillez noter que cet arrière-plan sera visible sur toutes vos pages. Astuce: Si vous connaissez le n HTML de votre couleur, vous pouvez le taper directement dans la boîte prévue à cet effet. 2.8 La gestion des pages du site À droite dans l'éditeur, vous verrez le Gestionnaire de pages. Il y a deux sortes de pages sur votre site : la page maître et les pages. La page maître est symbolisée par deux rectangles blancs entourés d une couleur bleu pâle (voir image plus bas). Les pages sont représentées par un rectangle blanc. Sur le site lui-même, les pages se nomment «Main pages». Dans le gestionnaire de pages, la page maître est souvent appelée «Master page» Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

16 La page maître du site Les pages du site Le Gestionnaire de pages indexe et organise toutes les pages sur la page maître. Pour ouvrir une de ces pages afin de la visualiser dans l'éditeur, cliquez tout simplement sur le nom de cette page à partir du Gestionnaire de pages à droite. 2.9 Le rôle de la page maître ou «master page» La page maître diffère des autres pages du site. La page maître est la trame de fond de votre site. C est la partie du site qui est constamment visible par les utilisateurs, peu importe l endroit où ils se trouvent sur votre site. Sur cette page dite «maître», vous disposerez à l'endroit qui vous convient les pages du site. La page maître contient tous les éléments du site. Elle contient les pages du site, mais aussi les composantes fixes du site. C est donc sur la page maître que l'on retrouve le menu principal de navigation du site. Ce menu est souvent situé en haut de la page maître ou sur le côté gauche. C est sur la page maître que l'on place le logo du site, qu on écrit le titre du site et qu on inclut des boutons de navigation vers Facebook ou Twitter. Ainsi, tout ce qui est statique et qu on veut retrouver sur toutes les pages du site doit se trouver sur la page maître. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

17 Arrière-plan du site en gris foncé Page maître avec arrièreplan gris pâle Titre et menu principal sur la page maître Les pages du site ou «main pages» se trouvent par-dessus la page maître. Page maître Icônes sur la page maître 2.10 Le rôle des pages ou «main pages» Les pages du site dans Wix se nomment Main pages ou Groupe de pages. Les pages contiennent tout le contenu du site. Les pages se superposent une par-dessus l autre sur la page maître. On peut naviguer d une page à l autre à l aide du menu principal qu il faut ajouter sur la page maître. Sur les pages, il est possible d'ajouter une multitude de composantes : images, icônes, zones, paragraphes, titres, galerie d images, documents Word, Excel, etc. Les pages constituent le cœur du site Web. C est là où on emmagasine tout le contenu du site. Lorsqu'on utilise un modèle de site Web déjà conçu dans Wix, toutes les pages sont déjà créées et un menu permet de naviguer d une page à l autre Naviguer entre les pages Dans le modèle Wix qui se trouve devant vous, vous pouvez vous déplacer d'une page à l'autre à l'aide du Gestionnaire de Pages. De plus, vous pouvez naviguer entre les pages à l'aide des flèches qui se trouvent en haut de votre Groupe de pages ou «Main pages». Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

18 On peut changer de page en cliquant sur ces petites flèches. Permet d'ajouter une page au site On peut accéder à une page en cliquant sur celle-ci dans le gestionnaire de pages. Exercice à sauvegarder Dans l éditeur, ouvrez le même modèle que vous avez ouvert plus tôt. Cliquez sur les différentes pages du site dans le gestionnaire de pages. Ensuite, cliquez sur les flèches situées en haut du Groupe de pages «Main pages». Ceci vous permet de naviguer entre les pages déjà créées du modèle. Vous allez maintenant ajouter une page à ce modèle en cliquant sur le bouton Ajouter une page située en haut du gestionnaire de page. Lorsque vous ajoutez une page, une fenêtre s'ouvre et vous propose différents types de mises en page déjà créés par Wix. Choisissez une mise en page. Cette nouvelle page s'affichera à la suite de la dernière page du site. Maintenant, vous allez supprimer cette nouvelle page. Pour ce faire, allez dans le gestionnaire de pages et cliquez sur la petite flèche située à la droite de la nouvelle page que vous venez d'ajouter. Sélectionnez Supprimer et la page se supprimera. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

19 Cliquez sur cette petite flèche et un menu déroulant s'affiche. Cliquez ensuite sur Supprimer pour supprimer une page. Maintenant, ajoutez à nouveau une autre page. Cette fois-ci, vous devez ajouter une page vide. La page vide se trouve à la toute fin de la fenêtre de mises en page. Sélectionnez la mise en page Vide C'est la fin de cet exercice. Gardez cette page vide vierge, car vous allez y ajouter des composantes lors d un autre exercice. Vous allez devoir enregistrer cet exercice sous peu. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

20 2.12 Le panneau de propriétés des pages Lorsque vous sélectionnez une des pages de votre modèle, un panneau de propriétés apparaît en bas à droite dans l'éditeur. Ce panneau permet de modifier les paramètres du groupe de pages sélectionné. Voici les propriétés des groupes de pages Ajouter une page permet d'ajouter une page. Ajouter un menu permet d'ajouter un menu pour faciliter la navigation entre les pages. Thème donne un revêtement aux pages. Couleur après avoir choisi un revêtement (thème), cette nouvelle propriété apparaît. Elle permet de choisir la couleur d'arrière-plan de toutes les pages. Transitions permet de déterminer l effet de transition lorsqu'on navigue d'une page à l'autre. Paramètres permet de faire défiler les pages automatiquement et de régler le temps d'affichage de chaque page. Cette propriété n est pas souvent utilisée. Animations permet d'ajouter des animations aux pages Ajouter une transition aux pages Une transition est un code Web qui donne un effet dynamique aux pages lorsqu'on navigue d'une page à l'autre à l aide du menu principal du site. Dans le modèle que vous avez ouvert, il y a probablement une transition déjà choisie par les programmeurs de Wix. Il est conseillé d'appliquer une transition aux pages, car celle-ci ajoute un aspect dynamique et intéressant à la navigation du site. Pour la changer ou en ajouter une, vous devez sélectionner un groupe de pages en cliquant sur la première page dans le gestionnaire de page. Ensuite, vous sélectionnez la propriété Transition et Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

21 vous choisissez le type de transition que vous désirez. Pour visualiser l'impact de cette transition sur vos pages, cliquez sur Aperçu dans la barre de menu. Si vous n'êtes pas satisfait de cette transition, recommencez l'opération jusqu'à ce que vous soyez content du résultat. Page 34 Exercice à sauvegarder Toujours avec le même modèle, sélectionnez la première page dans le gestionnaire de pages. Changez la transition entre les pages de votre modèle. Ensuite, cliquez sur Aperçu pour visualiser le site. Naviguez sur le site pour observer l'effet de cette transition lorsqu'on clique sur le menu. Recommencez l exercice jusqu à ce que vous trouviez une transition que vous aimez. Vous êtes dorénavant capable d'appliquer une transition entre les pages d'un site. Important: Il faut maintenant sauvegarder votre modèle pour conserver votre travail. Rendez-vous à la page 34 de ce cours pour connaître la procédure d'enregistrement avec Wix. Lorsque vous sauvegarderez le site, donnez-lui le nom suivant: exercicemodele 2.14 Ajouter une composante au site L ajout d images, de paragraphes, de vidéos ou de musique au site est certes ce qui vous intéresse le plus. Cette section vous expliquera comment vous y prendre pour ajouter plusieurs types de composantes à votre site. Commençons par quelques définitions importantes. Tout ce qu'on peut ajouter à une page dans Wix se nomme une composante. Une image, une galerie d images, un «widget», une vidéo, un clipart sont des exemples de composantes. Sur le côté gauche de l'éditeur se trouve la barre d'ajout. Vous pouvez vous servir de la barre d'ajout pour ajouter différentes composantes à votre site. Chaque catégorie dans la barre d'ajout s'ouvre vers la droite pour afficher un menu des composantes disponibles. Certaines composantes contiennent un sous-menu qui s'ouvre en-dessous et affiche les différents styles disponibles pour cette composante. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

22 Revoyons cette terminologie de plus près La barre de menu Les 4 catégories de la barre d'ajout Les composantes de la catégorie Ajouter Les 5 styles disponibles de la composante Clipart Pour ajouter une composante au site: 1. Sur la barre d'ajout, cliquez sur Ajouter puis positionnez votre curseur sur une composante. 2. Si la composante contient des styles, ils apparaîtront sous celle-ci. Cliquez sur le style qui vous convient. 3. Une fenêtre apparaîtra pour vous permettre de sélectionner l'élément que vous désirez. Ce nouvel élément apparaîtra sur votre site. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

23 Par exemple, voici la fenêtre qui s'ouvre lorsqu'on sélectionne la composante Clipart et le style Forme. C'est maintenant à vous de jouer! Exercice à sauvegarder Explorez la catégorie Ajouter de la barre d'ajout en ajoutant 5 composantes de cliquez sur le mot Enregistrer dans la barre de menu. Vos composantes seront ainsi sauvegarder sur votre modèle Éditer une composante Lorsque vous ajoutez une composante ou cliquez sur une composante se trouvant déjà sur le modèle, vous pouvez l éditer, c est-à-dire la personnaliser. Par exemple, il est possible de changer la taille, de faire une rotation ou de positionner à l endroit désiré sur le site une composante que l'on sélectionne à l aide de la souris. Cliquez sur une composante active automatiquement le panneau des propriétés de cette composante et l'affiche en bas à droite de l'écran. Chaque composante que vous sélectionnez dispose d'une liste différente de propriétés. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

24 Exercice Éditez une composante de votre choix à l'aide de son panneau de propriétés. Pour y arriver, vous devez sélectionner une composante dans votre modèle, par exemple une image, et choisir une propriété de cette image dans le panneau de propriétés qui apparaîtra en bas à droite de l éditeur. Pour vous aider dans cet exercice, voici une procédure à suivre. Pour éditer une composante à l'aide de son panneau de propriétés 1. Sélectionnez la composante. 2. Depuis le panneau des propriétés qui s'ouvre en bas à droite de l'éditeur, cliquez sur une propriété. 3. Dans l'onglet qui s'ouvre, réglez les paramètres de cette propriété. 1. Sélectionnez la composante à éditer. Ici, c est une image clipart. 3. En cliquant sur la propriété Effets, des options d effets s affichent et vous devez en choisir une. 2. Le panneau de propriétés Clipart apparaît. 4. Cliquez OK (s'il y a lieu) ou sur le X pour appliquer les paramètres à la composante. Exercice à sauvegarder Sélectionnez une image du modèle. Changez la taille et faites une rotation à cette image. Pour vous aider, voici la procédure à suivre. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

25 Pour changer la taille d'une composante 1. Sélectionnez la composante. 2. Cliquez et tenez enfoncée la touche de la souris sur un carré de changement de taille et déplacez-le. 3. Faites de même avec les autres carrés si nécessaire. La taille de votre composante se transformera. Pour faire pivoter une composante 1. Sélectionnez la composante. 2. À l aide de la souris, cliquez et tenez enfoncée la flèche de rotation et déplacez-la à votre guise. La composante fera une rotation. Pour changer le positionnement d'une composante 1. Sélectionnez la composante. 2. Dans la barre de menu, cliquez sur Arranger. 3. Sélectionnez une des 5 options à partir du haut du menu. Une fois l option choisie, cette dernière affectera la composante. Sauvegarder maintenant votre site Web. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

26 2.16 Changer le menu du modèle Vous pouvez facilement modifier les titres du menu principal de votre modèle pour qu'ils correspondent aux changements que vous aimeriez y apporter. Pour ce faire, vous devez simplement renommer les pages dans le gestionnaire de pages. En effet, lorsqu on crée un menu, l éditeur utilise automatiquement le nom des pages pour créer les titres du menu principal. Pour changer les titres du menu (première méthode): 1. Sélectionnez une page dans le gestionnaire de pages. 2. Cliquez sur la petite flèche à droite du nom de la page. 3. Cliquez sur Renommer. 4. Dans le rectangle, tapez le nouveau nom de la page. 5. Cliquez sur le bouton Retour ou «Enter» du clavier. Les titres du menu se mettront à jour pour correspondre aux pages que vous avez renommées. Il existe une autre méthode pour changer le nom des titres du menu principal. Pour changer les titres du menu (deuxième méthode): 1. Cliquez sur le menu de votre site 2. Cliquez sur Gérer dans le panneau de propriétés Menu situé en bas à droite de l éditeur. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

27 3. Dans la fenêtre Modifier les boutons qui apparaît, vous pouvez renommez les titres du menu. Exercice à sauvegarder Si ce n'est pas déjà fait, ouvrez le site du modèle Wix que vous avez déjà sauvegardé sous le nom: exercicemodele. C est maintenant à vous de changer le nom de tous les titres du menu de votre modèle. Utilisez la méthode de votre choix. Enregistrez ces changements lorsqu'ils sont faits Changer les titres et paragraphes d'un modèle Vous pouvez facilement éditer ou supprimer tout le texte dans un modèle. Les deux procéduriers ci-dessous vous fourniront toutes les informations nécessaires pour supprimer ou éditer le texte d un site. Éditer le texte d un titre ou d un paragraphe Vous pouvez facilement éditer les titres et paragraphes d un site. Pour éditer le texte d'un modèle 1. Double-cliquez sur le titre ou le paragraphe pour éditer le texte qu il contient. Le texte sera en surbrillance. 2. Appuyez sur la touche du clavier supprimez (Suppr) et tapez votre propre texte. C est aussi simple que cela. Pratiquez-vous maintenant à changer le texte de certains paragraphes et titres de votre modèle. Supprimer le texte d'un modèle Si vous souhaitez carrément supprimer un titre ou un paragraphe entier, vous pouvez tout simplement supprimer toute la boîte de texte. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

28 Pour supprimer un titre ou un paragraphe 1. Sélectionnez le titre ou le paragraphe à supprimer en cliquant une fois sur la boîte de texte avec la souris. 2. Tapez la touche Supprimer (Suppr) sur votre clavier. 3. La boîte de texte disparaîtra Remplacer les images d'un modèle Vous pouvez facilement éditer toutes les images fournies avec le modèle. Quelques-unes des images du modèle sont des images individuelles et d'autres font partie d'une galerie d'images. Suivez les étapes ci-dessous pour apprendre comment remplacer les images dans les deux cas. Pour remplacer une image individuelle 1. Sélectionnez l'image avec votre souris. 2. Dans le panneau des propriétés en bas à droite, cliquez sur Remplacer. 3. Dans la fenêtre Images, sélectionnez une nouvelle image ou téléchargez votre propre image depuis votre ordinateur. 4. Cliquez sur l'image choisie et elle remplacera l'image du modèle. Pour changer les images dans une galerie d'images 1. Sélectionnez la galerie d images de votre modèle. 2. Dans le panneau de propriétés en bas à droite, cliquez sur Gérer. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

29 3. Dans la fenêtre Gérer les photos, cliquez sur Supprimer tout. 4. Dans la boîte de confirmation qui apparaîtra, cliquez sur Oui. 5. Dans la même fenêtre, cliquez sur Ajout de photo. 6. Dans la fenêtre Images, sélectionnez les images ou téléchargez vos propres images depuis votre ordinateur. 7. Cliquez sur les images pour les ajouter à la galerie 8. Lorsque vous avez sélectionné toutes les images, cliquez sur OK dans la fenêtre Gérer les photos. Ces nouvelles images remplaceront les images de la galerie originale Modifier ou ajouter une zone Les zones sont des espaces éditables que l on peut ajouter sur la page maître ou sur une page du site. Les zones ont été conçues pour délimiter des sections sur la page maître ou dans les pages. Lorsqu on crée une zone, on peut y insérer des composantes qui resteront constamment à l intérieur de cette zone. On peut ensuite déplacer cette zone et toutes les composantes insérées se déplaceront avec celle-ci, comme si la zone et les composantes ne faisaient qu un. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

30 C est la raison pour laquelle on dit des zones qu elles sont magnétiques, car tout ce qu on y ajoute s'adapte aux paramètres d'affichage de la zone. Les bandes ou les bannières que l on retrouve en haut ou en bas sur un site Web sont souvent des zones dans lesquelles on a ajouté des images, un titre, une couleur d arrière-plan et parfois le menu du site. Voici un site Web avec des zones Dans ce site, les deux bandes noires sont des zones. Dans la section du haut du site, une zone simple de couleur noire a été insérée. Ensuite, on a ajouté deux cliparts (les deux triangles), un titre et 3 icônes en haut à droite. Au bas du site, on retrouve une autre zone simple de couleur noire dans laquelle on a inséré le menu principal du site. Avec l éditeur Wix, on place souvent le menu principal du site dans une zone, puisqu il est ainsi possible de choisir la couleur d arrière-plan de la zone et de l éditer à notre goût. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

31 Question : Selon vous, est-ce que ces deux zones se trouvent sur la page maître ou sur les pages du site? Justifiez votre réponse. Question : À première vue, combien de pages ce site contient-il? Justifiez votre réponse. Exercice à sauvegarder Ajoutez trois zones de votre choix au site que vous avez déjà enregistré sous le nom: exercicemodele. Dans ces zones, placez-y des images, un clipart, un titre ou un paragraphe. Voyez ce qu il arrive lorsque vous déplacez la zone. C est magique n est-ce pas! Enregistrer votre travail lorsqu'il est terminé Pour créer une zone 1. Sur la barre d'ajout, cliquez sur Ajouter 2. Cliquez sur la composante Partie de page 3. Sélectionnez le style Zone 4. Dans la fenêtre Zone, choisissez le type de zone que vous voulez insérer. 5. Positionnez cette zone au bon endroit sur votre site. 6. Modifiez la couleur de la zone en appuyant sur Couleur dans le panneau de propriétés Zone situé en bas à droite. 7. Ajoutez les composantes que vous voulez dans la zone. Vous verrez que les composantes s adaptent à la zone et se magnétisent Ajouter des liens La magie d'un site Internet tient beaucoup aux liens qu'il est possible de créer entre ses pages. Le menu principal du site en est un bon exemple. Il permet de naviguer d'une page à l'autre avec aisance. Il est possible d'ajouter Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

32 plusieurs autres types de liens au site à partir de ses composantes. Voyons cela de plus près. Il existe trois types de liens à ajouter aux composantes du site. 1) Un lien URL 2) Un lien de page 3) Un lien vers une adresse courriel Voyons chaque type de liens en détail. Un lien URL est un lien que l'on peut faire à partir d'une composante du site qui activera l'ouverture d'un autre site Internet. Pour créer ce lien, il faut sélectionner une composante, comme un titre, un icône ou une image et cliquer sur la propriété lien à partir du panneau de propriétés de la composante. 1. Sélectionnez une composante qui servira de lien. 3. Écrivez l'adresse URL du site à ouvrir. Ex: 2. Cliquez sur la propriété Lien Une fois ces trois étapes faites, il faut indiquer si on désire que la page Web s'ouvre dans une nouvelle fenêtre ou dans la même fenêtre que votre site. Il est suggéré d'ouvrir un site externe au vôtre dans une nouvelle fenêtre. De la sorte, l utilisateur comprend que ce lien l amène sur un autre site Internet. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

33 Lorsque vous voulez faire un lien entre une composante de votre site et une autre page du site, vous devez faire un lien de page. Quand vous faites ce type de lien, il faut sélectionner la page de destination du lien à partir de la fenêtre lien. Un lien vers une adresse courriel est un lien qui active une fenêtre de messagerie qui permet aux usagers de votre site de vous envoyer un courriel. Pour faire ce type de lien, il faut simplement indiquer l'adresse courriel de destination du message et l'éditeur s'occupera du reste. Exercice à sauvegarder Dans le même modèle, vous devez créer un lien de chaque type avec une composante de votre choix. Ainsi, une composante devra ouvrir un nouveau site Internet (lien URL). Une seconde composante devra créer un lien vers une autre page de votre site. Enfin, une troisième composante devra créer un lien vers une adresse courriel. Sauvegardez votre site Apporter la touche finale Avant de publier votre site sur le Web, il faut prendre le temps d apporter tous les changements nécessaires aux composantes du site telles que les images les paragraphes et les zones. À force d apporter des changements aux composantes, il arrive souvent que des éléments se déplacent. Pour vous aider à replacer certaines composantes avec précision, utilisez les quatre flèches qui se trouvent sur le clavier de votre ordinateur. Elles vous permettront de déplacer une composante un pixel à la fois. Ceci vous amènera à obtenir plus de précision dans le déplacement des composantes de votre site. Exercice Sélectionnez une composante et appuyez sur les quatre flèches de votre clavier. Voyez comme vous pouvez être précis dans vos déplacements! Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

34 3. Prévisualiser, enregistrer et publier votre site Maintenant que vous avez édité votre modèle et qu il est à votre goût, vous êtes prêt à le prévisualiser pour voir ce qu il aura l air lorsqu il sera en ligne. Pour prévisualiser votre site, vous n avez qu à cliquer sur Aperçu dans la barre de menu de l'éditeur. Pour revenir à l'éditeur, cliquez sur Retour situé en haut de l'écran en mode prévisualisation En prévisualisant votre site, vous allez remarquer plusieurs retouches à apporter à la mise en page. C est tout à fait normal et souhaitable. Apportez toutes les corrections nécessaires et cliquez sur aperçu. Répétez cette opération autant de fois qu il est nécessaire. Il faut parfois passer plusieurs heures avant d apporter toutes les corrections aux pages du site. Avec de la patience, votre site sera fort réussi. 3.1 Enregistrer votre site Vous devez sauvegarder votre site avant de le publier sur le Web. Pour enregistrer votre site, il suffit de cliquer sur le mot Enregistrer situé ne haut à droite sur la barre de menu. Par contre, avant de passer à cette étape, vous devez comprendre comment Wix fonctionne au niveau de l URL gratuit qu il vous accorde. Lorsque vous utilisez ces services gratuits, Wix vous donne une adresse URL de type: votrenomd'utilisateur.wix.com/lenomdusite La première partie correspond à votre nom d'utilisateur Wix. Wix a ajouté à ce nom.wix.com La deuxième partie correspond au nom que vous donnez à votre site lorsque vous l enregistrez. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

35 3.2 Modifier votre nom d'utilisateur Votre nom d'utilisateur Wix est important, car il fait partie de l'adresse URL de votre site. Pour le modifier, vous devez vous connecter à votre compte Wix. Cliquez sur Mon Compte du menu principal. Ensuite, cliquez sur Paramètres de Connexion. La fenêtre ci-bas s ouvre à l écran. Vous voyez votre nom d utilisateur. Vous pouvez le modifier ou le remplacer. Lorsque c est fait, cliquez sur Mettre à jour les Coordonnées Personnelles. Important : si vous changez votre nom d'utilisateur, il n est plus possible de revenir à votre ancien nom d'utilisateur. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

36 Pour sauvegarder votre site 1. Dans la barre de menu, cliquez sur Enregistrer. 2. Dans la fenêtre Enregistrer sous, tapez le nom de votre site. 3. Cliquez sur OK. Une fois votre site enregistré, il est possible de changer le nom de ce dernier en cliquant sur le menu Fichier et sur Enregistrer sous. 3.3 Publier votre site Votre site est maintenant enregistré sur un des nombreux serveurs de Wix. Cependant, il n est pas encore accessible sur le Web, car votre site n'est pas publié. Pour publier votre site: 1. Dans la barre de menu, cliquez sur Publier. 2. Dans la fenêtre Vous êtes sur le point de publier, cliquez sur Publier. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

37 3. Dans la fenêtre Félicitations, cliquez sur OK juste à droite de l'url de votre site. Votre site s ouvrira alors dans un navigateur et vous pourrez contempler votre premier site Web en ligne. Félicitations! Vous ne devez publier votre site qu'une seule fois. Pour publier les nouvelles mises à jour, il suffit de cliquer sur Enregistrer dans la barre de menu et votre site sera simultanément enregistré et republié sur le Web. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

38 4. Description du premier travail de production comptant pour 25 % de la note finale du cours Vous avez maintenant toutes les connaissances nécessaires pour faire le premier travail de production de ce cours. Cette tâche consiste à modifier un modèle de site déjà conçu. Vous devez télécharger ce modèle et apporter toutes les modifications demandées. Les changements à apporter sont décrits à la page suivante. Voici le modèle Wix à modifier: Voici le modèle avec tous les changements à apporter: Pour éditer ce modèle, vous devez accéder à Wix et cliquer sur Créer. Ensuite, cliquez sur les modèles Flash, sur la catégorie Affaires et cherchez le modèle nommé «Business world». 1. Cliquez sur Créer. 2. Cliquez sur modèles Flash 3. Cliquez sur la catégorie Affaires. 4. Cherchez le modèle «Business world» et cliquez sur Modifier. Lorsque l'éditeur Wix sera ouvert avec le modèle «Business world», vous pourrez faire les modifications décrites à la page suivante. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

39 Modifications à apporter au modèle «Business world» dans le cadre du premier travail de production du cours Vous devez modifier ce modèle pour qu il corresponde exactement au site suivant : Enregistrez ce site sous le nom : premiertravail Les dimensions de la page maître restent identiques. Les couleurs des différentes zones, de l arrière-plan du site et de la page maître restent inchangées. Les polices d écriture utilisées pour le site sont Impact et Arial. Vous devez apporter toutes les modifications qui ont été faites aux différents paragraphes du site. Toutes les photos doivent être changées pour les photos apparaissant sur le site modifié. Ces images se trouvent dans la Collection Wix sous la catégorie Affaires. La transition entre les pages du groupe de pages doit être identique. Indice : la transition choisie se trouve dans les transitions lentes. Toutes les zones blanches du site doivent avoir une opacité de 71 %. Sur la page Accueil, vous devez ajouter le même Effet au nom de la compagnie Experts Comptables. Je vous laisse le plaisir de le trouver. Les paramètres de cet effet n ont pas été modifiés. Vous devez ajouter un lien de page au titre L expérience peut tout changer situé en haut sur la page maître. Ce lien doit permettre d aller sur la page Témoignages. Vous devez ajouter deux icônes de type animé en bas à droite de la page maître. Une icône doit symboliser Facebook et une autre Twitter. Vous devez ajouter un lien de page à ces deux icônes vers la page Contact. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

40 La page Contact doit inclure une nouvelle zone avec un Widget Google Maps. Dans les paramètres de ce Widget, vous devez modifier l adresse. Dans la section Trouver l adresse, indiquez l adresse suivante : 4589 rue Ste-Catherine Ouest. Ensuite, vous devez ajouter un Marqueur sur la carte Google. Le texte du marqueur est : Notre bureau. Lorsque tous ces changements seront effectués, vous devez vous assurer que l alignement de votre site est correct, c est-àdire que les photos et les zones ne dépassent pas les dimensions de la page maître. Une fois votre site achevé, vous devez l enregistrer et le publier. Ensuite, envoyez le lien URL de votre site Web à votre enseignant par courriel. N oubliez pas d inscrire votre nom complet dans le courriel d envoi. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

41 5. Faire un site Web à partir d un modèle vierge On peut penser qu il est très difficile de créer un site à partir d'un modèle vierge. Détrompez-vous, car vous avez uniquement besoin d un peu d'imagination et de bien planifier votre site avant de le débuter. Pour ouvrir un modèle vierge dans l'éditeur : 1. Connectez-vous à wix.com. 2. Dans le menu du haut à gauche, cliquez sur Créer. 3. Sur le côté gauche de la page, cliquez sur Modèles Flash et sur la catégorie Modèles vierges. 2. Cliquez sur Créer. 3. Cliquez sur modèles Flash et sur Modèles vierges 4. Choisissez le type de structure de site vierge que vous désirez. 5. Pour faire les exercices de cette partie du cours, vous devez choisir le modèle qui se nomme «Start from scratch Flash» et cliquer sur Modifier. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

42 Choisissez ce modèle vierge Cliquez sur Modifier 5.1 Éditer un modèle vierge Cette partie du cours est très pratique et vous apprendrez par essais et erreurs. Les connaissances que vous avez acquises en modifiant des modèles avec l éditeur Wix vous seront fort utiles pour travailler avec un modèle de site vierge. Il est beaucoup plus gratifiant de construire un tel site Web puisque vous pourrez exprimer librement votre créativité et que vous serez l unique auteur du site. Exercices à sauvegarder Les étapes qui suivent ont pour but de vous montrer comment entamer la construction d un site Web à partir d un modèle vierge. Vous devez faire ce qui vous sera demandé à chaque étape. Ces étapes constituent une série d exercices que votre enseignant corrigera avant que vous puissiez faire le deuxième travail de production du cours. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

43 Première étape : ajouter des pages La première étape pour construire un site à partir d un modèle vierge est d ajouter des pages au site. Vous devez maintenant ajouter trois pages vides au site qui contient présentement une page. Renommez chacune des pages comme suit : Type de page Page Maître Page 1 Page 2 Page 3 Page 4 Nom à donner aux pages Mon site vierge Accueil Profil Musique Contact Deuxième étape : ajouter un menu sur la page maître La deuxième étape consiste à ajouter un menu pour naviguer entre vos pages. Pour ce faire, vous devez cliquer sur l icône Ajouter de la barre d ajout, puis sur la composante Navigation et sur le style Menu. La fenêtre Menu s ouvre à l écran et vous devez choisir un menu Horizontal de votre choix. Déplacez le menu en haut des pages qui sont délimitées par un rectangle bleu pâle. Le menu doit être sur la page maître pour fonctionner. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

44 Troisième étape : ajouter un arrière-plan au site, à la page maître et aux pages Cliquez sur l icône Arrière-Plan de la barre d ajout et sélectionnez un arrièreplan pour le site et un autre pour la page maître. Ensuite, vous devez ajouter un arrière-plan aux pages de votre site. Pour ce faire, vous devez sélectionner la première page de votre groupe de pages. Dans notre cas, il s agit de la page Accueil. Lorsque c est fait, vous devez choisir un thème dans le panneau de propriétés Groupe de pages situé en bas à droite. Choisissez le thème que vous voulez. Un des thèmes souvent utilisé pour les pages est le thème «Square». Ce thème marie la forme rectangulaire des pages. Avec à ce thème, il est facile d ajouter une couleur, un dégradé ou une image au groupe de pages. Vous pouvez choisir le thème de votre choix, le thème «Square» n est qu une suggestion. Voici une illustration de la troisième étape Lorsque vous avez choisi votre thème, cliquez sur Couleur et sélectionnez la couleur, le dégradé ou l image de votre choix. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

45 Voici un résultat possible, une fois les arrière-plans choisis. Bien entendu, le type de menu que vous avez ajouté tout comme les couleurs d arrière-plans diffèrent de cet exemple. Par contre, le nom des pages et les titres du menu doivent être identiques. Quatrième étape : ajouter une transition aux pages Vous devez maintenant ajouter une transition aux quatre pages de votre site. Pour ce faire, sélectionnez la page Accueil de votre groupe de pages et cliquez sur l'onglet Transition dans le panneau de propriétés en bas à droite de l'éditeur. Sélectionnez une transition et visualisez le résultat à l aide de la commande Aperçu. Si tout est à votre goût, passez à l'étape suivante. Cinquième étape : ajouter un titre au site Ajoutez un titre de votre choix au site. Dans l exemple de la page suivante, vous voyez le site d un nouveau café branché fictif de Montréal, où café et musique vont de pair. Le nom donné à ce site est «Caféique» pour café + musique! Vous pouvez suivre cette inspiration ou la vôtre. Le titre doit être placé sur la page maître pour qu on puisse le voir sur toutes les pages. Ceci n est qu un exemple, choisissez le titre qui vous plaît. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

46 Pour harmoniser le menu avec le titre, il faut formater le texte du menu en cliquant sur formater le texte dans les propriétés du menu en bas à droite. Ensuite, choisissez la même police pour le titre du site et pour le menu. L apparence du site est ainsi plus unifiée. Commencez-vous à voir que votre site prend vie? Sixième étape : enregistrer votre site Vous êtes rendu à l étape d enregistrer votre site et de le nommer : premiersitevierge Septième étape : ajouter des composantes aux pages Vous devez maintenant ajouter plusieurs composantes à votre site. Votre rôle consiste à ajouter des paragraphes, des images, des titres, des zones, etc. aux différentes pages du site. Les composantes que vous ajoutez doivent avoir du sens par rapport au site que vous montez. Par exemple, sur la page Profil, vous devez présenter le profil de la personne ou de l entreprise fictive pour laquelle vous faites ce site. Sur la page Musique, vous devez ajouter un Lecteur de musique et y inclure une liste d écoute de trois titres (bandes sonores). Dans la page Contact, vous devez indiquer les coordonnées de la personne ou de l entreprise pour laquelle vous créez ce site. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

47 Huitième étape: évaluation formative Lorsque votre site est terminé, vous devez le présenter à votre enseignant qui vous indiquera ses commentaires. 6. Description du deuxième travail de production comptant pour 25 % de la note finale du cours Avant d aller plus loin, vous devez présenter le site que vous venez de faire à votre enseignant pour qu il puisse vous donner ses commentaires. Le deuxième travail de production consiste à reproduire un site Internet le plus fidèlement possible. Ne tentez surtout pas de chercher ce modèle dans les modèles de Wix, vous ne le trouverez pas! Le site à reproduire est le suivant : Vous devez faire ce site Internet à partir d un modèle vierge. Vous trouverez, à la page suivante, toutes les informations nécessaires pour réussir à le recréer. Plus votre site ressemblera au site à reproduire, plus votre note sera élevée. Bonne chance! Pour construire ce site, vous devez utiliser ce modèle de site vierge Flash Sélectionnez le modèle de site vierge nommé «Top Navigation Flash» et cliquez sur Modifier. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

48 Voici les points importants à respecter pour réussir la reproduction de ce site Web Enregistrez votre site sous le nom : deuxiemetravail Vous ne devez pas modifier les paramètres de la page maître du site, soit 1000 pixels de largeur par 650 pixels de hauteur. L'arrière-plan de la page maître et du site est noir. Voici le code de couleur utilisé : # Le thème des pages est Square et la couleur des pages est noir (code #000000). Le titre «Mode & design» est en police Underwood et son code de couleur est #9A9A9A. Tous les paragraphes et les menus du site sont écrits en police Sweep. Vous devez copier tous les paragraphes du site et les positionner au même endroit. Toutes les photos du site ont été prises dans la collection d'images de Wix, plus précisément dans la catégorie Mode. Vous devez utiliser les mêmes photos et, pour les galeries de photos, les placer dans le même ordre. La transition entre les pages doit être identique. La transition de la galerie de photos de la page Accueil doit être identique. Indice : elle fait partie des transitions lentes. Les menus de la page Accueil et de la galerie d images de la page Produits doivent être identiques, c est-à-dire que chacun doit avoir le même thème et les mêmes couleurs. Observez attentivement le changement des couleurs du texte et des onglets du menu lorsque vous cliquez sur ceux-ci avec votre souris. Les vidéos de la page Vidéos ont été prises sur YouTube. Vous n'êtes pas obligé de trouver les mêmes vidéos. Par contre, vous devez inclure trois vidéos de défilés de mode correspondant au type de vêtements confectionnés par cette compagnie fictive. Par exemple, si vous trouvez un défilé de mode de vêtements pour enfants, cette vidéo ne correspond pas aux produits offerts par la compagnie Mode & Design. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

49 Chaque vidéo doit avoir un Titre. La première vidéo doit porter le titre : Défilé Mode and design La deuxième vidéo doit avoir pour titre : Défilé Mode and design La troisième vidéo doit être intitulée : Défilé Mode and design Vous devez positionner un lecteur de musique identique sur la page maître. Ainsi placé, le lecteur apparaîtra sur toutes les pages du site. La musique provient de la bibliothèque de Musique Wix et le titre de la piste est Romantic. Dans les paramètres du lecteur de musique, vous devez sélectionner l option de Lancement automatique et de Boucle qui permet d'entendre la bande sonore dès l ouverture du site Web. Enfin, vous devez baisser le volume à 0.1, car les internautes n aiment pas avoir à écouter de la musique sur un site Web. Finalement, vous devez inclure le même formulaire de contact dans la page Contact. Vous devez modifier sa couleur et le configurer pour que votre enseignant puisse recevoir un courriel de ce formulaire à l adresse courriel qu il vous fournira. Lors de la correction de votre travail, il vérifiera si votre formulaire de contact fonctionne correctement. Lorsque votre site est terminé, envoyez-le par courriel à votre enseignant qui le corrigera et vous donnera ses commentaires. Ensuite, vous serez prêt pour faire le troisième travail de production, c est-à-dire le travail final du cours. 7. Description du troisième travail de production comptant pour 50 % de la note finale du cours Le troisième et dernier travail de production consiste à créer un site web présentant le résultat d un travail de recherche. Vous êtes libre de choisir le sujet qui vous plaît. Votre site sera jugé autant pour son aspect esthétique que pour son contenu. La planification du projet Ce projet de création peut sembler vague pour le moment. Cette partie du cours vous aidera à trouver le sujet de votre recherche et à structurer votre site Internet. Peu importe le sujet choisi, vous devrez aborder ce dernier sous cinq aspects différents. Ceci est très important. Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

50 Le sujet Copie de l'élève Pour débuter, vous devez déterminer le sujet de votre recherche. Comme vous êtes libre en ce qui concerne le sujet à aborder, les possibilités sont presque illimitées. Ce qui peut vous guider, c est de partir d un de vos besoins ou d un de vos centres d intérêt. Exemples de besoins ou de centres d intérêt Vous adorez la Jamaïque et vous aimeriez connaître ce pays. Vous êtes un amateur de voitures de marque Honda. Vous aimeriez ouvrir un restaurant ou un salon de coiffure. Le Canadien de Montréal est votre équipe de hockey préférée. La danse est votre loisir favori. Le sujet de votre projet Quel sujet désirez-vous aborder du point de vue du contenu de votre site? Le sujet que je veux aborder est : Les cinq aspects à préciser Votre sujet devra être présenté ou développé selon cinq aspects. Par exemple, si votre sujet est la Jamaïque, vous pouvez choisir de présenter les cinq aspects suivants : 1) Les lieux incontournables à visiter 2) Le climat 3) La musique locale 4) La culture jamaïcaine 5) L histoire du pays Précisez les cinq aspects que vous aimeriez présenter 1) 2) 3) 4) 5) Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

51 Le sujet Copie à remettre à votre enseignant Pour débuter, vous devez déterminer le sujet de votre recherche. Comme vous êtes libre en ce qui concerne le sujet à aborder, les possibilités sont presque illimitées. Ce qui peut vous guider, c est de partir d un de vos besoins ou d un de vos centres d intérêt. Exemples de besoins ou de centres d intérêt Vous adorez la Jamaïque et vous aimeriez connaître ce pays. Vous êtes un amateur de voitures de marque Honda. Vous aimeriez ouvrir un restaurant ou un salon de coiffure. Le Canadien de Montréal est votre équipe de hockey préférée. La danse est votre loisir favori. Le sujet de votre projet Quel sujet désirez-vous aborder du point de vue du contenu de votre site? Le sujet que je veux aborder est : Les cinq aspects à préciser Votre sujet devra être présenté ou développé selon cinq aspects. Par exemple, si votre sujet est la Jamaïque, vous pouvez choisir de présenter les cinq aspects suivants : 1) Les lieux incontournables à visiter 2) Le climat 3) La musique locale 4) La culture jamaïcaine 5) L histoire du pays Précisez les cinq aspects que vous aimeriez présenter 1) 2) 3) 4) 5) Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

52 La recherche d informations Avant d'entamer votre site, même si vous en avez sûrement envie, vous devez bien connaître votre sujet et aussi trouver toute l information nécessaire pour bien maîtriser les cinq aspects que vous devez présenter. Par «information», on entend autant l information écrite que les vidéos, la musique et les photos qui seront nécessaires pour présenter votre sujet. Il est clair que le Web est le moyen le plus efficace pour trouver l information dont vous avez besoin. Par contre, il est possible de trouver beaucoup d informations utiles à la bibliothèque de votre ville. Toutes les photos que vous allez utiliser devront être libres de droits. Il est interdit de prendre des photos sur des sites Internet dont vous n avez pas les droits d auteur. Vous perdrez assurément des points si vous faites cela. Déterminer la structure de votre site Lorsque votre recherche d informations sera terminée, vous serez en mesure de déterminer la structure de votre site Internet. Cette section est conçue pour vous aider à créer cette structure. Vous pouvez la faire sous forme de schéma ou par écrit. Mettez le plus de détails possible. Dans la structure de votre site, vous devez indiquer le nombre de pages qu il contiendra. Vous devez indiquer le nom de chacune des pages et écrire ou schématiser un descriptif du contenu de chaque page et des composantes présentes dans ces pages. Il n y a pas de minimum ou de maximum de pages à respecter. Si vous désirez obtenir un bon résultat, il faut que votre site contienne beaucoup d informations et que la présentation du site soit dynamique, soignée et diversifiée. Par exemple, si vous avez plusieurs images à montrer, présentez-les dans une galerie d images. Inclure une vidéo peut être très intéressant si elle présente de l information utile par rapport à un des aspects que vous présentez sur votre site. Faites approuver votre structure Vous devez faire approuver votre structure par votre enseignant avant de commencer votre site Internet. Lorsqu il l aura approuvée, vous ne pourrez plus lui poser de questions et vous devrez faire votre site Web vousmême, sans aide. Rappelez-vous que vous pouvez utiliser la page d assistance du site de Wix à tout moment pour vous dépanner. Vous pouvez également visionner en tout temps lors de ce travail les vidéos explicatives faites par Wix pour vous aider Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

53 dans la création de votre site Web. Par contre, votre enseignant ne pourra plus vous aider. Voici la structure de mon site Internet Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

54 Voici la structure de mon site Internet Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

55 Voici la structure de mon site Internet Cette structure est autorisée par : Date : Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre

56 Le modèle de page vierge à utiliser Voici le seul et unique modèle de site Web qu il est possible d utiliser pour faire votre site final. Il s agit du modèle de page vierge qui s appelle «Start from scratch Flash». Bonne création! Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre