Présentation et création d’une première page HTML. Dans cette vidéo, nous verrons également la notion de Site, ainsi que les options de base pour le créer.
Hervé Girolet s’appuie sur des exemples de situations courantes pour expliquer les bases de l’interface et l’organisation du travail dans Dreamweaver CS3.
Apprendre à connaître l’interface de travail
env. 29 min
Présentation et création d’une première page HTML. Dans cette vidéo, nous verrons également la notion de Site, ainsi que les options de base pour le créer.
Présentation des menus, de l’interface et des modes de travail. Dans cette vidéo, nous découvrirons les grandes lignes de l’environnement de Dreamweaver.
Présentation de quelques-uns des nombreux panneaux. Le formateur vous expliquera comment l’utilisateur peut organiser et personnaliser son espace de travail en fonction de son activité.
Chacune de ces activités nécessite sa propre organisation et utilise des outils ou options différentes. Dans cette vidéo, nous faisons un tour d’horizon des multiples possibilités offertes par l’interface de Dreamweaver.
Ces balises permettent de rajouter à votre document des informations globales sur votre page. Elles permettent entre autre de faciliter le référencement d’un site par les moteurs de recherche.
Les raccourcis clavier contribuent au confort et à la performance dans votre travail lors de la réalisation des actions les plus communes. Ils peuvent également se paramétrer.
La réalisation de pages Web nécessite l’intégration de différents types d’éléments. Ce chapitre passe en revue les principales possibilités d’intégration qu’offre Dreamweaver.
Intégration d’objets et de médias
env. 54 min
Le texte est la base des informations diffusables sur une page Web. Il peut être enrichi de différentes façons.
Travailler avec du texte
L’interface de Dreamweaver peut s’apparenter à celle d’un traitement de texte, mais le contexte d’utilisation est différent. Pour faciliter l’insertion du texte, les extensions (fonctionnalités externes rajoutées à Dreamweaver) peuvent s’avérer utiles.
Le langage HTML, étant un langage de description de pages, les attributs et enrichissements de texte se font au travers de balises. Dans cette vidéo, vous apprendrez à utiliser quelques unes des balises élémentaires.
La structure des pages dans Dreamweaver CS3 étant fortement orientée CSS, les règles CSS font partie des notions élémentaires à acquérir pour comprendre et maîtriser le formatage de textes.
De nombreuses langues, comme le français, utilisent des caractères accentués ou spéciaux. Des précautions sont à prendre pour garantir leur affichage dans les différents navigateurs.
Les liens sont la base de la navigation au sein des différentes pages Web hébergées sur les serveurs disséminés de part le monde.
Insérer les liens
Grâce au panneau Propriétés, il est très facile de paramétrer un lien vers un autre page HTML. Encore faut-il connaître les différents types de liens et de comportements des pages.
Les images ou photos contribuent à enrichir vos pages Web. Elles peuvent aussi servir au paramétrage des liens ou optimiser le référencement de votre site.
Intégrer des images
Dans cette vidéo, nous verrons comment insérer une image. Il est également possible de retoucher une image, directement depuis le panneau Propriétés.
La réalisation de pages Web élaborées nécessite la mise en place de structures de positionnement. Grâce à la qualité de celles-ci, vos page HTML garderont le même aspect quelque soit le navigateur employé.
Structure et positionnement
env. 37 min
Le sélecteur de balises permet un accès direct aux différents niveaux d’imbrication des balises.
Les tableaux sont une des possibilités pour organiser et structurer l’information.
Travailler avec des tableaux
Les tableaux ont de nombreuses propriétés, et sont définis par plusieurs types de balises HTML. Grâce aux styles CSS, il est possible de les redéfinir efficacement.
Les formulaires permettent d’envoyer les informations d’une page Web de manière interactive.
Les formulaires
env. 23 min
La réalisation et l’exécution d’un formulaire impliquent certaines règles et principes qu’il est bon de connaître pour un bon fonctionnement de ceux-ci. Les formulaires sont composés de différents éléments ayant chacun leurs propres propriétés.
Le bouton radio permet de faire un choix unique parmi plusieurs propositions, et la liste de choix vous permet de proposer une liste de choix sous forme de liste ou menu déroulant.
Cet élément vous permet d’envoyer des fichiers image sur un serveur distant. Pour ce type de donnée, il faut s’assurer que l’attribut enctype est bien multipart/form-data.
Il est possible de placer dans un formulaire un champ renvoyant des valeurs à votre issue. Ces informations peuvent être utilisées pour personnaliser des informations.
Les jeux de cadres permettent de structurer une page principale en plusieurs pages HTML. Néanmoins l’utilisation des jeux de cadres tend à disparaître au profit des feuilles CSS.
Travailler avec des jeux de cadres
env. 12 min
Les iFrames permettent l’affichage d’une page dans une page, à la manière des poupées russes.
Une page HTML moderne et attractive se doit de comporter des éléments externes multimédia : animations, vidéo, sons, etc.
Multimedia
env. 14 min
Adobe Flash est le logiciel idéal pour créer des médias animés et interactifs. L’étroite intégration entre Dreamweaver et Flash permet facilement d´intégrer et de contrôler un fichier SWF.
Le langage HTML étant un langage de description de page, il ne permet pas de déclencher des actions ou de gérer de l’interactivité. Il est cependant possible d’intégrer à une page HTML du code JavaScript qui s’exécutera coté client, c'est-à-dire sur le poste de l’utilisateur.
JavaScript
env. 52 min
Le panneau Comportements regroupe un certain nombre d’éléments de code JavaScript directement utilisables dans une page HTML.
Les comportements
Grâce au code JavaScript, la page HTML, lors de son chargement, peut déclencher diverses actions.
Les fragments fournis ne sont pas toujours adaptés aux besoins du développement. Le code JavaScript étant visible, il est cependant possible de le modifier.
Il existe des fragments de code relativement complexes à utiliser. Il est important de bien comprendre l’architecture du code JavaScript, pour les utiliser efficacement.
Une des grandes nouveautés de Dreamweaver CS3 est l’implémentation de la technologie Ajax disponible sous forme de Widgets Spry, sorte de composants paramétrables et personnalisables grâce aux CSS.
Spry
Dans cette vidéo, le formateur vous présente brièvement la technologie Ajax.
Les éléments de formulaire Spry intégrés à Dreamweaver CS3 permettent de réaliser des formulaires avec un contrôle pertinent des entrées de l’utilisateur.
La réalisation et la mise en ligne d’un site complet nécessitent une organisation et des outils spécifiques. Dreamweaver CS3 offre différents outils pour augmenter la performance de votre flux de production.
Gestion de projets complexes
env. 32 min
Outre les outils d’édition de pages HTML, Dreamweaver CS3 intègre des outils de gestion de sites pour optimiser la production, le contrôle et la mise en ligne d’un projet.
Gestion de site
Le panneau Site permet de gérer la réplique de votre travail sur un serveur distant.
Au sein d’un flux de travail, différentes personnes d’une équipe peuvent modifier les pages HTML. Le panneau Site permet de synchroniser et de gérer les mises à jour sur le site distant. Quand à la carte du site, elle permet une visualisation graphique de votre site.
Afin d’optimiser un flux de production, il peut être utile d’utiliser des modèles. Les modèles permettent de créer des pages à partir d’une page de référence. Toute modification sur le modèle entraîne une mise à jour des pages à partir duquel elle ont été créées.
Travailler avec des modèles
Les différentes façons de créer un modèle est de l’appliquer à des nouvelles pages, ou à des pages déjà créées.
Si le contenu de votre page est destiné à être alimenté dynamiquement, les régions et tableaux répétés vous permettent de spécifier des emplacements pour les données dynamiques.
Dreamweaver CS3 permet de vérifier et de tester les structures de code à différents niveaux. Le panneau « Résultat » est le centre de contrôle pour paramétrer les multiples actions possibles.
Utilitaires de production
env. 9 min
Microsoft Word permet d’enregistrer des fichiers HTML. Le code généré n’est hélas pas conforme aux recommandations du W3C, et demande à être optimisé.
Le panneau Résultat est une véritable boite à outils contenant des outils de vérification et d’informations. Il comporte également la fonction Rechercher/Remplacer.
Un site moderne se doit de proposer des possibilités de mise à jour ou fonctionnalités de génération automatique de pages. Pour cela, il faut mettre en œuvre des langages de programmation qui s’exécutent coté serveur.
Programmation coté serveur
env. 40 min
Ce langage fiable et souple est de plus en plus prisée des développeurs. Il offre l’avantage d’être openSource, c’est dire complètement gratuit.
Programmation en PHP
Pour pouvoir exécuter du code PHP sur son poste de travail, il faut installer un émulateur PHP. Parmi les plus populaires, vous pouvez utiliser easyPHP.
Intégrées également au pack easyPHP, les bases de données mySQL permettent de stocker des informations. PHP se chargera d’en récupérer les informations et de construire dynamiquement des pages HTML.
Bases de données mySQL
PHPmyAdmin est l’interface d’administration des bases de données mySQL. A travers cette interface, il est facile de créer une base de données.
« Les DVD de Gilles Théophile sont à Lightroom ce que les fichiers RAW sont à la photographie : essentiels. »
En DVD
En ligne
Abonne- ment
