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
Table des matières
1. Planifier votre site Web............................................................................................................. 3
1.1. Définir les objectifs du site .................................................................................................... 3
1.2. Parcourir le Web ................................................................................................................... 3

2. Créer un site Internet avec Wix ................................................................................................. 6

2.1. Créer un site Web à partir d'un modèle................................................................................ 6
2.2. Créer un compte avec Wix ................................................................................................... 6
2.3. Choisir un modèle ................................................................................................................. 7
2.4. Éditer un modèle................................................................................................................... 8
2.5. Rester à l'intérieur des bordures du site............................................................................... 9
2.6. Modifier les dimensions du site .......................................................................................... 10
2.7. Changer l'arrière-plan d'un modèle .................................................................................... 12
2.8. La gestion des pages du site.............................................................................................. 15
2.9. Le rôle de la page maître ou «master page» ..................................................................... 16
2.10. Le rôle des pages ou «main pages» ................................................................................ 17
2.11. Naviguer entre les pages.................................................................................................. 17
2.12. Le panneau de propriétés des pages............................................................................... 20
2.13. Ajouter une transition aux pages ...................................................................................... 20
2.14. Ajouter une composante au site ....................................................................................... 21
2.15. Éditer une composante..................................................................................................... 23
2.16. Changer le menu du modèle ............................................................................................ 26
2.17. Changer les titres et paragraphes d'un modèle ............................................................... 27
2.18. Remplacer les images d'un modèle ................................................................................. 28
2.19. Modifier ou ajouter une zone ............................................................................................ 29
2.20. Ajouter des liens ............................................................................................................... 31
2.21. Apporter la touche finale................................................................................................... 33

3. Prévisualiser, enregistrer et publier votre site.................................................................... 34

3.1. Enregistrer votre site .......................................................................................................... 34
3.2. Modifier son nom d'utilisateur ............................................................................................. 35
3.3 Publier votre site .................................................................................................................. 36

4. Description du premier travail de production comptant pour 25% de la note finale...... 38

5. Faire un site web à partir d’un modèle vierge ....................................................................... 41

5.1. Éditer un site vierge ............................................................................................................ 42

6. Description du deuxième travail de production comptant pour 25% de la note finale .... 47

7. Description du troisième travail de production comptant pour 50% de la note finale ..... 49

8. La postproduction .................................................................................................................. 57
8.1 Rétroaction .......................................................................................................................... 57

Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre 2012 2
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 2012 3
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 2012 4
Voici un aperçu de ce à quoi pourrait ressembler ce site

Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre 2012 5
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 www.wix.com
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 2012 6
 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 4. Cliquez sur
Flash et Modifier pour
choisissez transformer un
une modèle avec
catégorie de l’éditeur Wix.
modèles

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 : http://www.html5rocks.com/fr/

Ce lien URL a été placé sur ce cours Moodle.

Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre 2012 7
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 2012 8
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 2012 9
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 2012 10
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 2012 11
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.
www.microsoft.ca _______________________________________________
www.hyundaicanada.com _________________________________________
www.voir.ca ____________________________________________________

Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre 2012 12
www.cyberpresse.ca/ ____________________________________________
www.tou.tv/ ____________________________________________________

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 2012 13
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 2012 14
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 2012 15
 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 2012 16
Arrière-plan Titre et menu principal sur la page maître
du site en gris
foncé
Les pages du site ou « main pages » se
trouvent par-dessus la page maître. Page maître
Page maître
avec arrière-
plan gris pâle

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.

2.11 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 2012 17
 On peut changer de page en
Permet d'ajouter
cliquant sur ces petites
une page au site
flèches.

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 2012 18
 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 2012 19
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.

2.13 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 2012 20
 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.

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
Page 34 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 2012 21
 Revoyons cette terminologie de plus près

La barre de menu

Les 4 Les composantes de la catégorie Ajouter

catégories
de la barre
d'ajout

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 2012 22
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.

2.15 É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 2012 23
 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é.

2. Le panneau
de propriétés
3. En cliquant sur la
Clipart apparaît.
propriété Effets, des
1. Sélectionnez options d’effets
la composante s’affichent et vous
à éditer. Ici, devez en choisir une.
c’est une
image clipart.

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 2012 24
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 2012 25
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 2012 26
 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.

2.17 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 2012 27
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.

2.18 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 2012 28
 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.

2.19 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 2012 29
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 2012 30
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.

2.20 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 2012 31
 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.

2. Cliquez sur la
1. Sélectionnez 3. Écrivez l'adresse URL
propriété Lien
une composante du site à ouvrir.
qui servira de lien.
Ex: www.google.ca

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 2012 32
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.

2.21 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 2012 33
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 2012 34
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 2012 35
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 2012 36
 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 2012 37
 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:
http://coursinf5065.wix.com/premiertravailversion1
Voici le modèle avec tous les changements à apporter:
http://coursinf5065.wix.com/premiertravailversion2
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

4. Cherchez le modèle
« Business world » et
3. Cliquez sur cliquez sur Modifier.
la catégorie
Affaires.

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 2012 38
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 : http://coursinf5065.wix.com/premiertravailversion2
□ 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 2012 39
 □ 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 2012 40
 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 2012 41
 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 2012 42
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 Nom à donner aux pages

Page Maître Mon site vierge

Page 1 Accueil

Page 2 Profil

Page 3 Musique

Page 4 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 2012 43
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ère-

plan 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 2012 44
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 2012 45
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 2012 46
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 :

http://coursinf5065.wix.com/deuxiemetravail
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 2012 47
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é : #000000. 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 2012 48
 □ Chaque vidéo doit avoir un Titre. La première vidéo doit porter le titre :
Défilé Mode and design 2012. La deuxième vidéo doit avoir pour titre :
Défilé Mode and design 2011. La troisième vidéo doit être intitulée :
Défilé Mode and design 2010.

□ 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 2012 49
 Copie de l'élève
Le sujet
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 2012 50
 Copie à remettre à votre enseignant
Le sujet
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 2012 51
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 vous-
mê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 2012 52
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 2012 53
 Voici la structure de mon site Internet

Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre 2012 54
 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 2012 55
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 2012 56
8. La postproduction
Votre site Web est maintenant terminé. Félicitations! Cette courte section
consiste à faire un retour sur le cours et à l’évaluer.

8.1 Rétroaction à remettre à votre enseignant

Quelles sont les choses à améliorer au cours? Soyez précis dans votre
réponse.
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

Quels moyens suggérez-vous pour améliorer les aspects mentionnés à

la question précédente? Soyez précis dans votre réponse.
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

Qu’est-ce que vous avez aimé du cours?

______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre 2012 57
Allez-vous suggérer ce cours à vos amis? Dites pourquoi.
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

Avez-vous des commentaires à faire à propos du travail de votre

enseignant?
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

Cours réalisé par Patrice Tourangeau - dernière mise à jour octobre 2012 58