Dreamweaver - Technomultimedia

b.t.s.
communication visuelle / options mma
1
techno
Dreamweaver
Mise en page CSS
°année
multimédia
[partie 3 : les BALISES DIV]
Cette partie utilise les inserts directs de balises div. L’approche est moins intuitive qu’avec
l’utilisation des calques [partie 2] mais permet d’éditer directement la feuille de style dans un
fichier externe.
HiÉrarchisation
des contenus
Mise en forme d’une page type structurée comme un site portail.
1
lyceelecorbusier_jcg_2006/2007
insertion de
balises div
L’organisation visuelle des balises div est moins visuelle que celle des calques.
Aussi il est plus facile de travailler, dans un premier temps, avec des tranches d’images et
d’ensuite les remplacer par de texte et des images d’arrière-plan.
Créer et enregistrer une page html dans le dossier du site transsiberien.
Dans la barre de titre inscrire Passion Transsib-Trek.
Insérer une balise div
Cliquer sur Nouveau style CSS
Créer une nouvelle feuille de styles styles3.css
Ainsi la composition sera centrée horizontalement. Le Type = absolu positionne par rapport à
l’origine du document. La maquette mesure 1000 x 634 pixels [la hauteur n’aura ultérieurement
pas d’importance mais pour l’instant il est plus simple de l’indiquer]
Dans la catégorie Boîte : marge gauche = -500 pixels [1000/2 !]
Valider [2 fois].
La fenêtre de style CSS affiche le nouveau style : #principal
Le conteneur principal va accueillir d’autres blocs. Retirer le texte Placez ici le contenu...
Utiliser la fonctionnalité de Dreamweaver 8 : l’Arrière-plans en feuille CSS
2
lyceelecorbusier_jcg_2006/2007
Cliquer sur le bouton Insérer une balise div de la barre d’insertion
Il s’agit de placer le conteneur header à l’intérieur du conteneur principal pour établir une liaison
de parenté : header sera enfant de principal.
Cliquer sur Nouveau style CSS
Dans la catégorie Boîte : 1000 x 249 pixels taille du bandeau
Pour le bloc-enfant 2 : milieu
Supprimer le texte Placez ici...
Insérer une balise div
Choisir Insérer : Après la balise <div id="header">
ID = milieu
style : #milieu
Boîte : 1000 x 363 pixels
Placer 3 blocs dans le conteneur milieu
Les 3 blocs doivent se placer sur la même ligne. Il est nécessaire d’ajouter une propriété
de flottement.
Supprimer le texte Placez ici...
Insérer une balise div
Choisir Insérer : Après le début de la balise <div id="milieu">
ID = milieugauche
style : #milieugauche
Boîte : 260 x 363 pixels / Flottante : gauche
Insérer une balise div
Choisir Insérer : Après la balise <div id="milieugauche">
ID = milieucentre
style : #milieucentre
Boîte : 480 x 363 pixels / Flottante : gauche
Insérer une balise div
Choisir Insérer : Après la balise <div id="milieucentre">
ID = milieudroite
style : #milieudroite
Boîte : 260 x 363 pixels / Flottante : gauche
Pour finir
Insérer une balise div
Choisir Insérer : avant la fin de la balise <div id="principal">
ID = pied
style : #pied
Boîte : 1000 x 21 pixels / Flottante : gauche
La structure est conforme pour accueillir le contenu
3
lyceelecorbusier_jcg_2006/2007
intégration
des contenus
Un bug ergonomique dans Dreamweaver 8 empêche de glisser le contenu dans les blocs une fois
le texte Placer ici le contenu... supprimer.
Passer en mode Code
En utilisant le glisser/déposer insérer les images de la manière suivante :
Repasser en mode Création
Afin d’ajouter les informations sur la taille des images, sélectionner chacune d’elles et cliquer
sur le bouton :
et supprimer éventuellement le texte excédant. Enregistrez
Pour rendre les images conformes aux normes il faut leur associer un texte descriptif.
Cliquer sur l’image dans le header, dans la palette Propriétés. Dans le champ Sec., incrire logo
espace-transsiberien.com.
Pour la photographie de gauche : forêt de l’Oural
Pour celle de droite : plaine de Mongolie - yourte
Reste à substituer les images par de vrais textes.
Ouvrir le fichier transsib-trek.rtf
Remplacer chaque image par son texte respectif
Attribuer la balise en-tête 1 au titres : Détails du séjour, Ce qui fait notre différence
Attribuer la balise en-tête 2 au titre-secondaire : Moscou - Irkoutsk - Lac Baïkal - Oulan Bator
- Pékin
Attribuer la balise en-tête 3 au titre : Passion Transsib-Trek,
Si nécessaire supprimer les sauts de lignes inutiles et créer les paragraphes nécessaires.
Désactiver l’option : Arrière-plans en feuille CSS
4
lyceelecorbusier_jcg_2006/2007
les styles css et
les balises div
Créer le style de balise h1 :
Type, Police = Arial... ; Taille = 14 pixels ; Épaisseur = gras ; Couleur = #fff
Arrière-plan, Couleur d’arrière-plan = #cc0000
Bloc, Retrait du texte = 10 px
Boîte, Largeur = auto ; Hauteur = 25 px ; Remplissage = 10 px, 0, 0, 0 Marge = 0, 0, -19 px, 0
Positionnement, Type = relatif
Créer le style de balise h2 :
Type, Police = Arial... ; Taille = 12 px ; Épaisseur = 700 ; Couleur = #cc0000
Boîte, Remplissage = 2 px, 2 px, 2 px, 10 px
Créer le style de balise h3 :
Type, Police = Arial... ; Taille = 14 px ; Épaisseur = gras ; Couleur = #000
Arrière-plan, Couleur d’arrière-plan = #949494
Bloc, Retrait du texte = 10 px
Boîte, Largeur = auto ; Hauteur = 25 px ; Remplissage = 10 px, 0, 0, 0 Marge = 0, 0, -19 px, 0
Positionnement, Type = relatif
Définir le style avancé pour les images : Img#photo
Boîte, Remplissage = 0 px, 0 px, 0 px, 0 px ; Marge = 0 px, 0 px, 10 px, 0 px
Appliquer ce style aux 2 images : trans_trek_05.jpg et trans_trek_07.jpg
Définir le style pour le bloc principal :
Arrière-plan, Image d’arrière-plan = fond-transtrek.jpg ; Répétition = répétition y
Définir le style pour le bloc milieu :
Type, Police = Courier... ; Taille = 12 pixels ; Couleur = #333
Arrière-plan, Image d’arrière-plan = fond-milieu.jpg ; Répétition = pas de répétition
Boîte, Largeur = 1000 px ; Hauteur = 350 px
Définir le style pour le bloc milieudroite :
Type, Police = Arial... ; Taille = 9 pixels ; Couleur = #333
Créer une classe .marge pour le texte
Boîte, Marge = - 10 px, 10 px, 10 px 10 px
Appliquer aux différents paragraphes
Définir le bloc pied
Type, Police = Arial... ; Taille = 10 pixels ; Épaisseur = 700 ; Couleur = #666
Arrière-plan, Couleur d’arrière-plan = #949494
Bloc, Alignement du texte = Centrer
Boîte, Largeur = 1000 px ; Hauteur = 25 px ; Remplissage = 0, 0, 0, 0 ; Marge = -10 px, 0, 0, 0
Supprimer les indications de hauteur pour #principal , #milieugauche, #milieudroit,
#milieucentre, remplacer par auto
Terminer en configurant les liens
#milieugauche a:link = arial, 12px, gras, #cc0000
#milieugauche a:visited = arial, 12px, gras, #cc0000
#milieugauche a:active = arial, 12px, gras, #cc0000
#milieugauche a:hover = arial, 12px, gras, #949494
#pied a:link = arial, 10px, #000
#pied a:visited = arial, 10px, #000
#pied a:active = arial, 10px, #000
#pied a:hover = arial, 10px, #fff
5
lyceelecorbusier_jcg_2006/2007