High-Tech Santé Médecine Droit-Finances

Test

appareil photo

Samsung PL55

Rechercher : dans
Par :

Aide découpage Html

Dernière réponse le 19 avr 2009 à 15:10:55 1formatik77, le 18 avr 2009 à 19:24:04 
 Signaler ce message aux modérateurs

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 =)

Configuration: Windows XP
Firefox 3.0.8

Meilleures réponses pour « Aide découpage Html » dans :
[Site web] Vérifier, optimiser et nettoyer son code HTML VoirLes logiciels WYSIWYG de création de pages web produisent parfois du contenu HTML rempli de balises HTML inutiles, voire incompatibles avec les recommandations du W3C. Les outils proposés ci-dessous permettent de vérifier la validité du code HTML...
[Linux] Découper un fichier en plusieurs parties Voir
On peut cacher le code source d'une page HTML VoirMythe: On peut cacher le code source d'une page HTML. Réalité: FAUX. Explications: Pour pouvoir afficher une page web (HTML), le navigateur doit - à un moment où un autre - avoir le code HTML en clair. Il y a donc toujours moyen de le...
Télécharger HTML Tidy VoirHTML Tidy est un utilitaire permettant de vérifier et d'optimiser tout code HTML. La version originale de cet utilitaire s'utilise en mode de commande uniquement. La présente version, appelée "GUI Tidy", possède une interface graphique. Notez...
Télécharger Lambda HTML Editor Voir
Télécharger PDF-to-HTML Voir
Caractères spéciaux HTML VoirCodage des caractères spéciaux Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier. Pour...
Les balises HTML VoirHTML, un langage à balises Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme d'un contenu rédigé en texte simple. Une page HTML est ainsi un simple fichier texte...
Introduction au HTML VoirPrésentation du HTML Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent...
Posez votre question Répondre

1

PhP, le 18 avr 2009 à 21:10:47

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 ?
PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

2

1formatik77, le 18 avr 2009 à 21:27:13

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.

   
Répondre à 1formatik77

3

PhP, le 18 avr 2009 à 21:53:09

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
PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

4

1formatik77, le 18 avr 2009 à 22:03:31

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

   
Répondre à 1formatik77

5

PhP, le 18 avr 2009 à 22:20:22

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
PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

6

1formatik77, le 18 avr 2009 à 22:26:33

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

   
Répondre à 1formatik77

7

PhP, le 18 avr 2009 à 22:29:27

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
PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

8

1formatik77, le 18 avr 2009 à 22:31:22

=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 ?

   
Répondre à 1formatik77

9

PhP, le 18 avr 2009 à 22:34:13

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


PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

10

1formatik77, le 18 avr 2009 à 22:34:57

Oui c'est fait !!

   
Répondre à 1formatik77

11

1formatik77, le 18 avr 2009 à 22:34:57

Oui c'est fait !!

   
Répondre à 1formatik77

12

PhP, le 18 avr 2009 à 22:53:22

Tu ouvres le bloc note et tu copies 

<!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)

PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

   
Répondre à PhP

13

1formatik77, le 18 avr 2009 à 23:07:57

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

   
Répondre à 1formatik77

14

PhP, le 18 avr 2009 à 23:12:17

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


PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

   
Répondre à PhP

15

 1formatik77, le 19 avr 2009 à 15:10:55

Merci PhP ; )

   
Répondre à 1formatik77
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net