Séance 4 - 20/10/2005 CSS et Dreamweaver. CSS : principes Cascading Style Sheet = feuille de style en cascade Norme du W3C :

Présentation au sujet: "Séance 4 - 20/10/2005 CSS et Dreamweaver. CSS : principes Cascading Style Sheet = feuille de style en cascade Norme du W3C :"— Transcription de la présentation:

1 Séance 4 - 20/10/2005 CSS et Dreamweaver

2 CSS : principes Cascading Style Sheet = feuille de style en cascade Norme du W3C : http://www.w3.org/Style/CSS/ Une composante du DHTML (Dynamique HTML) avec le Javascript

3 CSS : les avantages Maintenance simplifiée du site Changer l’apparence de toutes les pages en une seule fois Création de pages HTML allégées avec moins de balises Compatibilité entre les navigateurs Compatibles avec les sites dynamiques (connexion SGBD) et avec les modèles/templates.

4 Une page HTML classique méta données ex : corps de la page : fond et forme exemple : les balises,,… trop nombreuses

5 Conséquences : lourdeur du code...

6 Implémentation des feuilles de styles En externe : –fichier externe «.css » appelé par la page HTML « comme une image » –fichier applicable à l’ensemble du site En interne : –styles spécifiés dans l’en tête du document (entre les balises ) –styles appliqués uniquement à la page concernée

7 Solution 1 : CSS interne à la page Dans la page HTML (entre les balises ) <!--.Style1 { font-size: 24pt; font-weight: bold; } -->

8 Solution 2 : CSS feuille externe Appel du fichier : 2 méthodes ou <!-- @import url("CSS/nom_fichier.css"); -->

9 CSS avec Dreamweaver Menu Texte > Style CSS > Gérer les styles Joindre si la feuille existe déjà Nouveau si à créer

10 CSS avec Dreamweaver

11

12 Pour les puristes CSS sans Dreamweaver Un éditeur de texte (Bloc Note) Une ligne pour appeler la feuille de style dans vos pages – –ou <!-- @import url("css/nom_fichier.css"); --> Créer et modifier le fichier.css avec l’éditeur de texte

13 CSS dans le détail Un style s’applique : –à une balise du code HTML exemple : H1, P, A (lien hypertexte) Sélecteur de classe (CLASS) :. nom-de-la-classe { propriétés ; } Sélecteur ID (utilisable une seule fois dans la page) : #nom-id { propriétés ; }

14 CSS dans le détail Pour la balise…rien besoin de faire Pour les classes (.nom_class) : texte, image, tableau,… Pour les sélecteurs ID (#premier) : texte… image… tableau...

15 Cas pratique 1 : manipuler les CSS …mise en pratique sur Dreamweaver : –Créer deux pages HTML (avec un lien entre elle) –Attacher la feuille de style fournie –Appliquer les styles sur des éléments ou du texte de vos pages –Modifier la feuille de style –http://scaschera.free.fr/master_2006/dreamweaver/css

16 Cas pratique 2 : réaliser un site sans tableau Source de l’exercice : –Site de MACROMEDIA : http://www.macromedia.com/fr/devnet/dreamweaver/articles/tabl eless_layout.html –Linux Pratique Juin-Juillet 2005

17 Ancien cours

18 1ère solution : JAVASCRIPT A ne pas confondre avec JAVA Netscape et SUN (1995) Intégration du code Javascript dans le code HTML Le Javascript est exécuté par le navigateur : –langage interprété (<> compilé) Plusieurs versions (1.0 à 1.3) Illustration…intégration d’un code dans du HTML

19 2ème solution : les sites dynamiques ou interactifs Utilisateur  BD INTERNET Architecture 3 Tiers : Client - Serveur WEB - Serveur d’Application - SGBD CLIENT Serveur WEB SGBD Serveur / service d’application Strate clientStrate application Strate données

20 Principes des sites dynamiques Le serveur WEB (http) envoie les pages générées au format HTML et réceptionne les requêtes du client Le serveur d’application est un logiciel qui traite les pages qui contiennent des scripts ou des balises coté serveur et assure la relation avec la SGBD. Les données sont stockées dans une BD

21 Avantages des sites dynamiques Interactivité accrue avec l’internaute Partage de l’information et traitement de l’information Personnalisation de l’interface selon le profil de l’internaute Fond et forme séparés Mises à jour plus aisées

22 Les technologies « serveur » Les langages de scripts : PHP, ASP, JSP, Coldfusion (CFM), PERL (Scripts CGI),... Les frameworks applicatifs : J2EE (Java),.NET Serveurs WEB (HTTP) –APACHE –IIS (Internet Information Serveur) de Microsoft –Domino (Lotus IBM), –OS X, Sun, etc.

23 Les technologies « serveur » Scripts CGI (Common Gateway Interface) en Perl ou C ASP/IIS et.NET : Microsoft Le monde JAVA / SUN (dérivé du C++) –serveur d’application –Machine Virtuelle Java sur le poste client –Framework J2EE : Sun, Tomcat, Jboss, IBM Websphere, BEA,... –Applets Java (côté client) –Servlets (coté serveur) ColdFusion.CFM (Allaire racheté par Macromedia)

24 Les technologies « serveur » : PHP Pesonnal Home Page - Hypertexte Preprocessor 1994 par Rasmus Lerdorf Issu du monde Libre et Open Source Moteur ZEND Engine 2.0 (applicatif) PHP 5 depuis août 2004 Une véritable alternative professionnelle On y reviendra...

25 LAMP : puissance & simplicité adaptées pour le web LAMP : Open Source leader sur le WEB –Linux –APACHE (Serveur HTTP) => près de 70 % des serveurs WEB (2004) –MySQL (SGBD) –PHP PHP (01 Informatique Novembre 2003) : –près de 40 % des sites web dynamique en France –55 % des grandes entreprises FR –78 % des entreprises FR du CAC 40 utilisent cette technologie

26 A voir sur le WEB http://news.netcraft.com http://news.netcraft.com/archives/web_server_survey.htm l

27 Pour ce simplifier la vie…EASYPHP www.easyphp.org (version 1.7 : 11 Mo à télécharger) Installation sans aucune configuration d’un environnement de conception de sites dynamiques sous Windows : –Apache 1.3 –PHP 4 –Mysql Déjà installé sur vos machines…

28 Un peu de pratique sur les sites dynamiques …les formulaires Importance du formulaire sur le WEB ? Les limites du HTML Situation : vous devez concevoir un formulaire de contact qui conservera la trace de la question ou de la remarque de l’internaute dans une base de données. –Réalisation du formulaire (sans les fonctions) –Insertion de la date et heure en javascript