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
Lundi 15 Décembre 2008 Aujourd'hui, les balises et.
Advertisements

LE LANGAGE JAVASCRIPT LES FENETRES.
Gérer un site avec Kompozer
Lundi 12 Janvier 2009 Aujourd'hui, la balise et la superposition Image/Texte.
HTML CSS.
1 Modèles. 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll
Cascading style sheets
Applications Internet – cours 3 La page web
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
Le langage XHTML 420-S4W-GG Programmation Web Client
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.
Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède.
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
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.
INTERNET Le langage HTML
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,
Introduction à SVG Scalable Vector Graphic. Informations ● Plus d'informations ici (draft, tutoriaux, outils... ): –
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.
Adobe Photoshop CS2 Morand-Pinçon David Michaut Charlotte SI28 – Ecriture intéractive et multimédia R R.
FLASH MX : séance 1 Sandrine Rabin Nicolas Mollet SI28.
Environnement Flash MX
Guillaume MICHAUD – Yvan LECOMTE
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.
EXPOSE N° 1 Thomas CLARISSE Yann GUIGUET.
Padmanaathan Gaayathrie
Dreamweaver le retour Avec Les Formulaires Les Calques
Flash MX er Séance LIU Xinlei GI02.
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
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.
SI28 Flash séance 1 Dessins et Animations. Présentation de Flash  Création d’animations pour le Web, pouvant contenir une forte interactivité.  Faible.
SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte.
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.
DREAMWEAVER 2 Michael LEPERS Pierre LAINÉ.  Formulaire  Calques  Comportements  Feuille de style CSS  Modèle  Scénario  Gestion du site.
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.
SMIL - Yves bekkers - IFSIC1 SMIL Synchronized Multimedia Integration Language par Yves Bekkers.
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 'objets' superposés Identification des styles pour chaque objet Ecriture du code

Analyse des calques et définition des styles 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. Image en position absolue. Calque en position absolue, contenant l'image de la barre de navigation.

Position des objets (left, top) et dimensions (width, height) (150, 100)Width 450 Height 1000 (10, 30) Width 550 Height 50 (10, 10) (75, 80) (10, 110)

Calque principal : main (10, 10) Calque contenu dans main, en position absolue par rapport à main, son conteneur (calque parent). Width 300 Height 40 Image de fond du calque main, avec positionnement précis. Marge dans le calque main Hauteur de ligne Style pour mise en forme du texte, Style pour mise en forme du texte Retrait 1 ière ligne