Introduction générale

de : Adobe Dreamweaver CS3 : Bases fondamentales

Acheter

À propos de cette vidéo

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.

Un extrait de : Adobe Dreamweaver CS3 : Bases fondamentales

Dreamweaver reste un des logiciels les plus importants à connaître si vous voulez créer des sites Internet. Ces tutoriels vidéo vont vous permettre de réaliser vos propres pages HTML de manière claire et précise, tout en gardant un esprit pédagogique et didactique. Votre formateur Hervé Girolet vous guide pas à pas au travers d´innombrables possibilités de création.

EUR 39,95

Acheter

Formations similaires

Bonus en ligne

Lorsque vous créez un favori dans votre navigateur, des icônes personnalisées permettent d’identifier votre site.

Créer une icône de favoris

02:39
Ce Spry Ajax intégré à Dreamweaver permet d’enrichir votre page de fonctionnalités impressionnantes.

Widget Accordeon

04:49
Dreamweaver possède un scénario qui permet de réaliser des animations sans utiliser de logiciels externes.

Créer des animations

02:02

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.
  
  Introduction générale
  
  03:50
- 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.
  
  Interface de travail
  
  04:26
- 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é.
  
  Panneaux et palettes
  
  05:25
- 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.
  
  Designer et codeurs
  
  07:12
- 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 balises Meta
  
  02:51
- Les barres d’outils peuvent êtres personnalisées et enrichies d’options supplémentaires et les panneaux organisés selon vos goûts.
  
  Les barres d’outils
  
  02:17
- 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.
  
  Les raccourcis clavier
  
  02:49
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.
    
    Insérer du texte
    
    05:25
  - 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.
    
    Formatage par balises
    
    05:57
  - Le panneau Propriétés donne la possibilité d’enrichir les textes d’une page HTML. Cela a pour effet de générer automatiquement des styles CSS.
    
    Attributs CSS
    
    05:45
  - 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.
    
    Règles CSS
    
    02:19
  - 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.
    
    Le cas des caractères accentués
    
    03:07
- 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.
    
    Créer des liens
    
    05:55
  - Les liens peuvent servir à télécharger des fichiers autres que HTML, tels que PDF, DOC, EXE.
    
    Télécharger des fichiers
    
    02:10
  - Les liens peuvent aussi servir à envoyer des emails. Leurs arguments permettent de formater correctement les messages.
    
    Liens vers emails
    
    02:29
  - Les ancres nommées sont utilisées pour naviguer au sein d’une même page HTML, ou pointer à un endroit précis d’une autre page.
    
    Les ancres nommées
    
    03:56
  - Il existe d’autres façons de paramétrer des liens dans Dreamweaver CS3.
    
    Autres façons de paramétrer des liens
    
    01:59
- 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.
    
    Insérer des images
    
    05:24
  - Les images réactives transforment un graphisme inerte en un élément de navigation interactif.
    
    Images réactives
    
    03:18
  - Les images de fond peuvent agrémenter astucieusement le fond de votre page sans pour autant pénaliser son chargement.
    
    Les images de fond
    
    02:35
  - Il est fortement recommandé d’optimiser ses images avant intégration. Néanmoins, Dreamweaver possède des fonctionnalités d’optimisation intégrées.
    
    Optimisation des images
    
    03:03
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.
  
  Le sélecteur de balises
  
  01:22
- Le langage HTML offre différentes façons de gérer des listes d’informations.
  
  Insérer des listes
  
  05:44
- 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.
    
    Créer des tableaux
    
    05:55
  - Une fois créés, les tableaux peuvent être modifiés de plusieurs façons. Le mode Développé permet d’en optimiser la création ou la modification.
    
    Modifier des tableaux
    
    03:09
  - Des données structurées peuvent être importées directement dans Dreamweaver en générant des tableaux.
    
    Importer des données
    
    03:11
  - Des données tabulaires peuvent être triées selon différents paramètres.
    
    Trier des tableaux
    
    02:07
- Si les tableaux peuvent servir à organiser une mise en forme, les styles CSS sont bien plus adaptés à ce type de tâche.
  
  Mise en page CSS
  - Les styles CSS vont bien plus loin que les attributs de texte. Ils permettent également de définir les différents états d’éléments de navigation.
    
    Menu CSS
    
    06:41
  - Le principe d’une mise en forme CSS est de dissocier le contenu de la forme. Ainsi des styles CSS peuvent être réutilisés facilement.
    
    Créer une mise en page CSS
    
    03:19
  - Dreamweaver CS3 est fourni avec une bibliothèque de modèles de mise en forme CSS utilisables, modifiables et largement commentés.
    
    Utiliser les modèles CSS
    
    03:38
  - La mise en place d’une image de fond temporaire permet de réaliser facilement une mise en forme à partir d’une maquette.
    
    Utiliser une image gabarit
    
    02:04
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.
  
  Principe de base et champs texte
  
  06:21
- Cet élément permet de spécifier un ou plusieurs choix, ou de valider une affirmation.
  
  Case à cocher
  
  01:40
- 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.
  
  Boutons radio et liste de choix
  
  04:32
- 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.
  
  Elément champ de fichier
  
  01:57
- 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.
  
  Champs masqués
  
  01:17
