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 4  - Contenu  - textes  - images  - style  - images/texte  - tableau/texte 



La Création d'un site web.
Cours 4 : la partie visible.



 © LigneWeb  ... /style des textes et images.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Partie visible
d'une page web


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 contenu du site.


... un site web a un but qu'il est important de préciser, ... car de ce but va dépendre la manière de le présenter ...
... cette réflexion débouchera aussi sur le nombre de pages qu'il nous faut, ...
... sur la structure ou plan du site que nous allons construire, ...
... enfin, cela définirat les images, photos, vidéos éventuels qu'il faudra intégrer ...

... il nous faut au préalable une page d'acceuil ... indispensable ... dont le nom sera toujours ... index.html ...
... ce nom correspond au langage utilisé ici : le HTML ou le XHTML ...

... la srtucturation débouchera sur un menu ... avec peut-être un sous-menu ...
... la place du menu dépendra du contenu de notre première page ... mais pas seulement...
... il faut déjà penser aux autres pages, aux différents chapitres qui seront développés ...
... ce qui demande une préparation importante ... indispensable ... pour réaliser un beau site web ayant des qualités de compréhension, d'intelligence ... d'ergonomie ...
... il est donc intérressant de faire des projets sur papier avant de commencer l'encodage proprement dit ...

... tout ce travail va aussi participer au référencement naturel ...
... c'est avec un robot que les moteurs de recherche travaillent ...
... le robot travaille d'une manière logique en fonction d'algorythmes secrets ...
... mais la lecture par le robot demande de la logique ... liée au contenu ...
... à la qualité du contenu ... etc ... tout un art ...



Côté pratique :

... maintenant nous allons voir … le placement des différents blocs ... dans le corps de la page ...

Plaçons un texte :

... nous pouvons placer dans un bloc un texte qui peut être aligné à gauche, au centre , à droite ou justifié ...
... nous savons que c'est le fichier extérieur qui s'occupe du style ...
... nous prenons un texte générique ... avec ...text-align: left; ...
... constitué de trois paragraphes ... entourés par les balises ... <p> ... et ... </p> ...


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.



... nous avons donc trois paragraphes a inscrire dans le fichier ... .html ...
... c'est un bloc de textes qui va se noter ... <div class="texte5"> ...
... suivi des paragraphes : ... <p> ... du texte : ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
... suivi de la fermeture : ... </p> ...
... et ceci trois fois l'un à la suite de l'autre ...
... pour se terminer par la fermeture du bloc : ... </div> ...
... le style quand à lui va s'écrire dans la feuille de style séparée comme suit : ...
... le nom du bloc : ...  .texte5  ... suivi de l'accollade ... { ... en ouverture ...
... la largeur ... width ... comme suit : ... width: auto; ... pour la souplesse ...
... la marge (extérieure) ... margin ... comme suit : ... margin: 5px; ...
... la marge (intérieure) ... padding ... comme suit : ... padding: 5px; ...
... la couleur du texte ... color ... comme suit : ... color: #000022; ...
... l'épaisseur de la bordure ... comme suit : ... border-width: 1px; ...
... le style de la bordure ... ... comme suit : ... border-style: inset; ...
... la couleur de la bordure ... ... comme suit : ... border-color: #33ffff; ...
... la couleur de fond du bloc ... comme suit : ... background-color: #3399bb; ...
... la taille de la police ... comme suit : ... font-size: 15px; ...
... et enfin, la fermeture de l'accollade ... comme suit : ... } ...



... structure :

... dans le fichier .html
... dans le fichier .css
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .





Plaçons une image :

... nous allons prendre l'exemple de l'image ci-dessus à droite ...
... cette image va être placée à cette place avec un bloc ... div ...
... nous allons lui donner un nom grâce à ... class ... qui sera ... image1 ... par exemple ...
... cela deviens donc : ... <div class="image1"> ... suivi de l'image proprement dite ...
... <img src="photo2/photo1.jpg" alt="toile d'araignée dans la rosée" title="toile d'araignée dans la rosée" /> ...
... suivi de la fermeture du bloc ... </div> ... très important ...

