TD 3 : Utilisation des balises DIV et SPAN dans Dreamweaver

Université Stendhal - Département Informatique Pédagogique - Jean-Philippe Pernin
TD 3 : Utilisation des balises DIV et SPAN dans Dreamweaver
OBJECTIFS :
•
Savoir utiliser les balises DIV pour
• Mettre en forme des blocs de texte
• Positionner des blocs de texte dans l'écran
• Assurer la navigation avec des pseudo-cadres
TRAVAIL PREALABLE
Charger les fichiers nécessaires au TD à l'adresse fournie par l'enseignant.
1
RAPPEL
On suppose que l'on sait attacher un style à une balise prédéfinie HTML (H1, H2, …H6, P, TR, TD, OL, UL, LI, etc..).
Les blocs DIV et SPAN permettent d'attacher des styles à des éléments composites.
1.1
Balise SPAN
La balise HTML SPAN permet de définir une "portion de ligne de texte" possédant un style spécifique si elle est reliée à
une feuille de style. Exemple :
1.2
Balise DIV
La balise HTML DIV permet de définir un "bloc" contenant du code HTML pouvant lui-même comprendre d'autres
balises. Ce bloc pourra, s'il est relié à une feuille de style :
• Posséder un style spécifique
• Être positionné à l'endroit de son choix dans la page
2
ASSOCIATION A UNE FEUILLE DE STYLE
Associez la page page1.htm avec la feuille de style page1.css. (voir TD précédents)
Que constatez-vous ? Quelles sont les balises qui ont été traitées par la feuille de style ?
3
3.1
UTILISATION DE LA BALISE SPAN : LA MISE EN FORME DE PORTION DE
TEXTE
Utilisation la balise SPAN
On veut par exemple que le premier caractère de chaque texte soit en grande capitale.
3.1.1
Associez un style à une portion de texte
Procédure à suivre avec Dreamweaver :
• Sélectionnez la première lettre du texte.
• Choisissez Menu…Inserer..Balise
• Sélectionnez span… puis appuyez sur le bouton Insérer
• Dans la fenêtre suivante, indiquez que vous voulez associer à cette balise SPAN un style lettre_capitale
(Remarque ce style n'existe pas, c'est à vous de le créer).
-1/4-
Université Stendhal - Département Informatique Pédagogique - Jean-Philippe Pernin
Rappel : On choisit :
➧ ID si la balise n’est utilisée qu’une fois dans le fichier,
➧ Classe si la balise est utilisée plusieurs fois dans le fichier. C'est le cas ici.
3.1.2
Pour créer le style lettre_capitale :
• Editer la feuille de style associée à la page
Bouton droit…Styles CSS…Gérer les styles
• Choisissez page1.css puis Modifier
• Cliquez sur Nouveau pour créer un nouveau
style
• Choisissez Classe pour créer un nouveau style
(voir figure)
• Editez les caractéristiques de votre style (par
exemple Georgia 36 pts)
3.1.3
Pour utiliser le style lettre_capitale dans n'importe quelle portion de texte
• Sélectionnez la première lettre du texte choisi.
• Cliquez Bouton droit…Styles CSS… et choisissez le
style lettre_capitale qui est maintenant disponible dans le
menu.
-2/4-
Université Stendhal - Département Informatique Pédagogique - Jean-Philippe Pernin
4
PREMIERE UTILISATION DE LA BALISE DIV : LA MISE EN FORME D'UN BLOC
HTML
Le principe est le même que pour la balise SPAN, mais il s'agit ici d'appliquer un style à n'importe que bloc contenant
lui-même d'autres balises.
Par exemple, on voudrait qu'alternativement, chacune des actualités (y compris son titre) soit d'une couleur différente.
La première sera affichée en rouge, la seconde en bleu, la troisième en rouge, la quatrième en bleu, etc.
Pour cela il faudra créer deux nouveaux styles que nous appellerons texte_rouge et texte_bleu.
• Editez la feuille de style page1.css et
ajoutez les lignes ci-contre (le point est
obligatoire pour indiquer qu'il s'agit d'un
nouveau style, non existant dans le langage
HTML).
• Sélectionnez la première actualité (en
incluant le titre et le texte).
• Sélectionnez Menu…insertion…Objets
mise en forme…Balise Div
• Dans la fenêrte suivante, sélectionnez
le style texte_rouge
5
DEUXIEME UTILISATION DE LA BALISE DIV : LE POSITIONNEMENT
Dans la fenêtre d'édition des styles, vous disposez d'un choix <boite>. Ceci vous permet de placer vos blocs de texte
sous la forme de lignes ou de colonnes.
Par exemple, on peut définir le style texte_rouge de la façon suivante (voir figure suivante) :
• Choisir Bouton droit…Styles CSS…Gérer les styles...page1.css…
• Choisir Modifier...texte_rouge…Modifier…Boite
• Pour indiquer une colonne, préciser : Flottante… gauche
• Pour indiquer la largeur de colonne : Largeur…300…pixels
• Pour indiquer la taille des espaces entre les "boites" et des marges : Remplissage…10…pixels et Marge
…20…pixels
-3/4-
Université Stendhal - Département Informatique Pédagogique - Jean-Philippe Pernin
Nous voyons ainsi que nous pouvons organiser avec les DIV l'organisation de la page.
6
TROISIEME UTILISATION DE LA BALISE DIV : LES PSEUDO-CADRES
On veut arriver au résultat suivant :
Pour cela, on va utiliser les balises DIV et les styles pour positionner les cadres:
• lier la page page2.htm avec la feuille de style page2.css.
• étudiez et modifiez les propriétés de la feuille page2.css.
C'est cette technique qui est le plus utilisée aujourd'hui pour réaliser la navigation dans les sites web.
-4/4-