Bonsoir Messieurs - Dames !
 
voila je suis Webmaster d'un site extrêmement connu (ca c'est pas vrai LOL) qui dans sa première version était vraiment pas terrible dans le design,
 
le voici :
 
http://www.forum-vista.net/
 
je suis en train de refaire son aspect, dans un premier temps le site et ensuite le forum.
 
 
J'aurais besoin de vos avis de spécialistes (ou non spécialiste)
 
voici la nouvelle version :
 
http://www.forum-vista.net/template/
 
 
Merci de m'aider a établir une charte couleur / police / si vous trouvez que celle ci n'est pas présente.
 
 

Bonsoir,
voici l'avis d'un non spécialiste:
avec un écran en 1024*768, j'ai une barre de défilement hotizontale. C-a-d que la largeur est un peu grande à mon goût...
Je trouve que le site est trop fourni, dans le sens où l'exces d'infos a fait que je ne savais pas par quoi commencer.
Petit détail qui a son importance: je suis sous mac, donc peut-être du au fait de mes faibles connaissances en PC fait que je suis un peu étourdi par toutes les infos.
 
 
Voilà, bonne continuation...

Merci pour les remarques, c'est un site pour le publique PC, plus particulièrement Windows Vista, avec des tutoriaux, des téléchargements et un forum, c'est peut être pour cela que c'est un peu surchargé ....

salut.
 
Ton site m'a immédiatement fait penser à clubic (je pense que tu t'en es inspiré ! et il n'y a pas de mal).
Et en effet tu as trop d'infos sur 1 page, ou alors ce n'est pas assez aéré.
 
Je dirais :
 
- 1ere page axée sur 1 ou 2 choses (actus vista et tutos par exemple), et minimiser le reste pour aérer.
c'est primordial d'aérer. trop de choses font fuire le visiteur, moins de choses mettent en valeur le contenu (meme si c'est frustrant pour toi de ne pas déployer toute la richesse de ton site)
- "actualités de vista" => tu peux gagner énormément de place sur cette rubrique. moi je dirais : moitié moins large et ne laisser que le titre + 1 phrase + éventuellement la source ou la date pour chaque news.
- le design de tes blocs (accès au forum, tutos etc...) c'est prèsque bon, à fignoler (je n'aime pas la couleur verte de fond, ca fait vieillot. utilise des couleurs pastels, du giris, du bleuté et des pointillés. donne une couleur différente 1 ligne sur 2)
- utilise un fond pour ton site. dégraté discret ou lignes style site 2.0
- pour finir, ce qui va être le plus dur : la baniere et le menu c'est pas encore ca. la baniere fait amateur.
 
Sinon, tu as du contenu et le site est mis à jour : ça c'est parfait.
J'espère que mes critiques te paraitront bonnes !
 
Je reste par là pour suivre l'avencement... A bientot

Merci azgard56 j'apprécie tes remarques.
 
- premièrement pour l'aération du site, je propose de supprimer les accès directe au site, cela ne sert effectivement pas a grand chose, par contre je laisse les derniers message, c'est bon pour l'indexation et ça attire l'oeil sur le forum çà c'est quand même le forum le coeur du site.
 
- pour le dégradé techniquement c'est une image genre xxx de haut, 1 px de large répété horizontalement ? les lignes style 2.0 as tu un exemple je ne vois pas bien ?
 
- concernant la bannière alors la je vais avoir du mal, en faite c'est surtout le logo du site qui me déplaît mais je suis totalement incompétent ! je sais pas trop comment je vais procéder .... j'ai déjà fait des tentatives mais infructueuses .
 
je vais mettre en place un second essai dès que c'est fait je poste le lien tu me donneras ton avis.
 
en tout cas je te remercie.

Salut !
 
pour un fond en dégradé c'est effectivement une image qui se répète en largeur. Mais 2 précautions : il faut qu'elle fasse plus d'1 px car le jpg va mal diférentier les teintes sur si peu de surface. je te conseille 5px de large. Et aussi, quand tu enregistre ton image depuis photoshop, fais bien "enregistrer pour le web", car tu peux lui donner une meilleure qualité.
Si tu veux un exemple, direction clubic, click droit sur le dégradé et "afficher l'image de fond".
 
Pour des lignes de biais style 2.0, c'est un petit carré qui se répète horizontalement et verticalement.
un exemple : le même click droit, afficher l'image de fond sur campingescale.com ou hersandesign.com
 
Tu peux aussi mettre un ombre sur les cotés de ton site. Il s'agit encore d'une petite image qui se répète dans des divs qui entourent le site.
 
Pour la banniere, c'est souvent le plus dur ! si tu mets un logo + slogant, faut que ça claque, inspire toi des polices, couleurs et tailles des sites 2.0. sinon tu peux mettre un fond comme le fond d'ecran vista bleu / vert avec les lignes... essaie de trouver des sites qui peuvent t'inspirer.
 
Bon courage !

Ok je vois pour les lignes, je vais faire un test, pour l'ombre je voulais le faire mais n'avais pas réussi a l'installer, en effet je fonctionne avec un tableau centré et je ne vois pas comment sur la partie extérieur placer l'ombrage ... ?

Il vaut mieux que t'utilise des div plutot que des tableaux, c'est bien plus facil à gérer.
 
Ce que je te propose : remplacer tous tes tableaux par des divs. et pour t'aider, je peux te faire la div centrale avec les ombres et le fond comme ca tu vera bien comment ca marche.
 
Pour faire le point : tu as une base de données derriere ton site ? tu a une interface administrateur ou tu peux modifier simplement tout ton contenu ?
 
++

Du même avis que zagard56, avant de changer ton design, commence par le code. Ensuite il sera très rapide et très facile de moduler ton site à ton aise.

Oullla je n'ai jamais travaillé avec Les div j'ai regardé sur campingescale.com intégré le source dans dreamweaver et je n'obtiens rien de mis en forme, je vois pas comment tu arrive a travailler avec les div ! c'est quoi la technique ?

normal : toute la mise en forme est dans la feuille css qu'il faut joindre à tes pages. C'est ca le principe : tu n'aura plus qu'a modifier le css après.
 
ajoute ça en haut de ta page entre <head> et </head> :
 
<link rel="Stylesheet" type="text/css" href="style.css">
 
et créé un feuille "style.css" dans le meme dossier que ton site.
exemple de feuille de style : http://www.campingescale.com/style.css

Haa oui en effet sans la feuille de style ....  
 
bon ok je vois ! par contre pouvez vous me dire quel sont les avantages par rapport a la technique des tableaux ??? car n'ayant jamais travailler avec cela je ne vois pas l'utilité !

http://forum.hardware.fr/hfr/Graph [...] 9726_1.htm

http://forum.hardware.fr/hfr/Graph [...] 9082_1.htm

ok ok j'ai pas TOUT lu mais visiblement les tableaux c'est la old school pas d'avenir, et c'est plus lourd !
merci pour cette remarque par contre je vais pas débattre mais entre tableau et CSS mais moi j'intègre de la css dans mes tableaux !!! lol  
 
bon j'arrête la !
 
j'ai un peux les boules pour la structure principal du site ! surtout le bandeau haut j'ai passé au moins une après midi pour que se soit optimisé.
 
Mais positivons je vais essayer cela ce soir faire quelques tests !
 
 
par contre j"image que ces données : p pour paragraphe, address pour une adresse, fieldset pour un group de champs de formulaires
 
sont la base de la CSS.
 
quelles sont les balises de base au quelle je dois me cantonnée au moins au début j'imagine qu'il y en a moulte !
 

Essaye de lire ce lien complètement : http://css.alsacreations.com/Faire [...] -standards

ok merci? je suis maintenant convaincu !
mais reste le plus dur ...  
 
en tout cas c'est vraiment sympa tout ce que vous me donnez la

 
Tu ne connais pas les balises ?    
 
Tu as fait ton site sans regarder le code ?
 
Si c'est le cas, il y a une étape à franchir avant de faire un beau site : coder sois-même et proprement (en css). Tu y arrivera dans quelques jours si tu t'y mets bien.
Pour t'entrainer, fait une nouvelle page blanche et une page css. ensuite fait des divs dans la page blanche en leur attribuant seulement un identifiant ou une classe (id="menu" ou class="menu" ), mais aucun style, et tu mets tout le style dans la feuille css.
ammuse toi à mettre 2 divs à coté (avec float:left ou float:right), mettre des div dans une div, centrer les div (margin:auto), mettre le texte d'une certaine div en rouge etc...
créé tes divs en mode code et regarde le résultat en mode design ou sur firefox, c'est mieux.
après tu refera ton site en 10 min sans problème avec div et css.
 
