[Résolu] Petite info

[Dylav]

Dans l'exemple de la page d'accueil du site de ta maman, je te conseillerais bien de ne pas "dessiner" les choix du menu sur l'image, mais bien plutôt d'en faire des "images" séparées. Elles seraient de talle fixe (dimensionnées par exemple en 125x35 environ, pour une cible 800x600), sur fond transparent (extension gif ou png) pour ne pas cacher l'image de fond, et positionnées en fixe en largeur (marge en pixels à gauche, par exemple left:30px), et en variable en hauteur (top:35% pour le premier choix) pour ne pas "manger" sur la signature.

 

Pour changer de la problématique du menu de ton site DAF, tu pourrais empiler l'ensemble des choix dans une <div> à positionner ainsi,

#menu {top:35%;left:30px;width:125px;}
img   {border:0;width:125px;height:35px;}

et à décliner par exemple comme ça, où les images formeront une pile verticale,

<div id="menu">
<a href="accueil.html"><img src="accueil.gif" alt="accueil" /></a>
<a href="formation.html"><img src="formation.gif" alt="formation" /></a>
<a href="actualités.html"><img src="actualités.gif" alt="actualités" /></a>
<a href="cours.html"><img src="cours.gif" alt="cours" /></a>
<a href="book.html"><img src="book.gif" alt="book" /></a>
<a href="contacts.html"><img src="contacts.gif" alt="contacts" /></a>
</div>

[Sew-Oszka]

Oula après avoir fumé 2 ou 3 paquets de cigarettes (je plaisante hein) je ne me sens pas de sauter sans parachute en utilisant uniquement le bloc note! Y a t-il une possibilité pour positionner les calques d'une manière relative (en pourcentage) avec dreamweaver, ou alors existe-t-il un logiciel capable de faire ca? En fait il me faut une assistance logicielle sinon je ne vais pas y arriver....

[Dylav]

Tu ne devrais pas reculer, c'est passionnant !

 

Il est vrai que le plus dur est de partir d'une feuille vide (la hantise de l'écrivain !) pour pondre du code qui agence de but en blanc une page un peu complexe. Pour moi, cela relève de la même difficulté que les problèmes de géométrie dans l'espace sur lesquels je séchais lamentablement : une question de vision intérieure ! Alors pourquoi pas l'aide d'un outil ?

 

Ce que tu peux faire pour commencer, c'est t'aider d'un logiciel pour construire ta page visuellement (avec DreamWeaver, pourquoi pas), puis te pencher sur le code généré pour l'épurer, parfaire la séparation contenu/mise en forme (XHTML/CSS), respecter strictement la syntaxe (validateurs W3C)... et, dans ton cas, rendre certains positionnements variables (pourcentages, etc).

 

Ensuite, tu t'apercevras qu'on peut construire une nouvelle page à partir d'une autre dont les caractéristiques architecturales sont similaires. Une démarche qui présente peut-être un risque d'appauvrissement de la créativité, mais qui, par ce principe de clonage, peut conduire à une certaine homogénéité du site en construction.

 

Pour manipuler ton code HTML, il existe des tas d'éditeurs de texte bien plus élaborés que NotePad, qui savent mettre en valeur la syntaxe du langage pour t'aider à la respecter (couleurs différentes pour les balises, les littéraux, etc., plus des tas de fonctionnalités de manipulation). Le mien était un shareware, mais je suis certain qu'il en existe de très bons en freeware.

 

Quant aux langages HTML et CSS eux-mêmes, la syntaxe est en réalité très simple (mais pas forcément la mise en oeuvre). Il existe des tas de tutoriaux très bien faits, à commencer par ceux du Site du Zéro, demande à Ricou33 !

[Sew-Oszka]

Okay je vais faire comme ca! Je vais commencer a mettre en page avec dreamweaver et ensuite j'apporterais des modifs aux codes moi même! Je pense que ca me fera quand même progresser! J'ai contacté un webmaster d'un grand site de l'admisitration (DGAC) via un ami qui bosse la bas, qui m'a conseillé exactement la même chose que toi dylav!

[Dylav]

Les mêmes conseils ? C'est rassurant, pas vrai ?

 

Mais si tu veux savoir comment j'ai commencé, regarde là ! J'espère que ce topic fait un peu plus que raconter ma vie, qui n'est pas vraiment exemplaire dans ce domaine...

[Sew-Oszka]

Voila j'ai commencé un code mais cela ne marche pas du tout!

 

Pour l'image de fond ca va mais le calque ne s'affiche qu'en tout petit en haut!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Annie Lebaillif</title>
<style type="text/css">
<!--
#Layer1 {
position:relative;
left:3.125%;
top:33.3333333333333333333333333333333%;
right:21.875%;
height:87.5%;
width:18.75%;
z-index:1;
}
-->
</style>
</head>
<div id="Layer1"></div>
<img src="Racine du site/Arrière_plan.jpg"
width="100%" />
</body>
</html>

 

Pouvez vousme dire ce qui ne va pas?

[Sew-Oszka]

Je viens d'essayer en mettant position:absolute; Il y a du mieux mais c'est pas ca! Et puis si je met position:absolute ca na marchera pas avec toutes les résolutions non?

[Dylav]

...

<div id="Layer1"></div>

<img src="Racine du site/Arrière_plan.jpg" width="100%" />

</body></html>

Avais-tu l'intention de mettre ton image dans la <div> ou en dehors ? Parce que là, c'est sûr, elle est dehors.

 

Pour la position absolute, tu peux certainement trouver un compromis qui satisfasse la présentation pour toutes les résolutions. C'est pour cela que je te proposais de choisir, pour les éléments de ton menu, une taille qui permettre de tout afficher en 800x600 sans débordement, et de garder le même emplacement et la même taille pour les autres résolutions. Evidemment, le rendu ne sera pas exactement identique, mais très similaire et, à mon avis, satisfaisant même esthétiquement.

[Sew-Oszka]

Avais-tu l'intention de mettre ton image dans la <div> ou en dehors ? Parce que là, c'est sûr, elle est dehors.

 

Je veux qu'elle soit dans la <div> comment fait-on?

[Dylav]

Tu la mets entre les balises <div> et </div>, qui marquent le début et la fin du bloc, tout simplement.

 

<div id="Layer1">
<img src="Racine du site/Arrière_plan.jpg" width="100%" />
</div>