Fabien CREPIN, ICnet et Dreamweaver 4 Comment fonctionne un site web? Structure ICnet/DIM Notions HTML Utilisation de Dreamweaver 4 Pour aller plus loin Fabien CREPIN, ICnet et Dreamweaver 4
1. Comment fonctionne un site web? Internet : Un client qui envoie des demandes via un browser Un serveur qui envoie les réponses sous forme interprétable par le browser Une page Du texte, éditable avec Notepad Ensemble de « balises » HTML, JavaScript, autres langages dynamiques On utilise des éditeurs de page web évolué aujourd’hui Un site Une page d’accueil Un ensemble de pages stockées sur une machine distante Des pages liées entre elles Une organisation structurée des fichiers Un ensemble de documents accessibles On met à jour le site par ftp Client Serveur HTML Javascript Liens Structure Fabien CREPIN, ICnet et Dreamweaver 4
2. Structure d’ICnet/DIM Une page d’accueil. Une charte graphique avec 2 feuilles de style. Deux modèles : un pour la page d’accueil et un pour les autres pages. Une structure arborescente. Charte graphique Fabien CREPIN, ICnet et Dreamweaver 4
Fabien CREPIN, ICnet et Dreamweaver 4 Page accueil Accueil Fabien CREPIN, ICnet et Dreamweaver 4
Fabien CREPIN, ICnet et Dreamweaver 4 Arborescence Fabien CREPIN, ICnet et Dreamweaver 4
Fabien CREPIN, ICnet et Dreamweaver 4 3. Notions HTML Une page Fichier texte éditable avec Notepad On utilise aujourd’hui des éditeurs web très évolués Structure d’une page vierge : <head></head> et <body> </body> Du Statique C’est du HTML, aucune action de l’utilisateur sur la page Exemple Du moins statique La page se modifie en fonction de ce que fait l’utilisateur Éditeur Head Body Javascript Action Fabien CREPIN, ICnet et Dreamweaver 4
Fabien CREPIN, ICnet et Dreamweaver 4 Page vierge Balise d’entête Balise de corps Fabien CREPIN, ICnet et Dreamweaver 4
3. Notions HTML : les cadres (frames) 1 Les cadres permettent de découper les pages en plusieurs zones auxquelles on peut attacher des styles, comportements ou modèles différents. Les cadres sont, a priori, indépendants les uns des autres. Ils peuvent servir à masquer une arborescence en utilisant une page index découpée en cadres. Les adresses sont alors masquées… Zone Fabien CREPIN, ICnet et Dreamweaver 4
3. Notions HTML : les cadres (frames) 2 Si une partie du site est fixe (entête, menu à gauche, etc), alors ils présentent l’intérêt de ne pas avoir à recharger cette partie à chaque fois… Exemple : Site de Surcouf. On peut convertir les cadres en tableaux. Inconvénient : les anciens navigateurs (antérieurs à ie3 ou netscape4 je crois) ne supportent pas les cadres… Mais ils deviennent très rares! Partie fixe Recharger Fabien CREPIN, ICnet et Dreamweaver 4
3. Notions HTML : balises et tableaux Elles délimitent des zones de texte dont elles modifient certains attributs (la taille, la couleur, la police, l’environnement : paragraphe, tableau, etc). Les plus utiles : <p></p>, <br>, <table></table> Normalement, on n’a pas à rentrer dans le code, mais parfois il faut faire du ménage! Tableaux <table></table>, <tr></tr>, <td></td> Les tableaux sont très utilisés pour créer des pages web, voire même très très utilisés! (pour vous en rendre compte, sauvegardez une page web genre la fnac et ouvrez la avec un éditeur web…) Ils permettent notamment d’aligner les objets, ce sont un peu les tabulations word du monde HTML… Zone Attributs <table> Fabien CREPIN, ICnet et Dreamweaver 4
Fabien CREPIN, ICnet et Dreamweaver 4 Page non vierge Balise de paragraphe Balise de tableau Fabien CREPIN, ICnet et Dreamweaver 4
3. Notions HTML : Formulaires <form></form> Ils invitent l’utilisateur à entrer des informations qui seront traitées par un script ou envoyées par e-mail (ou vers une autre page). L’action est l’adresse de la page de traitement. Plusieurs composants possibles : bouton, liste, menu, etc. Plusieurs attributs à définir. Si action=url, les données sont envoyées sous la forme « url?var1=data1&var2=data2… » et récupérables via un script (javascript ou autre langage). Informations Traitement Composants Fabien CREPIN, ICnet et Dreamweaver 4
3. Notions HTML : JavaScript <script language="JavaScript"></script> Langage permettant des interactions avec l’utilisateur Le script est exécuté par le PC client Nombreuses possibilités, notamment avec les fonctions Le soleil précédent Petit exemple Fonctions Client Fabien CREPIN, ICnet et Dreamweaver 4
Javascript Balise d’entrée dans un script Balise d’entrée dans une fonction du script Quand se déclenche l’action? Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 Ce qui va suivre dans cette partie : Créer un site La fenêtre « carte du site » Créer un (ou des) modèle(s) La fenêtre propriété Créer un lien Insérer un objet Les CSS avec Dreamweaver Les comportements Les scénarios Carte Modèle Propriété Lien Objet CSS Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : créer un site Pour créer un site, il faut une page d’accueil en général nommée « index.htm » stockée dans un répertoire. Ensuite on peut indiquer à l’éditeur les informations « distantes » afin qu’il procède par exemple à des mises à jour. index.htm Distant Fabien CREPIN, ICnet et Dreamweaver 4
Créer un site En premier lieu, définir notre site Fabien CREPIN, ICnet et Dreamweaver 4
L’info site Définition de l’accès FTP pour mise à jour Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : carte du site Deux modes Carte : organigramme des liens depuis la racine. Fichiers : liste des fichiers selon les répertoires d’accueil (type windows). Dans la suite, « carte » désigne les répertoires… Synchronisation Permet de mettre à jour le site en plaçant les fichiers sur le serveur distant. Travailler sur un fichier On double clique dessus. On travaille toujours sur le local. Une fois les modifs effectuées sur le local F12 permet de tester le résultat (tant que l’on n’utilise pas de PHP ou d’ ASP) Pour mettre à jour LE fichier distant : CRTL+MAJ+U Distant Local Synchorniser F12=Résultat Fabien CREPIN, ICnet et Dreamweaver 4
Exemple de carte du site Boutons pour rapatrier (vers le bas) ou pour mettre les fichiers sur le serveur Boutons de choix de visualisation Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : ajouter un fichier Deux façons Façon windows : clic droit dans ou sur le dossier dans la carte du site. Façon menu : via le menu fichier, on peut créer un nouveau fichier, et y appliquer un modèle mais je ne conseille pas cette méthode car elle oblige à enregistrer ensuite… Une fois le fichier ajouté, un double-clic et on travaille dessus Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : les modèles Généralités Modèle = Templates en anglais Un modèle se compose de parties modifiables (contenu des zones de texte, sources des images…) et de parties non modifiables (fond de page, styles, positions des zones de texte, etc) À quoi ça sert? Ce sont des trames de travail. Servent à garantir l’homogénéité du site, par exemple dans le cadre d’une charte graphique, imposée ou créée. Évitent de refaire la même chose 50 fois… On peut en créer plusieurs A garantir un maintien facile du site et des mises ‘à la mode’ faciles. On modifie une fois, la modif est appliquée partout où le modèle s’applique! Zones Templates Homogénéité Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : les modèles Appliquer un modèle : 3 méthodes (au moins) On crée directement le fichier à partir du modèle, mais je n’aime pas trop… On applique le modèle via la fenêtre « modèle » en faisant glisser le nom du modèle sur la page en cours. On va chercher dans le menu « modifier » et on applique le modèle (il faut être en fenêtre création). Fabien CREPIN, ICnet et Dreamweaver 4
Appliquer le modèle 1 On applique le modèle Méthode possible uniquement si curseur dans cette fenêtre! Fabien CREPIN, ICnet et Dreamweaver 4
Appliquer un modèle 2 On tire le modèle depuis cette fenêtre jusque vers celle du bas. Fabien CREPIN, ICnet et Dreamweaver 4
Résultat modèle DW4 indique ce que contient l’entête Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : propriétés et liens Fenêtre très utile, plusieurs moyens de l’afficher à tester… Sert à définir, sans avoir à entrer dans du HTML, une foule de propriétés du texte, des tableaux, des images, etc. Notamment les liens, encore une fois plusieurs méthodes : Drag and Drop de la fenêtre carte vers la case « lien » dans cette fenêtre propriété Insertion manuelle du lien Appuyer sur l’icône « dossier » à côté de la case lien Toujours indiqué un chemin relatif à la page appelante, moins de problèmes en cas de migration du site (i.e. changement d’hébergeur ou au moins de répertoire d’hébergement). Chemin relatif Migration Fabien CREPIN, ICnet et Dreamweaver 4
Propriétés Champ où l’on entre le chemin du lien Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : Insérer un objet Comme d’habitude, plusieurs possibilités, en voici 2 : Menu « Insertion » Fenêtre objet qui est plus visuelle On choisit ensuite dans les diverses catégories. De la bonne utilisation des objets : Les objets sont certes agréables car ils égaient les pages mais trop d’objets tuent l’objet! Un objet « média » (image, son, animation, etc) possède une taille mémoire et plus d’objets il y aura, plus long sera la page à charger, plus de mémoire il faudra aussi (pas trop grave aujourd’hui) Pour les images : si on doit afficher une miniature, inutile d’utiliser une image de 300ko dont on réduit la taille d’affichage! Insertion Mémoire Temps de chargement Taille objet Fabien CREPIN, ICnet et Dreamweaver 4
Insérer un objet 1 Par exemple insertion d’une image « dynamique » Fabien CREPIN, ICnet et Dreamweaver 4
Insérer un objet 2 On peut choisir la catégorie d’objets Fabien CREPIN, ICnet et Dreamweaver 4
Insérer un objet 3 Attention à la taille des images! On peut définir beaucoup d’attributs de mise en forme, ici l’épaisseur de bordures DW indique la taille et le temps de chargement de la page Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : les cadres Une méthode parmi les autres : Fenêtre objets, rubrique « cadres » Afficher la fenêtre cadre est utile à la navigation et permet la modif des propriétés. On peut fragmenter la fenêtre autant de fois que souhaitée. On glisse les bordures pour modifier les largeurs et hauteurs. La page index ne contient alors que le jeu de cadres (frameset) et chaque cadre contient une page. Fragmenter Jeu de cadres Fenêtre cadre Fabien CREPIN, ICnet et Dreamweaver 4
Cadres Nom du cadre en cours Veut-on des bordures? Fenêtre cadres Objets dans la catégorie cadres Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : les CSS CSS = Cascade Style Sheet Permet de définir des feuilles de styles, identiques au styles word par exemple. Cascade car on peut en définir en cascade, le plus proche de l’objet lui étant appliqué… Il existe un éditeur accessible via un clic droit sur le texte sélectionné, ou le menu texte, ou la fenêtre style, ou la fenêtre actifs, etc! Permettent d’avoir des comportements du texte lors de survol ou clic par exemple. Ces styles sont très utiles!!! Feuille de styles Cascade Comportement Fabien CREPIN, ICnet et Dreamweaver 4
CSS Style appliqué lors du survol (over) si un lien est défini Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : les comportements Ils permettent d’associer un événement à une action de l’utilisateur sur une zone (image, texte, zone définie, etc) de la page ou à une action de la page sur elle même (fermeture, chargement…) Vous l’aurez compris, cela rend le site dynamique, c’est donc du JavaScript. Avec Dreamweaver, pas besoin de taper les scripts pour de nombreux événements car Dreamweaver le fait pour vous! Accessible comme d’habitude… Sur la fenêtre comportement, utilisez les boutons « + » et ensuite modifiez le type d’action en cliquant à droite du nom de l’action. Action Événement Zone Fabien CREPIN, ICnet et Dreamweaver 4
Comportements Modifier la cause (événement) de l’action Ajouter/Supprimer une action Fabien CREPIN, ICnet et Dreamweaver 4
4. Utilisation de Dreamweaver 4 : les scénarios Ils permettent d’associer une suite d’événements « orchestrés » à souhaits à une action de l’utilisateur sur une zone (image, texte, zone définie, etc) de la page ou à une action de la page sur elle même. Une barre des temps (timeline) permet de gérer dans le temps les événements. A utiliser avec parcimonie car peut être couteux en ressources… Peut être intéressant pour effectuer des transitions de page (une page qui se ferme en se rétrécissant vers sont centre par exemple). A essayer pour connaître. Timeline Fabien CREPIN, ICnet et Dreamweaver 4
5. Pour aller plus loin : dynamiser son site En fait, l’appellation « site dynamique » est aujourd’hui réservée aux sites dont le contenu dépend d’une base de données. Ceci est possible grâce à des langages tels que ASP ou PHP couplés à des bases de données Access ou MySQL par exemple. Cela à un intérêt pour les mises à jour ou pour afficher des informations qui évoluent dans le temps car on n’a pas alors besoin de rentrer dans le site pour mettre à jour… Ces parties de code sont interprétées par le serveur (via un « parser ») qui les traduit en HTML… il faut donc que le serveur sache les lire! Base de données PHP/MySQL Informations évoluant Fabien CREPIN, ICnet et Dreamweaver 4
5. Pour aller plus loin : quelques liens (google pour d’autres liens…) Le premier lien : l’aide de Dreamweaver… Le meilleur site : Club d’entraide entre développeurs, surtout les forums! Lien HTML : Très complet L’EXCELLENT tutoriel de Hugo Etiévant Portail All HTML Javascript : Site anglais Très complet et en français! Tout Javascript.com Ressources gifs : Le Webmaster Eurogif PHP/MySQL : PHP France PHP : page officielle MySQL : page officielle Fabien CREPIN, ICnet et Dreamweaver 4
Fabien CREPIN, ICnet et Dreamweaver 4