Réaliser le site Bic à l'aide de calque, avec les éléments suivants: Image de fond: fondBIC.gif (20k) Personnage BIC: bicman.jpg (4k) Barre de navigation,

Slides:



Advertisements
Présentations similaires
Votre logo à insérer ici
Advertisements

Lundi 15 Décembre 2008 Aujourd'hui, les balises et.
Gérer un site avec Kompozer
HTML CSS.
1 Modèles. 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll
Enregistrement d’un document
Applications Internet – cours 3 La page web
Titre de votre session Prénom NOM Fonction ORGANISME Votre logo
Créer une interface graphique avec Photoshop.
HTML CSS.
CSS.
Syntaxe de la balise HTML
HTML / CSS Gestion des systèmes d’information Classe terminale
CSS : Quelques exemples de mise en page fluide en n colonnes
Faculté I&C, Claude Petitpierre Cascaded style sheets CSS.
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
31 octobre 2012 Grégory Petit
Les feuilles de style en HTML. CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent.
Cliquez pour modifier le style du sous-titre Cliquez pour modifier le style du titre.
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
Template joomla Leblanc 2011.
Lancement de Microsoft Word
Auteur : Frédéric Thériault 1. Les boîtes 2 Les attributs 3 width height margin margin-top margin-right margin-bottom margin-left border-style border-width.
 Objet window, la fenêtre du navigateur
Zone 1 Zone 2 Zone 3 Zone 4 Zone 5 Zone 6. La zone 1 : le bandeau devra faire 741 pixels de largeur et ne pas comporter de motifs à sa droite afin de.
Application des CSS Régie des rentes du Québec Carolyne Dubé, RRQ Éric Fontaine, DMR.
Cliquez pour modifier le style du titre
SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008.
1 1 ière partie: les bases du langage HTML Plan: Structure du document Eléments de texte Liens Objets multimédia Etre présent sur Internet: Conception.
Réaliser le site Bic à l'aide de calque, avec les éléments suivants: Image de fond: fondBIC.gif (20k) Personnage BIC: bicman.jpg (4k) Barre de navigation,
Lancement de Microsoft Word 1. Cliquer avec le bouton droit de la souris sur le raccourci de « Microsoft Office Word 2003 » sur le bureau, 2. Dans le menu.
CSS et DREAMWEAVER.
Contribution CMS.Eolas
Dreamweaver Séance 1.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Présentation de Dreamveawer
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
FLASH MX : séance 1 Sandrine Rabin Nicolas Mollet SI28.
Environnement Flash MX
Présentation Dreamweaver 8 (1) Nina BOUAZIZ et Matthieu DI RUSSO SI28.
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
FLASH MX : séance 1 Vivien FILIPPINI Jeanne VERRE Exposé SI28.
DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek.
Présentation Dreamweaver – Partie 2 Mickaël PIQUE – Automne 2004.
Exposé DREAMWEAVER 2 Guillaume DUBREUIL Adrien HADOUX.
EXPOSE N° 1 Thomas CLARISSE Yann GUIGUET.
Padmanaathan Gaayathrie
Mathieu Pluvinage Marie Vilain
Dreamweaver le retour Avec Les Formulaires Les Calques
Dreamweaver (2) ● les calques (layers) ● les comportements
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
DREAMWEAVER Séance 2 SI28 – P06 Nolwenn PICHAUD.
SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P PRESENTATION Dreamweaver 2.
Flash 1 Cariou SandraCoffinot Nicolas. Sommaire : I)Généralités II)Interface de Flash III)Grouper et Dissocier IV)Image clé V)Scénario et calques VI)Symboles.
DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.
Sommaire : -A propos des images importées -Les boutons et l’interactivité dans la scène -Textes dynamiques -Les clips (les liaisons) -Les sons -Les composants.
DREAMWEAVER MX2 - Séance 2 Les calques Les comportements Les scénarios Les formulaires Les feuilles de style Les modèles Les cadres Mise en ligne Jérôme.
On va découvrir la magie de ....
Dreamweaver 2éme séance Murat Keles. Présentation I.CSS et Dreamweaver II.Les calques III.Les scénarios IV.Les comportements V.Les cadres VI.Mise en ligne.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
Séance 2 Marie Lavogez Justine Leleu Dreamweaver MX.
1 Dreamweaver SI28: Ecriture interactive et multimédia Vincent Drapier Nabil El Hefni Automne 2006.
SI28 : Dreamweaver 2 Feuilles de styles Calques Template / Modèle Comportements Scénarios Mise en ligne Clément BLONDEL GSM04 Christelle CHATENET GB04.
SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia.
1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.
Chapitre 5 XHTML et CSS. Votre titre …votre code xhtml … Gabarit xhtml sans feuilles de style.
Transcription de la présentation:

Réaliser le site Bic à l'aide de calque, avec les éléments suivants: Image de fond: fondBIC.gif (20k) Personnage BIC: bicman.jpg (4k) Barre de navigation, image cliquable: menu2.jpg (4k) Barre de navigation, image cliquable: menu1.gif (14k) Balle: big.jpg (2k) Balle: small.jpg (1k) Procédure: décomposer le document en calques superposés Identification des styles pour chaque calque Ecriture du code

Analyse des calques L'image de fond impose le positionnement des calques: 5 calques (3 x balle, 1 x barre de navigation et le calque principal Calque en position absolue. Nom du Style: main Calques (ou directement l'image) en position absolue. Définition du style dans le calque lui même Calque en position absolue. Nom du Style: menu1

Position des calques (150, 100)Width 450 Height 1000 (10, 30) Width 550 Height 50 (10, 10) (75, 80) (10, 110)

Calque main (10, 10) Calque contenu dans main, en position absolue par rapport à main, son conteneur (calque parent). Nom du style: menu2 Width 300 Height 40 Image de fond du calque main, avec positionnement précis Définition dans le style: main Marge dans le calque main Définition dans le style: main (paramètre PADDING et non MARGIN!) Hauteur de ligne Style pour mise en forme du texte, Définition dans le style: titremain Style pour mise en forme du texte, Définition dans le style: textmain Retrait 1 ière ligne