Formation DreamWeaver

Créer et maintenir un site Web avec DreamWeaver CS3

La dernière version de Dreamweaver intègre les technologies les plus récentes, facilitant ainsi la création de pages Web riches et conviviales , conformes aux recommandations du W3C, accessibles...

Maîtriser l'outil ne suffit pas, il faut aussi savoir organiser son projet et profiter des possibilités offertes par DreamWeaver pour optimiser son travail. Pour cela la formation se conclue par la création d'un mini site en intégrant les différentes étapes d'un projet...

Cette formation répond aux questions :

• Comment être présent sur Internet ?
• Quelles sont les principales étapes pour créer mon site ?
• Comment organiser mon site pour faciliter sa maintenance ?
  

Objectifs

Concevoir et organiser un projet site Web avec DreamWeaver

Programme 

 

A. Introduction

• L'environnement Web
  L'organisation de l'Internet
  Les clients "les navigateurs"
  Les serveurs "l'hébergement"
  Les noms de domaines
  Le référencement
  La mesure de résultat
• Présentation des technologies
  Le navigateur
  Les animations
  Le Web 2.0
• Principes pour la réalisation d'un site "public"
  L'accessibilité
  La réglementation
  Les contraintes techniques

B. DreamWeaver

Introduction à DreamWeaver

• L'interface DreamWeaver
  DreamWeaver et les "standard"  du Web (W3C)
  DreamWeaver et l'accessibilité
  Configurer DreamWeaver (XHTML, CSS, accessibilité)
  L'interface DreamWeaver
  Gestion des fenêtres, barres d'outils, menus, préférences...

Insérer différents contenus dans une page

• Créer une page
  Créer et configurer un nouveau site
  Créer un nouveau document,
  Créer, modifier, enregistrer un document
• Insérer du texte et le mettre en forme
  Quelques notions de XHTML nécessaires pour l'utilisation des styles CSS
  Insérer et structurer du texte avec les éléments paragraphes, en-têtes, listes…
• Valider un document
• Insérer des liens hypertexte
  Créer des liens vers une autre page, une page d'un autre site Web, une adresse de messagerie
  Créer un lien pour se déplacer au sein d'une même page
• Définir les propriétés de la page
  Définir une image d'arrière plan
  Définir le titre de la page
  Insérer des en-têtes à la page
• Insérer des images
  Connaître les contraintes pour les images sur le Web
  Insérer une image
  Utiliser les fonctionnalités de traitement de DreamWeaver :
     recadrer, accentuer, redimensionner, rééchantillonner
• Insérer des tableaux de données
  Créer un tableau de présentation de données
  Combiner et diviser des cellules
  Mettre en forme un tableau
• Insérer un élément Flash

Utiliser les styles CSS

• Principe de la séparation du contenu et de la mise en forme
  Structure d'un texte, séparation de la forme et du fond
  Mettre en forme avec les styles CSS
• Créer et appliquer des  styles avec DreamWeaver
  Les principaux sélecteurs :
          appliquer des propriétés de style à un type d'élément XHTML,
          à un élément XHTML identifié,
          à plusieurs éléments XHTML (classe).
  Les principales propriétés
• Utiliser les feuilles de style externe
  Créer et modifier une feuille de style,
  Attacher une feuille de style à un document
  Utiliser une feuille de style prédéfinie de DreamWeaver.
  Compatibilité des navigateurs
• Organiser efficacement les styles CSS
  Créer des feuilles de styles, définir le média (écran, imprimante…)
  Créer et appliquer des styles sur différentes zones
  Faciliter mes mises à jour

Utiliser les éléments PA "Position Absolue"

• Insérer des éléments PA (anciennement calques)
  Créer et positionner un élément PA dans le document
  Définir les propriétés de l'élément PA
• Positionner des contenus à l'aide d'éléments PA
  Définir l'élément conteneur
  Positionner différents éléments
     exemple : positionner des photos se superposant

Créer une mise en page

• Présentation : créer une mise en page
  Principe de construction d'une mise en page à base de tableaux
  Utiliser les aides à la création : le tracé de l'image, les règles, les repères, la grille
  Principe de construction d'une page avec les outils ImageReady, FireWorks
  Principe de construction d'une mise en page avec des styles CSS
• Créer une mise en page à partir d'un modèle de conception CSS
  Créer un nouveau document à partir d'un modèle de conception
  Modifier l'aspect du document
  Modifier la mise en forme des contenus
• Insérer et mettre en forme les contenus
  Insérer le contenu dans une mise en page précédemment créée
  Définir la structure du contenu
  Mettre en forme le contenu structuré
  Définir ou identifier des zones de contenu dans la mise en page
  Définir des mises en forme différentes en fonction des zones

Publier un site

• Contrôler le site avant publication
  Vérifier le site avant publication :
     Contrôle des liens, la carte du site, structure des fichiers
  Configurer le compte FTP dans DreamWeaver
  Voiler les dossiers à ne pas publier
• Publier le site
  Mettre à jour un document  et le publier
  Synchroniser un site

C. Aller plus loin avec DreamWeaver

Utiliser les éléments de bibliothèque

• Quand utiliser les éléments de bibliothèques ?
• Créer un nouvel élément de bibliothèque
• Insérer un élément de bibliothèque
• Modifier un élément de bibliothèque

Utiliser les modèles de document

• Pourquoi utiliser un modèle de document ?
• Créer un document  "type" (ex : à partir d'un modèle de conception CSS )
• Transformer le document "type" en modèle
• Créer des régions modifiables
• Créer un nouveau document à partir d'un modèle
• Insérer du contenu dans le document
• Modifier un modèle

Utiliser les comportements "clients"

• Principe des comportements
• Afficher/Masquer un élément
• Ajouter un effet

Utiliser Spry

• Créer une barre de menu
• Créer des panneaux à onglet
• Créer des panneaux réductibles
• Créer un accordéon

Créer un formulaire

• Insérer les éléments du formulaire
• Valider le formulaire avec Spry

 

Déroulement de la formation

La formation est ponctuée de nombreux exemples donnant aux stagaires une première expérience pratique sur les points abordés.

Un site complet est créé leurs permettant aussi d'avoir une vision d'ensemble sur les différentes étapes d'un projet : définition de la navigation, l'organisation des fichiers, définition de la structure des pages, principe de la séparation de la présentation et du contenu, sensibilisation à l'accessibilité, construction d'une page "modèle" et mise en place des styles, insertion des contenus ...

 

Durée : 5 jours
Public : Personnes souhaitant réaliser un site Web
Pré-requis : Pratiquer couramment les outils informatiques et savoir naviguer sur le Web.

Retour au catalogue des formations