Mise en forme avancée et Publication. Le CSS Avertissement : vous ne devez pas maitriser le CSS juste savoir qu’il existe et à quoi il sert ! CSS signifie.

Slides:



Advertisements
Présentations similaires
La création de pages web Lorsqu'on « navigue » sur l'Internet, les pages que nous visitons sont encore pour beaucoup en HTML. Comment fait-on pour les.
Advertisements

Création de site internet
Conception de Site Webs Interactifs Cours 4
Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 8 Patrick Reuter.
Gérer un site avec Kompozer
2-Generalites FTP:Protocole De transfert de fichiers sur un réseau TCP/IP. Permet de copier des fichiers depuis ou vers un autre ordinateur du reseaux,d'administrer.
Le File Transfer Protocol
API Présentation Comment ajouter des pages. Vous voici dans notre site « laboratoire » pour la démonstration RAJOUTER UNE PAGE.
Comprendre l’environnement Web
Lycée Louis Vincent Séance 1
Bienvenue! Qui suis-je? Webmestre depuis 1994 Café Internet en 1996 Commerce électronique Gestion de contenu web Marketing interactif.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
Découverte de la feuille de style. CSS Cascading Style Sheets Il ne s'agit pas ici de faire un cours de code CSS ! Il faudrait un certain nombre de chapitres.
1. 2 PLAN DE LA PRÉSENTATION - SECTION 1 : Code HTML - SECTION 2.1. : CSS (Méthode 1) - SECTION 2.2. : CSS (Méthode 2) - SECTION 3 : JavaScript - SECTION.
HTML / CSS Gestion des systèmes d’information Classe terminale
HTML-CSS-XHTML.
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
Initialisation des sites web Étapes importantes. La conversion de vos comptes Web nest pas terminée (après discussion avec les techniciens voici comment.
Le flux RSS Symbole du flux RSS..
Convertir un fichier en format .pdf
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.
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éation d’un site internet en XHTML + L’hébergement By Reyne & Archinard.
Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le contenu, aucune. Tout se joue sur la mise en forme.
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
Les réseaux - Internet Historique Réseau local Internet Les protocoles
Cours de programmation web
Auteur : Frédéric Thériault 1. À quoi ça sert !?  Cascading Style Sheet  Modifier la page Web en ajoutant des styles aux balises  Modifier l’apparence.
Créer et Faire Vivre un Site Web Pédagogique Stage 09A013.
3. Personnaliser une page web Visualiser les liens entre feuille de style et html grâce à l’inspecteur d’éléments Savoir si les modifications doivent être.
Séminaire informel Création de pages web.
Concevoir un site web de A a Z Cours 3. Aujourd’hui Découper sa page en tranche pour une intégration graphique optimale avec Photoshop L’intégration des.
27/05/2008© 1 présente Les sites WEB Les premiers pas.
INTERNET heg eid Avril-juin 2001 A.Rezzonico.
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
T ECHNOLOGIES WEB CHAPITRE II : L E LANGAGE CSS Mme Amani JARRAYA & Mohamed MOHSEN 1.
LE FTP.
HTML Cours 3.
PPE 2 : Val Lamartinien Passion
Internet et le Web Internet existe sans le web....
Séance /10/2005 CSS et Dreamweaver. CSS : principes Cascading Style Sheet = feuille de style en cascade Norme du W3C :
V- Identification des ordinateurs sur le réseau
HTML Création et mise en page de formulaire Cours 3.
Deug 11 Systèmes d ’Information, cours 3a Michel de Rougemont Université Paris II Edition et Styles.
Part 3 & 4.  Toutes balises ouvertes se ferme ◦ Aucun accents ni espace ◦ Encore moins des majuscules  Il en va de même pour les noms de fichier.
Cour préparé par Melle Zineb SAALAOUI HTML/CSS.
Cascading Style Sheets CSS: Feuilles de Style en Cascade Feuille: Fichier-séparé.css Style: Design de votre Site Cascade: la Page d'accueil et les sous.
CSS et DREAMWEAVER.
HTML Création et mise en page de formulaire
24 octobre 2012 Grégory Petit
Vous voici dans notre site « laboratoire » pour la démonstration AJOUTER UNE PAGE Cliquez sur ENTREZ ICI pour accéder à la partie administration.
Language html VI- Les CSS. Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble.
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
Dreamweaver Séance 1.
SI28 Dreamweaver- Séance 1
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
Dreamweaver (2) ● les calques (layers) ● les comportements
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte.
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.
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.
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Création d’un site WEB 1 – Un site WEB c’est quoi ? 2 – Questions à se poser avant la construction d’un site WEB 3 – Principes de fonctionnement d’un site.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
TP ISN-Terminale S Notion de code HTML. I) Visualisation du code source d’une page web Se mettre sur une page web quelconque : clic droit, Afficher la.
Révisions pour l’exam L2 Informatique Obligatoire.
1 Programmation Web Programmation WAMP/LAMP Premiers principes.
Transcription de la présentation:

