Formation DreamWeaver : Créer un site Web avec DreamWeaver webmaster - BR2CI Formations en Bretagne et sur toute la France

Afficher le détail

Programme

A. Introduction

L'environnement Web, les contraintes, le travail préparatoire

• L'environnement Web
  L'organisation de l'Internet, les navigateurs et leurs différences...
  Nom de domaine, hébergement, promotion
  
• Les contraintes
  La règlementation, l'accessibilité, le référencement...
  
• Le travail préparatoire
  Préparer la création du site
  Définir l'arborescence des pages
  Définir le contenu et les scénarios de page
  Ecrire pour le Web

B. DreamWeaver

Introduction à DreamWeaver

• L'interface DreamWeaver
  Manipuler les fenêtres, barres d'outils, menus...
  Configurer les péréferences

Créer une page et Insérer différents contenus dans une page

• Créer une page
  Créer et configurer un nouveau site
  Organiser les dossier du site
  Créer un nouveau document, le modifier, l'enregistrer
• Définir les propriétés de la page
  
• Insérer du texte et le mettre en forme
  Quelques notions de HTML et styles CSS
  Insérer du texte et l'organiser…
  Mettre en forme le texte
  Créer des liens hypertextes
• Insérer des images
  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
  Mettre en forme un tableau
• Insérer un élément Flash

Mettre en forme avec les styles CSS

• Principe des styles
• Créer et appliquer des  styles avec DreamWeaver
  Définir un style : les différentes étapes
  Appliquer un style
  Les sélecteurs et propriétés
• Stocker les styles dans un document externe
  Créer et modifier une feuille de style,
  

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

Créer une mise en page, créer un modèle de page

• Créer un document "type"
  Créer un nouveau document à partir d'un modèle de conception
  Modifier l'aspect du document avec les styles
  Modifier la mise en forme des contenus avec les styles
• Créer un modèle de page à partir du document "type"
  Ajouter des zones modifiables au modèle
• Créer un nouveau document à partir du modèle
  
• Insérer et mettre en forme les contenus
  

Utiliser les éléments de bibliothèque

• Qu'est ce qu'un élément de bibliothèques ?

• Créer et modifier un élément de bibliothèque
• Insérer un élément de bibliothèque dans une page

Publier le site

• Contrôler le site avant publication
  Vérifier le site avant publication : contrôle des liens, erreurs...
  Configurer le compte FTP dans DreamWeaver
  
• Publier le site
  Synchroniser un site
  Mettre à jour un document et le publier

C. Dynamiser les pages Web

Principe de construction d'une page dynamique

• Présentation des éléments de navigation et effets disponibles
• Définir les scénarios de page, organiser les effets dans la page

Insérer des éléments de navigation SPRY

• Créer un menu déroulant, habiller le menu déroulant
• Créer et habiller des panneaux à onglet
• Créer et habiller des panneaux réductibles
• Créer et habiller un accordéon
• Créer une page avec un menu déroulant et un panneau à onglets

Valider un formulaire avec SPRY

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

Insérer des comportements

• Principe des comportements
  les actions, les événements déclencheurs
• Afficher/Masquer un élément, déplacer un élément...
• Agrandir/réduire un élément, assombrir/éclaircir un élément

Insérer des effets via Adobe Widget Browser

• Installer le navigateur de Widgets "Adobe Widget Browser"
• Télécharger de nouveaux widgets
• Insérer un widget dans une page Web
  Exemple : une galerie de photos avec effet type "lightbox"

Ajouter une extension à DreamWeaver

• Principe des extensions
• Découvrir la large éventail d'extensions proposées
• Télécharger, installer et utiliser une extension

Déroulement de la formation

La formation est ponctuée de nombreux exemples donnant aux stagiaires 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, insertion des effets et éléments de navigation...