Vous êtes sur la page 1sur 6
La formation complète sur Adobe Dreamweaver CS5 Créez simplement votre propre site Internet ! Cette

La formation complète sur Adobe Dreamweaver CS5

Créez simplement votre propre site Internet !

CS5 Créez simplement votre propre site Internet ! Cette formation vidéo vous accompagne dans la création

Cette formation vidéo vous accompagne dans la création de A à Z d‘un site web et vous présente les techniques de base à connaître pour faire une entrée réussie sur le web. Grâce à une présentation générale de la nouvelle interface du logiciel, repérez rapidement et simplement les éléments-clés indispensables à la création d‘un site. Cette formation aborde l’ensemble des langages et technologies qui gravitent autour d’un site web comme HTML, CSS, JavaScript, etc.

Votre formateur/Vos formateurs: Birnou Sébarte

VOUS AVEZ LE CHOIX ENTRE :

- Formation vidéo en ligne : Retrouvez les fichiers source ainsi que les Tutorial to go de cette formation vidéo dans le DVD téléchargeable.

- Formation vidéo sur support DVD - envoi par poste : Retrouvez les fichiers source ainsi que les Tutorial to go à l'intérieur de ce DVD avec envoi par poste.

ISBN : 978-3-902550-58-3

EUR 49,80

Il peut paraître rapide d’aborder Dreamweaver sans reprendre les bases des deux principaux langages qui composent les pages web : le HTML pour la structuration du contenu et les CSS pour la mise en forme de ce contenu. Une grande partie leur est donc dédiée toujours dans le but d’améliorer le référencement, l’accessibilité et la pérennité de nos contenus.

Le cœur de cette formation vidéo sur Adobe Dreamweaver CS5 se veut à la fois basique et global. Basique sans pour autant tomber dans une exploration des outils de manière détachée et au cas par cas, et global afin de donner un sens à la cohésion de tous ces outils entre eux et là aussi, sans tomber dans les pièges d’une exhaustivité pouvant être lassante et inutile.Avec cette base, nous mettrons en place le développement d’un site web. En contre partie, ce site doit respecter les standards du web, être évolutif, facile à mettre à jour et proche des technologies rencontrées. Il doit également utiliser l’ensemble des agences.

En parlant de technologies, et donc indirectement de langages, l’idée majeure reste de ne pas saisir de code à la main, mais au contraire d’utiliser les outils d’aide à la création mis à disposition par Dreamweaver. Avec le formateur Birnou Sébarte vous travaillerez avec des langages comme HTML, CSS, JavaScript, PHP, XML, XSL ou des technologies comme Apache et MySQL.

Avec ce scénario qui vous est proposé pour découvrir la création d’un site web en utilisant Dreamweaver CS5, nous espérons que vous trouverez toutes les informations dont vous avez besoin et que vous prendrez du plaisir à suivre cette formation. Pour information le site résultat de ce travail est disponible sur http://samples.puce-et-media.com/dream. Bien sûr toutes les nouveautés de cette nouvelle version seront également abordées.

Vue d'ensemble de la formation :

© copyright 2010 video2brain. Tous droits réservés. video2brain et le logo de video2brain sont des marques déposées de video2brain

1

/

6

