Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 MENU  -  Création site  - créer 1  - créer 2  - créer 3  - créer 4  - créer 5  - créer 6  - créer 7  - créer 8  - créer 9 
 Menu création site 6  - Contenu  - éléments du menu  - listes  - style  / menu horizontal 



La Création d'un site web.
Cours 6 : le menu.



 © LigneWeb  ... /création site: le menu.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Exemple de menu.


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Le menu de ce site.

... prenons comme exemple partiel ...  une partie du menu de ce site  ...
... comme nous le savons, ... ce menu sera entièrement construit entre deux balises ...
... qui sont ... la balise entrante ... <div id="menu"> ...
... et la balise sortante ... </div> ...
... ceci a été vu au ...  cours 2 : .... qu'il faut connaître au préalable ...
... c'est l'ancienne page ... «nos offres» ...

Le menu de la page : Nos offres.

... nous prenons la page ...  Nos offres  ... car il n'y a pas le menu on/off ...
... il est créé par un script en JavaScript et est particulier, ...
... nous en parlons dans la page ...  programmes 3  ... sur ce site ...

... nous avons cet ...  exemple concret  ... dans la page ...  menu.html  ...
... avec l'en-tête préalablement réalisée qui s'y joint ... pour être complet...

Les éléments du menu :

... le premier élément est le bloc complet du menu ... avec sa couleur de fond ...

... le deuxième élément est une barre de séparation, elle aussi dans un bloc de couleur ... mais pas prise ici ...

... le troisième élément est ... une liste ... avec différents petits blocs ...
... dont chacun est constituée d'une sous-liste ...

... il existe aussi une image de fond représenté par le logo de LigneWeb ...
... il est non défilant avec la page ... mais sera traité ... ultérieurement ...
... il se trouve en bas à gauche du fond de body ...
... il donne donc l'impression d'apparaître et de disparaître lors du défilement de la page ...
... quand la page est ajustée au body réel ...




Réalisation des différents éléments :

... la construction se fait dans l'ordre ... premier bloc suivi du deuxième ...
... et ainsi de suite ...  c'est important  ...
... avec leur contenu sous forme de listes ...

Les listes ...

... la première liste se trouve dans un bloc ... comme ceci : ...


... la suite est simple ... on continue l'énumération des différentes listes ...
... jusqu'à la fin du menu proprement dit ... ce qui donne ...





Et le fichier extérieur CSS :

... nous ne donnons que les éléments propre au menu ...


... voyons les différents éléments propre au menu ...

... nous avons dabord le style du bloc ... menu ...
... avec une ... image de la puce ... qui se trouve dans les listes ...

... ensuite le style des éléments du menu ... pour h1, h3, les liens hypertextes ...

... et surtout le style des différentes listes définies par ... ul ...
... considérées dans notre cas comme différents petits blocs ...




Et le fichier extérieur CSS complet :

... c'est le fichier du style de cette page ... fichier extérieur qui se nomme ...
... ligne5.css ...


... le menu ici est positionné à gauche ... ce qui donne comme première valeur :
... float: left; ... pour le ... #menu ... en ... css ...




... le fichier image ...  ligneweb22.jpg  ... doit aussi être disponible ...
... ainsi que l'image ...  puce.jpg  ...

... nous avons donc dans le dossier de notre site internet ...
① ... le fichier ... index.html ... qui est la première page ...
② ... d'autres fichiers ... pagex.html ... pour chacune des pages suivantes ...
... pagex étant leurs différents noms ...
③ ... le fichier ... style.css ... la feuille de style externe ...
④ ... le fichier ... ligneweb22.jpg ... le fichier image ...
⑤ ... le fichier ... puce.jpg ... l'autre fichier image ...
... nous avons cet ...  exemple concret  ... dans la page ...  menu.html  ...
... avec l'en-tête préalablement réalisée qui s'y joint ... pour être complet...


Menu horizontal.

... le menu horizontal se trouve entre l'en-tête et le menu ...
... nous voyons le menu au ...  cours HTML n°2  ...

Le fichier html :

... nous montrons les éléments propre au menu horizontal...



... nous avons l'en-tête ... suivi du menu horizontal...
... suivi du menu vertical ... celui dont on parle au début de cette page ...

... voir également la ...  place du menu horizontal  ...


... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 MENU  -  Création site  - créer 1  - créer 2  - créer 3  - créer 4  - créer 5  - créer 6  - créer 7  - créer 8  - créer 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création  site  - Cours HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies