TD n°3 : Site complet

Départ

Départ

  1. Télécharger le fichier compressé TD3.rar puis le décompresser.

Téléchargement

 

Le menu

Un menu est une liste non numérotée (<ul>) de liens internes (<a>)

Partie HTML :

<div id="menu">     
              <ul>
                 <li><a href="index.html">La Loire à vélo c'est quoi ?</a></li>
                <li><a href="loire-velo-chiffres.html">La Loire à vélo en chiffres</a></li>
                <li><a href="loire-velo-carte.html">Carte de la Loire à vélo</a></li>
                <li><a href="loire-velo-photos.html">Galerie de photos</a></li>
                <li><a href="loire-velo-videos.html">Vidéos</a></li>
            </ul>                  
</div>     

Le design du menu coté CSS est lié au 4 propriétés suivantes :

#menu ul {   }
#menu ul li {   }
#menu ul li a {   }
#menu ul li a:hover {   }

Exemple :

#menu ul {list-style:none; margin:0;}  -> pas de puces et pas de marges
#menu ul li { display:inline; } -> afficher la liste en ligne horizontale (et non en block vertical)
#menu ul li a { padding-left : 10px; padding-right : 10px;} -> marges internes de 10px à gauche et à droite
#menu ul li a:hover { color:#CCC;  } -> modifie la couleur du lien au survol de la souris

 

=> Faire vos propres essais et proposer un style de menu

=> lien utile

Exemple de résultat attendu

resultat1

 

insérer une vidéo

Insérer une vidéo

  1. Rechercher sur youtube une vidéo correspondant à la Loire à vélo
  2. copier le code d’intégration (voir sous la vidéo)
  3. coller au bon endroit le code dans le fichier loire-velo-videos.html
  4. Modifier les paramètres de la vidéos pour ajuster la taille de la vidéo à votre page.

Résultat attendu

Capture d’écran 2015-02-03 à 09.51.31

Galerie de photos

Galerie de Photos

  1. Télécharger le dossier-photos.rar et le décompresser.
  2. à l’aide de Photoshop, recadrer et redimensionner chaque photos aux dimensions suivantes :
    • photos mini : 180 px X 120 px
    • photo maxi : maximum 900 px de large, si la largeur est inférieure à 900px, laisser la taille d’origine
  3. Enregistrer chacune des photos redimensionnées dans les sous dossiers photos-mini et photos-maxi du dossier photos
  4. Ouvrir le fichier loire-velo-photos.html puis recopier et adapter les lignes de codes pour afficher les 9 photos de la galerie.

Résultat attendu

Capture d’écran 2015-02-03 à 09.55.10

Téléchargement

Effet lightbox

Effet Lightbox

L’effet Lightbox est un effet visuel javascript très utilisé dans les galeries de photos.

le lien suivant propose une démonstration ainsi que les instructions pour l’installer sur votre galerie de photo : http://lokeshdhakar.com/projects/lightbox2/

pied de page

Modifier le pied de page (footer) de façon à ressembler à celui du site la loire à vélo

 

favicon

Favicon

Une favicon est une petite image visible au niveau des onglets du navigateur et dans les favoris.

Capture d’écran 2015-02-02 à 20.06.19

Créer la favicon

  1. Télécharger l’image ci-dessous
  2. redimensionner l’image en 32X32 px  (obligatoire pour une favicon)
  3. l’enregistrer dans le dossier img sous le nom logo.jpg

Insérer la favicon

  1. Ouvrir dans dreamweaver la page index.html
  2. insérer le code suivant dans la partie <head> de la page
    <link rel="icon" type="image/jpg" href="img/logo.jpg" />
    
  3. Faire de même avec chaque fichier HTML.

Téléchargement

Carte

Carte

Création d’une carte google maps : http://blog.neocamino.com/creer-une-carte-personnalisee-qui-tue/

Carte interactive en javascript => voir TD suivant

Améliorations

Menu

Changer le design du menu en vous aidant de l’un des liens suivant :

Bandeaux

  • Créer des bandeaux différents pour chaque page à l’aide de Photoshop et d’images téléchargées sur internet
  • Taille du bandeau : 960 X 175 px.

Image de fond

  1. Ajouter l’image de fond nommée img-fond.jpg en modifiant le style de la balise body en CSS (comme footer) puis vérifier le résultat.
  2. modifier la propriété pour que l’image de fond reste fixe.
  3. Remplacer l’image de fond par la petite image « papier peint » nommée pattern1.jpg
  4. l’image n’étant qu’un motif, il doit se répéter en fond d’écran. Ajouter la propriété permettant la répétition du motif.

Résultat attendu

Capture d’écran 2015-02-03 à 11.50.04

Téléchargement