La Création d'un site web.
Cours 7 : le corps.

Exemple de corps.

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

... prenons comme exemple partiel ... le corps de ce site ...
... comme nous le savons, ... ce corps sera entièrement construit entre deux balises ...
... qui sont ... la balise entrante ... <div id="corps"> ...
... 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» ...

… la place à côté du menu se définit dans le style … dans le fichier .css 2.0 extérieur … que nous verrons aussi …

Le corps de la page.

Le corps de ce site : Nos offres.

... nous prenons la page ... Nos offres ...

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

Les éléments du corps :

... le premier élément est le bloc complet du corps ... avec sa couleur de fond ... qui est identique à celle du menu ...

... 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 ... un bloc dans lequel il y a la présentation avec …
… un titre de la page …
… un nouveau titre avec une image représentative de LigneWeb …
… un sous-titre avec deux blocs de recherche …
… deux blocs de textes explicatifs …

L'essentiel de l'offre

… plusieurs blocs contenant les différentes Offres … avec des blocs de taille différentes …
… ce qui permet de les mettrent en évidence … ( toujours la clarté recherchée ) …
… ces différentes offres concernent la construction de sites web ...

… une deuxième série de blocs … précédés par un titre et qui explique les différents cours ...

… une troisième série de blocs pour l'information quand au nouveau langage … html 5 ...

Des remarques

… cela se termine par quelques remarques … avant la fin du corps ...

Retour au menu

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 …
… mais l'image sera placée en premier … par rapport au titre qui se trouve à gauche … voir le cours ...

La présentation ...

... le titre de la page et autres informations … comme ceci : ...

code

Le titre ...

... le titre et l'image ...
… avec un sous-titre … et deux petits blocs de recherche …
… ainsi que deux blocs explicatifs ... comme ceci : ...

code


<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xml:lang="fr">
<head>
</head>

 <body>

 <div id="corps">

 	<div class="space-2" style="text-align: center">

    <h3><em> Les offres de LigneWeb.net ...</em></h3>

       	<p class="space" style="font-size:13px"><a href="liens.html#copyright" title="copyright">© LigneWeb</a><strong><em> ... Optimisé pour Safari ...</em></strong>       <span class="chemin"><strong>... /offres.</strong></span>
       	</p>

    </div><br />

<!--xxxxxxxxxxxxxxxx blocs titre/image xxxxxxxxxxxxxxx-->

    <div class="fournaise">

       	<a href="liens.html#copyright" title="copyright"><img src="ligne9.jpg" alt="ligne" title="Un logo de LignWeb.Net" /></a>

    </div><br /><br />

    <p><h1>Nos offres actuelles :</h1></p>
    <br /><br />

    <h2 style="border-bottom:1px solid black;"><em>Pour la création de sites web ...</em></h2><br /><br />

<!--xxxxxxxxxxxxxxxxx blocs recherche xxxxxxxxxxxxxxxxx-->

<form>
	<div align="center">
	<input type="text" name="q" size="30" style="background-color:#99ffff" />
	<input onClick=cherch(this.form) type="button" name="Submit" value="Rechercher sur ligneweb.net" style="background-color:#33ffff" />
	<input type="reset" name="reset" value="Effacer" style="background-color:#33ffff" />
	</div>
</form><br /><br /><br />

<div align="center">
	<div class="search">
	<iframe style="width:375px; height:70px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.ligneweb.net&b=1&l=1">
	</iframe>
    </div>
</div><br /><br />

<!--xxxxxxxxxxxxxxxxx blocs explicatifs xxxxxxxxxxxxxxxxx-->

	<div class="space-5">
		<em>... nous sommes ... <strong>artisan webmaster</strong> ...</em><br />
		... nous travaillons avec ce que vous nous apportez comme fichiers ( photos, dessins, ... ) ...<br /><br />
		... nous offrons une aide dans la réalisation de votre site web ... <br />
		... nos compétences sont à votre disposition ... <span class="space-x"> gratuitement </span> ... pour le moment ...<br />
	</div><br />

	<div class="space-5">
		... réalisation d'un site web <strong>statique</strong> ... ou <strong>dynamique</strong> ...<br />
		... pour personnes individuelles, association ou jeune PME n'ayant pas beaucoup de moyens ...<br />
		... mais qui veulent garder leur autonomie ...
	</div><br /><br />

  </div>

  </body>
  </html>

