Fil conducteur pour les exercices

 
 
 

Table de références

 


Site de Tignes


Exercice 1
Exercice 2
Exercice 3
Exercice 4
Exercice 5
Exercice 6
Exercices facultatifs
Exercice 7
Exercice 8
Exercice 9
Exercice 10
Exercice 11
Exercice 12
Utilisation du navigateur ftp
Utilisation de l’outil de connexion au serveur ftp
Exercice 13

Page de liens

 

Exercice 1

 

Copier le dossier d'exercices (Mac ou PC) dans le répertoire Users sur PC ou dans le dossier Documents sur Mac. Renommer ce dossier à votre nom. Il comprend un dossier intitulé tignes et à l’intérieur des dossiers d’images et de textes fournis.

 
 

Exercice 2

 

Création d’un site depuis un dossier, ce qui ajoute un dossier .data et un fichier .site.

Ouvrir Golive et choisir “Nouveau site“, Importer d’un dossier … Choisir le dossier tignes.

Si vous retournez sur le bureau, vous aurez maintenant, dans votre dossier personnel, 4 éléments : le dossier tignes qui s’y trouvait déjà, un dossier tignes.data, un fichier tignes.site, tignes.settings et une copie de sécurité du fichier de site. Pour ouvrir ultérieurement votre site de tignes, il faudra simplement cliquer sur tignes.site.

 
 

Ouvrir la la fenêtre de site en deux volets.
Faire glisser le dossier textes dans le volet de droite (ce qui correspond à tignes.data).
Changer le nom du fichier index.html en welcome.html.
Déplacer le dossier textes dans la fenêtre de droite (inutile de le transmettre sur le serveur).

 
 

Exercice 3

 

Réalisation de la page welcome.html.

Notion de grille,
utilisation des outils de texte,
insertion d’images.

Les liens ne sont pas encore actifs.

Matériel de base :
2 photos
(automne.gif et hiver.gif dans le dossier images_photos) et
2 logos de titre
(titre.tignes.gif, et bienvenue.gif dans le dossier images_titres).

Page de largeur fixe (760 pixels), centrée.

Dans la bande bleue des pages suivantes, on accèdera à cette page sous “ACCUEIL“.

 

Exercice 4

 

Réalisation de la page Ski d’automne.

Notion de tableaux (tableaux imbriqués),
de liens.

Matériel de base :
8 images pour la bande bleue verticale
(dans le dossier images_bande),
un logo de titre
(dans le dossier images_titres)
un texte
(automne .doc dans le dossier textes).

Lien vers la page d’accueil et mettre les liens sur cette page.

Vous pouvez aussi ajouter du texte en bas de la page et vous exercer avec les ancres.

 

Exercice 5

 

Réalisation d'un composant et d’un modèle.

Sauvegarder la bande bleue comme un composant.

Notion de rollovers et de modèles.

Matériel de base :
images pour la bande verticale ("blanches et jaunes"),
1 logo de titre,
3 images du dossier images
un texte
(hiver.doc dans le dossier textes du dossier tignes.data).

Créer le corps de la page, la bande bleue, les rollovers, les liens (prévoir les liens pour les pages qui seront créées), le titre et enregistrer cette page comme modèle.

 

Exercice 6

 

Création de CSS.

Notion de feuilles de styles.

Définir plusieurs styles distincts:
titre principal,
titre secondaire,
texte,
cellule,
titre dans une cellule, ...

Utilisation des styles dans la totalité du site.

Depuis le modèle, créer la page Hiver.

Dans la bande bleue, on accèdera à cette page sous “INFORMATION“.

 

Exercices facultatifs

 

Réalisation de 2 pages supplémentaires :

Domaine skiable et Innovations.

Cela permet de voir :
l’utilisation du modèle,
la mise en page,
la notion ancres–liens, etc.

Dans la bande bleue, on accèdera à ces pages sous “PISTES“ et "INNOVATIONS".

 

Exercice 7

 

Réalisation de la page Plan de la station.

Notion d’image interactive, d’actions, de liens vers des fichiers graphiques.

Matériel de base :
le modèle que vous avez créé,
un titre (dossier images_titres),
des images (dossier images_station).

