Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Dreamweaver MX
2
Plan de l’exposé Introduction au HTML Présentation de Dreamweaver
Création d’un site local Insertion de texte Listes Tableaux
3
Plan de l’exposé Insertion d’images et d’animations simple Texte Flash
Boutons Flash Liens Frames
4
Définition du HTML Html : HyperText Markup Language : langage de mise en forme de documents hypertextes Hypertexte : textes qui contiennent des références croisées Hypertexte : Mise en forme : propriétés de formatage du texte (titre, liste, gras, tableau…)
5
Définition du HTML Langage structuré à l’aide de balises
Quelques balises courantes : <H1> à <H6> Titres par importance décroissante, <BR> Sauter une ligne, <P> Pour un nouveau paragraphe, <B> Pour mettre en gras, <UL>+<LI> Liste <a href lien hypertexte …
6
Lien entre document et fichier HTML
Un document Un fichier .html Une en-tête TITRE Un corps CONTENU <HTML> <HEAD> <TITLE>Ma 1ère page Web</TITLE> </HEAD> <BODY> ~~~~~~~~~~ (contenu du document) </BODY> </HTML>
7
Exemple
9
Présentation de Dreamweaver MX
Dreamweaver MX est un éditeur HTML destiné à la création de sites web professionnels et au développement de puissantes applications dynamiques pour Internet Dreamweaver MX facilite la mise en œuvre et fournit les outils appropriés pour élargir votre expérience dans le domaine de la conception web.
10
L’espace de travail Espace de travail Propriétés Objets Communs
5 panneaux Rétractables Espace de travail Propriétés
11
Espace réservé pour l’image
Panneau Insertion Ancre nommée HTML fireworks Image survolée Barre horizontale Sélecteur de balise Hyperlien Calque Données tabulées Image Lien de messagerie Date Espace réservé pour l’image Commentaire Insérer un tableau Flash Barre de navigation
12
L’inspecteur de propriétés
alignement du texte Changement de police couleur de la police appliquer un format créer un lien Indentation du texte Dimensions d’une cellule Mise en forme d’un texte Liens … Ce panneau permet de modifier les propriétés des objets insérés
13
Panneaux à droite Inspecteur de balises
bibliothèques de code Gestion des styles et des comportements utilisation de données dynamiques gestion des pages gestion des ressources du site
14
Création d’un nouveau site
Dans la barre des menus, aller sur Site Nouveau site …… Etape nécessaire pour pouvoir utiliser des liens relatifs !
15
Liens Absolus !
16
Liens Absolus !
17
Suivez les instructions, ou passez en mode Avancé
18
Le mode Avancé
19
Suivre les instructions
On va choisir les options suivantes: Entrez le nom de votre site (ex: Mon website) Ne pas utiliser de technologie serveur Modifier les copies locales… et indiquer le répertoire du site Pour l’instant, nous travaillerons sur un serveur local, donc donnez encore une fois le répertoire de votre site Ne pas activer l’archivage et l’extraction Et enfin « terminer ».
26
Apparition de l’arborescence de notre site dans le panneau fichiers
27
Première Page sous Dreamweaver
Cliquez ici
28
Mode d’affichage Il existe trois mode d’affichage sous Dreamweaver :
Code : voir le code html uniquement Création : voir la page html Code et création : affichage simultanée du code et de la page
29
Afficher Choix du mode d’affichage
Le nom et l’adresse de notre website Pour afficher les autres outils (règles, grilles …) vous pouvez choisir dans ce menu
30
Insertion des textes Dans l’espace de travail, vous pouvez insérer des textes comme dans tout éditeur de texte (Microsoft Word, ou le bloc notes).
31
Formatage de texte Trois choix possibles : Menu Texte
Panneau propriété Sélection du texte + clique droit souris Exemples : en tête, polices, styles, couleurs,…
33
Pour visualiser les pages avec un navigateur, sans quitter Dreamweaver Tapez F12
Ou : Fichier > Aperçu dans le navigateur
34
Modification du fond Menu modifier Propriété de la page
Modifier la couleur du fond Ou mettre une image en fond
38
En H1 Un paragraphe Le titre
39
Les listes Listes à puces Listes numérotées
Listes de définitions (présente les termes suivis de leur définition)
42
Application Réalisation de plan.htm : deux listes.
Une liste « Accueil » à 3 puces (html,dreamweaver, frames) Une liste « Sites Utiles » à 4 puces (liens vers google, utc, macromédia et si28) Les listes sont séparées par une barre horizontale.
44
Les Tableaux On peut insérer un tableau de deux manières différentes :
Clic sur la boîte à outil tableau A partir du menu : Insertion/Tableau
45
Propriétés du Tableau Propriétés d’insertion
Propriétés détaillés du tableau Formatage classique d’un tableau Ajustement automatique en ligne et en colonne Choix des unités de mesure (pixel ou %)
46
Propriétés des cellules
Possibilités de rajouter un lien Formatage classique de cellules Fractionnement de cellule Définition de cellules d’en tête de tableau
47
Images et Animations simples
Pour pouvoir manipuler aisément un image sous Dreamweaver, il faut l’insérer au préalable dans un calque Via la barre d’outil ou le menu Pour modifier un calque (position, dimensions…), cliquez sur un bord d’un calque. Des petites poignées apparaissent. Pour modifier la position, cliquez sur un bord de la cellule et faites glisser
48
Images et Animations simples
Images survolés Un image survolé est un genre d’animation facile à éditer sous Dreamweaver. On accède à ce genre d’animation à partir de la barre d’outil ou du menu Insertion/Images interactives Il suffit alors de choisir les deux images que vous voulez alterner lors du survol de la souris dans les fenêtres de propriétés.
49
Texte Flash Choix des deux couleurs de l’animation
Ce genre d’animation permet la modification de la couleur du texte lors du survol de la souris Pour créer un texte flash, aller dans menu : Insertion/Images interactives/Text Flash Choix des deux couleurs de l’animation
50
Possibilité d’ajouter un lien
Boutons Flash Le bouton flash s’insère aussi à partir du menu : Insertion/Images interactives/Bouton Flash Possibilité d’ajouter un lien
51
Liens Il existe plusieurs types de liens :
Les liens absolus externes au site, par exemple : href = Les liens internes au site : par exemple : href = accueil.html Les liens vers une partie du même document, effectués à partir des signets (#étiquette) Les liens de messagerie : fonction « mailto » du navigateur L’attribut « target » définit la fenêtre où sera affiché la page du lien target = _blank affichage dans une nouvelle fenêtre target = _self affichage dans la fenêtre ou le cadre courant(e) target = _parent ou _top affichage par écrasement de toute la page Pour accéder à ces liens on peut utiliser le menu: Insertion/ ou bien les barres d’outils de la rubrique commun RMQ : On a aussi la possibilité de sélectionner un texte et de le transformer en lien, en spécifiant l’attribut lien dans sa propriétés Lien hypertexte externe ou interne au site Lien de messagerie Ancre nommée
52
Les Frames (cadres) Frames = Regroupement de cadres permettant un affichage réparti, dynamique et ordonné des pages html Objectif des frames = assurer une bonne navigation (via l’existence d’au moins un cadre accompagnateur qui affichera le plan du site et/ou le plan des différentes parties ) exemple : Le site CINEMA Caractéristiques : Un frame est un fichier html particulier qui contient : Les dimensions des cadres Un nom de référence pour pouvoir activer les liens sur un cadre spécifique des frames en question
53
Les Frames (cadres) Il existe deux méthodes pour créer les frames :
En allant dans le menu : Fichier/Nouveau/Jeux de cadres Ou en sélectionnant le menu « cadres » à partir d’un document vierge
54
Frames Menu Fenêtre autres Cadres
Pour sélectionner les propriétés d’une frame particulières, vous pouvez : Menu Fenêtre autres Cadres Cela permet d’afficher un schéma de votre cadre et de vous montrer sur quelle zone de votre fenêtre vous travaillez. Alt + click sur le cadre voulu Sélectionne directement la zone de travail.
56
On travail sur cette zone, qui correspond à :
57
Frames Après avoir choisi le modèle de votre « frames » et après avoir défini ses dimensions, entrer dans le mode Code pour définir ses pages de chargement. L’attribut « src » référence le fichier à charger dans le cadre (src=plan.htm) L’attribut « name » spécifie la cible définie par « target » (name=topFrame) RMQ : chaque cadre doit posséder un nom de référence, pour que les liens puissent pointer sur un élément spécifique des « frames » Exemple: si le cadre nommé « topFrame » existe, je peux envoyer la page « accueil.htm » dans ce cadre en spécifiant « cible= topFrame » dans le mode création (href=accueil.htm target= topFrame [en mode code])
58
Frames Un façon plus simple pour définir les pages de chargement serait de sélectionner un zone de travail (un cadre de travail cf diapo précédente) puis d’utiliser l’icône cible (dans le panneau propriété en bas)en cliquant dessus puis d’aller sélectionner la page voulue aux niveau de l’arborescence de votre site dans le panneau à droite : fichiers Icône Cible
59
Ici on sélectionne index.htm
60
Et voilà le résultat
Présentations similaires
