Bonjour...
J'ai un projet de site pour une asso culturelle , il sera basé sur l'esthetique et la simplicité. Alors voilà j'ai quelques connaissances basiques sur l'edition web ( çà fait longtemp ) et j'ai essayé de me mettre un peu à la page , utiliser les scripts PHP , faire des galleries web , etc...  
Seulement mes lacunes se font sentir dès le debut ! j'aimerai construire une page dynamique sur une image... Avec des boutons de transformationpour les menu. J'ai tenté de passer par photoshop mais les explication sont vraiment obscures ! quelqu'un pourrait-il m'aider sur ce sujet ?

Bonjour!
 
Qu'entends-tu par "page dynamique sur une image" et "boutons de transformation pour les menus" ?
 

Sans doute veux tu parler d'une page dont limage à des zones "réactives" ? et des bouton dont l'apparence change lorsque la souris passe dessus.. (rollover) ?

Oui voilà c'est tout à fait çà. Faire des pages vraiment souples , sans cadres HTML etc , où on pourrai tout imbriquer comme çà. Je sais que photoshop peut le faire... mais je n'y arrive pas ! alors si quelqu'un peut me donner ses lumières...

photoshop c'est pas fait pour faire du HTML c'est fait pour faire des images !
 
quand est-ce que les gens vont comprendre ça !!

Quand tu leur expliqueras cordialement

Et bien merci d'être si agréable celà fait plaisir...
Pour info môôôsieur , photoshop fait de l'HTML et parmet d'enregistrer une image en tant que page web avec le code qui va avec , d'où ma question pour la maitrise de cet outil car si nul que ce soit , j'ai fait une page web reactive avec photoshop ( et ouais... )
Alors je ne force personne à me repondre hein , surtout si , si manifestement , ils ne savent pas de quoi ils parlent...

Si, Gatsusat sait de quoi il parle, mais il en parle aggressivement...
Photoshop permet de découper un psd en tranches et de générer automatiquement une page html... en tableaux.
 
Bref, c'est juste que ça n'est pas la meilleure solution pour faire un site.
En fait, il faut juste se dire, que les tableaux en html, c'est fait pour mettre des données ( comme dans un tableur ), pas des éléments du design
 
essaye de regarder du côté des CSS, tu vera des sites très bien construits, léger, facilement mis à jour, accessibles par tous...
 
http://www.csszengarden.com/tr/francais/  
 
http://www.alsacreations.com/
 
http://openweb.eu.org/
 
voilà

Mhhh je vois... Bon je suis peut-être naif hein , mais quand photoshop me crée une page web faisant çà , bah je ne regarde pas forcèment plus loin. C'est une technique apparement quand même assez efficace pour "segmenter" de grandes images pour le web. Merci bien en tout cas ...
J'ai la possibilité de creer des "pages types CSS" avec dreamweaver , donc c'est bien dans une des ces choses que je devrai insèrer le code requis n'est-ce pas ?
Est-ce que cette methode est plus avantageuse que le flash ?
Ce qui me fait peur c'est que je vois partout des exemples pour changer l'aspect du bouton , mais pour changer d'autres elements en-dehors de la "zone de reaction"...
Pour faire simple , un menu de gallerie , ou avec le passage de la souri sur chaque thème de gallerie , un petit aperçu s'incruste dans la page de depart...

http://forum.hardware.fr/hardwaref [...] 9726-1.htm

 
Sans aucun problème avec les styles CSS !
 
Si tu veux comprendre et apprendre les CSS, lis les liens que tu vois sur ce post, et commence en faisant des petits exercices pratiques, et non pas en commençant à faire ton projet de site web directement en CSS.
 
En gros, le principe d'un site (X)HTML/CSS, c'est :
 
- d'un côté la page.htm qui ne comporte que les données du site (les textes et image), mais aucune information de mise en page (comme les attribut "color" etc). L'aventage : tu ne te sers que d'une dizaine de balises au maximum (<p><hx><div><span><ul><a><img>...)*
- de l'autre côté, tu as un (ou plusieurs, mais un suffit) fichier .css qui contient toutes les informations de mise en page.
 
voilà, tu peux commencer par cet article

Très bien... Merci en tout cas de votre aide. Je dois vous sembler bien ingrat , car je n'ai fait que survoler jusqu'à present toutes les ressources qui m'ont étés données . Je crois qu'il va falloir que je me force à une étude un peu plus appronfondie...
Mais bon , comprennez-moi aussi , je suis photographe et pas du tout webmaster. Et je suis decouragé de me voir confronté à tant de lignes de code , alors que jusqu'à present je ne me servait que des exemples automatiques de dreamweaver...

Oui bien entendu, personne ne t'oblige à réaliser ton site en CSS ou avec la mise en page de dreamweaver
C'est juste qu'on essaye de sensibiliser un minimum les gens sur les pratiques standards de création web. Après, c'est normal que tu sois impressionné par les lignes de codes que tu vois dans les liens des exemples, car c'est une méthode que tu découvre. Mais en t'y intéressant, ne serait-ce que quelques heures, tu te rendras vite compte que c'est bien plus facile que ça n'y parait (tout du moins pour les bases).

