Je viens de voir les templates de andreasviklund sur son site :
http://andreasviklund.com et je me demande comment il fait pour les adaptées en xhtml/css ? J’ai testé certains des templates gratuits, certains sont plus ou moins propres.
Je pense qu’il les réalises sous photoshop, car dans les templates payantes il donne le psd et le html. Mais pour ce qui est du du xhtml, pesonnelement j’ai essayé d’exporter sous photoshop, ca donne un fichier xhtml mais plutôt en forme de tableau.
Y’a t’il moyen d’exporter une maquette photoshop en css? Faut le faire manuellement ? Y’a un logiciel qui permet d’exporter un graphisme? pas un logiciel de mise en page css mais de graphisme? Ou un logiciel qui permette de deplacer facilement les calques ou l’on veut à la souris. Ca restrend enormément les possibilitées graphiques?
Je devrai aussi poser cette question dans un forum sur css, mais ma question était en rapport avec les templates de andreasviklund.
La structure dans les templates gratuites que j’ai ouvertes n’est jamais identiques. dans ceratines il n’y a que des balises div en gros et d’autres comportent des balises html.
sinon les fichier exportés de photoshop ressemble à ca, avec le fichier css :
C’est possible à exploiter ? J’ai essyer de faire un test.
- J’ai commencé par mettre la feuille de style à part, changer le chemin des images apres ca s’affiche.
- Apres le principe c’est quoi, mettre le lien de toutes les images en background dans la feuille de style? Par ce que comme ça le texte n’apparait pas, si j’essaye d’afficher le "Content". Ou il faut creer des calques div par dessus?.
C’est peut être pas la meilleure solution d’exporter toute la maquette photoshop ? Peut être qu’il faut exporter les images 1 a 1 et les placer, mais je epnse pas que ca existe un logiciel css, pour placer des images sans vraiment toucher au css?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="assets/templates/test/style/test.css" />
<title>1.main</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
<!--
#Tableau_01 {
position:absolute;
left:0px;
top:0px;
width:766px;
height:796px;
}
#id1-main-01_ {
position:absolute;
left:0px;
top:0px;
width:16px;
height:424px;
}
...........etc
</style>
<body style="background-color:#FFFFFF;">
<div id="Tableau_01">
<div id="id1-main-01_">
<img id="id1_main_01" src="assets/templates/test/images/1.main_01.gif" width="16" height="424" alt="" />
biusd dsfdsfgdl kn lsgd ldgs
</div>
<div id="id1-main-02_">
<img id="id1_main_02" src="assets/templates/test/images/1.main_02.gif" width="510" height="62" alt="" />
</div>
<div id="id1-main-03_">
<img id="id1_main_03" src="assets/templates/test/images/1.main_03.gif" width="223" height="167" alt="" />
</div>
<div id="id1-main-04_">
<img id="id1_main_04" src="assets/templates/test/images/1.main_04.gif" width="17" height="796" alt="" />
</div>
<div id="id1-main-05_">
<img id="id1_main_05" src="assets/templates/test/images/1.main_05.gif" width="71" height="296" alt="" />
</div>
<div id="logo_">
<img id="logo" src="assets/templates/test/images/logo.gif" width="247" height="56" alt="" />
</div>
<div id="id1-main-07_">
<img id="id1_main_07" src="assets/templates/test/images/1.main_07.gif" width="192" height="296" alt="" />
</div>
..................
JE vous remercie pour ce post assez long.
). Tout dépend des éléments graphiques que l’on conçoit pour commencer. Après, c’est un boulot de découpe graphique et d’intégration XHTML/CSS et c’est la base du webdesign moderne.