retour

Aide aux groupes

 

 

Les feuilles de style :

 

Elles ont pour but de formater le site web pour lui donner un ensemble homogène, dans le cas où une ou plusieurs sont utilisées pour toutes les pages du site.

 

1. Elles peuvent s’insérer directement entre les balises du code HTML.

    Ex : <p style="color:green;font-family:verdana;font-size:18px;">...... </p> 

 

2. Elles peuvent utiliser des balises qui leurs sont dédiés.

 Ex : <span style="color:green;font-family:verdana;font-size:18px;">...... </span>

        <div style="color:green;font-family:verdana;font-size:18px;">.......</div>

 

3. Elles peuvent être appelé à partir d’un fichier CSS préalablement conçu depuis l’en-tête (entre <head>et</head>) de la page html.

 Ex : <link rel=stylesheet style="text/css" href="fichier.css">

 Il est associé avec des "class" quand c'est nécessaire.

<p class="nom de la class">...</p>

 

 

Seul le troisième exemple va appliquer la feuille de style à l'ensemble de la page. Les autres sont dîtes localisés et seront priorité si deux feuilles de style se chevauchent.

 

Exemple de contenu de fichier.css

 

p{

color:green;

font-family:verdana;

font-size:18px;

}

Cela veut dire que tous les <p></p> auront leur texte en vert, de police verdana et de taille 18 pixels.

 

.encadrer{

            color:orange;

            background-color: Blue;
border: 4px solid;
border-color: Yellow Green Cyan Black;

}

Ceci est une "class" qui j'ai appelé "encadrer", ne pas oublier le . avant le nom que vous lui

 donnez.

Dans le code pour y faire appelle utiliser le class="encadrer" dans les balises

 Ex: <p class="encadrer">......</p>

