Qu'est ce que Dreamweaver ?

Dreamweaver est un éditeur de site web WYSIWYG pour Microsoft Windows, et Mac OS X créé en 1997,
commercialisé par Macromedia puis Adobe Systems sous licence utilisateur final.

Dreamweaver fut l'un des premiers éditeurs HTML de type « tel affichage, tel résultat », mais également l'un
des premiers à intégrer un gestionnaire de site (CyberStudio GoLive étant le premier). Ces innovations
l'imposèrent rapidement comme l'un des principaux éditeurs de site web, aussi bien utilisable par le néophyte
que par le professionnel.

Dreamweaver offre deux modes de conception par son menu affichage.

L'utilisateur peut choisir entre un mode création permettant d'effectuer la mise en page directement à l'aide
d'outils simples, comparables à un logiciel de traitement de texte (insertion de tableau, d'image, etc.). Il est
également possible d'afficher et de modifier directement le code (HTML ou autre) qui compose la page. On
peut passer très facilement d'un mode d'affichage à l'autre, ou opter pour un affichage mixte. Cette dernière
option est particulièrement intéressante pour les débutants qui, à terme, souhaitent se familiariser avec le
langage HTML.

Dreamweaver a évolué avec les technologies de l'internet.

Il offre aujourd'hui la possibilité de concevoir des feuilles de style. Les liaisons avec des bases de données
ont également été améliorées ainsi que le chargement des fichiers sur les serveurs d'hébergement. Il propose
en outre l'utilisation de modèles imbriqués de pages web, selon un format propriétaire.
Depuis la version MX, il peut être utilisé avec des langages web dynamiques (ASP, PHP) à l'aide d'outils
relativement simples d'utilisation. Il permet ainsi de développer des applications dynamiques sans
connaissance préalable des langages de programmation.

Dreamweaver est édité par la société Adobe Systems et fait partie de la suite de développement Studio 8 de
l'éditeur, qui comprend Macromedia Flash, Macromedia Fireworks (édition graphique) et Macromedia
Coldfusion (serveur). Macromedia, qui éditait Dreamweaver auparavant, a été racheté par Adobe en
décembre 2005.

Environnement de travail Dreamweaver

Comment configurer votre espace de travail dans Dreamweaver.

Organisation de l'espace de travail

1. Ouvrez le menu Fenêtre (la liste des différentes fenêtres apparaît)

