photoshop > *.htm > div ?

photoshop > *.htm > div ? - HTML/CSS - Programmation

Marsh Posté le 26-05-2005 à 11:29:02    

salut à tous !  :)  
 
Je suis confronté à un petit problème :
 
Je viens de creer la maquette d'un site web. (youpi).
Evidemment, je veux en faire un vrai site web.
Ainsi, ( apres avoir creer les slices ), j'ai utilisé l'option : " save as for web "....
Apres avoir fait quelques reglages sous Dreamweaver, le site est nickel.
 
Alors, vous allez me dire, " on en a rien a foutre !! c'est quoi ton soucis !!  :pt1cable:  "
Ba voila !
 
J'ai supprimé de la maquette tout ce qui est ecriture, texte .... et vi ! je veux que le texte soit " selectionnable ", et puis, par la meme occasion, la page pèsera moins lourd, et je pourrai modifier celui-ci plus facilement ....
 
Ainsi ma question :
Sous mon editeur, j'ai un beau site en slice sans texte.
Comment puis je faire pour rajouter le texte ?
( en dehors de la page centrale, car j'utiliserai un iframe ).
en utilisant les " div " ( layer ) ?
 
a titre d'exemple,
si je vous montre ce site : http://www.stratovarius.com
comment ont ils fait pour rajouter le menu de gauche ?
 
Merci a tous !!  ;)  
Je vous aime !!!!!!  :D  
 

Reply

Marsh Posté le 26-05-2005 à 11:29:02   

Reply

Marsh Posté le 26-05-2005 à 11:31:54    

Laisse tomber l'export web [:spamafote] Ca créer un machin avec que des images et tout... Tu t'y connais un peu en HTML/CSS ?

Reply

Marsh Posté le 26-05-2005 à 11:34:10    

Mr_Benoit a écrit :

Sous mon editeur, j'ai un beau site en slice sans texte.
Comment puis je faire pour rajouter le texte ?


Faut tout refaire [:dawa]
 
T'as pas une page web là, t'as une image découpée, ça s'appelle pas une page web [:dawa]

Citation :

en dehors de la page centrale, car j'utiliserai un iframe


Intérêt d'utiliser une iframe? [:dawa]

Citation :

si je vous montre ce site : http://www.stratovarius.com
comment ont ils fait pour rajouter le menu de gauche ?


Du code de merde [:dawa]
(6 niveaux de table à vue d'oeuil [:totoz] )
 
Tiens, voici un beau site
Et un site de démonstration
 
Pour apprendre à créer un site web, il y a un lien dans ma signature, ça mène à mes favoris, ballade toi, lis, informe toi, apprend [:dawa]


Message édité par masklinn le 26-05-2005 à 11:34:59

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-05-2005 à 11:34:45    

merci a toi FlorentG ...
Ba j'opte vraiment pour cette solution ....
En plus je souhaiterais resoudre cette enigme ....
Mais merci Florent.
 
Je m'y connais un peu en html et un peu en css....

Reply

Marsh Posté le 26-05-2005 à 11:36:27    

Ok, donc va voir les quelques liens de Masklinn. Ce qu'il faut, c'est que tu fasses un découpage intelligent de l'image, permettant la réutilisation maximale d'images. Après tu fais ta structure HTML, et tu mets tes images en fond des éléments HTML via un CSS...

Reply

Marsh Posté le 26-05-2005 à 11:36:48    

@ Masklinn
 
Je voulais dire : au centre j'utiliserai un iframe, qui m'evitera un chargement totale de la page a chaque fois ...
 
@ Masklinn :
 
Mais ta solution est donc qu'il faille tout refaire en html css ?

Reply

Marsh Posté le 26-05-2005 à 11:38:33    

Mr_Benoit a écrit :

@ Masklinn
 
Je voulais dire : au centre j'utiliserai un iframe, qui m'evitera un chargement totale de la page a chaque fois ...


Sur le web, une page web = un document HTML. Laisse tomber l'idée du rechargement, au final t'es perdant ;)

Mr_Benoit a écrit :


@ Masklinn :
 
Mais ta solution est donc qu'il faille tout refaire en html css ?


Oui, va falloir tout refaire...

Reply

Marsh Posté le 26-05-2005 à 11:38:38    

merci pour le site de demonstration ;-)

Reply

Marsh Posté le 26-05-2005 à 11:42:06    

Mr_Benoit a écrit :

@ Masklinn
 
Je voulais dire : au centre j'utiliserai un iframe, qui m'evitera un chargement totale de la page a chaque fois ...


C'est pas un problème, les images et les CSS sont dans le cache du navigateur, le poids du HTML "rechargé" est marginal (d'autant plus que dans une iframe on doit mettre une page complète, donc tu gagnes tout juste le menu et le header), et rien que le gain du passage tables > sémantique + CSS sera largement supérieur à ce poids "perdu"

