Version complète: sur le forum Webmaster Hub : Intégration maquette.
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
chocoler
Bonjour,
Je vais bientôt intégrer une nouvelle maquette pour un webzine.
Je vais faire le tout en CSS2 XHTML, et avant de me lancer j'aurai voulu savoir si un logiciel pouvait me générer le code CSS2 + XHTML (afin de m'éviter de me prendre la tete et de passer + de temps sur le graphisme que sur le code)

Jusqu'à présent j'utilisais Photoshop CS avec ImageReady avec l'outil tranche, mais il génere uniquement des TABLE.

Voici la maquette :
Maquette Site

Merci pour votre aide
A + smile.gif
karnabal
CITATION
Photoshop CS avec ImageReady avec l'outil tranche, mais il génere uniquement des TABLE


Faux. Tu peux regarder de plus près les options de découpe et tu trouveras XHTML + CSS. Mais pour avoir un code fonctionnel il te faudra forcément mettre les mains dedans. Bon courage à toi.
chocoler
CITATION(karnabal @ lundi 11 décembre 2006, 12h25) *
Faux. Tu peux regarder de plus près les options de découpe et tu trouveras XHTML + CSS. Mais pour avoir un code fonctionnel il te faudra forcément mettre les mains dedans. Bon courage à toi.



Je ne trouve pas l'option ... (je rappel que j'ai Photoshop CS)
Pourrais tu si possible m'indiquer ou se trouve l'option grasse a une capture d'écran ...
smile.gif
karnabal
Paramètres de sorties -> Tranches -> Générer la CSS
chocoler
Merci bien !
Maintenant en route pour l'intégration smile.gif avec bien évidemment des modifications du code photoshop
karnabal
Le code est celui de Image Ready ! La confusion est fréquente, ce qui conduit à entendre parfois que Photoshop peut produire du code HTML, ce qui est faux, donc attention, seul Image Ready comprend une fonction permettant de générer du code.

Je profite de cette intervention pour te conseiller de virer tous les position:absolute des styles et de penser à externaliser ces derniers une fois que tu seras passé sous ton éditeur HTML. wink.gif
chocoler
CITATION(karnabal @ lundi 11 décembre 2006, 16h23) *
Je profite de cette intervention pour te conseiller de virer tous les position:absolute des styles et de penser à externaliser ces derniers une fois que tu seras passé sous ton éditeur HTML. wink.gif


Ok merci.
C'est ce que j'allais faire.
En tout cas c'est super bien de pouvoir créer le gabarit aussi rapidement. C'est un gain de temps non négligeable. Je vais pouvoir le passer sur la gestion des templates.
Si tu as d'autres conseils qui te passeraient par la tete je suis preneur.
Je te remercie.

Nicolas.
Cygnus
CITATION(karnabal @ lundi 11 décembre 2006, 12h25) *
Faux. Tu peux regarder de plus près les options de découpe et tu trouveras XHTML + CSS.


Whaou !
Ca existe ça ?!?
Et moi pensais qu'IR n'était bon qu'à pondre des images !
Si j'avais su, j'aurais peut-être pas commencé à tout construire à la main ... tongue.gif

Merci pour l'info a_thumbsup_20.gif
chocoler
J'ai donc utilisé ImageReady pour faire la découpe en CSS
Voila le résultat:
Maquette CSS avec Image Ready

Maintenant le plus dur c'est de transformer tout ca en relatif tongue.gif
Et j'ai commencé ici :
DébutMaquette en Relatif


Suis je sur la bonne piste ?
drakulls
CITATION
Je profite de cette intervention pour te conseiller de virer tous les position:absolute des styles et de penser à externaliser ces derniers une fois que tu seras passé sous ton éditeur HTML


pourquoi cela ?, pourrais tu m'en dire plus ?
karnabal
Quel positionnement choisir ?

Externaliser les styles te permet de gérer tes styles à un endroit unique plutôt que chaque fois pour chaque page à l'intérieur de celles-ci.
froidure_nicolas
CITATION(karnabal @ mardi 12 décembre 2006, 10h47) *
Externaliser les styles te permet de gérer tes styles à un endroit unique plutôt que chaque fois pour chaque page à l'intérieur de celles-ci.


Et surtout, à ne les télécharger qu'une seule fois
chocoler
A l'aide ! smile.gif
Apres avoir positionner mes Div en float j'arrive sur le fameux problème de margin
Sous FF c'est a peut pret bien positionné, et sur IE 6 c'est pas terrible (le bloc droit est en bas)
auriez vous une astuce pour contourner ce probleme venant d'IE ?

CSS :
CODE

/*----------------------*/
/* STYLE */
/*----------------------*/
html, body {
background-color:#EAEAEA;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
height:800px;
width: 100%;
}
h2 {
background-image: url(html/images/cartouche.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
/*----------------------*/
/* HAUT */
/*----------------------*/
#conteneur {
background-color:#FFFFFF;
width:1000px;
min-height: 100%;
}
#banniere {
width:1000px;
height:75px;
background-color: #FFFFFF;
background-image: url(images/banniere.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}

#nav {
width:1000px;
height:25px;
}
/*----------------------*/
/* GAUCHE */
/*----------------------*/
#gauche {
float:left;
width:164px;
margin-left: 19px;

}
#semaine {
float:left;
width:164px;
height:294px;
margin-right: 14px;
margin-bottom: 8px;
}
#sortie {
width:164px;
height:214px;
}
/*----------------------*/
/* CENTRE */
/*----------------------*/
#centre {
float:left;
width:607px;

}
#mise-en-avant {
width:607px;
height:211px;
margin-right: 10px;
}
#news {
width:542px;
height:187px;
margin-left: 65px;
}
#concerts {
width:542px;
height:145px;
margin-left: 65px;
}
/*----------------------*/
/* DROITE */
/*----------------------*/
#droite {
display:inline;
margin-left:25px;
width:170px;
float:left;

}
#chroniques {
width:150px;
height:440px;
}
#tournees {
width:170px;
height:151px;
}


HTML :
CODE
<body>

<div id="conteneur">
<!-- ########### -->
<!-- ## HAUT## -->
<div id="banniere"></div>
<div id="nav">
<img src="images/nav.gif" width="1000" height="25" alt="">
</div>

<!-- ########### -->
<!-- ## GAUCHE ## -->
<div id="gauche">
<div id="semaine">
<img src="images/semaine.gif" width="164" height="294" alt="">
</div>
<div id="sortie">
<img src="images/sortie.gif" width="165" height="214" alt="">
</div>
</div>
<!-- ########### -->
<!-- ## CENTRE ## -->
<div id="centre">
<div id="mise-en-avant">
<img src="images/mise-en-avant.gif" width="607" height="211" alt="">
</div>
<div id="news">
<img src="images/news.gif" width="542" height="187" alt="">
</div>
<div id="concerts">
<img src="images/concerts.gif" width="542" height="145" alt="">
</div>
</div>
<!-- ########### -->
<!-- ## DROITE ## -->
<div id="droite">
<div id="chroniques">
<img src="images/chroniques.gif" width="170" height="440" alt="">
</div>
<div id="tournees">
<img src="images/tournees.gif" width="170" height="151" alt="">
</div>
</div>

</div>
</body>


La page se trouve ici :
Maquette franchuta
chocoler
J'ai trouvé ma solution ici :

http://css.alsacreations.com/modeles/modele15.htm
et
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.