creation d'un site artistique , je m'en sort pas !
creation d'un site artistique , je m'en sort pas ! - Web design - Graphisme
Marsh Posté le 05-10-2005 à 20:41:10
Bonjour!
Qu'entends-tu par "page dynamique sur une image" et "boutons de transformation pour les menus" ?
Message édité par remizz le 05-10-2005 à 20:41:27
Marsh Posté le 06-10-2005 à 10:08:20
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) ?
Marsh Posté le 07-10-2005 à 14:18:31
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...
Marsh Posté le 07-10-2005 à 14:49:08
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 !!
---------------
Les CSS c'est bon mangez-en
Marsh Posté le 08-10-2005 à 01:48:31
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...
Marsh Posté le 08-10-2005 à 10:38:56
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à 
Marsh Posté le 08-10-2005 à 11:57:20
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...
Marsh Posté le 08-10-2005 à 13:55:01
| Duc DeVille a écrit : 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 ... |
http://forum.hardware.fr/hardwaref [...] 9726-1.htm
Marsh Posté le 08-10-2005 à 18:11:12
| Duc DeVille a écrit : 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 ... |
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
Marsh Posté le 09-10-2005 à 01:41:19
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...
Marsh Posté le 09-10-2005 à 11:44:36
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).
Marsh Posté le 09-10-2005 à 14:36:54
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...
Marsh Posté le 09-10-2005 à 14:48:10
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 ?
Marsh Posté le 09-10-2005 à 16:35:28
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 :
|
code de "mon_menu.htm"
Code :
|
voilou
Marsh Posté le 09-10-2005 à 18:03:36
Sans oublier de supprimer les specifications html dans mon_menu.html
( <header>[...]</header> , et les balises body et /body )
Marsh Posté le 09-10-2005 à 19:15:58
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 ?
Marsh Posté le 09-10-2005 à 19:23:45
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
Marsh Posté le 09-10-2005 à 20:08:35
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
Marsh Posté le 10-10-2005 à 12:21:38
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 ?
Marsh Posté le 10-10-2005 à 16:02:47
avec les css, tu peux t'arranger ainsi pour faire un cadre qui s'aggrandisse en fonction de la quantité de contenu :
Code :
|
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
Code :
|
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).
Marsh Posté le 10-10-2005 à 16:33:45
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 ...)
Marsh Posté le 10-10-2005 à 16:37:53
| Duc DeVille a écrit : ha je vois ! donc la seule petite ligne de code avec "include" permet d'intègrer automatiquement mon menu aux pages ? |
Marsh Posté le 10-10-2005 à 23:30:56
çà 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...
Marsh Posté le 11-10-2005 à 11:12:41
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.
Code :
|
Marsh Posté le 11-10-2005 à 12:35:17
| remizz a écrit : En fait en CSS, ce site je ferais ce site comme suit :
|
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)
Message édité par MisteR WarE le 11-10-2005 à 12:36:25
---------------
http://www.reivaxbook.fr
Marsh Posté le 12-10-2005 à 11:03:19
| remizz a écrit : En fait en CSS, ce site je ferais ce site comme suit :
|
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 ?
Marsh Posté le 12-10-2005 à 11:06:11
| MisteR WarE a écrit : En fait, pour ne pas avoir de surprise avec l'affichage entre différent navigateur, |
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 ?
Marsh Posté le 12-10-2005 à 13:35:59
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 :
|
-- code de la page "style.css"
Code :
|
Tu trouveras le résultat de ces codes ici
les images utilisés :
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.
Marsh Posté le 12-10-2005 à 18:08:09
| remizz a écrit : |
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
Message édité par MisteR WarE le 12-10-2005 à 18:09:42
---------------
http://www.reivaxbook.fr
Marsh Posté le 12-10-2005 à 18:46:53
| MisteR WarE a écrit : Il y a une faute dans ton motif : transition entre le header et 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 ?
Marsh Posté le 12-10-2005 à 18:52:48
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 ?
Marsh Posté le 12-10-2005 à 19:09:12
#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.
Message édité par MisteR WarE le 12-10-2005 à 19:10:23
---------------
http://www.reivaxbook.fr
Marsh Posté le 12-10-2005 à 19:47:49
| MisteR WarE a écrit : #forme { |
( 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
Marsh Posté le 12-10-2005 à 19:53:20
| Duc DeVille a écrit :
|
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
Message édité par MisteR WarE le 12-10-2005 à 19:54:35
---------------
http://www.reivaxbook.fr
Marsh Posté le 12-10-2005 à 20:58:28
| MisteR WarE a écrit : Il y a une faute dans ton motif : transition entre le header et le milieu. |
oui enfin le but n'était pas de faire un truc beau 
Marsh Posté le 12-10-2005 à 21:01:43
| remizz a écrit : 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
---------------
http://www.reivaxbook.fr
Marsh Posté le 12-10-2005 à 21:08:26
| MisteR WarE a écrit : Oui mais c'est ce qu'il faut faire pour palier au problème de transition de motif d'une div à une autre. |
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
Marsh Posté le 12-10-2005 à 21:44:49
Oui. ca évite ça :
Puis tu peux placer tes éléments avec plus de précisions.
(éléments en position absolu)
---------------
http://www.reivaxbook.fr
Sujets relatifs:
- Vos remarques sur mon site e-tud.com
- Vos avis/suggestions sur mon site d'échanges de bons plans, svp
- Creation de design pour internet avec un fond transparent?
- Avis et conseils : site internet d'une entreprise
- Aide pour mon premier site!!!
- [WEB] Site perso
- Que penssez vous de mon site
- recerche passioner pour creation site psp
- Recherche newser site Web (Hardware \Esport\ webdesigne\ infographie)
Marsh Posté le 05-10-2005 à 20:19:09
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 ?