Citation :

Mais ta solution est donc qu'il faille tout refaire en html css ?


Ouaip [:dawa]
 
Et architecturer le design autour du contenu (donc coder la page d'abord puis appliquer un design) plutôt que l'inverse (créer le design et tenter tant bien que mal de faire tenir le contenu à l'intérieur)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 26-05-2005 à 11:42:14    

Bon voila ma page web, fraichement sortie de photoshop ... Alors attention, ce n'est qu'une maquette pour m'entrainer !! les photos ne sont pas de moi, les images egalement et tout le reste ....
 
[url] http://www.lecourtier.net [/url]
 
Possible en html ?
( un seul oui me suffira ;-) )

Reply

Marsh Posté le 26-05-2005 à 11:42:14   

Reply

Marsh Posté le 26-05-2005 à 11:45:37    

bah oui alors

Reply

Marsh Posté le 26-05-2005 à 11:47:21    

oui

Reply

Marsh Posté le 26-05-2005 à 11:47:47    

ba bon merci pour toute cette aide ( vous êtes rapide les gars !! je suis bouche bée ...) :)
 
J'ai compris ce qu'il me reste à faire....
 
Il me reste une derniere question :
 
Pourquoi ne pas prendre la page comme vous la voyez et rajouter des balises div (layer) ?
 
Pour une question de poids ?
de compatibilité ?
d'esthetisme ?
de code bien propre ?

Reply

Marsh Posté le 26-05-2005 à 11:49:57    

Mr_Benoit a écrit :

Bon voila ma page web, fraichement sortie de photoshop ... Alors attention, ce n'est qu'une maquette pour m'entrainer !! les photos ne sont pas de moi, les images egalement et tout le reste ....
 
[url] http://www.lecourtier.net [/url]
 
Possible en html ?
( un seul oui me suffira ;-) )


Ouais [:spamafote]  
 
Ca va être du boulot (dans la mesure où il te faut désapprendre ce que tu sais et réapprendre HTML+CSS *), ça sera pas fait en deux clics, mais c'est parfaitement faisable :)  
 
Exemples de sites faits en HTML+CSS, sans tables:
http://www.zeldman.com/
http://www.adactio.com/journal/
http://www.capgemini.com/
http://www.cssbeauty.com/ (site de liens vers d'autres sites tableless)
 
Pour apprendre à créer des pages en HTML+CSS (liens tirés de ma signature):
http://openweb.eu.org
http://mammouthland.free.fr/cours/css/index.php
http://www.alsacreations.com/articles/

Mr_Benoit a écrit :

Pourquoi ne pas prendre la page comme vous la voyez et rajouter des balises div (layer) ?
 
Pour une question de poids ?
de compatibilité ?
d'esthetisme ?
de code bien propre ?


1- Maintenabilité, quand 3 ans plus tard on doit se remettre dans le code, avec un site en table ...  :sweat:  
2- Evolutivité (dans un site bien codé, le design et le contenu sont indépendants, donc si tu veux simplement changer la tête du site tu peux le faire radicalement sans toucher le HTML. Voir CSSZenGarden: chaque design utilise le même fichier .html, seul le fichier .css change)
3- Compatibilité, ça permet à tous les navigateurs d'avoir au moins du texte lisible et clair, et ensuite ceux qui sont capables d'interpréter les CSS ont la version "jolie". Il faut  bien garder à l'esprit que l'important dans un site web c'est le contenu, c'est l'information que tu veux transmettre. La forme, la manière dont tu veux transmettre ton information (donc le style) est, bien qu'essentielle, secondaire. Le premier but est que l'utilisateur/visiteur ait accès à l'information, ensuite seulement on essaie de lui passer le style. Forcer l'utilisateur à avoir le style avec l'information (donc mixer les deux) est dangereux en terme d'evolutivité (tu ne sais pas comment se comporteront les navigateurs futurs) et d'accessibilité (tout le monde n'a pas un écran en 1024*768 16millions de couleurs avec un navigateur "top notch", le web est un fantastique espace de liberté pour les handicapés, y compris des malvoyants ou aveugles utilisant des navigateurs audios ou braille et pour qui les sites en tables c'est de la soupe inutilisable).
4- Flexibilité, on peut retoucher des choses plus ou moins petites sans avoir à tout refaire
5- Performances, un site utilisant efficacement et correctement les CSS va ne recharger que très peu de chose à la vois (uniquement le contenu, qui doit de toute façon être chargé) parce que le style/la présentation est déjà en cache (donc un bon navigateur ne va pas redemander les fichiers CSS). Donc réduction de la consommation de bande passante (un fichier HTML bien fait est entre 10 et 60% plus petit que son équivalent en tables mixant contenu et présentation)


Message édité par masklinn le 26-05-2005 à 11:56:24

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed