Intégration maquette.

[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 +

[karnabal]

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]

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

[karnabal]

Paramètres de sorties -> Tranches -> Générer la CSS

[chocoler]

Merci bien !

Maintenant en route pour l'intégration 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.

[chocoler]

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.

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]

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

Merci pour l'info

[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

Et j'ai commencé ici :

DébutMaquette en Relatif

Suis je sur la bonne piste ?

[drakulls]

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]

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

Modifié 12 Décembre 2006 par froidure_nicolas

[chocoler]

A l'aide !

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 :

/*----------------------*/
/*		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 :

<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