... comment faire pour que cette image se place à droite ? ...
... je vais le dire dans le fichier ... style.css ... que j'ai appelé au préalable dans le ... head ... avec la balise ... link ...
... allez revoir le ...  cours d'introduction  ... déjà donné ...
... nous y avons déjà placé d'autres éléments auxquels vont s'ajouter d'autres, dont celui-ci ...
... d'abord ... le nom : ...  .image1  ... suivi de l'accollade ... { ...
... ensuite on va donné à ce bloc une marge (extérieure) ... margin: 5px; ...
... ensuite on la met à droite : ... float: right; ...
... on met une bordure : ... border: 1px; ...
... avec un style : ... border-style: inset; ... et une couleur : ... border-color: #00ccee; ...
... et enfin, on ferme l'accollade ... } ... qui cloture la partie ... css ...
... il ne faut pas oublier le point devant le nom image1 dans le css ...
... c'est grâce à l'attribut ... float ... que l'on peut placer le bloc et donc l'image ...
... le bloc ... div ... s'adapte exactement à l'image ... dans notre cas ...
... si notre image était trop grande pour la placée, ... on imposerait un ... width: 170px; ... par exemple ...
... cela réajusterait celle-ci dans les proportions désirées ... ...
... la marge, quand à elle permet de ne pas avoir l'image juste en bordure droite du corps ...



... structure :

... dans le fichier .html
... dans le fichier .css
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .





Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

toile d'araignée dans la rosée

... c'est un exemple ...









... nous voyons qu'après avoir placé l'image ... flotante à droite ... nous avons le titre (h3) ...
... il est aligné au centre de l'espace qui reste, à gauche de l'image ...
... il est suivit de 5 sauts de ligne ...
... une image se trouve sur ... une ligne d'écriture ... même si elle est plus haute que cela ...


... de gauche à droite sauf pour ... l'élément flottant ...
... qui sera toujours placé en premier, ... qu'il soit à gauche ou à droite ...
... un exemple qui est ... l'image flottante à droite ... placée en premier ...




Plaçons une image dans le texte :


... mettons maintenant ... cette image dans le bloc texte ... et voyons ce que cela donne ...



toile d'araignée dans la rosée

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.



... l'image est toujours à droite ... et le texte l'entoure ...




... structure :

... dans le fichier .html ... nous avons donc …
... dans le fichier .css
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .


... l'image est placée en premier ... c'est l'élément flotant ... elle est suivie du texte ...
... la lecture par le navigateur est plus rapide ...  question de logique  ...




... autre disposition de l'image :



toile d'araignée dans la rosée

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.



... l'image est a gauche ... et le texte l'entoure ... avec ...  float: left;  ...




Plaçons un tableau et du texte :


... nous allons placer un tableau à ... gauche ... dans le corps et un bloc texte à ... droite ... de celui-ci ...
... nous avons donc deux blocs mis l'un à côté de l'autre ...
... le premier qui aura pour nom ... class="tableau1" ... et le second ...class="texte1" ... ...

... nous prenons un des tableaux du ...  cours 7  ... il était centré ...
... avec une partie de son style intégrée dans la balise ... table ... comme suit ...
... <table border="0" cellspacing="1" width="30%"> ... pour rappel ...
... et cela nous donne dans le concret …

Aqua Blue Fuschia
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... si nous voulons le placer à gauche, ... nous utiliserons l'attibut ... float: left; ... dans le fichier ... style.css ...
... ce qui nous donne ...

... d'abord son nom : ... .tableau1 ... suivi de l'accollade : ... { ...
... ensuite, la marge (extérieure) : ... margin: 5px; ...
... une marge (intérieure) : ... padding: 5px; ...
... ensuite sa situation :  float: left;  ...
... je lui impose une largeur : ... width: 250px; ...
... une couleur de fond (pas nécessaire : ... backgroung-color: #3399bb; ...
... et pour finir, la fermeture de l'accollade : ... } ...
... les mesures sont à ... l'intérieur du bloc corps ... cela nous donne donc ...


Aqua Blue Fuschia
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar.

... balise “texte“ ... incluant le texte ...


... pour le placer à côté du bloc tableau ... nous allons utiliser : ...
... margin: 5px; ... suivi de ... margin-left: 300px; ...
... la marge (extérieure) du bloc par rapport au bord gauche du ... corps ... (ici) ...
... le bloc tableau lui aussi a sa marge (extérieure) gauche par rapport au bord gauche du ...corps ...
... nous avons le nom : ... .texte5 ... suivi de l'ouverture de l'accollade ... { ...
... la marge (extérieure) : ... margin: 5px; ...
... avec l'écartement extérieur gauche : ...  margin-left: 300px;  ...(à l'intérieur de body) ...
... la marge intéreiure pour le texte : ... padding: 5px; ...
... la largeur du bloc : ... width: auto; ... pour pouvoir s'adapter ...
... la couleur de fond : ... background-color: #3399bb; ...
... la couleur du texte : ... color: #000033; ...
... et l'alignement du texte : ... text-align:left; ...
... et pour finir, la fermeture de l'accollade : ... } ...

... nous avons donc pour le fichier ... .html ... ces deux blocs successifs ...
... le premier bloc ... <div class="tableau1"> ... suivi du tableau ...
... et qui se termine par ... </div> ...
... ensuite le deuxième bloc ... <div class="texte1"> ... suivi du texte ...
... et qui se termine par ... </div> ... auquel on ajoute un espace ... <br /> ...
... il ne faut pas d'espace entre les deux blocs contigus pour qu'ils soient sur le même niveau ...



... structure :

... dans le fichier .html
... dans le fichier .css
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .

... nous voyons aussi des ombrages et des arrondis du ... CSS 3.0 ... vu a ...  l'information CSS 3.0  ...

... on voit que l'on peut faire beaucoup de mises en pages différentes en travaillant sur le style uniquement ...

Autre exemple :

... on peut mieux intégré ce tableau dans le texte ...
... en changeant simplement la première balise du texte ...
... en mettant celle-ci devant la première balise du tableau ...
... [ voir ceci par rapport au fichier .css ci-dessus ] ...

... structure :

... dans le fichier .html



... balise “texte“ ... incluant le tableau et le texte ...
Aqua Blue Fuschia
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar.

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.





... balise “texte“ ... incluant le tableau et le texte ...
mais sans son block marqué ...
Aqua Blue Fuschia
Grey Green Lime
Maroon Navy Olive
Purple Red Silver
Teal White Yellow
AliceBlue Lavender Black

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar.

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.



... 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