- nous apprendrons à insérer un tableau pour le menu horizontal.
--comment dessiner un calque.
---comment faire des liens.

Modifier le top

1. Ouvrez votre fichier html de la base 1 : nous allons améliorer notre document.
2.Écrivez votre titre, décorez et écrire accueil et contact. Enregistrer et regarder les changements. (voir résultat)
3. Le top modifié, insérez-le dans la cellule du haut.
4. Supprimer le top dans la deuxième cellulu et écrire le texte menu.
5. Placez votre curseur dans la cellule du haut et insérer votre top.

6. Enregistrer: CTRL+s et F12 pourvoir les changement.

Insérer le menu

1. En mode création - Placez votre curseur dans la deuxième cellule.
2. Insérer un tableau: 1 ligne, 5 colonnes, largeur 100% et espace entre les cellules 3.

3. Sélectionner le tableau:.( voir propriété)..

4. Sélectionner le tableau et donnez-lui la couleur #66A9C6; maintenant placez le curseur dans la première cellule du tableau menu et écrire lien 1

.... écrire aussi les autres liens.

5. Voir la propriété: largeur 160 en divisant 825 par le nombre de cellules . Horz et vert = pour centrer le texte. Hauteur 15.

...



6. Voir la règle CSS en cliquant sur le petit +: OK

7. Nouvelle règle CSS pour les liens: a:link. Écrire dans la catégorie type:


8. Inscrivez votre choix.de police ect...

9. Dupliquer la règle CSS..et changer a:link pour a: visited.. Dupliquer aussi a: hover et a: active.

10. Surlignez le lien 1 dans la cellule menu. puis à propriété...tirez la flèche vers un dossier de votre choix.

.....faire un lien.... puis inscrire _blank

....NOTE: target -blank veut dire que la page s'ouvrira dans une page nouvelle


11 .Surlignez le lien 2 et coller un lien HTTP dans la cellule lien.

.....vous aurez ceci....

12. En mode code, vous pouvez aussi changer le lien 1 en .

..........................

.........( supprimer le lien en gris) ( voir image ci-haut) .... et le remplacer par http://www.google.ca/
...........COPIER/COLLER http://www.google.ca/

13. Pour réaliser un lien javascript:;. Souvent utilisé en attendant de connaitre le nom du lien.

.....


12. Maintenant à style CSS ouvrez le style a:hover en double cliquant dessus et changer la couleur du texte par #6B63B0
.

La cellule du haut ..insérer d'autres liens.



1. Sélectionner votre image top.... voir la propriété.

2. En mode création, choisir le carré. Cliquez sur le carré puis entourez votre texte accueil...

3. Dans la propriété, inscrire votre lien...

4. Répétez l'opération en cliquuant sur le carré puis entourez votre texte contact ....mailto:imagie33@hotmail.com

5. Pour réaliser un lien courriel, il faut écrire: mailto: avant de taper votre adresse email.

6. Il reste à enregistrer. Votre travail de base 2 est terminé.