La lecture en ligne est gratuite
Télécharger

Publications similaires

Mise en page CSS[partie 3 : les Balises diV]1°année b.t.s. communication visuelle /optionsmma mulTImédIà techno Dreamweaver
HiÉrarcHisation des contenus
CETTE PàRTIE uTIlIsE lEs InsERTs dIREcTs dE bàlIsEsdiv.L’àPPRochE EsT moIns InTuITIvE qu’àvEc l’uTIlIsàTIon dEs càlquEs [partie 2] màIs PERmET d’édITER dIREcTEmEnT là fEuIllE dE sTylE dàns un fIchIER ExTERnE.
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 balisesdivest 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 balisediv
Cli uersurle CSSNouveau st
Créer une nouvelle feuille de stlesst les .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 textePlacez ici le contenu...
Utiliser la fonctionnalité de Dreamweaver 8 : l’Arrière-plans en feuille CSS
2
lyceelecorbusier_jcg_2006/2007
Cliquer sur le boutonInsérer une balise divde la barre d’insertion Il s’agit de placer le conteneurheaderà l’intérieur du conteneurprincipalpour établir une liaison de parenté :headersera enfant deprincipal.
Cliquer surNouveau style CSS
Dans la catégorieBoîte : 1000 x 249 pixelstaille du bandeau
Pour le bloc-enfant 2 :milieu Supprimer le textePlacez ici... Insérer une balisediv ChoisirInsérer : Après la balise <div id="header"> ID = milieu style : #milieu Boîte : 1000 x 363 pixels
Placer 3 blocs dans le conteneurmilieu Les 3 blocs doivent se placer sur la même ligne. Il est nécessaire d’ajouter une propriété de flottement.
Supprimer le textePlacez ici... Insérer une balisediv ChoisirInsé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 balisediv ChoisirInsérer : Après la balise <div id="milieugauche"> ID = milieucentre style : #milieucentre Boîte : 480 x 363 pixels / Flottante : gauche
Insérer une balisediv ChoisirInsé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 balisediv ChoisirInsé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 textePlacer ici le contenu...supprimer.
Passer en modeCode
En utilisant lelisser/dé oserinsérer les imaes de la manière suivante :
Repasser en modeCré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 leheader, dans la palettePropriétés.Dans le champSec.,incrirelogo 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 fichiertranssib-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-Plàn, 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= relatif, Type
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-Plàn, 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.jpgettrans_trek_07.jpg
Définir le style pour le blocprincipal : aRRIèRE-Plàn, Image d’arrière-plan = fond-transtrek.jpg ; Répétition = répétition y
Définir le style pour le blocmilieu : tyPE, Police = Courier... ; Taille = 12 pixels ; Couleur = #333 aRRIèRE-Plàn, 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 blocmilieudroite : tyPE, Police = Arial... ; Taille = 9 pixels ; Couleur = #333
Créer une classe.margepour le texte BoîTE, Marge = - 10 px, 10 px, 10 px 10 px Appliquer aux différents paragraphes
Définir le blocpied tyPE, Police = Arial... ; Taille = 10 pixels ; Épaisseur = 700 ; Couleur = #666 aRRIèRE-Plàn, 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 parauto
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