Tout le texte sera en orange sur fond bleu entouré d'une bordure épaisse de 4px et de couleur

 jaune en haut, vert à droite, cyan en bat et noir à gauche, on peut bien entendu mettre des couleurs en hexadécimal (cad #00FF00 par exemple).

Exemple votre texte va apparaître comme ca


Il faut noter que la "class" est prioritaire sur les p{...} qui sont général à tous les <p></p>

 

 Un logiciel qui facilite grandement la tache : TopStyleEdit version gratuite

 

    Les Popup

 

Les popup sont de simple page Html paramétrées. On les conçoit normalement puis quand on y fait

 appelle depuis une page "mère" on leur donne la caractéristique que l'on veut cad la largeur, la

 hauteur ainsi que l'endroit où elle va apparaître sur l'écran du visiteur et donc ceci est du javascript.

 Comme pour les liens habituels on en reprend le code.

 

<a href="coucou.html"

target="popup"

onclick="window.open('','popup','width=700,height=170,left=0,top=0,scrollbars=0')> il dit coucou

 </a>

 

Ce qui surligné en jaune est du code javascript. Ici on peut paramétrer la popup avec les écrits en bleu

 dans l'orde la largeur, la hauteur, la position par rapport au bord de gauche, la position par rapport au

 bord du haut de la page "mère".

 

Donc ce code s'insère seulement dans la page "mère" qui fait appelle à la popup (qui est une page html ici appeler coucou.html).

Pour récapituler, il faut 2 pages html : 

une (mère) qui sert à appeler la popup et l'autre qui est en faite la popup elle-même.

 

  Xiti

 

Il faut s'inscrire tout d'abord à Xiti via cette adresse http://www.xiti.com/gratuit/ .

Ensuite:

 

Cliquez sur "le code marqueur" entouré en rouge.

 

Puis encore cliquez sur "le code marquer en entouré de rouge.

 

Vous devez avoir normalement ce genre de code, vous devez le copier est le mettre entre <body> et </body> .On peut donner un nom cette analyse, il suffit d'ajouter un mot juste après le p= .

C'est fini!

 

Pour le référencement ou comment suggérer un son site web:

 

Pour free.fr : http://subscribe.free.fr/pperso/addlist.pl

 

Pour yahoo.fr : http://submit.search.yahoo.com/free/request

 

Pour google.fr : http://www.google.fr/addurl/?continue=/addurl

 

Pour voilà.fr : http://aide.voila.fr/Recherche/?Referencer

 

Pour Aol.fr : http://www.aolrecherche.aol.fr/ (il faut aller vers la catégorie de site que vous désirez puis tout en bas de la page il y a un mini menu avec "proposer un site" )

 

Le transfert via FTP:

 

Ce qui va suivre ne marche que pour Internet Explorer, donc oubliez firefox !

Tapez l'adresse : ftp://ftpperso.free.fr et cliquez sur ok quand vous êtes sur cette page.

 

 

 

 

 aller sur "se connecter en tant que"

 

Reste plus qu'à remplir les champs :

 

Vous arriverez alors à une fenêtre qui ressemble comme 2 gouttes d'eau à celle des dossiers classiques de windows. D'ailleurs le principe est le même! Il reste plus qu'à faire du glisser poser vers ce nouveau dossier. Le transfert est appelé ascendant ou upload en anglais. Voilà vos fichiers sont sur le net!!

 

 

Images cliquables, survolables

 

Les 3 bouts de javascript important:

 

 onClick="..."    Quand on clique sur l'image ou texte, la ressource appelée (src='...') s'exécute (ou s'affiche quand c'est une image)

 onMouseOut="..." Quand on quitte la cible (image ou texte), la ressource appelée (src='...') s'exécute (ou s'affiche quand c'est une image)

 onMouseOver="..." Quand on survole la cible (image ou texte), la ressource appelée (src='...') s'exécute (ou s'affiche quand c'est une image)

 

La caractéristique src='...' indique l'endroit et le nom du fichier (image) à afficher, elle est similaire à href du <a href=".."></a>.

 

    Les images qui vont servir d'exemple.

 

Image1 Image2 Image3

    

Application:

Dans les exemples qui suivent les images se trouvent dans le même répertoire que la page web (ce qui n'ai pas le cas de mon code source donc inutile de le faire afficher)

Quand on clique l'image, code:

 <img src="image1.jpg" onClick="src='image2.jpg'">

Quand on survole l'image, code:

<img src="image1.jpg" onMouseOver="src='image2.jpg'">

Quand on quitte l'image, code:

<img src="image1.jpg" onMouseOut="src='image2.jpg'">

 
 

 

Pour ceux qui se poserai la question comment on fait pour revenir à l'image du début. Il faut garder en tête que les 3 caractéristiques

 peuvent être associées.

Alors,

<img src="image1.jpg" onMouseOver="src='image2.jpg' onClick="src='image3.jpg' onMouseOut="src='image1.jpg'">

 

signifie qu'on a une image1.jpg affichée dés le début, que si on la survole l'image2.jpg apparaît, qui en cas de clique devient

 image3.jpg et dés que l'on quitte l'image revient à l'image1.jpg du départ.

Voici le résultat du code:

 

 

 

    Images aléatoires

 

Ici, je reprendrai les mêmes images que précédemment. Attention il est impératif que vos images soient numérotées

sans quoi il vous sera impossible de réaliser cette effet!!

 

         <script language="javascript">

   var PhotoNo = Math.round(Math.random() * 2 + 1);

   document.write('<img name=im src='+PhotoNo+'.jpg'>);

</script>

 

Ceci est le script par défaut que notre professeur a donné ce qui modifiable je l'ai surligné en jaune.

Pour l'utiliser tel quel il est nécessaire d'avoir des images ayant comme nom 1.jpg, 2.jpg et 3.jpg dans le même répertoire que votre page html !!!

Explication des champs modifiables:

 

- "PhotoNo" est simplement le nom de la variable ou fonction ( elle peut être n'importe quoi comme par exemple "blablaprout" ou encore "crottedebique" cependant éviter les espaces et les accents ok?). Vous le devez remplacer aussi à chaque fois qu'il apparaît dans le code (dans ce cas il est à remplacer deux fois).

- "2" ce chiffre correspond aux nombre d'images -1 (si vous avez 25 images il faut écrire 24 !)

 

- "name=im" ceci est totalement facultatif. Cela sert, je pense à clarifier le code javascript pour le concepteur du site.

 

- ".jpg" ici il peut être replacer par l'extension de vos fichiers images .gif par exemple à condition que toutes les images soient en .gif.

 

Voici ma version de code pour ce site:

 

 <script language="javascript">

   var exemple = Math.round(Math.random() * 2 + 1);

   document.write('<img src=image'+exemple+'.jpg'>);

</script>

 

Qu'est ce qui a changé à votre avis ?

 - le nom de la variable "PhotoNo" qui a été remplacé par "exemple"

 - Name=im a été supprimé

 - Rajout de image' car mes images s'appellent image1.jpg, image2.jpg et image3.jpg.

 

Si mes images c'étaient appellées voyage1.jpg, voyage2.jpg et voyage3.jpg le code aurait été:

 

<script language="javascript">

   var exemple = Math.round(Math.random() * 2 + 1);

   document.write('<img src=voyage'+exemple+'.jpg>');
 

</script>

Si les images se trouvent dans un autre répertoire mettre le chemin, par exemple si les images voyages sont dans le répertoire images du site, le code sera:

 

<script language="javascript">

   var exemple = Math.round(Math.random() * 2 + 1);

   document.write('<img src=images/voyage'+exemple+'.jpg>');
 

</script>

 

 

 On teste pour voir, faire actualiser pour visualiser l'effet.

 


 

 

 

 

Le tutorial est fini !!