Intégration maquette.

chocoler · 11 Décembre 2006

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 · 11 Décembre 2006

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 · 11 Décembre 2006

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 · 11 Décembre 2006

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

chocoler · 11 Décembre 2006

Merci bien !

Maintenant en route pour l'intégration avec bien évidemment des modifications du code photoshop

karnabal · 11 Décembre 2006

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 · 11 Décembre 2006

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 · 11 Décembre 2006

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 :thumbsup:

chocoler · 12 Décembre 2006

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 · 12 Décembre 2006

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 · 12 Décembre 2006

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 · 12 Décembre 2006

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 · 13 Décembre 2006

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 · 20 Décembre 2006

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

Connexion

Intégration maquette.

Sujets conseillés

chocoler

karnabal

chocoler

karnabal

chocoler

karnabal

chocoler

Cygnus

chocoler

drakulls

karnabal

froidure_nicolas

chocoler

chocoler

Veuillez vous connecter pour commenter

Parcourir

Activité