Retour au menu

Les offres de création web.

… nous avons ici trois blocs importants représentant les trois propositions pour la création web ...

code


<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xml:lang="fr">
<head>
</head>

 <body>

 <div id="corps">

 <div class="space-9">
		<div class="po">
		<h3>Proposition momentanée :</h3>
		<strong><em>Un site web construit avec vous pour trois dizaines d'Euro (hébergement et nom de domaine) tout en devenant autonome.</strong><br /><br />
		  •   C'est la proposition de … <a href="http://www.ligneweb.net">http://www.ligneweb.net</a></em>
		</div>
		</div><br />

		<div class="space-9">
		<div class="po">
		<h3>➀ Webmastering complet :</h3>
		<strong><em>Réalisation de votre site web  en coopération :</em></strong><br /><br />
		  •   avec sa création,<br />
		  •   son design,<br />
		  •   le nom de domaine,<br />
		  •   l'hébergement,<br />
		  •   le référencement naturel,<br />
		  •   et la gestion du site.<br /><br />
		<p style="font-size: 13px;"><em>Vous apportez les matériaux (fichiers) ... et nous mettons tous cela ensemble pour réaliser votre site web ...</p>
		<p>Vous achetez votre hébergement et votre nom de domaine pour une somme modique.</p>
		<p>Pour plus de renseignements : <a href="contact.html#formu" target="_blank">contactez-moi</a></em></p>
		</div>
		</div><br />

		<div class="space-2">
		<strong><em>Devis gratuit :</em></strong>    •  <a href="mailto:masterligne@ligneweb.net"> Contact. </a>
		</div><br />


		<div class="space-9">
		<div class="po">
		<h3>➁ Création du site web avec cours :</h3>
		<strong><em>La création se fait en recherche d'autonomie :</em></strong><br /><br />
		  •   sa création, avec les cours de ... <a href="cours.html">XHTML 1.0</a>,<br />
		  •   son design, avec les cours de ... <a href="cours_css.html">CSS 2.0</a>,<br />
		  •   avec la recherche du nom de domaine,<br />
		  •   avec la recherche de l'hébergement,<br />
		  •   l'apprentissage du référencement naturel,<br />
		  •   et l'apprentissage de la gestion du site.<br /><br />

		<p style="font-size: 13px;"><em>Tous les exercices débouchent sur la réalisation concrête de votre site web.</p>
		<p>Vous apportez les matériaux (fichiers) ... et nous mettons tous cela ensemble pour réaliser votre site web ...</p>
		<p>Vous achetez votre hébergement et votre nom de domaine pour une somme modique.</p>
		<p>Pour plus de renseignements : <a href="contact.html#formu" target="_blank">contactez-moi</a></em></p>
		</div>
		</div><br />

		<div class="space-2">
		... actuelement, la création d'un site web avec cours XHTML et CSS 2.0 est ... <strong><em>gratuite</em></strong> ... : ... <a href="mailto:masterligne@ligneweb.net"> Contact. </a>
		</div><br /><br />

 </div>

 </body>
 </html>

Retour au menu

Les offres de cours.

... nous avons ici trois petits blocs pour les offres de cours ...

code


<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xml:lang="fr">
<head>
</head>

 <body>

 <div id="corps">

 <h2 style="border-bottom:1px solid black;"><em>Pour les cours ...</em></h2><br /><br />

		<div class="space-5">
		... les cours se font avec ou sans aide ... Pour plus de renseignements : <a href="contact.html#formu" target="_blank">contactez-moi</a><br />
		</div><br /><br />


		<div class="space-9">
		<div class="po">
		... <a href="cours1.html" target="_blank">cours XHTML 1.0</a> ... disponible sur ce site ...
		</div>
		</div><br />


		<div class="space-9">
		<div class="po">
		... <a href="cours_css.html" target="_blank">cours CSS 2.0</a> ... disponible sur ce site ...
		</div>
		</div><br />

		<div class="space-9">
		<div class="po">
		... <a href="programmes.html" target="_blank">programmes JavaScript</a> ... disponible sur ce site ...
		</div>
		</div><br /><br />

		<div class="space-2">
		... nous ... <strong>complétons</strong> ... et paufinons les cours au fur et à mesure, ... c'est du ... <em>fait main</em> ... bien entendu ...
		</div><br /><br />

 </div>

 </body>
 </html>