Et bien justement... Je m'était intéréssé de pret à l'edition web il y as quelques années , quand l'HTML était encore à son age d'or... ( no comment ) , donc là j'ai vraiment l'impréssion d'être has-been et qu'il n'y as plus rien à faire. Mais bon j'ai dit que j'allais essayer donc c'est parti... Un ami m'a dit que pour faire apparaitre un aperçu avec ce type d'action , il serai bien préférable d'utiliser le flash... Car sinon les temps de chargements seraient delicats à gerer. Je vais essayer de faire le tour du sujet pour trancher la question...

oups , j'allais oublier... J'ai une autre question de pur newbie...
Dans ma page CSS donc... je n'est pas de jeu de cadre ( du moins , pas au sens où on l'entend en html ). J'ai mon menu à gauche , et ma page principale au centre ( jusque là , normal ). Mais je n'arrive pas à faire ouvrir les pages de mon menu dans la page centrale tout en gardant le menu ! soit la nouvelle page s'ouvre toute seule et le menu ( et autres fioritures... ) disparaissent , soit je ne peut que l'ouvrir dans une nouvelle fenêtre. J'aimerai faire en sorte que les diffèrentes page s'ouvre dans la partie centrale tout en conservant le reste , sans recreer le menu pour chaque page ( le chargement en patirait surement ). Voilà j'espère avoir été clair , comment puis-je designer un cadre cible , sans cadre ?

N'utilise pas les cadre, tu verras, le gain de temps est minime avec des frames, pour des inconvénients très nombreux. A la limite, si tu as envie de t'intéresser un minimum à PHP, il y a un moyen très simple de simuler des frames... sans les inconvénients
 
tout simplement :
 
code de "mapage.php"

 
code de "mon_menu.htm"

 
 
voilou

Sans oublier de supprimer les specifications html dans mon_menu.html
( <header>[...]</header> , et les balises body et /body )

ok merci beaucoup ! donc je dois obligatoirement faire des cadre et enregistrer mon menu dans une page separée pour pouvoir le conserver lors de la navigation ?

non justement ca t'évite de faire des cadres les includes, en fait ton menu est intégré dynamiquement dans ta page.
L'include t'évite de faire des changements sur toutes les pages à l'aide d'un seul fichier

ha je vois ! donc la seule petite ligne de code avec "include" permet d'intègrer automatiquement mon menu aux pages ?
lol c'est trop beau et simple pour être vrai... mais je vais tester

Ce système de menu m'a l'air très prometteur , merci beaucoup çà va me servir.
J'aurai une autre question de total newbie...
J'essaye de creer mes pages avec un effet de "cadre" , je travaille donc à faire des images de bordures , coins , etc... Et je pense assembler le tout dans un tableau . Qu'en pensez-vous ? n'y aurait-il pas plus simple ?

avec les css, tu peux t'arranger ainsi pour faire un cadre qui s'aggrandisse en fonction de la quantité de contenu :
 

 
et dans ta feuille de style (pour un cadre, on a 3 images)
l'image du haut fait : 200*20px
l'image du milieur fait : 200*1px (elle se répète)
et l'image du bas fait : 200*10px

 
sinon, si tu veux faire des cadres simples, un attribut "border" dans ta feuille de style te permet de gérer les contour : (épaisseur, couleur, aspect), tu peux même spécifier des contenus spécifiques à chaque côté (droit, gauche, bas, haut).

Ca c'est pour un cadre non-étirable en largeur, il existe aussi étirable en largeur (mais le tuto d'Alsacréations est passé dans le bouquin du même auteur CSS2: pratique du design web - 28,5€ bien investis si tu débutes enfin avant ça il y a sûrement d'autres tutos sur le Net ...)

galerie de menus

