La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Conception de Site Webs Interactifs Cours 4 Patrick Reuter

Présentations similaires


Présentation au sujet: "Conception de Site Webs Interactifs Cours 4 Patrick Reuter"— Transcription de la présentation:

1 Conception de Site Webs Interactifs Cours 4 Patrick Reuter

2 Conception de Site Webs Interactifs Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Programmation côté serveur –Pages web dynamiques (PHP) –avec connexion à une base de données (MySQL) Programmation côté client –JavaScript Référencement Internet (moteur de recherche)

3 XHTML en bref 1. Chaque balise nécessite une fermeture balise double : balises simples : ou 2. Imbriquer correctement les éléments Texte gras 3. Utiliser des minuscules dans les balises et leurs attributs 4. Chaque valeur d'attribut doit être entre guillemets 5. Conformité et type de document : et plus encore En savoir plus :

4 Conception de Site Webs Interactifs Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Programmation côté serveur –Pages web dynamiques (PHP) –avec connexion à une base de données (MySQL) Programmation côté client –JavaScript Référencement Internet (moteur de recherche)

5 Zengarden exemple

6 CSS Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilisé pour décrire la présentation d'un document structuré écrit en HTMLHTML Pour séparer la mise en forme et le contenu Permet de gagner en temps, en simplicité de création, et en maintenance.

7 CSS Les avantages des feuilles de style sont multiples : La structure du document et la présentation sont gérés dans des fichiers séparés. Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation. La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace. Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l'écran par exemple). Certains navigateurs web permettent d'accéder facilement à un choix de feuilles de style. p.ex. pour lécran p.ex. pour impression

8 Exemple : p { color: #0000ff; text-align: center; } ;

9 Priorités de CSS p { color: #D00E80; text-align: center; } p.vert { color: #008000; } p#mix2 { color: #0080FF; } p#mix3 { color: #0080FF; } Paragraphe 1 numero 2 Paragraphe 3 feuille.css index.php

10 Priorités de CSS p { color: #D00E80; text-align: center; } p.vert { color: #008000; } p#mix2 { color: #0080FF; } p#mix3 { color: #0080FF; } Paragraphe 1 numero 2 Paragraphe 3 feuille.css index.php Pour tous les paragraphes

11 Priorités de CSS p { color: #D00E80; text-align: center; } p.vert { color: #008000; } p#mix2 { color: #0080FF; } p#mix3 { color: #0080FF; } Paragraphe 1 numero 2 Paragraphe 3 feuille.css index.php Pour tous les paragraphes de la classe "vert"

12 Priorités de CSS p { color: #D00E80; text-align: center; } p.vert { color: #008000; } p#mix2 { color: #0080FF; } p#mix3 { color: #0080FF; } Paragraphe 1 numero 2 Paragraphe 3 feuille.css index.php Pour tous les identifiant "mix2"

13 Priorités de CSS p { color: #D00E80; text-align: center; } p.vert { color: #008000; } p#mix2 { color: #0080FF; } p#mix3 { color: #0080FF; } Paragraphe 1 numero 2 Paragraphe 3 feuille.css index.php Pour tous les identifiant "mix3"


Télécharger ppt "Conception de Site Webs Interactifs Cours 4 Patrick Reuter"

Présentations similaires


Annonces Google