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

Titre du site ligneweb.net
... 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 web  - introduction  / imbrication  / alignements de blocs  / cahier des charges :
 •  Le problème de la sécurité de nos systèmes informatiques. 


La Création d'un site web :
une introduction.



 © LigneWeb  ... /création site web.
© design : LigneWeb
© : alain jean deligne              ... Coins arrondis, ... ombrages, ... couleur de fond en dégradé : ...
... avec la propriété box-shadow ... avec inside (l'ombrage interne) ... donnant l'effet 3 D ... en CSS 3 ...
... avec la propriété box-shadow ... l'ombrage externe ... donnant l'effet 3 D ... en CSS 3 ...



Une première approche
en XHTML

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 






Ce n'est pas de l'enseignement, c'est du partage de connaissances.



Cliquez ici pour le détail

Notre choix proposé ...

... c'est un site pédagogique ...
... il est construit avec ce qu'il enseigne : ...
... le XHTML/CSS 2 vers et pour le HTML 5/CSS 3 ...

Notre choix permet ceci :

... la page construite en HTML 5 / CSS 3 est celle que vous avez construite vous-même ...
... vous avez écris vous même le texte en suivant la logique simple d'écriture ...
... en utilisant les balises encadrantes définies par ce HTML 5 / CSS 3 tout simplement ...

... vous êtes maître à bord et pouvez toujours changer, transformer ou recréer votre page ...
... votre autonomie qui en découle est la garantie de votre individualité ...
... elle participe de votre liberté, de votre créativité, ...
... de votre dimension humaine ...

... un retour à l'essentiel, ... qui n'enlève rien au partage ...
... partage d'une compétence, d'une connaissance, d'une aide aussi ...
... vous pouvez commencer par le XHTML / CSS 2 qui est la base du HTML 5 / CSS 3 ...

... l'accès à ce site est gratuit, ...
... même si nous proposons aussi de réaliser avec vous un site web ...
... cette dimension existe pour tous ceux qui en ont besoin ...
... un besoin d'autonomie avec une aide ... à prix modique ...
... je peux aussi le réaliser complètement avec des explications ...


... la balise  details  ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...



Introduction : les zones, les blocs et les balises.


... cette partie demande la connaissance des ... cours XHTML  ... et des ...  cours CSS 2.0   ... merci ...

... une page d'un site web est ( nous l'avons vu au ...  cours XHTML  ) entouré de la balise ... body ... qui représente le bloc visible de la page ...
... le ... bloc body ... se situe lui-même à l'intérieur d'un bloc plus grand qui se nomme ... bloc html ... Ce dernier a également le ... bloc head ... à l'intérieur en première partie ... représentant la partie invisible ...
... c'est dans cette partie que l'on donne les renseignements indispensables ... pour permettre à la page web d'être sur l'écran de l'ordinateur ...

... à l'intérieur du bloc body, nous avons en général ... quatre zones ... l'en-tête, le menu, le corps, et le pied de page ...
... ces quatre zones sont quatre blocs ... se succédant dans l'ordre cité ici ...  (cours XHTML) 

... la ...  construction d'une page web  ... se réalise de ...  haut en bas  ... pour définir les blocs ...
... et de ...  gauche à droite  ...

