High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Creation de site avec photoshop ??? (urgent)

Dernière réponse le 6 jan 2009 à 18:47:38 ARNET, le 6 jan 2009 à 15:09:25 
 Signaler ce message aux modérateurs

Bonjour a tous et heureuse année a tous ,

Je suis graphiste de formation et je suis en train de créer mon site web avec photoshop.
Jusqu'ici tout va bien....

J'ai un fichier .psd (700*525px) que je transforme en jpg ensuite pour la compression des couleurs pour le web.
C'est ma page d'accueil (site en construction) en attendant de créer tout mon site.

Le problème est que je ne sais pas comment procéder pour le mettre en ligne sur internet (j'ai déjà un nom de domaine,un ftp...).

Car la plupart du temps un site se constitue d'un header,d'un menu,d'un contenu que l'on peut coder en HTML (m'a t-on dit), mais la il s'agit juste d'un jpg en 700*525 que je voudrait mettre en ligne pour patienter et surtout je voudrait qu'il s'affiche correctement sur toutes les résolutions d'écran et toutes les taille d'écran....

Quelle est la marche a suivre ?
Comment puis-je faire le plus simplement ?
Est ce que quelqu'un peut me donner un coup de main s'il vous plait ???

Je m'y connais pas du tout en codage mais j'ai soif d'apprendre
et c'est assez urgent....

Merci d'avance et meilleurs vœux a tous....

N*E*R*D
"No one ever really die"

Configuration: Windows Vista
Firefox 3.0.5

Meilleures réponses pour « Creation de site avec photoshop ??? (urgent) » dans :
Créer un site internet Voir
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
[Outils] Freewares pour la création de sites Voir1. Éditeurs WYSIWYG 2. Éditeurs de code 3. Client FTP 4. Graphisme et retouche d'images 5. Graphisme de style FLASH 6. Édition audio 7. Serveur web Freewares pour la création de sites Vu le nombre de demandes pour créer un site,...
Posez votre question Répondre

1

arthezius, le 6 jan 2009 à 15:26:48

Bonjour,

Déjà si tu enregistre ton image en jpg, tu ne pourra aucunement avoir de lien sur celle-ci.
Via Photoshop il est possible de composer directement des pages en utilisant l'outil tranche qui permet de placer des liens sur l'image. Il suffit ensuite d'enregistre l'image pour le web (y'a un truc comme ça dans le menu Fichier) et de mettre ça en html + image (y'a ça dans le type de fichier pour l'enregistrement).

Si tu fais une simple image que tu veux mettre sur le web en page d'accueil, il faudra dans tout les cas l'inclure dans une page html mais elle est toute simple.
Une page d'accueil d'un site doit se nommer très précisement index.html ou index.php.
Tu peux donc faire une page toute simple: 

<html>
<head>
<title>Accueil</title>
<body>
<img src="#chemin de l'image#/#nom du fichier#.jpg" alt="" />
</body>
</html>

Il s'agit là d'un code tout simple.
Là par contre elle sera calée dans le coin supérieur gauche du navigateur, le reste étant blanc.
Vue la taille de ton fichier ça ne sera pas dérangeant pour un petit écran. Par contre, pas très estétique pour un plus grand comme le miens par exemple en 1440x900px.
Le mieux est encore de mettre une couleur de fond et de centrer l'image. Pour ça renseigne toi du côté de CSS qui te sera indispensable pour la suite. Webmaster indépendant.

   
Répondre à arthezius

2

ARNET, le 6 jan 2009 à 15:42:01

Bonjour et merci pour ta reponSe rapide,

Effectivement je savais que l'on peut passer sur image ready et découper mon image avec les tranches pour les lien en autres.
Seulement pour l'instant il n'y a aucun lien sur ma première page.
C'est juste une page de présentation graphiquement travailler.

Je sais aussi qu'imageready génère un code html et que je peux le copier coller sur notepad++ (en autre)...
Je l'ai essayer ce matin et sur mon écran niquel il apparait bien et prend toute la place de mon écran.

Mais quand je suis partit chez un amis qui a deux écran chez lui (un hyper grand et un de 17pouces) mon image apparait sur la naviguateur plus petit en haut (centrer bien sur car j'ai rajouter une balise center) mais elle ne prend pas tout la surface de l'ecran...

Ce que je voudrai, c'est que quelque soit la taille de l'écran de gens qui vont visiter ma page d'accueil , mon image apparaisse comme chez moi et prenne toute la taille de l'écran...

Est ce que quelqu'un peut m'aider car je galère grave ???
Il doit y avoir une solution ???

Si quelqu'un peut me donner un coup de main perso ça serait hyper cool et ça m'enlèverai un poids énorme....

   
Répondre à ARNET

3

arthezius, le 6 jan 2009 à 15:55:42

L'inconvénient c'est que ton image de base est défini a une certaine taille. Un écran également. L'affichage de ta page est défini par ce dernier.
Tu pourrai très bien définir la taille de ton image sur ta page en CSS. Ainsi par exemple tu peux mettre un height="100%" et un width="100%". L'image prendra l'écran quelques soit sa résolution. Toutefois la qualité de dégradera d'autant.
De plus, les rapport hauteur/largeur ne sont pas toujours les même entre un écran 4/3 et un 16/9. Webmaster indépendant.

   
Répondre à arthezius

4

AdminTOURS, le 6 jan 2009 à 16:01:49

Pas possible d'étendre ton jpeg le seul moyen d'étendre un truc comme ça c'est qu'il soit vectoriel et accessible par une page web = c'est du flash !

Donc il faudra accepter que ton image s'affiche différemment suivant les config en attendant la version définitive du site...

   
Répondre à AdminTOURS

5

Smoking bird, le 6 jan 2009 à 16:06:18

Dies*

   
Répondre à Smoking bird

6

ARNET, le 6 jan 2009 à 16:11:08

Pardon pour la faute.....

Je suis sur qu'il doit y avoir une solution.....
je vous en suplie
si il y a un webmaster qui lis ce message, pouvait vous m'aider ???

   
Répondre à ARNET

7

Smoking bird, le 6 jan 2009 à 16:21:46

Tu pourrais faire une détection de la taille de l'écran du visiteur, ou en tous les cas de son navigateur, en déterminer un rapport hauteur/largeur (16/9 ou 4/3) avec quelques petites approximations et remplacer ton image de fond en la mettant en 100%, sachant que pour les différents rapports tu prendrais les résolutions maximales possible, tout ça en javascript, ça pourrait à peu près convenir... Mais c'est beaucoup de travail pour pas grand chose^^, AdminTOURS a raison là dessus

   
Répondre à Smoking bird

8

AdminTOURS, le 6 jan 2009 à 16:25:11

Merci :-)

   
Répondre à AdminTOURS

9

ARNET, le 6 jan 2009 à 16:25:26

Donc quelle est la meilleur solution ???

   
Répondre à ARNET

10

Smoking bird, le 6 jan 2009 à 16:47:45

Faire ton image en dimensions standard (1024 il me semble^^), pour que la majorité théorique puisse voir ta page comme chez toi, avec l'image qui prends toute la place, et l'aligner au centre de ton navigateur dès que la taille est plus grande^^, grâce à la magie des css, tu peux la mettre pile au milieu, et pas au milieu en haut^^. Si ton image a une espèce de couleur de fond, ou un motif répétitif de fond, n'hésite pas à adapter le background de ton index, que ça fasse moins 'image collée'

   
Répondre à Smoking bird

11

ARNET, le 6 jan 2009 à 16:57:22

Est ce que tu aurai le code css pour le mettre au milieu de l'ecran quelque soit taille ???
ce m'arangerai bien ca

au moins meme si il ne prend pas tout l'ecran, je le mets au format 1024/768 et il apparaitra au milieu de la page de mon visiteur
ca serai deja plus propre

   
Répondre à ARNET

12

Smoking bird, le 6 jan 2009 à 17:55:48

body {
padding:0em; margin:0em; text-align:center;
}

#tonImage {
padding:0em; margin:auto; width:1024px; height:768px;
}


ça devrait suffire, sinon tu précises le margin ainsi:

margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto;

et tu ajoutes un bord de 1px de la couleur du background de ton site autour de l'image^^

   
Répondre à Smoking bird

13

ARNET, le 6 jan 2009 à 17:58:09

EST CE QUE CE CODE POURRAI CORRESPONDRE PAR EXEMPLE :

<!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" >
<head>
<title>Alternative média musicale "Toute l'actualité de toutes les musiques</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">#contenu{ position:absolute;left: 50%; top: 50%;
margin-top: -300px; /* moitié de la hauteur de l'image */
margin-left: -400px; /* moitié de la largeur de l'image */
} </style>

</head>
<body>
<div id="contenu">
<img src="images/premierepage.jpg" alt="bientot en ligne" width="800" height="600">
</div>

</div>
</body>
</html>

   
Répondre à ARNET

14

Smoking bird, le 6 jan 2009 à 18:02:15

Non^^

   
Répondre à Smoking bird

15

ARNET, le 6 jan 2009 à 18:08:34

Pourquoi ????

   
Répondre à ARNET

16

 Smoking bird, le 6 jan 2009 à 18:47:38

Tes css ne sont pas très propres, l'utilisation des % n'est pas vraiment recommandé, et les valeurs de type margin ne sont pas particulièrement destinées à être en négatif^^, ça peut fonctionner, mais je ne t'encouragerais pas à prendre de mauvaises habitudes^^, qui te compliqueraient le travail à l'avenir, lorsque tu auras de plus gros trucs à gérer avec^^

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