Agence creation de site internet
Debutant : Creez votre premiere page web
Thèmes associés : . ? Inserer menu ! , . Liens associés : inserer menu et inserer menu
E-Commerce

Inserer un menu et creez une deuxieme page

5.1 - Installez le pied de page (footer)

Vous allez maintenant insérer le pied de page (souvent appelé "footer"). Pour cela, ouvrez index.html avec votre bloc note et copier le code ci-dessous après votre article (après la balise HTML </p>).
<div style="clear:both;"></div>
</div>
 
<div id="piedDePage">
Copyright Nom de mon site
</div>
Actualisez la page dans votre navigateur internet. Vous devez avoir "Copyright Nom de mon site", écrit sur fond blanc.

5.2 - Installez le haut du site (header)

Vous allez maintenant insérer le haut de votre site (souvent appelé "header"). Pour cela copier le code ci-dessous après le conteneur <div id="global">.

<div id="bandeau">
<span class="titreSite">Nom de mon site</span>
<br />
<span class="slogan">Le slogan de mon site Internet r&eacute;alis&eacute; en une heure!</span>
</div>
 
<ul id="menu">
<li><a href="#" title="Voir la page d'accueil">Accueil</a></li><li><a href="#" title="Voir les photos">Les photos</a></li><li><a href="#" title="Voir les informations">Les informations</a></li><li><a href="#" title="Voir la page contact">Contact</a></li>
</ul>
Image de Inserer un menu et creez une deuxieme page
zoom sur image
Image de Inserer un menu et creez une deuxieme page
zoom sur image

5.3 - Creez une deuxieme page

Vous allez maintenant passer à la création de votre seconde page. L'objectif est de vous expliquer comment fonctionne les liens entre les pages de votre site.
 
Pour commencer, rendez-vous dans votre dossier "Mon-Site". Copier/coller votre page index.html et renommez la en contact.html. (Attention : Nous n'avons pas mis de majuscules !).
Image de Inserer un menu et creez une deuxieme page
Les explications visuels.
zoom sur image
Les explications visuels.

5.4 - Modifiez votre page contact

Ouvrez avec votre bloc note la page contact.html et modifiez le titre de la page dans la balise <title> et le <h1>. Ecrivez par exemple "Page Contact".
 
Supprimez la balise <h2> et son contenu.
Supprimez l'image.
Remplacez le contenu de votre article avec vos coordonnées (par exemple).
Vous risquez de rencontrer des problèmes avec les accents. Pour cela, il suffit de copier le code qui est dans la colonne Entité HTML de la page des caractères spéciaux.
Voir l'exemple ci-dessous avec l'accent grave :
Image de Inserer un menu et creez une deuxieme page
zoom sur image
Image de Inserer un menu et creez une deuxieme page
zoom sur image

5.5 - Ajoutez un lien dans votre menu

Vous allez maintenant lier les pages accueil et contact entrent elles. Pour cela, nous allons insérer un lien dans votre menu de navigation.
 
Dans notre exemple, nous avons utilisés "Accueil", "Les photos", "Les informations" et "Contact" que nous avons mis à l'intérieur des des balises <ul></li>.
Le code pour insérer un lien est le suivant :
<a href="" title=""></a>
 
Vous allez attribuer un nom à votre lien :
<a href="" title="">Accueil</a>
 
Vous devez écrire le nom de la page dans la balise <a href="index.html">Accueil</a>
Lorsque vous cliquerez sur le lien Accueil, vous arriverez sur la page index.
 
Vous devez faire pareil avec le lien contact. Vous pouvez éventuellement écrire la description dans la balise title="" de la page vers laquelle pointe le lien.
<a href="contact.html" title="Voir la page Contact">Contact</a>
Image de Inserer un menu et creez une deuxieme page
zoom sur image
Image de Inserer un menu et creez une deuxieme page
zoom sur image
Rendez-vous sur index.html dans votre navigateur. Actualisez la page et cliquez sur le lien Contact. Si tout est correct, vous devez pouvoir accéder à la page contact.html.
 
Vous devez penser à changer les liens sur votre page contact.html afin de pouvoir passer de la page contact à la page d'accueil.

Création de sites Internet
& référencement naturel

Découvrez les références de l’agence web
STUDIO VITAMINE. Des spécialistes et passionnés
Ă  votre service ! Devis gratuit.
mascotte de l'agence web STUDIO VITAMINE
l'agence web STUDIO VITAMINE