Améliorer un site

Résolu
débutante -  
bg62 Messages postés 23432 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,

j'ai créé un site qui n'est pas terrible à mon avis, normal pour une novice comme moi.

Mes connaissances sont tres limitées et je voudrais savoir si quelqu'un accepterais de m'aider à améliorer mon travail, à titre gratuit biensur.

Merci pour vos réponses.
Configuration: Windows Vista
Internet Explorer 7.0

21 réponses

  • 1
  • 2
  1. bg62 Messages postés 23432 Date d'inscription   Statut Modérateur Dernière intervention   2 435
     
    bonjour
    je viens de mettre ceci sur un autre post ... et je pense que cela pourrait te concerncer également : 
    bonjour
il a parfaitement raison ...
mais en plus, personnellement, j'ajouterai : " inscris-toi " ce serait quand même mieux, non ?
ne serait-ce que par respect ou politesse vis à vis de ceux qui voudront t'aider ...

    @+
    b g
    2
  2. yrakcaz Messages postés 113 Statut Membre 30
     
    Essaye ce site :
    https://openclassrooms.com/fr/
    Moi j'apprend la dessus, les tuto sont extras.
    Sinon essaye de trouver des modeles de sites gratuits et de les modifiés ais c'est pas tres drole XD
    A++
    0
    1. julow Messages postés 2365 Statut Membre 248
       
      Tu as aussi le site Alsa creation avec des tuto, un forum... Pour programmer en HTML, CSS, PHP, javascipt... Et tu y trouveras aussi des scripts sympa pour améliorer le visuel!
      0
  3. débutante
     
    je vais voir mais je doute que cela m'aide je suis completement larguée, et je dois avoir fini dans deux semaines.
    0
    1. Hazïel
       
      Salut tu peux nous dire un peu + sur ce que tu dois faire comme site stp.

      =) =) =)
      0
      1. débutante > Hazïel
         
        c'est un site pour une entreprise, donc il contient des pages simples en html, une pertie news en php, et une partie "administrateur" pour gerer les news (ajouter, modifier et supprimer les news de la bese dans laquelle elles sont stockées).

        Mais ce qui me pose probleme c'est le design (pourri, il faut dire ce qui est) et le css (auquel je ne comprend rien meme avec des tutoriels).

        Je sais pas trop si je me suis bien expliquée, mais en gros c'est ca.
        0
      2. Hazïel > débutante
         
        Pour le design après il faut juste se mettre un peu au html ou sinon tu peux essayer avec php comme tu à l'air dans avoir dans tes pages. Pour ce qi est du css cela n'est pas compliquer au début (...) on gros il te permet de changer certaines parti de ton interface juste en modifiant une seul chose dans ton code css.
        Par exemple si tu veux modifier la police de toute ta page au lieu de rajouter dans ton code html ton option pour changer la police, le css de permet de le faire en une seul fois.

        Enfin je suis pas un expert en css car je ne l'utilise pas trop juste en cours car on est obligé.

        Va sur le site du zéro tu verra normalement c'est bien expliquer et plus clair que mes explication en tout cas si tu veux un peu d'aide pour ce soir je peux peut être essayer de t'aider.
        tiens moi au courant..
        0
      3. julow Messages postés 2365 Statut Membre 248 > Hazïel
         
        Coté design te fais pas chier! Crée un WallPaper avec The Gimp (en utilisant des Brush, des dégradés...) qui correspondra à ta page (genre avec une séparation coloré entre texte, menu...) et applique là comme background! Si tu es assez doué tu peux arriver à donner l'impression d'avoir une page de pro juste avec quelques effets sur ton background lol... Comme ça tu auras le temps d'apprendre le CSS pendant ce temps!
        0
  4. Hazïel
     
    tout à fait d'accord avec toi julow =)
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. débutante
     
    ouais bah ca m'aide pas du tout mais je vais me débrouiller.

    merci quand meme.
    0
  7. yrakcaz Messages postés 113 Statut Membre 30
     
    Je te jure essaye siteduzero c'est le meilleur jai fais un tres beau site en partant de rien en une semaine lol.
    Et sinon bh je peux rien pour toi sorry, a+++
    0
  8. julow Messages postés 2365 Statut Membre 248
     
    Yrakcaz a raison, le siteduzero est très bien! Sinon tu as aussi Developpez qui offre de très bon tuto avec exemples dans le même style!
    0
  9. macgawel Messages postés 676 Statut Membre 89
     
    Pour le design, un "truc" qui peut t'aider à démarrer :
    Télécharge un CMS - si possible simple - et un(des) template(s).
    En étudiant un peu le code, tu peux vite te faire une idée du fonctionnement du CSS. Et tu peux toujours recycler les éléments graphiques (si le template est libre)...

    Sinon, pour le CSS, Alsacreation propose des tutoriels intéressants.

    Le principe du CSS, en quelques lignes :
    Il s'agit de séparer l'apparence.signifier le sens (h1 = titre, em = emphase, ...)
    L'apparence en elle-même (le titre est centré et écrit en rouge), on ne la définit pas dans le code HTML, mais à part, dans le CSS.
    Ce qui permet aussi de définir des balises personnelles, au moyen des classes et/ou Id.

    Après, le css est orienté objet. Il utilise donc un système d'héritage, entre autres. Et il permet pas mal de choses, au niveau dynamique et/ou graphisme. Mais pour commencer, il faut faire simple et utiliser un squelette (comme ceux qu'on trouve sue alsacreation) et déjà pas mal.
    0
  10. bloodyweld Messages postés 73 Statut Membre 14
     
    Mais le mieux serait quand même de pouvoir le voir ce site.
    Il est en ligne ? Tu peux en faire un screenshot sinon.
    C'est impossible de te conseiller sans visuel.
    0
  12. débutante
     
    bref, je decroche pour aujourd'hui j'en ai marre là.
    0
  13. bloodyweld Messages postés 73 Statut Membre 14
     
    Je veux bien être indulgente mais faut revoir complètement les fonds et les couleurs.
    La 'bannière' pixélisé c'est pas top.
    Je ne sais pas si c'est fait exprès mais d'ailleurs cette image reste très abstraite, il m'a fallu un petit moment pour comprendre de quoi il s'agissait.
    Je propose que tu fasses au bannière qui s'intègre à un fond.
    Peut être mettre de la texture sur les fonds.

    Les couleurs gagneraient à être moins foncé. On n'a pas envie de lire le début du texte car il est dans une zone sombre (visuellement c'est dérangeant).

    Dans la navigation les news devrait être après l'accueil et non à la fin et puis le rouge fait un peu tache, il faudrait trouver une couleur mieux adapté.

    Le copyright est trop collé au cadre violet, il faurdait peut être le centré en bas.

    Pour t'aider pour les couleurs va faire un tour sur ce site
    http://www.mlb-design.net/chromatique.htm

    voilà mais ce ne sont que des conseils qui n'engage que moi et mon expérience personnelle du graphisme.
    0
    1. débutante
       
      oui je pense que tu as raison mais j'y arriverai pas seule.
      0
  14. débutante
     
    j'ai besoin d'aide je suis completement perdue.
    0
    1. Hazïel
       
      Salut déjà tu voudrais faire quoi sur ton site qu'est ce que tu veux changer???
      0
      1. smoutsmout Messages postés 160 Statut Membre > Hazïel
         
        débutante devient "smoutsmout".

        Beh en fait y'a qu'a voir comment il est fait, il faut reprendre plein de choses comme le design et le css.

        Mais je suis incapable de m'en sortr seule, et je ne trouve aucune aide réelle et gratuite surtout.
        0
      2. Hazïel > smoutsmout Messages postés 160 Statut Membre
         
        essai sa pour ton code j'ai pas fait grand chose mais au niveau des couleur sa devrait être un peu plus clair




        <html>
        <head>
        <title>Accueil</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <link rel="stylesheet" href="style.css" type="text/css">
        <meta name="robots" content="noindex, nofollow">
        </head>

        <body bgcolor="#1875AE">
        <table id="exterieur" width="67%" border="0" cellspacing="0" align="center" height="89%" bgcolor="#FF9900" background="images/fond.jpg">
        <tr height="535" width="80%" valign="middle">
        <td id="baniere" height="183"><img src="images/banniere_site.jpg" width="950" height="216"></td>
        </tr>
        <tr>
        <td height="502" width="19%">
        <div align = "center"> <img src="images/arrow.gif" width="20" height="10"><b><a href="accueil.htm"><font face="Arial, Helvetica, sans-serif" size="2">Accueil</font></a></b>
        <img src="images/arrow.gif" width="20" height="10"><b><a href="societe.htm"><font face="Arial, Helvetica, sans-serif" size="2">Société</font></a></b>
        <img src="images/arrow.gif" width="20" height="10"><b><a href="services.htm"><font face="Arial, Helvetica, sans-serif" size="2">Services</font></a></b>
        <img src="images/arrow.gif" width="20" height="10"><b><a href="produits.htm"><font face="Arial, Helvetica, sans-serif" size="2">Produits</font></a></b>
        <img src="images/arrow.gif" width="20" height="10"><b><a href="environnement.htm"><font face="Arial, Helvetica, sans-serif" size="2">Environnement</font></a></b>
        <img src="images/arrow.gif" width="20" height="10"><b><a href="bureau.htm"><font face="Arial, Helvetica, sans-serif" size="2">Bureau
        d'études</font></a></b> <img src="images/arrow.gif" width="20" height="10"><b><a href="Partenaires.htm"><font face="Arial, Helvetica, sans-serif" size="2">Partenaires</font></a></b>
        <img src="images/arrow.gif" width="20" height="10"><b><a href="contact.php"><font face="Arial, Helvetica, sans-serif" size="2">Nous
        contacter</font></a></b> <img src="images/arrow.gif" width="20" height="10"><b><a href="news.php"><font face="Arial, Helvetica, sans-serif" size="2">News</font></a></b>
        </div>
        <div>
        <p> </p>
        <blockquote>
        <p>Nous avons des cultures différentes, mais la même envie
        de protéger notre environnement naturel. La société
        NAUTISCAPHE apporte une solution et la met au service des gens soucieux
        d'améliorer la qualité des fonds marins : </p>
        <blockquote>
        <blockquote>
        <blockquote>
        <blockquote>
        <blockquote>
        <blockquote>
        <blockquote>
        <p> - Amarrages portuaires sans chaînes principales</p>
        <p>- Balisage de sécurité autour des bâtiments</p>
        <p>- Ancrages des bateaux à l'extérieur
        des ports</p>
        <p>- Ancrage des bateaux de plongée</p>
        <p>- Arrimage des barges de travail</p>
        <p>- Arrimage des pontons flottants</p>
        <p>- Travaux sous marins</p>
        <p>- Génie civil et militaire</p>
        <p>- Evènementtiel (régate et organisation
        nautique)</p>
        <p>- Société phares et balises</p>
        <p>- Amarrage de filets antipolution et de protection
        contre les méduses</p>
        </blockquote>
        </blockquote>
        </blockquote>
        </blockquote>
        </blockquote>
        </blockquote>
        </blockquote>
        </blockquote>
        </div>
        </td>
        </tr>
        <tr valign="bottom">
        <td height="27"><div align = 'center'><font size="2">2007 © Nautiscaphe. All rights are reserved.
        </font></div></td>
        </tr>
        </table>
        </body>
        </html>
        0
      3. macgawel Messages postés 676 Statut Membre 89 > Hazïel
         
        Un exemple de design "CSS" à partir du code d'Haziel : 
        <html>
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="skin.css" type="text/css">
<meta name="robots" content="noindex, nofollow">
<link type="text/css" rel="stylesheet" href="skin.css" />
</head>