- Ultime étape à la réalisation d’un formulaire, l’intégration de boutons permet de déclencher les actions de validation et/ou de réinitialisation.
  
  Validation du formulaire
  
  07:12
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.
  
  Les iFrames
  
  03:33
- Une des façons de structurer l’information au sein d’une page HTML est d’utiliser les jeux de cadres.
  
  Les jeux de cadres
  
  03:35
- Il est important de comprendre la structure d’un jeu de cadres complexe, pour pouvoir afficher la page HTML au bon endroit.
  
  Jeux de cadres complexes, et liens entre plusieurs cadres
  
  04:47
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.
  
  Animations Flash
  
  05:22
- Si l’on veut rendre le fond d’un fichier transparent, il faut intervenir dans le code JavaScript généré lors de l’importation du fichier SWF.
  
  Fond d’un fichier SWF transparent
  
  03:16
- Dreamweaver permet de créer des élément SWF sans utiliser Flash.
  
  Créer des éléments SWF dans Dreamweaver
  
  02:16
- La vidéo offre un attrait majeur sur une page HTML. Dreamweaver CS3 permet d’intégrer facilement des vidéos au format FLV.
  
  Diffusion de vidéos
  
  02:34
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.
    
    Mise en place de code JavaScript simple
    
    03:03
  - Le code JavaScript est utilisé pour l’ouverture de fenêtres popUp.
    
    Ouvrir une fenêtre popUp
    
    02:23
  - Un comportement de validation de formulaire est à votre disposition. Il n’y a plus qu’à le localiser dans la langue de votre choix.
    
    Valider un formulaire
    
    05:16
  - Lors du survol d’images actives, il est plus ergonomique de proposer un changement d’apparence lors du survol de ces zones.
    
    Permutation d’images
    
    03:28
- Les fragments de code sont des portions de code réutilisables à votre disposition.
  
  Fragment de code
  - Depuis le panneau Fragments de code, rajoutez des fonctionnalités à vos page HTML.
    
    Utilisation de fragment de code
    
    01:53
  - 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.
    
    Personnaliser des fragments de code
    
    03:33
  - Il existe des fragments de code relativement complexes à utiliser. Il est important de bien comprendre l’architecture du code JavaScript, pour les utiliser efficacement.
    
    Etude d’un fragment de code complexe
    
    03:48
  - Il est possible de créer et archiver ses propres fragments de code. Néanmoins, l’écriture de code demande quelques précautions.
    
    Archiver ses propres fragments
    
    05:54
- 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.
    
    Ajax
    
    01:52
  - 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.
    
    Formulaires Spry
    
    07:34
  - Les Widgets Spry permettent de réaliser facilement différents types de menus personnalisables.
    
    Menus Spry
    
    04:21
  - La puissance de l’analyseur XML Spry permet de générer automatiquement des tableaux de données issus d’un fichier XML.
    
    Données XML avec Spry
    
    08:45
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.
    
    Création d’un site distant
    
    06:42
  - 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.
    
    Synchroniser des sites
    
    05:23
  - Lors d’un projet complexe, on est souvent amené à réutiliser les mêmes éléments. Le panneau Actif permet de retrouver des éléments déjà utilisés.
    
    Optimisation et visualisation d’un site
    
    02:00
  - Il est possible d’exporter les paramètres d’un site en vue d’une utilisation sur un autre ordinateur ou au sein d’un équipe de production.
    
    Exportation d’un site
    
    01:26
- 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.
    
    Création d’un modèle
    
    06:56
  - En fonction des impératifs de production, les modèles peuvent gérer l’affichage des régions. Ces régions peuvent être modifiables ou non modifiables.
    
    Régions facultatives
    
    03:20
  - Lors de la conception d’un modèle, il est possible de prévoir plusieurs styles CSS applicables aux attributs de balises.
    
    Contrôler les attributs
    
    01:09
  - 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.
    
    Régions répétées
    
    01:47
  - Les éléments de bibliothèque peuvent servir également à partager une même information entre plusieurs pages.
    
    Eléments de bibliothèque
    
    02:05
  - Des fragments de code peuvent être utilisés pour afficher automatiquement l’heure et la date.
    
    Date automatique
    
    01:18
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é.
  
  Optimiser depuis HTML Word
  
  01:56
- Lors de la saisie directe de code HTML, des erreurs peuvent apparaître. Dreamweaver CS3 permet des corrections de code.
  
  Optimiser du code XHTML
  
  01:15
- 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.
  
  Panneau Résultats
  
  05:29
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.
    
    Installation d’easyPHP
    
    03:23
  - Pour que des pages PHP s´affichent et fonctionnent ensemble, easyPHP doit être configuré.
    
    Paramétrage d’easyPHP
    
    05:12
  - Une simple ligne de commande PHP permettra de valider le fonctionnement et d’interpréter PHP.
    
    Premier script PHP
    
    04:19
  - La particularité de PHP est sa capacité de s´intégrer dans du code HTML.
    
    Ecrire du code PHP
    
    04:20
  - Quelques lignes de PHP suffisent à créer une zone de news et un compteur de visite.
    
    Application PHP
    
    09:57
- 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.
    
    Créer une base de données
    
    04:07
  - Pour travailler avec une base de données, il faut d’abord se connecter à la base. Ensuite les informations peuvent être récupérées grâce au code PHP.
    
    Récupérer des informations
    
    08:45