Menu

Intégrer un webdesign avec du CSS [Résolu/Fermé]

- - Dernière réponse :  king - 27 févr. 2010 à 12:36
Bonjour,
Voilà je viens de suivre un tutoriel que voici : http://www.dailymotion.com/video/xblqj3_tutoriel-vid%C3%A9o-webdesign_lifestyle
et j'ai créer un webdesign en suivant le tutoriel cependant je ne sais pas comment l'intégrer dans mon site avec le CSS ou n'importe quoi d'autre SVp dites moi comment faire ?

PS : j'ai aussi un petit problème c'est que je voudrais créer également un formulaire (celui de l'inscription /connexion/mot de passe /etc ) alors svp si quelqu'un peut m'aider ca searait vraiment sympa et merci encore !
Afficher la suite 

9 réponses

Meilleure réponse
1
Merci
Ôo

L'image que tu montres, tu l'as faite dans Photoshop?
Si oui, il faut la découper (faire des tranches), donc pour se simplifier la vie, on désactivera les calques inutils pour ne garder que le fond.
Dans ce fond, on découpe le header, le body, le footer.

Sur base du CSS, on créera un div "conteneur" dans lequel on met les autres div (header, body, footer)

En suite, suffit d'appeler respectivement tes images dans le code CSS (si en background) ou dans le doc si au premier plan.

Après on retourne dans toshop pour découper le menu (donc on désactive le calque du fond et on active le calque menu, puis on découpe les boutons, on peut aussi profiter d'une transparence du fond, un ajouter un effet si nécessaire pour avoir un menu réactif)
Ensuite, on replace le dit menu (en dessous ou sur le header, selon la découpe précédemment effectuée) etc

Bref, tu vois le truc, simple routine :-)

Après faut tester sous IE, Firefox, Opera voir si ce petit monde à la même vision de la bête (si ce n'est point le cas, on corrige le css pour combler les 3 familles) :-)

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 43589 internautes nous ont dit merci ce mois-ci

0
Merci
J'ai vraiment besoin d'aide !
0
Merci
Pas regardé la vidéo parce que les vidéos me gonflent :-)
Une fois l'image crée, tu dois la découper (faire des tranches chez toshop), puis il faut créer l'ossature CSS et habiller avec tes images :-)

Note que photoshop (ou mieux ImageReady) sait faire le code tout seul. Il sera néanmoins préférable de mettre le css sur un fichier externe.

Pour le formulaire, tu devrais trouver ça sur les gros sites php (soit explications, soit prèt à l'emploi) ou si tu es débutant, sur le site du zero (nettement plus facile à la compréhension).
0
Merci
Note que photoshop (ou mieux ImageReady) sait faire le code tout seul. Il sera néanmoins préférable de mettre le css sur un fichier externe.
Pourais-tu mieux m'expliquer ca ainsi que comment avec le CSS (la démarche) et merci pour les formulaire
0
Merci
Si toshop fait le css, il va l'insérer directement dans le document...
Donc si ton site fini par faire 500 pages, ce système n'a aucun intérêt. On mettra donc le code css sur un fichier externe aux documents (exemple: style.css) et sur chaque document (page du site), on appelle le style avec la ligne: <link rel="stylesheet" href="style.css" />

L'intérêt est que si après, tu souhaites changer l'apparence de tes pages, tu n'auras que le fichier "style.css" à modifier et toutes les pages de ton site changeront d'un coup :-)

Dans le cas contraire, il faudrait rappeler les 500 pages (si c'est un site conséquent), tu vois donc le problème :-)

Pour le B.A.BA du css, tu peux avoir ça sur le site du zéro :-)
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html
0
Merci
Ok alors svp vous pouvez pas me donner un exemple d'une intégration de webdesign comme ca je peut m'en rendre a cette exemple en cas de probléme
PS : je maîtrise le CSS
0
Merci
Ben pour le webdesign, je les fais moi-même, je vais jamais prendre ailleurs, donc l'exemple ne correspondra pas :-)
Si tu maitrises le CSS, donc je ne comprends plus la précédente question??? Si tu as l'image découpée, tu connais le CSS et html, ben suffit de rassembler le tout...
0
Merci
Oui je m'aitrise le CSS et le html cependant je sais pas comment faire même si je les maitrise stp aide moi
Voilà mon webdesign :http://img203.yfrog.com/i/960grid12col.png/