<body>
<div id="conteneur">
<div id="header">
<a href="accueil.htm">Accueil</a>
</div>
<div id="menu">
<ul>
<li><a href="accueil.htm">Accueil</a></li>
<li><a href="news.php">News</a></li>
<li><a href="societe.htm">Societé</a></li>
<li><a href="accueil.htm">Services</a></li>
<li><a href="produits.htm">Produits</a></li>
<li><a href="environnement.htm">Environnement</a></li>
<li><a href="bureau.htm">Bureau&nbsp;d'études</a></li>
<li><a href="partenaires.htm">Partenaires</a></li>
<li><a href="contact.php">Nous&nbsp;contacter</a></li>
</ul>
</div>
<div id="principal">
<p>Nous avons des cultures différentes, mais la même envie
de protéger notre environnement naturel. La société
NAUTISCAPHE apporte une solution et la met au service des gens soucieux
d'améliorer la qualité des fonds marins : </p>
<ul>
<li>Amarrages portuaires sans chaînes principales</li>
<li>Balisage de sécurité autour des bâtiments</li>
<li>Ancrages des bateaux à l'extérieur des ports</li>
<li>Ancrage des bateaux de plongée</li>
<li>Arrimage des barges de travail</li>
<li>Arrimage des pontons flottants</li>
<li>Travaux sous marins</li>
<li>Génie civil et militaire</li>
<li>Evènementtiel (régate et organisation
nautique)</li>
<li>Société phares et balises</li>
<li>Amarrage de filets antipolution et de protection
contre les méduses</li>
</ul>
</div>
<div id="footer">
2007 © Nautiscaphe. All rights are reserved.
</div>
</div>
</body>
</html>

        Feuille de style skin.css : 
        body {
	background-color : #1875AE;
}
ul {
	list-style: none;
	margin:0;
	padding:0;
}
#conteneur {
	width:70%;
	text-align:center;
	background-color:#FF9900;
	background-image:url("images/fond.jpg");
	margin-left:15%;
	overflow:visible;
}