Créer la page à partir du modèle,
remplacer le titre,
mettre le plan de la station,
définir cette image comme réactive,
déterminer les zones sensibles (selon modèle ci-contre),
faire les liens.

Dans la bande bleue, on accèdera à cette page sous “PLAN STATION“.

 
 

Exercice 8

Réalisation de la page Animation.

Notion de boîtes flottantes et d’animation DHTML.

Matériel de base :
4 images pour la bande bleue verticale
(dans le dossier images_bande),
un titre,
4 logos (dossier images).

 

Exercice 9

Il est aussi possible d’utiliser des actions pour qu’au passage sur une zone sensible, cela transforme une image en une autre (les logos noirs deviennent rouges). Pour cela, il faut obligatoirement avoir nommé les images qui seront permutées (par exemple lav, clar, lac) ; cela se fait dans l’onglet avancé de l‘Inspecteur d’image, rubrique Formulaire, mais sans cocher cette case.

Positionner d’abord les logos noirs.

Lavachet concerne la zone tout à gauche,
Le Lac les 3 zones suivantes,
Val Claret les 3 zones sur la droite du lac).

 Exercice 10

La page Visite en images permet de travailler sur les liens vers des fichiers graphiques.

Les images se trouvent dans le dossier images_photos.

Dans la bande bleue, on accèdera à la page Visite sous “IMAGES“.

 

Exercice 11

 

La page Diaporama illustre une Action fournie par Golive et permettant de réaliser des défilements d’images.

Les images pour la page dans le dossier images_diapo.

La photo est une image et les deux icônes sont des boutons. On appliquera au premier bouton une action prise dans le groupe "“Action plus“, à savoir projet diaporama auto. Les images pour le diaporama doivent se trouver dans le même dossier et se nommer 01, 02, 03, 04, … avec comme suffixe .gif ou . jpg.

 

Exercice 12

 

Téléchargement du mini-site en utilisant les outils ftp de Golive.

Organisation de la zone persoedu :

Les pages seront posées sur le serveur persoedu, qui est une zone personnelle que vous pourrez ultérieurement utiliser pour d’autres projets.

Cet espace personnel, accessible par http://persoedu.ge.ch/nomp/ s’ouvre pour le moment sur une page de bienvenue (avec une pelle mécanique).

Normalement, il faut télécharger ce qui sera vu par les “internautes“ sur votre site, c’est-à-dire le contenu du dossier tignes. Le dossier tignes.data et le fichier tignes.site restent sur votre machine.

 

Utilisation du navigateur ftp

 

Dans le menu Fichier, choisir Navigateur FTP et entrer les données suivantes :

Cliquer sur Connecter, vous accédez alors au contenu de votre zone persoedu : il y a pour le moment une page welcome (la pelle mécanique) et un dossier d’images (pour cette page welcome).

Glisser le dossier tignes depuis le bureau sur le Mac ou l’Explorateur sur PC. Vous avez donc maintenant 3 éléments dans cette fenêtre.

 

Utilisation de l’outil de connexion au serveur ftp

 

Définissez maintenant, dans le menu Site, les paramètres de connexion pour ce site (serveur FTP ou Configuration)

Le répertoire est ici différent, car on se trouve directement dans tignes.

L’accès se fait directement en choisissant dans le menu Site Serveur FTP et Connecter.

La fenêtre de site fait apparaître à droite le contenu du dossier tignes sur le serveur.

 

Exercice 13

 

Téléchargement final du mini-site

Il serait bien maintenant que, en se connectant à votre zone persoedu, on puisse accéder au site de Tignes : il faut donc ajouter un lien à la page welcome de votre zone persoedu, donc modifier la célèbre page à la pelle mécanique.

Deux possibilités :

Rapatrier la page welcome depuis le navigateur ftp, la modifier et la télécharger vers le serveur.

Il est possible de modifier directement sur le serveur la page welcome : il suffit pour cela d’ôter, dans la configuration du serveur FTP, /tignes. On accède alors à la racine de persoedu et depuis la zone de droite de la fenêtre de site, on peut par un double-clic sur le fichier welcome le modifier.

 

 

retour à la page d'accueil