Page 2 sur 2

Publié : 21 nov. 2008, 08:41
par chinon37
L'image de fond reste trop grosse: 438 Ko. Pour les connexions bas débit, il y en a peut -être à Etang, le chargement de la page sera long et pénible.
Ci-dessous, la même photo compressée: de la même taille que sur ton site, elle ne fait plus que 38 Ko
Image

En fait, tout est trop gros!!!

Publié : 21 nov. 2008, 09:50
par Invité
Merci pour vos suggestions, en effet je doit réduire la taille des images, mais j'ai un problème de logiciel.
Comme je veux éviter de mettre des photos avec royalties, j'ai voulu mettre les miennes, le problème réside dans le fait qu'elles sont déjà compressées et je n'arrive pas à les compresser plus.

Qant aux polices de lettre, elle me servent aussi à la mise en page. Je veux faire un site simple, sans fioritures et lisible, mais peut-être que c'est trop, je vai voir. En plus je ne suis pas le seul à prendre les décisions en ce concerne l' apparence du site.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.4) Gecko/2008111318 Ubuntu/8.10 (intrepid) Firefox/3.0.4

Publié : 21 nov. 2008, 11:37
par GAUNCE
Anonymous a écrit :Merci pour vos suggestions, en effet je doit réduire la taille des images, mais j'ai un problème de logiciel.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.4) Gecko/2008111318 Ubuntu/8.10 (intrepid) Firefox/3.0.4
Installe " The gimp", il est gratuit, il fait tout! (sauf la vaisselle :( )

Publié : 21 nov. 2008, 12:24
par Fabrice.Tres.Net
Une page "simple" devrait avoir un look dans ce genre
Image
Voici le code pour la reproduire, à copier dans un fichier avec un Notepad,... puis ouvrir avec le navigateur ou Kompozer pour modifier!

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
  <head>
    <title>SIMPLE PAGE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
/*<![CDATA[*/
body { background-image: url(http://p2e2a.free.fr/images/1464.jpg);}
a {color: rgb(51, 0, 51);}
h1, h2 /* Titre de niveau 1, 2 en rouge*/ 
{
color:red;
}
p {text-indent:2em}
#menu {
float: left;
width:200px;
padding:20px;
margin-right:20px;
border: 1px dotted grey 
}
#menu a:hover
{ background:white;
color:blue;}
#contenu {
margin-left: 10px}
 /*]]>*/
    </style>

  </head>
  <body>
	<div id="menu">
	<ul>
		<li> <a  href="index.html">ACCUEIL</a> </li>
		<li> <a  href="compte-rendu%20de%20reunion.html">COMPTE-RENDU DE REUNION</a> </li> 
		<li> <a  href="vie%20scolaire.html" >VIE SCOLAIRE</a> </li> 
		<li> <a  href="projets.html" >PROJETS</a> </li>
		<li> <a  href="mailto:p2e2a@free.fr" >NOUS CONTACTER</a></li>
	</ul>
	</div>
	<div id="contenu">
		<h1>Parents d'Elèves d'Etang-sur-Arroux Apolitiques </h1>
		<p>POUR NOS ENFANTS...</p>
		<p>Nous sommes persuadés que leur réussite et leur épanouissement ne peut être possible qu'en harmonie avec tous les acteurs de la vie scolaire.
 C'est pourquoi nous souhaitons mettre tout en oeuvre pour que ces relations restent saines et constructives.</p>
		<p>Nous sommes soucieux de l'avenir dans un contexte social de plus en plus difficile.
Nous souhaitons transmettre vos inquiétudes, vos questions et vous informer en temps réel sur les réflexions et les décisions prises lors des réunions.</p>
		<p>Nous avons décidé de créer une liste apolitique et sans étiquette dans un souci d'intégrité, de transparence et de diffusion d'informations.</p>
    </div>
  </body>
</html>
Si la présentation ne te convient pas, ce qui est normal, c'est une base de travail, il suffit de la modifier avec les css (feuilles de styles), mais surtout pas en utilisant la barre de mise en forme de Kompozer!

Les styles permettent de fixer l'allure des titres (h1 à h6), des paragraphes, la position du menu, de la page, des arrières plans, de la couleur des caractères, leur taille,...

Si en plus la feuille de styles est un fichier appelé par chaque page, le fait de changer ce fichier permettra de modifier l'aspect de toutes les pages. C'est top pour mettre un sapin de noel en fond d'écran à Noel, ....

De plus les pages ont une allure similaire, cela fait + pro!

Evite les espaces dans les noms de fichiers !