Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Dreamweaver le retour Avec Les Formulaires Les Calques
Les Feuilles de Style Les Comportements Le Scénario Les Modèles La Gestion De Site Produit et réalisé par Amir
2
Les formulaires A quoi ça sert?
Récupérer des infos provenant de l’utilisateur afin de les utiliser dans différents traitements. Comment? L’utilisateur remplit des champs, coche des cases etc. et les valeurs sont envoyées à une page qui va s’en servir.
3
Création d’un formulaires
Insertion>formulaire Ou Zone de formulaire L’adresse de destination des données Nom du formulaire Méthode d’envoie des donnée Mode d’ouverture de la page de destination
4
Éléments du formulaires
Un formulaires dispose de nombreux éléments pour récupérer des données Menu / liste Champ caché Case à cocher Bouton radio Bouton Image Zone de texte Texte Reroutage Fichier Étiquette
5
Exemple
6
Les Calques A quoi ça sert? Structurer la pages. Comment?
Les Calques sont des zones dont on peut définir la taille et l’emplacement exacte sur la page, on y met ensuite ce qu’on veut.
7
Création d’un calque Insertion>calque Ou
W: hauteur L: largeur dimensions Nom du calque Type de balise HTML L: position à partir du bord gauche S: position à partir du bord haut Position (en pixel) Couleur d’arrière plan Débordement Partie visible du calque Visibilité Ordre des calques Propriétés du calque sur Dreamweaver
8
Manipulation des calques
Les déplacements se font à l’aide des Propriétés, à l’aide des touches directionnelles du clavier ou directement avec la souris en déplaçant On peut superposer deux calques à l’aidede z-index dans les propriétés ou dans fenêtre>autres>calques ou F2 On peut aligner des calques. On sélectionne les calques à aligner et le calque de reference en apuyant sur shift et on fait modifier>aligner> Z=1 Z=2
9
Utilisation des Calques
On peut aussi mettre un calque dans un autre à l’aide de la fenêtre calque et cela est très utile. On peut définir un calque père avec ses dimensions, et définir tout les autres comme enfants et petits enfants et définir la taille en pourcentage par rapport à la taille du père, utile pour les mises à jour. Un calque peut aussi être visible ou caché.
10
Exemples de calques
11
Les Feuilles de style CSS
C koi? Comme vous le savez peut être tout le code HTML et formé de balises. Ces balises porte un nom <a>, <p> etc., on peut aussi identifier une balise par sa classe en définissant un nom de classe pour une balise. Les feuilles de style permettent de définir tout les attributs d’une balise qu’on désigne par son nom ou sa classe, sur une autre page de type .css ou avant la balise <body>
12
Les feuilles de style A quoi ça sert?
Alléger le code HTML, le fichier CSS et charger une seule fois sur le PC et mis de coté pour une future utilisation. Lisibilité du code. Appliquer des styles différents à une même page en modifiant uniquement la feuille de style. Définir un style pour plusieurs pages à l’aide d’un seule fichier CSS.
13
Création de CSS Fenetre>style CSS Nom de la nouvelle classe
Importer un style Supprimer le style … Nouveau style Modifier le style Feuille interne Feuille externe Nom de la nouvelle classe
14
Définition d’un style (suite)
15
Exemple avec les formulaires
16
Les comportements A quoi ça sert?
Donner de l’interactivité à la page en ajoutant des effets visuels enclenchés par l’utilisateur. Comment? Génère du code Javascript.
17
Définition d’un comportement
Pour définir un comportement il faut: Une balise (calques, image, …) Un événement (clic, survol, …) Une action (afficher ou masquer un élément, déplacer un élément).
18
Création d’un comportement
Ouvrir fenêtre>comportements ou Maj.+F3 Sélectionner un objet une balise, puis cliquer sur ajouter un comportement Supprimer un comportement Ajouter un comportement Événement Action
19
Création d’un comportement(suite)
Définir une action Définir un événement Quand l’utilisateur arrête le téléchargement d’un doc Quand utilisateur clique en dehors d’une zone sur un élément (=lien) deux fois sur un élément Quand le navigateur rencontre une erreur Quand l’élément spécifié devient le focus Quand un téléchargement se termine Quand l’utilisateur déclenche le bouton de la souris bouge la souris sur l’élément spécifié Quand le pointeur sort de l’élément spécifié Quand le pointeur passe sur l’élément spécifié Quand un bouton de la souris est relâché
20
Exemple avec la page de calque
On affiche les liens en passant la souris sur un Menu ou Liens
21
Les Scénarios A quoi ça sert?
Créer des animations en modifiant la taille, la position, la superposition des calques sur sur une échelle temporelle à la manière de Flash. S’utilise aussi avec des sons et le comportement.
22
Nombre d’images par seconde
La fenêtre scénario Défilement avant/arrière image par image Canal de comportements rembobiner Nombre d’images par seconde Contrôles de lecture Image en cours calques Canaux d’animation Images clés Fenêtre > Autres > Scénarios
23
Un site qui se structure à l’aide du scenario
Exemples Un site qui se structure à l’aide du scenario
24
Mise en oeuvre Sélectionner un calque.
Faire modifier>scénario>enregistrer le chemin du calque Déplacer le calque à votre guise. Vous pouvez ensuite choisir de démarrer l’animation automatiquement ou la lancer à l’aide d’un comportement ajouter>scénario>lire
25
Les modèles C koi? Un modèle est une page qui va servir de base.
Cette page possède des zones modifiables et non modifiables. A quoi ça sert? Si on souhaite, avoir la même allure générale pour plusieurs pages. De plus, une modification du modèle entraîne la modification des pages qui l’utilisent
26
Création d’un modèle La manière la plus simple est de définir une
page de base comme nous l’avons déjà fait puis de définir les zones que l’on aura le droit de modifier. Pour cela faite, insertion>objet modèle> région modifiable et cliquez sur le calque correspondant. Le fichier sera automatiquement transformé en modèle.
27
Mettre à jour des pages Ouvrez le modèle, modifiez le, enregistrez et
vous devriez avoir une boite de dialogue vous invitant à mettre à jour les pages. Sinon faites, modifier>modèles>modifier les pages, sélectionnez le site entier et cochez modèles
28
Exemples Seule zone modifiable
29
Mise en ligne d’un site Mise en ligne du site
Créer ou modifier un site (Site > Nouveau site ou Site > Modifier les sites) Donner un nom au site Choisir ou non une technologie serveur Définir l’emplacement local du site Choisir le mode de connexion ftp et remplir les champs comme suit : sunserv.utc.fr
Présentations similaires
