La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

On va découvrir la magie de ....

Présentations similaires


Présentation au sujet: "On va découvrir la magie de ...."— Transcription de la présentation:

1 On va découvrir la magie de ....

2 Préambule : 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 Mise en forme : propriétés de formatage du texte (titre, liste, gras, tableau…) Langage structuré à l’aide de balises

3 Lien entre document et fichier HTM
Un document, c’est : Un fichier .htm, c’est : <HTML> <HEAD> <TITLE>Ma 1ère page Web</TITLE> </HEAD> <BODY> ~~~~~~~~~~ (contenu du document) </BODY> </HTML> Une en-tête TITRE Un corps CONTENU 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….

4 Construire un site web local Conclusion
Programme à suivre: Présentation L ’espace de travail Construire un site web local Conclusion

5 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.

6 L’espace de travail L'espace de travail

7 Espace réservé pour l’image
Panneau OBJETS Commun Ancre nommée Image survolée Barre horizontale Données tabulées Hyperlien HTML fireworks Sélecteur de balise Calque Image Espace réservé pour l’image Date Lien de messagerie Commentaire Insérer un tableau HTML fireworks Barre de navigation

8 L’inspecteur de propriétés
alignement du texte passage en mode CSS couleur de la police appliquer un format Indentation du texte créer un lien 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

9 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

10 Création d'un nouveau site
Dans la barre des menus, aller sur Site  Nouveau site ……

11 Suivez les instructions, ou passez en mode Avancé

12 Le mode Avancé

13 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 ».

14 Afficher Pour que l’affichage soit facile à voir, on peut choisir Création Le nom et l’adresse de notre website Les modes d’affichage: Code: voir seulement la code HTML Création: voir seulement l’espace de notre website Code et création: voir les deux Pour afficher les autres outils (règles, grilles …) vous pouvez choisir dans ce menu

15 Nous travaillons sur ce mode
Maintenant (et aussi par défaut), nous travaillons sur le mode standard Ici, c’est le mode Mise en forme Nous travaillons sur ce mode Attention

16 Nous allons créer un siteweb d’un étudiant de L’UTC
Insertion des textes Dans l’espace de travail, vous pouvez insérer des textes comme dans logiciel de Microsoft Word Exemple : Nous allons créer un siteweb d’un étudiant de L’UTC

17 Pour visualiser les pages avec un navigateur, sans quitter DW
Tapez F12 Ou : Fichier > Aperçu dans le navigateur Tapez ici votre texte Pour changer la taille, les couleurs …., utiliser ces outils

18 Insérer une image Comme dans Microsoft Word, vous pouvez insérer une image directement: Menu Insertion  Image (ou Ctrl+Alt+I)

19 Mais vous allez avoir une problème car il est difficile de déplacer l’image
Solution: Avant d’insérer une image dans l’espace de travail, il faut dessiner un calque Dans le panneau Objets, cliquez sur l’icône Dessiner un calque Puis cliquez et faîtes glisser le curseur sur la zone de travail

20 Modification d’un calque
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. Pour modifier les dimensions, servez-vous des poignées ou utilisez le Panneau Propriétés.

21 Insérer une image Cliquez à l’intérieur du calque précédemment créé puis cliquez sur le bouton Image dans le panneau Objets Ou :

22 Image survolée Une petite animation possible est de faire apparaître une image lorsqu’on survole une autre image Cliquer sur Insérer une image survolée dans le panneau Objets Choisissez l’image originale qui apparaîtra lorsque le site sera chargé Choisissez l’image survolée qui apparaîtra lorsque la première image sera survolée Tapez F12 et voyez le résultat !

23 Le mode Mise en forme C’est ici, le mode de mise en forme Le mode de mise en forme est le mode qui permet de structurer et d’agencer le plus facilement les éléments sur la page

24 Insertion d’une cellule de mise en forme
Quelque soit l’objet à insérer sur le site, il sera toujours incorporé à l’intérieur d’une cellule de mise forme Dans le panneau Objets, cliquez sur l’icône Dessiner la cellule de mise en forme Puis cliquez et faîtes glissez le curseur sur la zone de travail