1) Introduction à la formation sur Adobe Dreamweaver CS5 Votre formateur Birnou Sébarte vous présente ici le déroulement de l'ensemble de cette formation sur Adobe Dreamweaver CS5. 2) Présentation du web Pour explorer un outil dans les meilleures conditions, il est nécessaire de le replacer dans son contexte d'utilisation et d'exploitation. Nous allons donc explorer ensemble l'univers du web, ses acteurs, ses langages et ses technologies. Ensuite, nous allons aborder deux domaines étroitement liés à nos projets de site : l'accessibilité et le référencement. 3) Prise en main de Dreamweaver CS5 Afin d'être à l'aise durant les diverses étapes de cette formation, nous allons consacrer un chapitre entier à la prise en main de Dreamweaver. Tour à tour, nous allons explorer : son interface, ses palettes, les documents qu'il traite, ses préférences. Nous allons également voir la manière de connecter Dreamweaver à l'environnement de travail qui s'étend au-delà des pages web. 4) Prise en main du HTML et CSS Bien que Dreamweaver intègre le code HTML et CSS en toute transparence, il est intéressant de faire le tour des principales balises et de s’attarder sur leur intérêt respectif, leur principe d'utilisation et de mise en application. 5) Création et configuration du site avec Dreamweaver Commençons d'abord par définir un espace de site différent de celui utilisé précédemment pour les tests. A terme, notre objectif est de pouvoir développer la mise en place d'un back office, nous allons donc faire appel à la technologie PHP/MySQL. 6) Gestion des médias En complément du contenu textuel, les médias tiennent une part importante dans la mise en place d'un site. Dans ce chapitre, nous allons explorer les trois principaux acteurs d’un site web : les images, les animations Flash et la vidéo. 7) Librairies SPRY AJAX a révélé diverses librairies JavaScript qui permettent d'améliorer considérablement l'expérience de l’utilisateur et l'ergonomie générale de nos sites. Adobe a répondu à cet élan en développant sa propre librairie SPRY qui s'intègre en toute simplicité au principe de WYSIWYG de Dreamweaver. 8) Données dynamiques Dreamweaver intègre avec souplesse des technologies client/serveur et permet aux intégrateurs, ainsi qu’aux développeurs, de pouvoir câbler des interfaces riches tout en s'appuyant sur des données provenant d'une base de données. Dans ce chapitre, nous allons décortiquer les principales phases et leur utilisation. 9) XML et XSLT Incontournable langage de structuration de données, le XML a su s'imposer par son efficacité sur l'ensemble de la chaîne de communication et d'échange de données. Nous ne pouvions pas aborder la création de site avec Dreamweaver sans lui consacrer un chapitre, surtout si on regarde avec quel degré d'intégration Dreamweaver et XML font bon ménage. 10) Maintenance - Mise à jour du site dans Dreamweaver CS5 Que serait un site si nous n'en avions qu'une version en local sur notre machine ? Dans ce chapitre, nous allons aborder la mise en place du site sur un serveur distant. Tour à tour, nous explorerons les phases de préparation, de validation, de publication, puis de synchronisation. 11) InContext Editing Dans certains contextes et pour gérer certaines mises à jour de données, il existe une alternative à la mise en place d'un back office. Depuis la version CS4, Dreamweaver propose un service en ligne gratuit, appelé InContext Editing. Au travers d'un accès contrôlé, ce service permet à des internautes de venir ajouter et modifier des articles en ligne. Nous allons implémenter cette fonctionnalité au cours de ce chapitre. 12) En savoir plus… Notre site est en ligne, sa mise à jour devrait pouvoir être assurée, cette formation est terminée ! Et pourtant, il reste encore beaucoup de points à démystifier ou à améliorer : que faire en partant de cette base ? Où trouver de l'information ? Où dialoguer ? Où échanger à propos de Dreamweaver ? Ce dernier chapitre vous donne quelques pistes.

© copyright 2010 video2brain. Tous droits réservés. video2brain et le logo de video2brain sont des marques déposées de video2brain

2

/

6

Conditions requises:

Pour la formation en ligne et téléchargeable :

512 MB RAMrequises: Pour la formation en ligne et téléchargeable : Lecteur DVD Carte son, haut-parleurs ou casque

Lecteur DVDPour la formation en ligne et téléchargeable : 512 MB RAM Carte son, haut-parleurs ou casque

Carte son, haut-parleurs ou casque d’écouteen ligne et téléchargeable : 512 MB RAM Lecteur DVD Résolution d’écran minimum : 1024x768 Windows

Résolution d’écran minimum : 1024x768Lecteur DVD Carte son, haut-parleurs ou casque d’écoute Windows XP/Vista ou Mac OS X Pentium 4

Windows XP/Vista ou Mac OS Xcasque d’écoute Résolution d’écran minimum : 1024x768 Pentium 4 à partir de 2,6 GHz ou G5

Pentium 4 à partir de 2,6 GHz ou G5d’écran minimum : 1024x768 Windows XP/Vista ou Mac OS X Pour la formation sur support DVD

Pour la formation sur support DVD avec envoi par poste :

Connexion Internet DSLG5 Pour la formation sur support DVD avec envoi par poste : Navigateur actuel avec le

Navigateur actuel avec le plug-in Flashsupport DVD avec envoi par poste : Connexion Internet DSL Résolution d’écran minimum : 1024x768 Carte

Résolution d’écran minimum : 1024x768Internet DSL Navigateur actuel avec le plug-in Flash Carte son, haut-parleurs ou casque d’écoute Pentium4 à

Carte son, haut-parleurs ou casque d’écoutele plug-in Flash Résolution d’écran minimum : 1024x768 Pentium4 à partir de 2,6 GHz ou bien

