Formation Dreamweaver Lyon

Les outils de création Web

• Principe et langages du web
• Les navigateurs et les éditeurs de sites web
• Outils graphiques et multimédia

Introduction à Dreamweaver ®

• Créer et configurer un site
• Interface : menus, palettes, panneaux, outils
• Différentes vues : code, design,…
• Aides à la mise en page : grilles, règles, …
• Modifier l’interface utilisateur
• Les préférences de Dreamweaver
• Créer les fichiers du site
• Le « Site Map »

Fonctions et outils d’édition

• La page et son texte
• Propriétés de la page. Insérer du texte
• Formater le texte : gras, italique, police, couleur, etc.
• Mettre en page le contenu : titre, paragraphe, liste, justification, indentation…
• Importer du contenu (Word, Excel, .TXT, XML, etc.)

Gérer les images avec Dreamweaver

• Formats d’images : description, comparaison
• Insérer les images et les images de fond
• Les propriétés des images. Panneau Actifs
• Retouche d’image avec Fireworks ou Photoshop
• Utilisation : menu, navigation, visuels, photos, icônes

Les liens hypertextes

• Insérer un lien sur du texte ou une image
• Les liens relatifs et les liens absolus
• Savoir créer des ancres nommées
• Liens FTP, mailto, Usenet…
• Les zones sensibles (images maps)

Les tableaux sous Dreamweaver

• Créer et utiliser des tableaux
• Insérer et mettre en forme un tableau
• Tableaux et mise en page
• Modifier un tableau : cellules, colonnes, lignes
• Importer des données tabulaires

Préparer son projet de site Web

• Savoir définir ses besoins
• Déterminer son cahier des charges
• Connaître les règles de conception
• Organiser sa production

Mise en application

Les feuilles de style

• Le langage
• Les sélecteurs
• Les propriétés graphiques
• Les calques positionnés
• Inspection CSS (CS5)

Le Javascript

• Ajouter des commandes

Les formulaires

• Validation en JavaScript
• Introduction au Web dynamique (PHP, CGI, SSI)
• Principes et vocabulaire
• Traitement des formulaires par des scripts serveur

Modèles : notions avancées

• Imbrication de modèles, attributs modifiables
• Contexte
• Conception
• Utilisation

Interactivité

• Gestion dynamique des calques
• Comportement et scénario
• Appliquer des comportements
• Javascript et les comportements
• Indicateurs de code spécifiques au site (CS5)

Mise en ligne avancée

• Gestion avancée du site
• Extraire – Archiver
• Fonction de synchronisation
• Vérification de l’intégrité du site
• Nettoyage du code
• Rapport

Mise en application

Les fondamentaux du Web

• Qu’est ce qu’un « hébergement »?
• Qu’est ce qu’un « nom de domaine » ?
• Relation entre URL et IP
• Structure d’une URL
• Rôles des DNS
• Le mode « Client / Serveur »
• Les principaux langages utilisés par le web (Php, Javascript, Html, Css, Ajax)
• Les organisations (W3C, AFNIC, WHOIS..)
• Les protocoles de communication (Pop, Smtp, Ftp, Http…)
• Les unités (pixel, em, %, Dpi…)
• Utilisation du FTP

Définir son projet Web

• Bien identifier sa cible ainsi que ses besoins
• Choisir les fonctionnalités du site
• Structuration de l’offre
• Arborescence, ergonomie et design
• Choix de la charte graphique

Les bases de Dreamweaver

• Présentation de l’environnement de travail
• Mode visuel, mode éditeur
• Prévisualtion dans un navigateur
• Affichage local / affichage distant

Les tableaux

• Utilité, création et modification
• Largeur de colonnes et hauteur de lignes
• Bordures et arrière plan
• Création d’un tableau x lignes x colonne
• Taille du tableau en pixel ou en pourcentage
• Insertion de nouvelles lignes ou colonnes
• Fusion de cellules
• Couleur de fond sur tableau, ligne, ou colonne

 Les images

• Les différents formats
• Insertion et positionnement dans la page
• Les effets de survol et mappage d’une image

Les liens hypertextes

• Sur texte et sur image
• Liens vers email
• Liens internes au site
• Liens externes
• Couleur des liens (actif, visited, hover, link)
• Cible des liens (blank, parent)

Propriétés de la page Web

• Gestion de l’arrière plan
• Couleur de la police par défaut
• Couleur des liens
• Marges
• Encodage (iso, utf-8

Frames et cadres

• Objectifs et création des cadres
• Lien vers un cadre précis : les « target »
• Redimensionnement
• Barre de défilement
• Couleur des bordures

Gérer des sites avec Dreamweaver

• Création d’un dossier racine local du site
• Organisation de l’arborescence d’un site
• Vérification des liens et plan de site
• Publication d’un site avec Dreamweaver

Les formulaires

• Utilité d’un formulaire
• Les différents champs de saisie d’un formulaire
• La validation d’un formulaire
• La sécurisation d’un formulaire

Les styles

• Limites liées aux navigateurs
• Création de styles utilisateurs
• Modification de styles existants
• Styles intégrés dans une page
• Styles et feuille de styles (CSS)
• Inspection CSS (CS5)

Les modèles de pages

• Créer un modèle
• Définir des zones modifiables
• Créer des pages à partir d’un modèle
• Mise à jour du modèle et des pages

Calques et comportements

• Création, dimensionnement et positionnement
• Relations entre calques et tableaux
• Gestion des événements OnClick, onMouseOver
• Comportements
• Téléchargement de comportements

Le langage HTML5/CSS3

• Dernière évolution de l’HTML/CSS
• Généralités (définition, fonctionnement, écriture)
• Structure d’un document
• Les principales balises
• Les balises et attributs obsolètes
• Mise en page
• Liens
• Images
• Compatibilité des navigateurs
• Le Doctype
• Balises Vidéo et audio
• Balises de formulaire

Feuilles de style CSS3

• Les sélecteurs
• Combiner les sélecteurs
• Grouper les sélecteurs
• Les pseudo-classes
• Manipulation des propriétés CSS

Les API de l’HTML5

• Le dessin avec la balise Canvas
• Le drag and drop
• Le stockage de données
• La gestion des évènements

Les plus du CSS3

• Les bordures arrondies
• La transparence
• Les ombres portées
• Les animations (transitions et transformations)

Finaliser son site Web

• Installer sa charte graphique
• Choisir le nom de domaine et l’hébergement
• Finaliser la création du contenu
• Mise en ligne

Mise en application