25 Modification d’une cellule
Pour modifier une cellule (position, dimensions…), cliquez sur un bord d’une cellule. Des petites poignées apparaissent. Pour modifier la position, cliquez sur un bord de la cellule et faites glisser. Pour modifier les dimensions, servez-vous des poignées ou utilisez le Panneau Propriété.

26 Insérer un texte et des images
Pour insérer un texte: Insérez d’abord une cellule de mise en forme. Vous n’avez ensuite qu’à taper le texte dans la cellule Pour insérer des images : La méthode c’est la même pour insérer dans un calque Pour modifier un texte, utilisez le panneau Propriétés

27 Fond de la page Il y a deux façons pour modifier le fond d’une page: La barre des menus  Modifier  Propriété de la page cliquez sur le bouton droite de souris  Propriétés de la page ou

28 Fond de la page (suite) Choisir une image pour le fond
Si vous n’aimez pas une image, vous pouvez choisir une couleur pour le fond

29 Création de liens Exemple:
Créer un lien vers le web de l’UTC quand on clique sur le mot UTC D’abord, tapez « UTC » . Ensuite, 2 possibilités : Soit appuyer le bouton à droite de souris  Créer le lien Soit aller sur la barre des menus et choisir Modifier  Créer le lien

30 Après vous allez donner l’adresse de lien dans la partie URL
Dans notre cas, nous allons choisir URL : Pour changer le lien, procéder de la même façon que Créer un lien mais choisir Modifier le lien. Pour effacer le lien, choisissez Supprimez un lien

31 Sélectionnez Voir mes photos et choisissez le ficher photos.html
Si vous voulez créer un lien vers un autre fichier dans votre website, vous pouvez choisir directement ce ficher dans la partie Créer un lien Exemple: Sélectionnez Voir mes photos et choisissez le ficher photos.html  (bien entendu il y a déjà un fichier photos.html) Voilà ! C’est parti

32 Création d’un lien de messagerie
Sélectionnez le texte sur lequel vous voulez créer un lien Egalement 2 possibilités : Soit cliquer sur le bouton Soit aller sur la barre des menus  Insertion  Lien de messagerie

33 Lien vers l’UTC Lien vers photo.html Lien de messagerie

34 Les tableaux Se placer sur l’onglet Tableau Cliquer sur le bouton

35 Insérer un tableau Espacement entre le contenu et les bords de la cellule Cellules collées (0) ou séparées Epaisseur du cadre (0 pour invisible) Occupation de la page

36 Propriétés du tableau Mêmes options qu’à l’insertion
Couleurs des traits Efface les marges définies explicitement (le tableau se cadre sur le contenu des cellules)

37 Propriétés des cellules
Définir le une cellule comme intitulé de ligne ou de colonne Alignement du texte dans la cellule

38 Les tableaux : exemples simples

39 Les cadres (Frames) Principe : diviser une page Web en plusieurs parties Utilité : affichage permanent d’un logo, d’une barre de navigation… Différents formats sont proposés (mais tout reste envisageable : il suffit de taper le code HTML correspondant !)

40 3 zones, 4 pages 2 Logo/En-tête 3 1
Fenêtre principale (où vont s’afficher toutes les pages) Navigation 4 Définition du jeu de cadres

41 Définition des pages 1) Définition d’une page « En-tête »
2) Définition d’une page «Navigation» 3) Définition d’une page principale 4) Enregistrement du jeu de cadres

42 Résultat….

43 Conclusion Notions abordées : A venir… HTML bloc-notes
création du site sous dreamweaver formatage du texte insertion d’images insertion et gestion des tableaux gestion des cadres (frames) A venir… les calques les comportements les formulaires les feuilles de style les modèles mise en ligne du site


Télécharger ppt "On va découvrir la magie de ...."

Présentations similaires


Annonces Google