Pentium4 à partir de 2,6 GHz ou bien G4 à partir de 1 GHz: 1024x768 Carte son, haut-parleurs ou casque d’écoute Table des matières Introduction Prise en main de

Table des matières

Introduction Prise en main de Dreamweaver Utilisation et création Suivi et synchronisation Prise en main de Dreamweaver Utilisation et création Suivi et synchronisation

Utilisation et création Suivi et synchronisation Préparation - Mise en place Présentation du web Principe

Préparation - Mise en placeUtilisation et création Suivi et synchronisation Présentation du web Principe et présentation de la

Présentation du web Principe et présentation de la formation Les acteurs et les standards du web Les 3 Principe et présentation de la formation Les acteurs et les standards du web Les 3 principaux langages utilisés Les outils nécessaires et les navigateurs Ajouter des extensions Serveur de test et XAMPP Création d'un alias pour Apache Utilisation d'un nom de domaine Location d'un espace web Introduction à l'accessibilité, préférences et navigateurs Introduction au référencement et référencement vs positionnement

Prise en main de Dreamweaver Présentation générale de l'interface Les palettes et leur manipulation Avant tout, la configuration d'un site Présentation générale de l'interface Les palettes et leur manipulation Avant tout, la configuration d'un site Les types de documents et le HTML, HTML5 Préférences, paramétrage et configuration Les caractères spéciaux, les entités HTML et l'encodage Aperçu dans le navigateur et paramétrage Dreamweaver Exchange, Extension Manager, Lorem Ipsum

Prise en main du HTML et CSSDreamweaver Exchange, Extension Manager, Lorem Ipsum © copyright 2010 video2brain. Tous droits réservés.

© copyright 2010 video2brain. Tous droits réservés. video2brain et le logo de video2brain sont des marques déposées de video2brain

01:30

02:07

01:39

05:50

04:11

03:52

07:07

16:36

12:12

09:32

07:11

07:56

08:57

08:10

05:48

09:42

09:22

07:33

05:35

14:09

07:03

07:03

3

/

6

Les principales balises et la construction d'une page de texte Les diverses possibilités de liaison

Les principales balises et la construction d'une page de texte Les diverses possibilités de liaison : les liens et les ancres Les listes de menus et les listes de définitions Les images et leur préparation, les attributs Les tableaux et leurs balises Structuration d'une page : les balises DIV, SPAN La page et la sémantique, classe, ID, balise, micro-formats Les CSS : présentation et utilisation Les CSS, feuille CSS de reset Les CSS : la palette des CSS Les CSS : le positionnement Les éléments PA, mise en pages en tableau ou en CSS-P ? La mise en pages en mode grille

en tableau ou en CSS-P ? La mise en pages en mode grille Description du projet

Description du projet Maquette, architecture et informations Présentation des objectifs La maquette graphique et interface liquide Présentation des phases de construction

interface liquide Présentation des phases de construction Création - Réalisation Mise en place du modèle Création

Création - Réalisation

Mise en place du modèle Création et configuration du site Mise en place du modèle Structuration de la page Mise Création et configuration du site Mise en place du modèle Structuration de la page Mise en place de l'arborescence Feuilles de style, header et footer Feuille de style, contenu et barre de navigation secondaire Gestion du menu principal et du footer Création d'une page HTML de référence

Gestion des médias Les images de contenu Les images d'illustration Mélange d'images d'illustration et de contenu Les images Les images de contenu Les images d'illustration Mélange d'images d'illustration et de contenu Les images de survol Les éléments et images de survol JavaScript Les éléments et images de survol CSS Aller-retour avec Fireworks Aller-retour avec Photoshop La gestion des images depuis Dreamweaver Les cartes image Images interactives avancées avec Fireworks Les animations Flash, les options La vidéo au format .FLV Les problèmes liés aux fichiers externes

Optimisationau format .FLV Les problèmes liés aux fichiers externes © copyright 2010 video2brain. Tous droits réservés.

© copyright 2010 video2brain. Tous droits réservés. video2brain et le logo de video2brain sont des marques déposées de video2brain

13:01

15:16

06:40

14:41

12:55

05:52

09:40

12:12

04:27

12:36

15:40

07:29

15:06

02:56

06:32

05:26

02:03

06:41

08:18

15:27

13:06

16:33

13:11

09:40

07:27

15:51

09:01

13:57

03:17

06:26

15:00

06:10

07:02

05:14

05:57

14:02

05:33

06:41

03:46

4

/

6

Les modèles de modèles Apporter du contenu aux modèles Modifier les modèles Les modèles à

