Améliorer un site [Résolu]

Réponse 1 / 21

bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention 2 409

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

Réponse 2 / 21

yrakcaz Messages postés 97 Date d'inscription Statut Membre Dernière intervention 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++

julow Messages postés 2198 Date d'inscription Statut Membre Dernière intervention 244

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!

Réponse 3 / 21

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.

Hazïel

Salut tu peux nous dire un peu + sur ce que tu dois faire comme site stp.

=) =) =)

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.

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..

julow Messages postés 2198 Date d'inscription Statut Membre Dernière intervention 244 > 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!

Réponse 4 / 21

Hazïel

tout à fait d'accord avec toi julow =)

Réponse 5 / 21

débutante

ouais bah ca m'aide pas du tout mais je vais me débrouiller.

merci quand meme.

Réponse 6 / 21

yrakcaz Messages postés 97 Date d'inscription Statut Membre Dernière intervention 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+++

Réponse 7 / 21

julow Messages postés 2198 Date d'inscription Statut Membre Dernière intervention 244

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!

Réponse 8 / 21

macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 9 / 21

bloodyweld Messages postés 72 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 10 / 21

débutante

oui il est en ligne. dumoins la version provisoire.

http://www.nautiscaphe.com

soyez indulgent c'est mon premier site.

Réponse 11 / 21

débutante

bref, je decroche pour aujourd'hui j'en ai marre là.

Réponse 12 / 21

bloodyweld Messages postés 72 Date d'inscription Statut Membre Dernière intervention 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.

débutante

oui je pense que tu as raison mais j'y arriverai pas seule.

Réponse 13 / 21

débutante

j'ai besoin d'aide je suis completement perdue.

Hazïel

Salut déjà tu voudrais faire quoi sur ton site qu'est ce que tu veux changer???

smoutsmout Messages postés 160 Date d'inscription Statut Membre Dernière intervention > 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.

Hazïel > smoutsmout Messages postés 160 Date d'inscription Statut Membre Dernière intervention

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"><a href="accueil.htm">Accueil</a>
<img src="images/arrow.gif" width="20" height="10"><a href="societe.htm">Société</a>
<img src="images/arrow.gif" width="20" height="10"><a href="services.htm">Services</a>
<img src="images/arrow.gif" width="20" height="10"><a href="produits.htm">Produits</a>
<img src="images/arrow.gif" width="20" height="10"><a href="environnement.htm">Environnement</a>
<img src="images/arrow.gif" width="20" height="10"><a href="bureau.htm">Bureau
d'études</a> <img src="images/arrow.gif" width="20" height="10"><a href="Partenaires.htm">Partenaires</a>
<img src="images/arrow.gif" width="20" height="10"><a href="contact.php">Nous
contacter</a> <img src="images/arrow.gif" width="20" height="10"><a href="news.php">News</a>
</div>
<div>
 
<blockquote>
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 : 
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
 - Amarrages portuaires sans chaînes principales
- Balisage de sécurité autour des bâtiments
- Ancrages des bateaux à l'extérieur
des ports
- Ancrage des bateaux de plongée
- Arrimage des barges de travail
- Arrimage des pontons flottants
- Travaux sous marins
- Génie civil et militaire
- Evènementtiel (régate et organisation
nautique)
- Société phares et balises
- Amarrage de filets antipolution et de protection
contre les méduses
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</div>
</td>
</tr>
<tr valign="bottom">
<td height="27"><div align = 'center'>2007 © Nautiscaphe. All rights are reserved.
</div></td>
</tr>
</table>
</body>
</html>

macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention 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...

macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention 89 > macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention

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).

Réponse 14 / 21

bibs37 Messages postés 71 Date d'inscription Statut Membre Dernière intervention 5

coucou

voici une ptite page sympa qui explique un peu la mise en page avec du css

http://www.pompage.net/IMG/html/page_modele10.html

si ça peut t'aider...

Réponse 15 / 21

bloodyweld Messages postés 72 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 16 / 21

smoutsmout Messages postés 160 Date d'inscription Statut Membre Dernière intervention

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.

@ +.

Hazïel

pas de souci si tu as besoin d'aide on est là pose tes questions =)=)

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"><a href="accueil.htm">Accueil</a>
<img src="images/arrow.gif" width="20" height="10"><a href="societe.htm">Société</a>
<img src="images/arrow.gif" width="20" height="10"><a href="services.htm">Services</a>
<img src="images/arrow.gif" width="20" height="10"><a href="produits.htm">Produits</a>
<img src="images/arrow.gif" width="20" height="10"><a href="environnement.htm">Environnement</a>
<img src="images/arrow.gif" width="20" height="10"><a href="bureau.htm">Bureau
d'études</a> <img src="images/arrow.gif" width="20" height="10"><a href="Partenaires.htm">Partenaires</a>
<img src="images/arrow.gif" width="20" height="10"><a href="contact.php">Nous
contacter</a> <img src="images/arrow.gif" width="20" height="10"><a href="news.php">News</a>
</div>
<div>
 
<blockquote>

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 : 
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<ul type='square'><li>Amarrages portuaires sans chaînes principales</li></ul>
<ul type='square'><li>Balisage de sécurité autour des bâtiments</li></ul>
<ul type='square'><li>Ancrages des bateaux à l'extérieur
des ports</li></ul>
<ul type='square'><li>Ancrage des bateaux de plongée</li></ul>
<ul type='square'><li>Arrimage des barges de travail</li></ul>
<ul type='square'><li>Arrimage des pontons flottants</li></ul>
<ul type='square'><li>Travaux sous marins</li></ul>
<ul type='square'><li>Génie civil et militaire</li></ul>
<ul type='square'><li>Evènementtiel (régate et organisation
nautique)</li></ul>
<ul type='square'><li>Société phares et balises</li></ul>
<ul type='square'><li>Amarrage de filets antipolution et de protection
contre les méduses</li></ul>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</div>
</td>
</tr>
<tr valign="bottom">
<td height="27"><div align = 'center'>2007 © Nautiscaphe. All rights are reserved.
</div></td>
</tr>
</table>
</body>
</html>

Réponse 17 / 21

debutante

merci a vous pour vos reponses.

Réponse 18 / 21

débutante

grace a certains elements de reponse j'ai peu améliorer certaines choses.

Réponse 19 / 21

bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention 2 409

--

le 'www' est fait aussi pour communiquer, partager et échanger, non ?

Réponse 20 / 21

alphonsenational Messages postés 8 Date d'inscription Statut Membre Dernière intervention

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

Améliorer un site

21 réponses

Votre réponse

Discussions similaires