ps : des balises il y'en a quelques unes, et tu les connaitra par coeur très vite.

non non absolument pas je connais bien l'html de l'ancienne école !
mais pas avec le codage CSS ! les balises "address" et certaines autres ne me parlent pas beaucoup ! en bref je ne les connaissaient pas !

il n'y a pas de balise address. ca doit etre un exemple que tu as lu.
 
tu peux mettre :
 
pour une balise...
p{
color:blue;
}
 
pour une class...
.nom_class{
color:blue;
}
 
pour un id...
#nom_id{
color:blue;
}
 
"address" est une fome générale pour dire "p" ou ".nom_class" ou "#nom_id"
 
avec css il n'y a rien de nouveau rassure toi. juste les balises html et le style.

La balise address existe, elle sert à baliser l'adresse mail du webmaster.

ah bon, j'ai jamais vu ca.
 
ca sert pas a grand chose !

C'est toi qui voit, mais maintenant tu sais

oui, je suis allé voir ton lien sur le xhtml.
 
bref

OK ! je comprends mieux !
dans le doute je vous ferais voir le code que j'aurai pondu
 
alllala la programmation çà change tout le temps ... quand on crois commencer a être un peu a l'aise bing c'est déjà trop tard !! se serait pas possible de figer quelques année l'évolution de l'info ???

Hello alors , je viens vous donnez de mes nouvelles par rapport a mon apprentissage du CSS2 !
 
je me suis rendu compte qu'effectivement on gagnait pas mal de ligne de code avec les <div>,<p> etc !
par contre je me suis aussi rendu compte que j'avais perdu la moitié de ce qui me restais en cheveux en essayant de reproduire mon bandeau haut !
 
je commence a être persuadé que l'on ne peux pas le reproduire sans faire de tableau !
vous me le confirmé ? ou dois-je persévérer ???
 
Et une autre chose si une âme charitable pouvait m'expliquer clairement le dégradé de <div><ul><il> bla bla </il></ul></div>
 
avec des mots simples ...

Salut !
 
pour le div, ul, li :
 
<div> est un carré, un espace (comme une cellule d'un tableau), tu connais ca maintenant.
<ul> annonce une liste à puce, et </ul> la referme.
<li>bla bla </li> représente chaque puce avec sa phrase.
 
donc :
      <ul>
            <li>forum</li>
            <li>news</li>
            <li>contact</li>
       </ul>
va donner :
 - forum
  - news
  - contact
 
c'est tout ! c'est souvent employé pour faire un menu.
après en css tu peux facilement enlever les puces ou les changer, ou rendre la liste horizontale ( ul{float: left;} je crois ).
 
 
Pour la bannière :
Je ne voi pas quel est le problème ? tu met l'image dans une div, comme si tu la mettait dans une cellule de tableau...
 
 
++

ok merci pr le div ul et il c'est ce qu'il me semblait et en m'expliquant comment la faire horizontal tu élucides la question qui suivant !!  
 
pour le bandeau haut en faite ce n'est pas une image mais une mutitude d'image répété dans des cellules pr gagner un peu de ko
 
voici le code du bandeau haut :
 

omg...

omg ???  
 
et je rajoute la questions des balises sur la dt .... elle se place ou et elle sert a quoi par rapport a div ul il ?
 
merci de votre aide et patience !

dt et dd servent initialement à mettre un mot puis à le définir (d'après une petite recherche sur google) mais on peut aussi s'en servir pour faire un menu.
 
j'ai utilisé ca pour campingescale.com afin de faire un menu déroulant, mais si tu n'as pas besoin d'un menu déroulant fais en un beaucoup plus simple et sans javascript (tu en trouveras dans alsacreation ou ailleurs).
 
pour ta bannière : pas besoin de faire toutes ces images.
et pour la récupérer : tu fais un imprim écran ça ira très bien. (dans l'avenir, pense à garder toutes tes sources d'images pour pouvoir les modifier apres)
 
Bon, j'attend que t'ai tout mis en forme comme y faut !