Bonjour à tous,
A l'aide de Kompozer j'ai appris à créer des blocs (avec des balidses id, par exemple id=conteneur) pour définir l'architecture générale de mes sites.
A priori mon code est donc propre.
Mon souci est le suivant : mes sites sont tous "rectangulaires", or je voudrais leur donner une touche de design afin de les personnaliser.
Voici par exemple le type de résultat auquel je voudrais parvenir (dans un certain temps) :
http://www.surzur.fr/pages/mairie-servi ... tation.php
Voici mes deux questions :
1. Puis-je créer un gabarit "rectangulaire" dans Kompozer (avec tous les blocs) et réaliser à côté le design du site (dans Photoshop par exemple) que j'importerais une fois terminé dans Kompozer (à l'aide de l'outil tranche) ? Est-ce une bonne façon de procéder ?
2. Si j'importe des éléments graphiques dans Kompozer (imaginons une page entière) comment "écrire" par dessus (par exemple dans le bloc id=centre) puisqu'il s'agit d'images ? Faut-il fixer les éléments importés en tant qu'image de fond ?
J'espère avoir été assez clair et merci d'avance pour toute aide ou suggestion.
PS: je précise que je me suis mis à Inkscape mais je débute et je ne sais pas si ce logiciel est vraiment adapté à la réalisation d'un modèle graphique pour le web.
JPV56
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Kompozer et design web
Modérateur : chinon37
Bonjour,
Si tu décomposes le site de Surzur, tu verras que ce ne sont que des images de fond
Utilise pour voir l'extension Firefox webdevelopper
[edit 11h01]
Par exemple, l'image d'entête est celle-ci: http://www.surzur.fr/img/navigation/headerbk.jpg en image de fond du bloc #globalheader.
Tu peux donc faire un design avec un logiciel comme Photoshop ou Gimp (libre ) et découper celui-ci pour "remplir" les blocs en images de fond.
Si tu décomposes le site de Surzur, tu verras que ce ne sont que des images de fond
Utilise pour voir l'extension Firefox webdevelopper
[edit 11h01]
Par exemple, l'image d'entête est celle-ci: http://www.surzur.fr/img/navigation/headerbk.jpg en image de fond du bloc #globalheader.
Tu peux donc faire un design avec un logiciel comme Photoshop ou Gimp (libre
) et découper celui-ci pour "remplir" les blocs en images de fond.Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Je te remercie !
J'y vois désormais un peu plus clair.
Pour résumer je fais ma maquette dans Photoshop, puis je découpe mes tranches que j'insère au bon endroit dans mes blocs sur Kompozer.
Par contre s'il s'agit d'une image d'arrière plan (cf site de Surzur) comment expliquer qu'il y ait un effet visuel au niveau de chaque petit cercle ? Idem pour le texte des menus. Quelle est la méthode employée ?
Dernière chose : vaut-il mieux utiliser le format JPEG pour sa composition ou le format PNG ?
Merci encore !!!
JPV56
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
J'y vois désormais un peu plus clair.
Pour résumer je fais ma maquette dans Photoshop, puis je découpe mes tranches que j'insère au bon endroit dans mes blocs sur Kompozer.
Par contre s'il s'agit d'une image d'arrière plan (cf site de Surzur) comment expliquer qu'il y ait un effet visuel au niveau de chaque petit cercle ? Idem pour le texte des menus. Quelle est la méthode employée ?
Dernière chose : vaut-il mieux utiliser le format JPEG pour sa composition ou le format PNG ?
Merci encore !!!
JPV56
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Les petits cercles et le texte des menu ne sont pas inclus dans l'image de fond, mais ils sont mis dans le bloc comme contenus.
Il est donc possible de faire l'effet de survol au passage de la souris.
Entre jpeg et png, tout dépend de l'image que tu as: pour un dessin ou un graphique, je privilégie le png. Pour une photo complexe, je prends le jpeg.
Le png fait de la compression sans perte, mais sur une photo, il faut du 24 bits qui compresse moins que le jpeg.
Le jpeg compresse avec une perte de qualité, mais largement supportable la plupart du temps pour un affichage écran.
Le png est un format libre, pas le jpeg (maais ça, c'est du chipotage
, car il n'y a aucune restriction d'utilisation)
Il est donc possible de faire l'effet de survol au passage de la souris.
Entre jpeg et png, tout dépend de l'image que tu as: pour un dessin ou un graphique, je privilégie le png. Pour une photo complexe, je prends le jpeg.
Le png fait de la compression sans perte, mais sur une photo, il faut du 24 bits qui compresse moins que le jpeg.
Le jpeg compresse avec une perte de qualité, mais largement supportable la plupart du temps pour un affichage écran.
Le png est un format libre, pas le jpeg (maais ça, c'est du chipotage
, car il n'y a aucune restriction d'utilisation)Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
-
Fabrice.Tres.Net
- Tyrannosaurus Rex
- Messages : 2390
- Inscription : 26 juin 2006, 12:50
Dans le site cité en exemple une partie des animations sont faites en javascript. Mais il faut que le site reste exploitable sans javascript. En css, il est possible de faire des effets au passage de la souris sur des liens, ou même des blocs (sauf sur les navigateurs ne respectant pas les standards comme IE)
Je vous remercie tous les deux pour vos explications !
Au passage j'ai trouvé un tuto vidéo plutôt bien foutu qui explique comment réaliser un template dans Photoshop puis l'insérer dans son éditeur de pages (dreamweaver ici).
Cela pourra peut-être intéresser d'autres personnes.
Voici le lien :
http://www.just4geeks.net/fr/show_proje ... 2a0acdd46e
++
JPV56
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Au passage j'ai trouvé un tuto vidéo plutôt bien foutu qui explique comment réaliser un template dans Photoshop puis l'insérer dans son éditeur de pages (dreamweaver ici).
Cela pourra peut-être intéresser d'autres personnes.
Voici le lien :
http://www.just4geeks.net/fr/show_proje ... 2a0acdd46e
++
JPV56
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
-
Fabrice.Tres.Net
- Tyrannosaurus Rex
- Messages : 2390
- Inscription : 26 juin 2006, 12:50
Il ne faut surtout pas faire comme proposé dans le tutoriel. C'est la méthode à l'ancienne d'avant 2000!
On ne doit pas utiliser de tableaux pour faire la mise en forme de son site web. Depuis longtemps déjà, il faut utiliser le css en s'appuyant sur les div et autres balises html pour faire la présentation de son site web.
Il n'y a donc plus à découper son image de fond.
Lire http://css.alsacreations.com/Faire-une- ... s-tableaux
On ne doit pas utiliser de tableaux pour faire la mise en forme de son site web. Depuis longtemps déjà, il faut utiliser le css en s'appuyant sur les div et autres balises html pour faire la présentation de son site web.
Il n'y a donc plus à découper son image de fond.
Lire http://css.alsacreations.com/Faire-une- ... s-tableaux
Bonjour Fabrice très net !
Désolé si le tuto que j'ai mentionné est dépassé.
En tout cas il m'a bien servi pour apprendre à créer un template dans Photoshop.
Moi je voyais ça ainsi :
1. créer son modèle dans Photoshop
2. découper le modèle en tranches
3. importer les images + la page html dans son éditeur de pages web
4. disposer les images dans les blocs id crées initialement... (par contre je ne sais pas comment procéder).
Mais tu dis qu'il ne faut plus découper en tranche son modèle, comment faire alors ? Je place tout mon template dans le conteneur en tant qu'image de fond ???
Merci de m'éclairer.
++
JPV56
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Désolé si le tuto que j'ai mentionné est dépassé.
En tout cas il m'a bien servi pour apprendre à créer un template dans Photoshop.
Moi je voyais ça ainsi :
1. créer son modèle dans Photoshop
2. découper le modèle en tranches
3. importer les images + la page html dans son éditeur de pages web
4. disposer les images dans les blocs id crées initialement... (par contre je ne sais pas comment procéder).
Mais tu dis qu'il ne faut plus découper en tranche son modèle, comment faire alors ? Je place tout mon template dans le conteneur en tant qu'image de fond ???
Merci de m'éclairer.
++
JPV56
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
-
Fabrice.Tres.Net
- Tyrannosaurus Rex
- Messages : 2390
- Inscription : 26 juin 2006, 12:50
On abandonne les découpes!
2 grandes possibilités:
soit positionnement des éléments sur un dessin/image de fond
soit ajout de fond/ habillage selon les éléments (menu, bandeaux, corps principal)
Bien entendu, on peut combiner les 2!
Voici un cas où les blocs ont été positionnés par rapport à un dessin de fond :
http://www.geckozone.org/forum/viewtopic.php?t=70543
Et le cas 2 sous la forme d'un exercice/démonstration :
http://josar.free.fr/tutoKompozer/feuil ... o_css.html
2 grandes possibilités:
soit positionnement des éléments sur un dessin/image de fond
soit ajout de fond/ habillage selon les éléments (menu, bandeaux, corps principal)
Bien entendu, on peut combiner les 2!
Voici un cas où les blocs ont été positionnés par rapport à un dessin de fond :
http://www.geckozone.org/forum/viewtopic.php?t=70543
Et le cas 2 sous la forme d'un exercice/démonstration :
http://josar.free.fr/tutoKompozer/feuil ... o_css.html
Merci pour tes liens et tes indications.
Je pense que je vais devoir reprendre à zéro mon initiation au html et aux CSS car autant prendre de bonnes habitudes et travailler proprement.
Si je comprends bien on peut donc réaliser une mise en page sophistiquée rien qu'en utilisant les CSS.
Quelque chose m'échappe cependant.
Imaginons que je crée un template dans Photoshop (je sais j'insiste lol) et que je dessine mes boutons de menu (avec le texte dessus).
Si j'insère l'ensemble en tant qu'image de fond, les boutons de menu seront évidemment non réactifs. Les CSS permettent-elles de créer un lien sur ces boutons "aplatis" en image de fond (voire un effet de couleur selon la position de la souris) ou bien faut-il créer de toutes pièces les boutons dans son éditeur (balise li je crois + CSS pour mise en forme).
Je te remercie encore.
jpv56
A titre d'exemple voici ce que je réussis laborieusement à créer pour le moment (j'utilise Kompozer). Je pense que le code est à peu près propre mais le design est extrêmement banal et je souhaite le changer intégralement.
http://bibliotheambon.free.fr
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Je pense que je vais devoir reprendre à zéro mon initiation au html et aux CSS car autant prendre de bonnes habitudes et travailler proprement.
Si je comprends bien on peut donc réaliser une mise en page sophistiquée rien qu'en utilisant les CSS.
Quelque chose m'échappe cependant.
Imaginons que je crée un template dans Photoshop (je sais j'insiste lol) et que je dessine mes boutons de menu (avec le texte dessus).
Si j'insère l'ensemble en tant qu'image de fond, les boutons de menu seront évidemment non réactifs. Les CSS permettent-elles de créer un lien sur ces boutons "aplatis" en image de fond (voire un effet de couleur selon la position de la souris) ou bien faut-il créer de toutes pièces les boutons dans son éditeur (balise li je crois + CSS pour mise en forme).
Je te remercie encore.
jpv56
A titre d'exemple voici ce que je réussis laborieusement à créer pour le moment (j'utilise Kompozer). Je pense que le code est à peu près propre mais le design est extrêmement banal et je souhaite le changer intégralement.
http://bibliotheambon.free.fr
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
-
Fabrice.Tres.Net
- Tyrannosaurus Rex
- Messages : 2390
- Inscription : 26 juin 2006, 12:50
L'animation des sites web est faite à coup de css, et/ou à coup de javascript, ou flash ou...
Dans mon site tout est fait en css, et on peut faire mieux. Jette un oeil là http://www.csszengarden.com/tr/francais/ tu peux changer la représentation du site dans le menu de droite: son contenu ne change pas, juste la représentation est affectée.
Animer un bouton peut consister à deplacer le bouton, changer sa couleur de fond, ou changer l'image. On peut mettre une animation au survol, au clic,...
Tes boutons sont avant tout des liens, on peut masquer l'affichage du texte par le dessin d'un bouton.
Dans mon site tout est fait en css, et on peut faire mieux. Jette un oeil là http://www.csszengarden.com/tr/francais/ tu peux changer la représentation du site dans le menu de droite: son contenu ne change pas, juste la représentation est affectée.
Animer un bouton peut consister à deplacer le bouton, changer sa couleur de fond, ou changer l'image. On peut mettre une animation au survol, au clic,...
Tes boutons sont avant tout des liens, on peut masquer l'affichage du texte par le dessin d'un bouton.
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités