5160 sujets

Le Bar du forum

[Résolu]CSS 2 Pratique du design web

Bonjour à toutes et à tous,

je viens d'acquérir le livre de M. Raphaël Goetter, "CSS 2 Pratique du design web", 3 ième éditions, aux éditions Eyrolles, publié en mars 2011 (couverture orange au format de poche).

Voila pour la précision du livre car je sais qu'il existe plusieurs éditions.

Donc, je voulais faire les exercices, entre autre ceux de la quatrième partie, soit "Mise en œuvre dans un projet professionnel", et à ma grande surprise, le lien indiqué à la page 212 (Présentation du projet professionnel) ne correspond pas du tout à ce que le livre indique !

Il est dit : "Il est également repris à l'adresse http://www.alsacreations.com/livre, où il joue le rôle de vitrine du présent manuel".

Donc ma question est la suivante : "comment puis-je récupérer le HTML, le CSS et surtout les images associés à ce projet ?"

Merci par avance de vos réponses !

@+
Modifié par Artemus24 (12 Jun 2011 - 13:37)
Administrateur
Bonjour,

Suite à une faille dans la précédente version du site dédié au livre, l'ensemble des informations de la base de données avaient été corrompues et supprimées.
N'ayant pas, à l'époque (la version originale du livre date de 2005), conservé les sources de ces infos, elles sont actuellement complètement perdues Smiley decu
Hello,

Si cela peut servir...

html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Alsacréations, le livre</title>
<meta http-equiv="Content-Type" 
      content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" type="text/css" href="styles.css" 
      media="screen" />
</head>
<body>
<!-- En-tête -->
<div id="header">
<img src="livre.png" alt="livre illustratif" />
<h1>Alsacréations, le livre</h1>
<p>Concevoir des sites web avec HTML et CSS</p>
</div> 
<!-- Menu accès rapide -->
<ul id="menuhaut">
<li><a href="index.html" accesskey="1">Retour à l'accueil</a> - </li>
<li><a href="contact.html">Contact</a> - </li>
<li><a href="securise.html">Espace privé</a></li>
</ul>
<div id="menu">
<!-- Menu de navigation général -->
<ul>
<li><a href="index.html" accesskey="1">Accueil</a></li>
<li><a href="somm.php3" title="Voir le plan détaillé du livre">
      Sommaire</a></li>
<li><a href="extraits.php3" title="Quelques parties de l'ouvrage">
      Lire des extraits</a></li>
<li><a href="apresse.php3" 
         title="Médias et sites qui mentionnent ce livre">
      Presse et retours</a></li>
<li><a href="errata.php3" title="Erreurs et corrections apportées">
      Errata</a></li>
<li><a href="exemples.php3" title="Codes CSS d'exemple du livre">
      Exemples</a></li>
<li><a href="bannieres.php3" 
         title="Soutenez et faites connaître ce livre">
      Soutien</a></li>
</ul> 
<!-- Formulaire de recherche -->
<p>Recherche générale:</p>
<form action="recherche.php3" method="get">
<div>
<input type="text" name="recherche" class="champ" 
       value="mot-clé" />
<input type="submit" value=" ok " />
</div>
</form>
</div>
<!-- Contenu général -->
<div id="global">
<h1>Concevoir des sites web modernes avec HTML et CSS</h1>
<h2>Présentation du livre</h2>
<!-- Encart -->
<div id="encart">
<h3>Récemment:</h3>
<div id="bloccadre">
<ul>
<li>Date: <a href="lien1.html">événement 1</a></li>
<li>Date: <a href="lien2.html">événement 2</a></li>
<li>Date: <a href="lien3.html">événement 3</a></li>
<li>Date: <a href="lien4.html">événement 4</a></li>
<li>Date: <a href="lien5.html">événement 5</a></li>
</ul>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis 
eros dolor, venenatis vitae, pretium ut, suscipit nec, lectus. Mauris 
urna. Etiam auctor lacus sit amet mauris. Nullam bibendum. Mauris vitae 
leo. Nullam arcu. In nec odio nec tellus blandit tristique. Mauris vel 
l ibero. Class aptent taciti sociosqu ad litora torquent per conubia 
nostra, per inceptos hymenaeos. Proin congue pharetra lectus. 
Suspendisse interdum eleifend nulla. Vestibulum lacinia mi nec ipsum?
</p>
</div>
</body>
</html>


