Tutoriel Dreamweaver

Dreamweaver

Découvez la puisssance de Dreamweaver dans ces tutoriels.

HTML HTML5 CSS Bootstrap PHP

Insertion de texte dans Dreamweaver

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

Onglet Texte

Onglet insertion 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"

Texte en gras Dreamweaver

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"

Texte en gras Dreamweaver

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"

Texte en gras Dreamweaver

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

Retrait de paragraphe

Exemple

Une citation de paragraphe
<blockquote>Citation de Paragraphe</blockquote>

5 Texte préformaté

Pour insérer un text 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é"

Texte en gras Dreamweaver

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 uen balide h1, 9 pour insérer une balise h2, 10 pour insérer une balide 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

Texte en gras Dreamweaver

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"

Liste non ordonnées

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

Liste non ordonnées

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 uen abbré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'abbré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'abbré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