Les modèles de modèles Apporter du contenu aux modèles Modifier les modèles Les modèles à régions ou à tableaux répétés Les modèles à régions facultatives Les éléments de librairie La palette des actifs Qu'est-ce que le JavaScript ? Les comportements de Dreamweaver

Librairies SPRY Présentation de la librairie Les barres de menus Les menus accordéons Les barres d'onglets Les Présentation de la librairie Les barres de menus Les menus accordéons Les barres d'onglets Les panneaux réductibles et les tooltips Aller plus loin avec les widgets SPRY L'ensemble des données

Données dynamiques La gestion des news et premiers pas en PHP La gestion des news et MySQL, La gestion des news et premiers pas en PHP La gestion des news et MySQL, PHP MyAdmin Mise en place de la base de données Connexion à la base SQL et le jeu d'enregistrement Utilisation des données dans une page Comportement serveur

Données et métadonnées Les données invisibles, le titre, etc. Les métadonnées images Les design notes Importer des données Les données invisibles, le titre, etc. Les métadonnées images Les design notes Importer des données Nettoyer le code

Les design notes Importer des données Nettoyer le code XML et XSLT Les documents XML et

XML et XSLT Les documents XML et bases en XML Les feuilles de style XSL - Conversion Coupler Les documents XML et bases en XML Les feuilles de style XSL - Conversion Coupler un fichier XML à la feuille XSL Utilisation de l'onglet XSLT Les balises <xml />

Utilisation de l'onglet XSLT Les balises <xml /> Maintenance - Mise à jour Publication Vérification et

Maintenance - Mise à jour

XSLT Les balises <xml /> Maintenance - Mise à jour Publication Vérification et compatibilité Orthographe et

Publication Vérification et compatibilité Orthographe et dictionnaire BrowserLab Outils de débogage mis à disposition Paramètres de publication Préparer le site distant Gestion du nom de domaine Publier et mettre en ligne

© copyright 2010 video2brain. Tous droits réservés. video2brain et le logo de video2brain sont des marques déposées de video2brain

16:02

08:23

07:17

10:04

07:03

07:28

10:57

17:04

17:05

02:27

08:36

07:40

11:12

09:50

07:42

11:52

09:58

15:23

06:20

07:20

07:15

08:06

08:14

10:59

05:53

03:47

09:05

06:10

13:32

07:13

09:52

07:28

07:02

11:06

04:59

04:13

09:01

14:44

06:34

07:23

07:34

5

/

6

Validation HTML et CSS Synchronisation et recherche d'éléments mis à jour Archivage/Extraction vs Placer/Acquérir
Validation HTML et CSS Synchronisation et recherche d'éléments mis à jour Archivage/Extraction vs Placer/Acquérir

Validation HTML et CSS Synchronisation et recherche d'éléments mis à jour Archivage/Extraction vs Placer/Acquérir

Interface : données dynamiques Créer une interface administrateur Listage des enregistrements – Administration modifier/supprimer Les formulaires et Créer une interface administrateur Listage des enregistrements – Administration modifier/supprimer Les formulaires et leur utilisation Les principaux composants du formulaire Les composants SPRY Les formulaires dynamiques Envoi des données et enregistrement Modification du listage des éléments Modification d'un enregistrement Suppression d'un enregistrement Envoi de données personnalisées Protéger l'accès au back office Administration de la base de données - Import/Export

InContext Editing InContext Editing présentation Mise en place de zones depuis Dreamweaver Gestion du compte et des InContext Editing présentation Mise en place de zones depuis Dreamweaver Gestion du compte et des utilisateurs Utilisation par l'auteur ou l'éditeur Rappel des paramètres

par l'auteur ou l'éditeur Rappel des paramètres et après En savoir plus L'aide en ligne -

et après

ou l'éditeur Rappel des paramètres et après En savoir plus L'aide en ligne - LiveDocs Les

En savoir plus L'aide en ligne - LiveDocs Les divers blogs et forums Poster un souhait

- LiveDocs Les divers blogs et forums Poster un souhait © copyright 2010 video2brain. Tous droits

© copyright 2010 video2brain. Tous droits réservés. video2brain et le logo de video2brain sont des marques déposées de video2brain

07:10

10:33

09:26

09:29

11:05

10:38

13:13

06:31

07:36

12:28

09:41

10:41

09:56

05:55

14:24

04:06

03:23

06:57

09:47

11:50

03:02

02:57

03:29

02:40

6

/

6