Retour au menu

Les offres information HTML 5.

... ici nous avons deux blocs différents pour l'information HTML 5 et pour la recherche la concernant ...

code


<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xml:lang="fr">
<head>
</head>

 <body>

 <div id="corps">

 <h2 style="border-bottom:1px solid black;"><em>Pour la recherche ...</em></h2><br /><br />


		<div class="space-5">
		... information sur le ...<a href="info_html_5.html" target="_blank">HTML 5.0</a> ... disponible sur ce site ...<br />
		... information sur le ... <a href="info_css_3.0.html" target="_blank">CSS 3.0</a> ... disponible sur ce site ...<br />
		...Pour plus de renseignements : <a href="contact.html#formu" target="_blank">contactez-moi</a> ...<br />
		</div><br /><br />


		<div class="space-9">
		<div class="po">
		... recherche avec le HTML 5.0 et le CSS 3.0 dans l'espace ... <a href="espacecreation.html#membre" target="_blank">Membre</a> ...
		</div>
		</div><br /><br />

 </div>

 </body>
 </html>

… nous avons l'essentiel du corps de la page web … offres …
… il faut mettre ensemble ces cinq parties dans le même bloc … corps …

… et ce bloc .. corps … doit être mis à la suite des deux blocs précédants … en-tête … et … menu …

Retour au menu

Et le fichier extérieur CSS :

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

code


#corps
{
   	font-size: 14px;
   	width: auto;
   	margin-left: 200px;
   	margin-bottom: 10px;
   	padding: 2px;
   	color: #ffffff;
   	background-color: #006889;
   	border-width: 1px;
   	border-style: inset;
   	border-color: #00bbff;
}

#corps space
{
	align:center;
	height: 30px;
	margin: auto;
}


#corps a img
{
	 border: none; /* Pas de bordure */
}


#corps h1
{
   	color: #000033;
   	text-align: center;
   	font-family:  Papyrus, "Comic Sans MS", "Times New Roman", Arial, Times, serif;
   	font-size: 33px;
}


#corps h2
{
   	font-size: 26px;
   	padding-left: 30px;
   	color: #99ffff;
   	text-align: left;
}

#corps h3
{
	font-size: 22px;
	color: #99ffff;
	text-align: center;
}

#corps img
{
	width: 200px;/*pour la largeur des photos dans le corps*/
	float: left;
	padding: 0px;
	margin: 0px;
}

#corps p
{
	text-indent: 30px;
	margin-left: 5px;
}


#form
{
	width: 598px;
	border: 1px;
    border-style: outtset;
    border-color: #00ffff;
	margin: auto;
}


.chemin
{
	color:#000055;
	font-size: 16px;
	text-align: center;
}

.noir
{
	color: #000033;
	font-size: 11px;
}

.petit
{
	color: #000033;
	font-size: 11px;
	text-align: center;
}

.petit a:hover
{
	background-color: #33bbff;
   	color: #000033;
}

.petitj
{
	color: #000033;
	font-size: 15px;
	text-align: center;
}

.code
{
	color: #000033;
	background-color: #66ffff;
	border: 1px;
    border-style: outset;
    border-color: #336699;
    padding-left: 10px;
}


.image1
{
	margin: 5px;
	float: right;
	border: 1px;
	border-style: inset;
	border-color: #00ccee;
}

.image2
{
	margin: 5px;
	margin-right: 15px;
	float: left;
	border: 1px;
	border-style: inset;
	border-color: #00ccee;
}

.search
{
	width: 375px;
	height: 70px;
	margin: 5px;
	background-color: #11eeff;
	border-width: 1px;
    border-style: inset;
    border-color: #005577;
    color: #000033;
}


