Aide découpage Html
Résolu
1formatik77
Messages postés
292
Date d'inscription
Statut
Membre
Dernière intervention
-
1formatik77 Messages postés 292 Date d'inscription Statut Membre Dernière intervention -
1formatik77 Messages postés 292 Date d'inscription Statut Membre Dernière intervention -
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 =)
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 =)
A voir également:
- Aide découpage Html
- Editeur html - Télécharger - HTML
- Découpage photo instagram - Guide
- Espace en html ✓ - Forum HTML
- Espace html ✓ - Forum Webmastering
- Html download - Télécharger - HTML
15 réponses
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 ?
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 ?
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 <div> mais comment faire ?
En mettant un background dans la propriété css ou autrement ?
Merci.
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 <div> mais comment faire ?
En mettant un background dans la propriété css ou autrement ?
Merci.
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
C'est très étroit en plus j'ai pas de zone jaune mais un gros rectangle noir qui occupe presque toute l'image
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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
J'espère que tu connais bien la syntaxe HTML ainsi que des feuilles de style CSS
=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 ?
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 ?
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
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
Tu ouvres le bloc note et tu copies
Tu enregistres le fichier sous c:\site\site.htm (en sélectionnant comme type : Tous les fichiers)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site</title>
<style>
* { margin: 0; padding: 0; outline: 0; }
div#site {
width: 900px;
margin: 0 auto;
}
div#site-header {
background: url("images/haut.jpg") no-repeat center 0;
height: 160px;
}
div#site-content {
}
div#site-footer {
}
</style>
</head>
<body>
<div id="site">
<div id="site-header">
</div>
<div id="site-content">
</div>
<div id="site-footer">
</div>
</div>
</body>
</html>
Tu enregistres le fichier sous c:\site\site.htm (en sélectionnant comme type : Tous les fichiers)
Oui je vais pas tout faire à ta place ;-)
Dernière chose
Dans
Remplace 900px par la largeur de ton site
Dans
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
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