#header {
	vertical-align:middle;
}
#header a {
	display:block;
	background-image:url("images/banniere_site.jpg");
	background-position:up center;
	height:523px;
	width:100%;
	text-indent:-1000px;
}
#menu {
	width:100%;
	margin:0;
	padding:0;
}
#menu li {
	display:inline;
	background-image:url("images/arrow.gif");
	padding:0 0 0 20px;
	margin:0;
}
#menu a {
	text-decoration : none;
	font-family :arial,helvetica,sans-serif;
	font-weight:bold;
	font-size:80%;
}

#principal {
	margin:2em 	4em;
}
#principal ul {
	list-style:outside;
	text-align:left;
	margin-left:20%;
}
#principal p {
	line-height:200%;
}

#footer {
	padding: 2em 0 0 0;
	font-size:small;
}

        Les explications suivent...
        0
      4. macgawel Messages postés 676 Statut Membre 89 > macgawel Messages postés 676 Statut Membre
         
        Décomposition de ta page :
        body => c'est la page en elle-même (en bleu).
        conteneur => C'est le bloc qui va contenir tout le texte (en orange).

        Ensuite, on a un design "classique". On décompose la page en :
        - header => contient la bannière.
        - menu => contient le menu
        - principal => contient le texte principal
        - footer => contient le footer (le copyright et autre infos)

        Basiquement, un menu est une liste d'objets, donc on utilise ce qui est à disposition : UL (déclaration de la liste) et LI (élément d'une liste)
        Tous les élements de mise en page (y compris les images) sont gérées par le CSS.
        Je ne pense pas que la page html nécessite d'autre explication.

        Pour le CSS :
        #conteneur définit l'élément unique identifié par id="conteneur"

        Au niveau du header :
        Traditionnellement, si on clique sur la bannière, ça nous ramène à la page d'accueil.
        => J'ai mis un lien.
        display:block; => Normalement, le lien est défini par la taille du texte (balise inline). Pour que toute la bannière soit cliquable, on commence par dire que le lien est un bloc.
        La taille (height et width) défiissent donc une zone cliquable.
        text-indent:-1000px; => Permet de "cacher" le texte du lien en le mettant à 1000 pixels à gauche (hors écran).

        Au niveau du menu :
        C'est un menu horizontal.
        Normalement, une LIste, c'est un bloc. Pour afficher les élements sur une même ligne, je défini
        display:inline;
        Le padding de 20px sert à afficher l'image de fond sans qu'elle soit recouverte par les liens (note : si tu mets le padding dans le #menu a tu pourras cliquer sur l'image de fond).
        0
  16. bloodyweld Messages postés 73 Statut Membre 14
     
    Occupe toi déjà de ce dont je t'ai parlé ensuite on verra.
    Dans ce que je t'ai dis il y a des choses rapides et simples à faire.
    Commence par ces petits changements et ensuite tu y verras plus clair.
    Le graphisme c'est aussi instinctif.
    0
  17. smoutsmout Messages postés 160 Statut Membre
     
    Merci

    En effet Hazïel, c'est un peu plus clair.

    Je fais une pause là, et apres je m'attaque aux petits changements de bloodywel.

    @ +.
    0
    1. Hazïel
       
      pas de souci si tu as besoin d'aide on est là pose tes questions =)=)
      0
    2. Hazïel
       
      <html>
      <head>
      <title>Accueil</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <link rel="stylesheet" href="style.css" type="text/css">
      <meta name="robots" content="noindex, nofollow">
      </head>

      <body bgcolor="#1875AE">
      <table id="exterieur" width="67%" border="0" cellspacing="0" align="center" height="89%" bgcolor="#FF9900" background="images/fond.jpg">
      <tr height="535" width="80%" valign="middle">
      <td id="baniere" height="183"><img src="images/banniere_site.jpg" width="950" height="216"></td>
      </tr>
      <tr>
      <td height="502" width="19%">
      <div align = "center"> <img src="images/arrow.gif" width="20" height="10"><b><a href="accueil.htm"><font face="Times New Roman" size="2">Accueil</font></a></b>
      <img src="images/arrow.gif" width="20" height="10"><b><a href="societe.htm"><font face="Times New Roman" size="2">Société</font></a></b>
      <img src="images/arrow.gif" width="20" height="10"><b><a href="services.htm"><font face="Times New Roman" size="2">Services</font></a></b>
      <img src="images/arrow.gif" width="20" height="10"><b><a href="produits.htm"><font face="Times New Roman" size="2">Produits</font></a></b>
      <img src="images/arrow.gif" width="20" height="10"><b><a href="environnement.htm"><font face="Times New Roman" size="2">Environnement</font></a></b>
      <img src="images/arrow.gif" width="20" height="10"><b><a href="bureau.htm"><font face="Times New Roman" size="2">Bureau
      d'études</font></a></b> <img src="images/arrow.gif" width="20" height="10"><b><a href="Partenaires.htm"><font face="Times New Roman" size="2">Partenaires</font></a></b>
      <img src="images/arrow.gif" width="20" height="10"><b><a href="contact.php"><font face="Times New Roman" size="2">Nous
      contacter</font></a></b> <img src="images/arrow.gif" width="20" height="10"><b><a href="news.php"><font face="Times New Roman" size="2">News</font></a></b>
      </div>
      <div>
      <p> </p>
      <blockquote>
      <p>
      <font face="Times New Roman" size="2">Nous avons des cultures différentes, mais la même envie
      de protéger notre environnement naturel. La société
      NAUTISCAPHE apporte une solution et la met au service des gens soucieux
      d'améliorer la qualité des fonds marins : </p>
      <blockquote>
      <blockquote>
      <blockquote>
      <blockquote>
      <blockquote>
      <blockquote>
      <blockquote>
      <p><ul type='square'><li>Amarrages portuaires sans chaînes principales</li></ul></p>
      <p><ul type='square'><li>Balisage de sécurité autour des bâtiments</li></ul></p>
      <p><ul type='square'><li>Ancrages des bateaux à l'extérieur
      des ports</li></ul></p>
      <p><ul type='square'><li>Ancrage des bateaux de plongée</li></ul></p>
      <p><ul type='square'><li>Arrimage des barges de travail</li></ul></p>
      <p><ul type='square'><li>Arrimage des pontons flottants</li></ul></p>
      <p><ul type='square'><li>Travaux sous marins</li></ul></p>
      <p><ul type='square'><li>Génie civil et militaire</li></ul></p>
      <p><ul type='square'><li>Evènementtiel (régate et organisation
      nautique)</li></ul></p>
      <p><ul type='square'><li>Société phares et balises</li></ul></p>
      <p><ul type='square'><li>Amarrage de filets antipolution et de protection
      contre les méduses</font></li></ul></p>
      </blockquote>
      </blockquote>
      </blockquote>
      </blockquote>
      </blockquote>
      </blockquote>
      </blockquote>
      </blockquote>
      </div>
      </td>
      </tr>
      <tr valign="bottom">
      <td height="27"><div align = 'center'><font size="2">2007 © Nautiscaphe. All rights are reserved.
      </font></div></td>
      </tr>
      </table>
      </body>
      </html>
      0
  19. débutante
     
    grace a certains elements de reponse j'ai peu améliorer certaines choses.
    0
  20. bg62 Messages postés 23432 Date d'inscription   Statut Modérateur Dernière intervention   2 435
     
    --

    le 'www' est fait aussi pour communiquer, partager et échanger, non ?
    0
  21. alphonsenational Messages postés 8 Statut Membre
     
    bonjour j'ai pu monter un site pour ma compagnie mais ce site est très loin de nos attentes d'un site attractif et dynamique, je souhaiterais que vous me donniez vos avis d'expert en la matière, et comment je pourrais l'améliorer.
    je suis un peu prix par la gorge car je suis assigné à résultat. www.ivbcentre.net
    c'est l'adresse.
    je suis new en html

    SOS Help me please
    0
  • 1
  • 2

Discussions similaires

Site fiable de contrefaçon
AhmedAMG -
Raymond PENTIER -

2 réponses