çà y est... je commence àavoir des envies meurtrières envers mon pc...  
(mais il me regarde d'un air implorant avec sa carcasse desossée , dejà victime de ma rage....)
 
Pour ce qui est des menus , j'ai pioché un peu partout et j'ai reussi à monter un truc plutot pas mal ( merci encore... )
Mais pour ce qui est de ces cadres... y'a rien à faire... même en m'armant de patience et de bon sens , cette methode de tableau de marche pas. Je n'ai pas du être très clair dans ce que je voulai obtenir... En fait , j'aimerai un resultat proche de celui-là : http://clickerfou.free.fr/thumbnai [...] topn&cat=0
çà as l'air si con... et du coup , je me sent encore plus con de ne pas y arriver... Les tableaux de dreamweaver... enfin ils partent toujours en c***** dès que çà devient complexe et donc , immetraisable...

En fait en CSS, ce site je ferais ce site comme suit :
 
==> un bloc avec le header
==> une liste pour le menu
==> un bloc pour le contenu
==> un bloc pour le footer
 
c'est tout
 
et pour placer les images dedans, un simple attribut : float:right sur une balise d'image (dans le css bien sûr) et hop, toutes les images se rangent impeccable.
 

 
En fait, pour ne pas avoir de surprise avec l'affichage entre différent navigateur,
il est mieu d'englober le tout dans une DIV que tu appelera "page par exemple
(en définissant la largeur, les éléments de menus et du contenu seront mieu en place).
 
De plus, si tu met une décoration en position absolu,
tu pourras mettre en position relatif la div page : les décorations
se mettront à la place exacte que tu veux sur tout les navigateurs
quelque soit la grandeur de fenêtre des navigateurs.
(voir ce topic : http://forum.hardware.fr/hardwaref [...] 4723-1.htm
qui t'illustre le problème que tu peux résoudre avec cette méthode)
 
 

 
Il suffit juste de placer ces codes ( 4 donc en tout.... ) dans le code du cadre CSS ? et pour les coin , avec que quatres images ? Dreamweaver fait quelques execution comme çà automatiquement... Pas de diffèrence ?

 
Ha bah oui tout à fait    , c'est une chose dont j'aurai eut très vite besoin , puisque je compte mettre des petites fioritures un peu partout. Lol çà m'as tout l'air d'une petite recette magique , mais heu...    
Où peut-on definir les position absolues ou relatives dans dreamweaver ?

alors pour te simplifier la mise en route, voici comment ça va se présenter (ce sont des exemples et il y a bien sûr pleins d'autres solutions pour faire la même chose)
 
-- code de la page "index.htm"

 
-- code de la page "style.css"

 
Tu trouveras le résultat de ces codes ici
 
les images utilisés :  

• le haut
• le motif du contenu
• le footer

 
 
Voilà, c'est pas du grand art mais je pense que ça peut t'aider à te représenter les choses simplement. Essaye de changer des valeurs du css et de voir les résultats. En t'appuyant sur les liens donnés précédement, tu devrais t'en sortir !
 
PS : tu verras des différences d'affichages entre IE et d'autres navigateurs. D'où l'utilité des "hack" css pour rendre l'affichage correct partout.

 
Il y a une faute dans ton motif : transition entre le header et le milieu.
 
Mets plutôt une border gauche et droite pour le milieu  

 
 
   pour moi en tout cas çà marche. Enfin j'ai travailler sur mes propres images... Il suffit d'adapter un peut le tout. Par contre , je n'arrivais pas à mettre de "repeat" pour l'image du contenu... Alors j'ai laisser dreamweaver s'en charger en le metant en image d'arrière plan. Bon çà fait un peu "bidouillage facile"  , mais ma philosophie " ce qui marche suffit "
Enfin... çà marche vraiment pareil , pas vrai ?  

Oups , dejà une chose que j'ai mal comprise au fait...  
En theorie , on peut donc placer en position "relative" , et le cadre devrait s'adapter automatiquement , pas vrai ?
Cà peut sembler bête , mais je n'arrive pas à positionner le cadre en "millieu de page"... Je dois le faire au pif , et ce n'est pas l'ideal. Theoriquement ( si j'ai bien compris ) on peut poser une balise "include" en millieu de page... Et le cadre en entier lui-même sera positionné eu millieu , et toute ma page sera de cette façon bien alignée niquel ?

#forme {
 WIDTH: Largeur que tu veux;
 margin: 0px auto;
 height: auto;
 background-image: motif que tu as avec la largeur = à "WIDTH" (- les borders) puis tu fait "repeat y";
 position: relative;
 border-right-width: bordures autour de ta page si tu en met;
 border-left-width: bordures autour de ta page si tu en met;
 border-right-style: bordures autour de ta page si tu en met;
 border-left-style: bordures autour de ta page si tu en met;
 border-right-color: couleurs des bordures;
 border-left-color: couleurs des bordures;
}
 
Dans ton cas c'est margin que tu dois mettre en auto.

       
( va-t-il mal le prendre si je dit que là , je ne comprend rien ? )
en fait j'ai l'impréssion qu'on change de technique entière à chaque fois
Si j'ai bien suivi...
dans le code de mon cadre , je met : margin: 0px auto; et là mon cadre se retrouvera automatiquement au millieu ? heu non , là vraiment , j'ai du rater quelque chose

Je vais te le faire : donnes ton code .css ; ton code HTML ; et tes images.  
EDIT : Ou mets en ligne ton site en question, ca suffira  

 
oui enfin le but n'était pas de faire un truc beau

Oui mais c'est ce qu'il faut faire pour palier au problème de transition de motif d'une div à une autre.
Mieux vaux faire les chose bien dès le départ : ca évite bien des questions par la suite  

 
 
tout à fait d'accord
 
Pour le coup des border sur les côtés, je n'y avais pas pensé, ça doit faire gagner quelques octets

Oui. ca évite ça :
 

 
Puis tu peux placer tes éléments avec plus de précisions.
(éléments en position absolu)