2. Faites un clic sur l'intitulé de la fenêtre que vous souhaitez faire "apparaître" ou utilisez le
raccourci clavier associé (Que vous retrouvez à droite de l'intitulé)

Les menus qui sont cochés sont actifs, c'est à dire qu'ils sont dans votre espace de travail
Déplacer une fenêtre ou l'intégrer dans un panneau

1. Cliquer sur l'onglet de la fenêtre "Fichiers" (Si vous souhaitez déplacer ce panneau).

2. Maintenir le clic gauche et faites glisser votre panneau jusqu'à l'endroit ou vous souhaitez le
placer dans les panneaux ou dans l'espace de travail

Le panneau "Propriété" va très bien tout en bas, le panneau "Insertion" va très bien en haut

Menu présentation de l'espace de travail

1. Par le menu
a. Allez dans le menu Fenêtre
b. Présentation de l'espace de travail
c. Sélectionnez un profil dans la liste déroulante, vous allez afficher différents panneaux selon
le profil que vous choisissez
2. Par l'interface
a. Cliquer sur ce bouton situé en haut à droite
b. Sélectionner le mode d'affichage de votre choix
Ces différents modes d'affichage agissent sur la position des panneaux dans l'interface de Dreamweaver.
A vous de tester et trouver le mode qui vous convient le mieux !

Personnaliser l'affichage des fenêtres

1. Par le menu
a. Allez dans le menu Fenêtre
b. Présentation de l'espace de travail
c. Nouvel espace de travail
2. Par l'interface
a. Cliquer toujours sur ce bouton situé en haut à droite
b. Cliquer sur "Nouvel espace de travail"
Cette boite de dialogue apparaît :

1. Compléter le Nom
2. Valider en appuyant sur OK

Vous pouvez comme ça créer différents profils et les gérer en cliquant dans ce même menu sur
"Gérer "

Gestion de site avec Dreamweaver

Etape 1 : Configuration de base

1. Allez dans le menu "Site"

2. Cliquez sur "Nouveau site"
Cette boîte de dialogue apparaît :

3. Compléter le nom de votre site

Vous pouvez noter ce que vous voulez, ce n'est qu'un repére pour vous

4. Cliquer sur l'icône et sélectionner le dossier qui contient votre site

Nous allons aller sélectionner le dossier contenant vos images

5. Cliquer sur "Paramètres avancés"

6. Cliquer sur l'icône et sélectionner le dossier qui contient vos images

Votre dossier "images" doit être dans le dossier qui contient les différentes pages composants
votre site. Celui que vous venez de sélectionner à l'étape 4
Etape 2 : Configuration de l'accès ftp

7. Cliquer sur "Serveurs"

8. Cliquer sur le bouton "+"

Cette boîte de dialogue apparaît :

9. Indiquer un nom de votre choix pour le serveur (Il n'a pas une grande importance)
10. Choisissez "FTP" dans la liste déroulante
11. Indiquer le nom du serveur FTP qui vous a été fourni par votre hébergeur
12. Le port utilisé par FTP est 21 (Il est compléter par défaut)
13. Indiquer le nom d'utilisateur FTP qui vous a été fourni par votre hébergeur
14. Indiquer le mot de passe FTP qui vous a été fourni par votre hébergeur
15. Cliquer sur le bouton "Tester"
Si vous avez comme message "Dreamweaver x s'est connecté avec
succès", les paramètres sont correctes, sinon revérifier les
informations que vous avez saisi.

16. Compléter le "Répertoire racine" (Dans 95% des cas, sur de

l'architecture Linux, ce sera /www)
17. Indiquer l'url de votre site

Si vous souhaitez utiliser PHP / MySQL sur votre serveur

distant
18. Cliquer sur le bouton

19.Sélectionner PHP MySQL

Etape 3 : Configurer le dossier contenant les images

Maintenant, dans la partie gauche de l'écran, vous cliquez sur "Paramètres avancés"
Puis vous indiquez où se trouve le dossier contenant vos images sur l'icône situé à côté du
champ "Dossier des images par défaut".
Votre nouveau site est configuré, vous pourrez comme ça en gérer autant que vous le
souhaitez !

Insertion de texte dans Dreamweaver

Dans ce tutoriel, nous allons aborder la gestion de texte avec Dreamweaver

Onglet Texte
Vous pouvez faire un grand nombre de ces actions, bien plus rapidement dans le panneau
Propriété, je vous donnerai à chaque fois les 2 méthodes dans le cas ou c'est possible.

1.3 Texte en gras

Le 1 insère la balise <b>, le 3, insère la balise <strong>, dans les 2 cas, vous aurez du texte en
gras.
Autre méthode

Dans le panneau Propriété, cliquer sur l'icône "B"

Exemple

Texte en gras
<strong>Texte en gras</strong> ou <b>Texte en gras</b>

2, 4 Texte en italique
Le 2 insère la balise <i>, le 4, insère la balise <em>, dans les 2 cas, vous aurez du texte en
italique.
Autre méthode

Dans le panneau Propriété, cliquer sur l'icône "I"

Exemple

Texte en italique
<em>Texte en italique</em> ou <i>Texte en italique</i>

5 Paragraphe
Pour insérer un bloc de paragraphe, il suffit de cliquer sur l'icône 5.
Autre méthode

Dans le panneau Propriété, cliquer sur le triangle qui pointe vers le bas et sélectionner
"Paragraphe"

Exemple
Un bloc de paragraphe
<p>Un bloc de paragraphe</p>

6 Citation de paragraphe
Pour insérer une citation de paragraphe, vous pouvez cliquer
l'icône 6.

Autre méthode

Dans le panneau Propriété, cliquer sur l'icône encadré en rouge dans l'exemple
ci dessous

Exemple
Une citation de paragraphe

<blockquote>Citation de Paragraphe</blockquote>

5 Texte préformaté
Pour insérer un texte préformaté, vous pouvez cliquer l'icône 7.dans l'onglet
Texte.
 Autre méthode

Dans le panneau Propriété, cliquer sur le triangle qui pointe vers le bas et sélectionner
"Pré-formaté"

Exemple
Texte preformate
<pre>Texte preformate</pre>

8,9,10 Les balises d'entêtes

Vous pouvez cliquer l'icône 8 pour insérer une balise h1, 9 pour insérer une balise h2, 10 pour
insérer une balise h3.
Autre méthode

Dans le panneau Propriété, cliquer sur le triangle qui pointe vers le bas et sélectionner "En-tête
1" ou 2 ou 3 jusque 6

Exemple

Texte entete h1
Texte entete h2
Texte entete h3
Texte entete h4
Texte entete h5
Texte entete h6

<h1>Texte entete h1</h1>

<h2>Texte entete h2</h2>
<h3>Texte entete h3</h3>
<h4>Texte entete h4</h4>
<h5>Texte entete h5</h5>
<h6>Texte entete h6</h6>

11 Liste à puce
Pour insérer une liste à puce, cliquer l'icône 11. ul dans l'onglet Texte.
Il faudra insérer les balises "<li> </li>" entre les balises "<ul> et </ul> pour représenter le
contenu de la liste, pour cela, vous cliquez le bouton 13 li dans l'onglet Texte
Autre méthode

Dans le panneau Propriété, cliquer sur l'icône encadré en rouge dans l'exemple ci dessous.
Pour ajouter un élément à la liste à puce, appuyer sur "Entrée" pour en sortir, appuyer
2 fois sur "Entrée"

Exemple

 HTML
 CSS
 PHP

<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>

12 Liste ordonnée
Cliquer l'icône 12 ul dans l'onglet Texte.
Il faudra insérer les balises "<li> </li>" entre les balises "<ul> et </ul> pour représenter le
contenu de la liste, pour cela, vous cliquez le bouton 13 li dans l'onglet Texte.
Autre méthode

Dans le panneau Propriété, cliquer sur l'icône encadré en rouge dans l'exemple ci dessous

Exemple

1. HTML
2. CSS
3. PHP

<ol>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>

14 Liste des définitions

Cliquer l'icône 14 dans l'onglet Texte.

 DL : Definition List
 DD : Definition Description
 DT : Definition Term

L'élément DL encadre la liste des définitions. il inclu les deux autres balises, DT et DD qui
décrivent respectivement le terme à définir (DT) et sa définition (DD).
Terme des définitions
Cliquer le bouton 15. dans l'onglet Texte.
<dt>Grenouille verte et jaune</dt>

Description de définition
Cliquer le bouton 16. dans l'onglet Texte
<dd>Nisl ut aliquip ex ea commodo consequat</dd>

Exemple

Grenouille verte et jaune

 Nisl ut aliquip ex ea commodo consequat

Crapaud buffle

Lorem ipsum dolor sit amet elit...

Grenouille tachetée

Facilisis at vero eros et accumsan

<dl>
<dt>Grenouille verte et jaune</dt>
<dd>Nisl ut aliquip ex ea commodo consequat</dd>
<dt>Crapaud buffle</dt>
<dd>Lorem ipsum dolor sit amet elit...</dd>
<dt>Grenouille tachetée</dt>
<dd>Facilisis at vero eros et accumsan</dd>
</dl>

17 Abréviation
Pour insérer une abréviation, cliquer l'icône 17.

La balise ABBR est censée définir une abréviation, l'attribut titre de la balise
contenant la signification complète de l'abréviation, et l'abréviation elle-même
affichée entre les tags d'ouverture et de fermeture.
Pour voir le mot Kilogramme affiché en entier, placer votre curseur au dessus
de l'abréviation KG
Exemple

KG

<abbr title="Kilogramme">KG</abbr>

18 Acronyme
Pour insérer un acronyme, cliquer l'icône 18.

La balise ACRONYM définit une abréviation pour une phrase ou une expression
donnée. Passer votre curseur sur ces acronymes

Exemple

W3C

SNCF

<acronym title="World Wide Web Consortium">W3C</acronym>

<acronym title="Société Nationale de Chemins de Fer">SNCF</acronym>

19 Retour à la ligne
Pour insérer un retour à la ligne, cliquer sur l'icône 19.
Cliquer sur le triangle vers le bas pour affciher la liste déroulante et
sélectionner "Saut de ligne"

Raccourci clavier : MAJ ENTREE

Syntaxe HTML : <br>

Syntaxe XHTML : <br/>

Les caractères spéciaux

Cliquer le triangle situé à droite du bouton 19. dans l'onglet Texte et
sélectionner "Autres caractères"

Liste des caractères spéciaux en HTML

Insertion d'images avec

Dreamweaver
Dans ce tutoriel, nous allons aborder la gestion des images avec Dreamweaver.

Généralités sur les images

Les chemins d'accés aux images

En HTML, vous allez pouvoir définir 2 types de liens vers vos images,

 soit un lien relatif

 ou un lien absolu

Les liens relatifs au document

Le lien relatif fait référence à une image qui se trouve dans le dossier images
de votre site

Exemple

<img src="images/dreamweaver.png" alt="Tutoriel Dreamweaver" class="img-

responsive">
Les liens absolus
Un lien absolu précise l'url compléte d'accés à la ressource
A utiliser dans le cas où vos images ne sont pas le dossier de votre site
Exemple

<img src="http://www.conseil-webmaster.com/images/dreamweaver.png"
alt="Tutoriel dreamweaver"class="img-responsive">

Formats d'images gérés avec Dreamweaver

Format Transparence

JPG Non

GIF Oui

PNG Oui

PSD Oui, si le format d'export est GIF ou PNG

Le format PSD n'est pas géré sur le web

Dreamweaver vous convertira votre format en JPG, GIF ou PNG.
Il sera capable de mettre à jour votre image lorsque vous faîtes des modifs dans
Photoshop

Toutes vos images doivent être optimisées pour le web, les images en 3200px x
je ne sais quoi ..., on oublie !
N'oubliez pas d'insérer la balise ALT, Dreamweaver vous le proposera
automatiquement lorsque vous insérez une image

Insérer une image

Cliquez sur l'icône 7 dans l'onglet commun
Raccourci clavier : Ctrl + Alt + I
 Onglet commun

1. Sélectionner l'image dans la boîte de dialogue qui est apparu

2. Compléter le texte de remplacement

En HTML / XHTML

<img src="images/mon_image.jpg" alt="Texte secondaire" width="200"

height="100">

Principaux attibuts pour img en HTML / XHTML

alt : Texte de remplacement
width : Définit la largeur
height : Définit la hauteur
En HTML5

<img src="images/mon_image.jpg" alt="Texte secondaire" class="ma_classe">

En HTML, on n'utilise plus les attributs width et height. L'attribut alt est lui par
contre toujours utilisé.

Exemple

Espace réservé pour l'image

Peut être utile lorsque vous n'avez pas l'image et souhaitez définir sa position
dans uen page.
Cliquez sur le triangle noire à droite de l'icône 7 dans l'onglet commun

Onglet commun

Cette boîte de dialogue apparaît

Compléter les champs suivants
Nom : Avec un nom sans espace ni catactéres spéciaux
Largeur et Hauteur : Une taille exprimée en pixel
Une couleur : (Qui n'est qu'un repére)
Et un texte Secondaire : Notre texte de remplacement
Exemple

Les images survolées

Le principe :
Une image est affiché à l'écran, lorsque je passe mon curseur au dessus, une
autre image s'affiche, si je clique dessus elle m'améne vers une url.
Les images survolées vont être générées avec un Javascript qui s'insére
automatiquement dans votre code.
Onglet commun

Cliquer sur le triangle vers le bas sur l'icône 7

Ce menu apparaît, choisissez insérer une image survolée

La boîte de dialogue ci-dessous apparaît

Compléter les différents champs ci-dessous :

Nom de l'image : Complétez ce champ en indiquant un nom pour l'image sans

espace

Image originale :Choisissez l'image originale, affiché à par défaut

Image survolée : Choisissez l'image qui apparaîtra à la place de l'image

originale lorsque vous passez votre curseur au dessus

Texte secondaire : C'est le texte de remplacement, utilisé lorsque l'image n'est

pas chargée ou n'est pas accessible

Si cliquer, allez à l'URL : Indiquez l'URL à atteindre lorsque vous cliquez sur le
bouton

Exemple

Passez votre curseur sur l'mage à gauche

Liens hypertexte avec Dreamweaver

Dans ce tutoriel, nous allons aborder l'insertion et la gestion de lien avec
Dreamweaver.

Qu'est ce qu'un lien hypertexte ?

Pour faire simple, un hyperlien ou lien hypertexte est un lien cliquable qui
vous améne sur une page web.
Nous trouvons 2 types de liens (relatifs ou absolus)
1. Lien absolu : Un lien absolue utilise l'adresse compléte vers un fichier
"http://www.monsite.com/"
2. Lien relatif : Un lien relatif utilise une adresse par rapport au document en
cours "mapage.html"

Un hyperlien sur du texte

Par l'onglet Propriétés

Panneau Propriétés

Vous pouvez le faire de 2 façons :

1. Laisser le clic gauche appuyé sur le bouton 1 et faire glisser vers la page à
lier qui se trouve dans le panneau "Fichier"

2. Cliquer sur le bouton 2 puis, sélectionner le fichier à lier.

Dans les 2 cas de figure, nous avons créer un lien relatif.

Exemple

Lien hypertexte vers une page qui se trouve dans mon site

<a href="index.php" title="Lien hypertexte">Lien hypertexte vers une page qui

se trouve dans mon site</a>

3. Dans le champ 3 vous pouvez saisir une url vers un site web Ex :
"http://www.google.fr/"

Dans ce 3éme cas de figure, vous créez un lien absolu

Exemple

Lien vers Google

<a href="http://www.google.fr" title="Rechercher sur Google">Lien vers
Google</a>

Par l'onglet Commun (Moins rapide)

Onglet Commun

Cliquez sur l'icône 1 de l'Onglet Commun.

Cette boîte de dialogue apparaît

Texte : qui sera le texte affiché sur le lien hypertexte

Lien : est le lien hypertexte

target :

_blank : (Ouverture de la page cible dans une nouvelle fenêtre)

_parent : (Ouverture de la page cible dans le cadre parent (de niveau
immédiatement supérieur)
_self : (Ouverture de la page cible dans le cadre d'appel
_top : (Ouverture de la page cible dans la fenêtre hôte par-dessus le
FRAMESET)

Titre : affiche une infobulle lorsque vous passez votre curseur sur un lien
hypertexte

Ordre de tabulation : Permet d'inverser l'ordre de la navigation lorsque vous

utilisez la touche tabulation pour passer d'un lien à l'autre.

Exemple

Mon hyperlien vers Google

<a href="http://www.google.fr/" title="Mon lien vers Google"

target="_blank">Mon hyperlien vers Google</a>

Un hyperlien sur une image

Etape 1 Vous insérer votre image comme vu dans le module précédent, si vous
avez un doute, vous pouvez consulter cette page
Etape 2 Dans le panneau "Propriétés"

Etape 3
Dans le champ 1 : compléter soit l'url, soit glisser la cible vers le fichier à lier,
soit cliquer sur l'icône "Dossier".

Etape 4
Dans le champ 2 : compléter l'attribut cible, comme vu précedemment

Exemple

<a href="http://getbootstrap.com/" title="Bootstrap" target="_blank"><img

src="../images/bootstrap.png" alt="Bootstrap" class="img-responsive"></a>

Lien de messagerie sur du texte

Méthode 1 :
Cliquer sur le bouton 2 "lien de messagerie"

Onglet Commun

Vous avez 2 paramétres à compléter :

1. Dans le 1er champ: saisissez le Texte qui doit apparaître à l'écran

2. Dans le second champ: saisissez votre adresse électronique (Adresse
email)

Exemple

email : contact@nomdedomaine.com

<a href="mailto:contact@nomdedomaine.com">email :
contact@nomdedomaine.com</a>

Méthode 2 :

1. Insérer le texte qui doit contenir le lien

 2. Sélectionner le
3. Dans le panneau "Propriétés", compléter le champ 13 en y mettant une
adresse email sous ce format mailto:contact@nomdedomaine.com

Panneau Propriétés

Lien de messagerie sur une image

Etape 1 Vous insérer votre image.
Etape 2 Dans le panneau "Propriétés"

Etape 3
Dans le champ 1 : compléter le champ lien en y notant votre adresse précédée
de mailto:

Exemple

<a href="mailto:contact@nomdedomaine.com">
<img src="../images/valide.png" alt="Lien de messagerie" class="img-
responsive">
</a>

Les ancres nommées

Les ancres nommées vous permettrons de vous déplacer sur la hauteur d'une
page.
Vous retrouvez souvent "Haut de page" pour revenir en haut de la page lorsqu'il
y a un long contenu.
Pour insérer uen ancre nommée, cliquez sur l'icône 3.

Onglet Commun
Cette boîte de dialogue apparaît

Compléter le champ " Nom de l'ancre"

Attention : Ne pas mettre d'espaces ni caractéres spéciaux

En haut de page, j'insére une ancre que je nomme "Debut"

<a name="Debut"></a>

Exemple

Lien qui pointe vers l'ancre "Debut"

<a href="liens-hypertexte-dreamweaver.phpl#Debut " title="Revenir au

début">Lien qui pointe vers l'ancre "Debut" </a>

Vous pouvez remarquer que derrriére la page HTML, PHP ou peut importe le
langage utilisé, il faut ajouter un "#" et le nom de l'ancre

Les attributs les plus utiles

href : Le lien vers la page

title : Titre de l'infobulle lorsque vous passez votre curseur sur un lien
hypertexte

target : Comment le lien va s'ouvrir dans un page

Les tableaux dans Dreamweaver

Dans ce tutoriel, nous allons aborder la création et la gestion de tableaux avec
Dreamweaver

Insertion de tableaux
Pour insérer des tableaux, nous pouvons utiliser différentes mèthodes :
Onglets, Menu, raccourcis clavier. Je ne vous décrirai pas toutes les méthodes
dans ce tutoriel.

Cliquez sur l'icône 5 dans l'Onglet Commun.

Ou cliquez sur l'icône 8 dans l'Onglet Mise en forme.

Ces outils vous permettent d'insérer un tableau dans votre page.

Exemple

Colonne 1 Colonne 2

EN HTML4

<table width="100%" border="1" align="left" cellpadding="1" cellspacing="1">

<tr>
<td width="50%">Colonne 1</td>
<td width="50%">Colonne 2</td>
</tr>
<tr>
<td width="50%">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
</table>

EN HTML5

A partir de HTML5, on ne remet plus les attributs que nous avons utilisés ci-
dessus. Dans l'exemple ci-dessous, j'utilise des classes du célèbre Bootstrap.

Colonne1, ligne1 Colonne 2, ligne1

Colonne1, ligne 2 Colonne 2, ligne2

<table class="table table-responsive table-striped">

<tr>
<td>Colonne1, ligne1</td>
<td>Colonne 2, ligne1</td>
</tr>
<tr>
<td>Colonne1, ligne 2</td>
<td>Colonne 2, ligne2</td>
</tr>
</table>
Insérer une ligne
Pour accèder à la plupart des fonctionnalités des tableaux, il faudra faire un
clic droit dans la cellule pour accèder à ce menu.

Si vous cliquez sur l'icône 3 vous insérez une ligne forcément au dessus, si
vous cliquez sur l'icône 4, vous pourrez choisir d'insérer une ou plusieurs
lignes ou colonnes, au dessus, au dessous, avant ou après.

Exemple

Colonne 1 Colonne 2

Insérer une colonne

L'icône 4 vous permettra d'insérer une colonne avant la sélection,
l'icône 5 vous permettra d'insérer une colonne après.

Exemple

Nouvelle colonne Nouvelle colonne Colonne 1 Colonne 2

Supprimer ligne
Sélectionner la ligne à supprimer, clic droit et sélectionner l'icône 6 de la
capture ci-dessus.

Supprimer une colonne

Sélectionner la colonne à supprimer, clic droit et sélectionner l'icône 7 de la
capture ci-dessus.

Feuille de style CSS dans

Dreamweaver
Qu'est ce que le CSS ?
CSS signifie en anglais « Cascading Style Sheets » et se traduit « feuilles de
style en cascade » en français.
On utilise le langage CSS pour décrire la présentation d'un document écrit en
htmL ou xml.
Le CSS décrit les couleurs, la police, les couleurs et images de fond, le
remplissage, les marges, les bordures ...
Il permet de rendre un document plus agréable à lire, mieux présenté...
Il a donc pour rôle d'améliorer la mise en page, de séparer la structure de sa
présentation et d'améliorer l'accessibilité des pages web.
Le langage CSS n'est autre que des feuilles de style en cascade.
Dans ce tutoriel, nous allons voir comment lier une feuille de styles CSS, créer,
modifier et supprimer des règles.

Ou insérer le code CSS ?

Dans ce tutoriel, nous allons voir où mettre notre code CSS pour qu'il soit
correctement affiché et interprété.

Les différentes possibilités pour utiliser CSS

Pour mettre en forme nos éléments HTML, nous pourrons utiliser différentes
possibilités.

1. CSS stocké dans une feuille de style externe

2. Style CSS intégré dans la page
3. Style CSS intégré dans la balise
1. CSS stocké dans une feuille de style externe
C'est le cas, le plus intéressant !
Si vos régles ne sont pas stockées dans une feuille de style externe, en cas de
modification de ces mêmes régles, votre travail va vite devenir fastidieux,
surtout si elles sont présentes sur un grand nombre de page HTML.
Placer le lien vers votre feuille de style dans la balise head.

Exemple
<head>
<link rel="stylesheet" type="text/css" href="ma_feuille_de_style.css" /> <!-- Lien
vers ma feuille de style nommé ma_feuille_de_style CSS -->
</head>

Principaux attributs

Nom Détail Importance

rel rel="stylesheet" Indispensable

type type="text/css Indispensable

Indique le type de document

href href="ma_feuille_de_style.css" Indispensable

Chemin vers votre feuille de tyle

2. Style CSS intégré dans la page

Nous utilisons la balise style
Dans la balise entrante, nous précisons le type avec type="text/css".
Et enfin, dans la balise sortante, nous fermons la balise style avec le caratére
"/", ce qui donne </style>.
Ce code est à placer dans la balise head de votre page.
Exemple avec notre classe text-vert
<head>
<style type="text/css">
.TexteVert { /* Classe .TexteVert */
font-family: "Arial Black", Gadget, sans-serif; /* Police de caractére*/
color: #9C3; /* Couleur du texte*/
}
</style>
</head>

3. Style CSS intégré dans la balise

Nous allons utiliser l'attribut style que nous appliquons sur une balise HTML (p
dans l'exemple ci dessous)
Puis entre les " " nous ajoutons notre code CSS

Exemple

Texte gras et italique sur un fond rose avec un remplissage de 5px

Code CSS à insérer dans le HTML
<p style="font-weight:bold; font-style:italic; background-color:#F9F; padding:5px">
Texte gras et italique sur un fond rose avec un remplissage de 5px </p>

Les régles CSS

Pour mettre en forme nos éléments en HTML, nous allons devoir créer des
régles CSS.

Elles seront applicables à :

1. Une balise HTML (p, h1,h2,h3,h4,ul,ol,li ...)

2. Une classe (Qui sera applicable à n'importe quel élément HTML)
3. Un ID (Qui sera unique dans une page)
4. Un élément composé (notion d'héritage)

1. Une balise HTML

Nous pouvons modifier l'apparence l'apparence d'une balise HTML

Exemple : Je veux une balise h3 en gris, Times New Roman et taille 18

Exemple de Formatage de la balise h3 avec CSS

Code CSS
h3 {
color: #CC0000; /* Couleur du texte */
font-family: "Times New Roman", Times, serif; /* Type de police */
font-size: 18px; /* Taille du texte */
}

CSS vous propose différentes possibiltés pour stocker vos régles CSS

Ou insérer ma régle CSS ?

Code HTML
<h3>Formatage de la balise h3 avec CSS</h3>

Exemple
Formatage de la balise h3 avec CSS

2. Une classe
Une classe en CSS peut s'appliquer à n'importe quel balise HTML.
Je peux l'appliquer sur une balise p, span, div, h1, h2, h3, ul, li etc ... autrement
dit toutes les balises que vous connaissez et autant de fois que vous le
souhaitez à l'intérieur d'une page HTML.
Le nom d'une classe doit toujours commencer par un point et ne pas comporter
d'espaces ni de caractéres accentués.
Exemple : .texte-vert
Code CSS
.texte-vert {
font-family: "Arial Black", Gadget, sans-serif; /* Police de caractére */
color: #9C3; /* Couleur du texte en vert */
}

Pour appliquer une régle CSS sur une balise, on utilise l'attribut class="nom-
classe"

Code HTML
<p class="text-vert">Texte vert, formaté avec ma régle .texte-vert</p>

Résultat

Texte vert, formaté avec ma régle .texte-vert

3.Un ID
Un ID s'applique comme une classe en CSS et a le même rôle
La différence est dans le fait que le ID ne peut être contenu qu'une fois dans
une page HTML.
On l'utilisera avec Javascript.
Si vous utiliser une classe, ça marchera à tous les coups !
Le nom d'un ID doit toujours commencer par un diése et ne pas comporter
d'espaces ni de caractéres accentués.
Exemple : #haut
Code CSS
#header {
width: 100%; /* Largeur de la boite*/
height: 150px; /* Hauteur de la boîte */
background-color: #6F7072; /* Couleur de la boîte */
font-size:25px; /* Taille du texte */
color:#FFF; /* Couleur du texte */
text-align:center; /* Centrage des éléments contenu ) l'intérieur */
}
Pour appliquer un ID sur une balise, on utilise l'attribut id="nom-id"

Code HTML
<div id="header">Mon id #header</div>

Résultat

Mon id #header

4.Un élément composé

En CSS, les éléments peuvent hériter des propriétés des éléments parents.

Exemple 1 : Si vous avez crée une régle pour modifier la police de caractère de
la balide body, tous les éléments textuels que vous allez mettre dans votre
page vont récupérer la police qui a été mis dans la régle body.

Exemple 2 : Si je reprends l'exemple de la régle que nous avons crée au dessus

pour la balise h3.

Le texte est rouge, en Times New Roman et avec une taille de 18.

Par défaut la balise "a" (lien hypertexte), est de couleur bleue et soulignée.

Donc si je mets un lien hypertexte sur ma balise h3, elle va hériter des
propriétés de la balise a (Texte bleu et souligné).
<h3><a href="lien.html" title="Lien">Lien sur une balise h3</a></h3>

Ca vous donnera ça :

Un lien hypertexte sur la balise h3

Maintenant, si je veux modifier l'apparence de

la balise h3 qui contient un lien hypertexte

Je veux obtenir un texte orange sans soulignement si j'ai un lien hypertexte sur
la balise h3

Je devrais créer cette régle :

Code CSS

h3 a {
color : #F93; /* Mettre e texte en orange*/
text-decoration: none; /* Supprimer le soulignement */
}
La régle h3 a signifie que l'on va modifier l'apparence de la balise h3 lorsqu'elle
contient un lien hypertexte.
Vous pouvez de même combiner ces balises avec des classes et des ID

Mise en forme de texte

Dans cet article, je vais créer des régles pour des classes CSS, vous pouvez
bien entendu les appliquer aux balises, ID, élements composés

Police de caractére
font-family: "Arial Black, Gadget, sans-serif";

Liste des polices HTML / CSS

Police Usage

Arial Imprimé, Web

Arial Black Imprimé, Web

Comic Sans MS Web

Courier New Simulation listing

Georgia Web

Impact Imprimé, Web

Symbol Imprimé, Web

Times New Roman Imprimé, Web

Trebuchet MS Web

Verdana Web (petits caractéres)

 Webdings Web

Exemple

Texte en Arial Black, Gadget, sans-serif

Code CSS
.texte1 {
font-family: "Arial Black, Gadget, sans-serif";
}

Code HTML
<p class="texte1">Texte en Arial Black, Gadget, sans-serif</p>

Taille de la police de caractére

font-size: 14px;

Les tailles de police en HTML peuvent être exprimées en px, pt, in, cm, mm, pc,
em, ex %
Exemple

Texte dans un bloc de paragaphe en Arial Black, Gadget, sans-serif et taille

14px

Code CSS
.texte-taille14 {
font-family: "Arial Black, Gadget, sans-serif";
font-size: 14px;
}

Code HTML
<p class="texte-taille14">Texte dans un bloc de paragaphe en Arial Black, Gadget, sans-
serif et taille 14px</p>

Couleur de la police de caractére

color: #FF0000; /* Rouge */

Exemple

Texte rouge

Code CSS
.texte-rouge {
color: #FF0000; /* Texte en rouge */
}

Code HTML
<p class="texte-rouge">Texte rouge</p>

Comme vous pouvez le constater, la couleur de la police, peut être exprimée en

texte (Anglais) ou en héxadécimal.
1. En texte : Tout simplement, les couleurs écrites en Anglais
2. En héxadécimal : On ajoute un diése avant les valeurs numériques, les 6
valeurs à la suite correspondent aux valeurs du rouge, du vert et du bleu
Comme vous le savez, les couleurs du web sont exprimées en RVB (Rouge, vert,
bleu)
Exemple #FF0000
FF = valeur du Rouge, 00 = Valeur du vert, 00 = Valeur du bleu

En savoir plus sur les couleurs HTML

Grassage du texte
font-weight : bold;

Valeurs possibles : lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900,
bold, bolder
Exemple

Texte gras et rouge

Code CSS
.texte-gras-rouge {
font-weight: bold; /* Texte gras */
color: #FF0000;
}

Code HTML
<p class="texte-gras-rouge">Texte gras et rouge</p>

Style
font-style : italic;
Valeurs possibles : normal, italic, oblique
Exemple

Texte en italique et rouge

Code CSS
.texte-italique-rouge {
font-style: italic;
color: #FF0000;
}

Code HTML
<p class="texte-italique-rouge">Texte en italique et rouge</p>

Variante de police
font-variant: small-caps; /* Autre valeur possible : normal*/

Permet d'afficher un texte en petites capitales, vous pouvez l'utiliser par

exemple l'utiliser sur des titres
Exemple

TEXTE EN PETITE CAPITALE ET ROUGE

Code CSS
.rouge-capital {
font-variant: small-caps;
color: #FF0000;
}

Code HTML
<p class="rouge-capital">Texte en petite capitale et rouge</p>

Hauteur de ligne
line-height: 40px;

Les hauteurs de police en HTML peuvent être exprimées en : : px, pt, in, cm,
mm, pc, em, ex %
Exemple de texte avec une hauteur de ligne fixée à 40px sur fond rose

Texte avec une hauteur de 40px sur fond rose

Code CSS

.hauteur-40 {
line-height:40px;
background-color:#FCF; /* La couleur de fond */
}

Code HTML
<p class="hauteur-40">Texte avec une hauteur de 40px sur fond rose</p>
La casse
text-transform: uppercase;

Valeurs possibles

 capitalize, premiére lettre du texte en majuscule,

 uppercase, texte en majuscule
 lowercase, texte en minuscule,
 none, texte normal.
 inherit hérite de son parent

Exemple

TEXTE ÉCRIT EN MINUSCULE QUI S'AFFICHE EN MAJUSCULE

Code CSS
.majuscule {
text-transform: uppercase;
}

Code HTML
<p class="majuscule">Texte écrit en minuscule qui s'affiche en majuscule</p>

Soulignement
text-decoration: underline;

valeurs possibles :
underline (souligné), overline (ligne au dessus), line-throught (barré)
blink (clignotant), none (aucun)
Exemple

Texte souligné

Code CSS
.texte-souligne {
text-decoration: underline;

Code HTML
<p class="texte-souligne">Texte souligné</p>
Les arriéres plan et images d'arriére
plan en CSS
Dans ce tutoriel, nous allons aborder la gestion des images d'arrière plan en
CSS.

Les couleurs d'arriére plan

background-color: #ebf6f9;

La couleur d'arriére plan peut être exprimée en texte (Anglais) ou en

héxadécimal comme la couleur du texte, que nous avons vu précédemment

En savoir + sur les couleurs HTML

Exemple

Texte sur fond bleu

Code CSS
.fond-bleu{
background-color: #ebf6f9;
}

Les images d'arriére plan

background-image: url(../images/exclamation-orange.png); /* url de l'image */
background-repeat: no-repeat; /* Ne pas répéter l'image sur X et Y*/

Par défaut, une image se répéte sur x et y, donc on doit compléter, le

"background-repeat" pour agir sur la répétition.
Valeurs possibles :

 repeat : l'arriére plan ou fond se répéte, valeur par défaut.

 repeat-x : l'arriére plan ou fond se répéte horizontalement.
 repeat-y : l'arriére plan ou fond se répéte verticalement.
 no-repeat : l'arriére plan ou fond ne se répéte pas.
 inherit : l'arriére plan ou fond hérite des propriétés de son parent

background-attachment : fixed;

La propriété de feuille de style css background-attachment permet de fixer

l'image d'arriére plan (image de fond) lorsque l'on utilise les barres de
défilement.
Valeurs possibles :
  fixed, l'arriére plan ou fond reste en place quand on scrolle.
 scroll, l'arriére plan ou fond se déplace quand on scroll qui est la valeur
par défaut.
 inherit, l'arriére plan ou fond hérite des propriétés de son parent (CSS 2).
 local, l'arriére plan ou fond ne se déplace pas quand l'élément qui la
contient scroll, mais avec le défilant de son contenu (CSS 3).
 Valeur,Valeur, accepte plusieurs valeurs citées ci-dessus séparées pour
une virgule pour les images de fond multiples (CSS 3)

background-position: left center; /* left : positionnement à gauche sur

l'horizontal, center : position au centre sur la verticale*/

Alignement horizontal
left correspond à l'alignement horizontal de l'image
Valaurs possibles :
left, center, right ou une valeur qui peut être exprimée en px, pt, in, cm, mm,
pc, em, ex %
Alignement vertical
center correspond à l'alignement vertical de l'image
Valaurs possibles :
top, center, bottom ou une valeur qui peut être exprimée en px, pt, in, cm, mm,
pc, em, ex %
Exemple

Texte dans la boite-alerte

Code CSS
.boite-alerte {
background-color: #FFC;
background-image: url(../images/exclamation-orange.png);
background-repeat: no-repeat;
background-position: right center;
padding-left: 40px; /* Remplissage à gauche de 40px, Si l'on ne met pas un padding
supérieur à la largeur de l'image, dans le cas où l'on saisit du texte dans la boîte, il
serait placer sur l'image */
padding-top:15px; /* Remplissage en haut */
padding-bottom:15px; /* Remplissage en bas */
}

Code HTML
<div class="boite-alerte">Texte dans la boite-alerte</div>

Les blocs en CSS

L'écart entre les mots
word-spacing : 10px;

La taille peut être exprimée en px, pt, in, cm, mm, pc, em, ex %
Exemple

Ecart entre les mots de 20 px

Code CSS
.ecart-entre-les-mots{
word-spacing : 20px;
}

Code HTML

<p class="ecart-entre-les-mots">Ecart entre les mots de 20px</p>

L'écart entre les lettres

letter-spacing : 10 px;

La taille peut être exprimée en : px, pt, in, cm, mm, pc, em, ex %

Exemple

E c a r t e n t r e l e s l e t t r e s d e 1 0 p x

Code CSS
.ecart-entre-les-lettres{
letter-spacing : 10px;
}

Code HTML
<p class="ecart-entre-les-lettres">Ecart entre les lettres de 10px</p>

L'alignement du texte
text-align : center;

text-align peut prendre ces différentes valeurs : left, center, right, justify

Exemple

Texte aligné au centre

Code CSS
.texte-aligne-au-centre{
text-align : center;
}
Code HTML

<p class="texe-aligne-au-centre">Texte aligné au centre</p>

Le décalage de la premiére ligne d'un texte

dans un bloc
text-indent : 50 px;

La propriété de feuille de style css text-indent permet de spécifier le décalage

la premiére ligne d'un texte.
La propriété de feuille de style text-indent css peut pendre une valeur

 numérique positive ou négative suivie de px ou % ou pt ou em. 0 est la

valeur par défaut.
 inherit, hérite de la propriété de son parent (css 2)

La propriété de feuille de style css text-indent est applicable sur l'ensemble

des balises HTML ou XHTML de type "bloc".
Exemple

La propriété de feuille de style css text-indent est applicable sur

l'ensemble des balises HTML ou XHTML de type "bloc".La propriété de feuille
de style css text-indent est applicable sur l'ensemble des balises HTML ou
XHTML de type "bloc".

Code CSS
.decalage-texte-bloc{
text-indent : 50px;
}

Code HTML

<p class="decalage-texte-bloc">La propriété de feuille de style css text-indent est

applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".La propriété de
feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML
de type "bloc".</p>

L'affichage d'un élément (disposition)

display : inline;

La propriété de feuille de style css display permet de spécifier la maniére dont

un élément est affiché.
La propriété de feuille de style display css peut prendre la valeur de :
- none, le bloc ne sera pas affiché.
- inline, le bloc sera considéré comme étant un seule ligne (sauf nets version
<6)
- block, spécifie un bloc.
- inline-block correspond à un élément inline avec un comportement bloc (non
w3c). Compatible avec Internet Explorer, Opéra et Safari pour FireFox < 2
utiliser -moz-inline-box.
- list-item le bloc sera affiché sous forme de liste, attention les versions
netscape <6 font un décalage
- run-incrée un bloc ou une ligne, selon le contexte, ne semble pas implémenté
sauf pour le navigateur opéra et safari.
- compact crée un bloc ou une ligne, selon le contexte, ne semble pas
implémenté sauf pour le navigateur opéra et safari.
- marker crée un marqueur pour les listes par exemple ou les feuilles de styles
auditives peut être considéré comme inline
- table correspond à 'table'
- inline-table correspond à 'table'
- table-row-group correspond à 'tboby'
- table-header-group correspond à 'thead'
- table-footer-group correspond à 'tfoot'
- table-row correspond à 'tr'
- table-column-group correspond à 'colgroup'
- table-column correspond à 'col'
- table-cell correspond à 'td', 'th'
- table-caption correspond à 'caption'
Exemple avec 2 blocs de paragraphe sur la même ligne

Texte 1

Texte 2

Code CSS
.bloc-inline{
display:inline;
margin:5px;
background-color: #FCF
}

Code HTML
<p class="bloc-inline">Texte 1</p> <p class="bloc-inline">Texte 2</p>

Les boîtes en CSS

Dans ce tutoriel, nous allons aborder les notions de hauteur, largeur, le padding
(écart à l'intérieur d'une boîte) et le margin (écart à l'extérieur d'une boîte).

La largeur d'un élément

width : 120px;
La taille peut être exprimée en :px, pt, in, cm, mm, pc, em, ex %

Exemple

Boite de 120px de large sur fond rose

Code CSS
.boite-120-largeur{
width:120px;
background-color:#F9F
}

Code HTML
<div class="boite-120-largeur">Boite de 120px de large sur fond rose</div>

la hauteur d'un élément

height : 50px;

La taille peut être exprimée en : px, pt, in, cm, mm, pc, em, ex %

Exemple

Boîte de 50px en hauteur sur fond rose

Code CSS
.boite-50-hauteur{
height: 50px;
background-color:#FCF;
}

Code HTML
<div class="boite-50-hauteur">Boîte de 50px en hauteursur fond rose</div>

Gestion de colonne en CSS

float : left;

On utilise la propriété css float pour gérer des colonnes en CSS.

Valeurs possibles :

 left (aligné sur la gauche)

 right (aligné sur la droite)
 none ( l'élément ne flotte pas

Exemple de colonne en CSS

Boîte rose de 150px, calée sur la gauche

Boîte rose de 150px, calée sur la gauche

.colonne{
width:150px;
float:left;
background-color:#FCF;
margin-right:5px
}

Lorsque vous créez des colonnes avec les propriétés float

Il faudra dire aux éléments qui vont être en dessous de se recaler normalement
en utilisant la propriété "clear" que vous retrouvez ci dessous.

L'affichage de l'élément flottant par rapport à

l'élément précédent
clear: both;

Valeurs possibles :

 left (l'élément sera affiché au dessous de l'élément précédent si ce

dernier est à float:left)
 right (l'élément sera affiché au dessous de l'élément précédent si ce
dernier est à float:rigtht)
 both (l'élément sera affiché au dessous de l'élément précédent si ce
dernier est à float:left ou float:rigtt)
 none (l'élément sera affiché à côte de l'élément précédent.)

Code CSS
.clear.{
clear: both;
}

Le remplissage (l'écart à l'intérieur d'une

boîte)
padding : 5px;

La taille peut être exprimée en px, pt, in, cm, mm, pc, em, ex %

Exemple
Le bloc a un remplissage de 5px, ce qui fait que mon texte n'est pas collé sur
les bords

Code CSS
.boite-remplissage{
width:400px;
background-color:#F9F;
padding:5px
}

Code HTML
<div class="boite-remplissage"> Le bloc a un remplissage de 5px, ce qui fait que mon
texte n'est pas collé sur les bords</div>

Vous pouvez affecter des valeurs différentes pour le padding-top, padding-

bottom, padding-left et padding-right .

Exemple avec des valeurs différentes

Le bloc a un remplissage de 5px en haut et en bas et de 40px à gauche et à

droite, notre texte ne touche tuojurs pas les bords

Code CSS
.boite-rempplissage-different{
width:400px;
background-color:#F9F;
padding-top:5px;
padding-bottom:5px;
padding-left:40px;
padding-right:40px
}

Code HTML
<div class="boite-rempplissage-different">Le bloc a un remplissage de 5px en haut et en
bas et de 40px à gauche et à droite, notre texte ne touche tuojurs pas les bords</div>

L'écart à l'extérieur d'une boîte

margin : 40px;

La taille peut être exprimée : en px, pt, in, cm, mm, pc, em, ex %

Exemple

Le bloc rose a une marge en haut, bas, gauche et droite de 40px

Code CSS
.boite-marge{
background-color:#F9F;
margin:40px;
}

Code HTML
<div class="boite-marge">Le bloc rose a une marge en haut, bas, gauche et droite de
40px</div>

Vous pouvez affecter des valeurs différentes pour le margin-top, margin-bottom,

margin-left et margin-right.
Exemple

Le bloc a une marge de 10px en haut et en bas et de 40px à gauche

et à droite

Code CSS
.boite-marge-differentes{
background-color:#F9F;
margin-top:10px;
margin-bottom:10px;
margin-left:40px;
margin-right:40px
}

Code HTML
<div class="boite-marge-differente">Le bloc a une marge de 10px en haut et en bas et de
40px à gauche et à droite</div>

Les listes en CSS

Dans ce tutoriel, nous allons aborder la gestion des listes ordonnées et non
ordonnées.

Spécifier le type et reformater une liste

ordonnée ou non ordonnée
list-style-type: circle;

Les principales valeurs possibles pour les listes non ordonnées (Liste à puce) :

 disc : Puce en forme de disque

o circle : Puce en forme de cercle

 square : Puce en forme de carré

d. lower-alpha : Lettre en minuscule

 E. upper-alpha : Lettre en majuscule
F. none : Rien n'est affiché avant votre texte)

Les principales valeurs possibles pour les listes ordonnées :

1. decimal : Avec une valeur numérique

ii. lower-roman : En chiffre romain en minuscule

III. upper-roman : En chiffre romain en majuscule

je vous ai donné la liste des valeurs les plus nutiles, Il en existe bien d'autres,
je vous laisse le soin de les découvrir

Exemple

o Liste à puce avec comme valeur circle

o Liste à puce avec comme valeur circle

Code CSS
ul
list-style-type: circle;
}

Mettre une image à la place d'une puce ou de

l'item
list-style-image:

Valeurs possibles :

 url (Chemin vers l'image)

 none (Pas d'image)

Exemple

 Liste à puce modifiée avec une image

 Liste à puce modifiée avec une image

Code CSS
ul{
list-style-image:url(images/arrow.gif);>
}

list-style-position
list-style-position:

Valeurs possibles :

 inside (lors d'un retour à la ligne automatique, le texte s'aligne au début

de la puce)
 outside (lors d'un retour à la ligne automatique, le texte s'aligne à la fin
de la puce)
 inherit (Hérite de la propriété de son parent)

Exemple

 Liste à puce classique

 Liste à puce classique

 Liste à puce avec comme valeur outside

 Liste à puce avec comme valeur outside

 Liste à puce avec comme valeur inside

 Liste à puce avec comme valeur inside

Code CSS
ul{ /* Liste à puce avec la valeur inside */
list-style-position: inside ;
}

Le positionnement en CSS
Dans ce tutoriel, nous allons maintenant aborder la notion de positionnement
en CSS.

Position
position: absolute;

Les valeurs possibles :

 static : L'élément est positionné en fonction de son ordre d'écriture dans

votre code HTML (Valeur par défaut)
 absolute : L'élément est positionné par rapport aux bords de la page. Il
défile avec la page.
 fixed : L'élément est positionné par rapport aux bords de la page mais ne
défile pas avec la page (Pas toujours compatbile avec tous les
navigateurs)
 relative : L'élément est positionné par rapport à l'élément précédent
 inherit : Hérite de la propriété de son élément parent
Code CSS
.boite-position-absolue
position:absolute;
left: 0px; /* Détermine la position par rapport au bord gauche de la page */
top:300px; /* Détermine la position par rapport au bord haut de la page */
width:190px;
padding:5px;
background-color:#FCF;
}

Exemple

Tester ici

Spécifier si un élément est visible

visibility: hidden;

La propriété de visibility peut prendre ces différentes valeurs :

 visible L'élément est visible (Valeur par défaut)

 hidden L'élément est caché
 collapse L'élément est invisible mais la place qu'il occupe est perdue.
Ne s'applique qu'à certains éléments (Pas reconnu par internet explorer
et opéra) égal à hidden;
 inherit Hérite de son parent

Exemple avec visible

Le texte dans ce bloc de paragraphe est visible.

Cet exemple n'est pas ultime, puisque par défaut, votre code sera visible !

Code CSS
.paragraphe-visible
visibility:visible;
}

Exemple de tableau avec la cellule C1 en hidden

A B C D

1 OK OK

2 OK OK OK

3 OK OK OK
Code CSS
.cellule-cache
visibility:hidden;
}

Le chevauchement des éléments (Position sur

la profondeur)
z-index:1;

La propriété de feuille de style css z-index permet de spécifier la position

d'empilement d'un bloc par rapport aux autres (notion de profondeur).
Les valeurs possibles :

 auto Le bloc aura un "z-index" plus grand que le bloc précédent déclaré
dans le code HTML (Valeur par défaut)
 Nombre positif
 inherit Hérite de son parent

Exemple

2 classes CSS placées sur des balises div, elles font toutes les deux 100 px de
large, la div rose a un index-z à 1, elle est en dessous de la div bleue qui elle a
un z-index à 2.

z-index1
.Rose

z-index2
.Bleue

Code CSS
.rose
position:absolute;
left:10px;
background-color:#FCF;
width:100px;
height:40px;
z-index:1;
}

.bleu
position:absolute;
left:60px; /* le positionnement à gauche est différent */
background-color:#6CF;
width:100px;
height:40px;
z-index:2;
}

Gérer les dépassement de boîte (Rendre

scrollable si le contenu est supérieur à la
taille de la boîte)
overflow: auto;

Utile sur une boite qui a par exemple une hauteur définie.
Les valeurs possibles :

 visible Le contenu en excés dans une boîte est affiché en dehors

 hidden Le contenu en excés dans une boîte est caché
 scroll Affiche une barre de défilement horizontale et verticale
 auto Affiche une barre de défilement horizontale ou verticale si le
contenu dépasse la taille de la boîte
 inherit hérite de son parent

Exemple

Si le contenu texte de cette boîte dépasse, j'aurai automatiquement des barres

scrollables horizontales et ou verticales. Si le contenu texte de cette boîte
dépasse, j'aurai automatiquement des barres scrollables horizontales et ou
verticales. Si le contenu texte de cette boîte dépasse, j'aurai automatiquement
des barres scrollables horizontales et ou verticales.

Code CSS
.boite-scrollable-si-besoin
background-color:#FCF;
height:40px;
padding:5px;
overflow:auto;
}

Positionnement d'un élément HTML avec

placement
left: 10px;

Les valeurs possibles :

 left (A gauche)
 right (A droite)
 top (En haut)
 bottom (En bas)
La taille peut être exprimée en
px, pt, in, cm, mm, pc, em, ex %
Exemple, mettez votre navigateur en plein écran et regardez les boîtes roses à
gauche et à droite

Tester ici
Code CSS
.position-gauche-10 {
position:absolute;
left:10px;
top:100px;
width:100px;
height:80px;
z-index:3;
background-color: #FFCCFF;
}
.position-droite-10 {
position:absolute;
right: 10px;
top: 100px;
width:100px;
height:80px;
z-index:4;
background-color: #FFCCFF;

Spécifier la zone visible d'un élément

clip: rect(0px, 200px, 100px, 0px);

Elle est généralement utilisée pour cacher une partie d'un élément.
Valeurs possibles :

 auto s'adapte au contenu

 rect(v1, v2, v3, v4) : v1 début de la zone visible verticale, v2 fin de la zone
visible horizontale, v3 fin de la zone visible verticale, v4 début de la zone
visible horizontale. L'unité "%" ne semble pas être acceptée
 inherit Hérite de son parent

Exemple

Cliquer ici
Code CSS
.boite-clip{
background-color:#FF99FF;
width:200px;
height:200px;
clip: rect(0px, 200px, 100px, 0px);
position: absolute;
}
Les extensions en CSS
Dans ce tutoriel, nous allons manipuler les extensions CSS.

page-break-before
page-break-before: auto;

Définit l'endroit où doivent être placés les sauts de page lors de l'impression du
document.

La propriété de feuille de style css page-break-before est une feuille de style

de type media="print" et est donc utilisée pour l'impression.
Valeurs possibles :

 auto ne force pas et n'interdit pas un saut de page avant.

 always force un saut de page avant
 avoid évite un saut de page avant
 left force un saut de page, avant l'élément de maniére à ce que la page
suivante soit mise en forme comme une page de gauche
 right force un saut de page, avant l'élément de maniére à ce que la page
suivante soit mise en forme comme une page de droite
 inherit Hérite de la propriété de son parent

page-break-after
page-break-after: auto;

valeurs possibles :

 auto ne force pas et n'interdit pas un saut de page aprés

 always force un saut de page aprés
 avoid évite un saut de page aprés
 left force un saut de page, aprés l'élément de maniére à ce que la page
suivante soit mise en forme comme une page de gauche
 right force un saut de page, aprés l'élément de maniére à ce que la page
suivante soit mise en forme comme une page de droite.
 inherit Hérite de la propriété de son parent

Rédéfinir l'apparence du curseur de la souris

cursor: pointer;

Valeurs possibles :
  auto
 nw-resize, curseur en forme de double petite fléche en diagonale bas
droit vers haut gauche
 crosshair, curseur en forme de croix fine
 n-resize, curseur en forme de double petite fléche verticale
 default, curseur en forme de grosse fléche
 se-resize, curseur en forme de double petite fléche en diagonale bas droit
vers haut gauche
 pointer, curseur en forme de main avec un doigt déplié
 sw-resize, curseur en forme de curseur en forme de double petite fléche
en diagonale bas gauche vers haut droit
 move curseur en forme de quatre fléches en croix
 s-resize, curseur en forme de double petite fléche verticale
 e-resize, curseur en forme de double petite fléche horizontale
 w-resize, curseur en forme de double petite fléche horizontale
 ne-resize, curseur en forme de double petite fléche en diagonale bas
gauche vers haut droit
 text, curseur en forme de sorte de grand I
 help, curseur en forme de fléche et "?"
 wait, curseur en forme de sablier
 inherit la forme du curseur hérite de son parent
 progress, curseur en forme de fléche avec sablier
 not-allowed, curseur en forme de rond barré
 no-drop, curseur en forme de main avec un doigt déplié avec un rond
barré
 col-resize, curseur fait de deux traits verticaux avec une fléche de
chaque coté
 row-resize, curseur fait de deux traits horizontaux avec une fléche de
chaque coté

Exemple avec help comme valeur

Passez votre souris sur ce texte

Code CSS
.curseur-aide
cursor: help;
}

Les filtres
L'opacité avec opacity

opacity: 0.2;

valeur possible :
Nombre : compris entre 0.0 et 1,
0.0 est totalement transparent et 1 est totalement opaque
Exemple
Bloc avec un texte noir une faible opacité, Bloc avec un texte noir et une faible
opacité,
Bloc avec un texte noir et une faible opacité,

Pour Internet Explorer (Version < à 9)

Pour obtenir cet effet de transparence sous Internet Explorer, Il faudra ajouter
a propriété filter qui est propre à Internet Explorer.
Code CSS
.boite-faible-opacite{
filter : alpha(opacity=10);/* Pour Internet explorer < à 9 */
opacity : 0.2;
}

L'ombrage du texte avec text-shadow

text-shadow: #000 2px 0px 2px;

Valeur possibles :
4 valeurs dans cet ordre

 Un nombre pour le décalage horizontal de l'ombre

 Un nombre pour le décalage vertical de l'ombre
 Un nmbre pour le rayon du flou (Si la valeur n'est pas complétée, il aura
comme valeur 0)
 Une couleur au format hexadécimal ou rgb (peu être mise premier)

Vous pouvez de même utiliser des valeurs seules :

 none Pas d'ombre

 inherit Hérite de son parent

Et enfin pour obtenir des ombres multiples :

Vous devez ajouter une "," aprés chaque bloc des 4 valeurs
Pour internet Explorer
Le text shadow ne s'affiche pa sdans Internet Explorer
Exemple

Bloc avec un flou qui ne s'affiche pas sur Internet Explorer, Bloc avec un flou
qui ne s'affiche pas sur Internet Explorer,
Bloc avec un flou qui ne s'affiche pas sur Internet Explorer

Code CSS
.BoiteOmbrage{
text-shadow: #000 2px 0px 2px;
}

Créer une feuille de style CSS

1. Afficher le panneau Styles CSS

Si le panneau CSS n'est pas affiché, il faudra aller dans le menu Fenêtre, puis
cliquer sur Styles CSS.

Dans le panneau Styles CSS, cliquez sur le bouton

Cette fenêtre apparaît :

2. Choisissez un type de sélecteur contextuel pour votre règle

Classe
Une classe est applicable à toutes les balises HTML
ID
A les mêmes fonctions qu'une classe, la différence fondamentale réside dans le
fait que l'on va pouvoir l'utiliser q'une seule fois dans une page. Le ID est
d'ailleurs utilisé en Javascript.

Balise
Permet de re-définir la mise en forme d'une balise HTML existante
Exemple : Redéfinir la taille et la couleur d'une balise h2.

Composé
Permet de créer des régles imbriquées en fonction des éléments que vous avez
sélectionné dans la page.

3. Nom du sélecteur : donner un nom à votre règle CSS

4. Définition de règle

Ce document uniquement

Dans ce cas, les régles de style CSS sont stockées dans la balise head de votre
page web (Donc pas trés pratique si vous souhaitez ré-utiliser ces règles dans
d'autres pages.

Nouveau fichier feuille de style

Ce premier choix permet de stocker votre mise en forme dans une feuille de
style externe qui pourra être appelée dans chacune de vos pages (Il est plus
judicieux de prendre cette option)

5. Enregistrer votre feuille de style CSS

Il ne faut bien entendu, pas mettre de caractères spéciaux et espaces dans le

nom du fichier.
Si vous avez plusieurs feuilles de style, vous pouvez créer un dossiser css qui
contiendra toutes vos feuilles de style.
Cette boîte de dialogue apparaît, maintenant il ne vous reste plus qu'à créer
vos règles avec le puissant éditeur CSS de Dreamweaver.
Vous pouvez ensuite, cliquer sur le bouton OK.

Lier une feuille CSS

1. Dans le panneau CSS, cliquer sur l'icône

2. Cette boîte de dialogue apparaît :

3. Cliquer sur le bouton "Parcourir", puis sélectionner votre feuille de style.

La case à cocher "importer", vous permettra d'importer le contenu au sein de

votre page HTML.

Modifier une régle CSS

Dans le panneau Styles CSS, double cliquer sur la régle que vous souhaitez
modifier.
Supprimer une régle CSS
Dans le panneau Styles CSS, cliquer sur le bouton

Appliquer une règle CSS

Sur une balise
1. Sélectionner la balise via l'interface graphique de Dreamweaver.
2. Dans le panneau Propriété, remplir le champ classe avec la classe que vous
souhaitez appliquer.

Insérer une règle CSS sur une balise div

La balise Div est communément appelé Calque. Elle est utilisée pour mettre en
forme (Un site web complet, ou des éléments texte, images ...)

Pour insérer une balise div dans votre page

1. Aller dans l'onglet Commun puis cliquez sur l'icône 6

2. Cette boîte de dialogue apparaît

 3. Insérer

Permet de choisir où insérer la balise, plusieurs choix sont possibles :

 Au point d'insertion
 Avant la balise
 Aprés le début de la balise
 Avant la fin de la balise
 Aprés la balise

4. Choisir si vous souhaitez insérer une classe ou un ID.

Créer un menu de navigation avec

Dreamweaver

Les menus Spry

Pour insérer un menu Spry, sélectionner l'onglet Spry.

Menu horizontal ou vertical

Pour insérer un menu horizontal ou vertical, cliquez sur le bouton 1

Exemple de menu horizontal

 Elément 1
o Elément 1.1
o Elément 1.2
o Elément 1.3
 Elément 2
 Elément 3
o Elément 3.1
 Elément 3.1.1
  Elément 3.1.2
o Elément 3.2
o Elément 3.3
 Elément 4

Exemple de menu vertical

 Elément 1
o Elément 1.1
o Elément 1.2
o Elément 1.3
 Elément 2
 Elément 3
o Elément 3.1
 Elément 3.1.1
 Elément 3.1.2
o Elément 3.2
o Elément 3.3
 Elément 4

Pour modifier le menu

1. Dans l'interface graphique, passer votre curseur au dessus du menu

2. Une étiquette bleu apparâit

3. Cliquer dessus et regarder dans le panneau propriété

Vous pouvez gérer jusque 3 niveaux.

4. Pour y affecter des liens, positionnez-vous dans le bloc rouge que j'ai nommé
"Edition des liens".

Texte : Le texte du lien

Lien : le lien vers la page
Titre : Le contenu du title, de l'infobulle qui s'affiche lorsque vous passez votre
curseur sur le lien
Cible : Noter _blank si vous voulez que la page s'aouvre dans une nouvelle
fenêtre
 Menu à onglet Spry
Pour insérer un menu à onglet, cliquer sur le bouton 2.

Exemple de menu à onglet

 ONGLET 1 Onglet 2
Contenu 1

Menu Accordéon Spry

Pour insérer un menu accordéon, cliquer sur le bouton 3.

Exemple de menu accordéon

Etiquette 1

Contenu 1

Etiquette 2

Balises meta dans Dreamweaver

Dans ce tutoriel, nous allons voir comment insérer les balises meta.

Onglet commun

Les balises Meta

Pour insérer des balises meta cliquez sur le triangle vers le bas situé à côté de
l'icône 13

Les balises meta se mettent entre les balises <head></head>

Il en existe bien d'autres, certaines sont inutiles pour le référencement naturel.

Donc je vous donne celles qui me semble le plus utile.
meta

Permet d'insérer tout type de balise meta.

Quelques exemples :

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

robots et googlebot

Ces balises Meta permettent de contrôler l'exploration et l'indexation

effectuées par les moteurs de recherche. La balise Meta robots concerne tous
les moteurs de recherche. En revanche, la balise Meta "googlebot" est
spécifique à Google. Les valeurs par défaut sont "index, follow" (équivalent à
"tous") et il n'est donc pas nécessaire de les spécifier. Nous acceptons les
valeurs suivantes (si vous insérez plusieurs valeurs, séparez-les par des
virgules) :

 noindex : empêche l'indexation de la page.

 nofollow : empêche le robot Googlebot de suivre les liens de cette page.
 nosnippet : empêche l'affichage d'un extrait dans les résultats de
recherche.
 noodp : empêche l'utilisation d'une description de remplacement tirée
des sites ODP/DMOZ.
 noarchive : nous empêche d'afficher le lien en cache associé à une
page.
 unavailable_after:[date] : permet de préciser l'heure et la date exactes
auxquelles l'exploration et l'indexation de cette page doivent cesser.
 noimageindex : permet d'indiquer que vous ne souhaitez pas afficher
votre page comme source d'une image s'affichant dans les résultats de
recherche Google.
 none : équivaut à noindex, nofollow.

Exemple :

<meta name="robots" content="noodp" />

<meta name="googlebot" content="noodp" />

keywords (Plus utilisée par Google)

Permet d'insérer la balise meta keywords, cette balise n'est pas concrétement
visible

Exemple :

<meta name="Keywords" content="Formation Dreamweaver">

description

Permet d'insérer la balise meta-desciption. Description que vous retrouvez

lorsque vous faîtes une recherche dans Google.

Exemple :

<meta name="Description" content="Je propose mes services en tant que

formateur sur Dreamweaver pour les professionnels et centres de formation
partout dans le Nord">

refresh

Permet d'actualiser une page ou rediriger vers une URL,pour actualiser votre
page

Exemple pour rafraichir une page toutes les 5 secondes:

<meta http-equiv="refresh" content="5">

Exemple pour rediriger vers une autre URL après 5 secondes :

<meta http-equiv="refresh" content="5;URL=http://www.conseil-

webmaster.com/">

Les formulaires HTML avec

Dreamweaver
Dans ce tutoriel, je vous propose de découvrir les formulaires HTML avec
Dreamweaver.

Balise form
Pour insérer la balise form, cliquer sur le bouton 1 .

Exemple

<form name="form2" method="post" action="traitement.php">

</form>
Quelques attributs

Attribut Commentaire

name nom du formulaire

method post ou get (Lire les tutoriels sur PHP)

action Nom de la page qui va traiter les informations envoyées via le formulaire

title Permet d'afficher une infobulle lorsque vous passez sur la balise

Champ de texte
Pour insérer un champ de texte, cliquer sur le bouton 2

Exemple

<label for="Nom">nom
<input type="text" name="nom" id="Nom" value=" " placeholder="Votre nom">
</label>

nom

Quelques attributs

Attribut Commentaire

label Etiquette permettant d'afficher ici le mot "Nom"

type Détermine le type du champ, ici text, signifie que l'on utilse un champ de type
texte

name Le nom du champ

Id Pour relier à l'étiquette for à côté du label (Peut être aussi utilisé en
 Javascript)

value Peut par exemple contenir une valeur par défaut

placeholde Permet d'afficher un texte qui sert d'exemple (En HTML5)

r

readonly Active le mode lecture seul, on ne peut pas écrire dedans

disabled Désactive le champ

required Ne peut pas envoyer le formulaire si le champ est vide (En HTML5)

class Permet d'y ajouter une classe CSS

Zone de texte
Pour insérer une zone de texte, cliquer sur le bouton 4.

Exemple

<label for="Comment">Votre commentaire</label>

<textarea name="comment" id="Comment" cols="45" rows="5"></textarea>

Votre commentaire

Quelques attributs

Attribut Commentaire

cols Largeur de caractère

rows Nombre de lignes

Groupe de bouton radio
Pour insérer une groupe de bouton radio, cliquer sur le bouton 7.

Exemple

<label for="Civilite_01">
<input name="civilite" type="radio" id="Civilite_01" value="M."
checked="checked">
M. </label>

<label for="Civilite_02">
<input type="radio" name="civilite" value="Mme" id="Civilite_02">
Non </label>

<label for="Civilite_03">
<input name="civilite" type="radio" id="Civilite_03" value="Melle"
checked="checked">
Melle </label>

M. Non Melle

Quelques attributs

Attribut Commentaire

checked Permet de sélectionner un item par défaut

Liste / Menu
Pour insérer une liste déroulante, cliquer sur le bouton 8.
Dans le panneau Propriété cliquez Valeurs de la liste et compléter les
étiquettes et les valeurs
Exemple

<label for="Select">Sport</label>

<select name="activite" id="Select">

<option value="Automobile" selected>Automobile</option>
<option value="Rugby">Rugby</option>
<option value="VTT">VTT</option>
</select>

Automobile
Sport

Quelques attributs

Attribut Commentaire

selected Permet de sélectionner un item par défaut

Boutons
Pour insérer un bouton, cliquer sur le bouton 12.

Exemple

Envoyer

<input type="submit" name="bouton" value="Envoyer">

Transfert FTP avec Dreamweaver

Dans ce tutoriel, nous allons voir comment transférer ses données en utilisant
le client ftp intégré de Dreamweaver.

Paramétrage dans Dreamweaver

 Dans le menu site, cliquez sur Modifier les sites
 Sélectionner le site que vous souhaitez modifier dans la liste
 Cliquez sur le bouton modifier sur la partie droite
 Cliquer sur l'onglet Avancé
 Allez dans le menu info distantes
  Dans la liste déroulante Accés, choisissez FTP
 Remplissez le champ Hôte FTP (Soit adresse IP ou nom de domaine)
 Indiquez en dessous le Répertoire où sont transférer vos données
 Précisez le nom d'utilisateur FTP (Que vous a donné votre hébergeur ou
le nom d'utilisateur que vous avez crée si vous aez vos propres serveurs)
 Saississez votre Mot de passe, cliquez sur le bouton Test (Permet de
tester les paramétres FTP que vous avez entré)
 Puis cliquez sur la case à cocher Enregistrer pour mémoriser votre
configuration

Transférer de données via le client ftp de

Dreamweaver
Panneau Fichier
Transférer vos données sur votre seveur ftp

1. Sélectionner le fichier ou Dossier dans le Panneau Fichier

2. Faîtes un clic droit
3. Sélectionner Placer dans la liste déroulante pour l'envoyer sur le serveur
ftp distant

Pour récupérer un fichier distant en local

Autrement dit récupérer sur votre PC le fichier qui se trouve sur votre serveur
distant

1. Sélectionner le fichier ou Dossier le Panneau Fichier

2. Faîtes un clic droit
3. Sélectionner Acquérir