/*xxxxx valeurs pour tous les tableau xxx*/

.space
{
	border-width: 0px;
    border-style: outset;
    border-color: #33ffff;
	margin: auto;
	margin-top: 40px;
	padding: auto;
	font-size: 14px;
	text-align: center;
}

.space  img
{
	width: 170px;
	border-width: 1px;
	border-style: outset;
	border-color: #00ffff;
	float: center;
}

.space td
{
	width: auto;
	padding-left: 5px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	margin-top: 20px;
	text-align: center;
}


.space form
{
	border-width: 1px;
	border-style: outset;
	border-color: #00ffff;
}

.space-i
{
	border-width: 1px;
    border-style: inset;
    border-color: #33ffff;
    background-color: #005778;
	margin: 5px;
	margin-top: 40px;
	padding: auto;
	font-size: 14px;
	text-align: center;
}

.fournaise
{
	margin: 5px;
	float: right;
	border-width: 0px;
    border-style: inset;
    border-color: #00ccee;
    color: #000033;
	font-size: 14px;
   	background-color: #3399bb;
}


.fournaise a:hover
{
	font-weight: 600;
	background-color: #33bbff;
   	color: #000033;
}


.space-2
{
	border-width: 1px;
    border-style: inset;
    border-color: #00ccff;
	margin: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 2px;
	background-color: #2389ab;
	font-size: 14px;
	color: #000033;
   	text-align: center;
}

.space-2 a
{
	color: #ddffff;
	font-weight: 600;
	text-decoration: none;
}

.space-2 a:hover
{
	background-color: #33bbff;
   	color: #000033;
}

.space-5
{
	width: auto;
	margin: 5px;
	padding: 5px;
	color: #000022;
	text-align: center;
	background-color: #3399bb;
	border-width: 0px;
    border-style: inset;
    border-color: #33ffff;
    font-size: 14px;
    position: relative;
}


.space-5 a
{
	color: #ddffff;
	font-weight: 600;
	text-decoration: none;
}

.space-5 a:hover
{
	background-color: #33bbff;
   	color: #000033;
}

/*xxxxxxxxxxxx space-9 xxxxxxxxxxxxxxx*/

.space-9
{
	background-color: #3399bb;
	width: 500px;
	border-width: 0px;
    border-style: inset;
    border-color: #000033;
    margin: auto;
    margin-bottom: 5px;
    padding: 20px;
    color: #000022;
	font-size: 14px;
}

.space-9 img
{
	width: 90px;
	padding: 5px;
	border-width: 0px;
	border-style: outset;
	border-color: #0065ff;
}


/*xxxxxxxxxxxxx space po xxxxxxxxxxxxxxxx*/

.po
{
	font-family: Geneva, Monaco, "Times New Roman", serif;
	font-size: 12px;
	color: #000022;
	margin:5px;
	padding: 10px;
	border-width: 0px;
    border-style: inset;
    border-color: #33ffff;
    background-color: #3399bb;
    text-align: left;
}

… il faut enfin mettre toutes les parties ensemble pour obtenir la page … corps ...

... design 3 D ...

⬅ Page précédente | ➥ Suite : page suivante | Retour au menu

Présentation :

Des logiciels en
téléchargement :

La Création d'un site web.
Cours 7 : le corps.

Exemple de corps.

Le corps de la page.

Le corps de ce site : Nos offres.

Les éléments du corps :

L'essentiel de l'offre

Des remarques

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

La présentation ...

Le titre ...

Les offres de création web.

Les offres de cours.

Les offres information HTML 5.

Et le fichier extérieur CSS :

... design 3 D ...

Présentation :

Des logiciels en téléchargement :

La Création d'un site web. Cours 7 : le corps.

Exemple de corps.

Le corps de la page.

Le corps de ce site : Nos offres.

Les éléments du corps :

L'essentiel de l'offre

Des remarques

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

La présentation ...

Le titre ...

Les offres de création web.

Les offres de cours.

Les offres information HTML 5.

Et le fichier extérieur CSS :

... design 3 D ...

Des logiciels en
téléchargement :

La Création d'un site web.
Cours 7 : le corps.