[Dimension]Création site Dreamweaver

Création site Dreamweaver [Dimension] - HTML/CSS - Programmation

Marsh Posté le 22-11-2007 à 16:15:22    

Bonjour à tous,  
 
Ma situation: En alternance dans une boite alimentaire, j'ai pour mission de remodeler le site de celle-ci...
N'ayant jamais programmer ou même créer quoi que se soit de cette manière je tatonne un petit peu mais je m'en sors, mis à part un "petit" problème au niveau de la dimension des pages.
 
Je m'explique: Travaillant sur Dreamweaver, la résolution est "bonne" sur mon écran lorsque je fais "aperçu dans le navigateur" mais lorsque je l'exporte sur une clef usb vers un tout autre pc (celui du boss :P) la résolution "foire", ne voyant que la moitié de la page il est obligé de jouer de l'ascenseur.
 
Je voulais savoir si il y'avait un moyen d'uniformiser les dimensions afin qu'elles soient adaptable à tout type d'écran...
 
Si vous avez des tutos en tout genre en rapport, je suis preneur.
 
Merci de vos lumière, un webmaster en devenir :D
 

Reply

Marsh Posté le 22-11-2007 à 16:15:22   

Reply

Marsh Posté le 22-11-2007 à 16:32:59    

tu peux définir des dimensions en %, c'est plus pratique si tu veux adapter un largeur à tout type de résolutions d'écrans,
sauf si tu as des images en fond servant au design bien sur, car celles-ci ne se re-dimensionneront pas.
 
Ya encore mieux, ca s'appelle le CSS, mais une chose après l'autre ;)
 
Bonne chance


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 22-11-2007 à 16:40:38    

Et comment procède t-on stp? :)

Reply

Marsh Posté le 22-11-2007 à 16:45:11    

ben tu modifies cva dans les propriétés de tes élements, et vu que je n'ai pas ton site et encore moi ton code sous les yeux, ca va être hardu de te donner des directives ;)
 
tu as une url qqpart ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 22-11-2007 à 16:48:00    

Déoslé :$
 
Je te donne ça:
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenue chez Socopra</title>
<style type="text/css">
<!--
.Style1 {
 color: #999999;
 font-weight: bold;
 background-image: url(fond%20index.png);
 background-repeat: no-repeat;
 background-position: center center;
 border: thick ridge #FF0000;
 list-style-type: none;
 position: relative;
 width: 1200px;
 height: 550px;
 text-decoration: blink;
 background-color: #990000;
 overflow: auto;
}
body,td,th {color: #000000;
 font-weight: bold;}
body {
 background-color: #000000;
 background-image: url(batiment socopra fili.jpg);
 background-repeat: no-repeat;
 background-image: url();
 margin-left: 0.6cm;
 margin-top: 0.6cm;
 margin-right: 0.6cm;
 margin-bottom: 0.6cm;
}
.Style12 {font-family: "Monotype Corsiva", "Comic Sans MS";
 font-size: 50px;
 color: #FF0000;}
a:link {color: #BEA708;}
a:visited {color: #FFFFFF;}
a {font-style: italic;}
.Style13 {
 color: #C30202;
 font-family: "Comic Sans MS";
}
.Style14 {color: #BEA708}
.Style16 {
 color: #FFFFFF;
 font-family: "Monotype Corsiva";
 font-size: 18px;
}
#Layer1 {
 position:absolute;
 left:424px;
 top:323px;
 width:35px;
 height:35px;
 z-index:1;
 visibility: visible;
}
#Layer2 {
 position:absolute;
 left:789px;
 top:323px;
 width:28px;
 height:29px;
 z-index:2;
 visibility: visible;
}
.Style18 {
 font-family: "Monotype Corsiva";
 color: #FFFFFF;
 font-style: italic;
 font-size: 18px;
}
-->
</style>
</head>
<body>
<div align="center" class="Style1">
  <p><span class="Style13"><span class="Style16">Distributeur de Produits Alimentaires pour la Restauration Hors-Foyer (RHF)</span><br />
  </span><a href="index acceuil.html"><img src="Image4 copie.gif" width="576" height="163" border="0" /></a></p>
  <p class="Style18"> Venez d&eacute;couvrir notre nouvelle gamme de produits: </p>
  <p class="Style12"><a href="Carte cuisin'parfaite.html"><img src="Image1 copie.gif" width="304" height="161" border="0" /></a></p>
  <p class="Style12">&nbsp;</p>
  <table width="775" height="38" border="1" bordercolor="#BEA708" bgcolor="#000000">
    <tr bordercolor="#FFFFFF" bgcolor="#000000">
      <td width="199" height="32" background="file:///C|/Documents and Settings/james/Bureau/SiteDreamWeaer/historique.html"><div align="center"><a href="index acceuil.html">Historique</a></div></td>
      <td width="194" background="file:///C|/Documents and Settings/james/Bureau/SiteDreamWeaer/historique.html"><div align="center"><span class="Style14"><a href="Effectif.html">L'&eacute;quipe et les contacts</a> </span></div></td>
      <td width="191" background="file:///C|/Documents and Settings/james/Bureau/SiteDreamWeaer/historique.html"><div align="center"><a href="Produits.html">Produits</a></div></td>
      <td width="184" background="file:///C|/Documents and Settings/james/Bureau/SiteDreamWeaer/historique.html"><div align="center"><a href="Qualit&eacute;.html">Qualit&eacute;</a></div></td>
    </tr>
  </table>
</div>
<div id="Layer1"><img src="fl20.gif" width="41" height="43" /></div>
<div id="Layer2"><img src="fl19.gif" width="41" height="44" /></div>
</body>
</html>

Reply

Marsh Posté le 22-11-2007 à 17:15:38    

ok, je rentre pas dans les détails mais si tu regardes tes feuilles de style (CSS), tu as la classe "Style1" qui donne (en abrégée) :

Code :
  1. .Style1 {
  2. ...
  3. width: 1200px;
  4. height: 550px;
  5. ...
  6. }


 
tu retrouves donc ici la largeur et la hauteur qu'aura l'element auquel tu auras assigné cette classe, à savoir 1200 pixels en largeur et 550 en hauteur. Donc si la personne qui veut afficher ton site est en 1024x768 de résolution, il fa avoir du mal ;)
 
Si je suppose que ton écran fait 1280 pixels de large, on remplacer ton code par (en abrégé toujours) :

Code :
  1. .Style1 {
  2. ...
  3. width: 99%; /* environ 1280 ;-) */
  4. height: 550px; /* pour la hauteur, je te laisse regarder */
  5. ...
  6. }


 
Voilà en gros le topo, sachant que tu as bcp d'elements avec une taille "en dur" (= en pixel) dans le reste de ton code, il va falloir que tu changes certain trucs, sachant que lorsqu'un element est imbriqué dans un autre ( <div id="elementParent"><div id="elementImbrique">...</div><div> ), la taille de ce dernier est relative à la taille du parent, donc une taille de 100% ne signifie pas 100% de l'ecran, mais 100% de la taille de l'element parent ;)
 
Voilà, bonne chance


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 22-11-2007 à 17:20:08    

Je te remercie pour se sprécieuses infos ;) c'est vraiment cool.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed