Comment découper un site ? sur le forum Création de sites web - 06-08-2004 18:13:56

Liste des sujets

Comment découper un site ?

Pseudo supprimé 06 août 2004 à 18:13:56

Je sais pas si c´est clair avec un titre comme ça mais bon... je voudrais savoir comment faire la mise en page d´un site à partir d´une image ?

J´ai donc un site, enfin l´image du site que j´ai fait avec un logiciel de dessin et je voudrais savoir comment le " convertir" en HTML quoi... ?

yoda_software doit bien avoir un lien qui correspond à ce que je demande

Nicolas_Fisher

Niveau 10

06 août 2004 à 18:34:39

comment faire la découpe du design c´est ça ?

Pseudo supprimé 06 août 2004 à 19:03:16

Peut être, je ne sais pas comment on appel ça

Yoda_Software

Niveau 30

06 août 2004 à 19:19:38

Moi je le fait avec un simple logiciel de dessin.
Je sélectionne une partie de mon image principale et je la copie dans une nouvelle image. Et ainsi de suite.
Ensuite et bien j´utilise chaque morceau de mon design en background de bloc < div> que je positionne à l´endroit voulu.

Pseudo supprimé 06 août 2004 à 20:51:00

Ah zut ! je savais pas qu´on faisons ça de cette manière... le site est pas compliqué de toute façon.

Rikkuman4

Niveau 10

06 août 2004 à 22:26:46

yoda_software tu utilises quoi comme logiciel ?

mr_molive

Niveau 8

06 août 2004 à 22:34:49

bha pour découper un site tu prend un sciseau qu´elle question...

nant je plaisante , tu peux tjrs utiliser paint pour la decoupe c tt con.

Rikkuman4

Niveau 10

06 août 2004 à 22:37:02

oué c´est claire c´est comme sa que je fait tout le temps

---------------------------------------
http://img61.exs.cx/my.php?loc=img61&image=FullMetalPanic.jpg
--------------------

Yoda_Software

Niveau 30

06 août 2004 à 23:07:36

Une ancienne version de Paint Shop Pro, elle était fournie avec mon 1er PC !

silence_libre

Niveau 10

22 août 2004 à 17:45:42

Bon, j´ai 3 images qui compose mon design, je voudrais savoir comment je peux faire pour pouvoir mettre du texte sur une des images via un overflow sans utiliser de tableau puisque je vois que vous n´aimez pas trop ça ici. C´est possible à faire ?

Mettre une image en arrière plan et mettre un overflow à un certain endrois sur cette image ?

Yoda_Software

Niveau 30

22 août 2004 à 19:41:10

Oui, avec les feuilles de styles ( CSS) !

Si tu n´as que ça, mets entre les balises <head> et </head> :
<style type="text/css">

image1

{
width: 100px; / * largeur de l´image */
height: 100px; / * hauteur de l´image */
background-image: url(image1.jpg);
background-repeat: no-repeat;
}

image2

{
width: 100px; / * largeur de l´image */
height: 100px; / * hauteur de l´image */
background-image: url(image2.jpg);
background-repeat: no-repeat;
}

image3

{
width: 100px; / * largeur de l´image */
height: 100px; / * hauteur de l´image */
background-image: url(image3.jpg);
background-repeat: no-repeat;
}
</style>

Puis entre <body> et </body> :
< div id="image1">ton texte sur l´image 1</div>
< div id="image2">ton texte sur l´image 2</div>
< div id="image3">ton texte sur l´image 3</div>

silence_libre

Niveau 10

23 août 2004 à 00:04:03

Ca marche bien, par contre c´est pas simple de placer l´overflow au bon endroit

Yoda_Software

Niveau 30

23 août 2004 à 00:21:03

Soit tu le définis en :

position: absolute;
top: 147px;
left: 58px;

Soit tu joue avec les margin.

electron_libre

Niveau 10

23 août 2004 à 00:44:33

pour decouper une image, imageready ( fourni avec photoshop, bouton d´en bas de la barre d ´outil de gauche) est le + simple
1) on place des regles
2) on utilise l´outils tranche pour decouper toute les parties comme on veut
3) on exporte le tout dans un fichier html

-> ca genere un repertoire avec les images decoupées, et une page html avec les images placé comme il faut

bon evidement apres y´a un certain travail à faire au niveau de nettoyage du code, pour mettre en arriere plan certaines images ( c tjs mieux dans certains cas) . ..

http://tutophotoshop.com/www/site-creation.html

Yoda_Software

Niveau 30

23 août 2004 à 00:52:08

Au cas ou tu ne l´aurais pas remarqué, il a déjà découpé son design et il n´utilise pas les tableaux, mes les balises < div> avec les CSS pour afficher son design !

La prochaine fois lis les posts avant de répondre !

Yoda_Software

Niveau 30

23 août 2004 à 00:53:32

Oups, grosse faute d´orthographe !

Il fallait lire " [...] mais les balises [...] " .

electron_libre

Niveau 10

23 août 2004 à 00:57:36

oui, et il me semblait que son probleme etait la decoupe d´image, apres il se trouve que ma methode genere aussi un fichier html, donc je decris aussi cette phase, ce qui consititue un + par rapport à ce qu´il voulait savoir il me semble non ?

et c tjs mieux que paint pour decouper . ..

electron_libre

Niveau 10

23 août 2004 à 00:59:01

et il me semble que g aussi parlé de " nettoyage", donc rien n´empeche de virer tout les tableaus html pour les remplacer par des div . ..

Yoda_Software

Niveau 30

23 août 2004 à 01:01:57

Utiliser un générateur de code pour le supprimer ensuite et le remplacer par un autre !
Autant coder soi-même, on gagne du temps.
Et relis tout, il a déjà découpé son design !

electron_libre

Niveau 10

23 août 2004 à 01:06:37

moi g t tjs sur le pb de vivilebest

et puis n´oublions pas que sa fonction premiere c´est la decoupe d´image, la generation de code c´est juste un + . ..

Aide à l'achat Mac
Macintosh
Création de Jeux
Programmation
Création de sites web
Linux
Internet
Steam Deck
Hardware

La vidéo du moment

News jeu

8 031 spectateurs

Halo: Campaign Evolved fait de la coopération sa plus grande force

Loin de se limiter à une simple refonte graphique, Halo: Campaign Evolved reconstruit la campagne du premier Halo en accordant une place centrale à la coopération. Que ce soit pour découvrir l'aventure une première fois ou la parcourir à nouveau, le titre multiplie les options pour permettre aux joueurs de former facilement une escouade, tout en ajoutant de nouvelles mécaniques qui encouragent la rejouabilité.

Toutes les news jeu