b.t.s. communication visuelle / options mma Dreamweaver Mise en page CSS [partie 3 : les BALISES DIV] 1 t e c h n o multimédia année HiÉrarchisation des contenus 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. Mise en forme d une page type structurée comme un site portail. 1
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. 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
Cliquer sur le bouton 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... 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... 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 Choisir Insérer : Après la balise <div id="milieugauche"> ID = milieucentre style : #milieucentre Boîte : 480 x 363 pixels / Flottante : gauche Choisir Insérer : Après la balise <div id="milieucentre"> ID = milieudroite style : #milieudroite Boîte : 260 x 363 pixels / Flottante : gauche Pour finir 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
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
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