css:

/* Mise en page globale */
body { 
margin: 0;
padding: 0;
background: white;
color: black;
font-size: 80%;
font-family: "Bitstream Vera Sans", Verdana, Arial, Helvetica, serif;
}
/* En-tête */ 
#header {
height: 100px;
background: #97C05F url(banniere.jpg) top left no-repeat;
}
#header img {
float: right; 
margin: 5px 5px 0 0;
}
#header h1 {
text-indent: -5000px; 
margin:0;
line-height: 0;
}
#header p { 
margin: 45px 0 0 200px;
font-weight: bold;
color: white;
font-size: 1.1em;
}
/* Menu horizontal */
#menuhaut { 
margin: 0;
padding: 0.1em 0.5em 0.1em 0;
list-style-type: none;
background-color: black;
color: white;
text-align: right;
}
#menuhaut li {
display: inline;
} 
#menuhaut a {
color: white;
text-decoration: none;
}
#menuhaut a:hover {
text-decoration: underline;
}
/* Menu vertical */
#menu {
float: left;
width: 15em;
padding: 0.5em 0 8em 0;
margin: 0px;
background: #336600 url(fondmenu.jpg) bottom left no-repeat;
}
#menu ul {
list-style-type: none;
padding: 0;
margin: 0 1em 0 1em;
} 
#menu li a {
display: block;
text-decoration: none;
height: 1.4em;
line-height: 1.4em;
color: white;
font-weight: bold;
font-size: 120%;
text-indent: 1em;
}
#menu li a:hover {
background: #cccc33;
color: #336600;
}
/* Formulaire */
#menu p { 
margin: 1.5em 0 0 1em;
font-weight: bold;
color: white;
}
#menu form {
margin:0 0 0 1em;
}
#menu form .champ {
width: 8em;
}
/* Contenu global */
#global {
margin-left: 15.5em;
}
#global h1 {
font-weight: bold;
font-size: 150%;
padding-bottom: 0.2em;
border-bottom: 3px solid #ffff99;
font-variant: small-caps;
text-indent: 5px;
color: #225500;
}
#global h2 {
margin-top: 1em;
margin-bottom: 1em;
font-size: 110%;
font-weight: bold;
color: #228822;
}
/* Encart */
#encart {
float: right; 
width: 250px;
margin: 0 5px 5px 5px;
padding-top: 30px;
background: url(posthaut.png) left top no-repeat;
}
#encart h3 {
font-size: 130%;
margin: 0 0 0 40px;
}
#bloccadre {
background: url(postbas.png) left bottom no-repeat;
padding: 0 0 25px 40px;
}
#bloccadre ul {
margin: 1em 0 0 0;
padding:0;
}
#bloccadre li {
margin: 0;
list-style-image: url(postpuce.png);
}
#bloccadre li a {
color: black;
text-decoration: none;
}
#bloccadre li a:hover {
text-decoration: underline;
}


upload/12813-banniere.jpg
upload/12813-fondmenu.jpg
upload/12813-livre.png
upload/12813-posthaut.png
upload/12813-postbas.png
upload/12813-postpuce.png

Autre chose ? Smiley cligne
Ce n'était pas une faille de sécurité, mais un gouffre, niark niark, niark Smiley diablo

Non, je suis ton plus grand fan, je collectionne tout ce qui te concerne depuis 1372 Smiley lol

Accessoirement, j'ai fait mumuse avec ces fichiers il y a quelques années, ils trainent encore sur de vieux DD de backup, mais je me suis aidé de http://web.archive.org et j'avais un peu de temps Smiley cligne
Bonjour à toutes et à tous,

Mille merci pour les images (c'est ce qui me manquait le plus) ainsi que le HTML et le CSS (cela m'évitera de le retaper à la main).

Enfin, je vais pouvoir terminer l'étude de ton livre, cher Raphaël !

Il est très pédagogique ! Dommage que ce soit qu'un livre pour débutant !

Encore mille merci !

@+
Salut,
Artemus24 a écrit :
Il est très pédagogique ! Dommage que ce soit qu'un livre pour débutant !

Dès que tu auras acquis les bases, tu pourras t'amuser avec CSS avancées. Smiley cligne
Sujet clos
Aller à