... c'est avec le ...  style en CSS 2.0 dans un fichier externe  ...
... que nous pourrons définir la place de chacun d'eux ...
... ( voir le cours ... sur ...  la création d'un site web  et les pages suivantes ) ...

... pour toute aide complémentaire, n'ayez pas peur de contacter le ...
...  webmaster 
...
… pour  l'écriture , on peut écrire de gauche à droite … mais aussi de droite à gauche … comme pour …  l'Arabe  … et autres …

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

... sauf  ... pour ... l'élément  flottant  ... :

... on utilise le mot flottant ( float ) ... parce qu'il est placé sur la même ligne ...
... avec un autre élément, ... une image et un titre, par exemple ...

...  l'image flottante à droite  ...placée en premier ...

... autre exemple : le menu vertical que j'écris en premier par rapport au corps ...
... et qui ici est flottant à gauche ... comme il pourrait l'être à droite ...
... l'ordre d'écriture est : ...
... l'en-tête, le menu, le corps, le pied de page ...

... on écrit aussi de gauche à droite ...
... sauf pour l'Arabe par exemple où nous pouvons indiquer le sens inverse ...
... pour l'écriture uniquement ...

... toute mesure de base dans ... body ... a comme référence de départ ...
...  le coin supérieur gauche  ...
... et toute mesure dans un bloc particulier ... son coin supérieur gauche ...





Imbrication de blocs :

... en regardant à gauche nous avons le ...bloc menu ... et à l'intérieur de celui-ci, nous avons des titres et de petits blocs biens distincts qui sont placés les uns sous les autres ...
... il y a ... imbrication de blocs ...

... dans chacun de ces petits blocs, il y a du texte, ... mais aussi des images ...
... parfois le bloc est lui-même une image, ou une petite banière ... ou bien, il y a un texte défilant dans l'un d'eux grâce à un petit script ... en JavaScript ...

Ordre des blocs

... que je regardes chacun des blocs décrits ici, petits ou grands, ils ont une place ...
... cette place est ... logique ... dans la page code (X)HTML ...
... ➀ - le grand bloc ... body ... qui va englober tous les autres blocs ...
... ➁ - le bloc ... en-tête ... qui englobera le logo, le titre, une image, ...
... ➂ - le bloc ... menu ... qui englobera le menu, des publicités, et autres renseignements, ...
... ➃ - le bloc ... corps ... le plus grand qui englobera tous les éléments pour cette page ...
... ➄ - le bloc ... pied de page ... qui englobera le copyright, les éléments de contacts et autres renseignements légaux, ...

... tout le contenu concrêt de cette page sera placé sur ma page code (X)HTML en me servant des balises correctes ... et en tenant compte de l'ordre défini ci-dessus ... impérativement ...
... le navigateur lit de haut en bas, ... et si les premiers éléments sont le pied de page, il ne saura pas construire cela puisqu'il lui faut d'abord l'élément body ...
... où pourait-il placé le pied sans les informations de base ? ...

Nom des blocs

... il faut donner un nom à chacun des différents blocs pour pouvoir les repérer ...
... cela permettra de donner à chacun d'eux le style ... qui sera défini dans un fichier externe en CSS 2.0 (.css) ...
... voir les cours ...  XHTML  ... et ...  CSS 2.0  ...
... le nom d'un bloc autre que body, se définira par son ... id="______" ... ou par sa ... class="_____"
... comme sont les ... en-tête, menu, corps et pied de page, ... eux connus ...
... et tous les autres dont les noms sont donnés par nous-même ...





Alignement de blocs

... comment peut-on réaliser l'alignement de deux ou plus de blocs se trouvant l'un en dessous de l'autre ...

... c'est soit par leur marge à gauche ...
... soit par leur position dans un bloc plus important ...
... soit par ces deux réalités ensembles, ... car chaque bloc a ces marges ...

... la plus évidente est la position par rapport à un bloc plus important ...
... tel que le corps ou le menu ...
... il sera à gauche ... (left) ... avec sa marge gauche ...
... il sera centré ... (center) ... avec sa largeur identique ...
... il sera à droite ... (right) ... avec sa marge droite ...

... un dessin est à réaliser au préalable pour voir la disposition des différents éléments ...





Un dessin :

... un premier schéma (dessin) d'abord pour fixer le cadre général ...

 Figure 1. 

 DOCTYPE     ( : XHTML 1.0 transitional. )

 html  : partie invisible avec  head  ...  et  ... body

 body  : partie visible

 En-tête 

... logo ...


 Menu 

Titre

 Corps 

 Pied de page             ...Copyright ...

... nous avons la page entière ... avec les quatre zones ...
... partie visible du fichier html ...

... on voit bien l'imbrication des différents blocs ...

... quand à la balise ... html ... elle englobe la partie invisible entourée de la balise ... head ... et du contenu de la balise ... body ... partie visible ... que nous venons de voir ...
... ne pas oublier que la balise ...html ... s'écrit dans le code avec une balise entrante...
... et une balise sortante ...



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


Création d'un cahier des charges :

... tout projet de création et de développement d'un site web doit faire l'objet ...
... d'une rédaction d'un cahier des charges précis ...

...  du projet de création de site au cahier des charges  ...


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