Mise en forme avancée et Publication

Le CSS Avertissement : vous ne devez pas maitriser le CSS juste savoir qu’il existe et à quoi il sert ! CSS signifie « Cascading Style Sheets » En français « feuilles de style en cascade » Extension.css Il y en a partout sur le web

A quoi ça sert ? Il sert à mettre en forme de façon très pointue et systématique la page HTML Il permet d’externaliser la mise en page HTML la mise en page est dans le CSS Le contenu (le texte) et la mise en forme avancée sont dans 2 fichiers différents !

Avantage ?!? Si je veux moderniser mon site, je modifie juste le fichier.CSS sans toucher au reste ! Un seul fichier CSS permet de mettre en forme la totalité du site : c’est magique ! Beaucoup plus de liberté pour la mise en forme avec le CSS (ombre, marge de la page, réactivité des liens, images…)

Comment insérer du CSS ? Rien de plus simple : il suffit d’indiquer au fichier HTML le chemin du fichier.css dans le Ex :

Autre méthode L’insérer directement dans le fichier HTML toujours dans le html,body{ width:100%; height:100%; margin :0px; background-color: #1E90FF; }

Principe général Il faut désigner un sélecteur C’est quoi donc ? C’est simplement le nom d’une balise h1, p, a… Vous choisissez une propriété à modifier font, color, background… Vous modifiez la valeur : #FF0000; calibri…

Concrètement Imaginons que je désire que mes h1 soient tous verts ! Et en écriture calibri ! Cela donne : h1{ color : #00FF00; Font-family : calibri; }

Publier sur internet Les fichiers créés en local sur notre ordinateur vont être enregistrés sur un serveur distant. De quoi s’agit-il ? Il s’agit tout simplement d’un ordinateur situé dans un autre endroit.

Comment y accéder ? Il existe un protocole c’est-à-dire une norme permettant l’échange de fichiers entre deux ordinateurs distants. C’est le protocole FTP : File Transfert Protocol

Qu’est ce que le FTP ? C’est un protocole (un langage de discussion) dans lequel un ordinateur envoie des requêtes à un ordinateur distant. L’ordinateur en local s’appelle le client. L’ordinateur distant est appelé le serveur. FTP est un protocole client-serveur !

Dans notre cas ? Notre ordinateur (le client) envoie des paquets de données à un serveur l’ordinateur qui héberge le (ou les) sites internet.

Historique du protocole FTP Le protocole FTP existe depuis les années Il subit périodiquement des modifications au gré de l’évolution de l’informatique. (80, 85, 97…)

Comment utiliser le FTP ? En utilisant une URL permettant l’accès au FTP En utilisant un logiciel spécifique : FileZilla, Cyberduck… (c’est un logiciel présentant une interface graphique simplifiant grandement l’opération)