Aide découpage Html Résolu/Fermé

Question

Bonjour, donc j'aimerai qu'on m'explique rapidement par un petit bout de code comment placer les images de mon design que j'ai découpé grâce à photoshop.
En faite quand photoshop génère le fichier html, c'est codé grâce à des tableaux que je veux bien sur éviter mais qui bien sur complique les choses.

J'ai par exemple ma bannière, je veux ensuite mettre mon menu juste en dessous, 
comment placer en faite l'image pour qu'elle puisse se caler juste en dessous de la bannière et que je puisse mettre les tout les liens du menu.

J'espère que j'ai été assez clair ^^
Merci pour vos réponses =)

PhP · Answer

Bsr

Tient j'ignorais que PhotoShop générait des pages HTML : c'est avec quelle version ?

Sinon pour ta mise en page ben faut passer par des div qui vont te permettre de découper la page comme tu veux à l'aide de CSS : en gros au départ tu obients des zones vides que tu habilles ensuite avec tes images.


Ca serait plus simple si tu donnais un lien vers le rendu que tu veux : concrètement ça ressemble à quoi ce que tu as obtenu avec PhotoShop ?

1formatik77 · Answer

Oui oui il peut générer des fichier html en utilisant l'outil tranche pour découper les images et ensuite faire "Enregistrer pour le web" Voici a peu près comment sa se présente : http://img401.imageshack.us/img401/807/exemple.png Bien sur avec des effets de styles sans oublier que le fond que j'ai représenté en jaune fait partie du design. La bannière que j'ai découpé en faite, il faudrait que je la place avec un

mais comment faire ? En mettant un background dans la propriété css ou autrement ? Merci.

PhP · Answer

Tu es sûr que tu as envoyé la bonne image ?

C'est très étroit en plus j'ai pas de zone jaune mais un gros rectangle noir qui occupe presque toute l'image

1formatik77 · Answer

Oui oui c'est bien celle la en faite le jaune c'est le fond mais je pense que ce n'est pas un problème, c'est juste une couleur

PhP · Answer

Bon si ca te plaît comme ça lol

D'abord tu dois rédécouper ton image avec PS en plusieurs morceaux 


Zone 1 : d'abord la zone grise du haut

Zone 2 : une rectangle aussi large que ton image et suffisamment haut pour faire tenir l'ellipse rouge mais pas plus

Zone 2 : une rectangle aussi large que ton image et suffisamment haut pour faire tenir l'ellipse bleu mais pas plus

1formatik77 · Answer

Oui Ok ça c'est fait.
Ensuite =)

PhP · Answer

Ensuite ben va falloir que tu tapes du code HTML ;-)

J'espère que tu connais bien la syntaxe HTML ainsi que des feuilles de style CSS

1formatik77 · Answer

=D

En faite le découpage j'ai su le faire, mais c'est le code qui me posait problème !!

Par exemple la bannière : je met un div avant et je place la bannière dans le css c'est sa ?

PhP · Answer

C'est quand même un chouia plus compliqué

Tu créés un nouveau répertoire sur ton disque par ex sous C:\ tu créés le répertoire site

Dans le répertoire site tu créés un sous réperoire que tu nommes par ex images et dans lequel tu places toutes les petites images que tu viens de découper

1formatik77 · Answer

Oui c'est fait !!

1formatik77 · Answer

Oui c'est fait !!

PhP · Answer

Tu ouvres le bloc note et tu copies Site

Tu enregistres le fichier sous c:\site\site.htm (en sélectionnant comme type : Tous les fichiers)

1formatik77 · Answer

Merci je vais essayer avec ça !!! =)

PhP · Answer

Oui je vais pas tout faire à ta place ;-)

Dernière chose 

Dans
		div#site {
		    width: 900px;
			margin: 0 auto;
		}


Remplace 900px par la largeur de ton site



Dans

		div#site-header {
		    background: url("images/haut.jpg") no-repeat center 0;
		    height: 160px;
		}

Remplace haut.jpg par le nom que tu as donné à ton image du haut (la zone grise)
et 160px par la hauteur de ton image

Ensuite essaie de comprendre à quoi correspondent tous ces codes

Bon courage et bon dev

1formatik77 · Answer

Merci PhP ; )

Aide découpage Html

15 réponses

Discussions similaires